/* ==========================================================================
   TOMORROW ADVENTURE – Entwurf 3 "Collage"
   Desktop: alles auf einer Fläche (100vw × 100vh). Hover bewegt & blendet ein,
   Klick öffnet ein Panel. Mobil/klein: dieselben Kacheln untereinander.
   ========================================================================== */
:root {
  --bg: #080808; --panel: #111113; --fg: #f5f2ec; --muted: rgba(245,242,236,.6); --line: rgba(245,242,236,.14);
  --tile-bg: #151517; --glass: rgba(8,8,8,.62); --glass-line: rgba(255,255,255,.14); --glass-fg: #fff; --glass-muted: rgba(255,255,255,.78);
  --field: rgba(255,255,255,.05); --lead: rgba(245,242,236,.85);
  --dim: brightness(.42) saturate(.55); --panel-bg-filter: blur(3px) brightness(.55);
  --vignette: rgba(0,0,0,.34); --light: rgba(255,240,230,.07); --grain: .09;
  --disc-bg: radial-gradient(closest-side, rgba(14,14,16,.78), rgba(14,14,16,.6) 80%, rgba(14,14,16,.45));
  --disc-img: blur(22px) brightness(.32) saturate(1.3);
  --nav-bg: rgba(12,12,14,.55); --nav-line: rgba(255,255,255,.16);
  --pink: #f8a3bc; --violet: #7b5cff; --blue: #3aa0ff; --teal: #19e3d4; --coral: #ff8a6b;
  --sans: "Inter Tight", system-ui, sans-serif;
  --geo: "Montserrat", "Inter Tight", sans-serif;
  --brush: "Caveat Brush", cursive;
  --ease: cubic-bezier(.16,1,.3,1);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #f1ece4; --panel: #faf7f2; --fg: #17161b; --muted: rgba(23,22,27,.62); --line: rgba(23,22,27,.14);
  --tile-bg: #e4ddd2; --glass: rgba(250,247,242,.8); --glass-line: rgba(23,22,27,.1); --glass-fg: #17161b; --glass-muted: rgba(23,22,27,.7);
  --field: rgba(23,22,27,.04); --lead: rgba(23,22,27,.82);
  --dim: grayscale(.65) brightness(1.18) contrast(.78); --panel-bg-filter: blur(3px) brightness(1.04) saturate(.6);
  --vignette: rgba(60,40,20,.14); --light: rgba(255,250,240,.16); --grain: .12;
  --disc-bg: radial-gradient(closest-side, rgba(250,247,242,.86), rgba(250,247,242,.74) 80%, rgba(250,247,242,.6));
  --disc-img: blur(22px) brightness(1.25) saturate(.9) opacity(.55);
  --nav-bg: rgba(250,247,242,.72); --nav-line: rgba(23,22,27,.12);
  --pink: #e0628a; --teal: #13a597;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 400 1rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.logo {
  display: block; aspect-ratio: 1697/282; background: var(--fg);
  -webkit-mask: url(../assets/m/logo-900.webp) center / contain no-repeat;
          mask: url(../assets/m/logo-900.webp) center / contain no-repeat;
}

/* ==========================================================================
   STAGE (Desktop)
   ========================================================================== */
.stage { position: relative; width: 100vw; height: 100vh; height: 100svh; overflow: hidden; background: var(--bg); transition: filter .6s var(--ease); }
body.is-panel .stage { filter: var(--panel-bg-filter); }
/* Licht folgt der Maus + Filmkorn */
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: 24; pointer-events: none;
  background: radial-gradient(38vmax 38vmax at calc(var(--lx, 50) * 1%) calc(var(--ly, 50) * 1%), var(--light), transparent 60%, var(--vignette) 100%);
  transition: opacity .6s;
}
.stage::before {
  content: ""; position: absolute; inset: -50%; z-index: 25; pointer-events: none; opacity: var(--grain); mix-blend-mode: overlay;
  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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); } }
.stage [data-depth] { translate: calc(var(--tx, 0) * 1px) calc(var(--ty, 0) * 1px); }

/* ---------- Kacheln ---------- */
.tile {
  position: absolute; cursor: pointer; outline: none;
  clip-path: var(--clip);
  transform: perspective(1200px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg));
  transition: scale .7s var(--ease), filter .5s var(--ease);
  will-change: transform;
}
/* Parallax-Ebenen: Hintergrund gegen, Vordergrund mit der Maus (Werte kommen aus JS) */
.tile__media { translate: calc(var(--bx, 0) * 1px) calc(var(--by, 0) * 1px); scale: 1.1; }
.tile__label, .tile__info, .phone { translate: calc(var(--fx, 0) * 1px) calc(var(--fy, 0) * 1px); }
.tile__media { position: absolute; inset: 0; overflow: hidden; background: var(--tile-bg); }
.tile__media img, .tile__media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease); }
.tile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,8,.1), rgba(8,8,8,.45)); transition: opacity .5s; }
.tile.is-hover .tile__media img, .tile.is-hover .tile__media video { transform: scale(1); }
.tile.is-hover .tile__media::after { opacity: .5; }
.tile.is-hover { scale: 1.035; z-index: 20 !important; }
.stage.is-focus .tile:not(.is-hover),
.stage.is-focus .ring-wrap:not(.is-hover),
.stage.is-focus .phone:not(.is-hover),
.stage.is-focus:not(:has(.tile--picture.is-hover)):not(:has(.polas:hover)) .polas { filter: var(--dim); }
.stage.is-focus .bigword { opacity: .18; }

.tile--design { left: 25%; top: 43%; width: 50%; height: 57%; z-index: 1; }
.tile--wedding { left: 0;   top: 0;   width: 40%; height: 53%; z-index: 2; }
.tile--editing { left: 61%; top: 0;   width: 39%; height: 58%; z-index: 2; }
.tile--events  { left: 26%; top: 0;   width: 46%; height: 50%; z-index: 3; }
.tile--social  { left: 0;   top: 46%; width: 38%; height: 54%; z-index: 4; }
.tile--moments { left: 72%; top: 56%; width: 28%; height: 44%; z-index: 4; }

.mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; }
.mosaic img { min-height: 0; }
.tile--moments .tile__media::after { background: linear-gradient(90deg, rgba(8,8,8,.15), rgba(8,8,8,.62)); }

/* Labels (dünne Versalien wie im Moodboard) */
.tile__label {
  position: absolute; z-index: 2; pointer-events: none;
  font: 200 clamp(1.4rem, 2.8vw, 3.1rem)/1 var(--geo); letter-spacing: .3em; text-transform: uppercase;
  color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.5);
  transition: opacity .4s, transform .6s var(--ease);
}
.tile__label--bold { font: 700 clamp(1.1rem, 1.8vw, 1.9rem)/1.15 var(--geo); letter-spacing: .01em; text-transform: none; }
.tile--wedding .tile__label { left: 6%; bottom: 7%; }
.tile--events  .tile__label { left: 20%; top: 12%; }
.tile--editing .tile__label { right: 5%; top: 60%; }
.tile__label small { display: block; margin-top: .45em; font-size: .42em; letter-spacing: .34em; }
.tile--social  .tile__label { left: 7%; top: 56%; }
.tile--moments .tile__label { right: 5%; top: 26%; text-align: right; }

/* Info – erscheint beim Hover an der Stelle des Labels */
.tile__info {
  position: absolute; z-index: 3; max-width: 22rem; pointer-events: none;
  padding: 1rem 1.2rem 1.1rem; border-radius: 14px;
  background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-line); color: var(--glass-fg);
  opacity: 0; transform: translateY(16px); transition: opacity .45s var(--ease), transform .7s var(--ease);
}
.tile__info h2 { margin: 0 0 .35rem; font: 700 1.2rem/1.15 var(--sans); letter-spacing: -.02em; }
.tile__info p { margin: 0 0 .6rem; font-size: .92rem; color: var(--glass-muted); }
.tile__more { font-size: .85rem; font-weight: 600; color: var(--pink); }
.tile.is-hover .tile__info { opacity: 1; transform: none; }
.tile.is-hover .tile__label { opacity: 0; transform: translateY(-10px); }
.tile--wedding .tile__info { left: 6%; bottom: 7%; }
.tile--events  .tile__info { left: 16%; top: 12%; }
.tile--editing .tile__info { right: 4%; top: 48%; }
.tile--social  .tile__info { left: 7%; top: 44%; }
.tile--design .tile__info { left: 0; right: 0; margin-inline: auto; width: fit-content; bottom: 3%; max-width: 26rem; }
.tile--moments .tile__info { right: 5%; top: 20%; }
.tile--social .tile__more, .tile--editing .tile__more { color: var(--teal); }

/* Handy liegt über der Social-Kachel, neben dem Text; hebt sich beim Hover */
.phone {
  position: absolute; z-index: 23; left: 27.5%; bottom: 3.5%; width: min(8vw, 14vh); aspect-ratio: 9/19; cursor: pointer;
  border-radius: 22px; padding: 5px; background: #1a1a1c; border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 40px rgba(0,0,0,.5); rotate: -6deg;
  transition: transform .9s var(--ease), box-shadow .9s var(--ease), filter .5s var(--ease);
}
.phone__screen { width: 100%; height: 100%; border-radius: 17px; overflow: hidden; background: #000; }
.phone__screen video { width: 100%; height: 100%; object-fit: cover; }
.phone.is-hover { transform: translateY(-22%) rotate(8deg) scale(1.14); box-shadow: 0 40px 80px rgba(0,0,0,.55); }
.tile--social .tile__info { max-width: 19rem; }

/* ---------- Filmstreifen (Design) ---------- */

.tape { position: absolute; width: 58%; height: 13%; background: rgba(214,200,170,.82); mix-blend-mode: normal; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.tape--tl { left: -18%; top: -3%; rotate: -32deg; }
.tape--br { right: -20%; bottom: 4%; rotate: -38deg; }

/* ---------- Polaroids ---------- */
/* Polaroids rechts im Wedding-Bild (über dem Berg, nicht über dem Paar) */
.polas { position: absolute; z-index: 21; left: 17.5vw; top: 7vh; width: 14vw; height: 11vw; transition: filter .5s; }
.pola {
  position: absolute; margin: 0; width: 7.4vw; padding: .34vw .34vw 1.7vw; background: #fbfaf7; cursor: pointer; outline: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); transition: transform .7s var(--ease), box-shadow .5s;
}
.pola__slides { position: relative; aspect-ratio: 1; overflow: hidden; background: #ddd; }
.pola__slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: brightness(1.9) saturate(0) contrast(.8); transform: scale(1.06); transition: opacity .7s ease, filter 1.6s ease, transform 1.6s var(--ease); }
.pola__slides img.is-on { opacity: 1; filter: none; transform: none; }
.pola figcaption { position: absolute; left: .34vw; right: .34vw; bottom: 0; height: 1.7vw; display: flex; align-items: center; justify-content: center; text-align: center; font: 400 1.05vw/1 var(--brush); color: #a92f5d; white-space: nowrap; pointer-events: none; }
.pola--1 { left: 0; top: 0; rotate: -6deg; }
.pola--2 { left: 6.6vw; top: 1.4vw; rotate: 5deg; }
.pola:hover, .pola:focus-visible { transform: translateY(-.6vw) rotate(0deg) scale(1.12); box-shadow: 0 20px 40px rgba(0,0,0,.5); z-index: 2; }
.pola__nav {
  position: absolute; top: 38%; translate: 0 -50%; width: 1.9vw; height: 1.9vw; min-width: 24px; min-height: 24px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.88); color: #111; font: 700 1.1vw/1 var(--sans); box-shadow: 0 2px 8px rgba(0,0,0,.3);
  opacity: 0; transition: opacity .3s;
}
.pola__nav--prev { left: .6vw; } .pola__nav--next { right: .6vw; }
.pola:hover .pola__nav, .pola:focus-within .pola__nav { opacity: 1; }

/* Große Polaroid-Galerie */
.pgal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: rgba(8,8,8,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
[data-theme="light"] .pgal { background: rgba(241,236,228,.78); }
.pgal__stage { position: relative; width: min(62vh, 78vw); aspect-ratio: .86; }
.pgal__pola {
  position: absolute; inset: 0; margin: 0; padding: 3.2% 3.2% 17%; background: #fbfaf7;
  box-shadow: 0 30px 80px rgba(0,0,0,.45); will-change: transform;
}
.pgal__pola img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgal__pola figcaption { position: absolute; left: 0; right: 0; bottom: 3.5%; display: flex; justify-content: center; align-items: baseline; gap: 1rem; font: 400 clamp(1.6rem, 3.4vh, 2.6rem)/1 var(--brush); color: #d65b8a; }
.pgal__pola figcaption small { font: 500 .9rem/1 var(--sans); color: #8a8a8a; letter-spacing: .08em; }
.pgal__nav, .pgal__close {
  position: absolute; z-index: 2; display: grid; place-items: center; border: 0; cursor: pointer; border-radius: 50%;
  background: var(--fg); color: var(--bg); box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.pgal__nav { top: 50%; translate: 0 -50%; width: 54px; height: 54px; font-size: 1.3rem; }
.pgal__nav--prev { left: max(2vw, calc(50% - min(62vh, 78vw) / 2 - 90px)); }
.pgal__nav--next { right: max(2vw, calc(50% - min(62vh, 78vw) / 2 - 90px)); }
.pgal__close { top: 1.2rem; right: 1.2rem; }

/* ---------- Ring (Über mich) ---------- */
.ring-wrap {
  position: absolute; z-index: 10; left: 50%; top: 50%; width: min(46vh, 30vw); aspect-ratio: 1;
  margin-left: calc(min(46vh, 30vw) / -2); margin-top: calc(min(46vh, 30vw) / -2);
  transition: filter .5s var(--ease);
}
.ring {
  position: absolute; inset: 0; border: 0; padding: 0; border-radius: 50%; cursor: pointer;
  background: conic-gradient(from var(--spin, 0deg), var(--pink), var(--violet), var(--blue), var(--teal), var(--pink));
  animation: spin 14s linear infinite;
  transition: transform .8s var(--ease);
}
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin { to { --spin: 360deg; } }
.ring__img { position: absolute; inset: 5.5%; border-radius: 50%; overflow: hidden; background: #111; }
.ring__img img, .ring__pop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; translate: calc(var(--bx, 0) * 1px) calc(var(--by, 0) * 1px); transform: scale(1.14); transform-origin: 50% 78%; transition: transform 1.2s var(--ease); }
.ring__hello {
  position: absolute; left: 50%; bottom: 14%; translate: -50% 0; white-space: nowrap;
  padding: .55rem 1rem; border-radius: 99px; background: var(--fg); color: var(--bg); font-weight: 700; font-size: .9rem;
  opacity: 0; transform: translateY(10px); transition: all .5s var(--ease);
}
.ring-wrap.is-hover .ring { transform: scale(1.05); }
/* Pop-out: Box reicht weit über den Ring hinaus (oben/seitlich), damit nichts an harten Kanten abgeschnitten wird.
   Statt clip-path eine weiche Maske: eine Ellipse um Kopf + Hände, Schultern außerhalb des Rings blenden weich aus. */
.ring__pop { position: absolute; top: -60%; left: -30%; right: -30%; bottom: 5.5%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .35s;
  --pm: radial-gradient(28.75% 35.6% at 50% 45.3%, #000 76%, transparent 100%); -webkit-mask-image: var(--pm); mask-image: var(--pm); }
/* volles Hochformat (2:3), exakt so versetzt wie object-position 30% im Quadrat – damit oben nichts abgeschnitten wird */
.ring__pop img { position: absolute; left: 22.1875%; width: 55.625%; top: 33.754%; height: 86.408%; object-fit: fill; transform-origin: 50% 62%; filter: drop-shadow(0 12px 18px rgba(0,0,0,.45)); }
.script--picture { transition: opacity .35s; }
.ring-wrap.is-hover .script--picture { opacity: 0; }
.ring-wrap.is-hover .ring__pop { opacity: 1; }
.ring-wrap.is-hover .ring__img img, .ring-wrap.is-hover .ring__pop img { transform: scale(1.36); }
.ring__hello { z-index: 2; }
/* Der Logo-Streifen rutscht beim Hover weg und gibt das Gesicht frei */
.logostrip { transition: transform .8s var(--ease); }
.logostrip { transition: transform .8s var(--ease), opacity .4s; }
.stage:has(.ring-wrap.is-hover) .logostrip { transform: translate(-50%, -50%) translateY(-6vh) rotate(-8deg) scale(.9); opacity: 0; }
.ring-wrap.is-hover .ring__hello { opacity: 1; transform: none; }

.script { position: absolute; font: 400 clamp(2.2rem, 4vw, 4.4rem)/1 var(--brush); pointer-events: none; text-shadow: 0 3px 16px rgba(0,0,0,.6); white-space: nowrap; }
.script--picture { left: 50%; top: -5%; translate: -50% 0; rotate: -4deg; color: var(--pink); }
.script--editing { left: 50%; bottom: -8%; translate: -50% 0; rotate: -3deg; color: #fff; }
.script--design  { right: -30%; top: 34%; rotate: 8deg; color: var(--teal); display: none; }

/* ---------- Logo-Streifen ---------- */
.logostrip {
  position: absolute; z-index: 12; left: 50%; top: calc(50% - min(46vh, 30vw) * .275); margin: 0; translate: calc(var(--tx, 0) * 1px) calc(var(--ty, 0) * 1px);
  transform: translate(-50%, -50%) rotate(-2.5deg);
  display: grid; justify-items: center; gap: .3rem;
  padding: 1.1vh 2.2vw 1vh; background: #0c0c0c; pointer-events: none;
  clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);   /* kantig, mit schrägen Enden wie die Kachel-Schnitte */
}
.logostrip .logo { width: min(17vw, 29vh); background: #f5f2ec; }
.logostrip small { font: 500 clamp(.5rem, .7vw, .7rem)/1 var(--geo); letter-spacing: .26em; color: #ddd; }

/* ---------- Große Wörter ---------- */
.bigword { position: absolute; z-index: 22; transition: opacity .5s var(--ease); pointer-events: none; font: 800 clamp(4rem, 10.5vw, 13rem)/.8 var(--geo); letter-spacing: -.02em; color: #fff; }
.bigword i { font-style: normal; color: transparent; -webkit-text-stroke: 2px #fff; }
.bigword--video { left: 13%; top: 60%; }
.bigword--photo { left: 46%; top: 76%; }

/* ---------- Strap, Sticker, Nav, Hint ---------- */
.strap { color: #fff; position: absolute; z-index: 14; left: 50%; top: 2.6vh; margin: 0; transform: translateX(-50%); font: 700 clamp(.8rem, 1.1vw, 1.1rem)/1 var(--sans); letter-spacing: .04em; text-shadow: 0 2px 10px rgba(0,0,0,.6); white-space: nowrap; }

.topnav {
  position: absolute; z-index: 30; right: 1rem; top: 1rem;
  display: flex; align-items: center; gap: .4rem; padding: .35rem;
  background: var(--nav-bg); border: 1px solid var(--nav-line); border-radius: 99px;
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.topnav__links { display: flex; }
.topnav__links button {
  border: 0; background: none; color: var(--fg); cursor: pointer;
  padding: .6rem .95rem; border-radius: 99px; font-size: .9rem; font-weight: 600; letter-spacing: -.01em;
  transition: background-color .3s;
}
.topnav__links button:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); }
.cta {
  display: inline-flex; align-items: center; gap: .55rem; border: 0; cursor: pointer;
  padding: .7rem 1.1rem .7rem 1rem; border-radius: 99px;
  background: var(--pink); color: #1a0d12; font-weight: 700; font-size: .92rem; letter-spacing: -.01em;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--pink) 45%, transparent);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
[data-theme="light"] .cta { color: #fff; }
.cta b { display: inline-block; transition: transform .4s var(--ease); }
.cta:hover { transform: translateY(-1px); box-shadow: 0 10px 28px color-mix(in srgb, var(--pink) 60%, transparent); }
.cta:hover b { transform: translateX(3px); }
.cta__dot { width: 8px; height: 8px; border-radius: 50%; background: #2bd576; box-shadow: 0 0 0 0 rgba(43,213,118,.6); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(43,213,118,.55); } 70% { box-shadow: 0 0 0 8px rgba(43,213,118,0); } 100% { box-shadow: 0 0 0 0 rgba(43,213,118,0); } }

.sound { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--nav-line); background: none; cursor: pointer; }
.sound svg { width: 18px; height: 18px; fill: none; stroke: var(--fg); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sound .sound__body { fill: var(--fg); stroke: none; }
.sound .sound__wave { display: none; }
.sound[aria-pressed="true"] .sound__wave { display: inline; }
.sound[aria-pressed="true"] .sound__off { display: none; }
.sound[aria-pressed="true"] { background: color-mix(in srgb, var(--fg) 10%, transparent); }

/* Sonne/Mond-Schalter */
.theme { border: 0; background: none; padding: 0; cursor: pointer; }
.theme__track {
  position: relative; display: block; width: 64px; height: 34px; border-radius: 99px;
  background: color-mix(in srgb, var(--fg) 12%, transparent); border: 1px solid var(--nav-line);
}
.theme__icon { position: absolute; top: 50%; width: 16px; height: 16px; translate: 0 -50%; fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linecap: round; opacity: .55; transition: opacity .3s; }
.theme__icon--sun { left: 9px; } .theme__icon--sun circle { fill: none; }
.theme__icon--moon { right: 9px; fill: none; }
.theme__knob {
  position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--fg); box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transform: translateX(30px); transition: transform .55s var(--ease), background-color .4s;
}
.theme__knob::after { /* Icon im Knopf */
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  box-shadow: inset -5px -3px 0 0 var(--bg); /* Mondsichel */
  transition: box-shadow .5s var(--ease);
}
[data-theme="light"] .theme__knob { transform: translateX(0); background: #f5b53d; }
[data-theme="light"] .theme__knob::after { box-shadow: inset 0 0 0 0 transparent, 0 0 0 3px rgba(255,255,255,.5); }
.theme:focus-visible .theme__track { outline: 2px solid var(--pink); outline-offset: 2px; }

/* Theme-Wechsel als Kreis-Reveal vom Schalter aus */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: reveal .75s cubic-bezier(.7,0,.2,1); }
@keyframes reveal { from { clip-path: circle(0 at var(--vt-x, 90%) var(--vt-y, 3%)); } to { clip-path: circle(150vmax at var(--vt-x, 90%) var(--vt-y, 3%)); } }

/* Kontakt-Button in jedem Bereich */
.panel__cta {
  display: inline-flex; align-items: center; gap: .5rem; margin: 2.2rem auto .5rem; border: 0; cursor: pointer;
  padding: .95rem 1.4rem; border-radius: 99px; background: var(--pink); color: #1a0d12; font-weight: 700; font-size: 1rem;
  box-shadow: 0 8px 26px color-mix(in srgb, var(--pink) 45%, transparent);
}
[data-theme="light"] .panel__cta { color: #fff; }
.panel__cta:hover { transform: translateY(-1px); }


/* ---------- Cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; mix-blend-mode: difference; display: grid; place-items: center; opacity: 0; transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background-color .3s; }
.cursor span { font: 700 .7rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #111; opacity: 0; }
.cursor.is-big { width: 86px; height: 86px; margin: -43px 0 0 -43px; background: var(--pink); mix-blend-mode: normal; }
.cursor.is-big span { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
@media (hover: hover) and (pointer: fine) { .stage, .stage * { cursor: none !important; } }

/* ==========================================================================
   PANELS
   ========================================================================== */
.panels {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  pointer-events: none; visibility: hidden;
}
body.is-panel .panels { visibility: visible; pointer-events: auto; }
body.is-panel .stage { filter: var(--panel-bg-filter); }
.panels__disc {
  --d: min(94vh, 80vw);
  position: relative; width: var(--d); height: var(--d); border-radius: 50%;
  pointer-events: auto;
  background: var(--disc-bg);
  backdrop-filter: blur(26px) saturate(1.25); -webkit-backdrop-filter: blur(26px) saturate(1.25);
  box-shadow: 0 30px 120px rgba(0,0,0,.35), inset 0 0 0 1px var(--glass-line);
  will-change: transform, opacity;
}
/* leuchtender Rand – wird stärker, je weiter die Maus rausgeht */
.panels__edge {
  position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from var(--spin, 0deg), var(--pink), var(--violet), var(--blue), var(--teal), var(--pink));
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: spin 14s linear infinite; opacity: calc(.55 + var(--exit, 0) * .45);
  filter: drop-shadow(0 0 calc(var(--exit, 0) * 24px) var(--pink));
}
/* Inhalt im einbeschriebenen Bereich des Kreises, zentriert, scrollbar */
.panels__scroll {
  position: absolute; left: 13%; top: 13%; width: 74%; height: 74%;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  display: grid; align-content: safe center; text-align: center;
  padding: 1rem 0;
  -webkit-mask: linear-gradient(transparent, #000 7%, #000 93%, transparent);
          mask: linear-gradient(transparent, #000 7%, #000 93%, transparent);
}
.panels__scroll::-webkit-scrollbar { display: none; }
.panels__close { position: absolute; left: 50%; top: 3.5%; translate: -50% 0; z-index: 4; }
.panels__exit {
  position: absolute; left: 50%; bottom: -2.6rem; translate: -50% 0; margin: 0; white-space: nowrap;
  font: 400 1.4rem/1 var(--brush); color: var(--pink); opacity: var(--exit, 0);
}
.panel { max-width: 40rem; margin: 0 auto; }
.panel__kicker { margin: 0 0 1rem; font: 400 1.8rem/1 var(--brush); color: var(--acc, var(--pink)); }
.panel[data-accent="teal"] { --acc: var(--teal); }
.panel[data-accent="white"] { --acc: #fff; }
.panel h2 { margin: 0 0 1.25rem; font: 800 clamp(2.4rem, 5vw, 3.8rem)/.95 var(--geo); letter-spacing: -.03em; }
.panel__lead { font-size: 1.15rem; color: var(--lead); max-width: 34rem; margin-inline: auto; }
.panel p { color: var(--muted); }
.panel__list { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.panel__list li { padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 99px; font-size: .92rem; }
.panel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }
.panel__grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.panel__grid img:only-child { grid-column: 1 / -1; aspect-ratio: 16/9; }
.panel__video { width: 100%; max-height: 70vh; border-radius: 12px; background: #000; }
.panel__reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1rem 0; }
.panel__reels--4 { grid-template-columns: repeat(4, 1fr); }
.panel__reels video { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 10px; background: #000; }
.panel blockquote { margin: 1.5rem 0; font: 400 2rem/1.1 var(--brush); color: var(--pink); }

.form { display: grid; gap: 1.1rem; margin-top: 1.5rem; text-align: left; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form label { display: grid; gap: .35rem; font-size: .9rem; font-weight: 500; }
.form input:not([type=radio]):not([type=checkbox]), .form textarea {
  font: inherit; color: var(--fg); background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: .8rem .9rem;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--teal); }
.form .is-invalid { border-color: #ff5a5f !important; }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.chips legend { width: 100%; text-align: center; }
.chips legend { font-size: .9rem; font-weight: 500; margin-bottom: .5rem; }
.chips input { position: absolute; opacity: 0; }
.chips span { display: inline-block; padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 99px; font-size: .9rem; cursor: pointer; }
.chips input:checked + span { background: var(--teal); border-color: var(--teal); color: #061513; font-weight: 600; }
.chips input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.check { grid-template-columns: auto 1fr !important; align-items: start; font-weight: 400 !important; font-size: .82rem !important; color: var(--muted); }
.btn { justify-self: center; padding: 1rem 1.6rem; border: 0; border-radius: 99px; background: var(--pink); color: #1a0d12; font-weight: 700; cursor: pointer; }
.form__status { margin: 0; min-height: 1.4em; }
.form__status.is-ok { color: var(--teal); }
.contact { justify-content: center; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-style: normal; color: var(--muted); }
.contact a { color: var(--fg); font-weight: 600; text-decoration-color: var(--pink); text-underline-offset: 4px; }


:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

@media (max-width: 999px), (max-height: 600px), (pointer: coarse) {
  .panels__disc { --d: 100vw; width: 100vw; height: 100dvh; border-radius: 0; }
  .panels__edge, .panels__exit { display: none; }
  .panels__scroll { width: auto; height: auto; inset: 0; left: 0; top: 0; translate: none; padding: 4.5rem 1.25rem 3rem; align-content: start; -webkit-mask: none; mask: none; }
  .panels__close { top: max(14px, env(safe-area-inset-top)); left: auto; right: 14px; translate: none; position: fixed; }
}
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } .panel__reels, .panel__reels--4 { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .ring { animation: none; }
  * { transition-duration: .01ms !important; }
}

.motion-note { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 400; width: max-content; max-width: calc(100vw - 2rem); padding: .8rem 1.2rem; border-radius: 14px; background: var(--fg); color: var(--bg); font-size: .9rem; }
.motion-note a { font-weight: 700; margin-left: .4rem; }

/* Kachelbild, das in die Scheibe fliegt */
.morph { position: fixed; z-index: 99; pointer-events: none; background: center / cover no-repeat; filter: brightness(.75); box-shadow: 0 30px 120px rgba(0,0,0,.6); }
/* Bild des Bereichs als verschwommener Hintergrund in der Scheibe */
.panels__disc { isolation: isolate; }
.panels__disc::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; clip-path: circle(50%);
  background: var(--img, none) center / cover no-repeat;
  filter: var(--disc-img); transform: scale(1.1);
  transition: background-image .4s;
}
/* Blättern links/rechts */
.panels__nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  display: grid; justify-items: center; gap: .35rem;
  background: none; border: 0; cursor: pointer; color: var(--fg); padding: .5rem;
}
.panels__nav b {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--glass); color: var(--fg); font-size: 1.1rem;
  transition: background-color .3s, color .3s, transform .4s var(--ease);
}
.panels__nav span { font: 400 1.15rem/1 var(--brush); color: var(--muted); white-space: nowrap; }
.panels__nav--prev { left: 3.5%; }
.panels__nav--next { right: 3.5%; }
.panels__nav:hover b { background: var(--fg); color: var(--bg); }
.panels__nav--prev:hover b { transform: translateX(-4px); }
.panels__nav--next:hover b { transform: translateX(4px); }
@media (max-width: 999px), (max-height: 600px), (pointer: coarse) {
  .panels__nav { position: fixed; top: auto; bottom: 1rem; translate: none; }
  .panels__nav--prev { left: 1rem; } .panels__nav--next { right: 1rem; }
  .panels__scroll { padding-bottom: 6rem; }
}
@media (prefers-reduced-motion: reduce) { .stage::before { animation: none; } }

/* Tour per Scrollrad / Pfeiltasten */
.tourbar {
  position: absolute; z-index: 30; left: 50%; bottom: 1.1rem; translate: -50% 0;
  display: flex; align-items: center; gap: .7rem; padding: .55rem .9rem .55rem .6rem; border-radius: 99px;
  background: var(--nav-bg); border: 1px solid var(--nav-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--fg); font-size: .9rem; white-space: nowrap;
  opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease), transform .5s var(--ease); pointer-events: none;
}
.tourbar.is-on { opacity: 1; transform: none; }
.tourbar__n { display: grid; place-items: center; min-width: 2.6rem; height: 1.8rem; border-radius: 99px; background: var(--pink); color: #1a0d12; font-size: .78rem; }
.tourbar__name { font-weight: 700; }
.tourbar__hint { color: var(--muted); font-size: .8rem; }

/* Kontakt: WhatsApp-Abkürzung, Vorauswahl, Erfolg */
.quick { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1rem; margin: 1.2rem 0 .4rem; }
.quick__wa { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border-radius: 99px; background: #25d366; color: #06230f; font-weight: 700; text-decoration: none; }
.quick__wa svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.quick__or { font: 400 1.2rem/1 var(--brush); color: var(--muted); }
.form__pre { margin: .8rem auto 0; font-size: .88rem; color: var(--teal); }
.success { display: grid; justify-items: center; gap: .6rem; margin-top: 1.5rem; }
.success svg { width: 88px; height: 88px; fill: none; stroke: var(--teal); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.success circle { stroke-dasharray: 214; stroke-dashoffset: 214; animation: draw .8s var(--ease) forwards; }
.success path { stroke-dasharray: 50; stroke-dashoffset: 50; animation: draw .5s .6s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.success h3 { margin: 0; font: 800 2rem/1 var(--geo); }
.success small { color: var(--muted); }
@media (max-width: 999px), (max-height: 600px) { .tourbar { display: none; } }

.panel__note { font-size: .85rem; color: var(--muted); margin-top: 1rem; }

/* Honeypot: aus dem Sichtfeld, aber nicht display:none (manche Bots prüfen das) */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Barrierefreiheit ---------- */
.skip { position: fixed; left: 1rem; top: -5rem; z-index: 400; padding: .8rem 1.1rem; border: 0; border-radius: 10px; background: var(--fg); color: var(--bg); font-weight: 700; cursor: pointer; transition: top .2s; }
.skip:focus-visible { top: 1rem; }
/* Fokusrahmen innerhalb der Kachel (außen würde ihn der Clip abschneiden) */
.tile:focus-visible { outline: none; }
.tile:focus-visible::after { content: ""; position: absolute; inset: 8px; z-index: 6; border: 3px solid var(--pink); border-radius: 6px; pointer-events: none; }
.pola:focus-visible, .ring:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.motion { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--nav-line); background: none; cursor: pointer; }
.motion svg { width: 16px; height: 16px; fill: none; stroke: var(--fg); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.motion .motion__play { display: none; fill: var(--fg); stroke: none; }
.motion[aria-pressed="true"] .motion__pause { display: none; }
.motion[aria-pressed="true"] .motion__play { display: inline; }
/* Bewegung pausiert: alles Dauerhafte anhalten */
html.is-still .stage::before, html.is-still .ring, html.is-still .panels__edge, html.is-still .cta__dot { animation-play-state: paused !important; }
/* Nutzer mit erhöhtem Kontrast: normaler Mauszeiger, keine Körnung */
@media (prefers-contrast: more) {
  .cursor { display: none; }
  .stage, .stage * { cursor: auto !important; }
  .stage::before { display: none; }
  .tile__label { text-shadow: 0 0 6px #000, 0 0 2px #000; }
}

.pola__open { position: absolute; inset: 0; z-index: 1; border: 0; padding: 0; background: none; cursor: pointer; }
.pola__open:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.pola__nav { z-index: 2; }
.pgal__pola figcaption { color: #a92f5d !important; }
.pola:focus-within { transform: translateY(-.6vw) rotate(0deg) scale(1.12); z-index: 2; }

/* Große Monitore: Bedienleiste mitwachsen lassen */
@media (min-width: 1900px) and (min-height: 1000px) { .topnav { zoom: 1.25; } }
@media (min-width: 2400px) and (min-height: 1300px) { .topnav { zoom: 1.5; } }

/* Kontrast im Hellmodus (WCAG AA): Buttons dunkleres Rosa mit weißer Schrift */
[data-theme="light"] .cta, [data-theme="light"] .panel__cta, [data-theme="light"] .btn { background: #c43a68; color: #fff; }
[data-theme="light"] .tourbar__n { background: #c43a68; color: #fff; }

/* ==========================================================================
   RUNDE 6 – aufgeräumt, Badge, großes X, Slideshows, festes Handy-Layout
   ========================================================================== */

/* Slideshow in Kacheln (Events, Arbeiten): langsam überblenden + leichter Zoom */
.tile__media.slides img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease, transform 1.4s var(--ease); }
.tile__media.slides img.is-on { opacity: 1; animation: kenburns 9s ease-out both; }
@keyframes kenburns { from { scale: 1.08; } to { scale: 1; } }
html.is-still .tile__media.slides img.is-on { animation-play-state: paused; }

/* Arbeiten-Kachel kleiner */
.tile--moments .tile__label { right: 7%; top: auto; bottom: 10%; font-size: clamp(1.2rem, 2.2vw, 2.4rem); text-align: right; }
.tile--moments .tile__info { right: 6%; top: auto; bottom: 8%; }

/* Rechtliche Links in der Fläche (keine Seite zum Scrollen) */
.legal { position: absolute; z-index: 30; left: 1.2rem; bottom: .9rem; display: flex; gap: .4rem 1.1rem; flex-wrap: wrap; font-size: .75rem; color: rgba(255,255,255,.78); text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.legal a { text-decoration: none; } .legal a:hover { text-decoration: underline; color: #fff; }

/* Kontakt-Orb: Glas, Verlaufsrand wie der Ring, Sprechblase tippt – öffnet drei Wege */
.hello { --mb: min(9.5vw, 15.5vh); position: absolute; z-index: 23; left: 58.5%; top: 74%; width: var(--mb); height: var(--mb); }
.hello__btn {
  position: absolute; inset: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #f5f2ec;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.14), rgba(14,14,18,.78) 55%);
  backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: 0 18px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
/* hauchdünner Verlaufsrand (gleiche Farben wie der Ring) */
.hello__btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1.5px;
  background: conic-gradient(from var(--spin, 0deg), var(--pink), var(--violet), var(--blue), var(--teal), var(--pink));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 10s linear infinite; }
.hello__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spinring 22s linear infinite; }
.hello__ring text { font: 600 13px/1 var(--sans); letter-spacing: .2em; fill: currentColor; opacity: .82; }
@keyframes spinring { to { rotate: 360deg; } }
.hello__core { position: absolute; inset: 27%; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--violet)); box-shadow: 0 8px 24px color-mix(in srgb, var(--pink) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .6s var(--ease); }
.hello__core svg { width: 64%; overflow: visible; }
.hello__core .hb-bubble { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linejoin: round; transition: opacity .3s, transform .5s var(--ease); transform-origin: 50% 50%; }
.hello__core .hb-dot { fill: #fff; animation: typing 1.4s ease-in-out infinite; transition: opacity .25s; }
.hello__core .hb-dot:nth-of-type(2) { animation-delay: .18s; } .hello__core .hb-dot:nth-of-type(3) { animation-delay: .36s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-3px); opacity: 1; } }
.hello__core .hb-x { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: 0; transform: rotate(-90deg) scale(.5); transform-origin: 24px 23px; transition: opacity .3s, transform .5s var(--ease); }
.hello__btn:hover, .hello.is-open .hello__btn { transform: scale(1.08); box-shadow: 0 22px 54px rgba(0,0,0,.5), 0 0 0 6px color-mix(in srgb, var(--pink) 18%, transparent); }
.hello__btn:hover .hello__core { transform: scale(1.06) rotate(-6deg); }
.hello.is-open .hb-bubble, .hello.is-open .hb-dot { opacity: 0; } .hello.is-open .hb-bubble { transform: scale(.6); }
.hello.is-open .hb-x { opacity: 1; transform: none; }
/* Optionen: stapeln sich als Glas-Pillen über dem Orb */
.hello__menu { position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 0; display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.hello.is-open .hello__menu { pointer-events: auto; }
.hello__opt {
  display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; padding: .62rem 1.05rem .62rem .7rem; border: 0; border-radius: 99px; cursor: pointer;
  font: 600 .88rem/1 var(--sans); color: #f5f2ec; text-decoration: none;
  background: rgba(18,18,22,.78); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 10px 28px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.12);
  opacity: 0; transform: translateY(18px) scale(.86); transition: opacity .3s, transform .5s var(--ease), background .25s;
  transition-delay: calc(var(--i) * 45ms);
}
.hello__opt svg { width: 1.7rem; height: 1.7rem; padding: .32rem; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--violet)); fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hello__opt svg .dot { fill: #fff; }
.hello.is-open .hello__opt { opacity: 1; transform: none; }
.hello__opt:hover, .hello__opt:focus-visible { background: var(--pink); color: #1a0d12; transform: translateX(4px); }
.hello__opt:hover svg, .hello__opt:focus-visible svg { background: #1a0d12; }
.hello__opt:focus-visible, .hello__btn:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
html.is-still .hello__ring, html.is-still .hello__btn::before, html.is-still .hb-dot { animation-play-state: paused; }

/* Großes, animiertes X (Panels + Galerie) */
.xbtn {
  width: 58px; height: 58px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: var(--fg); color: var(--bg); cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .5s var(--ease), opacity .4s ease;
}
.xbtn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.xbtn path { stroke-dasharray: 18; stroke-dashoffset: 18; }
body.is-panel .panels__close path, .pgal:not([hidden]) .pgal__close path { animation: xdraw .5s var(--ease) .35s forwards; }
body.is-panel .panels__close path + path, .pgal:not([hidden]) .pgal__close path + path { animation-delay: .5s; }
@keyframes xdraw { to { stroke-dashoffset: 0; } }
.xbtn:hover { transform: rotate(90deg) scale(1.06); }
.xbtn.is-closing { transform: rotate(180deg) scale(.3); opacity: 0; }
.panels__close.xbtn:hover { transform: rotate(90deg) scale(1.06); }

.panel__sub { margin: 2rem 0 .8rem; font: 700 1rem/1.2 var(--geo); letter-spacing: .02em; }
.panel__grid--3 { grid-template-columns: repeat(3, 1fr); }
.panel__grid img { cursor: zoom-in; transition: transform .4s var(--ease), filter .3s; }
.panel__grid img:hover { transform: scale(1.03); }
.panel__reels--2 { grid-template-columns: repeat(2, 1fr); max-width: 30rem; margin-inline: auto; }
.panel__reels--4 { grid-template-columns: repeat(3, 1fr); }

/* ==========================================================================
   HANDY & TABLET: alles auf einen Blick, nichts scrollt.
   Oben die Leiste, 4 Felder im Quadrat, der Kreis in der Mitte, unten „Projekt anfragen“.
   ========================================================================== */
@media (max-width: 999px), (max-height: 600px) {
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  .stage {
    --ringw: min(46vw, 31dvh, 320px);
    position: fixed; inset: 0; width: auto; height: auto; overflow: hidden;
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr 1fr auto auto;
    grid-template-areas: "nav nav" "tl tr" "bl br" "cta cta" "legal legal";
    gap: 8px; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .stage [data-depth] { translate: none; }
  .tile--design, .tile--moments, .polas, .phone, .bigword, .tourbar, .script, .hello, .cursor { display: none !important; }

  .topnav { grid-area: nav; position: relative; inset: auto; zoom: 1; justify-content: space-between; padding: .3rem; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--panel); }
  .topnav__links button { padding: .55rem .7rem; font-size: .85rem; }
  .sound { display: none; }
  .theme__track { width: 56px; height: 32px; } .theme__knob { width: 24px; height: 24px; transform: translateX(24px); }
  [data-theme="light"] .theme__knob { transform: translateX(0); }
  .cta { display: none; }

  .tile { position: relative; inset: auto; width: auto; height: auto; min-height: 0; clip-path: none !important; border-radius: 18px; scale: 1 !important; transform: none !important; z-index: 1 !important; }
  .tile--wedding { grid-area: tl; } .tile--events { grid-area: tr; }
  .tile--social { grid-area: bl; } .tile--editing { grid-area: br; }
  .tile__info { display: none; }
  .tile__label { font-size: clamp(.9rem, 4vw, 1.5rem); letter-spacing: .22em; text-align: left; }
  .tile__label small { font-size: .5em; }
  .tile__label--bold { font-size: clamp(.78rem, 3.4vw, 1.1rem); letter-spacing: 0; }
  /* Beschriftungen in die äußeren Ecken – weg vom Kreis */
  .tile--wedding .tile__label { left: 12px; top: 12px; bottom: auto; right: auto; }
  .tile--events .tile__label { right: 12px; top: 12px; left: auto; bottom: auto; text-align: right; }
  .tile--social .tile__label { left: 12px; bottom: 12px; top: auto; right: auto; }
  .tile--editing .tile__label { right: 12px; bottom: 12px; top: auto; left: auto; text-align: right; }
  .tile__media::after { background: linear-gradient(180deg, rgba(8,8,8,.35), rgba(8,8,8,.05) 40%, rgba(8,8,8,.05) 60%, rgba(8,8,8,.45)); }

  /* Kreis in der Mitte der vier Felder */
  .ring-wrap { grid-row: 2 / 4; grid-column: 1 / 3; place-self: center; position: relative; inset: auto; margin: 0; width: var(--ringw); z-index: 10; }
  .ring { box-shadow: 0 0 0 7px var(--bg), 0 18px 40px rgba(0,0,0,.45); }
  .ring__hello { opacity: 1; transform: none; font-size: .72rem; padding: .4rem .7rem; bottom: 9%; }
  .logostrip { grid-row: 2 / 4; grid-column: 1 / 3; place-self: center; position: relative; inset: auto; margin: 0; z-index: 12;
    transform: translateY(calc(var(--ringw) * -.28)) rotate(-2.5deg); padding: .5vh 3.5vw .45vh; }
  .logostrip .logo { width: calc(var(--ringw) * .86); }
  .logostrip small { font-size: .48rem; letter-spacing: .2em; }

  /* Unten: Projekt anfragen + Recht */
  .stage::after { position: absolute; }
  .mobile-cta { grid-area: cta; display: flex; }
  .legal { grid-area: legal; position: relative; inset: auto; justify-content: center; font-size: .68rem; color: var(--muted); text-shadow: none; }
  .legal a:hover { color: var(--fg); }
}
.mobile-cta {
  display: none; align-items: center; justify-content: center; gap: .55rem; width: 100%;
  padding: 1rem; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--pink); color: #1a0d12; font: 700 1.02rem/1 var(--sans);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--pink) 40%, transparent);
}
[data-theme="light"] .mobile-cta { background: #c43a68; color: #fff; }
.mobile-cta b { transition: transform .4s var(--ease); }
.mobile-cta:active b { transform: translateX(4px); }
/* Tablet quer/hoch: Kreis etwas größer */
@media (min-width: 640px) and (max-width: 999px) { .stage { --ringw: min(38vw, 34dvh, 380px); gap: 12px; padding: 12px; } .tile__label { font-size: clamp(1.2rem, 3vw, 2rem); } }

/* Handy: Overlay statt Scheibe – vollflächig, sanft aus der Kachel heraus */
@media (max-width: 999px), (max-height: 600px), (pointer: coarse) {
  .panels__scroll { padding: 5.5rem 1.25rem 7rem; }
  .panels__disc { background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  .panels__disc::before { opacity: .55; clip-path: none; border-radius: 0; }
  .panel__grid--3 { grid-template-columns: repeat(2, 1fr); }
  .pgal__close { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; }
}
@media (prefers-reduced-motion: reduce) { .xbtn path { stroke-dashoffset: 0; animation: none !important; } .hello__ring, .hello__btn::before, .hb-dot { animation: none; } .tile__media.slides img.is-on { animation: none; } }

/* Runde 6 – Feinschliff Handy */
@media (max-width: 999px), (max-height: 600px) {
  .stage .mobile-cta { display: flex; }
  .tile { overflow: hidden; isolation: isolate; }
  .tile__label { font-weight: 300; text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 2px 18px rgba(0,0,0,.55); }
}
@media (max-width: 999px), (max-height: 600px), (pointer: coarse) {
  /* Blätter-Pfeile auf einer ruhigen Leiste statt über den Fotos */
  .panels__disc::after {
    content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 6.5rem; z-index: 2; pointer-events: none;
    background: linear-gradient(transparent, var(--panel) 55%);
  }
  .panels__nav { z-index: 3; }
  .panels__nav span { color: var(--fg); }
}
@media (max-width: 999px), (max-height: 600px) {
  .stage::after { display: none; }
  .tile__label--bold { font-weight: 700; }
  .mobile-cta, .topnav { position: relative; z-index: 30; }
}

/* ---------- Über mich: Kapitel ---------- */
.chapters { list-style: none; margin: 1.6rem 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; text-align: left; }
.chapter {
  display: grid; width: 100%; height: 100%; padding: 0 0 .8rem; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: color-mix(in srgb, var(--fg) 5%, transparent); color: var(--fg); cursor: pointer; text-align: left;
  transition: transform .45s var(--ease), border-color .3s, background-color .3s;
}
.chapter img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--ease), filter .4s; filter: saturate(.85); }
.chapter__n { margin: .7rem .8rem 0; font: 400 1.2rem/1 var(--brush); color: var(--pink); }
.chapter__t { margin: .2rem .8rem 0; font: 700 1rem/1.15 var(--geo); }
.chapter__s { margin: .25rem .8rem 0; font-size: .8rem; line-height: 1.35; color: var(--muted); }
.chapter:hover, .chapter:focus-visible { transform: translateY(-3px); border-color: var(--pink); }
.chapter:hover img { transform: scale(1.06); filter: none; }
.chview { text-align: left; max-width: 34rem; margin: 0 auto; }
.chview__back { display: inline-flex; gap: .4rem; margin: 0 0 1rem; padding: .55rem .95rem; border: 1px solid var(--line); border-radius: 99px; background: none; color: var(--fg); font-weight: 600; cursor: pointer; }
.chview__back:hover { background: var(--fg); color: var(--bg); }
.chview__img { margin: 0 0 1.2rem; }
.chview__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; }
.chview__n { margin: 0; font: 400 1.3rem/1 var(--brush); color: var(--pink); }
.chview h3 { margin: .3rem 0 1rem; font: 800 clamp(1.8rem, 4vw, 2.6rem)/1 var(--geo); letter-spacing: -.02em; outline: none; }
.chview p { color: var(--lead); line-height: 1.75; }
.chview__nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.chview__go { padding: .6rem 1rem; border: 1px solid var(--line); border-radius: 99px; background: none; color: var(--fg); font-weight: 600; cursor: pointer; }
.chview__go:hover { border-color: var(--pink); color: var(--pink); }
/* ---------- Sechs Reels ---------- */
.reels6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: .5rem; }
.reel { margin: 0; }
.reel video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; background: #000; display: block; }
.reel figcaption { display: grid; gap: .1rem; margin-top: .45rem; text-align: left; }
.reel b { font-size: .92rem; } .reel span { font-size: .78rem; color: var(--muted); }
@media (max-width: 999px), (max-height: 600px), (pointer: coarse) {
  .chapters, .reels6 { grid-template-columns: repeat(2, 1fr); }
}

/* Saubere Schnittkanten: gerade Kanten + feine Fuge (nur sichtbare Kanten, per JS berechnet) */
.tile__seam { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.tile__seam path { fill: none; stroke: var(--bg); stroke-width: 9; stroke-linecap: square; }
.tile__seam path + path { stroke: rgba(255,255,255,.16); stroke-width: 1; }
[data-theme="light"] .tile__seam path + path { stroke: rgba(0,0,0,.08); }
@media (max-width: 999px), (max-height: 600px) { .tile__seam { display: none; } }

/* ==========================================================================
   GERÄTE-BÜHNE – 3D-Handy (Reels) und Studio-Display (Longform)
   ========================================================================== */
body.is-device .stage { filter: var(--panel-bg-filter); }
.device {
  position: fixed; inset: 0; z-index: 120;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4vw;
  padding: 2rem 3vw; background: color-mix(in srgb, var(--bg) 45%, transparent);
  backdrop-filter: blur(20px) saturate(1.15); -webkit-backdrop-filter: blur(20px) saturate(1.15);
}
.device--desk { }
.device__close { position: fixed; top: 1.3rem; right: 1.3rem; z-index: 3; }
body.is-device .device__close path { animation: xdraw .5s var(--ease) .45s forwards; }
body.is-device .device__close path + path { animation-delay: .6s; }
.device__copy { justify-self: end; width: 100%; max-width: 25rem; text-align: left; }
.device__copy h2 { min-height: 2em; }
.device__copy h2 { margin: 0 0 1rem; font: 800 clamp(2rem, 3.4vw, 3.4rem)/.98 var(--geo); letter-spacing: -.03em; }
.device__lead { color: var(--lead); font-size: 1.05rem; }
.device__list { justify-content: flex-start; margin: 1.2rem 0 1.6rem; }
.device__cta { margin: 0; }
.device__stage { perspective: 1600px; display: grid; place-items: center; }
/* Stage = genau Handy-Breite in der Mitte; das Display ragt von dort nach rechts – der Text links bleibt stehen */
.device__copy { grid-column: 1; }
.device__stage { grid-column: 2; justify-self: center; width: calc(min(80vh, 760px) * .487); place-items: center start; }
.display3d { justify-self: start; }

/* ---------- 3D-Handy ---------- */
.phone3d { --ph: min(80vh, 760px); width: calc(var(--ph) * .487); height: var(--ph); transform-style: preserve-3d; will-change: transform; }
.phone3d__body {
  position: relative; width: 100%; height: 100%; padding: calc(var(--ph) * .014);
  border-radius: calc(var(--ph) * .085);
  background: linear-gradient(145deg, #5a5a62, #26262b 35%, #3b3b41 70%, #1d1d21);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28), inset 0 0 0 4px #121215,
              30px 50px 90px rgba(0,0,0,.55), 8px 12px 30px rgba(0,0,0,.4);
}
.phone3d__btn { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(#4b4b52, #2a2a2f); }
.phone3d__btn--1 { left: -3px; top: 18%; height: 5%; } .phone3d__btn--2 { left: -3px; top: 26%; height: 9%; }
.phone3d__btn--3 { right: -3px; top: 24%; height: 12%; }
.phone3d__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--ph) * .072); background: #000; isolation: isolate; }
.phone3d__island { position: absolute; z-index: 5; left: 50%; top: 1.7%; width: 31%; height: 3.5%; translate: -50% 0; border-radius: 99px; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.04); }
.reelfeed { position: absolute; inset: 0; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; outline: none; }
.reelfeed::-webkit-scrollbar { display: none; }
.reelfeed.is-jump { scroll-snap-type: none; }
.ritem { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #000; }
.ritem video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ritem::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 18%, transparent 62%, rgba(0,0,0,.7)); }
.ritem__top { position: absolute; z-index: 2; left: 6%; top: 7.5%; font: 700 calc(var(--ph) * .022)/1 var(--sans); color: #fff; }
.ritem__cap { position: absolute; z-index: 2; left: 6%; right: 22%; bottom: 6%; color: #fff; font-size: calc(var(--ph) * .018); line-height: 1.35; }
.ritem__cap b { display: flex; align-items: center; gap: .45em; font-size: 1.05em; margin-bottom: .3em; }
.ritem__cap b::before { content: ""; width: 1.8em; height: 1.8em; border-radius: 50%; background: url(../assets/m/logo-900.webp) center / 82% no-repeat, #111; box-shadow: 0 0 0 1.5px #fff; }
.ritem__cap span { opacity: .9; }
.ritem__side { position: absolute; z-index: 2; right: 4.5%; bottom: 8%; display: grid; gap: calc(var(--ph) * .026); }
.ritem__side svg { width: calc(var(--ph) * .036); height: calc(var(--ph) * .036); fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.ritem__bar { position: absolute; z-index: 3; left: 0; bottom: 0; height: 2px; width: 0; background: #fff; }
.reelfeed__sound { position: absolute; z-index: 6; top: 7%; right: 5%; width: calc(var(--ph) * .05); height: calc(var(--ph) * .05); min-width: 30px; min-height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0,0,0,.45); cursor: pointer; }
.reelfeed__sound svg { width: 55%; height: 55%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.reelfeed__sound .s-body { fill: #fff; stroke: none; } .reelfeed__sound .s-on { display: none; }
.reelfeed__sound[aria-pressed="true"] .s-on { display: inline; } .reelfeed__sound[aria-pressed="true"] .s-off { display: none; }
/* Wisch-Hinweis: Finger wischt über drei Pfeile nach oben */
.reelfeed__hint { position: absolute; z-index: 6; inset: 0; display: grid; place-content: center; justify-items: center; gap: calc(var(--ph) * .018); pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.72), rgba(0,0,0,.35) 55%, rgba(0,0,0,.1)); transition: opacity .5s; }
.reelfeed__hint.is-gone { opacity: 0; }
.reelfeed__hint .swipe { position: relative; display: grid; justify-items: center; width: calc(var(--ph) * .09); height: calc(var(--ph) * .14); }
.reelfeed__hint .swipe i { width: calc(var(--ph) * .04); height: calc(var(--ph) * .04); margin-top: calc(var(--ph) * -.014); border: solid #fff; border-width: 3.5px 3.5px 0 0; rotate: -45deg; opacity: .35; filter: drop-shadow(0 0 6px rgba(0,0,0,.6)); animation: chev 1.6s ease-in-out infinite; }
.reelfeed__hint .swipe i:nth-child(1) { animation-delay: .4s; } .reelfeed__hint .swipe i:nth-child(2) { animation-delay: .2s; }
@keyframes chev { 0%, 100% { opacity: .35; } 40% { opacity: 1; } }
.swipe__finger { position: absolute; left: 50%; bottom: 0; width: calc(var(--ph) * .05); height: calc(var(--ph) * .05); margin-left: calc(var(--ph) * -.025); border-radius: 50%;
  background: rgba(255,255,255,.9); box-shadow: 0 0 0 6px rgba(255,255,255,.25), 0 4px 14px rgba(0,0,0,.4); animation: fingerup 1.6s var(--ease) infinite; }
@keyframes fingerup { 0% { transform: translateY(0) scale(.9); opacity: 0; } 15% { opacity: 1; transform: translateY(0) scale(1); } 70% { transform: translateY(calc(var(--ph) * -.12)) scale(.85); opacity: 1; } 100% { transform: translateY(calc(var(--ph) * -.14)) scale(.8); opacity: 0; } }
.swipe__txt { padding: .45em 1em; border-radius: 99px; background: rgba(0,0,0,.55); color: #fff; font: 600 calc(var(--ph) * .019)/1 var(--sans); white-space: nowrap; }
/* Hoch/Runter-Steuerung rechts neben dem Handy */
.phone3d { position: relative; }
.reelnav { position: absolute; left: calc(100% + 28px); top: 50%; translate: 0 -50%; display: grid; justify-items: center; gap: 12px; }
.reelnav__btn { position: relative; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 26px rgba(0,0,0,.35);
  transition: transform .4s var(--ease), background .25s; }
.reelnav__btn > svg:last-child { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.reelnav__btn:hover { transform: scale(1.08); background: rgba(255,255,255,.2); }
.reelnav__btn:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.reelnav__next { width: 64px; height: 64px; background: linear-gradient(135deg, var(--pink), var(--violet)); color: #1a0d12; }
.reelnav__ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); rotate: -90deg; fill: none; stroke-width: 2.5; }
.reelnav__ring circle { stroke: rgba(255,255,255,.15); }
.reelnav__ring .reelnav__prog { stroke: #fff; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); }
.reelnav__lbl { font: 700 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
/* nach einer Weile ohne Interaktion: Button blinkt/pulsiert */
.reelnav__next.is-nudge { animation: nudge 1.3s ease-in-out infinite; }
.reelnav__next.is-nudge::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 color-mix(in srgb, var(--pink) 70%, transparent); animation: nudgering 1.3s ease-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); filter: brightness(1); } 50% { transform: translateY(5px); filter: brightness(1.25); } }
@keyframes nudgering { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pink) 70%, transparent); } 100% { box-shadow: 0 0 0 22px transparent; } }
.reelnav__next.is-nudge + .reelnav__lbl, .reelnav:has(.is-nudge) .reelnav__lbl { color: var(--pink); }
@keyframes hintup { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------- Studio-Display ---------- */
.display3d { --dw: min(46vw, 84vh); width: var(--dw); transform-style: preserve-3d; will-change: transform; display: grid; justify-items: center; }
.display3d__frame {
  width: 100%; aspect-ratio: 16 / 9.3; padding: calc(var(--dw) * .012);
  border-radius: calc(var(--dw) * .016);
  background: linear-gradient(160deg, #e9e9ee, #b9b9c1 45%, #d7d7dd);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 50px 100px rgba(0,0,0,.55), 0 14px 30px rgba(0,0,0,.35);
}
.display3d__screen { width: 100%; height: 100%; border-radius: calc(var(--dw) * .008); overflow: hidden; background: #0f0f10; box-shadow: inset 0 0 0 calc(var(--dw) * .006) #050506; }
.display3d__neck { width: 16%; height: calc(var(--dw) * .1); margin-top: -2px; background: linear-gradient(90deg, #a9a9b1, #e4e4ea 45%, #b3b3bb); clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); }
.display3d__foot { width: 30%; height: calc(var(--dw) * .014); border-radius: 0 0 8px 8px; background: linear-gradient(#cfcfd6, #9a9aa2); box-shadow: 0 18px 30px rgba(0,0,0,.45); }
.vfeed { --u: calc(var(--dw) * .0105); height: 100%; overflow-y: auto; scrollbar-width: thin; color: #f1f1f1; font: 400 calc(var(--u) * 1.15)/1.35 var(--sans); padding: calc(var(--u) * 1.4) calc(var(--u) * 2.2) calc(var(--u) * 2); }
.vfeed__bar { display: flex; align-items: center; gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 1.4); }
.vfeed__logo { font-weight: 800; letter-spacing: -.01em; white-space: nowrap; } .vfeed__logo b { display: inline-grid; place-items: center; width: 1.9em; height: 1.35em; border-radius: .35em; background: #f03; font-size: .7em; vertical-align: .1em; margin-right: .3em; }
.vfeed__search { flex: 1; max-width: 46%; margin: 0 auto; padding: .45em 1.1em; border: 1px solid #333; border-radius: 99px; color: #aaa; background: #121212; }
.vfeed__dot { width: 1.8em; height: 1.8em; border-radius: 50%; background: url(../assets/m/chris-portrait-480.webp) center 25% / cover; }
.vfeed__chips { display: flex; gap: .6em; margin-bottom: calc(var(--u) * 1.6); }
.vfeed__chips span { padding: .35em .9em; border-radius: .5em; background: #272727; font-weight: 600; font-size: .92em; }
.vfeed__chips .is-on { background: #f1f1f1; color: #0f0f0f; }
.vfeed__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2.2) calc(var(--u) * 1.4); }
.vcard { display: grid; gap: .55em; color: inherit; text-decoration: none; }
.vcard__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: .8em; overflow: hidden; background: #222; }
.vcard__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.vcard:hover .vcard__thumb img { transform: scale(1.05); }
.vcard__dur { position: absolute; right: .45em; bottom: .45em; padding: .1em .4em; border-radius: .3em; background: rgba(0,0,0,.8); font-size: .82em; font-weight: 600; }
.vcard__title { font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vcard__meta { color: #aaa; font-size: .9em; }
.vcard--skel .vcard__thumb, .vcard--skel .vcard__title, .vcard--skel .vcard__meta { background: linear-gradient(90deg, #1c1c1e 0%, #2a2a2d 50%, #1c1c1e 100%) 0 0 / 200% 100%; animation: shimmer 1.6s linear infinite; border-radius: .4em; color: transparent; }
.vcard--skel .vcard__title { height: 1.2em; width: 90%; } .vcard--skel .vcard__meta { height: .9em; width: 60%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.vfeed__note { grid-column: 1 / -1; margin: 0 0 .2em; padding: .8em 1em; border-radius: .6em; background: #1b1b1d; color: #cfcfcf; font-size: .95em; }

/* ---------- Handy & Tablet ---------- */
@media (max-width: 999px), (max-height: 600px), (pointer: coarse) {
  .device, .device--desk { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: .6rem; padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)); align-items: start; }
  .device__copy { justify-self: start; max-width: calc(100% - 70px); }
  .device__copy h2 { font-size: clamp(1.4rem, 6.5vw, 2rem); margin: 0; }
  .device__kicker { margin: 0 0 .2rem; font-size: 1.2rem; }
  .device__lead, .device__list, .device__cta { display: none; }
  .device__close { top: max(12px, env(safe-area-inset-top)); right: 12px; }
  .device__stage { align-self: center; }
  .phone3d { --ph: min(76dvh, 150vw); }
  /* Mobil: Steuerung im Bildschirm unten rechts (neben dem Handy ist kein Platz) */
  .reelnav { left: auto; right: 3.5%; top: auto; bottom: 37%; translate: none; gap: 8px; z-index: 7; }
  .reelnav__prev, .reelnav__lbl { display: none; }
  .reelnav__next { width: 46px; height: 46px; }
  .display3d { --dw: 94vw; }
  .vfeed__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .reelfeed__hint *, .reelnav__next.is-nudge, .reelnav__next.is-nudge::after { animation: none !important; } .vcard--skel * { animation: none; } }
@media (max-width: 700px) {
  .display3d__frame { aspect-ratio: 4 / 4.2; }
  .vfeed { --u: 2.7vw; }
  .vfeed__grid { grid-template-columns: 1fr; }
  .vfeed__chips span:nth-child(n+3) { display: none; }
}

/* Wenige Videos: erstes groß wie ein Hauptvideo, die anderen daneben */
.vfeed__grid--feature { grid-template-columns: 1.9fr 1fr; grid-auto-rows: auto; align-items: start; }
.vfeed__grid--feature .vcard:first-child { grid-row: span 3; }
.vfeed__grid--feature .vcard:first-child .vcard__title { font-size: 1.35em; -webkit-line-clamp: 3; }
.vfeed__grid--feature .vcard:not(:first-child) { grid-template-columns: 1fr; }
@media (max-width: 700px) { .vfeed__grid--feature { grid-template-columns: 1fr; } .vfeed__grid--feature .vcard:first-child { grid-row: auto; } }

/* ==========================================================================
   GIMMICK 1 – Sucher-Cursor mit Autofokus und Auslöser-Blitz
   ========================================================================== */
.cursor.is-big { width: 112px; height: 76px; margin: -38px 0 0 -56px; border-radius: 0; background: transparent; mix-blend-mode: normal; }
.cursor .vf { position: absolute; width: 18px; height: 18px; border: 0 solid #fff; opacity: 0; filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); transition: opacity .25s, border-color .2s; }
.cursor .vf--tl { left: 0; top: 0; border-width: 2px 0 0 2px; } .cursor .vf--tr { right: 0; top: 0; border-width: 2px 2px 0 0; }
.cursor .vf--bl { left: 0; bottom: 0; border-width: 0 0 2px 2px; } .cursor .vf--br { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.cursor.is-big .vf { opacity: 1; }
.vf__af { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 1.5px solid #fff; opacity: 0; transition: opacity .2s, border-color .2s; }
.cursor.is-big .vf__af { opacity: 1; }
.cursor.is-big span { position: absolute; left: 50%; top: calc(100% + 8px); translate: -50% 0; white-space: nowrap; color: #fff; font-size: .68rem; letter-spacing: .16em; text-shadow: 0 1px 6px rgba(0,0,0,.8); opacity: 1; }
/* Autofokus: Ecken ziehen sich zusammen, dann kurz grün = scharf */
.cursor.is-af .vf--tl { animation: af-tl .42s var(--ease); } .cursor.is-af .vf--tr { animation: af-tr .42s var(--ease); }
.cursor.is-af .vf--bl { animation: af-bl .42s var(--ease); } .cursor.is-af .vf--br { animation: af-br .42s var(--ease); }
@keyframes af-tl { from { translate: -14px -12px; } } @keyframes af-tr { from { translate: 14px -12px; } }
@keyframes af-bl { from { translate: -14px 12px; } } @keyframes af-br { from { translate: 14px 12px; } }
.cursor.is-sharp .vf, .cursor.is-sharp .vf__af { border-color: #5ef08a; }
/* Bild zieht beim Hover scharf */
.tile.is-hover .tile__media { animation: focuspull .5s ease-out; }
@keyframes focuspull { from { filter: blur(5px); } to { filter: blur(0); } }
/* Auslöser-Blitz */
.flash { position: fixed; inset: 0; z-index: 290; background: #fff; opacity: 0; pointer-events: none; }
.flash.is-on { animation: flash .38s ease-out; }
@keyframes flash { 0% { opacity: .6; } 100% { opacity: 0; } }

/* ==========================================================================
   GIMMICK 2 – Color-Grading-Regler
   ========================================================================== */
.look { position: relative; }
.look__btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--nav-line); background: none; cursor: pointer; }
.look__btn svg { width: 18px; height: 18px; fill: none; stroke: var(--fg); stroke-width: 1.7; }
.look__btn svg path { fill: var(--fg); stroke: none; }
.look__btn[aria-expanded="true"], .look__btn.is-graded { background: conic-gradient(from 200deg, #127c86, #f29a52, #127c86); }
.look__btn.is-graded svg, .look__btn[aria-expanded="true"] svg { stroke: #fff; } .look__btn.is-graded svg path { fill: #fff; }
.look__menu {
  position: absolute; z-index: 40; top: calc(100% + 12px); right: -8px; width: 13.5rem; padding: .5rem;
  border-radius: 16px; background: var(--nav-bg); border: 1px solid var(--nav-line);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 18px 40px rgba(0,0,0,.35); display: grid; gap: 2px;
}
.look__title { margin: .2rem .5rem .4rem; font: 400 1.1rem/1 var(--brush); color: var(--pink); }
.look__menu button { display: flex; align-items: center; gap: .65rem; padding: .55rem .6rem; border: 0; border-radius: 10px; background: none; color: var(--fg); font-weight: 600; font-size: .88rem; cursor: pointer; text-align: left; }
.look__menu button:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.look__menu button[aria-checked="true"] { background: color-mix(in srgb, var(--fg) 14%, transparent); }
.look__menu i { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.gradeable { transition: filter .7s ease var(--gd, 0s); }
html[data-grade="teal"] .gradeable { filter: url(#g-teal); }
html[data-grade="bw"] .gradeable { filter: grayscale(1) contrast(1.18) brightness(1.04); }
html[data-grade="vintage"] .gradeable { filter: url(#g-vintage) contrast(.94) saturate(.85); }
html[data-grade="bleach"] .gradeable { filter: saturate(.38) contrast(1.38) brightness(1.03); }
/* Wisch-Linie beim Umschalten */
.gradewipe { position: fixed; top: 0; bottom: 0; left: 0; z-index: 26; width: 2px; pointer-events: none; background: #fff; box-shadow: 0 0 18px 4px rgba(255,255,255,.55); }
@media (max-width: 999px), (max-height: 600px) { .look__menu { position: fixed; top: 4.2rem; right: 10px; } }

/* ==========================================================================
   GIMMICK 3 – Director's Cut im VHS-Look (Konami-Code / 5× Logo)
   ========================================================================== */
html.is-vhs .gradeable { filter: url(#g-vintage) saturate(1.35) contrast(1.12) drop-shadow(2px 0 0 rgba(255,0,80,.5)) drop-shadow(-2px 0 0 rgba(0,220,255,.5)) !important; }
html.is-vhs .stage { animation: vhsjit 2.4s steps(1) infinite; }
@keyframes vhsjit { 0%, 86%, 100% { transform: none; } 88% { transform: translate(-3px, 1px) skewX(-.6deg); } 92% { transform: translate(2px, 0); } 95% { transform: translate(-1px, -1px); } }
.vhs { position: fixed; inset: 0; z-index: 280; pointer-events: none; font: 700 clamp(1rem, 1.6vw, 1.6rem)/1 "Courier New", ui-monospace, monospace; color: #fff; letter-spacing: .08em;
  text-shadow: 2px 0 rgba(255,0,120,.8), -2px 0 rgba(0,230,255,.8);
  background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.22) 2px 3px); }
.vhs::before { content: ""; position: absolute; inset: -50%; opacity: .14; mix-blend-mode: screen;
  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='1.2' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .5s steps(4) infinite; }
.vhs::after { content: ""; position: absolute; left: 0; right: 0; height: 9vh; top: -10vh; background: linear-gradient(transparent, rgba(255,255,255,.12) 45%, rgba(255,255,255,.04) 55%, transparent); animation: tracking 5s linear infinite; }
@keyframes tracking { 0% { top: -10vh; } 60%, 100% { top: 110vh; } }
.vhs span { position: absolute; }
.vhs__play { left: 3vw; top: 4vh; } .vhs__sp { left: calc(3vw + 8.5em); top: 4vh; }
.vhs__date { left: 3vw; bottom: 6vh; } .vhs__tc { right: 3vw; bottom: 6vh; }
.vhs__stop { position: absolute; left: 50%; bottom: 5vh; translate: -50% 0; pointer-events: auto; padding: .5em 1em; border: 2px solid #fff; background: rgba(0,0,0,.45); color: #fff; font: inherit; font-size: .7em; cursor: pointer; text-shadow: inherit; }
.toast { position: fixed; z-index: 310; left: 50%; bottom: 2.2rem; translate: -50% 0; margin: 0; padding: .8rem 1.2rem; border-radius: 14px; background: var(--fg); color: var(--bg); font-weight: 600; box-shadow: 0 14px 40px rgba(0,0,0,.4); max-width: calc(100vw - 2rem); text-align: center; }
@media (prefers-reduced-motion: reduce) { html.is-vhs .stage, .vhs::before, .vhs::after { animation: none; } .tile.is-hover .tile__media { animation: none; } .flash.is-on { animation-duration: .01s; } }
@media (max-width: 999px), (max-height: 600px) { html.is-vhs .stage { animation: none; } }

.vcard.is-spot .vcard__thumb { outline: 3px solid #ffbf5e; outline-offset: 3px; animation: spot 1.2s ease-in-out 3; }
@keyframes spot { 50% { outline-color: transparent; } }
@media (max-width: 999px), (max-height: 600px) {
}

/* ---------- Easter Egg: Bildschirmschoner ---------- */
.saver { position: fixed; inset: 0; z-index: 320; background: rgba(5,5,7,.92); cursor: none; opacity: 0; transition: opacity .8s; }
.saver.is-on { opacity: 1; }
.saver__logo { position: absolute; left: 0; top: 0; width: clamp(160px, 18vw, 300px); background: var(--c, #f8a3bc); will-change: transform; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--c, #f8a3bc) 55%, transparent)); transition: background .3s; }
.saver__hint { position: absolute; left: 50%; bottom: 1.6rem; translate: -50% 0; margin: 0; font: 600 .78rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.confetti { position: fixed; z-index: 330; width: 10px; height: 14px; border-radius: 2px; pointer-events: none; }
/* ---------- Easter Egg: Gestaltungsraster (Taste G) ---------- */
.thirds { position: fixed; inset: 0; z-index: 260; pointer-events: none; }
.thirds i { position: absolute; background: rgba(255,255,255,.75); box-shadow: 0 0 0 .5px rgba(0,0,0,.35); }
.thirds__v { top: 0; bottom: 0; width: 1px; } .thirds__h { left: 0; right: 0; height: 1px; }
.thirds__frame { position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: 92vh; border: 1.5px dashed rgba(248,163,188,.85); border-radius: 6px; }
.thirds__frame--916 { aspect-ratio: 9 / 16; } .thirds__frame--45 { aspect-ratio: 4 / 5; border-color: rgba(108,212,201,.85); }
.thirds__frame b { position: absolute; left: .5rem; top: .45rem; font: 700 .72rem/1 var(--sans); letter-spacing: .12em; color: #f8a3bc; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.thirds__frame--45 b { left: auto; right: .5rem; color: #6cd4c9; }
.thirds__cross { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; translate: -50% -50%; background: linear-gradient(#fff, #fff) center / 100% 1.5px no-repeat, linear-gradient(#fff, #fff) center / 1.5px 100% no-repeat; filter: drop-shadow(0 0 2px rgba(0,0,0,.7)); }
.thirds__info { position: absolute; left: 50%; top: 1.2rem; translate: -50% 0; padding: .45rem .9rem; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; font: 600 .78rem/1 "Courier New", ui-monospace, monospace; letter-spacing: .08em; }
.thirds:not([hidden]) { animation: thirdsIn .35s var(--ease); }
@keyframes thirdsIn { from { opacity: 0; transform: scale(1.03); } }

.panel__wide { display: block; width: 100%; height: auto; margin: 0 0 1rem; border-radius: 12px; }

/* ---------- Schlagwörter beim Hover (Desktop) ---------- */
.kword { position: fixed; left: 0; top: 0; z-index: 45; pointer-events: none; display: none; white-space: nowrap; }
.kword.is-on { display: block; }
.kword__word { position: relative; z-index: 1; display: block; font: 800 clamp(3.4rem, 7.2vw, 8.6rem)/.86 var(--geo); letter-spacing: -.035em; color: #fff;
  text-shadow: 0 6px 40px rgba(0,0,0,.45); }
.kword .kl { display: inline-block; padding: .06em .005em .1em; margin-bottom: -.1em; vertical-align: top; }
.kword .kl > span { display: inline-block; will-change: transform; }
.kword__echo { position: absolute; left: 0; top: 1.15rem; z-index: 0; font: 800 clamp(3.4rem, 7.2vw, 8.6rem)/.86 var(--geo); letter-spacing: -.035em; color: transparent; -webkit-text-stroke: 1.5px var(--kc, var(--pink)); padding-top: .06em; }
.kword__kick { display: block; margin: 0 0 .4rem .2rem; font: 700 .78rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--kc, var(--pink)); text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.kword__line { display: block; height: 3px; margin-top: .55rem; border-radius: 3px; transform-origin: 0 50%; background: linear-gradient(90deg, var(--kc, var(--pink)), transparent); }
.kword.is-right { text-align: right; }
.kword.is-right .kword__echo { left: auto; right: 0; }
.kword.is-right .kword__line { transform-origin: 100% 50%; background: linear-gradient(270deg, var(--kc, var(--pink)), transparent); }
.kword--editing, .kword--social { --kc: var(--teal); }
.kword--design { --kc: #6ea8ff; }
.kword--about, .kword--contact { --kc: #b28dff; }
/* statische Wörter am Desktop raus – nur noch beim Hover */
@media (min-width: 1000px) and (min-height: 601px) { .tile__label { display: none; } }
@media (prefers-reduced-motion: reduce) { .kword__echo { display: none; } }

/* ---------- Picture: Kategorien ---------- */
.pcat { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: 1.1rem 0 .2rem; }
.pcat__tab { position: relative; display: inline-flex; align-items: baseline; gap: .45rem; padding: .62rem 1rem; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--fg); cursor: pointer;
  font: 600 .95rem/1 var(--sans); transition: background .35s var(--ease), color .35s, border-color .35s, transform .4s var(--ease); }
.pcat__tab small { font-size: .7rem; font-weight: 700; opacity: .55; }
.pcat__tab:hover { transform: translateY(-2px); border-color: var(--pink); }
.pcat__tab[aria-selected="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pcat__tab:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.pcat__stage { display: grid; }
.pcat__set { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
.pcat__set.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.pcat__sub { margin: .7rem 0 0; text-align: center; font: 400 1.35rem/1 var(--brush); color: var(--pink); }
.pcat__grid { margin-top: .6rem; }
.pcat__set img { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .5s var(--ease); }
.pcat__set.is-on img { opacity: 1; transform: none; transition-delay: calc(var(--d) * 30ms); }
.pcat__set.is-on img:hover { transform: scale(1.03); transition-delay: 0s; }
@media (max-width: 999px), (max-height: 600px) { .pcat__tab { padding: .55rem .8rem; font-size: .85rem; } }

/* ================= 4 Bereiche (Picture · Editing · Design · Kontakt) ================= */
@media (min-width: 1000px) and (min-height: 601px) {
.tile--picture { left: 0;   top: 0;   width: 53%; height: 55%; z-index: 2; }
.tile--editing { left: 47%; top: 0;   width: 53%; height: 57%; z-index: 1; }
.tile--design  { left: 0;   top: 48%; width: 52%; height: 52%; z-index: 3; }
.tile--about { left: 47%; top: 51%; width: 53%; height: 49%; z-index: 4; }
}
.tile--picture .tile__info { left: 5%; bottom: 9%; top: auto; right: auto; }
.tile--editing .tile__info { right: 4%; bottom: 12%; top: auto; left: auto; }
.tile--design  .tile__info { left: 5%; bottom: 8%; top: auto; right: auto; margin: 0; width: auto; max-width: 22rem; }
.tile--about .tile__info { right: 4%; bottom: 9%; top: auto; left: auto; }
.tile--editing .tile__more { color: var(--teal); }
.picshow img { transition: opacity 1.4s ease, transform 8s linear !important; transform: scale(1.12); }
.picshow img.is-on { transform: scale(1.06); }
.stage.is-focus:not(:has(.tile--picture.is-hover)) .polas { filter: var(--dim); }
/* Handy im Editing-Feld, Kontakt-Orb im Kontakt-Feld */
.phone { left: 67.5%; top: 21%; bottom: auto; rotate: 6deg; }
.hello { left: calc(50% - var(--mb) / 2); top: 79.5%; }
/* Format-Schalter im Editing-Gerät */
.devswitch { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 6px; margin: 0 0 1rem; border-radius: 99px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.devswitch__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; margin-right: 2px; border-radius: 50%; background: rgba(255,255,255,.1); }
.devswitch__icon svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.devswitch__knob { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 99px; background: var(--pink); box-shadow: 0 6px 18px color-mix(in srgb, var(--pink) 40%, transparent); }
.devswitch__b { position: relative; z-index: 1; padding: .6rem 1rem; border: 0; border-radius: 99px; background: transparent; color: inherit; font: 600 .9rem/1 var(--sans); cursor: pointer; transition: color .4s; }
.devswitch__b[aria-pressed="true"] { color: #1a0d12; }
.devswitch__b:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
@media (max-width: 999px), (max-height: 600px) {
  .tile--picture { grid-area: tl; } .tile--editing { grid-area: tr; }
  .tile--design { grid-area: bl; display: block !important; } .tile--about { grid-area: br; }
  .tile--picture .tile__label { left: 12px; top: 12px; bottom: auto; right: auto; }
  .tile--editing .tile__label { right: 12px; top: 12px; left: auto; bottom: auto; text-align: right; }
  .tile--design .tile__label { left: 12px; bottom: 12px; top: auto; right: auto; }
  .tile--about .tile__label { right: 12px; bottom: 12px; top: auto; left: auto; text-align: right; }
  .devswitch { margin-bottom: .4rem; }
  .devswitch__b { padding: .45rem .8rem; font-size: .8rem; }
}

/* ---------- Kontakt: Schritt für Schritt ---------- */
#p-contact { text-align: center; }
.wiz { display: grid; justify-items: center; gap: .9rem; max-width: 30rem; margin: 1.4rem auto 0; text-align: center; }
.wiz__dots { display: flex; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.wiz__dots li { width: 26px; height: 4px; border-radius: 4px; background: var(--line); transition: background .4s, width .5s var(--ease); }
.wiz__dots li.is-done { background: var(--teal); }
.wiz__dots li.is-on { width: 44px; background: var(--pink); }
.wiz__count { margin: -.3rem 0 0; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.wiz__step { width: 100%; display: grid; justify-items: center; gap: .8rem; min-height: 9.5rem; align-content: start; border: 0; padding: 0; margin: 0; }
.wiz__q { display: block; width: 100%; margin: .2rem 0 .2rem; font: 800 clamp(1.5rem, 3.2vw, 2.1rem)/1.15 var(--geo) !important; letter-spacing: -.02em; color: var(--fg); text-align: center; }
.wiz input:not([type=radio]):not([type=checkbox]), .wiz textarea { width: 100%; text-align: center; font-size: 1.15rem !important; padding: 1rem 1.1rem !important; border-radius: 16px !important; }
.wiz textarea { text-align: left; min-height: 7.5rem; resize: vertical; }
.wiz__hint { margin: 0; font-size: .82rem; color: var(--muted); }
.wiz .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.wiz .chips legend { width: 100%; margin-bottom: .8rem; }
.wiz .chips span { padding: .7rem 1.05rem; font-size: .95rem; transition: transform .3s var(--ease), background .3s; }
.wiz .chips span:hover { transform: translateY(-2px); border-color: var(--teal); }
.wiz .check { max-width: 26rem; text-align: left; font-size: .9rem !important; }
.wiz__nav { display: flex; gap: .6rem; justify-content: center; align-items: center; }
.wiz__back { padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--fg); font: 600 .95rem/1 var(--sans); cursor: pointer; }
.wiz__back:hover { border-color: var(--fg); }
.wiz__enter { margin: -.3rem 0 0; font-size: .75rem; color: var(--muted); }
.wiz__enter kbd { padding: .1rem .4rem; border: 1px solid var(--line); border-radius: 5px; font: 600 .72rem var(--sans); }
.wiz .form__status { min-height: 1.3em; margin: 0; color: #ff8a8f; font-size: .88rem; }
[data-theme="light"] .wiz .form__status { color: #b3261e; }
@media (hover: none) { .wiz__enter { display: none; } }

/* ---------- Opening: Verschluss + Fokus ---------- */
.opening { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.opening__fog { position: absolute; inset: 0; --mx: 50vw; --my: 50vh; --r: 0px;
  backdrop-filter: grayscale(1) blur(14px); -webkit-backdrop-filter: grayscale(1) blur(14px);
  -webkit-mask: radial-gradient(circle at var(--mx) var(--my), transparent calc(var(--r) * .55), #000 var(--r));
          mask: radial-gradient(circle at var(--mx) var(--my), transparent calc(var(--r) * .55), #000 var(--r)); }
.opening__blade { position: absolute; left: 0; right: 0; height: 50.5%; background: #050506; transition: transform .38s cubic-bezier(.7,0,.2,1); }
.opening__blade--t { top: 0; } .opening__blade--b { bottom: 0; }
.opening.is-open .opening__blade--t { transform: translateY(-101%); }
.opening.is-open .opening__blade--b { transform: translateY(101%); }
.opening.is-open::after { content: ""; position: absolute; inset: 0; background: #fff; animation: openFlash .35s ease-out forwards; }
@keyframes openFlash { from { opacity: .35; } to { opacity: 0; } }
.opening.is-gone { opacity: 0; transition: opacity .5s; }
@media (prefers-reduced-motion: reduce) { html:not(.motion-ok) .opening { display: none; } }

/* Start-Abfrage */
.gate { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 1.3rem; padding: 1.5rem; text-align: center; pointer-events: auto; color: #f5f2ec;
  animation: gateIn 1s var(--ease) both; transition: opacity .38s, transform .38s var(--ease); }
.gate.is-gone { opacity: 0; transform: scale(.97); }
@keyframes gateIn { from { opacity: 0; transform: translateY(12px); } }
.gate__logo { width: min(260px, 60vw); background: #f5f2ec; opacity: .9; }
.gate__q { margin: .4rem 0 0; font: 400 clamp(1.4rem, 3vw, 1.9rem)/1.1 var(--brush); color: #f8a3bc; }
.gate__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.gate__b { display: grid; gap: .3rem; min-width: 12.5rem; padding: 1rem 1.4rem; border-radius: 16px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.04); color: #f5f2ec; cursor: pointer; text-align: left;
  transition: transform .4s var(--ease), background .3s, border-color .3s; }
.gate__b b { font: 700 1.1rem/1 var(--geo); }
.gate__b small { font: 500 .8rem/1.2 var(--sans); color: rgba(245,242,236,.65); }
.gate__b:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.5); }
.gate__b--full { background: linear-gradient(135deg, #f8a3bc, #b28dff); border-color: transparent; color: #1a0d12; }
.gate__b--full small { color: rgba(26,13,18,.72); }
.gate__b:focus-visible { outline: 3px solid #f8a3bc; outline-offset: 4px; }
.gate__hint { margin: 0; font-size: .72rem; letter-spacing: .08em; color: rgba(245,242,236,.45); }
.opening.is-quick .opening__fog { display: none; }
.opening.is-quick .opening__blade { transition-duration: .5s; }
.opening.is-quick::after { display: none; }
@media (prefers-reduced-motion: reduce) { .gate { animation: none; } }

/* ---------- Longform: Watch-Ansicht auf dem Display ---------- */
.display3d__screen { position: relative; }
.vwatch { --u: calc(var(--dw) * .0105); position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; padding: calc(var(--u) * 1.4) calc(var(--u) * 2); color: #f1f1f1; font: 400 calc(var(--u) * 1.15)/1.35 var(--sans); background: #0f0f10; }
.vwatch__bar { margin-bottom: calc(var(--u) * 1.2); }
.vwatch__back { padding: .45em 1em; border: 1px solid #3a3a3d; border-radius: 99px; background: #1b1b1d; color: #f1f1f1; font: inherit; font-weight: 600; cursor: pointer; }
.vwatch__back:hover { background: #2a2a2d; }
.vwatch__count { margin-left: auto; color: #aaa; font-size: .9em; }
.vwatch__main { display: grid; grid-template-columns: 2.1fr 1fr; gap: calc(var(--u) * 1.8); min-height: 0; }
.vwatch__col { min-width: 0; overflow: hidden; }
.vwatch__player { position: relative; aspect-ratio: 16 / 9; border-radius: .7em; overflow: hidden; background: #000; }
.vwatch__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vwatch__consent { position: absolute; inset: 0; display: grid; place-items: center; background: center / cover no-repeat; }
.vwatch__consent::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.vwatch__consentbox { position: relative; display: grid; justify-items: center; gap: .8em; max-width: 72%; text-align: center; }
.vwatch__consentbox p { margin: 0; font-size: .82em; color: rgba(255,255,255,.85); }
.vwatch__consentbox a { color: #fff; }
.vwatch__play { width: 4.2em; height: 4.2em; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--pink); cursor: pointer; transition: transform .35s var(--ease); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.vwatch__play:hover { transform: scale(1.08); }
.vwatch__play svg { width: 48%; fill: #1a0d12; margin-left: 8%; }
.vwatch__title { margin: .7em 0 .3em; font: 700 1.3em/1.25 var(--sans); color: #f1f1f1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vwatch__row { display: flex; align-items: center; gap: 1em; justify-content: space-between; }
.vwatch__meta { margin: 0; color: #aaa; font-size: .92em; } .vwatch__meta b { color: #f1f1f1; }
.vwatch__nav { display: flex; gap: .4em; flex: none; }
.vwatch__nav button { padding: .5em .95em; border: 0; border-radius: 99px; background: #272727; color: #f1f1f1; font: inherit; font-weight: 600; cursor: pointer; }
.vwatch__nav button:hover { background: #3a3a3d; }
.vwatch__next { background: #f1f1f1 !important; color: #0f0f0f !important; }
.vwatch__yt { display: inline-block; margin-top: .6em; font-size: .85em; color: #aaa; }
.vwatch__side { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.vwatch__h { margin: 0 0 .6em; font-weight: 700; }
.vwatch__list { display: grid; gap: .7em; }
.vside { display: grid; grid-template-columns: 44% 1fr; gap: .6em; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: .5em; }
.vside__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: .5em; overflow: hidden; background: #222; }
.vside__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.vside:hover .vside__thumb img { transform: scale(1.06); }
.vside__txt { display: grid; align-content: start; gap: .25em; min-width: 0; }
.vside__txt b { font-size: .88em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vside__txt span { font-size: .78em; color: #aaa; }
.vside:focus-visible, .vwatch button:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.vcard { cursor: pointer; }
@media (max-width: 700px) {
  .vwatch { --u: 2.7vw; overflow-y: auto; grid-template-rows: auto auto; }
  .vwatch__main { grid-template-columns: 1fr; }
  .vwatch__side { overflow: visible; }
  .vwatch__count { display: none; }
}

.panel__fig { margin: .4rem 0 0; }
.panel__fig .panel__wide { margin-bottom: .5rem; }
.panel__fig figcaption { font-size: .82rem; color: var(--muted); text-align: center; }

/* ---------- Vision: in kleinen Portionen ---------- */
.vis { display: grid; justify-items: center; gap: 1.2rem; min-height: min(58vh, 34rem); align-content: center; text-align: center; }
.vis__dots { display: flex; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.vis__dots li { width: 18px; height: 4px; border-radius: 4px; background: var(--line); transition: background .4s, width .5s var(--ease); }
.vis__dots li.is-done { background: color-mix(in srgb, var(--pink) 55%, var(--line)); }
.vis__dots li.is-on { width: 38px; background: var(--pink); }
.vis__stage { display: grid; width: 100%; min-height: min(36vh, 20rem); align-items: center; }
.vis__slide { grid-area: 1 / 1; display: grid; justify-items: center; gap: 1rem; }
.vk { margin: 0; font: 400 clamp(1.3rem, 2.4vw, 1.7rem)/1 var(--brush); color: var(--pink); }
.vh { margin: 0; max-width: 26ch; font: 800 clamp(1.6rem, 3.4vw, 2.6rem)/1.12 var(--geo); letter-spacing: -.02em; color: var(--fg); }
.vh--xl { font-size: clamp(2rem, 4.6vw, 3.6rem); text-transform: uppercase; letter-spacing: -.03em; }
.vh em { font-style: normal; background: linear-gradient(90deg, var(--pink), var(--violet), var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vt { margin: 0; max-width: 34ch; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.5; color: var(--muted); }
.vt b { color: var(--fg); }
.vt--big { font: 700 clamp(1.3rem, 2.6vw, 1.9rem)/1.3 var(--geo); color: var(--fg); }
.vtags { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; max-width: 34rem; margin: 0; }
.vtags span { padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 99px; font-weight: 600; font-size: .92rem; }
.vq { margin: .3rem 0 0; max-width: 24ch; font: 400 clamp(1.5rem, 3vw, 2.2rem)/1.2 var(--brush); color: var(--fg); }
.vcycle { position: relative; display: grid; margin: .3rem 0 0; min-height: 2.6em; width: 100%; font: 700 clamp(1.3rem, 2.6vw, 1.9rem)/1.25 var(--geo); color: var(--pink); }
.vcycle span { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .5s var(--ease); }
.vcycle span.is-on { opacity: 1; transform: none; }
.vsteps { display: grid; gap: .2rem; margin: 0; font: 800 clamp(1.5rem, 3.2vw, 2.4rem)/1.15 var(--geo); letter-spacing: -.02em; }
.vsteps span:nth-child(odd) { color: var(--fg); } .vsteps span:nth-child(even) { color: var(--pink); }
.vpick { width: 100%; max-width: 40rem; display: grid; gap: 1rem; }
.vpick__row { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.vpick__b { display: inline-flex; align-items: baseline; gap: .4rem; padding: .55rem .85rem; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--fg); font: 600 .85rem/1 var(--sans); cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); }
.vpick__b i { font-style: normal; font-weight: 800; color: var(--pink); }
.vpick__b:hover { transform: translateY(-2px); border-color: var(--pink); }
.vpick__b[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.vpick__b--val { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
.vpick__stage { display: grid; min-height: 7.5rem; }
.vpick__t { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s ease, transform .35s var(--ease), visibility 0s .25s; }
.vpick__t.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease .05s, transform .45s var(--ease) .05s, visibility 0s; }
.vpick__t b { display: block; margin-bottom: .4rem; font: 800 clamp(1.2rem, 2.4vw, 1.6rem)/1.15 var(--geo); }
.vpick__t p { margin: 0 auto; max-width: 36ch; color: var(--muted); line-height: 1.5; }
.vis__nav { display: flex; align-items: center; gap: 1rem; }
.vis__prev { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--fg); font-size: 1.1rem; cursor: pointer; }
.vis__prev:disabled { opacity: .3; cursor: default; }
.vis__next { padding: .9rem 1.4rem; border: 0; border-radius: 99px; background: var(--pink); color: #1a0d12; font: 700 .95rem/1 var(--sans); cursor: pointer; transition: transform .3s var(--ease); }
[data-theme="light"] .vis__next { background: #c43a68; color: #fff; }
.vis__next:hover { transform: translateY(-2px); }
.vis__count { min-width: 3.5em; font-size: .8rem; letter-spacing: .14em; color: var(--muted); }
.vis button:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

.kword__word { will-change: filter, opacity; }
.display3d.is-flat { transform-style: flat; }
/* Geräte-Text bleibt an derselben Stelle, egal ob Handy oder Display */
.device__copy { align-self: start; margin-top: max(2rem, calc(50vh - 15rem)); }
@media (max-width: 999px), (max-height: 600px), (pointer: coarse) { .device__copy { margin-top: 0; } }

/* Vision-Schluss: Logo + Schriftzug im Farbverlauf – bewegt sich beim Hover */
.vlogo { --gx: 30%; --gy: 50%; display: block; width: min(420px, 78vw); aspect-ratio: 1697 / 282; margin-top: .6rem;
  background: radial-gradient(circle at var(--gx) var(--gy), #ffd1de 0%, var(--pink) 18%, var(--violet) 45%, var(--blue) 70%, var(--teal) 100%);
  background-size: 160% 160%; background-position: 0 50%;
  -webkit-mask: url(../assets/m/logo-900.webp) center / contain no-repeat; mask: url(../assets/m/logo-900.webp) center / contain no-repeat;
  animation: vlogoDrift 7s ease-in-out infinite alternate; transition: transform .6s var(--ease); }
.vlogo:hover { transform: scale(1.04); animation-duration: 2.5s; }
@keyframes vlogoDrift { to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .vlogo { animation: none; } }
html.is-still .vlogo { animation-play-state: paused; }

/* Polaroids: von Haus aus dunkel – beim Hover leicht nach oben und hell */
.polas { z-index: 27; }
.pola { filter: brightness(.5) saturate(.65); transition: transform .6s var(--ease), box-shadow .5s, filter .45s ease; }
.pola:hover, .pola:focus-within { filter: brightness(1.08) saturate(1.05); }
@media (max-width: 999px), (max-height: 600px), (pointer: coarse) {
  .device__copy, .device__stage { grid-column: auto; }
  .device__stage { width: auto; justify-self: stretch; place-items: center; }
  .display3d { justify-self: center; }
}
/* Hover über den Polaroids: Abdunklung der Collage gilt nicht für sie */
.stage .polas:hover { filter: none !important; }

/* ---------- Webdesign-Case: Browser + Handy, Seite scrollt beim Hover ---------- */
.webcase { position: relative; display: grid; grid-template-columns: 1fr; margin: .6rem 0 .3rem; padding: 0 9% 6% 0; outline: none; }
.webcase__browser { border-radius: 12px; overflow: hidden; background: #1b1b1d; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.webcase__bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: #2a2a2d; }
.webcase__bar i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; } .webcase__bar i:nth-child(2) { background: #febc2e; } .webcase__bar i:nth-child(3) { background: #28c840; }
.webcase__bar span { flex: 1; margin: 0 8% 0 6px; padding: 3px 10px; border-radius: 6px; background: #1b1b1d; color: #aaa; font: 500 .72rem/1 var(--sans); text-align: center; }
.webcase__view { position: relative; overflow: hidden; container-type: size; aspect-ratio: 16 / 10; background: #fff; }
.webcase__view img { display: block; width: 100%; height: auto; transform: translateY(0); transition: transform 1.4s cubic-bezier(.45,0,.2,1); }
.webcase:hover .webcase__view img, .webcase:focus-visible .webcase__view img { transform: translateY(calc(-100% + 100cqh)); transition: transform 9s cubic-bezier(.45,0,.55,1); }
.webcase__phone { position: absolute; right: 0; bottom: 0; width: 22%; padding: 5px; border-radius: 18px; background: #111; box-shadow: 0 16px 34px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12); }
.webcase__phone .webcase__view { aspect-ratio: 9 / 19; border-radius: 13px; }
.webcase:hover .webcase__phone .webcase__view img, .webcase:focus-visible .webcase__phone .webcase__view img { transition-duration: 11s; }
.webcase:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; border-radius: 12px; }
.webcase__cap { margin: .4rem auto 1.2rem; max-width: 40rem; font-size: .88rem; color: var(--muted); text-align: center; }
.webcase__cap a { color: var(--fg); font-weight: 600; text-decoration-color: var(--pink); text-underline-offset: 3px; }
/* Touch: Seite scrollt langsam von selbst */
@media (hover: none) { .webcase__view img { animation: webscroll 14s cubic-bezier(.45,0,.55,1) 1s infinite alternate; } }
@keyframes webscroll { to { transform: translateY(calc(-100% + 100cqh)); } }
@media (prefers-reduced-motion: reduce) { .webcase__view img { animation: none !important; transition: none !important; } }

/* Polaroid-Beschriftung schwarz, Wechsel weich */
.pola figcaption { color: #151515 !important; transition: opacity .25s ease; }
.pola figcaption.is-swap { opacity: 0; }
/* kleine Eigenbewegung: Polaroids schweben leicht */
.pola--1 { animation: polaFloat 5.5s ease-in-out infinite; }
.pola--2 { animation: polaFloat 6.5s ease-in-out -2s infinite; }
@keyframes polaFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.pola:hover, .pola:focus-within { animation-play-state: paused; }
html.is-still .pola { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .pola { animation: none; } }

/* Kontakt-Orb: Tipp-Punkte beim Öffnen wirklich ausblenden (Animation überschrieb die Deckkraft) */
.hello.is-open .hb-dot { animation: none; opacity: 0; transform: scale(.4); transition: opacity .15s, transform .25s; }
/* Scheibe während Öffnen/Schließen ohne Glas-Unschärfe – Safari zeichnet sie sonst als eckige Box */

.vpick--tools .vpick__stage { min-height: 5.5rem; }
/* Vision-Schlagwort kleiner, damit es über den Kopf passt */
.kword--vision .kword__word, .kword--vision .kword__echo { font-size: clamp(2.2rem, min(4.4vw, 7.5vh), 5.2rem); }

/* Ladestand unter der Start-Abfrage: bunter Kreis füllt sich */
.gate__load { position: relative; width: 46px; height: 46px; margin-top: .3rem; display: grid; place-items: center; transition: opacity .5s, transform .5s var(--ease); }
.gate__load svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.gate__track { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 2.5; }
.gate__bar { fill: none; stroke: url(#gl); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0 100; }
.gate__pct { font: 700 .62rem/1 var(--sans); color: rgba(245,242,236,.6); font-variant-numeric: tabular-nums; }
.gate__pct::after { content: "%"; opacity: .6; }
.gate__load.is-done { animation: loadDone 1.2s var(--ease) forwards; }
.gate__load.is-done .gate__pct { opacity: 0; transition: opacity .3s; }
@keyframes loadDone { 40% { transform: scale(1.15); filter: drop-shadow(0 0 10px #b28dff); } 100% { transform: scale(1); opacity: .35; } }
.gate.is-wait .gate__load { opacity: 1 !important; animation: none; transform: scale(1.1); }
.gate__b:disabled { cursor: progress; }

/* bis Abfrage + Aufbau fertig sind: nichts hoverbar/klickbar */
html.is-building .stage, html.is-building .topnav { pointer-events: none; }
/* Vision passt ohne Scrollen in den Kreis */
.vis { min-height: 0; gap: .9rem; }
.vis__stage { min-height: min(30vh, 17rem); }
.panel--vision ~ * { }

/* Design: Leistung wählen → ein Referenzprojekt, ohne Scrollen */
.dset { display: grid; justify-items: center; gap: .6rem; margin-top: .8rem; }
.dset__media { width: min(100%, 34rem); height: min(32vh, 19rem); display: grid; place-items: center; }
.dset__media > img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 16px 36px rgba(0,0,0,.3); opacity: 1 !important; transform: none !important; }
.dset .webcase { width: min(100%, 30rem); margin: 0; }
.dset .webcase__view img { opacity: 1 !important; }
.dset__cap { margin: 0; max-width: 34rem; font-size: .88rem; color: var(--muted); text-align: center; }
.dset__cap a { color: var(--fg); font-weight: 600; text-decoration-color: var(--pink); text-underline-offset: 3px; }
@media (max-height: 800px) { .panel--vision, #p-design { zoom: .9; } }
.dset .webcase__view img { transform: translateY(0); transition: transform 1.4s cubic-bezier(.45,0,.2,1); transition-delay: 0s; }
.dset .webcase:hover .webcase__view img, .dset .webcase:focus-visible .webcase__view img { transform: translateY(calc(-100% + 100cqh)); transition: transform 9s cubic-bezier(.45,0,.55,1); }
#p-design .dset__media { height: min(24vh, 15rem); }
#p-design .dset .webcase { width: min(100%, 24rem); }
#p-design h2 { margin-bottom: .3rem; }
#p-design .pcat { margin-top: .6rem; }
#p-design .dset__media { display: flex; align-items: center; justify-content: center; overflow: hidden; }
#p-design .dset__media > img { max-height: 100%; max-width: 100%; }
#p-design .dset .webcase { width: min(100%, calc(min(24vh, 15rem) * 1.45)); padding: 0 8% 4% 0; }
#p-design .dset__media { height: min(19vh, 13rem); }
#p-design .dset .webcase { width: min(100%, calc(min(19vh, 13rem) * 1.45)); }
#p-design .panel__lead { margin-bottom: 0; }
@media (max-height: 800px) { .panel--vision, #p-design { zoom: .85; } }

/* Vision: Abschnitts-Titel sauber über dem Fortschrittsbalken */
.vis__label { margin: 0 0 -.4rem; font: 700 .78rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--pink); transition: opacity .18s ease; }
.vis__label.is-swap { opacity: 0; }
[data-theme="light"] .vis__label { color: #a92f5d; }
/* Werkzeuge in einer Zeile */
.vpick--tools .vpick__row { flex-wrap: nowrap; gap: .25rem; max-width: 100%; }
.vpick--tools .vpick__b { padding: .45rem .6rem; font-size: .74rem; white-space: nowrap; }
.vpick--tools { max-width: 44rem; }
@media (max-width: 999px) { .vpick--tools .vpick__row { flex-wrap: wrap; } }
/* geschlossene Scheibe komplett aus dem Rendering nehmen (Safari ließ sonst eine Unschärfe-Fläche stehen) */
body:not(.is-panel) .panels { display: none; }

/* Projekt-anfragen-Orb: klein (nur Kern + Verlaufsrand), beim Hover voll mit Schriftring */
.hello__btn { clip-path: circle(28% at 50% 50%); transition: clip-path .6s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease); }
.hello__btn::before { opacity: 0; transition: opacity .4s; }
.hello__ring { opacity: 0; transition: opacity .4s .1s; }
.hello__core::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from var(--spin, 0deg), var(--pink), var(--violet), var(--blue), var(--teal), var(--pink));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 6s linear infinite; }
.hello:hover .hello__btn, .hello__btn:focus-visible { clip-path: circle(50% at 50% 50%); }
.hello:hover .hello__btn::before, .hello__btn:focus-visible::before, .hello:hover .hello__ring, .hello__btn:focus-visible .hello__ring { opacity: 1; }
.hello:hover .hello__core::after { opacity: 0; transition: opacity .3s; }
.hello__btn:hover, .hello__btn:focus-visible { transform: none; }
html.is-still .hello__core::after { animation-play-state: paused; }
/* Instagram-Button im Kontaktformular */
.contact { align-items: center; }
.igbtn { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.15rem; border-radius: 99px; text-decoration: none !important; font-weight: 700;
  color: var(--fg); background: transparent; border: 1.5px solid transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(135deg, var(--pink), var(--violet), var(--teal)) border-box; transition: transform .3s var(--ease); }
.igbtn svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.igbtn:hover { transform: translateY(-2px); }
.igbtn:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.wiz__alt { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: .2rem 0 0; font-size: .85rem; color: var(--muted); }
.wiz__alt .igbtn { padding: .55rem .95rem; font-size: .88rem; }
#p-contact h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
#p-contact .wiz { margin-top: .8rem; gap: .7rem; }
#p-contact .wiz__step { min-height: 7.5rem; }
@media (max-height: 800px) { #p-contact { zoom: .85; } }

.panels__disc::before { display: none; }
.panels__bgl { position: absolute; inset: 0; z-index: -1; border-radius: 50%; clip-path: circle(50%); pointer-events: none;
  background: center / cover no-repeat; filter: var(--disc-img); transform: scale(1.1); }
.panels__bgl + .panels__bgl { opacity: 0; }

/* Push-Nachrichten neben dem Handy */
.pushes { position: fixed; z-index: 46; width: min(19rem, 26vw); display: grid; gap: .45rem; pointer-events: none; opacity: 0; transition: opacity .3s; }
.pushes.is-on { opacity: 1; }
.push { display: grid; grid-template-columns: 2.1rem 1fr; gap: .6rem; align-items: start; padding: .65rem .8rem; border-radius: 16px;
  background: rgba(30,30,34,.78); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 12px 30px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.1); color: #f5f2ec;
  opacity: 0; transform: translateY(-14px) scale(.96); transition: opacity .35s ease, transform .45s var(--ease); }
.push.is-in { opacity: 1; transform: none; }
.push__icon { width: 2.1rem; height: 2.1rem; border-radius: 9px; background: url(../assets/icon-192.png) center / cover; }
.push__head { display: flex; justify-content: space-between; gap: .5rem; margin: 0 0 .15rem; font-size: .78rem; }
.push__head span { color: rgba(245,242,236,.55); white-space: nowrap; }
.push__text { margin: 0; font-size: .8rem; line-height: 1.35; color: rgba(245,242,236,.88); }
.push__play { margin-top: .4rem; padding: .3rem .7rem; border: 0; border-radius: 99px; background: var(--pink); color: #1a0d12; font-weight: 700; cursor: pointer; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .push { transition: opacity .2s; transform: none; } }

/* Sonne/Mond-Schalter */
.daynight { position: relative; display: inline-flex; gap: 2px; padding: 3px; margin: .6rem auto 0; border-radius: 99px; background: var(--line); justify-self: center; }
.pcat__set:has(.daynight) { display: grid; justify-items: center; }
.daynight::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 4px); border-radius: 99px; background: linear-gradient(135deg, #ffd166, #f8a3bc); transition: transform .5s var(--ease), background .5s; }
.daynight[data-on="night"]::before { transform: translateX(calc(100% + 2px)); background: linear-gradient(135deg, #6ea8ff, #b28dff); }
.daynight__b { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .35rem; min-width: 6rem; justify-content: center; padding: .45rem .9rem; border: 0; border-radius: 99px; background: none; color: var(--fg); font: 600 .85rem/1 var(--sans); cursor: pointer; }
.daynight__b[aria-pressed="true"] { color: #1a0d12; }
.daynight__b svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.daynight__b:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.dn__stage { display: grid; width: 100%; }
.dn__set { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.dn__set.is-on { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.pcat__set.is-on .dn__set:not(.is-on) img { opacity: 0; }
/* Picture ohne Scrollen */
#p-picture .pcat__sub { display: none; }
#p-picture .pcat__grid { gap: .45rem; width: min(100%, calc(min(30vh, 17rem) * 2.3)); margin-inline: auto; }
#p-picture .pcat__grid img { aspect-ratio: 3 / 2; }
#p-picture .panel__lead { margin-bottom: 0; }
@media (max-height: 800px) { #p-picture { zoom: .85; } }
#p-picture .pcat__grid { width: min(100%, calc(min(26vh, 15rem) * 2.1)); }
#p-picture .panel__cta { display: none; }
@media (max-width: 999px), (max-height: 600px) { #p-picture .pcat__grid { width: 100%; } }
@media (max-width: 999px) { #p-picture .panel__lead { display: none; } }

/* „We …“ – eine Zeile, nur das Verb wechselt */
.vwe { display: flex; justify-content: center; align-items: baseline; gap: .3em; white-space: nowrap; }
.vcycle--we { display: inline-grid; width: auto; min-height: 0; margin: 0; font: inherit; color: var(--pink); text-align: left; }
.vcycle--we span { white-space: nowrap; }
/* Schluss-Logo: weiß, beim Hover Farbverlauf, der der Maus folgt */
.vlogo { background: var(--fg); animation: none; transition: transform .6s var(--ease); }
.vlogo::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(circle at var(--gx) var(--gy), #ffd1de 0%, var(--pink) 20%, var(--violet) 45%, var(--blue) 70%, var(--teal) 100%); }
.vlogo { position: relative; }
.vlogo:hover::after { opacity: 1; }
.vlogo:hover { animation: none; }
#ch-6 img[src*="design-banner-ta"] { aspect-ratio: auto; object-fit: contain; height: auto; }
.daynight.is-second::before { transform: translateX(calc(100% + 2px)); }
.daynight--wed::before, .daynight--wed.is-second::before { background: linear-gradient(135deg, #f8a3bc, #b28dff); }
.dn-ic { font-style: normal; font-size: .95rem; line-height: 1; }

/* Vision: breitere Textspalte, max. zwei ausgewogene Zeilen */
.panel--vision .vt { max-width: 46ch; text-wrap: balance; }
.panel--vision .vh { max-width: 30ch; text-wrap: balance; }
.panel--vision .vq { max-width: 30ch; text-wrap: balance; }
.panel--vision .vpick__t p { max-width: 48ch; text-wrap: balance; }
.vsteps2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important; }
@media (min-width: 1000px) and (min-height: 601px) { .panels__scroll:has(#p-vision:not([hidden])) { left: 8%; width: 84%; } }
.panel--vision .vh { max-width: 40ch; } .panel--vision .vt { max-width: 58ch; }

/* Vision-Texte: Schriftgröße so, dass zwei Zeilen reichen */
.panel--vision .vh:not(.vh--xl) { font-size: clamp(1.35rem, 2.5vw, 2rem); }
.panel--vision .vt:not(.vt--big) { font-size: clamp(.95rem, 1.3vw, 1.08rem); }
/* Classic-Modus: normaler Cursor, keine Kamera-Effekte */
html.is-classic .stage, html.is-classic .stage * { cursor: auto !important; }
html.is-classic .stage [role="button"], html.is-classic .stage button, html.is-classic .stage a, html.is-classic .stage .pola { cursor: pointer !important; }
html.is-classic .cursor, html.is-classic .flash, html.is-classic .stage::before { display: none !important; }
html.is-classic .tile, html.is-classic .ring-wrap { --rx: 0 !important; --ry: 0 !important; }
html.is-classic .pola { animation: none; }


/* Fancy/Classic-Schalter in der Leiste: Funken = Fancy, Mauspfeil = Classic */
.modeswitch { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid transparent; cursor: pointer;
  background: linear-gradient(var(--nav-bg, var(--panel)), var(--nav-bg, var(--panel))) padding-box, conic-gradient(from var(--spin, 0deg), var(--pink), var(--violet), var(--blue), var(--teal), var(--pink)) border-box; animation: spin 8s linear infinite; }
.modeswitch svg { width: 18px; height: 18px; overflow: visible; }
.modeswitch .ms-fancy path { fill: var(--pink); transform-origin: 12px 12px; transition: opacity .35s, transform .5s var(--ease); }
.modeswitch .ms-classic { fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linejoin: round; opacity: 0; transform: scale(.5) rotate(-20deg); transform-origin: 12px 12px; transition: opacity .35s, transform .5s var(--ease); }
.modeswitch[aria-pressed="true"] { animation: none; background: none; border-color: var(--nav-line); }
.modeswitch[aria-pressed="true"] .ms-fancy path { opacity: 0; transform: scale(.4) rotate(40deg); }
.modeswitch[aria-pressed="true"] .ms-classic { opacity: 1; transform: none; }
.modeswitch:hover .ms-fancy path:first-child { transform: rotate(45deg) scale(1.1); }
.modeswitch:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
html.is-still .modeswitch { animation-play-state: paused; }

.device__nav { position: fixed; top: 50%; translate: 0 -50%; z-index: 3; display: grid; justify-items: center; gap: .35rem; padding: .5rem; border: 0; background: none; color: var(--fg); cursor: pointer; }
.device__nav svg { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--panel); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .3s var(--ease); }
.device__nav span { font: 400 1.05rem/1 var(--brush); }
.device__nav:hover svg { transform: scale(1.1); }
.device__nav--prev { left: 1.2rem; } .device__nav--next { right: 1.2rem; }
.device__nav:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; border-radius: 12px; }
/* Handy kleiner und optisch mittig */
.phone3d { --ph: min(68vh, 640px); margin-top: -3vh; }
@media (max-width: 999px), (max-height: 600px), (pointer: coarse) { .device__nav { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); translate: none; } .device__nav span { display: none; } .phone3d { margin-top: 0; } }
@media (max-width: 999px), (max-height: 600px) { .stage .tile.is-hover { z-index: 1 !important; scale: 1 !important; } }
@media (max-width: 999px), (max-height: 600px) { .tile--about .tile__label { left: auto !important; top: auto !important; } .tile--about .tile__media::after { background: linear-gradient(180deg, rgba(8,8,8,.25), rgba(8,8,8,.05) 40%, rgba(8,8,8,.15) 60%, rgba(8,8,8,.6)); } }
#pg-portraet .pcat__grid img { object-position: 50% 22%; }
.pcat__set:not(.is-on), .pcat__set:not(.is-on) * { visibility: hidden !important; pointer-events: none !important; }
.dn__set:not(.is-on), .dn__set:not(.is-on) * { pointer-events: none !important; }

/* Polaroids: Picture-Kachel gehovert → schon heller, Polaroid selbst gehovert → ganz hell */
.stage:has(.tile--picture.is-hover) .pola { filter: brightness(.82) saturate(.9); }
.stage .pola:hover, .stage .pola:focus-within, .stage:has(.tile--picture.is-hover) .pola:hover { filter: brightness(1.08) saturate(1.05); }
/* Weißer Fade zwischen den Bildern (Polaroids + großes Picture-Bild) */
.pola__slides::after, .picshow::before { content: ""; position: absolute; inset: 0; z-index: 2; background: #fff; opacity: 0; pointer-events: none; }
.picshow::before { background: #fffaf5; }
.pola__slides.is-flash::after { animation: whiteFade .75s ease forwards; }
.picshow.is-flash::before { animation: whiteFade 1s ease forwards; }
@keyframes whiteFade { 0% { opacity: 0; } 38% { opacity: .92; } 100% { opacity: 0; } }
.picshow img { transition: opacity .2s ease, transform 8s linear !important; }
@media (prefers-reduced-motion: reduce) { .pola__slides.is-flash::after, .picshow.is-flash::before { animation: none; } }

.hello__ring text { letter-spacing: .08em; }
/* Erklärung zu den Modi beim Hover */
.mstip { position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% 0; width: 15.5rem; padding: .75rem .9rem; border-radius: 12px; text-align: left; pointer-events: none;
  background: var(--fg); color: var(--bg); font: 400 .78rem/1.4 var(--sans); box-shadow: 0 14px 34px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .35s var(--ease); z-index: 50; }
.mstip::before { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; translate: -50% 0; rotate: 45deg; background: var(--fg); border-radius: 2px; }
.mstip b { display: block; margin-bottom: .2rem; font-size: .82rem; }
.mstip em { display: block; margin-top: .4rem; font-style: normal; font-weight: 700; color: var(--pink); }
[data-theme="light"] .mstip em { color: #f8a3bc; }
.modeswitch:hover .mstip, .modeswitch:focus-visible .mstip { opacity: 1; transform: none; }
@media (hover: none) { .mstip { display: none; } }

/* Editing-Pfeile = gleiche Optik wie die Scheiben-Pfeile */
.device__nav { gap: .35rem; transition: left .5s var(--ease), opacity .3s; }
.device__nav b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--fg); font-size: 1.1rem; font-weight: 400; transition: background-color .3s, color .3s, transform .4s var(--ease); }
.device__nav span { font: 400 1.15rem/1 var(--brush); color: var(--muted); white-space: nowrap; }
.device__nav:hover b { background: var(--fg); color: var(--bg); }
.device__nav--prev:hover b { transform: translateX(-4px); } .device__nav--next:hover b { transform: translateX(4px); }
.device__nav svg { display: none; }
@media (min-width: 1000px) and (min-height: 601px) and (pointer: fine) {
  .device { padding-inline: 8rem; gap: 3vw; }
  .display3d { --dw: min(40vw, 78vh); }
}

/* ================= Bereiche ohne Kreis (alle außer Vision): Vollfläche mit ruhigem Blur-Hintergrund ================= */
@media (min-width: 1000px) and (min-height: 601px) {
  body:not(.is-vision) .panels { background: color-mix(in srgb, var(--bg) 45%, transparent); backdrop-filter: blur(20px) saturate(1.15); -webkit-backdrop-filter: blur(20px) saturate(1.15); }
  body.is-panel:not(.is-vision) .stage { filter: none; }
  body:not(.is-vision) .panels__disc { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; transform: none !important; }
  body:not(.is-vision) .panels__edge, body:not(.is-vision) .panels__exit, body:not(.is-vision) .panels__bgl { display: none !important; }
  body:not(.is-vision) .panels__scroll { --w: min(62rem, calc(100vw - 18rem)); left: calc(50% - var(--w) / 2); top: 0; width: var(--w); height: 100%; padding: 4.5rem 0 3.5rem; -webkit-mask: none; mask: none; }
  body:not(.is-vision) .panels__close { position: fixed; left: auto; top: 1.3rem; right: 1.3rem; translate: none; }
  body.is-vision .panels__nav { display: none; }
}
/* Pfeile überall gleich: feste Höhe (Mitte) und fester Abstand zur Mitte */
@media (min-width: 1000px) and (min-height: 601px) and (pointer: fine) {
  body:not(.is-vision) .panels__nav, .device__nav { position: fixed; top: 50%; translate: 0 -50%; z-index: 5; }
  body:not(.is-vision) .panels__nav--prev, .device__nav--prev { left: max(1.5rem, calc(50vw - 40rem)) !important; right: auto !important; }
  body:not(.is-vision) .panels__nav--next, .device__nav--next { right: max(1.5rem, calc(50vw - 40rem)) !important; left: auto !important; }
  .device__nav { transition: opacity .3s; }
  /* Editing mittig: Text | Gerät, Gerätespalte fix (Displaybreite), damit beim Umschalten nichts springt */
  .device { grid-template-columns: minmax(0, 24rem) min(38vw, 74vh); justify-content: center; padding-inline: 9rem; gap: 3.5vw; }
  .device__copy { justify-self: stretch; }
  .device__stage { width: auto; justify-self: stretch; place-items: center; }
  .display3d { --dw: min(38vw, 74vh); justify-self: center; }
}
/* Hintergrund pausiert, solange ein Bereich offen ist */
body.is-panel .stage *, body.is-panel .stage::before, body.is-device .stage *, body.is-device .stage::before { animation-play-state: paused !important; }
body:not(.is-vision) .panels__bgl { display: none !important; }

body.is-panel .cursor, body.is-device .cursor { opacity: 0 !important; }
/* kleines Handy: Bildschirm leicht gedimmt, beim Hover heller */
.phone__screen video { filter: brightness(.82); transition: filter .4s ease; }
.phone.is-hover .phone__screen video, .phone:hover .phone__screen video { filter: brightness(1.12) saturate(1.05); }

/* ---- Vision Feinschliff ---- */
.vcycle { overflow: hidden; padding: .08em 0 .14em; }
.vcycle > span { opacity: 0; transform: translateY(-110%); transition: transform .55s cubic-bezier(.65,0,.25,1), opacity .4s ease; }
.vcycle > span.is-on { opacity: 1; transform: translateY(0); }
.vcycle > span.is-out { opacity: 0; transform: translateY(110%); }
.vcycle--we { min-width: 9ch; }
.vh--grad { background: linear-gradient(90deg, var(--pink), var(--violet), var(--blue), var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.panel--vision .vend { font: 700 clamp(1.3rem, 2.6vw, 1.9rem)/1.3 var(--geo) !important; color: var(--fg); max-width: 36ch; }
.vis__next { background: #fff !important; color: #1a0d12 !important; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
#p-vision .panel__cta { display: none; }
.vsteps2 .vcycle--we { color: var(--pink); }
.vcycle { color: var(--pink); }
@media (min-width: 1000px) and (min-height: 601px) and (pointer: fine) {
  body:not(.is-vision) .panels__nav--prev, .device__nav--prev { left: max(1rem, calc(50vw - 45rem)) !important; }
  body:not(.is-vision) .panels__nav--next, .device__nav--next { right: max(1rem, calc(50vw - 45rem)) !important; }
  .device { grid-template-columns: minmax(0, 22rem) min(34vw, 68vh); padding-inline: 7.5rem; gap: 3vw; }
  .display3d { --dw: min(34vw, 68vh); }
  .phone3d { --ph: min(64vh, 600px); }
}
/* Vollflächen-Bereiche: mehr Platz nutzen als im Kreis */
@media (min-width: 1000px) and (min-height: 601px) {
  body:not(.is-vision) .panel { max-width: 56rem; width: 100%; }
  body:not(.is-vision) .panel__lead { max-width: 44rem; }
  body:not(.is-vision) #p-picture .pcat__grid { width: min(100%, calc(min(40vh, 24rem) * 2.3)); }
  body:not(.is-vision) #p-design .dset__media { height: min(38vh, 24rem); }
  body:not(.is-vision) #p-design .dset .webcase { width: min(100%, calc(min(38vh, 24rem) * 1.45)); }
  body:not(.is-vision) #p-contact .wiz { max-width: 36rem; }
  body:not(.is-vision) #p-about .chapters { max-width: 54rem; margin-inline: auto; }
  body:not(.is-vision) #p-picture, body:not(.is-vision) #p-design, body:not(.is-vision) #p-contact { zoom: 1 !important; }
}
@media (min-width: 1000px) and (min-height: 601px) {
  body:not(.is-vision) #p-about .chapters { grid-template-columns: repeat(3, 1fr); max-width: min(60rem, calc((100vh - 21rem) * 2.1)); }
  body:not(.is-vision) #p-about .chapter img { aspect-ratio: 16 / 9; }
  body:not(.is-vision) #p-design .dset__media { height: min(34vh, 24rem); }
}
@media (min-width: 1000px) and (min-height: 601px) {
  body:not(.is-vision) #p-about .chapters { max-width: min(58rem, calc((100vh - 27rem) * 1.6)); margin-block: 1.1rem .6rem; }
  body:not(.is-vision) #p-about .chapter__s { display: none; }
  body:not(.is-vision) #p-about h2 { margin-bottom: .6rem; }
  body:not(.is-vision) #p-contact h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
  body:not(.is-vision) #p-contact .wiz__q { font-size: clamp(1.7rem, 3vw, 2.4rem) !important; }
}
@media (min-width: 1000px) and (min-height: 601px) {
  body:not(.is-vision) .panels__scroll { padding-top: 3.5rem; padding-bottom: 2.5rem; }
  body:not(.is-vision) #p-about .chapters { max-width: min(58rem, calc((100vh - 29rem) * 1.6)); }
  body:not(.is-vision) #p-about blockquote { margin: .4rem 0; }
  body:not(.is-vision) #p-design .dset__media { height: min(32vh, 24rem); }
}

/* Vision: nur „Creative Studio & Lab“ im Verlauf */
.vh--grad { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--fg); }
.vgrad { background: linear-gradient(90deg, var(--pink), var(--violet), var(--blue), var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Werkzeuge: Icon links, Text rechts */
.vtool { display: flex !important; align-items: center; justify-content: center; gap: .9rem; text-align: left; }
.vtool__ic { flex: none; width: 2.6rem; height: 2.6rem; padding: .55rem; border-radius: 50%; border: 1px solid var(--line); fill: none; stroke: var(--pink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; background: color-mix(in srgb, var(--pink) 8%, transparent); }
.vtool p { margin: 0 !important; max-width: 34ch !important; }
/* Ziel: jedes Wort eigene Farbe aus dem Schema */
.vcycle > span:nth-child(5n+1) { color: var(--pink); }
.vcycle > span:nth-child(5n+2) { color: var(--violet); }
.vcycle > span:nth-child(5n+3) { color: var(--blue); }
.vcycle > span:nth-child(5n+4) { color: var(--teal); }
.vcycle > span:nth-child(5n+5) { color: #e8a43c; }
/* Wechselwörter mittig, damit nichts hüpft */
.vcycle--we { justify-items: center; text-align: center; }
.vsteps2 { justify-content: center; }
.vsteps2 .vcycle--we { min-width: 12ch; }

/* Schluss: „That's the adventure.“ + nur das TA-Symbol */
.vadv { display: inline-flex; align-items: center; justify-content: center; gap: .45em; font: 800 clamp(1.6rem, 3.2vw, 2.4rem)/1.1 var(--geo) !important; letter-spacing: -.02em; color: var(--fg) !important; }
.vsym { width: 1.25em !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; flex: none;
  -webkit-mask: url(../assets/m/logo-900.webp) left center / auto 100% no-repeat !important; mask: url(../assets/m/logo-900.webp) left center / auto 100% no-repeat !important; }
.vsym:hover { transform: rotate(-8deg) scale(1.08); }
.vwe:not(.vsteps2) { color: var(--fg); gap: .28em; }
.vwe:not(.vsteps2) .vcycle--we { justify-items: start; text-align: left; min-width: 7.2em; }

/* Kontakt: Weiter weiß, nur Abschicken bunt; Instagram mit mehr Luft */
.wiz__next { background: #fff !important; color: #1a0d12 !important; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.wiz__send { background: linear-gradient(135deg, var(--pink), var(--violet)) !important; color: #fff !important; }
.wiz__alt { margin-top: 1.6rem !important; }
/* Handy-Video: in Ruhe gedimmt, Editing gehovert heller, Handy selbst gehovert voll */
.phone__screen video { filter: brightness(.68) saturate(.85) !important; transition: filter .45s ease; }
.stage:has(.tile--editing.is-hover) .phone__screen video { filter: brightness(.9) saturate(.95) !important; }
.stage .phone.is-hover .phone__screen video, .stage:has(.tile--editing.is-hover) .phone.is-hover .phone__screen video, .stage .phone:hover .phone__screen video { filter: brightness(1.12) saturate(1.05) !important; }

/* Design: drei Story-Collagen nebeneinander */
#p-design .dset__stories { display: flex !important; gap: .8rem; justify-content: center; align-items: center; margin: 0; }
#p-design .dset__stories img { height: 100%; width: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; box-shadow: 0 14px 30px rgba(0,0,0,.3); cursor: zoom-in; opacity: 1 !important; transform: none; transition: transform .4s var(--ease); }
#p-design .dset__stories img:hover { transform: translateY(-4px) rotate(-1deg); }
/* Studio Display aus dem 3D-Modell (Blender-Render), Bildschirm-Inhalt liegt exakt auf der Glasfläche */
@media (min-width: 700px) {
  .display3d__frame { position: relative; aspect-ratio: 1836 / 1408; padding: 0; border-radius: 0; background: url(../assets/m/studio-display.webp) center / 100% 100% no-repeat; box-shadow: none; filter: drop-shadow(0 40px 60px rgba(0,0,0,.45)); }
  .display3d__screen { position: absolute; left: 2.18%; top: 2.91%; width: 95.64%; height: 70.16%; border-radius: .4%; box-shadow: none; }
  .display3d__neck, .display3d__foot { display: none; }
}
/* Editing kompakt & gleichmäßig: Gerätespalte = Displaybreite ≈ Handy+Steuerung, Text daneben */
@media (min-width: 1000px) and (min-height: 601px) and (pointer: fine) {
  .device { --col: min(30vw, 47vh, 30rem); grid-template-columns: minmax(0, min(22rem, 30vw)) var(--col); gap: clamp(2rem, 4vw, 4rem); padding-inline: clamp(6.5rem, 9vw, 9rem); }
  .display3d { --dw: var(--col); }
  .phone3d { --ph: min(60vh, 560px, 30vw * 2); }
  .device__copy h2 { font-size: clamp(1.8rem, 2.8vw, 2.9rem); }
  .device__lead { font-size: .98rem; }
}
@media (min-width: 1000px) and (min-height: 601px) and (pointer: fine) {
  .device:not(.device--desk) .device__stage { place-items: center start; }
}
@media (min-width: 1000px) and (max-height: 820px) and (pointer: fine) { .device__list { display: none; } .device__copy h2 { margin-bottom: .6rem; } }

.vwatch__player video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.vcard--reel .vcard__thumb { outline: 2px solid var(--pink); outline-offset: 2px; }
.vcard--reel .vcard__title::before { content: "NEU · "; color: var(--pink); }
/* Editing: Breite nutzen, Gerät mittig zwischen Text und rechtem Pfeil */
@media (min-width: 1000px) and (min-height: 601px) and (pointer: fine) {
  body:not(.is-vision) .panels__nav--prev, .device__nav--prev { left: max(1rem, calc(50vw - 52rem)) !important; }
  body:not(.is-vision) .panels__nav--next, .device__nav--next { right: max(1rem, calc(50vw - 52rem)) !important; }
  .device { --edge: calc(max(1rem, 50vw - 52rem) + 6rem); grid-template-columns: minmax(15rem, min(26rem, 30vw)) minmax(0, 1fr); justify-content: stretch; padding-inline: var(--edge); gap: clamp(1.5rem, 3vw, 4rem); }
  .device__copy { justify-self: end; }
  .device__stage, .device:not(.device--desk) .device__stage { justify-self: stretch; width: 100%; container-type: inline-size; place-items: center; }
  .display3d { --dw: min(100cqw, 82vh, 60rem); justify-self: center; }
  .phone3d { --ph: min(70vh, 720px); translate: -46px 0; }
  .device__copy h2 { font-size: clamp(1.9rem, 2.6vw, 3.4rem); }
}
@media (min-width: 1000px) and (min-height: 601px) and (pointer: fine) {
  .phone3d { --ph: min(74vh, 880px); translate: var(--shift, 0px) 0; }
  .display3d { translate: var(--shift, 0px) 0; }
}
@media (min-width: 1000px) and (min-height: 601px) and (pointer: fine) {
  .phone3d, .display3d { translate: none; position: relative; left: var(--shift, 0px); }
}
@media (min-width: 1000px) and (min-height: 601px) { body:not(.is-vision) #p-about blockquote { margin: 2rem 0 0 !important; } }
/* Lesbarkeit: Vollflächen-Hintergrund ruhiger/deckender, Reiter mit eigener Fläche */
@media (min-width: 1000px) and (min-height: 601px) {
  body:not(.is-vision) .panels { background: color-mix(in srgb, var(--bg) 72%, transparent); }
}
.device { background: color-mix(in srgb, var(--bg) 72%, transparent); }
.pcat__tab:not([aria-selected="true"]) { background: color-mix(in srgb, var(--bg) 70%, transparent); }
/* Mobil: Beschriftungen der Felder immer lesbar */
@media (max-width: 999px), (max-height: 600px) {
  .tile__media::after { background: linear-gradient(180deg, rgba(8,8,8,.62), rgba(8,8,8,.1) 38%, rgba(8,8,8,.1) 58%, rgba(8,8,8,.68)) !important; opacity: 1 !important; }
  .tile__label { text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.7) !important; color: #fff !important; }
  .display3d { --dw: min(94vw, calc((100dvh - 15rem) * 1.25)) !important; }
}
@media (max-width: 999px), (max-height: 600px) {
  .tile__label { background: rgba(10,10,12,.55); padding: .35em .55em; border-radius: 8px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
}
.wiz__count { color: color-mix(in srgb, var(--fg) 80%, transparent); }
#p-contact .wiz__count { color: var(--fg) !important; opacity: .82; }
@media (max-width: 999px), (max-height: 600px), (pointer: coarse) { .display3d { --dw: min(94vw, calc((100dvh - 15rem) * 1.3)) !important; justify-self: center; } }
body:not(.is-vision) .panel__lead { color: color-mix(in srgb, var(--fg) 85%, transparent); }
/* ===== Mobil: schneller zurück, X unten rechts (Daumen), Longform ohne Display ===== */
@media (max-width: 999px), (max-height: 600px), (pointer: coarse) {
  .stage { transition: filter .25s ease !important; }
  .panels__close, .device__close, .pgal__close {
    position: fixed !important; top: auto !important; left: auto !important; translate: none !important;
    right: max(14px, env(safe-area-inset-right)) !important; bottom: max(14px, env(safe-area-inset-bottom)) !important;
    opacity: .82; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 160 !important;
  }
  .panels__close, .device__close { background: color-mix(in srgb, var(--fg) 78%, transparent) !important; }
  .panels__nav--next, .device__nav--next { right: calc(max(14px, env(safe-area-inset-right)) + 70px) !important; left: auto !important; }
  .panels__nav, .device__nav { bottom: max(18px, env(safe-area-inset-bottom)) !important; }
  .panels__scroll { padding-top: 1.5rem !important; padding-bottom: 6.5rem !important; }
  .device__copy { max-width: 100% !important; }
  /* Longform: kein Studio Display, nur der Video-Feed */
  .device--desk .device__stage { align-self: stretch; min-height: 0; overflow: hidden; padding-bottom: 5.5rem; }
  .device--desk .display3d { --dw: 100% !important; width: 100%; height: 100%; transform: none !important; }
  .device--desk .display3d__frame { background: none !important; aspect-ratio: auto !important; height: 100%; padding: 0; filter: none; box-shadow: none; border-radius: 14px; overflow: hidden; }
  .device--desk .display3d__screen { position: relative !important; inset: auto !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 14px; }
  .device--desk .vfeed { --u: 2.9vw; height: 100%; overflow-y: auto; }
  .device--desk .display3d__neck, .device--desk .display3d__foot { display: none !important; }
}
@media (max-width: 999px), (max-height: 600px), (pointer: coarse) {
  .device--desk .display3d__screen, .device--desk .display3d__frame, .device--desk .display3d { height: calc(100dvh - 12.5rem) !important; }
  .device--desk .device__stage { padding-bottom: 0; align-self: start; }
  .phone3d { --ph: min(62dvh, 130vw) !important; }
  .device:not(.device--desk) .device__stage { padding-bottom: 4.5rem; }
}

/* Infoboxen ohne Live-Unschärfe (verursachte Flackern in gekippten, geclippten Kacheln) */
.tile__info { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: color-mix(in srgb, var(--glass) 100%, transparent); backface-visibility: hidden; transform-style: flat; will-change: opacity, transform; }
:root { --glass: rgba(10,10,12,.82); }
[data-theme="light"] { --glass: rgba(250,247,242,.93); }
.tile { backface-visibility: hidden; }

/* Design: Bilder halb entsättigt, beim Hover voll in Farbe */
#p-design .dset__media img, #p-design .webcase__view img { filter: grayscale(.5); cursor: default !important; transition: filter .6s ease, transform .5s var(--ease) !important; }
#p-design .dset__media img:hover, #p-design .webcase:hover .webcase__view img { filter: grayscale(0); }
#p-design .dset__stories img:hover { transform: translateY(-4px); }

/* Longform-Feed: Suchleiste immer einzeilig (Handy: kleinere Schrift statt Umbruch) */
.vfeed__search { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
  .vfeed__bar { gap: calc(var(--u) * 1.4); }
  .vfeed__search { max-width: none; font-size: .82em; padding: .5em .9em; }
}

/* Bildvorschauen: jedes Bild blendet erst ein, wenn es geladen ist – nacheinander mit kleinem Versatz */
.pcat__set img:not(.is-ld) { opacity: 0 !important; transform: translateY(14px) scale(.985) !important; }
.pcat__set.is-on img.is-ld { transition: opacity .7s ease, transform .9s var(--ease), filter .6s ease; transition-delay: var(--ld, calc(var(--d, 0) * 60ms)); }
.pcat__set.is-on img.is-ld:hover { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { html:not(.motion-ok) .pcat__set img:not(.is-ld) { opacity: 1 !important; transform: none !important; } }

/* Handy: kurze Panels (Picture, Design, Vision, Kontakt) mittig statt oben kleben – lange scrollen weiter von oben */
@media (max-width: 999px), (max-height: 600px), (pointer: coarse) {
  .panels__scroll { align-content: safe center !important; padding-top: 2.5rem !important; }
}

/* Galerie-Polaroid: Beschriftung exakt mittig im weißen Streifen (Streifen = 17 % der Breite) */
.pgal__pola { container-type: inline-size; }
.pgal__pola figcaption { bottom: 0; height: 17cqw; align-items: center; padding: 0 0 .12em; }   /* Caveat sitzt optisch tief → etwas anheben */
.pgal__pola figcaption small { align-self: center; translate: 0 .15em; }

/* Design · Social-Media-Stories: alle drei 9:16-Bilder vollständig zeigen (Breite bestimmt die Größe, nichts wird beschnitten) */
#p-design .dset__media.dset__stories { height: auto !important; width: min(100%, calc(38vh * 1.6875 + 1.6rem), 36rem); overflow: visible; }
#p-design .dset__stories img { flex: 1 1 0; min-width: 0; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; }