/* ===================================================================
   inline-04-schluss.css
   Etappe 2 · aus index.html ausgelagert, Inhalt unverändert.
   Späte Korrekturen · nach hausstil.css, gewinnt wie bisher zuletzt
   2 Blocke, Quellreihenfolge erhalten.
   Rückweg: Tag vor-redesign-20260905, Commit c04ab0a.
   Kein Wert geändert, keine Regel zusammengefasst, keine Dublette
   entfernt, keine Reihenfolge geändert.
   =================================================================== */

/* Block 24 · index.html Zeile 12081–12136 · <style> */
/* ============================================================================
   10.08.2026 (Dirk): Bestaetigungsfenster fuer aeltere Augen.
   Die Zusagetexte und vor allem die Eingangsnummer waren mit 13 bis 15 Pixeln
   zu klein; genau diese Nummer muss man sich notieren koennen. Nur Schriftgroesse,
   Zeilenabstand und Kontrast wachsen, kein Layout aendert sich. Vorsatz html body
   erhoeht nur die Spezifitaet gegen die Regeln im Seitenkopf.
   ============================================================================ */
html body .termin-success > p,
html body .wizard-success p { font-size: 17.5px; line-height: 1.65; color: #3B443E; }
html body .termin-success-hint strong { font-size: 16px; }
html body .termin-success-hint span { font-size: 15px; line-height: 1.6; }
html body .wizard-success h3 { font-size: 28px; }
/* Die Eingangsnummer ist die eine Angabe, die abgeschrieben wird. */
html body .wizard-success-eingang,
html body #termin-success-detail { font-size: 17.5px; line-height: 1.6; color: #2A4A38; }
html body .wizard-success-eingang { margin-top: 14px; }
html body .wizard-success-eingang strong {
  display: inline-block; margin-left: 4px;
  font-size: 23px; letter-spacing: 0.06em; color: #1C2A22;
  padding: 2px 10px; border-radius: 8px; background: rgba(42, 74, 56, 0.08);
}
@media (max-width: 560px) {
  html body .wizard-success-eingang strong { font-size: 21px; }
}

/* ===== Hinweis vor dem Sprung in die Datenschutzerklaerung ===================
   10.08.2026 (Dirk): Die Links neben den Einwilligungshaekchen oeffnen einen
   neuen Tab, damit ein halb ausgefuelltes Formular nicht verloren geht. Ein
   Tab, der sich unangekuendigt oeffnet, ist fuer viele aber eine Ueberraschung
   und laut WCAG 3.2.5 auch ein Aenderungshinweis wert. Deshalb sagt ein kurzes
   Fenster vorher, was passiert - und beruhigt gleich, dass die Eingaben
   stehen bleiben. */
.ds-ovl {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(16, 22, 18, 0.55);
}
.ds-ovl[hidden] { display: none; }
.ds-ovl-box {
  max-width: 460px; width: 100%; padding: 28px 26px 22px;
  background: #fff; border-radius: 18px;
  box-shadow: 0 26px 60px -20px rgba(16, 22, 18, 0.5);
}
.ds-ovl-tit { margin: 0 0 10px; font-size: 20px; line-height: 1.3; color: var(--forest, #2A4A38); font-weight: 600; }
.ds-ovl-tx  { margin: 0 0 20px; font-size: 15.5px; line-height: 1.6; color: var(--ink, #1A1F1B); }
.ds-ovl-akt { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.ds-ovl-btn {
  min-height: 44px; padding: 11px 20px; border-radius: 999px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--forest, #2A4A38); background: #fff; color: var(--forest, #2A4A38);
}
.ds-ovl-btn--ja { background: var(--forest, #2A4A38); color: #fff; }
.ds-ovl-btn:focus-visible { outline: 3px solid var(--gold, #A88948); outline-offset: 2px; }
@media (max-width: 460px) { .ds-ovl-akt { flex-direction: column-reverse; } .ds-ovl-btn { width: 100%; } }

/* Block 25 · index.html Zeile 12233–12316 · <style> */
/* ==========================================================================
   Lesbarkeit des Sprechzeiten-Widgets, Stand 13.08.2026

   Alle Zahlen sind im Browser gemessen, der Rechenweg steht in
   docs/SPRECHZEITEN.md.
   ========================================================================== */

/* 1 Der Hinweis steht unter der Karte, ueber die volle Breite.
      Die Hoechstbreite von 512 Pixeln stammte aus einer allgemeinen
      Absatzregel und liess ihn bei 1920 Pixeln 165 Pixel zu schmal wirken. */
html body .live-widget .zeiten-hinweis-widget {
  position: relative;
  z-index: 4;
  margin: 16px 0 0;
  padding: 12px 14px;
  max-width: none;
  width: auto;
  background: var(--sage-mist);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #2C332E;
}
html body .live-widget .zeiten-hinweis-widget strong { color: #14241B; font-weight: 600; }

/* 2 Kein Schleier mehr ueber dem ganzen Foto. Er sass auch dort, wo gar kein
      Text steht, und deckte das Bild unnoetig zu. */
html body .live-widget .sched-foto::after { background: none; }

/* 3 BAENDER-ENTFERNT-20260908 (Dirk, 08.09.2026, 20:27)

      Hier trug bis heute JEDE Zeile ein eigenes weisses Verlaufsband,
      27 bis 31 Prozent auf, 86 bis 91 Prozent ab, plus eine kuerzere
      Fassung fuer Zeilen ohne Nachmittag und eine gruene fuer heute.

      Das war noetig, solange das Foto als Hintergrundebene UNTER der
      Schrift lag. Genau diese Baender hat Dirk auf dem Bildschirmabzug
      als die haesslichen durchscheinenden Streifen markiert.

      Seit inline-03-rumpf.css FOTO-NEBEN-ZEITEN-20260908 steht das Foto
      neben den Zeiten. Unter der Schrift liegt kein Bild mehr. Die
      Baender sind damit ersatzlos entfallen, sie werden nicht durch
      etwas anderes ersetzt. */
html body .live-widget #scheduleList .schedule-day {
  background-color: transparent;
  background-image: none;
  border-radius: 8px;
}

/* 5 Der heutige Tag steht auf einer ruhigen, durchgehenden Flaeche statt
      auf einem Verlauf. Derselbe Ton wie bisher, nur ohne Auslauf. */
html body .live-widget #scheduleList .schedule-day.today {
  background-image: none;
  background-color: rgb(220,229,220);
}

/* Der Platzhalter traegt die Farbe der Zeiten, das alte Grau erreichte
   selbst auf Weiss nur 3.9 zu 1. */
html body .live-widget .schedule-body > .schedule-list .slot-empty,
html body .live-widget .schedule-body .slot-nachmittag.slot-empty {
  color: #2C332E;
  font-weight: 500;
}

/* 6 Auf schmalen Geraeten kein Foto, dort war der Text darueber ohnehin
      nicht zu lesen. Ohne Foto braucht es auch kein Band. */
@media (max-width: 900px) {
  html body .live-widget .sched-foto { display: none !important; }
  html body .live-widget #scheduleList .schedule-day { background-image: none; }
  /* Auch hier kein Verlauf mehr, gleiche Flaeche wie auf dem grossen Schirm. */
  html body .live-widget #scheduleList .schedule-day.today {
    background-image: none;
    background-color: rgb(220,229,220);
  }
}


/* ===================================================================
   FOTO-MINDESTBREITE-UND-ANKERABSTAND-20260908  (Dirk, 08.09.2026)

   1 Das Standortfoto in der Oeffnungszeiten-Karte bekommt eine feste
     Mindestbreite. Die Zeitenspalten sind fest (115 px Wochentag,
     288 px Raster), das Foto nimmt den Rest. Auf einem schmalen
     Schreibtischschirm blieb davon ein Streifen von 139 px uebrig.
     Gemessen: 1440 px Fenster -> Foto 139, 2044 px -> Foto 268.
     Mit 190 px Mindestbreite bleibt es ein Bild und wird kein Streifen.
     Unter 900 px ist es ohnehin ausgeblendet, dort greift nichts davon.

   2 Der Ankerabstand war kleiner als die feste Kopfleiste, dadurch
     rutschte jedes Sprungziel der Seite unter die Leiste. Gemessen:
       375 px   scroll-padding 64, Leiste 74   ->  10 px verdeckt
       768 px   scroll-padding 78, Leiste 193  -> 115 px verdeckt
     Verdeckt wurde nur der obere Innenabstand, kein Text. Trotzdem
     falsch. Die Werte richten sich jetzt nach der gemessenen
     Leistenhoehe, mit etwas Luft darueber.
     Steht hier und nicht in inline-01-basis.css oder mobile-final.css,
     weil diese Datei spaeter laedt und beide ueberschreibt, ohne dass
     eine fremde Sperre beruehrt wird.
   =================================================================== */

html body .live-widget .sched-foto { min-width: 190px; }

/* Die Werte kommen aus der GEMESSENEN Leistenhoehe, nicht aus einer
   Schaetzung. Sie ist je Breite verschieden, weil die Navigation auf
   mittleren Schirmen umbricht:
       375 px   Leiste  74 px   ->  88 px
       768 px   Leiste 216 px   -> 230 px   (Navigation dreizeilig)
      1280 px   Leiste 128 px   -> 150 px
      1920 px   Leiste 105 px   -> 150 px
   Ein zu grosser Wert schadet nicht, er schiebt das Ziel nur weiter nach
   unten. Ein zu kleiner versteckt es hinter der Leiste. */
html { scroll-padding-top: 150px; }
@media (max-width: 900px) { html { scroll-padding-top: 230px; } }
@media (max-width: 640px) { html { scroll-padding-top: 88px; } }