/* ==========================================================================
   Hüpfburg-Königswinter · Buchungsassistent
   --------------------------------------------------------------------------
   ANPASSEN: Nur die Werte in diesem :root-Block ändern, damit der Assistent
   zum Design von huepfburg-koenigswinter.de passt. Der Rest kann so bleiben.
   ========================================================================== */

.hk {
  --hk-ink:        #16233a;   /* Haupttextfarbe                          */
  --hk-muted:      #5c6b82;   /* Sekundärtext, Hinweise                  */
  --hk-line:       #dde4ee;   /* Rahmen und Trennlinien                  */
  --hk-surface:    #ffffff;   /* Kartenhintergrund                       */
  --hk-canvas:     #f2f6fb;   /* Seitenhintergrund                       */
  --hk-accent:     #1b4fd8;   /* Aktion, Auswahl, Fokus                  */
  --hk-accent-ink: #ffffff;   /* Text auf Akzentflächen                  */
  --hk-sun:        #ffc529;   /* Fröhlicher Zweitakzent (Preise, Marker) */
  --hk-free:       #0f7b52;   /* "verfügbar"                             */
  --hk-busy:       #a1adc0;   /* "belegt"                                */
  --hk-bad:        #b42318;   /* Fehlermeldungen                         */

  --hk-radius:     14px;
  --hk-radius-sm:  9px;
  --hk-font:       "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --hk-font-num:   ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --hk-shadow:     0 1px 2px rgba(22, 35, 58, .06), 0 8px 24px -12px rgba(22, 35, 58, .18);
}

/* ------------------------------------------------------------------ Grundgerüst */

.hk, .hk *, .hk *::before, .hk *::after { box-sizing: border-box; }

.hk {
  font-family: var(--hk-font);
  color: var(--hk-ink);
  line-height: 1.55;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1rem 5.5rem;
}

.hk h1, .hk h2, .hk h3 { margin: 0; line-height: 1.25; text-wrap: balance; }
.hk h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); letter-spacing: -.015em; }
.hk h2 { font-size: 1.2rem; letter-spacing: -.01em; }
.hk p  { margin: .35rem 0 0; }
.hk :focus-visible { outline: 3px solid var(--hk-accent); outline-offset: 2px; border-radius: 4px; }

.hk__intro { padding: 1.75rem 0 1.25rem; }
.hk__intro p { color: var(--hk-muted); max-width: 46rem; }

/* --------------------------------------------------------------- Schrittanzeige */

.hk-steps {
  display: flex; flex-wrap: wrap; gap: .35rem;
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  border-bottom: 1px solid var(--hk-line);
}
.hk-steps li {
  display: flex; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
/* Erledigte Schritte sind anklickbar, um zurueckzuspringen. Deshalb sind es
   Schaltflaechen - dann geht es auch mit der Tastatur. Noch nicht erreichte
   Schritte sind disabled: vorwaerts nur ueber "Weiter", sonst uebergeht man
   die Pruefungen. */
.hk-steps li button {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .85rem; font: inherit; font-size: .875rem; font-weight: 600;
  color: var(--hk-muted); background: none; border: 0; cursor: default;
  border-radius: 8px 8px 0 0;
}
.hk-steps li button:not([disabled]) { cursor: pointer; }
.hk-steps li button:not([disabled]):hover { color: var(--hk-ink); background: rgba(22,35,58,.055); }
.hk-steps li button:focus-visible { outline: 2px solid var(--hk-accent); outline-offset: -2px; }
.hk-steps li span {
  display: grid; place-items: center; width: 1.4rem; height: 1.4rem;
  border-radius: 50%; background: var(--hk-line); color: var(--hk-ink);
  font-size: .78rem; font-variant-numeric: tabular-nums;
}
.hk-steps li[data-state="current"] { border-bottom-color: var(--hk-accent); }
.hk-steps li[data-state="current"] button { color: var(--hk-ink); }
.hk-steps li[data-state="current"] span { background: var(--hk-accent); color: var(--hk-accent-ink); }
.hk-steps li[data-state="done"] span { background: var(--hk-free); color: #fff; }

/* --------------------------------------------------------------------- Panels */

.hk-panel { display: none; }
.hk-panel[data-active="true"] { display: block; animation: hk-in .28s ease both; }
@keyframes hk-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hk-panel[data-active="true"] { animation: none; }
}

/* ------------------------------------------------------------- Modellauswahl */

.hk-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.15rem; }
.hk-filter button {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  padding: .4rem .85rem; border-radius: 999px;
  border: 1px solid var(--hk-line); background: var(--hk-surface); color: var(--hk-muted);
}
.hk-filter button[aria-pressed="true"] {
  background: var(--hk-ink); border-color: var(--hk-ink); color: #fff;
}

.hk-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); }

.hk-card {
  display: flex; flex-direction: column; gap: .4rem; text-align: left;
  font: inherit; cursor: pointer;
  padding: 1rem 1.05rem; border: 1px solid var(--hk-line); border-radius: var(--hk-radius);
  background: var(--hk-surface); box-shadow: var(--hk-shadow);
  transition: border-color .15s, transform .15s;
}
@media (prefers-reduced-motion: no-preference) {
  .hk-card:hover { transform: translateY(-2px); border-color: var(--hk-accent); }
}
.hk-card[aria-pressed="true"] { border-color: var(--hk-accent); box-shadow: 0 0 0 2px var(--hk-accent) inset; }
.hk-card__tag {
  align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--hk-muted);
}
.hk-card__name { font-size: 1.05rem; font-weight: 700; }
.hk-card__meta { font-size: .82rem; color: var(--hk-muted); }
.hk-card__price { margin-top: auto; padding-top: .5rem; font-weight: 700; }
.hk-card__price b { font-family: var(--hk-font-num); font-size: 1.15rem; }
.hk-card__price s { color: var(--hk-muted); font-weight: 500; }
/* Das Foto sitzt buendig oben in der Karte. Die Karte hat Innenabstand,
   deshalb zieht das Bild ihn mit negativen Aussenabstaenden wieder heraus.
   Hellblau ist derselbe Ton, auf dem die Motive auf der Website freigestellt
   sind (--preview-bg), damit kein Rand sichtbar wird. */
.hk-card__bild {
  display: block; margin: -1rem -1.05rem .55rem; aspect-ratio: 3 / 2;
  background: #E3F0FA; overflow: hidden;
  border-radius: var(--hk-radius) var(--hk-radius) 0 0;
}
.hk-card__bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hk-card--aus .hk-card__bild { filter: grayscale(1); opacity: .55; }

.hk-card__soon {
  align-self: flex-start; font-size: .75rem; font-weight: 700;
  background: var(--hk-sun); color: var(--hk-ink); padding: .1rem .5rem; border-radius: 999px;
}

/* ------------------------------------------------------------- Wunschtermin */

.hk-wunsch {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem;
  padding: .9rem 1rem; margin: 0 0 .9rem;
  border: 1px solid var(--hk-line); border-radius: var(--hk-radius);
  background: var(--hk-surface); box-shadow: var(--hk-shadow);
}
.hk-wunsch__feld { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.hk-wunsch__feld label { font-size: .85rem; font-weight: 700; }
/* Der Hilfetext steht in einer eigenen Zeile unter Feld und Knopf. Solange er
   in der Feldspalte hing, richtete align-items:flex-end den Knopf an seiner
   Unterkante aus - er saß dadurch sichtbar tiefer als das Eingabefeld. */
.hk-wunsch__hilfe { flex: 1 0 100%; font-size: .78rem; color: var(--hk-muted); margin-top: -.15rem; }
.hk-wunsch input[type="date"] {
  font: inherit; padding: .5rem .6rem; max-width: 100%;
  border: 1px solid var(--hk-line); border-radius: var(--hk-radius-sm);
  background: var(--hk-surface); color: var(--hk-ink);
}
/* .hk p setzt margin fuer alle Absaetze und ist spezifischer als eine
   einzelne Klasse - ohne das .hk davor bleibt der Abstand nach unten null
   und der gruene Balken klebt an den Filterknoepfen. */
.hk p.hk-wunsch__info {
  margin: 0 0 1.75rem; padding: .6rem .85rem; font-size: .9rem;
  border-radius: var(--hk-radius-sm); border: 1px solid var(--hk-line);
  background: var(--hk-surface); color: var(--hk-ink);
}
.hk-wunsch__info--ok  { border-color: #bfe3cc; background: #e9f7ef; color: var(--hk-free); }
.hk-wunsch__info--bad { border-color: #f3c9c2; background: #fdeceb; color: var(--hk-bad); }

/* Modellkarten mit gesetztem Wunschtermin */
.hk-card__frei, .hk-card__belegt {
  align-self: flex-start; font-size: .72rem; font-weight: 800;
  padding: .1rem .5rem; border-radius: 999px; margin-bottom: .1rem;
}
.hk-card__frei   { background: #e9f7ef; color: var(--hk-free); }
.hk-card__belegt { background: #eef1f5; color: var(--hk-muted); }
.hk-card--frei   { border-color: #bfe3cc; }
.hk-card--aus    { background: #f7f9fc; box-shadow: none; }
.hk-card--aus .hk-card__name { color: var(--hk-muted); }
.hk-card--aus .hk-card__tag,
.hk-card--aus .hk-card__meta { opacity: .7; }
.hk-card__grund { font-size: .8rem; color: var(--hk-bad); }
/* Der einzige Weg aus einer belegten Karte heraus – am Handy muss der
   Finger ihn treffen, deshalb bewusst hoch statt nur eine Textzeile. */
.hk-linkbtn {
  display: inline-block; font: inherit; font-size: .85rem; font-weight: 700;
  cursor: pointer; padding: .55rem 0; min-height: 2.4rem;
  border: 0; background: none; color: var(--hk-accent);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ----------------------------------------------------------------- Lieferung */

.hk-liefer {
  border: 1px solid var(--hk-line); border-radius: var(--hk-radius);
  padding: .35rem 1.05rem 1.05rem; margin: 0;
  background: var(--hk-surface); box-shadow: var(--hk-shadow);
}
.hk-liefer legend {
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--hk-muted); padding: 0 .35rem;
}
.hk-liefer__zeile { display: grid; gap: .3rem; margin-top: .7rem; }
.hk-liefer__zeile label { font-size: .85rem; font-weight: 650; }
.hk-liefer select {
  font: inherit; width: 100%; padding: .5rem .6rem;
  border: 1px solid var(--hk-line); border-radius: var(--hk-radius-sm);
  background: var(--hk-surface); color: var(--hk-ink);
}
/* Auswahlfeld, wenn Postleitzahl oder Ort mehrdeutig sind */
.hk-liefer [data-hk-lieferwahlwrap] select { width: 100%; }

.hk-liefer__ergebnis {
  display: grid; gap: .2rem; margin-top: .9rem; padding: .75rem .85rem;
  border-radius: var(--hk-radius-sm); background: var(--hk-canvas);
  border: 1px solid var(--hk-line); font-size: .9rem;
}
.hk-liefer__ergebnis--warten { color: var(--hk-muted); display: block; }
.hk-liefer__posten, .hk-liefer__summe { display: flex; justify-content: space-between; gap: 1rem; }
.hk-liefer__summe {
  margin-top: .3rem; padding-top: .4rem; border-top: 1px solid var(--hk-line);
  font-weight: 700;
}
.hk-liefer__weg, .hk-liefer__hinweis { font-size: .8rem; color: var(--hk-muted); }
.hk-liefer__hinweis { margin-top: .25rem; font-weight: 650; color: var(--hk-warn, #a4670a); }

.hk-summary__liefer {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: .4rem; padding-top: .4rem; border-top: 1px dashed var(--hk-line);
  font-size: .92rem;
}

/* ------------------------------------------------------------- Nutzungsarten
   Wipeout PVC mit Bällen oder mit Wasser. Die Überschrift trennt die Tarife
   sichtbar, damit niemand die Einschränkung übersieht. */

.hk-nutzung + .hk-nutzung { margin-top: 1rem; }
.hk-nutzung__titel {
  margin: 0 0 .15rem; font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--hk-ink);
  padding-bottom: .3rem; border-bottom: 2px solid var(--hk-line);
}
.hk-nutzung__hinweis {
  margin: .35rem 0 .5rem; font-size: .82rem; color: var(--hk-muted);
}

/* --------------------------------------------------------- Alternativvorschläge */

.hk-alt {
  margin-top: .9rem; padding: .95rem 1.05rem;
  border: 1px solid var(--hk-line); border-radius: var(--hk-radius);
  background: var(--hk-surface); box-shadow: var(--hk-shadow);
}
.hk-alt__kopf { margin: 0 0 .75rem; font-size: .92rem; }
.hk-alt__block + .hk-alt__block { margin-top: .9rem; }
.hk-alt__block h4 {
  margin: 0 0 .45rem; font-size: .76rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--hk-muted);
}
.hk-alt__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.hk-chip {
  font: inherit; font-size: .85rem; font-weight: 650; cursor: pointer;
  padding: .4rem .75rem; border-radius: 999px;
  border: 1px solid var(--hk-line); background: var(--hk-canvas); color: var(--hk-ink);
}
.hk-chip s { color: var(--hk-muted); font-weight: 500; text-decoration: none; }
@media (hover: hover) {
  .hk-chip:hover { border-color: var(--hk-accent); color: var(--hk-accent); }
}

/* Der Wunschtag bleibt im Kalender markiert, auch wenn er belegt ist – sonst
   sucht der Kunde ihn im Raster vergeblich. Er darf dabei aber auf keinen Fall
   aussehen wie ein gewählter freier Tag: durchgestrichen und blass bleibt
   durchgestrichen und blass, dazu nur ein Ring zum Wiederfinden. */
.hk-cal__days .hk-day[data-free="0"][data-selected="true"] {
  background: var(--hk-canvas);
  border-color: var(--hk-accent);
  box-shadow: 0 0 0 2px var(--hk-accent) inset;
  color: var(--hk-busy);
}

/* --------------------------------------------------------- Kalender (Signatur) */

.hk-calwrap { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .hk-calwrap { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); } }

.hk-cal { border: 1px solid var(--hk-line); border-radius: var(--hk-radius);
          background: var(--hk-surface); padding: 1rem; box-shadow: var(--hk-shadow); }
.hk-cal__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.hk-cal__head strong { font-size: 1rem; }
.hk-cal__nav { display: flex; gap: .3rem; }
.hk-cal__nav button {
  font: inherit; cursor: pointer; width: 2.1rem; height: 2.1rem; line-height: 1;
  border: 1px solid var(--hk-line); border-radius: var(--hk-radius-sm);
  background: var(--hk-surface); color: var(--hk-ink);
}
.hk-cal__nav button[disabled] { opacity: .35; cursor: not-allowed; }

.hk-cal__dow, .hk-cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.hk-cal__dow span { text-align: center; font-size: .7rem; font-weight: 700; color: var(--hk-muted); padding-bottom: .3rem; }

.hk-day {
  position: relative; font: inherit; font-variant-numeric: tabular-nums;
  aspect-ratio: 1; display: grid; place-items: center; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--hk-radius-sm);
  background: var(--hk-canvas); color: var(--hk-ink); font-weight: 600; font-size: .9rem;
}
.hk-day[data-free="0"] { color: var(--hk-busy); cursor: not-allowed; background: transparent;
                         text-decoration: line-through; text-decoration-thickness: 1px; }
.hk-day[data-free="1"]::after {
  content: ""; position: absolute; bottom: .28rem; width: .3rem; height: .3rem;
  border-radius: 50%; background: var(--hk-free);
}
.hk-day[data-selected="true"] { background: var(--hk-accent); border-color: var(--hk-accent); color: #fff; }
.hk-day[data-selected="true"]::after { background: var(--hk-sun); }
.hk-day--pad { visibility: hidden; }

.hk-legend { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .8rem;
             font-size: .78rem; color: var(--hk-muted); }
.hk-legend i { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
               background: var(--hk-free); margin-right: .3rem; }

/* ------------------------------------------------------------------ Tarifwahl */

.hk-tariffs { display: grid; gap: .6rem; }
.hk-tariff {
  display: grid; grid-template-columns: 1.4rem 1fr auto; gap: .75rem; align-items: start;
  padding: .9rem 1rem; border: 1px solid var(--hk-line); border-radius: var(--hk-radius);
  background: var(--hk-surface); cursor: pointer;
}
.hk-tariff:has(input:checked) { border-color: var(--hk-accent); box-shadow: 0 0 0 2px var(--hk-accent) inset; }
.hk-tariff input { width: 1.1rem; height: 1.1rem; margin: .25rem 0 0; accent-color: var(--hk-accent); }
.hk-tariff__label { font-weight: 700; }
.hk-tariff__hint { font-size: .82rem; color: var(--hk-muted); }
.hk-tariff__span { font-size: .82rem; color: var(--hk-ink); margin-top: .3rem; }
.hk-tariff--aus {
  opacity: .72;
  cursor: default;
  border-style: dashed;
}
.hk-tariff--aus .hk-tariff__label { text-decoration: line-through; }
.hk-tariff__kreuz {
  flex: none;
  width: 1.25rem; height: 1.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--hk-canvas);
  color: var(--hk-busy);
  font-size: .72rem; font-weight: 700;
}
.hk-tariff__grund {
  display: block;
  margin-top: .15rem;
  font-size: .82rem;
  color: var(--hk-muted);
}

.hk-tariff__price { font-family: var(--hk-font-num); font-weight: 700; font-size: 1.1rem; white-space: nowrap; }

/* ------------------------------------------------------- Zubehör und Formular */

.hk-list { display: grid; gap: .55rem; }
.hk-item {
  /* minmax(0,...) statt 1fr: "1fr" ist minmax(auto,1fr) und schrumpft NICHT
     unter die Mindestbreite des Textes - lange Zubehoernamen schoben die
     ganze Seite zur Seite. Faellt nur auf, wenn Schritt 3 sichtbar ist. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .75rem; align-items: center;
  padding: .8rem 1rem; border: 1px solid var(--hk-line); border-radius: var(--hk-radius);
  background: var(--hk-surface);
}
.hk-item__name { font-weight: 650; }
.hk-item__note { font-size: .8rem; color: var(--hk-muted); }
/* Die Masse stehen neben dem Namen, damit die vier Fallschutzmatten
   auseinanderzuhalten sind (B.4). */
.hk-item__masse { font-size: .8rem; color: var(--hk-muted); white-space: nowrap; }
.hk-item__bild { width: 56px; height: 40px; object-fit: cover; border-radius: 6px;
                 border: 1px solid var(--hk-line); flex: 0 0 auto; }
.hk-item__haupt { display: flex; gap: .6rem; align-items: center; min-width: 0; }
/* Die ganze Zeile ist ein Schalter: ein Klick legt ein Stueck in den Korb,
   der naechste nimmt es wieder heraus (Torsten, 21.09.2026). Gewaehltes
   hebt sich deutlich ab - vorher sah man nur eine kleine 1 im Auswahlfeld. */
.hk-item[data-zub] { cursor: pointer; }
.hk-item[data-zub]:hover { border-color: var(--hk-accent); }
.hk-item--an { border-color: var(--hk-free); box-shadow: inset 0 0 0 1px var(--hk-free);
               background: #f1faf5; }
.hk-item--an .hk-item__name { font-weight: 800; }
.hk-item select { cursor: auto; }
.hk-done__abhol { font-weight: 650; margin: .35rem 0 0; }
/* Hinweis unter dem E-Mail-Feld: rot, wenn die Domain keine Post annimmt,
   sonst nur eine Rueckfrage bei einem wahrscheinlichen Vertipper. */
.hk-mailhinweis { margin: .35rem 0 0; font-size: .86rem; font-weight: 600; }
.hk-mailhinweis--bad { color: var(--hk-bad); }
.hk-mailhinweis--frage { color: var(--hk-muted); }
.hk-item__txt { min-width: 0; }
/* Ausgebucht: sichtbar bleiben, damit der Kunde weiss, dass es den
   Artikel gibt - nur eben nicht an diesem Tag. */
.hk-item--weg { opacity: .55; }
.hk-item__price { font-family: var(--hk-font-num); font-weight: 650; white-space: nowrap; }
.hk-item select { font: inherit; padding: .35rem .5rem; border: 1px solid var(--hk-line);
                  border-radius: var(--hk-radius-sm); background: var(--hk-surface); }

.hk-fields { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.hk-field { display: flex; flex-direction: column; gap: .3rem; }
.hk-field--wide { grid-column: 1 / -1; }
.hk-field label { font-size: .85rem; font-weight: 650; }
.hk-field input, .hk-field textarea {
  font: inherit; padding: .6rem .7rem; border: 1px solid var(--hk-line);
  border-radius: var(--hk-radius-sm); background: var(--hk-surface); color: var(--hk-ink);
}
.hk-field textarea { min-height: 5.5rem; resize: vertical; }
.hk-field input[aria-invalid="true"] { border-color: var(--hk-bad); }
.hk-field small { font-size: .78rem; color: var(--hk-muted); }
.hk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hk-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; margin-top: 1rem; }
.hk-check input { width: 1.1rem; height: 1.1rem; margin-top: .18rem; accent-color: var(--hk-accent); }

/* ------------------------------------------------------------- Zusammenfassung */

.hk-summary { border: 1px solid var(--hk-line); border-radius: var(--hk-radius);
              background: var(--hk-surface); padding: 1.1rem 1.2rem; box-shadow: var(--hk-shadow); }
.hk-summary dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: .75rem 0 0; }
.hk-summary dt { color: var(--hk-muted); font-size: .85rem; }
.hk-summary dd { margin: 0; font-weight: 600; font-size: .9rem; }
.hk-summary__total { display: flex; justify-content: space-between; align-items: baseline;
                     margin-top: 1rem; padding-top: .8rem; border-top: 2px solid var(--hk-ink); }
.hk-summary__total b { font-family: var(--hk-font-num); font-size: 1.5rem; }

/* ---------------------------------------------------------------- Aktionsleiste */

.hk-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
  margin-top: 1.5rem; padding: .85rem 1rem;
  background: color-mix(in srgb, var(--hk-surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hk-line); border-radius: var(--hk-radius);
  box-shadow: 0 -6px 24px -14px rgba(22, 35, 58, .3);
}
.hk-bar__info { font-size: .88rem; color: var(--hk-muted); min-width: 10rem; }
.hk-bar__info b { color: var(--hk-ink); font-family: var(--hk-font-num); }
.hk-bar__actions { display: flex; gap: .5rem; margin-left: auto; }

.hk-btn {
  font: inherit; font-weight: 650; cursor: pointer;
  padding: .7rem 1.3rem; border-radius: var(--hk-radius-sm); border: 1px solid transparent;
}
.hk-btn--primary { background: var(--hk-accent); color: var(--hk-accent-ink); }
.hk-btn--ghost { background: transparent; border-color: var(--hk-line); color: var(--hk-ink); }
.hk-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* -------------------------------------------------------------------- Meldungen */

.hk-note { padding: .8rem 1rem; border-radius: var(--hk-radius-sm); font-size: .9rem; margin: 1rem 0 0; }
.hk-note--info { background: var(--hk-canvas); color: var(--hk-ink); }
.hk-note--bad  { background: #fdf2f0; border: 1px solid #f3c9c2; color: var(--hk-bad); }
.hk-note--good { background: #eef8f1; border: 1px solid #bfe3cc; color: var(--hk-free); }
.hk-note[hidden] { display: none; }

.hk-done { text-align: center; padding: 2.5rem 1rem; }
.hk-done__ref { display: inline-block; font-family: var(--hk-font-num); font-size: 1.35rem;
                font-weight: 700; padding: .35rem .9rem; border-radius: var(--hk-radius-sm);
                background: var(--hk-sun); color: var(--hk-ink); margin: .75rem 0; }

.hk-skel { height: 8rem; border-radius: var(--hk-radius); background: var(--hk-canvas); }
.hk-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------- Vertrag und Unterschrift */

/* Der Vertrag ist lang. Er bekommt ein eigenes Scrollfeld, damit die
   Ankreuzfelder und die Unterschrift ohne Scrollen erreichbar bleiben -
   sonst tippt am Handy niemand bis unten durch. */
.hk-vertrag {
  max-height: 22rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1.1rem;
  border: 1px solid var(--hk-line);
  border-radius: var(--hk-radius-sm);
  background: var(--hk-surface);
  font-size: .82rem;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--hk-ink);
}
.hk-vertrag:focus-visible { outline: 2px solid var(--hk-accent); outline-offset: 2px; }
.hk-vertrag { white-space: normal; }
.hk-vt__h1 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .6rem; }
.hk-vt__h2 { font-size: .9rem; font-weight: 700; margin: .9rem 0 .3rem; }
.hk-vt__p  { margin: 0; }
.hk-vt__li { margin: 0 0 0 1rem; position: relative; }
.hk-vt__li::before { content: '–'; position: absolute; left: -.9rem; }
.hk-vt__klein { font-size: .76rem; color: var(--hk-muted); margin: .2rem 0; }
.hk-vt__leer { height: .55rem; }

.hk-pflicht { margin-top: 1.1rem; }
.hk-pflicht__kopf { font-weight: 600; font-size: .9rem; margin: 0 0 .2rem; }

.hk-sig { margin-top: 1.4rem; }
.hk-sig__zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; margin-bottom: .35rem;
}
.hk-sig__zeile label, .hk-sig__label { font-size: .85rem; font-weight: 600; }
.hk-sig__zeile input {
  flex: 1 1 auto; min-width: 0; max-width: 22rem;
}
.hk-sig__weg { padding: .3rem .7rem; font-size: .8rem; }

/* touch-action: none, sonst scrollt das Handy beim Unterschreiben die Seite
   weg statt eine Linie zu zeichnen. */
.hk-sig__feld {
  display: block;
  width: 100%;
  height: 10rem;
  touch-action: none;
  border: 1px dashed var(--hk-line);
  border-bottom: 2px solid var(--hk-ink);
  border-radius: var(--hk-radius-sm) var(--hk-radius-sm) 0 0;
  background: var(--hk-surface);
  cursor: crosshair;
}
.hk-sig__feld[data-gezeichnet="true"] { border-style: solid; border-color: var(--hk-accent); border-bottom-color: var(--hk-ink); }
.hk-sig__hinweis { margin: .4rem 0 0; font-size: .8rem; color: var(--hk-muted); }

@media screen and (max-width: 32rem) {
  .hk-sig__zeile { flex-wrap: wrap; }
  .hk-sig__zeile input { max-width: none; }
  .hk-vertrag { max-height: 17rem; font-size: .8rem; }
}

/* ------------------------------------------------------------ Tarifwahl */

/* Untereinander statt nebeneinander, sobald es eng wird - Torsten verlangt
   ausdruecklich kein seitliches Scrollen auf dem Handy. */
.hk-tarife { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }

.hk-tarif {
  display: grid;
  gap: .3rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--hk-line);
  border-radius: var(--hk-radius-sm);
  background: var(--hk-surface);
  cursor: pointer;
}
.hk-tarif[data-gewaehlt="true"] { border-color: var(--hk-accent); box-shadow: 0 0 0 1px var(--hk-accent) inset; }
.hk-tarif input { position: absolute; opacity: 0; pointer-events: none; }
.hk-tarif__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.hk-tarif__preis { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hk-tarif__auf { font-size: .8rem; color: var(--hk-muted); }
.hk-tarif__text { font-size: .86rem; margin-top: .3rem; }
.hk-tarif__storno, .hk-tarif__zahl { font-size: .8rem; color: var(--hk-muted); }

/* ------------------------------------------------------- Zahlung und Mandat */

.hk-zahlart { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--hk-line); }
.hk-zahlart .hk-check { margin-top: .5rem; }
.hk-zahlart input { accent-color: var(--hk-accent); }

.hk-mandat {
  margin-top: 1.6rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--hk-accent);
  border-radius: var(--hk-radius-sm);
  background: var(--hk-surface);
  text-align: left;
}
.hk-mandat h3 { margin: 0 0 .3rem; font-size: 1rem; }

/* Der SEPA-Mandatstext. Bewusst kleiner als der uebrige Text, aber nicht
   kleiner als 12px und mit vollem Kontrast - er ist eine Ermaechtigung,
   kein Kleingedrucktes, das man wegdruecken darf. */
.hk-mandat__text {
  margin: .8rem 0 0;
  font-size: .78rem;
  line-height: 1.5;
}
/* Stripe zeichnet sein Feld in einen eigenen Rahmen (iframe) - der braucht
   sichtbare Hoehe, sonst bleibt er unsichtbar und niemand kann etwas eingeben. */
.hk-mandat [data-hk-iban] {
  margin-top: .8rem; padding: .7rem .8rem; min-height: 2.8rem;
  border: 1px solid var(--hk-line); border-radius: var(--hk-radius-sm);
  background: var(--hk-canvas);
}