@layer settings, tools, generic, elements, objects, components, utilities; /* settings.tokens.css + fonts.css werden im parallel per geladen (Reihenfolge tokens -> fonts -> main), NICHT mehr via @import (Render-Wasserfall). */ /* E5-Skin-Port (Referenz entwuerfe/entwuerfe/05_live_lage/styles.css + assets/_shared/base.css): - generic/elements: reset, base typography, focus-visible (1a) - objects (CUBE): .wrap .flow .grid(-2/3/4) .sec(-tight) — reines Layout, kein Skin - components: E5-Skin (chrome/nav/feedbar, panes/cards/pillars/viz, sec--light, watermark, hero, forms, footer, view-transitions) + die base.css-Primitive, die der Skin ueberschreibt (.eyebrow/.lead/.body/.btn/.btn-ghost/h4) - utilities: .mt-0/.mt-1/.measure-24 usw. ersetzen die E5-Inline-Styles (KEIN style= im Output) */ @layer generic { *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; hyphens: none; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul { list-style: none; } } @layer elements { body { font-family: var(--font); /* Marken-Font Hanken Grotesk als Body-/Ueberschriftenschrift (CLS-Metriken in fonts.css) */ background: var(--navy); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } h1 { font-weight: 400; font-size: clamp(2.75rem, 6vw, 4.25rem); line-height: 1.0; letter-spacing: -.03em; } h2 { font-weight: 500; font-size: clamp(1.875rem, 3.6vw, 2.5rem); line-height: 1.08; letter-spacing: -.025em; } h3 { font-weight: 500; font-size: 1.75rem; line-height: 1.15; letter-spacing: -.02em; } p { line-height: 1.65; } :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; } } @layer objects { /* CUBE-Layout-Primitive — nur display/grid/spacing, keine Farben/Border-Skins. .pane/.card/.pillar/.viz sind fast ausschliesslich Skin (Border-/BG-Token) und leben daher komplett in components (siehe dort). */ .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); } .flow > * + * { margin-top: 1rem; } .grid { display: grid; gap: 1.1rem; } /* margin-top -> .flow (DS-05), NICHT hier */ .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .sec { padding-block: clamp(2.6rem, 6vw, 4.6rem); } @media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } } @layer components { /* --------------------------------------------------------------------- Base typographic + button primitives ported from E5 base.css. Needed because the E5-skin overrides below (13.1/13.10) only add deltas on top of these — without them .lead/.body/.btn-ghost etc. would be incomplete. Kept in components (not elements) — Task 1a's elements layer (h1-h3, :focus-visible) is treated as closed for this task. Note: base.css's --fg/--bg aliases do not exist in settings.tokens.css (Task 2) — resolved directly to --ink/--navy here. --------------------- */ h4 { font-weight: 600; font-size: 1.3125rem; line-height: 1.3; letter-spacing: -.01em; } .eyebrow { font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .20em; color: var(--muted); } .lead { font-weight: 400; font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.55; color: var(--text-dim); } .body { font-weight: 400; font-size: 1.0625rem; line-height: 1.65; } .btn { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font); font-weight: 600; font-size: .9375rem; letter-spacing: .01em; padding: .7em 1.15em; border-radius: var(--radius-sm); background: var(--ink); color: var(--navy); border: 1px solid var(--ink); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .btn:hover { opacity: .9; } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--faint); } .btn-ghost:hover { border-color: var(--ink); } /* .btn nutzt background:var(--ink)/color:var(--navy) — im Standard-Theme kippen beide gegenlaeufig (ink hell, navy dunkel). .sec--light kippt NUR --ink (wird dort dunkel), --navy bleibt konstant dunkel -> ohne diesen Override waere der Button dunkel auf dunkel und unlesbar (gefunden per Screenshot). --pane kippt in .sec--light auf einen hellen Cremeton. */ .sec--light .btn { color: var(--pane); } /* ===================================================================== 0 · PAGE BASE — radial wash as a fixed deco layer (PERF-07: avoids the body-attachment=fixed technique) + CRT scanline texture. ===================================================================== */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1200px 560px at 50% -180px, var(--body-radial) 0, transparent 70%); } body::after { content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(234, 240, 247, .016) 0 1px, transparent 1px 4px); } /* ===================================================================== 1 · PERSISTENT CHROME — console feed bar · tab-strip nav · scanline ===================================================================== */ .scan { position: fixed; left: 0; right: 0; top: 0; height: 1px; z-index: 95; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, var(--term) 16%, var(--ink) 50%, var(--term) 84%, transparent); } .chrome { position: sticky; top: 0; z-index: 60; background: rgb(11 20 36 / calc(var(--hp, 0) * .85)); -webkit-backdrop-filter: blur(calc(var(--hp, 0) * 15px)) saturate(120%); backdrop-filter: blur(calc(var(--hp, 0) * 15px)) saturate(120%); border-bottom: 1px solid rgb(34 58 92 / calc(var(--hp, 0))); will-change: background, backdrop-filter; } .feedbar { view-transition-name: feedbar; position: relative; z-index: 60; border-bottom: 1px solid rgb(26 46 61 / calc(var(--hp, 0))); background: transparent; } .feedbar-in { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .8em; padding-block: .63rem; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em; color: var(--term); text-transform: uppercase; } .fb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); display: inline-block; box-shadow: 0 0 0 3px rgba(90, 208, 140, .12); } .fb-seg { white-space: nowrap; } .fb-sep { color: var(--faint); } .fb-coord, .fb-snap { color: var(--muted); } .fb-uptime { color: var(--term); margin-left: auto; } .site-nav { view-transition-name: site-nav; position: relative; z-index: 50; background: transparent; border-bottom: none; } .nav-in { display: flex; align-items: flex-end; gap: 1.25rem; min-height: 93px; padding-top: .85rem; } .brand { view-transition-name: brand; display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); flex: 0 0 auto; padding-bottom: .55rem; } .emit { height: 24px; width: auto; color: var(--ink); } .brand-word { font-family: var(--font-logo); font-weight: 600; font-size: 1.05rem; letter-spacing: .24em; padding-left: .12em; color: var(--ink); } .nav-links { display: flex; gap: .1rem; margin-inline: auto; align-self: flex-end; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .02em; } .nav-links a { display: flex; align-items: center; gap: .45em; padding: .5em .85em; color: var(--muted); border: 1px solid transparent; border-bottom: none; border-top-left-radius: 5px; border-top-right-radius: 5px; transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .nav-links a::before { content: "·"; color: var(--faint); } .nav-links a:hover { color: var(--ink); background: rgba(34, 58, 92, .18); } .nav-links a[aria-current="page"] { color: var(--ink); background: var(--pane); border-color: var(--edge-2); box-shadow: inset 0 2px 0 var(--accent); } .nav-links a[aria-current="page"]::before { content: "›"; color: var(--accent); } .nav-right { display: flex; align-items: center; gap: .9rem; flex: 0 0 auto; padding-bottom: .55rem; } .nav-cta { font-size: .8rem; padding: .55em .9em; } .lang { display: flex; gap: .1rem; font-family: var(--font-mono); font-size: .68rem; } .lang-b { padding: .3em .42em; color: var(--faint); letter-spacing: .06em; border-radius: 3px; } .lang-b.is-active { color: var(--ink); border: 1px solid var(--edge-2); } .lang-b[disabled] { cursor: not-allowed; opacity: .7; } .lang-b:not([disabled]):hover { color: var(--muted); } /* ===================================================================== 2 · SECTION/PANE SKIN + z-index stacking for the fixed watermark (.sec/.sec-tight padding live in objects) ===================================================================== */ main { display: block; position: relative; } main > section > .wrap { position: relative; z-index: 2; } main > section > .sec-split-text, main > section > .sec-split-image { position: relative; z-index: 2; } main > section > .content-shot { position: relative; z-index: 2; } .pane { position: relative; border: 1px solid var(--edge-2); border-radius: var(--radius-sm); background: var(--pane); overflow: clip; } .pane-bar { display: flex; align-items: center; gap: .7rem; padding: .5rem .9rem; border-bottom: 1px solid var(--edge); background: var(--bar); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; color: var(--muted); } .win-dots { display: flex; gap: .34rem; flex: 0 0 auto; } .win-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--edge-2); } .pane-path { color: var(--term); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pane-path .sub { color: var(--faint); } .pane-stat { margin-left: auto; flex: 0 0 auto; letter-spacing: .08em; } .pane-stat.ok { color: var(--signal); } .pane-body { padding: clamp(1.3rem, 3vw, 2.4rem); } .eyebrow.cmd { display: flex; align-items: center; gap: .55em; } .eyebrow.cmd::before { content: ">"; color: var(--accent); font-family: var(--font-mono); font-weight: 600; } .eyebrow.cmd .ac { color: var(--accent); } .sec-head { max-width: 62ch; } .sec-head .lead { margin-top: 1rem; } .sec-head h2 { margin-top: .7rem; } /* Grundsaetzliche Style-Anweisung (06.07., Micha): Header -> Subheader -> Body braucht je ca. 15px Luft. In .sec-head bedeutet das konkret: h2 (Header) -> .t1 (Subheader, ProseSection's betonter erster Absatz) und .t1 -> .flow (Body, restliche Absaetze); hat eine Sektion keinen Subheader-Absatz (z.B. ReportsSection: h2 direkt gefolgt vom .flow- Body), gilt derselbe 15px-Abstand ersatzweise fuer h2 + .flow. Als generische Selektoren statt Einzelfix, gilt automatisch fuer jede aktuelle wie kuenftige Sektion mit diesem Muster. */ .sec-head h2 + .t1 { margin-top: 15px; } .sec-head .t1 + .flow { margin-top: 15px; } .sec-head h2 + .flow { margin-top: 15px; } /* .sec-head + .grid — Kachel-Sektionen (Zielgruppen/Einsatzfelder/Reports/ Analyseebenen-Pillars): .grid selbst traegt bewusst kein margin-top (s. Kommentar bei .grid), .wrap ist kein .flow-Objekt -> ohne diese Regel beruehren sich Intro-Text und Kartenraster (verifiziert per getBoundingClientRect: 0px, teils -20px Ueberlappung). 25px = Design- Wunsch Micha (06.07.), universell fuer dieses Muster statt Einzelfix. */ .sec-head + .grid { margin-top: 25px; } /* .sec--split — ProseSection mit `image`-Prop (s. ProseSection.astro): 3-Spalten-Grid direkt auf der
(kein .wrap, damit die Bildspalte bis zum physischen Fensterrand ausbrechen kann). Mittlere Spalte (Text, 62ch) bleibt IMMER an derselben Stelle; --text-inset repliziert exakt .wrap's Center-Gutter (max(0,(100vw-var(--wrap))/2) + dessen Padding), damit der Text nicht verrutscht. Die grosse 1fr-Spalte (Bild) liegt standardmaessig rechts vom Text bis zum Viewport-Rand; .sec--split-img-left tauscht nur, welche Aussenspalte die 1fr-Bildspalte ist bzw. die kleine feste Rand-Spalte — DOM-Reihenfolge bleibt immer Text-vor-Bild (Screenreader-Lesereihenfolge unveraendert), nur grid-column plaziert visuell um. */ .sec--split { --text-inset: calc(max(0px, (100vw - var(--wrap)) / 2) + clamp(20px, 5vw, 40px)); display: grid; grid-template-columns: var(--text-inset) minmax(0, 62ch) 1fr; align-items: center; column-gap: clamp(2rem, 5vw, 4rem); } /* .sec-split-full: fuer Sektionen, die zusaetzlich ein Kapitel-/Karten- Grid unterhalb von Text+Bild tragen (ReportsSection) — spannt alle 3 Split-Spalten (Zeile 2 des .sec--split-Grids), damit das Grid als normaler .wrap zentriert auf voller Breite steht statt in die schmale 62ch-Textspalte gequetscht zu werden (Korrektur 06.07.: "Modal-Boxen muessen in der Mitte der Seite sein, nicht rechts"). Text+Bild bleiben dadurch ein kurzer Block (nur .sec-head-Hoehe) — normales align-items:center zentriert das Bild von selbst auf den Fliesstext, kein position:sticky noetig (zurueckgenommen nach Ruecksprache "nicht kleben"). */ .sec-split-full { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(2.5rem, 5vw, 4rem); } .sec--split-img-left { grid-template-columns: 1fr minmax(0, 62ch) var(--text-inset); } /* grid-row:1 explizit auf beiden noetig: bei .sec--split-img-left steht das Bild (Spalte 1) im DOM NACH dem Text (Spalte 2) — sprich absteigende Spaltenreihenfolge. Ohne explizite Zeile schiebt Grid-Auto-Placement (sparse packing, vorwaerts-only Cursor) das Bild in eine neue Zeile 2 statt es neben den Text in Zeile 1 zu setzen (verifiziert per getBoundingClientRect: Bild landete unterhalb statt neben dem Text). */ .sec--split .sec-split-text { grid-column: 2; grid-row: 1; min-width: 0; } .sec--split .sec-split-image { grid-column: 3; grid-row: 1; } .sec--split-img-left .sec-split-image { grid-column: 1; } /* .sec--split-img-top (Design-Wunsch 06.07., #datenschutz: "Bild soll an der oberen Kante beginnen, wo die Zeile 'Die Plattform ist auf die Anforderungen...' ist" — NICHT an der Kante des ganzen sec-head-Blocks inkl. Eyebrow/h2/Intro-Absatz). Ein Kind, das INNERHALB eines hoeheren Geschwister-Grid-Items liegt (die alte sec-head-umschliesst-alles- Struktur), kann ohne JS-Messung/CSS-Subgrid nicht an einen Punkt MITTEN in diesem Geschwister ausgerichtet werden — deshalb splittet ProseSection.astro im top-Zweig .sec-split-intro (Eyebrow/h2/erster Absatz) und .sec-split-flow (restliche Absaetze) in zwei EIGENSTAENDIGE Grid-Items in Zeile 1 bzw. 2; das Bild liegt in DERSELBEN Zeile 2 wie .sec-split-flow — zwei Items in derselben Grid-Zeile beginnen zwangslaeufig an derselben Startlinie, exakt bei "Die Plattform...". MUSS NACH der generischen ".sec--split .sec-split-image { grid-row: 1 }" -Regel oben stehen: gleiche Spezifitaet (2 Klassen), also entscheidet die Quellreihenfolge — stand dieser Block VOR der generischen Regel, gewann faelschlich grid-row:1 (Bug, per getBoundingClientRect gefunden: Bild lag neben dem Intro-Block statt neben .sec-split-flow). KEIN position:sticky (zurueckgenommen 06.07., Korrektur "nicht sticky, soll mit dem ersten Fliesstext-Absatz verbunden bleiben"): das Bild scrollt normal mit der Seite, bleibt aber an genau dieser Startposition neben dem ersten Absatz "verankert", statt am Viewport zu kleben. Der 15px-Abstand (Konvention: h2/t1 -> flow, s. .sec-head .t1 + .flow oben) sitzt bewusst als margin-BOTTOM auf .sec-split-intro, NICHT als margin-top auf .sec-split-flow: eine Grid-Zeile wird per Auto-Sizing von ALLEN Items inkl. ihrer Margins bestimmt — margin-bottom auf Zeile 1 verschiebt die gemeinsame Zeile-1/2-Startlinie selbst nach unten (Bild UND Flow ruecken zusammen), waehrend margin-top auf dem Zeile-2-Item .sec-split-flow es relativ zu genau dieser (dann falschen) Startlinie verschieben wuerde — Bild und Flow-Absatz waeren um 15px versetzt. */ .sec--split-img-top { grid-template-rows: auto auto; } .sec--split-img-top .sec-split-intro { grid-column: 2; grid-row: 1; margin-bottom: 15px; } .sec--split-img-top .sec-split-flow { grid-column: 2; grid-row: 2; } .sec--split-img-top .sec-split-image { grid-column: 3; grid-row: 2; align-self: start; } .sec--split-img-top.sec--split-img-left .sec-split-image { grid-column: 1; } .sec-split-image { display: flex; align-items: center; justify-content: center; min-width: 0; padding-inline-end: clamp(1rem, 4vw, 2.5rem); } .sec--split-img-left .sec-split-image { padding-inline: clamp(1rem, 4vw, 2.5rem) 0; } @media (max-width: 900px) { .sec--split, .sec--split-img-left { grid-template-columns: 1fr; padding-inline: clamp(20px, 5vw, 40px); row-gap: 2rem; } .sec--split .sec-split-text, .sec--split .sec-split-image, .sec--split-img-left .sec-split-image { grid-column: 1; } .sec-split-image, .sec--split-img-left .sec-split-image { padding-inline: 0; } .sec-split-full { padding-inline: 0; } /* .sec--split-img-top-Stack: 1 Spalte, 3 Zeilen (Intro -> Flow -> Bild). */ .sec--split-img-top .sec-split-intro, .sec--split-img-top .sec-split-flow, .sec--split-img-top .sec-split-image { grid-column: 1; } .sec--split-img-top .sec-split-intro { grid-row: 1; } .sec--split-img-top .sec-split-flow { grid-row: 2; } .sec--split-img-top .sec-split-image { grid-row: 3; } } .sec-shot { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); } /* .content-shot — Button-Reset um ein klickbares Inhaltsbild (Hero-UI-Shot, ProseSection-Diagramme). Oeffnet #detail-modal wie .card-disclose/.more (bindDetailDialog() in enhance.ts) — neue grundlegende Design-Regel: Bilder verhalten sich beim Klick wie die Detail-Boxen. */ .content-shot { display: block; width: 100%; padding: 0; border: none; background: transparent; cursor: pointer; border-radius: var(--radius-sm); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .content-shot:hover { opacity: .92; transform: scale(1.01); } .content-shot:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; } .benefit { position: relative; padding-left: 2.6rem; margin-top: 1.15rem; font-size: 1.0625rem; line-height: 1.55; color: var(--ink); } /* Aufzaehlungszeichen = kleiner goldener Bloodhawk-Falke (ersetzt das vormalige Text-"=>"); gilt als Standard-Marker fuer Benefit-/Nutzen- Aufzaehlungen sitework, siehe SONDAR_CI/20_produkte/bloodhawk/ bloodhawk_brandguide.md. 2 Leerzeichen Abstand zum Textbeginn. */ .benefit::before { content: ""; position: absolute; left: 0; top: -.1em; width: 1.7em; height: 1.7em; background: url('/logo/bloodhawk_falke.svg') center / contain no-repeat; } /* margin-top:auto (statt fixem 1.15rem, 06.07. Design-Wunsch Micha): .card-in ist ein Flex-Column-Container (flex:1) — die Karten sind seit der ReportsSection-Umstellung auf Grid-Default (kein grid--start mehr) bereits reihenweise gleich hoch; margin-top:auto schiebt "mehr erfahren" zusaetzlich an den unteren Rand JEDER Karte, unabhaengig von der Laenge des .t1-Purpose-Texts darueber — dadurch liegen alle "mehr erfahren" in einer Reihe exakt auf derselben Hoehe. */ .more { margin-top: auto; border-top: 1px solid var(--edge); } .more > summary { list-style: none; cursor: pointer; padding: .7rem 0 .2rem; display: flex; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; color: var(--muted); } .more > summary::-webkit-details-marker { display: none; } .more > summary:hover { color: var(--ink); } .more-body { padding: .5rem 0 .9rem; color: var(--text-dim); } /* ===================================================================== 3 · HERO — the console that boots up ===================================================================== */ .hero { position: relative; padding-block: clamp(2.2rem, 5vw, 4rem); } .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('/media/feed-backdrop.svg') center top / min(1100px, 140%) no-repeat; opacity: .45; -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent); mask-image: linear-gradient(180deg, #000 50%, transparent); } .hero .wrap { position: relative; z-index: 2; } .console-body { padding: clamp(1.5rem, 3.5vw, 2.8rem); } /* Bloodhawk-Lockup im Console-Pane — nur auf /bloodhawk gerendert (BloodhawkHero.astro), .pane traegt bereits position:relative (Z.174). */ .bh-mark { position: absolute; top: clamp(1.5rem, 3.5vw, 2.8rem); right: clamp(1.5rem, 3.5vw, 2.8rem); height: clamp(70px, 10vw, 105px); width: auto; } @media (max-width: 720px) { .bh-mark { display: none; } } /* Abstand Boot-Log -> Eyebrow um 400% vergroessert (1.4rem -> 7rem), auf Wunsch. */ .boot { font-family: var(--font-mono); font-size: .74rem; line-height: 1.85; letter-spacing: .02em; color: var(--muted); margin-bottom: 7rem; } .boot .ln { display: block; } .boot .ok { color: var(--signal); } .boot .pend { color: var(--faint); } .hero-eyebrow { margin-bottom: 1.1rem; } .hero-h { max-width: 19ch; margin-bottom: 2.4rem; } .hero-lead { max-width: 64ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; } /* .hero-ui-shot-full — bricht bis zum physischen Fensterrand aus (100% Fensterbreite, Design-Wunsch 06.07.): liegt als Geschwister von .wrap direkt in .hero (kein padding-inline dort, s. main.css .hero-Regel), dadurch reicht width:100% (von .content-shot geerbt) automatisch bis zum Viewport-Rand, ohne die Zentrierung/Padding von .wrap zu erben. */ .hero-ui-shot-full { margin-top: clamp(2rem, 5vw, 3.5rem); border-radius: 0; padding-inline: 25px; } .bh-ui-shot { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--edge-2); } .caret { display: inline-block; width: .55ch; height: 1.02em; margin-left: .02em; background: currentColor; transform: translateY(.14em); vertical-align: baseline; animation: e5-blink 1.06s steps(1, end) infinite; } .boot .caret { background: var(--signal); } @keyframes e5-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* ===================================================================== 4 · GRID COMPONENTS — cards, sovereignty pillars (.grid/.grid-2/3/4 layout primitives live in objects) ===================================================================== */ /* .card-Hintergrund (06.07., Design-Wunsch Micha): leichter Farbverlauf hell (oben) -> dunkel (unten) + Schatten, damit sich die Karte vom Sektions-Hintergrund abhebt (vorher: flaches var(--pane), verschmolz mit dem fast gleichfarbigen Sektionshintergrund). color-mix() statt eines zweiten Farb-Tokens, damit "heller Top-Stop" in .sec--light UND im Dark-Default gilt, unabhaengig davon ob dort ein helleres Token ueberhaupt existiert bzw. wie es zu --pane relativ liegt. */ .card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--edge-2); border-radius: var(--radius-sm); background: linear-gradient(180deg, color-mix(in srgb, var(--pane) 92%, white 8%), var(--pane)); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); cursor: pointer; } /* Hover-Feedback (06.07., Design-Wunsch Micha): leichtes Vergroessern + staerkerer Schatten signalisiert Klickbarkeit (jede .card traegt ein .card-disclose/.more-Details-Element). transform statt Groessenaenderung via width/height, damit Nachbarkarten im Grid nicht mitverschoben werden (kein Reflow, reine Compositor-Animation). */ .card:hover { transform: scale(1.015); box-shadow: 0 16px 36px rgba(0, 0, 0, .34); } .card-in { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; } .card h3 { margin-bottom: .8rem; } /* #reports/#einsatzfelder .card h3 min-height (06.07., Design-Wunsch Micha): reserviert immer 2 Zeilen Titel-Hoehe, auch wenn ein Titel nur 1 Zeile braucht — damit der .t1-Fliesstext bei ein- und zweizeiligen Titeln in derselben Grid-Reihe auf exakt derselben Hoehe beginnt (beide Sektionen sind 3-spaltig, schmal genug dass laengere Titel wie "Segment- und Audience-Bubble-Übersicht"/"Reputations- und Wettbewerbsbeobachtung" auf 2 Zeilen umbrechen, kuerzere wie "Kernzahlen"/"Issue Monitoring" nicht). Nur fuer diese beiden Sektionen skaliert — ZielgruppenGrid hat durchgehend einzeilige Titel und braucht die Reserve nicht. */ #reports .card h3, #einsatzfelder .card h3 { min-height: calc(1.75rem * 1.15 * 2); } /* Basis-.t1 (06.07., Bugfix): .card .t1 ist eine scoped Regel — wird der Inhalt per cloneNode(true) in #detail-modal verschoben (s. enhance.ts bindDetailDialog), geht der .card-Vorfahre verloren und .t1 faellt ohne diese Basisregel auf ungestyltes Browser-Default zurueck (wirkte kleiner/schlechter lesbar als .body im geoeffneten Modal, Design-Fund 06.07.). Gleiche Groesse wie .body als Fallback; die spezifischere .card .t1-Regel unten gewinnt weiterhin innerhalb ihres eigentlichen Live-Kontexts. */ .t1 { font-size: 1.0625rem; line-height: 1.65; margin-bottom: .8rem; } .card .t1 { color: var(--ink); font-size: 1.02rem; margin-bottom: .8rem; } .card-cta { margin-top: auto; padding-top: 1rem; } .card-cta a { font-family: var(--font-mono); font-size: .76rem; color: var(--accent); letter-spacing: .03em; } .card-cta a::after { content: " →"; } .card-cta a:hover { color: var(--ink); } /* .tier-price/.tier-features (PreiseSection-Gerüst, 06.07.): Preis in Mono-Ziffern analog Terminal-Aesthetik (--font-mono/--accent), Feature- Liste als .flow aus

(kein