/* Schoebel-Design für die Buchungsseite schoebel.online/niko/ (Niko 30.09.2026: „ins neue Schoebel-Design, mit Foto wie gehabt").
   Werte aus der Startseite schoebel.online (schoebel/Firmendaten/ki-check-web/ki-check/index.html):
   Nachtblau #14213d, Orange #fca311, Hellgrau #e5e5e5, Barlow Semi Condensed 800/500 + Inter 400.
   Schriften und Logo kommen von der Startseite (/ki-check/assets/), eine Quelle.
   Orange nie als Schrift auf Hell (Kontrast 1,9:1), nur als Fläche oder als Schrift auf Nachtblau.
   Server: /00-schoebel/niko/marke.css (index.php lädt sie mit Prüfsumme im Link). */
@font-face{font-family:"Barlow SC";font-weight:800;font-display:swap;src:url(/ki-check/assets/fonts/BarlowSemiCondensed-ExtraBold.ttf) format("truetype")}
@font-face{font-family:"Barlow SC";font-weight:500;font-display:swap;src:url(/ki-check/assets/fonts/BarlowSemiCondensed-Medium.ttf) format("truetype")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(/ki-check/assets/fonts/Inter-Regular.ttf) format("truetype")}

:root,:root:not([data-x]){
  --navy:#14213d; --orange:#fca311; --hell:#e5e5e5; --grau-h:#4a5468;
  --accent:#14213d;                       /* Hover-Rahmen, Zähler, Links: auf Hell nachtblau */
  --bg:#14213d; --panel:#ffffff; --ink:#14213d; --mut:#4a5468;
  --line:#e5e5e5; --chip:#f4f4f4; --chip-line:#d6d6d6;
  color-scheme:light;
}
body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--navy)}
/* Glättung wie auf der Startseite (Niko 30.09.2026: „Schrift gehört etwas fetter“): das Grund-Stylesheet setzt antialiased, das macht Barlow auf dem Mac dünner */
body{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
.card{border:0;border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.35)}

/* Linke Spalte = Bühne der Startseite: Orange, Nachtblau als Schrift */
.side{background:var(--orange);color:var(--navy);border-right:0;padding:30px 30px 34px}
@media (max-width:760px){.side{border-bottom:0}}
/* Logo als Link zur Startseite (a.marke-home aus index.php, nur auf schoebel.online) */
.marke-home{display:block;height:22px;margin-bottom:26px;background:url(/ki-check/assets/schoebel-logo-navy.webp) left center/contain no-repeat}
.avatar{width:100%;max-width:220px;height:auto;aspect-ratio:1/1;border-radius:50%;
  background:var(--navy);border:4px solid var(--navy);margin-bottom:22px}
@media (max-width:760px){.avatar{max-width:150px}}
.side h1{font-family:"Barlow SC",sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,3.4vw,40px);line-height:.92;letter-spacing:-.01em;margin:0 0 10px}
.side .who,.side p,.meta{color:#3a3326}
.side .who{font-family:"Barlow SC",sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.2em;font-size:13px}
.meta svg{opacity:1}

/* Rechte Seite: hell, Barlow-Etiketten wie die Startseite */
.step-title,.cal-title,.done h2{font-family:"Barlow SC",sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:0;font-size:24px;line-height:1}
.chip .d1,.cal-wd div,.series-list .tag,.picks label,.serie-fields label,.repeat-row label,label,.meetbox .lbl,.addcal .lbl{
  font-family:"Barlow SC",sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:12px}
.dur,.time,.chip,.cal-cell.has,.cal-nav,input,textarea,select,.chosen,.serie-toggle,.series-box,.meetbox,.who-info,.addcal a{border-radius:14px}
.dur{font-family:"Barlow SC",sans-serif;font-weight:800;font-size:24px;text-transform:uppercase;padding:22px 0}
.dur:hover,.time:hover,.chip:hover,.cal-cell.has:hover{border-color:var(--navy);background:var(--hell)}
.cal-count{color:var(--navy)}
input,textarea,select{background:#fff;border:2px solid var(--chip-line)}
input:focus,textarea:focus,select:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(20,33,61,.15)}

/* Knopf wie auf der Startseite: Orange-Pille, Nachtblau, Barlow in Versalien */
.btn{background:var(--orange);color:var(--navy);border-radius:999px;padding:16px 28px;min-height:56px;
  font-family:"Barlow SC",sans-serif;font-weight:500;font-size:16px;letter-spacing:.12em;text-transform:uppercase;
  transition:transform .2s}
.btn:hover:not(:disabled){transform:translateY(-2px)}
.done .tick{background:var(--orange)}
.done .tick svg{stroke:var(--navy)}
.meetbox a,.det-row .v a{color:var(--navy);text-decoration:underline}
.series-list li.free .tag{color:var(--navy)}
.spin{border-top-color:var(--orange)}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}

/* Seite: Karte oben, Rechtliches darunter (Niko 30.09.2026) */
body{flex-direction:column;gap:18px}
.rechtliches{display:flex;gap:22px;font-family:"Barlow SC",sans-serif;font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:13px}
.rechtliches a{color:#fff;text-decoration:none;opacity:.85}.rechtliches a:hover{opacity:1;color:var(--orange)}
/* Eingangsanimation wie die Startseite: Karte gleitet herein, Foto und Titel folgen */
@keyframes mbAuf{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes mbPop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.card{animation:mbAuf .7s cubic-bezier(.2,.8,.2,1) both}
.avatar{animation:mbPop .6s .25s cubic-bezier(.2,.8,.2,1) both}
.side h1,.side .who{animation:mbAuf .6s .35s cubic-bezier(.2,.8,.2,1) both}
.main{animation:mbAuf .6s .45s cubic-bezier(.2,.8,.2,1) both}
.rechtliches{animation:mbAuf .6s .6s both}
@media (prefers-reduced-motion:reduce){.card,.avatar,.side h1,.side .who,.main,.rechtliches{animation:none}}