/* Variante 04.11.: nur der Schalter »Weitere« bleibt sichtbar */
.e-panel .e-panel-t, .e-panel button:not([data-e="more"]):not([data-start-btn]) { display: none !important; }
/* Luft zwischen Playground-Teaser und Kontaktbereich */
html body .play { margin-bottom: 120px !important; }
@media (max-width: 760px) { html body .play { margin-bottom: 72px !important; } }
/* Weitere als Reihe: die Liste bleibt auch auf dem Handy aus */
html[data-more="reihe"] body .more-list { display: none !important; }

/* Einstieg (04.11.): nur beim Laden aktiv (Klasse start-an, ideen.js nimmt sie danach weg), beim Sprachwechsel läuft deshalb nichts neu und es blitzt nichts.
   Varianten über data-start: profil · blende · zeilen · woerter · schnell. Danach Profil, dann der Pfeil */
@keyframes start-rein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes start-blende { from { opacity: 0; } to { opacity: 1; } }
@keyframes start-zeile { from { transform: translateY(.95em); clip-path: inset(-.25em -.2em 1em -.2em); } to { transform: none; clip-path: inset(-.25em -.2em -.25em -.2em); } }
@keyframes start-wort { from { opacity: 0; transform: translateY(.12em); } to { opacity: 1; transform: none; } }
@keyframes start-scharf { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: blur(0); } }
html.start-an.vx-pre :is(main, footer, body > section) { opacity: 1 !important; }
html.start-an body .intro .hero-title { opacity: 0; }
html.start-an body .intro .hero-title:has(.hl) { opacity: 1; }
html.start-an:is(:not(.intro-pending), .intro-texte)[data-start="profil"] body .intro .hero-title:has(.hl) { animation: start-rein .85s cubic-bezier(.22, .7, .3, 1) .05s both; } /* gleiche Bewegung wie Profilbild und Name darunter */
html.start-an:is(:not(.intro-pending), .intro-texte)[data-start="blende"] body .intro .hero-title:has(.hl) { animation: start-blende .8s ease .05s both; }
html.start-an:is(:not(.intro-pending), .intro-texte)[data-start="zeilen"] body .intro [data-split] .w { animation: start-zeile .95s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--z, 0) * 95ms + .05s); }
html.start-an:is(:not(.intro-pending), .intro-texte)[data-start="woerter"] body .intro [data-split] .w { animation: start-wort .5s cubic-bezier(.25, .1, .25, 1) both; animation-delay: calc(var(--wi, 0) * 24ms + .05s); }
html.start-an:is(:not(.intro-pending), .intro-texte)[data-start="schnell"] body .intro [data-split] .w { animation: start-scharf .45s ease both; animation-delay: calc(var(--wi, 0) * 20ms + .05s); }
html.start-an:is(:not(.intro-pending), .intro-texte) body .intro .hero-id { animation: start-rein .85s cubic-bezier(.22, .7, .3, 1) .15s both; }
html.start-an:is(:not(.intro-pending), .intro-texte) body .intro .intro-hint { animation: start-blende .6s ease .35s both; }
html.start-an.intro-pending body .intro .hero-id, html.start-an.intro-pending body .intro .intro-hint { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html body .intro .hero-title, html body .intro [data-split] .w, html body .intro .hero-id, html body .intro .intro-hint { animation: none !important; }
}

/* 04.11.: Fünf Hauptprojekte, versetzt: Open Rooms und Jack Rabbit im Hochformat gleich groß, R!SE rechts, Jack Rabbit links daneben tiefer; Weitere Arbeiten als Viererreihe. Handy einspaltig, Hochformate 72 % breit abwechselnd rechts und links */
html[data-layout] body .grid-3 > .card:nth-child(2) .card-img, html[data-layout] body .grid-3 > .card:nth-child(4) .card-img { aspect-ratio: 4 / 5 !important; height: auto !important; }
html[data-layout] body .grid-3 > .card:nth-child(2) .card-img img, html[data-layout] body .grid-3 > .card:nth-child(4) .card-img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 761px) {
  html[data-layout] body .grid-3 > .card:nth-child(2) { grid-column: 9 / span 4 !important; margin-top: 12vh !important; }
  html[data-layout] body .grid-3 > .card:nth-child(3) { grid-column: 6 / span 7 !important; grid-row: 2; }
  html[data-layout] body .grid-3 > .card:nth-child(4) { grid-column: 1 / span 4 !important; grid-row: 2; margin-top: 300px !important; }
  html body .grid-5 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  html[data-layout] body .grid-3 > .card:nth-child(2) { width: 72% !important; align-self: flex-end !important; margin-left: auto !important; }
  html[data-layout] body .grid-3 > .card:nth-child(4) { width: 72% !important; align-self: flex-start !important; }
}

/* Showreel über den Projekten (05.11.2026): schmal und mittig, darunter beginnt der Dabei!-Teaser */
.film-reel { width: min(100%, 1040px, calc((100svh - 250px) * 16 / 9)); margin: 0 auto 64px; }
.film-reel-in { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #f4f4f4; }
.film-reel-in video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .film-reel { margin-bottom: 40px; } .film-reel-in { border-radius: 10px; } }