/* ============================================
   ENTREL — Landingpage
   Hero (drei Ebenen) · Principles · Learn · For Schools · Mission
   ============================================ */

/* ============================================
   HERO

   Aufbau: Eyebrow oben, darunter die Bühne mit Figur und Headline-Band,
   darunter Subline, CTAs und Eckdaten.

   Zwei am Material gemessene Werte tragen die Komposition:

     1. Silhouettenprofil von hero-figure-1700.webp (Alphakanal, zeilenweise
        gemessene Inhaltsbreite):
             bis 40 % der Höhe   Flügel        45–100 % der Bildbreite
             40–58 %             Arme, Körper  30–44 %
             ab 60 %             nur Beine     12 %
        Auf Beinhöhe ist also ab 60 % — dort gehört die Oberkante des Bandes
        hin, dann kreuzt nur die schmale Beinsäule den Schriftzug.
     2. „WERT ENTSTEHT." läuft in Mattone Black mit -0.03em Laufweite
        12,32 em breit. Bei 7.9vw füllt das 97 % der Fensterbreite.

   Aus 1. folgt, dass die Figur nicht am Fenster hängt, sondern an der
   Oberkante des Bandes. Aus 2. folgt die Schriftgröße des Bandes.
   ============================================ */
.hero {
    /* Breite der Figur — der einzige Wert, der je Breakpoint angepasst wird.
       Alles andere leitet sich daraus ab. */
    --fig-w: min(62vw, 940px);
    --fig-h: calc(var(--fig-w) * 0.547);   /* 930/1700, Seitenverhältnis der Datei */

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(24px, 4vh, 52px);
    min-height: 100svh;
    padding-block: 140px 88px;
    overflow: hidden;
    isolation: isolate;
}

/* Ebene 1: das Bergtal, bewusst größer als der Rahmen, damit die
   Parallax-Verschiebung nie eine Kante freilegt */
.hero-bg {
    position: absolute;
    /* Rundum deutlich größer als der Rahmen: der Hintergrund wandert beim
       Scrollen um bis zu 0,32 × Scrollweg. Ohne diesen Überstand käme beim
       Scrollen die Oberkante des Bildes ins Bild. */
    inset: -26% -8%;
    z-index: -2;
    will-change: transform;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    /* Etwas präsenter als zuvor (0,5) — gibt dem Hero Tiefe, ohne der
       Typo den Kontrast zu nehmen. */
    opacity: 0.62;
}

/* Vignette + Verlauf ins Schwarz: hält die Typo lesbar */
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 60% 55% at 50% 40%, rgba(200, 180, 138, 0.13), transparent 62%),
        radial-gradient(ellipse 90% 70% at 50% 50%, transparent 30%, rgba(14, 14, 14, 0.55) 100%),
        linear-gradient(180deg, rgba(14, 14, 14, 0.86) 0%, rgba(14, 14, 14, 0.5) 38%, rgba(14, 14, 14, 0.9) 84%, var(--bg-primary) 100%);
}

.hero-top,
.hero-bottom { position: relative; z-index: 1; }

/* ---------- Bühne: Figur über dem Band ---------- */
.hero-stage {
    position: relative;
    /* Reserviert genau den Teil der Figur, der über dem Band liegt. Dadurch
       ist die Oberkante des Bandes zugleich die Innenkante dieses Abstands —
       daran hängt unten die Figur. */
    padding-top: calc(var(--fig-h) * 0.60);
}

.hero-figure {
    position: absolute;
    left: 50%;
    width: var(--fig-w);
    z-index: 0;
    /* Ab 60 % der Bildhöhe stehen nur noch die Beine. Die Figur hängt an der
       Oberkante des Bandes und wird um 60 % ihrer EIGENEN Höhe nach oben
       geschoben — damit liegt die Beinlinie exakt auf dem Schriftzug. */
    top: calc(var(--fig-h) * 0.60);
    transform: translate3d(-50%, calc(-60% + var(--parallax-y, 0px)), 0);
    will-change: transform;
    pointer-events: none;
}

/* Beginnt mit dem Band — dessen Oberkante ist zugleich die Oberkante dieses
   Kastens und damit der Aufhängepunkt der Figur. */
.hero-bandline {
    position: relative;
    text-align: center;
}

/* CTAs sitzen über der Headline, links und rechts außen. Auf dieser Höhe
   steht von der Figur nur die schmale Beinsäule, dazwischen ist frei. */
.hero-actions {
    position: absolute;
    bottom: calc(100% + clamp(10px, 1.6vh, 24px));
    /* Zentriert über left/right/margin statt über transform: das Element
       trägt data-reveal, und die Reveal-Animation belegt transform bereits.
       Beides auf derselben Eigenschaft hätte die Leiste verschoben. */
    left: 0;
    right: 0;
    margin-inline: auto;
    width: min(100%, var(--page-max));
    padding-inline: var(--page-pad);
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.hero-figure img {
    width: 100%;
    height: auto;
    /* Enger Schlagschatten statt weichem Schleier: kleiner Radius, kurzer
       Versatz. Ein großflächiger Schatten (80px Radius) hatte zuvor den
       halben Hero abgedunkelt und wirkte wie ein Kasten hinter der Figur. */
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.6))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    animation: heroFloat 9s ease-in-out infinite;
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-14px) rotate(-0.6deg); }
}

/* ---------- Das Band ---------- */
.hero-band {
    position: relative;
    z-index: 1;
    /* 12,32 em gemessene Laufweite × 7.9vw ≈ 97 % der Fensterbreite.
       WIRD DER TEXT GEÄNDERT, MUSS DIESER WERT NACHGERECHNET WERDEN —
       sonst läuft das Band aus dem Fenster. */
    font-size: 7.9vw;
    line-height: 0.78;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    white-space: nowrap;       /* eine Zeile, immer */
    text-align: center;
    color: var(--text-primary);
}

/* ---------- Kopf und Fuß auf der Mittelachse ---------- */
.hero-top { text-align: center; }

.hero-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-accent { display: block; margin-top: clamp(10px, 1.6vh, 20px); }

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin-top: clamp(20px, 3vh, 34px);
    padding-top: 18px;
    border-top: 1px solid var(--hairline);
    width: 100%;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--text-faint);
}

.hero-meta span { display: flex; align-items: center; gap: 9px; }

.hero-meta span::before {
    content: '';
    width: 4px; height: 4px;
    border-radius: 999px;
    background: var(--gold-accent);
}

/* ---------- Scroll-Hinweis ---------- */
.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-faint);
    transition: color 0.3s ease;
}

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

.hero-scroll-line {
    width: 1px;
    height: 42px;
    background: linear-gradient(180deg, var(--gold-accent), transparent);
    overflow: hidden;
}

.hero-scroll-line::after {
    content: '';
    display: block;
    width: 100%; height: 40%;
    background: var(--gold-accent);
    animation: scrollCue 2.2s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}

@keyframes scrollCue {
    0%   { transform: translateY(-100%); }
    60%  { transform: translateY(250%); }
    100% { transform: translateY(250%); }
}

@media (max-width: 980px) {
    .hero {
        --fig-w: min(96vw, 640px);
        padding-block: 118px 76px;
    }
    /* Auf schmalen Formaten liegt die Figur VOR dem Band — die Überlagerung
       trägt hier die Komposition. */
    .hero-figure { z-index: 2; opacity: 0.72; }
    .hero-scroll { display: none; }

    /* Links und rechts neben der Headline ist hier kein Platz mehr — dort
       stehen die Flügel. Die Buttons rücken unter das Band in den Fluss. */
    .hero-actions {
        position: static;
        justify-content: center;
        width: 100%;
        margin-top: clamp(20px, 3.4vh, 34px);
        padding-inline: var(--page-pad);
    }
}

@media (max-width: 620px) {
    .hero { --fig-w: 122vw; }
    .hero-figure { opacity: 0.62; }
    /* Nebeneinander passen die beiden Beschriftungen hier nicht mehr */
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-figure img { animation: none; }
    .hero-scroll-line::after { animation: none; }
}

/* ============================================
   PRINCIPLES
   ============================================ */
/* Zwei plus drei: die Prinzipien 01 und 02 sind genau die, die das
   Wertlabor durchspielt. Sie stehen groß und verlinken zurück — der Rest
   folgt als ruhigere Reihe. Fünf gleich große Karten nebeneinander waren
   auf 1440 px nur 230 px breit und damit unlesbar. */
.principles-lead {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.principles-rest {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

@media (max-width: 900px) {
    .principles-lead { grid-template-columns: 1fr; }
    .principles-rest { grid-template-columns: 1fr; gap: 14px; }
}

.principle {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 74px 24px 26px;
    border: 1px solid var(--hairline);
    border-radius: 18px;
    background: var(--bg-elevated);
    overflow: hidden;
    transition: var(--transition);
}

/* Die Ziffer als Geisterzahl im Kartenrücken.

   Am Material gemessen (Mattone Black, Ziffern, via Canvas-Tintenmaß):
       Tinte über der Grundlinie   0,775 em
       Font-Ascent / -Descent      1,089 em / 0,339 em
   Bei `line-height: .78` ergibt der halbe Durchschuss -0,3245 em, die
   Grundlinie liegt also 0,7645 em unter der Boxoberkante und die Tinte
   beginnt 0,0105 em DARÜBER. Ein negativer `top` schneidet die Ziffer
   deshalb an der `overflow: hidden`-Kante ab — der frühere Wert -18px
   kostete 24 px Ziffernhöhe. 0,03 em setzt die Tinte knapp unter die
   Kartenkante, in em und damit unabhängig von der Schriftgröße. */
.principle-ghost {
    position: absolute;
    top: 0.03em;
    left: 14px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 104px;
    line-height: 0.78;
    letter-spacing: -0.05em;
    color: rgba(245, 242, 232, 0.05);
    transition: color 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.principle:hover {
    border-color: var(--gold-accent-border);
    transform: translateY(-6px);
    background: #1D1C1A;
}

.principle:hover .principle-ghost {
    color: rgba(200, 180, 138, 0.15);
    transform: translateY(6px);
}

.principle h3 {
    font-size: 20px;
    line-height: 1.14;
}

.principle p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ---------- Die beiden erlebten ---------- */
.principle--lived {
    padding: clamp(92px, 10vw, 128px) clamp(26px, 3vw, 38px) clamp(26px, 3vw, 34px);
    border-color: var(--gold-accent-border);
    background: var(--panel-face);
    box-shadow: var(--panel-lift);
}

.principle--lived .principle-ghost {
    font-size: clamp(120px, 13vw, 168px);
    color: rgba(200, 180, 138, 0.1);
}

.principle--lived:hover { background: var(--panel-face); }
.principle--lived:hover .principle-ghost { color: rgba(200, 180, 138, 0.2); }

.principle--lived h3 { font-size: clamp(24px, 2.6vw, 34px); }

.principle--lived p {
    max-width: 34ch;
    font-size: clamp(15px, 1.5vw, 17px);
    color: var(--text-primary);
}

.principle-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-accent);
    transition: gap 0.3s ease;
}

.principle-link::after {
    content: '↑';
    font-size: 13px;
}

.principle--lived:hover .principle-link { gap: 14px; }

/* Die Frage als Absprung in die Mission. Früher ein 200 px hohes,
   fast leeres Panel — jetzt eine Haarlinie und eine Zeile. */
.principles-quote {
    margin-top: clamp(48px, 6vw, 84px);
    padding-top: clamp(32px, 4vw, 52px);
    border-top: 1px solid var(--gold-accent-medium);
    text-align: center;
}

.principles-quote p { max-width: 18ch; margin: 0 auto; }

.principles-quote cite {
    display: block;
    margin-top: 18px;
    font-size: 12px;
    font-style: normal;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* ============================================
   LEARN — Phasenspur
   ============================================ */
/* Die sechs Phasen sind die Geschichte dieser Sektion, nicht die Medien.
   Deshalb große Karten mit der Tiefenrezeptur und eine durchlaufende
   Schiene auf Ziffernhöhe, damit die Karten als Weg lesen statt als
   sechs unabhängige Kacheln. */
.track-wrap {
    position: relative;
    margin-bottom: clamp(64px, 8vw, 104px);
}

.track {
    /* Startet am Satzspiegel, läuft rechts bewusst über die Kante hinaus */
    --track-inset: max(var(--page-pad), calc((100vw - var(--page-max)) / 2 + var(--page-pad)));

    display: flex;
    gap: 14px;
    padding-inline: var(--track-inset);
    /* Ohne scroll-padding rastet die erste Karte am Fensterrand ein statt
       am Satzspiegel — die Spur springt dann beim Laden um die Einrückung. */
    scroll-padding-inline: var(--track-inset);
    padding-block: 4px 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
}

.track::-webkit-scrollbar { display: none; }
.track.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.track-card {
    flex: 0 0 clamp(250px, 27vw, 330px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(26px, 3vw, 36px) clamp(24px, 2.6vw, 32px) clamp(30px, 3.4vw, 40px);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    background: var(--panel-face);
    box-shadow: var(--panel-lift);
    transition: var(--transition);
    user-select: none;
}

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

/* Die Ziffer ist die Wegmarke, kein Label mehr. Die Linie darunter läuft
   in allen sechs Karten auf derselben Höhe und liest sich über die
   Kartenlücken hinweg als durchgehende Schiene.

   Eine durchgehende Linie hinter den Karten ging nicht: `--panel-face` ist
   halbtransparent, die Schiene schnitt sichtbar durch die Ziffern. */
.track-num {
    display: block;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hairline);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--gold-accent);
    transition: border-color 0.4s ease;
}

.track-card:hover .track-num { border-color: var(--gold-accent-medium); }

.track-card h3 { font-size: clamp(21px, 2.1vw, 26px); }

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

.track-foot {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 6px;
}

.track-hint {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
    white-space: nowrap;
}

.track-progress {
    flex: 1;
    height: 1px;
    background: var(--hairline);
    position: relative;
    overflow: hidden;
}

.track-progress span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 22%;
    background: var(--gold-accent);
    transition: transform 0.12s linear;
}

/* ---------- Kuratierte Medien ----------
   Vierzehn gleich aussehende Karten haben die Phasen erdrückt. Auf der
   Startseite stehen jetzt nur die vier `featured`-Einträge aus
   data/media.json, als Zeilen mit Führungslinie. Die volle Bibliothek
   mitsamt Filtern liegt in der Plattform. */
.media-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hairline);
}

.media-head h3 {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold-accent);
}

.media-rest {
    font-size: 13px;
    color: var(--text-faint);
}

.media-rest:empty { display: none; }

.media-list { list-style: none; }

.media-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 20px;
    padding: 20px 4px;
    border-bottom: 1px solid var(--hairline);
    transition: var(--transition);
}

.media-row:hover { padding-inline: 12px 4px; }

.media-format {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
    transition: color 0.4s ease;
}

.media-row:hover .media-format { color: var(--gold-accent); }

/* Titel und Creator teilen sich eine Zeile, die Führungslinie dazwischen
   füllt den Rest — wie in einem Inhaltsverzeichnis. */
.media-main {
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
}

.media-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(17px, 1.8vw, 21px);
    letter-spacing: -0.015em;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-rule {
    flex: 1;
    min-width: 24px;
    height: 1px;
    background: var(--hairline);
    transition: background 0.4s ease;
}

.media-row:hover .media-rule { background: var(--gold-accent-medium); }

.media-creator {
    flex: 0 0 auto;
    font-size: 13.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

.media-lang {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.media-empty {
    padding: 32px 4px;
    color: var(--text-faint);
}

@media (max-width: 720px) {
    .media-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 14px;
        padding-block: 18px;
    }
    .media-format { grid-column: 1 / -1; }
    .media-main { flex-wrap: wrap; }
    .media-rule { display: none; }
    .media-title { white-space: normal; }
}

.learn-foot {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
    color: var(--text-muted);
}

/* ============================================
   FOR SCHOOLS
   ============================================ */
.schools-teaser {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(36px, 6vw, 80px);
}

.schools-teaser .display-xl,
.about .display-xl { margin-block: 18px 16px; }

/* schools-workshop-1536.webp ist 1536 × 1024, also 3:2. Bei 4/3 schnitt
   der Rahmen links die Tafel ab — das Verhältnis muss dem Bild folgen. */
.schools-visual {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.schools-visual > div { height: 100%; }

/* Ohne Zoom und ohne Parallax: Rahmen und Bild haben dasselbe Verhältnis,
   jede Bewegung müsste also über einen Zoom erkauft werden — und der
   schnitt die Tafelbeschriftung („WERT ERSCHAFFEN") links ab. Genau die
   trägt hier die Aussage, deshalb steht das Bild ruhig und vollständig. */
.schools-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.72;
}

.schools-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 34%, rgba(14, 14, 14, 0.78));
    pointer-events: none;
}

/* Ein Panel statt vier schwebender Kästen: die Formate sind eine Karte,
   die Dauern bilden über eine feste Spalte eine saubere linke Kante. */
.formats {
    margin-block: 34px;
    padding: 6px clamp(20px, 2.4vw, 28px);
    border: 1px solid var(--hairline);
    border-radius: var(--border-radius);
    background: var(--panel-face);
    box-shadow: var(--panel-lift);
}

.format {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--hairline);
    transition: var(--transition);
}

.formats .format:last-child { border-bottom: 0; }

.format:hover { padding-left: 10px; }

.format b {
    flex-shrink: 0;
    min-width: 116px;
    color: var(--gold-accent);
}

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

.format--soon { opacity: 0.5; }
.format--soon:hover { padding-left: 0; }

@media (max-width: 900px) {
    .schools-teaser { grid-template-columns: 1fr; }
    .schools-visual { order: -1; aspect-ratio: 16 / 10; }
}

@media (max-width: 520px) {
    .format { flex-direction: column; gap: 6px; }
    .format b { min-width: 0; }
}

/* ============================================
   MISSION
   ============================================ */
.about {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(24px, 3vw, 44px);
}

/* Die Figur ist freigestellt — kein Rahmen, kein Beschnitt. In einem
   Container mit object-fit: cover verlöre sie ihre Flügel. */
.about-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

/* Dezenter runder Verlauf direkt hinter der Figur — kein Panel, keine Kante.
   Sitzt etwas tiefer als die Bildmitte, also hinter Körper und Flügeln
   statt hinter dem Kopf. */
.about-visual::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 56%;
    left: 50%;
    width: 78%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(200, 180, 138, 0.16) 0%,
        rgba(200, 180, 138, 0.07) 34%,
        rgba(200, 180, 138, 0.02) 56%,
        transparent 72%);
    filter: blur(18px);
    pointer-events: none;
}

.about-visual > div { position: relative; width: 100%; will-change: transform; }

.about-visual img {
    /* Der Rand ist im Bild weggeschnitten, die Figur füllt den Rahmen.
       Der Überstand nach links gibt ihr Präsenz, ohne der Textspalte
       Platz zu nehmen. */
    width: 122%;
    max-width: none;
    margin-left: -13%;
    height: auto;
    /* Bewusst ohne drop-shadow: bei einer so breiten Silhouette legt der
       weiche Schatten einen dunklen Schleier über die halbe Spalte und
       sieht aus wie ein Kasten hinter der freigestellten Figur. */
}

.about-body .soundbites { margin-top: 26px; }

/* Etwas kleiner als die Standardgröße: in der halben Spalte müssen die
   Zeilen einzeilig bleiben, sonst zerfällt der Soundbite-Rhythmus. */
.about-body .soundbites li { font-size: clamp(17px, 2vw, 28px); }

/* Fußnote der Mission, keine Kachelreihe: Trennlinien statt Abstände. */
.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 44px;
    padding-top: 30px;
    border-top: 1px solid var(--hairline);
}

.about-stats > div { padding-inline: clamp(14px, 2vw, 24px); }
.about-stats > div:first-child { padding-left: 0; }
.about-stats > div + div { border-left: 1px solid var(--hairline); }

.about-stats b {
    display: block;
    margin-bottom: 6px;
    color: var(--gold-accent);
}

.about-stats span {
    font-size: 12.5px;
    line-height: 1.35;
    letter-spacing: 0.04em;
    color: var(--text-faint);
}

@media (max-width: 900px) {
    .about { grid-template-columns: 1fr; }
    .about-visual img { width: 100%; margin-left: 0; }
}

/* Unter 560 px bleiben von drei Spalten nur ~120 px Textbreite — die
   Beschriftungen brechen dann auf drei Zeilen. */
@media (max-width: 560px) {
    .about-stats { grid-template-columns: 1fr; gap: 18px; }
    .about-stats > div { padding-inline: 0; }
    .about-stats > div + div {
        border-left: 0;
        border-top: 1px solid var(--hairline);
        padding-top: 18px;
    }
}