/* ==========================================================================
   DR71 FUNDAMENT (zentrale Datei 1 von 2)
   Variablen und Grundregeln: Farben, Ecken, Typo-Skala, Breiten, Raster,
   Schrift, Knoepfe, Haarlinie, Lichtschein.
   Wer hier einen Wert aendert, aendert ihn auf jeder Seite, die diese Datei
   einbindet. Widgets stehen in dr71-widgets.css.
   Stand: Fundament v2, 17.09.2026 (Arbeitsstand Betrieb, noch nicht im Skill)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Farben: Schwarz, drei Flaechenstufen, Cyan als einzige Buntfarbe */
    --bg: #000000; --s1: #07090a; --s2: #0c1012; --s3: #131a1d;
    --linie: rgba(255, 255, 255, 0.08); --linie-stark: rgba(255, 255, 255, 0.16);
    --cyan: #00e8fc; --cyan-tief: #0a3a42; --auf-cyan: #001114;
    --text: #ffffff; --text-2: #c9ced1; --text-3: #8d969b; --text-4: #626b70;

    /* Ecken: dezent, nie oval (Obergrenze 22 px) */
    --r-bild: 0.5rem; --r-knopf: 0.625rem; --r-karte: 1rem; --r-tafel: 1.25rem;

    /* Typo-Skala v1 in rem (fliessend nur als clamp(rem, rem + vw, rem)) */
    --fs-h1: clamp(2.5rem, 1.93rem + 2.42vw, 3.75rem);
    --fs-h1-sub: clamp(1.25rem, 1.022rem + 0.97vw, 1.75rem);
    --fs-h1-klein: clamp(1.75rem, 1.636rem + 0.485vw, 2rem); /* Rueckfall-H1: 28 bis 32 px = Marias Untergrenze (17.09.2026), darunter kippt die Hierarchie */
    --fs-h2: clamp(1.5rem, 1.27rem + 0.97vw, 2rem);
    --fs-h2-leicht: clamp(1.75rem, 1.52rem + 0.97vw, 2.25rem);
    --fs-h3: clamp(1.25rem, 1.136rem + 0.485vw, 1.5rem);
    --fs-h4: clamp(1rem, 0.943rem + 0.242vw, 1.125rem);
    --fs-lead: clamp(1.0625rem, 1.034rem + 0.121vw, 1.125rem); /* 17 bis 18 px, CEO 19.09.2026: Fliesstext war zu gross (Hero, Einleitung, Kernsatz, Zitat) */
    --fs-body: 1rem; --fs-small: 0.875rem; --fs-fine: 0.8125rem; --fs-label: 0.875rem; --fs-btn: 0.875rem;
    --fs-zahl: clamp(2rem, 1.54rem + 1.94vw, 3rem);
    --font-marke: 'Anton', sans-serif; --font-text: 'Roboto', sans-serif;

    /* Breiten: rem-Obergrenze plus fliessender Rand, KEIN Prozentwert */
    --rand: clamp(1rem, 4vw, 3rem); --w-text: 45rem; --w-inhalt: 80rem; --w-breit: 92rem;
    --spalt: clamp(1rem, 2vw, 1.75rem); --sektion: clamp(4rem, 8vw, 7.5rem);

    /* Glow-Haarlinie: 1 px Verlaufsrand plus sehr schwacher Schein nach aussen */
    --haarlinie: linear-gradient(140deg, rgba(0, 232, 252, 0.5) 0%, rgba(0, 232, 252, 0.12) 26%, rgba(255, 255, 255, 0.07) 58%, rgba(0, 232, 252, 0.2) 100%);
    --haarlinie-stark: linear-gradient(140deg, rgba(0, 232, 252, 0.95) 0%, rgba(0, 232, 252, 0.4) 42%, rgba(255, 255, 255, 0.1) 72%, rgba(0, 232, 252, 0.5) 100%);
    --schein: 0 0 2.5rem -1rem rgba(0, 232, 252, 0.26);
    --schein-stark: 0 0 3rem -0.75rem rgba(0, 232, 252, 0.45);
    --kante: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Staerke der Haarlinie an EINER Stelle umstellbar (Attribut am html- oder body-Element) */
[data-haarlinie="aus"] { --haarlinie: linear-gradient(var(--linie), var(--linie)); --haarlinie-stark: linear-gradient(var(--linie-stark), var(--linie-stark)); --schein: 0 0 0 0 transparent; --schein-stark: 0 0 0 0 transparent; }
[data-haarlinie="kraeftig"] { --haarlinie: linear-gradient(140deg, rgba(0, 232, 252, 0.85) 0%, rgba(0, 232, 252, 0.3) 30%, rgba(255, 255, 255, 0.1) 60%, rgba(0, 232, 252, 0.45) 100%); --schein: 0 0 3rem -0.75rem rgba(0, 232, 252, 0.42); }

html { font-size: 100%; -webkit-text-size-adjust: 100%; color-scheme: dark; scroll-behavior: smooth; }
body { font-family: var(--font-text); font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); background: var(--bg); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
code { font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-fine); color: var(--text); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---------- Breiten und 12er-Raster ---------- */
.ds-inhalt { width: min(100% - 2 * var(--rand), var(--w-inhalt)); margin-inline: auto; }
.ds-inhalt--breit { width: min(100% - 2 * var(--rand), var(--w-breit)); }
.ds-inhalt--text { width: min(100% - 2 * var(--rand), var(--w-text)); }
.ds-sektion { position: relative; padding-block: var(--sektion); }
.ds-sektion--s1 { background: var(--s1); }
.ds-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spalt); }
.ds-raster > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 48em) { .sp-t6 { grid-column: span 6; } }
@media (min-width: 64em) {
    .sp-2 { grid-column: span 2; } .sp-3 { grid-column: span 3; } .sp-4 { grid-column: span 4; } .sp-5 { grid-column: span 5; }
    .sp-6 { grid-column: span 6; } .sp-7 { grid-column: span 7; } .sp-8 { grid-column: span 8; } .sp-9 { grid-column: span 9; }
    .ab-2 { grid-column-start: 2; } .ab-3 { grid-column-start: 3; }
    .sp-lese { grid-column: 3 / span 8; }
}
.ds-stapel { display: grid; gap: calc(var(--spalt) * 1.5); }

/* ---------- Haarlinie: gilt fuer Tafeln, Karten und Rahmen ---------- */
.ds-tafel, .ds-karte, .ds-rahmen {
    --flaeche: var(--s2);
    position: relative; overflow: hidden; border: 1px solid transparent;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 50%) padding-box, linear-gradient(var(--flaeche), var(--flaeche)) padding-box, var(--rand-verlauf, var(--haarlinie)) border-box;
    box-shadow: var(--kante), var(--rand-schein, var(--schein));
    transition: box-shadow 0.3s ease, transform 0.25s ease;
}
/* Klickbare Flaechen: beim Ueberfahren wird die Haarlinie heller */
a.ds-karte:hover, a.ds-tafel:hover, .ds-karte--hebt:hover { --rand-verlauf: var(--haarlinie-stark); --rand-schein: var(--schein-stark); }
.ds-tafel { --flaeche: var(--s1); border-radius: var(--r-tafel); }
.ds-karte, .ds-rahmen { border-radius: var(--r-karte); }

/* ---------- Schrift ---------- */
/* H1: Zeilen ausgleichen. H2: nur das einsame letzte Wort vermeiden (balance bricht lange H2 sonst mitten im Bindestrich-Wort) */
.ds-h1 { text-wrap: balance; }
.ds-h2 { text-wrap: pretty; }
.ds-h1 { font-family: var(--font-marke); font-weight: 400; font-size: var(--fs-h1); line-height: 1.08; letter-spacing: 0.015em; text-transform: uppercase; color: var(--text); }
.ds-h2 { font-family: var(--font-marke); font-weight: 400; font-size: var(--fs-h2); line-height: 1.15; letter-spacing: 0.025em; text-transform: uppercase; color: var(--text); }
.ds-h3 { font-family: var(--font-text); font-weight: 700; font-size: var(--fs-h3); line-height: 1.3; color: var(--text); }
.ds-h4 { font-family: var(--font-text); font-weight: 500; font-size: var(--fs-h4); line-height: 1.35; color: var(--text); }
.ds-label { display: block; margin-bottom: 0.75rem; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.ds-lead { font-size: var(--fs-lead); font-weight: 300; line-height: 1.6; color: var(--text); }
.ds-klein { font-size: var(--fs-small); color: var(--text-3); }
.ds-fein { font-size: var(--fs-fine); color: var(--text-3); }
.ds-text > * + * { margin-top: 1.25rem; }
.ds-text strong { font-weight: 500; color: var(--text); }
/* Schrift-Variante B: Anton nur im Hero, Ueberschriften leicht und in normaler Schreibung */
.schrift-b .ds-h2 { font-family: var(--font-text); font-weight: 300; font-size: var(--fs-h2-leicht); letter-spacing: -0.01em; text-transform: none; }
/* Schrift-Variante C (CEO 17.09.): H2 in Anton, aber in normaler Schreibung. Anton hat NUR Gewicht 400, fett waere kuenstlich und unscharf */
.schrift-c .ds-h2 { font-size: var(--fs-h2-leicht); line-height: 1.18; letter-spacing: 0.01em; text-transform: none; }

/* ---------- Knoepfe und Links ---------- */
.ds-knopf { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.5rem; border: 1px solid transparent; border-radius: var(--r-knopf); font-size: var(--fs-btn); font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.ds-knopf--haupt { background: var(--cyan); color: var(--auf-cyan); }
.ds-knopf--haupt:hover { background: var(--text); transform: translateY(-1px); }
.ds-knopf--schwarz { background: var(--auf-cyan); color: var(--text); }
.ds-knopf--schwarz:hover { background: var(--text); color: var(--auf-cyan); }
.ds-knopf--rand { border-color: var(--linie-stark); color: var(--text); }
.ds-knopf--rand:hover { border-color: var(--cyan); color: var(--cyan); }
.ds-knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.ds-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-btn); font-weight: 500; color: var(--cyan); }
.ds-link span { transition: transform 0.2s ease; }
.ds-link:hover span { transform: translateX(4px); }
.ds-etikett { display: inline-block; justify-self: start; padding: 0.25rem 0.625rem; border-radius: 0.375rem; background: var(--cyan); font-family: var(--font-marke); font-weight: 400; font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--auf-cyan); }

/* ---------- Lichtschein: Hintergrund-Ebene einer Sektion oder Tafel.
   Alles andere (Text, Karten, Tabellen, Bilder) liegt mit .ds-vorn darueber.
   Animiert werden nur transform und opacity. ---------- */
.ds-licht { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ds-licht::before, .ds-licht::after { content: ""; position: absolute; opacity: var(--licht, 0.6); }
.ds-licht::before { right: -18rem; top: -22rem; width: 72rem; height: 50rem; background: radial-gradient(closest-side, rgba(0, 232, 252, 0.5), rgba(0, 110, 255, 0.16) 55%, transparent 100%); }
.ds-licht::after { left: -24rem; bottom: -30rem; width: 60rem; height: 46rem; background: radial-gradient(closest-side, rgba(0, 170, 255, 0.28), transparent 100%); }
.ds-licht--leise { --licht: 0.25; } .ds-licht--mittel { --licht: 0.55; } .ds-licht--kraeftig { --licht: 1; }
.ds-licht--unten::before { right: auto; left: 50%; top: auto; bottom: -34rem; margin-left: -36rem; }
.ds-licht--unten::after { display: none; }
.ds-licht--rechts-unten::before { top: auto; bottom: -24rem; right: -14rem; }
.ds-licht--rechts-unten::after { display: none; }
.licht-animiert .ist-sichtbar .ds-licht::before, .licht-animiert .ist-sichtbar.ds-licht::before { animation: ds-atem 16s ease-in-out infinite alternate; will-change: transform, opacity; }
.licht-animiert .ist-sichtbar .ds-licht::after, .licht-animiert .ist-sichtbar.ds-licht::after { animation: ds-atem 22s ease-in-out infinite alternate-reverse; will-change: transform, opacity; }
@keyframes ds-atem { from { transform: translate3d(-3%, 2%, 0) scale(1); opacity: calc(var(--licht, 0.6) * 0.7); } to { transform: translate3d(4%, -3%, 0) scale(1.14); opacity: var(--licht, 0.6); } }
.licht-aus .ds-licht { display: none; }
.ds-kachelnetz { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
    background-image: linear-gradient(var(--linie) 1px, transparent 1px), linear-gradient(90deg, var(--linie) 1px, transparent 1px); background-size: 4.5rem 4.5rem;
    mask-image: radial-gradient(60rem 30rem at 70% 0%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(60rem 30rem at 70% 0%, #000 0%, transparent 75%); }
.ds-vorn { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }