/* Annies verbindliches Feedback, 30.10.2026. Nach den bisherigen Entwurfsregeln. */
html.f-sol { --accent: #E2725B; --accent-deep: #963E2D; --bg: #FFF8F0; --calm-bg: #FFF8F0; }
body::before { opacity: .018; }
header { top: 0 !important; padding: 0 !important; background: #FFF8F0; border-bottom: 1px solid #E8D9CD; }
.nav { width: 100%; max-width: 1440px; height: 94px; margin: 0 auto; padding: 12px 32px; display: flex !important; justify-content: space-between; gap: 26px; border-radius: 0; box-shadow: none; background: transparent; }
.nav::before { display: none; }
.nav .logo { grid-column: auto !important; grid-row: auto !important; justify-self: auto !important; display: flex; gap: 12px; flex: 0 1 auto; }
.nav .brand-logo { width: 128px; height: 50px; object-fit: contain; }
.brand-name { display: block; font-size: 21px; font-weight: 600; line-height: 1.16; letter-spacing: -.025em; white-space: nowrap; }
.brand-name > span { display: block; }
.nav .menu { grid-column: auto !important; grid-row: auto !important; gap: 20px; font-size: 12px; letter-spacing: .035em; }
.nav .right { grid-column: auto !important; grid-row: auto !important; gap: 16px; }
.nav .lang { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 56px; height: 44px; flex: 0 0 auto; padding: 0 2px; background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; }
.lang .flag, .lang .knob { display: none !important; }
.lang [hidden] { display: none !important; }
.nav .btn { min-height: 44px; padding: 11px 20px; }
.hero { position: relative; margin-top: 0 !important; padding: 0 !important; min-height: 650px; height: min(780px, calc(100svh - 94px)); background: #EFEEEE !important; isolation: isolate; overflow: hidden; }
.hero::before, .hero::after, .hero > .section-wave-top { display: none !important; }
.hero .wrap { display: flex; align-items: center; position: relative; max-width: 1440px; height: 100%; padding: 64px 72px; }
.hero .hero-text { z-index: 3; position: relative; width: 54%; max-width: 660px; margin: 0; padding: 0; }
.hero h1.name { font-size: clamp(44px, 5.2vw, 76px); font-weight: 600; letter-spacing: -.045em; line-height: 1.06; text-transform: none; margin: 0 0 24px; color: #2F3136; }
.hero .hero-roles { font-size: clamp(18px, 1.7vw, 24px); font-weight: 500; line-height: 1.45; max-width: 540px; margin: 0 0 18px; }
.hero .hero-sub { font-size: 16px; line-height: 1.6; color: #46474B; max-width: 38ch; margin: 0 0 28px; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.hero .cta .btn { min-height: 46px; }
.hero .portrait { position: absolute !important; inset: 0 !important; height: 100% !important; width: 100% !important; margin: 0 !important; z-index: 0; }
.hero .portrait .back { display: block !important; inset: 8% 3% 6% auto; width: 42%; border-radius: 0; background: var(--accent) !important; box-shadow: none; }
.hero .portrait .frame { position: absolute; inset: 0; height: 100%; width: 100%; border-radius: 0; box-shadow: none; overflow: visible; }
.hero .portrait .photo { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; object-position: 94% 50%; }
.hero .portrait .frame::after { display: block !important; content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #EFEEEE 0%, #EFEEEE 33%, rgba(239,238,238,.88) 43%, rgba(239,238,238,0) 60%); pointer-events: none; }
.hero .words { display: none; }
.bio { padding: 80px 0 !important; }
.bio .wrap { display: flex !important; flex-direction: column; gap: 64px !important; overflow: visible !important; padding: 0 32px; scroll-snap-type: none; }
.bio .bio-heading { font-size: clamp(30px, 3.5vw, 48px); line-height: 1.18; letter-spacing: -.035em; max-width: 860px; margin: 0; color: var(--accent-deep); }
.bio .bio-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 56px !important; align-items: center; margin: 0 !important; height: auto !important; }
.bio .bio-row .bio-photo, .bio .bio-row .bio-text, .bio .bio-row .bio-ending { grid-column: auto !important; grid-row: auto !important; margin: 0 !important; }
.bio .bio-row .bio-photo { max-width: none !important; width: 100%; }
.bio .bio-row .bio-photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; }
.bio .bio-photo::before { display: none; }
.bio .bio-text, .bio .bio-ending { padding: 0 !important; overflow: visible !important; }
.bio .bio-text p { font-size: 18px; line-height: 1.65; }
.bio-dots, .bio-more { display: none !important; }
.refs .broadcaster { padding-top: 8px; }
.refs .broadcaster + .broadcaster { margin-top: 28px; }
.refs .broadcaster h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 19px; line-height: 1.4; font-weight: 600; margin: 0 0 10px; }
.refs .broadcaster .project-years { font-size: 12px; font-weight: 400; white-space: nowrap; color: #FFF; }
.refs .broadcaster li { display: block; padding: 7px 0; line-height: 1.55; }
.refs .broadcaster ul { display: block !important; }
.refs li .project-label { color: inherit; white-space: normal; font-size: inherit; }
.refs .project-label small { display: block; font-size: 12px; color: rgba(255,255,255,.85); margin-top: 4px; }
.refs .podcast-project { align-items: baseline; }
.refs .podcast-project .project-years { flex: none; }
.direct a { min-height: 46px; }
.farbtest { display: none !important; }
@media (min-width: 901px) and (max-width: 1180px) {
 .nav { gap: 14px; padding-inline: 20px; height: 84px; }
 .nav .brand-logo { width: 92px; height: 40px; }
 .brand-name { font-size: 17px; }
 .nav .menu { gap: 12px; font-size: 11px; }
 .nav .right { gap: 10px; }
 .nav .btn { padding: 10px 12px; font-size: 11px; }
 .hero .wrap { padding-inline: 40px; }
}
@media (max-width: 900px) {
 .nav { height: 76px; padding: 8px 12px; gap: 8px; }
 .nav .logo { gap: 8px; }
 .nav .brand-logo { width: 54px; height: 36px; }
 .brand-name { font-size: 15px; line-height: 1.17; }
 .nav .right { gap: 8px; }
 .nav .lang { font-size: 12px; min-width: 48px; }
 .burger { width: 40px; height: 44px; border-radius: 5px; }
 .hero { min-height: 880px; height: min(960px, calc(100svh + 90px)); }
 .hero .wrap { display: block !important; padding: 30px 20px; }
 .hero .hero-text { width: 100%; max-width: none; margin: 0; padding: 0; }
 .hero h1.name { font-size: clamp(38px, 10vw, 52px); line-height: 1.07; max-width: 360px; margin: 0 0 18px; }
 .hero .hero-roles { font-size: 17px; max-width: 340px; margin: 0 0 14px; }
 .hero .hero-sub { font-size: 15px; max-width: 33ch; margin: 0 0 20px; line-height: 1.5; }
 .hero .cta { gap: 10px; flex-wrap: nowrap; }
 .hero .cta .btn { flex: 1; padding: 11px 10px; font-size: 10px; white-space: nowrap; letter-spacing: .05em; }
 .hero .portrait .back { inset: 42% 12px 20px 12px; width: auto; }
 .hero .portrait .photo { position: absolute; bottom: 0; right: 0; width: 100%; height: 62%; object-position: 100% 100%; object-fit: contain; }
 .hero .portrait .frame::after { background: linear-gradient(180deg,#EFEEEE 0%,#EFEEEE 32%,rgba(239,238,238,.6) 43%,rgba(239,238,238,0) 55%); }
 .bio { padding: 56px 0 !important; }
 .bio .wrap { padding: 0 20px !important; gap: 48px !important; }
 .bio .bio-heading { font-size: 32px; line-height: 1.18; }
 .bio .wrap > .bio-row { display: flex !important; flex-direction: column; flex: none; gap: 24px !important; height: auto !important; max-height: none; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
 .bio .wrap > .bio-row .bio-photo { order: 0 !important; }
 .bio .wrap > .bio-row .bio-photo img { aspect-ratio: 4 / 3 !important; height: auto; border-radius: 10px; }
 .bio .wrap > .bio-row .bio-text, .bio .wrap > .bio-row .bio-ending, .bio .wrap > .bio-row .bio-ending .bio-text { padding: 0 !important; height: auto !important; overflow: visible !important; }
 .bio .wrap > .bio-row .bio-text p { font-size: 16px; line-height: 1.65; }
 .bio-text.clipped::after { display: none; }
 .refs .broadcaster h4 { font-size: 20px; }
}

/* Das einzige verbleibende Reel zeigt den vollständigen 16:9-Ausschnitt. */
.reel .video { aspect-ratio: 16 / 9 !important; }
.reel .slot video { object-fit: contain; }

/* Abschlusskontrolle: Alt-Schalter und freistehenden mobilen Akzent entfernen. */
.nav .lang::before, .nav .lang::after { display: none !important; }
@media(max-width:900px) { .hero .portrait .back { display:none !important; } }

/* Andreas: Foto wieder eigenständig wie vor dem Hintergrundbild-Entwurf. */
.hero { height:auto; min-height:0; padding:72px 0 90px !important; background:var(--bg) !important; }
.hero .wrap { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:64px; height:auto; padding:0 32px; max-width:1200px; }
.hero .hero-text { width:100%; max-width:none; }
.hero .portrait { position:relative !important; inset:auto !important; width:auto !important; height:auto !important; margin:0 28px 28px 0 !important; z-index:0; }
.hero .portrait .back { display:block !important; inset:36px -28px -28px 36px; width:auto; border-radius:var(--r-lg); background:var(--accent) !important; }
.hero .portrait .frame { position:relative; inset:auto; height:auto; width:100%; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); }
.hero .portrait .photo { position:static; display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 50%; }
.hero .portrait .frame::after { display:none !important; }
@media(max-width:900px) {
 .hero { height:auto; min-height:0; padding:28px 0 48px !important; }
 .hero .wrap { display:flex !important; flex-direction:column; gap:32px; padding:0 20px; }
 .hero .portrait { order:-1; width:calc(100% - 16px) !important; max-width:440px; height:auto !important; margin:0 16px 16px 0 !important; }
 .hero .portrait .back { display:block !important; inset:20px -16px -16px 20px; }
 .hero .portrait .frame { border-radius:14px; }
 .hero .portrait .photo { position:static; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 50%; }
 .hero .hero-text { margin:0; padding:0; }
}

/* Geliefertes Logo sichtbar, voller Name deutlich größer darunter. */
.nav { height:148px; }
.nav .logo { flex-direction:column; align-items:center; gap:0; }
.nav .brand-logo { width:240px; height:72px; }
.nav .brand-name { font-size:25px; line-height:1.12; text-align:center; }
.nav .brand-name > span { display:inline; }
.nav .brand-name > span::before { content:" "; }
.video.preview .slot { z-index:1; }
.video.preview .slot video { object-fit:contain; }
.video.preview .play { z-index:2; }
.video.preview .bar { z-index:2; }
@media(min-width:901px) and (max-width:1180px) {
 .nav { height:132px; gap:12px; }
 .nav .brand-logo { width:190px; height:60px; }
 .nav .brand-name { font-size:20px; }
}
@media(max-width:900px) {
 .nav { height:112px; }
 .nav .logo { gap:0; align-items:flex-start; }
 .nav .brand-logo { width:184px; height:60px; }
 .nav .brand-name { font-size:19px; text-align:left; white-space:normal; max-width:190px; }
 .nav .brand-name > span { display:block; }
 .nav .brand-name > span::before { content:none; }
}
@media(max-width:360px) {
 .nav .brand-logo { width:158px; height:52px; }
 .nav .brand-name { font-size:17px; max-width:164px; }
}

/* Weicher unterer Header-Abschluss statt gerader Kastenkante. */
header { border-bottom:0; isolation:isolate; }
header::after {
 content:""; position:absolute; top:100%; left:0; right:0; height:36px;
 background:linear-gradient(to bottom, #FFF8F0 0%, rgba(255,248,240,.8) 25%, rgba(255,248,240,0) 100%);
 pointer-events:none;
}
@media(max-width:900px) { header::after { height:26px; } }

/* Sprachziel als Flagge hinter dem ausgeschriebenen Sprachnamen. */
.nav a.lang {
 min-width:82px; min-height:44px; height:44px; padding:0 8px;
 border-radius:7px; border:1px solid rgba(47,49,54,.18);
 background:linear-gradient(to bottom,#AA151B 0 25%,#F1BF00 25% 75%,#AA151B 75% 100%);
 color:#2F3136; text-decoration:none;
}
html[lang="es"] .nav a.lang {
 background:linear-gradient(to bottom,#C8102E 0 33.333%,#FFF 33.333% 66.666%,#C8102E 66.666% 100%);
}
.nav a.lang > [data-i18n="nav.language"] {
 position:relative; padding:3px 6px; border-radius:3px;
 background:rgba(255,248,240,.94); color:#2F3136; line-height:1.2; font-weight:600;
}
.nav a.lang:hover { border-color:var(--accent-deep); }
.nav a.lang:focus-visible { outline:2px solid var(--accent-deep); outline-offset:4px; }
@media(max-width:900px) {
 .nav a.lang { min-width:70px; padding:0 4px; }
 .nav a.lang > [data-i18n="nav.language"] { padding:3px 4px; }
}

/* Flagge innerhalb der Buchstaben; kompakter Header und kurzer Auslauf. */
.nav { height:116px; padding-block:6px; }
.nav .brand-logo { height:58px; }
header::after { height:14px; }
.nav a.lang, html[lang="es"] .nav a.lang {
 background:transparent; border:0; border-radius:0; padding:0 4px; min-width:88px;
}
.nav a.lang > [data-i18n="nav.language"] {
 padding:0; border-radius:0; font-size:19px; font-weight:800; line-height:1.35;
 background:linear-gradient(to bottom,#AA151B 0 25%,#F1BF00 25% 75%,#AA151B 75% 100%);
 background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
 filter:drop-shadow(0 0 .35px rgba(47,49,54,.65));
}
html[lang="es"] .nav a.lang > [data-i18n="nav.language"] {
 background-image:linear-gradient(to bottom,#171717 0 33.333%,#D82B32 33.333% 66.666%,#D9A600 66.666% 100%);
}
@media(min-width:901px) and (max-width:1180px) {
 .nav { height:104px; }
 .nav .brand-logo { height:48px; }
}
@media(max-width:900px) {
 .nav { height:92px; padding-block:4px; }
 .nav .brand-logo { height:44px; }
 .nav a.lang { min-width:76px; }
 .nav a.lang > [data-i18n="nav.language"] { padding:0; font-size:17px; }
 header::after { height:10px; }
}
@media(max-width:360px) {
 .nav .brand-logo { height:40px; }
 .nav a.lang { min-width:68px; padding-inline:2px; }
 .nav a.lang > [data-i18n="nav.language"] { font-size:16px; }
}

/* Sprachname lesbar, kleine Flagge daneben. */
.nav a.lang > [data-i18n="nav.language"],
html[lang="es"] .nav a.lang > [data-i18n="nav.language"] {
 background:none; background-image:none; color:#2F3136;
 -webkit-text-fill-color:#2F3136; filter:none;
 display:inline-flex; align-items:center; gap:7px;
}
.nav a.lang > [data-i18n="nav.language"]::after {
 content:""; display:inline-block; flex:0 0 19px; width:19px; height:13px;
 border-radius:2px; box-shadow:0 0 0 1px rgba(47,49,54,.15);
 background:linear-gradient(to bottom,#AA151B 0 25%,#F1BF00 25% 75%,#AA151B 75% 100%);
}
html[lang="es"] .nav a.lang > [data-i18n="nav.language"]::after {
 background:linear-gradient(to bottom,#C8102E 0 33.333%,#FFF 33.333% 66.666%,#C8102E 66.666% 100%);
}
@media(max-width:360px) {
 .nav .brand-logo { width:142px; }
 .nav .brand-name { max-width:148px; font-size:16px; }
 .nav a.lang > [data-i18n="nav.language"] { gap:5px; }
 .nav a.lang > [data-i18n="nav.language"]::after { width:16px; height:11px; flex-basis:16px; }
}

/* Kompakte Kopfzeile, geliefertes Original ohne zusätzlichen Bild-Leerraum. */
.nav { height:78px; padding:3px 24px; gap:18px; }
.nav .logo { gap:0; min-height:0; }
.nav .brand-logo { width:210px; height:50px; object-fit:cover; object-position:center; }
.nav .brand-name { font-size:19px; line-height:1.1; white-space:nowrap; }
header::after { height:10px; }
@media(min-width:901px) and (max-width:1180px) {
 .nav { height:72px; padding-inline:16px; gap:10px; }
 .nav .brand-logo { width:180px; height:43px; }
 .nav .brand-name { font-size:17px; }
 .nav .menu { gap:10px; }
}
@media(max-width:900px) {
 .nav { height:74px; padding:3px 10px; gap:7px; }
 .nav .brand-logo { width:154px; height:37px; }
 .nav .brand-name { font-size:16px; line-height:1.1; max-width:164px; white-space:normal; }
 .nav .brand-name > span { display:block; }
 .nav .right { gap:6px; }
 header::after { height:8px; }
}
@media(max-width:360px) {
 .nav .brand-logo { width:140px; height:34px; }
 .nav .brand-name { font-size:15px; max-width:148px; }
 .nav a.lang > [data-i18n="nav.language"] { font-size:15px; gap:4px; }
}

/* Feine Originalstriche vollständig und ohne ausgefranste Verkleinerung. */
.nav .brand-logo {
 object-fit:contain; object-position:center;
 filter:drop-shadow(0 0 .35px rgba(0,0,0,.95));
 image-rendering:auto; flex-shrink:0;
}

/* Lautsprecher kennzeichnet die Tonfreigabe des bereits laufenden Reels. */
#reelplay { color:#2F3136; }
#reelplay .i-sound { display:block; }

/* Großer Foto-Einstieg mit Text, der beim Scrollen erscheint. */
.hero.hero-scroll { height:220svh; min-height:0; padding:0 !important; margin-top:-78px !important; overflow:visible; background:#EFEEEE !important; }
.hero.hero-scroll .wrap { position:sticky; top:0; display:flex !important; align-items:center; width:100%; max-width:none; height:100svh; padding:110px max(6vw,24px) 60px; overflow:hidden; isolation:isolate; }
.hero.hero-scroll .portrait { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; margin:0 !important; z-index:-2; }
.hero.hero-scroll .portrait .back { display:none !important; }
.hero.hero-scroll .portrait .frame { position:absolute; inset:0; height:100%; width:100%; border-radius:0; box-shadow:none; overflow:hidden; }
.hero.hero-scroll .portrait .photo { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:50% 48%; }
.hero.hero-scroll .wrap::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(239,238,238,.97),rgba(239,238,238,.9) 30%,rgba(239,238,238,.08) 72%); opacity:var(--hero-shade,1); pointer-events:none; }
.hero.hero-scroll .hero-text { width:52%; max-width:680px; margin:0; padding:0; }
.hero.hero-scroll h1.name { font-size:clamp(48px,6vw,88px); }
.hero.hero-scroll .hero-roles { font-size:clamp(20px,2vw,28px); }
.hero.hero-scroll .hero-sub { max-width:38ch; }
.hero-scroll .hero-text a { visibility:inherit; }
@media(min-width:901px) and (max-width:1180px) { .hero.hero-scroll { margin-top:-72px !important; } }
@media(max-width:900px) {
 .hero.hero-scroll { height:205svh; margin-top:-74px !important; }
 .hero.hero-scroll .wrap { padding:110px 22px 40px; justify-content:flex-end; flex-direction:column; gap:0; }
 .hero.hero-scroll .portrait { order:0; max-width:none; }
 .hero.hero-scroll .portrait .photo { object-fit:cover; object-position:58% 45%; }
 .hero.hero-scroll .hero-text { width:100%; max-width:540px; }
 .hero.hero-scroll h1.name { font-size:clamp(38px,10vw,58px); margin-bottom:14px; }
 .hero.hero-scroll .hero-roles { font-size:19px; margin-bottom:12px; }
 .hero.hero-scroll .hero-sub { font-size:15px; margin-bottom:18px; }
 .hero.hero-scroll .wrap::after { background:linear-gradient(180deg,rgba(239,238,238,0) 8%,rgba(239,238,238,.7) 36%,#EFEEEE 68%); }
}
@media(prefers-reduced-motion:reduce) {
 .hero.hero-scroll { height:auto; }
 .hero.hero-scroll .wrap { position:relative; min-height:100svh; height:auto; }
}

@media(min-width:901px) { .hero.hero-scroll .portrait .photo { object-position:50% 0%; } }

/* Kürzerer Fotoablauf, vollständiger Ausschnitt und bewegte Reel-Vorschau. */
.hero.hero-scroll { height:160svh; }
.hero.hero-scroll .portrait { background:#EFEEEE; }
.hero.hero-scroll .portrait .photo {
 object-fit:contain; object-position:78% center; padding:92px 3% 30px;
 transform-origin:65% 50%;
}
.hero.hero-scroll .wrap::after { opacity:var(--hero-shade,0); }
.hero.hero-scroll .hero-text { width:65%; max-width:850px; padding-left:3vw; }
.hero.hero-scroll h1.name { font-size:clamp(60px,7.5vw,112px); line-height:1.01; max-width:850px; }
.hero .cta .reel-teaser { position:relative; overflow:hidden; min-width:244px; min-height:82px; padding:18px 24px; background:#414345; border-radius:14px; color:white; isolation:isolate; }
.reel-teaser .teaser-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; pointer-events:none; }
.reel-teaser::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,rgba(0,0,0,.65),rgba(0,0,0,.12)); }
.reel-teaser .teaser-label { display:flex; align-items:center; gap:10px; text-shadow:0 1px 3px rgba(0,0,0,.7); }
@media(max-width:900px) {
 .hero.hero-scroll { height:155svh; }
 .hero.hero-scroll .portrait .photo { object-fit:contain; object-position:center top; padding:82px 12px 12px; transform-origin:50% 25%; }
 .hero.hero-scroll .hero-text { width:100%; padding-left:0; }
 .hero.hero-scroll h1.name { font-size:clamp(42px,12vw,62px); max-width:100%; }
 .hero .cta .reel-teaser { min-height:76px; min-width:0; width:100%; }
}
@media(prefers-reduced-motion:reduce) {
 .hero.hero-scroll { height:auto; }
 .hero.hero-scroll .wrap::after { opacity:1; }
}

/* Seitliche Hintergrund-Erweiterung ohne einen Schleier über der Person. */
.hero.hero-scroll .portrait { background:#e6e6e6; }
.hero.hero-scroll .portrait .photo {
 inset:auto; top:88px; right:9%; bottom:auto; left:auto;
 height:calc(100% - 110px); width:auto; max-width:94%; padding:0;
 object-fit:contain; object-position:center; aspect-ratio:4/5;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
@media(max-width:900px) {
 .hero.hero-scroll .portrait .photo {
 top:82px; right:12px; left:12px; width:calc(100% - 24px); max-width:none; height:auto;
 object-position:center top;
 }
}

/* Hintergrund bleibt stehen; die folgenden Bereiche decken ihn beim Scrollen zu. */
.hero.hero-scroll { height:145svh; }
.hero.hero-scroll .wrap { position:fixed; inset:0; z-index:0; height:100svh; }
.hero.hero-scroll .portrait .photo {
 top:0; right:0; left:0; bottom:0; width:100%; height:100%; max-width:none;
 padding:0; object-fit:contain; object-position:80% center;
 -webkit-mask-image:none; mask-image:none;
}
.hero.hero-scroll .portrait { background:#e6e6e6; }
main > section:not(.hero-scroll) { position:relative; z-index:2; }
main > .logos-car { background:var(--bg); margin-top:0; padding-top:40px; }
.hero .cta { align-items:center; }
.hero .cta .btn, .hero .cta .reel-teaser {
 flex:0 0 auto; width:auto; min-width:0; min-height:46px; height:46px;
 padding:11px 22px; border-radius:999px; font-size:12px;
}
.hero .cta .reel-teaser { min-width:220px; }
@media(max-width:900px) {
 .hero.hero-scroll { height:140svh; }
 .hero.hero-scroll .portrait .photo {
 inset:0; width:100%; height:100%; padding:0;
 object-fit:cover; object-position:75% center;
 }
 .hero.hero-scroll .hero-text { padding-bottom:12px; }
 .hero .cta { flex-direction:row; flex-wrap:wrap; gap:10px; }
 .hero .cta .btn, .hero .cta .reel-teaser { height:44px; min-height:44px; font-size:10px; padding:10px 14px; }
 .hero .cta .reel-teaser { min-width:0; }
 main > .logos-car { padding-top:28px; }
}
@media(prefers-reduced-motion:reduce) {
 .hero.hero-scroll { height:auto; }
 .hero.hero-scroll .wrap { position:relative; inset:auto; height:auto; min-height:100svh; }
}

/* Tatsächlich flächendeckender Fotoausschnitt, wie in der Referenz. */
.hero.hero-scroll .portrait .photo {
 inset:0; width:100%; height:100%; max-width:none; padding:0;
 object-fit:cover; object-position:50% 12%; aspect-ratio:auto;
 -webkit-mask-image:none; mask-image:none;
 transform-origin:67% 35%;
}
@media(max-width:900px) {
 .hero.hero-scroll .portrait .photo { object-position:77% 35%; transform-origin:72% 35%; }
}
/* Vorschau wächst nur mit Maus, ohne benachbarte Elemente zu verschieben. */
.hero .cta .reel-teaser { overflow:visible; background:none; box-shadow:none; z-index:3; }
.reel-teaser .teaser-video, .reel-teaser::after { border-radius:999px; }
.reel-teaser .teaser-video { box-shadow:0 6px 18px rgba(0,0,0,.18); }
.reel-teaser .teaser-label { position:relative; z-index:1; }
@media(hover:hover) and (pointer:fine) {
 .reel-teaser .teaser-video, .reel-teaser::after {
   top:50%; bottom:auto; height:100%; transform:translateY(-50%);
   transition:height .38s cubic-bezier(.22,.61,.36,1),border-radius .38s cubic-bezier(.22,.61,.36,1),box-shadow .38s ease;
 }
 .hero .cta .reel-teaser:hover .teaser-video,
 .hero .cta .reel-teaser:hover::after,
 .hero .cta .reel-teaser:focus-visible .teaser-video,
 .hero .cta .reel-teaser:focus-visible::after { height:124px; border-radius:12px; }
 .hero .cta .reel-teaser:hover .teaser-video { box-shadow:0 12px 28px rgba(0,0,0,.24); }
}
@media(prefers-reduced-motion:reduce) {
 .reel-teaser .teaser-video, .reel-teaser::after { transition:none !important; }
}

@media(hover:hover) and (pointer:fine) {
 .hero .cta .reel-teaser::before { content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; }
 .hero .cta .reel-teaser:hover::before, .hero .cta .reel-teaser:focus-visible::before { top:50%; bottom:auto; height:124px; transform:translateY(-50%); border-radius:12px; }
}

/* Transparente Blur-Kopfzeile und Verlauf abseits des Gesichts. */
header {
 background:rgba(255,248,240,.16) !important;
 -webkit-backdrop-filter:blur(18px) saturate(1.12);
 backdrop-filter:blur(18px) saturate(1.12);
 border-bottom:1px solid rgba(255,255,255,.22);
}
header::after { display:none; }
.hero.hero-scroll .wrap::after {
 background:linear-gradient(90deg,rgba(239,238,238,.97) 0%,rgba(239,238,238,.9) 25%,rgba(239,238,238,.55) 38%,rgba(239,238,238,0) 53%);
}
@media(max-width:900px) {
 .hero.hero-scroll .wrap::after {
   background:linear-gradient(180deg,rgba(239,238,238,0) 0%,rgba(239,238,238,0) 48%,rgba(239,238,238,.68) 63%,rgba(239,238,238,.96) 78%);
 }
}

/* Fotoband wie Logos: endlos, langsam und greifbar. */
#galtrack { scroll-snap-type:none; scroll-behavior:auto; touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none; }
#galtrack.ziehen { cursor:grabbing; }
#galtrack img { -webkit-user-drag:none; pointer-events:none; }
.gal-bars { display:none !important; }
@media(prefers-reduced-motion:reduce) { #galtrack { touch-action:auto; overflow-x:auto; cursor:auto; } }

/* Hochauflösendes Original hat mehr Leerraum oberhalb: Bildfokus nachführen. */
.hero.hero-scroll .portrait .photo { object-position:50% 35%; }
@media(max-width:900px) { .hero.hero-scroll .portrait .photo { object-position:77% 48%; } }

.gallery-viewer { border:0; padding:60px 18px 28px; margin:auto; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; background:rgba(24,25,28,.97); color:white; }
.gallery-viewer::backdrop { background:rgba(24,25,28,.9); }
.gallery-viewer[open] { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; align-items:center; gap:12px; }
.gallery-viewer figure { margin:0; min-width:0; text-align:center; }
.gallery-viewer img { display:block; margin:auto; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 160px); object-fit:contain; border-radius:8px; }
.gallery-viewer figcaption { margin:16px auto 0; max-width:900px; font-size:14px; line-height:1.5; }
.gallery-viewer button { border:1px solid rgba(255,255,255,.4); border-radius:50%; width:44px; height:44px; color:white; background:rgba(255,255,255,.1); cursor:pointer; font:30px/1 sans-serif; }
.gallery-viewer .gv-close { position:absolute; top:12px; right:16px; }
.gallery-viewer button:focus-visible,#galtrack figure:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
@media(max-width:600px) { .gallery-viewer { padding-inline:6px; } .gallery-viewer[open] { grid-template-columns:36px minmax(0,1fr) 36px; gap:4px; } .gallery-viewer button { width:36px; height:44px; } .gallery-viewer figcaption { font-size:12px; } }

/* Bio: vollständige Bilder in ihrem natürlichen Seitenverhältnis. */
.bio .wrap > .bio-row .bio-photo { height:auto !important; max-height:none !important; overflow:visible !important; }
.bio .wrap > .bio-row .bio-photo img {
 display:block; width:100% !important; height:auto !important;
 max-height:none !important; aspect-ratio:var(--ar,auto) !important;
 object-fit:contain !important; object-position:center !important;
}

/* Showreel: füllt genau einen Bildschirm. Der Link landet so, dass nur der einfarbige Hintergrund
   zu sehen ist und die Projekte-Fläche direkt an der Unterkante beginnt. */
section#reel {
 box-sizing:border-box; min-height:100vh; min-height:100lvh;
 display:flex; flex-direction:column; justify-content:center;
 padding-block:90px; scroll-margin-top:0;
}
#reel .stage { width:100%; }
#reel .video { width:min(calc(50% + 20% * var(--p, 1)), calc((100vh - 180px) * 16 / 9)); }
@media(max-width:900px) {
 #reel .video { width:min(calc(100% - 16px), calc((100svh - 180px) * 16 / 9)); }
}
@media(max-height:500px) {
 section#reel { padding-block:78px 20px; }
 #reel .video { width:min(calc(100% - 16px), calc((100svh - 98px) * 16 / 9)); }
}
@media(max-height:500px) and (max-width:760px) {
 /* Kleine Handys quer: Platz für den Anfragen-Knopf rechts unten */
 #reel .video { margin-left:16px; }
}

/* Hörproben: großer Player mit gespiegelter Waveform und Trackliste */
section.demos { display:block; background:var(--calm-bg); padding:24px 0 120px; }
.demos .wrap { width:100%; box-sizing:border-box; }
.demos h2 { margin:0 0 36px; text-align:center; }
.vplayer {
 width:100%; max-width:1080px; margin:0 auto; background:#fff; border-radius:28px; overflow:hidden; box-sizing:border-box;
 border:1px solid rgba(150,62,45,.10);
 box-shadow:0 40px 90px -40px rgba(150,62,45,.45), 0 2px 12px rgba(47,49,54,.05);
}
.vp-stage { padding:34px 40px 26px; background:radial-gradient(120% 160% at 0% 0%, #FFF1E4 0%, #FFFDFB 48%, #fff 100%); }
.vp-head { display:flex; align-items:center; gap:20px; margin-bottom:18px; }
.vp-play {
 position:relative; flex:0 0 68px; width:68px; height:68px; border:0; border-radius:50%; cursor:pointer; color:#fff;
 display:grid; place-items:center; background:linear-gradient(140deg, #963E2D 0%, #E2725B 55%, #F2B33D 120%);
 box-shadow:0 14px 30px -10px rgba(226,114,91,.75); transition:transform .25s ease, box-shadow .25s ease;
}
.vp-play svg { grid-area:1/1; }
.vp-play .i-pause, .vplayer.playing .vp-play .i-play { display:none; }
.vplayer.playing .vp-play .i-pause { display:block; }
.vp-play:hover { transform:scale(1.05); box-shadow:0 18px 36px -10px rgba(226,114,91,.85); }
.vp-play:focus-visible, .vp-track:focus-visible, .vp-wave:focus-visible { outline:2px solid var(--accent-deep); outline-offset:4px; }
.vp-play::after { content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(226,114,91,.45); opacity:0; }
.vplayer.playing .vp-play::after { animation:vp-ring 1.8s ease-out infinite; }
@keyframes vp-ring { 0% { transform:scale(.92); opacity:.9; } 100% { transform:scale(1.25); opacity:0; } }
.vp-meta { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.vp-lang { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-deep); font-weight:600; }
.vp-title { font-size:clamp(24px, 2.6vw, 34px); line-height:1.1; font-weight:500; letter-spacing:-.01em; color:#2F3136; }
.vp-time { flex:none; font-size:15px; font-variant-numeric:tabular-nums; color:#7A7C83; }
.vp-cur { color:#2F3136; font-weight:600; }
.vp-wave { position:relative; height:150px; cursor:pointer; touch-action:pan-y; border-radius:12px; }
.vp-wave canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.vp-list { display:grid; grid-template-columns:1fr 1fr; gap:8px 40px; padding:22px 40px 30px; border-top:1px solid rgba(47,49,54,.07); }
.vp-group .demo-lang { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#7A7C83; margin:0 0 6px 14px; }
.vp-group ul { list-style:none; margin:0; padding:0; }
.vp-track {
 display:flex; align-items:center; gap:14px; width:100%; padding:12px 14px; border:0; border-radius:14px; cursor:pointer;
 background:none; color:#2F3136; font:inherit; text-align:left; transition:background .2s ease;
}
.vp-track:hover { background:#FFF5EC; }
.vp-track.on { background:linear-gradient(90deg, rgba(226,114,91,.13), rgba(242,179,61,.07)); }
.vp-num { flex:none; width:24px; font-size:13px; font-variant-numeric:tabular-nums; color:#A2A4AA; }
.vp-name { flex:1 1 auto; font-size:16px; font-weight:500; }
.vp-track.on .vp-num, .vp-track.on .vp-name { color:var(--accent-deep); }
.vp-track.on .vp-name { font-weight:600; }
.vp-eq { display:inline-flex; align-items:flex-end; gap:2px; height:14px; opacity:0; transition:opacity .2s ease; }
.vp-eq i { display:block; width:3px; height:35%; border-radius:2px; background:var(--accent); }
.vp-track.on .vp-eq { opacity:1; }
.vplayer.playing .vp-track.on .vp-eq i { animation:vp-eq .8s ease-in-out infinite alternate; }
.vplayer.playing .vp-track.on .vp-eq i:nth-child(2) { animation-delay:-.3s; }
.vplayer.playing .vp-track.on .vp-eq i:nth-child(3) { animation-delay:-.55s; }
@keyframes vp-eq { from { height:20%; } to { height:100%; } }
.vp-dur { flex:none; font-size:13px; font-variant-numeric:tabular-nums; color:#7A7C83; }
@media (max-width:760px) {
 section.demos { padding:16px 0 80px; }
 .demos .wrap { padding-inline:16px; }
 .demos h2 { margin-bottom:24px; }
 .vplayer { border-radius:22px; }
 .vp-stage { padding:20px 18px 16px; }
 .vp-head { gap:14px; margin-bottom:12px; flex-wrap:wrap; }
 .vp-play { flex-basis:56px; width:56px; height:56px; }
 .vp-time { font-size:13px; }
 .vp-wave { height:104px; }
 .vp-list { grid-template-columns:minmax(0,1fr); gap:14px; padding:14px 10px 18px; }
}
@media (max-width:380px) { .vp-time { width:100%; padding-left:70px; margin-top:-6px; } }
@media (prefers-reduced-motion: reduce) {
 .vp-play, .vp-track, .vp-eq { transition:none; }
 .vplayer.playing .vp-play::after, .vplayer.playing .vp-track.on .vp-eq i { animation:none; }
 .vp-play:hover { transform:none; }
}

/* Hörproben: auf größeren Bildschirmen mitwachsen, aber nicht über die volle Breite */
@media (min-width:761px) {
 .demos .wrap { max-width:1440px; }
 .vplayer { max-width:1320px; }
 .vp-stage { padding:clamp(28px, 3vw, 48px) clamp(28px, 3.4vw, 56px) clamp(22px, 2vw, 32px); }
 .vp-wave { height:clamp(120px, 10.5vw, 200px); }
 .vp-list { padding:clamp(18px, 2vw, 28px) clamp(28px, 3.4vw, 56px) clamp(24px, 2.4vw, 36px); }
}
@media (min-width:1700px) {
 .vp-play { flex-basis:76px; width:76px; height:76px; }
 .vp-name { font-size:17px; }
 .vp-time { font-size:16px; }
}

/* Hörproben: Hinweis auf die Leertaste, nur mit Maus und Tastatur sichtbar */
.vp-side { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.vp-hint { display:none; font-size:12px; color:#9A9CA3; white-space:nowrap; }
.vp-hint kbd { font:inherit; font-size:11px; padding:2px 7px; margin-right:4px; border:1px solid rgba(47,49,54,.18); border-bottom-width:2px; border-radius:6px; background:#fff; color:#5B5E66; }
@media (hover:hover) and (pointer:fine) and (min-width:761px) { .vp-hint { display:inline-block; } }
@media (max-width:380px) { .vp-side { width:100%; align-items:flex-start; } .vp-side .vp-time { width:auto; } }

/* Bio als Scroll-Abfolge (bio-scroll.js): Die Bio bleibt stehen, Bild fliegt herein, danach der Text.
   Weiterscrollen holt den nächsten Abschnitt, nach dem dritten geht die Seite normal weiter. */
.bio-steps { display:none; }
.bio.bio-pin { padding:0 !important; height:calc(100vh + var(--bio-steps, 2) * 80vh); }
.bio.bio-pin .wrap {
 position:sticky; top:0; box-sizing:border-box; height:100vh; height:100svh;
 display:grid !important; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr);
 row-gap:28px !important; gap:28px !important; padding:104px 56px 36px !important;
}
.bio.bio-pin .bio-heading { grid-row:1; }
.bio.bio-pin .bio-row { grid-row:2 !important; grid-column:1 !important; align-self:center; min-height:0; }
.bio.bio-pin .bio-row > .bio-photo { justify-self:center; max-width:100% !important; }
.bio.bio-pin .bio-row > .bio-photo img { max-width:none !important; aspect-ratio:auto !important; object-fit:cover !important; }
.bio.bio-pin .bio-row:not(.is-on) { pointer-events:none; }

.bio.bio-pin .bio-row > .bio-photo { opacity:0 !important; transform:translate3d(-110px,30px,0) rotate(-4deg) scale(.92) !important;
 transition:transform 1s cubic-bezier(.16,1,.3,1), opacity .55s ease !important; will-change:transform,opacity; }
.bio.bio-pin .bio-row.flip > .bio-photo { transform:translate3d(110px,30px,0) rotate(4deg) scale(.92) !important; }
.bio.bio-pin .bio-row > .bio-text, .bio.bio-pin .bio-row > .bio-ending { opacity:0 !important; transform:translate3d(0,40px,0) !important;
 transition:transform .8s cubic-bezier(.16,1,.3,1), opacity .5s ease !important; }
.bio.bio-pin .bio-row.is-on > .bio-photo { opacity:1 !important; transform:none !important; }
.bio.bio-pin .bio-row.is-on > .bio-text, .bio.bio-pin .bio-row.is-on > .bio-ending { opacity:1 !important; transform:none !important; transition-delay:.38s !important; }
.bio.bio-pin .bio-row.is-past > .bio-photo { opacity:0 !important; transform:translate3d(0,-60px,0) scale(.95) !important; transition-duration:.55s,.35s !important; }
.bio.bio-pin .bio-row.is-past > .bio-text, .bio.bio-pin .bio-row.is-past > .bio-ending { opacity:0 !important; transform:translate3d(0,-36px,0) !important; transition-duration:.45s,.3s !important; transition-delay:0s !important; }

.bio.bio-pin .bio-steps { display:flex; flex-direction:column; gap:10px; position:absolute; right:22px; top:50%; transform:translateY(-50%); z-index:2; }
.bio.bio-pin .bio-steps button { width:8px; height:8px; padding:0; border:0; border-radius:99px; background:rgba(47,49,54,.22); cursor:pointer; transition:height .35s, background .35s; }
.bio.bio-pin .bio-steps button.on { height:26px; background:var(--accent-deep); }
.bio.bio-pin .bio-steps button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

@media (max-width:900px) {
 .bio.bio-pin .wrap { padding:88px 26px 22px 20px !important; row-gap:18px !important; gap:18px !important; }
 .bio.bio-pin .bio-heading { font-size:clamp(24px,7vw,32px); }
 .bio.bio-pin .bio-row { display:flex !important; flex-direction:column; gap:18px !important; }
 .bio.bio-pin .bio-row > .bio-photo { order:0 !important; }
 .bio.bio-pin .bio-row > .bio-photo { transform:translate3d(-70px,20px,0) rotate(-3deg) scale(.94) !important; }
 .bio.bio-pin .bio-row.flip > .bio-photo { transform:translate3d(70px,20px,0) rotate(3deg) scale(.94) !important; }
 .bio.bio-pin .bio-row.is-on > .bio-photo { transform:none !important; }
 .bio.bio-pin .bio-row.is-past > .bio-photo { transform:translate3d(0,-40px,0) scale(.95) !important; }
 .bio.bio-pin .bio-steps { right:8px; gap:8px; }
 .bio.bio-pin .bio-steps button { width:6px; height:6px; }
 .bio.bio-pin .bio-steps button.on { height:20px; }
}

/* Ersatz, wenn ein Schritt nicht auf den Bildschirm passt: Abschnitte erscheinen beim Scrollen nacheinander. */
.bio.bio-reveal .bio-row > .bio-photo { opacity:0 !important; transform:translate3d(-70px,24px,0) rotate(-3deg) scale(.94) !important;
 transition:transform 1s cubic-bezier(.16,1,.3,1), opacity .6s ease !important; }
.bio.bio-reveal .bio-row.flip > .bio-photo { transform:translate3d(70px,24px,0) rotate(3deg) scale(.94) !important; }
.bio.bio-reveal .bio-row > .bio-text, .bio.bio-reveal .bio-row > .bio-ending { opacity:0 !important; transform:translate3d(0,32px,0) !important;
 transition:transform .8s cubic-bezier(.16,1,.3,1), opacity .5s ease !important; }
.bio.bio-reveal .bio-row.is-on > .bio-photo { opacity:1 !important; transform:none !important; }
.bio.bio-reveal .bio-row.is-on > .bio-text, .bio.bio-reveal .bio-row.is-on > .bio-ending { opacity:1 !important; transform:none !important; transition-delay:.35s !important; }

.bio.bio-pin, .bio.bio-reveal { overflow-x:clip; }

/* Bio-Abfolge v2: kürzerer Scrollweg, Überschrift zuerst, Bild erscheint mittig und gleitet dann an seinen Platz. */
.bio.bio-pin { height:calc(100vh + var(--bio-steps, 2) * var(--bio-step, 45vh) + var(--bio-tail, 35vh)); }
.bio.bio-pin .bio-heading { opacity:0; transform:translate3d(0,36px,0); transition:transform .8s cubic-bezier(.16,1,.3,1), opacity .6s ease; }
.bio.bio-pin.head-in .bio-heading { opacity:1; transform:none; }
.bio.bio-pin .bio-row > .bio-photo,
.bio.bio-pin .bio-row.flip > .bio-photo { opacity:0 !important; transform:translate3d(var(--cx,0px),30px,0) scale(.88) !important;
 transition:transform .85s cubic-bezier(.65,0,.35,1), opacity .5s ease !important; }
.bio.bio-pin .bio-row.is-on.is-center > .bio-photo { opacity:1 !important; transform:translate3d(var(--cx,0px),0,0) scale(1) !important;
 transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .45s ease !important; }
.bio.bio-pin .bio-row.is-on > .bio-photo { opacity:1 !important; transform:none !important; }
.bio.bio-pin .bio-row.is-on.is-center > .bio-text, .bio.bio-pin .bio-row.is-on.is-center > .bio-ending { opacity:0 !important; transform:translate3d(0,40px,0) !important; }
.bio.bio-pin .bio-row.is-on:not(.is-center) > .bio-text, .bio.bio-pin .bio-row.is-on:not(.is-center) > .bio-ending { transition-delay:.3s !important; }
.bio.bio-pin .bio-row.is-past > .bio-photo { opacity:0 !important; transform:translate3d(0,-50px,0) scale(.95) !important; transition:transform .5s ease, opacity .35s ease !important; }

/* Name in der Kopfzeile etwas größer */
.nav .brand-name { font-size:24px; }
@media(min-width:901px) and (max-width:1180px) { .nav .brand-name { font-size:21px; } }
@media(max-width:900px) { .nav .brand-name { font-size:19px; max-width:200px; } }
@media(max-width:360px) { .nav .brand-name { font-size:17px; max-width:170px; } }

/* Anfrage-Knöpfe: Wort verschwindet in einem Brief, der nach rechts weggeschickt wird (brief.js). */
.btn.mf { position:relative; isolation:isolate; }
.btn.mf .mf-label { display:inline-flex; align-items:center; gap:inherit; transform-origin:50% 55%; }
.btn.mf .mf-env { position:absolute; left:50%; top:50%; width:26px; height:18px; margin:-9px 0 0 -13px; opacity:0; pointer-events:none; line-height:0; }
.btn.mf .mf-env svg { display:block; overflow:visible; }
.btn.mf .mf-flap { transform-box:fill-box; transform-origin:50% 0; transform:scaleY(-1) translateY(100%); }
.btn.mf.mf-go .mf-label { animation:mf-label 1.5s cubic-bezier(.45,0,.2,1) both; }
.btn.mf.mf-go .mf-env { animation:mf-fly 1.5s cubic-bezier(.45,0,.2,1) both; }
.btn.mf.mf-go .mf-flap { animation:mf-flap 1.5s ease both; }
@keyframes mf-label {
 0% { opacity:1; transform:none; filter:none; }
 22% { opacity:0; transform:scale(.3) translateY(4px); filter:blur(1px); }
 70% { opacity:0; transform:translateX(-18px); filter:none; }
 100% { opacity:1; transform:none; }
}
@keyframes mf-fly {
 0% { opacity:0; transform:scale(.4); }
 14% { opacity:1; transform:scale(1.12); }
 24% { opacity:1; transform:scale(1); }
 38% { opacity:1; transform:scale(1) rotate(0); }
 46% { opacity:1; transform:translate(-6px,1px) rotate(4deg); }
 68% { opacity:0; transform:translate(130px,-14px) rotate(-10deg) scale(.85); }
 100% { opacity:0; transform:translate(130px,-14px) scale(.85); }
}
@keyframes mf-flap {
 0%, 24% { transform:scaleY(-1) translateY(100%); }
 36%, 100% { transform:none; }
}

/* Kontaktbereich: Knöpfe und Links reagieren sichtbar auf die Maus */
.contact .direct a, .contact .chips button, .contact .btn, .contact .form-note a {
 transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, background-color .25s ease, color .25s ease !important;
}
.contact .direct a svg { transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
@media (hover:hover) and (pointer:fine) {
 .contact .direct a:hover { transform:translateY(-3px); background:#fff; box-shadow:0 12px 26px rgba(47,49,54,.14), inset 0 0 0 1px rgba(226,114,91,.35); }
 .contact .direct a:hover svg { transform:scale(1.18) rotate(-8deg); }
 .contact .direct a.sedcard-link:hover svg { animation:dl-bounce .7s ease; transform:none; }
 .contact .chips button:not(.on):hover { transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px #E2725B, 0 6px 14px rgba(226,114,91,.18); color:#963E2D; }
 .contact .chips button.on:hover { transform:translateY(-2px); }
 .contact .btn:hover, .nav .btn:hover, .hero .cta .btn:hover { transform:translateY(-2px) !important; }
 .contact .btn:hover { box-shadow:0 14px 28px rgba(150,62,45,.32) !important; }
 .contact .form-note a:hover { color:#963E2D; }
 .contact input:hover, .contact textarea:hover { box-shadow:inset 0 0 0 1px rgba(226,114,91,.45); }
}
.contact .direct a:active, .contact .chips button:active, .contact .btn:active { transform:scale(.96) !important; transition-duration:.1s !important; }
@keyframes dl-bounce { 0%,100% { transform:none; } 35% { transform:translateY(4px); } 60% { transform:translateY(-2px); } 80% { transform:translateY(1px); } }

/* Startbild: Umschalter Neu / Original (hero-look.js) */
.hero.hero-scroll[data-look="neu"] .portrait { background:#EFEAE9; }
.hero.hero-scroll .portrait .frame { transition:opacity .22s ease; }
.hero.hero-scroll .portrait .frame.look-fade { opacity:0; }
.look-switch { position:absolute; right:max(20px,2vw); bottom:24px; z-index:5; display:flex; gap:2px; padding:3px; border-radius:99px;
 background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 4px 16px rgba(47,49,54,.12), inset 0 0 0 1px rgba(47,49,54,.08); }
.look-switch button { font:inherit; font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:#5B5E66; background:transparent; border:0; border-radius:99px; padding:7px 13px; cursor:pointer; min-height:32px; transition:background-color .2s, color .2s; }
.look-switch button[aria-pressed="true"] { background:#2F3136; color:#fff; }
.look-switch button:not([aria-pressed="true"]):hover { background:rgba(47,49,54,.08); color:#2F3136; }
.look-switch button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:900px) { .look-switch { right:12px; bottom:14px; } .look-switch button { font-size:11px; padding:6px 11px; } }
.hero.hero-scroll[data-look="hell"] .portrait { background:#EFEAE9; }

/* Feinschliff: Kundenlogos laufen an den Rändern weich aus statt hart abgeschnitten zu werden. */
.logos-car .car-track {
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);
 mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);
}
@media(max-width:900px) {
 .logos-car .car-track { -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%); }
}
/* Absende-Knopf bleibt einzeilig */
#contact-form [type="submit"] { white-space:nowrap; }
@media(max-width:380px) { #contact-form [type="submit"] { letter-spacing:.08em; padding-inline:18px; } }

/* Galerie-Großansicht v2: hell, einheitliche Symbole, Fotoleiste unten (gallery-viewer.js) */
.gallery-viewer.gv2 { box-sizing:border-box; padding:0 clamp(12px,3vw,40px); width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; inset:0;
 background:#FFF8F0; color:#2F3136; overflow:hidden; }
.gallery-viewer.gv2::backdrop { background:rgba(255,248,240,.96); }
.gallery-viewer.gv2[open] { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; gap:0; align-items:stretch; }
.gv2 .gv-top { display:flex; align-items:center; justify-content:space-between; padding:max(14px,env(safe-area-inset-top)) 0 10px; }
.gv2 .gv-count { font-size:13px; letter-spacing:.14em; font-weight:600; color:var(--accent-deep,#963E2D); font-variant-numeric:tabular-nums; }
.gv2 .gv-btn { position:static; display:grid; place-items:center; width:46px; height:46px; padding:0; border:0; border-radius:50%;
 background:#fff; color:#2F3136; box-shadow:0 4px 14px rgba(47,49,54,.12), inset 0 0 0 1px rgba(47,49,54,.08); cursor:pointer; font:inherit;
 transition:transform .2s cubic-bezier(.2,.8,.2,1), background-color .2s, color .2s, box-shadow .2s; }
.gv2 .gv-btn svg { display:block; }
@media (hover:hover) and (pointer:fine) {
 .gv2 .gv-btn:hover { background:var(--accent,#E2725B); color:#fff; transform:translateY(-1px); box-shadow:0 8px 20px rgba(226,114,91,.35); }
}
.gv2 .gv-btn:active { transform:scale(.94); }
.gv2 .gv-btn:focus-visible, .gv2 .gv-thumbs button:focus-visible { outline:2px solid var(--accent-deep,#963E2D); outline-offset:3px; }
.gv2 .gv-stage { min-height:0; display:grid; grid-template-columns:46px minmax(0,1fr) 46px; gap:clamp(12px,2vw,28px); align-items:center; padding:4px 0 12px; }
.gv2 figure { margin:0; min-width:0; min-height:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.gv2 .gv-pic { position:relative; min-height:0; max-height:100%; display:flex; justify-content:center; flex:0 1 auto; }
.gv2 .gv-pic img { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 230px); object-fit:contain; border-radius:12px; box-shadow:0 18px 40px rgba(47,49,54,.18); margin:0; }
.gv2 .gv-pic img.in { animation:gv-in .35s ease both; }
@keyframes gv-in { from { opacity:0; transform:scale(.985); } to { opacity:1; transform:none; } }
.gv2 .gv-tap { position:absolute; top:0; bottom:0; width:38%; }
.gv2 .gv-tap-l { left:0; cursor:w-resize; } .gv2 .gv-tap-r { right:0; cursor:e-resize; }
.gv2 figcaption { margin:0; max-width:760px; font-size:14px; line-height:1.45; text-align:center; color:#5B5E66; }
.gv2 .gv-thumbs { display:flex; gap:8px; overflow-x:auto; padding:10px 2px max(14px,env(safe-area-inset-bottom)); scrollbar-width:none; justify-content:safe center;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent); mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent); }
.gv2 .gv-thumbs::-webkit-scrollbar { display:none; }
.gv2 .gv-thumbs button { flex:none; width:58px; height:58px; padding:0; border:0; border-radius:10px; overflow:hidden; background:#EFE6DE; cursor:pointer; opacity:.5;
 transition:opacity .2s, transform .2s, box-shadow .2s; box-shadow:none; }
.gv2 .gv-thumbs button img { display:block; width:100%; height:100%; max-height:none; object-fit:cover; border-radius:0; margin:0; box-shadow:none; }
.gv2 .gv-thumbs button:hover { opacity:.85; }
.gv2 .gv-thumbs button[aria-current] { opacity:1; box-shadow:0 0 0 2px #FFF8F0, 0 0 0 4px var(--accent,#E2725B); transform:translateY(-2px); }
@media (max-width:700px) {
 .gv2 .gv-stage { grid-template-columns:minmax(0,1fr); padding-bottom:6px; }
 .gv2 .gv-prev, .gv2 .gv-next { display:none; }
 .gv2 .gv-pic img { max-height:calc(100dvh - 200px); border-radius:10px; }
 .gv2 .gv-tap { width:50%; }
 .gv2 figcaption { font-size:13px; padding:0 8px; }
 .gv2 .gv-thumbs { justify-content:flex-start; gap:6px; }
 .gv2 .gv-thumbs button { width:50px; height:50px; border-radius:8px; }
 .gv2 .gv-btn { width:42px; height:42px; }
}
.gv2 .gv-pic:focus { outline:none; }

/* Logoband und Galerie: Bruchteil-Pixel per transform, damit das langsame Wandern nicht ruckelt */
.car-track.smooth > * { transform:translate3d(calc(var(--sub, 0) * -1px),0,0); will-change:transform; backface-visibility:hidden; }

/* Abstände vereinheitlicht (8er-Raster): zwischen Abschnitten etwa 96px am Computer, 56px am Handy;
   innen in der Projekte-Karte 72px / 48px. Showreel braucht keine volle Bildschirmhöhe mehr,
   weil Bio, Showreel und Hörproben denselben Hintergrund haben. */
section#reel { min-height:0; padding-block:48px 40px; scroll-margin-top:96px; }
section.demos { padding:48px 0 96px; }
#kunden.refs { padding-block:72px 80px; }
@media(max-width:900px) {
 section#reel { padding-block:24px 24px; scroll-margin-top:88px; }
 section.demos { padding:32px 0 56px; }
 #kunden.refs { padding-block:48px 56px; }
}
@media(max-height:500px) { section#reel { padding-block:16px; scroll-margin-top:72px; } }

/* Ton-Knopf im Showreel: Symbol gleich, weiße Fläche deutlich kleiner */
.video .play { width:60px; height:60px; box-shadow:0 6px 18px rgba(0,0,0,.18); }
.video .play::before { inset:-7px; border-width:1.5px; }
@media(max-width:900px) { .video .play { width:48px; height:48px; } .video .play::before { inset:-6px; } }

/* Altes Salbeigrün aus früheren Entwürfen überall durch Annies Koralle ersetzen (z. B. Handy-Menü, aktiver Link) */
:root, html.f-sol { --sage:#E2725B; --sage-dark:#C4553F; --sage-soft:#FCE3CF; }
.mlinks a.on { color:var(--accent-deep,#963E2D) !important; }
/* Die Kopfzeile blendet sich beim Runterscrollen aus: Showreel-Sprung landet mit ruhigem Rand oben */
section#reel { scroll-margin-top:24px; }
@media(max-width:900px) { section#reel { scroll-margin-top:16px; } }
@media(max-height:500px) { section#reel { scroll-margin-top:0; } }
/* Schatten des Showreels nicht von der Hörproben-Fläche abschneiden lassen (gleiche Farbe wie die Seite) */
section.demos { background:transparent; }

/* Nach UI/UX-Regeln (ui-ux-pro-max): Abstände im 8-px-Raster, Abschnitte 96px Computer / 56px Handy;
   Tippflächen mindestens 44 x 44 px mit mindestens 8 px Abstand. */
section.gal#galerie { padding-block:96px; }
section.contact#kontakt { padding-block:96px; }
@media(max-width:900px) {
 section.gal#galerie { padding-block:56px; }
 section.contact#kontakt { padding-block:56px; }
}
.contact .chips button { min-height:44px; }
.contact .chips { gap:8px; }
#formmore { min-height:44px; }
#contact-form [type="submit"] { min-height:48px; }
button.burger { min-width:44px; min-height:44px; }
footer a { display:inline-flex; align-items:center; min-height:44px; }
/* Bio-Punkte: kleiner Punkt, aber 32 px große Tippfläche */
.bio.bio-pin .bio-steps { gap:0 !important; }
.bio.bio-pin .bio-steps button { position:relative; width:32px !important; height:32px !important; background:transparent !important; border-radius:0; display:grid; place-items:center; }
.bio.bio-pin .bio-steps button::before { content:""; width:8px; height:8px; border-radius:99px; background:rgba(47,49,54,.22); transition:height .35s, background .35s; }
.bio.bio-pin .bio-steps button.on::before { height:26px; background:var(--accent-deep); }
@media(max-width:900px) {
 .bio.bio-pin .bio-steps { right:0; }
 .bio.bio-pin .bio-steps button { width:26px !important; height:28px !important; }
 .bio.bio-pin .bio-steps button::before { width:6px; height:6px; }
 .bio.bio-pin .bio-steps button.on::before { height:20px; }
}
.mfoot { gap:4px !important; }
.mfoot > a:not(.btn) { display:flex; align-items:center; min-height:44px; }

/* ===== Kopfzeile aufgeräumt + Handy-Menü als Karte (Variante A) ===== */
/* Sprachwechsel als kompakte Pille mit Kürzel und Flagge (statt ausgeschriebenem Sprachnamen) */
.nav a.lang, html[lang="es"] .nav a.lang { min-width:44px !important; height:44px; padding:0 !important; display:inline-flex; align-items:center; justify-content:center; }
.nav a.lang > [data-i18n="nav.language"], html[lang="es"] .nav a.lang > [data-i18n="nav.language"] {
 font-size:0 !important; gap:6px !important; height:34px; padding:0 11px !important; border-radius:99px;
 box-shadow:inset 0 0 0 1px rgba(47,49,54,.16); transition:box-shadow .2s, background-color .2s; }
.nav a.lang > [data-i18n="nav.language"]::before { content:"ES"; font-size:12px; font-weight:600; letter-spacing:.12em; color:#2F3136; -webkit-text-fill-color:#2F3136; }
html[lang="es"] .nav a.lang > [data-i18n="nav.language"]::before { content:"DE"; }
.nav a.lang > [data-i18n="nav.language"]::after { flex:0 0 16px !important; width:16px !important; height:11px !important; }
@media (hover:hover) { .nav a.lang:hover > [data-i18n="nav.language"] { box-shadow:inset 0 0 0 1px var(--accent-deep,#963E2D); background:#fff; } }
.nav a.lang:hover { border-color:transparent; }

@media(max-width:900px) {
 /* Name einzeilig, Menü-Knopf als heller Kreis wie die übrigen Knöpfe */
 .nav .brand-name { font-size:18px !important; max-width:none !important; white-space:nowrap !important; }
 .nav .brand-name > span { display:inline !important; }
 .nav .brand-name > span::before { content:" " !important; }
 .nav .right { gap:8px !important; }
 .burger { width:44px !important; height:44px !important; border-radius:50% !important; background:#fff !important;
  box-shadow:0 4px 14px rgba(47,49,54,.12), inset 0 0 0 1px rgba(47,49,54,.08); gap:5px !important; }
 .burger span { background:#2F3136 !important; width:17px !important; }
 .menu-open .burger span:first-child { transform:translateY(3.5px) rotate(45deg) !important; }
 .menu-open .burger span:last-child { transform:translateY(-3.5px) rotate(-45deg) !important; }

 /* Menü-Karte */
 .msheet { position:fixed !important; inset:auto !important; top:88px !important; left:10px !important; right:10px !important;
  max-height:calc(100svh - 104px); overflow-y:auto; padding:8px 8px 12px !important; border-radius:22px;
  background:#FFF8F0 !important; box-shadow:0 24px 60px rgba(47,49,54,.24), inset 0 0 0 1px rgba(47,49,54,.06);
  display:flex !important; flex-direction:column; justify-content:flex-start !important; gap:8px; z-index:46;
  opacity:0; visibility:hidden; transform:translateY(-10px) scale(.98) !important; transform-origin:50% 0;
  transition:opacity .2s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s .28s !important; }
 .menu-open .msheet { opacity:1; visibility:visible; transform:none !important; transition:opacity .2s ease, transform .28s cubic-bezier(.2,.8,.2,1) !important; }
 .mscrim { display:block; position:fixed; inset:0; z-index:44; background:rgba(47,49,54,.28); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .25s, visibility 0s .25s; }
 .menu-open .mscrim { opacity:1; visibility:visible; transition:opacity .25s; }
 .mlinks { display:grid !important; gap:2px !important; }
 .mlinks a { display:flex !important; align-items:center; gap:12px; min-height:48px; padding:0 14px; border-radius:14px;
  font-size:19px !important; font-weight:500 !important; letter-spacing:-.01em !important; line-height:1.2 !important; color:#2F3136; text-transform:none; border:0 !important; }
 .mlinks a::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:rgba(47,49,54,.14); transition:background-color .2s, transform .2s; }
 .mlinks a.on { background:#fff; color:var(--accent-deep,#963E2D) !important; box-shadow:0 2px 10px rgba(47,49,54,.06); }
 .mlinks a.on::before { background:var(--accent,#E2725B); transform:scale(1.25); }
 .mlinks a:active { background:rgba(226,114,91,.10); }
 .mfoot { display:grid !important; gap:10px !important; padding:12px 6px 0 !important; border-top:1px solid rgba(47,49,54,.08); font-size:14px; }
 .mfoot .btn { min-height:48px; padding:12px 16px !important; font-size:13px !important; }
 .mrow { display:flex; justify-content:center; gap:10px; }
 .mico { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--accent-deep,#963E2D);
  box-shadow:0 2px 8px rgba(47,49,54,.08), inset 0 0 0 1px rgba(47,49,54,.08); }
 .mico:active { transform:scale(.94); }
}
@media(max-width:374px) {
 .nav .brand-name { font-size:16px !important; white-space:normal !important; max-width:150px !important; }
 .nav .brand-name > span { display:block !important; }
 .nav .brand-name > span::before { content:none !important; }
}
@media(prefers-reduced-motion:reduce) { .msheet, .mscrim { transition:none !important; } }

/* Hervorgehobenes Wort in Überschriften: kursiv in Koralle */
h2 em { font-style:italic; font-weight:inherit; color:var(--accent,#E2725B); letter-spacing:-.01em; }
.bio .bio-heading em { color:var(--accent,#E2725B); }

/* Sanftes Hereingleiten (einblenden.js) */
.rv { opacity:0; transform:translate3d(0,28px,0); transition:opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1); transition-delay:var(--rv-d,0ms); }
.rv.rv-in { opacity:1; transform:none; }
@media(max-width:900px) { .rv { transform:translate3d(0,22px,0); } }

/* Hörproben: Einblenden wie der Rest der Seite. Knopf springt auf, Titel und Zeit gleiten herein,
   Waveform wächst von links nach rechts (voiceplayer.js), Spuren erscheinen nacheinander. */
.vplayer.vp-ready .vp-play { opacity:0; transform:scale(.6); transition:opacity .5s ease, transform .7s cubic-bezier(.34,1.56,.64,1); transition-delay:.15s; }
.vplayer.vp-ready .vp-meta, .vplayer.vp-ready .vp-side { opacity:0; transform:translate3d(0,14px,0); transition:opacity .6s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.vplayer.vp-ready .vp-meta { transition-delay:.25s; } .vplayer.vp-ready .vp-side { transition-delay:.35s; }
.vplayer.vp-ready .demo-lang { opacity:0; transition:opacity .6s ease .45s; }
.vplayer.vp-ready .vp-list li { opacity:0; transform:translate3d(0,12px,0); transition:opacity .5s ease, transform .7s cubic-bezier(.16,1,.3,1);
 transition-delay:calc(var(--vp-i,0) * 70ms + 500ms); }
.vplayer.vp-in .vp-play { opacity:1; transform:none; }
.vplayer.vp-in .vp-meta, .vplayer.vp-in .vp-side, .vplayer.vp-in .vp-list li { opacity:1; transform:none; }
.vplayer.vp-in .demo-lang { opacity:1; }
/* Nach dem Einblenden normale Hover-Reaktion ohne Verzögerung */
.vplayer.vp-in.vp-done .vp-list li, .vplayer.vp-in.vp-done .vp-play { transition-delay:0s; }

/* Bio am Handy ruhig halten: die stehende Fläche bekommt eine eigene Ebene, damit iOS/Android sie beim
   Scrollen nicht neu zeichnet (Zittern). Seitliches Abschneiden direkt an der Fläche statt am Abschnitt. */
.bio.bio-pin { overflow-x:visible; }
.bio.bio-pin .wrap { overflow:clip; transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); backface-visibility:hidden; -webkit-backface-visibility:hidden; contain:layout paint; }
.bio.bio-pin .bio-row > .bio-photo img { transform:translateZ(0); backface-visibility:hidden; }

/* Startbild-Text farbig: Name im Verlauf Tiefkoralle → Koralle, Rollen in Koralle */
.hero.hero-scroll h1.name {
 background:linear-gradient(115deg,#963E2D 0%,#C4553F 45%,#E2725B 100%);
 -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
 padding-bottom:.06em; /* Unterlängen nicht abschneiden */
}
.hero.hero-scroll .hero-roles { color:#C4553F; font-weight:600; }
.hero.hero-scroll .hero-sub { color:#4A3F3B; }

/* Handy: Annie samt Stuhl mittig im Startbild (Wunsch 10.11.); Zoom beim Scrollen bleibt auf ihr Gesicht gerichtet */
@media(max-width:900px) {
 /* Ganze Figur sichtbar (Stiefel bis Stuhl): Bild etwas kleiner als bildschirmfüllend, unten bündig,
    oberer Rand weich in den Studio-Hintergrund ausgeblendet. */
 .hero.hero-scroll .portrait { background:#E2E2E2 !important; }
 .hero.hero-scroll .portrait .photo {
  inset:auto !important; top:auto !important; right:auto !important; bottom:0 !important; left:-17.5vw !important;
  width:132vw !important; height:auto !important; max-width:none !important; aspect-ratio:4480/6212 !important;
  object-fit:cover !important; object-position:50% 50% !important; padding:0 !important; transform-origin:69% 32%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%); mask-image:linear-gradient(180deg,transparent 0,#000 12%);
 }
}

/* Alle Abschnittsüberschriften links: „Hörproben“ bündig mit dem Player */
.demos h2 { text-align:left; max-width:1320px; margin-left:auto; margin-right:auto; }

/* Showreel: der Lautsprecher in der Mitte reicht, Hinweis „Mit Ton“ unten rechts überall ausblenden */
#reel .video .bar [data-i18n="reel.sound"] { display:none; }

/* ===== Handy-Menü Variante B (Wunsch 11.11.): Vollbild in Koralle, große helle Links, unten nur „Anfragen“ =====
   Ausrichtung über --m-align steuerbar (center | left | right). */
@media(max-width:900px) {
 :root { --m-align:center; }
 .msheet { inset:0 !important; top:0 !important; left:0 !important; right:0 !important; max-height:none !important; height:100% !important;
  border-radius:0 !important; padding:96px 28px max(28px, env(safe-area-inset-bottom)) !important; overflow-y:auto;
  background:linear-gradient(160deg,#E2725B 0%,#C4553F 55%,#963E2D 100%) !important; box-shadow:none !important;
  display:flex !important; flex-direction:column; justify-content:space-between !important; gap:24px;
  transform:none !important; transition:opacity .28s ease, visibility 0s .28s !important; }
 .menu-open .msheet { transition:opacity .28s ease !important; }
 .mscrim { display:none !important; }
 .mlinks { display:flex !important; flex-direction:column; align-items:var(--m-align); gap:2px !important; margin-top:auto; margin-bottom:auto; }
 .mlinks a { display:inline-flex !important; align-items:center; gap:10px; min-height:52px; padding:0 4px !important; border-radius:0 !important; background:none !important; box-shadow:none !important;
  font-size:clamp(30px, 9vw, 40px) !important; font-weight:600 !important; letter-spacing:-.025em !important; line-height:1.15 !important;
  color:rgba(255,255,255,.74) !important; text-align:var(--m-align);
  opacity:0; transform:translate3d(0,16px,0); transition:opacity .45s ease, transform .6s cubic-bezier(.16,1,.3,1), color .2s; }
 .mlinks a::before { display:none !important; }
 .mlinks a.on { color:#fff !important; font-style:italic; font-weight:500 !important; }
 .mlinks a.on::after { content:""; flex:none; width:9px; height:9px; border-radius:50%; background:#F2B33D; }
 .mlinks a:active { color:#fff !important; }
 .menu-open .mlinks a { opacity:1; transform:none; }
 .menu-open .mlinks a:nth-child(1) { transition-delay:.04s; } .menu-open .mlinks a:nth-child(2) { transition-delay:.08s; }
 .menu-open .mlinks a:nth-child(3) { transition-delay:.12s; } .menu-open .mlinks a:nth-child(4) { transition-delay:.16s; }
 .menu-open .mlinks a:nth-child(5) { transition-delay:.20s; } .menu-open .mlinks a:nth-child(6) { transition-delay:.24s; }
 .menu-open .mlinks a:nth-child(7) { transition-delay:.28s; }
 .mfoot { border-top:0 !important; padding:0 !important; }
 .mrow { display:none !important; }
 .mfoot .btn { background:#fff !important; color:#963E2D !important; box-shadow:0 10px 26px rgba(80,20,10,.25) !important; min-height:52px; font-size:13px !important; }
 /* Kopfzeile über dem offenen Menü: hell auf Koralle */
 .menu-open header .nav { background:transparent !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
 .menu-open header::after { opacity:0 !important; }
 .menu-open .nav .brand-name { color:#fff !important; }
 .menu-open .nav a.lang > [data-i18n="nav.language"] { box-shadow:inset 0 0 0 1px rgba(255,255,255,.55) !important; }
 .menu-open .nav a.lang > [data-i18n="nav.language"]::before { color:#fff !important; -webkit-text-fill-color:#fff !important; }
 .menu-open .burger { background:rgba(255,255,255,.18) !important; box-shadow:none !important; }
 .menu-open .burger span { background:#fff !important; }
}
@media(max-width:900px) and (prefers-reduced-motion:reduce) { .mlinks a { opacity:1 !important; transform:none !important; transition:none !important; } }
@media(max-width:900px) {
 .menu-open header { background:transparent !important; border-bottom-color:transparent !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
 /* Punkt hängt rechts außen, damit das Wort selbst exakt auf der Achse steht */
 .mlinks a.on { position:relative; }
 .mlinks a.on::after { position:absolute; left:100%; top:50%; margin:-4px 0 0 8px; }
}
@media(max-width:900px) and (max-height:680px) {
 .msheet { padding-top:84px !important; gap:16px; }
 .mlinks a { font-size:28px !important; min-height:44px; }
}

/* Bio scroll-gekoppelt (bio-scroll.js setzt --o und --t je Bild/Text); keine zeitbasierten Übergänge mehr */
section.bio.bio-pin.bio-scrub .wrap .bio-row > .bio-photo,
section.bio.bio-pin.bio-scrub .wrap .bio-row > .bio-text,
section.bio.bio-pin.bio-scrub .wrap .bio-row > .bio-ending {
 opacity:var(--o,0) !important; transform:var(--t,none) !important; transition:none !important; transition-delay:0s !important; will-change:transform,opacity;
}

/* Menü-Knopf im Stil der Sprach-Pille: gleiche Höhe (34 px), feine Linie, Tippfläche bleibt 44 px */
@media(max-width:900px) {
 .burger { position:relative; width:46px !important; height:44px !important; background:transparent !important; box-shadow:none !important; border-radius:99px !important; gap:5px !important; }
 .burger::before { content:""; position:absolute; left:2px; right:2px; top:5px; bottom:5px; border-radius:99px; box-shadow:inset 0 0 0 1px rgba(47,49,54,.16); transition:box-shadow .2s, background-color .2s; }
 .burger span { position:relative; width:16px !important; height:1.6px !important; background:#2F3136 !important; }
 .menu-open .burger { background:transparent !important; }
 .menu-open .burger::before { box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); }
 .menu-open .burger span { background:#fff !important; }
 .menu-open .burger span:first-child { transform:translateY(3.3px) rotate(45deg) !important; }
 .menu-open .burger span:last-child { transform:translateY(-3.3px) rotate(-45deg) !important; }
 .burger:active::before { background:rgba(47,49,54,.06); }
}

/* Fußzeile am Handy: mittig, Links oben, Copyright klein darunter, ohne den großen Leerraum unten */
@media(max-width:900px) {
 footer { padding:28px 0 calc(28px + env(safe-area-inset-bottom, 0px)) !important; }
 footer .wrap { flex-direction:column-reverse !important; align-items:center !important; justify-content:center !important; gap:4px !important; text-align:center; }
 footer nav { justify-content:center; gap:20px !important; }
 footer nav a { font-size:14px; color:#2F3136; }
 footer .wrap > span { font-size:12px; color:#8A8C92; }
}

/* Bio wieder zeitbasiert (11.11.). Am Handy erscheint der Text praktisch zusammen mit dem Bild,
   damit man auch beim schnellen Scrollen sieht, dass zu jedem Bild ein Text gehört. */
@media(max-width:900px) {
 .bio.bio-pin .bio-row.is-on > .bio-text, .bio.bio-pin .bio-row.is-on > .bio-ending { transition-delay:.12s !important; transition-duration:.55s, .4s !important; }
 .bio.bio-pin .bio-row > .bio-photo { transition-duration:.7s, .4s !important; }
}

/* Handy: Name links neben Annie auf der hellen Fläche, Rollen/Text/Knöpfe bleiben unten */
@media(max-width:900px) {
 .hero.hero-scroll h1.name { position:absolute; left:20px; top:21svh; margin:0 !important; max-width:56vw;
  font-size:clamp(34px, 10.5vw, 46px) !important; line-height:1.02 !important; z-index:2; }
}
@media(max-width:900px) { .hero.hero-scroll .hero-text { position:static !important; } }
@media(max-width:900px) {
 /* Name zweizeilig („Annie Müller“ / „Martínez“), links neben dem Kopf, oberhalb der Knie */
 .hero.hero-scroll h1.name { top:33svh; max-width:74vw; font-size:clamp(30px, 8.8vw, 38px) !important; line-height:1.05 !important; }
}

/* Showreel-Tonknopf: eigenes Design (Milchglas über dem Video), Symbol im gleichen Verhältnis wie das Play-Dreieck
   der Hörproben (≈ ein Drittel des Knopfs). Die Schallwellen pulsieren nacheinander und zeigen „hier ist Ton“. */
#reel .video .play, #reelplay {
 width:64px !important; height:64px !important; color:#fff !important;
 background:rgba(255,255,255,.16) !important; -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3);
 box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6), 0 10px 26px rgba(0,0,0,.22) !important;
 transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
#reelplay .i-sound { width:22px; height:22px; overflow:visible; }
#reelplay .i-sound .spk { fill:#fff; }
#reelplay .i-sound .w1, #reelplay .i-sound .w2 { animation:snd-wave 1.8s ease-in-out infinite; }
#reelplay .i-sound .w2 { animation-delay:.25s; }
@keyframes snd-wave { 0%, 100% { opacity:.25; } 40% { opacity:1; } }
#reel .video .play::before { inset:-7px !important; border:1.5px solid rgba(226,114,91,.7) !important; }
@media (hover:hover) { #reel .video .play:hover { transform:scale(1.06); background:rgba(226,114,91,.85) !important; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7), 0 14px 30px rgba(150,62,45,.45) !important; } }
@media(max-width:900px) { #reel .video .play, #reelplay { width:54px !important; height:54px !important; } #reelplay .i-sound { width:19px; height:19px; } }
@media(prefers-reduced-motion:reduce) { #reelplay .i-sound .w1, #reelplay .i-sound .w2 { animation:none; opacity:1; } }
/* Tonknopf ohne Rand: Milchglas läuft zum Rand hin weich aus */
#reel .video .play, #reelplay {
 box-shadow:none !important; background:radial-gradient(circle, rgba(255,255,255,.22) 0%, rgba(255,255,255,.14) 45%, rgba(255,255,255,0) 70%) !important;
 -webkit-mask-image:radial-gradient(circle, #000 0%, #000 42%, transparent 70%); mask-image:radial-gradient(circle, #000 0%, #000 42%, transparent 70%);
}
#reel .video .play::before { display:none !important; }
#reelplay .i-sound { filter:drop-shadow(0 1px 6px rgba(0,0,0,.35)); }
@media (hover:hover) { #reel .video .play:hover { box-shadow:none !important; background:radial-gradient(circle, rgba(226,114,91,.9) 0%, rgba(226,114,91,.65) 45%, rgba(226,114,91,0) 70%) !important; } }
/* Tonknopf wächst am Computer mit der Fenstergröße (Video ist ebenfalls fensterabhängig), Symbol bleibt ≈ 1/3 */
@media(min-width:901px) {
 #reel .video .play, #reelplay { width:clamp(72px, 7vw, 180px) !important; height:clamp(72px, 7vw, 180px) !important; }
 #reelplay .i-sound { width:clamp(24px, 2.35vw, 60px); height:clamp(24px, 2.35vw, 60px); }
}
@media(max-width:900px) { #reelplay .i-sound { width:22px; height:22px; } }

/* Bio am Computer: Text kommt schneller nach dem Gleiten (zusammen mit Wisch-Stopp in bio-scroll.js) */
@media(min-width:901px) {
 .bio.bio-pin .bio-row.is-on:not(.is-center) > .bio-text, .bio.bio-pin .bio-row.is-on:not(.is-center) > .bio-ending { transition-delay:.12s !important; }
 .bio.bio-pin .bio-row.is-on > .bio-photo { transition-duration:.7s, .4s !important; }
}

/* Showreel-Tonknopf im Stil der Galerie-Knöpfe: weißer Kreis, dunkler Lautsprecher, Schallwellen in Koralle */
#reel .video .play, #reelplay {
 background:#fff !important; -webkit-mask-image:none !important; mask-image:none !important;
 -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
 box-shadow:0 8px 24px rgba(47,49,54,.22), inset 0 0 0 1px rgba(47,49,54,.06) !important; color:#2F3136 !important;
}
#reelplay .i-sound { filter:none; }
#reelplay .i-sound .spk { fill:#2F3136; stroke:#2F3136; }
#reelplay .i-sound .w1, #reelplay .i-sound .w2 { stroke:#E2725B; }
@media (hover:hover) {
 #reel .video .play:hover { background:#E2725B !important; box-shadow:0 12px 28px rgba(226,114,91,.45) !important; }
 #reel .video .play:hover .i-sound .spk { fill:#fff; stroke:#fff; }
 #reel .video .play:hover .i-sound .w1, #reel .video .play:hover .i-sound .w2 { stroke:#fff; }
}
/* Größen: Computer weiterhin mit dem Video wachsend, aber zurückhaltender wie die Galerie-Knöpfe */
@media(min-width:901px) {
 #reel .video .play, #reelplay { width:clamp(64px, 6vw, 150px) !important; height:clamp(64px, 6vw, 150px) !important; }
 #reelplay .i-sound { width:clamp(24px, 2.1vw, 52px); height:clamp(24px, 2.1vw, 52px); }
}
@media(max-width:900px) { #reel .video .play, #reelplay { width:50px !important; height:50px !important; } #reelplay .i-sound { width:21px; height:21px; } }
/* Tonknopf wächst mit dem Video selbst (das Video wird beim Scrollen größer): Größe in Prozent der Videobreite */
#reel .video { container-type:inline-size; }
@media(min-width:901px) {
 #reel .video .play, #reelplay { width:clamp(48px, 8.5cqw, 150px) !important; height:clamp(48px, 8.5cqw, 150px) !important; }
 #reelplay .i-sound { width:clamp(18px, 3cqw, 52px); height:clamp(18px, 3cqw, 52px); }
}