/* Layout des Online-Flows (Etappe B, TEC-205, 13.09.2026).

   app.css traegt weiterhin Farben, Schrift, Formularfelder, Kalender und Knoepfe — hier
   steht nur, was den Online-Flow vom Kiosk unterscheidet: Kopfzeile mit Betreiber und
   Schritten, Hauptspalte neben der Karte „Ihre Buchung", Leistungs-Chips, Kalender neben
   den Uhrzeiten.

   **Container-Queries statt Media-Queries.** Die Seite steckt bei Partnern in einem
   iframe; dort sagt die Fensterbreite nichts ueber den Platz, den sie hat. `#booking` ist
   der Container, an seiner Breite entscheiden sich die Spalten. Ein 600-px-iframe auf
   einem Laptop bekommt so das Handy-Layout, wie es soll. */

body.online .wrap { max-width: 1120px; padding-top: 1.5rem; }
#booking { container-type: inline-size; container-name: buchung; }

/* --- Kopfzeile: Betreiber links, Schritte rechts --- */
.online-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1.25rem;
  padding: 0 0 0.9rem;
  border-bottom: 1px solid var(--border);
}
.online-betreiber { font-weight: 600; color: var(--primary-dark); font-size: 1.05rem; }
.schritte {
  display: flex;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.schritte li { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.schritt-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  font-size: 0.8rem;
  font-weight: 600;
}
.schritte .is-active { color: var(--primary-dark); font-weight: 600; }
.schritte .is-active .schritt-nr { border-color: var(--primary-main); background: var(--primary-main); color: var(--primary-contrast); }
.schritte .is-done .schritt-nr { border-color: var(--primary-main); color: var(--primary-main); }
/* Auf schmalen Rahmen nur die Nummern, die Namen wuerden umbrechen. */
@container buchung (max-width: 479px) {
  .schritte .schritt-name { display: none; }
  .schritte { gap: 0.6rem; }
}

/* --- Hauptspalte und Karte --- */
.online-layout { display: grid; gap: 1.25rem; align-items: start; }
.online-haupt { min-width: 0; container-type: inline-size; container-name: haupt; }
.online-haupt .step h2 { margin-top: 0; }
.buchung-karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary-main);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.buchung-karte h3 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.buchung-karte dl { margin: 0; }
.buchung-zeile { margin: 0 0 0.6rem; }
.buchung-zeile dt { font-size: 0.8rem; color: var(--text-muted); }
.buchung-zeile dd { margin: 0.1rem 0 0; font-weight: 500; }
.buchung-zeile .aendern { margin-left: 0.5rem; font-size: 0.85rem; font-weight: 400; }
.buchung-zeitzone { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--text-muted); }
/* Schmal: Die Karte steht ueber dem Inhalt — in Schritt 1 gar nicht, dort sagen die
   Chips schon, was gewaehlt ist; ab Schritt 2 als kompakte Zeile. */
.online-seite { order: -1; }
.online-layout[data-schritt="1"] .online-seite { display: none; }
@container buchung (max-width: 719px) {
  .buchung-karte h3 { display: none; }
  .buchung-karte dl { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
  .buchung-zeile { margin: 0; }
  .buchung-zeitzone { display: none; }
}
@container buchung (min-width: 720px) {
  .online-layout { grid-template-columns: minmax(0, 1fr) 15.5rem; gap: 2rem; }
  .online-seite { order: 0; position: sticky; top: 1rem; }
  .online-layout[data-schritt="1"] .online-seite { display: block; }
}

/* --- Leistungs-Chips --- */
.feld-titel { margin: 1rem 0 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chip.is-active { background: var(--primary-main); border-color: var(--primary-main); color: var(--primary-contrast); }
.chip-badge { font-size: 0.78rem; font-weight: 400; opacity: 0.8; }
@media (hover: hover) { .chip:not(.is-active):hover { border-color: var(--primary-main); } }
.chip:focus-visible { outline: 3px solid rgba(0, 92, 97, 0.35); outline-offset: 2px; }

/* --- Terminwahl: Arztwahl oben ueber beide Spalten, Kalender links, Uhrzeiten rechts ---
   (Rueckmeldung 13.09.2026: Die Zeiten liefen in einer schmalen Spalte lang nach unten.)
   `display: contents` loest #online-slots und .doc-group auf, damit .doc-wahl und
   .doc-times als Grid-Bereiche liegen koennen. Die Radios der Arztwahl bleiben DOM-
   Geschwister, die Geschwister-Selektoren in app.css greifen weiter. */
.online-kalender { display: grid; gap: 0.75rem 3.5rem; } /* mehr Luft zwischen Kalender und Uhrzeiten (Rueckmeldung 13.09.2026) */
.kal-spalte, .zeiten-spalte { min-width: 0; }
/* Umriss statt Vollfarbe, aber ueber die volle Breite der Hauptspalte (Rueckmeldungen
   13.09.2026): eine Abkuerzung neben dem Kalender, nicht die Hauptaktion — kleiner oder
   schmaler wirkte er verloren. */
.online-termin .next-slot-btn {
  margin: 0.5rem 0 0.25rem; width: 100%; display: block;
  padding: 0 1.2rem; min-height: 48px; font-size: 1rem; font-weight: 600;
  background: var(--surface); color: var(--primary-main); border: 1.5px solid var(--primary-main);
}
.online-termin .next-slot-btn:hover, .online-termin .next-slot-btn:active { background: var(--primary-main); color: var(--primary-contrast); }
.online-kalender .slot-grid, .online-kalender .slot-grid-named {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.45rem;
}
.online-kalender .slot-btn { min-height: 46px; padding: 0.35rem 0.3rem; font-size: 1rem; }
.online-kalender .slot-who { font-size: 0.7rem; }
.online-kalender .doc-picker { margin-top: 0.35rem; }
.online-kalender .doc-chip { padding: 0.35rem 0.85rem; } /* 44 px Hoehe bleibt: der Walk-in tippt am Tablet */
.online-kalender .slots-label { margin: 0.6rem 0 0.2rem; }
@container haupt (min-width: 620px) {
  .online-kalender {
    /* Kalender etwas breiter als die Zeiten: Die Tagesfelder skalieren mit der Spalte
       (aspect-ratio 1:1). Rechts steht eine Liste, eine Uhrzeit je Zeile, so hoch wie der
       Kalender und darin gescrollt (Rueckmeldung 16.09.2026; vorher drei je Reihe, und die
       Spalte lief bei vollen Tagen weit unter den Kalender). Der Hinweis „Ein Anbieter
       antwortet nicht" bekommt seine Zeile unter beiden Spalten: Stuende er unter den
       Zeiten, muesste der Kalender zwei Zeilen ueberspannen, und die Zeitenzeile haette
       keine eigene Hoehe mehr, an der die Liste sich ausrichten kann. */
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "arzt arzt" "kal zeiten" "hinweis hinweis";
  }
  .online-kalender .slot-grid, .online-kalender .slot-grid-named {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0; min-height: 0; flex: 1 1 auto;
    overflow-y: auto;
    /* Die Knoepfe enden buendig mit „Naechstmoeglichen Termin buchen" darueber; der Balken
       haengt rechts daneben in der Luecke zur Seitenspalte statt die Knoepfe zu verkuerzen
       (Rueckmeldung 16.09.2026). Breite des Balkens siehe ::-webkit-scrollbar unten. */
    padding-right: 0.35rem; margin-right: calc(-10px - 0.35rem);
    /* `scrollbar-gutter: stable`: Der Platz fuer den Balken bleibt auch reserviert, wenn
       nichts zu scrollen ist — sonst ragten die Knoepfe an kurzen Tagen um genau diese
       Breite ueber die Kante hinaus (PR-Review #68). */
    scrollbar-gutter: stable;
  }
  /* Firefox kennt ::-webkit-scrollbar nicht und zeigt seinen eigenen Balken (auf macOS als
     Overlay ohne Platzbedarf). Dort keine Kompensation: Die Knoepfe enden an der Kante, der
     Balken liegt innen darueber bzw. nimmt unter Windows seine schmale Breite davon. */
  @supports (-moz-appearance: none) {
    .online-kalender .slot-grid, .online-kalender .slot-grid-named {
      margin-right: 0; padding-right: 0; scrollbar-width: thin;
    }
  }
  /* Flach, aber gut lesbar: Die Zeile traegt nur Uhrzeit und Name, die Hoehe kommt aus der
     Schrift, nicht aus Luft (Rueckmeldung 16.09.2026: „Buttons duenner, Uhrzeit und Arztname
     groesser"). Drei Klassen tief, damit die Laptop-Regeln weiter unten (min-height 54px fuer
     das schmale Raster) hier nicht greifen. */
  /* `align-content: start`: Die Liste ist so hoch wie der Kalender, und bei wenigen Terminen
     streckte das Grid sonst jede Zeile auf ein Fuenftel davon — drei Knoepfe von je 95 px. */
  .online-kalender .doc-times .slot-grid { gap: 0.4rem; align-content: start; }
  /* `min-height: auto`, nicht 0: Mit 0 fielen die Grid-Zeilen in Chrome auf Rand plus Rahmen
     zusammen (5.8 px), und die Schrift stand ueber den Knopf hinaus. */
  .online-kalender .doc-times .slot-btn { min-height: auto; padding: 0.5rem 0.9rem; font-size: 1.2rem; }
  .online-kalender .doc-times .slot-who { font-size: 1rem; }
  /* Der Balken soll zu sehen sein, nicht erst beim Wischen erscheinen (macOS/iPadOS blenden
     ihn sonst aus, und man haelt die Liste fuer vollstaendig). Bewusst nur die WebKit-Regeln
     und nicht `scrollbar-width`/`scrollbar-color`: Sobald die stehen, ignoriert Chrome die
     WebKit-Regeln, und der Balken waere wieder ein Overlay. Firefox bleibt beim Standard. */
  .online-kalender .slot-grid::-webkit-scrollbar { width: 10px; }
  .online-kalender .slot-grid::-webkit-scrollbar-track { background: #eef2f2; border-radius: 5px; }
  .online-kalender .slot-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; border: 2px solid #eef2f2; }
  .online-kalender .slot-grid::-webkit-scrollbar-thumb:hover { background: var(--primary-main); }
  /* In der Liste passt der Name neben die Uhrzeit — uebereinander machte jede Zeile hoch.
     Beide linksbuendig, die Uhrzeit mit fester Breite, damit die Namen untereinander in
     einer Spalte stehen (Rueckmeldung 16.09.2026). */
  .online-kalender .slot-grid-named .slot-btn { flex-direction: row; justify-content: flex-start; gap: 1rem; }
  .online-kalender .slot-grid-named .slot-time { flex: none; min-width: 3.2em; text-align: left; }
  .online-kalender .slot-grid-named .slot-who { text-align: left; }
  .online-kalender .calendar { gap: 8px; }
  .online-kalender .cal-day { font-size: 1.3rem; }
  .kal-spalte { grid-area: kal; }
  .zeiten-spalte, .zeiten-spalte > .doc-group { display: contents; }
  .zeiten-spalte .doc-wahl { grid-area: arzt; }
  /* `contain: size`: Der Block traegt nichts zur Zeilenhoehe bei, die Zeile ist so hoch wie
     der Kalender, und der Block wird darauf gestreckt. Innen Beschriftung oben, darunter die
     Liste mit dem Rest der Hoehe. `display` kommt ueber die Variable, weil app.css die
     sichtbare Gruppe per Radio-Geschwister-Selektor auf `display` schaltet — der gewinnt
     jede Spezifitaet, die Variable nicht. */
  .zeiten-spalte .doc-times {
    grid-area: zeiten; contain: size;
    --doc-times-display: flex; flex-direction: column;
  }
  .zeiten-spalte .doc-times .slots-label { margin-top: 0; flex: none; }
  /* „Keine freien Termine" steht anstelle der Zeiten. */
  .zeiten-spalte > p:first-child { grid-area: zeiten; align-self: start; padding-top: 2.4rem; }
  .zeiten-spalte > .doc-group ~ p { grid-area: hinweis; align-self: start; }
}

/* Der Block „Gewählter Termin" im Formular ist im Online-Flow doppelt zur Karte; er bleibt
   im Dokument (er traegt die versteckten Felder, den Slot-Fehler und die Nachwahl), nur die
   Zusammenfassungszeile darin ist ausgeblendet. */
body.online #slotwahl .summary { display: none; }

/* --- Einbettung (?embed=1): der Partner hat seinen eigenen Rahmen und Kopf --- */
body.embedded .wrap { padding: 0.5rem 1rem 1.25rem; max-width: none; }
body.embedded .online-betreiber { display: none; }
body.embedded .online-kopf { justify-content: flex-end; }

/* Honigtopf: aus dem Sichtfeld, nicht `display:none` — manche Bots ueberspringen, was
   `display:none` traegt, und fuellen, was nur verschoben ist. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Formular kompakter (Rueckmeldung 13.09.2026) --- */
body.online .field { margin: 0.8rem 0; }
body.online .row.two .field { margin: 0.5rem 0; }
body.online fieldset.gruppe { margin-top: 1.1rem; }
body.online .datum-teile { grid-template-columns: 4rem 4rem 5.5rem; gap: 0.5rem; }

/* --- Ab Laptop-Breite mehr Luft in der Terminwahl (Rueckmeldung 13.09.2026: „gequetscht") ---
   Schmal bleibt es dicht; hier zaehlt der Container, nicht das Fenster. */
@container buchung (min-width: 720px) {
  .online-layout { gap: 2.75rem; }
  .online-termin h2 { margin-bottom: 1.25rem; }
  .online-termin .feld-titel { margin-top: 1.75rem; margin-bottom: 0.6rem; }
  .online-termin .chips { gap: 0.7rem; }
  .online-termin .next-slot-btn { margin: 1.1rem 0 0.9rem; }
  .online-kalender { row-gap: 1.5rem; column-gap: 2.5rem; }
  .online-kalender .doc-wahl { margin-bottom: 0.75rem; }
  .online-kalender .doc-picker { gap: 0.6rem; }
  .online-kalender .slots-label { margin-bottom: 0.6rem; }
  .online-kalender .slot-grid, .online-kalender .slot-grid-named { gap: 0.6rem; }
  .online-kalender .slot-btn { min-height: 54px; }
  .online-kalender .slot-who { font-size: 0.74rem; }
  .online-kalender .calendar { gap: 0.4rem; }
}

/* Bestaetigung: „Abschliessen" und der Hinweis auf den Ruecksprung */
.online .confirmation .finish-btn { margin-top: 1.25rem; }
.online .abschluss-hinweis { margin: 0.6rem 0 0; font-size: 0.85rem; }