/* termin.css — Terminseite im neuen CI.
   Der Buchungsbereich (ab „Schrittanzeige") ist am 23.09.2026 wortgleich aus v4-termin.html
   uebernommen, damit alle Zustaende des Kalenders (frei, gewaehlt, belegt, laedt, stillgelegt)
   genau so bleiben, wie sie auf barzik.studio/termin gemessen und gefixt sind. Geaendert:
   die Variablen unten (ein Orange, Instrument Sans statt Mono), `.bk` links an der Inhaltskante
   statt zentriert, kein dunkleres Hover-Orange. */
:root{--ink:#16171A;--accent:#F26522;--accent-cta:#F26522;--paper:#F4F1EC;--paper2:#ECE7DF;
  --rule:rgba(22,23,26,.12);--rule-strong:rgba(22,23,26,.28);--muted:rgba(22,23,26,.62);--body:rgba(22,23,26,.82);
  --mono:"Instrument Sans",system-ui,sans-serif;--pad:clamp(20px,4vw,64px)}
*{box-sizing:border-box;margin:0}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-display:block;src:url("instrument-sans-latin.woff2?v=2ee17598a9") format("woff2")}
body{font-family:"Instrument Sans",system-ui,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;letter-spacing:-.035em;text-wrap:balance}
button{font:inherit}

/* Seitenkopf: dunkel wie die anderen Einstiege, Schrittanzeige rechts */
.tHero{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding-top:clamp(40px,7vh,88px);padding-bottom:clamp(32px,5vh,56px)}
.tHero::before{content:"";position:absolute;inset:0;background:radial-gradient(60vw 60vh at 88% 0%,rgba(242,101,34,.14),transparent 68%);pointer-events:none}
.tHero__in{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.tHero .eyebrow{display:inline-block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:clamp(14px,2.2vh,22px)}
.tHero h1{font-size:clamp(32px,4.2vw,64px);line-height:1.02;letter-spacing:-.045em;font-weight:700;max-width:18ch}
.tHero h1 em{font-style:normal;color:var(--accent)}
.tHero .lead{margin-top:clamp(14px,2.2vh,22px);font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:rgba(255,255,255,.72);max-width:52ch;text-wrap:pretty}
/* Schrittanzeige auf dunklem Grund (die uebernommenen Regeln unten sind fuer hellen Grund) */
.tHero .steps{color:rgba(255,255,255,.56)}
.tHero .steps span::before{background:rgba(255,255,255,.3)}
.tHero .steps span.on{color:#fff}
.tHero .steps span.done{color:rgba(255,255,255,.56)}
.tHero .steps span.done::before{background:#fff}
.bk .bk__alt a,.bk .back,.bk .empty button{min-height:44px}

/* Schrittanzeige */
.steps{display:flex;gap:clamp(14px,2vw,26px);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-bottom:6px}
.steps span{display:flex;align-items:center;gap:8px}
.steps span::before{content:"";width:7px;height:7px;background:var(--rule-strong)}
.steps span.on{color:var(--ink)}
.steps span.on::before{background:var(--accent-cta)}
.steps span.done{color:var(--muted)}
.steps span.done::before{background:var(--ink)}
/* Buchungspanel: links Termininfo, rechts Auswahl — eckig, weiß, wie die anderen Panels */
.bwrap{padding-top:clamp(32px,5vh,64px);padding-bottom:clamp(48px,6vw,96px)}
.bk{max-width:1120px;margin:0;background:#fff;box-shadow:0 30px 80px -40px rgba(22,23,26,.35);display:grid;grid-template-columns:minmax(0,308px) minmax(0,1fr);align-items:stretch}
.bk__side{border-right:1px solid var(--rule);padding:clamp(22px,2.2vw,32px);display:flex;flex-direction:column}
.bk__brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:19px;letter-spacing:-.03em;padding-bottom:clamp(20px,2.4vw,28px);border-bottom:1px solid var(--rule)}
.bk__brand i{font-style:normal;color:var(--accent)}
.bk__who{margin-top:clamp(18px,2vw,24px);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bk__side h2{margin-top:7px;font-size:clamp(1.3rem,1.9vw,1.7rem);font-weight:700;letter-spacing:-.03em}
.bk__facts{margin-top:clamp(14px,1.8vw,20px);display:grid}
.bk__facts>div{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;padding:8px 0;font-size:14px;line-height:1.5;color:var(--body)}
.bk__facts svg{width:16px;height:16px;stroke:var(--muted);margin-top:2px}
.bk__facts b{color:var(--ink);font-weight:600}
.bk__facts .live{color:var(--accent-cta);font-weight:600}
.bk__note{margin-top:clamp(16px,1.8vw,20px);padding-top:clamp(16px,1.8vw,20px);border-top:1px solid var(--rule);font-size:13.5px;line-height:1.6;color:var(--body)}
.bk__note b{color:var(--ink)}
.bk__alt{margin-top:auto;padding-top:clamp(22px,2.6vw,32px)}
.bk__alt h3{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.bk__alt ul{display:grid;gap:9px}
.bk__alt a{font-size:14.5px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.bk__alt a:hover{color:var(--accent-cta)}
.bk__alt span{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
/* Rechte Seite */
.bk__main{padding:clamp(22px,2.4vw,34px);min-width:0}
.bk__h{font-size:clamp(1.1rem,1.7vw,1.35rem);font-weight:700;letter-spacing:-.025em;margin:0 0 clamp(14px,1.8vw,20px)}
.pick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,270px);gap:clamp(20px,2.6vw,36px);align-items:start}
.pick.is-bare{grid-template-columns:minmax(0,1fr)}
/* Kalender */
.calbar{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,22px);margin-bottom:14px}
.calbar b{font-size:15px;font-weight:600;letter-spacing:-.015em;min-width:11ch;text-align:center}
.calnav{width:38px;height:38px;display:grid;place-items:center;background:transparent;border:1px solid var(--rule-strong);cursor:pointer;color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.calnav:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)}
.calnav:disabled{opacity:.3;cursor:not-allowed}
.calnav svg{width:15px;height:15px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;max-width:392px}
.cal .dow{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;padding:4px 0 8px}
.day{position:relative;aspect-ratio:1/1;min-height:44px;display:grid;place-items:center;font-size:14.5px;font-weight:600;background:transparent;border:0;cursor:pointer;color:var(--ink);font-family:inherit;transition:background .18s,color .18s,box-shadow .18s}
.day.free{box-shadow:inset 0 0 0 1px var(--rule-strong)}
.day.free:hover{background:var(--paper2)}
.day.free::after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:4px;height:4px;background:var(--accent-cta)}
.day.on{background:var(--accent-cta);color:#fff;box-shadow:none}
.day.on::after{background:#fff}
.day.off{color:rgba(22,23,26,.28);cursor:default;font-weight:400}
.day.blank{cursor:default}
.calfoot{margin-top:clamp(16px,2vw,22px);padding-top:14px;border-top:1px solid var(--rule);max-width:392px}
.calfoot h3{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.calfoot p{font-size:14px;color:var(--body);display:flex;align-items:center;gap:8px}
.calfoot svg{width:15px;height:15px;stroke:var(--muted)}
/* Slots */
.slots__h{font-size:14.5px;font-weight:600;letter-spacing:-.01em;margin:0 0 12px;min-height:20px}
.slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.slot{padding:11px 8px;min-height:44px;font-size:14.5px;font-weight:600;font-family:inherit;text-align:center;background:#fff;color:var(--ink);border:0;box-shadow:inset 0 0 0 1.5px var(--rule-strong);cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.slot:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.slot.on{background:var(--accent-cta);color:#fff;box-shadow:none}
.slots__hint{font-size:13.5px;line-height:1.6;color:var(--muted);max-width:24ch}
.empty{margin-top:18px;padding:18px 20px;background:var(--paper);display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between}
.empty p{font-size:14.5px;color:var(--body)}
.empty button{background:none;border:0;padding:0;font:inherit;font-size:14.5px;font-weight:600;color:var(--accent-cta);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.empty button:hover{color:var(--ink)}
/* Schritt 2: Daten */
.back{display:inline-flex;align-items:center;gap:9px;background:none;border:0;padding:0;margin-bottom:clamp(16px,2vw,22px);font:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.back:hover{color:var(--accent-cta)}
.back svg{width:14px;height:14px}
.chosen{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(20px,2.4vw,28px)}
.chosen span{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink);background:var(--paper);padding:9px 13px}
.form{display:grid;gap:clamp(14px,1.8vw,20px);max-width:640px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,20px)}
.f label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.f label i{font-style:normal;color:var(--accent-cta)}
.f input,.f textarea,.f select{width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:0;box-shadow:inset 0 0 0 1.5px var(--rule-strong);padding:14px 15px;min-height:50px;transition:box-shadow .18s}
.f textarea{min-height:104px;resize:vertical;line-height:1.55}
.f input:focus,.f textarea:focus,.f select:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--accent-cta)}
.f input::placeholder,.f textarea::placeholder{color:rgba(22,23,26,.35)}
.check{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;font-size:13.5px;line-height:1.6;color:var(--body)}
.check input{width:20px;height:20px;min-height:0;margin:2px 0 0;accent-color:var(--accent-cta);box-shadow:none;padding:0}
.check a{text-decoration:underline;text-underline-offset:3px}
.send{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--accent-cta);color:#fff;border:0;padding:17px 30px;font:inherit;font-size:15.5px;font-weight:600;cursor:pointer;transition:background .25s;justify-self:start}
.send svg{width:16px;height:16px;transition:transform .25s}
.send:hover svg{transform:translateX(5px)}
.send[disabled]{opacity:.5;cursor:progress}
.legal{font-size:12.5px;line-height:1.6;color:var(--muted);max-width:52ch}
/* Schritt 3: Bestätigung */
.ok{max-width:640px}
.ok__mark{width:52px;height:52px;display:grid;place-items:center;background:var(--ink);margin-bottom:clamp(20px,2.4vw,28px)}
.ok__mark svg{width:24px;height:24px;stroke:#fff;stroke-width:2.6}
.ok h2{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:700;letter-spacing:-.03em}
.ok__lead{margin-top:14px;font-size:15.5px;line-height:1.6;color:var(--body);max-width:46ch}
.ok__box{margin-top:clamp(24px,3vw,34px);border-top:1px solid var(--rule-strong);display:grid}
.ok__box>div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.ok__box dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.ok__box dd{font-size:15px;font-weight:600;color:var(--ink);margin:0}
.ok__acts{margin-top:clamp(24px,3vw,32px);display:flex;flex-wrap:wrap;gap:12px}
.ok__acts a{display:inline-flex;align-items:center;gap:10px;padding:15px 22px;font-size:14.5px;font-weight:600;background:var(--ink);color:#fff;transition:background .25s}
.ok__acts a:hover{background:var(--accent-cta);color:#fff}
.ok__acts a.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--rule-strong)}
.ok__acts a.ghost:hover{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
[hidden]{display:none !important}
@media (max-width:960px){
.bk{grid-template-columns:1fr}
.bk__side{border-right:0;border-top:1px solid var(--rule);order:2}
.bk__alt{margin-top:28px}
.pick{grid-template-columns:1fr}
.slots{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.cal,.calfoot{max-width:392px;margin-left:auto;margin-right:auto}
.day{aspect-ratio:auto;height:46px}
.form .two{grid-template-columns:1fr}
.ok__box>div{grid-template-columns:1fr;gap:4px}
}
/* ⚠️ Feste Rasterhoehe fuer SECHS Wochenzeilen. Ein Monat mit 6 Zeilen (z. B. August 2026) und
   einer mit 5 (September) sind 50 px auseinander — beim Wechsel sprang die Seite darunter.
   Gemessen am 30.08.2026: Hoehe 323 → 273 px waehrend des Aufbaus. */
.cal{min-height:calc(28px + 6 * 44px + 6 * 4px)}
@media (max-width:560px){.cal{min-height:calc(28px + 6 * 46px + 6 * 4px)}}
/* Platzhalterzellen des Wartezustands: gleiche Groesse wie ein Tag, ohne Inhalt und ohne Rahmen,
   damit der Aufbau kein Flackern erzeugt und die Zahlen nicht erst „erscheinen". */
.day.lade{background:linear-gradient(90deg,var(--paper2) 25%,rgba(0,0,0,.04) 37%,var(--paper2) 63%);background-size:400% 100%;animation:calLade 1.4s ease-in-out infinite;border-radius:2px;cursor:default}
@keyframes calLade{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.day.lade{animation:none}}

/* Mindestschrift 13 px (gemeinsam.css 4.) auch fuer die Etiketten des uebernommenen Bereichs;
   in v4 standen sie auf 10–11,5 px Mono. */
.steps,.bk__who,.cal .dow,.calfoot h3,.bk__alt h3,.bk__alt span,.f label,.chosen span,.ok__box dt,.legal,.slots__hint{font-size:13px}

/* Bestaetigung: Knoepfe wie ueberall (ein Orange, gemeinsamer Knopfstil), der zweite als Rahmen.
   In v4 war der erste dunkel. */
.ok__acts a{min-height:52px;padding:0 26px;font-size:15px;font-weight:700;letter-spacing:0}
.ok__acts a:not(.ghost){background:var(--accent);color:#fff}
.ok__acts a:not(.ghost):hover{background:var(--accent);color:#fff;box-shadow:0 10px 26px rgba(242,101,34,.32)}
@media(max-width:560px){.ok__acts a{width:100%;justify-content:center}}
/* Schrittanzeige: Eintraege nicht in sich umbrechen */
.tHero .steps{flex-wrap:wrap;row-gap:8px}
.tHero .steps span{white-space:nowrap}

/* Handy: Tipp-Ziele im Kalender mindestens 44 px. Gemessen vorher: freie Tage 35 px (360) bzw.
   39 px (390) breit, Monatspfeile 38 px. Die Karte laeuft randlos, der Text bleibt an der
   Inhaltskante (24 px), nur das Tagesraster greift in den Rand. */
.calnav{width:44px;height:44px}
@media(max-width:560px){
  /* `main .bwrap`: gemeinsam.css (1b, Inhaltskante) laedt spaeter und gewaenne bei gleicher Spezifitaet */
  main .bwrap{padding-left:0;padding-right:0}
  .bk__main,.bk__side{padding-left:24px;padding-right:24px}
  .cal{max-width:none;margin-left:-12px;margin-right:-12px;gap:3px}
}
@media(max-width:359px){.cal{margin-left:-24px;margin-right:-24px;gap:2px}}