/*
  Hero. Faerbung ausschliesslich ueber data-thema + die Farbrollen (--farbe-grund,
  --farbe-flaeche, --farbe-text, --farbe-text-gedaempft, --farbe-akzent, --farbe-auf-akzent).
  Die sechs [data-thema="..."]-Ueberschreibungen stehen in marke-todayislife.css, nicht
  hier -- diese Datei referenziert nirgends eine Rohfarbe. Neue Marke = neue Werte fuer
  dieselben Rollen unter denselben data-thema-Selektoren, diese Datei bleibt unangetastet.
  Guardlane-Check: traegt den dunklen Guardlane-Hero (h1 + CTA) unveraendert -- dort
  waere data-thema="brand" mit Guardlanes eigenen dunklen Rollenwerten zu belegen.
*/@layer komponenten{.hero{container-type:inline-size;background:var(--farbe-grund);color:var(--farbe-text)}.hero__container{max-width:var(--container-max);margin-inline:auto;padding:var(--space-16) var(--container-padding);display:grid;gap:var(--space-12);align-items:center}.hero[data-groesse="large"] .hero__container{padding-block:var(--space-24)}.hero[data-groesse="small"] .hero__container{padding-block:var(--space-10)}/* Basis-Look (Fraunces-Caps, tracking-widest, farbiger Punkt) kommt aus der
     .eyebrow-Utility (design/base/utilities.css) -- systemweites Signature-Element,
     siehe dort. Hier nur noch der Hero-spezifische Abstand zum Titel. */.hero__pretitel{margin-block-end:var(--space-3);/* Lange Komposita ("Schaedlingsbekaempfungsbetriebe") duerfen auf schmalen Schirmen umbrechen. */overflow-wrap:anywhere}/* Grid-Item: ohne min-width:0 diktiert das laengste Wort die Spaltenbreite (Scroll bei 390 px). */.hero__inhalt{min-width:0}/*
    Groesse skaliert stufenlos ueber Container-Query-Einheiten (cqw), nicht ueber
    vw oder eine Breakpoint-Umschaltung -- der Hero ist selbst der Container
    (container-type: inline-size oben), also reagiert die Typo auf die tatsaechliche
    Hero-Breite, nicht auf den Viewport. Grenzwerte docken an die bestehende
    Type-Scale in system.css an (--text-4xl/--text-5xl-Spannweite), damit kein
    zweites Groessensystem entsteht.
  */.hero__titel{font-family:var(--font-display);font-optical-sizing:auto;font-weight:var(--weight-normal);/* Deckelung bewusst auf --text-5xl-Niveau angehoben (vorher 4.25rem Max, jetzt
       identisch mit dem System-Maximalwert) -- echte Display-Wirkung statt
       zurueckhaltender Titel-Groesse (Lotti, 2026-08-18). Skaliert weiterhin ueber
       cqw, nicht vw: der Hero ist sein eigener Container. */font-size:clamp(2.1rem, 1.6rem + 3.9cqw, 4.25rem);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);white-space:pre-line;max-width:22ch;color:var(--farbe-text)}.hero__untertitel{font-family:var(--font-display);font-size:clamp(1.3rem, 1.05rem + 1.6cqw, 2.1rem);font-weight:var(--weight-medium);line-height:var(--leading-snug);color:var(--farbe-text);opacity:0.92;white-space:pre-line;margin-block-start:var(--space-3);max-width:32ch}.hero__lead{font-size:var(--text-lg);line-height:var(--leading-relaxed);margin-block-start:var(--space-5);max-width:46ch;color:var(--farbe-text-gedaempft)}.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-block-start:var(--space-8)}.hero__ctas:empty{display:none}/* .hero__cta* entfernt (Guido/Achilles, 2026-08-18): CTAs sind jetzt die
     systemweite Button-Komponente (design/components/button), eingebunden ueber
     {{>button}} in hero.mustache -- keine lokale Button-Wahrheit mehr hier. *//*
    Stimmungsbild statt Mockup-Platzhalter (behebt TEIL-A-5, Guido/Lotti 2026-08-18):
    vorher ein kleines Verlaufs-Rechteck MIT sichtbarem Debug-Label ("TERMINAL" etc.
    aus attr(data-visual)) -- wirkte wie ein liegengebliebener Platzhalter-Zustand.
    Jetzt eine grossflaechigere, mehrschichtige Gradient-Textur (zwei versetzte
    Farb-Blooms in --farbe-akzent/--color-secondary-400 + ein feines Punktraster als
    Kornung/Textur) OHNE jeden Text -- reine Stimmung, kein Inhalt, der etwas
    behauptet, was noch nicht da ist. data-visual bleibt als Attribut erhalten (fuer
    ein spaeteres echtes Bild pro Variante), steuert aber nur noch still den
    Bloom-Winkel je Variante, keine sichtbare Beschriftung mehr.
  */.hero__visual{aspect-ratio:4/3;border-radius:var(--radius-2xl);background:radial-gradient(120% 95% at 18% 12%, color-mix(in oklch, var(--farbe-akzent) 72%, transparent), transparent 62%),radial-gradient(110% 85% at 88% 82%, color-mix(in oklch, var(--color-secondary-400) 56%, transparent), transparent 65%),radial-gradient(88% 76% at 76% 18%, color-mix(in oklch, var(--farbe-glanz-b) 30%, transparent), transparent 62%),linear-gradient(155deg, color-mix(in oklch, var(--farbe-text) 12%, transparent), transparent 70%);border:1px solid color-mix(in oklch, var(--farbe-text) 16%, transparent);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}.hero__visual::after{content:'';position:absolute;inset:0;background-image:radial-gradient(color-mix(in oklch, var(--farbe-text) 60%, transparent) 1px, transparent 1px);background-size:1.35rem 1.35rem;opacity:0.07}.hero__visual[data-visual="bars"]{background-position:100% 0,0 100%,0 0}.hero__visual[data-visual="terminal"]{background-position:0 100%,100% 0,0 0}.hero__visual[data-visual="people-cards"]{background-position:100% 100%,0 0,0 0}/*
    hero__bild -- optionaler Slot fuer eine echte Art-Komponente (aktuell art-flipcard)
    statt des dekorativen Platzhalter-Visuals. Bewusst OHNE Rahmen/Card-Look/Box:
    die eingebettete Komponente bringt ihr eigenes freigestelltes Bild (Radius +
    Schatten) bereits mit, hero.css fuegt nur Platzierung/Zentrierung hinzu und hebt
    die art-flipcard-eigene max-width-Deckelung lokal auf, damit das Bild im Hero
    deutlich groesser wirken kann als in der art-flipcard-eigenen Demo. Die tatsaechliche
    Groesse steuert weiterhin das Datenfeld bildKomponente.maxHoehe (siehe hero.schema.json),
    idealerweise selbst ein cqw-Wert, damit auch das Bild mit dem Hero mitskaliert.
  */.hero__bild{display:flex;justify-content:center}.hero__bild .art-flipcard{max-width:none}/*
    hero__bild-einfach -- einfaches Stimmungsbild ohne Flip-Mechanik/Attribution
    (Ergaenzung 2026-08-19, z.B. Blog-Hero-Bilder). Nutzt denselben Layout-Slot
    .hero__bild wie bildKomponente, aber ein normales <img> statt art-flipcard:
    freigestellt, gerundete Ecken + Schatten wie das art-flipcard-eigene Bild,
    kein Rahmen/Card-Look.
  */.hero__bild-einfach{display:block;max-width:100%;height:auto;border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg)}/* hero__bild--einfach: stapelt Bild + optionale Bildunterschrift (Teil C,
     Guido 2026-08-19, z.B. "Bild KI-generiert") statt nur zu zentrieren. Die
     Unterschrift sitzt raeumlich direkt am Bild -- bewusst getrennt vom
     bestehenden rich-text__ki-hinweis am Artikelende, gleiche dezente Optik
     (klein, gedaempfte Farbe), aber eigener Ort. */.hero__bild--einfach{flex-direction:column;align-items:center;gap:var(--space-2)}.hero__bild-hinweis{/* Nachtrag Guido 2026-08-19: kleiner (text-xs statt text-sm) und
       rechtsbuendig ZUM BILD (nicht zur Hero-Sektion) -- align-self: stretch
       gibt dem Hinweis dieselbe Breite wie das Bild (sonst schrumpft er als
       Flex-Item auf seine eigene Textbreite, dann haette text-align:right
       keinen sichtbaren Effekt). */align-self:stretch;font-size:var(--text-xs);color:var(--farbe-text-dezent);text-align:right}/* Container Query: unter 48rem Breite einspaltig, Visual/Bild wandert nach unten */@container (min-width: 48rem){.hero__container{grid-template-columns:1.1fr 0.9fr}}@container (max-width: 47.99rem){.hero__visual{order:-1;max-height:14rem}.hero__bild{order:-1}/* Querformat-Foto (art-flipcard--quer): als Banner UNTER dem Text statt darueber (Kontakt-Hero). */.hero__bild:has(.art-flipcard--quer){order:0}}}