/* ---------------------------------------------------------------------------
   site.css -- die einzige Stylesheet-Schicht, die uns gehoert.

   Wird nach assets/css/theme/main.min.css geladen, damit eine Regel gleicher
   Spezifitaet ueber die Quellreihenfolge gewinnt. !important nur dort, wo eine
   Theme-Utility selbst eines mitbringt.

   Breakpoints folgen ausschliesslich der Theme-Leiter 576/768/992/1200/1400,
   ueber die html.bp-*-Klassen aus assets/js/app-head-bs.js.
--------------------------------------------------------------------------- */

/* ===========================================================================
   1. Fluider Container
   ---------------------------------------------------------------------------
   Das Theme gibt .container eine harte max-width plus flache 16px Polsterung.
   Dadurch faellt der Seitenabstand beim Unterschreiten von ~1372px Fensterbreite
   in einem einzigen Schritt von ~136px auf 16px -- die Seite laeuft schlagartig
   randlos. Ein 1536-CSS-px-Laptop bei Browser-Zoom 125% landet bei 1229px und
   damit exakt in diesem Band.

   Wir druecken den Container stattdessen ueber die BREITE aus: Designbreite,
   oder ein fester Anteil des Fensters, oder Fenster minus Mindestabstand --
   was davon am kleinsten ist. Die max-width des Themes gilt weiterhin, bindet
   aber nie, weil unsere Breite immer kleiner oder gleich ist. Deshalb braucht
   das hier kein !important.

   Kein vw: Prozente rechnen gegen die Elternbox und schliessen den Scrollbalken
   damit korrekt aus -- 100vw wuerde ihn mitzaehlen.
   =========================================================================== */

:root {
    --gutter-min: 16px;     /* naeher als das kommt Inhalt nie an die Fensterkante */
    --content-ratio: 92%;   /* im fluiden Band behaelt der Inhalt diesen Fensteranteil */
}

.container {
    --content: 100%;        /* <576px: das Theme setzt dort keine max-width */
    --bs-gutter-x: 0px;     /* der Abstand steckt jetzt in der Breite, nicht im Padding */
    width: min(var(--content), var(--content-ratio), 100% - 2 * var(--gutter-min));
    margin-inline: auto;
}

/* Die Theme-Leiter, jeweils deren max-width minus deren eigene 32px Polsterung. */
html.bp-sm  .container { --content:  508px; }
html.bp-md  .container { --content:  688px; }
html.bp-lg  .container { --content:  928px; }
html.bp-xl  .container { --content: 1108px; }
html.bp-xxl .container { --content: 1288px; }

/* Die max-w-*-Modifier ueberschreiben die Leiter. Gleiche Spezifitaet wie oben
   (0,2,1), gewinnen also ueber die Quellreihenfolge -- daher stehen sie danach. */
html .container.max-w-md  { --content:  688px; }
html .container.max-w-lg  { --content: 1008px; }
html .container.max-w-xl  { --content: 1248px; }
html .container.max-w-2xl { --content: 1280px; }

/* Responsive Modifier. Reihenfolge sm -> lg -> xl ist bedeutsam: Elemente mit
   "container sm:max-w-md lg:max-w-lg xl:max-w-xl" matchen ab bp-xl auf alle
   drei bei gleicher Spezifitaet (0,3,1), der letzte Treffer gewinnt. */
html.bp-sm .container.sm\:max-w-md { --content:  688px; }
html.bp-lg .container.lg\:max-w-lg { --content: 1008px; }
html.bp-xl .container.xl\:max-w-xl { --content: 1248px; }

/* ===========================================================================
   2. Horizontaler Ueberlauf
   =========================================================================== */

/* Ursache des gemessenen 48px-Ueberlaufs zwischen 1200px und 1280px: Reihen mit
   --bs-gutter-x: 8rem bekommen daraus -64px Aussenabstand je Seite, der Container
   kann davon aber nur seine eigenen 16px Polsterung aufnehmen. 64 - 16 = 48.

   Oberhalb von 1371px bleibt alles unberuehrt -- dort ist der Seitenabstand
   ohnehin gross genug, und dieser PR soll dort pixelgleich bleiben. Innerhalb
   des Bandes deckeln wir den negativen Aussenabstand auf 4% der Containerbreite;
   zur Verfuegung stehen rechnerisch 4/92 = 4,35%, der Deckel liegt also immer
   darunter. Prozentuale Aussenabstaende rechnen gegen die Elternbox und sind
   damit ebenfalls scrollbalken-sicher. */
@media (max-width: 1371px) {
    .row {
        margin-inline: max(calc(-.5 * var(--bs-gutter-x)), -4%);
    }
}

/* overflow-x:hidden auf <body> macht body zum Scroll-Container -- bei nicht
   gesetztem overflow-y sogar auf beiden Achsen. Das ist die klassische Ursache
   fuer kaputtes position:sticky und kaputtes Scroll-Anchoring, und es verfaelscht
   scrollWidth. overflow-x:clip beschneidet ohne diese Nebenwirkungen. */
html { overflow-x: clip; }
body.overflow-x-hidden { overflow-x: clip !important; }

/* ===========================================================================
   3. Absicherung der Einblend-Animationen
   ---------------------------------------------------------------------------
   Ohne den frueheren Vollbild-Preloader (siehe assets/js/app-head-bs.js) waeren
   [data-anime]-Elemente einen Frame lang an ihrer Endposition sichtbar, bevor
   anime.js sie auf opacity:0 setzt und einblendet. Die Klasse dom-ready kommt
   aus app-head-bs.js und nicht aus anime.js -- faellt anime.js also aus, werden
   die Elemente trotzdem sichtbar, statt dauerhaft unsichtbar zu bleiben.
   =========================================================================== */
html:not(.dom-ready) [data-anime] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    [data-anime] { opacity: 1 !important; }
}

/* ===========================================================================
   4. Schriften
   ---------------------------------------------------------------------------
   Das Theme setzt auf :root:

       --font-family-primary:   "Graphik", sans-serif     (Fliesstext)
       --font-family-secondary: "Graphik", serif          (Ueberschriften)
       --font-family-tertiary:  "Graphik", serif

   Der Serif-Rueckfall bei den Ueberschriften ist unbeabsichtigt: solange
   Graphik geladen ist, sieht man ihn nie -- in jeder Sekunde davor aber schon,
   und dann stehen die Ueberschriften in Times. Frueher hat der Vollbild-
   Preloader das verdeckt; ohne ihn (siehe assets/js/app-head-bs.js) faellt es
   auf, weil das Theme font-display: swap verwendet.

   Ueberschriften und Fliesstext bekommen deshalb denselben Stack. Graphik
   bleibt an erster Stelle und aendert sich nicht -- es geht nur darum, was
   greift, solange oder falls es nicht da ist.

   Diese Datei laedt nach dem Theme, gleiche Spezifitaet (:root) gewinnt also
   ueber die Quellreihenfolge. Kein !important noetig.
   =========================================================================== */
:root {
    --font-stack-sans:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Symbol";

    --font-family-primary:   "Graphik", var(--font-stack-sans);
    --font-family-secondary: "Graphik", var(--font-stack-sans);
    --font-family-tertiary:  "Graphik", var(--font-stack-sans);
}