/* Lato liegt selbst auf dem Server, keine Verbindung zu Google Fonts */
@font-face { font-family: "Lato"; font-style: italic; font-weight: 100; font-display: swap; src: url(fonts/lato-100i.woff2) format("woff2"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 300; font-display: swap; src: url(fonts/lato-300i.woff2) format("woff2"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 700; font-display: swap; src: url(fonts/lato-700i.woff2) format("woff2"); }

/* Layout: Handy zuerst, Hochformat. Abschnitte liegen wie gestapelte Bögen übereinander (abgerundete Oberkante, überlappend),
   alles in Bewegung: Laufbänder mit Beispielen, wachsendes Showreel, gestapelte Leistungs-Karten, Text der sich beim Scrollen füllt. */
:root {
  --rot: #C10414;
  --offwhite: #F4F3F1;
  --creme: #F4DDBD;
  --karamell: #A6623D;
  --braun: #592814;
  --braun-tief: #3d1b0d;
  --linie: rgba(89, 40, 20, .16);
  --bold: 700;
  --thin: 300;
  --font: "Lato", "Helvetica Neue", Arial, sans-serif;
  --r: 28px;
  --gut: clamp(16px, 5vw, 48px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { background: var(--braun-tief); color: var(--braun); font-family: var(--font); font-style: italic; font-weight: var(--thin); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
b, strong, h1, h2, h3, .b { font-weight: var(--bold); }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, dl, dd { margin: 0; padding: 0; }
h1, h2, h3 { text-wrap: balance; line-height: 1; letter-spacing: -0.02em; }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; border-radius: 4px; }
.gut { padding-inline: var(--gut); }
.eyebrow { font-weight: var(--bold); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }

/* Scroll-Fortschritt */

/* Header */
/* Kopfleiste: oben schweben nur Logo und Knopf. Beim Scrollen wächst aus der Mitte eine schwebende Kapsel auf,
   darin rollt der Name des aktuellen Abschnitts mit, und ein roter Ring um den Knopf zeigt, wie weit man gescrollt hat. */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 0; pointer-events: none; }
.top-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-inline: auto; max-width: 100%; padding: 6px 6px 6px calc(var(--gut) - 10px); pointer-events: auto; isolation: isolate; transition: max-width .8s cubic-bezier(.7,0,.2,1), padding .6s cubic-bezier(.2,.7,.2,1), filter .6s; }
.top-in::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: var(--offwhite); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); clip-path: inset(0 50% 0 50% round 999px); transition: clip-path .8s cubic-bezier(.7,0,.2,1); }
.top.leiste .top-in { padding-left: 16px; filter: drop-shadow(0 8px 22px rgba(61,27,13,.16)); }
.top.leiste .top-in::before { clip-path: inset(0 0 0 0 round 999px); }
.offen .top-in::before { clip-path: inset(0 50% 0 50% round 999px); }
.offen .top-in { filter: none; }
.logo { display: block; width: 64px; transition: width .6s cubic-bezier(.2,.7,.2,1), transform .4s; }
.logo:hover { transform: rotate(-6deg) scale(1.05); }
.top.leiste .logo { width: 46px; }
.logo img { width: 100%; height: auto; display: block; }
.top .abschnitt.roll { position: absolute; }
.abschnitt { font-weight: var(--bold); font-size: .95rem; color: var(--braun); height: 1.35em; line-height: 1.35; width: var(--w, 0); opacity: 0; transition: opacity .4s, width .6s cubic-bezier(.65,0,.35,1); position: absolute; left: 50%; transform: translateX(-50%); }
.top.leiste .abschnitt { opacity: 1; transition-delay: .25s, 0s; }
.offen .abschnitt { opacity: 0; transition-delay: 0s; }
.menu-btn { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border: 0; cursor: pointer; border-radius: 50%; background: var(--offwhite); color: var(--braun); box-shadow: 0 4px 20px rgba(61,27,13,.14); transition: background .35s, color .35s, box-shadow .35s; }
.top.leiste .menu-btn { box-shadow: none; background: var(--braun); color: var(--offwhite); }
.offen .menu-btn { background: var(--offwhite); color: var(--rot); }
.menu-btn .ring { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); transform: rotate(-90deg); pointer-events: none; }
.menu-btn .ring circle { fill: none; stroke: var(--rot); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .15s linear; }
.offen .menu-btn .ring { opacity: 0; }
.menu-btn i { position: relative; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: background .2s, width .3s; }
.menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s cubic-bezier(.2,.7,.2,1), width .3s cubic-bezier(.2,.7,.2,1); }
.menu-btn i::before { width: 13px; transform: translateY(-6px); }
.menu-btn i::after { width: 16px; transform: translateY(6px); }
.menu-btn:hover i::before, .menu-btn:hover i::after { width: 20px; }
.offen .menu-btn i { background: transparent; }
.offen .menu-btn i::before { width: 20px; transform: rotate(45deg); }
.offen .menu-btn i::after { width: 20px; transform: rotate(-45deg); }
@media (min-width: 900px) { .top.leiste .top-in { max-width: 640px; } }

/* Vollbild-Menü */
.overlay { position: fixed; inset: 0; z-index: 40; background: var(--rot); color: var(--offwhite); display: grid; align-content: center; padding: 100px var(--gut) 40px; clip-path: circle(0% at calc(100% - 40px) 44px); transition: clip-path .7s cubic-bezier(.7,0,.2,1) .18s, visibility 0s linear .9s; visibility: hidden; }
.offen .overlay { clip-path: circle(150% at calc(100% - 40px) 44px); visibility: visible; transition: clip-path .7s cubic-bezier(.7,0,.2,1), visibility 0s; }
/* Schließen: Links rollen nach oben raus, dann zieht sich der rote Kreis in den Knopf zurück */
.zu .overlay a { transform: translateY(-110%); transition: transform .35s cubic-bezier(.6,0,.85,.35); }
.zu .overlay li:nth-child(2) a { transition-delay: .03s; }
.zu .overlay li:nth-child(3) a { transition-delay: .06s; }
.zu .overlay li:nth-child(4) a { transition-delay: .09s; }
.zu .overlay li:nth-child(5) a { transition-delay: .12s; }
.overlay .kontakt-mini { transition: opacity .3s; }
.overlay:not(:is(.offen *)) .kontakt-mini { opacity: 0; }
.overlay ul { list-style: none; display: grid; gap: 4px; }
.overlay li { overflow: hidden; }
.overlay a { display: inline-block; font-weight: var(--bold); font-size: clamp(2.6rem, 12vw, 6rem); line-height: 1.08; transform: translateY(110%); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.offen .overlay a { transform: none; }
.offen .overlay li:nth-child(2) a { transition-delay: .06s; }
.offen .overlay li:nth-child(3) a { transition-delay: .12s; }
.offen .overlay li:nth-child(4) a { transition-delay: .18s; }
.offen .overlay li:nth-child(5) a { transition-delay: .24s; }
.overlay .kontakt-mini { margin-top: 40px; display: grid; gap: 4px; font-size: 1rem; }

/* Sektionen als gestapelte Bögen */
.bogen { position: relative; border-radius: var(--r) var(--r) 0 0; margin-top: calc(var(--r) * -1); }

/* Hero mit laufenden Beispielen */
.hero { background: var(--offwhite); border-radius: 0; margin-top: 0; padding-top: calc(86px + env(safe-area-inset-top, 0px)); min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; padding-bottom: calc(var(--r) + 8px); }
.hero-text { display: grid; gap: 14px; padding-bottom: 22px; }
/* Hero: nur die große rote Pille, die Buchstaben rollen einzeln */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pille-h1 { display: block; }
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.roll .wort { position: absolute; left: 0; top: 0; display: flex; white-space: nowrap; }
.roll .b { display: inline-block; transform: translateY(110%) rotate(8deg); transform-origin: left bottom; transition: transform .7s cubic-bezier(.2,.9,.25,1.15) calc(var(--i) * 32ms + .18s); }
.roll .wort.an .b { transform: none; }
.roll .wort.raus .b { transform: translateY(-110%) rotate(-8deg); transition: transform .45s cubic-bezier(.6,0,.85,.35) calc(var(--i) * 22ms); }
.roll .wort.sofort .b { transition: none; }
.fenster { font-size: clamp(2.4rem, 11.5vw, 5.6rem); height: 1.42em; line-height: 1.42; width: calc(var(--w, 5em) + 1em); background: var(--rot); color: var(--offwhite); font-weight: var(--bold); border-radius: 999px; transition: width .75s cubic-bezier(.65,0,.35,1) .1s; box-shadow: 0 .12em 0 var(--braun); }
.fenster .wort { left: .5em; }
.unterzeile { font-size: clamp(1.15rem, 4.6vw, 1.7rem); margin-top: 6px; }
.unterzeile b { color: var(--rot); }

.laufband-wrap { flex: 1; display: grid; gap: 10px; align-content: center; min-height: 52svh; }
.laufband { display: flex; gap: 10px; width: max-content; animation: lauf 46s linear infinite; }
.laufband.rueck { animation-direction: reverse; animation-duration: 60s; }
.laufband-wrap:hover .laufband { animation-play-state: paused; }
.kachel { transition: transform .4s cubic-bezier(.2,.7,.2,1); background: var(--braun); }
.kachel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.kachel:hover { transform: scale(.97); }
.kachel .pfeil { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background: var(--offwhite); color: var(--rot); display: grid; place-items: center; font-weight: var(--bold); font-size: .9rem; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s; }
.kachel:hover .pfeil { opacity: 1; transform: none; }
.alle-link { justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-weight: var(--bold); border-bottom: 2px solid var(--rot); padding-bottom: 2px; color: var(--braun); }
.alle-link span { transition: transform .3s; }
.alle-link:hover span { transform: translateX(6px); }
@keyframes lauf { to { transform: translateX(-50%); } }
.kachel { position: relative; width: clamp(150px, 56vw, 260px); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; color: var(--offwhite); flex: none; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; isolation: isolate; }
.kachel .t { font-weight: var(--bold); font-size: .95rem; line-height: 1.15; }
.kachel .k { font-size: .75rem; opacity: .85; }
.kachel .rec { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 6px; font-weight: var(--bold); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.kachel .rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 2px var(--offwhite); animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
/* "Video"-Platzhalter: wandernde Farbflächen */
.film { position: absolute; inset: -30%; z-index: -1; background-size: 100% 100%; animation: drift 9s ease-in-out infinite alternate; }
.film.a { background: radial-gradient(40% 35% at 30% 30%, var(--rot), transparent 70%), radial-gradient(50% 40% at 70% 70%, var(--karamell), transparent 70%), var(--braun); }
.film.b { background: radial-gradient(45% 35% at 65% 30%, var(--creme), transparent 70%), radial-gradient(45% 40% at 30% 75%, var(--karamell), transparent 70%), var(--braun); }
.film.c { background: radial-gradient(45% 40% at 40% 60%, var(--rot), transparent 70%), radial-gradient(40% 30% at 75% 25%, var(--creme), transparent 70%), var(--karamell); }
.film.d { background: radial-gradient(50% 40% at 60% 60%, var(--braun), transparent 70%), radial-gradient(40% 35% at 25% 25%, var(--rot), transparent 70%), var(--creme); }
.kachel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(30,12,5,.6), transparent 45%); }
@keyframes drift { 0% { transform: translate(0,0) rotate(0) scale(1); } 50% { transform: translate(8%,-6%) rotate(8deg) scale(1.1); } 100% { transform: translate(-6%,6%) rotate(-6deg) scale(1.05); } }

/* 3D-Karussell der Reels */
.karussell-wrap { --kb: min(46vw, 220px); --kh: calc(var(--kb) * 16 / 9); position: relative; flex: 1; display: grid; align-content: center; gap: 18px; padding-block: 8px 4px; margin-top: 28px; min-width: 0; }
/* Stimmungs-Hintergrund: das aktuelle Reel als riesiger, weicher Farbschleier, darüber feines Filmkorn */
.hero { position: relative; isolation: isolate; }
.hero > :not(.ambi) { position: relative; z-index: 1; }
.ambi { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ambi-bild { position: absolute; inset: -20%; background: center / cover no-repeat; filter: blur(70px) saturate(1.8); opacity: 0; transform: scale(1.15); transition: opacity 1.4s ease, transform 6s ease-out; }
.ambi-bild.an { opacity: .65; transform: scale(1); }
.ambi::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--offwhite) 0%, color-mix(in srgb, var(--offwhite) 70%, transparent) 30%, transparent 60%, color-mix(in srgb, var(--offwhite) 40%, transparent) 100%); }
.ambi-korn { position: absolute; inset: -10%; z-index: 1; opacity: .18; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .16 0 0 0 0 .08 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: korn 1s steps(4) infinite; }
@keyframes korn { 0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); } 50% { transform: translate(2%,-3%); } 75% { transform: translate(-2%,-2%); } 100% { transform: translate(0,0); } }
.karussell { z-index: 1; }
.karussell::after { content: ""; position: absolute; left: 50%; bottom: -22px; width: calc(var(--kb) * 1.1); height: 26px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(61,27,13,.32), transparent); z-index: -1; }
.karussell { position: relative; height: var(--kh); perspective: 1100px; perspective-origin: 50% 45%; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.karussell .kachel { position: absolute; left: 50%; top: 0; width: var(--kb); margin-left: calc(var(--kb) / -2); box-shadow: 0 18px 40px rgba(61,27,13,.28);
  transform: translateX(calc(var(--d, 0) * 62%)) translateZ(calc(var(--ad, 0) * -220px)) rotateY(calc(var(--d, 0) * -32deg));
  opacity: calc(1 - var(--ad, 0) * .28); z-index: calc(10 - var(--ad, 0));
  transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .6s, filter .6s; filter: brightness(calc(1 - var(--ad, 0) * .32)) saturate(calc(1 - var(--ad, 0) * .4)) blur(calc(var(--ad, 0) * 2.5px)); }
.karussell .kachel:hover { transform: translateX(calc(var(--d, 0) * 62%)) translateZ(calc(var(--ad, 0) * -220px + 20px)) rotateY(calc(var(--d, 0) * -32deg)); }
.karussell .kachel.mitte { cursor: pointer; }
.karussell .kachel:not(.mitte) .t, .karussell .kachel:not(.mitte) .k { opacity: 0; }
.karussell .kachel .t, .karussell .kachel .k { transition: opacity .4s; }
.karussell .kachel .pfeil { opacity: 0; }
.karussell .kachel.mitte .pfeil { opacity: 1; transform: none; }
.k-steuer { position: relative; z-index: 2; margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.k-pfeil { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--braun); background: transparent; color: var(--braun); font: inherit; font-weight: var(--bold); cursor: pointer; transition: background .25s, color .25s; }
.k-pfeil:hover { background: var(--braun); color: var(--offwhite); }
.punkte { display: flex; gap: 6px; }
.punkt { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: rgba(89,40,20,.2); cursor: pointer; overflow: hidden; position: relative; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.punkt.akt { width: 42px; }
.punkt i { position: absolute; inset: 0; background: var(--rot); transform: scaleX(0); transform-origin: left; }
.punkt.akt i { animation: fuellen 5.2s linear forwards; }
@keyframes fuellen { to { transform: scaleX(1); } }

/* Showreel: wächst beim Scrollen zum Vollbild */
.reel { background: var(--braun-tief); height: 220svh; border-radius: var(--r) var(--r) 0 0; }
.reel-stick { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.reel-frame { position: relative; width: 100vw; height: 100svh; transform: scale(var(--s, .62)); border-radius: calc(var(--rr, 1) * 40px); overflow: hidden; display: grid; place-items: center; isolation: isolate; color: var(--offwhite); will-change: transform; }
.reel-frame .film { animation-duration: 12s; }
.reel-frame .mitte { display: grid; justify-items: center; gap: 16px; text-align: center; padding: 24px; }
.play { width: 84px; height: 84px; border-radius: 50%; background: var(--offwhite); display: grid; place-items: center; box-shadow: 0 10px 40px rgba(0,0,0,.3); position: relative; }
.play::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--offwhite); opacity: .5; animation: puls 2s ease-out infinite; }
@keyframes puls { from { transform: scale(.9); opacity: .6; } to { transform: scale(1.5); opacity: 0; } }
.play svg { width: 28px; height: 28px; fill: var(--rot); margin-left: 5px; }
.reel-frame .titel { font-weight: var(--bold); font-size: clamp(2.4rem, 11vw, 7rem); line-height: .95; }
.reel-frame .titel span { font-weight: var(--thin); }
.reel-frame .hinweis { font-size: .85rem; opacity: .8; max-width: 30ch; }
.reel-frame .format { position: absolute; top: 18px; right: 18px; font-weight: var(--bold); font-size: .7rem; letter-spacing: .14em; border: 1px solid currentColor; border-radius: 999px; padding: 4px 10px; }
.reel-frame .format::after { content: "9:16"; }
@media (orientation: landscape) { .reel-frame .format::after { content: "16:9"; } }

/* Leistungen: gestapelte Karten */
.leistungen { background: var(--offwhite); padding-top: 90px; padding-bottom: 40px; z-index: 1; }
.sek-kopf { display: grid; gap: 10px; margin-bottom: 28px; }
.sek-kopf h2 { font-size: clamp(2.4rem, 10vw, 5.5rem); }
.sek-kopf h2 span { font-weight: var(--thin); }
.sek-kopf .eyebrow { color: var(--karamell); }
.stapel { display: grid; gap: 0; }
.karte { position: sticky; top: calc(84px + var(--i) * 14px); min-height: 72svh; border-radius: var(--r); padding: 24px 20px 28px; display: grid; align-content: space-between; gap: 24px; margin-bottom: 18px; overflow: hidden; isolation: isolate; box-shadow: 0 -8px 30px rgba(61,27,13,.12); transform-origin: top center; }
.karte:nth-child(1) { background: var(--creme); color: var(--braun); }
.karte:nth-child(2) { background: var(--karamell); color: var(--offwhite); }
.karte:nth-child(3) { background: var(--braun); color: var(--creme); }
.karte .nr { font-weight: var(--thin); font-size: 1rem; display: flex; justify-content: flex-end; }
.karte h3 { font-size: clamp(2.8rem, 13vw, 7rem); }
.karte p { font-size: 1.1rem; max-width: 34ch; }
.karte ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.karte li { font-weight: var(--bold); font-size: .82rem; padding: 5px 13px; border-radius: 999px; border: 1px solid currentColor; }
.karte .deko { position: absolute; right: -18%; bottom: -12%; width: 70%; aspect-ratio: 1; border-radius: 50%; z-index: -1; opacity: .5; animation: drift 10s ease-in-out infinite alternate; }
.karte:nth-child(1) .deko { background: radial-gradient(circle, var(--karamell), transparent 65%); }
.karte:nth-child(2) .deko { background: radial-gradient(circle, var(--rot), transparent 65%); }
.karte:nth-child(3) .deko { background: radial-gradient(circle, var(--rot), transparent 65%); }
/* Bewegte Vorschau in der Karte (Showreel bzw. Animation) */
.vorschau { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 18px; overflow: hidden; isolation: isolate; display: grid; place-items: center; color: var(--offwhite); box-shadow: 0 16px 40px rgba(30,12,5,.25); }
.vorschau .rec { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 6px; font-weight: var(--bold); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; }
.vorschau .rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 2px var(--offwhite); animation: blink 1.4s steps(2) infinite; }
.vorschau .play { width: 60px; height: 60px; }
.vorschau .play svg { width: 20px; height: 20px; }
.vorschau .zeit { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 3px; border-radius: 3px; background: rgba(244,243,241,.3); overflow: hidden; }
.vorschau .zeit::after { content: ""; position: absolute; inset: 0; background: var(--offwhite); transform-origin: left; animation: zeit 8s linear infinite; }
@keyframes zeit { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Motion-Vorschau: kreisende Formen */
.formen { position: absolute; inset: 0; z-index: -1; background: var(--braun-tief); }
.formen i { position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.formen i:nth-child(1) { width: 34%; aspect-ratio: 1; margin: -17% 0 0 -17%; background: var(--rot); animation: orbit 6s cubic-bezier(.65,0,.35,1) infinite; }
.formen i:nth-child(2) { width: 18%; aspect-ratio: 1; background: var(--creme); animation: orbit2 6s cubic-bezier(.65,0,.35,1) infinite; }
.formen i:nth-child(3) { width: 46%; aspect-ratio: 1; margin: -23% 0 0 -23%; border: 2px solid var(--karamell); border-radius: 28%; animation: dreh 9s linear infinite; }
@keyframes orbit { 0%,100% { transform: translate(-40%, 0) scale(1); } 50% { transform: translate(40%, 0) scale(.6); border-radius: 30%; } }
@keyframes orbit2 { 0%,100% { transform: translate(120%, -60%) scale(.7); } 50% { transform: translate(-220%, 30%) scale(1.2); } }
@keyframes dreh { to { transform: rotate(360deg); } }
/* Foto-Karte: kleine 16:9-Vorschau, die Fotos wechseln sich mit langsamem Zoom ab */
.foto-schau { background: var(--braun); }
.foto-schau img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; opacity: 0; animation: foto-wechsel 16s linear infinite; animation-delay: calc(var(--n) * 4s); }
.foto-schau img:first-child { opacity: 1; }
@keyframes foto-wechsel { 0% { opacity: 0; transform: scale(1.15); } 5%, 25% { opacity: 1; } 31%, 100% { opacity: 0; transform: scale(1); } }
.foto-schau .rec { z-index: 1; padding: 5px 10px 5px 8px; border-radius: 999px; background: rgba(61,27,13,.55); }

/* Kunden-Laufband */
.kunden { background: var(--offwhite); padding-top: 52px; padding-bottom: calc(var(--r) + 44px); z-index: 3; overflow: hidden; }
.kunden .eyebrow { text-align: center; color: var(--karamell); margin-bottom: 26px; }
.logos { display: flex; width: max-content; will-change: transform; gap: 64px; align-items: center; animation: lauf 110s linear infinite; }
.logos img { height: 64px; width: auto; max-width: none; flex: none; }

/* Über mich: Text füllt sich beim Scrollen */
.ueber { background: var(--braun); color: var(--creme); padding-top: 64px; padding-bottom: calc(var(--r) + 64px); z-index: 4; overflow: hidden; }
.ueber .eyebrow { color: var(--karamell); margin-bottom: 20px; }
.ueber-grid { display: grid; gap: 32px; }
.portrait { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; max-width: 460px; background: var(--braun-tief); }
.portrait img { position: absolute; inset: -8% 0; width: 100%; height: 116%; max-width: none; object-fit: cover; object-position: 50% 30%; transform: translateY(var(--p, 0)); }
.fuell { font-size: clamp(1.7rem, 7vw, 3.4rem); line-height: 1.18; letter-spacing: -0.01em; }
.fuell .w { color: rgba(244, 221, 189, .22); transition: color .25s; }
.fuell .w.an { color: var(--creme); }
.fuell .w.rot.an { color: var(--offwhite); }
.fuell b.w.an { color: var(--offwhite); }
.claim { margin-top: 28px; font-size: clamp(1.4rem, 5vw, 2.2rem); color: var(--offwhite); }
.claim b { color: var(--rot); background: var(--offwhite); padding: 0 .3em; border-radius: 8px; }

/* Kontakt */
.kontakt { background: var(--creme); color: var(--braun); padding-top: 64px; padding-bottom: 64px; z-index: 5; overflow: hidden; }
.kontakt .eyebrow { color: var(--karamell); }
.kontakt h2 { color: var(--braun); }
.kontakt h2 span { color: var(--braun); }
.kontakt h2 { font-size: clamp(4rem, 24vw, 13rem); line-height: .9; margin-top: 10px; }
.kontakt h2 span { display: block; font-weight: var(--thin); font-size: .42em; line-height: 1.1; }
.k-grid { display: grid; gap: 36px; margin-top: 34px; }
.daten { display: grid; gap: 18px; }
.daten dt { font-weight: var(--bold); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--karamell); }
.daten dd { font-weight: var(--bold); font-size: 1.3rem; user-select: all; }
.magnet { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 28px; border-radius: 999px; background: var(--rot); color: var(--offwhite); font: inherit; font-weight: var(--bold); font-size: 1.1rem; border: 0; cursor: pointer; transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s; }
.magnet:hover { background: var(--braun); color: var(--offwhite); }
form.anfrage { display: grid; gap: 14px; background: var(--offwhite); color: var(--braun); padding: 22px; border-radius: 22px; }
form.anfrage label { display: grid; gap: 6px; font-weight: var(--bold); font-size: .9rem; }
form.anfrage input, form.anfrage textarea, form.anfrage select { font: inherit; font-weight: var(--thin); font-size: 1rem; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 12px; background: #fff; color: var(--braun); width: 100%; }
form.anfrage textarea { min-height: 110px; resize: vertical; }
form.anfrage .magnet { background: var(--rot); color: var(--offwhite); justify-self: start; }
form.anfrage .magnet:hover { background: var(--braun); }
form.anfrage .hinweis { font-size: .9rem; color: var(--karamell); min-height: 1.3em; }

footer { background: var(--braun-tief); color: var(--creme); padding-block: 36px calc(36px + env(safe-area-inset-bottom, 0px)); }
.f-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.f-row img { width: 72px; height: auto; display: block; }
.f-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: .95rem; }
.f-links a:hover { color: var(--offwhite); }
.copy { margin-top: 22px; font-size: .8rem; opacity: .6; }

/* Eigener Cursor (nur Maus) */
.cursor { position: fixed; top: 0; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--rot); pointer-events: none; z-index: 70; mix-blend-mode: multiply; transition: width .25s, height .25s, margin .25s, background .25s; display: none; }
.cursor.gross { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(193,4,20,.35); }
@media (pointer: fine) { .cursor { display: block; } }

/* Einblenden beim Scrollen (Ruhezustand bleibt sichtbar) */
.js .rein { transform: translateY(40px); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.js .rein.da { transform: none; }

/* Ladeanimation Hero */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .z > span { animation: hoch 1s cubic-bezier(.2,.7,.2,1) both; }
  .hero h1 .z:nth-child(2) > span { animation-delay: .1s; }
  .hero h1 .z:nth-child(3) > span { animation-delay: .2s; }
  @keyframes hoch { from { transform: translateY(105%); } }
}

/* ---------- Seite "Arbeiten" ---------- */
.seite-kopf { background: var(--offwhite); padding-top: calc(110px + env(safe-area-inset-top, 0px)); padding-bottom: calc(var(--r) + 30px); }
.seite-kopf h1 { font-size: clamp(3.6rem, 20vw, 11rem); color: var(--braun); }
.seite-kopf h1 span { font-weight: var(--thin); color: var(--rot); }
.seite-kopf p { max-width: 40ch; margin-top: 16px; font-size: 1.1rem; }
.zurueck { display: inline-flex; gap: 8px; font-weight: var(--bold); font-size: .9rem; margin-bottom: 22px; color: var(--karamell); }
.filter-leiste { position: sticky; top: calc(66px + env(safe-area-inset-top, 0px)); transition: top .4s cubic-bezier(.2,.7,.2,1); z-index: 30; background: var(--creme); padding-block: 14px; }
.filter-leiste .filter { margin-bottom: 0; }
.filter { display: flex; gap: 8px; flex-wrap: wrap; }
.filter button { font: inherit; font-weight: var(--bold); font-size: .9rem; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--braun); background: transparent; color: var(--braun); cursor: pointer; transition: background .25s, color .25s; }
.filter button[aria-pressed="true"] { background: var(--braun); color: var(--creme); }
.liste { background: var(--creme); padding-bottom: calc(var(--r) + 48px); }
.projekte { display: grid; gap: 48px 24px; padding-top: 24px; }
.projekt { display: grid; gap: 14px; align-content: start; scroll-margin-top: 90px; }
.projekt .medien { position: relative; border-radius: 22px; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 5; display: grid; place-items: center; color: var(--offwhite); }
.projekt.video .medien, .projekt.motion .medien { aspect-ratio: 16 / 9; }
.projekt .medien .film { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.projekt:hover .medien .film { transform: scale(1.12); }
.projekt .medien .play { width: 64px; height: 64px; }
.projekt .medien .play svg { width: 22px; height: 22px; }
.projekt .galerie { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; aspect-ratio: 16 / 9; }
.projekt .galerie > div { position: relative; border-radius: 16px; overflow: hidden; isolation: isolate; }
.projekt .galerie > div:first-child { grid-row: 1 / 3; }
.projekt .typ { display: flex; gap: 10px; align-items: center; font-weight: var(--bold); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--karamell); }
.projekt .typ::before { content: ""; width: 22px; height: 2px; background: var(--rot); }
.projekt h2 { font-size: clamp(2rem, 8vw, 3.6rem); }
.projekt h2 span { font-weight: var(--thin); }
.projekt p { font-size: 1.05rem; max-width: 52ch; }
.projekt .rolle { font-size: .9rem; color: var(--karamell); }
.projekt .rolle b { color: var(--braun); }
.projekt.ausblenden { display: none; }
.ph-lbl { position: absolute; inset: auto 0 12px; text-align: center; font-weight: var(--bold); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; color: var(--offwhite); }

/* Desktop / Querformat */
@media (min-width: 900px) {
  body { font-size: 19px; }
  .logo { width: 78px; }
  .hero { flex-direction: row; align-items: stretch; gap: 0; }
  .hero-text { width: 50%; align-content: center; padding-bottom: 0; }
  .fenster { font-size: clamp(2.6rem, 5.4vw, 6rem); }
  .karussell-wrap { width: 50%; margin-right: var(--gut); }
  .karussell-wrap { --kb: min(19vw, 320px); margin-top: 0; }
  .k-steuer { margin-top: 20px; }
  .ambi::after { background: linear-gradient(90deg, var(--offwhite) 0%, color-mix(in srgb, var(--offwhite) 75%, transparent) 35%, transparent 65%); }
  .laufband-wrap { width: 50%; min-height: 0; grid-auto-flow: column; grid-auto-columns: 1fr; align-content: stretch; gap: 12px; height: calc(100svh - 120px); overflow: hidden; border-radius: 24px; }
  .laufband { flex-direction: column; width: auto; height: max-content; animation-name: lauf-v; }
  @keyframes lauf-v { to { transform: translateY(-50%); } }
  .kachel { width: 100%; }
  .karte { padding: 44px; min-height: 62svh; grid-template-columns: 1fr 1.1fr; align-items: end; column-gap: 48px; }
  .karte .nr { grid-column: 1 / -1; align-self: start; }
  .karte .inhalt { grid-column: 1; grid-row: 2; }
  .karte .vorschau { grid-column: 2; grid-row: 2; }
  .projekte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projekt.gross { grid-column: 1 / -1; }
  .ueber-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 64px; }
  .k-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reel { height: auto; }
  .reel-stick { position: static; }
  .reel-frame { transform: none; border-radius: 0; }
  .karte { position: relative; top: 0; }
  .js .rein { transform: none; }
}

/* ---------- Rechtliche Seiten (Impressum, Datenschutz) ---------- */
.recht { background: var(--creme); padding-bottom: calc(var(--r) + 64px); }
.recht-inhalt { max-width: 68ch; display: grid; gap: 34px; padding-top: 40px; }
.recht-inhalt section { display: grid; gap: 10px; }
.recht-inhalt h2 { font-size: clamp(1.4rem, 5vw, 2rem); letter-spacing: -0.01em; }
.recht-inhalt h2 .nr { color: var(--rot); margin-right: .35em; }
.recht-inhalt p, .recht-inhalt li { font-size: 1.05rem; line-height: 1.6; }
.recht-inhalt b { color: var(--braun); }
.recht-inhalt ul { padding-left: 1.2em; display: grid; gap: 4px; }
.recht-inhalt a { border-bottom: 1px solid var(--rot); }
.recht-karte { background: var(--offwhite); border-radius: 22px; padding: 22px; display: grid; gap: 4px; }
.stand { font-size: .9rem; color: var(--karamell); }

/* ---------- Seite "Fotografie" ---------- */
.serien-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.serien-nav a { display: inline-flex; gap: 8px; align-items: baseline; font-weight: var(--bold); font-size: .95rem; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--braun); transition: background .25s, color .25s; }
.serien-nav a b { color: var(--rot); font-size: .75rem; }
.serien-nav a:hover { background: var(--braun); color: var(--creme); }
.serie { background: var(--creme); padding-top: 48px; padding-bottom: calc(var(--r) + 56px); scroll-margin-top: 0; }
.serie.dunkel { background: var(--braun-tief); color: var(--creme); }
.serie.hell { background: var(--offwhite); }
.serie-kopf { display: grid; gap: 12px; max-width: 46ch; }
.serie-kopf .typ { display: flex; gap: 10px; align-items: center; font-weight: var(--bold); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--karamell); }
.serie-kopf .typ::before { content: ""; width: 22px; height: 2px; background: var(--rot); }
.serie-kopf h2 { font-size: clamp(2.6rem, 13vw, 6.5rem); }
.serie-kopf h2 span { font-weight: var(--thin); }
.serie.dunkel .serie-kopf h2 { color: var(--offwhite); }
.serie-kopf p { font-size: 1.05rem; }
.serie-kopf .anzahl { font-weight: var(--bold); font-size: .85rem; color: var(--rot); }
.serie.dunkel .anzahl { color: var(--creme); opacity: .7; }
.raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 30px; }
.raster.haupt .fk:first-child { grid-column: 1 / -1; }
.fk { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--braun); border-radius: 16px; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 5; cursor: zoom-in; font: inherit; color: inherit; }
.raster.haupt .fk { aspect-ratio: 3 / 4; }
.raster.platzhalter .fk { cursor: default; }
.fk img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.fk.weg { visibility: hidden; }
@media (hover: hover) { .fk:hover img { transform: scale(1.05); } }
/* Kacheln wischen von unten auf, das Bild zoomt dabei leicht zurück */
.js .fk.rein { transform: none; clip-path: inset(100% 0 0 0 round 16px); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1) calc(var(--i) * 90ms); }
.js .fk.rein img { transform: scale(1.3); }
.js .fk.rein.da { clip-path: inset(0 0 0 0 round 16px); }
.js .fk.rein.da img { transform: none; transition-delay: calc(var(--i) * 90ms); }
@media (hover: hover) { .js .fk.rein.da:hover img { transform: scale(1.05); transition-delay: 0s; } }
/* Großansicht */
.lb { position: fixed; inset: 0; z-index: 70; background: rgba(30, 12, 5, 0); color: var(--creme); transition: background .5s; touch-action: none; }
.lb.sicht { background: rgba(30, 12, 5, .96); }
.lb-bild { position: absolute; transform-origin: 0 0; object-fit: cover; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.45); user-select: none; -webkit-user-drag: none; }
.lb-kopf, .lb-knopf { opacity: 0; transition: opacity .3s; }
.lb.sicht .lb-kopf, .lb.sicht .lb-knopf { opacity: 1; transition: opacity .4s .3s; }
.lb-kopf { position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); left: var(--gut); right: 80px; display: flex; gap: 14px; align-items: baseline; }
.lb-titel { font-weight: var(--bold); font-size: 1.15rem; color: var(--offwhite); }
.lb-zahl.roll { font-weight: var(--thin); font-size: 1rem; height: 1.5em; line-height: 1.5; width: var(--w, 3em); }
.lb-knopf { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--offwhite); color: var(--braun); display: grid; place-items: center; cursor: pointer; }
.lb-zu { top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; background: var(--rot); }
.lb-zu i, .lb-zu i::before { position: absolute; width: 20px; height: 2px; background: var(--offwhite); border-radius: 2px; transform: rotate(45deg); }
.lb-zu i::before { content: ""; left: 0; transform: rotate(90deg); }
.lb-pfeil svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lb-pfeil { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.zurueck-p { left: calc(50% - 62px); }
.weiter-p { right: calc(50% - 62px); }
.lb-auf, .lb-auf body { overflow: hidden; }
.karte .mehr { display: inline-flex; margin-top: 18px; font-weight: var(--bold); padding: 12px 22px; border-radius: 999px; background: var(--braun); color: var(--creme); }
@media (min-width: 900px) {
  .serie { padding-top: 72px; }
  .raster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .raster.haupt .fk:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .lb-pfeil { top: 50%; bottom: auto; margin-top: -26px; }
  .zurueck-p { left: 20px; }
  .weiter-p { right: 20px; }
}
.projekt .galerie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.projekt:hover .galerie img { transform: scale(1.06); }
/* Leistungs-Karten: Hintergrund nimmt die Farben der Vorschau auf (wie oben bei den Reels) */
.karte:nth-child(1) { --kf: var(--creme); }
.karte:nth-child(2) { --kf: var(--karamell); }
.karte:nth-child(3) { --kf: var(--braun); }
.k-ambi { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.k-ambi .klon { position: absolute; inset: -25%; display: block; filter: blur(60px) saturate(1.7); opacity: .6; }
.k-ambi::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--kf) 75%, transparent), color-mix(in srgb, var(--kf) 25%, transparent) 70%); }
@media (min-width: 900px) { .k-ambi::after { background: linear-gradient(90deg, color-mix(in srgb, var(--kf) 80%, transparent) 10%, color-mix(in srgb, var(--kf) 15%, transparent) 70%); } }
/* Gemischte Formate (quer + hoch): Mauerwerk-Spalten, jedes Bild in seinem echten Format */
.raster.mauer { display: block; columns: 2; column-gap: 8px; }
.raster.mauer .fk { aspect-ratio: auto; margin-bottom: 8px; break-inside: avoid; }
.raster.mauer .fk img { height: auto; }
@media (min-width: 900px) { .raster.mauer { columns: 3; column-gap: 12px; } .raster.mauer .fk { margin-bottom: 12px; } }
/* Mehr Luft zwischen großen Überschriften und dem Text darunter (Unterlängen wie g/f berührten sonst den Text) */
.karte h3 + p { margin-top: .9em; }
.seite-kopf p { margin-top: 28px; }
.serie-kopf h2 + p { margin-top: 10px; }
.projekt h2 + p { margin-top: 6px; }
.kontakt h2 + .k-grid, .sek-kopf h2 + p { margin-top: 24px; }
/* Kachel-Überschriften auf der Startseite (Fotografie, Videografie, Motion Design) in Yink (Adobe Fonts, Web-Projekt hsq6nap). Greift nur, wenn Yink wirklich geladen ist (Klasse .yink aus main.js), sonst bleibt alles in Lato. */
:root { --display: "yink", var(--font); }
.yink .karte h3, .yink .karte h3 span {
  font-family: var(--display); font-style: normal; font-weight: 400 !important; letter-spacing: 0; line-height: 1.05;
}

/* ---------- Seite "Videografie" ---------- */
.v-liste { display: grid; gap: 44px; margin-top: 30px; }
.vprojekt { display: grid; gap: 12px; align-content: start; scroll-margin-top: 90px; }
.vprojekt h3 { font-size: clamp(1.8rem, 7vw, 3rem); }
.serie.dunkel .vprojekt h3 { color: var(--offwhite); }
.vprojekt p { font-size: 1.05rem; max-width: 52ch; }
.vprojekt h3 + p { margin-top: 4px; }
.vprojekt .rolle { font-size: .9rem; color: var(--karamell); }
.vprojekt .rolle b { color: inherit; filter: brightness(.6); }
.serie.dunkel .vprojekt .rolle { color: var(--creme); opacity: .75; }
.vk { position: relative; display: grid; place-items: center; width: 100%; padding: 0; border: 0; border-radius: 18px; overflow: hidden; isolation: isolate; background: var(--braun); color: var(--offwhite); font: inherit; }
.vk.quer { aspect-ratio: 16 / 9; }
.vk.hoch { aspect-ratio: 9 / 16; cursor: zoom-in; }
.vk .play { width: 64px; height: 64px; }
.vk .play svg { width: 22px; height: 22px; }
.vk video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.vk.hoch::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(30,12,5,.65), transparent 45%); }
.vk-t { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; text-align: left; line-height: 1.2; }
.vk-t b { font-size: .95rem; }
.vk-t span { font-size: .75rem; opacity: .85; }
.vk.weg { visibility: hidden; }
@media (hover: hover) { .vk.hoch:hover video { transform: scale(1.05); } }
.js .vk.rein { transform: none; clip-path: inset(100% 0 0 0 round 18px); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1) calc(var(--i) * 90ms); }
.js .vk.rein.da { clip-path: inset(0 0 0 0 round 18px); }
.raster.reels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
video.lb-bild { background: #000; object-fit: contain; }
@media (min-width: 900px) {
  .v-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
  .raster.reels { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Motion Design: Hochformat-Clip neben den Animationen */
.anim-reihe { display: grid; gap: 28px; margin-top: 30px; }
.anim-reihe .v-liste { margin-top: 0; }
.raster.einzel { margin-top: 0; grid-template-columns: minmax(0, 260px); }
@media (min-width: 900px) {
  .anim-reihe { grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: 40px; }
  .raster.einzel { grid-template-columns: 1fr; }
  .anim-reihe .v-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Menü hat jetzt 8-9 Punkte: Schriftgröße auch an die Bildschirmhöhe koppeln, damit alles passt */
.overlay a { font-size: min(clamp(2.4rem, 11vw, 5rem), 6.6vh); }
.offen .overlay li:nth-child(6) a { transition-delay: .3s; }
.offen .overlay li:nth-child(7) a { transition-delay: .36s; }
.offen .overlay li:nth-child(8) a { transition-delay: .42s; }
.offen .overlay li:nth-child(9) a { transition-delay: .48s; }
/* Einzelnes Projekt in einer Kategorie: am Desktop breiter statt halbe Spalte */
@media (min-width: 900px) { .v-liste > .vprojekt:only-child { grid-column: 1 / -1; max-width: 900px; } }
/* Link zum ganzen Film auf YouTube (öffnet neuen Tab, kein eingebetteter Player = keine Daten an YouTube beim Seitenaufruf) */
a.vk.quer { cursor: pointer; }
a.vk.quer .play { transition: transform .4s cubic-bezier(.2,.9,.25,1.2); }
a.vk.quer:hover .play { transform: scale(1.12); }
.yt-link { justify-self: start; display: inline-flex; margin-top: 6px; font-weight: var(--bold); font-size: .95rem; padding: 10px 18px; border-radius: 999px; background: var(--rot); color: var(--offwhite); }
/* Video-Vorschaubild mit leichter Scroll-Bewegung (Werte aus main.js) */
.vk-bild { position: absolute; left: 0; top: -20%; width: 100%; height: 140%; max-width: none; object-fit: cover; z-index: -2; will-change: transform; }
.vk.quer:has(.vk-bild)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(30,12,5,.55), transparent 40%); }

/* Echte Videos in den Leistungs-Karten */
.vorschau .k-video, .k-ambi .k-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.vorschau .zeit.echt::after { animation: none; transform: scaleX(var(--t, 0)); transition: transform .25s linear; }
.vorschau .k-video ~ .rec { text-shadow: 0 1px 8px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.5); }
/* Safari: Video sprengt sonst die runden Ecken */
.vorschau:has(.k-video) { transform: translateZ(0); }
.vorschau .k-video { border-radius: inherit; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.k-ambi .k-farbe { position: absolute; inset: 0; background: var(--braun); transition: background-color 1.8s ease; }

/* Hero neu (V35): Mini-Portrait, Knöpfe, Instagram */
.hero-text { gap: 12px; padding-bottom: 6px; }
.wer { display: flex; align-items: center; gap: 10px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--karamell); font-weight: var(--bold); }
.wer img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--offwhite), 0 0 0 3.5px var(--rot); }
.wer span { display: grid; line-height: 1.3; }
.wer b { color: var(--braun); letter-spacing: .1em; }
.wer span { font-weight: var(--thin); letter-spacing: .12em; }
.hero-aktion { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.h-knopf { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px; border-radius: 999px; font-weight: var(--bold); font-size: .98rem; white-space: nowrap; transition: transform .35s cubic-bezier(.2,.9,.25,1.2), background-color .3s, color .3s, box-shadow .3s; }
.h-knopf.voll { background: var(--rot); color: var(--offwhite); box-shadow: 0 4px 0 var(--braun); }
.h-knopf.voll span { display: inline-block; transition: transform .35s cubic-bezier(.2,.9,.25,1.2); }
.h-knopf.insta { color: var(--braun); background: rgba(244,243,241,.7); box-shadow: inset 0 0 0 1.5px var(--braun); padding-left: 14px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.h-knopf.insta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .6s cubic-bezier(.2,.9,.25,1.2); }
.h-knopf.insta svg .p { fill: currentColor; stroke: none; }
@media (hover: hover) {
  .h-knopf:hover { transform: translateY(-2px); }
  .h-knopf.voll:hover span { transform: translateX(4px); }
  .h-knopf.insta:hover { background: var(--braun); color: var(--offwhite); }
  .h-knopf.insta:hover svg { transform: rotate(-12deg) scale(1.12); }
}
.h-knopf:active { transform: translateY(1px); }
.hero .karussell-wrap { margin-top: 18px; }
.h-knopf .lang { display: none; }
.hero-aktion { flex-wrap: nowrap; }
@media (max-width: 899px) { .h-knopf { padding: 0 17px; font-size: .94rem; gap: 7px; } .h-knopf.insta { padding-left: 12px; } }
@media (max-width: 360px) { .h-knopf { padding: 0 13px; font-size: .88rem; } }
@media (min-width: 900px) { .h-knopf .lang { display: inline; } .h-knopf .kurz { display: none; } }
@media (min-width: 900px) {
  .hero-text { gap: 16px; }
  .wer { font-size: .82rem; }
  .wer img { width: 48px; height: 48px; }
  .h-knopf { height: 52px; padding: 0 24px; font-size: 1.05rem; }
  .h-knopf.insta { padding-left: 18px; }
  .hero .karussell-wrap { margin-top: 0; }
}
/* Instagram nur als runder Logo-Knopf (V36) */
.h-knopf.insta { width: 46px; padding: 0; justify-content: center; }
@media (min-width: 900px) { .h-knopf.insta { width: 52px; padding: 0; } .h-knopf.insta svg { width: 24px; height: 24px; } }
/* Animation: zwei Hochformate + ein Querformat (V41) */
.raster.anim { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.raster.anim .breit { grid-column: 1 / -1; cursor: zoom-in; }
.raster.anim .vk.quer::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(30,12,5,.6), transparent 45%); }
.raster.anim .vk.quer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .raster.anim .vk.quer:hover video { transform: scale(1.04); } }
@media (min-width: 900px) { .raster.anim { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3.2fr); } .raster.anim .breit { grid-column: auto; } }