/* =====================================================================
   Designsystem Zwei an Bord – ENTWURF (29.10.2026), noch nicht live
   Wird beim Umbau als letzte Schicht in index.html übernommen und ersetzt dort
   Einzelwerte. Grundlage ist der bestehende Auftritt: Navy (Hafen), Papier (Frachtbrief),
   Terrakotta (Rettungsring, Stempel), Schibsted Grotesk.
   ===================================================================== */
:root{
  /* Farben: 22 Werte statt bisher 36. Jede Farbe hat eine Aufgabe. */
  --navy:#1E2226;      /* Kopf, Fuß, dunkle Bänder, Haupttext */
  --navy-2:#2A2F34;    /* Flächen auf Navy */
  --navy-line:#3A4046; /* Linien auf Navy */
  --navy-soft:#5C636A; /* Rahmen von Knöpfen auf Navy */
  --paper:#F6F3EE;     /* Seitenhintergrund */
  --paper-2:#EFEBE4;   /* Hinweisflächen auf Papier */
  --surface:#FFFFFF;   /* Karten, Formulare */
  --ink:#1E2226; --muted:#585E64;
  --line:#E2DDD5; --line-2:#CFC8BD;
  --on-navy:#CFCAC2; --on-navy-2:#E2DDD5;
  --signal:#B4472E;    /* EINE Hauptaktion je Bildschirm, Marke */
  --signal-ink:#9C3A24;/* Terrakotta als Text (Kontrast 6,2:1 auf Papier) */
  --signal-soft:#E9A08B; --signal-bg:#F8E9E4;
  --ok:#1E7B4F; --ok-bg:#E6F4EC; --err:#B42318; --err-bg:#FDECEA;
  /* Ecken: drei Stufen */
  --r-s:4px;   /* Felder, Chips, kleine Markierungen */
  --r-m:8px;   /* Knöpfe, Kacheln zum Ankreuzen, Listenkarten */
  --r-l:16px;  /* große Flächen: Buchungsleiste, Formularkarte, Fotos */
  /* Schatten: nur für Schwebendes (Buchungsleiste über dem Foto, Leisten unten, Menüs) */
  --schatten:0 24px 56px -28px rgba(30,34,38,.55),0 2px 6px rgba(30,34,38,.08);
  --fokus:0 0 0 3px rgba(180,71,46,.35);
  /* Schrift: eine Familie, feste Stufen */
  --t-xs:13px; --t-s:15px; --t-m:17px; --t-l:20px; --t-xl:24px;
  --t-h2:clamp(32px,4vw,56px); --t-h1:clamp(44px,5vw,76px);
  /* Abstände: 4er-Raster */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
}

/* ---------- Typografie ---------- */
.section-head h2,.h2,.ab-kopf h2{font-size:var(--t-h2);line-height:1.04;letter-spacing:-.025em}
.hero h1{font-size:var(--t-h1)}
.lead{font-size:var(--t-l);line-height:1.55}
.eyebrow,.kl{font-size:var(--t-s);font-weight:700;letter-spacing:0;text-transform:none}
.cal-wd{text-transform:none;letter-spacing:0;font-size:var(--t-xs)}
.section{padding-block:clamp(56px,7vw,104px)}

/* ---------- Bewegung nur als Antwort auf eine Handlung ---------- */
.hero h1 .ln,.hero .lead,.hero-wer,.hero-cta,.hero-note,.ring,.hero-mark{animation:none!important}
.brand:hover .ring{transform:none}

/* ---------- Knöpfe: drei Ränge, klare Zustände ---------- */
.btn{border-radius:var(--r-m);min-height:52px;font-size:var(--t-m);letter-spacing:0;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
.btn:hover{transform:none}
.btn:hover .ico{transform:none}
.btn:focus-visible{outline:none;box-shadow:var(--fokus)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.btn[aria-busy="true"]{position:relative;color:transparent!important;pointer-events:none}
.btn[aria-busy="true"]::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid #fff;border-right-color:transparent;animation:dreh .7s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
.btn-signal{background:var(--signal);color:#fff}
.btn-signal:hover{background:var(--signal-ink);color:#fff}
.btn-line{border-color:var(--line-2);background:var(--surface);color:var(--ink)}
.btn-line:hover{border-color:var(--ink);color:var(--ink)}
.btn-ghost{border-color:var(--navy-soft)}
.head-actions .btn,.kopf .btn{min-height:44px;font-size:var(--t-s)}
/* Text-Links */
.tlink,.linkish{color:var(--signal-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.tlink:hover,.linkish:hover{color:var(--ink)}

/* ---------- Formulare: gleiche Felder, sichtbare Fehler ---------- */
.field input,.field select,.field textarea,.stepper{border-radius:var(--r-s)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);box-shadow:var(--fokus)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--err);background:#FFF9F8}
.feld-fehler{display:flex;gap:6px;align-items:flex-start;font-size:var(--t-xs);font-weight:600;color:var(--err)}
.err{border-radius:var(--r-s);border-left:4px solid var(--err)}
.notice{border-radius:var(--r-s)}
.choice span,.check,.tick .t,.cal-slot,.drop{border-radius:var(--r-m)}
.pill span,.next-chip,.lead-note .early,.bezirke li{border-radius:var(--r-m)}
.cal-day{border-radius:var(--r-s)}
.thumb{border-radius:var(--r-s)}
.addr-list{border-radius:var(--r-m);box-shadow:var(--schatten)}
.addr-list li{border-radius:var(--r-s)}
.box{border-radius:var(--r-s)}

/* ---------- Flächen ---------- */
.book-card,.summary,.cal-inline,.media,.wir-foto,.pb-gross,.bk{border-radius:var(--r-l)}
.drin,.wz{border-radius:var(--r-m)}
.bk{box-shadow:var(--schatten)}
.site-head.scrolled{box-shadow:none;border-bottom:1px solid var(--navy-line)}
.to-top{box-shadow:var(--schatten)}

/* ---------- Mobile Navigation: großes Menü mit Telefon und einer Aktion ---------- */
@media (max-width:980px){
  .nav.open{position:fixed;top:calc(env(safe-area-inset-top,0px) + 72px);left:0;right:0;bottom:0;overflow:auto;padding:var(--s-4) max(16px,env(safe-area-inset-right,0px)) calc(var(--s-6) + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));gap:0;background:var(--navy);z-index:40}
  .nav.open a{font-size:var(--t-l);font-weight:600;padding:var(--s-4) 0;color:#fff}
  .nav-extra{display:none}
  .nav.open .nav-extra{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-5)}
  .nav.open .nav-extra .btn{width:100%}
  .nav.open .nav-extra a.btn{border-bottom-width:2px}
  .nav.open .nav-extra a.btn{font-size:var(--t-m);padding:0 var(--s-5)}
  .menu-btn{border-radius:var(--r-m)}
}
@media (min-width:981px){ .nav-extra{display:none} }
.consent input[aria-invalid="true"]{outline:2px solid var(--err);outline-offset:2px}

/* Unterseiten (Checkliste, Rechtliches, 404) */
.btn.primary{background:var(--signal);border-color:var(--signal);color:#fff}
.btn.primary:hover{background:var(--signal-ink);border-color:var(--signal-ink);color:#fff}
.phase h2 .when{text-transform:none;letter-spacing:0;font-stretch:100%;font-weight:800}

/* ---------- Audit 29.10.2026 ---------- */
/* Preise in Auswahlfeldern nie umbrechen (−5 %, 109 € je Zone, ca. 10 Min.) */
.check .p{white-space:nowrap;padding-left:8px}
@media (max-width:420px){
  .check{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:2px}
  .check .p{grid-column:2;margin:0;padding:0;text-align:left}
}
/* Datumsfelder: iPhone/Safari geben ihnen eine Mindestbreite und zentrierten Text – dann stehen sie über */
input[type="date"]{min-width:0;max-width:100%;width:100%;-webkit-appearance:none;appearance:none;display:block}
input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
input[type="date"]::-webkit-calendar-picker-indicator{margin-left:auto}
.bk input,.bk select,.field input,.field select,.field textarea{min-width:0;max-width:100%;font-size:16px}
/* Danke-Seite: Symbol im Knopf normal groß, Knöpfe sauber untereinander */
.done-box .btn .ico{width:20px;height:20px;color:currentColor}
.done-more{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:flex-start}
@media (max-width:520px){ .done-more .btn,.done-box > .btn{width:100%} }
/* Platz für die Leiste unten auf dem Handy: im dunklen Fuß statt als heller Streifen darunter */
@media (max-width:760px){
  body{padding-bottom:0!important}
  .site-foot{padding-bottom:calc(var(--s-6) + 80px + env(safe-area-inset-bottom,0px))!important}
}