/*
 * MatchTogether · „Die Reise eines Moments“ (ad/index.html)
 * Ausgelagert aus dem früheren <style>-Block.
 */

:root {
    color-scheme: dark;
    /* Einheitlicher Abstand oben/unten für Text-Sektionen (Foto-Bühnen bleiben 100svh).
       Nie kleiner als der weiche Sektionsübergang (--fade), sonst würden Inhalte abgedunkelt. */
    --section-pad: clamp(4rem, 9vh, 5rem);
    --night: #071827;
    /* Seitengrund (seit 2026-10-06 heller, SaM); --night bleibt das dunkle Blau für Schrift auf Gold */
    --page: #10283b;
    --ink: #eaf0f4;
    --dim: #b8c5ce;
    --gold: #ffab48;
    --blue: #155dba;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        Segoe UI,
        sans-serif;
}
* {
    box-sizing: border-box;
}
/* Nie horizontal scrollen (seit 2026-10-02 auf html und body): Was über den Rand ragt
   (100vw-Breiten zählen die senkrechte Scrollleiste mit, einfliegende Überschriften),
   wird abgeschnitten. clip statt hidden erzeugt keinen Scroll-Container; hidden davor
   nur als Rückfall für Browser ohne clip. */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-x: clip;
}
body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    overflow-x: hidden;
    overflow-x: clip;
}
button {
    font: inherit;
}
a {
    color: inherit;
}
img {
    display: block;
    max-width: 100%;
}
::selection {
    background: #ffab48;
    color: #071827;
}
.brand {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem clamp(1.2rem, 4vw, 4rem);
    background: linear-gradient(#10283bdd, #10283b00);
    pointer-events: none;
}
.brand a {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    font-weight: 740;
    letter-spacing: -0.045em;
    font-size: 1.13rem;
    white-space: nowrap;
}
.brand img {
    display: block;
    width: 1.8rem;
    height: 1.8rem;
    object-fit: contain;
    flex: none;
}
/* Wortmarke „Match<span class="together">Together</span>“ – Kopfzeile und Fließtext.
   Das Orange ist exklusiv für den Markennamen. */
.together {
    color: #ff7900;
}
/* Wortmarke im Fließtext (seit 2026-10-03): fett, „Match“ weiß, „Together“ orange und nie
   getrennt/umbrochen – auch nicht durch die mobile Silbentrennung (hyphens: auto). Auf dem
   orangen Button (.core-cta) behält sie die Buttonfarbe (--on-accent), sonst unlesbar. */
.brand-name,
.mt-brand {
    white-space: nowrap;
    -webkit-hyphens: none;
    hyphens: none;
}
.mt-brand {
    font-weight: 700;
    color: #fff;
    letter-spacing: normal;
    text-transform: none;
}
/* Seit 2026-10-03 ist die Wortmarke im Fließtext ein Link auf ../los.php – sieht aus wie die
   Marke, nie unterstrichen; Hover/Fokus nur dezent heller bzw. mit Outline */
a.mt-brand {
    text-decoration: none;
    transition: filter 0.2s ease;
}
a.mt-brand:hover {
    filter: brightness(1.2);
}
a.mt-brand:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 3px;
}
.mt-brand--on-accent,
.mt-brand--on-accent .together {
    color: inherit;
}
/* Funktionsnamen Sphere und Discovery: immer fett, Farbe des umgebenden Textes
   (überschreibt auch die goldenen, nicht fetten <strong> der Musik-Box .signal) */
main strong.feature {
    font-weight: 700;
    color: inherit;
}
.brand .chapter {
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d7e1e7;
}
.meter {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 20;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--gold);
}
main section {
    position: relative;
    min-height: 100svh;
    display: grid;
    align-items: center;
    overflow: hidden;
}
/*
 * Weiche Übergänge zwischen den Sektionen.
 * Jede Sektion blendet oben und unten in --night aus. Da beide Seiten einer
 * Grenze dieselbe Farbe erreichen, verschwindet die harte Kante.
 * Die Ebene liegt über Foto/Vignette (z-index 0), aber unter allen Inhalten
 * (.scene, Polaroids, Zeitstrahl … haben z-index ≥ 1).
 * Stärke/Höhe des Übergangs: --fade (je Sektion überschreibbar).
 */
main > section {
    /* Standard: kurz genug, dass Text am Sektionsrand nicht abgedunkelt wird */
    --fade: clamp(3rem, 9vh, 5rem);
    /* Fotos am Rand: deutlich längerer Übergang (Inhalte liegen dort ohnehin darüber) */
    --fade-photo: clamp(6rem, 26vh, 15rem);
    --fade-top: var(--fade);
    --fade-bottom: var(--fade);
}
main > section:first-child {
    --fade-top: 0px;
    --fade-bottom: var(--fade-photo);
}
.split,
.new-connections,
.photo-scene {
    --fade-top: var(--fade-photo);
    --fade-bottom: var(--fade-photo);
}
main > section:last-child {
    --fade-top: var(--fade-photo);
    --fade-bottom: 0px;
}
main > section::after,
.split .panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /*
     * Smoothstep-Verlauf (flach beginnen, flach enden): an der Grenze entsteht
     * kein Helligkeitsknick, den das Auge als Kante wahrnehmen würde.
     */
    background:
        linear-gradient(
            to bottom,
            var(--page) 0,
            #10283be5 calc(var(--fade-top) * 0.2),
            #10283ba5 calc(var(--fade-top) * 0.4),
            #10283b5a calc(var(--fade-top) * 0.6),
            #10283b1b calc(var(--fade-top) * 0.8),
            #10283b00 var(--fade-top)
        ),
        linear-gradient(
            to top,
            var(--page) 0,
            #10283be5 calc(var(--fade-bottom) * 0.2),
            #10283ba5 calc(var(--fade-bottom) * 0.4),
            #10283b5a calc(var(--fade-bottom) * 0.6),
            #10283b1b calc(var(--fade-bottom) * 0.8),
            #10283b00 var(--fade-bottom)
        );
}
/* Split-Fotos: nur mobil übereinander – dort auch zwischen den beiden Fotos weich */
.split .panel {
    --fade-top: 0px;
    --fade-bottom: 0px;
}
.photograph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.68);
}
.vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, #10283be8 0%, #10283b66 56%, #10283b22 100%),
        linear-gradient(0deg, #10283bdd, transparent 35%);
}
.scene {
    position: relative;
    z-index: 1;
    padding: 8rem clamp(1.3rem, 9vw, 11rem) 6rem;
    max-width: 75rem;
}
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.23em;
    color: var(--gold);
    font-weight: 700;
    font-size: 0.78rem;
    margin-bottom: 0.4rem;
}
h1,
h2,
p {
    margin: 0;
}
h1,
h2 {
    font-weight: 650;
    letter-spacing: -0.065em;
    line-height: 1.04;
    text-wrap: balance;
}
h1 {
    font-size: clamp(3.5rem, 10vw, 9.8rem);
    max-width: 11ch;
}
h2 {
    font-size: clamp(3.1rem, 7.5vw, 7rem);
    max-width: 13ch;
}
.lead {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    line-height: 1.55;
    color: #f0f2f2;
    max-width: 29ch;
    margin-top: 2rem;
}
.scrollcue {
    display: inline-flex;
    gap: 0.7rem;
    align-items: center;
    color: #d8e2e8;
    margin-top: 3.4rem;
    font-size: 0.9rem;
}
.scrollcue span {
    display: inline-block;
    width: 1px;
    height: 2.5rem;
}
.split {
    grid-template-columns: 1fr 1fr;
    background: #183349;
}
/* ============================================================
 * Goldene Punktlinie zwischen den beiden Split-Bildern
 * (nur Desktop) – Anspielung auf die räumliche Trennung.
 * Animiert: Die Punkte fließen langsam nach unten, und alle paar
 * Sekunden wandert ein Lichtimpuls hinab – eine Nachricht unterwegs.
 * ============================================================ */
/* animierbare Positionen für Punktfluss und Lichtimpuls (unabhängig voneinander) */
@property --dots-y {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}
@property --pulse-y {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: -160px;
}
@keyframes split-dots-flow {
    to {
        --dots-y: 14px; /* genau ein Punktabstand → nahtlose Wiederholung */
    }
}
@keyframes split-pulse-travel {
    0% {
        --pulse-y: -160px;
    }
    70%,
    100% {
        --pulse-y: calc(100% + 160px); /* danach kurze Pause unterhalb des Sichtbereichs */
    }
}
@media (min-width: 701px) {
    .split::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        z-index: 1; /* über Fotos und weichem Übergang, Texte liegen nicht in der Mitte */
        width: 6px;
        transform: translateX(-50%);
        pointer-events: none;
        background:
            /* runde Punkte: 3 px Durchmesser, alle 14 px */
            radial-gradient(circle, var(--gold) 1.5px, transparent 2px) center var(--dots-y) / 6px
                14px repeat-y,
            /* Lichtimpuls: warmer, länglicher Schimmer */
            radial-gradient(ellipse 2.5px 70px at center, #ffe3bd 0, #ffab4866 45%, #ffab4800 100%)
                center var(--pulse-y) / 6px 160px no-repeat;
        filter: drop-shadow(0 0 4px #ffab4899);
        opacity: 0.85;
        animation:
            split-dots-flow 1.4s linear infinite,
            split-pulse-travel 6.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
        /* oben und unten weich auslaufen – passend zu den Sektionsübergängen */
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0,
            #000 var(--fade-photo),
            #000 calc(100% - var(--fade-photo)),
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            transparent 0,
            #000 var(--fade-photo),
            #000 calc(100% - var(--fade-photo)),
            transparent 100%
        );
    }
}
@media (prefers-reduced-motion: reduce) {
    .split::before {
        animation: none;
    }
}
/* ===================== Ende goldene Punktlinie ===================== */
.split .panel {
    height: 100%;
    position: relative;
    overflow: hidden;
}
.split .panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.74);
}
/* Rechtes Split-Bild (Nina, „Und Nina grinst auch.“) bewusst heller als links */
.split .panel:last-child img {
    filter: brightness(0.92);
}
.split .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #10283bcf, transparent 75%);
    opacity: 0.45;
}
.split .panel:last-child .overlay {
    opacity: 0.22;
}
@media (max-width: 600px) {
    .split .overlay {
        opacity: 0.55;
    }
    .split .panel:last-child .overlay {
        opacity: 0.34;
    }
    .split .panel:last-child img {
        filter: brightness(0.94);
    }
}
.split .scene {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 3rem clamp(1.3rem, 5vw, 6rem);
}
.split h2 {
    font-size: clamp(2.7rem, 5.2vw, 5.8rem);
}
/* Desktop: keine künstliche Breitengrenze – umbrochen wird nur, wenn das Panel zu schmal ist */
@media (min-width: 701px) {
    .split h2 {
        max-width: none;
    }
    /* gesetzt von assets/js/main.js, wenn die Zeile eingepasst werden kann */
    .split h2.single-line {
        white-space: nowrap;
    }
}
.note {
    margin-top: 1.8rem;
    display: inline-block;
    /* begrenzt die Breite, damit fitSingleLine (main.js) den Refrain einpassen kann */
    max-width: 100%;
    padding: 1rem 1.3rem;
    background: #10283bdc;
    border: 1px solid #ffffff38;
    border-radius: 1rem;
    font-size: clamp(1rem, 1.7vw, 1.3rem);
    box-shadow: 0 20px 50px #0005;
}
/* Nachricht mit Teilen-Icon (linkes Split-Bild): Der Button sitzt immer rechts in der Box.
   Desktop: immer neben dem Refrain in einer Zeile – reicht der Platz nicht, verkleinert
   fitSingleLine (main.js) den Refrain. Mobil: daneben, wenn Platz ist, sonst darunter.
   min-width: 0 lässt den Refrain schrumpfen, damit fitSingleLine ihn einpassen kann. */
.split .panel:first-child .note {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.75rem;
}
@media (min-width: 701px) {
    .split .panel:first-child .note {
        flex-wrap: nowrap;
    }
}
.split .panel:first-child .note .refrain {
    flex: 1 1 auto;
    min-width: 0;
}
/* Teilen-Button: nur das Icon, rund (Beschriftung per aria-label/title) */
.reply {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.4em;
    height: 2.4em;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gold);
    color: #071827;
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
}
.reply:hover,
.reply:focus-visible {
    background: #ffd09a;
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.reply:disabled {
    cursor: default;
    opacity: 0.85;
}
/*
 * Finale (seit 2026-10-03): Nina schickt keinen Satz, nur den Moment selbst –
 * ein kleines Polaroid des allerersten Shares (Bahnfoto) neben dem Teilen-Knopf.
 * Chris antwortet mit einer Erinnerung, darunter die beiden Herzen.
 */
.note-moment {
    padding: 0.7rem 0.8rem 0.7rem 0.9rem;
}
.moment-thumb {
    flex: none;
    display: block;
    width: clamp(64px, 7vw, 92px);
    padding: 0.28rem 0.28rem 0.9rem;
    background: #eee9de;
    border-radius: 3px;
    box-shadow: 0 10px 24px #0008;
    transform: rotate(-4deg);
}
.moment-thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: 45% 30%;
    /* main.js blendet „.split .panel img“ (die großen Fotos) per Inline-Opacity ein –
       das Mini-Polaroid ist davon ausgenommen und bleibt immer sichtbar und unabgedunkelt */
    opacity: 1 !important;
    filter: none;
}
.note-moment .note-text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
}
.note-reply {
    display: inline-grid;
    gap: 0.55rem;
    text-align: left;
}
.note-quote {
    font-style: italic;
    line-height: 1.4;
}
.note-reactions {
    font-size: 0.92em;
    color: #d7e1e7;
}
/* Der bewahrte Moment: Polaroid links mit viel Luft, Text rechts und linksbündig.
   Mobil (≤ 900px) untereinander: Polaroid oben, Text darunter. */
.polaroid-scene {
    background: radial-gradient(circle at 34% 45%, #1d3a4b, #10283b 68%);
    /* Höhe aus dem Inhalt statt voller Bildschirmhöhe; Abstand ≥ Sektions-Übergang (--fade) */
    min-height: auto;
    padding: var(--section-pad) clamp(1.4rem, 6vw, 7rem);
}
.polaroid-layout {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 34rem);
    justify-content: center;
    align-items: center;
    gap: clamp(3rem, 8vw, 9rem);
}
.polaroid-scene .eyebrow {
    margin-bottom: 1rem;
}
.polaroid-copy h2 {
    font-size: clamp(2.4rem, 4vw, 4rem);
    max-width: 14ch;
}
.polaroid-copy .principle {
    margin-top: 2rem;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
}
.polaroid {
    width: min(36vw, 440px);
    padding: 1rem 1rem 1.6rem;
    background: #f5f1e8;
    color: #122238;
    box-shadow: 0 35px 100px #000a;
    /* verkleinert dargestellt; negative Ränder gleichen den durch scale frei
       werdenden Platz aus, damit die Sektion nicht unnötig hoch wird */
    transform: scale(0.78) rotate(-4deg);
    transform-origin: center center;
    margin: -1.6rem 0;
    text-align: left;
}
@media (max-width: 900px) {
    .polaroid-layout {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 3.5rem;
    }
    .polaroid {
        width: min(78vw, 390px);
        transform: scale(0.84) rotate(-4deg);
        margin: -1rem 0;
    }
    .polaroid-copy {
        width: 100%;
        max-width: 34rem;
    }
    .polaroid-copy h2 {
        font-size: clamp(2.2rem, 8.5vw, 3.2rem);
    }
}
@media (max-width: 600px) {
    .polaroid {
        transform: scale(0.88) rotate(-3deg);
        margin: -0.6rem 0;
    }
}
.polaroid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
.polaroid .caption {
    padding: 1.1rem 0.4rem 0;
    font-family: Georgia, serif;
    font-size: 1.12rem;
    line-height: 1.45;
}
.polaroid small {
    display: block;
    margin-top: 0.85rem;
    color: #536170;
    font:
        700 0.75rem ui-sans-serif,
        system-ui;
}
.polaroid .reactions {
    display: block;
    color: #9b531b;
    font-size: 0.85rem;
    margin-top: 0.4rem;
}
.polaroid-scene .lead {
    max-width: 40ch;
    color: var(--dim);
}
/* Der allererste Moment kehrt zurück (Akt 3): gespiegelt – Text links, Polaroid rechts,
   leicht in die Gegenrichtung gedreht. Mobil wie die Polaroid-Szene: Polaroid oben. */
.capsule-first {
    background: radial-gradient(circle at 66% 45%, #1d3a4b, #10283b 68%);
}
.capsule-first .polaroid-layout {
    grid-template-columns: minmax(0, 34rem) auto;
}
.capsule-first .polaroid {
    transform: scale(0.78) rotate(4deg);
}
@media (max-width: 900px) {
    .capsule-first .polaroid-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .capsule-first .polaroid {
        order: -1;
        transform: scale(0.84) rotate(4deg);
    }
}
@media (max-width: 600px) {
    .capsule-first .polaroid {
        transform: scale(0.88) rotate(3deg);
    }
}
.machine {
    min-height: auto;
    background: #0b2031;
    padding: var(--section-pad) clamp(1.3rem, 10vw, 12rem);
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}
/* Brücke zu Discovery: bewusst leiser als die Discovery-Überschrift danach */
.machine h2 {
    font-size: clamp(2.4rem, 4.2vw, 4.2rem);
}
.machine p:not(.eyebrow) {
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--dim);
    max-width: 34ch;
    margin-top: 1.5rem;
}
.signal {
    padding: 2rem;
    border-left: 1px solid #ffab4855;
    color: #c5d2d9;
    font:
        1rem/2 ui-monospace,
        SFMono-Regular,
        monospace;
    letter-spacing: 0.03em;
}
.signal strong {
    color: var(--gold);
    font-weight: 500;
}
.signal .quiet {
    opacity: 0.55;
}
.time {
    background: #091a2b;
    display: block;
    padding: var(--section-pad) clamp(1.3rem, 9vw, 11rem);
    min-height: auto;
}
.time h2 {
    max-width: 15ch;
}
.time .lead {
    color: var(--dim);
    max-width: 39ch;
}
/* Desktop: einzeilig, wenn Platz ist – sonst Umbruch nur nach dem Komma (.phrase = nicht trennbar) */
@media (min-width: 701px) {
    .time .lead {
        max-width: none;
    }
    .time .lead .phrase {
        white-space: nowrap;
    }
}
.memories {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 3.2rem);
    align-items: start;
    margin: 6rem auto 0;
    max-width: 1280px;
    padding: 2rem 1rem 4rem;
}
.mini {
    position: relative;
    min-width: 0;
    background: #eee9de;
    padding: 0.6rem 0.6rem 1.2rem;
    color: #183047;
    box-shadow: 0 25px 45px #0008;
    transform: translate3d(var(--fly-x), var(--fly-y), 0) rotate(calc(var(--r) * 2));
    opacity: 0;
    transition:
        transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.8s ease;
    transition-delay: var(--delay);
}
.mini.arrived {
    transform: translate3d(0, 0, 0) rotate(var(--r));
    opacity: 1;
}
.mini:nth-child(4n + 2) {
    margin-top: 4rem;
}
.mini:nth-child(4n + 3) {
    margin-top: 1.5rem;
}
.mini:nth-child(4n + 4) {
    margin-top: 6rem;
}
/* Breite Bildschirme (seit 2026-10-02): 6 Spalten in 2 Reihen statt 4 × 3 – spart rund eine
   Polaroid-Reihe Höhe. Zickzack flacher, damit die Reihen nicht wieder auseinanderlaufen.
   Bis 1299 px bleibt das 4er-Raster, mobil das 2er-Raster mit 6 Karten. */
@media (min-width: 1300px) {
    .memories {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: clamp(1rem, 1.8vw, 2.4rem);
        max-width: 1500px;
        margin-top: 4rem;
    }
    .mini:nth-child(n) {
        margin-top: 0;
    }
    .mini:nth-child(6n + 2),
    .mini:nth-child(6n + 6) {
        margin-top: 2.5rem;
    }
    .mini:nth-child(6n + 3) {
        margin-top: 1rem;
    }
    .mini:nth-child(6n + 4) {
        margin-top: 3.5rem;
    }
    .mini:nth-child(6n + 5) {
        margin-top: 0.5rem;
    }
}
.mini img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
.mini .cover {
    position: relative;
}
.mini .source {
    position: absolute;
    left: 0.45rem;
    bottom: 0.45rem;
    background: #081b2be9;
    color: white;
    font:
        700 0.67rem ui-sans-serif,
        system-ui;
    padding: 0.32rem 0.5rem;
    border-radius: 0.3rem;
    letter-spacing: 0.03em;
}
.mini .captionline {
    display: block;
    margin: 0.8rem 0.2rem 0.3rem;
    font:
        700 clamp(0.82rem, 1vw, 1rem)/1.3 ui-sans-serif,
        system-ui;
}
.mini small {
    display: block;
    color: #536271;
    font:
        500 0.72rem/1.35 ui-sans-serif,
        system-ui;
    padding: 0 0.2rem;
}
.mini .votes {
    display: block;
    text-align: right;
    color: #95521d;
    font-size: 0.78rem;
    white-space: nowrap;
    margin: 0.6rem 0.2rem 0;
}
/* Seit 2026-10-03: Im Raster sind die Texte nur noch angedeutet – lesbar werden sie in der
   Vergrößerung (eigene Größen unter .memory-zoom-card). Mobil gelten die Werte im ≤ 700-px-Block. */
.memories .mini .captionline {
    margin: 0.55rem 0.15rem 0.2rem;
    font-size: clamp(0.6rem, 0.7vw, 0.72rem);
}
.memories .mini small {
    font-size: 0.55rem;
}
.memories .mini .votes {
    margin-top: 0.4rem;
    font-size: 0.58rem;
}
.memories .mini .source {
    padding: 0.22rem 0.4rem;
    font-size: 0.55rem;
}
.memories-note {
    margin: 1rem auto 0;
    max-width: 45ch;
    text-align: center;
    color: #9fb2c0;
    font-size: 1rem;
    line-height: 1.5;
}
/*
 * Chronik („Wochen werden Jahre“): Stationen von Chris und Nina entlang einer
 * senkrechten goldenen Punktlinie – dasselbe Motiv wie zwischen den Split-Bildern,
 * die Punkte fließen langsam abwärts durch die Zeit. Desktop: Foto und Text im
 * Wechsel links/rechts der Linie; mobil: Linie links, alles untereinander.
 * Das kleine Polaroid am Foto zeigt, was an diesem Tag geteilt wurde
 * (--focus/--zoom: Bildausschnitt, wenn das Polaroid ein Detail des Fotos zeigt).
 */
.chronicle {
    --spine-gap: clamp(3rem, 7vw, 7rem);
    position: relative;
    list-style: none;
    max-width: 1180px;
    margin: clamp(3.5rem, 6vw, 5rem) auto 0;
    padding: 0;
}
.chronicle::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 6px;
    transform: translateX(-50%);
    background: radial-gradient(circle, var(--gold) 1.5px, transparent 2px) center var(--dots-y) / 6px
        14px repeat-y;
    filter: drop-shadow(0 0 4px #ffab4888);
    opacity: 0.7;
    animation: split-dots-flow 1.4s linear infinite;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6rem, #000 calc(100% - 6rem), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 6rem, #000 calc(100% - 6rem), transparent 100%);
}
.station {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--spine-gap);
    align-items: center;
    padding-bottom: clamp(3.5rem, 5vw, 4.5rem);
}
/*
 * Ein einziger Punkt läuft auf der Linie mit – auf Höhe der Bildschirmmitte, rastet
 * an jeder Station kurz ein und springt danach federnd hinterher (--dot-y setzt
 * assets/js/main.js). .is-visible: Die Bildschirmmitte liegt in der Chronik.
 * .is-at-station: Der Punkt ist an einer Station eingerastet → er pulsiert.
 */
.chronicle-dot {
    position: absolute;
    left: 50%;
    top: var(--dot-y, 0px);
    z-index: 3;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--gold);
    box-shadow:
        0 0 0 4px #ffab4826,
        0 0 16px #ffab48aa;
    /* translate (nicht transform): wird nach scale angewendet – sonst wandert der
       vergrößerte Punkt aus der Linienmitte */
    translate: -50% -50%;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.4s ease,
        scale 0.4s ease;
}
.chronicle-dot.is-visible {
    opacity: 1;
}
.chronicle-dot.is-at-station {
    scale: 1.25;
    animation: chronicle-pulse 1.6s ease-in-out infinite;
}
@keyframes chronicle-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 4px #ffab4826,
            0 0 16px #ffab48aa;
    }
    50% {
        box-shadow:
            0 0 0 12px #ffab4800,
            0 0 34px #ffab48;
    }
}
@media (prefers-reduced-motion: reduce) {
    .chronicle-dot.is-at-station {
        animation: none;
        box-shadow:
            0 0 0 6px #ffab4833,
            0 0 26px #ffab48;
    }
}
.station:nth-child(even) .station-photo {
    order: 2;
}
.station:nth-child(even) .station-copy {
    text-align: right;
}
.station-photo {
    position: relative;
    margin: 0;
}
.station-photo > img {
    width: 100%;
    /* 16:9 statt 3:2 (seit 2026-10-02, flachere Chronik); Ausschnitt etwas oberhalb der
       Mitte, damit Köpfe nicht angeschnitten werden – je Foto per --photo-y anpassbar */
    aspect-ratio: 16 / 9;
    object-position: center var(--photo-y, 40%);
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 28px 70px #0009;
    filter: brightness(0.9);
}
.station-when {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
    font-size: 0.78rem;
    margin-bottom: 0.7rem;
}
.station-copy h3,
.station-split h3 {
    margin: 0;
    font-size: clamp(1.6rem, 2.6vw, 2.5rem);
    font-weight: 650;
    letter-spacing: -0.04em;
    line-height: 1.1;
    text-wrap: balance;
}
.station-copy p:not(.station-when),
.station-text {
    margin-top: 1rem;
    color: var(--dim);
    font-size: clamp(1.02rem, 1.3vw, 1.2rem);
    line-height: 1.6;
    text-wrap: pretty;
}
.station:nth-child(odd) .station-copy p:not(.station-when) {
    max-width: 30ch;
}
.station:nth-child(even) .station-copy p:not(.station-when) {
    max-width: 30ch;
    margin-left: auto;
}
.station-polaroid {
    position: absolute;
    z-index: 2;
    right: -1.6rem;
    bottom: -2.2rem;
    width: clamp(120px, 34%, 190px);
    padding: 0.45rem 0.45rem 0.7rem;
    background: #eee9de;
    color: #183047;
    box-shadow: 0 20px 45px #000a;
    rotate: var(--r, 4deg);
}
.station:nth-child(even) .station-polaroid {
    right: auto;
    left: -1.6rem;
}
/* Anklickbar wie die Raster-Polaroids (Vergrößerung: assets/js/main.js). Hover/Fokus:
   anheben, gerade richten – über translate/scale/rotate, transform bleibt unberührt. */
.station-polaroid {
    cursor: zoom-in;
    transition:
        translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        scale 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        rotate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
    .station-polaroid:hover {
        z-index: 4;
        translate: 0 -8px;
        scale: 1.08;
        rotate: 0deg;
        box-shadow:
            0 34px 60px #000a,
            0 0 0 1px #ffab4855;
    }
}
.station-polaroid:focus-visible {
    z-index: 4;
    outline: 3px solid var(--gold);
    outline-offset: 4px;
    translate: 0 -8px;
    scale: 1.08;
    rotate: 0deg;
}
@media (prefers-reduced-motion: reduce) {
    .station-polaroid {
        transition: none;
    }
}
.station-polaroid .cover {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
}
.station-polaroid .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focus, center);
    transform: scale(var(--zoom, 1));
    transform-origin: var(--focus, center);
}
.station-polaroid .source {
    white-space: nowrap;
    position: absolute;
    left: 0.35rem;
    bottom: 0.35rem;
    background: #081b2be9;
    color: #fff;
    font: 700 0.6rem ui-sans-serif, system-ui;
    padding: 0.25rem 0.42rem;
    border-radius: 0.3rem;
    letter-spacing: 0.03em;
}
.station-polaroid strong {
    display: block;
    margin: 0.5rem 0.1rem 0.2rem;
    font: 700 0.78rem/1.25 ui-sans-serif, system-ui;
}
.station-polaroid small {
    display: block;
    text-align: right;
    color: #95521d;
    font-size: 0.7rem;
    margin: 0 0.1rem;
}
/* Gespiegelte Split-Szene in der Chronik: zwei Fotos, die Linie läuft dazwischen */
.station-split {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
}
/* Die Jahreszeit sitzt als Plakette auf der Linie */
.station-split .station-when {
    position: relative;
    z-index: 1;
    justify-self: center;
    /* Desktop: Das Polaroid ragt 1,8 rem über die Bilder – Abstand so, dass die Plakette frei
       steht (seit 2026-10-03; mobil unten wieder 1,6 rem, dort liegt kein Polaroid darunter) */
    margin-bottom: 3.6rem;
    padding: 0.45rem 1rem;
    border: 1px solid #ffab4866;
    border-radius: 999px;
    background: #091a2b;
    box-shadow: 0 0 18px #ffab4826;
}
.station-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--spine-gap);
    text-align: left;
}
.station-pair .station-photo:nth-child(2) > img {
    filter: brightness(0.95);
}
.station-pair figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3rem 1.4rem 1.2rem;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(0deg, #10283bd9, transparent);
}
.station-pair .station-photo:last-child .station-polaroid {
    left: -1.2rem;
    right: auto;
    top: -1.8rem;
    bottom: auto;
    width: clamp(110px, 30%, 170px);
}
/* Liegt mittig auf der goldenen Linie – ein schmaler Streifen in Hintergrundfarbe
   dämpft nur die Linie hinter dem Text auf halbe Deckkraft (eine ganze Fläche fiele als Kasten auf) */
.station-text {
    position: relative;
    z-index: 1;
    max-width: 44ch;
    margin: 2.6rem auto 0;
    padding: 0.6rem 1.2rem;
    background: linear-gradient(
        90deg,
        transparent calc(50% - 6px),
        #091a2b80 calc(50% - 6px),
        #091a2b80 calc(50% + 6px),
        transparent calc(50% + 6px)
    );
}
.memories-intro {
    margin: 0 auto;
    text-align: center;
    font: italic clamp(1.5rem, 2.6vw, 2.3rem) Georgia, serif;
    color: #ffd29a;
}
.memories-intro + .memories {
    margin-top: 2.5rem;
}
@media (prefers-reduced-motion: reduce) {
    .chronicle::before {
        animation: none;
    }
}
@media (max-width: 700px) {
    .chronicle {
        --spine-gap: 0px;
        padding-left: 2.2rem;
    }
    .chronicle::before {
        left: 0.5rem;
    }
    .station,
    .station-pair {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2rem;
    }
    .station {
        padding-bottom: 3.5rem;
    }
    .chronicle-dot {
        left: 0.5rem;
    }
    .station:nth-child(even) .station-photo {
        order: 0;
    }
    .station:nth-child(even) .station-copy {
        text-align: left;
    }
    .station:nth-child(even) .station-copy p:not(.station-when) {
        margin-left: 0;
    }
    .station-polaroid,
    .station:nth-child(even) .station-polaroid {
        left: auto;
        right: -0.6rem;
        bottom: -1.6rem;
        width: 31%;
        padding: 0.3rem 0.3rem 0.45rem;
    }
    .station-polaroid .source {
        font-size: 0.5rem;
        padding: 0.18rem 0.3rem;
    }
    .station-polaroid strong {
        margin-top: 0.35rem;
        font-size: 0.6rem;
    }
    .station-polaroid small {
        font-size: 0.55rem;
        white-space: nowrap;
    }
    .station-split {
        text-align: left;
    }
    .station-split .station-when {
        justify-self: start;
        margin-bottom: 1.6rem;
    }
    .station-pair .station-photo:last-child .station-polaroid {
        left: -0.6rem;
        right: auto;
        top: -1.4rem;
        width: 31%;
    }
    .station-text {
        margin: 2rem 0 0;
        padding: 0;
        background: none;
    }
}
/* Statements: „Irgendwann schaust Du …“ (.time) und „Im Chat scrollt …“ (Ende der Reise) */
.time .statement,
.journey-flow .statement {
    text-align: center;
    margin: 9rem auto 0;
    font-size: clamp(1.5rem, 3vw, 2.8rem);
    line-height: 1.3;
    letter-spacing: -0.035em;
    max-width: 22ch;
}
/* Desktop: erster Satz immer einzeilig */
@media (min-width: 701px) {
    .time .statement,
    .journey-flow .statement {
        max-width: none;
    }
    .time .statement .phrase,
    .journey-flow .statement .phrase {
        white-space: nowrap;
    }
}
.sphere {
    background: radial-gradient(
        circle at 50% 60%,
        #17415a 0%,
        #102b42 27%,
        #081929 64%
    );
    justify-items: center;
    text-align: center;
    /* Straff statt Bildschirmhöhe: oben Abstand + Zeitleiste (--tl-space), dann Kugel,
       unten Abstand. Kugel und Text teilen sich eine Rasterzelle (Text mittig in der Kugel). */
    --orb: min(75vw, 590px);
    --tl-space: 4.5rem;
    min-height: auto;
    padding: calc(var(--section-pad) + var(--tl-space)) 1.5rem var(--section-pad);
    grid-template-rows: minmax(var(--orb), auto);
}
.sphere .orb {
    position: relative;
    grid-area: 1 / 1;
    width: var(--orb);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid #dfad7470;
    box-shadow:
        0 0 80px #fba24a16,
        inset 0 0 90px #fba24a13;
    background:
        radial-gradient(circle at 28% 37%, #ffc483 0 3px, transparent 4px),
        radial-gradient(circle at 86% 30%, #ffd3a0 0 2px, transparent 3px),
        radial-gradient(circle at 60% 93%, #ffbe7b 0 3px, transparent 4px),
        radial-gradient(circle at 35% 79%, #fff0d4 0 2px, transparent 3px),
        radial-gradient(circle at 84% 78%, #ffb875 0 2px, transparent 3px),
        radial-gradient(circle, #143b53, #0d273d);
    opacity: 0.8;
}
/* Mobil ist die Kugel schmaler als der Text und liegt je nach Bildschirmhöhe anders
   dahinter – ohne sichere freie Stelle entfallen die Punkte dort. */
@media (max-width: 700px) {
    .sphere .orb {
        background: radial-gradient(circle, #143b53, #0d273d);
    }
}
.sphere .timeline {
    position: absolute;
    top: var(--section-pad);
    left: 50%;
    transform: translateX(-50%);
    width: min(78vw, 680px);
    display: flex;
    justify-content: space-between;
    z-index: 4;
    color: #e7c49a;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}
.sphere .timeline:before {
    content: "";
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    top: 0.36rem;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        #f7b97280 14%,
        #f7b97280 86%,
        transparent
    );
}
.sphere .timeline span {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    text-shadow: 0 2px 8px #071827;
}
.sphere .timeline span:before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #ffb768;
    box-shadow: 0 0 12px #ffb76877;
}
/*
 * Zeitregler auf dem Zeitstrahl (erzeugt von assets/js/main.js).
 * Position = Zeitpunkt zwischen 2026 und 2029; bestimmt, wie viele
 * Polaroids um die Sphere kreisen (3 … alle, chronologisch).
 */
.sphere .timeline.has-time-handle {
    cursor: pointer;
    touch-action: pan-y;
}
.time-handle {
    position: absolute;
    top: 0.275rem; /* Mitte der Jahrespunkte */
    left: 0;
    z-index: 1;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 3px solid var(--night);
    border-radius: 50%;
    background: var(--gold);
    box-shadow:
        0 0 0 1px #ffab4899,
        0 0 18px #ffab48aa;
    transform: translate(-50%, -50%);
    cursor: grab;
    touch-action: none;
}
/* größere, unsichtbare Greiffläche – vor allem für Finger */
.time-handle:before {
    content: "";
    position: absolute;
    inset: -0.8rem;
    border-radius: 50%;
}
.time-handle:hover {
    box-shadow:
        0 0 0 1px #ffab48,
        0 0 24px #ffab48;
}
/*
 * Fokusrahmen nur bei Tastaturbedienung. Nach Klick/Ziehen mit Maus oder Finger
 * setzt assets/js/main.js die Klasse .pointer-focus (kein Rahmen); sobald eine
 * Taste gedrückt wird, entfernt es sie wieder und der Rahmen erscheint.
 */
.time-handle:focus {
    outline: none;
}
.time-handle:focus:not(.pointer-focus) {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.time-handle.is-dragging {
    cursor: grabbing;
    box-shadow:
        0 0 0 4px #ffab4833,
        0 0 28px #ffab48;
}
/*
 * Bedienhinweis (Klassen setzt assets/js/main.js):
 * .hint-active = Zeitleiste im Bild → Pfeile wandern nach außen, Glow pulsiert.
 * .was-used    = Punkt wurde einmal bedient → Hinweis endet (auch Hover-Glow greift wieder).
 */
.time-hint {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--gold);
    text-shadow: 0 0 8px #ffab48aa;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
}
.time-hint-left {
    right: calc(100% + 0.35rem);
}
.time-hint-right {
    left: calc(100% + 0.35rem);
}
.time-handle.hint-active:not(.was-used) .time-hint-left {
    animation: time-hint-left 1.6s ease-in-out infinite;
}
.time-handle.hint-active:not(.was-used) .time-hint-right {
    animation: time-hint-right 1.6s ease-in-out infinite;
}
.time-handle.hint-active:not(.was-used) {
    animation: time-glow 2.2s ease-in-out infinite;
}
@keyframes time-hint-left {
    0% { opacity: 0; transform: translateX(3px); }
    35%, 65% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-9px); }
}
@keyframes time-hint-right {
    0% { opacity: 0; transform: translateX(-3px); }
    35%, 65% { opacity: 1; }
    100% { opacity: 0; transform: translateX(9px); }
}
@keyframes time-glow {
    0%, 100% {
        box-shadow:
            0 0 0 1px #ffab4899,
            0 0 18px #ffab48aa;
    }
    50% {
        box-shadow:
            0 0 0 6px #ffab4826,
            0 0 32px #ffab48;
    }
}
@media (prefers-reduced-motion: reduce) {
    /* keine Bewegung: Pfeile stehen still daneben, bis der Punkt benutzt wurde */
    .time-handle.hint-active:not(.was-used),
    .time-handle.hint-active:not(.was-used) .time-hint {
        animation: none;
    }
    .time-handle:not(.was-used) .time-hint {
        opacity: 0.85;
    }
}
.sphere .orbit-field {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}
/* Vergrößerung eines angehaltenen Polaroids (Desktop-Hover). Registriert, damit sie
   weich animiert; wirkt innerhalb der Kreisbahn-Transformation, also um die Mitte
   des Polaroids. (Die Eigenschaft scale würde um die Sphere-Mitte skalieren und das
   Polaroid dabei nach außen schieben.) */
@property --hold {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}
.orbit-card {
    position: absolute;
    /* Kreismittelpunkt = Kugelmitte (liegt um --tl-space/2 unter der Sektionsmitte) */
    top: calc(50% + var(--tl-space, 0px) / 2);
    left: 50%;
    width: clamp(48px, 7vw, 88px);
    padding: 4px 4px 11px;
    background: #eee9de;
    box-shadow: 0 10px 28px #0009;
    opacity: var(--alpha);
    transform: translate(-50%, -50%) rotate(var(--phase)) translateX(var(--radius))
        rotate(calc(-1 * var(--phase))) scale(calc(var(--size) * var(--hold)));
    animation: memory-orbit var(--duration) linear infinite;
    animation-direction: var(--direction);
    animation-play-state: paused;
    /* translate: Mausreaktion aus assets/js/main.js, wirkt zusätzlich zur Kreisbahn */
    will-change: transform, translate;
    /* Ein-/Ausblenden über den Zeitregler: schrumpft in die Sphere hinein bzw. heraus */
    transition:
        opacity 0.6s ease,
        scale 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s ease,
        --hold 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.orbit-card.is-hidden {
    opacity: 0;
    scale: 0.35;
}
.sphere.orbit-active .orbit-card {
    animation-play-state: running;
}
/*
 * Desktop: Polaroid unter der Maus anhalten (.is-held, assets/js/main.js). Es bleibt
 * an seiner Stelle der Bahn stehen, wird größer und voll deckend. Damit es nicht hinter
 * dem Text liegt, rückt die Polaroid-Ebene nach vorn und der Text tritt zurück (.has-held).
 */
.sphere.orbit-active .orbit-card.is-held {
    animation-play-state: paused;
}
.orbit-card.is-held {
    z-index: 1;
    opacity: 1;
    --hold: 1.9;
    box-shadow:
        0 18px 44px #000c,
        0 0 0 1px #ffab48aa,
        0 0 30px #ffab4888;
}
/* Mobil (Tipp statt Hover) sind die Polaroids kleiner – angehalten deshalb stärker vergrößert */
@media (max-width: 700px) {
    .orbit-card.is-held {
        --hold: 2.4;
    }
}
/* Scheinwerfer: alle anderen Polaroids treten zurück wie der Text */
.sphere.has-held .orbit-card:not(.is-held, .is-hidden) {
    opacity: 0.18;
}
.sphere .scene {
    transition: opacity 0.4s ease;
}
.sphere.has-held .orbit-field {
    z-index: 4;
}
.sphere.has-held .scene {
    opacity: 0.3;
}
.orbit-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
@keyframes memory-orbit {
    from {
        transform: translate(-50%, -50%) rotate(var(--phase)) translateX(var(--radius))
            rotate(calc(-1 * var(--phase))) scale(calc(var(--size) * var(--hold)));
    }
    to {
        transform: translate(-50%, -50%) rotate(calc(var(--phase) + 360deg))
            translateX(var(--radius)) rotate(calc(-1 * (var(--phase) + 360deg)))
            scale(calc(var(--size) * var(--hold)));
    }
}
.sphere .scene {
    grid-area: 1 / 1;
    padding: 0;
    display: grid;
    justify-items: center;
    z-index: 3;
    text-shadow: 0 2px 20px #071827;
}
.sphere h2 {
    max-width: none;
}
.sphere .lead {
    margin-inline: auto;
    max-width: 37ch;
}
/*
 * Mobil: Text innerhalb der Kugel, „Sphere weiß…“ darunter. Die Kugel wird etwas
 * größer, der Text schmaler (Blocksatz mit Silbentrennung wie alle Fließtexte mobil,
 * letzte Zeile mittig). Das Zitat steht absolut unter der Kugel – die Textmitte (.scene) liegt auf
 * der Kugelmitte, 50 % + halbe Kugel ist also ihr unterer Rand. Unten mehr Platz dafür.
 */
@media (max-width: 700px) {
    .sphere {
        --orb: min(86vw, 590px);
        padding-bottom: calc(var(--section-pad) + 4.5rem);
    }
    /* gegen die allgemeine Mobil-Regel .scene { align-self: end } (Foto-Szenen);
       seit 2026-10-03 mittig in der Kugel (vorher 30 px tiefer – mit dem jetzt kleineren,
       mitskalierenden Text ragte er so unten über den Kugelrand) */
    .sphere .scene {
        align-self: center;
        top: 0;
    }
    /* Dachzeile etwas enger, damit sie nicht über den Kugelrand reicht */
    .sphere .eyebrow {
        letter-spacing: 0.12em;
        font-size: 0.68rem;
    }
    /* Seit 2026-10-03: Überschrift und Text skalieren mit der Kugel (--orb), damit der ganze
       Textblock auch auf schmalen Handys innerhalb der Kugel bleibt. */
    .sphere h2 {
        font-size: min(3.4rem, calc(var(--orb) * 0.16));
    }
    .sphere .scene .lead {
        max-width: calc(var(--orb) * 0.7);
        margin-top: calc(var(--orb) * 0.03);
        font-size: calc(var(--orb) * 0.047);
        line-height: 1.42;
    }
    /* seit 2026-10-05 mit dem Demo-Link als gemeinsamer Block (.sphere-coda), vorher nur .principle */
    .sphere .scene .sphere-coda {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(50% + var(--orb) / 2 + 1.4rem);
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .sphere .scene .principle {
        margin: 0;
    }
}
.principle {
    font:
        italic clamp(1.7rem, 3vw, 2.6rem) Georgia,
        serif;
    color: #ffd29a;
    margin-top: 3rem;
}
/* Seit 2026-10-05: Link zur echten Sphere (../sphere-demo.php) unter „Sphere bewahrt…“ –
   goldene Umriss-Pille (nicht der orange CTA vom Schluss), nie unterstrichen */
.sphere-demo-link {
    position: relative;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.4rem;
    padding: 0.7rem 1.1rem 0.7rem 1.3rem;
    border: 1px solid #ffab4899;
    border-radius: 999px;
    background: #14304acc;
    box-shadow: 0 0 24px #ffab4833;
    color: #ffd29a;
    font-weight: 700;
    text-decoration: none;
    text-shadow: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}
.sphere-demo-link:hover {
    border-color: var(--gold);
    background: #16304a;
}
.sphere-demo-link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
}
.sphere-demo-tag {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--gold);
    color: #071827;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* Mobil steht „Sphere bewahrt…“ mit dem Link als Block absolut unter der Kugel (.sphere-coda, siehe
   oben) – der Link folgt dem Zitat mit festem Abstand, auch wenn es zweizeilig umbricht (360 px) */
@media (max-width: 700px) {
    .sphere {
        padding-bottom: calc(var(--section-pad) + 11rem);
    }
    .sphere .scene .sphere-demo-link {
        margin-top: 2rem;
        white-space: nowrap;
    }
}
/* schmale Handys (360 px): Pille kompakter, damit sie mit Rand in die Breite passt */
@media (max-width: 400px) {
    .sphere .scene .sphere-demo-link {
        gap: 0.5rem;
        padding: 0.6rem 0.9rem 0.6rem 1rem;
        font-size: 0.92rem;
    }
}
.discovery {
    background: radial-gradient(circle at 78% 50%, #233b54, #10283b 62%);
    padding: var(--section-pad) clamp(1.3rem, 7vw, 8rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 540px);
    gap: clamp(1rem, 3vw, 3rem);
    min-height: auto;
}
.discovery .scene {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    max-width: 680px;
    align-self: center;
}
.discovery h2 {
    max-width: 13ch;
}
.discovery .lead {
    color: var(--dim);
    max-width: 37ch;
}
.unknown {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    z-index: 1; /* über dem weichen Sektionsübergang (main > section::after) */
    width: min(42vw, 540px);
    aspect-ratio: 1;
    border: 1px dashed #ffb15a77;
    border-radius: 50%;
    box-shadow:
        0 0 100px #ffa53b16,
        inset 0 0 65px #ffa53b0c;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    justify-self: end;
    align-self: center;
    padding: 6% 9% 15%;
    background: radial-gradient(circle, #15344b99, #10263c66 70%);
}
/*
 * Discovery-Uhr: zwei goldene Punkte laufen beim Scrollen gegenüberliegend auf der
 * gestrichelten Kontur (1,25 Runden über die Sektion). Die Pixelkoordinaten
 * --clock-x1/-y1/-x2/-y2 setzt assets/js/main.js. Bewusst Pixel:
 * prozentuale translate()-Werte beziehen sich auf den Punkt selbst, nicht auf den Kreis.
 */
.unknown {
    --clock-x1: 0px;
    --clock-y1: 0px;
    --clock-x2: 0px;
    --clock-y2: 0px;
}
.unknown:before,
.unknown:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow:
        0 0 0 2px #ffab481f,
        0 0 12px #ffab48b8;
    pointer-events: none;
    will-change: transform;
}
.unknown:before {
    transform: translate(-50%, -50%) translate(var(--clock-x1), var(--clock-y1));
}
.unknown:after {
    transform: translate(-50%, -50%) translate(var(--clock-x2), var(--clock-y2));
}
.maybe {
    font:
        italic clamp(1.1rem, 1.8vw, 1.5rem) Georgia,
        serif;
    color: #ffd3a0;
    white-space: nowrap;
}
.event-list {
    width: 100%;
    display: grid;
    gap: 0.55rem;
}
.event {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.45rem;
    border: 1.5px solid #e3e8eb88;
    border-radius: 0.85rem;
    background: #0c2435b8;
    box-shadow: 0 7px 22px #0003;
    transition:
        border-color 0.55s,
        box-shadow 0.55s,
        background 0.55s;
}
.event.selected {
    border-color: #ffd77d;
    background: #214059dc;
    box-shadow: 0 0 22px #ffc66b55;
}
.event img {
    width: clamp(48px, 5.5vw, 68px);
    height: clamp(48px, 5.5vw, 68px);
    border-radius: 0.55rem;
    object-fit: cover;
    flex: none;
}
.event div {
    min-width: 0;
    text-align: left;
}
.event strong {
    display: block;
    font-size: clamp(0.78rem, 1.1vw, 0.94rem);
    line-height: 1.24;
    color: #fff1dc;
}
.event small {
    display: block;
    margin-top: 0.25rem;
    font-size: clamp(0.68rem, 0.9vw, 0.76rem);
    line-height: 1.2;
    color: #c6d2db;
}
.new-connections {
    min-height: 100svh;
    background: #091a2b;
}
/* Motiv gut erkennbar, aber nicht dominanter als der Text – Helligkeit wie das
   Schlussbild (.return .photograph); die Vignette dunkelt die Textseite ab */
.new-connections .photograph {
    object-position: center 40%;
    filter: brightness(0.86);
}
/* Text sitzt vertikal mittig (nicht mehr unten), damit er fertig eingeflogen ist,
   solange das Foto oben noch vollständig im Bild ist → Abdunklung v. a. von links */
.new-connections .vignette {
    background:
        linear-gradient(0deg, #10283be6 0%, #10283b66 30%, #10283b12 70%),
        linear-gradient(90deg, #10283bc4 0%, #10283b88 38%, transparent 64%);
    opacity: 0.85;
}
@media (max-width: 900px) {
    .new-connections .photograph {
        filter: brightness(0.84);
    }
    .new-connections .vignette {
        opacity: 0.9;
    }
}
.new-connections .connection-layout {
    position: relative;
    z-index: 2;
    align-self: center;
    width: 100%;
    padding: 5.5rem clamp(1.4rem, 7vw, 7rem) 7rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
}
.connection-copy h2 {
    font-size: clamp(3rem, 6.5vw, 6.8rem);
    max-width: 12ch;
}
.connection-copy .lead {
    max-width: 40ch;
    color: #edf0f2;
    /* keine einzelnen Wörter („beide.“) allein in der letzten Zeile */
    text-wrap: pretty;
}
.connection-copy .privacy {
    margin-top: 1.2rem;
    max-width: 37ch;
    color: #c3d1da;
    font-size: 1rem;
    line-height: 1.5;
}
/* Desktop einzeilig; mobil darf der Satz umbrechen (sonst ragt er auf schmalen
   Telefonen über den Rand und wird von der Sektion abgeschnitten) */
@media (min-width: 701px) {
    .connection-copy .privacy {
        max-width: none;
        white-space: nowrap;
    }
}
.evidence {
    padding: 1.5rem;
    background: #12304adf;
    backdrop-filter: blur(18px);
    border: 1px solid #ffe1aa80;
    border-radius: 1.25rem;
    box-shadow: 0 24px 55px #0008;
}
.evidence h3 {
    font-size: 1.15rem;
    line-height: 1.3;
    letter-spacing: -0.03em;
    margin: 0 0 0.25rem;
}
.evidence .sample {
    color: #bbcad3;
    font-size: 0.8rem;
    margin: 0 0 1.7rem;
}
/*
 * Klangwolke (Discovery): zwei weiche Wolken mit Genres, die nur einer hört,
 * driften beim Scrollen zusammen; in der Überlappung leuchtet Gemeinsames golden.
 * --merge (0…1) setzt assets/js/main.js. Bewusst unscharf: keine Zahlen, kein Score.
 */
.cloud-stage {
    position: relative;
    height: 13rem;
    margin: 0.6rem 0 0.4rem;
}
.cloud {
    position: absolute;
    top: 0;
    width: 13rem;
    height: 13rem;
    border-radius: 50%;
    /* feine Kreislinie wie beim Discovery-Kreis */
    border: 1px dashed #ffffff30;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.92rem;
    color: #d6e2ea;
}
.cloud span,
.cloud-overlap span {
    font-size: calc(var(--s, 1) * 1em);
    line-height: 1.1;
}
.cloud span {
    opacity: 0.62;
    filter: blur(0.5px);
}
.cloud-a {
    left: 0;
    align-items: flex-start;
    padding-left: 11%;
    background: radial-gradient(closest-side, #5d9ccc4d, #5d9ccc1c 65%, transparent);
    translate: calc((1 - var(--merge, 0)) * -2.2rem) 0;
}
.cloud-b {
    right: 0;
    align-items: flex-end;
    padding-right: 11%;
    border-color: #ffab4866;
    background: radial-gradient(closest-side, #ff9f2442, #ff9f2418 65%, transparent);
    translate: calc((1 - var(--merge, 0)) * 2.2rem) 0;
}
.cloud-overlap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffd389;
    text-shadow: 0 0 14px #ffab4899;
    background: radial-gradient(closest-side, #ffab4833, transparent 70%) center / 40% 80% no-repeat;
    opacity: var(--merge, 0);
    scale: calc(0.9 + var(--merge, 0) * 0.1);
}
.evidence .note-small {
    margin: 1.4rem 0 0;
    color: #aebcc7;
    font-size: 0.8rem;
    line-height: 1.45;
}
/*
 * Journey ohne Lichtspur (≤ 1050 px): Die Karte, die gerade mittig im Bild steht,
 * bekommt denselben goldenen Rahmen wie auf dem Desktop unter der Lichtspur.
 * .is-in-focus setzt assets/js/main.js (eigene Klasse, damit sie sich nicht mit
 * .is-beam-active des Desktop-Scripts in die Quere kommt).
 */
@media (max-width: 1050px) {
    .journey-step.is-in-focus .journey-visual,
    .journey-step.is-in-focus .journey-phone {
        border-color: rgba(255, 171, 72, 0.95);
        box-shadow:
            0 0 0 1px rgba(255, 171, 72, 0.48),
            0 0 24px rgba(255, 171, 72, 0.34),
            0 24px 60px rgba(0, 0, 0, 0.3);
    }
    .journey-step .journey-number {
        transition:
            background 0.3s,
            color 0.3s,
            box-shadow 0.3s;
    }
    .journey-step.is-in-focus .journey-number {
        background: #ff9f24;
        color: #071827;
        box-shadow: 0 0 16px rgba(255, 171, 72, 0.5);
    }
}

/*
 * Der geteilte Satz „🎵 Der Refrain ist so herrlich schräg 😄“ ist immer einzeilig.
 * Reicht der Platz nicht, verkleinert assets/js/main.js (fitRefrains) die Schrift.
 */
.refrain {
    white-space: nowrap;
}
span.refrain {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
}
.polaroid .caption span.refrain {
    display: block;
}

/*
 * Typo-Regel (nur mobil): Fließtexte mit deutscher Silbentrennung (<html lang="de">),
 * kein Blocksatz (seit 2026-10-02 entfernt). Manuell gesetzte Desktop-Umbrüche (<br>)
 * entfallen dort. Nicht betroffen: Dachzeilen, Überschriften, Zitate (.principle), das
 * Statement, UI-Elemente. Desktop bleibt unverändert (Einzeiligkeit, Umbrüche).
 */
@media (max-width: 700px) {
    main p:not(.eyebrow, .principle, .statement, .sample, .note-small) {
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 6 3 3;
    }
    main p:not(.eyebrow, .principle, .statement) br {
        display: none;
    }
}

/*
 * „Zwei Ja.“ – ruhige Zwischensektion vor dem Finale (kein Foto, viel Dunkel).
 * Überschrift diagonal wie „Ein Moment geht / auf die Reise.“; die beiden Hälften
 * fliegen von entgegengesetzten Seiten ein (data-fly-reverse, main.js).
 * Punktlinie: --yes (0…1) füllt sie von beiden Seiten zur Mitte; bei 1 setzt
 * main.js .is-joined → zwei Häkchen erscheinen nacheinander.
 */
.two-yes {
    --yes-indent: clamp(3rem, 20vw, 22rem);
    display: block;
    min-height: auto;
    background: radial-gradient(circle at 60% 70%, #0f2a40, #06131f 70%);
    padding: var(--section-pad) clamp(1.4rem, 7vw, 8rem);
}
.two-yes-inner {
    max-width: 1180px;
    margin-inline: auto;
}
.two-yes h2 {
    max-width: none;
    font-size: clamp(2.6rem, 5vw, 5.2rem);
    line-height: 0.98;
}
.two-yes h2 em {
    display: block;
    padding-left: var(--yes-indent);
    color: var(--gold);
    font-style: normal;
    will-change: transform;
}
.two-yes .lead {
    margin: 1.6rem 0 0 var(--yes-indent);
    max-width: 44ch;
    color: var(--dim);
    text-wrap: pretty;
}
.yes-line {
    --yes: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    max-width: 620px;
    margin: clamp(3rem, 6vw, 4.5rem) 0 0 var(--yes-indent);
}
.yes-person {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.5rem;
}
.yes-person small {
    color: var(--dim);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}
.yes-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #fff;
    border: 2px solid #ffab4840;
    transition:
        border-color 0.5s,
        box-shadow 0.5s;
}
.yes-avatar-chris {
    background: #3f78b0;
}
.yes-avatar-nina {
    background: #d8734e;
}
.yes-check {
    position: absolute;
    top: -6px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    background: var(--gold);
    color: var(--night);
    box-shadow: 0 0 12px #ffab4899;
    opacity: 0;
    scale: 0.4;
    transition:
        opacity 0.35s,
        scale 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}
/* Häkchen entstehen erst aus dem Verschmelzen der Beams: nach dem Aufleuchten des Glows
   (Höhepunkt bei ~0,4 s) zuerst Chris, einen Herzschlag später Nina.
   Die Verzögerung gilt nur beim Erscheinen – beim Zurückscrollen verschwinden sie sofort. */
.yes-line.is-joined .yes-check {
    opacity: 1;
    scale: 1;
    transition-delay: 0.45s;
}
.yes-line.is-joined .yes-person-second .yes-check {
    transition-delay: 0.85s;
}
.yes-line.is-joined .yes-avatar {
    border-color: var(--gold);
    box-shadow: 0 0 24px #ffab4866;
    transition-delay: 0.45s;
}
.yes-line.is-joined .yes-person-second .yes-avatar {
    transition-delay: 0.85s;
}
.yes-track {
    position: relative;
    height: 8px;
    /* ungefüllte Linie: blasse Punkte */
    background: radial-gradient(circle, #ffab4838 1.5px, transparent 2px) left center / 14px 6px repeat-x;
}
/* Eine durchgehende Punktreihe im selben Takt wie die blasse Linie; die Maske legt sie
   von beiden Enden her frei, bis sich die Hälften in der Mitte treffen. */
.yes-fill {
    --half: calc(var(--yes) * 50%);
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, var(--gold) 1.5px, transparent 2px) left center / 14px 6px repeat-x;
    filter: drop-shadow(0 0 3px #ffab4899);
    -webkit-mask-image: linear-gradient(90deg, #000 var(--half), transparent var(--half), transparent calc(100% - var(--half)), #000 calc(100% - var(--half)));
    mask-image: linear-gradient(90deg, #000 var(--half), transparent var(--half), transparent calc(100% - var(--half)), #000 calc(100% - var(--half)));
}
/*
 * Zwei Beams (Stil wie der Lichtimpuls der Journey) sitzen an der Spitze der beiden
 * wachsenden Linienhälften und laufen aufeinander zu. Beim Treffen (.is-joined)
 * verschwinden sie und gehen in einem Glow in der Mitte auf, der kurz aufleuchtet
 * und danach sanft weiteratmet.
 */
.yes-beam {
    position: absolute;
    top: 50%;
    width: clamp(80px, 9vw, 130px);
    height: 8px;
    background: radial-gradient(ellipse at center, #ffe3bd 0, #ffab4888 28%, #ffab4838 52%, #ffab4800 76%);
    filter: drop-shadow(0 0 5px #ffab48aa);
    /* unsichtbar, solange die Linie noch nicht wächst */
    opacity: clamp(0, calc(var(--yes) * 12), 1);
    transition: opacity 0.3s;
    pointer-events: none;
}
.yes-beam-a {
    left: calc(var(--yes) * 50%);
    translate: -50% -50%;
}
.yes-beam-b {
    right: calc(var(--yes) * 50%);
    translate: 50% -50%;
}
.yes-merge {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 84px;
    height: 84px;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle, #fff4df 0, #ffd08a 12%, #ffab4866 34%, #ffab4800 68%);
    opacity: 0;
    scale: 0.3;
    pointer-events: none;
}
.yes-line.is-joined .yes-beam {
    opacity: 0;
}
.yes-line.is-joined .yes-merge {
    animation:
        yes-merge 1.1s cubic-bezier(0.2, 0.9, 0.3, 1) forwards,
        yes-breathe 3.2s ease-in-out 1.1s infinite;
}
@keyframes yes-merge {
    0% { opacity: 0; scale: 0.3; }
    35% { opacity: 1; scale: 1.45; }
    100% { opacity: 0.8; scale: 1; }
}
@keyframes yes-breathe {
    0%, 100% { opacity: 0.8; scale: 1; }
    50% { opacity: 0.55; scale: 0.88; }
}
@media (prefers-reduced-motion: reduce) {
    .yes-line.is-joined .yes-merge {
        animation: none;
        opacity: 0.8;
        scale: 1;
    }
}
@media (max-width: 700px) {
    .two-yes {
        --yes-indent: 12vw;
    }
    .two-yes .lead,
    .yes-line {
        margin-left: 0;
    }
    .yes-line {
        max-width: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .yes-check,
    .yes-avatar {
        transition: none;
    }
}

/*
 * Foto-Szenen der Sphere („Weißt Du noch?“, „Und plötzlich läuft er wieder.“):
 * Vollbild-Foto, Text unten links – die Gesichter liegen in der oberen Bildhälfte.
 */
.photo-scene .photograph {
    filter: brightness(0.84);
}
.photo-scene .vignette {
    background:
        linear-gradient(0deg, #10283bf2 0%, #10283bb0 28%, #10283b33 58%, transparent 78%),
        linear-gradient(90deg, #10283b99 0%, transparent 55%);
}
.photo-scene .scene {
    align-self: end;
    padding-top: 10rem;
    padding-bottom: clamp(4.5rem, 11vh, 8rem);
}
.photo-scene h2 {
    max-width: 16ch;
}
.photo-scene .lead {
    max-width: 36ch;
}
.capsule-bench .photograph {
    object-position: center 28%;
}
.capsule-song .photograph {
    object-position: center 30%;
}
@media (max-width: 700px) {
    .capsule-bench .photograph {
        object-position: 44% center;
    }
    .capsule-song .photograph {
        object-position: 40% center;
    }
}
/* Kreisschluss (zweite Split-Szene): Schnee und Morgensonne sind deutlich heller
   als die Bilder der ersten Split-Szene – Text braucht mehr Abdunklung. */
.split-finale .panel:first-child .overlay {
    opacity: 0.85;
}
.split-finale .panel:last-child .overlay {
    opacity: 0.6;
}
.split-finale .panel:last-child img {
    filter: brightness(0.85);
    /* mobil lädt <picture> finale-chris-morgenkaffee-hoch.webp – Chris dort im linken Drittel */
    object-position: 30% center;
}
/* Desktop: Nina weiter zur Mitte – ihr Kopf ist wichtiger als das Zugfenster (SaM) */
@media (min-width: 701px) {
    .split-finale .panel:first-child img {
        object-position: 72% center;
    }
}
/* <picture> im Finale füllt das Panel wie ein Bild (main.js misst den Elternblock fürs Einblenden) */
.split .panel > picture {
    display: block;
    width: 100%;
    height: 100%;
}
/* Desktop: Trennlinie (Beam) knapp am Halsausschnitt seines T-Shirts (SaM) */
@media (min-width: 701px) {
    .split-finale .panel:last-child img {
        /* finale-chris-grin.webp (1786×1562): von SaM passend zugeschnitten – beginnt links oben */
        object-position: left top;
    }
}
/* Alltags-Split („Das Gespräch geht weiter“): Die Figuren stehen im Bilddrittel
   (Nina links, Chris rechts) – der Ausschnitt folgt ihnen, sonst schneidet das
   schmale Panel (vor allem mobil) sie ab. */
.split-alltag .panel:first-child img {
    object-position: 22% center;
}
.split-alltag .panel:last-child img {
    object-position: 74% center;
}

/*
 * Letzte Sektion (Desktop): zweizeiliges Raster.
 * Zeile 1 = freier Raum mit dem Logo (mittig), Zeile 2 = Textblock.
 * So sitzt das Logo immer ÜBER dem Text und kann ihn bei keiner
 * Fenstergröße überdecken; reicht der Platz nicht, wird die Sektion höher.
 * (Mobil: eigene Flex-Spalte weiter unten.)
 */
.return {
    background: #101d2b;
    min-height: 100svh;
    grid-template-rows: 1fr auto;
    align-items: stretch;
    padding-top: clamp(4.5rem, 10svh, 6.5rem); /* Platz für die fixierte Kopfzeile */
}
.return .photograph {
    object-position: center;
}
/* Logo – ob direkt oder in einem Link – in Zeile 1, mittig */
.return > a,
.return > .end-logo {
    grid-row: 1;
    place-self: center;
    position: relative;
    z-index: 2;
}
.return .end-logo {
    /* 230 px auf hohen Bildschirmen, bei niedrigen Fenstern kleiner (min. 110 px) */
    width: clamp(110px, min(20vw, 22svh), 230px);
    height: auto;
    filter: drop-shadow(0 20px 45px #000a);
}
.return .end-logo.pulsing {
    animation: logo-pulse 2.8s ease-in-out infinite;
}
@keyframes logo-pulse {
    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 20px 45px #000a);
    }
    50% {
        transform: scale(1.055);
        filter: drop-shadow(0 18px 38px #ffac4a77);
    }
}
.return .scene {
    grid-row: 2;
    align-self: end;
    padding-top: clamp(1.5rem, 4vh, 3rem);
    padding-bottom: clamp(3rem, 7vh, 6rem);
    z-index: 3;
}
/* Überschrift wächst mit Breite UND Höhe, damit Logo + Text auch in niedrigen Fenstern passen */
.return h2 {
    font-size: clamp(2.6rem, min(6vw, 8.5svh), 6rem);
}
/* Schlussbild bewusst heller als die übrigen Fotos (brightness 0.68 / starke Vignette):
   Abdunklung nur dort, wo Text steht – links und unten */
.return .photograph {
    filter: brightness(0.86);
}
.return .vignette {
    background:
        linear-gradient(90deg, #10283bc4 0%, #10283b70 42%, transparent 72%),
        linear-gradient(0deg, #10283bb3 0%, transparent 42%);
}
@media (max-width: 700px) {
    /* mobil steht der Text mittig unten → Abdunklung von unten */
    .return .vignette {
        background: linear-gradient(0deg, #10283be0 0%, #10283b99 45%, #10283b33 100%);
    }
}
.return .lead {
    max-width: 35ch;
}
/* Button „Zur Anmeldung“ – nur Links im Textbereich, nicht der Logo-Link */
.return .scene a {
    display: inline-block;
    margin-top: clamp(1.2rem, 3svh, 2.5rem);
    border: 1px solid #ffab48;
    padding: 1rem 1.35rem;
    border-radius: 99px;
    text-decoration: none;
    color: #ffd1a0;
}
.return .scene a:hover,
.return .scene a:focus-visible {
    background: var(--gold);
    color: var(--night);
}
@media (min-width: 701px) and (max-height: 700px) {
    /* sehr niedrige Desktop-Fenster (z. B. 1366×768-Laptop mit Browserleisten) */
    .return .end-logo {
        width: clamp(100px, 18svh, 150px);
    }
    .return h2 {
        font-size: clamp(2.4rem, 7.5svh, 3.4rem);
    }
    .return .lead {
        margin-top: 1rem;
        font-size: 1.1rem;
    }
}
.corner-slogan {
    position: fixed;
    right: 10px;
    bottom: 10px;
    height: 80px;
    width: auto;
    max-width: calc(100vw - 20px);
    z-index: 25;
    pointer-events: none;
    filter: drop-shadow(0 2px 9px #071827b8);
}
/* Blendet beim Herunterscrollen aus (--slogan-fade 1 → 0, gesetzt von main.js) – seit 2026-10-06 auf allen
   Größen; im gleichen Maß blendet der „Nach oben“-Button ein (/assets/css/to-top.css) */
.corner-slogan {
    opacity: var(--slogan-fade, 1);
}
footer {
    padding: 2rem clamp(1.3rem, 4vw, 4rem);
    background: #0d2538;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    color: #aebcc5;
    font-size: 0.9rem;
}
@media (min-width: 1441px) {
    footer {
        max-width: 1440px;
        margin-inline: auto;
    }
    /*
     * Kopfzeile: Hintergrund immer über die volle Viewport-Breite,
     * nur der Inhalt wird auf die 1440-px-Spalte eingerückt
     * (100 % = Breite der fixierten Kopfzeile, ohne Scrollbalken).
     */
    .brand {
        padding-inline: calc((100% - 1440px) / 2 + clamp(1.2rem, 4vw, 4rem));
    }
    main section:not(.split) .scene {
        width: 100%;
        max-width: 1440px;
        margin-inline: auto;
    }
    .machine,
    .time,
    .discovery {
        padding-left: calc((100vw - 1440px) / 2 + 4rem);
        padding-right: calc((100vw - 1440px) / 2 + 4rem);
    }
    .new-connections .connection-layout {
        max-width: 1440px;
        margin-inline: auto;
    }
    .split .panel:first-child .scene {
        padding-left: calc((100vw - 1440px) / 2 + 4rem);
        padding-right: 3rem;
    }
    .split .panel:last-child .scene {
        padding-left: 3rem;
        padding-right: calc((100vw - 1440px) / 2 + 4rem);
    }
}
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.8s,
        transform 0.8s;
}
.reveal.visible {
    opacity: 1;
    transform: none;
}
@media (max-width: 700px) {
    /*
     * Kapitelname auch mobil: einzeilig rechts neben Logo/Namen. Er bekommt
     * den restlichen Platz; assets/js/main.js (fitChapterLabel) verkleinert
     * die Schrift, bis er in eine Zeile passt.
     */
    .brand a {
        flex: none;
    }
    .brand .chapter {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 0.9rem;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        font-size: 0.66rem;
        letter-spacing: 0.1em;
    }
    .photograph {
        object-position: 57% center;
    }
    .vignette {
        background: linear-gradient(0deg, #10283bed, #10283b66 65%, #10283b33);
    }
    .scene {
        align-self: end;
        padding: 7rem 1.4rem 5rem;
    }
    .split {
        display: block;
        min-height: auto;
    }
    /* zwei Fotos übereinander: je 62 % der Bildschirmhöhe (vorher 75 %, seit 2026-10-02
       flacher – die Szene bleibt bei gut 1,2 statt 1,5 Bildschirmhöhen); min-height hält
       Platz für Dachzeile, Überschrift und Nachrichtenbox */
    .split .panel {
        height: 62svh;
        min-height: 26rem;
    }
    .split .scene {
        bottom: 0;
        padding: 2rem 1.4rem;
    }
    .machine {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .signal {
        padding: 1rem;
    }
    .sphere .timeline {
        width: 85vw;
        font-size: 0.68rem;
    }
    .orbit-card {
        width: clamp(42px, 12vw, 60px);
        padding: 3px 3px 7px;
    }
    .discovery {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: var(--section-pad) 1.3rem;
        gap: 2rem;
    }
    .discovery .scene {
        grid-column: 1;
        grid-row: 1;
        align-self: auto;
        padding: 0;
    }
    .unknown {
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
        width: min(90vw, 500px);
        padding: 6% 9% 15%;
        gap: 0.65rem;
    }
    .event {
        gap: 0.55rem;
        padding: 0.35rem;
    }
    .event img {
        width: clamp(43px, 13vw, 58px);
        height: clamp(43px, 13vw, 58px);
    }
    .time {
        min-height: auto;
    }
    .time .statement,
    .journey-flow .statement {
        margin-top: 6rem;
    }
    /* Seit 2026-10-03: 3 Spalten statt 2 – die Polaroids sind per Klick vergrößerbar, die Texte
       müssen im Raster nur noch angedeutet sein (main.js passt sie einzeilig, beliebig klein ein). */
    .memories {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.7rem;
        /* etwas Luft, damit die gedrehten Ecken nicht am Bildschirmrand anstoßen */
        padding-inline: 0.5rem;
    }
    .memories .mini {
        padding: 0.32rem 0.32rem 0.6rem;
    }
    .memories .mini .captionline {
        margin: 0.4rem 0.1rem 0.15rem;
    }
    /* Grundgrößen klein: main.js verkleinert nur zu lange Zeilen – kurze blieben sonst groß */
    .memories .mini small {
        padding: 0 0.1rem;
        font-size: 0.5rem;
    }
    .memories .mini .votes {
        margin: 0.25rem 0.1rem 0;
        font-size: 0.55rem;
    }
    .memories .mini .source {
        left: 0.25rem;
        bottom: 0.25rem;
        padding: 0.18rem 0.3rem;
        font-size: 0.45rem;
    }
    .memories .mini:nth-child(4),
    .memories .mini:nth-child(5),
    .memories .mini:nth-child(7),
    .memories .mini:nth-child(8),
    .memories .mini:nth-child(11),
    .memories .mini:nth-child(12) {
        /* mobil 6 von 12 – gezeigt: 1, 2, 3, 6, 9, 10 (Vinyl-Fundstück statt Kaffeetisch).
           Nur gerade gegen gerade tauschen, sonst kippt das Zickzack (:nth-child(even)). */
        display: none;
    }
    .mini:nth-child(n) {
        margin-top: 0;
    }
    /* 3er-Raster: sichtbar sind 1, 2, 3, 6, 9, 10 – die mittlere Spalte (2 und 9) sitzt tiefer */
    .memories .mini:nth-child(2),
    .memories .mini:nth-child(9) {
        margin-top: 1.4rem;
    }
    .mini .captionline {
        font-size: 0.62rem;
    }
    .new-connections {
        min-height: 130svh;
    }
    .new-connections .photograph {
        object-position: 47% center;
    }
    .new-connections .vignette {
        background: linear-gradient(0deg, #10283bf8 0%, #10283bce 45%, #10283b22 86%);
    }
    .new-connections .connection-layout {
        grid-template-columns: 1fr;
        padding: 8rem 1.3rem 6rem;
        gap: 2rem;
    }
    .connection-copy h2 {
        font-size: clamp(3rem, 10vw, 4.4rem);
    }
    .connection-copy .lead {
        margin-top: 1.5rem;
    }
    .evidence {
        padding: 1.2rem;
    }
    .return {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(1.5rem, 5svh, 3rem);
        min-height: 100svh;
        padding: 5.5rem 0 2rem;
        overflow: clip;
    }
    .return .photograph {
        /* mobil passt nur ein Ausschnitt: Nina (die Seite beginnt mit Chris, endet mit ihr) */
        object-position: 82% center;
    }
    .return .end-logo {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 145px;
        margin: 0 auto;
        flex: none;
    }
    .return .scene {
        align-self: center;
        width: min(100%, 34rem);
        margin: 0;
        padding: 0 1.5rem 2rem;
        text-align: center;
    }
    .return h2 {
        max-width: none;
        font-size: clamp(2.65rem, 10vw, 3.7rem);
    }
    .return .lead {
        margin: 1.25rem auto 0;
    }
    .return .scene a {
        margin-top: 1.8rem;
    }
    .return .end-logo.pulsing {
        animation: logo-pulse-mobile 2.8s ease-in-out infinite;
    }
    @keyframes logo-pulse-mobile {
        0%,
        100% {
            transform: scale(1);
            filter: drop-shadow(0 20px 45px #000a);
        }
        50% {
            transform: scale(1.055);
            filter: drop-shadow(0 18px 38px #ffac4a77);
        }
    }
    footer {
        display: none;
    }
}
@media (max-width: 700px) and (max-height: 700px) {
    .return {
        padding-top: 4.5rem;
        gap: 1.5rem;
    }
    .return .end-logo {
        width: 125px;
    }
    .return .lead {
        margin-top: 1rem;
    }
    .return .scene a {
        margin-top: 1.2rem;
    }
    .return .scene {
        padding-bottom: 1rem;
    }
}
/* ------------------------------------------------------------
 * Erinnerungs-Polaroids („Wochen werden Jahre“)
 * - mobil: jede Textzeile einzeilig; die Schriftgröße passt
 *   assets/js/main.js an die Kartenbreite an (fitSingleLine)
 * - Klick/Touch/Enter: Vergrößerung im Modal (.memory-zoom)
 * ------------------------------------------------------------ */
.mini {
    cursor: zoom-in;
}
.mini:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 4px;
}
/*
 * Hover (nur mit echter Maus) bzw. Tastaturfokus: Das Polaroid hebt sich an,
 * richtet sich gerade und legt sich über die Nachbarn – „anklickbar“.
 * Über die eigenständigen Eigenschaften translate/scale/rotate, damit das
 * Einfliegen (transform) unberührt bleibt; rotate hebt die Schräglage auf.
 * Erst wenn die Karte angekommen ist (.arrived).
 */
@media (hover: hover) and (pointer: fine) {
    .mini {
        transition:
            transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.8s ease,
            translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
            scale 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
            rotate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
            box-shadow 0.35s ease;
        /* Verzögerung nur fürs Einfliegen, nicht für den Hover */
        transition-delay: var(--delay), var(--delay), 0s, 0s, 0s, 0s;
    }
    .mini.arrived:hover {
        z-index: 3;
        translate: 0 -10px;
        scale: 1.06;
        rotate: calc(var(--r) * -1);
        box-shadow:
            0 40px 70px #000a,
            0 0 0 1px #ffab4855;
    }
}
.mini.arrived:focus-visible {
    z-index: 3;
    translate: 0 -10px;
    scale: 1.06;
    rotate: calc(var(--r) * -1);
}
@media (max-width: 700px) {
    .mini .captionline,
    .mini small,
    .mini .votes {
        white-space: nowrap;
        overflow: hidden;
    }
}

.memory-zoom {
    padding: 0;
    border: 0;
    background: transparent;
    max-width: none;
    max-height: none;
    overflow: visible;
}
.memory-zoom::backdrop {
    background: #10283bd9;
    backdrop-filter: blur(6px);
}
.memory-zoom-card {
    position: relative;
    /* Desktop: „vernünftige“ Größe, bei niedrigen Fenstern durch die Höhe begrenzt */
    width: min(460px, calc(100svh - 230px));
    min-width: 240px;
    padding: 0.9rem 0.9rem 1.5rem;
    background: #eee9de;
    color: #183047;
    box-shadow: 0 35px 90px #000c;
    transform: rotate(-1deg);
    cursor: zoom-out;
    animation: memory-zoom-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes memory-zoom-in {
    from {
        opacity: 0;
        transform: scale(0.9) rotate(-3deg);
    }
    to {
        opacity: 1;
        transform: rotate(-1deg);
    }
}
.memory-zoom-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
.memory-zoom-card .cover {
    position: relative;
    overflow: hidden;
}
/* Chronik-Polaroids zeigen einen Bildausschnitt (--focus/--zoom im style des Bildes);
   ohne diese Variablen bleibt alles wie bei den Raster-Polaroids */
.memory-zoom-card .cover img {
    object-position: var(--focus, center);
    transform: scale(var(--zoom, 1));
    transform-origin: var(--focus, center);
}
.memory-zoom-card .source {
    position: absolute;
    left: 0.7rem;
    bottom: 0.7rem;
    background: #081b2be9;
    color: white;
    font:
        700 0.8rem ui-sans-serif,
        system-ui;
    padding: 0.4rem 0.65rem;
    border-radius: 0.35rem;
    letter-spacing: 0.03em;
}
/* Im Modal immer einzeilig – Schriftgröße passt assets/js/main.js an */
.memory-zoom-card .captionline,
.memory-zoom-card small,
.memory-zoom-card .votes {
    display: block;
    white-space: nowrap;
    overflow: hidden;
}
.memory-zoom-card .captionline {
    margin: 1rem 0.2rem 0.35rem;
    font:
        700 1.35rem/1.3 ui-sans-serif,
        system-ui;
}
.memory-zoom-card small {
    padding: 0 0.2rem;
    color: #536271;
    font:
        500 1rem/1.35 ui-sans-serif,
        system-ui;
}
.memory-zoom-card .votes {
    margin: 0.8rem 0.2rem 0;
    text-align: right;
    color: #95521d;
    font-size: 1.05rem;
}
.memory-zoom-close {
    position: absolute;
    top: 1.3rem;
    right: 1.3rem;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    border-radius: 50%;
    background: #081b2bd9;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.memory-zoom-close:hover,
.memory-zoom-close:focus-visible {
    background: var(--gold);
    color: var(--night);
    outline: 2px solid #fff;
    outline-offset: 2px;
}
html.memory-zoom-open {
    overflow: hidden;
}
@media (max-width: 700px) {
    /* Mobil: nahezu die volle Breite; im Querformat durch die Höhe begrenzt */
    .memory-zoom-card {
        width: min(calc(100vw - 24px), calc(100svh - 190px));
        min-width: 0;
        padding: 0.6rem 0.6rem 1.1rem;
    }
}

@media (max-width: 700px) {
    /* Split-Fotos liegen mobil übereinander: weicher Übergang zwischen beiden */
    .split .panel:first-child {
        --fade-bottom: clamp(3rem, 10vh, 6rem);
    }
    .split .panel:last-child {
        --fade-top: clamp(3rem, 10vh, 6rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .memory-zoom-card {
        animation: none;
    }
    .orbit-card {
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .reveal,
    .mini {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .orbit-card,
    .return .end-logo.pulsing {
        animation: none;
    }
}

/* ---------------------------------------------------------
   Story-Zwischensektion: Ein Moment geht auf die Reise
   Testintegration 2026-09-30
   --------------------------------------------------------- */
.journey-flow {
    min-height: auto;
    padding: clamp(2.5rem, 6vw, 6rem) clamp(1rem, 3vw, 3rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 138, 0, 0.07), transparent 38%),
        #10283b;
    overflow: hidden;
}

.journey-flow-inner {
    width: min(1600px, 100%);
    margin: 0 auto;
}

.journey-flow img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: clamp(14px, 1.5vw, 24px);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
}

@media (max-width: 760px) {
    .journey-flow {
        padding: 2.5rem 0.75rem;
    }

    .journey-flow-inner {
        /* Das breite Storyboard bleibt vollständig sichtbar; auf Mobile
           dient diese Version zunächst bewusst der Rhythmus-/Wirkungsprobe. */
        width: 100%;
    }

    .journey-flow img {
        border-radius: 12px;
    }
}

/* ---------------------------------------------------------
   HTML-Variante der Ablaufgeschichte
   --------------------------------------------------------- */
.journey-flow-html { padding-block: clamp(4rem, 8vw, 8rem); padding-top: clamp(6rem, 11vw, 10rem); /* mehr Luft zur Split-Sektion davor (seit 2026-10-02 knapper) */ padding-bottom: var(--section-pad); }
.journey-flow-html .journey-flow-inner { width: min(1720px, 100%); }
/* Gemeinsame Kartenhöhe: Karten UND goldene Punktlinie darunter hängen daran */
.journey-flow-html { --journey-card-h: clamp(480px, 34vw, 560px); }
/* Bewusst nicht zentriert: „auf die Reise.“ ist schon losgefahren – eigene Zeile,
   deutlich nach rechts eingerückt; der Untertitel folgt dem Einzug (Diagonale).
   Einflug: main.js bewegt [data-fly-fast] schneller als den Rest der Überschrift. */
.journey-intro { --journey-indent: clamp(3rem, 24vw, 26rem); text-align:left; margin:0 0 clamp(3rem,6vw,5rem); padding-left:clamp(0rem, 1.5vw, 1.5rem); }
.journey-intro h2 { max-width:none; margin:.35rem 0 1rem; font-size:clamp(2.5rem,5vw,5.7rem); line-height:.96; letter-spacing:-.045em; }
.journey-intro h2 em { display:block; padding-left:var(--journey-indent); white-space:nowrap; color:#ff9f24; font-style:normal; will-change:transform; }
.journey-intro .lead { margin-left:var(--journey-indent); max-width:760px; }
.journey-steps { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,2vw,2rem); }
.journey-step { min-width:0; position:relative; z-index:2; }
.journey-visual,.journey-phone { height:var(--journey-card-h); border:1px solid rgba(255,255,255,.10); border-radius:24px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.30); background:#0b2031; position:relative; }
.journey-visual img { width:100%; height:100%; object-fit:cover; display:block; }
.journey-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,20,31,.04) 35%,rgba(5,20,31,.85) 100%); }
.journey-copy { display:flex; gap:1rem; align-items:flex-start; margin-top:3.25rem; padding:0 .15rem; }
.journey-number { flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; border:2px solid #ff9f24; border-radius:50%; color:#ffb13b; font-weight:800; font-size:1.25rem; }
.journey-copy h3 { margin:.15rem 0 .5rem; text-transform:uppercase; letter-spacing:.06em; font-size:clamp(1rem,1.35vw,1.35rem); }
.journey-copy p { margin:0; color:rgba(255,255,255,.74); line-height:1.45; font-size:.98rem; }
.share-float,.receive-float { position:absolute; left:7%; right:7%; bottom:7%; padding:1rem; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(7,24,39,.82); backdrop-filter:blur(14px); box-shadow:0 14px 35px rgba(0,0,0,.3); }
.share-float small,.receive-float small { display:block; color:#ffad38; text-transform:uppercase; letter-spacing:.13em; font-size:.68rem; margin-bottom:.4rem; }
.share-float strong,.receive-float strong { display:block; line-height:1.3; }
/* „Teilen“ rechts in der Box – wie bei den Split-Szenen */
.share-float span { margin-top:.8rem; margin-left:auto; width:fit-content; display:flex; gap:.45rem; align-items:center; background:#ff9f24; color:#071827; border-radius:999px; padding:.55rem .8rem; font-weight:800; }
.receive-float div { display:flex; gap:.5rem; margin-top:.8rem; }
.receive-float div span { display:grid; place-items:center; width:42px; height:36px; border-radius:12px; background:rgba(255,255,255,.1); }
.receive-float div span.active { border:1px solid #ff9f24; background:rgba(255,159,36,.16); box-shadow:0 0 0 1px rgba(255,159,36,.08) inset; }
.journey-phone { padding:1rem; background:linear-gradient(180deg,#0c2538,#081a29); display:flex; flex-direction:column; gap:.55rem; }
.phone-head { display:grid; grid-template-columns:30px 1fr 30px; align-items:center; text-align:center; padding:.2rem 0 .55rem; }
.phone-label { color:rgba(255,255,255,.55); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; margin-top:.15rem; }
.together-choice { border:1px solid rgba(255,159,36,.55); background:rgba(255,159,36,.08); color:#fff; border-radius:15px; padding:.7rem; display:grid; grid-template-columns:42px 1fr 24px; gap:.65rem; align-items:center; text-align:left; }
.together-choice .avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#d8734e; font-weight:800; }
/* Auswahl mehrerer Togethers: nicht gewählte ohne Goldrahmen, mit leerem Kreis */
.together-list { display:grid; gap:.42rem; }
.together-list .together-choice { padding:.5rem .7rem; }
.together-choice.is-off { border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.03); }
.together-choice.is-off>i { color:rgba(255,255,255,.38); }
.together-choice .avatar-eona { background:#4f86c6; }
.together-choice .avatar-vero { background:#8b6cc4; }
.together-choice small { display:block; opacity:.58; margin-top:.12rem; }.together-choice>i{color:#ffad38}
.rating-row { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; }.rating-row button{border:1px solid rgba(255,255,255,.12);background:#102b40;color:#fff;border-radius:14px;padding:.55rem;font-size:1.2rem}.rating-row button.active{border-color:#ff9f24;background:rgba(255,159,36,.16)}
.quick-row { display:grid; grid-template-columns:1fr 46px 46px; gap:.5rem; margin-top:auto; }.quick-row span{min-width:0;padding:.75rem;border:1px solid rgba(255,255,255,.12);border-radius:14px;color:rgba(255,255,255,.83);font-size:.83rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quick-row button{border:1px solid rgba(255,255,255,.12);background:#102b40;color:#fff;border-radius:14px;font-size:1.2rem}.quick-row button .fa-microphone{font-size:1.05rem;color:rgba(255,255,255,.85)}
.send-demo { border:0; border-radius:999px; padding:.85rem 1rem; background:#ff9f24; color:#071827; font-weight:900; font-size:1rem; }.send-demo i{margin-right:.4rem}
.talk-float { position:absolute; left:7%; right:7%; bottom:8%; display:grid; grid-template-columns:30px 1fr 22px; gap:.6rem; align-items:center; background:#1eaa61; color:#fff; border-radius:999px; padding:.85rem 1rem; font-weight:800; box-shadow:0 12px 35px rgba(0,0,0,.32); }.talk-float .fa-whatsapp{font-size:1.65rem}
/* Wanderrahmen (Desktop, Lichtspur): Der Schritt leuchtet, solange der Lichtimpuls
   horizontal durch seinen Bildbereich läuft. .is-beam-active setzt assets/js/main.js
   (nicht bei „Bewegung reduzieren“, nicht ≤ 1050 px). */
.journey-visual,
.journey-phone {
    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}
.journey-step.is-beam-active .journey-visual,
.journey-step.is-beam-active .journey-phone {
    border-color: #ffab48f2;
    box-shadow:
        0 0 0 1px #ffab487a,
        0 0 24px #ffab4857,
        0 24px 60px #0000004d;
}
/* Wiederkehrendes Verbindungsmotiv: dieselbe feine Punktlinie wie zwischen
   „Für Nina.“ und „Und Nina grinst auch.“ – diesmal horizontal. */
.journey-beam {
    position:absolute;
    z-index:1;
    left:2%;
    right:2%;
    top:calc(var(--journey-card-h) + 18px);
    height:8px;
    pointer-events:none;
    background:radial-gradient(circle, var(--gold) 1.5px, transparent 2px) left center / 14px 6px repeat-x;
    filter:drop-shadow(0 0 3px #ffab4866);
    opacity:.82;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.journey-beam span {
    position:absolute;
    top:50%;
    left:-90px;
    width:180px;
    height:8px;
    transform:translateY(-50%);
    background:radial-gradient(ellipse at center,#ffe3bd 0,#ffab4888 28%,#ffab4838 52%,#ffab4800 76%);
    filter:drop-shadow(0 0 5px #ffab48aa);
    animation:journeyPulse 11.5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes journeyPulse {
    0% { left:-90px; opacity:0; }
    6% { opacity:1; }
    72% { left:calc(100% - 90px); opacity:1; }
    78%,100% { left:calc(100% + 90px); opacity:0; }
}
@media(max-width:1050px){.journey-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem 1.25rem}.journey-beam{display:none}.journey-flow-html{--journey-card-h:500px}}
@media(max-width:620px){.journey-flow-html{padding:7rem .9rem var(--section-pad)}.journey-intro{--journey-indent:14vw;text-align:left;margin-bottom:2.5rem}.journey-intro .lead{margin-left:0}.journey-intro h2{font-size:clamp(2.5rem,13vw,4rem)}.journey-intro .lead{font-size:1rem}.journey-steps{display:block}.journey-step{margin-bottom:3.2rem}.journey-flow-html{--journey-card-h:min(128vw,520px)}.journey-visual,.journey-phone{border-radius:20px}.journey-copy{margin-top:1.35rem}.journey-copy h3{font-size:1.05rem}.journey-copy p{font-size:.94rem}.journey-step:not(:last-of-type)::after{content:"";display:block;width:2px;height:2.2rem;border-left:2px dashed rgba(255,159,36,.55);margin:1.1rem 0 -2.1rem 21px}.journey-number{width:42px;height:42px;flex-basis:42px}}
@media(prefers-reduced-motion:reduce){.journey-beam span{animation:none;left:50%}}

/*
 * Journey mobil (≤ 620 px, seit 2026-10-02) als Wischleiste statt vier Karten untereinander
 * (spart rund 2,5 Bildschirmhöhen). Karten ca. 82 % breit – die nächste schaut an, rastet
 * mittig ein (scroll-snap). Punkte darunter (.journey-dots, erzeugt von assets/js/main.js)
 * zeigen und wählen die Karte; die mittige Karte bekommt .is-in-focus (goldener Rahmen).
 * padding-block im Scroller, damit Schatten und Rahmen nicht abgeschnitten werden.
 */
.journey-dots {
    display: none;
}
@media (max-width: 620px) {
    .journey-flow-html {
        padding-top: 5rem;
    }
    .journey-steps {
        display: flex;
        gap: 0.9rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin: -1rem -0.9rem 0;
        padding: 1rem 0.9rem 1.2rem;
        scroll-padding-inline: 0.9rem;
    }
    .journey-steps::-webkit-scrollbar {
        display: none;
    }
    .journey-step {
        flex: 0 0 82%;
        margin-bottom: 0;
        scroll-snap-align: center;
    }
    .journey-step:not(:last-of-type)::after {
        content: none;
    }
    .journey-dots {
        display: flex;
        justify-content: center;
        gap: 0.35rem;
        margin-top: 0.4rem;
    }
    .journey-dots button {
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }
    .journey-dots button::before {
        content: "";
        width: 0.55rem;
        height: 0.55rem;
        border-radius: 50%;
        background: #ffffff40;
        transition:
            background 0.25s ease,
            scale 0.25s ease;
    }
    .journey-dots button[aria-current="true"]::before {
        background: var(--gold);
        scale: 1.3;
    }
    .journey-dots button:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: -2px;
        border-radius: 50%;
    }
}

/* ------------------------------------------------------------
 * „Zwei Wege. Eine Wahl.“ (.two-ways) – direkt in den Messenger (flüchtig)
 * oder mit Umweg über das Sphere-Album (bewahrt). Bildsprache wie Split/Journey:
 * Der Album-Weg ist die goldene Punktlinie, der direkte Weg eine kühle Linie.
 * Lichtimpulse/Chatblasen: SMIL im SVG, gestartet von assets/js/main.js.
 * ------------------------------------------------------------ */
.two-ways {
    background: radial-gradient(circle at 72% 42%, #17344a, #10283b 66%);
    min-height: auto;
    /* Seit 2026-10-03 früh in der Geschichte (nach „Das Gespräch geht weiter“) – mehr Luft
       davor und danach, damit die Sektion nicht an den Nachbarszenen klebt */
    padding: calc(var(--section-pad) * 2.2) clamp(1.4rem, 6vw, 7rem);
}
/* Reihenfolge per order (Flex-Spalte):
   aufgeklappt  – Kopf, Button, Diagramm, Schlusszeile zentriert
   zugeklappt   – Kopf, Schlusszeile linksbündig, Button (Diagramm 0 hoch) */
.two-ways-inner {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
}
.two-ways-head {
    order: 1;
}
.two-ways-toggle {
    order: 2;
    align-self: flex-start;
}
.two-ways-body {
    order: 3;
}
.two-ways-choice {
    order: 4;
}
.two-ways.is-collapsed .two-ways-choice {
    order: 2;
    margin-top: 1.6rem;
    text-align: left;
}
.two-ways.is-collapsed .two-ways-toggle {
    order: 3;
}
/* Überschrift und Einleitung einzeilig, wenn der Platz reicht (statt der allgemeinen
   Grenzen 13ch für h2 bzw. 29ch für .lead) – umbrochen wird nur bei Platzmangel */
.two-ways h2,
.two-ways .lead {
    max-width: none;
}
/* Auf-/Zuklappen: Das Diagramm (.two-ways-body: beide Grafiken + Erklärtexte) klappt über
   grid-template-rows 1fr ↔ 0fr weich auf und zu; Kopf und Schlusszeile bleiben sichtbar.
   overflow nur zugeklappt bzw. während der Bewegung (.is-animating, gesetzt von main.js) –
   offen dürfen Leuchten/Schatten überstehen. visibility nimmt das zugeklappte Diagramm aus
   Tab-Reihenfolge und Screenreader. Die Schlusszeile wechselt dabei den Platz und blendet
   weich ein. */
.two-ways-body {
    /* min-height: 0 – sonst nimmt der Flex-Eintrag seine Mindesthöhe aus dem Inhalt und
       klappt nicht zu */
    min-height: 0;
    display: grid;
    grid-template-rows: 1fr;
    transition:
        grid-template-rows 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s;
}
.two-ways-body-inner {
    min-height: 0;
}
.two-ways-diagram {
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.two-ways.is-collapsed .two-ways-body {
    grid-template-rows: 0fr;
    visibility: hidden;
    transition:
        grid-template-rows 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0.7s;
}
.two-ways.is-collapsed .two-ways-body-inner,
.two-ways.is-animating .two-ways-body-inner {
    overflow: hidden;
}
.two-ways.is-animating .two-ways-choice {
    animation: two-ways-choice-in 0.7s ease both;
}
@keyframes two-ways-choice-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
/* Seit 2026-10-03: runder Pfeil + Text („Weitere Details anzeigen/verbergen“, main.js) */
.two-ways-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.8rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--gold);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 650;
    cursor: pointer;
}
.two-ways-toggle-icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1.5px solid var(--gold);
    border-radius: 50%;
    background: #10283baa;
    font-size: 1.1rem;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}
.two-ways-toggle:hover .two-ways-toggle-icon,
.two-ways-toggle:focus-visible .two-ways-toggle-icon {
    background: var(--gold);
    color: #071827;
}
.two-ways-toggle[hidden] {
    display: none;
}
.two-ways-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
    border-radius: 999px;
}
.two-ways-diagram {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
}
/* Erst ausblenden, wenn main.js die Sektion übernimmt (.is-armed) – ohne JS bleibt alles sichtbar */
.two-ways.is-armed .two-ways-diagram,
.two-ways.is-armed .two-ways-choice {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.two-ways.is-visible .two-ways-diagram,
.two-ways.is-visible .two-ways-choice {
    opacity: 1;
    transform: none;
}
.two-ways.is-visible .two-ways-choice {
    transition-delay: 0.35s;
}
.way {
    display: grid;
    grid-template-columns: minmax(0, 640px) minmax(14rem, 25rem);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}
.way svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.way-label {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    fill: var(--dim);
}
.way-label-album {
    fill: var(--gold);
}
.way-route {
    fill: none;
    stroke-linecap: round;
}
.way-direct .way-route {
    stroke: #8ea3b4;
    stroke-width: 2.5;
    opacity: 0.75;
}
.way-album .way-route {
    stroke: var(--gold);
    stroke-width: 4;
    stroke-dasharray: 0 12;
    filter: drop-shadow(0 0 3px #ffab4899);
}
.way-node path {
    fill: #0b2031;
    stroke: var(--ink);
    stroke-width: 2;
    stroke-linejoin: round;
}
.way-node circle {
    fill: var(--ink);
}
.way-bubbles rect {
    fill: #8ea3b4;
    opacity: 0.5;
}
.way-direct .way-pulse {
    fill: #e6eef3;
    filter: drop-shadow(0 0 6px #e6eef3aa);
}
.way-album .way-pulse {
    fill: #ffe3bd;
    filter: drop-shadow(0 0 7px var(--gold));
}
.way-album-glow {
    fill: #ffab4833;
    filter: blur(6px);
}
.way-polaroid {
    fill: #eee9de;
    stroke: var(--gold);
    stroke-width: 1.5;
}
.way-polaroid.back {
    opacity: 0.55;
    stroke: none;
}
.way-polaroid-photo {
    fill: #1d3a4b;
}
.way-caption {
    color: var(--dim);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.55;
    max-width: 34ch;
}
.way-caption > strong:first-child {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--ink);
    font-size: 1.12em;
    letter-spacing: -0.01em;
}
.two-ways-choice {
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
    font-size: clamp(1.3rem, 2.4vw, 2rem);
    font-weight: 650;
    letter-spacing: -0.03em;
}
/* Mobil (seit 2026-10-03): „Du entscheidest – bei jedem Share neu.“ immer einzeilig –
   die Schrift wird mit der Bildschirmbreite kleiner statt umzubrechen. */
@media (max-width: 700px) {
    .two-ways-choice {
        white-space: nowrap;
        font-size: min(1.3rem, calc((100vw - 3rem) / 18.5));
    }
}
@media (max-width: 860px) {
    .way {
        grid-template-columns: 1fr;
        gap: 1.1rem;
    }
    /* Einspaltig steht der Text unter der Grafik – volle Breite statt 34 Zeichen (seit 2026-10-03) */
    .way-caption {
        max-width: none;
    }
    /* Beschriftungen im SVG wachsen mit, wenn das Diagramm schmal wird */
    .way-label {
        font-size: 22px;
    }
}
/* Statement „Irgendwann schaust Du nicht mehr auf Shares …“ in eigener Sektion nach „Zwei Wege“:
   der große Abstand nach oben (früher unter dem Raster) entfällt, die Sektion polstert selbst. */
.time.time-coda .statement {
    margin-top: 0;
}
@media (prefers-reduced-motion: reduce) {
    .two-ways.is-armed .two-ways-diagram,
    .two-ways.is-armed .two-ways-choice,
    .two-ways-body,
    .two-ways.is-collapsed .two-ways-body {
        transition: none;
    }
    .two-ways.is-animating .two-ways-choice {
        animation: none;
    }
}