@charset "UTF-8";
/* ==========================================================================
   LEUCHTREKLAME — Theme
   Abdurrahim Özer · Mediengestaltung & Werbetechnik · Brilon
   Lädt nach base/components/pages und überschreibt Token + ergänzt Bausteine.
   ========================================================================== */

:root {
  /* Palette: Fassade bei Nacht */
  --nacht:      #16112a;
  --nacht-2:    #221a3d;
  --nacht-3:    #2e2452;
  --beige:      #f1e7d6;
  --beige-2:    #e7d9c3;
  --papier:     #fbf6ec;
  --gelb:       #ffcf3a;
  --gelb-tief:  #8a5a00;
  --pink:       #ff4d7e;
  --pink-text:  #b0144f;
  --petrol:     #0e7c74;
  --petrol-hell:#5fe0d2;

  /* Basis-Token (von base.css genutzt) */
  --kalk:   var(--beige);
  --kalk-2: var(--beige-2);
  --kalk-3: var(--papier);
  --weiss:  var(--papier);
  --tinte:  var(--nacht);
  --signal: var(--pink-text);
  --signal-hell: var(--pink);
  --line:   rgba(22, 17, 42, .16);
  --line-2: rgba(22, 17, 42, .32);
  --line-stark: rgba(22, 17, 42, .72);

  /* Schrift */
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body:    "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --serif:   "Fraunces", Georgia, serif;
  --mono:    "Martian Mono", ui-monospace, Menlo, monospace;

  --fs-body: clamp(1.125rem, .55vw + .95rem, 1.3rem);
  --fs-lead: clamp(1.3rem, 1.1vw + 1rem, 1.75rem);
  --fs-h1:   clamp(3.6rem, 9vw, 9rem);
  --fs-h2:   clamp(2.8rem, 6.4vw, 6.4rem);
  --fs-h3:   clamp(1.7rem, 2.6vw, 2.5rem);
  --fs-mono: .78rem;

  --header-h: 5rem;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

.is-dark {
  --kalk:   var(--nacht);
  --kalk-2: var(--nacht-2);
  --kalk-3: var(--nacht-3);
  --weiss:  var(--nacht-2);
  --tinte:  #f6efe2;
  --signal: var(--gelb);
  --signal-hell: var(--gelb);
  --line:   rgba(246, 239, 226, .16);
  --line-2: rgba(246, 239, 226, .32);
  --line-stark: rgba(246, 239, 226, .72);
  background: var(--nacht);
  color: #f6efe2;
}

/* --- Grundtypografie ----------------------------------------------------- */
html { scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-variation-settings: normal;
  font-optical-sizing: auto;
  overflow-x: clip;            /* clip statt hidden: hält position:sticky/fixed intakt */
  padding-top: var(--header-h);
}
body::after { opacity: .22; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: normal;
  letter-spacing: -.005em;
  line-height: .9;
  text-transform: uppercase;
}
h3 { font-weight: 750; line-height: .95; }
h4 { font-family: var(--body); text-transform: none; font-weight: 700; letter-spacing: 0; }

.serif-i, .ital {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  text-transform: none;
  letter-spacing: -.01em;
}
.accent { color: var(--signal); }
.is-dark .accent { color: var(--gelb); }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: .14em;
}
.eyebrow::before { background: var(--pink); border-radius: 50%; width: .7em; height: .7em; }
.is-dark .eyebrow::before { background: var(--gelb); box-shadow: 0 0 12px var(--gelb); }

.mono { font-family: var(--mono); font-size: .82rem; }

/* Lesefluss großzügiger */
p { max-width: 68ch; }
.lead, .lead-grid__text { font-size: var(--fs-lead); line-height: 1.42; }

/* --- Kopfzeile: fest, schrumpft beim Scrollen ---------------------------- */
.topbar { display: none !important; }
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: color-mix(in srgb, var(--beige) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid var(--line);
  transition: background .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.header__inner { min-height: var(--header-h); transition: min-height .3s var(--ease); }
.is-scrolled .header { box-shadow: 0 10px 40px -24px rgba(22,17,42,.55); background: color-mix(in srgb, var(--papier) 92%, transparent); }
.is-scrolled .header__inner { min-height: 4rem; }
.header--dark-top:not(.x) { }
.header__progress {
  position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--pink), var(--gelb), var(--petrol-hell));
  transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
}

.brand__mark {
  font-family: var(--display);
  font-weight: 900;
  font-size: 2.1rem;
  letter-spacing: .01em;
  font-variation-settings: normal;
}
.brand__mark span { color: var(--pink); }
.brand__sub { font-family: var(--mono); font-size: .6rem; opacity: .85; }

.nav__link {
  font-family: var(--body);
  font-weight: 650;
  font-size: 1.02rem;
  letter-spacing: 0;
  text-transform: none;
  position: relative;
  padding: .45rem .1rem;
  border: 0;
}
.nav__link::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 3px;
  background: var(--pink); transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease-out);
}
.nav__link:hover::before, .nav__link[aria-current="page"]::before { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--nacht); }
.nav__label-num { display: none; }

.motion-toggle {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line-2); padding: .5rem .7rem; border-radius: 999px;
  display: inline-flex; gap: .45rem; align-items: center; white-space: nowrap;
}
.motion-toggle[aria-pressed="true"] { background: var(--nacht); color: var(--beige); }
.motion-toggle__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--petrol); }
.motion-toggle[aria-pressed="true"] .motion-toggle__dot { background: var(--pink); }

@media (max-width: 1080px) {
  .nav { background: var(--nacht); color: var(--beige); padding-top: 6.5rem; }
  .nav__link { font-family: var(--display); font-size: clamp(2.6rem, 11vw, 4rem); font-weight: 800; text-transform: uppercase; color: var(--beige); border-bottom: 1px solid rgba(246,239,226,.15); }
  .nav__link[aria-current="page"] { color: var(--gelb); }
  .nav__link::before { display: none; }
  .nav__link::after { color: var(--gelb); }
  .nav__toggle { position: relative; z-index: 101; background: var(--papier); }
  .motion-toggle--desk { display: none; }
}

/* --- Knöpfe -------------------------------------------------------------- */
.btn {
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0;
  text-transform: none;
  padding: 1rem 1.55rem;
  border-radius: 999px;
  --btn-bg: var(--nacht);
  --btn-fg: var(--beige);
}
.btn::before { background: var(--pink); }
.btn--signal { --btn-bg: var(--gelb); --btn-fg: var(--nacht); border-color: var(--gelb); }
.btn--signal::before { background: var(--pink); }
.btn--signal:hover { color: #fff; }
.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; border-color: currentColor; }
.is-dark .btn { --btn-bg: var(--beige); --btn-fg: var(--nacht); border-color: var(--beige); }
.is-dark .btn--signal { --btn-bg: var(--gelb); border-color: var(--gelb); }
.is-dark .btn--ghost { --btn-bg: transparent; --btn-fg: var(--beige); border-color: rgba(246,239,226,.5); }
.btn--sm { padding: .7rem 1.1rem; font-size: .92rem; }
.tlink { font-family: var(--body); font-weight: 700; font-size: 1rem; text-transform: none; letter-spacing: 0; background-image: linear-gradient(var(--pink), var(--pink)); background-size: 100% 2px; }

/* --- HERO: Leuchtbuchstaben --------------------------------------------- */
.lr-hero {
  position: relative;
  background:
    radial-gradient(60% 50% at 78% 30%, rgba(255,77,126,.22), transparent 60%),
    radial-gradient(50% 50% at 10% 90%, rgba(14,124,116,.35), transparent 60%),
    var(--nacht);
  color: #f6efe2;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(1.5rem, 4vw, 3rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: clip;
  isolation: isolate;
}
.lr-hero::before {      /* Mauerwerk-Raster */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .07;
  background-image:
    linear-gradient(rgba(246,239,226,1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,239,226,1) 1px, transparent 1px);
  background-size: 64px 32px, 128px 32px;
}
.lr-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  min-height: calc(100svh - var(--header-h) - 6rem);
}
@media (max-width: 980px) { .lr-hero__grid { grid-template-columns: 1fr; min-height: 0; } }

.lr-hero__meta {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}
.chip-badge {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .45rem .75rem; border-radius: 999px; border: 1px solid rgba(246,239,226,.28);
  display: inline-flex; align-items: center; gap: .5rem;
}
.chip-badge--live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #3ee08f; box-shadow: 0 0 10px #3ee08f; animation: puls 2s infinite; }
@keyframes puls { 50% { opacity: .35; } }

.lr-hero h1 { margin: 0; line-height: .82; text-transform: none; }
.lr-hero__vor {
  display: block;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(2.4rem, 5.6vw, 5.4rem);
  color: var(--gelb);
  letter-spacing: -.02em;
  margin-bottom: -.05em;
  padding-left: .08em;
}
.neon {
  display: flex;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(6.5rem, 21vw, 19rem);
  line-height: .8;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.neon span {
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 2px rgba(246,239,226,.28);
  transition: color .2s, text-shadow .2s;
}
.neon.is-on span { animation: anschalten 1.3s steps(1) forwards; animation-delay: var(--d, 0s); }
@keyframes anschalten {
  0%   { color: transparent; text-shadow: none; }
  12%  { color: #fff4d6; text-shadow: 0 0 18px rgba(255,207,58,.9), 0 0 60px rgba(255,77,126,.6); }
  18%  { color: transparent; text-shadow: none; }
  30%  { color: #fff4d6; text-shadow: 0 0 18px rgba(255,207,58,.9), 0 0 60px rgba(255,77,126,.6); }
  36%  { color: transparent; text-shadow: none; }
  52%, 100% { color: #fff6df; -webkit-text-stroke: 0; text-shadow: 0 0 10px rgba(255,207,58,.85), 0 0 34px rgba(255,140,60,.55), 0 0 90px rgba(255,77,126,.45); }
}
.neon .neon__dot { color: var(--pink) !important; text-shadow: 0 0 22px var(--pink) !important; -webkit-text-stroke: 0; }
.neon.is-on span:nth-child(3) { animation-name: anschalten, flackern; animation-duration: 1.3s, 7s; animation-delay: var(--d,0s), 3s; animation-iteration-count: 1, infinite; }
@keyframes flackern { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .35; } 94% { opacity: 1; } 96% { opacity: .5; } }

.lr-hero__lead { font-size: var(--fs-lead); line-height: 1.4; max-width: 34ch; margin-top: clamp(1.4rem, 3vw, 2.2rem); color: rgba(246,239,226,.9); }
.lr-hero__lead em { font-family: var(--serif); font-style: italic; color: var(--gelb); font-variation-settings: "SOFT" 100, "WONK" 1; }
.lr-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }

/* Collage rechts */
.collage { position: relative; aspect-ratio: 1 / 1.02; width: 100%; max-width: 640px; justify-self: end; }
@media (max-width: 980px) { .collage { justify-self: center; max-width: 560px; margin-top: 1rem; } }
.collage__item {
  position: absolute; overflow: hidden; background: #000;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(246,239,226,.12);
  transition: transform .8s var(--ease-out);
  will-change: transform;
}
.collage__item img, .collage__item video { width: 100%; height: 100%; object-fit: cover; }
.collage__a { width: 82%; aspect-ratio: 16/10; top: 6%; left: 0; transform: rotate(-3.5deg); border-radius: 6px; }
.collage__b { width: 40%; aspect-ratio: 9/16; right: 0; bottom: 0; transform: rotate(4deg); border-radius: 18px; border: 6px solid #0b0816; }
.collage__c { width: 40%; aspect-ratio: 4/5; left: 2%; bottom: 6%; transform: rotate(-6deg); border-radius: 6px; border: 8px solid var(--papier); z-index: 4; box-shadow: 0 40px 80px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(246,239,226,.15); }
.collage__tape {
  position: absolute; z-index: 3; width: 120px; height: 30px; background: rgba(255,207,58,.82);
  top: 2.5%; left: 34%; transform: rotate(-8deg); mix-blend-mode: normal;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.collage__label {
  position: absolute; z-index: 3; left: .7rem; bottom: .7rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(11,8,22,.75); color: #fff; padding: .35rem .55rem; border-radius: 4px; backdrop-filter: blur(6px);
}
.stempel {
  position: absolute; z-index: 4; right: 30%; top: 50%;
  width: clamp(110px, 13vw, 150px); aspect-ratio: 1; border-radius: 50%;
  background: var(--pink); color: #fff; display: grid; place-items: center;
  box-shadow: 0 20px 40px -12px rgba(255,77,126,.7);
}
.stempel svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: drehen 18s linear infinite; }
.stempel text { font-family: var(--mono); font-size: 9.4px; letter-spacing: 2.2px; text-transform: uppercase; fill: #fff; }
.stempel__mitte { font-family: var(--display); font-weight: 900; font-size: 2.2rem; line-height: 1; }
@keyframes drehen { to { transform: rotate(360deg); } }

.scroll-hint {
  position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(246,239,226,.6);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
}
.scroll-hint::after { content: ""; width: 1px; height: 34px; background: linear-gradient(var(--gelb), transparent); animation: tropfen 1.8s infinite; }
@keyframes tropfen { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 980px) { .scroll-hint { display: none; } }

/* --- Laufband: Folienstreifen ------------------------------------------- */
.ticker { background: var(--gelb); color: var(--nacht); border: 0; padding-block: 1rem; transform: rotate(-1.2deg) scale(1.02); margin-block: -.6rem; z-index: 5; }
.ticker__group { font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 3.2vw, 2.8rem); letter-spacing: .02em; }
.ticker__group span::after { content: "✦"; color: var(--pink); font-size: .7em; margin-left: 2.2rem; }
.ticker--pink { background: var(--pink); color: #fff; transform: rotate(1deg) scale(1.02); }
.ticker--pink .ticker__group span::after { color: var(--gelb); }

/* --- Abschnittsköpfe ------------------------------------------------------ */
.sechead h2, .big-h { font-size: var(--fs-h2); line-height: .86; max-width: 16ch; }
.big-h .ital { font-size: .78em; color: var(--signal); display: inline-block; transform: translateY(-.04em); }
.is-dark .big-h .ital { color: var(--gelb); }
.sechead__aside { font-size: 1.12rem; max-width: 38ch; }
.reg__label { font-family: var(--mono); font-size: .7rem; border-top-width: 2px; }
.reg__label b { color: var(--pink-text); font-size: 1.4rem; font-family: var(--display); font-weight: 900; letter-spacing: 0; }
.is-dark .reg__label b { color: var(--gelb); }

/* --- Projekt-Karten neu --------------------------------------------------- */
.pk-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2.4rem, 5vw, 4.5rem) clamp(1.2rem, 2.4vw, 2.4rem);
}
.pk { grid-column: span 6; display: block; text-decoration: none; color: inherit; position: relative; }
.pk:nth-child(6n+1) { grid-column: 1 / span 7; }
.pk:nth-child(6n+2) { grid-column: 9 / span 4; margin-top: 7rem; }
.pk:nth-child(6n+3) { grid-column: 2 / span 5; }
.pk:nth-child(6n+4) { grid-column: 7 / span 6; margin-top: -3rem; }
.pk:nth-child(6n+5) { grid-column: 1 / span 5; }
.pk:nth-child(6n+6) { grid-column: 6 / span 7; margin-top: 4rem; }
@media (max-width: 900px) { .pk, .pk:nth-child(n) { grid-column: 1 / -1; margin-top: 0; } }
.pk[hidden] { display: none; }

.pk__media {
  position: relative; overflow: hidden; border-radius: 10px;
  aspect-ratio: 4 / 3; background: var(--nacht);
  box-shadow: 0 30px 60px -36px rgba(22,17,42,.7);
  clip-path: inset(0 round 10px);
  transition: clip-path .7s var(--ease-out), transform .7s var(--ease-out);
}
.pk:nth-child(6n+2) .pk__media, .pk:nth-child(6n+5) .pk__media { aspect-ratio: 4 / 5; }
.pk:hover .pk__media { clip-path: inset(3% round 18px); }
.pk__media img, .pk__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out), opacity .5s var(--ease);
}
.pk:hover .pk__media img { transform: scale(1.08); }
.pk__media video { opacity: 0; }
.pk.is-playing .pk__media video { opacity: 1; }
.pk__nr {
  position: absolute; z-index: 2; top: .9rem; left: .9rem;
  font-family: var(--display); font-weight: 900; font-size: 1.6rem; line-height: 1;
  background: var(--gelb); color: var(--nacht); padding: .3rem .55rem; border-radius: 6px;
}
.pk__badges { position: absolute; z-index: 2; top: .9rem; right: .9rem; display: flex; gap: .35rem; }
.pk__badge {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(11,8,22,.78); color: #fff; padding: .35rem .55rem; border-radius: 999px; backdrop-filter: blur(6px);
}
.pk__body { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-top: 1.1rem; }
.pk__name {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.2rem, 4.2vw, 3.8rem); line-height: .85; letter-spacing: 0;
  transition: color .3s var(--ease);
}
.pk:hover .pk__name { color: var(--pink-text); }
.pk__claim { font-family: var(--serif); font-style: italic; font-size: 1.25rem; margin-top: .35rem; font-variation-settings: "SOFT" 100, "WONK" 1; }
.pk__meta { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; text-align: right; flex: none; line-height: 1.6; opacity: .8; }
.pk__arrow {
  position: absolute; z-index: 2; right: 1rem; bottom: 1rem; width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--pink); color: #fff; display: grid; place-items: center; font-size: 1.4rem;
  transform: scale(0) rotate(-45deg); transition: transform .45s var(--ease-spring);
}
.pk:hover .pk__arrow, .pk:focus-visible .pk__arrow { transform: scale(1) rotate(0); }

/* --- Videowand ------------------------------------------------------------ */
.vwall { position: relative; }
.vwall__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 24vw, 320px);
  gap: clamp(.8rem, 1.6vw, 1.4rem);
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 1rem var(--pad) 2rem;
  scrollbar-width: thin; scrollbar-color: var(--gelb) transparent;
}
.vwall__track:focus-visible { outline: 3px solid var(--gelb); outline-offset: -3px; }
.vclip { scroll-snap-align: start; position: relative; margin: 0; }
.vclip__box {
  position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #000;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9);
  transform: rotate(var(--r, 0deg)); transition: transform .6s var(--ease-out);
}
.vclip:hover .vclip__box { transform: rotate(0) translateY(-6px); }
.vclip--quer { grid-column: span 2; }
.vclip--quer .vclip__box { aspect-ratio: auto; height: 100%; min-height: 100%; }
.vclip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vclip figcaption { margin-top: .8rem; font-size: 1rem; line-height: 1.35; }
.vclip figcaption b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; line-height: 1; }
.vclip__ctrl {
  position: absolute; z-index: 2; left: .7rem; bottom: .7rem; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  background: rgba(11,8,22,.75); color: #fff; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(6px); font-size: .95rem;
}
.vclip__ctrl:hover { background: var(--pink); border-color: var(--pink); }
.vwall__nav { display: flex; gap: .5rem; }
.vwall__btn { width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 1px solid currentColor; font-size: 1.3rem; display: grid; place-items: center; }
.vwall__btn:hover { background: var(--gelb); color: var(--nacht); border-color: var(--gelb); }

/* --- Mockup-Galerie ------------------------------------------------------- */
.mgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.mcard { grid-column: span 4; margin: 0; perspective: 900px; }
.mcard--w { grid-column: span 8; }
.mcard--h { grid-column: span 4; grid-row: span 2; }
@media (max-width: 900px) { .mcard, .mcard--w, .mcard--h { grid-column: 1 / -1; grid-row: auto; } }
.mcard__in {
  border-radius: 12px; overflow: hidden; background: var(--nacht-2);
  transform-style: preserve-3d; transition: transform .25s ease-out, box-shadow .3s;
  box-shadow: 0 30px 60px -36px rgba(0,0,0,.8);
  height: 100%;
}
.mcard__in img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.mcard--h .mcard__in img { aspect-ratio: auto; }
.mcard figcaption { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; margin-top: .6rem; opacity: .8; }

/* --- Bento-Galerie Projektseite ------------------------------------------ */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(140px, 16vw, 230px); gap: clamp(.6rem, 1.2vw, 1rem); }
.bento__item { position: relative; overflow: hidden; border-radius: 10px; background: var(--nacht); grid-column: span 2; grid-row: span 2; margin: 0; }
.bento__item:nth-child(5n+1) { grid-column: span 4; grid-row: span 3; }
.bento__item:nth-child(5n+4) { grid-column: span 3; }
.bento__item:nth-child(5n+5) { grid-column: span 3; }
@media (max-width: 760px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento__item, .bento__item:nth-child(n) { grid-column: span 2; grid-row: span 2; } }
.bento__item a { display: block; width: 100%; height: 100%; }
.bento__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.bento__item:hover img { transform: scale(1.06); }
.bento__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 1rem .9rem;
  background: linear-gradient(transparent, rgba(11,8,22,.85)); color: #fff; font-size: .95rem; font-weight: 600;
  transform: translateY(100%); transition: transform .45s var(--ease-out);
}
.bento__item:hover figcaption, .bento__item:focus-within figcaption { transform: none; }
@media (hover: none) { .bento__item figcaption { transform: none; } }

/* --- Projekt-Hero --------------------------------------------------------- */
.p-hero { background: var(--nacht); color: #f6efe2; margin-top: calc(var(--header-h) * -1); padding-top: calc(var(--header-h) + 2.5rem); padding-bottom: 0; overflow: clip; position: relative; }
.p-hero .eyebrow { color: #f6efe2; }
.p-hero__title { font-size: clamp(4rem, 13vw, 12rem); line-height: .8; color: #fff6df; text-shadow: 0 0 40px rgba(255,207,58,.25); margin-block: .6rem 1rem; word-break: break-word; }
.p-hero__claim { font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.6rem); color: var(--gelb); font-variation-settings: "SOFT" 100, "WONK" 1; max-width: 26ch; }
.p-hero__media { margin-top: clamp(2rem, 4vw, 3rem); position: relative; border-radius: 14px 14px 0 0; overflow: hidden; aspect-ratio: 16 / 8; background: #000; }
.p-hero__media img, .p-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.p-hero__media--hoch { aspect-ratio: 16 / 8; }
.p-hero__media--hoch video { object-fit: contain; background: radial-gradient(circle, #2e2452, #0b0816); }
.p-facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.p-facts > div { background: var(--kalk); padding: 1.2rem 1.4rem; }
.p-facts dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75; margin-bottom: .4rem; }
.p-facts dd { margin: 0; font-weight: 650; font-size: 1.1rem; }
@media (max-width: 760px) { .p-facts { grid-template-columns: 1fr 1fr; } }

.p-story { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 900px) { .p-story { grid-template-columns: 1fr; } }
.p-story__step { border-top: 3px solid var(--nacht); padding-top: 1.2rem; }
.p-story__step h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: .8rem; }
.p-story__step h3 span { color: var(--pink-text); }
.p-story__step p { font-size: 1.15rem; }

/* --- Zahlen --------------------------------------------------------------- */
.stats { border: 0; background: transparent; gap: clamp(.8rem, 1.6vw, 1.2rem); }
.stat { border-radius: 14px; background: var(--papier); border: 1px solid var(--line); }
.stat:nth-child(2) { background: var(--gelb); }
.stat:nth-child(3) { background: var(--nacht); color: #f6efe2; }
.stat:nth-child(4) { background: var(--pink); color: #fff; }
.stat__num { font-family: var(--display); font-weight: 900; font-size: clamp(4rem, 8vw, 7rem); line-height: .8; font-variation-settings: normal; }
.stat__label { font-family: var(--mono); font-size: .72rem; opacity: .9; }

/* --- Leistungen ----------------------------------------------------------- */
.svc__row { border-bottom-width: 1px; }
.svc__title { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: .9; font-variation-settings: normal; }
.svc__row:hover { background: var(--gelb); padding-inline: 1rem; }
.svc__row:hover .svc__title { color: var(--nacht); }
.svc__text { font-size: 1.08rem; max-width: 50ch; }
.svc__no { font-family: var(--display); font-weight: 900; font-size: 1.6rem; color: var(--pink-text); opacity: 1; }
.svc__price { font-family: var(--mono); font-size: .72rem; }

/* --- Zitat, Akkordeon, Formular, Karten ---------------------------------- */
.quote { font-family: var(--serif); font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 100, "WONK" 1; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.1; }
.acc__btn { font-family: var(--body); font-weight: 700; font-size: 1.2rem; padding-block: 1.3rem; }
.acc__panel > div { font-size: 1.1rem; }
.field > label { font-family: var(--body); font-weight: 700; font-size: .95rem; letter-spacing: 0; text-transform: none; }
.field input, .field textarea, .field select { font-size: 1.1rem; padding: 1rem 1.1rem; border-radius: 10px; border-width: 2px; }
.field__err { color: #a3141c; font-weight: 600; min-height: 1.2em; }
.contact__card { border-radius: 16px; background: var(--papier); }
.contact__list dd { font-size: 1.15rem; }
.form__out { margin-top: 1.6rem; padding: 1.4rem; border-radius: 16px; background: var(--nacht); color: #f6efe2; }
.form__out textarea { width: 100%; margin-top: .4rem; background: var(--nacht-2); color: #f6efe2; border: 1px solid rgba(246,239,226,.25); border-radius: 10px; padding: 1rem; font-family: var(--mono); font-size: .85rem; }
.form__out .field__hint a { color: var(--gelb); }
.form__out-lead { margin-bottom: 1rem; font-size: 1.15rem; }
.note { border-radius: 10px; }
.timeline__t { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.6rem; line-height: 1; font-variation-settings: normal; }
.timeline__y { font-family: var(--display); font-weight: 900; font-size: 1.5rem; color: var(--pink-text); }
.is-dark .timeline__y { color: var(--gelb); }
.timeline__d { font-size: 1.05rem; }
.skill { border-radius: 0; }
.skill__h { font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: 0; text-transform: uppercase; color: var(--pink-text); }
.skill ul { font-size: 1.05rem; }
.ptitle { font-family: var(--display); font-weight: 900; font-size: clamp(4rem, 12vw, 11rem); line-height: .8; font-variation-settings: normal; }
.legal { font-size: 1.1rem; }
.legal h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); }
.legal__stand { font-size: .74rem; }
.chip { font-family: var(--body); font-weight: 700; font-size: .98rem; letter-spacing: 0; text-transform: none; padding: .65rem 1.1rem; border-radius: 999px; border-width: 2px; }
.chip[aria-pressed="true"] { background: var(--nacht); color: var(--gelb); }
.filters { border: 0; padding: 0; }
.filters__count { font-size: .72rem; }
.pn__t { font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 5vw, 4.4rem); line-height: .85; font-variation-settings: normal; }
.pn__item:hover .pn__t { color: var(--pink-text); }
.footer { background: var(--nacht); }
.footer__claim { font-family: var(--display); font-weight: 900; font-size: clamp(3.4rem, 8vw, 7rem); line-height: .82; font-variation-settings: normal; }
.footer__claim .accent { color: var(--gelb); text-shadow: 0 0 30px rgba(255,207,58,.5); }
.footer__list a, .footer__list span { font-size: 1.05rem; }
.footer a:hover { color: var(--gelb); }
.err__code { font-family: var(--display); font-weight: 900; color: var(--pink-text); font-variation-settings: normal; }

/* --- Text-Enthüllung Wort für Wort --------------------------------------- */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; }
.split .w > span { display: inline-block; transform: translateY(110%) rotate(4deg); transition: transform .9s var(--ease-out); transition-delay: calc(var(--i) * 45ms); }
.split.is-in .w > span { transform: none; }

/* Bild-Wischer */
.wipe { position: relative; overflow: hidden; }
.wipe::after { content: ""; position: absolute; inset: 0; background: var(--gelb); transform-origin: right; transition: transform 1s var(--ease-out) .1s; z-index: 3; }
.wipe.is-in::after { transform: scaleX(0); }

/* --- Schwebender Assistent ----------------------------------------------- */
.kiw { position: fixed; z-index: 130; right: clamp(.9rem, 2vw, 1.6rem); bottom: clamp(5.2rem, 9vw, 6.2rem); }
.kiw__open {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--nacht); color: var(--beige); border-radius: 999px; padding: .75rem 1.1rem .75rem .8rem;
  font-weight: 700; font-size: 1rem; box-shadow: 0 16px 40px -14px rgba(22,17,42,.8);
  border: 2px solid var(--gelb);
  transition: transform .3s var(--ease-spring);
}
.kiw__open:hover { transform: translateY(-3px) scale(1.03); }
.kiw__avatar { width: 2rem; height: 2rem; border-radius: 50%; background: conic-gradient(from 0deg, var(--gelb), var(--pink), var(--petrol-hell), var(--gelb)); display: grid; place-items: center; font-family: var(--display); font-weight: 900; color: var(--nacht); font-size: 1rem; animation: drehen 6s linear infinite; }
.kiw__avatar span { animation: drehen 6s linear infinite reverse; display: inline-block; }
.kiw__panel {
  position: absolute; right: 0; bottom: calc(100% + .8rem);
  width: min(420px, calc(100vw - 1.8rem)); height: min(620px, calc(100svh - 9rem));
  display: none;
}
.kiw.is-open .kiw__panel { display: block; animation: aufploppen .35s var(--ease-spring); }
@keyframes aufploppen { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.kiw .ki { height: 100%; max-height: none; min-height: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px -24px rgba(22,17,42,.75); border: 2px solid var(--nacht); }
@media (max-width: 560px) { .kiw__open b { display: none; } .kiw__open { padding: .7rem; } }

.ki { border-radius: 18px; overflow: hidden; background: var(--papier); border: 2px solid var(--nacht); }
.ki__head { background: var(--nacht); color: var(--beige); border: 0; padding: .9rem 1rem; display: flex; align-items: center; gap: .7rem; }
.ki__title { font-family: var(--body); font-weight: 700; font-size: 1rem; letter-spacing: 0; text-transform: none; flex: 1; }
.ki__title small { display: block; font-family: var(--mono); font-size: .62rem; font-weight: 400; opacity: .75; letter-spacing: .04em; }
.ki__close { color: var(--beige); font-size: 1.2rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid rgba(246,239,226,.3); }
.ki__close:hover { background: var(--pink); }
.ki__log { background: var(--papier); padding: 1rem; gap: .7rem; }
.msg { font-size: 1.02rem; border-radius: 16px; border: 0; padding: .8rem 1rem; max-width: 92%; }
.msg--bot { background: var(--beige); border-bottom-left-radius: 4px; }
.msg--user { background: var(--nacht); color: var(--beige); border-bottom-right-radius: 4px; }
.msg--sys { background: transparent; border: 1px dashed var(--line-2); font-size: .8rem; }
.msg mark { background: var(--gelb); color: var(--nacht); padding: 0 .15em; border-radius: 3px; }
.msg a { color: var(--pink-text); font-weight: 700; }
.ki__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-top: .6rem; }
.ki__card { display: block; text-decoration: none !important; border-radius: 10px; overflow: hidden; background: var(--papier); border: 1px solid var(--line); color: var(--nacht) !important; }
.ki__card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.ki__card span { display: block; padding: .4rem .55rem; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; line-height: 1; }
.ki__suggest { background: var(--papier); padding: .2rem 1rem .8rem; }
.ki__suggest button, .ki__chip {
  font-family: var(--body); font-weight: 650; font-size: .88rem; letter-spacing: 0; text-transform: none;
  border: 1.5px solid var(--nacht); border-radius: 999px; padding: .4rem .75rem; background: transparent; color: var(--nacht);
}
.ki__suggest button:hover, .ki__chip:hover { background: var(--gelb); }
.ki__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.ki__form { background: var(--beige); border-top: 1px solid var(--line); }
.ki__form input { border-radius: 999px; border: 2px solid var(--nacht); font-size: 1rem; padding: .8rem 1rem; }
.ki__form .btn { padding: .7rem 1.1rem; }

/* WhatsApp-Knopf */
.wa { border-radius: 999px; font-family: var(--body); font-weight: 700; font-size: .95rem; text-transform: none; letter-spacing: 0; padding: .85rem 1.2rem .85rem 1rem; background: #1a8d4b; }
.wa svg { width: 22px; height: 22px; }

/* Cookie */
.cookie { border-radius: 18px; background: var(--nacht); border: 2px solid var(--gelb); }
.cookie h2 { font-family: var(--display); font-size: 1.8rem; text-transform: uppercase; font-weight: 900; }
.cookie p { font-size: 1rem; }
.cookie .btn { --btn-bg: var(--gelb); --btn-fg: var(--nacht); border-color: var(--gelb); }
.dialog { border-radius: 18px; border: 2px solid var(--nacht); }

/* Cursor-Licht im Hero */
.lr-hero__glow {
  position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,207,58,.18), transparent 65%);
  transform: translate(-50%, -50%); left: var(--mx, 70%); top: var(--my, 40%);
  transition: left .25s ease-out, top .25s ease-out;
}

/* --- Bewegung aus (Nutzerwunsch oder Systemeinstellung) ------------------ */
.no-motion *, .no-motion *::before, .no-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
.no-motion .ticker__track { animation: none !important; }
.no-motion .neon span { color: #fff6df !important; -webkit-text-stroke: 0 !important; text-shadow: 0 0 10px rgba(255,207,58,.6) !important; }
.no-motion .split .w > span, .no-motion [data-reveal] { transform: none !important; opacity: 1 !important; clip-path: none !important; }
.no-motion .wipe::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .neon span { color: #fff6df !important; -webkit-text-stroke: 0 !important; animation: none !important; text-shadow: 0 0 10px rgba(255,207,58,.6) !important; }
  .split .w > span { transform: none !important; transition: none !important; }
  .wipe::after { display: none; }
  .stempel svg, .kiw__avatar, .kiw__avatar span, .scroll-hint::after { animation: none !important; }
}

/* Fokus gut sichtbar auf beiden Flächen */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--pink-text); outline-offset: 3px; border-radius: 4px; }
.is-dark :where(a, button, input, textarea, select, [tabindex]):focus-visible, .lr-hero :where(a, button):focus-visible, .p-hero :where(a, button):focus-visible, .footer :where(a, button):focus-visible, .ki__head button:focus-visible { outline-color: var(--gelb); }
.skip { background: var(--gelb); color: var(--nacht); font-weight: 700; z-index: 300; }

/* --- Korrekturen nach Sichtprüfung --------------------------------------- */
.lr-hero__vor { margin-bottom: .12em; position: relative; z-index: 2; }
.neon { padding-top: .08em; }
.stempel text { font-size: 7.6px; letter-spacing: 1.1px; }
/* Automatisierte Browser / Druck: alles sofort sichtbar */
.is-static [data-reveal], .is-static .split .w > span { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
.is-static .wipe::after { display: none; }
.is-static .neon span { animation: none !important; color: #fff6df !important; -webkit-text-stroke: 0 !important; text-shadow: 0 0 10px rgba(255,207,58,.85), 0 0 34px rgba(255,140,60,.55) !important; }
.is-static .neon .neon__dot { color: var(--pink) !important; }
.is-static .pk__media img { transform: none !important; }
.is-static .ticker__track { animation: none !important; }
.is-static *, .is-static *::before, .is-static *::after { transition: none !important; }
.is-static .split .w { overflow: visible; }
@media print { [data-reveal], .split .w > span { opacity: 1 !important; transform: none !important; clip-path: none !important; } .wipe::after { display: none; } }

/* --- Einblendungen: sichtbar als Standard, versteckt nur unterhalb des Bildschirms --- */
[data-reveal] { opacity: 1; transform: none; }
[data-reveal="mask"] { clip-path: none; }
[data-reveal].pre:not(.is-in) { opacity: 1; transform: translateY(38px); }
[data-reveal].pre:not(.is-in) img { opacity: 1; }
[data-reveal="mask"].pre:not(.is-in) { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
.split .w > span { transform: none; }
.split.pre:not(.is-in) .w > span { transform: translateY(110%) rotate(4deg); }
.wipe::after { transform: scaleX(0); }
.wipe.pre:not(.is-in)::after { transform: scaleX(1); }


/* --- Seitenbausteine für Leistungen, Über mich, KI, Kontakt, Recht --------- */
.p-hero--kompakt { padding-bottom: clamp(2rem, 4vw, 3rem); }
.p-hero--kompakt .p-hero__title { font-size: clamp(3.4rem, 11vw, 9.5rem); }
.lead-xl { font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.35; max-width: 40ch; }

.svc-list { counter-reset: s; }
.svc-item {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(2rem, 4vw, 3.2rem);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
@media (max-width: 860px) { .svc-item { grid-template-columns: 1fr; } }
.svc-item__nr {
  font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: .8; color: var(--pink-text); display: block; margin-bottom: .8rem;
}
.is-dark .svc-item__nr { color: var(--gelb); }
.svc-item__t { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: .9; margin-bottom: 1rem; }
.svc-item__d { font-size: 1.15rem; }
.svc-item__punkte { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; padding: 0; }
.svc-item__punkte li {
  list-style: none; font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  border: 1.5px solid var(--nacht); border-radius: 999px; padding: .35rem .7rem;
}
.is-dark .svc-item__punkte li { border-color: rgba(246,239,226,.5); }

.steps { display: grid; gap: clamp(1rem,2vw,1.6rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.step { background: var(--papier); border: 2px solid var(--nacht); border-radius: 16px; padding: 1.5rem; position: relative; }
.step__n {
  font-family: var(--display); font-weight: 900; font-size: 3.4rem; line-height: .8;
  color: var(--pink); display: block; margin-bottom: .6rem;
}
.step__t { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; line-height: 1; margin-bottom: .5rem; }
.step p { font-size: 1.02rem; }

.faq-wrap { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(1.5rem,4vw,4rem); align-items: start; }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; } }

.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.6rem,4vw,3.5rem); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { background: var(--nacht); color: #f6efe2; border-radius: 20px; padding: clamp(1.4rem,2.6vw,2rem); }
.contact-card h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.8rem; margin-bottom: 1.2rem; }
.contact-card a { color: var(--gelb); }
.contact-card .btn { width: 100%; justify-content: center; margin-top: 1.4rem; }
.contact-card dl { display: grid; gap: 1rem; }
.contact-card dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75; margin-bottom: .2rem; }
.contact-card dd { margin: 0; font-size: 1.12rem; font-weight: 600; }

.legal-layout { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: clamp(1.5rem,4vw,4rem); align-items: start; }
@media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; } }
.legal-layout .toc { position: sticky; top: calc(var(--header-h) + 1.5rem); border: 2px solid var(--nacht); border-radius: 14px; background: var(--papier); }
.legal-layout .toc a { text-decoration: none; padding: .3rem 0; display: block; border-bottom: 1px solid var(--line); }
.legal-layout .toc a:last-child { border-bottom: 0; }
.legal-layout .toc a:hover { color: var(--pink-text); }
@media (max-width: 900px) { .legal-layout .toc { position: static; } }
.legal h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.legal h3 { font-family: var(--body); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 1.2rem; }
.ph { background: var(--gelb); padding: 0 .25em; border-radius: 3px; font-weight: 700; }

.err-hero { background: var(--nacht); color: #f6efe2; margin-top: calc(var(--header-h) * -1); padding: calc(var(--header-h) + 3rem) 0 3rem; text-align: center; }
.err-hero__code {
  font-family: var(--display); font-weight: 900; font-size: clamp(9rem, 30vw, 26rem); line-height: .74;
  color: transparent; -webkit-text-stroke: 3px var(--gelb); letter-spacing: -.02em;
}

/* --- Porträts ------------------------------------------------------------- */
.signatur {
  display: flex; align-items: center; gap: .85rem; margin-top: 1.8rem;
  text-decoration: none; color: inherit;
}
.signatur__bild {
  width: 3.6rem; height: 3.6rem; border-radius: 50%; overflow: hidden; flex: none;
  border: 2px solid var(--gelb); box-shadow: 0 0 0 4px rgba(255,207,58,.14);
}
.signatur__bild img { width: 100%; height: 100%; object-fit: cover; }
.signatur__text { font-size: .95rem; line-height: 1.3; }
.signatur__text b { display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.25rem; letter-spacing: .01em; }
.signatur__text span { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }

.bild-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(.7rem,1.4vw,1.1rem); }
.bild-band figure { margin: 0; position: relative; overflow: hidden; border-radius: 12px; background: var(--nacht); }
.bild-band img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; transition: transform .9s var(--ease-out); }
.bild-band figure:hover img { transform: scale(1.05); }
.bild-band figcaption {
  position: absolute; left: .7rem; bottom: .7rem; font-family: var(--mono); font-size: .6rem;
  letter-spacing: .08em; text-transform: uppercase; background: rgba(11,8,22,.8); color: #fff;
  padding: .3rem .5rem; border-radius: 4px;
}
.portrait-rund { border-radius: 50%; overflow: hidden; border: 3px solid var(--gelb); width: clamp(76px, 12vw, 104px); aspect-ratio: 1; flex: none; }
.portrait-rund img { width: 100%; height: 100%; object-fit: cover; }
.portrait--hoch { border-radius: 16px; overflow: hidden; }
.portrait--hoch img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.ich-band { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
@media (max-width: 860px) { .ich-band { grid-template-columns: 1fr; } }

/* --- Ende der Einblende-Logik: Inhalt ist IMMER sichtbar ------------------
   Die Wisch-Fläche und der Wort-Clip haben auf langen Seiten Inhalte verdeckt.
   Animation bleibt als sanfte Bewegung (Transform), aber nie als Verdeckung. */
.wipe::after { display: none !important; }
.split .w { overflow: visible !important; }
.split .w > span { transform: none !important; }
.split.pre:not(.is-in) .w > span { transform: translateY(18px) !important; opacity: .001; }
.split.is-in .w > span { transform: none !important; opacity: 1; transition: transform .8s var(--ease-out), opacity .5s; }

/* Text wird NIE verdeckt – Animation nur als Bewegung, nie als Unsichtbarkeit */
.split .w, .split .w > span { opacity: 1 !important; transform: none !important; overflow: visible !important; }

/* ==========================================================================
   FEINSCHLIFF: keine überlappenden Texte, voller Viewport
   ========================================================================== */
:root {
  --shell: 100%;
  --pad: clamp(1.1rem, 3.4vw, 3.4rem);
  --header-h: 4.6rem;
}
.shell { max-width: 100%; }
h1, h2, h3 { line-height: .95; }
.big-h, .sechead h2 { line-height: .9; }
.big-h .ital { display: inline; }
.p-hero__title {
  line-height: .88 !important;
  padding-block: .04em .1em;
  margin-block: .35rem 1rem;
}
.p-hero__claim { margin-top: .6rem; line-height: 1.25; font-size: clamp(1.3rem, 2.2vw, 1.9rem); max-width: 30ch; }
.lr-hero__vor { display: block; line-height: .95; margin-bottom: .18em; }
.neon { line-height: .8; }
.hero__lead, .lr-hero__lead { line-height: 1.42; }
.section { padding-block: clamp(3.5rem, 7vw, 7rem); }
.eyebrow { margin-bottom: .9rem; }
.signatur { margin-top: 1.4rem; }

/* Hero über die volle Höhe, Hintergrundgrafik */
.lr-hero--bg {
  min-height: 100svh;
  display: flex;
  align-items: center;
  background-image:
    radial-gradient(60% 55% at 76% 34%, rgba(255,77,126,.26), transparent 62%),
    radial-gradient(55% 50% at 12% 88%, rgba(14,124,116,.40), transparent 64%),
    linear-gradient(100deg, #16112a 0%, #1a1330 48%, #221a3d 100%);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
/* Person: Schultern laufen in den Hintergrund aus */
.lr-hero__person {
  position: relative; align-self: end; justify-self: end;
  width: min(100%, 560px); margin-bottom: -2.5rem;
  pointer-events: none;
}
.lr-hero__person img {
  width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0,0,0,.65) 89%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0,0,0,.65) 89%, transparent 100%);
  filter: drop-shadow(0 0 60px rgba(255,77,126,.28)) drop-shadow(0 30px 60px rgba(0,0,0,.55));
}
.lr-hero__person::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 32%;
  background: linear-gradient(180deg, transparent, var(--nacht) 92%);
  pointer-events: none;
}
@media (max-width: 980px) {
  .lr-hero__person { width: min(78%, 420px); justify-self: center; margin-top: -1rem; margin-bottom: -1.5rem; }
}
.lr-hero--bg::before { opacity: .04; }
.lr-hero--bg .lr-hero__grid { grid-template-columns: minmax(0, 56%) minmax(0, 44%); min-height: calc(100svh - var(--header-h) - 7rem); }
.lr-hero--bg .lr-hero__lead { max-width: 36ch; }
@media (max-width: 980px) {
  .lr-hero--bg { min-height: auto; background-position: 70% center; }
  .lr-hero--bg .lr-hero__grid { grid-template-columns: 1fr; }
}
/* Startseite: Sektionen randlos breiter */
.work-full { width: 100%; }
.footer .shell, .header__inner { max-width: 100%; }

/* Hero: Abstand zwischen Riesentypo und Fließtext, keine Überlappung */
.lr-hero h1 { margin-bottom: clamp(1.2rem, 2.6vw, 2.4rem); }
.lr-hero__lead { margin-top: 0; max-width: 34ch; }
.neon { margin-bottom: .02em; }
.lr-hero--bg .lr-hero__lead { color: #f3ece0; text-shadow: 0 2px 18px rgba(10,6,24,.9); }
.lr-hero--bg .signatur { background: rgba(10,8,22,.55); padding: .5rem .9rem .5rem .5rem; border-radius: 999px; backdrop-filter: blur(8px); width: fit-content; }

/* Riesentypo bekommt Luft: keine Überlappung mit dem Fließtext */
.neon { font-size: clamp(5rem, 16.5vw, 14.5rem); line-height: .84; padding-bottom: .1em; }
.lr-hero h1 { margin-bottom: clamp(1.8rem, 3.4vw, 3rem); }
.lr-hero__lead { position: relative; z-index: 2; }


/* ==========================================================================
   KORREKTUREN & AUSBAU — Footer, Hero, Arbeiten, Animationen
   ========================================================================== */

/* --- Footer: kein Überlappen mehr ---------------------------------------- */
.footer { padding-block: clamp(3rem, 5vw, 4.5rem) 1.6rem; }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: start;
}
.footer__top > * { min-width: 0; }
.footer__claim {
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: .92;
  letter-spacing: -.01em;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
  hyphens: auto;
}
.footer__list { display: grid; gap: .5rem; }
.footer__list a, .footer__list span {
  font-size: 1rem; line-height: 1.45; overflow-wrap: anywhere; word-break: break-word;
}
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: .7rem 1.6rem;
  align-items: center; justify-content: space-between;
  padding-top: 1.4rem; line-height: 1.6;
}
.footer__bottom > * { min-width: 0; }
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
.footer__bottom span, .footer__bottom a, .footer__bottom button { font-size: .66rem; }
@media (max-width: 900px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }

/* --- Hero: volle Höhe, keine Überlappung -------------------------------- */
.lr-hero--bg {
  min-height: calc(100svh - var(--header-h));
  padding-block: clamp(2.4rem, 5vw, 4.5rem) clamp(2.4rem, 5vw, 4rem);
  display: flex; align-items: center;
}
.lr-hero--bg .lr-hero__grid {
  min-height: 0;
  grid-template-columns: minmax(0, 58%) minmax(0, 42%);
  align-items: center;
}
.neon { font-size: clamp(4.2rem, 12.5vw, 11.5rem); line-height: .86; padding-bottom: .08em; }
.lr-hero__vor { font-size: clamp(1.9rem, 4.2vw, 3.8rem); margin-bottom: .14em; line-height: 1; }
.lr-hero h1 { margin-block: .2rem clamp(1.4rem, 2.6vw, 2.2rem); }
.lr-hero__lead {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5; max-width: 40ch; margin: 0;
}
.lr-hero__actions { margin-top: 1.5rem; }
@media (max-height: 820px) and (min-width: 981px) {
  .neon { font-size: clamp(4rem, 10vw, 8.5rem); }
  .lr-hero__vor { font-size: clamp(1.7rem, 3.2vw, 2.8rem); }
  .lr-hero__lead { font-size: 1.05rem; }
}
@media (max-width: 980px) {
  .lr-hero--bg { min-height: auto; padding-block: 2.4rem 3rem; }
  .lr-hero--bg .lr-hero__grid { grid-template-columns: 1fr; }
}

/* --- AUSGEWÄHLTE ARBEITEN: neue Sektion --------------------------------- */
.works { position: relative; }
.works__head {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(1.4rem, 3vw, 3rem); align-items: end; margin-bottom: clamp(2.4rem, 4vw, 3.6rem);
}
@media (max-width: 900px) { .works__head { grid-template-columns: 1fr; } }
.works__title {
  font-size: clamp(2.6rem, 6.4vw, 6rem); line-height: .88; text-transform: uppercase;
  margin: .5rem 0 0;
}
.works__title .ital { text-transform: none; color: var(--pink-text); font-size: .9em; }
.works__lead { font-size: clamp(1.05rem, 1.3vw, 1.22rem); line-height: 1.55; max-width: 42ch; }
.works__stats { display: flex; gap: clamp(1rem, 2.4vw, 2.4rem); flex-wrap: wrap; margin-top: 1.2rem; }
.works__stat b {
  display: block; font-family: var(--display); font-weight: 900; font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: .85; letter-spacing: -.01em;
}
.works__stat span { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }

.works__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(1.2rem, 2.4vw, 2.2rem); }
.wc { grid-column: span 3; margin: 0; position: relative; }
.wc--lead { grid-column: 1 / -1; }
.wc--third { grid-column: span 2; }
@media (max-width: 900px) { .wc, .wc--lead, .wc--third { grid-column: 1 / -1; } }

.wc__link { display: block; text-decoration: none; color: inherit; position: relative; }
.wc__media {
  position: relative; overflow: hidden; border-radius: 14px; background: var(--nacht);
  aspect-ratio: 4 / 3; box-shadow: 0 24px 50px -30px rgba(22,17,42,.55);
  isolation: isolate;
}
.wc--lead .wc__media { aspect-ratio: 16 / 8; }
.wc--third .wc__media { aspect-ratio: 4 / 5; }
.wc__media img, .wc__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out), opacity .45s ease;
}
.wc__media video { opacity: 0; z-index: 1; }
.wc:hover .wc__media video, .wc:focus-within .wc__media video { opacity: 1; }
.wc:hover .wc__media img { transform: scale(1.07); }
.wc__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,8,22,0) 45%, rgba(10,8,22,.72) 100%);
  opacity: .85; transition: opacity .4s ease;
}
.wc:hover .wc__veil { opacity: 1; }
.wc__nr {
  position: absolute; z-index: 3; top: .8rem; left: .8rem;
  font-family: var(--display); font-weight: 900; font-size: 1.25rem; line-height: 1;
  background: var(--gelb); color: var(--nacht); padding: .3rem .5rem; border-radius: 6px;
}
.wc__tags { position: absolute; z-index: 3; top: .8rem; right: .8rem; display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.wc__tag {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .07em; text-transform: uppercase;
  background: rgba(10,8,22,.76); color: #fff; padding: .3rem .5rem; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.wc__cap {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  padding: 1.2rem clamp(.9rem, 1.6vw, 1.4rem) clamp(.9rem, 1.6vw, 1.2rem);
  color: #fff; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.wc__name {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.6vw, 2.6rem); line-height: .92; letter-spacing: .005em;
  transition: transform .45s var(--ease-out);
}
.wc--lead .wc__name { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.wc:hover .wc__name { transform: translateY(-4px); }
.wc__claim {
  font-family: var(--serif); font-style: italic; font-size: clamp(.95rem, 1.2vw, 1.15rem);
  color: var(--gelb); margin-top: .25rem; font-variation-settings: "SOFT" 100, "WONK" 1;
}
.wc__meta {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase;
  text-align: right; flex: none; opacity: .85; line-height: 1.5;
}
.wc__go {
  width: 3rem; height: 3rem; border-radius: 50%; background: var(--pink); color: #fff;
  display: grid; place-items: center; font-size: 1.25rem; flex: none;
  transform: scale(.6) rotate(-30deg); opacity: 0;
  transition: transform .45s var(--ease-spring), opacity .3s;
}
.wc:hover .wc__go, .wc:focus-within .wc__go { transform: none; opacity: 1; }
.wc__line {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--gelb);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); z-index: 4;
}
.wc:hover .wc__line { transform: scaleX(1); }

/* --- Mehr Bewegung, ohne Inhalte zu verstecken ------------------------- */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(255,207,58,.45); } 70% { box-shadow: 0 0 0 14px rgba(255,207,58,0); } 100% { box-shadow: 0 0 0 0 rgba(255,207,58,0); } }
@keyframes drawLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.badge-live { animation: pulseRing 2.6s infinite; }
.floaty { animation: floaty 7s ease-in-out infinite; }
.section .sechead h2 .ital { display: inline-block; }
.head-rule {
  height: 3px; background: var(--nacht); transform-origin: left;
  animation: drawLine 1.1s var(--ease-out) both; margin-top: 1.2rem; max-width: 220px;
}
.is-dark .head-rule { background: var(--gelb); }

.chip-badge--live::before { animation: puls 2s infinite; }
.ticker__group { will-change: transform; }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* Karten heben sich leicht an */
.wc__link { transition: transform .5s var(--ease-out); }
.wc:hover .wc__link { transform: translateY(-4px); }

/* Zahlen-Band animiert */
.stat { position: relative; overflow: hidden; }
.stat::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  background-size: 200% 100%; transition: opacity .3s;
}
.stat:hover::after { opacity: 1; animation: shimmer 1.1s linear; }

/* Buttons: Lichtkante */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 200% 0; transition: background-position .7s ease;
}
.btn:hover::after { background-position: -60% 0; }

/* Footer: dezente Leuchtlinie oben */
.footer { position: relative; }
.footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--pink), var(--gelb), var(--petrol-hell), transparent);
  opacity: .8;
}
.footer__claim .accent { position: relative; }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .floaty, .badge-live, .chip-badge--live::before, .head-rule { animation: none !important; }
  .wc:hover .wc__link { transform: none; }
}

/* --- Schwarzer Keil: gedrehte Laufbänder entfernen, Ebenen ordnen --------- */
.ticker, .ticker--pink { transform: none !important; margin-block: 0 !important; }
body::after { z-index: 0; }
main, .footer, .section, .lr-hero, .p-hero, .err-hero { position: relative; z-index: 1; }
.footer { background: var(--nacht); isolation: isolate; }
html, body { overflow-x: clip; }

/* Papierkorn-Overlay entfernt: als fixed-Element verursachte es beim
   Seitenaufbau und in Ganzseiten-Ansichten einen dunklen Keil. */
body::after { display: none !important; }
.about-teaser__stamp { transform: rotate(-2deg); }
.vclip__box { transform: none; }
.section, .works, .footer, .lr-hero, .p-hero { overflow: clip; }

/* --- Arbeiten-Karten: Bildunterschrift entzerrt -------------------------- */
.wc__cap {
  flex-wrap: wrap;
  align-items: flex-end;
  padding-bottom: clamp(1.1rem, 2vw, 1.5rem);
  row-gap: .4rem;
}
.wc__cap > span:first-child { min-width: 0; flex: 1 1 60%; }
.wc__name { display: block; }
.wc__claim { display: block; margin-top: .4rem; line-height: 1.15; }
.wc--third .wc__cap { flex-direction: column; align-items: flex-start; gap: .5rem; }
.wc--third .wc__name { font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
.wc--third .wc__claim { font-size: .95rem; }
.wc--third .wc__meta { text-align: left; order: 3; }
.wc--third .wc__go { position: absolute; right: .9rem; bottom: .9rem; }
.wc__media { background: var(--nacht-2); }
.wc__veil { background: linear-gradient(180deg, rgba(10,8,22,0) 35%, rgba(10,8,22,.55) 65%, rgba(10,8,22,.88) 100%); }

/* Zahlen: Wert steht sofort da, Animation startet erst beim Scrollen */
.works__stat b, .stat__num { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   FEINSCHLIFF 2 — 100 px Rand, Mockups, kein Leerraum
   ========================================================================== */
:root { --rand: 100px; }
@media (max-width: 1400px) { :root { --rand: clamp(1.2rem, 5vw, 100px); } }

.shell { padding-inline: var(--rand) !important; max-width: 100% !important; }
.header__inner { padding-inline: var(--rand); }
.topbar { padding-inline: var(--rand); }
.vwall__track { padding-inline: var(--rand); }
@media (max-width: 640px) { :root { --rand: 1.1rem; } }

/* Mockups: kein 1-px-Kollaps, feste Formate */
.mgrid { align-items: stretch; }
.mcard { display: flex; flex-direction: column; }
.mcard__in { display: block; flex: 1; min-height: 0; }
.mcard__in img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; object-position: center;
}
.mcard--h .mcard__in img { aspect-ratio: auto; height: 100%; min-height: 420px; }
@media (max-width: 900px) { .mcard--h .mcard__in img { min-height: 320px; } }
.mcard figcaption { flex: none; }

/* Mockups: 3D-Kontext entfernt (verhinderte in manchen Renderern das Zeichnen) */
.mcard { perspective: none; }
.mcard__in { transform-style: flat; background: var(--beige-2); }
.mcard__in img { display: block; opacity: 1 !important; visibility: visible; }

/* Mockup-Karten: flaches, robustes Markup */
.mcard {
  display: block; margin: 0; perspective: none;
  grid-column: span 4;
}
.mcard__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: center;
  border-radius: 12px; background: var(--nacht);
  box-shadow: 0 24px 50px -34px rgba(0,0,0,.55);
}
.mcard--w { grid-column: span 8; }
.mcard--h { grid-column: span 4; grid-row: span 2; }
.mcard--h .mcard__img { aspect-ratio: 4 / 5; height: 100%; }
.mcard--w .mcard__img { aspect-ratio: 16 / 9; }
.mcard figcaption {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; margin-top: .6rem; opacity: .8;
}
@media (max-width: 900px) {
  .mcard, .mcard--w, .mcard--h { grid-column: 1 / -1; grid-row: auto; }
  .mcard--h .mcard__img, .mcard--w .mcard__img { aspect-ratio: 4 / 3; height: auto; }
}
.mgrid { align-items: start; }

/* Kein Clipping auf Sektionen – verhinderte in der Mockup-Sektion das Zeichnen */
.section, .works, .footer, .lr-hero, .p-hero { overflow: visible; }

/* Mockup-Karten: identische Struktur wie die funktionierenden Projektkarten */
.mcard__media {
  position: relative; overflow: hidden; border-radius: 14px; background: var(--beige-2);
  aspect-ratio: 16 / 9; box-shadow: 0 24px 50px -34px rgba(0,0,0,.5);
}
.mcard__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
.mcard:not(.mcard--w) .mcard__media { aspect-ratio: 4 / 3; }
.mcard--h .mcard__media { aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .mcard--h .mcard__media, .mcard__media { aspect-ratio: 4 / 3; } }


/* --- Footer: Umlaute schneiden nicht mehr in die Zeile darüber ---------- */
.footer__claim {
  line-height: 1.02 !important;
  padding-block: .06em .1em;
  overflow: visible;
  margin-bottom: 1.6rem;
}
.footer__claim > * { display: block; }
.footer__brand { display: flex; flex-direction: column; gap: .2rem; }
.footer__brand .btn { align-self: flex-start; margin-top: 1.2rem; }
.footer__top { row-gap: clamp(1.6rem, 3vw, 2.6rem); }
.footer__claim .accent { display: inline-block; padding-bottom: .08em; }
.footer__h { margin-bottom: .8rem; }

/* Mockups: Entwurf komplett zeigen statt anschneiden */
.mcard__media { aspect-ratio: auto !important; }
.mcard__media img {
  position: static !important;
  width: 100%; height: auto;
  object-fit: contain !important;
  display: block;
}
.mcard--w .mcard__media, .mcard--h .mcard__media { aspect-ratio: auto !important; }

/* Mockup-Kacheln: schlicht und robust */
.mcard { display: block; margin: 0; }
.mcard img { width: 100%; height: auto; display: block; border-radius: 12px; }
.mcard figcaption { margin-top: .6rem; }

/* --- Arbeiten als Videowand-Spur ------------------------------------------ */
.vwall__track--works { grid-auto-columns: clamp(260px, 30vw, 420px); align-items: start; padding-top: 1.6rem; }
.vclip--img .vclip__box--img {
  display: block; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden;
  background: var(--nacht); position: relative;
  box-shadow: 0 34px 70px -34px rgba(0,0,0,.85);
}
.vclip--img .vclip__box--img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out), opacity .4s ease;
}
.vclip--img .vclip__box--img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.vclip--img:hover .vclip__box--img video { opacity: 1; }
.vclip--img:hover .vclip__box--img img { transform: scale(1.06); }
.vclip__nr {
  position: absolute; z-index: 3; top: .8rem; left: .8rem;
  font-family: var(--display); font-weight: 900; font-size: 1.15rem; line-height: 1;
  background: var(--gelb); color: var(--nacht); padding: .28rem .5rem; border-radius: 6px;
}
.vclip__go {
  position: absolute; z-index: 3; right: .7rem; bottom: .7rem; width: 2.9rem; height: 2.9rem;
  border-radius: 50%; background: var(--pink); color: #fff; display: grid; place-items: center;
  font-size: 1.2rem; transform: scale(.55) rotate(-30deg); opacity: 0;
  transition: transform .45s var(--ease-spring), opacity .3s;
}
.vclip--img:hover .vclip__go, .vclip--img:focus-within .vclip__go { transform: none; opacity: 1; }

/* --- Mockups: Rahmen und Nachtglühen -------------------------------------- */
.mcard { display: block; margin: 0; }
.mcard img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 30px 60px -40px rgba(22,17,42,.7); }
.mcard figcaption, .ncard figcaption {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .07em; text-transform: uppercase;
  margin-top: .7rem; opacity: .75;
}
.nacht { margin-top: clamp(2.6rem, 5vw, 4.4rem); padding-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid rgba(22,17,42,.14); }
.nacht__titel { font-family: var(--display); font-weight: 900; font-size: clamp(1.5rem, 2.6vw, 2.2rem); text-transform: uppercase; line-height: 1; margin-bottom: 1.2rem; }
.nacht__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.8rem, 1.6vw, 1.4rem); }
.ncard { grid-column: span 2; margin: 0; }
.ncard:nth-child(1), .ncard:nth-child(2) { grid-column: span 3; }
.ncard img { width: 100%; height: auto; display: block; border-radius: 14px; transition: transform .8s var(--ease-out), filter .6s ease, box-shadow .6s ease; }
.ncard:hover img { transform: translateY(-4px); box-shadow: 0 0 60px -8px rgba(255,180,80,.75); filter: brightness(1.12) saturate(1.25); }
@media (max-width: 900px) { .ncard, .ncard:nth-child(1), .ncard:nth-child(2) { grid-column: 1 / -1; } }
.vwall .vwall__track--works { grid-auto-columns: clamp(240px, 26vw, 400px); }
.vclip--img figcaption b { font-size: 1.35rem; }

/* Spur-Innenabstand erzwingen (erste Karte darf nicht kleben) */
.vwall .vwall__track { padding-left: var(--pad); padding-right: var(--pad); scroll-padding-left: var(--pad); }
.nacht .ncard { display: block; }
.nacht .ncard img { display: block; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- Kontrast-Korrekturen Fähigkeiten-Seite ------------------------------- */
.p-hero { color: #f6efe2; }
.p-hero .p-hero__claim { color: var(--gelb); text-shadow: 0 2px 16px rgba(10,6,24,.55); }
.p-hero .eyebrow { color: var(--gelb); }
.p-hero .p-hero__title, .p-hero__title { color: #f6efe2; }
.svc-list .svc-item__t { color: var(--nacht); }
.svc-list .svc-item__d { color: #241a3d; }
.svc-list .svc-item__punkte li { color: #241a3d; border-color: rgba(34,26,61,.45); }
.svc-list .svc-item { border-color: rgba(34,26,61,.16); }
.ich-band .lead, .ich-band p { color: #241a3d; }
.steps .step p { color: rgba(246,239,226,.85); }