/*
 * Buchungstool, Oberflaeche
 * ==========================
 * Uebersetzt aus _vorschau/buchungstool-prototyp.dc.html (Claude Design).
 * Mobile-first: die Basis gilt fuer das Handy, die @media-Bloecke bauen nach oben aus.
 *
 * FARBEN: gesetzt von Fabiano am 2026-08-14. Die Werte kommen 1:1 aus dem
 * Claude-Design-Prototyp und werden hier bewusst NICHT auf die heutigen
 * 19 Brand-Tokens gezogen. Grund: das Design entsteht in Claude Design, dort
 * liegt das Design-System. Von der fertigen Webseite aus werden danach die CI
 * (10-Impuls/03-brand/) und der Skill impulsplus-design aktualisiert, nicht
 * umgekehrt. Wer hier auf die alten Tokens zurueckmappt, bricht den Weg
 * Claude Design -> Repo -> GitHub -> live.
 *
 * Spec: 00-System/specs/2026-08-10-buchungstool-design.md
 * Plan: 00-System/plans/2026-08-10-buchungstool.md, B7
 */

/* ===== TOKENS ===== */
:root {
  /* deckungsgleich mit der heutigen CI */
  --ip-blue: #2B0AFF;
  --ip-blue-ink: #1A06A8;
  --ip-blue-tint: #F6F3FF;
  --ip-black: #000000;
  --ip-white: #FFFFFF;
  /* Steht nur als Spiegel der CI hier. Im Buchungstool wird damit KEINE Schrift
     gesetzt (Fabiano, 2026-08-15: kein grauer Fliesstext). Die Rangfolge laeuft
     ueber Groesse und Schnitt, nicht ueber Helligkeit. Gedaempfte Schrift gibt
     es nur noch als Zustand, dafuer --bk-still. */
  --ip-gray-700: #333333;

  /* aus dem Claude-Design-Prototyp, kuenftige Webseiten-CI (siehe Kopf) */
  --bk-linie: #E3E5EC;        /* Standard-Rahmen */
  --bk-linie-still: #EBECF2;  /* Rahmen und Flaeche fuer Gesperrtes */
  --bk-flaeche: #F3F4F8;      /* eingesenkte Flaeche */
  --bk-still: #9095A6;        /* gedaempfte Schrift */
  --bk-fehler: #D3241E;
  --bk-fehler-hell: #FFEFEF;  /* heller als das CI-Tint #FFE5E5, sonst liegt
                                 das Rot des Prototyps bei 11 Pixel unter 4.5 */

  /* Frei-Grün, gesetzt von Fabiano am 2026-08-14: der Balken am Slot-Raster
     soll auf einen Blick sagen, ob der Tag frei oder ausgebucht ist.
     Bewusst dunkler als das CI-Grün #10A05B, das liegt bei 11 Pixel Schrift
     auf hellem Grund unter dem Kontrast-Mindestwert (3.1 statt 4.5).
     Beim spaeteren CI-Abgleich mitentscheiden. */
  --bk-gruen: #0B7A45;
  --bk-gruen-hell: #E8F7EF;

  --ip-font-sans: 'Poppins', -apple-system, 'Segoe UI', Arial, sans-serif;
  --ip-anim-fast: 0.15s linear;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
}

/* Poppins liegt lokal im Repo, die @font-face-Bloecke stehen in /schrift/schrift.css
   (dort, weil jede Seite die Schrift braucht). Nie vom Google-Fonts-CDN laden (W13). */

/* ===== BASIS ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ip-white);
  color: var(--ip-black);
  font-family: var(--ip-font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ip-black); text-decoration: none; }
a:hover { color: var(--ip-blue); }

button, input, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

:focus-visible { outline: 2px solid var(--ip-blue); outline-offset: 2px; }
::selection { background: var(--ip-blue); color: var(--ip-white); }
[hidden] { display: none !important; }

input::placeholder, textarea::placeholder { color: var(--bk-still); }

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.3; letter-spacing: -0.5px; }

@keyframes ipUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ipIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ipPop { 0% { transform: scale(0.92); opacity: 0; } 60% { transform: scale(1.03); } 100% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ===== RAHMEN ===== */
.bk-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) 0;
}

.bk-titel {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: var(--sp-5);
}

/* ===== FORTSCHRITT ===== */
.bk-fortschritt ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  list-style: none;
  margin: 0 0 var(--sp-2);
  padding: 0;
}

/* 44 Pixel ist die Untergrenze fuers Tippen, sie gilt auch hier: die erledigten
   Marken sind anklickbar und fuehren zurueck. Die Schrift bleibt bei 13 Pixel,
   nur die Flaeche waechst (Befund vom 2026-08-17, vorher 28 Pixel hoch). */
.bk-schrittmarke {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-1) 0;
  font-size: 13px;
  color: var(--ip-black);
  cursor: default;
}
.bk-schrittmarke .bk-punkt {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--bk-linie);
}
.bk-schrittmarke.is-erledigt { color: var(--ip-black); font-weight: 500; cursor: pointer; }
.bk-schrittmarke.is-erledigt .bk-punkt { background: var(--ip-black); }
.bk-schrittmarke.is-aktiv { color: var(--ip-blue); font-weight: 600; }
.bk-schrittmarke.is-aktiv .bk-punkt { background: var(--ip-blue); }

.bk-balken { height: 2px; background: var(--bk-linie-still); margin-bottom: var(--sp-6); }
.bk-balken span { display: block; height: 2px; background: var(--ip-blue); transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

/* ===== LAYOUT ===== */
.bk-layout { display: flex; flex-direction: column; gap: var(--sp-6); }
.bk-funnel { display: flex; flex-direction: column; gap: var(--sp-5); }
.bk-seite { display: flex; flex-direction: column; gap: var(--sp-2); }

.bk-schritt { animation: ipUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.bk-schritt-kopf { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.bk-nummer { font-size: 13px; font-weight: 600; color: var(--ip-blue); }
.bk-schritt-kopf h2 { font-size: 22px; letter-spacing: -0.8px; }
.bk-hilfstext { margin: 0 0 var(--sp-4); font-size: 14px; color: var(--ip-black); }

/* ===== 01 THEMEN ===== */
.bk-themen { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
.bk-thema { display: flex; flex-direction: column; gap: var(--sp-2); }

.bk-karte {
  display: block;
  width: 100%;
  flex: 1;
  padding: var(--sp-4);
  border: 1px solid var(--bk-linie);
  background: var(--ip-white);
  transition: border-color var(--ip-anim-fast), background-color var(--ip-anim-fast);
}
.bk-karte:hover { border-color: var(--ip-blue); }
.bk-karte.is-gewaehlt { border-color: var(--ip-blue); background: var(--ip-blue-tint); }

.bk-karte-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.bk-karte-titel { font-size: 16px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.35; }
.bk-karte-min {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 7px;
  background: var(--bk-linie-still);
  color: var(--ip-black);
}
.bk-karte.is-gewaehlt .bk-karte-min { background: var(--ip-blue); color: var(--ip-white); }
.bk-karte-text { display: block; margin-top: var(--sp-1); font-size: 14px; line-height: 1.5; color: var(--ip-black); }

.bk-rueckfrage {
  border: 1px solid var(--ip-blue);
  background: var(--ip-blue-tint);
  padding: var(--sp-4);
  animation: ipUp 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.bk-rueckfrage h3 { font-size: 15px; margin-bottom: var(--sp-3); letter-spacing: -0.2px; }
.bk-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.bk-chip {
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid var(--bk-linie);
  background: var(--ip-white);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.1px;
  transition: border-color var(--ip-anim-fast), background-color var(--ip-anim-fast);
}
.bk-chip:hover { border-color: var(--ip-blue); }
.bk-chip.is-gewaehlt { border-color: var(--ip-blue); background: var(--ip-blue); color: var(--ip-white); font-weight: 600; }

.bk-frei { display: block; margin-top: var(--sp-3); }

/* ===== FELDER ===== */
.bk-feld-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: var(--sp-2); }
.bk-optional { font-weight: 400; color: var(--ip-black); }
.bk-pflicht { color: var(--ip-blue); }

.bk-feld {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1px solid var(--bk-linie);
  background: var(--ip-white);
  /* 16px verhindert, dass iOS beim Antippen hineinzoomt. */
  font-size: 16px;
  line-height: 1.5;
  border-radius: 0;
  -webkit-appearance: none;
}
textarea.bk-feld { min-height: 96px; resize: vertical; }
.bk-feld:focus { border-color: var(--ip-blue); }
.bk-feld.is-fehlt { border-color: var(--bk-fehler); }
.bk-feld-zweck { display: block; margin-top: var(--sp-2); font-size: 13px; line-height: 1.5; color: var(--ip-black); }

/* ===== 02 PERSONEN ===== */
.bk-personen { display: flex; flex-direction: column; gap: var(--sp-2); }

.bk-person {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  width: 100%;
  padding: var(--sp-4);
  border: 1px solid var(--bk-linie);
  background: var(--ip-white);
  transition: border-color var(--ip-anim-fast), background-color var(--ip-anim-fast);
}
.bk-person:hover { border-color: var(--ip-blue); }
.bk-person.is-gewaehlt { border-color: var(--ip-blue); background: var(--ip-blue-tint); }

.bk-portrait {
  width: 56px;
  height: 56px;
  flex: none;
  display: block;
  overflow: hidden;
  background: var(--bk-linie-still);
  filter: grayscale(1);
}
/* Das Bild fuellt das quadratische Feld. Beschnitten wird hier nie etwas, die
   Quellen sind quadratisch, das prueft bilder-optimieren.ps1 mit -Quadrat. */
.bk-portrait picture, .bk-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bk-person.is-gewaehlt .bk-portrait { filter: none; }

.bk-person-text { flex: 1; min-width: 0; }
.bk-person-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.bk-person-name { font-size: 16px; font-weight: 600; letter-spacing: -0.3px; }
.bk-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: var(--ip-blue);
  color: var(--ip-white);
  padding: 3px 8px;
}
.bk-badge.is-aus { display: none; }
.bk-person-rolle { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--ip-black); }
.bk-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.bk-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border: 1px solid var(--bk-linie);
  color: var(--ip-black);
}

/* ===== 03 TERMIN ===== */
.bk-kalender { display: flex; align-items: stretch; gap: var(--sp-2); }

.bk-wochenpfeil {
  flex: none;
  width: 44px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bk-linie);
  background: var(--ip-white);
  font-size: 15px;
}
.bk-wochenpfeil:hover:not(:disabled) { border-color: var(--ip-blue); }
.bk-wochenpfeil:disabled { border-color: var(--bk-linie-still); background: var(--bk-flaeche); color: var(--bk-still); cursor: not-allowed; }

.bk-wochen { display: flex; flex: 1; min-width: 0; }
.bk-woche { flex: 1; min-width: 0; }
.bk-woche--zwei { display: none; }
.bk-kw {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ip-black);
  margin-bottom: var(--sp-2);
}
.bk-tage { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-1); }

.bk-tag-knopf {
  min-height: 62px;
  padding: 7px 2px;
  text-align: center;
  border: 1px solid var(--bk-linie);
  background: var(--ip-white);
  transition: border-color var(--ip-anim-fast), background-color var(--ip-anim-fast);
}
.bk-tag-knopf:hover:not(:disabled) { border-color: var(--ip-blue); }
.bk-tag-knopf:disabled { border-color: var(--bk-linie-still); background: var(--bk-flaeche); color: var(--bk-still); cursor: not-allowed; }
.bk-tag-knopf.is-leer { border-style: dashed; background: var(--bk-flaeche); color: var(--bk-still); }
.bk-tag-knopf.is-gewaehlt { border-color: var(--ip-blue); background: var(--ip-blue); color: var(--ip-white); }
.bk-wt { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.6; }
.bk-tz { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.3; }
.bk-mon { display: block; font-size: 11px; font-weight: 500; opacity: 0.6; }

.bk-slots { margin-top: var(--sp-4); }
.bk-slots-kopf { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.bk-slots-kopf h3 { font-size: 15px; letter-spacing: -0.2px; }
.bk-slot-anzahl {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border: 1px solid var(--bk-gruen);
  background: var(--bk-gruen-hell);
  color: var(--bk-gruen);
}
.bk-slot-anzahl.is-leer { border-color: var(--bk-fehler); background: var(--bk-fehler-hell); color: var(--bk-fehler); }
.bk-slot-anzahl:empty { display: none; }

.bk-slot-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--sp-2); }
.bk-slot-raster:empty { display: none; }

.bk-slot {
  min-height: 50px;
  padding: 13px 8px;
  text-align: center;
  border: 1px solid var(--bk-linie);
  background: var(--ip-white);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  transition: border-color var(--ip-anim-fast), background-color var(--ip-anim-fast);
}
.bk-slot:hover { border-color: var(--ip-blue); }
.bk-slot.is-gewaehlt { border-color: var(--ip-blue); background: var(--ip-blue); color: var(--ip-white); }

.bk-mittag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-2) 0;
  padding: 10px 14px;
  background: var(--bk-flaeche);
  border-left: 2px solid var(--ip-blue);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ip-black);
}
.bk-mittag-zeit { flex: none; font-weight: 600; color: var(--ip-blue); }

.bk-slot-hinweis { margin: var(--sp-3) 0 0; font-size: 14px; color: var(--ip-black); }
.bk-textlink {
  display: inline;
  padding: 0;
  font-size: inherit;
  font-weight: 600;
  color: var(--ip-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bk-textlink:hover { color: var(--ip-blue-ink); }

.bk-ausweich {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px dashed var(--bk-linie);
  min-height: 56px;
}
.bk-ausweich:hover { border-color: var(--ip-blue); background: var(--ip-blue-tint); color: var(--ip-black); }
.bk-ausweich-titel { display: block; font-size: 15px; font-weight: 600; }
.bk-ausweich-text { display: block; font-size: 14px; color: var(--ip-black); }
.bk-ausweich-pfeil { font-size: 16px; color: var(--ip-blue); }

/* ===== 04 KONTAKT ===== */
.bk-kontakt { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.bk-kontakt label { display: block; }
.bk-nachricht { display: block; margin-bottom: var(--sp-3); }
.bk-fehler { margin: 0 0 var(--sp-3); font-size: 14px; font-weight: 600; color: var(--bk-fehler); animation: ipIn 0.2s linear both; }

/* ===== NAVIGATION ===== */
.bk-nav {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
  padding: var(--sp-4) 0;
  background: var(--ip-white);
  border-top: 1px solid var(--bk-linie);
  /* Aus dem Prototyp uebernommen, gleiche Setzung wie bei den Farben: das
     Design kommt aus Claude Design. Heisst, die heutige Regel keine Schatten
     gilt hier nicht, sie wird von der Webseite her nachgezogen. */
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.06);
}

.bk-knopf {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 54px;
  padding: 15px 24px;
  background: var(--ip-blue);
  color: var(--ip-white);
  border: 1px solid var(--ip-blue);
  font-size: 15px;
  font-weight: 600;
  transition: background var(--ip-anim-fast), border-color var(--ip-anim-fast);
}
.bk-knopf:hover { background: var(--ip-blue-ink); border-color: var(--ip-blue-ink); }
.bk-knopf.is-gesperrt { background: var(--bk-linie-still); color: var(--bk-still); border-color: var(--bk-linie-still); }

.bk-knopf-zweit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 54px;
  padding: 15px 20px;
  background: var(--ip-white);
  border: 1px solid var(--ip-black);
  font-size: 15px;
  font-weight: 600;
  transition: background var(--ip-anim-fast), color var(--ip-anim-fast);
}
.bk-knopf-zweit:hover { background: var(--ip-black); color: var(--ip-white); }

.bk-rest { display: none; font-size: 14px; color: var(--ip-black); }

/* ===== SEITENSPALTE ===== */
.bk-seite-block { background: var(--bk-flaeche); padding: var(--sp-4); }
.bk-seite-block--linie { background: var(--ip-white); border: 1px solid var(--bk-linie); }

.bk-label {
  margin: 0 0 var(--sp-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ip-black);
}

.bk-zusammenfassung { margin: 0; }
.bk-zusammenfassung > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--bk-linie);
}
.bk-zusammenfassung dt { flex: none; font-size: 14px; color: var(--ip-black); }
.bk-zusammenfassung dd { margin: 0; font-size: 14px; font-weight: 600; text-align: right; line-height: 1.4; }
.bk-zusammenfassung dd.is-offen { font-weight: 400; color: var(--ip-black); }
.bk-zusammenfassung dd.is-gesetzt { color: var(--ip-blue); }

/* Der Espresso-Zaehler ist eine eigene Komponente, Stile in
   /komponenten/espresso.css. Hier steht bewusst nichts dazu, sonst laesst er
   sich nicht auf die Startseite mitnehmen. */

.bk-kontaktzeilen {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}
/* Telefon und Mail sind auf dem Handy die Notausgaenge aus dem Funnel, sie
   brauchen dieselben 44 Pixel wie jede andere Tippflaeche (Befund vom
   2026-08-17, vorher 24 Pixel hoch). Der Abstand steckt jetzt in der Flaeche
   selbst, darum faellt das gap weg. */
.bk-kontaktzeilen a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* ===== BESTAETIGUNG ===== */
.bk-ok { animation: ipUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; padding-bottom: var(--sp-8); }
.bk-ok-marke {
  display: inline-block;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  background: var(--ip-blue);
  color: var(--ip-white);
  font-size: 15px;
  font-weight: 600;
  animation: ipPop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.bk-ok-titel { font-size: 30px; font-weight: 700; letter-spacing: -1.3px; line-height: 1.05; margin-bottom: var(--sp-3); }
.bk-ok-untertitel { margin: 0 0 var(--sp-6); font-size: 17px; line-height: 1.7; color: var(--ip-black); }
.bk-ok-raster { display: flex; flex-direction: column; gap: var(--sp-2); }
.bk-ok-block { background: var(--bk-flaeche); padding: var(--sp-5); }
.bk-ok-block--linie { background: var(--ip-white); border: 1px solid var(--bk-linie); }
.bk-teams { font-weight: 600; color: var(--ip-blue); text-decoration: underline; text-underline-offset: 3px; }

.bk-danach { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.bk-danach li { display: flex; gap: var(--sp-3); }
.bk-danach-nr {
  width: 24px;
  height: 24px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ip-blue-tint);
  color: var(--ip-blue);
  font-size: 13px;
  font-weight: 600;
}
.bk-danach-titel { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.bk-danach-text { display: block; margin-top: 3px; font-size: 14px; line-height: 1.6; color: var(--ip-black); }
.bk-ok-espresso {
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--bk-linie);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ip-black);
}

/* ============================================================
   AB 600 PIXEL: zwei Spalten fuer Karten und Kontaktfelder
   ============================================================ */
@media (min-width: 600px) {
  .bk-wrap { padding: var(--sp-6) var(--sp-6) 0; }
  .bk-titel { font-size: 30px; }
  .bk-schritt-kopf h2 { font-size: 26px; }
  /* Ohne align-items bleibt der Standard stretch, damit sind 2 Kacheln
     nebeneinander gleich hoch, auch wenn ein Titel umbricht. */
  .bk-themen { grid-template-columns: 1fr 1fr; }
  .bk-thema:has(.bk-rueckfrage:not([hidden])) { grid-column: 1 / -1; }
  .bk-kontakt { grid-template-columns: 1fr 1fr; }
  .bk-kontakt-breit { grid-column: 1 / -1; }
  .bk-knopf { flex: none; }
  .bk-ok-titel { font-size: 40px; }
}

/* ============================================================
   AB 1024 PIXEL: Seitenspalte links, zweite Woche sichtbar,
   Navigation klebt nicht mehr
   ============================================================ */
@media (min-width: 1024px) {
  /* Die Seite reicht mindestens bis zum unteren Bildrand, und die Funnel-Spalte
     zieht mit. Damit steht die Aktionsleiste (sie hat margin-top: auto) immer
     unten am Schirm, auch wenn wenig Inhalt da ist. Ohne das wanderte der
     Weiter-Knopf auf grossen Schirmen 355 Pixel nach unten, sobald eine
     Rueckfrage aufging: dort passt die ganze Seite ins Bild, es gibt also
     nichts zu scrollen, und sticky allein greift nur bei scrollender Seite
     (Fabiano am Widescreen, 2026-08-15). Bewusst ohne gesetzte Kopfhoehe:
     Titel, Schrittmarken und Balken behalten ihre natuerliche Hoehe, gestreckt
     wird nur der Rest. */
  .bk-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .bk-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--sp-10);
    align-items: start;
    flex: 1;
  }
  .bk-funnel { grid-column: 2; grid-row: 1; align-self: stretch; }
  .bk-seite { grid-column: 1; grid-row: 1; }

  .bk-woche--zwei {
    display: block;
    padding-left: var(--sp-4);
    border-left: 1px solid var(--bk-linie);
  }

  /* Die Leiste klebt auch am grossen Schirm unten, nicht nur am Handy.
     Vorher schaltete dieser Block das Kleben ab (position: static). Damit
     rutschte der Weiter-Knopf jedes Mal mit, wenn eine Rueckfrage aufging:
     gemessen 355 px, danach lag er bei 1280 mal 800 um 103 px unter dem
     Bildrand, man musste also scrollen, um weiterzukommen (Fabiano,
     2026-08-15). Am Handy trat das nie auf, weil dort die Basis-Regel gilt.
     Sticky statt fixed: am Seitenende steht die Leiste wieder in der Reihe,
     darum verdeckt sie nie den letzten Inhalt. */
  .bk-nav {
    padding: var(--sp-5) 0;
  }
  .bk-rest { display: inline; }

  .bk-ok-raster { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
}