/* ============================================================
   MIENJUNG — Static clone (Framer replacement)
   Shared stylesheet
   ============================================================ */

/* ---------- Switzer (lokal gehostet, DSGVO-konform, kein externer Font-CDN) ---------- */
@font-face { font-family: "Switzer"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/switzer-400.woff2") format("woff2"); }
@font-face { font-family: "Switzer"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/switzer-500.woff2") format("woff2"); }
@font-face { font-family: "Switzer"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/switzer-600.woff2") format("woff2"); }
@font-face { font-family: "Switzer"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/switzer-700.woff2") format("woff2"); }
@font-face { font-family: "Switzer"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/switzer-800.woff2") format("woff2"); }
@font-face { font-family: "Switzer"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/switzer-900.woff2") format("woff2"); }

/* ---------- Reset & tokens ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f0e0e;
  --fg: #f4f4f4;
  --white: #ffffff;
  --muted: #7a7a7a;
  --muted-2: #4a4a4a;
  --line: rgba(255, 255, 255, 0.12);
  --accent: #20d38f;
  --pad: clamp(20px, 4vw, 44px);
  --maxw: 1440px;
  --font: "Switzer", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.no-scroll { overflow: hidden; height: 100vh; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

.upper { text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Intro loader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: transform 1s var(--ease), opacity 0.6s ease;
}
/* Loader logo sits at the EXACT size & position of the hero logo, so when the
   black overlay fades the logo simply stays put and everything else appears. */
#loader { transition: opacity 0.8s var(--ease); }
#loader .loader-logo { position: relative; width: min(90vw, 1120px); }
#loader .loader-logo img { width: 100%; height: auto; display: block; max-width: none; }
#loader .ll-base { filter: brightness(0.22); }        /* dim base */
#loader .ll-fill {                                     /* bright, wipes left -> right */
  position: absolute; inset: 0; filter: brightness(1);
  clip-path: inset(0 100% 0 0);
  animation: logoWipe 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes logoWipe { to { clip-path: inset(0 0 0 0); } }
/* Reveal: the black overlay fades out. Behind it sit the menu, subtitle and the
   identical, pixel-aligned hero logo — so the logo appears to stay perfectly still
   while everything around it appears. */
body.loaded #loader { opacity: 0; pointer-events: none; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 950;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(16px, 2.2vw, 26px) var(--pad);
  font-size: 13px; font-weight: 600; color: var(--white);
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease, padding 0.35s ease;
}
/* subtle frosted-glass bar once you scroll, so the menu stays readable over any content */
.nav.scrolled {
  padding-top: clamp(12px, 1.6vw, 18px); padding-bottom: clamp(12px, 1.6vw, 18px);
  background: rgba(13, 13, 13, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.nav .brand-logo { height: clamp(14px, 1.4vw, 17px); width: auto; display: block; }
.nav a, .nav span { text-transform: uppercase; letter-spacing: 0.06em; }
.nav .brand { font-weight: 700; letter-spacing: 0.02em; }
.nav .menu { display: flex; gap: clamp(18px, 2.5vw, 34px); }
.nav .menu a { position: relative; transition: opacity 0.25s ease; }
.nav .menu a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 0;
  background: currentColor; transition: width 0.3s var(--ease);
}
.nav .menu a:hover::after { width: 100%; }
.nav .reg { font-weight: 600; }

/* ---------- Nav trigger (mobile/kleines Tablet: ersetzt die Menüpunkte durch ein Command-Menu) ---------- */
.nav-trigger {
  display: none; /* eingeblendet nur <=900px, siehe Media Query unten */
  align-items: center; gap: 10px;
  background: none; border: none; padding: 4px 0; margin: 0;
  font-family: var(--font); color: var(--white); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-trigger .nt-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.nav-trigger .nt-icon { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.nav-trigger .nt-icon span {
  position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; background: currentColor;
  transform-origin: center; transition: transform 0.4s var(--ease);
}
.nav-trigger .nt-icon span:first-child { transform: translateY(-50%) rotate(0deg); }
.nav-trigger .nt-icon span:last-child  { transform: translateY(-50%) rotate(90deg); }
.nav-trigger[aria-expanded="true"] .nt-icon span:first-child { transform: translateY(-50%) rotate(45deg); }
.nav-trigger[aria-expanded="true"] .nt-icon span:last-child  { transform: translateY(-50%) rotate(135deg); }
.nav-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- Mobile-Menü (vollflächiges Command-Menu) ----------
   Nur für Mobile/kleines Tablet (<=900px, Desktop-Nav bleibt unangetastet).
   Bleibt immer im Layout (fixed, kein Platzverbrauch im Fluss); geschlossen ist es
   per visibility/opacity/pointer-events unsichtbar und aus Fokus-/Klick-Reihenfolge
   entfernt, offen blendet es sich als eigene volle Seite ein. */
.mobile-menu {
  position: fixed; inset: 0; z-index: 900;
  height: 100vh; height: 100dvh;
  visibility: hidden; opacity: 0; pointer-events: none;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding:
    calc(clamp(16px, 2.2vw, 26px) + env(safe-area-inset-top, 0px))
    calc(var(--pad) + env(safe-area-inset-right, 0px))
    calc(clamp(16px, 2.5vh, 28px) + env(safe-area-inset-bottom, 0px))
    calc(var(--pad) + env(safe-area-inset-left, 0px));
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}
.mobile-menu.is-open {
  visibility: visible; opacity: 1; pointer-events: auto;
  transition: opacity 0.5s var(--ease), visibility 0s linear 0s;
}
/* Akzentlinie wächst vom Trigger aus über die volle Breite */
.mobile-menu::before {
  content: ""; position: absolute;
  left: var(--pad); top: calc(clamp(16px, 2.2vw, 26px) + env(safe-area-inset-top, 0px) + 42px);
  width: 0; height: 1px; background: var(--accent);
  transition: width 0.6s var(--ease) 0.1s;
}
.mobile-menu.is-open::before { width: calc(100% - (var(--pad) * 2)); }

.mm-inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; min-height: 0; padding-top: clamp(56px, 10vh, 92px); }

.mm-nav { position: relative; }
.mm-indicator {
  position: absolute; left: -16px; top: 0; width: 3px; height: 0; border-radius: 2px;
  background: var(--accent); opacity: 0;
  transition: transform 0.4s var(--ease), height 0.4s var(--ease), opacity 0.25s ease;
  pointer-events: none;
}
.mm-list { list-style: none; display: grid; gap: clamp(2px, 0.6vh, 8px); }
.mm-list li { overflow: hidden; --i: 0; }
.mm-list a {
  position: relative; display: flex; align-items: baseline; gap: 16px;
  padding: clamp(9px, 1.5vh, 15px) 4px;
  font-size: clamp(28px, 8.6vw, 44px); font-weight: 500; letter-spacing: -0.02em;
  color: var(--fg);
  opacity: 0; transform: translateY(18px);
  transition: color 0.3s ease, transform 0.3s var(--ease);
}
.mobile-menu.is-open .mm-list a {
  opacity: 1; transform: translateY(0);
  transition: color 0.3s ease, transform 0.5s var(--ease) calc(var(--i) * 0.06s), opacity 0.5s var(--ease) calc(var(--i) * 0.06s);
}
.mobile-menu.is-closing .mm-list a {
  transition: color 0.3s ease, transform 0.4s var(--ease) calc((4 - var(--i)) * 0.05s), opacity 0.35s var(--ease) calc((4 - var(--i)) * 0.05s);
}
.mobile-menu.is-open .mm-list a:hover,
.mobile-menu.is-open .mm-list a:focus-visible,
.mobile-menu.is-open .mm-list a.is-current { color: var(--accent); transform: translateY(0) translateX(10px); }
.mm-list a:focus-visible { outline: 1px dashed var(--accent); outline-offset: 6px; }
.mm-num { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: var(--muted); align-self: flex-start; margin-top: 0.55em; }
.mm-txt { text-transform: uppercase; }

.mm-bg-word {
  position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(96px, 17vh, 150px);
  z-index: 0; pointer-events: none; text-align: right;
  font-size: clamp(22px, 7.6vw, 52px); font-weight: 800; letter-spacing: -0.01em;
  text-transform: uppercase; line-height: 1.08;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.6s var(--ease);
}
.mm-bg-word.is-visible { opacity: 1; transform: none; }

.mm-footer {
  /* Feste, gedeckelte Distanz statt margin-top:auto (Footer soll nach dem Entfernen der
     Themen-Chips klar, aber nicht bis an den Panel-Rand gestreckt vom Menü getrennt sein) */
  margin-top: clamp(40px, 9vh, 84px); padding-top: clamp(20px, 4vh, 36px); border-top: 1px solid var(--line);
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s var(--ease) 0.4s, transform 0.5s var(--ease) 0.4s;
}
.mobile-menu.is-open .mm-footer { opacity: 1; transform: none; }
.mm-foot-col { display: grid; gap: 4px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted); }
.mm-foot-links { text-align: right; }
.mm-foot-links a { color: var(--fg); transition: color 0.25s ease; }
.mm-foot-links a:hover, .mm-foot-links a:focus-visible { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu::before, .mm-list a, .mm-footer, .mm-bg-word, .mm-indicator, .nav-trigger .nt-icon span {
    transition: none !important;
  }
}
@media (min-width: 901px) {
  .nav-trigger, .mobile-menu { display: none !important; }
}

/* ---------- Reveal on scroll ---------- */
.reveal.in { opacity: 1; transform: none; }
/* Reveals only hide when JS is active (html.js). Without JS, content stays visible. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  #loader { display: none !important; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-intro {
  position: absolute; top: 20vh; left: 0; width: 100%;
  padding: 0 var(--pad);
  text-align: center;
}
.hero-intro p {
  max-width: 620px; margin: 0 auto;
  font-size: clamp(12px, 1.05vw, 15px); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
}
.hero-title-wrap { text-align: center; will-change: transform; padding: 0 var(--pad); }
.hero-logo-box { position: relative; display: inline-block; width: min(90vw, 1120px); }
/* Wortmarke tritt bewusst hinter Headline/Unterzeile zurück: reduzierte Deckkraft + zusätzlich
   abgedunkelt (brightness-Filter statt Unschärfe, bleibt auf Retina gestochen scharf). Gilt als
   Basis für Desktop/Tablet; Mobile überschreibt mit eigener, noch etwas subtilerer Abstufung. */
.hero-logo { width: 100%; height: auto; display: block; opacity: 0.5; filter: brightness(0.7); }
/* Marken-Punkt: auf die tatsächliche SVG-Punktposition kalibriert (viewBox 0 0 688 160, Kreis
   oben rechts) und als eigenes, unabhängig von .hero-logo gedimmtes Sibling-Element gerendert —
   dadurch bleibt der Punkt kräftiger als die nun abgedunkelten Buchstaben. Bewusst minimal GRÖSSER
   als der darunterliegende (durch die reduzierte Logo-Deckkraft mitgedimmte) SVG-Punkt gehalten,
   nicht kleiner: sonst blitzt am Rand ein zweiter, dunkler Punktrand hervor. Die "leicht
   verkleinerte" Wirkung entsteht stattdessen über den deutlich reduzierten Glow. Einheitlich für
   Desktop UND Mobile (zuvor nur <=767px), da die prozentuale Positionierung relativ zu
   .hero-logo-box auf jeder Viewport-Breite korrekt sitzt. Glow rein über Blur (kein Spread), klein
   und weich. */
.hero-dot {
  display: block; aspect-ratio: auto; border-radius: 50%;
  position: absolute; top: 0%; right: 0%;
  width: 3.4%; height: 14.6%;
  background: var(--accent); opacity: 1;
  box-shadow: 0 0 10px rgba(32, 211, 143, 0.22);
}
.hero-sub {
  position: absolute; left: 0; right: 0; bottom: clamp(70px, 11vh, 120px);
  text-align: center; padding: 0 var(--pad);
  font-size: clamp(12px, 1vw, 14px); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg);
}
.hero-sub .hs-lead { display: block; }
.hero-sub .hs-line {
  display: block; margin: 9px auto 0; max-width: 560px;
  font-size: clamp(10.5px, 0.82vw, 12px); font-weight: 500;
  letter-spacing: 0.02em; line-height: 1.35; color: #a3a3a3; /* heller als --muted, bleibt sekundär zur Headline */
}
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: block; width: 16px; height: 50px; z-index: 6; color: #fff;
}
.scroll-cue svg {
  width: 100%; height: 100%; display: block;
  animation: scrollBob 1.9s ease-in-out infinite; will-change: transform, opacity;
}
@keyframes scrollBob {
  0%   { transform: translateY(-6px); opacity: 0.35; }
  50%  { transform: translateY(6px);  opacity: 1; }
  100% { transform: translateY(-6px); opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; opacity: 0.7; } }

/* ---------- Hero image trail ---------- */
.hero-trail { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; clip-path: inset(90px 0 150px 0); }
.trail-img {
  position: absolute; top: 0; left: 0;
  width: clamp(112px, 12vw, 172px); aspect-ratio: 4 / 5;
  will-change: transform, opacity; opacity: 0;
  border-radius: 2px; overflow: hidden; background: #161616;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  transition: opacity 0.72s var(--ease), transform 0.72s var(--ease);
}
.trail-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trail-img.wide { aspect-ratio: 4 / 3; width: clamp(140px, 14vw, 208px); }

/* ---------- Custom cursor (dot -> arrow), inverts against background ---------- */
.cursor-on, .cursor-on * { cursor: none !important; }
.cursor {
  position: fixed; left: 0; top: 0; z-index: 9998; pointer-events: none;
  mix-blend-mode: difference; will-change: transform;
  transform: translate3d(-100px, -100px, 0);
}
.cursor .cursor-dot {
  position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%;
  background: #ffffff; transform: translate(-50%, -50%) scale(1);
  transition: transform 0.32s var(--ease), opacity 0.32s var(--ease);
}
.cursor .cursor-arrow {
  position: absolute; left: 0; top: 0; width: 50px; height: 50px; max-width: none;
  transform: translate(-50%, -50%) scale(0.35); opacity: 0;
  transition: transform 0.38s var(--ease), opacity 0.34s var(--ease);
}
.cursor.active .cursor-dot { transform: translate(-50%, -50%) scale(0); opacity: 0; }
.cursor.active .cursor-arrow { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.cursor.hidden { opacity: 0; }

/* ---------- Section heading ---------- */
.section { padding: clamp(46px, 8vh, 104px) 0; }
.eyebrow { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg); }
.display {
  font-weight: 500; letter-spacing: -0.03em; line-height: 0.9;
  font-size: clamp(40px, 5.6vw, 92px); color: var(--white);
}
.display.upper { text-transform: uppercase; }
.display .dot { color: var(--accent); }

/* ---------- Selected work (home) ---------- */
.work-grid {
  margin-top: clamp(40px, 7vh, 90px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(22px, 3.2vw, 44px); align-items: start;
}
/* Mosaic: Newport rechts groß im Hochformat, Dünenpark + RETAIL links als Quadrate */
.work-grid.mosaic {
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(18px, 2.6vw, 40px);
  row-gap: clamp(38px, 6vh, 70px);
  align-items: start;
}
.work-grid.mosaic .card { margin-top: 0; }
.work-grid.mosaic .mtile--feat  { grid-column: span 12; }
.work-grid.mosaic .mtile--xl    { grid-column: span 7; }
.work-grid.mosaic .mtile--port  { grid-column: span 5; }
.work-grid.mosaic .mtile--md    { grid-column: span 5; }
.work-grid.mosaic .mtile--brand { grid-column: span 4; }
.work-grid.mosaic .mtile--logo  { grid-column: span 3; }
/* Reihe 1 (Spannen 7+5) gleiche Höhe, Reihe 2 (5+4+3) gleiche Höhe -> keine Lücken */
.work-grid.mosaic .mtile--feat  .thumb { aspect-ratio: 12 / 5; }
.work-grid.mosaic .mtile--xl    .thumb { aspect-ratio: 7 / 5; }
.work-grid.mosaic .mtile--port  .thumb { aspect-ratio: 1 / 1; }
.work-grid.mosaic .mtile--md    .thumb { aspect-ratio: 5 / 3; }
.work-grid.mosaic .mtile--brand .thumb { aspect-ratio: 4 / 3; }
.work-grid.mosaic .mtile--logo  .thumb { aspect-ratio: 1 / 1; }
/* Reihe 1: Dünenpark (7) + Newport (5) exakt bündig -> Newport streckt sich auf die
   Reihenhöhe (Spalten-Gap macht die reine Aspect-Ratio sonst ~10px zu kurz). */
.work-grid.mosaic .mtile--xl,
.work-grid.mosaic .mtile--port { align-self: stretch; display: flex; flex-direction: column; }
.work-grid.mosaic .mtile--xl > .thumb,
.work-grid.mosaic .mtile--port > .thumb { flex: 1 0 auto; }

.card { display: block; }
.card .thumb {
  position: relative; overflow: hidden; border-radius: 2px; background: #161616;
  aspect-ratio: 1423 / 1097;
}
.card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.card:hover .thumb img { transform: scale(1.04); }
/* Großer Ecken-Pfeil entfernt — der bestehende Cursor-Effekt (Punkt -> Pfeil bei Hover
   auf jedes <a>, siehe main.js) übernimmt diese Funktion bereits deutlich subtiler
   und einheitlich über alle Kachel-Varianten hinweg (auch thumb--brand/thumb--logo,
   die den Ecken-Pfeil vorher gar nicht hatten). */
.card .arrow { display: none; }
.card .title { margin-top: 22px; font-size: clamp(20px, 2vw, 28px); font-weight: 700; color: var(--white); }
.card .tags { margin-top: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.card .thumb.thumb--text { display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; background: linear-gradient(150deg, #1a1a1a, #121212); }
.card .thumb.thumb--text span { font-size: clamp(17px, 1.8vw, 24px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.18; color: var(--white); }
.card:hover .thumb.thumb--text { background: linear-gradient(150deg, #1e1e1e, #141414); }
/* Gebrandete Kachel in SPIELRAUM-Optik (Grün + Lime-Akzent, Wortmarke „SPIELRAUM.") */
.card .thumb.thumb--brand { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; background: radial-gradient(130% 130% at 50% 0%, #237357 0%, #17573f 78%); }
.card .thumb.thumb--brand .bm-name { font-size: clamp(19px, 2vw, 28px); font-weight: 800; letter-spacing: 0.01em; color: #fff; line-height: 1.05; transition: transform 0.8s var(--ease); }
.card .thumb.thumb--brand .bm-dot { color: #e7fb5c; }
.card .thumb.thumb--brand .bm-sub { margin-top: 9px; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.6); transition: transform 0.8s var(--ease); }
.card:hover .thumb.thumb--brand { background: radial-gradient(130% 130% at 50% 0%, #29815f 0%, #195540 78%); }
.card:hover .thumb.thumb--brand .bm-name,
.card:hover .thumb.thumb--brand .bm-sub { transform: scale(1.04); }
/* Website-Screenshot im Browserfenster (wenn Live-Embed nicht erlaubt ist) */
.site-frame .view--shot { position: relative; display: block; }
.site-frame .view--shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Logo-Kachel (kleiner Kasten mit Kundenlogo) */
.card .thumb.thumb--logo { display: flex; align-items: center; justify-content: center; background: #f4f4f2; padding: clamp(26px, 3.4vw, 52px); }
.card .thumb.thumb--logo img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.6s var(--ease); }
.card:hover .thumb.thumb--logo img { transform: scale(1.03); }

.center-btn { display: flex; justify-content: center; margin-top: clamp(50px, 9vh, 110px); }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--white); color: #000;
  font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 10px 22px; border-radius: 100px; border: 1px solid var(--white);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s var(--ease);
}
.pill:hover { background: transparent; color: var(--white); }

/* ---------- WIR TUN / About ---------- */
.about-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.about-copy p {
  font-size: clamp(13.5px, 1vw, 15px); font-weight: 400; line-height: 1.55;
  letter-spacing: 0; color: var(--fg);
  max-width: 600px;
}
.about-copy p + p { margin-top: 15px; }
.about-body { margin-top: clamp(20px, 3.5vh, 38px); }
.about-body .lead-line { margin-top: clamp(24px, 3.4vh, 36px); color: var(--white); font-weight: 600; }
.lists { margin-top: clamp(40px, 7vh, 80px); display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.lists h4 { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: -0.01em; color: var(--white); margin-bottom: 14px; }
.lists ul { list-style: none; display: grid; gap: 4px; }
.lists li { font-size: 13px; font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: -0.01em; color: var(--fg); }
.lists--wide { display: flex; justify-content: space-between; gap: clamp(30px, 6vw, 90px); flex-wrap: wrap; }
.lists--wide > div { flex: 0 1 auto; }
.services { margin-top: clamp(40px, 7vh, 80px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4.8vw, 62px) clamp(34px, 6vw, 90px); max-width: 1120px; }
.about-body .statement { margin-top: clamp(24px, 3.2vh, 34px); max-width: 640px; color: var(--white); font-weight: 500; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.4; }
.proc-eyebrow { margin-top: clamp(46px, 7.5vh, 90px); }

/* ---------- Leistungen: interaktive Prozessstrecke ---------- */
.proc { position: relative; margin-top: clamp(30px, 4.5vh, 48px); max-width: 1180px; }
.proc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.proc-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.proc-line--base { stroke: var(--line); stroke-width: 1.4; }
.proc-line--active {
  stroke: var(--accent); stroke-width: 1.4;
  filter: drop-shadow(0 0 5px rgba(32, 211, 143, 0.55));
  transition: stroke-dashoffset 0.6s var(--ease);
}
.proc-dot {
  fill: var(--accent); opacity: 0;
  filter: drop-shadow(0 0 5px rgba(32, 211, 143, 0.75));
  transition: transform 0.6s var(--ease), opacity 0.35s ease;
}
.proc-line-track { display: none; }
.proc-line-fill { display: block; width: 100%; height: 0%; background: var(--accent); box-shadow: 0 0 8px rgba(32, 211, 143, 0.55); transition: height 0.6s var(--ease); }

.proc-grid {
  position: relative; z-index: 1; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(34px, 4.4vw, 56px) clamp(30px, 4vw, 62px);
}
.proc-step {
  opacity: 0.86; transform: translateY(0);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.proc-step.is-active { opacity: 1; transform: translateY(-3px); }
.proc-node {
  position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg); margin-bottom: 16px;
  transition: border-color 0.45s var(--ease), box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
}
.proc-num { font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--muted); transition: color 0.45s var(--ease); }
.proc-step.is-active .proc-node { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(32, 211, 143, 0.14), 0 0 16px rgba(32, 211, 143, 0.4); transform: scale(1.05); }
.proc-step.is-active .proc-num { color: var(--accent); }
.proc-step h4 { font-size: clamp(14px, 1.05vw, 17px); font-weight: 600; text-transform: uppercase; letter-spacing: -0.01em; color: var(--muted); margin: 0 0 10px; transition: color 0.45s var(--ease); }
.proc-step.is-active h4 { color: var(--accent); }
.proc-step p { font-size: clamp(13px, 0.95vw, 14.5px); font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--muted); max-width: 340px; transition: color 0.45s var(--ease); }
.proc-step.is-active p { color: var(--fg); }
/* Schritt 06 (letzter Schritt) als klare Endstation — "Ziel erreicht": kurze,
   einmalige Puls-Animation beim Aktivwerden (spielt jedes Mal neu ab, wenn der
   Schritt erneut in den aktiven Bereich scrollt), die in einem spürbar
   stärkeren, aber unverändert grünen Glow ausklingt und dort hält, solange der
   Schritt aktiv ist. Gilt für Mobile UND Desktop (unscoped, wie alle übrigen
   .proc-step-Regeln). Nur transform/opacity-nahe Werte (box-shadow, scale) —
   keine neue Farbe, kein zusätzliches Element, kein Pfeil. */
@keyframes procGoalPulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 3px rgba(32, 211, 143, 0.14), 0 0 16px rgba(32, 211, 143, 0.4); }
  45%  { transform: scale(1.18); box-shadow: 0 0 0 7px rgba(32, 211, 143, 0.22), 0 0 32px rgba(32, 211, 143, 0.7); }
  100% { transform: scale(1.06); box-shadow: 0 0 0 4px rgba(32, 211, 143, 0.22), 0 0 24px rgba(32, 211, 143, 0.6); }
}
.proc-step:last-child.is-active .proc-node {
  animation: procGoalPulse 0.85s var(--ease) 1 both;
}
@media (prefers-reduced-motion: reduce) {
  .proc-step, .proc-node, .proc-num, .proc-step h4, .proc-step p, .proc-dot, .proc-line--active, .proc-line-fill { transition: none; }
  .proc-step:last-child.is-active .proc-node {
    animation: none;
    transform: scale(1.06);
    box-shadow: 0 0 0 4px rgba(32, 211, 143, 0.22), 0 0 24px rgba(32, 211, 143, 0.6);
  }
}
.lists--foot { margin-top: clamp(46px, 7.5vh, 90px); }
.service-tags { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 8px; }
.service-tags span { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); border: 1px solid var(--line); border-radius: 100px; padding: 5px 11px; }
.kunden { margin-top: clamp(40px, 7vh, 80px); }
.kunden h4 { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: -0.01em; color: var(--white); margin-bottom: 16px; }
.kunden ul { list-style: none; columns: 3; column-gap: clamp(24px, 4vw, 60px); max-width: 1120px; }
.kunden li { font-size: 13px; font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: -0.01em; color: var(--fg); margin-bottom: 6px; break-inside: avoid; }
.workmode { margin-top: clamp(26px, 4.5vh, 46px); padding-left: clamp(14px, 1.2vw, 20px); border-left: 2px solid var(--accent); max-width: 500px; }
.workmode p { font-size: clamp(12px, 0.9vw, 13.5px); font-weight: 500; line-height: 1.22; text-transform: uppercase; letter-spacing: -0.01em; color: var(--fg); }
.workmode p + p { margin-top: 14px; }
.workmode-lead { color: var(--white); }
.about-media { position: relative; }
.about-media .frame { position: relative; overflow: hidden; border-radius: 2px; background: #161616; aspect-ratio: 1423 / 1724; }
.about-media .frame-inner { position: absolute; inset: -12% 0; will-change: transform; }
.about-media .frame-inner img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Contact section (home) ---------- */
.contact { position: relative; padding: clamp(64px, 11vh, 140px) 0 clamp(28px, 5vh, 56px); text-align: center; }
.contact .display { text-align: center; }
.contact-sub {
  margin: clamp(16px, 2.5vh, 26px) auto 0; max-width: 520px;
  font-size: clamp(12px, 0.9vw, 13.5px); font-weight: 500; line-height: 1.3;
  text-transform: uppercase; letter-spacing: -0.01em; color: var(--muted);
}
.magnet-wrap { position: relative; height: 0; }
.magnet {
  position: absolute; left: clamp(0px, 8vw, 120px); top: -30px;
  width: 72px; height: 72px; border-radius: 50%;
  background: #d9d9d9; display: flex; align-items: center; justify-content: center;
  will-change: transform; transition: background 0.3s ease;
  z-index: 3;
}
.magnet:hover { background: var(--accent); }

/* ---------- Footer bar ---------- */
.footer { border-top: 1px solid var(--line); padding: clamp(26px, 4vh, 46px) 0 clamp(16px, 2.5vh, 28px); position: relative; }
.footer .cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; align-items: start; }
.footer .fcol { display: grid; gap: 0; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.2; }
.footer .fcol a:not(.pill) { color: var(--fg); transition: color 0.25s ease; }
.footer .fcol a:not(.pill):hover { color: var(--accent); }
.footer .fcol.addr { color: var(--muted); text-align: right; order: 2; }
.footer .fcol.copy { color: var(--muted); text-align: center; order: 1; }
.footer .bottom { margin-top: clamp(10px, 1.5vh, 20px); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
/* "Kontakt." is itself the button — clicking it jumps to the contact form.
   A strong, breathing green glow sits behind the text so it's clearly clickable. */
.contact-link { position: relative; display: inline-block; text-decoration: none; color: inherit; }
.contact-link .display { position: relative; z-index: 1; transition: color 0.3s ease, transform 0.3s var(--ease); }
.contact-link::before {
  content: ""; position: absolute; left: 50%; top: 52%; z-index: 0;
  width: 92%; height: 150%; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(32, 211, 143, 0.85) 0%,
    rgba(32, 211, 143, 0.45) 38%,
    rgba(32, 211, 143, 0.12) 60%,
    rgba(32, 211, 143, 0) 75%);
  filter: blur(34px);
  animation: kontaktGlow 2.6s ease-in-out infinite;
}
.contact-link:hover .display { transform: scale(1.02); }
.contact-link:hover::before { animation-duration: 1.4s; }
@keyframes kontaktGlow {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.9); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) { .contact-link::before { animation: none; opacity: 0.8; } }

/* ---------- Sub-page hero ---------- */
.page-hero { min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px var(--pad) 40px; }
.page-hero .eyebrow { margin-top: 20px; color: var(--muted); }

/* ---------- Work index grid ---------- */
.projects { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); padding-top: clamp(30px, 6vh, 70px); }
@media (max-width: 820px){ .projects { grid-template-columns: 1fr; } }

/* ---------- Project detail ---------- */
.proj-head { padding-top: clamp(120px, 18vh, 220px); }
.proj-head .display { max-width: 12ch; }
.proj-intro { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: clamp(30px, 6vw, 90px); margin-top: clamp(40px, 7vh, 80px); align-items: start; }
.proj-intro .lead p { font-size: clamp(13.5px, 1vw, 15px); font-weight: 400; line-height: 1.6; letter-spacing: 0; color: var(--fg); }
.proj-intro .lead p + p { margin-top: 22px; }
.proj-meta { display: grid; gap: 26px; }
.proj-meta .m label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 7px; }
.proj-meta .m div { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--white); line-height: 1.5; }
.proj-gallery { display: grid; gap: clamp(16px, 3vw, 34px); margin-top: clamp(50px, 9vh, 110px); }
.proj-gallery img { width: 100%; height: auto; border-radius: 2px; background: #161616; }
.proj-gallery .proj-video { width: 100%; height: auto; display: block; border-radius: 2px; background: #161616; }
.proj-gallery.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 820px){ .proj-gallery.two { grid-template-columns: 1fr; } }
/* Projekt-Mosaik (verschiedene Größen) */
.proj-mosaic { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(10px, 1.5vw, 20px); margin-top: clamp(30px, 5vw, 60px); }
.proj-mosaic figure { margin: 0; overflow: hidden; border-radius: 2px; background: #161616; }
.proj-mosaic img, .proj-mosaic video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Paare teilen dieselbe Höhe -> keine Lücken. Höhe = Spaltenbreite / AR */
.proj-mosaic .pm-a { grid-column: span 7; aspect-ratio: 7 / 5; }
.proj-mosaic .pm-b { grid-column: span 5; aspect-ratio: 1 / 1; }
.proj-mosaic .pm-c { grid-column: span 8; aspect-ratio: 2 / 1; }
.proj-mosaic .pm-d { grid-column: span 4; aspect-ratio: 1 / 1; }
@media (max-width: 760px) {
  .proj-mosaic { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* oben Bild volle Breite, mittig die beiden Einzelbilder je eine Spalte, unten Video volle Breite */
  .proj-mosaic .pm-a { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .proj-mosaic .pm-b, .proj-mosaic .pm-c { grid-column: span 1; aspect-ratio: 3 / 4; }
  .proj-mosaic .pm-d { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}

/* Intro-Unterabschnitte (füllen die linke Spalte neben den Meta-Angaben) */
.proj-intro .lead .lead-sec { margin-top: clamp(24px, 4vh, 42px); max-width: 640px; }
.proj-intro .lead .lead-sec .case-h { font-size: clamp(16px, 1.4vw, 21px); font-weight: 600; letter-spacing: -0.01em; color: var(--white); margin-bottom: 10px; }

/* Case-Inhalt (Editorial: Titel links, Text rechts) */
.case-body { margin-top: clamp(56px, 9vh, 120px); display: grid; gap: clamp(40px, 6vh, 74px); }
.case-sec { display: grid; grid-template-columns: 0.32fr 0.68fr; gap: clamp(18px, 4vw, 60px); align-items: start; }
.case-sec .case-h { font-size: clamp(18px, 1.7vw, 26px); font-weight: 600; letter-spacing: -0.01em; color: var(--white); line-height: 1.15; }
.case-txt p { font-size: clamp(14px, 1vw, 15.5px); font-weight: 400; line-height: 1.62; color: var(--fg); max-width: 660px; }
.case-txt p + p { margin-top: 13px; }
.case-txt ul { list-style: none; margin: 16px 0 0; display: grid; gap: 9px; }
.case-txt li { position: relative; padding-left: 20px; font-size: clamp(13.5px, 0.95vw, 15px); line-height: 1.4; color: var(--fg); }
.case-txt li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.case-txt ul + p { margin-top: 16px; }
.case-sec--result { padding-top: clamp(24px, 4vh, 40px); border-top: 1px solid var(--line); }
.case-sec--result .case-h { color: var(--accent); }
@media (max-width: 820px) { .case-sec { grid-template-columns: 1fr; gap: 12px; } }

/* Live-Website-Vorschau (Browserfenster) */
.site-frame { margin-top: clamp(50px, 9vh, 110px); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #131313; box-shadow: 0 30px 80px -40px rgba(0,0,0,0.8); }
.site-frame .bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #191919; border-bottom: 1px solid var(--line); }
.site-frame .dots { display: flex; gap: 7px; }
.site-frame .dots i { width: 11px; height: 11px; border-radius: 50%; background: #3a3a3a; display: block; }
.site-frame .url { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-frame .view { position: relative; aspect-ratio: 16 / 10; background: #0f0e0e; }
.site-frame .view iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.site-frame .view .fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 24px; color: var(--muted); font-size: 13px; }
.site-cap { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; margin-top: 16px; }
.site-cap .lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.site-cap .open { font-size: 13px; font-weight: 600; color: var(--white); border-bottom: 1px solid var(--accent); padding-bottom: 2px; transition: color 0.25s ease; }
.site-cap .open:hover { color: var(--accent); }
@media (max-width: 620px){ .site-frame .view { aspect-ratio: 3 / 4; } }
/* Statische Vorschau (wenn die Seite kein Einbetten erlaubt) */
.site-frame--static .view { display: flex; align-items: center; justify-content: center; text-align: center; background: radial-gradient(120% 130% at 50% 0%, #1c1c1c 0%, #0f0e0e 70%); }
.site-frame--static .view--link { text-decoration: none; }
.static-preview { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(24px, 5vw, 54px); }
.static-preview .sp-sub { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.static-preview .sp-title { font-size: clamp(24px, 3.4vw, 46px); font-weight: 600; letter-spacing: -0.02em; color: var(--white); line-height: 1.05; }
.static-preview .sp-cta { margin-top: 10px; display: inline-block; font-size: 14px; font-weight: 600; color: #0f0e0e; background: var(--accent); padding: 13px 24px; border-radius: 100px; transition: transform 0.3s var(--ease); }
.site-frame--static .view--link:hover .sp-cta { transform: translateY(-2px); }
/* Live-Vorschau: standardmäßig nicht interaktiv -> Seite bleibt scrollbar, Cursor bleibt.
   Über den Button in der Leiste (oder Klick aufs Overlay) wird die Bedienung freigeschaltet. */
.site-frame .view iframe { pointer-events: none; }
.site-frame.is-live .view iframe { pointer-events: auto; }

.site-frame .view .open-ov {
  position: absolute; inset: 0; z-index: 3; cursor: pointer; background: transparent;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 18px;
  transition: background 0.25s ease;
}
.site-frame .view .open-ov:hover { background: rgba(15, 14, 14, 0.16); }
.site-frame .view .open-ov .ov-hint {
  font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: #fff;
  background: rgba(15, 14, 14, 0.72); border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px; padding: 7px 14px; opacity: 0; transform: translateY(6px);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.site-frame .view .open-ov:hover .ov-hint { opacity: 1; transform: none; }
.site-frame.is-live .view .open-ov { display: none; }

/* Umschalt-Button in der Browserleiste des Embeds */
.embed-toggle {
  margin-left: auto; flex: 0 0 auto; font-family: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer;
  white-space: nowrap; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.embed-toggle:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.28); }
.site-frame.is-live .embed-toggle { color: #0f0e0e; background: var(--accent); border-color: var(--accent); }
/* Live-Bedien-Modus: eigener Cursor aus, dafür der native Cursor überall sichtbar –
   so ist der Mauszeiger an den Rändern des Embeds und auf dem Weg zur Leiste
   ("Bedienung beenden") sofort und verzögerungsfrei sichtbar (Orientierung). */
body.embed-live #cursor { opacity: 0 !important; }
.cursor-on.embed-live, .cursor-on.embed-live * { cursor: auto !important; }
.cursor-on.embed-live a,
.cursor-on.embed-live button,
.cursor-on.embed-live [role="button"],
.cursor-on.embed-live .embed-toggle { cursor: pointer !important; }

/* Lightbox / Vergrößerung */
#lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: clamp(20px, 5vw, 70px); background: rgba(9, 9, 9, 0.93); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#lightbox.open { display: flex; }
#lightbox .lb-content { display: flex; align-items: center; justify-content: center; max-width: 94vw; max-height: 90vh; }
#lightbox .lb-content img, #lightbox .lb-content video { max-width: 94vw; max-height: 90vh; width: auto; height: auto; border-radius: 3px; display: block; box-shadow: 0 40px 120px -50px rgba(0,0,0,0.9); }
#lightbox .lb-close { position: absolute; top: clamp(12px, 2vw, 26px); right: clamp(14px, 2.4vw, 30px); width: 46px; height: 46px; border: 0; background: transparent; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; opacity: 0.75; transition: opacity 0.2s ease; }
#lightbox .lb-close:hover { opacity: 1; }
.proj-mosaic figure img, .proj-mosaic figure video, .proj-gallery img { cursor: zoom-in; }
.next-project { text-align: center; padding: clamp(70px, 12vh, 150px) 0; }
.next-project a { font-size: clamp(30px, 6vw, 90px); font-weight: 500; letter-spacing: -0.02em; color: var(--white); transition: color 0.3s ease; }
.next-project a:hover { color: var(--accent); }
.next-project span { display:block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 14px; }

/* ---------- Contact form page ---------- */
.form-wrap { max-width: 860px; margin: 0 auto; padding: clamp(110px, 16vh, 170px) var(--pad) clamp(60px, 10vh, 120px); }
.form-wrap .display { text-align: center; margin-bottom: clamp(40px, 6vh, 70px); }
form.contact-form { display: grid; gap: 16px; }
form.contact-form input, form.contact-form textarea {
  width: 100%; background: transparent; color: var(--white);
  border: 1px solid var(--line); border-radius: 3px; padding: 16px 18px;
  font-family: var(--font); font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
  transition: border-color 0.25s ease;
}
form.contact-form input::placeholder, form.contact-form textarea::placeholder { color: var(--muted); }
form.contact-form input:focus, form.contact-form textarea:focus { outline: none; border-color: var(--accent); }
form.contact-form textarea { min-height: 130px; resize: vertical; }
form.contact-form button {
  background: #2b2b2b; color: var(--white); border: none; border-radius: 3px;
  padding: 17px; font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: 0.03em;
  cursor: pointer; transition: background 0.25s ease;
}
form.contact-form button:hover { background: var(--accent); color: #0f0e0e; }
.form-note { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); }
.form-sub { text-align: center; max-width: 560px; margin: 0 auto clamp(40px, 6vh, 64px); font-size: clamp(12px, 0.9vw, 13.5px); font-weight: 500; line-height: 1.35; text-transform: uppercase; letter-spacing: -0.01em; color: var(--muted); }

/* ---------- Legal pages ---------- */
.legal { max-width: 900px; margin: 0 auto; padding: clamp(120px, 18vh, 190px) var(--pad) clamp(70px, 11vh, 130px); }
.legal .display { margin-bottom: 12px; }
.legal .stand { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 50px; }
.legal h2 { font-size: clamp(20px, 2.4vw, 30px); font-weight: 600; margin: 44px 0 18px; color: var(--white); }
.legal h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 28px 0 10px; color: var(--white); }
.legal p { font-size: 13px; font-weight: 500; line-height: 1.7; text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted); margin-bottom: 14px; }
.legal p strong { color: var(--fg); font-weight: 600; }
.legal a { color: var(--accent); word-break: break-word; }
.legal .block { margin-bottom: 10px; }

/* ---------- Cookie banner ---------- */
.cookie {
  position: fixed; left: var(--pad); bottom: var(--pad); z-index: 600;
  max-width: 320px; background: #171717; border: 1px solid var(--line); border-radius: 8px;
  padding: 18px 18px 16px; font-size: 12px; color: var(--muted); line-height: 1.5;
  transform: translateY(20px); opacity: 0; transition: all 0.5s var(--ease); pointer-events: none;
}
.cookie.show { transform: none; opacity: 1; pointer-events: auto; }
.cookie .row { display: flex; gap: 10px; margin-top: 12px; }
.cookie button {
  flex: 1; border: 1px solid var(--line); background: transparent; color: var(--fg);
  padding: 9px; border-radius: 5px; font-family: var(--font); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: all 0.25s ease;
}
.cookie button.accept { background: var(--white); color: #0f0e0e; border-color: var(--white); }
.cookie button:hover { border-color: var(--accent); color: var(--accent); }
.cookie button.accept:hover { background: var(--accent); color: #0f0e0e; border-color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .work-grid { display: grid; grid-template-columns: 1fr; row-gap: clamp(30px, 6vh, 56px); }
  .work-grid.mosaic { grid-template-columns: 1fr 1fr; column-gap: clamp(14px, 3vw, 22px); row-gap: clamp(30px, 5vh, 48px); }
  .work-grid.mosaic .mtile--xl, .work-grid.mosaic .mtile--port, .work-grid.mosaic .mtile--md,
  .work-grid.mosaic .mtile--brand, .work-grid.mosaic .mtile--logo { grid-column: span 1; }
  .work-grid.mosaic .mtile--feat, .work-grid.mosaic .mtile--xl { grid-column: 1 / -1; }
  .work-grid.mosaic .mtile--feat .thumb { aspect-ratio: 16 / 9; }
  .work-grid.mosaic .mtile--xl .thumb, .work-grid.mosaic .mtile--port .thumb, .work-grid.mosaic .mtile--md .thumb,
  .work-grid.mosaic .mtile--brand .thumb, .work-grid.mosaic .mtile--logo .thumb { aspect-ratio: 4 / 3; }
  .about-grid { grid-template-columns: 1fr; }
  .about-media { order: -1; margin-bottom: 30px; }
  .proj-intro { grid-template-columns: 1fr; }
  .footer .cols { grid-template-columns: 1fr; }
  .footer .fcol.addr, .footer .fcol.copy { text-align: left; }
  /* Kontakt: Punkt klebt bei "t"-Kerning auf schmalen Screens sichtbar am Wort — entfernen statt schlecht platziert lassen (Desktop bleibt unverändert). !important zur Sicherheit gegen Cache-/Kaskade-Zweifel. */
  .contact-link h2.display .dot { display: none !important; }
  .nav .reg { display: none; }
  /* Mobile Navigation: Menüpunkte weichen dem Command-Menu-Trigger (Desktop bleibt exakt wie zuvor) */
  .nav .menu { display: none; }
  .nav-trigger { display: inline-flex; }
  /* Leistungen-Prozess: SVG-Pfad weicht einer vertikalen Timeline (Linie + Knoten links, Inhalt rechts) */
  .proc-svg { display: none; }
  .proc-line-track {
    /* top/bottom hier sind nur ein Platzhalter für den allerersten Frame vor dem ersten
       main.js measure()-Lauf. main.js setzt top/height danach inline exakt auf den
       Abstand zwischen Knoten 1 (Mitte) und dem letzten Knoten (Mitte) — dadurch endet
       die Linie (Grundlinie + grüne Füllung) immer exakt an Schritt 06, nie darunter,
       unabhängig davon, wie viel Text unter dem letzten Knoten noch folgt. */
    display: block; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px;
    background: var(--line); z-index: 0; overflow: hidden;
  }
  .proc-grid { grid-template-columns: 1fr; gap: 0; }
  .proc-step {
    position: relative; z-index: 1; display: grid;
    grid-template-columns: 40px 1fr; column-gap: 16px;
    padding-bottom: clamp(26px, 6vh, 38px);
    margin-top: 0 !important;
  }
  /* Schritt 06 als klare Endstation: kein Linien-Fortsatz mehr danach (siehe Track-Fix oben),
     stattdessen ein bewusster, konsistenter Abstand zum nächsten Bild-/Abschnittsbereich. */
  .proc-step:last-child { padding-bottom: 0; margin-bottom: clamp(20px, 4vh, 36px); }
  .proc-node { grid-row: 1 / 3; grid-column: 1; align-self: start; margin-bottom: 0; }
  .proc-step h4 { grid-row: 1; grid-column: 2; margin: 8px 0 6px; }
  .proc-step p { grid-row: 2; grid-column: 2; max-width: none; }
}
@media (max-width: 560px) {
  .lists { grid-template-columns: 1fr; }
  .work-grid.mosaic { grid-template-columns: 1fr; }
  .work-grid.mosaic .mtile--xl { grid-column: auto; }
  .lists--wide { flex-direction: column; gap: 34px; }
  .services { grid-template-columns: 1fr; gap: 34px; }
  .kunden ul { columns: 2; }
  .nav { font-size: 11px; }
  .nav a, .nav span { letter-spacing: 0.03em; }
  .nav .menu { gap: 13px; }
  .nav .menu a { white-space: nowrap; }
}
@media (max-width: 400px) {
  .nav { font-size: 10px; padding-left: 16px; padding-right: 16px; }
  .nav .menu { gap: 10px; }
}

/* ============================================================
   Mobile Hero (Startseite) — nur <=767px.
   Bewusst als eigener, spät im Dokument stehender Block, damit er die
   vorhandenen 900/560/400px-Regeln bei Bedarf zuverlässig übersteuert, ohne
   sie zu verändern. Tablet (768–900px) und Desktop bleiben exakt wie zuvor.
   Positionierung/Headline oben, Wortmarke wird zum angeschnittenen
   Hintergrundelement, Pfeil rückt etwas höher und bekommt einen Glow.
   Der bestehende Parallax-Mechanismus (main.js, data-parallax) bleibt
   unangetastet. Die von main.js zusätzlich per data-fade gesetzte
   Inline-Opacity auf .hero-title-wrap wird per !important neutralisiert;
   die tatsächliche Abblendung sitzt gezielt nur auf .hero-logo (siehe unten).
   ============================================================ */
@media (max-width: 767px) {
  /* Header: iPhone-Notch/Safe-Area berücksichtigen (additiv, Breite/Menü-Logik unverändert) */
  .nav { padding-top: calc(clamp(16px, 2.2vw, 26px) + env(safe-area-inset-top, 0px)); }
  .nav.scrolled { padding-top: calc(clamp(12px, 1.6vw, 18px) + env(safe-area-inset-top, 0px)); }

  /* Hero-Höhe robust auf die tatsächlich sichtbare mobile Viewport-Höhe fixiert.
     KORREKTUR eines Denkfehlers aus einer früheren Fassung: dort wurde min-height auf 100svh
     gesetzt in der Annahme, "svh" (kleinstmögliche Viewport-Höhe, Symbolleiste maximal
     AUSGEKLAPPT) sei ein sicherer Boden. Das Gegenteil ist der Fall: svh ist die UNTERGRENZE,
     nicht die Obergrenze. Sobald die Symbolleiste beim Scrollen einklappt (der reale, sichtbare
     Viewport dadurch WÄCHST), lag die tatsächliche Höhe oft über 100svh — der Hero war dann zu
     kurz für den jetzt größeren sichtbaren Bereich, und "Ausgewählte Projekte" schien am unteren
     Rand durch. Exakt das hat der Nutzer wiederholt gemeldet ("nach etwas Runterscrollen").
     Der korrekte, garantiert sichere Boden ist "lvh" (largest viewport height, Symbolleiste
     maximal EINGEKLAPPT) — das ist rein durch die CSS-Spezifikation immer >= der tatsächlich
     sichtbaren Höhe, in jedem Symbolleisten-Zustand, ganz ohne JS-Messung oder Event-Timing.
     1) height: 100vh -> 100dvh -> max(100dvh, var(--hero-vh)) — die "schöne", möglichst exakt
        an die aktuell sichtbare Fläche angepasste Höhe (inkl. main.js-Messung), für den
        Normalfall ohne unnötigen Leerraum.
     2) min-height: 100vh -> 100lvh — reiner CSS-Boden ohne JS-/Timing-Abhängigkeit: die Box
        kann dadurch strukturell NIE kürzer sein als der größtmögliche reale Viewport, egal ob
        die Symbolleiste gerade ein- oder ausklappt oder ein Resize-Event verzögert feuert. */
  .hero {
    align-items: flex-start; justify-content: flex-start;
    height: 100vh; height: 100dvh; height: max(100dvh, var(--hero-vh, 0px));
    min-height: 100vh; min-height: 100lvh;
    padding-top: calc(72px + env(safe-area-inset-top, 0px));
  }

  /* Große angeschnittene MIENJUNG-Wortmarke im mobilen Hero entfernt: wiederholte die Marke aus
     dem Header und wirkte als halbes Logo zu dekorativ/zufällig. Desktop/Tablet unverändert (siehe
     Basis-Regeln oben) — hier ausschließlich für <=767px ausgeblendet. */
  .hero-title-wrap { display: none; }

  /* Positionierung + Unterzeile: linksbündig, obere Bildschirmhälfte */
  .hero-sub {
    position: absolute; z-index: 5;
    left: var(--pad); right: var(--pad);
    top: calc(72px + env(safe-area-inset-top, 0px) + 22px); bottom: auto;
    text-align: left; padding: 0;
  }
  .hero-sub .hs-lead {
    display: block; max-width: 15ch;
    font-size: clamp(23px, 7.6vw, 30px); font-weight: 700;
    letter-spacing: 0.015em; line-height: 1.18;
    color: var(--white);
  }
  /* Kinetische Typografie statt Hintergrundgrafik: die Headline selbst ist das Bild. Jedes Wort
     löst sich einzeln, zeitlich leicht versetzt, aus Unschärfe/Tiefe in Schärfe — startet bewusst
     erst, wenn der Intro-Loader vollständig verschwunden ist (~1.81s Loader-Laufzeit + Puffer),
     damit die Bewegung tatsächlich sichtbar ist statt unsichtbar darunter abzulaufen. Reiner
     CSS-Automatismus (kein JS/IntersectionObserver nötig), läuft daher auch ohne aktives main.js.
     Text bleibt exakt unverändert — die Wort-Spans sind rein visuell, die Screenreader-Ansage
     kommt unverändert aus dem aria-label auf .hs-lead. */
  .hero-sub .hs-lead .kw {
    display: inline-block;
    opacity: 0; filter: blur(8px); transform: translateY(16px);
    animation: heroKineticWord 0.9s cubic-bezier(.22,.68,.16,1) forwards;
  }
  .hero-sub .hs-lead .kw:nth-child(1) { animation-delay: 1.85s; }
  .hero-sub .hs-lead .kw:nth-child(2) { animation-delay: 1.93s; }
  .hero-sub .hs-lead .kw:nth-child(3) { animation-delay: 2.01s; }
  .hero-sub .hs-lead .kw:nth-child(4) { animation-delay: 2.09s; }
  .hero-sub .hs-lead .kw:nth-child(5) { animation-delay: 2.17s; }
  @keyframes heroKineticWord {
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
  }
  .hero-sub .hs-line {
    display: block; margin: 12px 0 0; max-width: 30ch;
    font-size: clamp(12.5px, 3.4vw, 14px); font-weight: 500;
    letter-spacing: 0.02em; line-height: 1.42;
    color: #b0b0b0; /* etwas heller als zuvor (#a3a3a3), bleibt klar hinter der weißen Headline zurück */
    /* Eigene, von .hero-sub entkoppelte Einblendung: folgt der Headline erst, nachdem deren
       Wörter größtenteils aufgelöst sind (die generische .reveal-Einblendung des Elternelements
       läuft sonst schon früh/unsichtbar unter dem Loader ab und die Unterzeile stünde dadurch
       optisch schon fertig da, bevor die Headline überhaupt zu Ende animiert ist). */
    opacity: 0; transform: translateY(8px);
    animation: heroSublineReveal 0.8s ease-out forwards;
    animation-delay: 2.55s;
  }
  @keyframes heroSublineReveal {
    to { opacity: 1; transform: translateY(0); }
  }

  /* Scroll-Pfeil: unverändert gegenüber der Basis-Regel (gleiches Icon, gleiches Bob wie
     Desktop) — hier nur der Sicherheitsabstand für iPhone-Home-Indicator/Safe-Area ergänzt.
     Zentrierung bleibt die unveränderte Basis-Regel (left:50%+translateX(-50%), kein Margin). */
  .scroll-cue {
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .hero-sub .hs-lead .kw { animation: none; opacity: 1; filter: none; transform: none; }
  .hero-sub .hs-line { animation: none; opacity: 1; transform: none; }
}