/*
 * Globaler Responsive-Schutz fuer alle Seiten des frontend.
 *
 * Wird in jedem Template als LETZTES Stylesheet eingebunden. Ziel: auf keinem
 * Geraet darf die Seite seitlich (links/rechts) scrollen.
 *
 * Gemessen 2026-11-01 bei 320/360/390px: die Ueberlaeufe kamen fast alle von
 * langen deutschen Komposita und URLs, die nicht umbrechen
 * ("Standplatzverwaltung", "Allgemeine Geschaeftsbedingungen", Festivalnamen,
 * Website-Links in Beschreibungen), dazu von festen Breiten (Store-Badges
 * 300px, Grid-Spalten 310px, dekorative 600px-Kreise auf den Login-Seiten).
 * Die konkreten Ursachen sind an ihrer Stelle behoben; diese Datei faengt
 * den Rest ab, damit neue Inhalte nicht wieder seitliches Scrollen ausloesen.
 */

/* Letzte Verteidigungslinie. html: wirkt auf den Viewport, ohne html selbst
   zum Scroll-Container zu machen. body: "clip" statt "hidden", damit
   position: sticky (Navbar) weiter funktioniert. */
html {
    overflow-x: hidden;
}

body {
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    body {
        overflow-x: hidden;
    }
}

/* Lange Woerter und URLs umbrechen statt ueberstehen. Alle Seiten tragen
   lang="de", damit trennt hyphens: auto deutsche Komposita sauber. */
:where(h1, h2, h3, h4, h5, h6,
       .h1, .h2, .h3, .h4, .h5, .h6,
       .display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
       .lead) {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

:where(p, li, dd, dt, td, th, blockquote, label, figcaption, address, small, a) {
    overflow-wrap: break-word;
}

/* Medien nie breiter als ihr Container. width/height-Attribute bleiben fuer
   das Seitenverhaeltnis erhalten. :where() haelt die Spezifitaet bei 0,
   damit jede seitenspezifische Regel (z. B. feste Logo-Hoehe) gewinnt. */
:where(img, video, iframe) {
    max-width: 100%;
}

:where(img[width][height], video[width][height]) {
    height: auto;
}

:where(pre) {
    max-width: 100%;
    overflow-x: auto;
}