/* ==========================================================================
   VERSIVION — styles.css
   Dunkles Schwarz & Anthrazit · warmes Cremeweiß · dunkelrote Akzente
   Playfair-Typografie · plastisches V · feine Linien · dezente Animationen
   ========================================================================== */

/* --- Lokale Schriften ----------------------------------------------------- */
@font-face {
  font-family: "Playfair Display Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(/fonts/playfair-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display Variable";
  font-style: italic;
  font-display: swap;
  font-weight: 300 900;
  src: url(/fonts/playfair-latin-wght-italic.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Design-Token --------------------------------------------------------- */
:root {
  --ink-950: #0c0d0f;
  --ink-900: #111214;
  --ink-850: #17181a;
  --ink-800: #1d1f22;
  --paper-100: #f7f3ec;
  --paper-200: #f1ece4;
  --paper-300: #ddd5ca;
  --paper-500: #8e8271;
  --text-primary: #f3efe8;
  --text-muted: #a8a29b;
  --text-ink: #161719;
  --text-ink-muted: #5c5850;
  --red-500: #c43a32;
  --red-600: #a92824;
  --red-350: #e05a4e;
  --red-accent-dark: #cf4038;
  --line-dark: rgba(243, 239, 232, .14);
  --line-paper: rgba(22, 23, 25, .16);
  --line-red: rgba(196, 58, 50, .78);
  --font-serif: "Playfair Display Variable", Didot, "Bodoni MT", Georgia, "Times New Roman", serif;
  --font-sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shell-max: 1240px;
  --shell-pad: clamp(1.25rem, 5vw, 4rem);
  --header-h: 4.75rem;
  --motion-fast: .3s;
  --motion-swift: .55s;
  --motion-medium: .7s;
  --motion-entrance: .9s;
  --motion-slow: 1.2s;
  --motion-drawn: 1.8s;
  --ease-precision: cubic-bezier(.3, 0, .1, 1);
  --ease-material: cubic-bezier(.22, .61, .2, 1);
  --ease-reveal: cubic-bezier(.16, .84, .28, 1);
  --rim-red: rgba(196, 58, 50, .5);
  --paper-light: #fbf5ea;
  --ink-shadow: rgba(0, 0, 0, .55);
  --ease-out: var(--ease-material);
  --dur: var(--motion-medium);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Breite Bildschirme: mehr nutzbare Breite, ab 4K etwas größere Grundschrift */
@media (min-width: 1800px) {
  :root { --shell-max: 1440px; }
}
@media (min-width: 2400px) {
  html { font-size: 112.5%; }
}

/* --- Basis ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: hidden;
  overflow-x: clip;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--ink-950);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image: var(--noise);
  background-size: 140px 140px;
  opacity: .05;
}

h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
em { font-style: italic; }

::selection { background: var(--red-600); color: var(--paper-100); }

:focus-visible {
  outline: 2px solid var(--red-350);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--paper :focus-visible { outline-color: var(--red-600); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--paper-100);
  color: var(--text-ink);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  border-radius: 3px;
  transform: translateY(-220%);
  transition: transform var(--motion-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

.shell {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

/* --- Wiederkehrende Elemente ----------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.section--paper .eyebrow { color: var(--text-ink-muted); }
.eyebrow--red { color: var(--red-350); }
.eyebrow-rule {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 2px;
  background: var(--line-red);
  transform-origin: left center;
}
/* Dezentes Zeichnen der roten Linie beim Einblenden */
.js .reveal .eyebrow-rule {
  transform: scaleX(0);
  transition: transform var(--motion-medium) var(--ease-out) .15s;
}
.js .reveal.in-view .eyebrow-rule { transform: scaleX(1); }
.js .hero-eyebrow .eyebrow-rule { animation: rule-draw var(--motion-medium) var(--ease-out) .35s both; }
@keyframes rule-draw {
  0% { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.accent-word { color: var(--red-accent-dark); font-style: normal; }

.section-title {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.2rem);
  line-height: 1.14;
  letter-spacing: .005em;
  max-width: 24ch;
  text-wrap: balance;
}
.section-copy {
  max-width: 62ch;
  font-size: clamp(1rem, .95rem + .35vw, 1.15rem);
  line-height: 1.75;
}
.section--paper .section-copy { color: var(--text-ink); }
.section--dark .section-copy { color: var(--text-primary); }

.text-link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--line-red), var(--line-red));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size var(--motion-fast) var(--ease-out), color var(--motion-fast);
}
.text-link:hover { color: var(--red-350); background-size: 0% 1px; }
.section--paper .text-link:hover { color: var(--red-600); }

.button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 3rem;
  padding: .8rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  transition: transform var(--motion-fast) var(--ease-out), background-color var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.button--primary {
  background: var(--paper-100);
  color: var(--text-ink);
  transition: transform var(--motion-fast) var(--ease-precision), background-color var(--motion-fast), box-shadow var(--motion-fast);
}
.button--primary:hover,
.button--primary:focus-visible {
  background: var(--paper-300);
  box-shadow: 0 0 0 1px var(--rim-red), 0 6px 22px rgba(196, 58, 50, .16);
}
.button--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: rgba(243, 239, 232, .3);
}
.button--ghost:hover { border-color: var(--red-350); color: var(--red-350); }
.button--small { min-height: 2.75rem; padding: .45rem 1.1rem; font-size: .72rem; }
.header-cta { color: var(--text-primary); border-color: rgba(243, 239, 232, .3); }
.header-cta:hover { border-color: var(--red-350); color: var(--red-350); }
/* Kontrollierter Lichtlauf beim Überfahren (kein Rücklauf beim Verlassen) */
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(196, 58, 50, .12) 50%, transparent 65%);
  transform: translateX(-130%);
}
.button--ghost::before,
.header-cta::before {
  background: linear-gradient(115deg, transparent 35%, rgba(247, 243, 236, .1) 50%, transparent 65%);
}
.button:hover::before,
.button:focus-visible::before {
  transform: translateX(130%);
  transition: transform var(--motion-swift) var(--ease-material);
}
.button-arrow { display: inline-block; transition: transform var(--motion-fast) var(--ease-precision); }
.button:hover .button-arrow { transform: translateX(.3rem); }
.button:active { transform: translate3d(var(--mx, 0), var(--my, 0), 0) scale(.98); }
.nav-link:active, .text-link:active { color: var(--red-350); }
.section--paper .text-link:active { color: var(--red-600); }

/* --- Header & Navigation --------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-top: env(safe-area-inset-top, 0);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--motion-fast), border-color var(--motion-fast), backdrop-filter var(--motion-fast);
}
.site-header.is-scrolled {
  background: rgba(12, 13, 15, .92);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border-bottom-color: var(--line-dark);
}
.no-js .site-header { background: rgba(12, 13, 15, .94); border-bottom-color: var(--line-dark); }

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0;
  column-gap: 1.5rem;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
  min-height: var(--header-h);
  transition: min-height var(--motion-fast) var(--ease-out);
}
.site-header.is-scrolled .header-inner { min-height: 3.75rem; }

.wordmark {
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 550;
  letter-spacing: .38em;
  text-decoration: none;
  color: var(--text-primary);
  white-space: nowrap;
  margin-right: auto;
}
.wordmark-v { color: var(--red-500); }
.js .wordmark { animation: wordmark-in var(--motion-entrance) var(--ease-out) both; }
@keyframes wordmark-in {
  0% { opacity: 0; letter-spacing: .55em; }
  to { opacity: 1; letter-spacing: var(--wm-track, .38em); }
}

/* --- Soundscape-Player --------------------------------------------------------
   Atmosphärischer Schalter zwischen Wortmarke und Navigation. Kein Autoplay,
   kein Standard-Browserplayer. Lautstärke-Bedienfeld erscheint bei Hover/Fokus
   als kleines Feld unterhalb — ohne Layoutverschiebung. */
.soundscape {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: clamp(.9rem, 2vw, 1.6rem);
}
.no-js .soundscape { display: none; }
.soundscape-toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 44px;
  min-height: 44px;
  padding: .35rem .55rem;
  background: rgba(17, 18, 20, .35);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.soundscape-toggle:hover { color: var(--text-primary); border-color: rgba(224, 90, 78, .45); }
.soundscape.is-playing .soundscape-toggle { color: var(--text-primary); }
.soundscape.is-unavailable .soundscape-toggle { opacity: .45; cursor: default; }
.soundscape-icon { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.ss-ring { opacity: .55; }
.ss-ring--outer {
  opacity: .2;
  transform-box: fill-box;
  transform-origin: center;
}
.soundscape.is-playing .ss-ring--outer { animation: ss-ring 6s ease-in-out infinite alternate; }
@keyframes ss-ring {
  from { opacity: .15; transform: scale(.96); }
  to { opacity: .4; transform: scale(1.04); }
}
.ss-dot {
  fill: currentColor;
  opacity: .5;
  transform-box: fill-box;
  transform-origin: center;
}
.soundscape.is-playing .ss-dot {
  fill: var(--red-500);
  opacity: 1;
  /* Mikro-Detail: einmaliges dezentes Aufblühen beim Start des Fade-ins */
  animation: ss-dot-bloom 1.2s var(--ease-material) 1;
}
@keyframes ss-dot-bloom {
  0% { transform: scale(1); }
  35% { transform: scale(1.5); }
  100% { transform: scale(1); }
}
.soundscape-label {
  display: none;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
}
@media (min-width: 1480px) {
  .soundscape-label { display: inline; }
}
.soundscape-line {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.soundscape-line span {
  width: 2px;
  height: 3px;
  border-radius: 1px;
  background: currentColor;
  opacity: .5;
  transform-origin: bottom;
}
.soundscape-line span:nth-child(2) { height: 6px; }
.soundscape-line span:nth-child(3) { height: 9px; }
.soundscape-line span:nth-child(4) { height: 5px; }
.soundscape-line span:nth-child(5) { height: 7px; }
.soundscape.is-playing .soundscape-line span {
  opacity: .85;
  animation: ss-line 3.2s ease-in-out infinite alternate;
}
.soundscape.is-playing .soundscape-line span:nth-child(2) { animation-delay: .4s; }
.soundscape.is-playing .soundscape-line span:nth-child(3) { animation-delay: .9s; }
.soundscape.is-playing .soundscape-line span:nth-child(4) { animation-delay: 1.3s; }
.soundscape.is-playing .soundscape-line span:nth-child(5) { animation-delay: 1.8s; }
@keyframes ss-line {
  from { transform: scaleY(.55); }
  to { transform: scaleY(1.25); }
}
.soundscape-volume {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .7rem;
  background: rgba(12, 13, 15, .96);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  opacity: 0;
  visibility: hidden;
  translate: 0 -.25rem;
  transition: opacity var(--motion-fast) var(--ease-material), translate var(--motion-fast) var(--ease-material), visibility 0s linear var(--motion-fast);
}
.soundscape:hover .soundscape-volume,
.soundscape:focus-within .soundscape-volume {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}
.soundscape-mute {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: .3rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--motion-fast);
}
.soundscape-mute:hover { color: var(--text-primary); }
.soundscape-mute svg { width: 1.15rem; height: 1.15rem; }
.ss-mute-line { opacity: 0; transition: opacity var(--motion-fast); }
.soundscape.is-muted .ss-mute-line { opacity: 1; }
.soundscape.is-muted .ss-wavepath { opacity: .25; }
.soundscape-slider {
  width: 6.5rem;
  height: 44px;
  background: transparent;
  accent-color: var(--red-500);
  cursor: pointer;
}
@media (max-width: 1099px) {
  .soundscape { margin-right: .5rem; }
  .soundscape-line { display: none; }
  .soundscape-toggle { justify-content: center; padding: .3rem; }
  .soundscape-volume { left: auto; right: 0; }
}
/* iOS/WebKit erlaubt keine programmatische Lautstärke — Regler ausblenden */
.soundscape.is-fixed-volume .soundscape-slider { display: none; }

.site-nav-list { display: flex; gap: clamp(1.1rem, 1.5vw, 2rem); }
.nav-link {
  position: relative;
  display: inline-block;
  padding: .4rem 0;
  font-size: .8rem;
  font-weight: 550;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  transition: color var(--motion-fast);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--line-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-fast) var(--ease-out);
}
.nav-link:hover, .nav-link.is-active { color: var(--text-primary); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: .6rem;
  min-width: 44px;
  min-height: 44px;
  padding: .5rem .25rem;
  background: none;
  border: 0;
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
}
.nav-toggle-box { display: inline-flex; flex-direction: column; gap: 6px; width: 22px; }
.nav-toggle-line {
  height: 1.5px;
  background: currentColor;
  transition: transform var(--motion-fast) var(--ease-out), opacity var(--motion-fast);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-line:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-line:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.nav-toggle-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.nav-panel-cta { display: none; }

/* --- Navigation: 7 Orb-Signaturen --------------------------------------------
   Eigenständige VERSIVION-Interpretation: warm-goldene Glassphären mit 1-7
   roten Siegelpunkten und dezenter chakra-inspirierter Aura. Erscheinen nur
   beim Hover/Fokus, ausschließlich auf Desktop mit Maus/feinem Zeiger. */
.nav-orb { display: none; }
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .site-nav-list li, .header-cta-wrap { position: relative; }
  .header-cta-wrap { display: inline-flex; }
  .nav-orb {
    display: block;
    position: absolute;
    left: 50%;
    top: calc(100% + .4rem);
    width: 1.9rem;
    height: 1.9rem;
    translate: -50% -.3rem;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 246, 218, .95) 0%, rgba(233, 199, 128, .6) 30%, rgba(150, 110, 48, .32) 64%, rgba(58, 42, 20, .18) 100%);
    box-shadow:
      inset 0 0 7px rgba(255, 240, 200, .4),
      inset 0 -3px 6px rgba(60, 40, 14, .25),
      0 0 16px var(--orb-aura, rgba(224, 90, 78, .35)),
      0 2px 10px rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s var(--ease-material), translate .35s var(--ease-material), visibility 0s linear .35s;
  }
  .nav-orb svg { width: 100%; height: 100%; }
  .nav-orb circle { fill: var(--red-600); opacity: .8; }
  .site-nav-list li:hover .nav-orb,
  .site-nav-list li:focus-within .nav-orb,
  .header-cta-wrap:hover .nav-orb,
  .header-cta-wrap:focus-within .nav-orb {
    opacity: 1;
    visibility: visible;
    translate: -50% 0;
    transition: opacity .35s var(--ease-material), translate .35s var(--ease-material);
    animation: orb-float 2.8s ease-in-out .35s infinite alternate;
  }
  .site-nav-list li:nth-child(1) .nav-orb { --orb-aura: rgba(224, 90, 78, .42); }
  .site-nav-list li:nth-child(2) .nav-orb { --orb-aura: rgba(228, 142, 74, .38); }
  .site-nav-list li:nth-child(3) .nav-orb { --orb-aura: rgba(232, 194, 96, .38); }
  .site-nav-list li:nth-child(4) .nav-orb { --orb-aura: rgba(122, 192, 132, .34); }
  .site-nav-list li:nth-child(5) .nav-orb { --orb-aura: rgba(112, 200, 202, .34); }
  .site-nav-list li:nth-child(6) .nav-orb { --orb-aura: rgba(114, 142, 222, .34); }
  .header-cta-wrap .nav-orb {
    --orb-aura: rgba(196, 152, 236, .4);
    box-shadow:
      inset 0 0 7px rgba(255, 246, 214, .55),
      inset 0 -3px 6px rgba(60, 40, 14, .22),
      0 0 18px var(--orb-aura),
      0 0 6px rgba(247, 243, 236, .3),
      0 2px 10px rgba(0, 0, 0, .35);
  }
}
@keyframes orb-float {
  from { transform: translateY(0); }
  to { transform: translateY(-2px); }
}

@media (max-width: 1099px) {
  .nav-toggle { display: inline-flex; }
  /* Wrapper komplett ausblenden — ein leerer Flex-Span würde sonst
     einen zusätzlichen column-gap im schmalen Header erzeugen */
  .header-cta-wrap { display: none; }
  .header-cta { display: none; }
  .header-inner { column-gap: .75rem; }
  .site-nav {
    position: fixed;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    z-index: 99;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .5rem var(--shell-pad) 1.75rem;
    background: rgba(12, 13, 15, .96);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line-dark);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-.75rem);
    transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), visibility 0s linear var(--motion-fast);
  }
  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }
  .js .site-nav-list li,
  .js .nav-panel-cta {
    opacity: 0;
    transform: translateY(-.4rem);
    transition: opacity var(--motion-fast) var(--ease-reveal), transform var(--motion-fast) var(--ease-reveal);
  }
  .site-nav.is-open .site-nav-list li:nth-child(1) { transition-delay: 60ms; }
  .site-nav.is-open .site-nav-list li:nth-child(2) { transition-delay: 110ms; }
  .site-nav.is-open .site-nav-list li:nth-child(3) { transition-delay: 160ms; }
  .site-nav.is-open .site-nav-list li:nth-child(4) { transition-delay: 210ms; }
  .site-nav.is-open .site-nav-list li:nth-child(5) { transition-delay: 260ms; }
  .site-nav.is-open .site-nav-list li:nth-child(6) { transition-delay: 310ms; }
  .site-nav.is-open .nav-panel-cta { transition-delay: 370ms; }
  .site-nav.is-open .site-nav-list li,
  .site-nav.is-open .nav-panel-cta { opacity: 1; transform: translateY(0); }
  .site-nav-list { flex-direction: column; gap: 0; }
  .site-nav-list li { border-bottom: 1px solid var(--line-dark); }
  .nav-link { display: block; width: 100%; padding: 1rem 0; font-size: 1rem; letter-spacing: .14em; }
  .nav-link::after { display: none; }
  .nav-panel-cta { display: inline-flex; margin-top: 1.5rem; width: 100%; }
  .no-js .nav-toggle { display: none; }
  .no-js .site-nav {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    flex-basis: 100%;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
    padding: 0 0 .9rem;
  }
  .no-js .site-nav-list { flex-direction: row; flex-wrap: wrap; gap: .25rem 1.4rem; }
  .no-js .site-nav-list li { border-bottom: 0; }
  .no-js .nav-link { display: inline-block; width: auto; padding: .4rem 0; font-size: .8rem; }
  .no-js .nav-panel-cta { display: none; }
}

/* --- Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: min(100svh, 74rem);
  display: flex;
  align-items: center;
  background: radial-gradient(115% 85% at 78% 38%, #141518 0%, var(--ink-950) 58%), var(--ink-950);
  overflow: hidden;
  overflow: clip;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 105% at 50% 42%, transparent 62%, rgba(0, 0, 0, .3) 100%);
  pointer-events: none;
}
.hero-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(52% 44% at 74% 42%, rgba(196, 58, 50, .075) 0%, transparent 70%), radial-gradient(40% 34% at 22% 78%, rgba(247, 243, 236, .035) 0%, transparent 70%);
  pointer-events: none;
}

/* Feines Partikelfeld hinter Text, Buttons und V (Canvas, via main.js) */
.hero-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Dezenter Lichtschein, der dem Zeiger folgt — beeinflusst nur den Hintergrund */
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-slow) var(--ease-material);
  background: radial-gradient(30rem circle at var(--pointer-x, 72%) var(--pointer-y, 40%), rgba(196, 58, 50, .055) 0%, rgba(247, 243, 236, .02) 45%, transparent 70%);
}
.hero.is-tracked .hero-glow { opacity: 1; }

/* --- Sirius-Signaturstern -----------------------------------------------------
   Ein bewusst besonderer, aber ruhiger Stern: heller Kern, weicher Halo,
   feine Lichtausläufer, sehr langsamer Glanzwechsel. Ohne Beschriftung. */
.hero-sirius {
  position: absolute;
  left: 17%;
  top: 15%;
  pointer-events: none;
}
.hero-sirius::before,
.hero-sirius::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
.hero-sirius::before {
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(218, 232, 248, .55) 50%, transparent 100%);
}
.hero-sirius::after {
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, transparent 0%, rgba(218, 232, 248, .55) 50%, transparent 100%);
}
.sirius-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.5px;
  height: 3.5px;
  translate: -50% -50%;
  border-radius: 50%;
  background: rgba(250, 251, 255, .95);
  box-shadow: 0 0 6px rgba(220, 234, 250, .85), 0 0 16px rgba(190, 214, 242, .4);
}
.js .hero-sirius { animation: sirius-breathe 9s ease-in-out infinite alternate; }
@keyframes sirius-breathe {
  from { opacity: .72; }
  to { opacity: 1; }
}
@media (max-width: 899px) {
  .hero-sirius { scale: .75; opacity: .8; }
}

/* --- Sternschnuppe ------------------------------------------------------------
   Seltenes stilles Zeichen: feiner Kopf, weicher Schweif, flache Diagonale
   von rechts oben nach links unten (endet nahe dem Signaturstern). */
.hero-shooting {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  overflow: clip;
}
.shooting-star {
  position: absolute;
  left: 70%;
  /* immer unterhalb des fixierten Header-Bands starten */
  top: max(8%, calc(var(--header-h) + 1.25rem));
  width: 110px;
  height: 1.5px;
  border-radius: 2px;
  opacity: 0;
  background: linear-gradient(to left, rgba(247, 243, 236, .9) 0%, rgba(205, 222, 240, .35) 35%, transparent 100%);
}
.shooting-star::after {
  content: "";
  position: absolute;
  right: -1.5px;
  top: 50%;
  width: 3.5px;
  height: 3.5px;
  translate: 0 -50%;
  border-radius: 50%;
  background: rgba(250, 249, 244, .95);
  box-shadow: 0 0 7px rgba(215, 232, 248, .75);
}
.hero-shooting.is-active .shooting-star { animation: shooting-run 1.7s cubic-bezier(.3, .05, .35, 1) both; }
@keyframes shooting-run {
  0% { transform: rotate(174deg) translateX(0); opacity: 0; }
  12% { opacity: 1; }
  80% { opacity: .85; }
  /* viewport-proportionale Distanz: der Kopf endet auf allen Breiten
     bis ~2560px nahe der Sirius-Position (left 17%) */
  100% { transform: rotate(174deg) translateX(min(53.3vw, 1360px)); opacity: 0; }
}
@media (max-width: 899px) {
  .hero-shooting { display: none; }
}

/* --- Hero-V: Dual-Energy-Outline-Pulse --------------------------------------
   Feine Lichtadern entlang der V-Kontur. Rot = Hauptenergie, kühles Eisblau =
   Gegenkraft. Ausgelöst in seltenen Intervallen über main.js (Klassen
   pulse-left/pulse-right/delay-right/pulse-converge auf dem SVG). */
.hero-v-energy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-v-energy path {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: .12 .88;
  stroke-dashoffset: .95;
  opacity: 0;
}
.ve-core { stroke: var(--ve-core, rgba(224, 90, 78, .9)); stroke-width: 1.7; }
.ve-halo { stroke: var(--ve-halo, rgba(196, 58, 50, .3)); stroke-width: 5; }
.ve--blue { --ve-core: rgba(152, 210, 236, .72); --ve-halo: rgba(126, 190, 214, .2); }
.hero-v-energy.pulse-left .ve--left path,
.hero-v-energy.pulse-right .ve--right path { animation: ve-run 2.4s var(--ease-material) both; }
.hero-v-energy.delay-right .ve--right path { animation-delay: .7s; }
/* ease-in-out statt starkem Ease-out, damit die Ankunft am unteren
   Zentrum zeitlich mit dem Spark (Delay 1.6 s) zusammenfällt */
.hero-v-energy.pulse-converge .ve--left path,
.hero-v-energy.pulse-converge .ve--right path { animation: ve-converge 2.2s ease-in-out both; }
.hero-v-energy .ve-spark,
.hero-v-energy .ve-spark-halo {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.ve-spark { fill: rgba(247, 243, 236, .92); }
.ve-spark-halo--red { fill: none; stroke: rgba(224, 90, 78, .3); stroke-width: 1.2; }
.ve-spark-halo--blue { fill: none; stroke: rgba(126, 190, 214, .22); stroke-width: 1; }
.hero-v-energy.pulse-converge .ve-spark { animation: ve-spark 1.3s var(--ease-material) 1.6s both; }
.hero-v-energy.pulse-converge .ve-spark-halo { animation: ve-spark-halo 1.7s var(--ease-material) 1.65s both; }
@keyframes ve-run {
  0% { stroke-dashoffset: .95; opacity: 0; }
  12% { opacity: 1; }
  80% { opacity: 1; }
  /* .12 = Dash-Länge: Fenster endet exakt am Pfadende, kein Wraparound
     des periodischen Musters zurück an den Pfadanfang */
  100% { stroke-dashoffset: .12; opacity: 0; }
}
@keyframes ve-converge {
  0% { stroke-dashoffset: .95; opacity: 0; }
  14% { opacity: 1; }
  72% { opacity: 1; }
  /* .60: Dash-Spitze stoppt exakt an der unteren Innenecke (s ≈ .52),
     der Lichtstreifen ruht auf der Unterkante am Konvergenzpunkt */
  100% { stroke-dashoffset: .6; opacity: 0; }
}
@keyframes ve-spark {
  0% { opacity: 0; transform: scale(.3); }
  25% { opacity: .95; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}
@keyframes ve-spark-halo {
  0% { opacity: 0; transform: scale(.5); }
  30% { opacity: .8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}
@media (max-width: 899px) {
  .ve-halo { display: none; }
  .ve-core { stroke-width: 1.2; }
}
.hero-v {
  position: absolute;
  top: 50%;
  right: clamp(-4rem, 2vw, 6rem);
  width: clamp(17rem, 42vw, 39rem);
  transform: perspective(1100px) translate3d(var(--vx, 0px), calc(-52% + var(--vy, 0px) + var(--vs, 0px)), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--vr, 0deg));
  pointer-events: none;
}
.hero-v img {
  width: 100%;
  filter: drop-shadow(0 34px 60px var(--ink-shadow)) drop-shadow(0 0 46px rgba(196, 58, 50, .1));
}
.hero-v-light {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url(/assets/v-emboss-Bg_ELUMd.webp);
  mask-image: url(/assets/v-emboss-Bg_ELUMd.webp);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0;
  transition: opacity var(--motion-slow) var(--ease-material);
}
.hero-v-light::before {
  content: "";
  position: absolute;
  inset: -55%;
  background: radial-gradient(closest-side at 50% 46%, rgba(247, 243, 236, .13) 0%, rgba(196, 58, 50, .06) 46%, transparent 72%);
  transform: translate3d(var(--lgx, 6%), var(--lgy, -5%), 0);
}
.hero-v.is-lit .hero-v-light { opacity: 1; }
.js .hero-v { animation: v-emerge var(--motion-slow) var(--ease-out) .1s both; }
/* Bewusst ohne to-Frame: die Animation endet am jeweils kaskadierten
   opacity-Wert (1 Desktop, .5 mobil, .92 Portrait) statt ihn zu überschreiben */
@keyframes v-emerge {
  0% { opacity: 0; }
}
.hero-v-sheen {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url(/assets/v-emboss-Bg_ELUMd.webp);
  mask-image: url(/assets/v-emboss-Bg_ELUMd.webp);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background: linear-gradient(115deg, transparent 32%, rgba(247, 243, 236, .16) 46%, rgba(196, 58, 50, .12) 53%, transparent 66%);
  transform: translateX(-130%);
  opacity: 0;
}
.js .hero-v-sheen { animation: v-sheen var(--motion-drawn) var(--ease-out) .9s forwards; }
@keyframes v-sheen {
  0% { transform: translateX(-130%); opacity: 1; }
  99% { opacity: 1; }
  to { transform: translateX(130%); opacity: 0; }
}

.hero-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--header-h) + 2.5rem);
  padding-bottom: 6.5rem;
}
.hero-content {
  max-width: 46rem;
  transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0);
}
.hero-eyebrow { margin-bottom: clamp(1.5rem, 3.5vh, 2.5rem); }
.hero-title {
  font-family: var(--font-serif);
  font-weight: 470;
  font-size: clamp(2.4rem, 1.1rem + 6.4vw, 4.6rem);
  line-height: 1.1;
  letter-spacing: .004em;
}
.hero-title-line { display: block; overflow: clip; padding-bottom: .06em; }
.line-inner { display: block; }
.hero-title-dot { color: var(--red-accent-dark); }
.hero-accent-visual { position: relative; display: inline-block; }
.js .hero-accent-visual { color: var(--text-primary); }
.hero-accent-wipe {
  position: absolute;
  inset: 0;
  color: var(--red-accent-dark);
  clip-path: inset(-.1em 100% -.15em 0);
}
.no-js .hero-accent-wipe { display: none; }
.js .hero-accent-wipe { animation: accent-wipe var(--motion-entrance) var(--ease-material) 1.25s forwards; }
@keyframes accent-wipe {
  to { clip-path: inset(-.1em 0% -.15em 0); }
}
.hero-intro {
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
  max-width: 36rem;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  line-height: 1.7;
  color: var(--text-primary);
}
.hero-note { margin-top: 1rem; font-size: .95rem; letter-spacing: .02em; color: var(--text-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(1.75rem, 4vh, 2.5rem); }

.js .hero-eyebrow, .js .hero-intro, .js .hero-note, .js .hero-actions {
  animation: rise-in var(--motion-entrance) var(--ease-out) both;
}
.js .hero-eyebrow { animation-delay: .05s; }
.js .hero-title-line .line-inner { animation: line-mask-in var(--motion-slow) var(--ease-reveal) both; }
.js .hero-title-line:nth-child(1) .line-inner { animation-delay: .1s; }
.js .hero-title-line:nth-child(2) .line-inner { animation-delay: .26s; }
.js .hero-intro { animation-delay: .5s; }
.js .hero-note { animation-delay: .65s; }
.js .hero-actions { animation-delay: .8s; }
@keyframes rise-in {
  0% { opacity: 0; transform: translateY(1.1rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes line-mask-in {
  0% { transform: translateY(112%); }
  to { transform: translateY(0); }
}

.hero-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: 1.1rem var(--shell-pad) calc(1.1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-dark);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.js .hero-meta { animation: rise-in var(--motion-entrance) var(--ease-out) .95s both; }

/* --- Sektionen (kompakte Abstände) ----------------------------------------- */
.section { position: relative; padding-block: clamp(3.75rem, 9vh, 6.5rem); }
.section--paper {
  background: linear-gradient(180deg, var(--paper-100) 0%, var(--paper-200) 100%);
  color: var(--text-ink);
}
.section--fold.section--paper {
  background: radial-gradient(60% 22rem at 50% 0%, var(--paper-light) 0%, rgba(251, 245, 234, 0) 72%), linear-gradient(180deg, var(--paper-100) 0%, var(--paper-200) 100%);
}
.section--dark { background: var(--ink-900); color: var(--text-primary); }

.fold-line {
  position: absolute;
  top: -3.5rem;
  left: calc(50% - 1px);
  width: 2px;
  height: 7rem;
  background: linear-gradient(180deg, transparent 0%, var(--line-red) 30%, var(--line-red) 70%, transparent 100%);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--motion-slow) var(--ease-out) .15s;
}
.no-js .fold-line, .fold-line.in-view { transform: scaleY(1); }

.fold-v {
  position: absolute;
  top: clamp(2rem, 8vw, 4.5rem);
  right: max(-6rem, -8vw);
  width: clamp(16rem, 34vw, 30rem);
  color: var(--text-ink);
  opacity: .07;
  pointer-events: none;
}

.section .eyebrow { margin-bottom: clamp(1.5rem, 3vh, 2.25rem); }
.section-title { margin-bottom: clamp(1.25rem, 3vh, 2rem); }
.section-copy + .section-copy { margin-top: 1rem; }

/* --- Leistungen ------------------------------------------------------------ */
.services-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vh, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  border: 1px solid var(--line-paper);
  background: linear-gradient(180deg, var(--paper-light) 0%, rgba(251, 245, 234, 0) 65%);
  transition: border-color var(--motion-fast), transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast);
}
@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    border-color: rgba(169, 40, 36, .35);
    transform: translateY(-.2rem);
    box-shadow: 0 14px 30px rgba(22, 23, 25, .08);
  }
}
.service-index {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(2.2rem, 1.8rem + 1.5vw, 3.2rem);
  line-height: 1;
  color: var(--paper-500);
}
.service-title {
  margin-top: .9rem;
  font-family: var(--font-serif);
  font-weight: 520;
  font-size: clamp(1.3rem, 1.15rem + .6vw, 1.65rem);
  line-height: 1.25;
  color: var(--text-ink);
}
.service-title::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: .7rem;
  background: var(--line-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-medium) var(--ease-out) .35s;
}
.no-js .service-title::after, .reveal.in-view .service-title::after { transform: scaleX(1); }
.service-copy { margin-top: .9rem; color: var(--text-ink); line-height: 1.65; }
.service-list { margin-top: 1.1rem; padding-top: .35rem; }
.service-list li {
  position: relative;
  padding: .42rem 0 .42rem 1.35rem;
  color: var(--text-ink-muted);
  font-size: .95rem;
}
.service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: .6rem;
  height: 2px;
  background: var(--red-600);
}
.services-note {
  margin-top: clamp(2rem, 4vh, 2.75rem);
  max-width: 62ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--text-ink-muted);
}

/* --- Showcase: eine fortlaufende horizontale Galerie ------------------------- */
.work-gallery { position: relative; margin-top: clamp(2rem, 4vh, 3rem); }
.work-grid {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .4rem;
}
.work-grid::-webkit-scrollbar { display: none; }
.js .work-grid { cursor: grab; }
.work-grid.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.work-card { flex: 0 0 min(24rem, 88%); scroll-snap-align: start; }
/* Ab Desktopbreite füllen zwei Karten die Galerie bewusst aus —
   bei künftig mehr Projekten bleiben zwei pro Ansicht sichtbar */
@media (min-width: 1024px) {
  .work-card { flex-basis: min(36rem, calc(50% - .625rem)); }
}

/* Pfeilnavigation (nur Desktop mit JS — mobil wird gewischt) */
.work-arrow {
  display: none;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: rgba(12, 13, 15, .78);
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--motion-fast), color var(--motion-fast), opacity var(--motion-fast);
}
.work-arrow svg { width: 1.1rem; height: 1.1rem; }
.work-arrow:hover { border-color: var(--rim-red); color: var(--red-350); }
.work-arrow:disabled { opacity: .3; cursor: default; }
.work-arrow--prev { left: -.6rem; }
.work-arrow--next { right: -.6rem; }
@media (min-width: 768px) {
  .js .work-arrow { display: inline-flex; }
}

/* Live-Projektkarte: Vergrößern-Taste, Neu-Hinweis, Demo-Kennzeichnung */
.work-zoom {
  position: absolute;
  top: .55rem;
  right: .55rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(12, 13, 15, .6);
  border: 1px solid rgba(243, 239, 232, .25);
  border-radius: 2px;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--motion-fast), color var(--motion-fast), background-color var(--motion-fast);
}
.work-zoom:hover { border-color: var(--rim-red); color: var(--red-350); background: rgba(12, 13, 15, .8); }
.work-zoom svg { width: 1.05rem; height: 1.05rem; }
.work-new {
  position: absolute;
  top: .55rem;
  left: .55rem;
  z-index: 2;
  padding: .2rem .5rem;
  background: rgba(169, 40, 36, .85);
  color: var(--paper-100);
  font-size: .6rem;
  font-weight: 650;
  letter-spacing: .22em;
  text-transform: uppercase;
  border-radius: 2px;
}
.work-new--inline { position: static; }
.work-demo-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .8rem;
  margin-top: auto;
  padding-top: .9rem;
  font-size: .82rem;
}
.work-demo-badge {
  display: inline-block;
  padding: .3rem .55rem;
  border: 1px solid var(--rim-red);
  border-radius: 2px;
  color: var(--red-350);
  font-size: .6rem;
  font-weight: 650;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.work-card--live .work-media img { object-position: top; }
.work-card--live .work-copy { margin-bottom: 0; }

/* Statischer Fallback ohne JavaScript: Karten umbrechen statt abzuschneiden */
.no-js .work-grid { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; }
.no-js .work-card { flex: 1 1 min(24rem, 100%); }
.work-nojs { display: none; }
.no-js .work-nojs { display: block; margin-top: 1.25rem; font-size: .95rem; color: var(--text-muted); }
.js .work-progress { display: flex; }
.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-dark);
  background: var(--ink-850);
  text-decoration: none;
  color: inherit;
  transform: perspective(900px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg)) translateY(var(--card-y, 0rem));
  transition: border-color var(--motion-fast), transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast);
}
.work-media {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  overflow: clip;
  background: radial-gradient(80% 80% at 50% 40%, var(--ink-800), var(--ink-950));
}
.work-media img { width: 100%; height: 100%; object-fit: cover; }
.work-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.25rem 1.4rem 1.5rem; }
.work-tags {
  order: -1;
  margin-bottom: .6rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.work-title { font-family: var(--font-serif); font-weight: 520; font-size: 1.25rem; color: var(--text-primary); }
.work-copy { margin-top: .6rem; margin-bottom: 1.1rem; font-size: .95rem; line-height: 1.65; color: var(--text-muted); }
.work-note {
  margin-top: clamp(2rem, 4vh, 2.75rem);
  max-width: 62ch;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* Kartenreaktion nur für Maus und präzisen Zeiger */
@media (hover: hover) and (pointer: fine) {
  .work-card:hover {
    --card-y: -.25rem;
    border-color: var(--rim-red);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .45);
  }
  .work-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--motion-fast);
    background: radial-gradient(24rem circle at var(--card-lx, 50%) var(--card-ly, 0%), rgba(247, 243, 236, .05) 0%, transparent 60%);
  }
  .work-card:hover::after { opacity: 1; }
  .work-card::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: var(--line-red);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--motion-swift) var(--ease-out);
  }
  .work-card:hover::before { transform: scaleX(1); }
}

/* --- VERSIVION-Signatur (kompakt) ------------------------------------------ */
.signature {
  position: relative;
  background: radial-gradient(70% 55% at 50% 42%, #131417 0%, var(--ink-950) 70%), var(--ink-950);
  padding-block: clamp(3.75rem, 9vh, 6.5rem);
}
.signature .eyebrow { margin-bottom: clamp(1.5rem, 3vh, 2.25rem); }

.stanza-list { display: grid; gap: clamp(2rem, 5vh, 3rem); }
@media (min-width: 720px) {
  .stanza-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}
@media (min-width: 1200px) {
  .stanza-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 3rem; }
}
.stanza {
  position: relative;
  padding-top: 1.5rem;
  padding-left: 1.25rem;
  border-top: 1px solid var(--line-dark);
}
.stanza::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, var(--line-red) 0%, rgba(196, 58, 50, .28) 100%);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--motion-slow) var(--ease-reveal) .15s;
}
.no-js .stanza::before, .stanza.in-view::before { transform: scaleY(1); }
@media (min-width: 1200px) {
  .stanza:not(:last-child)::after {
    content: "→";
    position: absolute;
    top: 1.9rem;
    right: -2.1rem;
    font-size: 1.2rem;
    color: var(--red-350);
  }
}
.stanza-svg { width: min(100%, 16rem); height: auto; margin-bottom: .9rem; }
.stanza-dots circle { fill: var(--text-primary); opacity: .7; }
.stanza-impulse { stroke: var(--red-500); stroke-width: 1.5; }
.stanza-axis { stroke: var(--text-primary); stroke-width: 1.2; opacity: .85; }
.stanza-axis--soft { opacity: .3; }
.stanza-axis-head { stroke: var(--red-500); stroke-width: 1.5; }
.stanza-vform { stroke: var(--red-500); stroke-width: 1.4; }
.stanza-base { stroke: var(--red-500); stroke-width: 1; opacity: .55; }
.stanza-word {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.stanza-copy { margin-top: .5rem; color: var(--text-muted); }

.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--motion-slow) var(--ease-out) .3s;
}
.no-js .draw, .reveal.in-view .draw { stroke-dashoffset: 0; }

.signature-line {
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
  font-family: var(--font-serif);
  font-weight: 470;
  font-size: clamp(1.35rem, 1.05rem + 1.6vw, 2.1rem);
  line-height: 1.45;
  max-width: 40ch;
  text-wrap: balance;
}
.signature-line .accent-word, .footer-claim .accent-word { color: var(--red-350); }

/* --- Ablauf ----------------------------------------------------------------- */
.process-list { margin-top: clamp(1.5rem, 3vh, 2.25rem); }
.process-step {
  display: grid;
  gap: .3rem 2.25rem;
  padding-block: 1.35rem;
  border-top: 1px solid var(--line-paper);
}
.process-step:last-child { border-bottom: 1px solid var(--line-paper); }
@media (min-width: 900px) {
  .process-step { grid-template-columns: 4.5rem minmax(15rem, 19rem) 1fr; align-items: baseline; }
}
.process-index {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.9rem, 1.6rem + 1vw, 2.6rem);
  line-height: 1.1;
  color: var(--paper-500);
}
.process-title {
  font-family: var(--font-sans);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-ink);
}
.process-copy { color: var(--text-ink-muted); max-width: 62ch; }

/* --- Über VERSIVION ---------------------------------------------------------- */
.person { background: var(--ink-950); }
.person-shell { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .person-shell { grid-template-columns: minmax(14rem, 22rem) 1fr; }
}
.person-plate {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 22rem;
  border: 1px solid var(--line-dark);
  background: radial-gradient(80% 80% at 50% 38%, var(--ink-850) 0%, var(--ink-950) 100%);
  padding: 15%;
}
.person-plate img {
  width: 100%;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .55)) drop-shadow(0 0 26px rgba(196, 58, 50, .09));
}
.person-name { max-width: none; }
.person-fields {
  margin-top: 1.5rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 2.1;
  color: var(--text-muted);
  max-width: 44rem;
}

/* --- Kontakt ----------------------------------------------------------------- */
.contact { position: relative; background: var(--ink-950); overflow: hidden; overflow: clip; }
.contact-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 46% at 50% 30%, rgba(196, 58, 50, .06) 0%, transparent 72%);
  pointer-events: none;
}
.contact-shell { position: relative; }
@media (min-width: 1100px) {
  .contact-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  .contact-aside { padding-top: 9.75rem; }
  .contact-aside .contact-data { margin-top: 0; }
}
.contact-line { display: block; width: 1.5rem; height: 8.25rem; margin-bottom: 1.5rem; margin-left: -.7rem; }
.contact-line-stroke {
  stroke: var(--line-red);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--motion-slow) var(--ease-reveal);
}
.contact-line-dot {
  fill: var(--red-500);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform var(--motion-swift) var(--ease-precision) .95s;
}
.no-js .contact-line-stroke, .contact-line.in-view .contact-line-stroke { stroke-dashoffset: 0; }
.no-js .contact-line-dot, .contact-line.in-view .contact-line-dot { transform: scale(1); }
.contact-title {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.4rem);
  line-height: 1.18;
  max-width: 24ch;
  text-wrap: balance;
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}
.contact-copy { max-width: 48ch; }
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
}
.copy-feedback {
  flex-basis: 100%;
  min-height: 1.4rem;
  font-size: .85rem;
  letter-spacing: .08em;
  color: var(--red-350);
}
.contact-data { display: grid; gap: 0; margin-top: clamp(2.5rem, 6vh, 3.5rem); max-width: 34rem; }
.contact-row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line-dark);
}
.contact-row:first-child { border-top: 1px solid var(--line-dark); }
.contact-row dd { font-size: 1rem; letter-spacing: .02em; overflow-wrap: anywhere; }
.contact-icon { width: 1.35rem; height: 1.35rem; color: var(--red-500); }
.contact-note {
  margin-top: clamp(2rem, 5vh, 3rem);
  max-width: 52ch;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* --- Footer ------------------------------------------------------------------ */
.site-footer {
  position: relative;
  overflow: hidden;
  overflow: clip;
  background: var(--ink-950);
  border-top: 1px solid var(--line-dark);
  padding-block: clamp(3rem, 7vh, 4.5rem) max(clamp(2.5rem, 6vh, 4rem), env(safe-area-inset-bottom, 0px));
}
.footer-shell { position: relative; z-index: 1; display: grid; gap: 1.4rem; }

/* --- Fibonacci-Signatur im Footer -------------------------------------------
   Quadrate 1,1,2,3,5,8,13 (×40) im 21:13-Rahmen (21/13 ≈ φ), Spirale aus
   tangentialen Viertelkreisbögen. Zeichnung rein per CSS (stroke-dashoffset),
   ausgelöst über die Klasse fib-drawn am Footer (IntersectionObserver). */
.footer-fib {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
}
.fib-svg {
  width: clamp(20rem, 46vw, 46rem);
  height: auto;
  margin-right: max(-5rem, -6vw);
  margin-bottom: max(-4rem, -5vw);
  transform-origin: 72% 74%;
}
.site-footer.fib-drawn .fib-svg { animation: fib-breathe 16s var(--ease-material) 6.5s infinite alternate; }
@keyframes fib-breathe {
  from { opacity: var(--fib-alpha, 1); transform: scale(1); }
  to { opacity: calc(var(--fib-alpha, 1) * .93); transform: scale(1.006); }
}
.fib-sq {
  fill: none;
  stroke: rgba(243, 239, 232, .07);
  stroke-width: 1;
  opacity: 0;
  transition: opacity .9s var(--ease-material) var(--t, 0s);
}
.site-footer.fib-drawn .fib-sq, .no-js .fib-sq { opacity: 1; }
.fib-seg {
  fill: none;
  stroke: rgba(243, 239, 232, .34);
  stroke-width: 1.3;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.fib-seg--red { stroke: rgba(196, 58, 50, .5); }
.site-footer.fib-drawn .fib-seg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--d, .6s) var(--ease-material) var(--t, 0s);
}
.no-js .fib-seg { stroke-dashoffset: 0; }
.fib-node {
  fill: rgba(243, 239, 232, .4);
  opacity: 0;
  transition: opacity .6s var(--ease-material) var(--t, 0s);
}
.site-footer.fib-drawn .fib-node, .no-js .fib-node { opacity: 1; }
.fib-origin {
  fill: var(--red-500);
  opacity: 0;
  transform: scale(.3);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .5s var(--ease-material), transform .5s var(--ease-material);
}
.fib-origin--halo { fill: none; stroke: rgba(196, 58, 50, .25); stroke-width: 1; transition-delay: .15s; }
.site-footer.fib-drawn .fib-origin, .no-js .fib-origin { opacity: .8; transform: scale(1); }
.fib-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  fill: rgba(243, 239, 232, .5);
  opacity: 0;
  transition: opacity 1.2s var(--ease-material) var(--t, 5s);
}
.site-footer.fib-drawn .fib-num, .no-js .fib-num { opacity: .34; }
/* Einmaliger feiner Lichtpunkt entlang des letzten Bogens (13) */
.fib-comet {
  fill: none;
  stroke: rgba(247, 243, 236, .75);
  stroke-width: 1.8;
  stroke-dasharray: .08 .92;
  stroke-dashoffset: .92;
  opacity: 0;
}
.site-footer.fib-drawn .fib-comet { animation: fib-comet 2.6s var(--ease-material) 5.8s 1 both; }
@keyframes fib-comet {
  0% { stroke-dashoffset: .92; opacity: 0; }
  12% { opacity: .7; }
  82% { opacity: .7; }
  100% { stroke-dashoffset: .04; opacity: 0; }
}
/* Dezente einmalige Reaktion des Wortes "Idee", sobald die Spirale vollendet ist */
.site-footer.fib-drawn .footer-claim em:last-of-type { animation: idea-glow 1.8s var(--ease-material) 5.6s 1; }
@keyframes idea-glow {
  0%, 100% { text-shadow: none; }
  50% { text-shadow: 0 0 16px rgba(224, 90, 78, .45); }
}
@media (max-width: 768px) {
  .fib-svg { width: min(80vw, 21rem); margin-right: -3rem; margin-bottom: -2.5rem; }
  .fib-num { display: none; }
}

/* Fibonacci-Echos: kleinere Ableitungen der Ordnung, erscheinen versetzt
   nach der Hauptspirale — links und im Hintergrund, bewusst schwächer. */
.footer-fib-echoes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.fib-echo { position: absolute; height: auto; opacity: 0; }
.fib-echo path {
  fill: none;
  stroke: rgba(243, 239, 232, .3);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.fib-echo--2 path { stroke: rgba(196, 58, 50, .24); }
.fib-echo--1 { left: 2%; top: 12%; width: 9rem; transform: rotate(-14deg); --et: 7s; }
.fib-echo--2 { left: 34%; bottom: 10%; width: 13rem; transform: rotate(16deg) scaleX(-1); --et: 8.6s; }
.fib-echo--3 { left: 16%; top: 52%; width: 5rem; transform: rotate(8deg); --et: 10.2s; }
.site-footer.fib-drawn .fib-echo { transition: opacity 2.2s var(--ease-material) var(--et, 7s); }
.site-footer.fib-drawn .fib-echo--1 { opacity: .5; }
.site-footer.fib-drawn .fib-echo--2 { opacity: .45; }
.site-footer.fib-drawn .fib-echo--3 { opacity: .5; }
.site-footer.fib-drawn .fib-echo path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.8s var(--ease-material) var(--et, 7s);
}
.no-js .fib-echo { opacity: .4; }
.no-js .fib-echo path { stroke-dashoffset: 0; }
@media (max-width: 768px) {
  .fib-echo--2, .fib-echo--3 { display: none; }
  .fib-echo--1 { width: 6.5rem; }
  .site-footer.fib-drawn .fib-echo--1 { opacity: .35; }
}
.footer-wordmark { font-size: .85rem; font-weight: 550; letter-spacing: .38em; color: var(--text-primary); }
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  font-size: .9rem;
  color: var(--text-muted);
}
.footer-sep { color: var(--text-muted); }
.footer-heart { color: var(--red-500); font-size: .7rem; opacity: .75; }
.footer-nav { display: flex; gap: 1.75rem; font-size: .9rem; color: var(--text-muted); }
.footer-nav .text-link { display: inline-block; padding-block: .7rem; }
.footer-claim {
  margin-top: 1.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-dark);
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.2rem, 1rem + 1.1vw, 1.7rem);
  color: var(--text-primary);
}

/* --- Rechtsseiten ------------------------------------------------------------ */
.page-legal { background: var(--paper-100); color: var(--text-ink); }
.legal-main {
  padding-top: calc(var(--header-h) + clamp(3rem, 8vh, 5rem));
  padding-bottom: clamp(4rem, 10vh, 6rem);
  min-height: 60vh;
  min-height: 60svh;
}
.legal-main .shell { max-width: 50rem; }
.legal-title {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.4rem);
  margin-bottom: clamp(2rem, 5vh, 3rem);
}
.legal-main h2 {
  font-family: var(--font-serif);
  font-weight: 520;
  font-size: 1.45rem;
  margin-top: 2.5rem;
  margin-bottom: .75rem;
}
.legal-main h3 { font-size: 1.02rem; font-weight: 650; margin-top: 1.75rem; margin-bottom: .5rem; }
.legal-main p, .legal-main li { color: var(--text-ink); line-height: 1.75; }
.legal-main p + p { margin-top: .85rem; }
.legal-main ul { list-style: none; margin-top: .75rem; }
.legal-main ul li { position: relative; padding-left: 1.4rem; margin-bottom: .4rem; }
.legal-main ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .75rem;
  width: .6rem;
  height: 2px;
  background: var(--red-600);
}
.legal-updated { margin-top: 3rem; font-size: .85rem; color: var(--text-ink-muted); }
.legal-back { margin-top: 2.5rem; }
.page-legal .site-header { background: rgba(12, 13, 15, .97); border-bottom-color: var(--line-dark); }

/* --- Reveal-Animation --------------------------------------------------------- */
/* Die Verschiebung nutzt bewusst die separate translate-Eigenschaft statt
   transform, damit sie mit dem eigenen transform der Karten (Tilt, Hover-Lift)
   komponiert statt ihn zu überschreiben. */
.js .reveal {
  opacity: 0;
  translate: 0 1.4rem;
  transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out);
  transition-delay: calc(var(--stagger, 0) * 90ms);
}
.js .reveal.in-view { opacity: 1; translate: 0 0; }
/* Karten kombinieren Reveal- und eigene Hover-/Tilt-Transitions */
.js .work-card.reveal,
.js .service-card.reveal {
  transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out), border-color var(--motion-fast), transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast);
  transition-delay: calc(var(--stagger, 0) * 90ms), calc(var(--stagger, 0) * 90ms), 0s, 0s, 0s;
}

/* --- Reduzierte Bewegung ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; translate: none; transition: none; }
  .js .work-card.reveal, .js .service-card.reveal { transition: none; }
  .js .site-nav-list li, .js .nav-panel-cta { transition: none; }
  .hero-v {
    --vx: 0px !important;
    --vy: 0px !important;
    --vr: 0deg !important;
    --vs: 0px !important;
    --rx: 0deg !important;
    --ry: 0deg !important;
  }
  .button { --mx: 0px !important; --my: 0px !important; }
  .js .hero-eyebrow, .js .hero-intro, .js .hero-note, .js .hero-actions,
  .js .hero-title-line .line-inner, .js .hero-meta, .js .hero-v, .js .wordmark { animation: none; }
  .js .hero-v-sheen { animation: none; opacity: 0; }
  .hero-v-light { opacity: 0 !important; transition: none; }
  .js .hero-accent-visual { color: var(--red-accent-dark); }
  .hero-accent-wipe { display: none; }
  .fold-line, .service-title::after { transform: none; transition: none; }
  .draw { stroke-dashoffset: 0; transition: none; }
  .contact-line-stroke { stroke-dashoffset: 0; transition: none; }
  .contact-line-dot { transform: scale(1); transition: none; }
  .stanza::before { transform: scaleY(1); transition: none; }
  .text-link, .nav-link::after, .button, .button-arrow, .site-nav,
  .site-nav-list li, .nav-panel-cta, .header-inner,
  .skip-link, .nav-toggle-line, .work-card, .work-card::after, .work-card::before,
  .service-card, .hero-glow { transition: none; }
  .hero-glow { opacity: 0 !important; }
  .hero-content { --cx: 0px !important; --cy: 0px !important; }
  .button::before { display: none; }
  .js .reveal .eyebrow-rule { transform: none; transition: none; }
  .js .hero-eyebrow .eyebrow-rule { animation: none; }
  .work-card {
    --card-rx: 0deg !important;
    --card-ry: 0deg !important;
    --card-y: 0rem !important;
  }
  .work-card:hover, .service-card:hover { transform: none; box-shadow: none; }
  .work-card::before { transform: scaleX(0) !important; }
  .work-card::after { opacity: 0 !important; }
  .hero-v-energy path, .hero-v-energy circle { animation: none !important; opacity: 0 !important; }
  .hero-shooting { display: none; }
  .js .hero-sirius, .hero-sirius { animation: none; }
  .soundscape.is-playing .ss-ring--outer,
  .soundscape.is-playing .ss-dot,
  .soundscape.is-playing .soundscape-line span { animation: none; }
  .soundscape-volume { transition: none; translate: 0 0; }
  .soundscape-toggle, .soundscape-mute { transition: none; }
  .nav-orb { transition: none; }
  .site-nav-list li:hover .nav-orb, .site-nav-list li:focus-within .nav-orb,
  .header-cta-wrap:hover .nav-orb, .header-cta-wrap:focus-within .nav-orb {
    animation: none;
    translate: -50% 0;
    transition: none;
  }
  .work-arrow, .work-zoom { transition: none; }
  .site-footer.fib-drawn .fib-echo, .fib-echo { opacity: .4; transition: none; }
  .site-footer.fib-drawn .fib-echo path, .fib-echo path { stroke-dashoffset: 0; transition: none; }
  .site-footer.fib-drawn .fib-seg, .fib-seg { stroke-dashoffset: 0; transition: none; }
  .fib-sq, .fib-node { opacity: 1; transition: none; }
  .fib-num { opacity: .34; transition: none; }
  .fib-origin { opacity: .8; transform: none; transition: none; }
  .site-footer.fib-drawn .fib-svg, .fib-svg { animation: none; }
  .fib-comet { display: none; }
  .site-footer.fib-drawn .footer-claim em:last-of-type { animation: none; }
  html { scroll-behavior: auto; }
}

/* Zwischenbreiten 900–1366px: schmaleres, weiter rechts sitzendes V,
   damit die Hero-Headline nicht mit dem Relief kollidiert */
@media (min-width: 900px) and (max-width: 1366px) {
  .hero-v {
    width: clamp(14rem, 30vw, 26rem);
    right: max(-2.5rem, -2vw);
  }
}

/* --- Kleine Höhen & Hochformat -------------------------------------------------- */
@media (max-height: 480px) {
  .hero { min-height: auto; padding-bottom: 4.5rem; }
  .hero-shell { padding-top: calc(var(--header-h) + 1.5rem); padding-bottom: 4rem; }
  .hero-v { width: clamp(12rem, 30vw, 18rem); opacity: .55; }
}
@media (max-width: 899px) and (orientation: portrait) {
  .hero { align-items: flex-end; --hero-v-w: clamp(11rem, 46vw, 19rem); }
  .hero-shell {
    padding-top: calc(var(--header-h) + .75rem + var(--hero-v-w) * .97 + 1.4rem);
    padding-bottom: 5.5rem;
  }
  .hero-v {
    top: calc(var(--header-h) + .75rem);
    right: -11%;
    width: var(--hero-v-w);
    transform: none;
    opacity: .92;
  }
}
@media (max-width: 899px) {
  .hero-meta { font-size: .6rem; letter-spacing: .28em; }
  .signature-line { margin-top: clamp(2.5rem, 6vh, 3.5rem); }
}
@media (max-width: 479px) {
  .hero-actions .button, .contact-actions .button { flex: 1 1 100%; }
}

/* ==========================================================================
   SHOWCASE-MODAL — digitale Ausstellungsansicht
   ========================================================================== */
html.modal-locked { overflow: hidden; }
html.modal-locked body { padding-right: var(--lock-comp, 0px); }
html.modal-locked .site-header { padding-right: var(--lock-comp, 0px); }
/* Hintergrund beruhigen, solange Modal oder Intro aktiv sind
   (.site-footer erhöht die Spezifität über die fib-drawn-Animationsregel) */
html.modal-locked .site-footer .fib-svg,
html.modal-locked .hero-sirius { animation-play-state: paused; }

.showcase-modal {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(.75rem, 2vw, 2.5rem);
}
.showcase-modal[hidden] { display: none; }
.showcase-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 8, .74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.showcase-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(68rem, 100%);
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
  border: 1px solid var(--line-dark);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  opacity: 0;
  translate: 0 .75rem;
  transition: opacity var(--motion-fast) var(--ease-material), translate var(--motion-fast) var(--ease-material);
}
/* Mikro-Veredelung 1: feine rote Linienreaktion beim Öffnen */
.showcase-modal-dialog::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--line-red) 0%, transparent 75%);
  transform: scaleX(0);
  transform-origin: left center;
}
.showcase-modal.is-open .showcase-modal-dialog { opacity: 1; translate: 0 0; }
.showcase-modal.is-open .showcase-modal-dialog::before {
  transform: scaleX(1);
  transition: transform .9s var(--ease-material) .15s;
}
.showcase-modal-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(12, 13, 15, .6);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--motion-fast), color var(--motion-fast);
}
.showcase-modal-close:hover { border-color: var(--rim-red); color: var(--red-350); }
.showcase-modal-close svg { width: 1.05rem; height: 1.05rem; }
.showcase-modal-label { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.showcase-modal-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
  color: var(--text-primary);
}
.showcase-modal-cat {
  margin-top: .3rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.showcase-modal-media {
  position: relative;
  margin-block: 1.1rem 1.25rem;
  border: 1px solid var(--line-dark);
  background: var(--ink-950);
  padding: .4rem;
}
.showcase-modal-media img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 58vh;
  max-height: 58dvh;
  margin-inline: auto;
}
.showcase-modal-viewtoggle {
  position: absolute;
  top: .85rem;
  right: .85rem;
  display: flex;
  gap: .35rem;
}
.showcase-modal-viewtoggle[hidden] { display: none; }
.showcase-modal-viewtoggle button {
  min-height: 40px;
  padding: .35rem .7rem;
  background: rgba(12, 13, 15, .78);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  color: var(--text-muted);
  font: inherit;
  font-size: .62rem;
  font-weight: 650;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.showcase-modal-viewtoggle button:hover { color: var(--text-primary); }
.showcase-modal-viewtoggle button.is-active { color: var(--text-primary); border-color: var(--rim-red); }
.showcase-modal-desc {
  max-width: 68ch;
  color: var(--text-primary);
  line-height: 1.7;
}
.showcase-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.35rem;
}
@media (max-width: 767px) {
  .showcase-modal {
    padding: max(.6rem, env(safe-area-inset-top, 0px)) max(.6rem, env(safe-area-inset-right, 0px)) max(.6rem, env(safe-area-inset-bottom, 0px)) max(.6rem, env(safe-area-inset-left, 0px));
    align-items: stretch;
  }
  .showcase-modal-dialog { width: 100%; max-height: none; padding: 1rem 1rem 1.25rem; }
  .showcase-modal-title { padding-right: 3rem; }
  .showcase-modal-media img { max-height: 52vh; max-height: 52dvh; }
  .showcase-modal-actions .button { flex: 1 1 100%; }
}

/* ==========================================================================
   OPENING-SEQUENZ — kurzer Eintritt in die VERSIVION-Welt
   ========================================================================== */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-950);
  transition: opacity .55s var(--ease-material);
}
/* Ohne JavaScript (oder vor der Modulausführung) garantiert unsichtbar —
   Autoren-display:flex würde das hidden-Attribut sonst aushebeln */
.intro-overlay[hidden] { display: none; }
.intro-overlay.is-done { opacity: 0; pointer-events: none; }
.intro-stage { position: relative; width: min(46vw, 14rem); aspect-ratio: 600 / 580; }
.intro-v { width: 100%; height: auto; }
.intro-v-path {
  stroke: rgba(243, 239, 232, .55);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.intro-overlay.is-live .intro-v-path { animation: intro-draw 1.15s var(--ease-material) .15s forwards; }
@keyframes intro-draw {
  to { stroke-dashoffset: 0; }
}
.intro-dot {
  position: absolute;
  left: 50%;
  top: 91%;
  width: 5px;
  height: 5px;
  translate: -50% -50%;
  border-radius: 50%;
  background: rgba(250, 249, 244, .95);
  box-shadow: 0 0 10px rgba(224, 90, 78, .55);
  opacity: 0;
  transform-origin: center;
}
.intro-overlay.is-live .intro-dot { animation: intro-dot .9s var(--ease-material) 1.1s forwards; }
@keyframes intro-dot {
  0% { opacity: 0; transform: scale(.4); }
  60% { opacity: 1; transform: scale(1.35); }
  100% { opacity: .95; transform: scale(1); }
}
/* Mikro-Veredelung 2: feiner Abschlussimpuls am Ende der Sequenz */
.intro-ring {
  position: absolute;
  left: 50%;
  top: 91%;
  width: 9px;
  height: 9px;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid rgba(224, 90, 78, .5);
  opacity: 0;
}
.intro-overlay.is-live .intro-ring { animation: intro-ring .7s var(--ease-material) 1.8s forwards; }
@keyframes intro-ring {
  0% { opacity: .8; transform: scale(.4); }
  100% { opacity: 0; transform: scale(3.2); }
}
.intro-pulses {
  position: absolute;
  left: 50%;
  bottom: -2.4rem;
  translate: -50% 0;
  display: flex;
  gap: .55rem;
}
.intro-pulses span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(224, 90, 78, .8);
  opacity: 0;
}
.intro-overlay.is-live .intro-pulses span { animation: intro-pulse .45s var(--ease-material) forwards; }
.intro-overlay.is-live .intro-pulses span:nth-child(1) { animation-delay: .35s; }
.intro-overlay.is-live .intro-pulses span:nth-child(2) { animation-delay: .55s; }
.intro-overlay.is-live .intro-pulses span:nth-child(3) { animation-delay: .75s; }
.intro-overlay.is-live .intro-pulses span:nth-child(4) { animation-delay: .95s; }
.intro-overlay.is-live .intro-pulses span:nth-child(5) { animation-delay: 1.15s; }
.intro-overlay.is-live .intro-pulses span:nth-child(6) { animation-delay: 1.35s; }
.intro-overlay.is-live .intro-pulses span:nth-child(7) { animation-delay: 1.55s; }
@keyframes intro-pulse {
  to { opacity: .9; }
}
.intro-skip {
  position: absolute;
  right: max(1.25rem, env(safe-area-inset-right, 0px));
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  min-height: 44px;
  padding: .5rem .9rem;
  background: none;
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  color: var(--text-muted);
  font: inherit;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.intro-skip:hover { color: var(--text-primary); border-color: var(--rim-red); }
/* Hero-Eingangsanimationen pausieren, bis das Intro beendet ist */
.js.intro-active .hero-eyebrow,
.js.intro-active .hero-intro,
.js.intro-active .hero-note,
.js.intro-active .hero-actions,
.js.intro-active .hero-meta,
.js.intro-active .hero-title-line .line-inner,
.js.intro-active .hero-accent-wipe,
.js.intro-active .hero-v,
.js.intro-active .hero-v-sheen,
.js.intro-active .wordmark { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .intro-overlay { display: none; }
}

/* ==========================================================================
   CHAKRA-SCROLLBAR & SCROLL-RESONANZ
   ========================================================================== */
/* Firefox: eleganter neutraler Fallback (kein Verlauf möglich) */
html { scrollbar-color: var(--red-600) var(--ink-950); }
/* Chromium/Safari: gedämpftes 7-stufiges Spektrum */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ink-950); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #9c3a33 0%, #a05a35 17%, #a58a3f 33%, #4f7a58 50%, #46708c 67%, #3f4e7e 83%, #6a4a7e 100%);
  border-radius: 6px;
  border: 2px solid var(--ink-950);
}
::-webkit-scrollbar-thumb:hover { border-width: 1px; }

.scroll-resonance {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3px;
  z-index: 90;
  pointer-events: none;
}
.scroll-resonance-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--scroll-progress, 0) * 100%);
  background: linear-gradient(180deg, #9c3a33 0%, #a05a35 17%, #a58a3f 33%, #4f7a58 50%, #46708c 67%, #3f4e7e 83%, #6a4a7e 100%);
  opacity: .38;
  transition: opacity .6s var(--ease-material);
}
.scroll-resonance.is-scrolling .scroll-resonance-fill { opacity: .75; }
@media (max-width: 767px), (pointer: coarse) {
  .scroll-resonance { display: none; }
}

/* Reduced Motion für Modal und Resonanz — bewusst NACH deren Basisregeln,
   damit die Quellreihenfolge die Deklarationen nicht aushebelt */
@media (prefers-reduced-motion: reduce) {
  .showcase-modal-dialog { transition: none; translate: 0 0; }
  .showcase-modal.is-open .showcase-modal-dialog::before { transition: none; }
  .showcase-modal-close, .showcase-modal-viewtoggle button { transition: none; }
  .scroll-resonance-fill { transition: none; }
}

/* ==========================================================================
   MOBILE EXPERIENCE (≤ 767px)
   Bewusst komponierte kompakte Fassung. Alle Regeln sind hier bzw. in den
   Basis-Definitionen (standardmäßig display:none) gekapselt — das
   freigegebene Desktop-Layout ab 1024px bleibt vollständig unverändert.
   ========================================================================== */

/* Leistungen: mobiler Aufklapp-Button (nur ≤767px sichtbar, JS-gesteuert) */
.service-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  align-self: flex-start;
  margin-top: .9rem;
  padding: .5rem .9rem;
  min-height: 44px;
  background: none;
  border: 1px solid var(--line-paper);
  border-radius: 2px;
  color: var(--text-ink);
  font: inherit;
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}
.service-toggle::after { content: "+"; color: var(--red-600); font-weight: 600; }
.service-card.is-open .service-toggle::after { content: "–"; }

/* Showcase: mobile Positionsanzeige des Scroll-Karussells */
.work-progress {
  display: none;
  align-items: center;
  gap: .6rem;
  margin-top: .9rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .3em;
  color: var(--text-muted);
}
.work-progress::before { content: ""; flex: 0 0 auto; width: 2rem; height: 1px; background: var(--line-red); }

@media (max-width: 767px) {
  :root { --header-h: 4rem; }

  /* Hintergrund-Scroll nur auf Mobil sperren, solange das Menü offen ist —
     ab 768px bleibt das freigegebene Verhalten (inkl. Scrollbar) unverändert */
  html.nav-locked, html.nav-locked body { overflow: hidden; }

  /* Safe-Areas an den Seiten (Geräte mit Notch im Querformat) */
  .site-header {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }

  /* --- Kompakter Sektionsrhythmus (ca. 64-88px) --- */
  .section, .signature { padding-block: clamp(4rem, 10vw, 5.5rem); }
  .section .eyebrow, .signature .eyebrow { margin-bottom: 1.25rem; }
  .section-title { margin-bottom: 1rem; }
  .eyebrow { letter-spacing: .3em; }
  .section-copy { font-size: 1.0625rem; line-height: 1.65; }

  /* --- Hero: Text zuerst, V als angeschnittenes Atmosphäre-Element unten --- */
  .hero { min-height: 88vh; min-height: 88svh; align-items: flex-start; }
  .hero-shell {
    padding-top: calc(var(--header-h) + 1.75rem);
    padding-bottom: clamp(6.5rem, 40vw, 10rem);
  }
  .hero-eyebrow { margin-bottom: 1.1rem; }
  .hero-intro { margin-top: 1.1rem; font-size: 1.0625rem; }
  .hero-note { margin-top: .75rem; }
  .hero-actions { margin-top: 1.4rem; }
  .hero-v {
    top: auto;
    /* oberhalb des hero-meta-Bands (inkl. Safe-Area) verankern */
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    right: -18%;
    width: clamp(11.5rem, 54vw, 16rem);
    opacity: .5;
    transform: none;
  }
  .hero-sirius { left: 12%; top: 13%; }

  /* --- Leistungen: kompakte Karten mit Aufklapp-Details --- */
  .services-grid { gap: .9rem; margin-top: 1.5rem; }
  .service-card { padding: 1.2rem 1.1rem 1.3rem; }
  .service-index { font-size: 1.9rem; }
  .service-title { margin-top: .5rem; font-size: 1.4rem; }
  .service-copy { margin-top: .6rem; }
  .service-list { margin-top: .6rem; }
  .service-list li { padding: .32rem 0 .32rem 1.2rem; font-size: .95rem; }
  .service-list li::before { top: .95rem; }
  .js .service-toggle { display: inline-flex; }
  .js .service-card:not(.is-open) .service-list { display: none; }
  .services-note { margin-top: 1.5rem; font-size: 1rem; }

  /* --- Showcase: mobile Karussell-Anpassungen --- */
  .work-gallery { margin-top: 1.5rem; }
  .work-grid {
    gap: .9rem;
    margin-inline: calc(-1 * var(--shell-pad));
    padding-inline: var(--shell-pad);
  }
  .work-card { flex: 0 0 84%; scroll-snap-align: center; }
  .work-media { aspect-ratio: 2 / 1; }
  .work-body { padding: 1rem 1.05rem 1.2rem; }
  .work-copy { font-size: .95rem; margin-bottom: .9rem; }
  .work-note { margin-top: 1.4rem; font-size: .95rem; }

  /* --- Signatur: 2×2-Raster, gemeinsam auf einem Bildschirmbereich --- */
  .stanza-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; }
  .stanza { padding-top: .8rem; padding-left: .7rem; }
  .stanza-svg { width: 100%; margin-bottom: .45rem; }
  .stanza-word { font-size: 1.2rem; letter-spacing: .12em; }
  .stanza-copy { margin-top: .25rem; font-size: .9rem; line-height: 1.5; }
  .signature-line { margin-top: 1.75rem; font-size: 1.25rem; }

  /* --- Ablauf: kompakte vertikale Timeline --- */
  .process-list {
    margin-top: 1.25rem;
    border-left: 1px solid rgba(196, 58, 50, .3);
    padding-left: 1rem;
  }
  .process-step {
    grid-template-columns: auto 1fr;
    column-gap: .7rem;
    row-gap: .15rem;
    padding-block: .75rem;
    border-top: 0;
  }
  .process-step:last-child { border-bottom: 0; }
  .process-index { grid-column: 1; grid-row: 1; font-size: 1.25rem; line-height: 1.4; }
  .process-title { grid-column: 2; grid-row: 1; align-self: center; font-size: .92rem; letter-spacing: .14em; }
  .process-copy { grid-column: 2; }

  /* --- Über VERSIVION: Text zuerst, kleines V danach --- */
  .person-shell { gap: 1.75rem; }
  .person-visual { order: 2; }
  .person-plate { max-width: 10.5rem; padding: 12%; }
  .person-fields { margin-top: 1rem; letter-spacing: .2em; line-height: 2; }

  /* --- Kontakt: klarer Abschluss, Buttons in voller Breite --- */
  .contact-line { height: 5.5rem; margin-bottom: 1rem; }
  .contact-actions { margin-top: 1.25rem; }
  .contact-actions .button { flex: 1 1 100%; }
  .contact-data { margin-top: 1.75rem; }
  .contact-row { padding: .7rem 0; }
  .contact-note { margin-top: 1.5rem; }

  /* --- Footer: kompakt, Fibonacci kleiner und transparenter --- */
  .site-footer { padding-block: 2.75rem 3rem; }
  .footer-shell { gap: 1rem; }
  .footer-claim { margin-top: .9rem; padding-top: 1.25rem; }
  .fib-svg {
    width: min(64vw, 17rem);
    --fib-alpha: .55;
    opacity: .55;
    margin-right: -2.5rem;
    margin-bottom: -2rem;
  }
  .footer-fib-echoes { display: none; }
}

/* Sehr schmale Geräte (320-399px): Header einzeilig, Hero über der Falz */
@media (max-width: 399px) {
  .wordmark { font-size: .85rem; letter-spacing: .3em; --wm-track: .3em; }
  .hero-shell { padding-top: calc(var(--header-h) + 1rem); }
  .hero-eyebrow { margin-bottom: .75rem; }
  .hero-note { margin-top: .5rem; }
  .hero-actions { margin-top: 1rem; }
  .nav-toggle { min-width: 44px; justify-content: center; }
  .nav-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}