/* ==========================================================================
   Startseite, Handy-Ansicht (bis 1000px), normale Ansicht (nicht "Change Views")
   Prinzip: eine Spalte, alles randlos über die volle Breite, feste Seitenverhältnisse,
   keine leeren Flächen, Text immer lesbar (heller Text auf dunklem Verlauf).
   Erhalten bleiben: Bögen/Rundungen, Schatten, Grautöne, Schrift, Bewegung, Change-Views-Schalter.
   Die Ansicht "Change Views" (.expanded-view) wird hier bewusst nicht verändert.
   ========================================================================== */
@media (max-width: 1000px) {

    /* ---------- Gerüst: eine Spalte ohne Lücken ---------- */
    .main:not(.expanded-view) .window-container {
        background: #eee;
        padding-bottom: 0; /* Footer schließt direkt an das letzte Bild an; der Schalter blendet sich am Seitenende aus */
    }
    .main:not(.expanded-view) .map-svg { display: none !important; }
    .main:not(.expanded-view) .window-container-homepage,
    .main:not(.expanded-view) .window-container-left,
    .main:not(.expanded-view) .window-container-left.up,
    .main:not(.expanded-view) .window-container-left.has-spotlight,
    .main:not(.expanded-view) .window-container-left.no-spotlight,
    .main:not(.expanded-view) .window-container-right {
        position: relative;
        display: block;
        height: auto;
        width: 100%;
    }
    .main:not(.expanded-view) .window-container-left.down { display: none; }

    .main:not(.expanded-view) .window-container-secondpage {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: auto;
        width: 100%;
    }
    .main:not(.expanded-view) .window-container-secondpage > .container,
    .main:not(.expanded-view) .window-container-secondpage > .block {
        grid-column: 1 / -1;
        position: relative;
        width: 100%;
        height: auto;
    }
    .main:not(.expanded-view) .container.container-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }
    .main:not(.expanded-view) .container.article:empty,
    .main:not(.expanded-view) .window-container-secondpage:empty { display: none; }

    /* ---------- Jeder Block: volle Breite, festes Seitenverhältnis ---------- */
    .main:not(.expanded-view) .block,
    .main:not(.expanded-view) .homeblock {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: var(--ar, 4 / 5);   /* Rahmen = Seitenverhältnis des Fotos (wird im Template gesetzt), nichts wird angeschnitten */
        overflow: hidden;
        background: radial-gradient(ellipse closest-side at 50% 55%, #383838 0%, #000 100%); /* Verlauf nach außen komplett in Schwarz, unabhängig von Rahmenform */
        margin: 0;
        box-shadow: none;
        box-sizing: border-box;
        border-bottom: 0;
    }

    /* Rundungen nur an einzelnen Stellen (große Bögen oben), der Rest läuft ohne Unterbrechung durch */
    .main:not(.expanded-view) .homeblock.block-2a   { border-radius: 100px 100px 0 0; }
    .main:not(.expanded-view) .homeblock.block-1    { border-radius: 0 90px 0 0; }
    .main:not(.expanded-view) .block.block-3        { border-radius: 0 120px 0 0; }   /* nur rechts oben rund, links nie (sonst stößt das H von Hans an die Rundung) */
    .main:not(.expanded-view) .block[data-slug="nicolas-winding-refn"] { border-radius: 0 100px 0 0; }
    .main:not(.expanded-view) .block.block-4,
    .main:not(.expanded-view) .block.block-6,
    .main:not(.expanded-view) .block.block-5,
    .main:not(.expanded-view) .block.block-50,
    .main:not(.expanded-view) .block.block-7,
    .main:not(.expanded-view) .homeblock.block-2b   { border-radius: 0; }

    /* ---------- Bilder füllen den Block ---------- */
    .main:not(.expanded-view) .block-image,
    .main:not(.expanded-view) .spotlight-image-article {
        position: absolute;
        inset: 0;
        left: 0; right: 0; top: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        filter: none;
        display: block;
    }
    /* Farbige Deckschichten aus dem CMS (teils schwarz mit voller Deckkraft) verdecken sonst das Foto */
    .main:not(.expanded-view) .block-background-image,
    .main:not(.expanded-view) .spotlight-background-image,
    .main:not(.expanded-view) .block-background { display: none; }
    .main:not(.expanded-view) .block-image picture,
    .main:not(.expanded-view) .block-image img,
    .main:not(.expanded-view) picture.spotlight-image-article,
    .main:not(.expanded-view) img.spotlight-image-article {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .main:not(.expanded-view) .block-image { z-index: 0; }

    /* ---------- Text: liegt immer auf einem dunklen Verlauf, immer lesbar ---------- */
    .main:not(.expanded-view) .block > a,
    .main:not(.expanded-view) .block-spotlight > a,
    .main:not(.expanded-view) .homeblock > a {
        position: absolute;
        inset: 0;
        display: block;
    }
    .main:not(.expanded-view) .block-content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 18px 16px 16px;
        box-sizing: border-box;
        text-align: left;
    }
    .main:not(.expanded-view) .block-content::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(to bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,.25) 28%, rgba(0,0,0,0) 45%, rgba(0,0,0,0) 52%, rgba(0,0,0,.82) 100%);
        pointer-events: none;
    }
    .main:not(.expanded-view) .block-content,
    .main:not(.expanded-view) .block-content * { color: #fff !important; text-shadow: 0 1px 10px rgba(0,0,0,.55); }

    .main:not(.expanded-view) .block-text-title {
        position: relative; top: auto; left: auto; right: auto; bottom: auto;
        width: auto; height: auto; max-width: 92%;
        margin: 0; padding: 0;
        display: block;
        text-align: left;
        font-size: clamp(24px, 7.4vw, 34px);
        line-height: 1.08;
        font-weight: 700;
        transform: none;
    }
    .main:not(.expanded-view) .block-text-title { border: 0 !important; }
    .main:not(.expanded-view) .block-text-title .word {
        display: inline;
        margin: 0;
    }
    .main:not(.expanded-view) .title-small { display: inline; }
    .main:not(.expanded-view) .title-large { display: none; }

    .main:not(.expanded-view) .block-text-introduction {
        position: relative; top: auto; left: auto; right: auto; bottom: auto;
        width: auto; height: auto; max-width: 94%;
        margin: auto 0 0; padding: 0;
        display: block;
        text-align: left;
        font-size: 15px;
        line-height: 1.3;
        opacity: 1;
    }
    .main:not(.expanded-view) .block-contributors {
        position: relative; top: auto; left: auto; right: auto; bottom: auto;
        width: auto; height: auto;
        margin: 10px 0 0; padding: 0;
        text-align: left;
        font-size: 13px;
        letter-spacing: .04em;
        text-transform: uppercase;
        opacity: 1;
        border: 0 !important;
    }
    .main:not(.expanded-view) .block-contributors p { margin: 0; }
    .main:not(.expanded-view) .block-text-introduction:empty { display: none; }
    /* Wenn kein Einleitungstext da ist, rutschen die Mitwirkenden nach unten */
    .main:not(.expanded-view) .block-text-title + .block-text-introduction:empty + .block-contributors { margin-top: auto; }
    .main:not(.expanded-view) .block-text-title + .block-contributors { margin-top: auto; }

    /* Reine Text-Blöcke (ohne Bild): Titel groß, mittig */
    .main:not(.expanded-view) .block-7 .block-text-title,
    .main:not(.expanded-view) .block-6 .block-text-title,
    .main:not(.expanded-view) .block-2b .block-text-title {
        position: relative; width: auto; height: auto; left: auto; top: auto;
        align-self: stretch;
    }
    .main:not(.expanded-view) .block-6 .block-text-introduction,
    .main:not(.expanded-view) .block-7 .block-text-introduction { display: none; }
    .main:not(.expanded-view) .container.container-2 .block-text-title { font-size: clamp(20px, 5.6vw, 26px); }

    /* Bögen schneiden sonst die erste Titelzeile an */
    .main:not(.expanded-view) .homeblock.block-2a .block-content,
    .main:not(.expanded-view) .block.block-3 .block-content { padding-top: 52px; }
    .main:not(.expanded-view) .homeblock.block-2a .block-text-title,
    .main:not(.expanded-view) .block.block-3 .block-text-title { text-align: center; margin-left: auto; margin-right: auto; }


    /* Blöcke ohne Foto (nur Text): flacher, damit keine große schwarze Fläche entsteht */
    .main:not(.expanded-view) .block:not(:has(.block-image)),
    .main:not(.expanded-view) .homeblock:not(.block-magazine):not(:has(.block-image)) { aspect-ratio: 16 / 10; }
    /* Zweier-Reihe: die Zeile ist so hoch wie das Foto, der Text-Block daneben füllt sie aus */
    .main:not(.expanded-view) .container.container-2 .block:not(:has(.block-image)) { aspect-ratio: auto; }
    /* Lange Wörter in den schmalen Zweier-Blöcken nicht abschneiden */
    .main:not(.expanded-view) .container.container-2 .block-text-title {
        font-size: clamp(14px, 4.1vw, 19px);
        overflow-wrap: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
    }

    /* Name steht schon in der Überschrift: im kleinen Text nicht noch einmal anzeigen */
    .main:not(.expanded-view) .dup-title { display: none !important; }
    .main:not(.expanded-view) .contributors-mobile .c-line { display: block; }

    /* Jeff Mills: Name auf Höhe der Beine statt über dem Kopf */
    .main:not(.expanded-view) [data-slug="jeff-mills"] .block-text-title {
        position: absolute;
        left: 16px; right: 16px;
        top: 70%;
        max-width: none;
        margin: 0;
        text-align: center;
    }

    /* ---------- Deko-Grafiken, die auf dem Handy nur Lücken erzeugten ---------- */
    .main:not(.expanded-view) .svg-box-2,
    .main:not(.expanded-view) .svg-box-fading,
    .main:not(.expanded-view) .svg-box-block-2c,
    .main:not(.expanded-view) .trianglecourbe,
    .main:not(.expanded-view) .block-text-oval { display: none !important; }

    /* ---------- "BUY THE NEW MAGAZINE": ein starker, schwarzer Block ---------- */
    .main:not(.expanded-view) .window-container-right a.homeblock-link { display: block; }
    .main:not(.expanded-view) .homeblock.block-magazine {
        aspect-ratio: auto;
        height: auto;
        min-height: 36vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #000;
        padding: 26px 16px;
        overflow: hidden;
    }
    .main:not(.expanded-view) .magazine-image { width: 100%; height: auto; max-height: 60vw; }
    .main:not(.expanded-view) .magazine-image:not(:has(img)) { display: none; }
    .main:not(.expanded-view) .block-magazine .block-content {
        position: relative; inset: auto; padding: 0; height: auto; width: 100%;
        display: flex; align-items: center; justify-content: center;
    }
    .main:not(.expanded-view) .block-magazine .block-content::before { display: none; }
    .main:not(.expanded-view) .block-magazine .block-text-title {
        max-width: 100%;
        margin: 0;
        text-align: center;
        font-size: clamp(26px, 8vw, 36px);
        text-decoration: underline;
        text-decoration-thickness: 3px;
        text-underline-offset: 3px;
    }

    /* ---------- Change-Views-Schalter bleibt, sitzt ruhiger ---------- */
    .main:not(.expanded-view) #toggleView { bottom: 16px; right: 16px; }
}

/* ==========================================================================
   Change Views am Handy: Umschalten über kurzes Aus- und Einblenden (siehe swapView in home.3.js)
   Grund: Stapel (Höhe automatisch, Seitenverhältnis) und Karte (feste Maße) lassen sich nicht stetig überblenden,
   das sprang vorher im ersten Bild. Der Wechsel passiert im Unsichtbaren, nichts blitzt oder zuckt.
   ========================================================================== */
@media (max-width: 1000px) {
    body.view-fade-out .window-container { opacity: 0; transition: opacity .2s ease; }
    body.view-swap .window-container,
    body.view-swap .window-container * { transition: none !important; }
    body.view-fade-in .window-container { opacity: 1; transition: opacity .4s ease; }
}

/* Zweier-Reihe: mehr Abdunklung unter der kleinen Schrift, die auf dem halben Foto sonst zu hell wirkt */
@media (max-width: 1000px) {
    .main:not(.expanded-view) .container.container-2 .block-content::before { background: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.75) 100%); }
    /* Umschließender Block, in dem ein Bild-Block steckt (Hans Ulrich Obrist): Höhe kommt vom inneren Block, keine leere Fläche */
    .main:not(.expanded-view) .block.block-3:has(> .block) { aspect-ratio: auto; height: auto; background: none; box-shadow: none; }
    /* Reine Textblöcke (ohne Foto): Text rückt zusammen statt 250 px leerer Fläche dazwischen */
    .main:not(.expanded-view) .block:not(:has(.block-image)) .block-text-introduction { margin-top: 14px; }
}

/* "Buy the new magazine" steht ganz oben (vor dem ersten Artikel) (ohne die HTML-Reihenfolge am Desktop zu ändern):
   die Hüllen lösen sich auf (display: contents), alle Blöcke werden Geschwister in einer Spalte und werden per order sortiert. */
@media (max-width: 1000px) {
    .main:not(.expanded-view) .window-container-homepage { display: flex; flex-direction: column; }
    .main:not(.expanded-view) .window-container-left,
    .main:not(.expanded-view) .window-container-left.up,
    .main:not(.expanded-view) .window-container-left.has-spotlight,
    .main:not(.expanded-view) .window-container-left.no-spotlight,
    .main:not(.expanded-view) .window-container-right { display: contents; }
    .main:not(.expanded-view) .window-container-homepage > .map-svg { order: -1; }
    .main:not(.expanded-view) .window-container-homepage .block-spotlight,
    .main:not(.expanded-view) .window-container-left.no-spotlight .block-2a { order: 0; }
    .main:not(.expanded-view) .window-container-right a.homeblock-link { order: -1; }   /* "Buy the new magazine" ganz oben, vor dem ersten Artikel */
    .main:not(.expanded-view) .window-container-homepage .block-2b,
    .main:not(.expanded-view) .window-container-homepage .block-1 { order: 2; }
}

/* Change-Views-Schalter blendet sich aus, sobald der Footer im Bild ist (sonst verdeckt er die Kästen) */
@media (max-width: 1000px) {
    #toggleView { transition: opacity .25s ease; }
    #toggleView.over-footer { opacity: 0; pointer-events: none; }
}

/* Alle Textblöcke: Titel, Text und Namen beginnen links bündig mit 16 px Rand (auch die Blöcke mit eingerückten/rechten Texten) */
@media (max-width: 1000px) {
    .main:not(.expanded-view) .block:not(.block-2a) .block-content { align-items: flex-start; text-align: left; }
    .main:not(.expanded-view) .block:not(.block-2a) .block-text-title,
    .main:not(.expanded-view) .block:not(.block-2a) .block-text-introduction,
    .main:not(.expanded-view) .block:not(.block-2a) .block-contributors {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        left: auto;
        right: auto;
        text-align: left;
        align-self: flex-start;
    }
}

/* "BUY THE NEW MAGAZINE": THE wandert langsam zwischen BUY und NEW von links nach rechts und zurück (Choreografie, ca. 12 s) */
@media (max-width: 1000px) {
    .main:not(.expanded-view) .block-magazine .block-text-title {
        display: grid;
        grid-template-columns: auto 1fr auto;
        column-gap: 6px;
        align-items: start;               /* alle Wörter auf derselben Zeile */
        width: 100%;
        text-decoration: none;
        animation: magazine-shake 5s ease-in-out infinite;   /* Schütteln etwas kräftiger als vorher (2° statt 1°) */
    }
    .main:not(.expanded-view) .block-magazine .block-text-title > span {
        text-decoration: underline;
        text-decoration-thickness: 3px;
        text-underline-offset: 3px;
    }
    .main:not(.expanded-view) .block-magazine .block-text-title > span:last-child { grid-column: 1 / -1; justify-self: center; }
    .main:not(.expanded-view) .block-magazine .buy-track {
        position: relative;
        display: block;
        overflow: hidden;
        padding-bottom: 8px;              /* Platz, damit die Linie nicht abgeschnitten wird */
        margin-bottom: -8px;
        white-space: pre;
    }
    /* durchgehende Linie von BUY bis NEW: unterstrichene Leerzeichen */
    .main:not(.expanded-view) .block-magazine .buy-track::before { content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0'; }
    .main:not(.expanded-view) .block-magazine .buy-track .the {
        position: absolute;
        top: 0;
        left: 0;
        animation: the-walk 20s ease-in-out infinite;    /* langsamer hin und her */
    }
}
@keyframes the-walk {
    0%, 10%  { left: 0;    transform: translateX(0); }
    50%, 60% { left: 100%; transform: translateX(-100%); }
    100%     { left: 0;    transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .main:not(.expanded-view) .block-magazine .buy-track .the { animation: none; left: 50%; transform: translateX(-50%); }
}

@keyframes magazine-shake {
    0%, 30%, 39%, 100% { transform: rotate(0deg); }
    31%, 33%, 35%, 37% { transform: rotate(2deg); }
    32%, 34%, 36%, 38% { transform: rotate(-2deg); }
}

/* Karte (Change Views) am Handy: fest über der Seite, von unter der Kopfzeile bis ganz unten (läuft unter der Safari-Leiste weiter);
   die Seite dahinter bleibt stehen und scrollt nicht mit */
@media (max-width: 1000px) {
    /* absolut (top setzt das Skript: Scrollposition + Kopfzeile), damit Safaris Leiste nicht eingefärbt wird; Höhe = größte Bildschirmhöhe */
    .main.expanded-view .window-container { position: absolute; top: var(--hh); left: 0; right: 0; bottom: auto; height: calc(100vh - var(--hh)); height: calc(100lvh - var(--hh)); z-index: 1; touch-action: none; }
    /* über der Karte nie die Startseite durchblitzen lassen, falls man beim Einfahren der Leiste kurz nach oben wischt */
    .main.expanded-view .window-container::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 100lvh; background: inherit; background-color: #fff; pointer-events: none; }
    body.no-scroll { overflow: visible; overflow-x: clip; height: auto; }   /* seitlich weiter abschneiden: sonst macht die endlose Karte die Seite doppelt so breit */
    html:has(.main.expanded-view) { overscroll-behavior: none; }
}

/* "Change Views"-Knopf am Handy: eine Zeile, regular, so groß wie Safaris Adresse; Streifen mit runden Enden, so hoch wie Safaris Knöpfe.
   Grauer Verlauf und Schein bleiben, der Rand ist filigraner. Sitzt knapp über Safaris Leiste, rechts bündig mit ihrem "•••"-Knopf.
   Ist Safaris Leiste eingefahren (nach unten gewischt), wird er wie die Adresse kleiner. */
@media (max-width: 1000px) {
    #toggleView,
    .main:not(.expanded-view) #toggleView,
    .main.expanded-view #toggleView {
        width: auto; height: 46px; padding: 0 18px;
        border-radius: 23px;
        font-family: 'GT America', sans-serif; font-weight: 400; font-size: 16px; line-height: 1;
        letter-spacing: 0; white-space: nowrap;
        border: 0.5px solid rgba(255, 255, 255, 0.35);
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.3), inset 0 0 6px rgba(255, 255, 255, 0.15);
        right: 34px; bottom: max(8px, calc(env(safe-area-inset-bottom) - 6px));
        transform-origin: 100% 100%;
        transition: transform .3s ease, opacity .3s ease;
    }
    html.bar-compact #toggleView { transform: scale(.78); }
}
/* Change View: Grau leicht durchsichtig, dahinter weichgezeichnet (wie Safaris Knöpfe) */
@media (max-width: 1000px) {
    #toggleView,
    .main:not(.expanded-view) #toggleView,
    .main.expanded-view #toggleView {
        background: linear-gradient(135deg, rgba(51, 51, 51, .62), rgba(85, 85, 85, .62));
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        backdrop-filter: blur(12px) saturate(140%);
    }
}

/* Kartenansicht am Handy: Change-View-Knopf nicht fest (sonst färbt Safari die Fläche hinter seiner Leiste ein),
   sondern an derselben Stelle in der Seite; top setzt das Skript (home.3.js) */
@media (max-width: 1000px) {
    html.map-on #toggleView { position: absolute !important; top: var(--tv-top, auto) !important; bottom: auto !important; }
}
/* Karte reicht deutlich unter Safaris Leiste weiter (die Fläche dahinter kann über 100lvh hinausgehen),
   damit dort nie der weiße Seitenhintergrund als heller Kasten durchscheint */
@media (max-width: 1000px) {
    .main.expanded-view .window-container { height: calc(100vh - var(--hh) + 200px); height: calc(100lvh - var(--hh) + 200px); }
}