/* SpeedShot Design „neu" – Haut für unveränderte Basis-Inhalte (Warenkorb,
   Kasse, Bestellstatus, Download, Kundenkonto, Login/Registrierung).
   Die Basis-Views bleiben 1:1 (Logik/Formulare unverändert); hier werden nur
   ihre Theme- und Tailwind-Hellklassen auf das dunkle SpeedShot-Design gelegt. */

.ssn-skin{font-family:var(--f-ui)}
.ssn-skin h1,.ssn-skin h2{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.ssn-skin h1{font-size:34px}
.ssn-skin h2{font-size:26px}
.ssn-skin .card,.ssn-skin .bg-white{background:var(--surface)!important;color:var(--text)}
.ssn-skin .card{border-radius:var(--r-l)!important}
.ssn-skin .ringc,.ssn-skin .ring-1,.ssn-skin .ring-slate-200,.ssn-skin .ring-slate-100{box-shadow:inset 0 0 0 1px var(--line)!important}
.ssn-skin .muted,.ssn-skin .text-slate-400,.ssn-skin .text-slate-500,.ssn-skin .text-slate-600,.ssn-skin .text-gray-500,.ssn-skin .text-gray-600{color:var(--muted)!important}
.ssn-skin .text-slate-700,.ssn-skin .text-slate-800,.ssn-skin .text-slate-900,.ssn-skin .text-gray-700,.ssn-skin .text-gray-900{color:var(--text)!important}
.ssn-skin .bg-slate-50,.ssn-skin .bg-slate-100,.ssn-skin .bg-gray-50,.ssn-skin .bg-gray-100{background:var(--surface-2)!important}
.ssn-skin .hover\:bg-slate-100:hover,.ssn-skin .hover\:bg-slate-50:hover{background:var(--surface-3)!important}
.ssn-skin .border,.ssn-skin .border-t,.ssn-skin .border-b,.ssn-skin .border-slate-200,.ssn-skin .border-slate-300{border-color:var(--line-2)!important}
.ssn-skin button.bg-slate-900,.ssn-skin a.bg-slate-900,.ssn-skin .btn-p,.ssn-skin .btn-a,.ssn-skin .btn-gold,.ssn-skin .bg-indigo-600{background:var(--lime)!important;color:var(--on-lime)!important;box-shadow:none!important;border-radius:12px!important;font-weight:700!important;transition:background .2s,transform .15s}
.ssn-skin button.bg-slate-900:hover,.ssn-skin a.bg-slate-900:hover,.ssn-skin .btn-p:hover,.ssn-skin .btn-a:hover,.ssn-skin .btn-gold:hover,.ssn-skin .hover\:bg-slate-700:hover{background:var(--lime-2)!important}
.ssn-skin .btn-p:active,.ssn-skin .btn-gold:active{transform:scale(.98)}
.ssn-skin .text-rose-500,.ssn-skin .text-rose-600,.ssn-skin .text-red-600{color:#FF7A7A!important}
.ssn-skin .text-emerald-600,.ssn-skin .text-emerald-700,.ssn-skin .text-green-600{color:var(--ok)!important}
.ssn-skin .text-amber-600,.ssn-skin .text-amber-700{color:var(--warn)!important}
.ssn-skin .bg-emerald-50,.ssn-skin .bg-green-50{background:color-mix(in srgb,var(--ok) 12%,var(--surface))!important}
.ssn-skin .bg-amber-50{background:color-mix(in srgb,var(--warn) 12%,var(--surface))!important}
.ssn-skin .bg-rose-50,.ssn-skin .bg-red-50{background:color-mix(in srgb,var(--bad) 12%,var(--surface))!important}
.ssn-skin a.underline,.ssn-skin .hover\:underline:hover{text-underline-offset:3px}
.ssn-skin input[type=text],.ssn-skin input[type=email],.ssn-skin input[type=password],.ssn-skin input[type=tel],.ssn-skin input[type=number],.ssn-skin input[type=search],.ssn-skin input:not([type]),.ssn-skin select,.ssn-skin textarea{background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--line-2)!important;border-radius:12px!important;min-height:46px;padding:10px 14px;font-size:16px;box-shadow:none!important}
.ssn-skin textarea{min-height:96px}
.ssn-skin input:focus,.ssn-skin select:focus,.ssn-skin textarea:focus{outline:0!important;border-color:var(--lime)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--lime) 22%,transparent)!important}
.ssn-skin input[type=checkbox],.ssn-skin input[type=radio]{accent-color:var(--lime);width:18px;height:18px}
.ssn-skin input[type=range]{accent-color:var(--lime)}
.ssn-skin label{color:var(--muted)}
.ssn-skin button[type=submit]:not(.ssn-btn):not(.ssn-link){min-height:46px}
.ssn-skin details summary{cursor:pointer}
.ssn-skin table{color:var(--text)}
.ssn-skin hr{border-color:var(--line)}

/* Shop-Kopf mit Schritten */
.ssn-steps-bar{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--faint)}
.ssn-steps-bar span{display:inline-flex;align-items:center;gap:6px}
.ssn-steps-bar i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line-2);font:700 12px/1 var(--f-ui)}
.ssn-steps-bar .is-on{color:var(--text)}
.ssn-steps-bar .is-on i{background:var(--lime);color:var(--on-lime);border-color:transparent}
.ssn-steps-bar .is-done i{background:color-mix(in srgb,var(--lime) 25%,transparent);color:var(--lime);border-color:transparent}
.ssn-steps-bar b{width:18px;height:1px;background:var(--line-2)}
@media(max-width:619px){.ssn-steps-bar span:not(.is-on) em{display:none}}
.ssn-steps-bar em{font-style:normal}
.ssn-shopmain{max-width:1040px;margin:0 auto;padding:22px 16px 110px}
@media(min-width:768px){.ssn-shopmain{padding:34px 28px 80px}}
.ssn-shophead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:20px}
.ssn-shophead h1{margin:6px 0 0;font:800 40px/.95 var(--f-display);text-transform:uppercase}
.ssn-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;color:var(--faint);font-size:12.5px}
.ssn-trust span{display:inline-flex;align-items:center;gap:6px}

.ssn-skin div.bg-slate-900,.ssn-skin section.bg-slate-900,.ssn-skin aside.bg-slate-900{background:linear-gradient(160deg,#1B2410,var(--surface-2))!important;color:var(--text)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lime) 30%,transparent)!important}
.ssn-skin a.bg-white.text-slate-900{background:var(--lime)!important;color:var(--on-lime)!important}
.ssn-dlgrid{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(max-width:560px){.ssn-skin .ssn-head:has(.ssn-steps-bar) .ssn-logo__img{height:14px}.ssn-steps-bar b{width:8px}}

/* Board #600: SpeedShot Pro in der gemeinsamen Auth-Schale (Layout product.auth.layouts.split,
   Grundstil public/product/auth/split.css wie teams.speedshot.net). Hier nur Marke + Hell/Dunkel. */
.ssn-skin .login{--au-primary:var(--lime);--au-secondary:#1B2A0A;--au-accent:var(--lime-ink,var(--lime));position:relative;min-height:100vh;min-height:100svh}
.ssn-skin .login .visual{background:#0E1208;color:#fff}
.ssn-skin .login .visual.noimg{background:radial-gradient(110% 120% at 80% 10%,rgba(168,204,0,.3),transparent 55%),linear-gradient(150deg,#1B2A0A,#0B0C0F 80%)}
.ssn-skin .login .au-rot{opacity:0;transition:opacity 1.2s ease}
.ssn-skin .login .au-rot.is-an{opacity:1}
.ssn-skin .login .band{opacity:.85}
.ssn-skin .login .v-in{flex-direction:column;align-items:flex-start;gap:8px}
.ssn-skin .login .v-in small{font-size:13px;color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.ssn-skin .au-marke{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:#fff;text-decoration:none}
.ssn-skin .au-marke__logo{height:26px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.ssn-skin .au-marke__pro{padding:5px 8px 4px;border-radius:6px;background:var(--lime);color:var(--on-lime);font:800 italic 18px/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.ssn-skin .au-top{position:absolute;top:12px;right:12px;z-index:5;display:flex;align-items:center;gap:8px}
.ssn-skin .login .au-top .ssn-iconbtn,.ssn-skin .login .au-top .ssn-link{min-height:44px;min-width:44px;border-radius:12px;background:rgba(11,12,15,.6);color:#fff!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ssn-skin .login .au-top .ssn-link{display:inline-flex;align-items:center;padding:0 14px;font-size:13px;font-weight:600}
.ssn-skin .login .panel{padding-bottom:calc(40px + var(--cc-h,0px))}
.ssn-skin .login .au-eyebrow{--club-accent:var(--lime-ink,var(--lime));letter-spacing:.12em;line-height:1.3}
.ssn-skin .login .au-inhalt{display:flex;flex-direction:column;margin-top:6px}
.ssn-skin .login .au-inhalt>h2,.ssn-skin .login .au-zwei__form>h2:first-child{order:-2;margin:4px 0 8px!important;font:800 40px/.95 var(--f-display)!important;text-transform:uppercase;color:var(--text)!important}
.ssn-skin .login .au-inhalt>.lead{order:-1;color:var(--muted);margin:0 0 22px}
.ssn-skin .login .who-gets div{min-height:44px;font-size:13px;border:1px solid var(--line)}
.ssn-skin .login .who-gets .ico{flex:none;width:18px;height:18px}
.ssn-skin .login .au-neu{font-size:14px;color:var(--muted)}
.ssn-skin .login .au-neu a{display:inline-block;padding:10px 2px;color:var(--lime-ink,var(--lime));font-weight:700}
.ssn-skin .login .tc-legal-footer a{padding:10px 0}
.ssn-skin .login a[href*="forgot-password"]{color:var(--au-accent)!important;font-weight:600}
/* Tap-Ziele ≥ 40 px: Textlinks im Fließtext (AVV, AGB, Datenschutz, Passwort vergessen) per padding-block ohne
   Zeilenänderung, Tarif-Reiter + „Alle Tarife vergleichen“ der Registrierung als Fläche. */
.ssn-skin .login .form a:not([class*="rounded"]){padding-block:13px}
.ssn-skin .login .au-zwei__seite a{display:inline-flex;align-items:center;min-height:40px}
/* Cookie-Banner (fixiert unten) darf Felder/Anmelde-Knopf nicht verdecken: Seitenende verlängert (oben),
   Fokus/Scroll halten Abstand zur Banner-Höhe (--cc-h aus neu.js). */
html:has(body.ssn-skin .login){scroll-padding-bottom:calc(var(--cc-h,0px) + 16px)}
.ssn-skin .login.au-breit .form{max-width:880px}
.ssn-skin .au-zwei{display:grid;gap:24px}
@media (max-width:1023px){
  .ssn-skin .login .visual{min-height:28vh;min-height:28svh}
  /* Handy: Bild läuft dunkel aus (Schrift auf dem Foto bleibt in Hell lesbar), darunter das Formular. */
  .ssn-skin .login .visual::before{background:linear-gradient(180deg,rgba(8,9,12,.35),rgba(8,9,12,.2) 35%,rgba(8,9,12,.85))}
}
@media (min-width:1024px){
  .ssn-skin .login .panel{padding-top:88px;padding-bottom:calc(48px + var(--cc-h,0px))}
  .ssn-skin .login .visual{position:sticky;top:0;align-self:start;height:100vh;height:100svh;min-height:0}
  .ssn-skin .login .visual::before{background:linear-gradient(0deg,rgba(8,9,12,.85),transparent 42%),linear-gradient(90deg,rgba(8,9,12,.1),rgba(8,9,12,.25) 70%,var(--bg))}
  .ssn-skin .au-marke__logo{height:40px}
  .ssn-skin .au-marke__pro{font-size:26px;padding:6px 10px 5px}
  .ssn-skin .login .v-in small{font-size:15px}
  /* Board #605: Logo + Bildzeile über dem Cookie-Banner (--cc-h setzt der Banner) */
  .ssn-skin .login .v-in{bottom:calc(48px + var(--cc-h,0px));transition:bottom .25s ease}
  .ssn-skin .au-top{top:20px;right:24px}
  .ssn-skin .login .au-top .ssn-iconbtn,.ssn-skin .login .au-top .ssn-link{background:var(--surface);color:var(--text)!important;border:1px solid var(--line-2);-webkit-backdrop-filter:none;backdrop-filter:none}
  .ssn-skin .login .au-inhalt>h2,.ssn-skin .login .au-zwei__form>h2:first-child{font-size:54px!important}
  .ssn-skin .login.au-breit{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
}
@media (min-width:1280px){.ssn-skin .au-zwei{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}}