/* Stylesheet der Startseite (index.php), am 2026-07-19 aus deren früherem
   inline <style>-Block ausgelagert (siehe _intern/STANDARD-Grundlagen.md, Abschnitt
   "CSS-Architektur"). Eigenständiges Variablen-/Komponentensystem, unabhängig
   von css/shared.css (Tools) - siehe _intern/STANDARD-Grundlagen.md/_intern/PROJEKT-Handoff.md für den
   Hintergrund dieser bewussten Trennung. */

  /* Design-Tokens (Farben/Radien/Schatten/Typo) liegen zentral in
     css/tokens.css - hier bewusst KEINE :root-Tokens mehr (2026-07-20
     zusammengeführt, siehe _intern/STANDARD-Grundlagen.md / gravid.de/design-token). */

  * { box-sizing: border-box; }

  /* ---------- Squircle global (CI-Standard) ----------
     Alle Rechteck-Rundungen werden als Squircle (Superellipse) dargestellt,
     nicht als einfacher Kreis-Radius - via CSS `corner-shape` zusätzlich zum
     vorhandenen `border-radius`. Progressive Enhancement: Browser ohne
     corner-shape-Unterstützung (derzeit noch Safari/Firefox) zeigen weiterhin
     die normale Rundung - es bricht nichts, und sie werden automatisch zu
     Squircles, sobald die Browser nachziehen (bzw. sobald W3C-weit
     standardisiert). corner-shape wird NICHT vererbt → Universalselektor
     nötig. Siehe _intern/STANDARD-Grundlagen.md "Squircle (global)". Kreise/Pillen sind
     ausgenommen (unten); die kleinen Icon-Buttons nutzen zusätzlich echte
     clip-path-Squircles (browserunabhängig). */
  *, *::before, *::after { corner-shape: squircle; }
  /* Kreise (border-radius:50%) und Pillen (border-radius:100px) bleiben rund -
     ein Squircle würde sie zu abgerundeten Quadraten machen. */
  .concept-badge,
  .status-dot, .status-dot::after,
  .tool-row-action { corner-shape: round; }

  /* overflow-x:clip statt hidden (seit 2026-07-31, siehe css/shared.css für
     die volle Herleitung): overflow-x:hidden zwingt den Browser dazu,
     overflow-y automatisch auf "auto" zu berechnen (CSS-Overflow-Spec),
     macht body/html damit zum ungewollten Scroll-Container für
     position:sticky-Nachfahren - auf der Startseite selbst unkritisch
     (.nav-bar ist position:fixed), aber derselbe Trick wird 1:1 in
     css/shared.css verwendet, wo .tool-header sehr wohl position:sticky
     ist und das genau diesen Bug ausgelöst hat. "clip" ist von der
     Sonderregel ausgenommen und clippt horizontal identisch - hier
     vorsorglich mitkorrigiert, damit beide Kopien nicht auseinanderlaufen. */
  html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 500;
    line-height: 1.55;
    overflow-x: clip;
  }
  img, svg, canvas { display: block; max-width: 100%; }
  a { color: inherit; }
  ::selection { background: var(--accent-solid); color: #fff; }

  .wrap {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    /* Eigene Custom Property statt des Werts direkt in padding, damit die
       Nav-Sprungmarkierung (.wrap.highlight-pulse::before weiter unten) beim
       Ausrechnen ihres Seitenabstands exakt denselben Wert verwendet - eine
       einzige Quelle statt zweier Stellen, die auseinanderlaufen könnten
       (siehe _intern/STANDARD-Grundlagen.md, Abschnitt "CSS-Architektur"). */
    --wrap-pad-x: clamp(20px, 5vw, 56px);
    padding: 0 var(--wrap-pad-x);
  }

  .eyebrow {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
  }
  .eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--accent);
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.005em;
    text-wrap: balance;
    margin: 0;
    color: var(--ink);
  }

  /* ---------- meta badge (marks this as a concept, not the live site) ---------- */
  .concept-badge {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 50;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--paper-raised);
    color: var(--ink-soft);
    border: 1px solid var(--line);
    padding: 7px 12px;
    border-radius: 100px;
    box-shadow: var(--shadow);
  }

  /* ---------- nav ---------- */
  .nav-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    border-bottom: 1px solid transparent;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
  }
  .nav-bar.scrolled {
    background: color-mix(in srgb, var(--paper) 78%, transparent);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom-color: var(--line);
    box-shadow: var(--shadow);
  }
  /* Doppelten backdrop-filter beim offenen Mobilmenü verhindern (Safari/iOS-
     Bug) - Regel liegt seit 2026-07-31 zentral in css/mobile-menu.css
     (".nav-bar:has(.nav-links.open)", siehe dort), da dasselbe Problem auch
     im KundenPORTAL auftritt und beide Seiten identisch behandelt werden
     sollen. */
  /* .nav trägt im Markup zusätzlich die Klasse .wrap (Logo/Menü sollen am
     gleichen 1180px-Content-Rand wie der übrige Seiteninhalt ausgerichtet
     bleiben - bewusst NICHT auf volle Seitenbreite, siehe _intern/STANDARD-Grundlagen.md).
     .wrap bekam inzwischen position:relative für den Nav-Sprungmarkierungs-
     Ring (siehe weiter unten). Das würde .nav ungewollt zum neuen
     Containing Block für alle position:absolute-Nachfahren machen
     (.theme-toggle, mobiles .nav-links-Dropdown) statt .nav-bar (siehe
     Kommentar bei .theme-toggle unten, der genau das immer vermeiden
     wollte) - position:static hier stellt das wieder her, ohne sonst etwas
     an .nav zu ändern: .theme-toggle bleibt dadurch bei seinem eigenen
     right:30px relativ zu .nav-bar (echte Seitenkante, auf einer Linie mit
     .scroll-to-top), während .nav selbst (Logo, Leistungen/
     Tools/Kontakt) innerhalb der 1180px-Breite bleibt wie der Rest der
     Seite. */
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: static;
    padding: 20px clamp(20px, 5vw, 56px);
  }
  .wordmark img { height: 66px; width: auto; display: block; transition: height .35s cubic-bezier(.4,0,.2,1); }
  .nav-bar.scrolled .wordmark img { height: 34px; }
  /* Bewusst OHNE eigenes position/transform: ein transform auf .nav-right
     würde (wie position es täte) einen Containing Block für ALLE
     position:fixed/absolute-Nachfahren aufspannen - u.a. für .nav-links,
     dessen mobiles Dropdown sich dann auf die schmale .nav-right-Box statt
     auf die volle Viewport-Breite bezieht (führte genau zu dem Bug, bei dem
     sich das Menü rechtslastig/schmal aufklappte). Die rechte 30px-Ausrichtung
     sitzt stattdessen direkt auf .theme-toggle/.nav-toggle selbst. */
  /* padding-right reserviert Platz für den absolut positionierten
     .theme-toggle (right:30px, 38px breit), der sonst auf schmaleren
     Desktop-/Tablet-Breiten (z.B. iPad quer, ~1024px) mit "Kontakt"
     kollidiert - .nav-links selbst weiß ja nichts von der Position des
     herausgelösten Buttons und würde sonst bis ganz an den Rand reichen. */
  /* padding-right war zuvor pauschal 72px - auf Wunsch entfernt (2026-07-19),
     damit "Kontakt" auf breiten Desktop-Viewports bis an den eigentlichen
     Rand von .nav-right heranrückt statt eine Lücke zum (dort ohnehin weit
     entfernt an der echten Seitenkante schwebenden) Theme-Toggle
     offenzulassen. Unterhalb von 1200px (.wrap erreicht sein max-width von
     1180px nicht mehr voll, --wrap-pad-x schrumpft gleichzeitig Richtung
     20px) rückt der Content-Rand dem Theme-Toggle aber wieder zu nahe -
     genau die eingangs vorhergesagte Kollision, jetzt live bestätigt.
     Deshalb dort wieder reserviert, siehe Media Query weiter unten. */
  .nav-right { display: flex; align-items: center; gap: 28px; padding-right: 0; }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.86rem;
    font-weight: 600;
  }
  /* Nav-Links als eigenständige Buttons - optisch wie der .tool-back-Button
     der Tool-Seiten (8px-Rundung über --squircle-sm + corner-shape-Squircle,
     Rahmen + dezente Fläche), aber ein UNABHÄNGIGER Style NUR für die
     Startseite und OHNE Pfeil-Icon. Gilt im Normal-/Desktop-Modus; im
     Mobilmenü (<=860px, weiter unten) wieder als schlichte Listeneinträge. */
  .nav-btn {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 0.9rem;
    border: 1px solid var(--line);
    background: var(--paper-raised);
    border-radius: var(--squircle-sm);
    color: var(--accent);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    /* Beschriftung bricht nie um (seit 2026-08-01, Nutzerwunsch): "Über uns"
       ist der einzige zweiteilige Eintrag und zerriss bei knapper Breite in
       zwei Zeilen - der Knopf wurde dadurch höher als seine Nachbarn und die
       Navigationsreihe geriet aus dem Lot. Gleiche Regel wie im
       KundenPORTAL (siehe css/portal.css, .portal-header .tool-back). */
    white-space: nowrap;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
  }
  .nav-btn:hover { border-color: var(--accent); background: var(--accent-tint); }
  .nav-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

  /* ---------- Kopfzeilen-Schalter (Hell/Dunkel, DE/EN, KundenPORTAL) ----------
     Vollständige Definition seit 2026-08-13 zentral in
     css/bedienelemente.css - dieselbe Datei laden auch die Werkzeug- und
     Portalseiten, damit die drei Knöpfe überall identisch aussehen. Vorher
     lag hier eine Kopie, die mit css/shared.css synchron gehalten werden
     musste (siehe dort die Begründung; gleiches Vorgehen wie bei Fußzeile,
     Tooltip und Mobilmenü).
     Startseiten-spezifisch bleibt hier nur die eine Ausnahme darunter. */

  /* 20px statt der 18px aus css/bedienelemente.css: Der Theme-Schalter ist
     auf der Startseite der erste Knopf, den man überhaupt sieht - er sitzt
     allein in der obersten Reihe neben Sprach- und Portalknopf und darf
     dort etwas präsenter wirken. flex:none, damit ihn die Flexbox des
     Knopfes bei keiner Breite zusammenstaucht. */
  .theme-toggle svg { width: 20px; height: 20px; flex: none; transition: filter .2s ease; }


  /* ---------- Tooltips ----------
     Vollständige Definition seit 2026-08-02 zentral in css/tooltip.css
     (Aufbau, Ausrichtungs-Logik, Farbvarianten) - vorher lag hier eine
     Kopie, die mit css/shared.css synchron gehalten werden musste. Siehe
     _intern/STANDARD-Portal.md, "Geteilte CI-Standard-Bauteile". Startseiten-
     spezifisch bleibt hier nur der Farbton des angemeldeten Zustands
     (.user-toggle--online, weiter oben). */

  /* ---------- mobile menu toggle ----------
     Vollständige Definition seit 2026-07-31 zentral in
     css/mobile-menu.css (".nav-toggle", siehe dort) - Bauteil wird
     identisch auch im KundenPORTAL verwendet, siehe _intern/STANDARD-Grundlagen.md
     "Mobilmenü". */

  /* ---------- hero ---------- */
  .hero {
    position: relative;
    padding-top: clamp(132px, 14vw, 180px);
    padding-bottom: clamp(56px, 9vw, 110px);
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
    align-items: end;
  }
  .hero-canvas-wrap {
    position: absolute;
    inset: -10% -6% auto auto;
    width: 62%;
    height: 130%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.8;
  }
  :root[data-theme="dark"] .hero-canvas-wrap { opacity: 0.95; }
  .hero-content { position: relative; z-index: 1; }
  .hero h1 {
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    line-height: 1.1;
    margin-top: 22px;
  }
  .hero h1 em {
    font-style: normal;
    /* --accent-vivid statt --accent: großformatiger Hervorhebungstext
       braucht mehr farbliche Distanz zu --ink als Fließtext - siehe
       WCAG-Kommentar bei den CSS-Variablen weiter oben. */
    color: var(--accent-vivid);
  }
  .hero p.lede {
    font-size: 1.1rem;
    color: var(--ink-soft);
    max-width: 46ch;
    margin-top: 22px;
  }
  .hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 34px;
    flex-wrap: wrap;
  }
  /* Rundung bewusst wie .tool-back (Tools-Seiten): einfaches border-radius,
     kein Squircle-clip-path - proportional zur eigenen Höhe skaliert
     (.tool-back: 10px bei 38px Höhe = 26%, hier ~46px Höhe -> 12px). */
  .btn {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.94rem;
    padding: 12px 22px;
    border-radius: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background .2s ease, color .2s ease;
  }
  .btn-primary {
    /* --accent-solid statt --accent: weißer Text braucht eine andere
       Flächenhelligkeit als Fließtext - siehe WCAG-Kommentar bei den
       CSS-Variablen weiter oben. Schatten bewusst dezent (entschärft) -
       reine Betonung durch die Fläche selbst, nicht durch einen schweren
       Schlagschatten. */
    background: var(--accent-solid);
    color: #fff;
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent-solid) 45%, transparent);
  }
  .btn-primary:hover { transform: translateY(-2px); background: var(--accent-solid-hover); }
  .btn-ghost {
    color: var(--ink);
    border: 1px solid var(--line);
  }
  .btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

  /* ---------- Standard-Hover-Glow für echte Buttons (2026-07-19,
     nachjustiert) ----------
     Dieselbe filigrane Rahmen+Glow-Optik wie die Nav-Sprungmarkierung
     (.wrap.highlight-pulse::before weiter unten), jetzt als CI-Standard für
     jede optisch definierte Schaltfläche (Button) - nicht für reine
     Textlinks. Gilt vorerst nur für die Startseite (css/index.css), noch
     nicht auf die Tool-Seiten übertragen. Grundstil des Buttons bleibt
     unverändert (weder .btn noch .btn-primary/.btn-ghost werden im
     unberührten Zustand angefasst) - der Ring kommt ausschließlich on
     :hover hinzu, zusätzlich zur bereits bestehenden Hover-Reaktion
     (Anheben/Farbwechsel).

     Wichtiger Unterschied zur Section-Markierung: dort sitzt der Rahmen
     bewusst MIT Abstand vom Inhalt (--highlight-gap, 10-18px), weil er eine
     randlose Fläche umreißt, die selbst keine sichtbare Kante hat. Ein
     Button dagegen HAT bereits eine eigene, klar sichtbare Kante (Füllung
     oder Rand) - der Ring soll dort keinen zweiten, abgesetzten Rahmen mit
     Lücke dazwischen bilden, sondern die Kontur exakt auf der bestehenden
     Buttonkante nachzeichnen: inset:0 (kein Abstand) und derselbe
     border-radius wie .btn selbst (12px, nicht konzentrisch nach außen
     vergrößert). Der Button behält dadurch exakt seine bisherige Größe -
     nur die Kante selbst beginnt bei Hover zu glühen. */
  .btn { position: relative; }
  .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Haarlinie statt echtem border (2026-07-19, weitere Nachjustierung):
       ein echter 1px-border wirkte durch Anti-Aliasing/die unmittelbar
       angrenzende Weichzeichnung des Glows optisch dicker als 1px. Ein
       zero-blur box-shadow (0 0 0 1px) rendert als scharfe, geometrische
       Kontur ohne diesen Bloom-Effekt und liest sich dadurch deutlich
       filigraner, auch direkt neben dem separaten, weicheren Glow-Schatten.
       WCAG-Hinweis: die Linie ist eine rein dekorative Zusatzschicht (weder
       alleiniger Hover- noch Fokus-Indikator - das übernehmen weiterhin
       Anheben/Farbwechsel bzw. der Browser-Fokusring), unterliegt daher
       nicht dem 3:1-Pflichtwert aus SC 1.4.11 für notwendige UI-Komponenten.
       --accent selbst hat als Linie/Text auf --paper/--paper-raised bereits
       hohe Kontraste (siehe Farb-Tabelle oben); auf der gefüllten Fläche von
       .btn-primary (--accent-solid) liegt der reine Linienkontrast dagegen
       niedrig, da beide Blautöne nah beieinander liegen - dort trägt der
       Glow (gut sichtbar auf hellem wie dunklem Untergrund) die
       Erkennbarkeit, nicht die Linie allein. */
    border-radius: 12px;
    box-shadow:
      0 0 0 1px var(--accent),
      0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .btn:hover::after { opacity: 1; }

  .hero-aside {
    position: relative;
    z-index: 1;
    justify-self: end;
    text-align: right;
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--ink-faint);
    line-height: 1.9;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
  .hero-aside strong { color: var(--ink-soft); font-weight: 600; }

  /* ---------- section scaffolding ---------- */
  section.block { padding: var(--section-pad-y) 0; }
  /* Sprungziele der Nav-Links: Halt so, dass der Markierungs-Glow
     (.wrap.highlight-pulse::before, ragt um --highlight-gap nach oben über
     .wrap hinaus) mit --nav-clear Abstand vom oberen Rand steht und damit
     sichtbar unter der fixierten Nav-Leiste - statt an ihr zu kleben.
     Rechnung zentral als --anchor-offset in css/tokens.css. Das Sprung-JS
     (index.php) liest genau diesen scroll-margin-top per getComputedStyle
     aus - eine Quelle, kein zweiter Wert im Skript. */
  section[id] { scroll-margin-top: var(--anchor-offset); }
  .block-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 24px;
    margin-bottom: clamp(36px, 5vw, 56px);
  }
  /* Markierung beim Springen per Nav-Link (siehe JS weiter unten): ein
     aufleuchtender Rahmen/Glow um .wrap (den content-breiten Container einer
     Section), nicht um die randlose <section> selbst - ein früherer Versuch
     genau darauf saß am Bildschirmrand und war praktisch unsichtbar. .wrap
     hat schon die richtige Breite/Zentrierung für alle drei Zielsections
     (#leistungen/#tools/#kontakt), braucht also keinen eigenen neuen
     Wrapper.

     Einheitlicher Abstand zum Inhalt auf allen vier Seiten (2026-07-19,
     Nachjustierung): .wrap hat oben/unten KEIN eigenes Padding (der Inhalt
     - Eyebrow oben, letztes Element unten - berührt .wrap direkt), aber
     links/rechts das responsive --wrap-pad-x (20-56px). Ein einzelner
     box-shadow-Spread wäre auf allen vier Seiten zwangsläufig gleich groß
     und säße dadurch oben/unten dicht am Text, links/rechts weit davon
     entfernt draußen im Leerraum. Stattdessen ein ::before mit
     seitenspezifischem inset: oben/unten -Gap (nach außen, da der Inhalt
     dort direkt anliegt), links/rechts (Gap - --wrap-pad-x) (nach innen,
     weil dort schon das Padding zwischen Inhalt und .wrap-Kante sitzt) -
     der Rahmen landet dadurch exakt "Gap" vom sichtbaren Inhalt entfernt,
     unabhängig von der aktuellen Viewport-Breite. Dünne 1.5px-Linie statt
     dicker box-shadow-Unschärfe (auf Wunsch "filigraner"/"technischer") -
     der dezente Glow bleibt als zweite, sehr kleine Schicht erhalten, damit
     der Effekt weiterhin gut erkennbar aufleuchtet. */
  .wrap.highlight-pulse::before {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--highlight-gap)) calc(var(--wrap-pad-x) - var(--highlight-gap));
    border: 1.5px solid var(--accent);
    border-radius: 14px;
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent);
    opacity: 0;
    pointer-events: none;
    animation: wrap-highlight-glow 1.1s ease-in-out;
  }
  @keyframes wrap-highlight-glow {
    0% { opacity: 0; }
    18% { opacity: 1; }
    65% { opacity: 1; }
    100% { opacity: 0; }
  }
  /* line-height ohne eigenen Wert erbt sonst body's 1.55 - bei den per
     <br> erzwungenen zweizeiligen Rubrik-Überschriften ("Vier Disziplinen,
     ein Anspruch." etc.) wirkte der Zeilenabstand dadurch spürbar zu
     locker. 1.08 rückt die beiden Zeilen kompakt zusammen, ohne dass sich
     Ober-/Unterlängen berühren - üblicher Wert für große, fette
     Überschriften (vgl. .hero h1 mit 1.1 weiter oben). */
  .block-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.08; margin-top: 14px; }
  /* ---- Der Einleitungssatz als leises Zitat (seit 2026-08-08) ----------
     Nutzerhinweis: "Die Intro-Texte stehen dort ein wenig verloren, eine
     dezente Zitat-Optik sähe gut aus."

     Er stand als gewöhnlicher Absatz neben einer großen Überschrift - ohne
     eigene Kante, ohne Bezug, in der rechten Spalte allein. Ein Zitat gibt
     ihm beides: eine Kante links, die ihn an die Überschrift bindet, und
     eine Haltung - er ist ja tatsächlich ein Kommentar zur Überschrift,
     kein Fließtext.

     DEZENT heißt hier konkret:

       - Die Kante ist 2px schmal und trägt --line, nicht die Akzentfarbe.
         Ein farbiger Balken zöge mehr Aufmerksamkeit auf den Nebensatz als
         auf die Überschrift daneben.
       - Kein Anführungszeichen-Ornament. Das große " ist die
         Zitat-Optik, die man erwartet - und genau deshalb laut. Hier steht
         kein fremder Satz, sondern unser eigener.
       - Kursiv, aber nur der Text: Die Schrägstellung genügt als Signal.
         Zusätzlich kleiner oder blasser zu werden, machte aus dezent
         unlesbar.

     Der linke Außenabstand von 14px wandert in die Polsterung - sonst
     stünde die Kante 14px vom Text entfernt im Nichts. Die Zeile behält
     damit exakt ihre bisherige Position. */
  .block-head p {
    color: var(--ink-soft);
    max-width: 46ch;
    margin: 14px 0 0;
    padding-left: 14px;
    border-left: 2px solid var(--line);
    font-size: 1rem;
    font-style: italic;
  }

  [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  }
  [data-reveal].is-visible { opacity: 1; transform: none; }

  /* ---------- services ---------- */
  .services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    margin: 0 -26px;
  }
  .service {
    padding: 34px 26px;
    border-right: 1px solid var(--line);
  }
  .service:last-child { border-right: none; }
  .service .num {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--ink-faint);
  }
  /* Seit 2026-07-26 Font Awesome statt eigener Strich-SVGs (Einheitlichkeit
     mit .tool-row-icon/.kontakt-card-icon/.future-banner-icon - überall FA).
     display:block statt des sonstigen inline <i>, damit sich Icon/Zahl/
     Überschrift genauso stapeln wie zuvor mit der SVG. */
  .service .mark {
    display: block;
    font-size: 2rem;
    margin: 18px 0 22px;
    color: var(--accent);
  }
  .service h3 { font-size: 1.1rem; font-weight: 700; }
  .service p { color: var(--ink-soft); font-size: 0.92rem; margin: 10px 0 0; }

  /* ---------- "Ausblick"-Kachel (KI, Grün-Akzent) ----------
     Bewusste, seltene Ausnahme vom sonst rein blau/orangen Farbschema, siehe
     _intern/STANDARD-Grundlagen.md "KI-Akzent (Grün)" - genau EINE Fläche auf der ganzen
     Seite. Optisch an .tool-row/.kontakt-card angelehnt (Rahmen,
     --shadow-tight, 24px-Radius), aber mit --accent-ai statt --accent, damit
     sie sich bewusst "nach unten hin abhebt" von den vier Disziplinen
     darüber, ohne komplett aus dem Stil zu fallen. Bewusst OHNE eigene
     Canvas-Animation (siehe _intern/STANDARD-Website.md "Ambient Hero Canvas") - der
     KI-Bezug läuft über den grünen Sparkle-Anteil im Hero-Canvas oben. */
  .future-banner {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    margin-top: 22px;
    padding: 26px 28px;
    background: var(--accent-ai-tint);
    border: 1px solid color-mix(in srgb, var(--accent-ai) 30%, transparent);
    border-radius: 24px;
    box-shadow: var(--shadow-tight);
  }
  .future-banner-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-raised);
    color: var(--accent-ai);
    font-size: 1.15rem;
    clip-path: url(#squircle-sm);
    -webkit-clip-path: url(#squircle-sm);
  }
  .future-banner-eyebrow { color: var(--accent-ai-text); }
  .future-banner-eyebrow::before { background: var(--accent-ai-text); }
  .future-banner-body h3 { font-size: 1.2rem; font-weight: 700; margin: 6px 0 10px; }
  .future-banner-body p { color: var(--ink-soft); font-size: 0.94rem; margin: 0; }
  .future-banner-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px !important;
    font-size: 0.82rem !important;
    color: var(--accent-ai-text) !important;
    max-width: none !important;
  }
  .future-banner-note i { font-size: 0.8rem; }

  /* ---------- über uns ---------- */
  .about-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: stretch;
  }
  .about-text p {
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 1.1rem;
    max-width: 58ch;
  }
  .about-text p:last-child { margin-bottom: 0; }
  .about-side {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding-left: clamp(0px, 2vw, 24px);
    border-left: 1px solid var(--line);
  }
  .about-facts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 0.86rem;
    color: var(--ink-faint);
  }
  .about-facts strong { color: var(--ink); font-weight: 700; margin-right: 6px; }
  .brand-breakdown-lead { color: var(--ink-soft); font-size: 0.86rem; margin: 0 0 12px; }
  .brand-breakdown-grid { display: flex; gap: 18px; }
  .bw-col { display: flex; flex-direction: column; gap: 6px; }
  .bw-part {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    letter-spacing: -0.01em;
    line-height: 1;
  }
  /* Die drei Markenteile GRA-VI-D. Gemessen am 09.08.2026 auf --paper, für
     große Schrift gilt 3:1:

       GRA  --accent        4,13 hell / 7,40 dunkel
       VI   --accent-warm   2,57 hell / 8,38 dunkel   <- durchgefallen
       D    --accent-ai     3,19 hell / 8,19 dunkel

     Das Orange war damit nicht nur unter der Schwelle, sondern auch das
     sichtbar schwächste der drei - der Wortteil in der Mitte trat zurück,
     obwohl alle drei gleich wichtig sind. --accent-warm-deep bringt ihn auf
     4,01 und damit ZWISCHEN die beiden anderen; die Reihe wirkt dadurch
     gleichmäßiger, nicht anders.

     Im Dunkelmodus ändert sich nichts: Dort ist --accent-warm-deep derselbe
     Ton wie zuvor (#DE8735, 8,38:1). */
  .bw-part--gra { color: var(--accent); }
  .bw-part--vi { color: var(--accent-warm-deep); }
  .bw-part--d { color: var(--accent-ai); }
  .bw-label {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
  }
  .brand-breakdown-note {
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.55;
    margin: 16px 0 0;
    max-width: 46ch;
  }

  /* ---------- tools (schlanke horizontale Liste, siehe _intern/STANDARD-Grundlagen.md) ----------
     Bewusst als Zeilen-Liste statt als Kachel-Raster: jede Zeile ist gleich
     hoch und liest sich wie ein Verzeichnis ("was ist es, läuft es online,
     wie öffne ich es") statt wie eine Fläche, die sich zufällig in 2 Spalten
     aufteilt. Funktioniert dadurch identisch auf Mobilgerät, Tablet und
     Desktop - keine nth-child-Rahmenlogik, keine gerade Anzahl nötig. */
  .tools-section { background: var(--paper-raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  /* Jede Zeile eine eigene Fläche mit Abstand dazwischen (2026-07-19,
     statt vorher einer einzigen umrandeten Box mit Trennstrichen zwischen
     den Zeilen) - .tools-list liefert dafür nur noch den Zeilenabstand,
     Rahmen/Radius/Hintergrund wandern auf .tool-row selbst. */
  .tools-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .tool-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 24px;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    /* Eckenrundung eine Stufe größer (14px -> 24px = lg-Stufe der
       Squircle-Skala) - gemeinsam mit .kontakt-card angehoben, siehe
       _intern/STANDARD-Grundlagen.md "Squircle". Squircle-Form kommt global über corner-shape. */
    border-radius: 24px;
    box-shadow: var(--shadow-tight);
    text-decoration: none;
    color: inherit;
    transition: background .2s ease, border-color .2s ease;
  }
  .tool-row:hover { background: var(--accent-tint); }
  .tool-row:hover .tool-row-action { transform: translateX(3px); color: var(--accent); border-color: var(--accent); }
  .tool-row--all { background: var(--accent-warm-tint); }
  .tool-row--all:hover { background: color-mix(in srgb, var(--accent-warm-tint) 78%, var(--accent-warm) 22%); }
  .tool-row--all:hover .tool-row-action { color: var(--accent-warm-deep); border-color: var(--accent-warm-deep); }

  .tool-row-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    clip-path: url(#squircle-sm);
    -webkit-clip-path: url(#squircle-sm);
    background: var(--accent-tint);
    color: var(--accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
  }
  .tool-row-icon svg { width: 19px; height: 19px; }
  .tool-row--all .tool-row-icon { background: var(--paper-raised); color: var(--accent-warm-deep); }

  .tool-row-body { flex: 1; min-width: 0; }
  .tool-row-body h3 { font-size: 1rem; font-weight: 700; margin: 0; }
  .tool-row-body p { color: var(--ink-soft); font-size: 0.86rem; margin: 3px 0 0; }

  .tool-row-meta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 0.76rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  /* Stand der Datei in der Zeilen-Meta (seit 2026-08-21). Eine Stufe leiser
     als der Rest der Meta-Zeile: Die Angabe soll auffindbar sein, aber nicht
     mit dem PDF-Kürzel daneben um Aufmerksamkeit ringen.

     Bewusst OHNE eigene Mobil-Regel: .tool-row-meta ist bis 860 px ohnehin
     ganz ausgeblendet (siehe dort weiter unten), der Stand also mit. Ein
     eigenes display:none bei 560 px hatte ich zuerst ergänzt - es hätte nie
     greifen können, weil der Elternteil da längst weg ist. Tote Regeln
     lesen sich wie Absicht und kosten beim nächsten Suchen Zeit. */
  .tool-stand { color: var(--ink-faint); }

  .tool-status { display: inline-flex; align-items: center; gap: 6px; }
  .status-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
  .status-dot::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: var(--success);
    opacity: 0.4;
    animation: status-pulse 2.2s ease-out infinite;
  }
  @keyframes status-pulse {
    0% { transform: scale(0.5); opacity: 0.45; }
    70% { transform: scale(1.9); opacity: 0; }
    100% { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .status-dot::after { animation: none; opacity: 0; }
  }
  .tool-badge {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid #fff;
    background: var(--accent-tint);
    color: var(--accent-deep);
    white-space: nowrap;
  }
  .tool-badge--pdf { background: var(--accent-warm-tint); color: var(--accent-warm-text); }

  .tool-row-action {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    transition: transform .2s ease, color .2s ease, border-color .2s ease;
  }
  .tool-row-action svg { width: 14px; height: 14px; }

  /* ---------- footer ---------- */
  footer.site-footer {
    background: var(--footer-bg);
    color: var(--footer-ink);
    padding: clamp(18px, 2.5vw, 24px) 0 14px;
  }
  .footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 40px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--footer-line);
  }
  .footer-brand { display: flex; align-items: center; gap: 16px; }
  .footer-brand .wordmark { flex: none; }
  .footer-brand .wordmark img { height: 26px; display: block; }
  .footer-brand p {
    color: var(--footer-ink-soft);
    max-width: 44ch;
    margin: 0;
    padding-left: 16px;
    border-left: 1px solid var(--footer-line);
    font-size: 0.86rem;
    line-height: 1.5;
  }
  .footer-services h4 {
    font-family: var(--font-body);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--footer-ink-soft);
    margin: 0 0 10px;
    font-weight: 700;
  }
  .footer-services-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
  .footer-services-links a { color: var(--footer-ink); text-decoration: none; font-size: 0.92rem; transition: color .2s ease; }
  .footer-services-links a:hover { color: var(--accent-warm); }
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding-top: 12px;
    font-size: 0.84rem;
    color: var(--footer-ink-soft);
    font-family: var(--font-body);
  }
  .footer-bottom a { color: inherit; text-decoration: none; transition: color .2s ease; }
  .footer-bottom a:hover { color: var(--accent-warm); }

  /* Zwischenbreiten (Tablet quer bis recht breiter Desktop, > 860px = noch
     ausgeschriebenes Textmenü statt Burger): "Kontakt" rückt den an der
     echten Seitenkante fest verankerten Icon-Buttons sonst zu nahe/
     überlappt sie sogar. Reserviert hier gezielt Platz, ohne das Mobilmenü
     (Icon-Buttons wandern dort ohnehin in die Dropdown-Liste) zu berühren.
     **Seit 2026-07-30 als CI-weiter Standard per calc() statt fixem Wert**
     (siehe _intern/STANDARD-Grundlagen.md "Rechte Ausrichtung Icon-Button-Header" - gilt
     identisch für .nav-right hier, .tool-header-right auf Tool-Seiten UND
     Portal-Seiten): ein fixer Wert ignorierte, dass .wrap/.container
     selbst schon responsives Padding (clamp(20px,5vw,56px)) mitbringen, das
     JEDE fixe Reservierung oben drauf addiert - dadurch hing "Kontakt" auf
     breiten Bildschirmen unnötig weit vor der Content-Kante (per
     Nutzer-Feedback gemeldet, nachdem die vorherige Fassung genau dieses
     Problem durch das Entfernen der oberen Breiten-Grenze erst erzeugt
     hatte). Jetzt: 136px reichen am unteren Rand (861px, live verifiziert),
     darüber schrumpft die Reservierung um genau den Betrag, um den der
     natürliche Abstand zwischen .wrap-Kante und echter Seitenkante wächst
     ((100vw-1180px)/2) - erreicht 0, sobald dieser Abstand allein reicht.
     Kommt künftig ein VIERTER Icon-Button dazu, muss der 136px-Basiswert neu
     ermittelt werden (siehe _intern/STANDARD-Grundlagen.md). */
  @media (min-width: 861px) {
    .nav-right { padding-right: max(0px, 136px - max(0px, 100vw - 1180px) / 2); }
  }

  @media (max-width: 860px) {
    /* Rubrik-Kopf einspaltig stapeln: auf dem Desktop steht der Absatz per
       align-items:end rechts unten neben der (zweizeiligen) Überschrift; auf
       Mobil wurde er in der schmalen zweiten Spalte dadurch an die Unterkante
       gedrückt und ließ eine unschöne Lücke über sich. Jetzt Überschrift oben,
       Absatz direkt darunter (oben anschlagend), der den folgenden Inhalt
       nach unten schiebt. */
    .block-head { grid-template-columns: 1fr; align-items: start; gap: 12px; }
    /* Einspaltig steht das Zitat unter der Überschrift statt daneben - die
       Kante bleibt, der Außenabstand war schon vorher aufgehoben und sitzt
       jetzt ohnehin in der Polsterung. */
    .block-head p { margin-left: 0; }
    .hero { grid-template-columns: 1fr; }
    .hero-aside { justify-self: start; text-align: left; }
    .hero-canvas-wrap { width: 90%; opacity: .45; }
    .services { grid-template-columns: repeat(2, 1fr); margin: 0 -20px; }
    .service { border-bottom: 1px solid var(--line); padding: 34px 20px; }
    .service:nth-child(2n) { border-right: none; }
    .future-banner { flex-direction: column; padding: 22px; gap: 14px; }
    .about-grid { grid-template-columns: 1fr; gap: 28px; }
    .about-side {
      padding-left: 0;
      border-left: none;
      padding-top: 22px;
      border-top: 1px solid var(--line);
    }
    .tool-row { padding: 14px 16px; gap: 12px; }
    .tool-row-icon { width: 36px; height: 36px; font-size: 0.95rem; }
    .tool-row-icon svg { width: 16px; height: 16px; }
    /* .tool-row-meta (Status/Badge) steht jetzt auf Desktop rechtsbündig
       neben dem Pfeil - auf schmalen Bildschirmen reicht der Platz dafür
       neben Icon+Titel+Beschreibung+Pfeil nicht mehr, ohne dass Zeilen
       umbrechen oder die Reihe gedrängt wirkt. Blendet die (rein
       dekorative Zusatzinfo) auf Mobil daher aus, Titel/Beschreibung/Pfeil
       bleiben unverändert erreichbar. */
    .tool-row-meta { display: none; }
    .tool-row-action { width: 30px; height: 30px; }
    .tool-row-action svg { width: 12px; height: 12px; }
    /* .nav-links/.nav-btn/.nav-toggle/.theme-toggle/.lang-toggle/
       .user-toggle-Zeilen im aufgeklappten Mobilmenü: vollständig zentral
       in css/mobile-menu.css seit 2026-07-31 (siehe dort, _intern/STANDARD-Grundlagen.md
       "Mobilmenü") - identisches Bauteil auch im KundenPORTAL. */
    .eyebrow { font-size: 0.62rem; letter-spacing: 0.09em; gap: 7px; }
    .eyebrow::before { width: 16px; }
    /* Logo etwas kleiner, damit auf schmalen Bildschirmen mehr Luft zum
       (jetzt größeren) Burger-Button bleibt. */
    .wordmark img { height: 48px; }
    .nav-bar.scrolled .wordmark img { height: 26px; }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .hero-canvas-wrap { display: none; }
  }

  /* ---------- logo-home + page-content blur (for privacy modal) ---------- */
  .logo-home { display: flex; align-items: center; text-decoration: none; cursor: pointer; }
  #pageContent { transition: filter .3s ease; }
  #pageContent.blur { filter: blur(6px); }

  /* ---------- ported: accessibility hidden defs (squircle clip technique) ---------- */
  .visually-hidden-defs {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ---------- scroll-to-top ----------
     Vollständige Definition seit 2026-08-13 zentral in
     css/bedienelemente.css (zusammen mit den drei Kopfzeilen-Schaltern,
     mit denen der Knopf Ring-Trick, Squircle und Hover-Verhalten teilt).
     Startseiten-spezifisch bleibt nur die Einblend-Bewegung des Pfeils:
     Er fährt beim Erscheinen von unten in den Knopf hinein, leicht
     verzögert zum Knopf selbst. Auf Werkzeug- und Portalseiten taucht der
     Knopf ohne diese Zusatzbewegung auf - dort ist er reines Werkzeug,
     hier Teil der Startseiten-Choreografie. */
  .scroll-to-top i {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s ease .1s, transform .3s ease .1s;
  }
  .scroll-to-top.visible i { opacity: 1; transform: translateY(0); }


  /* ---------- Rechtliches-Modal (Impressum/Datenschutz) ----------
     Der KOMPLETTE Modal-Stil (Overlay, Karte, Kopf, Reiter, Panel,
     Ladeanzeige) liegt zentral in css/legal.css - dieselbe Datei auf
     Start- und Tool-Seiten, damit das Modal überall exakt gleich aussieht.
     Hier bewusst NICHTS dazu (siehe _intern/STANDARD-Grundlagen.md, "Rechtliche Hinweise").
     ---------- */

  /* ---------- kontakt ---------- */
  /* Reine Kontakt-Sektion (Impressum lebt jetzt ausschließlich im Modal,
     2026-07-19): drei klickbare Karten (E-Mail, Anrufen, Standort/Google
     Maps) im selben Karten-Stil wie die Tools-Liste - Haarlinie + zarter
     Schatten, Icon links, Pfeil rechts. */
  .kontakt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; border-top: 1px solid var(--line); padding-top: 34px; }
  .kontakt-card {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 22px;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    /* Eckenrundung eine Stufe größer (14px -> 24px = lg-Stufe), synchron mit
       .tool-row (Praktische Helfer) - siehe _intern/STANDARD-Grundlagen.md "Squircle". */
    border-radius: 24px;
    box-shadow: var(--shadow-tight);
    text-decoration: none; color: inherit;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
  }
  .kontakt-card:hover { background: var(--accent-tint); border-color: var(--accent); transform: translateY(-2px); }
  .kontakt-card-icon {
    flex-shrink: 0; width: 46px; height: 46px;
    clip-path: url(#squircle-sm); -webkit-clip-path: url(#squircle-sm);
    background: var(--accent-tint); color: var(--accent-deep);
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  }
  .kontakt-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .kontakt-card-body strong { font-size: 1rem; color: var(--ink); font-weight: 700; }
  .kontakt-card-body span { color: var(--ink-soft); font-size: 0.86rem; }
  .kontakt-card-action { flex-shrink: 0; color: var(--ink-soft); transition: transform .2s ease, color .2s ease; }
  .kontakt-card:hover .kontakt-card-action { color: var(--accent); transform: translateX(3px); }
  @media (max-width: 860px) {
    .kontakt-cards { grid-template-columns: 1fr; gap: 14px; padding-top: 26px; }
  }

  /* ---------- footer: carbon rating line ---------- */
  .footer-carbon a { color: var(--footer-ink-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color .2s ease; }
  .footer-carbon a:hover { color: var(--accent-warm); }
  /* FEST und bewusst NICHT über --badge-carbon: Die Fußzeile der Startseite
     ist in beiden Themen dunkel (.site-footer, #16273A), ein für helle
     Flächen abgedunkelter Wert wäre hier falsch. Gemessen 6,4:1. */
  .footer-carbon i { color: #4CAF50; }
  .footer-a11y a { color: var(--footer-ink-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; transition: color .2s ease; }
  .footer-a11y a:hover { color: var(--accent-warm); }
  .footer-a11y i { color: #5CA8E6; }
  /* Datenschutz-Badge, gleiche Optik wie Carbon/WCAG. Lock-Icon in einem
     ruhigen Grün-Teal (#5CC0A6) - eigener Farbton neben Carbon-Grün und
     WCAG-Blau, signalisiert "sicher/privat". Fest, damit der Badge auf
     Start- und Tool-Seiten identisch aussieht. */
  .footer-privacy a { color: var(--footer-ink-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color .2s ease; cursor: pointer; }
  .footer-privacy a:hover { color: var(--accent-warm); }
  .footer-privacy i { color: #5CC0A6; }   /* fest, siehe .footer-carbon i oben */

  @media (max-width: 860px) {
    .footer-grid { flex-direction: column; align-items: flex-start; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
  }

  /* ---- Smartphone: gestapelt und mittig (seit 2026-08-06) -------------
     Gleiche Vorgabe und gleiche Umsetzung wie bei .footer-zeile in
     css/shared.css (Tool-Seiten und Portal): erst GRAVID, darunter die
     rechtlichen Links, darunter die drei Abzeichen - alles zentriert.

     Zurück auf row statt der Spalte von oben: In der Spalte bekäme jedes
     Abzeichen eine eigene Zeile, die Fußzeile wäre fünf Zeilen hoch. Als
     umbrechende Reihe teilen sich die Abzeichen den Platz und brauchen
     nur zwei. Die Reihenfolge macht order, nicht das Markup - dort steht
     weiterhin Copyright, Abzeichen, Recht (Breitenansicht). */
  @media (max-width: 700px) {
    .footer-bottom {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 6px 14px;
    }
    .footer-bottom > .footer-copy  { order: 1; flex-basis: 100%; }
    .footer-bottom > .footer-links { order: 2; flex-basis: 100%; }
    .footer-bottom > .footer-carbon,
    .footer-bottom > .footer-a11y,
    .footer-bottom > .footer-privacy { order: 3; }
  }