/*
  Faerbung ausschliesslich ueber Farbrollen. Guardlane-Check: passt strukturell (Badge,
  Titel, Untertitel, Sprungziel-Raster) -- Guardlane hat aktuell keine Seite mit diesem
  Muster, waere aber ein plausibler Baustein fuer die Pricing-Seite ("Welcher Tarif passt?").
*/@layer komponenten{/*
    "Schnelle Orientierung" soll als EIGENSTAENDIGES OBJEKT wirken statt als
    randlose, fast-weisse Vollbreite-Zeile (Lotti, 2026-08-18) -- daher jetzt selbst
    die eingerueckte Box: max-width/margin-inline wie sonst nur die inneren Slots,
    plus Radius+Shadow. data-thema="brand" (bestehender Mechanismus aus
    marke-todayislife.css, siehe auch hero.css/footer.css) liefert die "abgesetzte
    Flaechenfarbe" -- blasses Petrol statt neutralem Grau-50, kein neuer Token noetig.
  */.page-guide{container-type:inline-size;width:100%;max-width:none;margin-inline:0;background:radial-gradient(125% 110% at 4% 0%, color-mix(in oklch, var(--farbe-glanz-a) 24%, transparent), transparent 56%),radial-gradient(105% 100% at 100% 100%, color-mix(in oklch, var(--farbe-glanz-b) 22%, transparent), transparent 58%),radial-gradient(82% 84% at 86% 12%, color-mix(in oklch, var(--farbe-glanz-c) 24%, transparent), transparent 54%),linear-gradient(150deg,
        color-mix(in oklch, var(--farbe-grund) 62%, var(--farbe-glanz-a-light) 38%),
        color-mix(in oklch, var(--farbe-flaeche) 62%, var(--farbe-glanz-b-light) 38%) 52%,
        color-mix(in oklch, var(--farbe-flaeche) 62%, var(--farbe-glanz-c-light) 38%));border-radius:0;box-shadow:none;padding-block:var(--space-12)}.page-guide__kopf{max-width:40rem;margin-inline:auto;text-align:center;padding-inline:var(--container-padding);margin-block-end:var(--space-8)}/* Basis-Look (Fraunces-Caps, tracking-widest, farbiger Punkt) kommt aus der
     .eyebrow-Utility -- selbes Signature-Element wie Hero-Pretitel/Card-Badge. */.page-guide__badge{justify-content:center;margin-block-end:var(--space-3)}/* Kein eigenes font-family/font-weight mehr noetig: h2 ist in elemente.css bereits
     Fraunces (font-display, normal weight) -- das ist exakt der redaktionelle statt
     formularhafte Look, den Lotti systemweit will. */.page-guide__titel{font-optical-sizing:auto;font-size:var(--text-2xl);color:var(--farbe-text)}.page-guide__untertitel{margin-block-start:var(--space-3);color:var(--farbe-text-gedaempft);line-height:var(--leading-relaxed);/* Zentriert nur bis 3 Zeilen: begrenzte Breite, ausgewogener Umbruch, auf
       schmalem Container linksbuendig (Briefing Langtext 2026-10-13). */max-width:52ch;margin-inline:auto;text-wrap:balance}@container (max-width: 39.99rem){.page-guide__kopf{text-align:start}.page-guide__untertitel{margin-inline:0;text-wrap:pretty}.page-guide__badge{justify-content:flex-start}}.page-guide__liste{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-padding);display:grid;gap:var(--space-4);grid-template-columns:1fr}/* Vereinheitlicht auf denselben "oberer Farbbalken"-Stil wie card.css statt des
     frueheren linken Farbbalkens (Lotti-Review 2026-08-19: drei koexistierende
     Card-Varianten ohne Bedeutungszuordnung -- auf EINEN Stil committen, card.css
     war bereits die meistgenutzte Variante). Gleicher Aufbau wie .card: 4px
     Akzentleiste oben per ::before, Rahmen+Schatten am Link selbst. */.page-guide__link{display:block;overflow:hidden;background:color-mix(in oklch, var(--farbe-grund) 82%, white 18%);border:1px solid var(--farbe-linie);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-fast),transform var(--transition-fast)}.page-guide__link::before{content:'';display:block;height:4px;background:var(--farbe-akzent)}.page-guide__link:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}/* Gewichtung nach Rolle statt vier identischer Boxen (Lotti-Audit 2026-09-03
     Punkt 2 -- "Akzentbalken auf jeder Karte" plus "einheitliches Karten-Styling
     ohne Gewichtsverteilung" war der explizite Verbotslisten-Treffer). Genau EIN
     Eintrag pro Instanz (data-gewichtet="true", siehe page-guide.mustache/
     .schema.json Feld 'gewichtet') bekommt sichtbar mehr Gewicht: staerkerer
     Rand+Schatten in der Akzentfarbe, dickere obere Leiste, groesserer Icon-Kreis.
     Die uebrigen drei bleiben bewusst zurueckhaltender (duennerer Rand, kein
     Farbrand) -- der Kontrast entsteht durch das WENIGER der anderen, nicht nur
     durch ein Mehr bei einem. */.page-guide__eintrag[data-gewichtet="true"] .page-guide__link{border-color:var(--farbe-akzent);box-shadow:var(--shadow-lg)}.page-guide__eintrag[data-gewichtet="true"] .page-guide__link::before{height:6px}.page-guide__eintrag[data-gewichtet="true"] .page-guide__eintrag-icon{width:3.25rem;height:3.25rem;background:var(--farbe-akzent);color:var(--farbe-akzent-kontrast, white)}.page-guide__eintrag[data-gewichtet="true"] .page-guide__eintrag-icon svg{width:1.6rem;height:1.6rem}.page-guide__eintrag:not([data-gewichtet="true"]) .page-guide__link{border-color:var(--farbe-linie)}.page-guide__eintrag-inhalt{display:block;padding:var(--space-5)}/* data-akzent auf dem <li> ueberschreibt --farbe-akzent bereits lokal (marke-todayislife.css) --
     .page-guide__link oben liest nur die Rolle, keine weiteren Regeln noetig. *//* Icon-Badge -- optional (Feld 'iconName'/'icon', siehe page-guide.schema.json
     und icon.schema.json "dynamische_einbindung"). Gleicher visueller Baustein wie
     .nav__panel-eintrag-icon/.card__icon: eingefaerbte Flaeche in --farbe-akzent,
     konsistentes Look&Feel ueber die Bibliothek hinweg. Eintraege ohne 'iconName'
     rendern diesen Block gar nicht -- kein Layout-Bruch (Achilles, 2026-08-19). */.page-guide__eintrag-icon{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--radius-md);background:color-mix(in oklch, var(--farbe-akzent) 16%, transparent);color:var(--farbe-akzent);margin-block-end:var(--space-3)}.page-guide__eintrag-icon svg{width:1.35rem;height:1.35rem;display:block}.page-guide__eintrag-titel{display:block;font-weight:var(--weight-semibold);color:var(--farbe-text);margin-block-end:var(--space-1)}.page-guide__eintrag-text{display:block;font-size:var(--text-sm);color:var(--farbe-text-gedaempft);line-height:var(--leading-relaxed)}.page-guide__eintrag-cta{display:inline-block;margin-block-start:var(--space-3);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--farbe-akzent)}.page-guide__eintrag-cta::after{content:' \2192'}/*
    Spaltenzahl folgt der tatsaechlichen Eintragsanzahl (--anzahl-eintraege, aus
    eintraegeAnzahl im Mustache-Template gesetzt, siehe page-guide.mustache), nicht
    einer hartkodierten Zahl -- 2 Eintraege = 2 Spalten, 3 = 3, 4 = 4. Ab 5 bleibt es
    bei 4 gedeckelt (min()) und bricht mehrzeilig um, damit Karten nicht beliebig
    schmal werden. Unter 48rem (naechste Regel oben, .page-guide__liste ohne
    Container-Query) bleibt es unveraendert einspaltig -- die dynamische Spaltenzahl
    gilt nur oberhalb der Schwelle, Guido 2026-08-18.
  */@container (min-width: 48rem){.page-guide__liste{grid-template-columns:repeat(min(var(--anzahl-eintraege, 3), 4), 1fr)}}/*
    Genau fuenf Eintraege (Blog-Uebersicht "Fuenf Blogs, fuenf Blickwinkel"): 4+1 waere
    ein einsamer Waise, daher ab 48rem 3+2 (6er-Raster: drei Kacheln je 2, zwei je 3) und
    unter 48rem zweispaltig mit voll breiter fuenfter Kachel -- Scrollen versteckt sonst,
    dass es fuenf sind. Nur per :has() auf die Anzahl, andere Listen bleiben unveraendert.
  */@container (min-width: 20rem) and (max-width: 47.99rem){.page-guide__liste:has(> :nth-child(5):last-child){grid-template-columns:repeat(2, minmax(0, 1fr))}.page-guide__liste:has(> :nth-child(5):last-child) > :last-child{grid-column:1/-1}}@container (min-width: 48rem){.page-guide__liste:has(> :nth-child(5):last-child){grid-template-columns:repeat(6, 1fr)}.page-guide__liste:has(> :nth-child(5):last-child) > *{grid-column:span 2}.page-guide__liste:has(> :nth-child(5):last-child) > :nth-child(n+4){grid-column:span 3}}.page-guide__eintrag-anzahl{display:block;margin-block-end:var(--space-2);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--farbe-akzent)}/* Ein Link ist die ganze Kachel (Touch-Ziel weit ueber 44 px); Fokus als sichtbarer Ring
     in der Fokusfarbe (wie .card__link), Hover-Anhebung nur ohne reduzierte Bewegung. */.page-guide__link{height:100%}.page-guide__link:focus-visible{outline:3px solid var(--farbe-fokus);outline-offset:3px}.page-guide[id]{scroll-margin-block-start:var(--space-24)}@media (prefers-reduced-motion: reduce){.page-guide__link{transition:none}.page-guide__link:hover{transform:none}}}