/*
  Faerbung ausschliesslich ueber Farbrollen. Hamburger-Menue laeuft ueber natives
  <details>/<summary> (a11y-Audit Finding 3, Lena 2026-08-19 -- ersetzt den vorigen
  Checkbox-Hack, der ein ungueltiges aria-expanded auf einem <label> trug). <summary>
  bekommt vom Browser automatisch role="button" + korrekt reflektiertes aria-expanded
  fuer den offen/geschlossen-Zustand des umschliessenden <details> -- funktioniert
  daher, genau wie zuvor, vollstaendig ohne JS. Dropdown-Panels sind ebenfalls natives
  <details>/<summary>, ebenso ohne JS bedienbar (Klick/Enter/Space). nav.js ergaenzt nur
  Komfort (Aussen-Klick, Escape, "nur ein Panel offen", mobiles Menue nach Linkklick
  schliessen, Label-Text "Menü öffnen"/"Menü schließen"), keine Kernfunktion.

  Breite folgt dem Legacy-Breakpoint lg: (1024px) fuer Desktop- vs. Mobil-Navigation,
  hier als Container Query auf .nav selbst -- die Nav soll unabhaengig von der
  tatsaechlichen Seitenbreite (z.B. in einem schmaleren Layout eingebettet) korrekt
  kollabieren.
*/@layer komponenten{.nav{/* display:block ist hier PFLICHT, nicht Kosmetik: <nav-bar> ist ein Custom
       Element und daher ohne eigene Regel display:inline (Browser-Default fuer
       unbekannte Elemente) -- container-type wirkt auf Inline-Boxen nicht
       zuverlaessig, wodurch die @container-Regeln unten sonst nie greifen
       (gefunden beim Verifizieren, 2026-08-18: Hamburger blieb bei jeder Breite
       unsichtbar, weil die Container Query nie matchte). */display:block;container-type:inline-size;position:sticky;inset-block-start:0;z-index:var(--z-sticky);border-block-end:1px solid var(--farbe-linie);transition:box-shadow var(--transition-base)}/* Glaseffekt (Hintergrund + Blur) sitzt auf einem eigenen ::before statt direkt
     auf .nav (Fix Guido/Achilles, 2026-08-27 -- Mobile-Nav-Bug Rueckmeldung #2).
     Ursache war: backdrop-filter erzeugt nach Spec einen neuen containing block
     fuer ALLE position:fixed-Nachfahren -- traf hier .nav__menu (das mobile
     Vollbild-Overlay, siehe @container-Regel unten), das sich dadurch statt am
     Viewport an der ~61px hohen .nav-Box ausrichtete und auf ~48px Hoehe
     kollabierte (verifiziert per Playwright: Overlay-Hoehe sprang auf 603px,
     sobald backdrop-filter deaktiviert wurde). .nav__menu ist ein Kind von
     .nav__leiste, nicht von .nav::before -- backdrop-filter auf dem Pseudo-Element
     erzeugt daher nur fuer DESSEN (nicht vorhandene) Nachfahren einen containing
     block, das Overlay bleibt unberuehrt. .nav traegt bereits z-index (=
     Stacking-Context), daher haelt z-index:-1 das Pseudo-Element zuverlaessig
     hinter der Leisten-Vordergrund, aber weiterhin ueber dem darunter
     wegscrollenden Seiteninhalt. */.nav::before{content:'';position:absolute;inset:0;z-index:-1;background:color-mix(in oklch, var(--farbe-grund) 90%, white 10%);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);transition:background var(--transition-base)}/*
    Zustandswechsel-Signal beim Scrollen: dezente Flaeche + shadow-sm statt der
    reinen 1px-Trennlinie, sobald die Seite unter der Nav weggescrollt ist (Lotti,
    2026-08-18). Wird von nav.js gesetzt (IntersectionObserver/scroll -- reines CSS
    kann "Seite ist gescrollt" ohne Scroll-Driven-Animations-API nicht zuverlaessig
    browserübergreifend erkennen); ohne JS bleibt die Nav einfach im Ruhezustand,
    keine Kernfunktion haengt daran. */.nav--gescrollt{box-shadow:var(--shadow-sm)}.nav--gescrollt::before{background:color-mix(in oklch, var(--farbe-grund) 78%, var(--farbe-flaeche) 22%)}.nav__leiste{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-padding);/* Vertikal knapper (space-3 -> space-2, Guido 2026-08-19) als Ausgleich
       fuers groessere Logo direkt darunter -- haelt die Leiste insgesamt aehnlich
       hoch statt durch beides zusammen klobiger zu wirken. */padding-block:var(--space-2);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);position:relative}.nav__logo{flex-shrink:0;display:inline-flex;align-items:center;gap:var(--space-2);position:relative}/* Logo-Bild: Rastergrafik mit Farbverlauf (Schriftzug+Bluete), kein currentColor-SVG
     -- Hell/Dunkel-Umschaltung daher per Bild-Tausch statt Farbrolle, ueber denselben
     Aktivierungsmechanismus wie die Text-Farbrollen in system.css (prefers-color-scheme
     + [data-theme]). --dunkel ist per Default ausgeblendet, --hell immer sichtbar, bis
     einer der beiden Dunkel-Wege greift. *//* Groesser als zuvor (2.25rem -> 2.75rem, Guido 2026-08-19) -- bewusst mehr
     Platz fuers Logo, im Ausgleich dazu die Leiste vertikal knapper (siehe
     .nav__leiste padding-block oben). */.nav__logo-bild{height:2.75rem;width:auto;display:block}.nav__logo-bild--dunkel{display:none}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .nav__logo-bild--hell{display:none}:root:not([data-theme="light"]) .nav__logo-bild--dunkel{display:block}}:root[data-theme="dark"] .nav__logo-bild--hell{display:none}:root[data-theme="dark"] .nav__logo-bild--dunkel{display:block}.nav__logo-text{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--farbe-text);letter-spacing:var(--tracking-tight)}/* Dark-Mode-Toggle (Aufgabe 5, Guido 2026-08-19) -- immer sichtbar, auf
     jeder Breite (bewusst kein Verstecken im Hamburger-Menue, siehe
     nav.mustache). Icon-Umschaltung ueber denselben Tri-State-Mechanismus wie
     .nav__logo-bild--hell/--dunkel oben (System-Praeferenz per
     prefers-color-scheme, explizite Nutzerwahl per [data-theme] gewinnt) --
     zeigt jeweils das Icon des Ziel-Zustands (Klick fuehrt DORTHIN): im
     hellen Modus die Mond-Fluecht (Wechsel zu dunkel), im dunklen Modus die
     Sonne (Wechsel zu hell). */.nav__theme-knopf{display:flex;align-items:center;justify-content:center;flex-shrink:0;/* 2.5rem (40px) -> 2.75rem (44px), Aufgabe 2 Touch-Ziele: 40x40 war unter dem
       44x44-Mindestmass, einziges mobiles Bedienelement neben Hamburger. */width:2.75rem;height:2.75rem;padding:var(--space-2);border:none;border-radius:var(--radius-md);background:transparent;color:var(--farbe-text-gedaempft);cursor:pointer}.nav__theme-knopf:hover{background:var(--farbe-flaeche);color:var(--farbe-text)}.nav__theme-knopf:focus-visible{outline:2px solid var(--farbe-fokus);outline-offset:2px}.nav__theme-icon{display:flex}.nav__theme-icon svg{width:var(--space-5);height:var(--space-5)}.nav__theme-icon--hell{display:none}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .nav__theme-icon--hell{display:flex}:root:not([data-theme="light"]) .nav__theme-icon--dunkel{display:none}}:root[data-theme="dark"] .nav__theme-icon--hell{display:flex}:root[data-theme="dark"] .nav__theme-icon--dunkel{display:none}:root[data-theme="light"] .nav__theme-icon--hell{display:none}:root[data-theme="light"] .nav__theme-icon--dunkel{display:flex}/* ---- Hamburger (nur unter der Container-Query-Schwelle sichtbar) ----
     .nav__mobile-menu ist das <details>-Element; display:contents nimmt es aus dem
     Flex-Layout von .nav__leiste heraus, sodass Summary (Knopf) und Menue-Inhalt
     weiterhin wie zuvor direkte Flex-Kinder von .nav__leiste sind. */.nav__mobile-menu{display:contents}/* Neue Browser (Chromium 131+/entsprechende Safari-Versionen) wrappen alle
     Nicht-Summary-Kinder eines <details> automatisch in einer internen
     ::details-content-Box fuer die native Auf/Zu-Animation -- diese Box traegt
     dort UA-seitig content-visibility:hidden, solange kein [open]-Attribut
     gesetzt ist, MIT VORRANG vor jedem Author-CSS auf .nav__menu selbst
     (display:flex greift, die Box bleibt trotzdem 0x0 gross). Ergebnis ohne
     diese Zeile: .nav__menu kollabiert auf der Desktop-Breite komplett auf
     Breite 0, obwohl niemand je auf den (dort unsichtbaren) Hamburger klickt
     und [open] daher nie gesetzt wird (verifiziert per Playwright 2026-08-19,
     Chromium 151: computed width 0px -> 848px nach manuellem [open]-Setzen).
     Sichtbarkeit wird ohnehin vollstaendig ueber die eigenen display:none/flex-
     Regeln oben gesteuert, die native content-visibility-Automatik wird daher
     hier komplett abgeschaltet. Unbekanntes Pseudo-Element in aelteren Browsern
     macht nur diese eine Regel ungueltig, keine Nebenwirkung. */.nav__mobile-menu::details-content{content-visibility:visible}.nav__menu-knopf{display:none;flex-direction:column;justify-content:center;gap:0.3125rem;/* 2.5rem (40px) -> 2.75rem (44px), Aufgabe 2 Touch-Ziele: siehe Kommentar bei
       .nav__theme-knopf oben -- gleiches Mass, einziges weiteres mobiles
       Bedienelement. */width:2.75rem;height:2.75rem;padding:var(--space-2);border-radius:var(--radius-md);cursor:pointer;flex-shrink:0;list-style:none}/* <summary> traegt browserseitig ein Standard-Dreieck-Marker -- hier durch die
     eigenen drei Striche ersetzt, Marker daher in beiden Engines abgeschaltet. */.nav__menu-knopf::marker{content:''}.nav__menu-knopf::-webkit-details-marker{display:none}.nav__menu-knopf:hover{background:var(--farbe-flaeche)}.nav__menu-knopf:focus-visible{outline:2px solid var(--farbe-fokus);outline-offset:2px}.nav__menu-knopf-strich{display:block;height:2px;background:var(--farbe-text);border-radius:var(--radius-full);transition:transform var(--transition-fast),opacity var(--transition-fast)}.nav__mobile-menu[open] .nav__menu-knopf-strich:nth-child(1){transform:translateY(0.4375rem) rotate(45deg)}.nav__mobile-menu[open] .nav__menu-knopf-strich:nth-child(2){opacity:0}.nav__mobile-menu[open] .nav__menu-knopf-strich:nth-child(3){transform:translateY(-0.4375rem) rotate(-45deg)}/* ---- Menue-Inhalt (Liste + Sprachen) ---- */.nav__menu{display:flex;align-items:center;gap:var(--space-6)}.nav__liste{display:flex;align-items:center;gap:var(--space-1);list-style:none}.nav__link{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--farbe-text);cursor:pointer;list-style:none}.nav__link::-webkit-details-marker{display:none}.nav__link:hover{color:var(--farbe-akzent);background:var(--farbe-flaeche)}.nav__link[data-aktiv="true"]{color:var(--farbe-akzent);font-weight:var(--weight-semibold)}/* ---- Eigenstaendige Intelligenzen-Hauptpunkte (AI/BI/HI/SI) ----
     Dauerhaft (nicht nur bei Hover/Aktiv) in Themenfarbe: Text + vorangestellter
     Punkt, ueber kontrastsichere --farbe-{x}-text-Rollen aus marke-todayislife.css
     (Guido, 2026-08-18). Eigener Farbkanal --nav-link-akzent statt direkt
     --farbe-akzent zu ueberschreiben -- das wuerde bei Klick auf einen Dropdown-
     Anstoss (::nav__dropdown-anstoss ist auch .nav__link) versehentlich mit dem
     Badge-Akzentmechanismus in Panels kollidieren, hier gibt es aber keine Panels
     unter diesen vier Punkten (einfache Links, kein dropdown). */.nav__link[data-akzent]{color:var(--nav-link-akzent);font-weight:var(--weight-semibold)}.nav__link[data-akzent]:hover{color:var(--nav-link-akzent)}.nav__link[data-akzent]::before{content:'';display:inline-block;width:0.4rem;height:0.4rem;border-radius:var(--radius-full);background:currentColor;flex-shrink:0}.nav__link[data-akzent="ai"]{--nav-link-akzent:var(--farbe-ai-text)}.nav__link[data-akzent="bi"]{--nav-link-akzent:var(--farbe-bi-text)}.nav__link[data-akzent="hi"]{--nav-link-akzent:var(--farbe-hi-text)}.nav__link[data-akzent="si"]{--nav-link-akzent:var(--farbe-si-text)}/* Seit der Icon-Migration (2026-08-18) ein <span> mit eingebetteter
     {{>icon-chevron-down}}-Partial statt eigenem Inline-SVG -- Groesse/Transition
     bleiben lokal in nav.css definiert (kein Griff nach icon.css/.icon-Klassen,
     damit nav.css weiter vollstaendig selbststaendig bleibt). */.nav__dropdown-pfeil{display:inline-flex;width:0.75rem;height:0.75rem;transition:transform var(--transition-fast);flex-shrink:0}.nav__dropdown-pfeil svg{width:100%;height:100%;display:block}.nav__dropdown[open] > .nav__dropdown-anstoss .nav__dropdown-pfeil{transform:rotate(180deg)}/* ---- Dropdown-Panel ----
     Stilrichtung Asana (asana.com/de, Guido 2026-08-18): viel Weissraum, ruhige
     Typografie, mehrspaltige Panels mit Icon+Beschreibung statt dichter Textliste. */.nav__panel{display:grid;gap:var(--space-6);padding:var(--space-6)}.nav__gruppe-titel{font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--farbe-text-dezent);margin-block-end:var(--space-3)}.nav__gruppe-eintraege{display:grid;gap:var(--space-1)}.nav__panel-eintrag{display:flex;align-items:flex-start;gap:var(--space-3);border-radius:var(--radius-lg);padding:var(--space-3);position:relative;transition:background var(--transition-fast)}.nav__panel-eintrag:hover{background:var(--farbe-flaeche)}/* Icon-Badge -- ersetzt den frueheren reinen Farbpunkt: dieselbe Akzentfarbe,
     jetzt als Flaeche hinter dem Icon statt als 0.4rem-Punkt vor dem Text. */.nav__panel-eintrag-icon{flex-shrink:0;display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-md);background:color-mix(in oklch, var(--farbe-akzent) 16%, transparent);color:var(--farbe-akzent)}.nav__panel-eintrag-icon svg{width:1.15rem;height:1.15rem;display:block}/* Kein Icon hinterlegt (z.B. Partner-Unterpunkte): faellt auf den frueheren
     schlichten Farbpunkt vor dem Titel zurueck, statt eine leere Flaeche zu zeigen. */.nav__panel-eintrag[data-akzent]:not([data-akzent=""]):not(:has(.nav__panel-eintrag-icon))
    .nav__panel-eintrag-titel::before{content:'';display:inline-block;width:0.4rem;height:0.4rem;border-radius:var(--radius-full);background:var(--farbe-akzent);margin-inline-end:var(--space-2)}.nav__panel-eintrag-inhalt{min-width:0}.nav__panel-eintrag-titel{display:flex;align-items:center;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--farbe-text)}/* Weiterfuehrender Pfeil, nur bei Hover/Fokus sichtbar -- Asana-Detail, hier als
     bedeutungsvolle Micro-Animation (Affordanz "das fuehrt irgendwohin"), nicht als
     Selbstzweck-Animation. */.nav__panel-eintrag-titel::after{content:'→';margin-inline-start:var(--space-2);opacity:0;transform:translateX(-0.25rem);transition:opacity var(--transition-fast),transform var(--transition-fast)}.nav__panel-eintrag:hover .nav__panel-eintrag-titel::after,.nav__panel-eintrag:focus-visible .nav__panel-eintrag-titel::after{opacity:1;transform:translateX(0)}.nav__panel-eintrag-text{display:block;margin-block-start:0.125rem;font-size:var(--text-xs);color:var(--farbe-text-gedaempft);line-height:var(--leading-normal)}.nav__panel-fuss{display:block;padding:var(--space-3) var(--space-6);border-block-start:1px solid var(--farbe-linie);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--farbe-akzent)}/* ---- Sprachumschalter ----
     Ein einziges Trigger-Element (Sprachcode-Badge, z.B. "DE") statt vormals drei
     einzelner Laenderflaggen-Emojis nebeneinander (UX-Antipattern: Flagge != Sprache,
     Guido 2026-08-18). Nutzt denselben <details class="nav__dropdown">-Mechanismus
     wie die Mega-Menues -- als eigenes .nav__eintrag INNERHALB der .nav__liste
     eingehaengt (siehe nav.mustache), daher automatisch mit im mobilen Akkordeon
     und in nav.js' "nur ein Panel gleichzeitig offen"-Logik, ohne eigene Sonderfaelle. */.nav__sprachen-kuerzel{display:inline-block;padding-inline:var(--space-1);border:1px solid currentColor;border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);line-height:1.4}.nav__panel-eintrag[data-aktiv="true"] .nav__panel-eintrag-titel{color:var(--farbe-akzent);font-weight:var(--weight-semibold)}.nav__panel-eintrag[data-aktiv="true"] .nav__sprachen-kuerzel{border-color:var(--farbe-akzent);color:var(--farbe-akzent)}/*
    ---- Schmale Breite (unter 72rem) ----
    Hamburger sichtbar, Menue standardmaessig unsichtbar, als Vollbild-Overlay bei
    geoeffnetem <details>. Dropdown-Panels werden zu statischen Akkordeons.

    Schwelle gemessen statt geraten (Guido, 2026-08-19 -- vorheriger Wert 80rem/
    1280px fuehlte sich "zu frueh" an). Playwright-Messung der tatsaechlichen
    Desktop-Breite mit allen 10 Hauptpunkten + Sprachumschalter nebeneinander
    (erzwungenes Desktop-Layout unabhaengig von der Container-Query, um den
    echten Platzbedarf zu ermitteln): Umbruch zwischen 1060px (bricht um) und
    1065px (passt, normale 4px-Listenabstaende, keine Engstelle) -- inklusive
    des am selben Tag vergroesserten Logos (2.25rem -> 2.75rem). 1065px ist die
    absolute Untergrenze; 72rem/1152px gewaehlt als Schwelle mit ca. 90px
    Sicherheitsabstand fuer Font-Rendering-/Zoom-/OS-Unterschiede, weiterhin
    deutlich unter der alten 80rem-Schwelle. Bei 1152px+ ist auch bei knappster
    Fensterbreite komfortabel Platz fuer alle 10 Links + Sprachumschalter.
  */@container (max-width: 71.99rem){/* margin-inline-start:auto statt Verlass auf justify-content:space-between
       allein: .nav__mobile-menu (ein <details>) traegt display:contents, damit
       Summary+Panel als direkte Flex-Kinder von .nav__leiste layouten -- Chromium
       loest den prozentualen Anteil an Flex-Space durch einen display:contents-
       Zwischenschritt aber nachweislich falsch auf (verifiziert per Playwright
       2026-08-19: Hamburger landete bei 700px Breite auf x=364 statt am rechten
       Rand bei x=638). Explizites auto-Margin macht die Rechtsbuendigkeit robust
       gegen diese Fehlberechnung, unabhaengig von Geschwister-Anzahl/-Groesse. */.nav__menu-knopf{display:flex;margin-inline-start:auto}.nav__menu{display:none;position:fixed;inset:var(--space-16) 0 0 0;background:var(--farbe-grund);flex-direction:column;align-items:stretch;gap:0;padding:var(--space-4) var(--container-padding) var(--space-8);overflow-y:auto;z-index:var(--z-overlay)}.nav__mobile-menu[open] .nav__menu{display:flex}.nav__liste{flex-direction:column;align-items:stretch;gap:0}.nav__eintrag{border-block-end:1px solid var(--farbe-linie)}.nav__link{padding-block:var(--space-4);font-size:var(--text-base)}.nav__panel{padding-inline:var(--space-3)}.nav__panel-fuss{padding-inline:var(--space-3)}}/*
    ---- Breite ab 72rem: horizontale Leiste, Panels als abgesetzte Flaechen unter
    dem jeweiligen Trigger. Schwellenwert-Herleitung siehe Kommentar bei der
    72rem-Container-Query oben. ----
  */@container (min-width: 72rem){/* flex-grow:1 + flex-basis:auto statt der Kurzform "flex:1" (= flex-basis:0%):
       ein prozentualer Flex-Basis-Wert braucht eine definite Bezugsgroesse vom
       Flex-Container -- durch den display:contents-Zwischenschritt von
       .nav__mobile-menu (siehe Kommentar oben) loest Chromium "0%" nachweislich
       zu 0px auf statt zur verfuegbaren Restbreite, wodurch .nav__menu komplett
       kollabierte und die Liste unsichtbar rechts aus dem Viewport lief
       (verifiziert per Playwright 2026-08-19: computed width 0px bei 1920px
       Fensterbreite). flex-basis:auto braucht keine Prozent-Aufloesung und
       funktioniert durch den contents-Zwischenschritt zuverlaessig. */.nav__menu{flex-grow:1;flex-basis:auto}.nav__eintrag--sprachen{margin-inline-start:auto}.nav__dropdown{position:relative}.nav__panel{position:absolute;inset-block-start:100%;inset-inline-start:0;margin-block-start:var(--space-2);min-width:30rem;max-width:min(calc(100vw - 2rem), 50rem);background:var(--farbe-grund);border:1px solid var(--farbe-linie);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr))}/* Kollisionsschutz: nav.js setzt data-ausrichtung="ende", wenn das linksbuendige
       Panel ueber den rechten Viewport-Rand ragen wuerde -> rechtsbuendig zum Trigger. */.nav__panel[data-ausrichtung="ende"]{inset-inline-start:auto;inset-inline-end:0}/* Innerhalb einer einzelnen breiten Gruppe (z.B. Leistungen, Produkte mit 6-7
       Eintraegen) zusaetzlich zweispaltig, damit das Panel nicht unnoetig hoch wird. */.nav__gruppe-eintraege{grid-template-columns:repeat(auto-fit, minmax(13.5rem, 1fr))}.nav__panel-fuss{border-radius:0 0 var(--radius-2xl) var(--radius-2xl)}/* Sprachpanel: nur 3 kurze Eintraege, die generischen Mega-Menue-Masse (min-width
       30rem, zweispaltiges Grid) waeren hier absurd breit -- eigene, schmalere Masse.
       Rechtsbuendig geoeffnet (inset-inline-end statt -start), weil der Trigger ganz
       am rechten Rand der Leiste sitzt und ein linksbuendiges Panel dort ueber den
       Viewport-Rand hinausragen wuerde. Kombinierter Selektor .nav__panel.nav__panel--sprachen
       fuer hoehere Spezifitaet als die generische .nav__panel-Regel oben, unabhaengig
       von der Regel-Reihenfolge im Stylesheet. */.nav__panel.nav__panel--sprachen{min-width:8rem;inset-inline-start:auto;inset-inline-end:0;grid-template-columns:1fr;padding:var(--space-2);gap:var(--space-1)}.nav__panel--sprachen .nav__panel-eintrag{padding:var(--space-2) var(--space-3)}}}