/* ============================================
   ENTREL — Base
   Design-Tokens, Fonts, Reset, Header, Footer, Buttons.
   Tokens stammen aus dem Prototyp (apps/web/public/styles/main.css),
   damit Landingpage und Plattform dieselbe Sprache sprechen.
   ============================================ */

/* ---------- Fonts ----------
   Mattone (SIL OFL, Collletttivo) trägt alle Headlines. Sie läuft sehr breit —
   deshalb sind Headlines auf zwei bis vier Wörter angelegt, siehe Display-Skala. */
@font-face {
    font-family: 'Mattone';
    src: url('../fonts/mattone/Mattone-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mattone';
    src: url('../fonts/mattone/Mattone-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'General Sans';
    src: url('../fonts/general-sans/GeneralSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'General Sans';
    src: url('../fonts/general-sans/GeneralSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'General Sans';
    src: url('../fonts/general-sans/GeneralSans-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'General Sans';
    src: url('../fonts/general-sans/GeneralSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
    --font-display: 'Mattone', 'Arial Black', Impact, sans-serif;
    --font-body: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --bg-primary: #0E0E0E;
    --bg-secondary: #141414;
    --bg-elevated: #1A1A1A;
    --text-primary: #F5F2E8;
    --text-muted: rgba(245, 242, 232, 0.62);
    --text-faint: rgba(245, 242, 232, 0.38);

    --gold-accent: #C8B48A;
    --gold-accent-light: rgba(200, 180, 138, 0.12);
    --gold-accent-medium: rgba(200, 180, 138, 0.3);
    --gold-accent-border: rgba(200, 180, 138, 0.5);

    /* Rollenfarben für das Trade-Experiment */
    --person-a: #C8B48A;
    --person-b: #7FA8A0;
    --person-a-soft: rgba(200, 180, 138, 0.14);
    --person-b-soft: rgba(127, 168, 160, 0.14);

    --hairline: rgba(245, 242, 232, 0.1);

    /* ---------- Tiefe ----------
       Die gemeinsame Rezeptur für alle erhabenen Flächen. Drei Schichten
       übereinander erzeugen Plastizität:
         1. ein Verlauf von oben hell nach unten dunkel (Lichteinfall)
         2. eine 1px-Innenkante oben (Materialkante)
         3. ein weit gestreuter Schatten nach unten (Abhebung)
       Stammt aus dem Wertlabor und gilt seit der Sektionsüberarbeitung für
       die ganze Seite — Prinzipien, Phasenspur und Schulformate teilen sie
       sich, damit die Seite eine Materialsprache spricht statt drei. */
    --panel-face: linear-gradient(163deg,
        rgba(255, 255, 255, 0.062) 0%,
        rgba(255, 255, 255, 0.016) 44%,
        rgba(0, 0, 0, 0.22) 100%);
    --panel-lift: 0 26px 50px -22px rgba(0, 0, 0, 0.85),
                  0 2px 6px rgba(0, 0, 0, 0.4),
                  inset 0 1px 0 rgba(255, 255, 255, 0.09);

    --border-radius: 24px;
    --radius-sm: 12px;
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    --page-max: 1280px;
    --page-pad: 48px;
    --section-gap: clamp(88px, 11vw, 160px);

    --splash-min-time: 2600ms;
    --splash-exit-duration: 700ms;
}

@media (max-width: 860px) {
    :root { --page-pad: 24px; }
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.65;
    font-weight: 400;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.no-scroll { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* Muss nach den Komponenten greifen: display-Regeln wie .btn { display:inline-flex }
   überstimmen sonst das UA-Stylesheet für [hidden]. */
[hidden] { display: none !important; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; }

:focus-visible {
    outline: 2px solid var(--gold-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection { background: var(--gold-accent-medium); color: #0E0E0E; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Typografie ----------
   Display-Skala: Mattone Black läuft breit, deshalb enges Tracking und
   Zeilenabstände unter 1. Headlines sind auf zwei bis vier Wörter angelegt. */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.025em;
    hyphens: none;
}

/* Maßgeblich für alle Größen unten sind gemessene Laufweiten in Mattone Black
   (Versalien, letter-spacing -0.03em), nicht geschätzte:

     „KLASSENZIMMER."  12,76 em   → längstes Wort der Seite
     „GRUNDLAGEN."     10,07 em
     „GENOMMEN."        8,54 em

   Daraus folgen die Grenzen: volle Breite = 1184 px, halbe Spalte = 552 px,
   Handy = 342 px. Wer hier Größen anhebt, prüft bitte gegen diese Zahlen —
   sonst bricht ein Wort mitten durch oder wird beschnitten. */
.display-xxl,
.display-xl,
.display-m {
    font-family: var(--font-display);
    font-weight: 900;
    text-wrap: balance;
    hyphens: none;
    /* Letzte Rückfallebene: lieber ein hartes Umbrechen als ein
       abgeschnittenes Wort im overflow-hidden der Zeilenmaske. */
    overflow-wrap: break-word;
}

.display-xxl {
    font-size: clamp(30px, 8.4vw, 172px);
    line-height: 0.86;
    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.display-xl {
    font-size: clamp(28px, 6.5vw, 92px);
    line-height: 0.92;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

/* Halbe Spalte: 552 / 12,76 = 43 px sind das Maximum für „KLASSENZIMMER.".
   Mit etwas Reserve also 42 px. */
.display-xl--column { font-size: clamp(24px, 2.9vw, 42px); }

.display-m {
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1.04;
    letter-spacing: -0.02em;
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold-accent);
}

.section-title { font-size: clamp(34px, 5vw, 58px); }

/* ---------- Brückenzeile ----------
   Der Faden zwischen den Sektionen. Steht über der Eyebrow und knüpft an
   die Frage an, die die vorige Sektion aufgeworfen hat — damit die Seite
   als eine Argumentation liest und nicht als Katalog. Die Haarlinie
   darüber ist der sichtbare Teil des Fadens. */
.bridge {
    position: relative;
    max-width: 40ch;
    margin-bottom: 26px;
    padding-top: clamp(40px, 5vw, 72px);
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.4;
    color: var(--text-faint);
}

/* Im .section-head sorgt bereits dessen `gap` für den Abstand —
   die eigene Marge käme sonst obendrauf. */
.section-head .bridge { margin-bottom: 0; }

.bridge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1px;
    width: 1px;
    height: clamp(28px, 3.5vw, 52px);
    background: linear-gradient(to bottom, transparent, var(--gold-accent-border));
}

.section-lead {
    max-width: 46ch;
    font-size: clamp(17px, 1.7vw, 21px);
    line-height: 1.45;
    color: var(--text-muted);
    text-wrap: balance;
}

.accent { color: var(--gold-accent); }

/* Akzentzeile unter einer Display-Headline */
.lede-accent {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(19px, 2.6vw, 34px);
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--gold-accent);
}

/* ---------- Soundbites ----------
   Eine Aussage pro Zeile. Ersetzt überall die früheren Absätze. */
.soundbites {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 0.8vw, 12px);
}

.soundbites li {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(20px, 2.5vw, 34px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--text-muted);
    transition: color 0.5s ease;
}

.soundbites li.is-key { color: var(--text-primary); }
.soundbites li.is-gold { color: var(--gold-accent); }

/* ---------- Parallax ----------
   motion.js setzt nur `--parallax-y`. Die Zusammensetzung macht CSS, damit
   Ebenen mit eigener Grundtransformation (z. B. zentrierte Elemente) diese
   behalten. Der Standardwert 0 sorgt dafür, dass schon der erste Frame
   korrekt sitzt — sonst springt die Ebene beim Laden an ihren Platz. */
[data-parallax],
[data-mouse] {
    transform: translate3d(var(--mouse-x, 0px),
                           calc(var(--parallax-y, 0px) + var(--mouse-y, 0px)), 0);
}

/* ---------- Grain ----------
   Feines Rauschen über der ganzen Seite: nimmt dunklen Flächen das Digitale.
   Als data-URI, damit kein zusätzlicher Request nötig ist. */
.grain {
    position: fixed;
    inset: -50%;
    z-index: 400;
    pointer-events: none;
    opacity: 0.038;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grainShift 8s steps(6) infinite;
}

@keyframes grainShift {
    0%   { transform: translate(0, 0); }
    16%  { transform: translate(-3%, -2%); }
    33%  { transform: translate(2%, -3%); }
    50%  { transform: translate(-2%, 2%); }
    66%  { transform: translate(3%, 1%); }
    83%  { transform: translate(-1%, 3%); }
    100% { transform: translate(0, 0); }
}

/* ---------- Laufband ----------
   Zwei identische Spuren nebeneinander, die erste schiebt sich um ihre eigene
   Breite nach links — dadurch ist der Übergang nahtlos, ohne Messung in JS. */
.marquee {
    position: relative;
    display: flex;
    overflow: hidden;
    padding-block: clamp(18px, 2.4vw, 34px);
    border-block: 1px solid var(--hairline);
    user-select: none;
}

.marquee--plain { border-block: 0; }

.marquee-track {
    display: flex;
    flex-shrink: 0;
    gap: clamp(28px, 4vw, 64px);
    padding-right: clamp(28px, 4vw, 64px);
    animation: marqueeRun var(--marquee-duration, 38s) linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-item {
    display: flex;
    align-items: center;
    gap: clamp(28px, 4vw, 64px);
    flex-shrink: 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(26px, 4.6vw, 68px);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    /* Outline-Typo: der Kern der Marquee-Optik */
    color: transparent;
    -webkit-text-stroke: 1px rgba(245, 242, 232, 0.32);
}

.marquee-item .dot {
    color: var(--gold-accent);
    -webkit-text-stroke: 0;
}

/* Jedes zweite Wort gefüllt statt Outline — erzeugt Rhythmus im Band */
.marquee-item:nth-child(even) {
    color: var(--gold-accent);
    -webkit-text-stroke: 0;
    opacity: 0.85;
}

@keyframes marqueeRun {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-100%, 0, 0); }
}

/* ---------- Layout ---------- */
.container {
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
    padding-inline: var(--page-pad);
}

.section { padding-block: var(--section-gap); }
.section--alt { background: var(--bg-secondary); }

.section-head {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 56px;
}

section[id] { scroll-margin-top: 96px; }

/* ---------- Buttons ---------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1.5px solid transparent;
    transition: var(--transition);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

/* Goldschimmer, der beim Hover einmal über den Button zieht */
.btn::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 -60%;
    z-index: -1;
    width: 55%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-18deg);
    transition: left 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover::after { left: 115%; }

.btn--primary {
    background: var(--gold-accent);
    color: #0E0E0E;
    font-weight: 700;
}

.btn--primary:hover {
    background: #D8C69E;
    transform: translateY(-2px);
    box-shadow: 0 14px 38px rgba(200, 180, 138, 0.28);
}

.btn--ghost {
    border-color: var(--gold-accent-border);
    color: var(--text-primary);
}

.btn--ghost:hover {
    background: var(--gold-accent-light);
    border-color: var(--gold-accent);
    transform: translateY(-2px);
}

.btn--link {
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--gold-accent);
    border-bottom: 1px solid var(--gold-accent-medium);
    border-radius: 0;
}

.btn--link:hover { border-bottom-color: var(--gold-accent); }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* ---------- Header ---------- */
.header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 900;
    background: transparent;
    transition: transform 0.35s ease, background 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease;
}

.header.is-scrolled {
    background: rgba(14, 14, 14, 0.94);
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 var(--hairline);
}

.header.is-hidden { transform: translateY(-100%); }

/* Solange Splash oder Intro laufen, bleibt der Header aus dem Weg */
body.is-gated .header { opacity: 0; pointer-events: none; }

.nav {
    display: flex;
    align-items: center;
    gap: 32px;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 20px var(--page-pad);
}

/* Nur die Wortmarke — das Emblem bleibt dem Splash und dem Favicon vorbehalten */
.nav-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-logo-type {
    height: 24px;
    width: auto;
    transition: opacity 0.3s ease;
}

.nav-logo:hover .nav-logo-type { opacity: 0.75; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    flex: 1;
    justify-content: center;
}

.nav-link {
    position: relative;
    font-size: 14px;
    letter-spacing: 0.03em;
    color: var(--text-primary);
    padding: 6px 0;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1.5px;
    background: var(--gold-accent);
    transition: width 0.3s ease;
}

.nav-link:hover { color: var(--gold-accent); }
.nav-link:hover::after { width: 100%; }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Sprachumschalter */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
}

.lang-switch button {
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    transition: var(--transition);
}

.lang-switch button:hover { color: var(--text-primary); }

.lang-switch button[aria-pressed="true"] {
    background: var(--gold-accent-light);
    color: var(--gold-accent);
}

.nav-actions .btn { padding: 11px 22px; font-size: 14px; }

.nav-toggle {
    display: none;
    width: 42px; height: 42px;
    align-items: center; justify-content: center;
    border: 1px solid var(--hairline);
    border-radius: 999px;
}

.nav-toggle span {
    position: relative;
    display: block;
    width: 16px; height: 1.5px;
    background: var(--text-primary);
    transition: var(--transition);
}

.nav-toggle span::before,
.nav-toggle span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 16px; height: 1.5px;
    background: var(--text-primary);
    transition: var(--transition);
}

.nav-toggle span::before { top: -5px; }
.nav-toggle span::after { top: 5px; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 900px) {
    .nav-toggle { display: flex; }
    .nav-links {
        position: absolute;
        top: 100%; left: var(--page-pad); right: var(--page-pad);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 20px;
        background: rgba(20, 20, 20, 0.98);
        backdrop-filter: blur(20px);
        border: 1px solid var(--hairline);
        border-radius: var(--radius-sm);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: var(--transition);
    }
    .nav-links.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
    .nav-link { padding: 10px 0; font-size: 16px; }
    .nav-actions .btn { display: none; }
}

/* ---------- Karten ---------- */
.card {
    position: relative;
    padding: 30px;
    background: var(--bg-elevated);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.card:hover {
    border-color: var(--gold-accent-border);
    transform: translateY(-4px);
}

.card h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.card p {
    font-size: 15px;
    color: var(--text-muted);
}

/* ============================================
   XXL-FOOTER
   Vier Zonen: Abschluss-CTA · Spalten · angeschnittene Wortmarke · Rechtliches
   ============================================ */
.footer {
    position: relative;
    background: var(--bg-secondary);
    border-top: 1px solid var(--hairline);
    overflow: hidden;
}

/* Goldschimmer oben, der den Übergang aus der Seite weich macht */
.footer::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: min(1100px, 120vw);
    height: 420px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 0%, rgba(200, 180, 138, 0.11), transparent 68%);
    pointer-events: none;
}

.footer > * { position: relative; }

/* --- Zone 1: Abschluss-CTA --- */
.footer-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(28px, 5vw, 72px);
    padding-block: clamp(72px, 10vw, 132px) clamp(48px, 6vw, 80px);
}

.footer-cta h2 { max-width: 14ch; }

.footer-cta-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
}

.footer-cta-line {
    max-width: 34ch;
    font-size: clamp(15px, 1.5vw, 18px);
    color: var(--text-muted);
}

/* --- Zone 2: Spalten --- */
.footer-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 56px);
    padding-block: clamp(40px, 5vw, 64px);
    border-top: 1px solid var(--hairline);
}

.footer h4 {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 20px;
}

.footer-links li + li { margin-top: 12px; }

.footer-links a,
.footer-links button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: var(--text-muted);
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-links a:hover,
.footer-links button:hover {
    color: var(--gold-accent);
    transform: translateX(4px);
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    transition: var(--transition);
}

.footer-social a:hover {
    border-color: var(--gold-accent-border);
    color: var(--gold-accent);
    transform: translateY(-3px);
}

.footer-social svg { width: 17px; height: 17px; }

.footer-lang {
    display: flex;
    gap: 4px;
    margin-top: 22px;
}

.footer-lang button {
    padding: 7px 15px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    transition: var(--transition);
}

.footer-lang button:hover { color: var(--text-primary); }

.footer-lang button[aria-pressed="true"] {
    background: var(--gold-accent-light);
    border-color: var(--gold-accent-border);
    color: var(--gold-accent);
}

/* --- Zone 3: Wortmarke über die volle Breite, vollständig sichtbar --- */
.footer-wordmark {
    position: relative;
    margin-top: clamp(20px, 3vw, 44px);
    margin-bottom: clamp(16px, 2.4vw, 32px);
}

.footer-wordmark img {
    width: 100%;
    height: auto;
    opacity: 0.92;
}

/* --- Zone 4: Rechtliches --- */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-block: 26px;
    border-top: 1px solid var(--hairline);
    font-size: 13px;
    color: var(--text-faint);
}

.footer-bottom nav {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-bottom a { transition: color 0.3s ease; }
.footer-bottom a:hover { color: var(--gold-accent); }

.to-top {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.to-top:hover { color: var(--gold-accent); }
.to-top svg { width: 14px; height: 14px; transition: transform 0.3s ease; }
.to-top:hover svg { transform: translateY(-3px); }

@media (max-width: 900px) {
    .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
}

@media (max-width: 520px) {
    .footer-cols { grid-template-columns: 1fr; }
    .footer-cta { flex-direction: column; align-items: flex-start; }
}

/* ============================================
   SCROLL-REVEAL
   ============================================ */
.reveal,
[data-reveal] {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal,
[data-reveal="up"] { transform: translateY(26px); }
[data-reveal="fade"] { transform: none; }
[data-reveal="scale"] { transform: scale(0.955); }
[data-reveal="left"] { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }

.reveal.is-visible,
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Zeilenweiser Reveal für Headlines: motion.js legt jede Zeile in einen
   overflow-hidden-Rahmen, die Zeile selbst schiebt sich von unten herein. */
/* overflow:hidden beschneidet den Rahmen auf allen Seiten. Bei line-height
   unter 1 liegt die Zeilenbox tiefer als die Glyphen: ohne Luft nach oben
   verlieren Ä, Ö und Ü ihre Punkte — aus „GRÜNDEN" wird „GRUNDEN".
   Also rundum Platz schaffen und per negativem Rand wieder ausgleichen. */
.line-mask {
    display: block;
    overflow: hidden;
    padding: 0.22em 0.08em 0.1em;
    margin: -0.22em -0.08em -0.1em;
}

.line-mask > span {
    display: block;
    transform: translateY(105%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--line-delay, 0ms);
}

[data-reveal="lines"].is-visible .line-mask > span { transform: none; }

/* Solange die Zeilen noch nicht vermessen sind, bleibt der Text sichtbar —
   sonst blitzt bei langsamem JS eine leere Headline auf. */
[data-reveal="lines"] { opacity: 1; transform: none; }
[data-reveal="lines"].is-split { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .reveal,
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }

    .line-mask > span { transform: none !important; transition: none; }

    .marquee-track,
    .grain { animation: none !important; }

    .grain { display: none; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}