/* ==========================================================================
   SHOOTIM — GLASS (Schwarzweiß)
   Baut auf dem Look der Startseite auf: dunkel, Schwarzweiß-Verläufe,
   Grain, weiches Riffelglas. Hintergrund + Glasobjekte: assets/backdrop.js
   Typo: Hanken Grotesk (Medium, Versalien) / Bodoni Moda Italic (wie das Logo-Projekt)
   ========================================================================== */

:root {
  --ink: #ecebe7;
  --dim: rgba(236, 235, 231, 0.46);
  --faint: rgba(236, 235, 231, 0.14);
  --paper: #0d0d0e;

  /* Schriften wie im Logo-Projekt: Grotesk (≈ Helvetica Neue), Serif-Kursiv (≈ Didot), Mono */
  /* Markenschriften (Logo-Präsentation): Grotesk Medium in Versalien trägt,
     ein Wort in Didot Italic greift ein – pro Zeile höchstens ein kursives Wort. */
  --font: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;   /* ≈ Helvetica Neue */
  --serif: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;                  /* ≈ Didot Italic */
  --display-weight: 500;                                                        /* Medium */
  --track: -0.03em;                                                             /* Laufweite −30 */
  --g: clamp(20px, 2.2vw, 40px);
  --space: clamp(140px, 24vh, 300px);
  --rib: 72px;
  --r: clamp(16px, 1.6vw, 28px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --axis: 50vw;                                                                 /* gemeinsame Achse: alles Rechte beginnt hier */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--paper); }

.label { font-family: var(--font); font-weight: var(--display-weight); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; }
em.serif { font-family: var(--serif); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: -0.01em; font-size: 1.06em; line-height: 0; }
.h-logo { display: inline-flex; align-items: center; height: 22px; }
.h-logo img { height: 100%; width: auto; }
.big { font-weight: var(--display-weight); text-transform: uppercase; font-size: clamp(30px, 4.6vw, 76px); line-height: 1.08; letter-spacing: var(--track); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.huge { font-weight: var(--display-weight); text-transform: uppercase; font-size: clamp(46px, 9vw, 160px); line-height: 0.95; letter-spacing: var(--track); }
.dim { color: var(--dim); }
/* Überschriften der Bereiche: die geschwungene Kursive aus dem Logo (Didot/Bodoni Italic) */
.kicker { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.01em; font-size: clamp(28px, 2.8vw, 48px); line-height: 1; }

/* ---------- Hintergrund ---------- */
.backdrop { position: fixed; left: 0; top: 0; width: 100vw; height: 100lvh; z-index: -1; display: block; pointer-events: none; }
.bg { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(60% 50% at 25% 20%, #3a3a3d, transparent 70%), radial-gradient(50% 50% at 80% 70%, #242427, transparent 70%), var(--paper); }
.has-backdrop .bg { display: none; }

.grain {
  position: fixed; inset: -100%; width: 300%; height: 300%;
  pointer-events: none; z-index: 200; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(5) infinite;
  will-change: transform;
}
@keyframes grain {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-4%, 3%, 0); }
  40% { transform: translate3d(3%, -4%, 0); }
  60% { transform: translate3d(-3%, -2%, 0); }
  80% { transform: translate3d(4%, 4%, 0); }
}

.ribs { /* weiche, organische Riffel als Lichtstruktur */
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.07) calc(var(--rib) * .5), rgba(255,255,255,0) var(--rib));
}

/* Schwebende Glasobjekte: nur Platzhalter – gezeichnet im Hintergrund-Shader */
.glass-obj { position: absolute !important; pointer-events: none; translate: 0 var(--gy, 0); }
.g-statement { width: min(20vw, 300px); height: min(64vh, 620px); right: 10vw; top: 50%; margin-top: calc(min(64vh, 620px) / -2); }
.g-services { width: min(19vw, 270px); aspect-ratio: 1; right: 8vw; top: 4vh; }

/* ==========================================================================
   HEADER + MENÜ
   ========================================================================== */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--g);
  color: #fff; mix-blend-mode: difference;
  opacity: 0; transform: translate3d(0, -12px, 0); pointer-events: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.header.show, body.menu-open .header { opacity: 1; transform: none; pointer-events: auto; }
body.menu-open .header { mix-blend-mode: normal; }
.header a:hover, .header button:hover { opacity: .55; }

/* Menü: eine Glasscheibe fährt von oben herunter – mit heller Glaskante und
   einem Bild dahinter, das je Menüpunkt Rippe für Rippe wechselt */
.menu {
  position: fixed; inset: 0; z-index: 110; overflow: hidden;
  padding: calc(var(--g) * 4) var(--g) var(--g);
  display: flex; flex-direction: column; justify-content: space-between;
  background: #0b1013;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
  transform: translate3d(0, -102%, 0); visibility: hidden;
  transition: transform 1.15s var(--ease), visibility 0s 1.15s;
}
body.menu-open .menu { transform: none; visibility: visible; transition: transform 1.15s var(--ease); }
.menu-glass { position: absolute; inset: 0; z-index: 0; }
.menu-shade { /* hält die Schrift auf jedem Bild lesbar */
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(6, 9, 11, .6) 0%, rgba(6, 9, 11, .3) 50%, rgba(6, 9, 11, .12) 100%), linear-gradient(to top, rgba(6, 9, 11, .5), transparent 35%);
}
.menu::after { /* Glaskante unten */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.8) 38%, rgba(255,255,255,.25) 70%, rgba(255,255,255,.08));
  box-shadow: 0 0 22px 2px rgba(220, 236, 244, .28);
}
.menu > nav, .menu > .menu-meta { position: relative; z-index: 1; }
.menu-nav { display: flex; flex-direction: column; gap: .1em; }
.menu-nav a {
  display: flex; align-items: flex-start; gap: 14px; width: max-content;
  font-weight: var(--display-weight); text-transform: uppercase; letter-spacing: var(--track);
  font-size: clamp(44px, 7vw, 120px); line-height: .98;
  transition: filter .5s var(--ease), transform .8s var(--ease), color .4s;
}
.menu-num { font-size: 11.5px; line-height: 1; padding-top: .9em; color: var(--dim); letter-spacing: .06em; }
.menu-nav a[aria-current] .menu-t { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: -0.01em; }
body.menu-open .menu-nav a { animation: menuIn 1.2s var(--ease) both; }
body.menu-open .menu-nav a:nth-child(1) { animation-delay: .3s; }
body.menu-open .menu-nav a:nth-child(2) { animation-delay: .37s; }
body.menu-open .menu-nav a:nth-child(3) { animation-delay: .44s; }
body.menu-open .menu-nav a:nth-child(4) { animation-delay: .51s; }
@keyframes menuIn { from { opacity: 0; filter: blur(14px); translate: 0 -28px; } to { opacity: 1; filter: blur(0); translate: 0 0; } }
@media (hover: hover) {
  .menu-nav:hover a { color: rgba(236, 235, 231, .38); }
  .menu-nav a:hover { color: var(--ink); transform: translate3d(14px, 0, 0); }
}
.menu-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: var(--g); opacity: 0; transition: opacity .8s var(--ease); }
body.menu-open .menu-meta { opacity: 1; transition-delay: .6s; }
.menu-meta .dim { margin-bottom: 8px; }

/* ==========================================================================
   INTRO
   ========================================================================== */
.intro { position: relative; height: 100svh; min-height: 520px; overflow: hidden; }
.glass-stage { position: absolute; inset: 0; }
.intro .glass-stage { /* läuft weich in den dunklen Hintergrund aus */
  -webkit-mask-image: linear-gradient(#000 62%, transparent);
          mask-image: linear-gradient(#000 62%, transparent);
}
.glass-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.glass-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px); transform: scale(1.08); }
.intro-ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; color: #fff; mix-blend-mode: difference; }
.intro-ui > * { position: absolute; opacity: 0; filter: blur(10px); transition: opacity 1.6s var(--ease), filter 1.6s var(--ease); }
.is-ready .intro-ui > * { opacity: 1; filter: none; }
.intro-logo { left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(200px, 26vw, 420px); }
.intro-logo img { width: 100%; height: auto; }
.intro-logo .logo-text { font-size: clamp(44px, 5vw, 80px); font-weight: var(--display-weight); text-transform: uppercase; letter-spacing: var(--track); }
.intro-side { top: 50%; transform: translateY(-50%); }
.intro-side.l { left: calc(var(--g) * 1.5); }
.intro-side.r { right: calc(var(--g) * 1.5); }
.intro-scroll { left: 50%; bottom: calc(var(--g) * 2); transform: translateX(-50%); transition-delay: .5s; }
.is-ready .intro-side { transition-delay: .25s; }

/* ==========================================================================
   STICKY-TEXT (Statement, About)
   ========================================================================== */
.reveal { position: relative; height: 230vh; }
.reveal-sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: center; gap: 5vw;
  padding: 0 var(--g);
}
.reveal-sticky > * { position: relative; }
.reveal-sticky .big { margin: 0; max-width: 22ch; }
.w { opacity: .16; transition: opacity .9s var(--ease); }
.w.on { opacity: 1; }
.focus-text .w { filter: blur(10px); opacity: .26; transition: filter 1.6s var(--ease), opacity 1.6s var(--ease); }
.focus-text .w.on { filter: none; opacity: 1; }

/* About: große, versetzte Zeilen, dahinter ein Foto; darunter Überschrift + Text auf der Achse der letzten Zeile */
.about { position: relative; padding: var(--space) 0; }
.about-stage { position: relative; min-height: 72svh; display: flex; align-items: center; }
.about-head {
  position: relative; z-index: 2; width: 100%; margin: 0; pointer-events: none;
  font-weight: var(--display-weight); text-transform: uppercase; letter-spacing: -0.035em;
  font-size: clamp(52px, 9.4vw, 172px); line-height: .9; color: #fff;
}
.ah-line { display: block; white-space: nowrap; transform: translate3d(var(--x, 0), 0, 0); transition: transform .9s var(--ease); }
.ah-line:nth-child(1) { padding-left: 7vw; }
.ah-line:nth-child(2) { padding-left: 36vw; }
.ah-line:nth-child(3) { padding-left: var(--axis); }
.ah-line em.serif { font-size: 1.05em; letter-spacing: -0.02em; line-height: .9; }
.about-photo {
  position: absolute; z-index: 1; left: 21%; top: 50%; width: clamp(160px, 17vw, 290px); aspect-ratio: 4 / 5;
  overflow: hidden; border-radius: 3px; box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
  transform: translate(-50%, -64%) rotate(calc(-5deg + var(--k, 0) * 4deg)) scale(calc(.94 + var(--k, 0) * .06));
  transition: transform 1.2s var(--ease);
}
.about-photo canvas, .about-photo img { filter: brightness(.74) contrast(1.06); } /* weiße Schrift bleibt darüber lesbar */
.about-foot { display: grid; grid-template-columns: calc(var(--axis) - var(--g)) minmax(0, 46ch); align-items: baseline; padding: 0 var(--g); margin-top: clamp(32px, 7vh, 80px); }
.about-foot .kicker { font-size: clamp(24px, 2vw, 34px); }
.about-text { margin: 0; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; color: rgba(236, 235, 231, .82); }
.about-text em.serif { font-size: 1.12em; color: var(--ink); }

/* ==========================================================================
   GLAS-SCHRIFT (Selected Works, Kontakt)
   ========================================================================== */
.glassword { position: relative; height: 220vh; }
.glassword-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.glassword-stage { position: absolute; inset: 0; }

/* ==========================================================================
   BILDSTRECKE – Layout wie im Kolja-Showreel:
   randlose Reihen ohne Abstände, keine Ecken, keine Effekte.
   r-full = Vollbild · r-pair = 50/50 · r-split = 2/3 + 1/3
   r-inset = eingerücktes Paar
   ========================================================================== */
.stream { padding-bottom: var(--space); }
.row { display: flex; width: 100%; }
.frame { position: relative; margin: 0; display: block; cursor: pointer; flex: none; }
.frame .media { position: relative; overflow: hidden; height: 100%; background: #111; }
.frame .media > img, .frame .media > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.025);
  transition: opacity 1.4s var(--ease), transform 1.8s var(--ease), filter .6s var(--ease);
}
.frame.in .media > img, .frame.in .media > video { opacity: 1; transform: none; }
figure.frame { cursor: zoom-in; }
@media (hover: hover) { .frame:hover .media > img { filter: brightness(.9); } }
/* Titel + Text klein oben auf dem ersten Bild (wie bei Kolja) */
.frame .over {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; padding: 16px 1vw;
  color: #fff; pointer-events: none;
}
.frame .over-title { font-size: 16px; text-transform: uppercase; }
.frame .over p { margin: 0; font-size: 14px; line-height: 1.4; max-width: 60ch; }

.r-full .frame { width: 100%; height: 75vw; max-height: 120svh; }
.r-pair .frame { width: 50%; height: 62.5vw; max-height: 110svh; }
.r-split .frame { height: 50vw; max-height: 100svh; }
.r-split .frame:first-child { width: 66.666%; }
.r-split .frame:last-child { width: 33.334%; }
.r-inset { justify-content: space-between; padding: 6vh 6vw; }
.r-inset .frame { width: 39%; height: 28vw; }

/* ==========================================================================
   GLAS-INDEX (Arbeiten) – Bild formatfüllend hinter Riffelglas, links nur die Titel
   ========================================================================== */
.stream.gi { position: relative; padding: 0; }
.gi-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.gi-stage { position: absolute; inset: 0; cursor: pointer; opacity: var(--stage, 1); }
.gi-stage, .gi-shade { /* weiche Kanten beim Hinein- und Herausscrollen */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-t, 0%), #000 calc(100% - var(--fade-b, 0%)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-t, 0%), #000 calc(100% - var(--fade-b, 0%)), transparent 100%);
}
.gi-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--stage, 1);
  background: linear-gradient(90deg, rgba(6, 9, 11, .52), rgba(6, 9, 11, .14) 42%, rgba(6, 9, 11, 0) 70%),
              linear-gradient(to top, rgba(6, 9, 11, .32), rgba(6, 9, 11, 0) 30%);
}
.gi-list {
  position: absolute; left: var(--g); top: 50%; transform: translateY(-50%); z-index: 2;
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; opacity: var(--ui, 1);
}
/* wie eine Kundenliste: kleines quadratisches Bild, daneben die Marke – groß, eng, ohne Nummern */
.gi-list a {
  display: flex; align-items: center; gap: .22em; width: max-content; max-width: calc(100vw - var(--g) * 2);
  color: rgba(255, 255, 255, .42); font-weight: var(--display-weight); text-transform: uppercase;
  letter-spacing: -0.04em; font-size: clamp(30px, 4.6vw, 80px); line-height: .98;
  transition: color .7s var(--ease);
}
.gi-list a.on { color: #fff; }
@media (hover: hover) { .gi-list a:not(.on):hover { color: rgba(255, 255, 255, .78); } }
.gi-thumb {
  flex: none; position: relative; width: .74em; height: .74em; overflow: hidden; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); opacity: .55; transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.gi-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gi-list a.on .gi-thumb { opacity: 1; }
.gi-t { white-space: nowrap; }
.gi-meta { position: absolute; right: var(--g); bottom: var(--g); z-index: 2; display: flex; gap: 20px; align-items: center; color: #fff; opacity: var(--ui, 1); }
.gi-meta > * { transition: opacity .35s ease, transform .6s var(--ease); }
.gi-meta.out > * { opacity: 0; transform: translate3d(0, 6px, 0); }
.gi-cta { color: #fff; cursor: pointer; white-space: nowrap; }
.gi-cta-i { display: inline-block; margin-left: 4px; transition: transform .6s var(--ease); }
@media (hover: hover) { .gi-cta:hover .gi-cta-i { transform: translate3d(3px, -3px, 0); } }

/* ==========================================================================
   LEISTUNGEN (ohne Linien, nur Rhythmus)
   ========================================================================== */
.services { position: relative; display: grid; grid-template-columns: calc(var(--axis) - var(--g)) 1fr; align-items: baseline; padding: 0 var(--g) var(--space); }
.service-list { list-style: none; margin: 0; padding: 0; }
.service-list li { padding: 6px 0; }
.service-list .big { font-size: clamp(26px, 3vw, 50px); }

/* ==========================================================================
   KONTAKT – Satz hinter Glas + ruhige Infos
   ========================================================================== */
.contact { position: relative; }
.contact-info {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); row-gap: 48px;
  padding: 0 var(--g) var(--g);
}
.contact-info > .kicker { grid-column: 1 / 13; margin-bottom: -24px; }
.contact-mail { grid-column: 1 / 13; font-weight: var(--display-weight); font-size: clamp(28px, 5vw, 84px); letter-spacing: -0.03em; line-height: 1; width: max-content; max-width: 100%; overflow-wrap: anywhere; transition: opacity .4s; }
.contact-mail:hover { opacity: .6; }
.contact-info .col { grid-column: span 3; min-width: 0; overflow-wrap: anywhere; }
.contact-info .col .dim { display: block; margin-bottom: 4px; }
.contact-info a:hover { opacity: .6; }
.contact-info .foot { grid-column: 1 / 13; display: flex; justify-content: space-between; gap: 20px; padding-top: 12vh; color: var(--dim); }

/* ==========================================================================
   PROJEKTSEITE
   ========================================================================== */
.p-head { left: var(--g); right: var(--g); bottom: calc(var(--g) * 2.6); display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 24px); }
.p-title { margin: 0; }
.p-kicker { font-size: clamp(32px, 3.6vw, 60px); }
.p-sub { left: var(--g); bottom: var(--g); }
.p-sub-r { right: var(--g); bottom: var(--g); }
.p-info { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--g); padding: var(--space) var(--g); }
.p-info .facts { grid-column: 1 / 7; display: grid; grid-template-columns: auto 1fr; gap: 8px 32px; align-content: start; }
.p-info .big { grid-column: 7 / 13; margin: 0; font-size: clamp(24px, 2.8vw, 46px); hyphens: manual; -webkit-hyphens: manual; }

/* Riffelglas-Scheibe gibt jedes Bild beim Erscheinen frei (gleitet nach rechts weg) */
.rows .frame .media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-color: rgba(13, 18, 21, .16);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.09) calc(var(--rib) * .5), rgba(255,255,255,0) var(--rib));
  -webkit-backdrop-filter: blur(24px) saturate(110%); backdrop-filter: blur(24px) saturate(110%);
  border-left: 1px solid rgba(255, 255, 255, .55); box-shadow: -14px 0 30px rgba(0, 0, 0, .18);
  transform: translate3d(-1px, 0, 0); transition: transform 1.8s var(--ease) .2s;
}
.rows .frame.in .media::after { transform: translate3d(101%, 0, 0); }

/* Nächstes Projekt: formatfüllend hinter Glas */
.p-next { position: relative; display: block; height: 86svh; overflow: hidden; cursor: pointer; }
.p-next .glass-stage { position: absolute; inset: 0; }
.p-next::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 45% at 50% 52%, rgba(6, 9, 11, .38), rgba(6, 9, 11, 0)); }
.p-next-ui { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: var(--g); text-align: center; color: #fff; pointer-events: none; }
.p-next-title { max-width: 12ch; transition: letter-spacing 1s var(--ease); }
@media (hover: hover) { .p-next:hover .p-next-title { letter-spacing: 0; } }
.p-foot { display: flex; justify-content: space-between; gap: 20px; padding: var(--g); color: var(--dim); }
.p-foot a:hover { color: var(--ink); }

/* ==========================================================================
   KONTAKTSEITE – ganz reduziert: nur die Daten, groß
   ========================================================================== */
.c-page {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(40px, 7vh, 80px);
  padding: calc(var(--g) * 5) var(--g) calc(var(--g) * 3);
}
.c-lines { display: flex; flex-direction: column; gap: .12em; }
.c-line {
  width: max-content; max-width: 100%; overflow-wrap: anywhere;
  font-weight: var(--display-weight); text-transform: uppercase; letter-spacing: var(--track);
  font-size: clamp(30px, 6.2vw, 112px); line-height: 1;
  transition: color .45s var(--ease), transform .8s var(--ease);
}
.c-line em.serif { font-size: .8em; }
.c-mail { text-transform: none; overflow-wrap: normal; }
@media (hover: hover) {
  .c-lines:hover .c-line { color: rgba(236, 235, 231, .32); }
  .c-lines .c-line:hover { color: var(--ink); transform: translate3d(14px, 0, 0); }
}
.c-info { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: var(--g); }
.c-info .dim { display: block; margin-bottom: 6px; }
.c-info a:hover { opacity: .6; }

/* ==========================================================================
   IMPRESSUM + DATENSCHUTZ – ruhig, gut lesbar, links Überschrift, rechts Text
   ========================================================================== */
.legal { display: flex; flex-direction: column; padding: calc(var(--g) * 5) var(--g) var(--space); }
.legal-head { display: flex; flex-direction: column; gap: 22px; padding-bottom: clamp(56px, 10vh, 120px); }
.legal-title { margin: 0; font-size: clamp(30px, 4.4vw, 76px); max-width: 17ch; hyphens: manual; -webkit-hyphens: manual; }
.legal-sec { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); padding: 26px 0; }
.legal-sec h2 { grid-column: 1 / 7; margin: 5px 0 0; padding-right: var(--g); }
.legal-txt { grid-column: 7 / 13; max-width: 68ch; font-size: 16px; line-height: 1.6; color: rgba(236, 235, 231, .82); }
.legal-txt p { margin: 0 0 1em; }
.legal-txt p:last-child { margin-bottom: 0; }
.legal-txt ul { margin: 0 0 1em; padding-left: 1.1em; }
.legal-txt li { margin-bottom: .4em; }
.legal-txt a { text-decoration: underline; text-underline-offset: 3px; }
.legal-txt a:hover { opacity: .6; }
.legal-txt strong { font-weight: 500; color: var(--ink); }
.legal-nav { display: flex; gap: 28px; padding-top: 64px; }
.legal-nav a:hover { opacity: .6; }

/* ==========================================================================
   LIGHTBOX + SEITENWECHSEL (dunkles Milchglas)
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center; padding: calc(var(--g) * 3) var(--g);
  background: rgba(13, 13, 14, .45);
  -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s .7s;
  cursor: zoom-out;
}
.lightbox.open { opacity: 1; visibility: visible; transition: opacity .7s var(--ease); }
.lightbox img, .lightbox video {
  max-width: 100%; max-height: 100%; border-radius: var(--r); object-fit: contain;
  transform: scale(.96); filter: blur(10px); transition: transform 1s var(--ease), filter 1s var(--ease);
}
.lightbox.open img, .lightbox.open video { transform: none; filter: none; }
.lightbox .label { position: absolute; left: var(--g); right: var(--g); bottom: var(--g); display: flex; justify-content: space-between; }

.veil {
  position: fixed; inset: 0; z-index: 300; pointer-events: none;
  background-color: rgba(13, 13, 14, .6);
  -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.07) calc(var(--rib) * .5), rgba(255,255,255,0) var(--rib));
  opacity: 1; transition: opacity 1.4s var(--ease);
}
.is-ready .veil { opacity: 0; }
.is-leaving .veil { opacity: 1; transition-duration: .7s; }

.rv { opacity: 0; filter: blur(12px); transform: translate3d(0, 24px, 0); transition: opacity 1.9s var(--ease), filter 1.9s var(--ease), transform 1.9s var(--ease); }
.rv.in { opacity: 1; filter: none; transform: none; }

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 860px) {
  :root { --rib: 48px; --space: 140px; }
  .intro-side { top: auto; bottom: calc(var(--g) * 2); transform: none; }
  .intro-side.l { left: var(--g); }
  .intro-side.r { right: var(--g); }
  .intro-scroll { display: none; }
  .reveal-sticky { flex-direction: column; justify-content: center; align-items: flex-start; gap: 36px; }
  .about-stage { min-height: 0; padding: 26vw 0 4vw; }
  .about-head { font-size: 11vw; }
  .ah-line:nth-child(1) { padding-left: var(--g); }
  .ah-line:nth-child(2) { padding-left: 52vw; }
  .ah-line:nth-child(3) { padding-left: 26vw; }
  .about-photo { width: 38vw; left: 27%; }
  .about-foot { grid-template-columns: 1fr; row-gap: 18px; }
  .about-text { font-size: 15px; }
  .g-statement { width: 34vw; height: 46vh; right: -6vw; top: 70%; margin-top: 0; }
  .g-services { width: 36vw; right: -6vw; top: -6vh; }
  .r-full .frame { height: 110vw; }
  .r-pair .frame { height: 66vw; }
  .r-split .frame { height: 70vw; }
  .r-inset { padding: 4vh 4vw; }
  .r-inset .frame { width: 47%; height: 58vw; }
  .frame .over { grid-template-columns: 1fr; gap: 8px; padding: 14px 4vw; }
  :root { --axis: 0px; }
  .services { grid-template-columns: 1fr; row-gap: 24px; }
  .contact-info .col { grid-column: span 6; }
  .contact-info .foot { flex-wrap: wrap; }
  .menu-meta { grid-template-columns: 1fr 1fr; }
  .p-info { grid-template-columns: 1fr; row-gap: 40px; }
  .p-info .facts, .p-info .big { grid-column: 1; }
  .p-foot { flex-wrap: wrap; }
  .gi-list { top: auto; bottom: calc(var(--g) * 4.2); transform: none; }
  .gi-shade { background: linear-gradient(to top, rgba(6, 9, 11, .62), rgba(6, 9, 11, .2) 45%, rgba(6, 9, 11, 0) 65%); }
  .gi-list a { font-size: clamp(24px, 7.4vw, 38px); }
  .gi-meta { left: var(--g); right: var(--g); justify-content: space-between; }
  .c-line { font-size: clamp(22px, 7.4vw, 40px); }
  .c-info { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .legal-sec { grid-template-columns: 1fr; row-gap: 12px; padding: 22px 0; }
  .legal-sec h2, .legal-txt { grid-column: 1; }
  .legal-txt { font-size: 15px; }
}

@media (max-width: 400px) {
  .big { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; }
  .w, .focus-text .w { opacity: 1; filter: none; }
}