/* ==========================================================================
   Firmenhafen – Buchungsstrecke
   Ergänzt assets/css/style.css
   ========================================================================== */

/* Der untere Abstand sitzt bewusst nicht hier, sondern in der linken Spalte:
   dadurch reicht das Grid bis dorthin, wo die Sektion endet, und die klebende
   Uebersicht rechts kann diesen Bereich mitnutzen. Optisch identisch. */
.checkout{padding-block:clamp(2rem,4vw,3.5rem) 0}
/* Bewusst kein align-items:start. Nur wenn die rechte Spalte so hoch ist wie
   die linke, kann der Block darin ueber die ganze Laenge kleben. Mit
   align-items:start war die Spalte nur so hoch wie ihr Inhalt, und die
   Uebersicht scrollte nach rund 840 px weg. */
.checkout__grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(2rem,4vw,3.5rem)}

/* ---------- Fortschritt ---------- */
.steps-bar{display:flex; align-items:flex-start; gap:.4rem; margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.steps-bar__item{flex:1; display:flex; flex-direction:column; gap:.55rem; min-width:0}
.steps-bar__line{height:5px; border-radius:var(--r-pill); background:var(--c-line); overflow:hidden}
.steps-bar__line span{display:block; height:100%; width:0; background:var(--c-primary); border-radius:var(--r-pill); transition:width .45s cubic-bezier(.4,0,.2,1)}
.steps-bar__item.is-done .steps-bar__line span,
.steps-bar__item.is-active .steps-bar__line span{width:100%}
.steps-bar__item.is-active .steps-bar__line span{background:var(--c-primary)}
.steps-bar__label{font-size:var(--fs-2xs); font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--c-placeholder); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.steps-bar__item.is-active .steps-bar__label{color:var(--c-primary)}
.steps-bar__item.is-done .steps-bar__label{color:var(--c-ink)}

/* ---------- Karten / Schritte ---------- */
.stepcard{background:#fff; border:1px solid var(--c-line); border-radius:var(--r-xl); padding:clamp(1.5rem,3vw,2.4rem); box-shadow:var(--sh-sm)}
.stepcard[hidden]{display:none}
.stepcard__eyebrow{font-size:var(--fs-2xs); font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--c-primary); margin:0 0 .5rem}
.stepcard h2{font-size:clamp(1.4rem,1.1rem + .9vw,1.9rem); color:var(--c-ink); margin-bottom:.35em}
.stepcard__lead{color:var(--c-muted); font-size:var(--fs-body-sm); margin-bottom:1.8rem}

.fieldset{border:0; padding:0; margin:0 0 1.8rem}
.fieldset__legend{font-size:var(--fs-2xs); font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--c-ink); padding:0; margin-bottom:1rem; display:flex; align-items:center; gap:.6rem}
.fieldset__legend::after{content:""; flex:1; height:1px; background:var(--c-line)}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.grid3{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:1rem}
.field{margin-bottom:1rem}
.field:last-child{margin-bottom:0}
.field label{display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--c-ink); margin-bottom:.4rem}
.field label .opt{color:var(--c-placeholder); font-weight:600; letter-spacing:0; text-transform:none}
.field input,.field select,.field textarea{
  width:100%; padding:.8rem 1rem; border:2px solid var(--c-line); border-radius:var(--r-sm);
  font:inherit; font-size:var(--fs-body-sm); font-weight:500; color:var(--c-ink); background:#fff;
  transition:border-color .18s, box-shadow .18s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--c-primary); box-shadow:0 0 0 4px rgba(245,128,96,.14)}
.field input:disabled{background:var(--c-primary-tint); color:var(--c-muted); border-style:dashed}
.field__hint{font-size:var(--fs-2xs); color:var(--c-muted); margin:.4rem 0 0; line-height:1.5}
.field__hint code{background:var(--c-primary-tint); padding:.1rem .35rem; border-radius:4px; font-size:.92em}

/* Radio-Kacheln */
.choices{display:grid; gap:.6rem}
.choices--2{grid-template-columns:1fr 1fr}
.choice{position:relative}
.choice input{position:absolute; opacity:0; pointer-events:none}
.choice span{
  display:block; border:2px solid var(--c-line); border-radius:var(--r-md);
  padding:.85rem 1rem; font-size:var(--fs-body-sm); font-weight:600; color:var(--c-ink-soft);
  cursor:pointer; transition:.18s;
}
.choice span small{display:block; font-weight:500; font-size:var(--fs-xs); color:var(--c-muted); margin-top:.15rem}
.choice input:checked + span{border-color:var(--c-primary); background:var(--c-primary-tint); color:var(--c-primary)}
.choice input:focus-visible + span{outline:3px solid var(--c-primary); outline-offset:2px}

/* wirtschaftlich Berechtigte */
.owner{border:1.5px dashed var(--c-primary-soft); border-radius:var(--r-md); padding:1.1rem; margin-bottom:.8rem; background:var(--c-primary-tint)}
.owner__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem}
.owner__title{font-size:var(--fs-2xs); font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--c-primary)}
.owner__remove{border:0; background:transparent; color:var(--c-muted); font-size:var(--fs-xs); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.owner__remove:hover{color:var(--c-primary)}
.linkbtn{border:0; background:transparent; color:var(--c-primary); font-size:var(--fs-sm); font-weight:700; text-decoration:underline; text-underline-offset:3px; padding:.3rem 0}

/* ---------- Ident / Zahlung ---------- */
.method{display:grid; gap:.8rem; margin-bottom:1.6rem}
.method__card{display:flex; gap:1rem; align-items:flex-start; border:2px solid var(--c-line); border-radius:var(--r-md); padding:1.1rem 1.2rem; text-align:left; background:#fff; width:100%; transition:.18s}
.method__card:hover{border-color:var(--c-primary); background:var(--c-primary-tint)}
.method__icon{width:44px; height:44px; border-radius:50%; background:var(--c-primary-tint); display:grid; place-items:center; flex:none}
.method__card:hover .method__icon{background:#fff}
.method__icon svg{width:22px; height:22px; color:var(--c-primary)}
.method__body strong{display:block; font-size:1rem; color:var(--c-ink)}
.method__body small{display:block; font-size:var(--fs-sm); color:var(--c-muted); line-height:1.5; margin-top:.15rem}
.method__badge{margin-left:auto; flex:none; font-size:var(--fs-2xs); font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--c-success); background:#e4f3e9; padding:.25rem .6rem; border-radius:var(--r-pill)}

.simbox{border:1.5px dashed var(--c-primary-soft); background:var(--c-primary-tint); border-radius:var(--r-md); padding:1.1rem 1.2rem; margin-bottom:1.4rem}
.simbox__label{font-size:var(--fs-2xs); font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--c-primary); margin:0 0 .5rem}
.simbox p{font-size:var(--fs-sm); color:var(--c-ink-soft); margin:0; line-height:1.6}

/* ---------- Prüf-Liste ---------- */
.checks{list-style:none; margin:0 0 1.8rem; padding:0; display:grid; gap:.7rem}
.checks li{display:flex; align-items:flex-start; gap:.85rem; padding:.85rem 1rem; border:1px solid var(--c-line); border-radius:var(--r-md); background:#fff; transition:border-color .25s, background-color .25s}
.checks li[data-state="run"]{border-color:var(--c-primary-soft)}
.checks li[data-state="ok"]{border-color:#bfe3cd; background:#f4fbf6}
.checks li[data-state="flag"]{border-color:#f3c9b8; background:#fdf1ec}
.check__dot{width:22px; height:22px; border-radius:50%; flex:none; margin-top:1px; display:grid; place-items:center; background:var(--c-line)}
.check__dot svg{width:13px; height:13px; color:#fff}
li[data-state="run"] .check__dot{background:var(--c-primary-soft); animation:pulse 1s ease-in-out infinite}
li[data-state="ok"] .check__dot{background:#2e9459}
li[data-state="flag"] .check__dot{background:var(--c-primary)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.check__body strong{display:block; font-size:var(--fs-body-sm); color:var(--c-ink); font-weight:600}
.check__body small{display:block; font-size:var(--fs-xs); color:var(--c-muted); margin-top:.1rem; line-height:1.45}
.check__src{font-size:var(--fs-2xs); color:var(--c-placeholder); font-weight:600}

/* ---------- Ergebnis ---------- */
.result{text-align:center; padding:1rem 0 .5rem}
.result__icon{width:82px; height:82px; border-radius:50%; margin:0 auto 1.3rem; display:grid; place-items:center}
.result__icon svg{width:38px; height:38px; color:#fff}
.result--ok .result__icon{background:#2e9459}
.result--review .result__icon{background:var(--c-primary)}
.result h2{margin-bottom:.4em}
.result__lead{color:var(--c-muted); font-size:var(--fs-body); max-width:46ch; margin:0 auto 1.8rem}
.addressout{background:var(--c-primary-tint); border:1.5px solid var(--c-primary-soft); border-left:5px solid var(--c-primary); border-radius:var(--r-md); padding:1.2rem 1.4rem; max-width:340px; margin:0 auto 1.8rem; text-align:left}
.addressout span{font-size:var(--fs-2xs); font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--c-primary)}
.addressout p{font-size:var(--fs-body); font-weight:700; line-height:1.6; color:var(--c-ink); margin:.5rem 0 0}
.timeline{list-style:none; padding:0; margin:0 auto 1.8rem; max-width:400px; text-align:left; display:grid; gap:.6rem}
.timeline li{display:flex; gap:.7rem; font-size:var(--fs-sm); color:var(--c-ink-soft)}
.timeline li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--c-primary); flex:none; margin-top:.5em}

/* ---------- Navigation ---------- */
.stepnav{display:flex; gap:.8rem; align-items:center; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--c-line)}
.stepnav .btn{flex:0 0 auto}
.stepnav__back{border:0; background:transparent; color:var(--c-muted); font-size:var(--fs-sm); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.stepnav__back:hover{color:var(--c-primary)}
.stepnav__spacer{flex:1}

/* ---------- Zusammenfassung ---------- */
.summary{background:#fff; border:2px solid var(--c-line); border-radius:var(--r-xl); padding:1.6rem 1.5rem; box-shadow:var(--sh-md)}
.summary h3{font-size:var(--fs-2xs); font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--c-ink); margin-bottom:1.1rem}
.summary__row{display:flex; justify-content:space-between; gap:1rem; font-size:var(--fs-body-sm); padding:.55rem 0; border-bottom:1px solid var(--c-line)}
.summary__row span:first-child{color:var(--c-muted)}
.summary__row span:last-child{font-weight:700; color:var(--c-ink); text-align:right}
.summary__total{display:flex; justify-content:space-between; align-items:baseline; margin-top:1.1rem; padding-top:1rem; border-top:2px solid var(--c-line)}
.summary__total span{font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--c-ink)}
.summary__price{font-size:2rem; font-weight:700; color:var(--c-primary); line-height:1}
.summary__vat{font-size:var(--fs-2xs); color:var(--c-muted); margin:.5rem 0 0; text-align:right}
.summary__note{font-size:var(--fs-xs); color:var(--c-muted); line-height:1.5; margin:1.1rem 0 0; padding-top:1rem; border-top:1px solid var(--c-line)}

/* ---------- Demo-Steuerung ---------- */
.demopanel{margin-top:1.2rem; border:1.5px dashed var(--c-placeholder); border-radius:var(--r-md); padding:1rem 1.1rem; background:#fbfcfd}
.demopanel__title{font-size:var(--fs-2xs); font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--c-placeholder); margin:0 0 .7rem}
.demopanel label{display:flex; gap:.55rem; align-items:flex-start; font-size:var(--fs-xs); color:var(--c-ink-soft); margin-bottom:.45rem; cursor:pointer; line-height:1.4}
.demopanel label:last-of-type{margin-bottom:0}
.demopanel input{margin-top:.25rem; accent-color:var(--c-primary); flex:none}

@media (max-width:960px){
  .checkout__grid{grid-template-columns:1fr}
  .summary{position:static}
  .steps-bar__label{font-size:0}
  .steps-bar__item.is-active .steps-bar__label{font-size:var(--fs-2xs)}
}
@media (max-width:620px){
  .grid2,.grid3{grid-template-columns:1fr}
  .choices--2{grid-template-columns:1fr}
  .stepnav{flex-wrap:wrap}
  .stepnav .btn{width:100%}
  .stepnav__spacer{display:none}
}

/* ---------- Stripe Payment Element ---------- */
.payment-element{min-height:44px}
.payment-element:empty{min-height:0}
.payment-hinweis{margin:0 0 .4rem; padding:.9rem 1rem; border:1px dashed #d9d2cf; border-radius:12px; font-size:var(--fs-sm); line-height:1.45; color:var(--muted)}
.payment-hinweis.is-error{border-style:solid; border-color:#C4442B; color:#C4442B}
.payment-element__status{margin:.7rem 0 0; font-size:var(--fs-sm); line-height:1.45; color:var(--muted); min-height:1.3em}
.payment-element__status.is-error{color:#C4442B}
.payment-note{display:flex; align-items:flex-start; gap:.55rem; margin:1.1rem 0 0;
  font-size:var(--fs-sm); line-height:1.45; color:var(--muted)}
.payment-note svg{flex:none; margin-top:.18rem; color:var(--accent)}

/* Feld, das der Server als fehlend zurückgemeldet hat */
.field input.is-error,
.field select.is-error{border-color:#C4442B; box-shadow:0 0 0 3px rgba(196,68,43,.12)}

/* Newsletter-Haken unter den Kontaktdaten */
.optin{display:flex; gap:.75rem; align-items:flex-start; margin:-.4rem 0 1.6rem; padding:1rem 1.1rem;
  background:var(--c-primary-tint); border-radius:var(--r-sm); cursor:pointer;
  font-size:var(--fs-body-sm); line-height:1.55; color:var(--c-ink-soft)}
.optin input{width:18px; height:18px; margin:.15rem 0 0; flex:none; accent-color:var(--c-primary); cursor:pointer}

/* ==========================================================================
   Checkout auf einer Seite
   Vier nummerierte Bloecke links, mitlaufende Bestelluebersicht rechts.
   Alle Bausteine greifen auf die Tokens aus style.css zu.
   ========================================================================== */

.checkout__spalte{min-width:0}

.checkout__head{margin-bottom:var(--sp-4)}
.checkout__head h1{font-size:clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); margin-bottom:.3em}
.checkout__lead{color:var(--c-muted); font-size:var(--fs-md); margin:0 0 var(--sp-3)}
.checkout__trust{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem .9rem}
.checkout__trust li{
  display:flex; align-items:center; gap:.45rem;
  font-size:var(--fs-xs); font-weight:600; color:var(--c-ink-soft);
}
.checkout__trust li::before{
  content:""; width:15px; height:15px; flex:none; border-radius:50%;
  background:var(--c-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat;
}

/* ---------- Ein nummerierter Block ---------- */
.block{
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg);
  padding:clamp(1.2rem, 2.4vw, 1.75rem); box-shadow:var(--sh-sm);
  margin-bottom:var(--sp-3);
}
.block__titel{
  display:flex; align-items:center; gap:.7rem;
  font-size:clamp(1.05rem, .95rem + .35vw, 1.25rem); margin:0 0 1rem; color:var(--c-ink);
}
.block__nr{
  width:26px; height:26px; flex:none; border-radius:50%;
  background:var(--c-primary); color:#fff;
  display:grid; place-items:center; font-size:var(--fs-sm); font-weight:700;
}
.block__hinweis{color:var(--c-muted); font-size:var(--fs-body-sm); margin:-.5rem 0 1rem}
.block__zwischen{
  font-size:var(--fs-2xs); font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--c-ink); margin:1.5rem 0 .7rem;
}
.block__fuss{margin:.9rem 0 0; font-size:var(--fs-sm)}
.block__fuss a{color:var(--c-primary); text-decoration:underline; text-underline-offset:3px; font-weight:600}

/* ---------- Tarifkarte im Block 1 ---------- */
.toggle-wrap--links{justify-content:flex-start; margin-bottom:var(--sp-3)}
.tarifkarte{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  border:2px solid var(--c-primary); border-radius:var(--r-md);
  background:var(--c-primary-tint); padding:1rem 1.15rem;
}
.tarifkarte__text{flex:1; min-width:11rem}
.tarifkarte__name{margin:0; font-weight:700; font-size:var(--fs-md); color:var(--c-ink)}
.tarifkarte__was{margin:.2rem 0 0; font-size:var(--fs-xs); color:var(--c-muted); line-height:1.45}
.tarifkarte__preis{margin:0; font-size:1.6rem; font-weight:700; color:var(--c-primary); line-height:1.1; white-space:nowrap}
.tarifkarte__preis small{display:block; font-size:var(--fs-xs); font-weight:600; color:var(--c-muted)}

/* ---------- Startdatum ---------- */
.startwahl{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem}
.startwahl__opt{
  border:1.5px solid var(--c-line); background:#fff; border-radius:var(--r-md);
  padding:.75rem .8rem; text-align:left; cursor:pointer; font:inherit;
  transition:border-color .18s, background-color .18s;
}
.startwahl__opt strong{display:block; font-size:var(--fs-sm); color:var(--c-ink)}
.startwahl__opt small{display:block; font-size:var(--fs-2xs); color:var(--c-muted); margin-top:.15rem; line-height:1.4}
.startwahl__opt:hover{border-color:var(--c-primary-soft)}
.startwahl__opt.is-active{border-color:var(--c-primary); background:var(--c-primary-tint)}
.field--eigen{margin-top:1rem}
@media (max-width:620px){ .startwahl{grid-template-columns:1fr} }

/* ---------- Haken-Zeilen ---------- */
.check{display:flex; gap:.65rem; align-items:flex-start; margin-top:1.1rem; font-size:var(--fs-body-sm); color:var(--c-ink-soft); cursor:pointer}
.check input{margin-top:.25rem; accent-color:var(--c-primary); width:17px; height:17px; flex:none}
.check a{color:var(--c-primary); text-decoration:underline; text-underline-offset:3px}

/* ---------- Siegelzeile unter dem Knopf ---------- */
.siegelzeile{
  list-style:none; margin:1rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.1rem;
  font-size:var(--fs-2xs); color:var(--c-muted); font-weight:600;
}

/* ---------- Bestelluebersicht ---------- */
.summary__eyebrow{
  font-size:var(--fs-2xs); font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--c-muted); margin:0 0 .3rem;
}
.summary__gross{margin:0 0 1.1rem; font-size:2rem; font-weight:700; color:var(--c-ink); line-height:1.1}
.summary__gross small{display:block; font-size:var(--fs-xs); font-weight:600; color:var(--c-muted); margin-top:.15rem}
.summary__plan{border-top:1px solid var(--c-line); padding-top:1rem; margin-bottom:1rem}
.summary__plan-name{margin:0 0 .5rem; font-weight:700; color:var(--c-ink)}
.summary__leistungen{list-style:none; margin:0; padding:0; display:grid; gap:.35rem}
.summary__leistungen li{
  position:relative; padding-left:1.35rem;
  font-size:var(--fs-xs); color:var(--c-ink-soft); line-height:1.45;
}
.summary__leistungen li::before{
  content:""; position:absolute; left:0; top:.3em; width:13px; height:13px; border-radius:50%;
  background:var(--c-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/8px no-repeat;
}

.checkout__spalte{padding-bottom:clamp(3rem,6vw,5rem)}
/* Einspaltig steht die Uebersicht unter dem Formular. Dann gehoert der
   Abstand wieder ans Ende der Sektion, sonst klafft eine Luecke dazwischen. */
@media (max-width:900px){
  .checkout{padding-bottom:clamp(3rem,6vw,5rem)}
  .checkout__spalte{padding-bottom:0}
}

/* Mitlaufende Seitenspalte.
   Bewusst ohne max-height und ohne eigenen Scrollbereich: die Uebersicht wird
   nie angeschnitten, man sieht immer die ganze Karte. Am allerletzten
   Scrollpunkt laeuft sie mit dem Footer mit nach oben, wie jeder andere
   Inhalt der Seite auch. */
.seitenblock{position:sticky; top:100px}

@media (max-width:900px){
  .seitenblock{position:static}
}

/* Schlanker Footer auf der Buchungsseite.
   Hier steht nur die Rechtezeile, kein Newsletter und keine Linkspalten. Der
   grosse Innenabstand der Startseite wirkt darunter wie ein Loch — und er
   schiebt die Bestelluebersicht am Seitenende unnoetig nach oben. */
.footer{padding-block:0}

/* Post-Wahl im Checkout. Nutzt .segmented aus style.css, hier nur die
   Einbettung in den Block. */
.block__hinweis--post{margin-top:var(--sp-3)}
.segmented--post{max-width:22rem}
#postwahl-hinweis{margin-top:.6rem}

/* Schritt nach der Zahlung: schlichte Liste links ausgerichtet, ohne Bestellspalte */
.ident-liste{margin:1.2rem 0 1.6rem; padding-left:1.2rem; text-align:left; display:grid; gap:.5rem; line-height:1.5}
.ident-liste li::marker{color:var(--accent)}
body.is-nach aside{display:none}
body.is-nach .checkout__grid{grid-template-columns:minmax(0,640px); justify-content:center}