/* ============================================================
   Landing Page 4 · Mehr über Democracy Intelligence (One Page)
   Ergänzt css/lp.css: gleiche Breite, gleiche Kopfzeile, DI-Farben.
   Durchgehend Lila mit freiem Text, großen Sätzen und weißen Karten;
   Dunkelblau erst ab „Demokratie entsteht nicht von selbst".
   Schriften: Montserrat nur für Überschriften, Namen und Knöpfe – aller Lesetext in Inter.
   Zwei Textstufen: groß (24 px) und Fließtext (20 px). Drei Kartenarten: weiß, Wichtig, Premium.
   Abstände nach festem Raster (--abstand).
   Bezüge und Prototypen als Stapel: jede Karte legt sich beim Scrollen
   über die vorige.
   ============================================================ */

html:has(body.lp4), body.lp4 { overflow-x: clip; }
.lp4 { --abstand: 120px; --karte-schatten: 0 1px 2px rgba(30, 27, 75, .05), 0 22px 56px rgba(30, 27, 75, .09); }   /* Karten in Bewegung lassen nie seitlich scrollen */
.lp4 .unter-kopf { padding-top: calc(var(--kopf-hoehe) + 64px); padding-bottom: 8px; }
.lp4 .hero { padding-bottom: 56px; }
.hero--lp4 .hero-titel .zeile-2 { margin-top: 24px; font-size: 38px; line-height: 48px; }   /* Unterzeile auf LP 4 größer */
.lp4 strong { font-weight: 600; color: var(--ink); }

/* Fließtext: linksbündig mit sauberer Silbentrennung gemäß DI-Qualitätsstandard */
.lp4 .fliesstext, .lp4 .lead, .gross-text, .wichtig-text, .weg-text {
  text-align: left;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-wrap: pretty;
}

/* Schriftstufen */
/* Stufe 1 – groß: Einstieg, Kernsätze, Wichtig */
.lead, .gross-text, .wichtig-text { margin: 0; font-size: 24px; line-height: 38px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); }
/* Stufe 2 – Fließtext: 20 px aus base.css */
.lp4 .fliesstext { color: var(--text); }
.trenn-oben { margin-top: 32px !important; padding-top: 32px; border-top: 1px solid rgba(20, 26, 46, .10); }

/* Breite aller Blöcke = Breite der Glas-Karten (wie Spendenmaske und Karte auf LP 1–3) */
.karte .wrap, .satz-block .wrap, .abschnitt .wrap { max-width: calc(var(--wrap) - 2 * var(--gutter)); padding: 0; }

/* ---------- Weiße Glas-Karten ---------- */
.karte + .karte { margin-top: 20px; }
.karte .wrap {
  position: relative; padding: 56px 64px 60px; border-radius: 28px;
  background: #fff; box-shadow: var(--karte-schatten);
}

/* Überschrift in der Karte, darunter kleine Trennlinie im Verlauf */
.karte h2 { margin-bottom: 28px; font-size: 36px; line-height: 44px; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.lp4 .karte .akzent { display: none; }   /* keine Striche unter den Überschriften */
.nach-stapel { margin-top: var(--abstand); }

/* ---------- Kapitelüberschriften frei auf Lila ---------- */
.abschnitt { padding: var(--abstand) 0 48px; }
.abschnitt-lead { margin-top: 32px; }
.abschnitt-titel { text-align: center; font-size: 40px; line-height: 50px; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
@media (min-width: 960px) { .abschnitt-titel { margin-inline: -32px; } }

/* ---------- Große Sätze ohne Karte (füllen sich Buchstabe für Buchstabe) ---------- */
.satz-block { padding: var(--abstand) 0; }
.gross-satz { margin: 0; text-align: center; text-wrap: balance; font-family: var(--font-head); font-size: 44px; line-height: 54px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.gross-satz--frage { margin-bottom: 44px; font-family: var(--font-body); font-size: 30px; line-height: 42px; font-weight: 600; letter-spacing: -0.022em; }   /* langer Satz: Inter */
@media (min-width: 960px) { .gross-satz { margin-inline: -48px; } }
.gross-satz .wort { white-space: nowrap; }

/* ---------- Bezüge und Prototypen: großer Name, Zusatz, großer Text ---------- */
.bezug h3 { font-size: 44px; line-height: 50px; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); }
.bezug-unter { margin: 8px 0 22px; font-size: 21px; line-height: 29px; font-weight: 600; color: var(--brand); }
.bezug h3 + .gross-text { margin-top: 16px; }

/* ---------- Stapel: jede Karte bleibt oben stehen, die nächste legt sich darüber ----------
   js/lp4.js setzt --d (0…1): wie weit eine Karte schon überdeckt ist – sie tritt dann leicht zurück. */
.stapel .karte { position: sticky; top: calc(var(--kopf-hoehe) + 28px); }
.stapel .karte + .karte { margin-top: 36px; }
.stapel .karte .wrap {
  transform-origin: 50% 0; transform: scale(calc(1 - .05 * var(--d, 0)));
  box-shadow: 0 -10px 40px rgba(30, 27, 75, .07), var(--karte-schatten);   /* Schatten nach oben, damit sich die Karten sichtbar überlagern */
}
.stapel .karte .wrap > * { opacity: calc(1 - .55 * var(--d, 0)); }
.stapel .karte:nth-child(2) { top: calc(var(--kopf-hoehe) + 40px); }
.stapel .karte:nth-child(3) { top: calc(var(--kopf-hoehe) + 52px); }
.stapel .karte:nth-child(4) { top: calc(var(--kopf-hoehe) + 64px); }
.stapel .karte:nth-child(5) { top: calc(var(--kopf-hoehe) + 76px); }

/* ---------- Hinweise: Wichtig (orange umrandet) und Stand der Arbeit ---------- */
.karte--wichtig .wrap { background: #fff; border: 2.5px solid #f0850a; box-shadow: 0 0 0 6px rgba(240, 133, 10, .08), 0 24px 64px rgba(184, 98, 0, .12); }
.ausrufe {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: #f0850a; color: #fff; font-family: var(--font-head); font-size: 19px; font-weight: 700; line-height: 1; flex: 0 0 auto;
}
.hinweis-titel { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font-family: var(--font-head); font-size: 24px; line-height: 30px; font-weight: 700; color: #c96a00; }
.hinweis-titel .ausrufe { width: 38px; height: 38px; font-size: 22px; }
.hinweis-zeile { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: start; }
.hinweis-zeile .ausrufe { margin-top: 2px; }
.lp4 .stand { margin: 0; }   /* Hinweis: normale weiße Karte, Fließtext mit orangem ! */

/* ---------- Dunkelblau: drei Wege ---------- */
.lp4 .dunkel h2 { color: #fff; }
.lp4 .dunkel .fliesstext { color: rgba(255, 255, 255, .84); }
.wege { padding: var(--abstand) 0 96px; scroll-margin-top: var(--kopf-hoehe); }
.wege-kopf { max-width: 720px; margin: 0 auto 52px; }
.wege h2 { text-align: center; font-size: 42px; line-height: 52px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 26px; }
@media (min-width: 960px) { .wege h2 { margin-inline: -88px; } }
.wege .fliesstext.mitte { font-size: 21px; line-height: 35px; text-align-last: center; }
.wege-wahl { margin: 44px 0 0; text-align: center; font-size: 24px; line-height: 34px; font-weight: 600; letter-spacing: -0.015em; color: #fff; }
/* Schlusszeile: wischt sich beim Scrollen von links nach rechts ein (js/lp4.js setzt --p) */
.lp4 .dunkel h2.wischen {
  background-image: linear-gradient(90deg,
    #fff 0%, #fff calc(var(--p, 1) * 118% - 14%),
    #7fd0ec calc(var(--p, 1) * 118% - 6%), #f0a3ff calc(var(--p, 1) * 118%),
    rgba(255, 255, 255, .16) calc(var(--p, 1) * 118% + 8%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wege-liste { display: grid; gap: 24px; }
.weg {   /* großzügige helle Glas-Karte je Weg, ganz klickbar */
  display: grid; row-gap: 22px; padding: 56px 64px 60px; border-radius: 28px;
  background: #fff;
  position: relative; z-index: 1;   /* Schein der Premium-Karte liegt unter den hellen Karten */
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28); text-decoration: none; color: var(--ink);
  transition: background .3s ease, box-shadow .3s ease;
}
.weg:hover { color: var(--ink); box-shadow: 0 30px 72px rgba(0, 0, 0, .34); }
/* Förderer:in: Premium-Karte – tiefes Nachtblau, ein weiches Licht im DI-Verlauf,
   feine Haarlinie mit Lichtkante oben. Zurückhaltend statt bunt. */
.weg--premium {
  position: relative; z-index: 0; isolation: isolate; overflow: hidden; color: #fff;
  padding: 64px 64px 68px;
  border: 1px solid transparent;   /* Haarlinie im DI-Verlauf, oben links und unten rechts heller */
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(192, 38, 211, .24) 0%, rgba(124, 58, 237, .09) 45%, transparent 70%) padding-box,
    radial-gradient(60% 80% at 0% 100%, rgba(59, 143, 184, .18) 0%, transparent 65%) padding-box,
    linear-gradient(180deg, #1c2242 0%, #11162f 100%) padding-box,
    linear-gradient(135deg, rgba(127, 208, 236, .55), rgba(255, 255, 255, .10) 35%, rgba(255, 255, 255, .06) 60%, rgba(240, 163, 255, .6)) border-box;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .5), 0 0 90px rgba(192, 38, 211, .12);
  transition: box-shadow .4s ease;
}
.weg--premium::before {   /* Lichtkante oben */
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(127, 208, 236, .9) 30%, rgba(240, 163, 255, .9) 70%, transparent);
}
.weg--premium::after {    /* weicher Schein, der beim Hover etwas heller wird */
  content: ""; position: absolute; z-index: -1; top: -40%; right: -20%; width: 70%; height: 120%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(240, 163, 255, .16), transparent); opacity: .7; transition: opacity .4s ease;
}
.weg--premium:hover { color: #fff; box-shadow: 0 44px 110px rgba(0, 0, 0, .55), 0 0 110px rgba(192, 38, 211, .22); }
.weg--premium:hover::after { opacity: 1; }
.weg--premium .weg-name { color: #fff; }
.weg--premium .weg-satz { background: linear-gradient(90deg, #7fd0ec, #f0a3ff); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.weg--premium .weg-text { color: rgba(255, 255, 255, .78); }
.weg--premium .weg-knopf { background: #fff; color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.weg--premium .weg-knopf .pfeil { color: #c026d3; }
.weg-kopf { display: block; }
.weg-name { display: block; font-family: var(--font-head); font-size: 36px; line-height: 42px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.weg-satz { display: block; margin-top: 8px; font-size: 22px; line-height: 30px; font-weight: 600; color: var(--brand); }
.weg-text { display: block; font-size: 20px; line-height: 33px; color: var(--text); }
.weg-knopf { justify-self: start; margin-top: 8px; min-height: 64px; padding: 0 36px; font-size: 18px; }
.weg-knopf .pfeil { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.weg:hover .weg-knopf .pfeil { transform: translateX(4px); }
.wege-mehr { margin: 52px 0 0; text-align: center; font-size: 18px; }

/* ---------- Mobil ---------- */
@media (max-width: 720px) {
  .lp4 { --abstand: 72px; }
  .lp4 .hero { padding-bottom: 32px; }
  .hero--lp4 .hero-titel .zeile-2 { font-size: 23px; line-height: 31px; margin-top: 14px; }
  .karte h2 { font-size: 27px; line-height: 35px; }
  .stapel .karte { position: static; }   /* auf dem Handy untereinander, ohne Stapel */
  .stapel .karte + .karte { margin-top: 14px; }
  .stapel .karte .wrap { transform: none; }
  .stapel .karte .wrap > * { opacity: 1; }
  .abschnitt-lead { margin-top: 22px; }
  .lead, .gross-text, .wichtig-text { font-size: 20px; line-height: 31px; }
  .karte .wrap, .satz-block .wrap, .abschnitt .wrap { max-width: none; margin: 0 16px; }
  .karte + .karte { margin-top: 14px; }
  .karte .wrap { padding: 32px 22px 36px; border-radius: 20px; }
  .karte h2 { margin-bottom: 20px; }
  .abschnitt { padding: var(--abstand) 0 28px; }
  .abschnitt-titel { font-size: 29px; line-height: 37px; }
  .gross-satz.gross-satz--frage { margin-bottom: 30px; font-size: 23px; line-height: 32px; }
  .gross-satz { font-size: 30px; line-height: 38px; }
  .bezug h3 { font-size: 32px; line-height: 38px; }
  .bezug-unter { font-size: 18px; line-height: 25px; margin-bottom: 14px; }
  .hinweis-titel { font-size: 20px; }
  .hinweis-zeile { column-gap: 12px; }
  .wege { padding: var(--abstand) 0 56px; }
  .wege h2 { font-size: 30px; line-height: 38px; }
  .wege h2 br { display: none; }
  .wege .fliesstext.mitte { font-size: 18px; line-height: 30px; }
  .wege-wahl { margin: 30px 0 0; font-size: 20px; line-height: 28px; }
  .wege-kopf { margin-bottom: 30px; }
  .weg { row-gap: 16px; padding: 32px 22px 36px; border-radius: 20px; }
  .weg-name { font-size: 27px; line-height: 33px; }
  .weg-satz { font-size: 18px; line-height: 26px; }
  .weg-text { font-size: 17px; line-height: 28px; }
  .weg-knopf { justify-self: stretch; min-height: 58px; font-size: 17px; }
}