/*
  Faerbung ausschliesslich ueber data-akzent + --farbe-akzent (Rolle, ueberschrieben
  lokal in marke-todayislife.css). Guardlane-Check: traegt Guardlanes Zielgruppen-
  Kartenraster strukturell (Bild optional, Titel, Text, Tags, Link) -- variante muesste
  um einen Wert wie "audience" erweitert werden, reine Zusatzsemantik, keine neue Struktur.
*/@layer komponenten{.card{container-type:inline-size;position:relative;display:flex;flex-direction:column;background:radial-gradient(140% 120% at 100% 0%, color-mix(in oklch, var(--farbe-akzent) 7%, transparent), transparent 62%),linear-gradient(180deg, color-mix(in oklch, var(--farbe-grund) 90%, white 10%), var(--farbe-grund));border:1px solid var(--farbe-linie);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden;transition:box-shadow var(--transition-base),transform var(--transition-base)}.card:has(.card__link:hover){box-shadow:var(--shadow-lg);transform:translateY(-2px)}.card::before{content:'';display:block;height:4px;background:var(--farbe-akzent)}/* Kein data-akzent-Fallschirm hier noetig: marke-todayislife.css ueberschreibt
     --farbe-akzent schon lokal je [data-akzent="..."] -- ::before oben liest nur die Rolle. */.card__bild-rahmen{aspect-ratio:16/9;overflow:hidden;background:var(--farbe-flaeche)}.card__bild{width:100%;height:100%;object-fit:cover}/* Bild-Fallback (kein stiller Fallback, siehe card.mustache onerror): kaputtes
     Browser-Icon ausblenden, Rahmen bekommt sichtbaren Platzhalter statt leerer
     Flaeche -- Hintergrund/Groesse erbt der Rahmen ohnehin schon von oben. */.card__bild[data-bild-fehlt]{display:none}.card__bild-rahmen:has(.card__bild[data-bild-fehlt]){display:flex;align-items:center;justify-content:center;border:1px dashed var(--farbe-linie-stark)}.card__bild-rahmen:has(.card__bild[data-bild-fehlt])::after{content:'Bild nicht verfügbar';padding:var(--space-2);text-align:center;font-size:var(--text-xs);color:var(--farbe-text-dezent)}/* Tool-Variante: kuratiertes quadratisches Icon statt Foto/Wortmarke -- mittig
     freigestellt auf der Flaeche statt randabschneidend gecovert (behebt TEIL-A-2:
     vorher ein riesiges rohes "GPT"-Wort als Debug-Platzhalter). Eigene, von der
     Kartenbreite entkoppelte Bandhoehe statt der geerbten 16:9-Aspect-Ratio: ein
     App-Icon ist kein Foto, das mit der Spalte mitwaechst -- bei voller Breite
     erzeugte 16:9 eine ~680px hohe Flaeche mit einem darin verlorenen kleinen
     Icon (gefunden beim Verifizieren, 2026-08-18). Fixe, kompakte Bandhoehe plus
     ein deutlich groesseres Icon balancieren die Flaeche stattdessen aus. */.card[data-variante="tool"] .card__bild-rahmen{aspect-ratio:auto;height:9rem;display:flex;align-items:center;justify-content:center}.card[data-variante="tool"] .card__bild{width:4rem;height:4rem;object-fit:contain}/* Icons8-Icon ist einfarbig Schwarz auf transparent -- im Dark Mode sonst fast
     unsichtbar auf der dunklen Card-Flaeche (gefunden beim Verifizieren, 2026-08-18).
     Gleicher Aktivierungsmechanismus wie der Logo-Tausch in nav.css/footer.css
     (prefers-color-scheme + [data-theme]); hier reicht ein Invert statt zweitem Asset,
     weil die Vorlage ohnehin nur eine Flaeche in einer Farbe ist. */@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .card[data-variante="tool"] .card__bild{filter:invert(1)}}:root[data-theme="dark"] .card[data-variante="tool"] .card__bild{filter:invert(1)}/* Blog-Bildkarte (Achilles, 2026-08-19, Guido: "Sei kreativ!") -- editorialer
     Look statt Foto-ueber-Text-Standardkarte: der Badge wandert als freigestellter
     Chip auf das Bild (gleiches Eyebrow-Punkt-Motiv wie ueberall, nur hell auf
     dunklem Blur statt gedaempftem Text), ein sanfter Verlauf am oberen Bildrand
     sichert die Lesbarkeit unabhaengig vom Fotoinhalt, und das Bild zoomt beim
     Hover dezent -- alles scoped auf variante="blog" MIT vorhandenem Bild, damit
     die bestehenden Produktbild-Karten (z.B. therightclick-Referenzen) unberuehrt
     bleiben. Ohne Bild (Feld 'bild' im Content-JSON weggelassen) rendert
     card.mustache den ganzen .card__bild-rahmen-Block gar nicht -- sauberer
     Rueckfall auf die bisherige reine Textkarte, kein kaputtes <img>, kein
     Leerrahmen. */.card[data-variante="blog"] .card__bild-rahmen{position:relative}.card[data-variante="blog"] .card__bild-rahmen::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom, rgb(15 15 20 / 0.55), transparent 55%);pointer-events:none}.card[data-variante="blog"] .card__bild{transition:transform 0.5s ease}.card[data-variante="blog"]:has(.card__link:hover) .card__bild{transform:scale(1.06)}.card[data-variante="blog"]:has(.card__bild-rahmen) .card__badge{position:absolute;inset-block-start:calc(4px + var(--space-4));inset-inline-start:var(--space-4);z-index:1;margin:0;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:color-mix(in oklch, var(--color-gray-950) 62%, transparent);color:var(--color-white);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.card__inhalt{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);flex:1}/* Basis-Look (Fraunces-Caps, tracking-widest, farbiger Punkt) kommt aus der
     .eyebrow-Utility (design/base/utilities.css) -- dasselbe Signature-Element wie
     Hero-Pretitel/page-guide-Label, hier auf den Card-Badge angewendet statt der
     frueheren Pill-mit-Fuellfarbe (Lotti, 2026-08-18: Eyebrow-Motiv soll ueber die
     Komponenten hinweg konsistent sein statt pro Komponente eine eigene Badge-Idee). */.card__badge{align-self:flex-start}/* Laender-Chip statt Eyebrow-Text (Feld 'badgeLand', card.schema.json) --
     Compliance-/Laender-Produkte (KSeF, myDATA, ...) sollen auf den ersten
     Blick von generischen Produkt-Badges ("KI-gestuetzt", "Enterprise")
     unterscheidbar sein, ohne dass die Akzentfarben-Logik (top-bar/icon)
     dafuer missbraucht wird (Lotti-Review 2026-08-19). */.card__badge--land{display:inline-flex;align-items:center;gap:var(--space-1);background:var(--farbe-flaeche);border:1px solid var(--farbe-linie);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:normal;text-transform:none;color:var(--farbe-text-gedaempft)}/* Icon-Badge am Kartenkopf -- optional, additiv (Feld 'iconName'/'icon',
     siehe card.schema.json und icon.schema.json "dynamische_einbindung").
     Gleicher visueller Baustein wie .nav__panel-eintrag-icon (nav.css):
     eingefaerbte Flaeche in --farbe-akzent statt Icon-Font/-Sprite, damit
     das Look&Feel ueber die Bibliothek hinweg konsistent bleibt. Karten ohne
     'iconName' rendern diesen Block gar nicht -- kein Layout-Bruch. */.card__icon{align-self:flex-start;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:var(--radius-md);background:color-mix(in oklch, var(--farbe-akzent) 16%, transparent);color:var(--farbe-akzent);margin-block-end:var(--space-1)}.card__icon svg{width:1.5rem;height:1.5rem;display:block}.card__titel{font-family:var(--font-display);font-optical-sizing:auto;font-size:var(--text-xl);font-weight:var(--weight-normal);line-height:var(--leading-snug);color:var(--farbe-text)}.card__text{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--farbe-text-gedaempft)}.card__tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-block-start:var(--space-1)}.card__tag{font-size:var(--text-xs);color:var(--farbe-text-dezent);background:var(--farbe-flaeche);border:1px solid var(--farbe-linie);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3)}.card__meta{margin-block-start:auto;padding-block-start:var(--space-3);border-top:1px solid var(--farbe-linie);font-size:var(--text-xs);color:var(--farbe-text-dezent)}.card__link{position:absolute;inset:0;border-radius:inherit}.card__link:focus-visible{outline:2px solid var(--farbe-fokus);outline-offset:2px}@container (min-width: 22rem){.card__inhalt{padding:var(--space-8)}.card__titel{font-size:var(--text-2xl)}}@container (min-width: 22rem){.card[data-variante="tool"] .card__bild-rahmen{height:11rem}.card[data-variante="tool"] .card__bild{width:5rem;height:5rem}}}