/* ================================================================
   LOG|CONS · portal-public.css
   EIN einziges, sauberes Stylesheet für alle öffentlichen Seiten
   Ersetzt: public-portal-v5.css, public-portal-pep.css,
            public-portal-showcase.css (plus relevante Teile aus style.css)
   ================================================================ */

/* Inter — selbst gehostet.
   Vorher lag hier ein @import auf fonts.googleapis.com. Der laeuft bei
   JEDEM Seitenaufruf, noch bevor der Besucher irgendetwas entscheiden
   konnte, und uebertraegt dabei seine IP-Adresse an Google. Ein
   Einwilligungs-Banner, das Analytics zurueckhaelt, waehrend die
   Schriftart ungefragt dieselbe Verbindung aufbaut, waere Theater.
   Subsets: latin, latin-ext (PL/HU/RO/LV/SK) und cyrillic, cyrillic-ext
   (BG/UK) — seit den sieben neuen Sprachen werden sie tatsaechlich
   gebraucht. Der Browser laedt nur, was die Seite wirklich anzeigt. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter/inter-cyrillic-ext-400.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter/inter-cyrillic-400.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter/inter-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter/inter-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter/inter-cyrillic-ext-500.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter/inter-cyrillic-500.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter/inter-latin-ext-500.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter/inter-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter/inter-cyrillic-ext-600.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter/inter-cyrillic-600.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter/inter-latin-ext-600.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter/inter-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter/inter-cyrillic-ext-700.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter/inter-cyrillic-700.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter/inter-latin-ext-700.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter/inter-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/inter/inter-cyrillic-ext-800.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/inter/inter-cyrillic-800.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/inter/inter-latin-ext-800.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/inter/inter-latin-800.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/inter/inter-cyrillic-ext-900.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/inter/inter-cyrillic-900.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/inter/inter-latin-ext-900.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/inter/inter-latin-900.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


/* ── Design Tokens ── */
:root {
  --W:        1180px;          /* Einheitliche Breite – NAV, HERO, SECTIONS, FOOTER */
  --GAP:      28px;            /* Horizontales Container-Padding */
  --BLUE:     #2563eb;
  --BLUE-D:   #1e40af;
  --CYAN:     #06b6d4;
  --GREEN:    #059669;
  --AMBER:    #d97706;
  --INK:      #0f172a;
  --MUTED:    #5b6a80;
  --LINE:     rgba(15,23,42,.08);
  --BG:       #f1f5fb;
  --CARD:     #ffffff;
  --SHADOW:   0 4px 20px rgba(15,23,42,.07);
  --SHADOW-H: 0 12px 36px rgba(15,23,42,.12);
  --R:        20px;            /* Einheitlicher Border-Radius für Cards */
  --R-SM:     12px;
}

/* ── Reset / Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--BG);
  color: var(--INK);
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100vh;
}
a { text-decoration: none; color: inherit; }

/* ── EIN VERWEIS IM FLIESSTEXT MUSS ALS VERWEIS ZU ERKENNEN SEIN ──────────
   ANWENDERBEFUND, 28.08.2026: „Z.B. MCP Server .../ki-agenten.html kein link
   auf die Mcp Server Seite." Der Link WAR da — mitten im Absatz, und durch
   die Regel darueber sah er aus wie gewoehnlicher Text: keine Farbe, keine
   Unterstreichung. Portalweit betraf das 78 Verweise; sie waren vorhanden
   und trotzdem unauffindbar, was schlimmer ist als ein fehlender: Wer keinen
   Link sieht, sucht ihn woanders.

   WARUM NICHT DIE GLOBALE REGEL AENDERN: `color: inherit` ist gewollt. Ohne
   sie wuerden Navigation, Karten, Knoepfe und die Fusszeile blau — ueberall
   dort ist der ganze Block der Verweis, und eine Farbe darin waere Laerm.
   Gezielt sind deshalb nur Verweise OHNE eigene Klasse innerhalb von
   Absaetzen und Listen in <main>: genau die Inline-Verweise im Fliesstext.
   `.link-arrow`, `.btn` und alles mit eigener Klasse bleiben unberuehrt.

   DIE UNTERSTREICHUNG IST DUENN UND HELL. Voll ausgezeichnet stoert sie den
   Lesefluss in einem Text, der viele Verweise traegt; ganz ohne sie bliebe
   allein die Farbe, und die reicht bei Sehschwaeche nicht aus. Beim
   Ueberfahren wird sie kraeftig. */
main p > a:not([class]),
main li > a:not([class]) {
  color: var(--BLUE);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(37,99,235,.38);
  transition: color .15s, text-decoration-color .15s;
}
main p > a:not([class]):hover,
main li > a:not([class]):hover {
  color: var(--BLUE-D);
  text-decoration-color: currentColor;
}
main p > a:not([class]):focus-visible,
main li > a:not([class]):focus-visible {
  outline: 2px solid var(--BLUE); outline-offset: 2px; border-radius: 3px;
}
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }

/* ── Skip Link ── */
.skip-link {
  position: absolute; left: 16px; top: -56px; z-index: 2000;
  background: var(--INK); color: #fff;
  padding: 12px 16px; border-radius: 12px;
  transition: top .2s ease;
}
.skip-link:focus { top: 16px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ================================================================
   CONTAINER — Überall exakt gleich breit
   ================================================================ */
.container {
  max-width: var(--W);
  margin: 0 auto;
  padding: 0 var(--GAP);
  width: 100%;
}

/* ── Nav-Slot Placeholder ── */
#portal-nav-slot { min-height: 72px; }
#portal-footer-slot { min-height: 280px; }

/* ================================================================
   NAVIGATION (vom portal.js gerendert)
   ================================================================ */
.nav {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--LINE);
  transition: box-shadow .3s;
}
.nav.scrolled { box-shadow: 0 4px 24px rgba(15,23,42,.08); }
.nav-inner {
  height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

/* Brand */
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  box-shadow: 0 2px 8px rgba(37,99,235,.28);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .82rem; font-weight: 800; letter-spacing: -.01em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1; gap: 1px; }
.brand-name { font-size: 1.12rem; font-weight: 900; color: #0f172a; letter-spacing: -.015em; white-space: nowrap; }
.brand-log  { font-size: 1rem; font-weight: 900; color: #0f172a; letter-spacing: .08em; line-height: 1; }
.brand-dots { font-size: .55rem; color: var(--BLUE); letter-spacing: .22em; text-align: center; }
.brand-cons { font-size: 1rem; font-weight: 900; color: var(--BLUE); letter-spacing: .08em; line-height: 1; }
.brand-sub  { font-size: .56rem; color: var(--MUTED); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-align: center; margin-top: 2px; }

/* Nav Links */
.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-links a {
  color: #334155; font-size: .88rem; font-weight: 600;
  padding: 9px 13px; border-radius: 11px;
  transition: all .2s; white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active { background: rgba(37,99,235,.09); color: var(--BLUE); }
.nav-links a.nav-link-highlight {
  color: var(--GREEN); border: 1.5px solid rgba(5,150,105,.25); border-radius: 10px;
}
.nav-links a.nav-link-highlight:hover { background: rgba(5,150,105,.08); }
.nav-cta {
  padding: 9px 18px; border-radius: 12px;
  background: transparent; color: var(--INK);
  font-weight: 700; font-size: .88rem;
  border: 1.5px solid var(--BLUE);
  transition: background .15s, color .15s;
}
.nav-cta:hover { background: var(--BLUE); color: #fff; }
.nav-cta-mobile { display: block; }

/* Dropdown */
.nav-item { position: relative; list-style: none; }
.nav-dropdown-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  color: #334155; font-size: .88rem; font-weight: 600;
  padding: 9px 13px; border-radius: 11px; background: transparent; border: 0;
  transition: all .2s; white-space: nowrap;
}
.nav-dropdown.active .nav-dropdown-toggle,
.nav-dropdown-toggle:hover { background: rgba(37,99,235,.09); color: var(--BLUE); }
.nav-caret { font-size: .7rem; opacity: .7; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px;
  background: rgba(255,255,255,.98); border: 1px solid var(--LINE);
  box-shadow: 0 12px 36px rgba(15,23,42,.12); border-radius: 16px; padding: 8px; display: none;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: grid; gap: 4px; }
.nav-dropdown-menu a { display: block; }
.drop-item { display: flex; gap: 11px; align-items: center; padding: 6px 12px; border-radius: 10px; transition: background .15s; }
.drop-item:hover { background: rgba(37,99,235,.06); }
.drop-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: rgba(37,99,235,.09); color: var(--BLUE); flex-shrink: 0; }
.drop-icon svg { width: 18px; height: 18px; stroke: var(--BLUE); }
.drop-item:hover .drop-icon { background: rgba(37,99,235,.15); }
.drop-label { font-size: .86rem; font-weight: 700; color: var(--INK); display: block; margin-bottom: 1px; }
.drop-desc  { font-size: .76rem; color: var(--MUTED); line-height: 1.35; display: block; }
.drop-copy  { flex: 1; }
.nav-top-icon { font-size: .9rem; margin-right: 4px; }

/* Mega Menu */
.mega-menu-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px 4px; }
/* Zwischenüberschrift im Mega-Menü: bündelt die Tools nach Oberkategorie
   (Anwenderwunsch „gebündelt"). Spannt über beide Spalten. */
.mega-menu-grid .drop-group { grid-column: 1 / -1; margin: 6px 8px 0; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--BLUE); }
.mega-menu-grid .drop-group:first-child { margin-top: 1px; }
.mobile-subgroup { display: block; margin: 12px 4px 2px; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--MUTED); }
.mega-menu-intro { padding: 11px 16px; margin: -8px -8px 6px; border-radius: 15px 15px 0 0; border-bottom: 1px solid rgba(37,99,235,.16); background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(5,150,105,.08)); }
.mega-menu-intro strong { display: block; font-size: .98rem; color: var(--INK); letter-spacing: -.01em; margin: 1px 0 3px; }
.mega-menu-intro p { font-size: .8rem; color: var(--MUTED); line-height: 1.4; margin: 0 0 8px; }
.mega-menu-kicker { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--BLUE); display: block; margin-bottom: 4px; }
.mega-menu-intro .mega-menu-link { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--BLUE), var(--BLUE-D)); padding: 7px 14px; border-radius: 999px; box-shadow: 0 6px 16px rgba(37,99,235,.25); transition: filter .15s; }
.mega-menu-intro .mega-menu-link:hover { filter: brightness(1.07); color: #fff; background: linear-gradient(135deg, var(--BLUE), var(--BLUE-D)); }

/* Breites Mega-Menü (Anwenderwunsch „über die gesamte Breite").
   Anker ist die Nav-Container-Breite, nicht der schmale Menüpunkt: dazu wird
   das tragende <li> auf position:static gesetzt, sodass das absolute Panel am
   .nav .container hängt (den wir dafür relativ positionieren) und mit left:0/
   right:0 die volle Inhaltsbreite spannt. Verworfen wurde position:fixed am
   Viewport — das hing am backdrop-filter-Containing-Block der Nav und wäre
   zerbrochen, sobald jemand den Filter entfernt. Intro links als Spalte,
   Einträge rechts in drei Spalten; so stehen die langen Beschriftungen
   (z. B. „…Verkehrsträgervergleich") nicht mehr abgeschnitten am Rand. */
.nav .container { position: relative; }
.nav-dropdown--wide { position: static; }
.nav-dropdown-menu.mega-menu--wide {
  left: 0; right: 0; width: auto; min-width: 0;
  grid-template-columns: 296px 1fr; gap: 0; padding: 0; overflow: hidden;
}
.mega-menu--wide .mega-menu-intro {
  margin: 0; border-radius: 0; border-bottom: 0;
  border-right: 1px solid rgba(37,99,235,.16);
  padding: 22px 24px; display: flex; flex-direction: column; justify-content: center;
}
/* Menüs OHNE Gruppen (AI/BI/Kontakt): flaches Raster. minmax(0,1fr) statt 1fr
   verhindert den Grid-Blowout — sonst zwingt ein langes Wort wie
   „Verkehrsträgervergleich" die Spalte auf, das Panel läuft über und
   overflow:hidden schneidet die rechte Spalte ab (Anwenderwunsch „nichts
   abschneiden"). */
.mega-menu--wide .mega-menu-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; padding: 14px 16px;
}
.mega-menu--wide .mega-menu-grid .drop-group { grid-column: 1 / -1; margin: 8px 8px 2px; }
.mega-menu--wide .mega-menu-grid .drop-group:first-child { margin-top: 2px; }

/* Menüs MIT Gruppen (Lösungen): jede Gruppe wird zu einer Themenspalte
   (Anwenderwunsch „nach zusammenhängenden Themen gruppieren"). Flex-Zeile mit
   gleich breiten Spalten; die Überschrift steht über den Einträgen ihrer Spalte.
   Muss NACH der Raster-Regel stehen, damit display:flex das display:grid
   überschreibt (gleiche Spezifität). */
/* Raster mit fester Spaltenzahl statt Flex mit Umbruch.
   Vorher stand hier display:flex + flex-wrap. Das hielt, solange „Lösungen"
   drei Spalten hatte, und brach mit der vierten: bei schmalerem Fenster
   rutschte Green Logistics in eine zweite Zeile, wo flex-grow sie über die
   volle Breite zog — eine Spalte so breit wie die drei darüber. Ob es passte,
   hing an der Fensterbreite; auf einem Bildschirm sah es richtig aus, auf dem
   nächsten falsch. Ein Raster mit repeat(var(--mega-cols)) kann nicht
   umbrechen: es teilt die vorhandene Breite auf, immer in einer Zeile.
   minmax(0, 1fr) statt 1fr, damit ein langes Wort die Spalte nicht aufzieht —
   dieselbe Begründung wie beim ungruppierten Raster darüber.
   --mega-cols setzt portal.js am Element, weil die Zahl je Menü verschieden
   ist (AI, BI und Kontakt zwei, Lösungen vier). Der Rückfallwert 3 gilt nur,
   wenn das Attribut fehlt — dann rendert das Menü wie vor dieser Änderung. */
.mega-menu--wide .mega-menu-grid--cols {
  display: grid; grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 1fr));
  gap: 4px 24px; align-items: start; padding: 16px 18px;
}
/* Vier Spalten unter etwa 900px wären je rund 80px breit — dort ist zwei
   besser als vier. Das ist bewusst weit unten angesetzt: der Anwenderwunsch
   lautet „alle vier Bereiche oben anzeigen", und das gilt für jedes Fenster,
   in dem vier Spalten überhaupt lesbar sind. Unter 720px übernimmt ohnehin
   das Mobilmenü. */
@media (max-width: 900px) {
  .mega-menu--wide .mega-menu-grid--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Hier standen erst flex: 1 1 0 und min-width: 180px, dann 160px. Beides war
   der Versuch, über die Mindestbreite zu steuern, wann flex-wrap umbricht —
   und beides ging daneben, weil der Umbruch vom Fenster abhing und nicht von
   der Regel. Mit dem Raster darüber gibt es keinen Umbruch mehr, also auch
   keine Mindestbreite: die Spalte ist so breit, wie das Raster ihr zuteilt.
   min-width: 0 bleibt, damit ein langes Wort die Rasterspalte nicht aufzieht
   (die automatische Mindestbreite eines Grid-Elements ist min-content). */
.mega-menu--wide .mega-sec { min-width: 0; display: flex; flex-direction: column; }
.mega-menu--wide .mega-sec .drop-group { grid-column: auto; margin: 0 10px 6px; }
/* Lange Wörter brechen um statt über den Spaltenrand zu laufen. */
.mega-menu--wide .drop-copy { min-width: 0; }
/* hyphens vor overflow-wrap: mit vier Spalten sind die Spalten schmal genug,
   dass „Verkehrsträgervergleich" nicht mehr in eine Zeile passt. break-word
   trennt dann ohne Strich mitten im Wort — im Menü stand tatsächlich
   „Verkehrsträgervergleic / h". Mit hyphens:auto trennt der Browser nach den
   Regeln der Seitensprache (html lang="de") und setzt einen Bindestrich;
   break-word bleibt als Notnagel für Wörter, die auch das nicht rettet. */
.mega-menu--wide .drop-desc { hyphens: auto; overflow-wrap: break-word; }
/* Der eigentliche Überlauf-Grund: .drop-item erbt aus einer anderen Stylesheet
   white-space:nowrap (aus dem alten schmalen Dropdown). Dadurch stand jede
   Beschreibung auf EINER Zeile und lief in der dritten Spalte über den Rand.
   Im breiten Menü müssen Beschriftung und Text umbrechen dürfen. Hohe
   Spezifität (zwei Klassen am Menü), damit die Regel die nowrap-Quelle sicher
   schlägt. */
.nav-dropdown-menu.mega-menu--wide .drop-item,
.nav-dropdown-menu.mega-menu--wide .drop-copy,
.nav-dropdown-menu.mega-menu--wide .drop-label,
.nav-dropdown-menu.mega-menu--wide .drop-desc { white-space: normal; }

/* Mobile */
.menu-btn {
  display: none; background: #fff; border: 1px solid var(--LINE);
  width: 42px; height: 42px; border-radius: 12px;
  box-shadow: var(--SHADOW);
}
.menu-btn span { display: block; width: 17px; height: 2px; background: var(--INK); margin: 4px auto; border-radius: 1px; transition: all .25s; }
.mobile-panel { display: none; border-top: 1px solid var(--LINE); }
.mobile-panel.open { display: block; }
.mobile-links { display: grid; gap: 5px; padding: 10px 20px 18px; }
.mobile-links a {
  display: block; background: rgba(255,255,255,.85); border: 1px solid var(--LINE);
  border-radius: 12px; padding: 12px 16px; font-weight: 600; color: #334155;
  transition: all .2s;
}
.mobile-links a:hover, .mobile-links a.active { background: rgba(37,99,235,.08); color: var(--BLUE); }
.mobile-group details { background: rgba(255,255,255,.85); border: 1px solid var(--LINE); border-radius: 12px; padding: 6px 12px; }
.mobile-group summary { list-style: none; cursor: pointer; font-weight: 700; color: #334155; padding: 7px 2px; }
.mobile-group summary::-webkit-details-marker { display: none; }
.mobile-submenu { display: grid; gap: 5px; padding: 5px 0 4px; }
.mobile-link-icon { font-size: .9rem; margin-right: 6px; }
.mobile-caret { margin-left: 6px; font-size: .7rem; opacity: .6; }

/* ================================================================
   HERO — Gleich breit wie Nav, kein extra Card-Rahmen
   ================================================================ */
.public-hero {
  padding: 52px 0 44px;
  background: linear-gradient(180deg, #f7f9fd 0%, #eef3fb 100%);
  position: relative; overflow: hidden;
}
.public-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 80% 40%, rgba(37,99,235,.08), transparent);
}
.public-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: start;
  position: relative;
}
.public-hero__content {
  display: flex; flex-direction: column; justify-content: center; gap: 0; min-width: 0;
}
.public-eyebrow {
  display: inline-block;
  font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--BLUE); margin-bottom: 14px;
}
.public-hero h1 {
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
  line-height: 1.0; letter-spacing: -.04em;
  max-width: 22ch;
  margin-bottom: 18px;
  /* Lange deutsche Komposita ("Entscheidungsgrundlage") sind breiter als die
     Hero-Spalte und liefen sonst unter die Panel-Card rechts. Silbentrennung
     zuerst, hartes Umbrechen nur als Notnagel. -webkit- fuer Safari/iPadOS. */
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}
.public-lead {
  font-size: 1rem; color: var(--MUTED); line-height: 1.72;
  max-width: 54ch; margin-bottom: 28px;
}
/* margin-top: der Text darf nicht an den Knöpfen kleben — ohne Abstand wirkt
   die Karte unsauber und unübersichtlich (Anwenderhinweis). Gilt überall. */
.public-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* Hero Panel (rechte Seite) — einzige Card im Hero */
.public-hero-panel {
  background: var(--CARD);
  border: 1px solid var(--LINE);
  border-radius: var(--R);
  box-shadow: var(--SHADOW);
  padding: 24px;
  transition: box-shadow .2s;
}
.public-hero-panel:hover { box-shadow: var(--SHADOW-H); }
.public-hero-panel__micro {
  font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--BLUE); margin-bottom: 10px;
}
.public-hero-panel__top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.public-hero-panel__top strong { font-size: .97rem; font-weight: 800; color: var(--INK); }
.public-hero-panel__top span {
  font-size: .68rem; font-weight: 800; padding: 3px 10px;
  border-radius: 999px; background: rgba(37,99,235,.08); color: var(--BLUE);
}
.public-hero-panel__summary { font-size: 1rem; color: var(--MUTED); line-height: 1.62; margin-bottom: 14px; }
.hero-bullets { list-style: none; display: grid; gap: 0; }
.hero-bullets li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--LINE); }
.hero-bullets li:first-child { border-top: none; padding-top: 0; }
.hero-bullet-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px;
  background: linear-gradient(135deg, var(--BLUE), var(--CYAN));
  box-shadow: 0 0 0 4px rgba(37,99,235,.1);
}
.hero-bullets strong { font-size: .9rem; font-weight: 700; color: var(--INK); display: block; margin-bottom: 3px; }
.hero-bullets p     { font-size: .95rem; color: var(--MUTED); line-height: 1.55; margin: 0; }
/* Fakten-Variante: Zahl statt Aufzählungspunkt */
.hero-bullets--fakten li { gap: 14px; align-items: baseline; }
.hero-fakt__wert {
  flex: 0 0 auto; min-width: 78px;
  font-size: 1.06rem; font-weight: 800; color: var(--BLUE);
  font-variant-numeric: tabular-nums; letter-spacing: -.015em; line-height: 1.25;
}
.hero-fakten__quelle {
  display: block; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--LINE);
  font-size: .76rem; color: var(--MUTED); line-height: 1.5;
}
.thema-premium { font-size: .88rem; color: var(--MUTED); }
.thema-premium a { color: var(--BLUE); font-weight: 600; }
/* Weiterlesen: der Text steht vollständig im HTML, nur die Anzeige klappt auf */
.thema-mehr { display: contents; }
.thema-mehr[hidden] { display: none; }
.thema-mehr__btn {
  justify-self: start; appearance: none; cursor: pointer;
  border: 1.5px solid var(--BLUE); background: #fff; color: var(--BLUE);
  font: inherit; font-size: .85rem; font-weight: 700;
  padding: 9px 20px; border-radius: 999px;
  transition: background .15s, color .15s;
}
.thema-mehr__btn:hover { background: var(--BLUE); color: #fff; }
.thema-mehr__btn::after { content: ' ↓'; }
.thema-mehr__btn[aria-expanded="true"]::after { content: ' ↑'; }
/* FAQ als Aufklapper */
.faq { border-top: 1px solid var(--LINE); }
.faq:first-of-type { border-top: none; }
.faq > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 10px;
  padding: 15px 0; font-size: 1.02rem; font-weight: 700; color: var(--INK);
  line-height: 1.4;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::before {
  content: '+'; flex: 0 0 auto; width: 18px;
  color: var(--BLUE); font-weight: 800; font-size: 1.15rem; line-height: 1;
}
.faq[open] > summary::before { content: '−'; }
.faq > summary:hover { color: var(--BLUE); }
.faq__inhalt { padding: 0 0 16px 28px; }
.faq__inhalt p:last-child { margin-bottom: 0; }
@media (min-width: 980px) {
  .thema-mehr__btn { grid-column: 1 / -1; }
  .faq { break-inside: avoid; }
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 22px;
  border-radius: 999px; font-weight: 700; font-size: .9rem;
  border: 1.5px solid transparent;
  transition: transform .2s, box-shadow .2s, opacity .2s;
  white-space: nowrap; cursor: pointer; text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(135deg, var(--BLUE-D), var(--BLUE));
  color: #fff; box-shadow: 0 8px 20px rgba(37,99,235,.22);
}
.btn-primary:hover { box-shadow: 0 14px 28px rgba(37,99,235,.3); }
.btn-secondary {
  background: var(--CARD); border-color: var(--LINE);
  color: var(--INK); box-shadow: var(--SHADOW);
}
.btn-secondary:hover { box-shadow: var(--SHADOW-H); border-color: rgba(37,99,235,.2); }
.btn-ghost {
  background: transparent; border-color: var(--LINE); color: var(--MUTED);
}
.text-link {
  font-size: .95rem; font-weight: 700; color: var(--BLUE);
  display: inline-flex; align-items: center; gap: 4px;
}
.text-link:hover { opacity: .78; }
.text-link::after { content: ' →'; }

/* ================================================================
   SECTIONS — Überall gleiche Breite
   ================================================================ */
.public-section { padding: 44px 0; }
.public-section--alt { background: rgba(255,255,255,.5); }
.public-section--cta { padding: 36px 0 52px; }

.public-section__head { max-width: 800px; margin-bottom: 28px; }
.public-section__head .public-eyebrow { margin-bottom: 10px; }
.public-section__head h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.06; letter-spacing: -.03em;
  max-width: 26ch; margin-bottom: 10px;
}
.public-section__head p { font-size: 1.05rem; color: var(--MUTED); line-height: 1.65; max-width: 66ch; }

/* ================================================================
   CARDS — Einheitliches Card-System
   ================================================================ */
.public-grid { display: grid; gap: 16px; }
.public-grid--3 { grid-template-columns: repeat(3, 1fr); }
.public-grid--2 { grid-template-columns: repeat(2, 1fr); }

.public-card {
  background: var(--CARD); border: 1px solid var(--LINE);
  border-radius: var(--R); padding: 22px;
  box-shadow: var(--SHADOW);
  transition: transform .2s, box-shadow .2s;
}
.public-card:hover { transform: translateY(-3px); box-shadow: var(--SHADOW-H); }
.public-card h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 8px; color: var(--INK); }
.public-card p  { font-size: 1rem; color: var(--MUTED); line-height: 1.6; }

/* Portal Entry Cards (3-col grid on index) */
.portal-entry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.portal-entry-card {
  background: var(--CARD); border: 1px solid var(--LINE);
  border-radius: var(--R); padding: 22px;
  box-shadow: var(--SHADOW);
  transition: transform .2s, box-shadow .2s;
}
.portal-entry-card:hover { transform: translateY(-3px); box-shadow: var(--SHADOW-H); }
.portal-entry-card h3 { font-size: 1rem; font-weight: 800; margin-bottom: 8px; color: var(--INK); }
.portal-entry-card p  { font-size: 1rem; color: var(--MUTED); line-height: 1.6; margin-bottom: 14px; }

/* Tools Index Grid */
.tools-index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tools-index-card {
  background: var(--CARD); border: 1px solid var(--LINE);
  border-radius: var(--R); padding: 22px;
  box-shadow: var(--SHADOW);
  transition: transform .2s, box-shadow .2s;
}
.tools-index-card:hover { transform: translateY(-3px); box-shadow: var(--SHADOW-H); }
.tools-index-card h3 { font-size: 1rem; font-weight: 800; margin-bottom: 8px; color: var(--INK); }
.tools-index-card p  { font-size: 1rem; color: var(--MUTED); line-height: 1.6; margin-bottom: 22px; }
.tools-index-meta {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
}
.tools-index-meta span {
  font-size: .68rem; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  background: rgba(37,99,235,.08); color: var(--BLUE);
  border: 1px solid rgba(37,99,235,.12);
}

/* ================================================================
   CONTENT BLOCKS (Reality-Check, Impact, Next-Step, etc.)
   ================================================================ */
.reality-check { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.reality-check__col {
  background: var(--CARD); border: 1px solid var(--LINE);
  border-radius: var(--R); padding: 22px;
  box-shadow: var(--SHADOW);
}
.reality-check__col h3 { font-size: .95rem; font-weight: 800; margin-bottom: 14px; color: var(--INK); }

.portal-list { list-style: none; display: grid; gap: 8px; }
.portal-list li {
  padding: 10px 14px; border-radius: var(--R-SM);
  background: rgba(15,23,42,.03); font-size: 1rem; color: var(--MUTED); line-height: 1.55;
  border-left: 3px solid var(--LINE);
}
.portal-list-check li { border-left-color: var(--GREEN); }
.portal-list-check li::before { content: '✓ '; font-weight: 900; color: var(--GREEN); }

.impact-box, .next-step-box, .premium-hint, .final-cta {
  background: var(--CARD); border: 1px solid var(--LINE);
  border-radius: var(--R); padding: 28px;
  box-shadow: var(--SHADOW);
}
.impact-box h3, .next-step-box h3, .premium-hint h2, .final-cta h2 {
  font-size: 1.2rem; font-weight: 800; margin-bottom: 10px; color: var(--INK);
}
.impact-box p, .next-step-box p, .premium-hint p, .final-cta p {
  font-size: 1rem; color: var(--MUTED); line-height: 1.65; margin-bottom: 18px;
}
.next-step-box { border-left: 3px solid var(--BLUE); }
.premium-hint  { border-left: 3px solid var(--AMBER); background: linear-gradient(135deg, rgba(245,158,11,.04), var(--CARD)); }
.final-cta     { background: linear-gradient(135deg, var(--BLUE-D), #2563eb 60%, var(--CYAN)); color: #fff; border: none; }
.final-cta h2, .final-cta .public-eyebrow { color: rgba(255,255,255,.9); }
.final-cta .public-eyebrow { color: rgba(255,255,255,.65); }
.final-cta p  { color: rgba(255,255,255,.78); }

/* ================================================================
   PORTFOLIO
   ================================================================ */
.portfolio-grid   { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.filter-bar       { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.filter-btn {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--LINE);
  background: var(--CARD); color: var(--MUTED); font-weight: 700; font-size: .82rem;
  cursor: pointer; transition: all .18s;
}
.filter-btn.active, .filter-btn:hover { background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.2); color: var(--BLUE); }
.pf-card {
  background: var(--CARD); border: 1px solid var(--LINE); border-radius: var(--R);
  box-shadow: var(--SHADOW); overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.pf-card:hover { transform: translateY(-4px); box-shadow: var(--SHADOW-H); }
.pf-top { height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.pf-icon { font-size: 1.6rem; }
.pf-body { padding: 20px; }
.pf-body h3 { font-size: .97rem; font-weight: 800; margin-bottom: 8px; color: var(--INK); }
.pf-body p  { font-size: .98rem; color: var(--MUTED); line-height: 1.6; margin-bottom: 14px; }
.pf-results { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding-top: 12px; border-top: 1px solid var(--LINE); }
.pf-results span { font-size: .84rem; color: var(--MUTED); }
.pf-results strong { color: var(--INK); }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(37,99,235,.12); background: rgba(37,99,235,.07); color: var(--BLUE);
}
.chip-blue   { background: rgba(37,99,235,.07);   color: var(--BLUE);  border-color: rgba(37,99,235,.15); }
.chip-cyan   { background: rgba(6,182,212,.07);   color: #0891b2;      border-color: rgba(6,182,212,.15); }
.chip-green  { background: rgba(5,150,105,.07);   color: var(--GREEN); border-color: rgba(5,150,105,.15); }
.chip-violet { background: rgba(124,58,237,.07);  color: #7c3aed;      border-color: rgba(124,58,237,.15); }
.chip-amber  { background: rgba(245,158,11,.07);  color: var(--AMBER); border-color: rgba(245,158,11,.15); }
.quote-block { text-align: center; padding: 36px 24px; }
.quote-block blockquote { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--INK); line-height: 1.3; margin-bottom: 12px; }
.quote-block cite { font-size: .88rem; color: var(--MUTED); font-style: normal; }

/* ================================================================
   FOOTER — Sauber, keine einzelnen Card-Spalten
   ================================================================ */
.footer {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--LINE);
  padding: 48px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--LINE);
  margin-bottom: 20px;
}
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-tagline { font-size: .86rem; color: var(--MUTED); line-height: 1.65; }
.footer-contact a { color: var(--BLUE); font-size: .86rem; font-weight: 600; }
.footer-col h3, .footer-col h4 {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: var(--INK); margin-bottom: 14px;
}
.footer-col ul  { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col a   { font-size: .87rem; color: var(--MUTED); font-weight: 500; transition: color .2s; }
.footer-col a:hover { color: var(--BLUE); }
.footer-legal-links { margin-top: 10px; font-size: .8rem; }
.footer-legal-links a { color: var(--MUTED); }
.footer-legal-links a:hover { color: var(--BLUE); }
/* Teilen-Zeile (portal.js buildTeilen): Beschriftung, drei Wege, Kopierknopf.
   Der Knopf sieht aus wie die Verweise daneben — er ist einer, nur ohne Ziel. */
.footer-teilen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .84rem; }
.footer-teilen-lab { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--INK); }
.footer-teilen a, .footer-teilen-kopie { color: var(--MUTED); font-weight: 500; transition: color .2s; }
.footer-teilen-kopie { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.footer-teilen a, .footer-teilen-kopie { display: inline-flex; align-items: center; gap: 5px; }
.footer-teilen svg { width: 14px; height: 14px; flex: none; }
.footer-teilen a:hover, .footer-teilen-kopie:hover { color: var(--BLUE); }
/* Direktwege auf kontakt.php: E-Mail, WhatsApp, LinkedIn als Chips mit
   Strich-Icon. Icon in Blau, Text in Tinte; beim Ueberfahren beides blau. */
.direktwege-titel { margin: 0 0 8px; }
.direktwege { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.direktweg {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px;
  border: 1px solid var(--LINE); border-radius: 999px; background: #fff;
  color: var(--INK); font-weight: 600; font-size: .88rem; line-height: 1.2;
  transition: border-color .2s, color .2s, box-shadow .2s;
}
.direktweg svg { width: 18px; height: 18px; flex: none; color: var(--BLUE); }
.direktweg:hover { border-color: var(--BLUE); color: var(--BLUE); box-shadow: 0 4px 14px rgba(37,99,235,.12); }

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.reveal-up { animation: fadeUp .5s ease both; }
.reveal-up:nth-child(2) { animation-delay: .08s; }
.reveal-up:nth-child(3) { animation-delay: .14s; }
/* ================================================================
   BEWEGUNG  (v26.252)
   ----------------------------------------------------------------
   portal.js haengt seit jeher einen IntersectionObserver an alle
   .fade-Elemente und setzt .visible, sobald sie in den Blick kommen.
   Im CSS stand dazu aber nur ".fade { opacity: 1 }" und keine Regel
   fuer .fade.visible — die Beobachtung lief also auf jeder Seite und
   bewirkte nichts. Hier ist die fehlende Haelfte.

   Bewusst zurueckhaltend: 14 px Versatz, 480 ms. Auf einer Seite, die
   mit Zahlen argumentiert, soll die Bewegung den Blick fuehren und
   nicht auffallen.
   ================================================================ */
/* Ausfallsicher: .fade ist SICHTBAR, solange nichts anderes gesagt wird.
   Erst public-dynamik.js setzt html.anim — faellt das Skript aus, bleibt
   der Inhalt lesbar statt fuer immer auf opacity:0 zu stehen. Genau dieser
   Fehler macht sonst ganze Seiten unbrauchbar, ohne eine Meldung zu
   hinterlassen. */
.fade { opacity: 1; }
html.anim .fade {
  opacity: 0;
  transform: translateY(14px);
  transform: translateY(14px);
  transition: opacity .48s ease, transform .48s ease;
  will-change: opacity, transform;
}
html.anim .fade.visible { opacity: 1; transform: none; }

/* Kacheln einer Reihe leicht versetzt — wirkt ruhiger als alles auf
   einmal, ohne dass man auf das Nachziehen wartet. */
html.anim .public-grid > .fade:nth-child(2) { transition-delay: .07s; }
html.anim .public-grid > .fade:nth-child(3) { transition-delay: .14s; }
html.anim .public-grid > .fade:nth-child(4) { transition-delay: .21s; }
html.anim .public-grid > .fade:nth-child(5) { transition-delay: .28s; }
html.anim .public-grid > .fade:nth-child(6) { transition-delay: .35s; }

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt
   keine. Das ist keine Kuer: fuer Menschen mit vestibulaeren
   Beschwerden sind Scroll-Effekte koerperlich unangenehm. */
@media (prefers-reduced-motion: reduce) {
  html.anim .fade, html.anim .fade.visible, .reveal-up {
    opacity: 1; transform: none; transition: none; animation: none;
  }
  html.anim .public-grid > .fade { transition-delay: 0s; }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1060px) {
  .public-hero__grid { grid-template-columns: 1fr; }
  .portal-entry-grid, .tools-index-grid, .portfolio-grid { grid-template-columns: 1fr 1fr; }
  .public-grid--3 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 720px) {
  :root { --GAP: 18px; }
  .public-hero { padding: 36px 0 32px; }
  .public-hero h1 { font-size: clamp(2rem, 9vw, 3rem); max-width: none; }
  .public-section { padding: 30px 0; }
  .portal-entry-grid, .tools-index-grid, .portfolio-grid,
  .reality-check, .public-grid--3, .public-grid--2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .menu-btn { display: flex; align-items: center; justify-content: center; }
  .nav-links, .nav-cta { display: none; }
}

/* ================================================================
   TOOL PAGES (free-tools/co2e, leerquote, nps)
   ================================================================ */
.tool-shell { padding: 0 0 60px; }
.portal-tool-stage {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 28px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(15,23,42,.07);
  backdrop-filter: blur(10px);
}
.tool-layout {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.tool-card, .info-card, .result-card, .compare-card,
.fact-card, .marge-card, .decision-card, .nps-panel,
.nps-score-box, .metric-card, .chart-panel {
  background: var(--CARD);
  border: 1px solid var(--LINE);
  border-radius: var(--R);
  box-shadow: var(--SHADOW);
}
.tool-card { padding: 24px; }
.result-card { padding: 18px; }
.info-card { padding: 18px; margin-top: 14px; }
.result-value {
  font-size: 1.5rem; font-weight: 900; letter-spacing: -.03em; color: var(--INK);
}
.result-grid { display: grid; gap: 12px; margin-top: 12px; }
.map-wrap { padding: 16px; }
#co2e-map { height: 360px; border-radius: 16px; margin-bottom: 12px; }
.map-footer { border-top: 1px solid var(--LINE); padding-top: 10px; }
.compare-section { margin-top: 18px; }
.compare-grid, .facts-grid, .marge-grid,
.metric-grid, .overview-grid { display: grid; gap: 14px; grid-template-columns: repeat(2,1fr); }
.field-grid { display: grid; gap: 12px; }
.mini-points { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.public-hero--compact { padding: 36px 0 28px; }

/* Tool responsive */
@media (max-width: 1060px) {
  .tool-layout { grid-template-columns: 1fr; }
  .compare-grid, .facts-grid, .marge-grid, .metric-grid { grid-template-columns: repeat(2,1fr); }
  .mini-points { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .tool-layout, .compare-grid, .facts-grid, .marge-grid,
  .metric-grid, .overview-grid, .mini-points { grid-template-columns: 1fr; }
  #co2e-map { height: 300px; }
  .tool-card { padding: 18px; }
  .portal-tool-stage { padding: 12px; border-radius: 20px; }
}

/* Kompakte Tool-Kopfzeile (statt Hero) – einheitlich für alle Free Tools */
.tool-topbar{padding:22px 0 2px;}
.tool-topbar__row{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;}
.tt-lead{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;min-width:0;}
.tt-lead .public-eyebrow{margin:0;}
.tt-lead h1{font-size:1.55rem;line-height:1.1;margin:0;letter-spacing:-.02em;color:#0f172a;}
.tt-actions{display:flex;gap:10px;flex-wrap:wrap;}
.tool-topbar .btn-sm{padding:8px 15px;font-size:.85rem;}
@media(max-width:640px){.tt-lead h1{font-size:1.28rem;}}
/* === Nav-Modernisierung (moderneres Menü) === */
.nav{background:rgba(255,255,255,.72);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid rgba(15,23,42,.06);}
.nav.scrolled{background:rgba(255,255,255,.97);box-shadow:0 6px 28px rgba(15,23,42,.08);}
.brand-mark{transition:transform .2s ease,box-shadow .2s ease;}
.brand:hover .brand-mark{transform:translateY(-1px) scale(1.04);box-shadow:0 6px 16px rgba(37,99,235,.35);}
.nav-links a,.nav-dropdown-toggle{transition:background .18s ease,color .18s ease,transform .18s ease;}
.nav-links a:hover,.nav-dropdown-toggle:hover,.nav-dropdown.active .nav-dropdown-toggle,.nav-dropdown.open .nav-dropdown-toggle{background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(37,99,235,.05));color:var(--BLUE);}
.nav-caret{transition:transform .22s ease;}
.nav-dropdown:hover .nav-caret,.nav-dropdown:focus-within .nav-caret,.nav-dropdown.open .nav-caret{transform:rotate(180deg);}
.nav-cta{background:linear-gradient(135deg,#3b82f6,#1e40af);color:#fff;border:0;box-shadow:0 2px 10px rgba(37,99,235,.28);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;}
.nav-cta:hover{background:linear-gradient(135deg,#3b82f6,#1e40af);color:#fff;transform:translateY(-1px);box-shadow:0 8px 20px rgba(37,99,235,.4);filter:brightness(1.06);}
.nav-dropdown-menu{top:calc(100% + 10px);min-width:236px;border-radius:18px;border:1px solid rgba(15,23,42,.07);box-shadow:0 18px 48px rgba(15,23,42,.16);display:grid;gap:4px;opacity:0;visibility:hidden;transform:translateY(8px) scale(.98);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;pointer-events:none;}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto;}
.drop-item{transition:background .15s ease,transform .15s ease;}
.drop-item:hover{background:rgba(37,99,235,.07);transform:translateX(2px);}
.menu-btn{transition:transform .18s ease,box-shadow .18s ease;}
.menu-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.12);}

/* ── Mini-Rechner und Begriff des Aufrufs (v26.252) ────────────────── */
.lc-mini__grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; }
.lc-mini__f { display: flex; flex-direction: column; gap: 5px; }
.lc-mini__f span { font-size: .8rem; font-weight: 600; opacity: .75; }
.lc-mini__f input {
  font: inherit; padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--LINE); background: var(--CARD); color: var(--INK); width: 100%;
}
.lc-mini__out { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; }
.lc-mini__zahl { font-size: 2.1rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.lc-mini__note { font-size: .9rem; opacity: .8; }
.lc-mini__geld { font-size: .92rem; font-weight: 600; margin-top: 10px; min-height: 1.2em; }
/* Die Herkunft der CO2-Zahl steht klein unter dem Ergebnis: Sie gehoert
   dazu (keine Zahl ohne Herkunft), darf aber das Ergebnis nicht
   ueberschreien. Kein min-height — die Zeile steht immer da. */
.lc-mini__quelle { font-size: .74rem; color: var(--MUTED); line-height: 1.5; margin: 10px 0 0; }
.lc-begriff__wort { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.lc-begriff__text { margin: 8px 0 14px; }
@media (max-width: 560px) { .lc-mini__grid { grid-template-columns: 1fr; } }

/* ── Logistik-Quiz (v26.253) ───────────────────────────────────────── */
.quiz-leiste { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font-size: .85rem; font-weight: 600; opacity: .8; }
.quiz-balken { flex: 1; height: 5px; border-radius: 3px; background: var(--LINE); overflow: hidden; }
.quiz-balken > span { display: block; height: 100%; width: 0; background: var(--INK); transition: width .35s ease; }
.quiz-kat { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .6; }
.quiz-kopf { margin: 6px 0 4px; font-size: .95rem; opacity: .8; }
.quiz-begriff { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 18px; }
.quiz-fall { font-size: 1.08rem; font-weight: 600; line-height: 1.5; margin: 0 0 18px; }
.quiz-optionen { display: grid; gap: 10px; }
.quiz-opt {
  font: inherit; text-align: left; padding: 13px 16px; border-radius: 10px;
  border: 1px solid var(--LINE); background: var(--CARD); color: var(--INK);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.quiz-opt:hover:not(:disabled) { border-color: var(--INK); }
.quiz-opt:disabled { cursor: default; opacity: .75; }
/* Richtig/falsch nicht allein ueber Farbe: Zeichen davor, damit es auch bei
   Farbsehschwaeche eindeutig bleibt. */
.quiz-opt.is-richtig { border-color: #1a7f37; background: rgba(26,127,55,.10); opacity: 1; font-weight: 600; }
.quiz-opt.is-richtig::before { content: "\2713\00a0\00a0"; font-weight: 700; }
.quiz-opt.is-falsch { border-color: #b42318; background: rgba(180,35,24,.09); opacity: 1; }
.quiz-opt.is-falsch::before { content: "\2715\00a0\00a0"; font-weight: 700; }
.quiz-erklaerung { margin-top: 18px; padding: 14px 16px; border-radius: 10px; background: var(--BG-ALT, rgba(127,127,127,.07)); }
.quiz-erklaerung p { margin: 6px 0 0; }
.quiz-praxis, .quiz-kpi { font-size: .9rem; opacity: .8; }
.quiz-weiter { margin-top: 16px; }
.quiz-ergebnis { text-align: center; padding: 10px 0 22px; }
.quiz-score { font-size: 2.6rem; font-weight: 900; letter-spacing: -.03em; margin: 0; }
.quiz-stufe { font-size: 1.15rem; font-weight: 700; margin: 6px 0 4px; }
.quiz-satz { opacity: .8; margin: 0; }
.quiz-nachlese-kopf { font-size: 1rem; margin: 6px 0 10px; }
.quiz-nachlese { display: grid; gap: 12px; margin-bottom: 22px; }
.quiz-nachlese__e { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--LINE); }
.quiz-nachlese__e p { margin: 4px 0 0; font-size: .93rem; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .quiz-balken > span { transition: none; } }

/* Begriff-Kasten: Aktionen an den unteren Rand (v26.255) ────────────
   Der Kasten steht neben dem Mini-Rechner, der deutlich hoeher ist. Ohne
   diese Regel klebt der Inhalt oben und darunter bleibt eine leere
   Flaeche — genau das war auf dem iPad zu sehen. Jetzt wandern Knopf und
   Link nach unten und beide Kaesten schliessen buendig ab. */
.lc-begriff { display: flex; flex-direction: column; }
.lc-begriff__fuss { margin-top: auto; padding-top: 12px; }
.lc-begriff__fuss p { margin: 12px 0 0; }


/* ── Kontaktformular (kontakt.php) ───────────────────────────────────
   Bewusst ohne eigene Bausteine: Abstaende und Radien kommen aus den
   Variablen oben, damit das Formular nicht wie ein Fremdkoerper wirkt.
   Die Felder sind untereinander gestapelt — bei einem Formular, das
   ausgefuellt werden SOLL, ist eine Spalte schneller als zwei. Nur
   E-Mail und Telefon stehen nebeneinander, weil beide kurz sind. */
.kontakt-form { display: grid; gap: 16px; }
.kontakt-f { display: grid; gap: 6px; }
.kontakt-f > span { font-size: .82rem; font-weight: 700; color: var(--INK); }
.kontakt-f > span em { color: var(--BLUE); font-style: normal; }
.kontakt-f input,
.kontakt-f textarea {
  width: 100%; padding: 11px 13px; border-radius: var(--R-SM);
  border: 1px solid rgba(15,23,42,.14); background: #fff;
  font: inherit; color: var(--INK); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.kontakt-f textarea { min-height: 132px; resize: vertical; }
.kontakt-f input:focus,
.kontakt-f textarea:focus {
  border-color: var(--BLUE); box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.kontakt-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Einwilligung: die Box bleibt oben buendig mit der ersten Textzeile,
   auch wenn der Text auf drei Zeilen umbricht. */
.kontakt-check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.kontakt-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--BLUE); }
.kontakt-check span { font-size: .87rem; color: var(--MUTED); line-height: 1.5; }
.kontakt-check a { color: var(--BLUE); font-weight: 600; }

.kontakt-fehler { display: block; color: #b91c1c; font-size: .85rem; font-weight: 600; }

/* Der Honigtopf. display:none waere der naheliegende Weg und genau der,
   den ein halbwegs gebauter Bot erkennt. Deshalb steht das Feld im
   Layout, nur ausserhalb des Sichtfelds. */
.kontakt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
  .kontakt-zwei { grid-template-columns: 1fr; }
}
.lc-mini__cta { margin-top: 14px; }
.lc-mini__cta[hidden] { display: none; }

/* Schmale Werkzeug-Zeile auf der Startseite.
   Die Rechner brauchen einen sichtbaren Platz, aber keinen eigenen
   Abschnitt — die Startseite war ohnehin schon zu lang. */
.lc-tool-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: 22px 0 0; font-size: .92rem;
}
.lc-tool-zeile > span { color: var(--MUTED); font-weight: 700; }
.lc-tool-zeile a { color: var(--BLUE); font-weight: 600; text-decoration: none; }
.lc-tool-zeile a:hover { text-decoration: underline; }

/* Die Karte neben dem Formular traegt mehrere Absaetze — die
   Grundregel fuer .public-card p setzt keinen Abstand, weil die
   uebrigen Karten mit einem einzigen Absatz auskommen. */
.kontakt-info p + p { margin-top: 12px; }

/* ── Fliesstext auf den Themenseiten ─────────────────────────────────
   Die Themenseiten bestanden aus Karten mit je zwei Saetzen. Das liest
   sich schnell und sagt nichts. Wo ein Zusammenhang erklaert werden
   muss, braucht es Absaetze — und die brauchen eine begrenzte Zeilen-
   laenge, sonst verliert das Auge beim Ruecksprung die Zeile. */
.thema-text { max-width: 68ch; }
.thema-text h3 { font-size: 1.12rem; margin: 30px 0 10px; color: var(--INK); }
.thema-text h3:first-child { margin-top: 0; }
.thema-block:first-child h3 { margin-top: 0; }
.thema-block > *:last-child { margin-bottom: 0; }
/* Ab Tablet zweispaltig: nutzt die volle Sektionsbreite, ohne dass die
   Zeilen zu lang werden. Raster statt Spaltensatz, damit eine h3-Gruppe
   nie zerrissen wird und die Zeilen oben bündig stehen. */
@media (min-width: 980px) {
  .thema-text {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
    align-items: start;
  }
  .thema-block { margin: 0 0 30px; }
  .thema-block h3 { margin-top: 0; }
}
.thema-text p { margin: 0 0 14px; line-height: 1.75; color: #334155; }
.thema-text ul { margin: 0 0 16px; padding-left: 20px; }
.thema-text li { margin-bottom: 8px; line-height: 1.7; color: #334155; }
.thema-text strong { color: var(--INK); }
.thema-text .thema-quelle { font-size: .84rem; color: var(--MUTED); }

/* ── Erklaerfilm ─────────────────────────────────────────────────────
   Optisch angelehnt an den Ablauf auf der Startseite, aber als globale
   Klassen: der Explainer dort trug seine Gestaltung in einem <style>-Block
   in der Seite selbst und war damit nicht wiederverwendbar. */
.film {
  background: rgba(255,255,255,.92); border: 1px solid var(--LINE);
  border-radius: 22px; box-shadow: var(--SHADOW); padding: 26px 26px 22px;
}
.film__head { margin-bottom: 16px; }
.film__eyebrow {
  display: block; font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--BLUE); margin-bottom: 5px;
}
.film__head strong { display: block; font-size: 1.02rem; font-weight: 800; color: var(--INK); line-height: 1.35; }
.film__stage { position: relative; padding-top: 10px; }
.film__flow {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
  grid-auto-flow: column; grid-auto-columns: 1fr; position: relative;
}
.film__flow::before {
  content: ''; position: absolute; left: 8%; right: 8%; top: 22px;
  height: 2px; background: #e6ebf2; z-index: 0;
}
.film__node {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 8px; text-align: center; min-width: 0;
}
.film__dot {
  width: 46px; height: 46px; border-radius: 14px; background: #fff;
  border: 1.5px solid #e2e8f0; display: flex; align-items: center;
  justify-content: center; color: #94a3b8;
  transition: border-color .35s, background .35s, box-shadow .35s, transform .35s, color .35s;
}
/* overflow-wrap/hyphens: lange Komposita (Tonnenkilometer, Emissionsfaktor) im
   Green-Film sprengten sonst ihre schmale Rasterspalte und schoben sich über die
   Nachbarbeschriftung (Anwenderhinweis „Beschriftung überlappt sich"). Die
   kurzen Labels der anderen Filme sind davon unberührt. min-width:0 am Knoten
   erlaubt der Spalte erst, den Text umzubrechen statt breiter zu werden. */
.film__lbl { font-size: .72rem; font-weight: 700; color: var(--MUTED); line-height: 1.15; transition: color .3s; overflow-wrap: anywhere; hyphens: auto; }
.film__node.is-fertig .film__dot { border-color: #6ea400; color: #4d7300; background: rgba(110,164,0,.10); }
.film__node.is-aktiv .film__dot {
  border-color: var(--BLUE); color: var(--BLUE-D); background: rgba(37,99,235,.10);
  box-shadow: 0 0 0 5px rgba(37,99,235,.10); transform: translateY(-2px);
}
.film__node.is-aktiv .film__lbl { color: var(--BLUE-D); }
.film__node.is-warnung .film__dot {
  border-color: #ef4444; color: #dc2626; background: rgba(239,68,68,.10);
  transform: translateY(-2px); animation: film-puls 1.1s ease-in-out infinite;
}
.film__node.is-warnung .film__lbl { color: #dc2626; }
@keyframes film-puls {
  0%,100% { box-shadow: 0 0 0 4px rgba(239,68,68,.12); }
  50%     { box-shadow: 0 0 0 10px rgba(239,68,68,.03); }
}
.film__caption {
  min-height: 46px; margin: 22px 0 0; text-align: center; font-size: 1.02rem;
  color: var(--INK); font-weight: 600; line-height: 1.5;
}
.film__bar { height: 5px; border-radius: 999px; background: #eef2f6; overflow: hidden; margin-top: 12px; }
.film__barfill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--BLUE), #22c55e); }
.film__controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.film__btn {
  appearance: none; border: 1.5px solid var(--BLUE); background: #fff; color: var(--BLUE-D);
  font-weight: 700; font-size: .82rem; padding: 8px 18px; border-radius: 999px;
  cursor: pointer; transition: background .15s, color .15s;
}
.film__btn:hover { background: var(--BLUE); color: #fff; }
.film__hint { font-size: .76rem; color: #94a3b8; }
@media (max-width: 640px) {
  .film { padding: 20px 12px 18px; }
  .film__dot { width: 34px; height: 34px; border-radius: 10px; }
  .film__dot svg { width: 16px; height: 16px; }
  .film__lbl { font-size: .56rem; overflow-wrap: anywhere; }
  .film__flow { gap: 2px; }
  .film__flow::before { top: 16px; }
  .film__caption { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) {
  .film__dot, .film__lbl { transition: none; }
  .film__node.is-warnung .film__dot { animation: none; }
}

/* ── Belegte Zahlen ──────────────────────────────────────────────────
   Zahlen, die beim Hereinscrollen hochlaufen — aber nur solche mit
   oeffentlicher Quelle. Die Quelle steht unter der Zahl und nicht im
   Kleingedruckten: eine Zahl ohne Herkunft ist eine Behauptung. */
.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 6px 0 4px; }
.zahl {
  background: var(--CARD); border: 1px solid var(--LINE); border-radius: var(--R);
  box-shadow: var(--SHADOW); padding: 20px 18px;
}
.zahl__wert { display: block; font-size: 2rem; font-weight: 900; letter-spacing: -.03em; color: var(--BLUE); line-height: 1.05; }
.zahl__text { display: block; margin-top: 8px; font-size: .98rem; color: #334155; line-height: 1.5; }
.zahl__quelle { display: block; margin-top: 10px; font-size: .74rem; color: #94a3b8; }
@media (max-width: 820px) { .zahlen { grid-template-columns: 1fr; } }

/* ── Person mit Foto ─────────────────────────────────────────────────
   Das Foto steht links und traegt die Karte mit; auf schmalen Schirmen
   rutscht es nach oben. width/height stehen im Bild-Tag, damit beim
   Laden nichts springt — ein Foto, das den Text nach unten schiebt,
   nachdem man zu lesen begonnen hat, ist aergerlicher als keines. */
.person { display: grid; grid-template-columns: 240px 1fr; gap: 26px; align-items: start; }
.person__foto {
  width: 100%; height: auto; display: block;
  border-radius: var(--R-SM); border: 1px solid var(--LINE);
  box-shadow: var(--SHADOW);
}
.person__text > p:first-of-type { margin-top: 0; }
@media (max-width: 720px) {
  .person { grid-template-columns: 1fr; gap: 18px; }
  .person__foto { max-width: 260px; }
}

/* Kleines Bild neben dem Namen — Kontaktseite und Impressum. */
.person-klein { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.person-klein img {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  object-position: 50% 22%; border: 2px solid var(--LINE); flex: 0 0 auto;
}
/* ── Arabisch: Schrift und Schreibrichtung ──────────────────────────────────
   Inter enthält keine arabischen Glyphen; der Browser fällt für arabische
   Zeichen automatisch auf die nächste Familie der Kette zurück. Latein —
   Zahlen, Marke, Fachbegriffe — bleibt damit in Inter. */
:root[lang="ar"],
:root[lang="ar"] body,
:root[lang="ar"] input,
:root[lang="ar"] select,
:root[lang="ar"] textarea,
:root[lang="ar"] button {
  font-family: Inter, 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Geeza Pro', system-ui, sans-serif;
}
:root[dir="rtl"] .thema-text ul { padding-left: 0; padding-right: 20px; }
:root[dir="rtl"] .faq__inhalt   { padding: 0 28px 16px 0; }
:root[dir="rtl"] .nav-top-icon,
:root[dir="rtl"] .mobile-link-icon { margin-right: 0; margin-left: 6px; }
:root[dir="rtl"] .mobile-caret  { margin-left: 0; margin-right: 6px; }
:root[dir="rtl"] .lc-tool-zeile,
:root[dir="rtl"] .zahl__text    { text-align: right; }
:root[dir="rtl"] .thema-mehr__btn::after { content: ' ↓'; }
:root[dir="rtl"] .hero-fakt__wert { text-align: right; }

/* ── Ambient-Szenen (zentral) ─────────────────────────────────────────────
   Dezente, bereichspassende Bewegung hinter dem Inhalt. Markup liegt je Seite
   inline oder wird von portal.js in .tool-topbar / straggler .public-hero
   eingebettet. Off-screen (JS setzt .is-still) und bei prefers-reduced-motion
   pausiert. Rein dekorativ. */
.public-hero,.public-section,.tool-topbar,.hero{position:relative}
.public-hero>.container,.public-section>.container,.tool-topbar>.container,.hero>.container{position:relative;z-index:1}
.szene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;-webkit-mask-image:radial-gradient(120% 118% at 50% 30%,#000 55%,transparent);mask-image:radial-gradient(120% 118% at 50% 30%,#000 55%,transparent)}
.szene svg{position:absolute;inset:-2%;width:104%;height:104%}
.szene .s-line{fill:none;stroke:currentColor;stroke-width:1.3;opacity:.2}
.szene .s-flow{stroke-dasharray:5 9;animation:s-fluss 3.4s linear infinite}
@keyframes s-fluss{to{stroke-dashoffset:-14}}
.szene .s-node{opacity:.26;animation:s-atmen 6s ease-in-out infinite}
@keyframes s-atmen{0%,100%{opacity:.14}50%{opacity:.34}}
.szene .s-bar{opacity:.16;transform-box:fill-box;transform-origin:50% 100%;animation:s-wachsen 5s ease-in-out infinite}
@keyframes s-wachsen{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.szene .s-lkw{opacity:.42;filter:drop-shadow(0 1px 2px color-mix(in srgb,var(--INK) 14%,transparent))}
.szene .s-leaf{opacity:.3;transform-box:fill-box;transform-origin:center;animation:s-schweben 9s ease-in-out infinite}
@keyframes s-schweben{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-9px) rotate(6deg)}}
.szene .s-code{position:absolute;top:-18%;left:1.5%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:2;white-space:nowrap;color:color-mix(in srgb,var(--INK) 11%,transparent);animation:s-drift 34s linear infinite}
@keyframes s-drift{from{transform:rotate(-6deg) translateY(0)}to{transform:rotate(-6deg) translateY(-50%)}}
@media(max-width:920px){.szene{opacity:.72}.szene .s-code{display:none}}
@media(prefers-reduced-motion:reduce){.szene .s-flow,.szene .s-node,.szene .s-bar,.szene .s-leaf,.szene .s-code{animation:none}}
.szene.is-still .s-flow,.szene.is-still .s-node,.szene.is-still .s-bar,.szene.is-still .s-leaf,.szene.is-still .s-code{animation-play-state:paused}
/* Formel-Hintergrund (Werkzeugseiten): schräg driftende Formeln + Symbole hinter
   dem Inhalt. Fix im Viewport (ruhiger Parallax-Effekt), sehr dezent. */
.szene-formeln{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.szene-formeln .s-formel{position:absolute;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;
  font-size:clamp(13px,1.5vw,20px);white-space:nowrap;color:color-mix(in srgb,var(--INK) 8%,transparent);
  animation:s-formel-drift 30s ease-in-out infinite}
.szene-formeln .s-symbol{position:absolute;opacity:.09;color:var(--INK);animation:s-symbol-schweben 13s ease-in-out infinite}
.szene-formeln .s-symbol svg{width:clamp(34px,5vw,60px);height:auto;display:block}
@keyframes s-formel-drift{0%{transform:translate3d(-24px,8px,0) rotate(-18deg)}50%{transform:translate3d(22px,-8px,0) rotate(-18deg)}100%{transform:translate3d(-24px,8px,0) rotate(-18deg)}}
@keyframes s-symbol-schweben{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-16px) rotate(8deg)}}
@media(max-width:760px){.szene-formeln .s-formel:nth-child(even),.szene-formeln .s-symbol:nth-child(odd){display:none}.szene-formeln{opacity:.8}}
@media(prefers-reduced-motion:reduce){.szene-formeln .s-formel,.szene-formeln .s-symbol{animation:none}}

/* Wasserzeichen fuer Screenshots: dezent unten Mitte, "powered by Logcons".
   Bewusst bottom-center — die unteren Ecken sind belegt (Lena rechts,
   Sprachwahl links). pointer-events:none, blockiert also nichts. */
body::after{content:"powered by Logcons · www.logcons.at";position:fixed;left:50%;bottom:8px;transform:translateX(-50%);z-index:900;pointer-events:none;font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.02em;color:#475569;background:rgba(255,255,255,.82);border:1px solid rgba(15,23,42,.10);border-radius:999px;padding:4px 12px;box-shadow:0 1px 3px rgba(15,23,42,.08)}
@media print{body::after{position:static;transform:none;display:inline-block;margin:8px auto 0}}

/* Hintergrund-Ton seitenweit BLAU (Anwenderwunsch): die schräge szene-
   formeln-Ebene und der Code-Drift laufen jetzt in Blau statt Tinte. Die
   Green-Logistik-Seiten haben keine szene-formeln, sondern eigene grüne
   Szenen — die bleiben grün. */
.szene-formeln .s-symbol{color:var(--BLUE)}
.szene-formeln .s-formel{color:color-mix(in srgb,var(--BLUE) 13%,transparent)}
.szene .s-code{color:color-mix(in srgb,var(--BLUE) 13%,transparent)}

/* Weiterlesen: EIN Muster fuer die ganze Seite. Der Verweis steht am Ende
   des Blocks, nicht mitten im Satz — ein eingeschobenes <a> zerschneidet
   den deutschen Textknoten, ueber den das Woerterbuch nachschlaegt, und
   hinterlaesst unuebersetzbare Bruchstuecke.
   HIER STATT INLINE AUF index.html: beim Umbau der Startseite sind die
   Bloecke mit ihren Verweisen auf die Unterseiten gewandert — die Regel
   blieb zurueck, und die Verweise standen dort unformatiert. */
.weiterlesen{display:inline-block;margin-top:10px;font:800 .84rem/1.4 Inter,sans-serif;
  color:var(--BLUE);text-decoration:none;}
.weiterlesen::after{content:" \2192";}
.weiterlesen:hover{text-decoration:underline;}

/* HIER STAND EIN ZWEISPALTIGER EINKAUFS-KOPF (Text links, Rechner rechts).
   Er ist wieder weg: der Rechner ist rund doppelt so hoch wie der Text
   daneben, lief aus seiner Spalte in die Kartenreihe darunter und stand
   ueber dem Hintergrundnetz. Der Anwender auf dem ausgelieferten Bild:
   „Bitte wieder raus — passt nicht."
   Die verworfene Rechnung steht hier, damit sie niemand ein zweites Mal
   anstellt: „bei 40 % bleibt das 2x2-Raster, beide Spalten enden ungefaehr
   zusammen" hat die Ergebniszeilen des Rechners nicht mitgezaehlt (Zahl,
   Urteil, Jahresbetrag, zwei Verweise). Gemessen schlaegt gerechnet — und
   messen liess sich das hier nicht, weil die laufende Seite in dieser
   Umgebung nicht erreichbar ist.
   Der Rechner steht jetzt im Portal-Ueberblick neben der Begriffs-Karte,
   wo das Zweier-Raster ohnehin eine Luecke hatte. Der Weissraum neben dem
   Abschnittskopf bleibt vorerst; er ist der normale eines Kopfes und
   stoert weniger als ein Element, das aus seiner Spalte laeuft. */
.lc-mini__hinweis{color:var(--MUTED);font-size:.92rem;margin:0 0 12px;}
/* Formelzeile in einer FAQ-Antwort (bi.html: Deckungsbeitrag).
   Monospace und abgesetzt, weil eine Formel keine Prosa ist: „Erlös minus
   variable Kosten" im Fliesstext liest sich wie eine Behauptung, eine Zeile
   zum Nachrechnen ist eine Rechenvorschrift. Kein <code>, weil es kein Code
   ist — die Auszeichnung soll den Rechenweg zeigen, nicht ein Listing. */
.db-formel{margin:10px 0 14px;padding:10px 14px;border-left:3px solid var(--BLUE);
  background:color-mix(in srgb,var(--BLUE) 5%,transparent);border-radius:0 8px 8px 0;
  font:600 .95rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#0f172a;}

/* ================================================================
   SPRUNGLISTE — „Auf dieser Seite"
   ================================================================
   Die Klasse .public-sprung stand seit dem Zusammenlegen der KI-Seiten im
   Markup und NIRGENDS in diesem Stylesheet. Ausgeliefert wurde eine nackte
   <ol> mit Aufzaehlungspunkten, mitten im Weissraum unter dem Helden. Der
   Anwender auf dem Geraet: „Nicht schoen."

   Der eigentliche Befund ist nicht die fehlende Regel, sondern dass sie
   niemandem auffiel: tests/ki_seiten_test.php prueft, DASS die Sprungliste
   da ist und wohin sie zeigt. Ob es fuer ihre Klassen ueberhaupt eine
   Formatierung gibt, prueft seit dieser Aenderung ein eigener Waechter —
   dieselbe Sorte blinder Fleck wie beim i18n-Waechter, der nur die
   statischen HTML-Zeilen las.

   CHIPS STATT NUMMERIERTER LISTE: Zwei bis drei Ziele sind eine Auswahl,
   keine Reihenfolge. Die Nummern behaupteten einen Ablauf („erst 1, dann
   2"), den es auf diesen Seiten nicht gibt.

   BESCHRIFTUNG IN DERSELBEN ZEILE: Uebereinander gestapelt („AUF DIESER
   SEITE" mit Liste darunter) entstand genau der leere Block, ueber den der
   Anwender gestolpert ist. Als eine Zeile ist es ein Element und keine
   halbleere Flaeche. */
.public-sprungband { padding: 20px 0 4px; }
.public-sprungband .container {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
}
.public-sprungband .public-eyebrow { margin: 0; flex: 0 0 auto; }
.public-sprung {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.public-sprung li { margin: 0; }
.public-sprung a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px 10px 15px; border-radius: 999px;
  background: var(--CARD); border: 1px solid var(--LINE);
  color: var(--INK); font: 700 .92rem/1.3 Inter, sans-serif; text-decoration: none;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease;
}
/* Der Pfeil sagt, was der Knopf tut: nach unten springen, nicht die Seite
   wechseln. Ohne ihn sehen die Chips aus wie Verweise auf andere Seiten —
   und dann drueckt sie niemand, weil er nicht weg will. */
.public-sprung a::before { content: "\2193"; font-weight: 800; color: var(--BLUE); opacity: .7; }
.public-sprung a:hover {
  border-color: var(--BLUE); color: var(--BLUE-D);
  box-shadow: 0 8px 20px rgba(37,99,235,.14); transform: translateY(-1px);
}
.public-sprung a:hover::before { opacity: 1; }
.public-sprung a:focus-visible { outline: 2px solid var(--BLUE); outline-offset: 3px; }
@media (max-width: 640px) {
  .public-sprungband .container { align-items: flex-start; }
  .public-sprung { flex-direction: column; width: 100%; }
  .public-sprung a { width: 100%; }
}

/* ================================================================
   HERO-FIGUR — die bewegte Skizze neben dem Helden
   ================================================================
   Die drei KI-Seiten hatten einen einspaltigen Helden: Text links, rechts
   nichts. Auf dem Tablet war damit die Haelfte des ersten Bildschirms leer.
   Die Hintergrundszene aus scripts/gen_szene.php fuellt sie nicht — die
   liegt hinter ALLEM und ist mit Absicht kaum sichtbar.

   WARUM EINE SKIZZE UND KEIN BILD: Ein Foto von einem Lkw sagt ueber ein
   Verfahren nichts. Die Skizze zeigt die Aussage der Seite in Bewegung —
   den Schatten, der mitlaeuft; die Schleife, die an einer Grenze haelt;
   die Spur, die mitschreibt.

   OHNE TEXT IM SVG: Beschriftungen im SVG stehen ausserhalb des
   Woerterbuchs. Sie blieben deutsch, wenn die Seite uebersetzt wird, und
   der i18n-Waechter wuerde sie nicht einmal melden — derselbe blinde Fleck
   wie bei den Glossarbegriffen in logistik-abc.html. Die Erklaerung steht
   deshalb als normaler Absatz unter der Skizze, wo das Woerterbuch sie
   findet. */
.public-hero-figur {
  position: relative; background: var(--CARD); border: 1px solid var(--LINE);
  border-radius: var(--R); box-shadow: var(--SHADOW);
  padding: 20px 20px 16px; overflow: hidden; min-width: 0;
}
.public-hero-figur svg { display: block; width: 100%; height: auto; color: var(--BLUE); }
.public-hero-figur__text {
  margin: 14px 2px 0; font-size: .86rem; line-height: 1.55; color: var(--MUTED);
}
@media (max-width: 900px) { .public-hero-figur { margin-top: 26px; } }

.public-hero-figur .hf-line {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.public-hero-figur .hf-raster { fill: none; stroke: currentColor; stroke-width: 1; opacity: .12; }
.public-hero-figur .hf-band { fill: currentColor; opacity: .11; }
.public-hero-figur .hf-dot { fill: currentColor; }
.public-hero-figur .hf-schwach { opacity: .30; }

/* Der Schattenlauf: dieselbe Bahn, gestrichelt, und die Striche wandern.
   Gestrichelt, weil er nichts ausloest — eine durchgezogene zweite Linie
   sieht aus wie ein zweiter Betrieb. */
.public-hero-figur .hf-schatten { stroke-dasharray: 7 7; animation: hf-wandern 2.6s linear infinite; }
@keyframes hf-wandern { to { stroke-dashoffset: -14; } }

/* Die Ist-Linie wird gezeichnet und bleibt dann stehen: eine Linie, die
   staendig verschwindet, liest sich als Stoerung, nicht als Verlauf. */
.public-hero-figur .hf-zeichnen { stroke-dasharray: 480; animation: hf-strich 9s ease-in-out infinite; }
@keyframes hf-strich { 0% { stroke-dashoffset: 480; } 45%, 100% { stroke-dashoffset: 0; } }

.public-hero-figur .hf-band--atmen { animation: hf-atmen 7s ease-in-out infinite; }
@keyframes hf-atmen { 0%, 100% { opacity: .07; } 50% { opacity: .16; } }

.public-hero-figur .hf-knoten { animation: hf-puls 4.5s ease-in-out infinite; }
@keyframes hf-puls { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Die Grenze zur Vergabe blinkt NICHT. Eine Linie, die aufmerksam macht,
   verliert ihre Bedeutung als Grenze — sie steht einfach da. */
.public-hero-figur .hf-grenze { stroke-dasharray: 4 6; opacity: .45; }

/* Der Anlauf endet vor der Grenze und faellt zurueck. Genau das ist die
   Aussage der Seite: der Agent kommt bis hierher und nicht weiter. */
.public-hero-figur .hf-anlauf { stroke-dasharray: 90; animation: hf-anstossen 5s ease-in-out infinite; }
@keyframes hf-anstossen { 0%, 8% { stroke-dashoffset: 90; } 42%, 62% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 90; } }

/* Protokollzeilen laufen nacheinander ein und bleiben stehen, bis der
   Zyklus von vorn beginnt — eine Spur, die sich selbst loescht, waere das
   Gegenteil der Aussage. */
.public-hero-figur .hf-zeile { opacity: 0; animation: hf-eintrag 9s ease-in-out infinite; }
@keyframes hf-eintrag {
  0%, 6% { opacity: 0; transform: translateX(-10px); }
  16%, 88% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .public-hero-figur * { animation: none !important; }
  .public-hero-figur .hf-zeichnen, .public-hero-figur .hf-anlauf { stroke-dasharray: none; }
  .public-hero-figur .hf-zeile { opacity: 1; }
}

/* ── PFEILVERWEISE, 27.08.2026 ─────────────────────────────────────────────
   „Und blau wie einen Link." Die Klasse gab es im Markup schon (auf
   green-logistics.html), aber ohne Regel — sie faerbte nichts. Weiter oben
   steht `a { color: inherit; }`, damit Verweise in Navigation und Karten
   nicht bunt werden; genau deshalb sahen die Weiter-Verweise wie Fliesstext
   aus und niemand erkannte sie als Weg.
   Die Farbe kommt aus dem System (--BLUE) und nicht aus einem eigenen Wert:
   Ein zweites Blau daneben faellt beim ersten Themenwechsel auseinander.
   Der Pfeil rueckt beim Zeigen nach — die Bewegung sagt „weiter", ohne dass
   ein weiteres Wort noetig waere. */
.link-arrow { color: var(--BLUE); font-weight: 600; }
.link-arrow:hover { color: var(--BLUE-D); text-decoration: underline; }
.link-arrow:focus-visible { outline: 2px solid var(--BLUE); outline-offset: 3px; border-radius: 4px; }

/* ── DAS AUSWERTUNGSBILD: KACHELN, DIE ZWEI SEITEN BRAUCHEN ──────────────
   Die Kopfkennzahlen stehen zweimal: als Einstieg auf der Startseite und
   vollstaendig auf dashboard.html. Zwei Kopien derselben Regeln waeren die
   zweite Wahrheit, und die auseinandergelaufene ist still die falsche —
   dieselbe Begruendung wie bei LENA_FUELLWOERTER in portal.js.
   Die Diagramm-Regeln (.db-tafel, .db-bild) bleiben inline auf der
   Dashboard-Seite: Die braucht nur sie, und sie hier zu fuehren hiesse,
   jede der 45 Seiten mit ihnen auszuliefern. */
.db-marke{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:6px 13px;
  border-radius:999px;background:rgba(180,83,9,.10);color:#b45309;
  font:700 .72rem/1.3 Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase}
.db-kopf{display:grid;gap:14px;grid-template-columns:1fr;margin:0 0 26px}
@media(min-width:700px){.db-kopf{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.db-kopf{grid-template-columns:repeat(4,1fr)}}
.db-kachel{background:var(--CARD,#fff);border:1px solid var(--LINE,rgba(15,23,42,.10));
  border-radius:16px;padding:16px 17px;box-shadow:var(--SHADOW,0 4px 20px rgba(15,23,42,.07))}
.db-kachel-lab{display:block;font:700 .69rem/1.35 Inter,sans-serif;letter-spacing:.07em;
  text-transform:uppercase;color:var(--MUTED,#5b6a80)}
/* NUR DIE KOPFZAHL IST BLAU, 29.08.2026 — und das ist eine Korrektur an mir
   selbst. Auf „bitte kpis blau" hatte ich zuerst JEDE Kennzahl im Portal
   umgestellt: Ergebniskarten der zwoelf Werkzeuge, Rechner-Abzuege,
   .result-value. Der Anwender hat das eingegrenzt: „Jedoch nur die
   Kopfzahlen." Gemeint sind die vier Kacheln, die eine Seite anfuehren —
   nicht jede Zahl, die ein Rechner ausgibt.
   DAS IST DIE BESSERE REGEL. Blau als Auszeichnung wirkt, solange es die
   Ausnahme ist; auf jeder Ergebniszahl waere es Grundfarbe und faerbte
   nichts mehr hervor. Die Verwandtschaft mit den DHL-Zahlen bleibt genau
   dort, wo sie etwas heisst: bei der Zahl, die oben steht.

   ES IST --BLUE UND NICHT --BLUE-D. Zuerst stand hier der dunklere Ton,
   und damit trugen die Kopfzahlen ein anderes Blau als Logo, Knoepfe,
   Menue und Augenbraue derselben Seite. Auf dem Geraet sieht das nach
   zwei Farben aus, nicht nach einer Abstufung — der Anwender hat es am
   29.08.2026 auf einem Bildschirmfoto markiert. --BLUE-D bleibt, wo er
   hingehoert: als dunklerer Nachbar bei Hover, Aktivzustand und Verlauf,
   also immer NEBEN dem hellen Ton und nie STATT seiner. */
.db-kachel-wert{display:block;margin:8px 0 2px;font:800 2rem/1.05 Inter,sans-serif;
  color:var(--BLUE,#2563eb);font-variant-numeric:tabular-nums}
.db-kachel-sub{display:block;font-size:.79rem;color:var(--MUTED,#5b6a80)}
/* Zustand: Farbe UND Wort UND Zeichen. Farbe allein waere fuer rund jeden
   zwoelften Mann nicht lesbar — und im Ausdruck fuer niemanden. */
.db-stand{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font:700 .74rem/1.3 Inter,sans-serif}
.db-stand--gut{color:#047857}
.db-stand--achtung{color:#b45309}
.db-stand--ernst{color:#b91c1c}
@media(max-width:640px){.db-kachel-wert{font-size:1.7rem}}