/* ---------------------------------------------------------------------------
   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.
--------------------------------------------------------------------------- */

/* Marketing-Einwilligung: gleicher Zugang zu Ablehnen und Zustimmen. */
.marketing-consent-panel {
    position: fixed;
    z-index: 10000;
    left: 50%;
    bottom: 16px;
    width: min(960px, calc(100vw - 32px));
    box-sizing: border-box;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
    border: 1px solid #c7d9d2;
    border-radius: 12px;
    background: #fff;
    color: #182b26;
    box-shadow: 0 8px 32px rgb(0 0 0 / 18%);
    font: 16px/1.5 Graphik, sans-serif;
}
.marketing-consent-copy { max-width: 640px; }
.marketing-consent-copy strong { display: block; margin-bottom: 4px; }
.marketing-consent-copy p { margin: 0; }
.marketing-consent-copy a { color: #126c57; text-decoration: underline; }
.marketing-consent-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.marketing-consent-button { cursor: pointer; }
.marketing-consent-actions .marketing-consent-button {
    min-height: 44px;
    padding: 9px 16px;
    border: 2px solid #126c57;
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
}
.marketing-consent-reject { background: #fff; color: #126c57; }
.marketing-consent-accept { background: #126c57; color: #fff; }
.marketing-consent-settings {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: underline;
}
.marketing-consent-button:focus-visible { outline: 3px solid #efb348; outline-offset: 3px; }
@media (max-width: 700px) {
    .marketing-consent-panel { display: block; padding: 16px; }
    .marketing-consent-actions { width: 100%; margin-top: 16px; }
    .marketing-consent-actions .marketing-consent-button { flex: 1 1 0; min-width: 0; padding-inline: 8px; font-size: 14px; }
}

/* Startseiten-Buttons bleiben auf iPhone-Breiten kompakt und einzeilig. */
@media (max-width: 575px) {
    .hero-cta { width: 100%; }
    .hero-cta .btn {
        max-width: 100%;
        padding-inline: 12px;
        font-size: 14px;
        white-space: nowrap;
    }
}

/* ===========================================================================
   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);
}

/* ===========================================================================
   5. Tabellen
   ---------------------------------------------------------------------------
   Bootstrap gibt .table die feste Textfarbe --bs-body-color (#212529). Unser
   Dark Mode laeuft aber ueber die Klasse .uc-dark und Tailwind-Utilities, nicht
   ueber Bootstraps Farbvariablen -- auf dunklem Hintergrund bleibt der
   Tabellentext deshalb fast schwarz.

   Tabellen uebernehmen stattdessen die Textfarbe ihrer Umgebung; im Dark Mode
   bekommen die Linien einen hellen, halbtransparenten Ton.
   =========================================================================== */
.table {
    --bs-table-color:         currentColor;
    --bs-table-striped-color: currentColor;
    --bs-table-active-color:  currentColor;
    --bs-table-hover-color:   currentColor;
}

:where(.uc-dark) .table {
    --bs-table-border-color: rgba(255, 255, 255, 0.15);
}

/* ===========================================================================
   6. News: KWR AI-Lead (Startseite)
   ---------------------------------------------------------------------------
   Pill ueber der Hero-Ueberschrift und die Sektion direkt darunter. Schwarz
   und das helle Gruen kommen aus den LinkedIn-Grafiken der Ankuendigung.
   =========================================================================== */
.news-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border: 1px solid rgba(23, 141, 114, 0.35);
    border-radius: 999px;
    background: rgba(23, 141, 114, 0.08);
    color: inherit;
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.news-pill:hover {
    background: rgba(23, 141, 114, 0.16);
    border-color: var(--color-primary);
}
.news-pill b,
.news-kwr-eyebrow b {
    flex-shrink: 0;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 500;
}
:where(.uc-dark) .news-pill { color: #fff; }

.news-kwr { scroll-margin-top: 80px; }
.news-kwr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.news-kwr-eyebrow b { letter-spacing: 0.08em; }

.news-kwr-logos {
    display: flex;
    align-items: center;
    gap: 16px;
}
.news-kwr-logo {
    display: block;
    width: 84px;
    height: 84px;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.35);
}
.news-kwr-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.news-kwr-logo-datology {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: #000;
}
.news-kwr-logo-datology img { height: auto; object-fit: contain; }
.news-kwr-x { color: #2bc49a; font-size: 22px; }

.news-kwr-mark { position: relative; display: inline-block; white-space: nowrap; }
.news-kwr-mark svg {
    position: absolute;
    left: -2%;
    bottom: -0.16em;
    width: 104%;
    height: 0.3em;
    overflow: visible;
}
.news-kwr-mark path { fill: none; stroke: #2bc49a; stroke-width: 6; stroke-linecap: round; }
.news-kwr-mark path + path { stroke-width: 3; opacity: 0.8; }

.news-kwr-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 32px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.news-kwr-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.25); }
:where(.uc-dark) .news-kwr-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }
.news-kwr-card h3 { margin: 0; font-size: 22px; font-weight: 700; }
.news-kwr-num { font-family: Georgia, "Times New Roman", serif; font-size: 34px; line-height: 1; color: var(--color-primary); }
.news-kwr-name { color: var(--color-primary); font-size: 15px; font-weight: 500; }
.news-kwr-badge {
    align-self: flex-start;
    margin-top: auto;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(23, 141, 114, 0.1);
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 500;
}

.news-kwr-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
    border-radius: 20px;
    background: #000;
    color: #fff;
}
.news-kwr-cta blockquote { font-size: 18px; line-height: 1.4; color: #fff; }
.news-kwr-cta figcaption { margin-top: 6px; font-size: 14px; color: #9a9a9a; }
.news-kwr-next { font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; color: #fff; }
.news-kwr-cta .btn { white-space: nowrap; }