/* ==========================================================================
   ft-pwa.css — installierte Web-App (PWA, eigenes Fenster) auf ALLEN Seiten (Betreiber 30.10.2026:
   „CSS mehr in die PWA auf allen Seiten von A bis Z“). Nur additive Regeln, keine Texte, keine Logik.
   Wirkt NUR in der installierten App:
     Block A  @media (display-mode: standalone), (display-mode: window-controls-overlay)
     Block B  html.ft-standalone  (Klasse setzt ft_pwa_css_tags() in includes/meta_head.php per matchMedia /
              navigator.standalone = iOS; zum Testen im Browser: document.documentElement.classList.add('ft-standalone'))
   Block A und Block B sind INHALTSGLEICH (nur das Präfix :root bzw. html.ft-standalone unterscheidet sich) —
   Änderungen immer in beiden Blöcken.
   Laden: in allen Köpfen direkt NACH assets/css/ft-responsive.css (über ft_pwa_css_tags(); Seiten mit eigenem Kopf
   bekommen es über ft_meta_head()). Hell + dunkel: farbneutral bis auf den Statusleisten-Streifen (#181a1b wie ft-ios-fix.css).
   Window-Controls-Overlay ist im Manifest NICHT eingeschaltet (bräuchte erst eine Titelleisten-Aufteilung).
   ========================================================================== */
/* ---------- Block A: Anzeige-Modus der installierten App ---------- */
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
  /* 0. Grundwerte. Sichere Ränder als Variablen (zum Testen überschreibbar: html.style.setProperty('--ft-pwa-st','47px')).
        Kein Gummiband/Ziehen-zum-Neuladen an der Seite selbst; Leisten bekommen keins (sie rollen nicht).
        Antipp-Markierung: dezenter Markenton statt blauem Kasten (hell + dunkel lesbar). */
  :root {
    --ft-pwa-st: env(safe-area-inset-top, 0px);
    --ft-pwa-sr: env(safe-area-inset-right, 0px);
    --ft-pwa-sb: env(safe-area-inset-bottom, 0px);
    --ft-pwa-sl: env(safe-area-inset-left, 0px);
    overscroll-behavior-y: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 130, 163, .14);
  }
  :root body { overscroll-behavior-y: none; }

  /* 1. Innere Rollbereiche (Menüs, Dialoge, Seitenleisten, Tabellen): am Ende nicht die Seite mitziehen */
  :root :where(.dropdown-menu, .modal, .offcanvas, .offcanvas-body, .table-responsive, .ft-resp-scroll,
           [role="dialog"], [role="listbox"], [role="menu"], #sidebarMenu) { overscroll-behavior: contain; }

  /* 2. Leisten (Kopfleiste, untere Navigation, Zurück-Knopf): keine Markierung, kein Lang-Druck-Menü,
        kein Doppeltipp-Zoom; Rückmeldung beim Antippen über die Deckkraft. Menü-INHALTE bleiben markierbar. */
  :root :where(.navbar-custom, .ft-bottom-nav, #ftPwaBack) { -webkit-tap-highlight-color: transparent; }
  :root :where(.navbar-custom .navbar-brand, .navbar-custom .nav-link, .navbar-custom .navbar-toggler, .navbar-custom .btn,
           .ft-bottom-nav a, .ft-bottom-nav button, #ftPwaBack) {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
  }
  :root :where(.navbar-custom, .ft-bottom-nav) img { -webkit-user-drag: none; -webkit-touch-callout: none; }
  :root :where(.navbar-custom .navbar-brand, .navbar-custom .nav-link, .navbar-custom .navbar-toggler, .ft-bottom-item):active { opacity: .72; }

  /* 3. Knöpfe im Inhalt: Beschriftung nicht versehentlich markieren, kein Doppeltipp-Zoom.
        Texte, Beiträge, Menü-Einträge und Eingabefelder bleiben markierbar. */
  :root :where(.btn, button, input[type="button"], input[type="submit"], input[type="reset"], .btn-close, .page-link,
           .nav-tabs .nav-link, .nav-pills .nav-link, [role="tab"]) {
    -webkit-user-select: none; user-select: none; touch-action: manipulation;
  }
  :root :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
           textarea, [contenteditable="true"], [contenteditable=""]) {
    -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
  }

  /* 4. Scrollen: weich nur ohne „Bewegung reduzieren“ (ft-a11y.css setzt dann auto !important).
        Sprungziele und Tastatur-Fokus (auch bei offener Bildschirmtastatur) halten Abstand zu festen Leisten
        inkl. Statusleiste/Home-Leiste. css/ft-mobile-pro.css (!important, < 992 px) bleibt vorrangig. */
  @media (prefers-reduced-motion: no-preference) {
    :root { scroll-behavior: smooth; }
  }
  :root:has(.navbar-custom.fixed-top) { scroll-padding-top: calc(76px + var(--ft-pwa-st)); }
  @media (max-width: 991.98px) {
    :root:has(.mobile-sub-nav) { scroll-padding-top: calc(132px + var(--ft-pwa-st)); }
    :root:has(#ftBottomNav) { scroll-padding-bottom: calc(84px + var(--ft-pwa-sb)); }
  }

  /* 5. Sichere Ränder (Kamera-Aussparung, Statusleiste, Home-Leiste). Nur feste Bauteile, die es noch nicht selbst tun.
        Durchsichtiger RAND statt Innenabstand: vorhandene Abstände der Seite bleiben unverändert, der Hintergrund läuft durch.
        Ohne Aussparung ist env(...) = 0 -> keine Wirkung. Untere Navigation, Zurück-Knopf, iOS-Kopfleiste der Standard-Seiten:
        schon in includes/ft_bottom_nav.php, includes/pwa_shell.php, assets/css/ft-ios-fix.css. */
  /* 5a. Kopfleiste im Querformat: Logo/Symbole nicht unter der Aussparung */
  :root .navbar-custom { border-left: var(--ft-pwa-sl) solid transparent; border-right: var(--ft-pwa-sr) solid transparent; }
  /* 5b. Seiteninhalt im Querformat (Seiten mit Kopfleiste; Live/Nachrichten haben eine eigene Vollbild-Aufteilung) */
  :root body:has(.navbar-custom):not(.ft-page-live):not(.ft-page-messages) {
    border-left: var(--ft-pwa-sl) solid transparent; border-right: var(--ft-pwa-sr) solid transparent;
  }
  /* 5c. Saison-Köpfe (Saison-Header-Dateien in includes/, Body ohne ft-page-Klasse, ohne ft-ios-fix.css): Auf der Startseite
         steht die Kopfleiste ganz oben -> Bedienelemente unter der Statusleiste beginnen lassen (dunkler Streifen wie
         ft-ios-fix.css A -> weiße Uhr lesbar). Auf den übrigen Saison-Seiten ist die Leiste per Inline-Stil position:relative
         (trotz .fixed-top) und steht unter dem Seitenabstand -> dort liegt die Statusleiste über Leerraum, nichts zu tun. */
  :root body.page-landing-non-fixed-navbar:not([class*="ft-page-"]) nav.navbar-custom { border-top: var(--ft-pwa-st) solid #181a1b; }
  /* 5d. Tablet quer (>= 992 px) auf iOS: ft-ios-fix.css B macht die Kopfleiste um die Statusleiste höher, der Seitenabstand
         wächst dort aber nur < 992 px mit -> Inhalt rutschte unter die Leiste */
  @media (min-width: 992px) {
    @supports (-webkit-touch-callout: none) {
      :root body[class*="ft-page-"]:not(.page-landing-non-fixed-navbar):not(.ft-page-live):not(.ft-page-messages):has(nav.navbar-custom.fixed-top) {
        border-top: var(--ft-pwa-st) solid transparent;
      }
    }
  }
  /* 5e. Cookie-Hinweis (includes/footer.php, unten fest): Knöpfe über der Home-Leiste, Text quer neben der Aussparung;
         Verlauf läuft bis zum Rand */
  :root #cookieConsentBanner {
    border-bottom: var(--ft-pwa-sb) solid transparent; border-left: var(--ft-pwa-sl) solid transparent;
    border-right: var(--ft-pwa-sr) solid transparent; background-origin: border-box;
  }
  /* 5f. Seitenmenüs (offcanvas) über die volle Höhe */
  :root .offcanvas.offcanvas-start, :root .offcanvas.offcanvas-end { padding-top: var(--ft-pwa-st); padding-bottom: var(--ft-pwa-sb); }
  :root .offcanvas.offcanvas-start { padding-left: var(--ft-pwa-sl); }
  :root .offcanvas.offcanvas-end { padding-right: var(--ft-pwa-sr); }
  :root .offcanvas.offcanvas-bottom { padding-bottom: var(--ft-pwa-sb); }
  :root .offcanvas.offcanvas-top { padding-top: var(--ft-pwa-st); }

  /* 6. Volle Höhe: 100dvh statt 100vh (auch auf Seiten ohne ft-responsive.css) */
  @supports (height: 100dvh) {
    :root .vh-100 { height: 100dvh !important; }
    :root .min-vh-100 { min-height: 100dvh !important; }
  }

  /* 7. Zielgrößen >= 44 px auf Touch (wie ft-responsive.css 5, für Köpfe ohne diese Datei; Spezifität > ft-a11y.css 5) */
  @media (pointer: coarse) {
    :root .btn, :root .btn-close, :root .page-link, :root .form-control, :root .form-select { min-height: 44px; }
    :root .btn-close, :root .page-link { min-width: 44px; }
  }

  /* 8. Fokus bleibt sichtbar: diese Datei setzt nirgends outline/box-shadow; :focus-visible aus ft-a11y.css gilt unverändert. */
}

/* ---------- Block B: gleiche Regeln über die Klasse html.ft-standalone ---------- */
/* 0. Grundwerte. Sichere Ränder als Variablen (zum Testen überschreibbar: html.style.setProperty('--ft-pwa-st','47px')).
      Kein Gummiband/Ziehen-zum-Neuladen an der Seite selbst; Leisten bekommen keins (sie rollen nicht).
      Antipp-Markierung: dezenter Markenton statt blauem Kasten (hell + dunkel lesbar). */
html.ft-standalone {
  --ft-pwa-st: env(safe-area-inset-top, 0px);
  --ft-pwa-sr: env(safe-area-inset-right, 0px);
  --ft-pwa-sb: env(safe-area-inset-bottom, 0px);
  --ft-pwa-sl: env(safe-area-inset-left, 0px);
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 130, 163, .14);
}
html.ft-standalone body { overscroll-behavior-y: none; }

/* 1. Innere Rollbereiche (Menüs, Dialoge, Seitenleisten, Tabellen): am Ende nicht die Seite mitziehen */
html.ft-standalone :where(.dropdown-menu, .modal, .offcanvas, .offcanvas-body, .table-responsive, .ft-resp-scroll,
         [role="dialog"], [role="listbox"], [role="menu"], #sidebarMenu) { overscroll-behavior: contain; }

/* 2. Leisten (Kopfleiste, untere Navigation, Zurück-Knopf): keine Markierung, kein Lang-Druck-Menü,
      kein Doppeltipp-Zoom; Rückmeldung beim Antippen über die Deckkraft. Menü-INHALTE bleiben markierbar. */
html.ft-standalone :where(.navbar-custom, .ft-bottom-nav, #ftPwaBack) { -webkit-tap-highlight-color: transparent; }
html.ft-standalone :where(.navbar-custom .navbar-brand, .navbar-custom .nav-link, .navbar-custom .navbar-toggler, .navbar-custom .btn,
         .ft-bottom-nav a, .ft-bottom-nav button, #ftPwaBack) {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
html.ft-standalone :where(.navbar-custom, .ft-bottom-nav) img { -webkit-user-drag: none; -webkit-touch-callout: none; }
html.ft-standalone :where(.navbar-custom .navbar-brand, .navbar-custom .nav-link, .navbar-custom .navbar-toggler, .ft-bottom-item):active { opacity: .72; }

/* 3. Knöpfe im Inhalt: Beschriftung nicht versehentlich markieren, kein Doppeltipp-Zoom.
      Texte, Beiträge, Menü-Einträge und Eingabefelder bleiben markierbar. */
html.ft-standalone :where(.btn, button, input[type="button"], input[type="submit"], input[type="reset"], .btn-close, .page-link,
         .nav-tabs .nav-link, .nav-pills .nav-link, [role="tab"]) {
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
html.ft-standalone :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
         textarea, [contenteditable="true"], [contenteditable=""]) {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}

/* 4. Scrollen: weich nur ohne „Bewegung reduzieren“ (ft-a11y.css setzt dann auto !important).
      Sprungziele und Tastatur-Fokus (auch bei offener Bildschirmtastatur) halten Abstand zu festen Leisten
      inkl. Statusleiste/Home-Leiste. css/ft-mobile-pro.css (!important, < 992 px) bleibt vorrangig. */
@media (prefers-reduced-motion: no-preference) {
  html.ft-standalone { scroll-behavior: smooth; }
}
html.ft-standalone:has(.navbar-custom.fixed-top) { scroll-padding-top: calc(76px + var(--ft-pwa-st)); }
@media (max-width: 991.98px) {
  html.ft-standalone:has(.mobile-sub-nav) { scroll-padding-top: calc(132px + var(--ft-pwa-st)); }
  html.ft-standalone:has(#ftBottomNav) { scroll-padding-bottom: calc(84px + var(--ft-pwa-sb)); }
}

/* 5. Sichere Ränder (Kamera-Aussparung, Statusleiste, Home-Leiste). Nur feste Bauteile, die es noch nicht selbst tun.
      Durchsichtiger RAND statt Innenabstand: vorhandene Abstände der Seite bleiben unverändert, der Hintergrund läuft durch.
      Ohne Aussparung ist env(...) = 0 -> keine Wirkung. Untere Navigation, Zurück-Knopf, iOS-Kopfleiste der Standard-Seiten:
      schon in includes/ft_bottom_nav.php, includes/pwa_shell.php, assets/css/ft-ios-fix.css. */
/* 5a. Kopfleiste im Querformat: Logo/Symbole nicht unter der Aussparung */
html.ft-standalone .navbar-custom { border-left: var(--ft-pwa-sl) solid transparent; border-right: var(--ft-pwa-sr) solid transparent; }
/* 5b. Seiteninhalt im Querformat (Seiten mit Kopfleiste; Live/Nachrichten haben eine eigene Vollbild-Aufteilung) */
html.ft-standalone body:has(.navbar-custom):not(.ft-page-live):not(.ft-page-messages) {
  border-left: var(--ft-pwa-sl) solid transparent; border-right: var(--ft-pwa-sr) solid transparent;
}
/* 5c. Saison-Köpfe (Saison-Header-Dateien in includes/, Body ohne ft-page-Klasse, ohne ft-ios-fix.css): Auf der Startseite
       steht die Kopfleiste ganz oben -> Bedienelemente unter der Statusleiste beginnen lassen (dunkler Streifen wie
       ft-ios-fix.css A -> weiße Uhr lesbar). Auf den übrigen Saison-Seiten ist die Leiste per Inline-Stil position:relative
       (trotz .fixed-top) und steht unter dem Seitenabstand -> dort liegt die Statusleiste über Leerraum, nichts zu tun. */
html.ft-standalone body.page-landing-non-fixed-navbar:not([class*="ft-page-"]) nav.navbar-custom { border-top: var(--ft-pwa-st) solid #181a1b; }
/* 5d. Tablet quer (>= 992 px) auf iOS: ft-ios-fix.css B macht die Kopfleiste um die Statusleiste höher, der Seitenabstand
       wächst dort aber nur < 992 px mit -> Inhalt rutschte unter die Leiste */
@media (min-width: 992px) {
  @supports (-webkit-touch-callout: none) {
    html.ft-standalone body[class*="ft-page-"]:not(.page-landing-non-fixed-navbar):not(.ft-page-live):not(.ft-page-messages):has(nav.navbar-custom.fixed-top) {
      border-top: var(--ft-pwa-st) solid transparent;
    }
  }
}
/* 5e. Cookie-Hinweis (includes/footer.php, unten fest): Knöpfe über der Home-Leiste, Text quer neben der Aussparung;
       Verlauf läuft bis zum Rand */
html.ft-standalone #cookieConsentBanner {
  border-bottom: var(--ft-pwa-sb) solid transparent; border-left: var(--ft-pwa-sl) solid transparent;
  border-right: var(--ft-pwa-sr) solid transparent; background-origin: border-box;
}
/* 5f. Seitenmenüs (offcanvas) über die volle Höhe */
html.ft-standalone .offcanvas.offcanvas-start, html.ft-standalone .offcanvas.offcanvas-end { padding-top: var(--ft-pwa-st); padding-bottom: var(--ft-pwa-sb); }
html.ft-standalone .offcanvas.offcanvas-start { padding-left: var(--ft-pwa-sl); }
html.ft-standalone .offcanvas.offcanvas-end { padding-right: var(--ft-pwa-sr); }
html.ft-standalone .offcanvas.offcanvas-bottom { padding-bottom: var(--ft-pwa-sb); }
html.ft-standalone .offcanvas.offcanvas-top { padding-top: var(--ft-pwa-st); }

/* 6. Volle Höhe: 100dvh statt 100vh (auch auf Seiten ohne ft-responsive.css) */
@supports (height: 100dvh) {
  html.ft-standalone .vh-100 { height: 100dvh !important; }
  html.ft-standalone .min-vh-100 { min-height: 100dvh !important; }
}

/* 7. Zielgrößen >= 44 px auf Touch (wie ft-responsive.css 5, für Köpfe ohne diese Datei; Spezifität > ft-a11y.css 5) */
@media (pointer: coarse) {
  html.ft-standalone .btn, html.ft-standalone .btn-close, html.ft-standalone .page-link, html.ft-standalone .form-control, html.ft-standalone .form-select { min-height: 44px; }
  html.ft-standalone .btn-close, html.ft-standalone .page-link { min-width: 44px; }
}

/* 8. Fokus bleibt sichtbar: diese Datei setzt nirgends outline/box-shadow; :focus-visible aus ft-a11y.css gilt unverändert. */