/*
  Faerbung ausschliesslich ueber Farbrollen. Footer nutzt bewusst data-thema="brand-dunkel"
  (derselbe Mechanismus wie beim Hero, siehe hero.css/marke-todayislife.css) -- satteres,
  dunkles Petrol statt fast-weiss, damit der Footer als bewusster dunkler Gegenpol zur
  hellen Seite mehr Tiefe ins Gesamtbild bringt (Lotti/Guido, 2026-08-18). Das ist hier
  keine neue Erfindung, sondern 1:1 der bestehende data-thema-Mechanismus, nur auf eine
  zweite Komponente und einen zweiten (dunklen) Markenwert angewendet.
*/@layer komponenten{.footer{container-type:inline-size;position:relative;overflow:hidden;background:radial-gradient(120% 120% at 0% 0%, color-mix(in oklch, var(--farbe-glanz-a) 18%, transparent), transparent 56%),radial-gradient(96% 100% at 100% 100%, color-mix(in oklch, var(--color-secondary-500) 20%, transparent), transparent 58%),radial-gradient(82% 78% at 72% 18%, color-mix(in oklch, var(--farbe-glanz-b) 16%, transparent), transparent 60%),linear-gradient(160deg, var(--farbe-grund), var(--farbe-flaeche));color:var(--farbe-text);box-shadow:var(--shadow-lg)}/* Wasserzeichen-Textur (Lotti-Audit Punkt 8) -- sehr gross, rechts/unten,
     kaum sichtbar (opacity 0.05). Reiner Textur-Layer hinter den vier
     Intelligenz-Zeilen, kein zweites visuelles Signal (siehe SVG-Kommentar in
     footer.mustache). pointer-events:none, damit sie nie Klicks/Hover der
     echten Footer-Links abfaengt. */.footer__wasserzeichen{position:absolute;z-index:0;right:-8rem;bottom:-8rem;width:34rem;height:34rem;color:white;opacity:0.05;pointer-events:none}.footer__raster,.footer__leiste{position:relative;z-index:1}.footer__raster{max-width:var(--container-max);margin-inline:auto;padding:var(--space-12) var(--container-padding) var(--space-8);display:grid;gap:var(--space-8);grid-template-columns:1fr}.footer__marke{display:grid;gap:var(--space-3)}.footer__logo{display:inline-flex;align-items:center;gap:var(--space-2)}.footer__logo-text{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--farbe-text)}/* Wie nav.css: Rastergrafik statt currentColor-SVG, daher Bild-Tausch statt Farbrolle.
     ABSICHTLICH an das LOKALE data-thema des Footers gebunden, nicht an das globale
     prefers-color-scheme/[data-theme] aus nav.css: der Footer traegt seinen Hell/Dunkel-
     Zustand komplett selbst (aktuell fest "brand-dunkel", siehe footer.mustache), voellig
     unabhaengig vom globalen Seiten-Theme. Ein Umschalter an :root[data-theme] wuerde hier
     falsch reagieren, sobald die lokale und globale Tonalitaet auseinanderlaufen (Bug
     gefunden 2026-08-18, als der Footer noch fest hell war und der globale Toggle das
     Logo im Dark Mode unsichtbar machte). Mit dem lokalen Selektor bleibt der Footer auch
     dann korrekt, wenn ein Projekt ihn spaeter mal auf einen hellen data-thema umstellt. */.footer__logo-bild{height:2.5rem;width:auto;display:block}.footer__logo-bild--dunkel{display:none}.footer[data-thema="brand-dunkel"] .footer__logo-bild--hell{display:none}.footer[data-thema="brand-dunkel"] .footer__logo-bild--dunkel{display:block}.footer__tagline{max-width:32ch;color:var(--farbe-text-gedaempft);line-height:var(--leading-relaxed)}.footer__since{font-size:var(--text-sm);color:var(--farbe-text-dezent)}.footer__spalte-titel{font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--farbe-text);margin-block-end:var(--space-4)}/* Aufgabe 2 Touch-Ziele (Guido, 2026-08-27): gemessen 23px Link-Hoehe bei 9,5px
     Listenabstand (~32,5px Raster) -- in der dichten Sitemap ein reales
     Fehltipp-Risiko. Fix ueber Padding auf dem Link statt groesserer Schrift
     (Layout soll nicht auseinanderfallen): --space-3 (12px) oben+unten haelt
     effektiv >=44px Trefferflaeche bei unveraenderter Schriftgroesse. Listen-Gap
     dafuer auf 0, das Padding uebernimmt den optischen Abstand zwischen den
     Eintraegen. */.footer__liste{display:grid;gap:0;list-style:none}.footer__link{display:inline-flex;align-items:center;gap:var(--space-2);padding-block:var(--space-3);font-size:var(--text-sm);color:var(--farbe-text-gedaempft)}.footer__link:hover{color:var(--farbe-akzent)}.footer__link[data-akzent]:not([data-akzent=""])::before{content:'';display:inline-block;width:0.4rem;height:0.4rem;border-radius:var(--radius-full);background:var(--farbe-akzent);flex-shrink:0}.footer__adresse{font-size:var(--text-sm);color:var(--farbe-text-gedaempft);/* Nachtrag Guido 2026-08-19: --leading-relaxed (1.65) ist fuer
       mehrzeiligen Fliesstext gedacht -- jede Adresszeile hier ist aber ein
       eigenes <li>, das nie umbricht. Die grosse Zeilenhoehe blaehte nur den
       Abstand INNERHALB jeder einzelnen Zeile auf (Leading ueber/unter dem
       Text), nicht deren Lesbarkeit. --leading-snug (1.3) -- selbe Rolle wie
       bei den Tabellenzeilen in rich-text.css -- reicht fuer kurze
       Einzeiler. Nur .footer__adresse betroffen (Kontakt-Adresszeilen),
       .footer__link (Telefon/E-Mail/Website, alle anderen Footer-Spalten)
       nutzt ohnehin schon --leading-normal (1.5) vom body-Default und bleibt
       unangetastet -- .footer__liste-Gap (Abstand ZWISCHEN den <li>) ist
       ebenfalls unveraendert, wird von allen Footer-Spalten geteilt. */line-height:var(--leading-snug)}.footer__leiste{max-width:var(--container-max);margin-inline:auto;padding:var(--space-6) var(--container-padding) var(--space-8);border-block-start:1px solid color-mix(in oklch, var(--farbe-text) 18%, transparent);display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:space-between}.footer__copyright{font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--farbe-text-dezent)}.footer__rechtlich{display:flex;gap:var(--space-6);list-style:none}.footer__rechtlich:empty{display:none}.footer__rechtlich .footer__link{color:var(--farbe-text-dezent);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-widest);text-transform:uppercase}.footer__rechtlich .footer__link:hover{color:var(--farbe-akzent)}/*
    Spaltenzahl folgt der Footer-eigenen Breite (container-type oben), nicht der
    Fensterbreite -- gleicher Mechanismus wie hero/page-guide/nav.

    WICHTIG: fuenf Grid-Kinder insgesamt (footer__marke + 3 x .footer__spalte aus
    "spalten" + 1 x .footer__spalte--kontakt aus "kontakt", siehe footer.mustache),
    nicht vier. Ein 4-Spalten-Raster (wie zuvor) laesst das fuenfte Kind (Kontakt)
    in eine neue Zeile umbrechen, deren uebrige drei Zellen leer bleiben -- genau der
    Bug, den Guido als "riesiger leerer Bereich rechts" bei 1440px gemeldet hat
    (verifiziert per Playwright-Bounding-Box, 2026-08-18: Kontakt landete in Zeile 2
    unter footer__marke, Spalten 2-4 dieser Zeile blieben leer). Deshalb hier fuenf
    Tracks, nicht vier -- und footer__marke bekommt bei der mittleren Breite
    (2-Spalten-Zwischenschritt) explizit eine eigene volle Zeile, damit Logo+Tagline
    dort nicht in eine schmale Haelfte gequetscht werden.
  */@container (min-width: 40rem){.footer__raster{grid-template-columns:repeat(2, 1fr)}.footer__marke{grid-column:1/-1}}@container (min-width: 64rem){.footer__raster{grid-template-columns:minmax(14rem, 1.2fr) repeat(4, minmax(0, 1fr))}.footer__marke{grid-column:auto}}}