/* vorOrt dabei – app v31 (29.10.2026): Behebungen aus TEST-BERICHT.md (M29, M21) */

/* M29 – Variante A (Entscheidung Janus 29.10.): Titelbild auf Handys niedriger, damit Termine auf dem ersten Bildschirm stehen.
   Die Reihenfolge (Termine vor „Nicht verpassen“) steht in js/views.js. Ab 640 px bleibt das große Titelbild. */
@media (max-width: 639px) {
  .route-entdecken .vhero { min-height: 150px; padding: 12px 14px; }
  .route-entdecken .vhero-t { font-size: 1.625rem; }
}

/* M21 – große Schrift / lange Wörter: nichts darf breiter als der Bildschirm werden */
/* Grundregel: lange Wörter („Kürbisschnitzen“, Ortsnamen) umbrechen statt überstehen; Titel zusätzlich mit Silbentrennung (lang="de") */
#view, #sheet { overflow-wrap: break-word; }
.d-title, .hero-t, .scard-t, .row-title-t, .ocard-t, .vhero-t, .vrow-t, .row-title, .sec-head .h2 { overflow-wrap: anywhere; hyphens: auto; }
.more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mcard, .mcard * { min-width: 0; overflow-wrap: anywhere; }
.d-btns { flex-wrap: wrap; }
.d-btns > * { flex: 1 1 8rem; }
/* Ausstattung der Strandseiten: 4 Spalten passen ab 320 px nur mit minmax(0,…) und umbrechenden Wörtern; bei großer Schrift 2 Spalten */
.sinfo-g { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sinfo-g li, .sinfo-g .sinfo-t { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 22rem) { .sinfo-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Abschnittsköpfe („Das läuft heute“ + „Alle 9 ›“), Fußzeile, Vorteile-Erklärung und Knopfleiste der Termin-/Ortsseite bei großer Schrift */
.sec-head { flex-wrap: wrap; row-gap: 2px; }
.sec-head > * { min-width: 0; overflow-wrap: anywhere; }
.foot-g { flex-wrap: wrap; white-space: normal; max-width: 100%; }
.howto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.howto > * { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.route-termin .d-actions, .route-ort .d-actions { box-sizing: border-box; max-width: min(480px, 100vw); }
.d-actions > * { min-width: 0; }
.near-hd { flex-wrap: wrap; row-gap: 2px; }
.near-hd > * { min-width: 0; overflow-wrap: anywhere; }
.d-actions-r { flex-shrink: 0; }
/* Tableiste: bei sehr großer Schrift auf schmalen Handys nicht breiter als der Bildschirm (Beschriftung notfalls mit „…“) */
.tabbar { box-sizing: border-box; max-width: min(480px, 100vw); }
.tab { flex: 1 1 0; min-width: 0; max-width: 96px; }
.tab > span:not(.tab-ico) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Regionsvorschlag (erster Besuch): lange Regionsnamen umbrechen statt die Seite zu verbreitern */
.rv-reg { white-space: normal; height: auto; min-height: 38px; max-width: 100%; text-align: left; overflow-wrap: anywhere; padding-top: 6px; padding-bottom: 6px; }
/* Sprunglink „Zum Inhalt springen“: versteckt per clip statt außerhalb des Bildschirms (ragte bei großer Schrift über den Zurück-Knopf) */
.skip:not(:focus) { top: 0; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* M40 – „+ N weitere Termine am Samstag“ unter jedem Wochenendtag: gut antippbar (44 px) */
.day-more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 0.9375rem; }