/* Dritte Darstellung: Anpassungen nach der Rückmeldung des Managements (29.09.2026).
   Liegt nach style.css und nutzt dessen Werte (--bg, --ink, --muted, --sand, --line, --pad, --display). */

/* Einstieg: Bild minimal weiter zur Mitte, der rechte Rand läuft in den Hintergrund aus. */
@media(min-width:651px){.arena-image{right:clamp(0px,4.5vw,96px)}
.arena-image:after{background:linear-gradient(90deg,var(--bg) 0%,#10111085 15%,transparent 42%),linear-gradient(270deg,var(--bg) 0%,transparent 14%),linear-gradient(0deg,#101110ed 0%,transparent 35%)}
}
@media(max-width:650px){.arena-image img{object-position:68% 35%}
}

/* Der Kämpfer: Das Bild reicht bis zur Trennlinie über dem Ziel (Management, 04.10.2026). Bild und Text teilen
   sich die erste Rasterzeile, Bildunterschrift und Ziel die zweite; die Bildhöhe folgt damit dem Text.
   Ohne subgrid bleibt die feste Bildhöhe aus style.css. Auf dem Handy steht das Bild wie bisher unter dem Ziel. */
@media(min-width:651px){.story{row-gap:0}
.story-visual{grid-column:1;grid-row:1/span 2}
.story-copy{grid-column:2;grid-row:1}
.vision{grid-column:2;grid-row:2}
@supports (grid-template-rows:subgrid){.story-visual{display:grid;grid-template-rows:subgrid;align-self:stretch}
.story-visual img{height:0;min-height:100%}
.story-copy{padding-bottom:32px}
.vision{margin-top:0}
}
}
@media(max-width:650px){.story{gap:0}
.story-visual{margin-top:48px}
.story-copy{order:2}
.vision{order:1}
}
.story-visual img{object-position:50% 30%}

/* Der Weg: Foto als Hintergrund, zum Text hin abgedunkelt; darüber Kopf und drei Stufen in einem Rahmen. */
.journey-section{position:relative;isolation:isolate;overflow:hidden;border-top:1px solid var(--line);padding-top:clamp(110px,8vw,150px);padding-bottom:clamp(110px,8vw,150px)}
.journey-background{position:absolute;inset:0;z-index:-1}
.journey-background img{filter:grayscale(1);object-position:50% 15%;opacity:.55}
.journey-background:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,#101110d1 45%,#1011104d 100%),linear-gradient(0deg,var(--bg) 0%,transparent 30%)}
.journey-content{max-width:1660px;margin:0 auto}
.journey-content h2>span{color:var(--sand)}
.journey-content>.intro-copy{color:var(--muted);font-size:16px;line-height:1.8;max-width:500px;margin:28px 0 0;text-wrap:pretty}
.journey-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1100px;margin-top:64px;border:1px solid var(--line);background:#101110d9}
.journey-stages article{min-width:0;padding:30px 28px 32px;border-right:1px solid var(--line)}
.journey-stages article:last-child{border-right:0}
.stage-label{font-size:11px;font-weight:500;letter-spacing:.16em;line-height:1.6;color:var(--muted);margin:0 0 16px}
.stage-label.current-stage{color:var(--sand)}
.journey-stages h3{font-family:var(--display);font-size:clamp(28px,2.3vw,38px);font-weight:600;line-height:1.05;letter-spacing:-.005em;margin:0 0 14px}
.journey-stages p:not(.stage-label){color:var(--muted);font-size:15px;line-height:1.7;margin:0}
@media(max-width:800px){.journey-stages{grid-template-columns:1fr;margin-top:44px}
.journey-stages article{padding:26px 24px;border-right:0;border-bottom:1px solid var(--line)}
.journey-stages article:last-child{border-bottom:0}
}
@media(max-width:650px){.journey-section{padding-top:65px;padding-bottom:65px}
.journey-background img{object-position:60% 20%}
.journey-background:after{background:#101110c7}
.journey-content>.intro-copy{margin-top:22px}
.journey-stages{margin-top:36px}
.journey-stages h3{font-size:30px}
.journey-stages p:not(.stage-label){font-size:16px}
}

/* Näher dran: Highlight-Video (16:9) und Reihe im Hochformat. */
.video-feature{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.video-film,.video-cover{position:absolute;inset:0;width:100%;height:100%}
.video-film{object-fit:contain;background:#000}
.video-film[hidden],.video-cover[hidden]{display:none}
.video-cover img{object-position:50% 25%;filter:grayscale(1)}
.video-shade{position:absolute;inset:0;background:#10111040}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:96px;height:96px;padding:0;border-radius:50%;border:1px solid var(--ink);background:#10111059;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.video-play:hover{background:var(--sand);border-color:var(--sand)}
.video-play>span{display:block;width:0;height:0;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--ink);margin-left:4px}
.video-caption{position:absolute;left:28px;right:28px;bottom:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;font-size:11px;letter-spacing:.12em;color:var(--ink)}
.video-caption>span:last-child{color:var(--muted)}
.video-reels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;margin-top:2px}
.video-reels:focus-visible{outline:1px solid var(--sand);outline-offset:4px}
.video-reel{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:#1b1c1b}
.video-reel img{filter:grayscale(1);transition:transform .4s}
.video-reel:hover img{transform:scale(1.03)}
.video-reel>span{position:absolute;z-index:1;left:14px;bottom:12px;font-size:11px;letter-spacing:.16em;color:var(--ink);text-shadow:0 1px 8px #101110e6,0 0 2px #101110e6}
/* Dunkler Verlauf unter der Beschriftung: auf hellen Bildstellen (weiße Hose, Hallenlicht) sonst kaum lesbar (Gate L 27.10.2026). */
.video-reel::after{content:'';position:absolute;left:0;right:0;bottom:0;height:72px;background:linear-gradient(#10111000,#101110cc);pointer-events:none}
@media(max-width:760px){.video-play{width:64px;height:64px}
.video-caption{display:none}
.video-reels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.video-reels::-webkit-scrollbar{display:none}
.video-reel{flex:0 0 58vw;scroll-snap-align:start}
}
@media(prefers-reduced-motion:reduce){.video-reel img{transition:none}
.video-reel:hover img{transform:none}
}

/* Kanalband: Instagram, YouTube und TikTok groß und klickbar. */
.reference-channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.reference-channels>a,.reference-channels>button{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:44px var(--pad);border:0;border-right:1px solid var(--line);color:var(--ink);background:transparent;text-align:left;transition:background .2s,color .2s}
.reference-channels>:last-child{border-right:0}
.reference-channels>*>span:first-child{font-family:var(--display);font-weight:600;font-size:clamp(40px,4vw,64px);line-height:1;letter-spacing:-.01em}
.reference-channels>*>span:last-child{color:var(--sand);font-size:28px;line-height:1}
.reference-channels>a:hover,.reference-channels>button:hover{background:#171816;color:var(--sand)}
.reference-channels>a:focus-visible,.reference-channels>button:focus-visible{outline-offset:-6px}
@media(max-width:760px){.reference-channels{grid-template-columns:1fr}
.reference-channels>a,.reference-channels>button{padding:28px var(--pad);border-right:0;border-bottom:1px solid var(--line)}
.reference-channels>:last-child{border-bottom:0}
}

/* Kontakt: Bild mit Kopf und etwas Luft darüber (auf dem Handy füllt es die Höhe, der Wert wirkt dort nicht). */
.contact-bg img{object-position:50% 9%}
/* Startseite: Das Foto im Sportwagen ist die Instagram-Fassung (3:4, oben gekürzt). Bündig oben bleibt über dem Kopf
   so viel Luft wie möglich (gemessen 3 bis 9 %); die Unterseiten setzen ihren Ausschnitt in unterseiten.css. */
.contact-section:not([data-seite]) .contact-bg img{object-position:50% 0}

/* Partner: Kennzeile, Überschrift und je Partner eine Karte mit sandfarbener Oberkante. Beim Zeigen
   füllt sich die Karte von oben nach unten: Rahmen in Sand, Fläche leicht getönt. */
.partner-list-kicker{font-size:10px;letter-spacing:.14em;color:var(--sand);margin:0 0 16px}
.partner-list-title{font-family:var(--display);font-size:clamp(34px,3.05vw,46px);font-weight:600;line-height:1;letter-spacing:-.005em;margin:0 0 30px}
.partner-list{list-style:none;margin:0 0 30px;padding:0;width:100%;display:grid;gap:16px}
.partner-list .partner-logo{position:relative;isolation:isolate;display:flex;width:100%;margin:0;padding:39px 25px 0;border:1px solid var(--line);border-top-color:var(--sand)}
.partner-list .partner-logo:before{content:"";position:absolute;inset:-1px;z-index:-1;border:1px solid var(--sand);background:#c2a57a1a;clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.4,0,.2,1)}
.partner-list .partner-logo:hover:before,.partner-list .partner-logo:focus-visible:before{clip-path:inset(0)}
.partner-list .partner-logotype{font-size:clamp(48px,5.1vw,77px)}
.partner-list .partner-subline{font-size:12px;letter-spacing:.5em;padding-left:.5em}
.partner-web{display:flex;align-items:center;justify-content:space-between;align-self:stretch;margin-top:31px;padding:19px 0 24px;border-top:1px solid var(--line);font-size:10px;font-weight:500;letter-spacing:.14em;color:var(--sand)}
.partner-web>span:last-child{font-size:21px;line-height:1}
@media(max-width:650px){.partner-list-title{font-size:34px;margin-bottom:26px}
.partner-list{margin-bottom:27px}
.partner-list .partner-logo{padding:30px 20px 0}
.partner-list .partner-logotype{font-size:52px}
.partner-list .partner-subline{font-size:11px}
.partner-web{margin-top:28px;padding:18px 0 22px}
}

/* Kopf: vier Menüpunkte (seit den Unterseiten, 30.09.2026) und der Sprachumschalter (12.10.2026) bleiben auch knapp
 * über der Handybreite in einer Zeile und im Innenabstand (Abstände dafür enger: gap 16 → 12, padding-left 20 → 14). */
.header nav a,.header-contact{white-space:nowrap}
@media(min-width:651px) and (max-width:780px){.header nav{gap:12px}
.header-contact{margin-left:12px;padding-left:14px}
.header-contact span{margin-left:14px}
}

/*
 * Sprachumschalter (12.10.2026): letztes Kind der Navigation. Am Rechner ein Menüpunkt wie die
 * anderen (Schrift, Größe, Farbe und Hover aus `.header nav a`). Im aufgeklappten Menü des Handys
 * eine eigene letzte Zeile: klein in Versalien, mit einer Linie darüber, Zielfläche mindestens 44 px.
 */
@media(max-width:650px){.header nav .nav-sprache{display:flex;align-items:center;min-height:44px;border-top:1px solid var(--line);font-size:13px;text-transform:uppercase;letter-spacing:.14em}
}

/*
 * Rückmeldung des Managements (16.10.2026): Die schwach angedeuteten Hintergrundbilder eine Spur deutlicher
 * (Abschnitt „Der Weg“ .55 → .68, Abschluss jeder Seite .7 → .82, auf dem Handy dort .6 → .7 und das Kopfbild
 * .75 → .85). Die Bildzeile im Abschluss der Startseite („Moritz Barth / Vincit qui se vincit“) etwas größer;
 * seit Gate L (27.10.2026) gilt die Größe für die Bildzeile im Abschluss jeder Seite (einheitlich).
 */
.journey-background img{opacity:.68}
.contact-bg img{opacity:.82}
.contact-section .contact-caption{font-size:13px}
@media(max-width:800px){.contact-section .contact-caption{font-size:12px}
}
@media(max-width:650px){.contact-bg{opacity:.7}
.arena-image img{opacity:.85}
}
/* SocialACT als Partner (Management, 16.10.2026): Ein langer Name in der Partnerkarte wird kleiner
   gesetzt, bis er hineinpasst (`--zeichen` aus Partnerkarten.astro, rund .75em je Zeichen samt
   Sperrung); kurze Namen wie TRUMM behalten ihre Größe. Die Agenturzeile im Fuß ist unterstrichen,
   damit der Verweis ohne Farbe erkennbar ist, und steht genau in der Mitte (Raster 1fr auto 1fr, PW
   20.10.2026); bis 800 px stehen Copyright, Agenturzeile und Rechtliches mittig untereinander. */
.partner-list .partner-logo{container-type:inline-size}
.partner-list .partner-logotype{font-size:min(clamp(48px,5.1vw,77px),calc(100cqi / (var(--zeichen,1) * .75)))}
.footer-agentur a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:650px){.partner-list .partner-logotype{font-size:min(52px,calc(100cqi / (var(--zeichen,1) * .75)))}
}
.footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.footer-bottom>div{justify-self:end}
@media(max-width:800px){.footer-bottom{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:10px}
.footer-bottom>div{justify-self:center}
}
/* Kontakt-Dialog: die Adresse des Managements unter dem Text, unterstrichen wie die Verweise der
   Seite (26.10.2026), in eigener Zeile über „Zurück zur Seite“ (27.10.2026: als inline-block stieß
   sie im breiten Dialog an den Knopf). Impressum und Datenschutz im Fuß sind seit 26.10.2026 Verweise auf eigene Seiten. */
.dialog-mail{display:block;width:fit-content;max-width:100%;margin:10px 0 8px;color:var(--ink);font-size:16px;line-height:1.8;text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere;transition:color .2s}
.dialog-mail:hover{color:var(--sand)}
.dialog-mail[hidden]{display:none}
.footer-bottom>div a{transition:color .2s}
.footer-bottom>div a:hover{color:var(--ink)}
@media(max-width:650px){.dialog-mail{font-size:15px}
}
/* Gate L (27.10.2026): Die Fehlerüberschrift („NICHT GEFUNDEN.“) passte bis 390 px nicht in den Kopf — das
   längste Wort lief rechts aus dem Bild. Bis 650 px wächst sie wie die übrigen mit der Breite, ohne die
   Untergrenze von 100 px. Ab 1600 px Breite und unter 860 px Fensterhöhe lag der Knopf im Kopf über dem
   Scroll-Hinweis; dort entfällt der Hinweis. */
@media(max-width:650px){.hero-arena #fehler-titel{font-size:clamp(56px,22vw,150px);max-width:none}
}
@media(min-width:1600px) and (max-height:860px){.hero-scroll{display:none}
}