/* ==========================================================================
   Medusa Design – Gestaltung
   Farben ganz oben ändern (--gold = Silber-Akzent, Name aus der alten Fassung beibehalten)
   ========================================================================== */

@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/bodoni-moda-latin-opsz-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: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/bodoni-moda-latin-ext-opsz-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url("../fonts/bodoni-moda-latin-opsz-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; }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url("../fonts/bodoni-moda-latin-ext-opsz-italic.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  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: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
  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: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
  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: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/manrope-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: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --grund: #0B0B0C;
  --grund-2: #111114;
  --flaeche: #16161A;
  --text: #E7EAF0;
  --text-2: #9AA0AA;
  --text-3: #6B707A;
  --linie: rgba(231, 234, 240, .12);
  --gold: #C9D0DC;
  --gold-hell: #EEF1F6;
  --hell: #E9EBEF;
  --hell-text: #121214;
  --hell-text-2: #5E636C;
  --serif: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --zier: "Cormorant Garamond", "Garamond", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rand: clamp(20px, 5vw, 72px);
  --breite: 1320px;
  --kurve: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font-family: var(--sans); font-size: 17px; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip;
}
/* feines Filmkorn */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
em { font-style: italic; color: var(--gold-hell); }
::selection { background: var(--gold); color: var(--grund); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--gold); color: var(--grund); padding: 10px 16px; border-radius: 6px; }
.skip:focus { left: 8px; }

/* Platzhalter, die noch ersetzt werden müssen (vor dem Veröffentlichen entfernen: Klasse "ph") */
.ph { text-decoration: underline dashed rgba(211, 216, 226, .7); text-underline-offset: 4px; }

/* ---------- Typografie ---------- */
.auge {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 22px; font-weight: 600;
  display: flex; align-items: center; gap: 14px;
}
.auge::before { content: ""; width: 28px; height: 1px; background: currentColor; }
h1, h2, h3 { font-weight: 400; margin: 0; }
.gross, .riesig, .mittel, .hero__titel, .projekt__titel, .variante__titel {
  font-family: var(--serif); letter-spacing: -.01em; line-height: 1.02;
}
.gross { font-size: clamp(38px, 5.2vw, 80px); }
.mittel { font-size: clamp(32px, 3.8vw, 54px); margin-bottom: 24px; }
.riesig { font-size: clamp(40px, 6.6vw, 108px); line-height: 1.02; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--gold); color: #0B0B0C; font-weight: 600; font-size: 15px; letter-spacing: .01em;
  padding: 15px 26px; border-radius: 999px; border: 1px solid var(--gold);
  transition: background .35s var(--kurve), color .35s var(--kurve), transform .35s var(--kurve), box-shadow .35s var(--kurve);
}
.knopf:hover { background: var(--gold-hell); transform: translateY(-2px); box-shadow: 0 14px 40px -12px rgba(211, 216, 226, .55); }
.knopf span { transition: transform .35s var(--kurve); }
.knopf:hover span { transform: translateX(4px); }
.knopf--klein { padding: 10px 18px; font-size: 14px; }
.knopf--gross { padding: 19px 34px; font-size: 16px; }
.knopf--rand { background: transparent; color: var(--text); border-color: var(--linie); }
.knopf--rand:hover { background: transparent; color: var(--gold-hell); border-color: var(--gold); box-shadow: none; }
.link-pfeil {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 15px;
  padding-bottom: 4px; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat;
  transition: background-size .45s var(--kurve), color .3s;
}
.link-pfeil:hover { color: var(--gold-hell); background-size: 0 1px; background-position: 100% 100%; }

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--rand); transition: padding .4s var(--kurve), background .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.kopf.ist-gescrollt {
  padding-top: 14px; padding-bottom: 14px; background: rgba(11, 11, 12, .72);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-color: var(--linie);
}
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marke__zeichen {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold);
  display: grid; place-items: center; font-family: var(--serif); font-size: 18px; letter-spacing: .02em;
}
.marke__name .ph { text-underline-offset: 2px; }
.marke__name { display: flex; flex-direction: column; gap: 3px; line-height: 1.15; font-weight: 600; font-size: 15px; }
.marke__zusatz { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); font-weight: 500; }
.nav { display: flex; align-items: center; gap: 34px; font-size: 14px; }
.nav a:not(.knopf) { text-decoration: none; color: var(--text-2); transition: color .3s; }
.nav a:not(.knopf):hover { color: var(--text); }
.menue-knopf { display: none; }
.mobil-nav { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 40px;
  padding: 140px var(--rand) 110px; max-width: 1600px; margin: 0 auto;
}
.hero::before {
  content: ""; position: absolute; inset: -10% -20% auto auto; width: 70vw; height: 70vw; max-width: 1000px; max-height: 1000px; z-index: -1;
  background: radial-gradient(closest-side, rgba(211, 216, 226, .16), transparent 70%); filter: blur(10px);
}
.hero__titel { font-size: clamp(56px, 8.2vw, 136px); line-height: .96; margin-bottom: 34px; }
.hero__titel .zeile { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__titel .zeile > span { display: block; transform: translateY(105%); transition: transform 1.2s var(--kurve); }
.hero__titel .zeile:nth-child(2) > span { transition-delay: .12s; }
.ist-geladen .hero__titel .zeile > span { transform: none; }
.hero__lead { max-width: 520px; color: var(--text-2); font-size: 18px; margin: 0 0 40px; }
.hero__aktionen { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }

.hero__buehne { position: relative; height: min(64vh, 620px); perspective: 1600px; }
.facher { pointer-events: none; position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s var(--kurve); }
.facher__blatt {
  position: absolute; margin: 0; padding: 0; width: 78%; border-radius: 12px; overflow: hidden; background: var(--flaeche);
  border: 1px solid rgba(231, 234, 240, .14); cursor: pointer; display: block; pointer-events: auto; text-align: left; color: inherit; font: inherit;
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .4);
  --dx: 0px; --dy: 30px; --heben: 0px; --z: var(--z0);
  transform: translate3d(var(--dx), calc(var(--dy) - var(--heben)), var(--z)) rotateY(-14deg) rotateX(4deg);
  opacity: 0; transition: opacity 1.2s var(--kurve), transform .9s var(--kurve), box-shadow .5s, border-color .5s;
}
.facher__blatt img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; }
.facher__blatt--1 { top: 0; left: 24%; --z0: -160px; }
.facher__blatt--2 { top: 26%; left: 0; --z0: -40px; }
.facher__blatt--3 { top: 48%; left: 20%; --z0: 60px; }
.ist-geladen .facher__blatt { opacity: 1; --dy: 0px; }
.facher__blatt:hover, .facher__blatt:focus-visible { --heben: 22px; --z: 160px; border-color: rgba(211, 216, 226, .7); box-shadow: 0 60px 110px -30px rgba(0, 0, 0, .85), 0 0 60px -10px rgba(211, 216, 226, .35); z-index: 5; }
/* Fährt man mit der Maus über einen anderen Bildschirm, tritt ein noch fokussierter zurück */
.facher:has(.facher__blatt:hover) .facher__blatt:not(:hover) { --heben: 0px; --z: var(--z0); border-color: rgba(231, 234, 240, .14); box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .4); }
.facher:has(.facher__blatt:hover) .facher__blatt:not(:hover) .facher__label { opacity: 0; }
.facher__label {
  position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  background: rgba(11, 11, 12, .82); color: var(--gold-hell); border: 1px solid rgba(211, 216, 226, .5); backdrop-filter: blur(6px);
  font-size: 13px; font-weight: 600; letter-spacing: .04em; padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  transition: opacity .4s, transform .4s var(--kurve);
}
.facher__blatt:hover .facher__label, .facher__blatt:focus-visible .facher__label { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .facher__label { opacity: 1; transform: translate(-50%, 0); font-size: 11px; padding: 6px 12px; bottom: 10px; } .facher__blatt--1 .facher__label, .facher__blatt--2 .facher__label { display: none; } }

/* Großansicht */
.vorschau {
  width: min(1240px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; padding: clamp(18px, 3vw, 34px);
  border: 1px solid var(--linie); border-radius: 22px; background: #121215; color: var(--text); overflow: auto;
}
.vorschau::backdrop { background: rgba(4, 4, 5, .82); backdrop-filter: blur(8px); }
.vorschau[open] { animation: aufgehen .5s var(--kurve); }
@keyframes aufgehen { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.vorschau__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 18px; }
.vorschau__meta { margin: 0 0 4px; color: var(--gold); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
.vorschau__titel { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 46px); line-height: 1.05; }
.vorschau__zu, .vorschau__pfeil {
  flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linie); background: transparent; color: var(--text);
  font-size: 22px; line-height: 1; cursor: pointer; transition: border-color .3s, color .3s;
}
.vorschau__zu { font-size: 28px; }
.vorschau__zu:hover, .vorschau__pfeil:hover { border-color: var(--gold); color: var(--gold-hell); }
.vorschau__browser { width: min(100%, calc((100vh - 290px) * 1.6)); margin: 0 auto; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); }
.vorschau__browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.vorschau__fuss { flex-wrap: wrap; width: min(100%, calc((100vh - 290px) * 1.6)); margin-inline: auto; display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.vorschau__punkte { display: flex; gap: 8px; }
.vorschau__punkte button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: var(--text-3); cursor: pointer; transition: background .3s, transform .3s; }
.vorschau__punkte button[aria-current="true"] { background: var(--gold); transform: scale(1.3); }
.vorschau__demo { margin-left: auto; white-space: nowrap; }

.leiste { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #1E1E23; border-bottom: 1px solid rgba(0, 0, 0, .4); }
.leiste i { width: 8px; height: 8px; border-radius: 50%; background: rgba(231, 234, 240, .18); }
.leiste span { margin-left: 14px; font-size: 11px; color: var(--text-3); letter-spacing: .02em; }

.scroll-hinweis {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--text-3); text-decoration: none;
}
.scroll-hinweis i { width: 1px; height: 44px; background: linear-gradient(var(--gold), transparent); animation: tropfen 2.4s var(--kurve) infinite; transform-origin: top; }
@keyframes tropfen { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Laufband ---------- */
.band { border-block: 1px solid var(--linie); overflow: hidden; padding: 22px 0; }
.band__spur { display: flex; width: max-content; gap: 34px; align-items: center; animation: laufen 48s linear infinite; }
.band__spur span { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); white-space: nowrap; color: var(--text); }
.band__spur b { color: var(--gold); font-size: 14px; font-weight: 400; }
@keyframes laufen { to { transform: translateX(-50%); } }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: clamp(100px, 14vw, 180px) var(--rand); max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; }
.abschnitt__kopf { max-width: 900px; margin-bottom: clamp(60px, 8vw, 110px); }
.abschnitt__kopf .gross { margin-bottom: 28px; }
.abschnitt__lead { color: var(--text-2); font-size: 18px; max-width: 620px; margin: 0; }

/* ---------- Projekte ---------- */
.projekt {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center;
  padding-block: clamp(50px, 7vw, 100px); border-top: 1px solid var(--linie);
}
.projekt--gespiegelt .projekt__medien { order: 2; }
.projekt__medien { position: relative; padding-bottom: 8%; }
.browser {
  border-radius: 14px; overflow: hidden; background: var(--flaeche); border: 1px solid rgba(231, 234, 240, .12);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9), 0 0 120px -40px var(--akzent-projekt);
}
.verwandlung { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.verwandlung img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.verwandlung__b { opacity: var(--p, 0); }
.handy {
  position: absolute; right: -4%; bottom: 0; width: 23%; border-radius: 22px; overflow: hidden; background: #000;
  border: 5px solid #1C1C21; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(231, 234, 240, .12);
}
.projekt--gespiegelt .handy { right: auto; left: -4%; }
.handy img { aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; width: 100%; }

.projekt__meta { display: flex; align-items: center; gap: 14px; color: var(--text-2); font-size: 13px; letter-spacing: .06em; margin: 0 0 18px; }
.projekt__nr { font-family: var(--serif); color: var(--gold); font-size: 20px; letter-spacing: 0; }
.projekt__titel { font-size: clamp(40px, 4.4vw, 64px); margin-bottom: 10px; }
.projekt__satz { font-family: var(--serif); font-style: italic; color: var(--gold-hell); font-size: clamp(21px, 1.9vw, 26px); line-height: 1.3; margin: 0 0 22px; }
.projekt__text > p:not(.projekt__meta):not(.projekt__satz):not(.schilder) { color: var(--text-2); margin: 0 0 24px; }
.haken { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; }
.haken li { position: relative; padding-left: 26px; font-size: 15.5px; }
.haken li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 0; border-top: 1px solid var(--gold); }
.schilder { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.schild { font-size: 12px; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linie); color: var(--text-2); }
.schild--gold { border-color: rgba(211, 216, 226, .5); color: var(--gold-hell); background: rgba(211, 216, 226, .08); }
.schild--hell { border-color: rgba(231, 234, 240, .35); color: var(--text); }

/* ---------- Vorher / Nachher (läuft automatisch) ---------- */
.vn__reiter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 26px; }
.vn__reiter button {
  position: relative; overflow: hidden; text-align: left; font: inherit; font-weight: 600; font-size: 16px; color: var(--text-2); cursor: pointer;
  background: transparent; border: 1px solid var(--linie); border-radius: 14px; padding: 16px 20px 18px;
  display: flex; flex-direction: column; gap: 4px; transition: color .3s, border-color .3s, background .3s;
}
.vn__reiter small { font-weight: 400; font-size: 12.5px; color: var(--text-3); }
.vn__reiter button:hover { color: var(--text); border-color: rgba(211, 216, 226, .45); }
.vn__reiter button[aria-selected="true"] { color: var(--text); border-color: rgba(211, 216, 226, .6); background: rgba(211, 216, 226, .06); }
.vn__reiter button[aria-selected="true"] small { color: var(--gold); }
/* Fortschrittsbalken: zeigt, wann das nächste Projekt kommt */
.vn__fortschritt { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(var(--f, 0)); }
.vn__buehne { box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9), 0 0 120px -50px rgba(211, 216, 226, .5); }
.vn__bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.vn__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vn__alt { clip-path: inset(0 0 0 var(--pos)); filter: saturate(.85); }
.vn__bild::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; pointer-events: none;
  background: linear-gradient(transparent, var(--gold-hell) 15%, var(--gold) 85%, transparent);
  box-shadow: 0 0 24px 4px rgba(211, 216, 226, .55); opacity: var(--linie-sichtbar, 0); transition: opacity .25s;
}
.vn__bild.ist-im-wechsel::after { --linie-sichtbar: 1; }
.vn__bild.ist-umschalten img { opacity: 0; transition: opacity .25s; }
.vn__bild img { transition: opacity .35s; }
.vn__marke {
  position: absolute; bottom: 16px; left: 16px; z-index: 1; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px; background: rgba(11, 11, 12, .8); backdrop-filter: blur(6px); pointer-events: none;
  transition: opacity .4s, transform .4s var(--kurve);
}
.vn__marke--alt { color: var(--text-2); }
.vn__marke--neu { color: var(--gold-hell); border: 1px solid rgba(211, 216, 226, .5); opacity: 0; transform: translateY(-6px); }
.vn__bild.ist-neu .vn__marke--alt { opacity: 0; transform: translateY(-6px); }
.vn__bild.ist-neu .vn__marke--neu { opacity: 1; transform: none; }
.vn__info { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; margin-top: 30px; }
.vn__info .haken { margin: 0; }

/* ---------- Varianten (heller Abschnitt) ---------- */
.abschnitt--hell {
  max-width: none; background: var(--hell); color: var(--hell-text);
  padding-inline: max(var(--rand), calc((100vw - var(--breite)) / 2));
}
.abschnitt--hell em { color: #4A5160; }
.abschnitt--hell .auge { color: #4A5160; }
.abschnitt--hell .abschnitt__lead { color: var(--hell-text-2); }
.abschnitt--hell ::selection { background: var(--hell-text); color: var(--hell); }
.varianten { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.variante {
  display: flex; flex-direction: column; padding: clamp(32px, 4vw, 56px); border-radius: 20px;
  border: 1px solid rgba(18, 18, 20, .14); background: #F4F5F7;
}
.variante p { color: var(--hell-text-2); margin: 0 0 28px; }
.variante__name { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--hell-text) !important; margin-bottom: 18px !important; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.variante__marke { letter-spacing: .06em; text-transform: none; font-weight: 500; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(211, 216, 226, .18); color: var(--gold-hell); }
.variante__titel { font-size: clamp(34px, 3.4vw, 50px); margin-bottom: 18px; }
.variante .haken { margin-bottom: 36px; }
.variante .haken li::before { border-color: #4A5160; }
.variante__preis { margin-top: auto !important; font-size: 14px; letter-spacing: .02em; padding-top: 22px; border-top: 1px solid rgba(18, 18, 20, .12); }
.variante__betrag { display: block; font-family: var(--serif); font-size: clamp(40px, 3.6vw, 54px); line-height: 1; letter-spacing: -.01em; color: var(--hell-text); margin-bottom: 8px; }
.variante--signature .variante__betrag { color: var(--gold-hell); }
.variante .knopf { align-self: flex-start; }
.pflege {
  margin-top: 28px; padding: clamp(32px, 4vw, 52px); border-radius: 20px; border: 1px dashed rgba(18, 18, 20, .25);
  display: grid; grid-template-columns: 1.15fr 1fr auto; gap: clamp(28px, 4vw, 60px); align-items: center;
}
.pflege p { color: var(--hell-text-2); margin: 0; }
.pflege .variante__name { margin-bottom: 14px; }
.pflege .variante__titel { font-size: clamp(30px, 2.8vw, 42px); margin-bottom: 14px; }
.pflege__marke { letter-spacing: .06em; text-transform: none; font-weight: 500; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(18, 18, 20, .2); color: var(--hell-text-2); }
.pflege__liste { margin: 0; }
.pflege .haken li::before { border-color: #4A5160; }
.pflege__preis { text-align: right; white-space: nowrap; color: var(--hell-text-2); font-size: 14px; }
.pflege__preis .variante__betrag { margin-bottom: 6px; }
.variante .knopf--rand { color: var(--hell-text); border-color: rgba(18, 18, 20, .25); }
.variante .knopf--rand:hover { color: #4A5160; border-color: #4A5160; }
.variante--signature { background: var(--grund); color: var(--text); border-color: transparent; position: relative; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(11, 11, 12, .55); }
.variante--signature::before { content: ""; position: absolute; inset: -40% -30% auto auto; width: 80%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(211, 216, 226, .25), transparent); pointer-events: none; }
.variante--signature p { color: var(--text-2); }
.variante--signature .variante__name { color: var(--text) !important; }
.variante--signature .haken li::before { border-color: var(--gold); }
.variante--signature .variante__preis { border-color: var(--linie); }

/* ---------- Ablauf ---------- */
.schritte { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--linie); }
.schritt { padding: 40px 32px 10px 0; position: relative; }
.schritt + .schritt { padding-left: 32px; border-left: 1px solid var(--linie); }
.schritt__nr { font-family: var(--serif); font-size: 64px; line-height: 1; color: var(--gold); display: block; margin-bottom: 26px; }
.schritt h3 { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.schritt p { color: var(--text-2); font-size: 15.5px; margin: 0; }

/* ---------- Über mich ---------- */
.ueber { padding-top: 0; display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 6vw, 100px); align-items: start; }
.ueber .mittel { margin-bottom: 0; }
.ueber__text p:first-child { margin-top: 0; }
.ueber__bild {
  aspect-ratio: 4 / 5; border-radius: 20px; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 30% 20%, #24242A, var(--grund-2) 70%); border: 1px solid var(--linie);
  display: grid; place-items: center;
}
.ueber__bild span { font-family: var(--serif); font-size: clamp(110px, 14vw, 200px); color: var(--gold); opacity: .85; font-style: italic; }
.ueber__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ueber__text p:not(.auge) { color: var(--text-2); font-size: 18px; max-width: 560px; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--linie); max-width: 980px; }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  list-style: none; cursor: pointer; padding: 28px 60px 28px 0; position: relative;
  font-family: var(--serif); font-size: clamp(22px, 2.3vw, 32px); line-height: 1.25; transition: color .3s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-hell); }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-weight: 300;
  font-size: 30px; color: var(--gold); transition: transform .4s var(--kurve);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0; padding: 0 60px 30px 0; color: var(--text-2); max-width: 720px; }

/* ---------- Kontakt ---------- */
.kontakt {
  padding: clamp(110px, 16vw, 220px) var(--rand); text-align: center; position: relative; overflow: hidden;
  border-top: 1px solid var(--linie);
}
.kontakt::before {
  content: ""; position: absolute; left: 50%; top: 55%; width: 90vw; max-width: 1200px; aspect-ratio: 2 / 1; transform: translate(-50%, -50%); z-index: -1;
  background: radial-gradient(closest-side, rgba(211, 216, 226, .18), transparent);
}
.kontakt .auge { justify-content: center; }
.kontakt .riesig { margin-bottom: 30px; }
.kontakt__lead { color: var(--text-2); font-size: 18px; max-width: 560px; margin: 0 auto 44px; }
.kontakt__wege { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }
.kontakt__daten { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; color: var(--text-2); font-size: 15px; margin: 0; }
.kontakt__daten a { text-decoration: none; }
.kontakt__daten a:hover { color: var(--gold-hell); }
.kontakt__daten a:not(:hover) { color: var(--text); }

/* ---------- Anfrage-Assistent ---------- */
.anfrage {
  display: grid; grid-template-columns: 260px 1fr; gap: 28px; max-width: 1100px; margin: 0 auto 40px; text-align: left;
}
.anfrage > * { min-width: 0; }
.anfrage__schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.anfrage__schritte li {
  display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; align-items: center; padding: 14px 16px;
  border: 1px solid transparent; border-radius: 14px; color: var(--text-3); transition: color .3s, border-color .3s, background .3s;
}
.anfrage__schritte span {
  grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid currentColor;
  display: grid; place-items: center; font-family: var(--serif); font-size: 17px;
}
.anfrage__schritte b { font-weight: 600; font-size: 15px; }
.anfrage__schritte small { font-size: 12.5px; }
.anfrage__schritte li.ist-aktiv { color: var(--text); border-color: var(--linie); background: rgba(231, 234, 240, .03); }
.anfrage__schritte li.ist-aktiv span { color: var(--gold); border-color: var(--gold); }
.anfrage__schritte li.ist-fertig { color: var(--text-2); cursor: pointer; }
.anfrage__schritte li.ist-fertig span { background: var(--gold); border-color: var(--gold); color: var(--grund); }
.anfrage__karte {
  padding: clamp(26px, 4vw, 48px); border-radius: 22px; border: 1px solid var(--linie);
  background: linear-gradient(160deg, rgba(30, 30, 36, .75), rgba(18, 18, 21, .85));
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .9); display: flex; flex-direction: column; min-height: 440px;
}
.anfrage__seite { border: 0; margin: 0; padding: 0; min-width: 0; }
.anfrage__seite legend { font-family: var(--serif); font-size: clamp(30px, 3vw, 42px); line-height: 1.1; margin-bottom: 8px; padding: 0; }
.anfrage__hinweis { color: var(--text-3); font-size: 14px; margin: 0 0 22px; }
.anfrage__hinweis i, .feld i { font-style: normal; color: var(--text-3); }
.anfrage__hinweis--klein { font-size: 13px; margin: 18px 0 0; }
.wahl { display: grid; gap: 12px; }
.wahl--paket { grid-template-columns: repeat(3, 1fr); }
.wahl--klein { grid-template-columns: repeat(3, 1fr); }
.wahl__feld { position: relative; cursor: pointer; }
.wahl__feld input { position: absolute; opacity: 0; pointer-events: none; }
.wahl__feld > span {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 20px 20px 52px; position: relative;
  border: 1px solid var(--linie); border-radius: 14px; transition: border-color .3s, background .3s;
}
.wahl--klein .wahl__feld > span { padding: 14px 16px 14px 46px; }
.wahl__feld > span::before {
  content: ""; position: absolute; left: 20px; top: 22px; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--text-3); transition: border-color .3s, box-shadow .3s, background .3s;
}
.wahl--klein .wahl__feld > span::before { left: 16px; top: 50%; transform: translateY(-50%); border-radius: 5px; }
.wahl__feld b { font-weight: 600; font-size: 15.5px; }
.wahl__feld small { color: var(--text-2); font-size: 13.5px; line-height: 1.45; }
.wahl__feld:hover > span { border-color: rgba(211, 216, 226, .45); }
.wahl__feld input:checked + span { border-color: var(--gold); background: rgba(211, 216, 226, .08); }
.wahl__feld input:checked + span::before { border-color: var(--gold); background: var(--gold); box-shadow: inset 0 0 0 4px #16161A; }
.wahl--klein .wahl__feld input:checked + span::before { box-shadow: inset 0 0 0 3px #16161A; }
.wahl__feld input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0 26px; }
.feld { display: grid; gap: 8px; font-size: 14px; color: var(--text-2); }
.feld--breit { grid-column: 1 / -1; }
.feld input, .feld textarea {
  font: inherit; font-size: 16px; color: var(--text); background: rgba(11, 11, 12, .6);
  border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; resize: vertical; transition: border-color .3s;
}
.feld input::placeholder, .feld textarea::placeholder { color: var(--text-3); }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--gold); }
.feld .ist-falsch { border-color: #d9734f; }
.anfrage__zusammenfassung { border-top: 1px solid var(--linie); padding-top: 18px; display: grid; gap: 6px; font-size: 14px; color: var(--text-2); }
.anfrage__zusammenfassung:empty { display: none; }
.anfrage__zusammenfassung b { color: var(--text); font-weight: 600; }
.anfrage__fehler { color: #e28c6c; font-size: 14px; margin: 18px 0 0; min-height: 1.4em; }
.anfrage__leiste { margin-top: auto; padding-top: 18px; display: flex; justify-content: flex-end; align-items: center; gap: 24px; }
.anfrage__zurueck { margin-right: auto; border: 0; background-color: transparent; color: var(--text-2); cursor: pointer; font: inherit; font-weight: 600; font-size: 15px; }
button.knopf { cursor: pointer; font-family: inherit; }

/* ---------- Fuß ---------- */
.fuss {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  padding: 30px var(--rand); border-top: 1px solid var(--linie); color: var(--text-2); font-size: 14px;
}
.fuss p { margin: 0; }
.fuss nav { display: flex; gap: 26px; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--text); }

/* ---------- Einblenden beim Scrollen ---------- */
.js .zeigen { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--kurve), transform 1.1s var(--kurve); }
.js .zeigen.ist-sichtbar { opacity: 1; transform: none; }
.js .hero .zeigen { transition-delay: .35s; }
.js .hero .hero__aktionen { transition-delay: .5s; }

/* ---------- Rechtsseiten ---------- */
.recht { max-width: 820px; margin: 0 auto; padding: 160px var(--rand) 120px; }
.recht h1 { font-family: var(--serif); font-size: clamp(48px, 6vw, 80px); line-height: 1; margin-bottom: 40px; }
.recht h2 { font-family: var(--serif); font-size: 30px; margin: 46px 0 12px; }
.recht p, .recht li { color: var(--text-2); }
.recht a { color: var(--gold-hell); }
.recht .hinweis { border: 1px dashed rgba(211, 216, 226, .6); border-radius: 12px; padding: 18px 22px; color: var(--gold-hell); }

/* ---------- Responsiv ---------- */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; padding-top: 130px; gap: 30px; }
  .hero__buehne { height: 54vw; max-height: 520px; margin-top: 20px; }
  .projekt, .projekt--gespiegelt { grid-template-columns: 1fr; }
  .projekt--gespiegelt .projekt__medien { order: 0; }
  .projekt__medien { max-width: 820px; }
  .schritte { grid-template-columns: 1fr 1fr; }
  .schritt:nth-child(3) { padding-left: 0; border-left: 0; }
  .schritt:nth-child(n+3) { border-top: 1px solid var(--linie); margin-top: 30px; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .menue-knopf {
    display: grid; place-content: center; gap: 7px; width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--linie); background: rgba(11, 11, 12, .5); cursor: pointer; padding: 0;
  }
  .menue-knopf span { display: block; width: 18px; height: 1.5px; background: var(--text); transition: transform .35s var(--kurve); }
  .menue-knopf[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
  .menue-knopf[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
  .mobil-nav {
    display: flex; position: fixed; inset: 0; z-index: 40; flex-direction: column; justify-content: center; gap: 8px;
    padding: 100px var(--rand) 60px; background: rgba(11, 11, 12, .97);
  }
  .mobil-nav[hidden] { display: none; }
  .mobil-nav a { font-family: var(--serif); font-size: 46px; text-decoration: none; line-height: 1.25; }
  .mobil-nav a:last-child { color: var(--gold-hell); font-style: italic; }
  .varianten { grid-template-columns: 1fr; }
  .pflege { grid-template-columns: 1fr; gap: 24px; }
  .pflege__preis { text-align: left; }
  .anfrage { grid-template-columns: 1fr; }
  .anfrage__schritte { grid-template-columns: repeat(4, 1fr); }
  .anfrage__schritte li { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 10px 4px; gap: 6px; }
  .anfrage__schritte span { grid-row: auto; }
  .anfrage__schritte small { display: none; }
  .anfrage__schritte b { font-size: 13px; }
  .wahl--paket, .wahl--klein { grid-template-columns: 1fr; }
  .ueber { grid-template-columns: 1fr; }
  .ueber__bild { max-width: 360px; aspect-ratio: 1; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero { padding-bottom: 90px; }
  .hero__buehne { height: 70vw; }
  .facher__blatt { width: 84%; }
  .hero__lead, .abschnitt__lead, .kontakt__lead, .ueber__text p:not(.auge) { font-size: 16.5px; }
  .handy { width: 30%; right: -2%; border-width: 3px; border-radius: 16px; }
  .projekt--gespiegelt .handy { left: auto; right: -2%; }
  .projekt__medien { padding-bottom: 14%; }
  .schritte { grid-template-columns: 1fr; }
  .schritt, .schritt + .schritt { padding: 30px 0 0; border-left: 0; }
  .schritt + .schritt { border-top: 1px solid var(--linie); margin-top: 30px; }
  .schritt__nr { font-size: 48px; margin-bottom: 16px; }
  .faq summary { padding-right: 44px; }
  .faq details p { padding-right: 0; }
  .knopf--gross { width: 100%; justify-content: center; }
  .felder { grid-template-columns: 1fr; }
  .vn__reiter { gap: 6px; }
  .vn__reiter small { display: none; }
  .vn__reiter button { padding: 10px 10px; font-size: 13px; line-height: 1.3; }
  .vn__marke { bottom: 10px; left: 10px; font-size: 10px; padding: 5px 9px; }
  .anfrage__karte { min-height: 0; }
  .anfrage__leiste { gap: 16px; }
  .scroll-hinweis { display: none; }
  .fuss { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .zeigen { opacity: 1; transform: none; }
  .hero__titel .zeile > span { transform: none; }
}

/* ==========================================================================
   MEDUSA – neue Bausteine
   ========================================================================== */
.gross, .riesig, .mittel, .variante__titel, .medusa__satz { font-optical-sizing: auto; font-weight: 400; letter-spacing: 0; }
em { font-family: var(--serif); font-style: italic; color: var(--gold-hell); }

/* Firmenname: reines Weiß, gestochen scharf */
.chroma { color: #FFFFFF; text-shadow: 0 0 60px rgba(255, 255, 255, .12); }

/* Ladebildschirm */
.lader {
  position: fixed; inset: 0; z-index: 300; background: var(--grund); display: none; place-content: center; justify-items: center; gap: 14px;
  transition: clip-path 1.1s var(--kurve), opacity .4s .9s; clip-path: inset(0 0 0 0);
}
.js .lader { display: grid; }
.lader.ist-fertig { clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none; }
.lader__kopf { width: 92px; height: 92px; border-radius: 50%; opacity: .9; animation: atmen 2.4s ease-in-out infinite; }
@keyframes atmen { 50% { transform: scale(1.05); opacity: 1; } }
.lader__marke { margin: 0; font-family: var(--serif); font-size: 15px; letter-spacing: .6em; padding-left: .6em; color: var(--text-2); }
.lader__zahl { margin: 0; font-family: var(--serif); font-size: clamp(64px, 10vw, 120px); line-height: 1; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.lader__balken { width: min(280px, 60vw); height: 1px; background: var(--linie); overflow: hidden; }
.lader__balken i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); transition: transform .2s; }

/* Kopfzeile mit Medusa-Kopf */
.marke__kopf { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(211, 216, 226, .25); }
.marke__name { gap: 4px; }
.marke__wort { font-family: var(--serif); font-size: 18px; font-weight: 500; letter-spacing: .32em; line-height: 1; }
.marke__zusatz { font-family: var(--serif); font-size: 10px; letter-spacing: .5em; color: var(--text-2); font-weight: 400; line-height: 1; }
.kopf { transition: padding .4s var(--kurve), background .4s, border-color .4s, opacity .5s, transform .5s var(--kurve); }
.kopf.ist-versteckt { opacity: 0; transform: translateY(-12px); pointer-events: none; }

/* Hero: Scroll-Film */
.medusa { position: relative; height: 250vh; }
.medusa__buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #0B0B0C; }
.medusa__film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.medusa__schleier {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(11, 11, 12, .85) 100%),
    linear-gradient(to top, rgba(11, 11, 12, .95) 0%, rgba(11, 11, 12, 0) 34%);
}
.medusa__saeule {
  position: absolute; bottom: -2vh; height: 104vh; width: auto; opacity: 0; pointer-events: none; mix-blend-mode: screen; will-change: opacity, transform;
}
.medusa__saeule--links { left: max(-2vw, calc(50% - 980px)); }
.medusa__saeule--rechts { right: max(-2vw, calc(50% - 980px)); }

.medusa__titel {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; padding: 0 var(--rand);
  will-change: opacity, transform;
}
.medusa__titel h1 { margin: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.6vw, 22px); font-weight: 400; }
.medusa__titel .chroma { font-family: var(--serif); font-weight: 500; font-size: clamp(50px, 10.5vw, 168px); line-height: .9; letter-spacing: .12em; padding-left: .12em; }
.medusa__design { font-family: var(--serif); font-weight: 400; font-size: clamp(15px, 2vw, 30px); letter-spacing: .62em; padding-left: .62em; color: #FFFFFF; }
.medusa__ort { margin: clamp(22px, 3vw, 40px) 0 0; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-2); }

.medusa__claim {
  position: absolute; left: var(--rand); bottom: clamp(48px, 9vh, 110px); max-width: 560px; opacity: 0; transform: translateY(30px);
  pointer-events: none; will-change: opacity, transform;
}
.medusa__claim.ist-aktiv { pointer-events: auto; }
.medusa__satz { font-family: var(--serif); font-size: clamp(34px, 4.2vw, 64px); line-height: 1.04; margin: 0 0 22px; }
.medusa__lead { color: var(--text-2); font-size: 17px; margin: 0 0 30px; max-width: 480px; }
.medusa__aktionen { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.medusa__hinweis {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-3); transition: opacity .4s;
}
.medusa__hinweis i { width: 1px; height: 44px; background: linear-gradient(var(--gold), transparent); animation: tropfen 2.4s var(--kurve) infinite; transform-origin: top; }
.medusa__fortschritt { position: absolute; right: var(--rand); top: 50%; width: 1px; height: 120px; transform: translateY(-50%); background: var(--linie); }
.medusa__fortschritt i { display: block; width: 100%; height: 100%; background: var(--gold); transform-origin: top; transform: scaleY(0); }

/* Arbeiten: Text links, Bildschirm-Fächer rechts */
.werke { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 5vw, 90px); align-items: center; }
.werke__text .gross { margin-bottom: 26px; }
.werke__liste { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--linie); }
.werke__liste li { border-bottom: 1px solid var(--linie); }
.werke__liste button {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; background: none; border: 0; cursor: pointer;
  color: var(--text); font: inherit; text-align: left; transition: color .3s, padding .4s var(--kurve);
}
.werke__liste button span { font-family: var(--serif); font-size: clamp(19px, 1.6vw, 24px); }
.werke__liste button small { color: var(--text-3); font-size: 12.5px; letter-spacing: .04em; }
.werke__liste button:hover { color: var(--gold-hell); padding-left: 10px; }
.werke__liste button:hover small { color: var(--text-2); }
.werke__buehne { height: min(60vh, 560px); }

@media (max-width: 1080px) {
  .werke { grid-template-columns: 1fr; }
  .werke__buehne { height: 56vw; max-height: 520px; }
  .medusa__saeule { display: none; }
}
@media (max-width: 600px) {
  .medusa { height: 190vh; }
  .medusa__claim { right: var(--rand); bottom: 40px; }
  .medusa__lead { font-size: 15.5px; }
  .medusa__fortschritt { display: none; }
  .marke__wort { font-size: 16px; letter-spacing: .26em; }
  .werke__liste button { flex-direction: column; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .medusa { height: auto; }
  .medusa__buehne { position: relative; }
  .medusa__titel { display: none; }
  .medusa__claim { opacity: 1; transform: none; pointer-events: auto; }
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

@media (max-width: 600px) { .medusa__claim { text-shadow: 0 2px 18px rgba(11,11,12,.9); } }
.medusa__claim { text-shadow: 0 2px 24px rgba(11, 11, 12, .85); }

/* Medusa-Akzente in Über mich und Kontakt */
.ueber { position: relative; overflow: visible; }
.ueber > :not(.ueber__schlange) { position: relative; z-index: 1; }
/* Die Schlange läuft wie auf der Visitenkarte rechts aus dem Bildschirm; oben und unten blendet sie weich aus */
.ueber__schlange {
  position: absolute; right: calc(50% - 50vw); top: 50%; width: min(58vw, 860px); transform: translateY(-50%); opacity: .2; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%), linear-gradient(to right, transparent 0%, #000 12%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%), linear-gradient(to right, transparent 0%, #000 12%);
}
.kontakt { isolation: isolate; }
.kontakt > :not(.kontakt__medusa) { position: relative; z-index: 1; }
.kontakt__medusa {
  position: absolute; left: 50%; top: 0; width: min(1400px, 120vw); transform: translateX(-50%); z-index: 0; opacity: .1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 85%); mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 85%);
}
@media (max-width: 860px) { .ueber__schlange { width: 110vw; right: calc(50% - 50vw - 30vw); top: 30%; opacity: .12; } }

@media (max-width: 600px) { .vn__reiter button { font-size: 12px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; } }

/* ==========================================================================
   Pakete: dunkel wie der Rest der Seite, Signature in Olivgrün
   ========================================================================== */
:root {
  --oliv-tief: #0C1008;
  --oliv: #2E3A22;
  --oliv-hell: #7A8E4C;
  --oliv-glanz: #7A8E4C;
}
.abschnitt--hell { background: var(--grund); color: var(--text); border-block: 1px solid var(--linie); }
.abschnitt--hell em { color: var(--gold-hell); }
.abschnitt--hell .auge { color: var(--gold); }
.abschnitt--hell .abschnitt__lead { color: var(--text-2); }
.abschnitt--hell ::selection { background: var(--gold); color: var(--grund); }

/* Essential: dunkle Karte mit feiner Silberlinie */
.variante { background: linear-gradient(160deg, #17171B, #111114); border-color: var(--linie); color: var(--text); }
.variante p { color: var(--text-2); }
.variante__name { color: var(--text) !important; }
.variante .haken li::before { border-color: var(--gold); }
.variante__preis { border-color: var(--linie); }
.variante__betrag { color: var(--text); }
.variante .knopf--rand { color: var(--text); border-color: rgba(231, 234, 240, .28); }
.variante .knopf--rand:hover { color: var(--gold-hell); border-color: var(--gold); }

/* Signature: Olivgrün */
.variante--signature {
  background: linear-gradient(155deg, #212B18 0%, #151C0F 52%, var(--oliv-tief) 100%);
  border: 1px solid rgba(122, 142, 76, .35);
  box-shadow: 0 50px 110px -40px rgba(43, 56, 32, .55), inset 0 1px 0 rgba(214, 222, 180, .12);
}
.variante--signature::before { background: radial-gradient(closest-side, rgba(122, 142, 76, .3), transparent); }
.variante--signature .variante__titel { color: #F2F5E6; }
.variante--signature p { color: rgba(226, 232, 206, .74); }
.variante--signature .variante__name { color: var(--oliv-glanz) !important; }
.variante--signature .variante__marke { background: rgba(122, 142, 76, .2); color: var(--oliv-glanz); border: 1px solid rgba(122, 142, 76, .35); }
.variante--signature .haken li { color: #EEF2DE; }
.variante--signature .haken li::before { border-color: var(--oliv-hell); }
.variante--signature .variante__preis { border-color: rgba(122, 142, 76, .3); color: rgba(226, 232, 206, .74); }
.variante--signature .variante__betrag { color: var(--oliv-glanz); }
.variante--signature .knopf { background: var(--oliv-hell); border-color: var(--oliv-hell); color: #F2F5EA; }
.variante--signature .knopf:hover { background: var(--oliv-glanz); border-color: var(--oliv-glanz); box-shadow: 0 14px 40px -12px rgba(122, 142, 76, .6); }

/* Pflege & Betreuung: dunkel, gestrichelter Rahmen */
.pflege { border-color: rgba(231, 234, 240, .2); background: rgba(255, 255, 255, .015); }
.pflege p { color: var(--text-2); }
.pflege .variante__titel { color: var(--text); }
.pflege__marke { border-color: var(--linie); color: var(--text-2); }
.pflege .haken li::before { border-color: var(--gold); }
.pflege__preis { color: var(--text-2); }

/* ==========================================================================
   Olivgrüne Akzente (Kontakt und FAQ bleiben bewusst unverändert)
   ========================================================================== */
:root { --oliv-akzent: #7A8E4C; --oliv-text: #7A8E4C; }

/* kleine Überzeilen, kursive Hervorhebungen, Listenstriche */
main > section:not(#kontakt):not(#fragen) .auge,
.medusa__claim .auge { color: var(--oliv-akzent); }
main > section:not(#kontakt):not(#fragen) em,
.medusa__claim em { color: var(--oliv-text); }
main > section:not(#kontakt):not(#fragen) .haken li::before { border-color: var(--oliv-akzent); }

/* Hauptknopf im Hero und in der Kopfzeile in Oliv */
.medusa__claim .knopf, .kopf .knopf {
  background: var(--oliv-akzent); border-color: var(--oliv-akzent); color: #F2F5EA;
}
.medusa__claim .knopf:hover, .kopf .knopf:hover { background: #7A8E4C; border-color: #7A8E4C; box-shadow: 0 14px 40px -12px rgba(122, 142, 76, .55); }
.medusa__claim .link-pfeil, .werke .link-pfeil { background-image: linear-gradient(var(--oliv-akzent), var(--oliv-akzent)); }

/* Ladebalken, Scroll-Fortschritt, Laufband-Sterne */
.lader__balken i, .medusa__fortschritt i { background: var(--oliv-akzent); }
.medusa__hinweis i { background: linear-gradient(var(--oliv-akzent), transparent); }
.band__spur b { color: var(--oliv-akzent); }

/* Arbeiten-Liste und Bildschirme */
.werke__liste button:hover { color: var(--oliv-text); }
.facher__blatt:hover, .facher__blatt:focus-visible { border-color: rgba(122, 142, 76, .75); box-shadow: 0 60px 110px -30px rgba(0, 0, 0, .85), 0 0 60px -10px rgba(122, 142, 76, .4); }
.facher__label { color: var(--oliv-text); border-color: rgba(122, 142, 76, .55); }

/* Vorher / Nachher: Wischlinie, Reiter, Fortschritt */
.vn__bild::after { background: linear-gradient(transparent, #7A8E4C 15%, var(--oliv-akzent) 85%, transparent); box-shadow: 0 0 24px 4px rgba(122, 142, 76, .5); }
.vn__fortschritt { background: var(--oliv-akzent); }
.vn__reiter button[aria-selected="true"] { border-color: rgba(122, 142, 76, .65); background: rgba(122, 142, 76, .07); }
.vn__reiter button[aria-selected="true"] small { color: var(--oliv-akzent); }
.vn__marke--neu { color: var(--oliv-text); border-color: rgba(122, 142, 76, .55); }
.vn__buehne { box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9), 0 0 120px -50px rgba(122, 142, 76, .45); }

/* Ablauf: Nummern in Oliv */
.schritt__nr { color: var(--oliv-akzent); }

/* Pakete: Überzeile und Pflege-Preis */
.pflege__preis .variante__betrag { color: var(--oliv-text); }

/* Schnellkontakt (Anrufen / WhatsApp) */
.schnellkontakt {
  position: fixed; right: clamp(14px, 2.4vw, 32px); bottom: clamp(14px, 2.4vw, 32px); z-index: 60; display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .5s, transform .5s var(--kurve);
}
.schnellkontakt.ist-sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.schnellkontakt__knopf {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 15px; border-radius: 999px; text-decoration: none; overflow: hidden;
  background: rgba(22, 22, 26, .88); color: #7A8E4C; border: 1px solid rgba(122, 142, 76, .45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .8);
  transition: background .3s, color .3s, transform .3s var(--kurve);
}
.schnellkontakt__knopf span { font-size: 14px; font-weight: 600; max-width: 0; opacity: 0; white-space: nowrap; transition: max-width .45s var(--kurve), opacity .3s; }
.schnellkontakt__knopf:hover span, .schnellkontakt__knopf:focus-visible span { max-width: 120px; opacity: 1; }
.schnellkontakt__knopf:hover { transform: translateX(-2px); }
.schnellkontakt__knopf--wa { background: #7A8E4C; color: #F2F5EA; border-color: #7A8E4C; }
.schnellkontakt__knopf--wa:hover { background: #7A8E4C; }
.schnellkontakt__knopf svg { flex: none; }

/* Fußzeile mit Einzugsgebiet */
.fuss__links { display: grid; gap: 6px; }
.fuss__gebiet { font-size: 12.5px; color: var(--text-2); max-width: 620px; }
.kontakt__daten span { color: var(--text-3); }

@media (max-width: 600px) {
  .schnellkontakt { left: 12px; right: 12px; bottom: 12px; flex-direction: row; }
  .schnellkontakt__knopf { flex: 1; justify-content: center; height: 50px; }
  .schnellkontakt__knopf span { max-width: none; opacity: 1; }
  .fuss { padding-bottom: 86px; }
}

/* Warum Medusa */
.name { text-align: center; padding-bottom: 0; }
.name .auge { justify-content: center; }
.name .gross { margin-bottom: 26px; }
.name .abschnitt__lead { margin: 0 auto; max-width: 640px; }

/* Was im Preis steckt */
.leistung { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); padding: clamp(28px, 4vw, 48px); border: 1px solid var(--linie); border-radius: 20px; background: linear-gradient(160deg, rgba(122, 142, 76, .06), transparent 60%); }
.leistung__titel { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 32px); margin: 0 0 18px; }
.leistung .haken { margin: 0; }
.leistung__zahlung { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--linie); color: var(--text-2); font-size: 15px; }
.leistung__zahlung strong { color: var(--oliv-text); font-weight: 600; }
@media (max-width: 860px) { .leistung { grid-template-columns: 1fr; } }

/* Dunkleres Grün: Knöpfe mit heller Schrift, Preise in der Signature-Karte hell */
.medusa__claim .knopf, .kopf .knopf, .variante--signature .knopf, .schnellkontakt__knopf--wa { background: #3D4B25; border-color: #3D4B25; color: #F2F5EA; }
.medusa__claim .knopf:hover, .kopf .knopf:hover, .variante--signature .knopf:hover, .schnellkontakt__knopf--wa:hover { background: #4B5C2E; border-color: #4B5C2E; color: #FFFFFF; }
.variante--signature .variante__betrag, .variante--signature .variante__name, .variante--signature .variante__marke { color: #DCE4C2 !important; }
.schnellkontakt__knopf { color: #7A8E4C; }

/* Leitsatz gut lesbar vor der Säule: dunkler Schatten hinter dem Text */
.medusa__claim::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -90px -160px -70px calc(-1 * var(--rand) - 40px);
  background: radial-gradient(ellipse 70% 75% at 35% 55%, rgba(11, 11, 12, .92) 0%, rgba(11, 11, 12, .7) 45%, rgba(11, 11, 12, 0) 78%);
}
.medusa__claim .medusa__lead { color: #B8BEC8; }

/* Großansicht: Vorher / Nachher per Schalter */
.vorschau__bilder { position: relative; overflow: hidden; }
.vorschau__bilder img { display: block; }
.vorschau__alt {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
  clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.65, 0, .35, 1);
}
.vorschau__bilder[data-ansicht="alt"] .vorschau__alt { clip-path: inset(0 0 0 0); }
/* leuchtende Wischlinie während des Übergangs */
.vorschau__bilder::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; margin-left: -1.5px; pointer-events: none; opacity: 0;
  background: linear-gradient(transparent, #7A8E4C 15%, #7A8E4C 85%, transparent); box-shadow: 0 0 24px 4px rgba(122, 142, 76, .55);
  transition: left .9s cubic-bezier(.65, 0, .35, 1), opacity .2s;
}
.vorschau__bilder[data-ansicht="alt"]::after { left: 100%; }
.vorschau__bilder.wischt::after { opacity: 1; }
.vorschau__bilder.ohne-uebergang .vorschau__alt, .vorschau__bilder.ohne-uebergang::after { transition: none; }
.vorschau__marke {
  position: absolute; left: 14px; bottom: 14px; z-index: 1; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px; background: rgba(11, 11, 12, .82); color: var(--text); border: 1px solid var(--linie); pointer-events: none;
}
.vorschau__bilder[data-ansicht="neu"] .vorschau__marke { color: #7A8E4C; border-color: rgba(122, 142, 76, .7); }

.vorschau__umschalter { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--linie); background: rgba(255, 255, 255, .03); margin-left: auto; }
.vorschau__umschalter button {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2); background: transparent; border: 0; cursor: pointer;
  padding: 9px 18px; border-radius: 999px; transition: background .3s, color .3s;
}
.vorschau__umschalter button:hover { color: var(--text); }
.vorschau__umschalter button[aria-pressed="true"] { background: #3D4B25; color: #F2F5EA; }
.vorschau__fuss .vorschau__demo { margin-left: 18px; }

@media (max-width: 600px) {
  .vorschau__umschalter { order: 5; margin: 10px 0 0; width: 100%; }
  .vorschau__umschalter button { flex: 1; }
  .vorschau__fuss .vorschau__demo { margin-left: auto; }
}

/* ==========================================================================
   Laufband: zwei gegenläufige Reihen, Tempo folgt dem Scrollen
   ========================================================================== */
.band { padding: clamp(26px, 4vw, 48px) 0; display: grid; gap: clamp(6px, 1vw, 14px); border-block: 1px solid var(--linie); overflow: hidden; }
.band__reihe { overflow: hidden; }
.band__spur { animation: none; gap: clamp(22px, 3vw, 46px); will-change: transform; }
.band__spur span {
  font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5.4vw, 84px); line-height: 1.05; letter-spacing: -.005em; white-space: nowrap;
}
.band__spur b { font-size: clamp(14px, 1.6vw, 22px); color: var(--oliv-akzent); font-weight: 400; }
/* obere Reihe: gefüllt, Weiß */
.band__reihe--voll .band__spur span { color: var(--text); }
/* untere Reihe: nur Kontur, kursiv – wirkt wie eingraviert */
.band__reihe--kontur .band__spur span {
  font-style: italic; color: transparent; -webkit-text-stroke: 1px rgba(214, 222, 180, .55);
}
.band__reihe--kontur .band__spur span:nth-of-type(3n + 1) { -webkit-text-stroke-color: rgba(122, 142, 76, .85); }
@supports not (-webkit-text-stroke: 1px black) {
  .band__reihe--kontur .band__spur span { color: var(--text-3); }
}
@media (prefers-reduced-motion: reduce) {
  .band__spur { transform: none !important; }
}

/* ==========================================================================
   Der Stein-Blick: der Satz versteinert beim Scrollen Wort für Wort
   ========================================================================== */
.stein { position: relative; height: 140vh; border-top: 1px solid var(--linie); }
.stein__buehne {
  position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 var(--rand); overflow: hidden;
}
/* leichter Lichtkegel hinter dem Satz */
.stein__buehne::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(1100px, 110vw); aspect-ratio: 2 / 1; transform: translate(-50%, -52%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(122, 142, 76, calc(.22 * (1 - var(--stein, 0)))), rgba(150, 152, 148, calc(.10 * var(--stein, 0))) 60%, transparent);
}
.stein__auge { justify-content: center; margin-bottom: clamp(18px, 3vh, 34px); position: relative; }
.stein__satz {
  position: relative; margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.04;
  font-size: clamp(44px, 8.6vw, 148px); letter-spacing: -.005em; display: flex; flex-direction: column; align-items: center;
}
.stein__zeile { display: block; white-space: nowrap; }
.stein__zeile:last-of-type { font-style: italic; }
.stein__wort { position: relative; display: inline-block; --s: 0; }

/* lebendig: olivgrün mit leichtem Schimmer */
.stein__lebend {
  display: inline-block; color: transparent;
  background: linear-gradient(180deg, #E4EBCB 0%, #A6B47F 55%, #6E8245 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 22px rgba(120, 140, 70, calc(.35 * (1 - var(--s)))));
  transition: filter .3s;
}
/* Stein: graue Marmor-Struktur, wächst von unten nach oben über das Wort */
.stein__fels {
  position: absolute; inset: 0; color: transparent; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .91 0 0 0 0 .89 0 0 0 1.3 -.32'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23767873'/%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #EEEFEA 0%, #BFC1BB 55%, #858882 100%);
  background-size: 260px 260px, 100% 100%; background-blend-mode: multiply;
  -webkit-background-clip: text; background-clip: text;
  clip-path: inset(calc((1 - var(--s)) * 100%) 0 0 0);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 1px rgba(0, 0, 0, .6));
}
/* ein feiner heller Saum an der Stelle, an der der Stein gerade „wächst“ */
.stein__wort::after {
  content: ""; position: absolute; left: -4%; right: -4%; height: 2px; pointer-events: none;
  bottom: calc(var(--s) * 100%); background: linear-gradient(90deg, transparent, rgba(220, 222, 214, .75), transparent);
  opacity: calc(var(--s) * (1 - var(--s)) * 4); filter: blur(1px);
}

/* Riss quer durch den versteinerten Satz */
.stein__riss { position: absolute; inset: -6% 0; width: 100%; height: 112%; pointer-events: none; overflow: visible; mix-blend-mode: multiply; }
.stein__riss path {
  fill: none; stroke: #000; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--riss, 0));
}
.stein__riss .stein__riss-ast { stroke-width: 2; stroke-dashoffset: calc(1 - var(--ast, 0)); }
.stein.ist-gerissen .stein__satz { animation: beben .38s cubic-bezier(.36, .07, .19, .97) 1; }
@keyframes beben {
  20% { transform: translate(-3px, 1px); } 40% { transform: translate(3px, -1px); }
  60% { transform: translate(-2px, 0); } 80% { transform: translate(1px, 1px); }
}

.stein__text {
  max-width: 620px; margin: clamp(26px, 4vh, 44px) auto 0; color: var(--text-2); font-size: 18px; position: relative;
  opacity: var(--absatz, 0); transform: translateY(calc((1 - var(--absatz, 0)) * 24px));
}

@media (max-width: 600px) {
  .stein { height: 125vh; }
  .stein__zeile { white-space: normal; }
  .stein__text { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .stein { height: auto; }
  .stein__buehne { position: relative; height: auto; padding-block: 120px; }
  .stein__wort { --s: 1; }
  .stein__text { opacity: 1; transform: none; }
}

/* Riss: liegt als Bild in der Schrift selbst – sichtbar nur innerhalb der Steinbuchstaben,
   wächst von oben nach unten */
.stein__spalt {
  position: absolute; inset: 0; color: transparent; pointer-events: none;
  -webkit-background-clip: text; background-clip: text; background-size: 100% 100%; background-repeat: no-repeat;
}
.stein__spalt--oben {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 -3 L30 18 L24 30 L44 46 L40 58 L62 72 L58 84 L78 103' stroke='%23F4F5F0' stroke-width='8' stroke-opacity='.28' transform='translate(.9 0)' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M18 -3 L30 18 L24 30 L44 46 L40 58 L62 72 L58 84 L78 103' stroke='%23030303' stroke-width='5.5'  vector-effect='non-scaling-stroke'/%3E%3Cpath d='M44 46 L54 40 L60 43' stroke='%23030303' stroke-width='3'  vector-effect='non-scaling-stroke'/%3E%3Cpath d='M62 72 L50 80' stroke='%23030303' stroke-width='3'  vector-effect='non-scaling-stroke'/%3E%3Cpath d='M24 30 L12 38' stroke='%23030303' stroke-width='3'  vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  clip-path: inset(0 0 calc((1 - var(--riss, 0)) * 100%) 0);
}
.stein__spalt--unten {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 -3 L26 16 L20 30 L42 44 L36 58 L60 70 L55 84 L80 103' stroke='%23F4F5F0' stroke-width='8' stroke-opacity='.28' transform='translate(.9 0)' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M12 -3 L26 16 L20 30 L42 44 L36 58 L60 70 L55 84 L80 103' stroke='%23030303' stroke-width='5.5'  vector-effect='non-scaling-stroke'/%3E%3Cpath d='M42 44 L54 38' stroke='%23030303' stroke-width='3'  vector-effect='non-scaling-stroke'/%3E%3Cpath d='M60 70 L72 66 L78 70' stroke='%23030303' stroke-width='3'  vector-effect='non-scaling-stroke'/%3E%3Cpath d='M20 30 L8 36' stroke='%23030303' stroke-width='3'  vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  clip-path: inset(0 0 calc((1 - var(--ast, 0)) * 100%) 0);
}
@media (prefers-reduced-motion: reduce) {
  .stein__spalt--oben, .stein__spalt--unten { clip-path: none; }
}

/* ==========================================================================
   Überarbeitung nach den Bewertungen
   ========================================================================== */
:root { --oliv-flaeche: #3D4B25; --oliv-flaeche-hover: #4B5C2E; --oliv-akzent: #7A8E4C; --oliv-text: #7A8E4C; }

/* Einheitliche Akzente: Überzeilen, Kursives und Hauptknöpfe immer olivgrün */
.auge, .abschnitt--hell .auge { color: var(--oliv-akzent); }
em, .abschnitt--hell em { color: var(--oliv-text); }
.haken li::before, .variante .haken li::before, .pflege .haken li::before { border-color: var(--oliv-akzent); }
.knopf:not(.knopf--rand) { background: var(--oliv-flaeche); border-color: var(--oliv-flaeche); color: #F2F5EA; }
.knopf:not(.knopf--rand):hover { background: var(--oliv-flaeche-hover); border-color: var(--oliv-flaeche-hover); color: #fff; box-shadow: 0 14px 40px -12px rgba(122, 142, 76, .5); }
.knopf svg { flex: none; }
.link-pfeil { background-image: linear-gradient(var(--oliv-akzent), var(--oliv-akzent)); }
.anfrage__schritte li.ist-aktiv span { color: var(--oliv-akzent); border-color: var(--oliv-akzent); }
.anfrage__schritte li.ist-fertig span { background: var(--oliv-flaeche); border-color: var(--oliv-flaeche); color: #F2F5EA; }
.wahl__feld input:checked + span { border-color: var(--oliv-akzent); background: rgba(122, 142, 76, .08); }
.wahl__feld input:checked + span::before { border-color: var(--oliv-akzent); background: var(--oliv-akzent); }
.feld input:focus, .feld textarea:focus { border-color: var(--oliv-akzent); }
.faq summary::after { color: var(--oliv-akzent); }
.faq summary:hover { color: var(--text); }
::selection { background: var(--oliv-flaeche); color: #fff; }
:focus-visible { outline-color: var(--oliv-akzent); }

/* Bodoni: Luft nach dem großen W verringern */
.kern-w { margin-right: -.075em; }
em .kern-w { margin-right: -.13em; }

/* Ruhigerer Rhythmus: weniger Leerraum zwischen den Abschnitten */
.abschnitt { padding-block: clamp(72px, 9vw, 128px); }
.abschnitt__kopf { margin-bottom: clamp(40px, 5vw, 72px); }
.kontakt { padding-block: clamp(80px, 10vw, 140px); }

/* Kein Ladebildschirm mehr */
.lader { display: none !important; }

/* Kopfzeile: Anruf-Knopf (nur Handy) */
.kopf__tel { display: none; }

/* Startbereich: Angebot und Anruf-Knopf direkt sichtbar */
.medusa__angebot { max-width: 620px; margin: 18px auto 0; color: var(--text-2); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; }
.medusa__titel-aktionen { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 28px; }
/* Säulen nicht mehr unter der Kopfzeile abschneiden */
.medusa__saeule { bottom: -1vh; height: calc(100vh - 92px); }

/* Arbeiten: Vorher/Nachher direkt aus der Liste */
.werke__liste li { display: flex; align-items: center; gap: 14px; }
.werke__liste .werke__oeffnen { flex: 1; min-width: 0; }
.werke__liste .werke__vergleich {
  width: auto; flex: none; padding: 8px 14px; border: 1px solid var(--linie); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2); letter-spacing: .02em; white-space: nowrap;
}
.werke__liste .werke__vergleich:hover { color: #fff; border-color: var(--oliv-akzent); background: rgba(122, 142, 76, .12); padding-left: 14px; }

/* Pakete: Beispielvideo neben der Überschrift */
.pakete__kopf { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; max-width: none; }
.pakete__beispiel { margin: 0; }
.pakete__beispiel .browser { border-radius: 14px; overflow: hidden; border: 1px solid var(--linie); background: #0B0B0C; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 90px -50px rgba(122, 142, 76, .45); }
.pakete__video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0B0B0C; }
.pakete__beispiel figcaption { margin-top: 12px; font-size: 13px; color: var(--text-3); }
.variante__beispiel { font-size: 14px; color: var(--text-2) !important; border-left: 2px solid var(--oliv-akzent); padding-left: 12px; margin: -6px 0 24px !important; }
.variante__beispiel b { color: var(--text); font-weight: 600; }
.variante--signature .variante__beispiel b { color: #EEF2DE; }
.leistung__zahlung--klein { margin-top: 12px !important; padding-top: 0 !important; border-top: 0 !important; font-size: 14px !important; }

/* Über mich: Visitenkarte statt Schlange */
.karte {
  display: flex; align-items: center; gap: 18px; margin-top: 34px; padding: 20px 22px; max-width: 460px;
  border: 1px solid var(--linie); border-radius: 18px; background: linear-gradient(160deg, rgba(122, 142, 76, .08), rgba(255, 255, 255, .015));
}
.karte__kopf { width: 64px; height: 64px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(211, 216, 226, .2); }
.karte__text p { margin: 0; }
.karte__name { font-family: var(--serif); font-size: 22px; line-height: 1.2; color: var(--text); }
.karte__rolle { font-size: 13px; color: var(--text-2); margin-top: 2px !important; }
.karte__wege { font-size: 14px; margin-top: 8px !important; display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--text-3); }
.karte__wege a { color: var(--text); text-decoration: none; }
.karte__wege a:hover { color: var(--oliv-text); }
.ueber__vorort { color: var(--text) !important; border-left: 2px solid var(--oliv-akzent); padding-left: 14px; }

/* FAQ zweispaltig: Überschrift links bleibt stehen */
#fragen { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
#fragen .abschnitt__kopf { position: sticky; top: 120px; margin-bottom: 0; }
#fragen .faq { max-width: none; }

/* Großansicht: Etikett in der Browserleiste, kurzer Satz „was ist neu“ */
.leiste .vorschau__marke {
  position: static; margin-left: auto; padding: 3px 10px; font-size: 10px; letter-spacing: .18em; border-radius: 999px;
  background: transparent; border: 1px solid var(--linie); color: var(--text-2); text-transform: uppercase; font-weight: 700;
}
.vorschau:has(.vorschau__bilder[data-ansicht="neu"]) .leiste .vorschau__marke { color: var(--oliv-text); border-color: rgba(122, 142, 76, .6); }
.vorschau__neu { margin: 8px 0 0; color: var(--text-2); font-size: 15px; max-width: 70ch; }

/* Schnellkontakt: nicht über Inhalten, am Handy mit Hintergrund */
.schnellkontakt__knopf { color: #C9D2AE; }

@media (max-width: 860px) {
  .pakete__kopf { grid-template-columns: 1fr; }
  #fragen { grid-template-columns: 1fr; gap: 0; }
  #fragen .abschnitt__kopf { position: static; margin-bottom: 32px; }
  .kopf__tel {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; margin-left: auto; margin-right: 10px;
    background: var(--oliv-flaeche); color: #F2F5EA;
  }
}
@media (max-width: 600px) {
  .medusa__hinweis { display: none; }
  .medusa__titel-aktionen { gap: 18px; }
  .schnellkontakt {
    left: 0; right: 0; bottom: 0; padding: 26px 12px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(rgba(11, 11, 12, 0), rgba(11, 11, 12, .92) 42%);
  }
  .werke__liste li { align-items: flex-start; }
  .werke__liste .werke__vergleich { margin-top: 16px; padding: 7px 11px; font-size: 11.5px; }
  .karte { gap: 14px; padding: 16px; }
  .karte__kopf { width: 54px; height: 54px; }
}

/* Über mich: zwei gleich breite Spalten, beide bis an den Rand gefüllt und senkrecht mittig zueinander */
@media (min-width: 861px) {
  .ueber { grid-template-columns: 1fr 1fr; align-items: center; }
  .ueber .karte { max-width: none; }
  .ueber__text p:not(.auge) { max-width: none; }
}

/* Anfrage: eigene Wünsche zusätzlich zu den Bausteinen */
.anfrage__eigenes { margin-top: 18px; }
.anfrage__eigenes textarea { min-height: 0; }

/* Visitenkarte am Handy: kein einzelner Trennpunkt, wenn die E-Mail umbricht */
@media (max-width: 600px) { .karte__wege span { display: none; } }