/* ═══════════════════════════════════════════════════════════════════════
   LANDINGPAGE  ·  /test1/
   ───────────────────────────────────────────────────────────────────────
   Eigene Datei, damit die bestehende Website unberührt bleibt: styles.css
   wird von 25 Seiten geladen, hier greift nichts davon ineinander.

   Farbigkeit: Weiß als Grundton, Marineblau als Anker, Rot nur noch als
   Akzent auf den Knöpfen. Blau steht für Verlässlichkeit — und es gibt der
   Seite einen zweiten Ton, den das frühere Creme-auf-Schwarz nicht hatte.
   Jeder Abschnitt wechselt die Fläche: weiß, hellblau, dunkel. Der Wechsel
   gibt den Takt, den gleich aussehende Blöcke hintereinander nie haben.

   Alles unter `.ls` gekapselt.
   ═══════════════════════════════════════════════════════════════════════ */

.ls {
    /* Flächen */
    --weiss: #ffffff;
    --nebel: #f2f6fb;
    --nebel-2: #e7eef7;
    --tiefe: #0c1e33;
    --tiefe-2: #13293f;

    /* Schrift */
    --tinte: #131d29;
    --tinte-2: #2c3a4a;
    --grau: #5c6879;
    --grau-2: #6b7686;   /* 4,6:1 auf Weiß — vorher 3,0 und damit unter der Grenze */

    /* Akzente */
    --blau: #1a5fa8;
    --blau-hell: #3a8ade;
    --blau-tint: #e8f0fb;
    --rot: #c8202c;
    --gold: #b8912a;
    --gold-text: #8a6c1f;   /* dieselbe Farbe, nur lesbar: 4,95:1 statt 2,95 */

    --linie: #dde5ee;
    --serif: 'Playfair Display', Georgia, serif;
    --t: cubic-bezier(.2, .7, .2, 1);

    background: var(--weiss);
    color: var(--tinte);
    font-family: 'Inter', system-ui, sans-serif;
    overflow-x: hidden;
}

.ls *, .ls *::before, .ls *::after { box-sizing: border-box; }

/* `:where()` zählt bei der Spezifität nicht mit — sonst schlägt dieser Reset
   (`.ls p` = Klasse + Element) jede spätere Klassenregel wie `.ls-hero__lead`
   und alle Abstände zwischen Absätzen und Überschriften fallen still weg.
   Genau das ist hier passiert: Die Seite wirkte gedrängt, obwohl die
   Abstände im Stylesheet standen. */
.ls :where(h1, h2, h3, h4) { margin: 0; font-family: var(--serif); font-weight: 700; }
.ls :where(p) { margin: 0; }
/* Auch hier `:where()`, und zwar aus demselben Grund: `.ls a` schlug
   `.ls-btn` und erzwang `color: inherit` auf den Knöpfen. Auf hellem Grund
   ergab das schwarze Schrift auf Blau — Kontrast 2,6 statt der geforderten
   4,5. Ausgerechnet auf dem wichtigsten Knopf der Seite. */
.ls :where(a) { color: inherit; }

.ls__in { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.ls__in--eng { max-width: 900px; }

/* Auszeichnung über jedem Abschnitt */
.ls-kicker {
    /* `flex-start` statt `center`: Ein langer Kicker bricht um, und der
       rote Strich säße sonst mittig zwischen beiden Zeilen statt am Anfang. */
    display: inline-flex; align-items: flex-start; gap: 10px;
    font-size: .68rem; font-weight: 700; letter-spacing: .24em;
    text-transform: uppercase; color: var(--blau);
}
.ls-kicker::before {
    content: ""; width: 26px; height: 2px; flex: none;
    background: var(--rot); margin-top: .58em;
}

.ls-h2 {
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    line-height: 1.08; letter-spacing: -.025em;
    margin: 16px 0 0; text-wrap: balance; color: var(--tinte);
}
.ls-h2 em { font-style: italic; font-weight: 400; color: var(--blau); }
.ls-lead {
    margin-top: 18px; max-width: 62ch;
    font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.68; color: var(--grau);
}

/* Knopf */
/* Blau statt Rot: Rot auf Weiß mit weißer Schrift flimmert, und es steht in
   Konkurrenz zum roten Strich der Auszeichnungen. Blau trägt hier dieselbe
   Aufforderung, ohne sich mit dem Text zu beißen. */
.ls-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 17px 32px; border: 0; cursor: pointer; border-radius: 6px;
    font-size: 1rem; font-weight: 700; letter-spacing: -.005em;
    background: var(--blau); color: #fff; text-decoration: none;
    box-shadow: 0 8px 22px rgba(26, 95, 168, .26);
    transition: background .2s var(--t), transform .14s var(--t), box-shadow .2s var(--t);
}
.ls-btn:hover { background: #14487f; box-shadow: 0 12px 28px rgba(26, 95, 168, .34); }
.ls-btn:active { transform: translateY(1px); }
.ls-btn--geist {
    background: transparent; color: var(--blau); box-shadow: none;
    border: 1.5px solid var(--linie); font-weight: 600;
}
.ls-btn--geist:hover { background: var(--blau-tint); border-color: var(--blau); box-shadow: none; }

/* ── Kopfzeile ───────────────────────────────────────────────────────── */
.ls-nav {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255, 255, 255, .93); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--linie);
}
.ls-nav__in {
    max-width: 1180px; margin: 0 auto; padding: 14px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.ls-nav__logo { display: flex; align-items: center; flex: none; }
/* Deutlich größer als zuvor — die Marke soll man sehen. */
.ls-nav__logo img { height: 48px; width: auto; display: block; }
@media (max-width: 560px) { .ls-nav__logo img { height: 38px; } }
.ls-nav__links { display: none; gap: 26px; font-size: .92rem; font-weight: 500; color: var(--grau); }
@media (min-width: 900px) { .ls-nav__links { display: flex; align-items: center; } }
.ls-nav__links a { text-decoration: none; transition: color .2s var(--t); }
.ls-nav__links a:hover { color: var(--blau); }
.ls-nav__heim {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--tinte); font-weight: 600;
}
.ls-nav__heim::before { content: "←"; font-size: 1rem; line-height: 1; color: var(--blau); }
.ls-nav__trenner { width: 1px; height: 18px; background: var(--linie); flex: none; }

/* ── Aufmacher ───────────────────────────────────────────────────────── */
.ls-hero { position: relative; padding: 76px 0 88px; overflow: hidden; background: var(--weiss); }
.ls-hero::before {
    content: ""; position: absolute; z-index: 0;
    top: -34%; right: -14%; width: 820px; height: 820px;
    background: radial-gradient(circle, rgba(58, 138, 222, .14), transparent 64%);
    pointer-events: none;
}
.ls-hero__in { position: relative; z-index: 1; }
.ls-hero__grid { display: grid; gap: 54px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .ls-hero__grid { grid-template-columns: 1.02fr .98fr; gap: 62px; } }

.ls-hero__title {
    font-size: clamp(2.4rem, 6.2vw, 4.7rem);
    line-height: 1; letter-spacing: -.032em; margin-top: 20px;
    text-wrap: balance; color: var(--tinte);
}
.ls-hero__title em { font-style: italic; font-weight: 400; color: var(--blau); }
.ls-hero__lead {
    margin-top: 24px; max-width: 52ch;
    font-size: clamp(1.02rem, 1.4vw, 1.14rem); line-height: 1.68; color: var(--grau);
}
.ls-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.ls-hero__unten {
    margin-top: 34px; font-size: .86rem; color: var(--tinte-2); font-weight: 500;
    display: flex; flex-wrap: wrap; gap: 12px 28px;
}
.ls-hero__unten span { display: inline-flex; align-items: center; gap: 8px; }
.ls-hero__unten span::before {
    content: "✓"; color: #fff; background: var(--blau);
    width: 18px; height: 18px; border-radius: 50%;
    display: grid; place-items: center; font-size: .62rem; font-weight: 700; flex: none;
}

/* ── Musterartikel ───────────────────────────────────────────────────── */
.ls-mag {
    position: relative; background: var(--weiss); color: var(--tinte);
    padding: 30px 30px 26px; border: 1px solid var(--linie); border-radius: 8px;
    box-shadow: 0 30px 70px rgba(12, 30, 51, .14);
    transform: rotate(-.8deg); transition: transform .5s var(--t), box-shadow .5s var(--t);
}
.ls-mag:hover { transform: rotate(0deg); box-shadow: 0 36px 84px rgba(12, 30, 51, .19); }
@media (min-width: 1000px) { .ls-mag { padding: 38px 40px 34px; } }

.ls-mag__kopf {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; padding-bottom: 12px; margin-bottom: 20px;
    border-bottom: 2px solid var(--tiefe);
}
.ls-mag__blatt {
    font-family: var(--serif); font-weight: 800; font-size: 1.12rem;
    letter-spacing: -.01em; min-height: 1.3em; color: var(--tiefe);
}
.ls-mag__ausgabe {
    font-size: .6rem; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--grau-2);
}
.ls-mag__rubrik {
    font-size: .6rem; font-weight: 800; letter-spacing: .2em;
    text-transform: uppercase; color: var(--rot); margin-bottom: 10px;
}
.ls-mag__zeile {
    font-family: var(--serif); font-weight: 800;
    font-size: clamp(1.5rem, 2.9vw, 2.1rem); line-height: 1.1;
    letter-spacing: -.022em; margin: 0 0 14px; color: var(--tinte);
}
.ls-mag__name {
    background: linear-gradient(transparent 62%, rgba(58, 138, 222, .34) 62%);
    padding: 0 2px;
}
.ls-mag__vorspann { font-size: .88rem; line-height: 1.62; color: var(--grau); margin-bottom: 18px; }
.ls-mag__vorspann::first-letter {
    font-family: var(--serif); font-weight: 800; font-size: 2.6em;
    line-height: .8; float: left; margin: .04em .09em 0 0; color: var(--blau);
}
.ls-mag__satz { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.ls-mag__zeilen { display: grid; gap: 7px; }
.ls-mag__zeilen i { display: block; height: 6px; background: var(--nebel-2); border-radius: 2px; }
.ls-mag__zeilen i:nth-child(4n) { width: 72%; }
.ls-mag__zeilen i:nth-child(7n) { width: 88%; }
.ls-mag__fuss {
    margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--linie);
    font-size: .62rem; letter-spacing: .04em; color: var(--grau-2);
}

/* Eingabe für den eigenen Namen */
.ls-probe {
    margin-top: 22px; padding: 20px 22px; border-radius: 8px;
    background: var(--blau-tint); border: 1px solid #cfe0f5;
}
.ls-probe label {
    display: block; font-size: .64rem; font-weight: 800; letter-spacing: .18em;
    text-transform: uppercase; color: var(--blau); margin-bottom: 9px;
}
.ls-probe input {
    width: 100%; border: 0; border-bottom: 2px solid #bcd3ee; background: transparent;
    color: var(--tinte); font-family: var(--serif); font-size: 1.22rem; font-weight: 700;
    padding: 6px 2px; transition: border-color .2s var(--t);
}
.ls-probe input:focus { outline: none; border-bottom-color: var(--blau); }
.ls-probe input::placeholder { color: #9db6d3; font-weight: 400; font-style: italic; }
.ls-probe__hint { margin-top: 9px; font-size: .76rem; color: var(--grau); }

/* ── Logowand ────────────────────────────────────────────────────────── */
.ls-wand { padding: 76px 0; background: var(--nebel); border-block: 1px solid var(--linie); overflow: hidden; }
.ls-wand__kopf { text-align: center; margin-bottom: 44px; }
.ls-wand__kopf .ls-kicker { justify-content: center; }
.ls-wand__kopf .ls-h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }

.ls-wand__reihe { display: flex; width: max-content; align-items: stretch; }
.ls-wand__reihe + .ls-wand__reihe { margin-top: 16px; }
.ls-wand__reihe--links { animation: ls-wand-links 70s linear infinite; }
.ls-wand__reihe--rechts { animation: ls-wand-rechts 78s linear infinite; }
.ls-wand:hover .ls-wand__reihe { animation-play-state: paused; }

.ls-wand__kachel {
    flex: none; display: grid; place-items: center;
    width: 178px; height: 74px; margin: 0 8px; padding: 12px 16px;
    background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px;
    transition: transform .3s var(--t), box-shadow .3s var(--t), border-color .3s var(--t);
}
.ls-wand__kachel:hover {
    transform: translateY(-4px); border-color: #c3d6ea;
    box-shadow: 0 12px 26px rgba(12, 30, 51, .12);
}

/* Sechs Logos sind für dunklen Grund gezeichnet — helles Gold, weiße Schrift,
   bei „Speaker Magazin" sogar ein schwarzer Bildhintergrund, der auf Weiß als
   Kasten hervortritt. Statt sie umzufärben (das zerstört Logos mit eingebauter
   Grafik) bekommt die Kachel den Grund, für den das Logo gemacht ist.

   Drei dieser Logos bringen ihre eigene undurchsichtige Fläche mit. Für die
   trägt die Kachel per `--kachel` genau deren Farbe, sonst zeichnet sich das
   Bildrechteck als Kasten auf der Kachel ab. */
.ls-wand__kachel--dunkel {
    background: var(--kachel, var(--tiefe));
    border-color: var(--kachel, var(--tiefe));
}
.ls-wand__kachel--dunkel:hover { border-color: var(--blau-hell); }

/* Feste Breite plus Höhendeckel statt „so groß wie möglich": Sonst füllt ein
   kompaktes, fast quadratisches Logo (Startup Spirit) die ganze Kachelhöhe und
   erschlägt die flachen daneben. So ist die gerenderte Größe über alle
   Seitenverhältnisse hinweg ausgeglichen — ganz ohne Werte pro Datei. */
.ls-wand__logo {
    width: 120px; max-width: 100%; max-height: 40px;
    object-fit: contain; object-position: center;
}

@keyframes ls-wand-links  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes ls-wand-rechts { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.ls-wand__fuss { margin-top: 62px; text-align: center; font-size: .9rem; color: var(--grau); }

/* ── Belege ──────────────────────────────────────────────────────────── */
.ls-belege { padding: 96px 0; background: var(--weiss); }
.ls-belege__raster { margin-top: 50px; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .ls-belege__raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ls-belege__raster { grid-template-columns: repeat(4, 1fr); } }

.ls-fenster {
    background: var(--weiss); border: 1px solid var(--linie);
    border-radius: 8px; overflow: hidden;
    box-shadow: 0 10px 26px rgba(12, 30, 51, .08);
    transition: transform .35s var(--t), box-shadow .35s var(--t), border-color .35s var(--t);
}
.ls-fenster__leiste {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-bottom: 1px solid var(--linie); background: var(--nebel);
}
.ls-fenster__punkte { display: flex; gap: 5px; flex: none; }
.ls-fenster__punkte i { width: 8px; height: 8px; border-radius: 50%; background: #cbd6e3; }
.ls-fenster__adresse {
    flex: 1; min-width: 0; padding: 3px 10px; border-radius: 20px;
    background: var(--weiss); border: 1px solid var(--linie);
    font-size: .62rem; color: var(--grau-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ls-fenster img { display: block; width: 100%; height: auto; }

.ls-beleg { display: flex; flex-direction: column; }
.ls-beleg:hover .ls-fenster {
    transform: translateY(-6px); border-color: #b9d0e8;
    box-shadow: 0 22px 44px rgba(12, 30, 51, .16);
}
.ls-beleg__unten { padding: 16px 2px 0; }
.ls-beleg__blatt {
    font-size: .62rem; font-weight: 800; letter-spacing: .18em;
    text-transform: uppercase; color: var(--blau);
}
.ls-beleg__titel {
    font-family: var(--serif); font-size: 1rem; font-weight: 700;
    line-height: 1.3; margin-top: 8px; letter-spacing: -.01em; color: var(--tinte);
}
.ls-beleg__wer { margin-top: 6px; font-size: .82rem; color: var(--grau); }

/* ── Problem ─────────────────────────────────────────────────────────── */
.ls-problem { padding: 96px 0; background: var(--tiefe); color: #e8f0fb; }
.ls-problem .ls-h2 { color: #fff; }
.ls-problem .ls-h2 em { color: var(--blau-hell); }
.ls-problem .ls-kicker { color: var(--blau-hell); }
.ls-problem .ls-lead { color: rgba(232, 240, 251, .72); }
.ls-problem__grid {
    margin-top: 46px; display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ls-problem__karte {
    padding: 28px 26px; border-radius: 8px;
    background: var(--tiefe-2); border-left: 3px solid var(--rot);
}
.ls-problem__karte h3 { font-size: 1.18rem; margin-bottom: 10px; color: #fff; letter-spacing: -.015em; }
.ls-problem__karte p { font-size: .93rem; line-height: 1.64; color: rgba(232, 240, 251, .72); }

/* ── Nutzen ──────────────────────────────────────────────────────────── */
.ls-nutzen { padding: 96px 0; background: var(--weiss); }
.ls-nutzen__liste { margin-top: 44px; border-top: 1px solid var(--linie); }
.ls-nutzen__zeile {
    display: grid; gap: 8px 40px; grid-template-columns: 1fr;
    padding: 30px 0; border-bottom: 1px solid var(--linie);
    transition: background .3s var(--t);
}
@media (min-width: 860px) {
    .ls-nutzen__zeile { grid-template-columns: 56px 1fr 1.25fr; align-items: baseline; }
}
.ls-nutzen__zeile:hover { background: var(--nebel); }
.ls-nutzen__n {
    font-family: var(--serif); font-size: 1.3rem; font-weight: 400;
    color: var(--blau); line-height: 1;
}
.ls-nutzen__was {
    font-family: var(--serif); font-size: clamp(1.3rem, 2.3vw, 1.8rem);
    font-weight: 700; line-height: 1.18; letter-spacing: -.02em; color: var(--tinte);
}
.ls-nutzen__wie { font-size: .98rem; line-height: 1.68; color: var(--grau); }

/* ── Gütesiegel ──────────────────────────────────────────────────────── */
.ls-siegel { padding: 96px 0; background: var(--nebel); border-block: 1px solid var(--linie); }
.ls-siegel__grid { display: grid; gap: 46px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .ls-siegel__grid { grid-template-columns: 1fr .8fr; } }
.ls-siegel__marke {
    justify-self: center; width: min(290px, 74vw); aspect-ratio: 1; border-radius: 50%;
    display: grid; place-content: center; text-align: center; gap: 5px;
    background: var(--weiss); border: 2px solid var(--gold); color: var(--gold);
    box-shadow: 0 20px 50px rgba(12, 30, 51, .14);
}
.ls-siegel__marke span:first-child {
    font-size: .6rem; font-weight: 800; letter-spacing: .28em; text-transform: uppercase;
    color: var(--gold-text);
}
.ls-siegel__marke strong {
    font-family: var(--serif); font-size: 1.85rem; font-weight: 700;
    letter-spacing: -.02em; color: var(--tiefe); line-height: 1.1;
}
.ls-siegel__marke span:last-child {
    font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grau);
}

/* ── Der Weg ─────────────────────────────────────────────────────────── */
.ls-weg { padding: 96px 0; background: var(--weiss); }
.ls-schritte { margin-top: 50px; display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 880px) { .ls-schritte { grid-template-columns: repeat(4, 1fr); } }
.ls-schritt {
    position: relative; padding: 26px 24px 30px;
    border-top: 3px solid var(--linie); transition: border-color .3s var(--t);
}
.ls-schritt:hover { border-top-color: var(--blau); }
@media (min-width: 880px) { .ls-schritt + .ls-schritt { border-left: 1px solid var(--linie); } }
.ls-schritt__tag {
    font-size: .62rem; font-weight: 800; letter-spacing: .18em;
    text-transform: uppercase; color: var(--rot);
}
.ls-schritt__n {
    font-family: var(--serif); font-size: 2.6rem; font-weight: 400;
    color: #8fa3ba; line-height: 1; margin: 10px 0 14px;
}
.ls-schritt h3 { font-size: 1.22rem; margin-bottom: 8px; letter-spacing: -.015em; color: var(--tinte); }
.ls-schritt p { font-size: .92rem; line-height: 1.62; color: var(--grau); }
.ls-schritt__du { display: block; margin-top: 12px; font-size: .78rem; color: var(--blau); font-weight: 600; }

/* ── Für wen ─────────────────────────────────────────────────────────── */
.ls-fuerwen { padding: 96px 0; background: var(--nebel); border-block: 1px solid var(--linie); }
/* Vier Karten: bewusst 2×2 statt auto-fit. Sonst stehen drei nebeneinander
   und die vierte allein in einer halbleeren Reihe. */
.ls-fuerwen__grid { margin-top: 46px; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .ls-fuerwen__grid { grid-template-columns: repeat(2, 1fr); } }
.ls-fuerwen__karte {
    padding: 30px 28px; background: var(--weiss); border-radius: 8px;
    border: 1px solid var(--linie);
    transition: border-color .3s var(--t), transform .3s var(--t), box-shadow .3s var(--t);
}
.ls-fuerwen__karte:hover {
    border-color: #b9d0e8; transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(12, 30, 51, .1);
}
.ls-fuerwen__wenn {
    font-family: var(--serif); font-size: 1.14rem; font-weight: 700;
    line-height: 1.34; letter-spacing: -.01em; margin-bottom: 12px; color: var(--tinte);
}
.ls-fuerwen__wenn em { font-style: italic; font-weight: 400; color: var(--blau); }
.ls-fuerwen__karte p { font-size: .93rem; line-height: 1.68; color: var(--grau); }

/* ── Zahlen ──────────────────────────────────────────────────────────── */
.ls-zahlen { padding: 90px 0; background: var(--tiefe); color: #e8f0fb; }
.ls-zahlen .ls-h2 { color: #fff; }
.ls-zahlen .ls-h2 em { color: var(--blau-hell); }
.ls-zahlen .ls-kicker { color: var(--blau-hell); }
.ls-zahlen .ls-lead { color: rgba(232, 240, 251, .72); }
.ls-zahlen__grid {
    margin-top: 46px; display: grid; gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.ls-zahl__wert {
    font-family: var(--serif); font-size: clamp(3rem, 6vw, 4.4rem);
    font-weight: 400; line-height: 1; letter-spacing: -.03em; color: #fff;
}
.ls-zahl__wert span { color: var(--blau-hell); }
.ls-zahl__was {
    margin-top: 10px; font-size: .76rem; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase; color: #fff;
}
.ls-zahl p { margin-top: 6px; font-size: .88rem; color: rgba(232, 240, 251, .66); }

/* ── Stimmen ─────────────────────────────────────────────────────────── */
.ls-stimmen { padding: 96px 0; background: var(--weiss); }
.ls-stimmen__grid {
    margin-top: 46px; display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.ls-stimme {
    padding: 30px 28px; border: 1px solid var(--linie); border-radius: 8px;
    background: var(--nebel); transition: border-color .3s var(--t);
}
.ls-stimme:hover { border-color: #b9d0e8; }
.ls-stimme__text {
    font-family: var(--serif); font-size: 1.14rem; font-style: italic;
    line-height: 1.48; letter-spacing: -.01em; color: var(--tinte);
}
.ls-stimme__wer {
    margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linie);
    font-size: .82rem; color: var(--grau);
}
.ls-stimme__wer strong { display: block; color: var(--tinte); font-weight: 600; }

/* ── Gratis-Angebot ──────────────────────────────────────────────────── */
.ls-angebot { padding: 100px 0; background: var(--nebel); border-block: 1px solid var(--linie); }
.ls-coupon {
    position: relative; max-width: 820px; margin: 0 auto;
    background: var(--weiss); color: var(--tinte);
    border: 2px dashed var(--blau); border-radius: 10px;
    padding: 44px 28px 40px; box-shadow: 0 24px 56px rgba(12, 30, 51, .13);
}
@media (min-width: 640px) { .ls-coupon { padding: 52px 52px 46px; } }
.ls-coupon::before {
    content: "✂"; position: absolute; top: -16px; left: 28px;
    background: var(--nebel); color: var(--blau); padding: 0 10px; font-size: 1.15rem; line-height: 1;
}
.ls-coupon__kicker {
    font-size: .64rem; font-weight: 800; letter-spacing: .22em;
    text-transform: uppercase; color: var(--rot); margin-bottom: 12px;
}
.ls-coupon__titel {
    font-family: var(--serif); font-size: clamp(1.8rem, 3.8vw, 2.6rem);
    font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: var(--tinte);
}
.ls-coupon__lead { margin-top: 14px; color: var(--grau); font-size: 1rem; line-height: 1.64; }
.ls-coupon__liste { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.ls-coupon__liste li {
    display: flex; gap: 11px; align-items: flex-start;
    font-size: .96rem; line-height: 1.56; color: var(--tinte-2);
}
.ls-coupon__liste li::before {
    content: "✓"; color: #fff; background: var(--blau);
    width: 19px; height: 19px; border-radius: 50%;
    display: grid; place-items: center; font-size: .64rem; font-weight: 700; flex: none;
    margin-top: 2px;
}
.ls-coupon__aktion { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ls-coupon__note { font-size: .82rem; color: var(--grau); }

/* ── Fragen ──────────────────────────────────────────────────────────── */
.ls-fragen { padding: 96px 0; background: var(--weiss); }
.ls-frage { border-bottom: 1px solid var(--linie); }
.ls-frage summary {
    list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative;
    font-family: var(--serif); font-size: 1.14rem; font-weight: 700;
    letter-spacing: -.01em; color: var(--tinte);
}
.ls-frage summary::-webkit-details-marker { display: none; }
.ls-frage summary:hover { color: var(--blau); }
.ls-frage summary::after {
    content: "+"; position: absolute; right: 4px; top: 50%;
    transform: translateY(-50%); font-size: 1.5rem; font-weight: 300;
    color: var(--blau); transition: transform .25s var(--t);
}
.ls-frage[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.ls-frage p { padding: 0 44px 26px 0; color: var(--grau); line-height: 1.72; font-size: .98rem; }

/* ── Abschluss ───────────────────────────────────────────────────────── */
.ls-schluss { padding: 110px 0 120px; text-align: center; background: var(--tiefe); color: #fff; }
.ls-schluss__titel {
    font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1.04;
    letter-spacing: -.03em; text-wrap: balance; color: #fff;
}
.ls-schluss__titel em { font-style: italic; font-weight: 400; color: var(--blau-hell); }
.ls-schluss__lead {
    margin: 22px auto 0; max-width: 52ch;
    color: rgba(232, 240, 251, .74); line-height: 1.68;
}
.ls-schluss__ctas { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.ls-schluss .ls-btn--geist { color: #fff; border-color: rgba(255, 255, 255, .3); }
.ls-schluss .ls-btn--geist:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); }

/* ── Fuß ─────────────────────────────────────────────────────────────── */
.ls-fuss { padding: 40px 0; background: #08161f; color: rgba(232, 240, 251, .6); }
.ls-fuss__in {
    display: flex; flex-wrap: wrap; gap: 16px 30px;
    align-items: center; justify-content: space-between; font-size: .82rem;
}
.ls-fuss__links { display: flex; flex-wrap: wrap; gap: 20px; }
.ls-fuss__links a { text-decoration: none; transition: color .2s var(--t); }
.ls-fuss__links a:hover { color: #fff; }

/* ── Auftritt ────────────────────────────────────────────────────────── */
.ls [data-auf] {
    opacity: 0; transform: translateY(22px);
    transition: opacity .8s var(--t), transform .8s var(--t);
}
.ls [data-auf].ist-da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .ls [data-auf] { opacity: 1; transform: none; transition: none; }
    .ls-wand__reihe {
        animation: none; flex-wrap: wrap; width: auto;
        justify-content: center; gap: 12px 0;
    }
    .ls-mag, .ls-fenster, .ls-wand__kachel, .ls-fuerwen__karte { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THEMENSEITEN  ·  /ki-sichtbarkeit, /expertenstatus, /google-autoritaet,
                    /in-die-medien-kommen
   ───────────────────────────────────────────────────────────────────────
   Dieselbe Farbigkeit und Typografie wie die Landingpage, nur mit den
   Bausteinen, die ein längerer Text braucht: Fließtext, ein zitierfähiger
   Antwortkasten, eine Gegenüberstellung und die Querverweise am Fuß.
   ═══════════════════════════════════════════════════════════════════════ */

/* Kurzantwort direkt unter der Überschrift. Steht ganz oben, weil sowohl
   Leser als auch KI-Assistenten genau danach suchen: ein Absatz, der die
   Frage der Seite vollständig beantwortet, ohne Vorrede. */
.ls-antwort {
    margin-top: 34px; padding: 28px 30px;
    background: var(--blau-tint); border-left: 4px solid var(--blau);
    border-radius: 0 8px 8px 0;
}
.ls-antwort__marke {
    font-size: .64rem; font-weight: 800; letter-spacing: .2em;
    text-transform: uppercase; color: var(--blau); margin-bottom: 12px;
}
.ls-antwort p { font-size: 1.06rem; line-height: 1.66; color: var(--tinte-2); }
.ls-antwort p + p { margin-top: 12px; }

/* Fließtext */
.ls-text { padding: 84px 0; background: var(--weiss); }
.ls-text--hell { background: var(--nebel); border-block: 1px solid var(--linie); }
.ls-text__h3 {
    font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 700; line-height: 1.22; letter-spacing: -.02em;
    margin-top: 46px; color: var(--tinte); text-wrap: balance;
}
.ls-text__h3:first-of-type { margin-top: 30px; }
.ls-text p { margin-top: 16px; font-size: 1.02rem; line-height: 1.78; color: var(--tinte-2); max-width: 68ch; }
.ls-text ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 68ch; }
.ls-text li {
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 1rem; line-height: 1.66; color: var(--tinte-2);
}
.ls-text li::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--blau); flex: none; margin-top: .58em;
}
.ls-text strong { color: var(--tinte); font-weight: 650; }

/* Gegenüberstellung */
.ls-gegen { margin-top: 34px; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .ls-gegen { grid-template-columns: 1fr 1fr; } }
.ls-gegen__spalte { padding: 28px 26px; border-radius: 8px; border: 1px solid var(--linie); background: var(--weiss); }
.ls-gegen__spalte--gut { border-color: #b9d0e8; background: var(--blau-tint); }
.ls-gegen__kopf {
    font-size: .66rem; font-weight: 800; letter-spacing: .18em;
    text-transform: uppercase; color: var(--grau); margin-bottom: 16px;
}
.ls-gegen__spalte--gut .ls-gegen__kopf { color: var(--blau); }
.ls-gegen ul { margin: 0; }
.ls-gegen li::before { background: var(--grau-2); }
.ls-gegen__spalte--gut li::before { background: var(--blau); }

/* Querverweise auf die anderen Themenseiten */
.ls-mehr { padding: 80px 0; background: var(--nebel); border-block: 1px solid var(--linie); }
.ls-mehr__grid {
    margin-top: 36px; display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ls-mehr__karte {
    display: block; padding: 26px 24px; background: var(--weiss);
    border: 1px solid var(--linie); border-radius: 8px; text-decoration: none;
    transition: border-color .3s var(--t), transform .3s var(--t), box-shadow .3s var(--t);
}
.ls-mehr__karte:hover {
    border-color: #b9d0e8; transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(12, 30, 51, .1);
}
.ls-mehr__karte h3 {
    font-size: 1.14rem; line-height: 1.3; letter-spacing: -.015em; color: var(--tinte);
}
.ls-mehr__karte p { margin-top: 10px; font-size: .9rem; line-height: 1.6; color: var(--grau); }
.ls-mehr__karte span {
    display: inline-block; margin-top: 14px; font-size: .84rem;
    font-weight: 600; color: var(--blau);
}

/* Brotkrumen */
.ls-krume { padding: 22px 0 0; font-size: .8rem; color: var(--grau-2); }
.ls-krume a { text-decoration: none; color: var(--grau); }
.ls-krume a:hover { color: var(--blau); }
.ls-krume span { margin: 0 8px; }

/* Flächenwechsel auf den Themenseiten. Die Abschnitte tragen ihre Farbe sonst
   fest im Bauteil — auf einer Seite mit anderer Reihenfolge stoßen dann zwei
   gleiche Flächen aneinander und der Takt geht verloren. */
.ls-flaeche-hell  { background: var(--nebel); border-block: 1px solid var(--linie); }
.ls-flaeche-weiss { background: var(--weiss); border-block: 1px solid var(--linie); }

/* ── Der Gründer ─────────────────────────────────────────────────────────
   Ein Gesicht kurz vor dem Handlungsaufruf. An dieser Stelle der Seite hat
   der Leser das Angebot verstanden und fragt sich, wer dahintersteht —
   deshalb steht der Abschnitt zwischen „Für wen“ und den Zahlen und nicht
   irgendwo im Fuß, wo ihn niemand mehr liest. */
.ls-gruender { padding: 96px 0; background: var(--weiss); }
.ls-gruender__grid { display: grid; gap: 44px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .ls-gruender__grid { grid-template-columns: .8fr 1.2fr; gap: 60px; } }

.ls-gruender__bild {
    position: relative;
    justify-self: center;
    width: min(360px, 78vw);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 24px 56px rgba(12, 30, 51, .18);
}
.ls-gruender__bild img { display: block; width: 100%; height: auto; }
/* Die Bildunterschrift liegt im Bild — sonst schwebt sie darunter und der
   Block wirkt wie zwei Teile statt einem. */
.ls-gruender__schild {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 34px 20px 16px;
    background: linear-gradient(transparent, rgba(8, 22, 31, .88));
    color: #fff;
}
.ls-gruender__schild strong {
    display: block; font-family: var(--serif);
    font-size: 1.16rem; font-weight: 700; letter-spacing: -.01em;
}
.ls-gruender__schild span {
    display: block; margin-top: 3px;
    font-size: .78rem; color: rgba(232, 240, 251, .78);
}

.ls-gruender__text p { margin-top: 18px; font-size: 1.02rem; line-height: 1.76; color: var(--tinte-2); max-width: 60ch; }
.ls-gruender__text p:first-of-type { margin-top: 22px; }
.ls-gruender__text strong { color: var(--tinte); font-weight: 650; }

/* Die Kernaussage, hervorgehoben — der Satz, wegen dem der Abschnitt da ist. */
.ls-gruender__satz {
    margin-top: 24px; padding: 20px 24px;
    border-left: 4px solid var(--blau); background: var(--blau-tint);
    border-radius: 0 8px 8px 0;
    font-family: var(--serif); font-size: 1.16rem; font-style: italic;
    line-height: 1.5; color: var(--tinte);
}

.ls-gruender__daten {
    margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 30px;
    padding-top: 22px; border-top: 1px solid var(--linie);
}
.ls-gruender__datum { display: flex; flex-direction: column; gap: 2px; }
.ls-gruender__datum b {
    font-family: var(--serif); font-size: 1.5rem; font-weight: 700;
    color: var(--blau); line-height: 1;
}
.ls-gruender__datum span { font-size: .8rem; color: var(--grau); }

/* ── Auszeichnungen ──────────────────────────────────────────────────────
   Steht direkt hinter dem Gründer-Abschnitt: erst das Gesicht, dann der
   Beleg von außen. Das ist genau die Reihenfolge, die die Seite ihren
   Lesern empfiehlt — hier wendet sie sie auf sich selbst an. */
.ls-preise { padding: 90px 0; background: var(--nebel); border-block: 1px solid var(--linie); }
.ls-preise__kopf { text-align: center; max-width: 46rem; margin: 0 auto; }
.ls-preise__kopf .ls-kicker { justify-content: center; }
.ls-preise__kopf .ls-lead { margin-left: auto; margin-right: auto; }

.ls-preise__reihe {
    margin-top: 48px;
    display: flex; flex-wrap: wrap;
    align-items: flex-end; justify-content: center;
    gap: 30px 44px;
}

.ls-preis {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    text-decoration: none; text-align: center;
    transition: transform .3s var(--t);
}
.ls-preis:hover { transform: translateY(-5px); }
.ls-preis:focus-visible { outline: 3px solid var(--blau-hell); outline-offset: 6px; border-radius: 8px; }

.ls-preis img {
    display: block; height: 200px; width: auto;
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(12, 30, 51, .16);
    transition: box-shadow .3s var(--t);
}
.ls-preis:hover img { box-shadow: 0 22px 52px rgba(12, 30, 51, .24); }
@media (max-width: 560px) { .ls-preis img { height: 168px; } }

.ls-preis__wer {
    font-size: .82rem; font-weight: 600; color: var(--tinte);
    display: inline-flex; align-items: center; gap: 6px;
}
/* Der Pfeil zeigt, dass es zur Vergabestelle geht — ein Siegel, das man
   nachprüfen kann, ist mehr wert als eines, das nur schön aussieht. */
.ls-preis__wer::after { content: "↗"; color: var(--blau); font-size: .9em; }
.ls-preis:hover .ls-preis__wer { color: var(--blau); }