/* Pitlane-Seite (px, weil Bricks die Root-Schrift auf 10px setzt) */
.sd-pl-h { margin: 0 0 32px; }

/* Zwei Wege */
.sd-pl-split { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 40px; align-items: start; }
.sd-pl-or { align-self: stretch; display: flex; flex-direction: column; align-items: center; color: var(--sd-muted); font-size: 15px; }
.sd-pl-or::before, .sd-pl-or::after { content: ""; flex: 1; width: 1px; background: var(--sd-border); }
.sd-pl-or span { padding: 12px 0; }
.sd-pl-bar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; margin-bottom: 28px; border: 1px solid var(--sd-border); border-radius: 999px; background: var(--sd-surface); overflow: hidden; }
.sd-pl-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #3ecf6b; box-shadow: 0 0 10px rgba(62, 207, 107, .6); }
.sd-pl-addr { font-family: var(--sd-font-mono); font-size: 14px; color: var(--sd-offwhite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-pl-path h3 { margin: 0 0 10px; font-size: 26px; line-height: 1.2; }
.sd-pl-path p { margin: 0 0 18px; color: var(--sd-muted); font-size: 16px; line-height: 1.6; max-width: 46ch; }
.sd-pl-path ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sd-pl-path li { position: relative; padding-left: 22px; font-size: 16px; }
.sd-pl-path li::before { content: ""; position: absolute; left: 0; top: .65em; width: 12px; height: 2px; background: var(--sd-red); }

/* Funktionen als Datenblatt */
.sd-pl-list { margin: 0; border-top: 1px solid var(--sd-border); }
.sd-pl-list div { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--sd-border); }
.sd-pl-list dt { font-weight: 600; font-size: 18px; }
.sd-pl-list dd { margin: 0; color: var(--sd-muted); font-size: 16px; line-height: 1.6; }
.sd-pl-priv { margin: 20px 0 0; color: var(--sd-muted); font-size: 15px; max-width: 70ch; }

/* Anbindung */
.sd-pl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.sd-pl-n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--sd-red); border-radius: 50%; color: var(--sd-offwhite); font-family: var(--sd-font-mono); font-size: 15px; margin-bottom: 16px; }
.sd-pl-steps h3 { margin: 0 0 8px; font-size: 20px; }
.sd-pl-steps p { margin: 0; color: var(--sd-muted); font-size: 16px; line-height: 1.6; }

/* CTA */
.sd-pl-price { margin: 0 0 24px; font-weight: 600; font-size: 16px; }
.sd-pl-btns { display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; }
.sd-pl-ext { color: var(--sd-offwhite); font-weight: 600; font-size: 16px; text-decoration: underline; text-decoration-color: var(--sd-red); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.sd-pl-ext:hover, .sd-pl-ext:focus-visible { color: var(--sd-red-hover); }

@media (max-width: 860px) {
	.sd-pl-split { grid-template-columns: 1fr; gap: 24px; }
	.sd-pl-or { flex-direction: row; }
	.sd-pl-or::before, .sd-pl-or::after { height: 1px; width: auto; }
	.sd-pl-or span { padding: 0 12px; }
	.sd-pl-list div { grid-template-columns: 1fr; gap: 4px; }
	.sd-pl-steps { grid-template-columns: 1fr; }
}

/* Screenshot pitlane.gg im Browserrahmen, ragt in den Hero hinein */
.sd-pl-shot { position: relative; z-index: 2; margin-top: -64px; }
.sd-pl-frame { margin: 0; border: 1px solid rgba(245, 243, 239, .14); border-radius: 12px; overflow: hidden; background: #1a1a1a; box-shadow: 0 40px 80px rgba(0, 0, 0, .55); }
.sd-pl-frame-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-bottom: 1px solid rgba(245, 243, 239, .1); }
.sd-pl-frame-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(245, 243, 239, .18); }
.sd-pl-frame-bar b { margin-left: 14px; padding: 4px 14px; border-radius: 999px; background: rgba(245, 243, 239, .07); font-family: var(--sd-font-mono); font-size: 12px; font-weight: 400; color: var(--sd-muted); }
.sd-pl-frame img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) { .sd-pl-shot { margin-top: -24px; } .sd-pl-frame-bar { height: 30px; } }