/*
 * Gemeinsame Grundlage aller Formulare: Farben, Typografie, Schriften,
 * Felder, Karten, Schaltflächen, Hinweiskästen, Fortschrittsschiene,
 * Zusammenfassung, Medienabfragen, Fokusringe.
 *
 * Neue Formulare binden diese Datei ein und definieren nur eigene
 * Felder – CI-Änderungen passieren genau hier, einmal. Siehe CLAUDE.md.
 * Die Schriftpfade sind relativ zu dieser Datei, nicht zur Seite.
 */

/* Selbst ausgeliefert (W9): Auf einer Seite, auf der Kunden Passwörter
   eintippen, geht keine Anfrage an Google. Variable Schriften, eine
   Datei je Familie, alle verwendeten Gewichte enthalten. */
@font-face{font-family:"Inter";src:url("schriften/inter-variabel.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("schriften/montserrat-variabel.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url("schriften/caveat-variabel.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  /* Zwischentöne aus den verbindlichen Werten abgeleitet, mit denselben
     Abständen wie zuvor: ink-2 = ink+8/8/8, ink-line = ink+27/27/27,
     gold-soft = gold+44/47/71 (03.08.). */
  --ink:#1E2730; --ink-2:#262F38; --ink-line:#39424B;
  --gold:#BBA668; --gold-soft:#E7D5AF;
  --paper:#F5F2E9; --card:#FFFFFF;
  --text:#22252B; --muted:#6E7480; --line:#E1DBCB;
  --ok:#3F7D5B; --err:#A8402F;
  --rail:320px;
  --r:10px;
}
*{box-sizing:border-box}
/* hidden muss gegen jede display-Klasse gewinnen: Das UA-Stylesheet
   setzt nur display:none ohne Gewicht, und .field{display:flex} bzw.
   .grid{display:grid} stachen es aus - markiert-versteckte Felder
   blieben sichtbar (Befund 03.08., Mehrfachmodus und data-when). */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--text);
  font:400 16px/1.55 Inter, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.eyebrow,.railnum{font-family:Montserrat, system-ui, sans-serif}
/* Große Überschriften leicht, wie die Drucklinie (dort Montserrat Thin).
   Light statt Thin: Unter 100 ist die Schrift am Bildschirm zu fragil.
   Alles Bedienbare bleibt bei mittlerem Gewicht. */
h1{font-size:clamp(28px,4vw,40px); line-height:1.15; font-weight:300; letter-spacing:0; margin:0 0 14px}
h2{font-size:20px; font-weight:600; margin:0 0 6px}
p{margin:0 0 14px}
a{color:#5A4A1F}

/* ---------- Grundraster ---------- */
/* minmax(0,…) statt 1fr: eine 1fr-Spur schrumpft nicht unter die
   Eigenbreite ihres Inhalts – bei 380 px schob die Schrittleiste die
   ganze Seite auf 894 px (Befund der Browserprüfung vom 02.08.). */
.shell{display:grid; grid-template-columns:var(--rail) minmax(0,1fr); min-height:100vh}

/* ---------- Signatur: Fortschrittsschiene ---------- */
.rail{
  background:var(--ink); color:#EDEAE3; padding:34px 30px 40px;
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
}
.logo{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:38px}
.logo img{width:150px; height:auto}
.logo span{font-size:11px; letter-spacing:.28em; color:var(--gold)}

.stepswrap{position:relative; flex:1}
.steps{list-style:none; margin:0; padding:0; height:100%}
.steps:before{content:""; position:absolute; left:13px; top:12px; bottom:26px; width:1px; background:var(--ink-line)}
.fill{position:absolute; left:13px; top:12px; width:1px; background:var(--gold); height:0; transition:height .45s cubic-bezier(.4,0,.2,1)}
.steps li{position:relative; padding:0 0 26px 42px; font-size:13.5px; color:#7C838F; transition:color .3s}
.steps li .railnum{
  position:absolute; left:0; top:-2px; width:27px; height:27px; border-radius:50%;
  background:var(--ink); border:1px solid var(--ink-line); color:#6B7280;
  display:grid; place-items:center; font-size:11px; font-weight:600; transition:.3s;
}
.steps li.done{color:#B9BEC7}
.steps li.done .railnum{border-color:var(--gold); color:var(--gold)}
.steps li.now{color:#fff; font-weight:500}
.steps li.now .railnum{background:var(--gold); border-color:var(--gold); color:var(--ink)}
.railfoot{font-size:12px; color:#6B7280; line-height:1.6; border-top:1px solid var(--ink-line); padding-top:16px}
.railfoot a{color:var(--gold-soft); text-decoration:none}

/* Fortschritt für schmale Bildschirme: Zähler und Balken. Auf dem Desktop
   übernimmt das die Schiene, deshalb dort ausgeblendet. */
.mobilfortschritt{display:none}

/* ---------- Inhalt ---------- */
.content{padding:56px clamp(24px,5vw,80px) 90px; max-width:820px}
.eyebrow{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.lead{font-size:17px; color:#4A4F58; max-width:62ch}
.hand{font-family:Caveat, cursive; font-size:26px; color:#7A6220; transform:rotate(-1.2deg); display:inline-block; margin:6px 0 0}

.step{display:none; animation:in .35s ease}
.step.active{display:block}
@keyframes in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px 26px; margin:22px 0}
.card h2{display:flex; align-items:center; gap:9px}
.note{background:#FAF6EA; border:1px solid #E6DCC0; border-left:3px solid var(--gold); border-radius:var(--r); padding:16px 18px; font-size:14.5px; color:#4A422C; margin:18px 0}
.note b{font-weight:600}

/* ---------- Formularfelder ---------- */
.grid{display:grid; gap:16px 18px; grid-template-columns:repeat(2,1fr)}
.grid .wide{grid-column:1/-1}
.field{display:flex; flex-direction:column; gap:6px}
label,legend{font-size:13px; font-weight:500; color:#3B4048}
.hint{font-size:12.5px; color:var(--muted)}
/* 16px ist Pflicht, nicht Geschmack: iOS zoomt beim Tippen in jedes Feld
   mit kleinerer Schrift hinein und bleibt vergrößert. Siehe CLAUDE.md. */
/* Ausnahmeregel statt Aufzählung: Bei password und date war die Liste
   der erlaubten Typen schon zweimal unvollständig - ohne 44px-Höhe und
   16px-Schrift zoomt iOS beim Tippen. Ausgenommen bleiben nur die
   Typen, die nicht wie ein Eingabefeld aussehen sollen. :where() hält
   die Spezifität bei 0,0,1 - sonst stäche die Regel input:focus und
   input:user-invalid (je 0,1,1) aus. */
input:where(:not([type=checkbox],[type=radio],[type=hidden],[type=file])),select,textarea{
  font:400 16px Inter, sans-serif; color:var(--text);
  min-height:44px;
  padding:11px 13px; border:1px solid var(--line); border-radius:8px; background:#fff; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
textarea{min-height:88px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(30,39,48,.15)}
input:user-invalid{border-color:var(--err)}
fieldset{border:0; margin:0; padding:0}
legend{margin-bottom:9px}
.choice{display:flex; flex-direction:column; gap:9px}
.choice.row{flex-direction:row; flex-wrap:wrap}
.opt{
  display:flex; gap:11px; align-items:flex-start; border:1px solid var(--line); background:#fff;
  border-radius:8px; padding:12px 14px; cursor:pointer; font-size:14.5px; transition:.15s;
}
/* Die 220px sind eine Breitenbasis fürs Umbruchraster – nur in der
   Zeilenrichtung. Im gestapelten .choice würde flex-basis zur Höhe. */
.choice.row .opt{flex:1 1 220px}
.opt:hover{border-color:#C9C1B2}
.opt input{margin:2px 0 0; accent-color:var(--gold); flex:none}
.opt:has(input:checked){border-color:var(--gold); background:#FDFAF2}
.opt:has(input:focus-visible){box-shadow:0 0 0 3px rgba(187,166,104,.20)}
.opt small{display:block; color:var(--muted); font-size:12.5px}

/* Zeitfenster im Terminschritt: kompakte, mehrfach wählbare Häkchen */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips label{display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:8px; padding:10px 14px; background:#fff; cursor:pointer; font-size:14.5px; min-height:44px}
.chips label:hover{border-color:#C9C1B2}
.chips label:has(input:checked){border-color:var(--gold); background:#FDFAF2}
.chips label:has(input:focus-visible){box-shadow:0 0 0 3px rgba(30,39,48,.15)}
.chips input{accent-color:var(--gold); margin:0}
.chipgruppe{font-size:13px; font-weight:500; color:#3B4048; margin:14px 0 8px}
.chipgruppe:first-of-type{margin-top:10px}

/* ---------- Anleitungsliste mit Kopierwerten ---------- */
ol.howto{margin:0; padding-left:20px; font-size:14.5px; color:#454A53}
ol.howto li{margin-bottom:7px}
.copyrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:9px 0}
.copyrow code{
  font:500 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace; background:#F0ECE0;
  border:1px solid var(--line); border-radius:6px; padding:9px 11px; color:#2B2F36;
  overflow-wrap:anywhere;
}
.copy{
  font:500 12.5px Inter,sans-serif; border:1px solid var(--line); background:#fff; color:#4A4F58;
  border-radius:6px; padding:8px 11px; cursor:pointer; transition:.15s;
}
.copy:hover{border-color:var(--gold); color:#6B5518}
.copy.done{background:var(--ok); border-color:var(--ok); color:#fff}

/* ---------- Zwischenspeichern ---------- */
.resume{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#EEF3EE;border:1px solid #CBDCCB;border-radius:var(--r);padding:12px 15px;font-size:14px;color:#33503B;margin-bottom:20px}
.resume button{background:none;border:0;color:#2C5138;font:500 13.5px Inter,sans-serif;text-decoration:underline;cursor:pointer;padding:0}
.saved{font-size:12px;color:var(--muted);min-height:16px;margin-left:auto}

/* ---------- Anleitungsvideo ---------- */
figure.clip{margin:18px 0 0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#0F1115}
figure.clip video{display:block; width:100%; height:auto}
figure.clip figcaption{font-size:12.5px; color:var(--muted); background:#fff; padding:9px 13px; border-top:1px solid var(--line)}

/* ---------- Navigation ---------- */
.nav{display:flex; gap:12px; align-items:center; margin-top:30px; flex-wrap:wrap}
.btn{
  font:600 15px Montserrat,sans-serif; border-radius:8px; padding:13px 26px; cursor:pointer;
  border:1px solid transparent; transition:.16s;
}
.btn-primary{background:var(--ink); color:#fff}
.btn-primary:hover{background:#000}
.btn-ghost{background:transparent; border-color:var(--line); color:#4A4F58}
.btn-ghost:hover{border-color:#B8B0A0}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.progresshint{font-size:12.5px; color:var(--muted); margin-left:auto}

/* ---------- Zusammenfassung ---------- */
.summary{margin:0}
.sumgroup{border-top:1px solid var(--line); padding:16px 0}
.sumgroup:first-child{border-top:0}
.sumhead{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:9px}
.sumhead h3{font-size:14px; font-weight:600; margin:0}
.sumhead button{background:none; border:0; color:#6B5518; font:500 13px Inter,sans-serif; cursor:pointer; text-decoration:underline; padding:0}
.sumgroup dl{display:grid; grid-template-columns:minmax(150px,38%) 1fr; gap:6px 16px; margin:0; font-size:14px}
.sumgroup dt{color:var(--muted)}
/* Zwischenüberschrift in der Zusammenfassung (data-gruppe): trennt
   gleichlautende Feldgruppen wie Rechnungs- und Objektadresse. */
.sumgroup dt.sumkapitel{grid-column:1/-1; color:#3B4048; font-weight:600; margin-top:8px}
/* Inserat-Links sind lang und tragen keine Trennstellen. Ohne anywhere
   schiebt ein einziger davon die ganze Seite seitlich – auf schmalen
   Geräten die Regel, nicht die Ausnahme. */
.sumgroup dd{margin:0; color:var(--text); overflow-wrap:anywhere}

.consent{display:flex; gap:11px; align-items:flex-start; font-size:14px; color:#454A53; margin:8px 0 4px}
.consent input{margin-top:3px; accent-color:var(--gold)}
.status{margin-top:16px; font-size:14.5px; padding:13px 15px; border-radius:8px; display:none}
.status.err{display:block; background:#FBEEEB; border:1px solid #E7C6BE; color:#7E2E20}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------- Abschluss ---------- */
.done-wrap{text-align:left; max-width:560px}
.tick{width:56px; height:56px; border-radius:50%; background:var(--ok); display:grid; place-items:center; margin-bottom:22px}
.tick svg{width:26px; height:26px; stroke:#fff; stroke-width:2.5; fill:none}

@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{position:static; height:auto; padding:20px 22px 22px}
  .logo{margin-bottom:20px}
  .logo img{width:120px}
  .steps{display:flex; gap:0; overflow-x:auto; padding-bottom:4px; height:auto}
  .stepswrap{flex:none}
  .steps:before,.fill{display:none}
  .steps li{padding:0 16px 0 0; white-space:nowrap; font-size:12px}
  .steps li .railnum{position:static; margin-bottom:5px}
  .railfoot{display:none}
  .mobilfortschritt{display:block; margin-top:8px}
  .mobilfortschritt span{font-size:12px; color:#B9BEC7; letter-spacing:.04em}
  .mobilfortschritt .balken{margin-top:6px; height:4px; border-radius:2px; background:var(--ink-line); overflow:hidden}
  .mobilfortschritt .balkenfuellung{height:100%; width:0; background:var(--gold); border-radius:2px; transition:width .45s cubic-bezier(.4,0,.2,1)}
  .content{padding:32px 22px 70px}
  .grid{grid-template-columns:1fr}
  .sumgroup dl{grid-template-columns:1fr; gap:2px 0}
  .sumgroup dd{margin-bottom:8px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
/* Fokus in Dunkel statt Gold: Gold erreicht auf Weiß nur 2,74:1,
   WCAG 1.4.11 verlangt 3:1. Auf der dunklen Schiene wäre Dunkel
   unsichtbar, dort übernimmt Weiß. */
:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.rail :focus-visible{outline-color:#fff}

/* ---------- Desktop ab 1200px ----------
   Mehr Raum statt vergrößerter Handy-Ansicht: Inhalt öffnet auf
   1060px, Grundschrift eine Stufe größer, Überschriften wachsen mit,
   die Schiene wird etwas breiter. Unter 1200px ändert sich nichts.
   Das Feldgitter wird ein Zwölferraster: Standardfeld ein Drittel,
   .viertel ein Viertel (die vier Bettenfelder nebeneinander), .wide
   volle Breite - .wide steht zuletzt, weil die Grundregel aus dem
   Hauptteil sonst bei gleicher Spezifität unterliegt. */
@media (min-width:1200px){
  :root{--rail:360px}
  .content{max-width:1060px}
  body{font-size:17px}
  h1{font-size:clamp(30px,3.2vw,46px)}
  h2{font-size:22px}
  .lead{font-size:18px}
  .grid{grid-template-columns:repeat(12,1fr)}
  .grid .field{grid-column:span 4}
  .grid .field.viertel{grid-column:span 3}
  /* Das erste Viertel einer Folge beginnt in Spalte 1: sonst rutscht
     es in die Restlücke der Vorgängerzeile und die Vierergruppe
     bricht 1+3 um. */
  .grid :not(.viertel) + .field.viertel{grid-column:1/span 3}
  .grid .wide{grid-column:1/-1}
}

/* ---------- Tokenschranke ----------
   Ohne gültigen Link bleibt das Formular verborgen: Auf der
   Onboarding-Strecke stehen Verifizierungsnummern und der
   Booking-Login-Name. Die Klasse steht im HTML, damit nichts
   aufblitzt, bevor das Skript entschieden hat; ohne JavaScript
   greift der noscript-Hinweis der Seite. */
body.token-prueft .shell{display:none}
.tokenhinweis{min-height:100vh; display:grid; place-items:center;
  padding:24px calc(20px + env(safe-area-inset-right,0px)) 40px calc(20px + env(safe-area-inset-left,0px))}
.tokenhinweis-karte{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:34px 32px; max-width:520px}
.tokenhinweis-karte img{width:150px; height:auto; margin-bottom:22px}
.tokenhinweis-karte h1{font-size:clamp(22px,3vw,28px); margin-bottom:12px}
.tokenhinweis-karte p{color:#4A4F58; font-size:15.5px}
.tokenhinweis-karte p:last-child{margin-bottom:0}