/* Dilsoz Kaidy · Architektin. Entwurf „Das Planblatt“ */

:root {
  --paper: #F2EFE7;
  --paper-2: #E9E5DA;
  --paper-3: #F8F6F0;
  --ink: #1A1A18;
  --ink-2: #4F4C45;
  --ink-3: #8A867C;
  --rule: rgba(26, 26, 24, .18);
  --rule-2: rgba(26, 26, 24, .08);
  --red: #C23B22;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sans: 'Switzer', ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --g: clamp(16px, 4.4vw, 72px);
  --g: round(clamp(16px, 4.4vw, 72px), 1px);
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
a, button { touch-action: manipulation; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
svg { display: block; }
a { color: inherit; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; font-weight: 400; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); display: inline-block; flex: none; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Logo ---------- */
.logo-mark { display: block; height: 100%; width: auto; overflow: visible; }
.logo-mark .lg-stem { fill: currentColor; }
.logo-mark .lg-arc, .logo-mark .lg-arm, .logo-mark .lg-leaf { fill: none; stroke: currentColor; stroke-width: 3.2; }
.logo-mark .lg-leaf { opacity: 0; }
/* Kleinformat: Linienstärke in echten Pixeln */
.logo-mark--s .lg-arc, .logo-mark--s .lg-arm, .logo-mark--s .lg-leaf { stroke-width: 1.5; }
.logo-mark .lg-dot { fill: var(--red); }

.js .logo-anim .lg-stem { clip-path: inset(100% 0 0 0); }
.js .logo-anim .lg-arc, .js .logo-anim .lg-arm { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .logo-anim .lg-dot { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; }
.js .logo-anim .lg-leaf { transform-box: view-box; transform-origin: var(--leaf-o, 19px 50px); }
.js .logo-anim.is-drawn .lg-stem { animation: lgStem .55s var(--ease-out) forwards; }
.js .logo-anim.is-drawn .lg-stem--k { animation-delay: .18s; }
.js .logo-anim.is-drawn .lg-arc { animation: draw .8s var(--ease-in-out) .35s forwards; }
.js .logo-anim.is-drawn .lg-leaf { animation: lgLeaf .8s var(--ease-in-out) .35s forwards, lgLeafHome .38s var(--ease-in-out) 1.15s forwards; }
.js .logo-anim.is-drawn .lg-arm { animation: draw .45s var(--ease-out) .7s forwards; }
.js .logo-anim.is-drawn .lg-arm--2 { animation-delay: .82s; }
.js .logo-anim.is-drawn .lg-dot { animation: lgDot .4s var(--ease-out) 1.1s forwards; }
@keyframes lgStem { to { clip-path: inset(0 0 0 0); } }
@keyframes lgLeaf { from { opacity: 1; transform: rotate(0deg); } to { opacity: 1; transform: rotate(180deg); } }
/* Wie ein Zirkel: der Arm zieht den Bogen und klappt danach in den Drehpunkt (roten Punkt) zurück */
@keyframes lgLeafHome { from { opacity: 1; transform: rotate(180deg) scaleY(1); } 99% { opacity: 1; } to { opacity: 0; transform: rotate(180deg) scaleY(0); } }
/* Der Punkt erscheint, kurz bevor der Arm ankommt, und gibt einmal leicht nach, als würde er ihn aufnehmen */
@keyframes lgDot { 0% { opacity: 0; transform: scale(.6); } 55% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
/* Im Auftakt dieselbe Zeichnung, nur schneller */
.intro .logo-anim.is-drawn .lg-stem { animation-duration: .32s; }
.intro .logo-anim.is-drawn .lg-stem--k { animation-delay: .08s; }
.intro .logo-anim.is-drawn .lg-arc { animation: draw .42s var(--ease-in-out) .1s forwards; }
.intro .logo-anim.is-drawn .lg-leaf { animation: lgLeaf .42s var(--ease-in-out) .1s forwards, lgLeafHome .2s var(--ease-in-out) .52s forwards; }
.intro .logo-anim.is-drawn .lg-arm { animation: draw .24s var(--ease-out) .3s forwards; }
.intro .logo-anim.is-drawn .lg-arm--2 { animation-delay: .36s; }
.intro .logo-anim.is-drawn .lg-dot { animation: lgDot .24s var(--ease-out) .46s forwards; }
/* Nach dem Auftakt steht das Logo in der Leiste fertig da */
.logo-done .lg-stem { clip-path: none !important; animation: none !important; }
.logo-done .lg-arc, .logo-done .lg-arm { stroke-dashoffset: 0 !important; animation: none !important; }
.logo-done .lg-dot { opacity: 1 !important; transform: none !important; animation: none !important; }
.logo-done .lg-leaf { opacity: 0 !important; animation: none !important; }

/* ---------- Auftakt beim ersten Besuch (höchstens eine Sekunde) ---------- */
.intro { display: none; }
.has-intro .intro { display: block; position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.intro-bg { position: absolute; inset: 0; background: var(--paper); }
.intro-mark { position: absolute; left: 50%; top: 50%; height: clamp(90px, 16vh, 150px); transform: translate(-50%, -50%); color: var(--ink); }
.has-intro .brand .logo-mark { opacity: 0; }

/* ---------- Glas: nur für die Bedien-Schicht (Leiste, Knöpfe, Formular) ---------- */
/* Zwei Ebenen statt einer: unten die Unschärfe, darüber die Tönung. Keine Randlinien und keine Lichtbrechung,
   denn die Brechung holt am Rand Bildteile von außen herein und wirkt dort wie ein Saum. */
.lg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Der Schatten sitzt auf der Tönungsebene, damit er mit dem Glas ein- und ausblendet */
.glass { position: relative; isolation: isolate; border-radius: 999px; }
.glass::before, .glass::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.glass::before {
  -webkit-backdrop-filter: blur(16px) saturate(1.7) brightness(1.04);
  backdrop-filter: blur(16px) saturate(1.7) brightness(1.04);
}
.glass::after {
  background-color: rgba(255, 255, 255, .5);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 70%);
  transition: background-color .4s ease;
  /* nur ein weicher, weit gestreuter Schatten, keine enge Kante */
  box-shadow: 0 18px 40px -20px rgba(26, 26, 24, .3);
}
@media (prefers-reduced-transparency: reduce) {
  .glass::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass::after { background: var(--paper-3); }
}

/* ---------- Knöpfe ---------- */
.btn {
  --h: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: var(--h); padding: 0 8px 0 26px; border: 0; border-radius: 999px;
  font: inherit; font-size: 17px; font-weight: 500; letter-spacing: -.005em; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: transform .16s var(--ease-out), background-color .2s ease;
}
.btn:not(:has(.btn-ico)) { padding: 0 28px; }
.btn:active { transform: scale(.97); }
.btn--ink { background: var(--ink); color: var(--paper); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 14px 30px -16px rgba(26, 26, 24, .75); }
.btn--glass { color: var(--ink); }
.btn-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .13); }
.btn-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease-out); }
.btn--nav { --h: 52px; font-size: 15px; gap: 12px; padding: 0 6px 0 22px; }
.btn--block { width: 100%; justify-content: space-between; }
@media (hover: hover) and (pointer: fine) {
  .btn--ink:hover { background: #000; }
  .btn:hover .btn-ico svg { transform: translateX(2px); }
  .btn--glass:hover::after { background-color: rgba(255, 255, 255, .72); }
}

/* ---------- Kopfzeile: drei schwebende Glasinseln ---------- */
.site-header {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: var(--header-h); z-index: 80;
  display: flex; align-items: center; gap: 12px; padding: 0 var(--g); pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 20px 0 14px; text-decoration: none; color: var(--ink); flex: none; }
.brand .logo-mark { width: 36px; height: 30px; flex: none; }
.brand-word { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-weight: 600; font-size: 15px; letter-spacing: .07em; text-transform: uppercase; }
.brand-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-top: 3px; }
.js .brand-word { opacity: 0; transform: translateX(-6px); }
.js .brand.is-drawn .brand-word { animation: rise .7s var(--ease-out) .5s forwards; }

.nav { margin: 0 auto; height: 52px; padding: 6px; }
.nav-list { display: flex; align-items: center; gap: 2px; height: 100%; }
.nav-list > * { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; text-decoration: none; }
.nav-list a { color: var(--ink); touch-action: manipulation; transition: background-color .15s ease; }
/* Aktiver Abschnitt: eine dunkle Kopie der Liste, auf den aktiven Eintrag zugeschnitten.
   Text und Fläche wechseln dadurch exakt gleichzeitig. */
.nav-list--active {
  position: absolute; inset: 6px; height: auto; background: var(--ink); color: var(--paper); border-radius: 999px; pointer-events: none;
  clip-path: inset(0 100% 0 0 round 999px); opacity: 0;
  transition: clip-path .25s var(--ease-in-out), opacity .2s ease;
}
.nav.has-active .nav-list--active { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .nav-list a:hover { background: rgba(26, 26, 24, .06); }
}
/* Im Startbereich übernimmt die Porträt-Karte die Anfrage, der Knopf oben kommt erst danach dazu */
.nav-cta { flex: none; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s linear 0s; }
.in-hero .nav-cta { opacity: 0; transform: translateY(-6px) scale(.97); visibility: hidden; pointer-events: none; transition: opacity .15s var(--ease-out), transform .15s var(--ease-out), visibility 0s linear .15s; }

.menu-btn {
  display: none; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 16px; margin-left: auto;
  border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: transform .16s var(--ease-out);
}
.menu-btn:active { transform: scale(.97); }
.menu-txt { display: inline-block; white-space: nowrap; }
.menu-ico { position: relative; width: 18px; height: 10px; }
.menu-ico i { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .2s var(--ease-out); }
.menu-ico i:first-child { top: 0; }
.menu-ico i:last-child { bottom: 0; }
.menu-btn[aria-expanded="true"] .menu-ico i:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-ico i:last-child { transform: translateY(-4.25px) rotate(-45deg); }

/* Handy-Menü: Die Glasfläche wächst aus dem Menü-Knopf oben rechts auf, die Einträge folgen leicht versetzt.
   Öffnen weich mit der Schubladen-Kurve, Schließen schnell. Das Glas wird nie als Ganzes beschnitten oder
   ausgeblendet (sonst verliert es die Unschärfe), sondern nur seine beiden Ebenen. */
.mobile-nav {
  position: fixed; z-index: 79; top: calc(env(safe-area-inset-top, 0px) + var(--header-h) - 4px); left: 12px; right: 12px;
  display: none; flex-direction: column; padding: 10px; border-radius: 28px; box-shadow: none;
  visibility: hidden; transition: visibility 0s linear .22s;
}
.mobile-nav::after { box-shadow: 0 24px 48px -20px rgba(26, 26, 24, .35); }
.mobile-nav::before, .mobile-nav::after {
  clip-path: inset(0 0 calc(100% - 52px) calc(100% - 132px) round 26px); opacity: 0;
  transition: clip-path .22s var(--ease-out), opacity .12s ease .1s;
}
.mobile-nav.is-open { visibility: visible; transition: none; }
.mobile-nav.is-open::before, .mobile-nav.is-open::after {
  clip-path: inset(-40px -40px -64px -40px round 26px); opacity: 1;
  transition: clip-path .5s var(--ease-drawer), opacity .12s ease;
}
.mobile-nav > * { opacity: 0; transform: translateY(-10px); transition: opacity .12s ease, transform .12s ease; }
.mobile-nav.is-open > * {
  opacity: 1; transform: none;
  transition: opacity .32s var(--ease-out) calc(90ms + var(--i, 0) * 45ms), transform .45s var(--ease-drawer) calc(90ms + var(--i, 0) * 45ms);
}
.mobile-nav a:not(.btn) { display: flex; align-items: center; height: 56px; padding: 0 16px; border-radius: 18px; font-size: 22px; font-weight: 400; letter-spacing: -.015em; text-decoration: none; color: var(--ink); touch-action: manipulation; -webkit-touch-callout: none; }
.mobile-nav a:not(.btn):active { background: rgba(26, 26, 24, .06); }
.mobile-nav .btn { margin-top: 8px; }
/* Druck auf den Knopf bleibt sofort spürbar, ohne die Verzögerung vom Aufgehen */
.mobile-nav.is-open > .btn:active { transform: scale(.97); transition: transform .1s var(--ease-out); }
/* Die Seite dahinter tritt etwas zurück, Tippen daneben schließt das Menü */
.nav-scrim { position: fixed; inset: 0; z-index: 78; background: rgba(26, 26, 24, .16); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.menu-open .nav-scrim { opacity: 1; pointer-events: auto; transition-duration: .3s; }
@media (min-width: 900px) { .nav-scrim { display: none; } }

/* Über dem dunklen Werdegang wird das Glas dunkel und die Schrift hell */
.brand, .nav-list a, .menu-btn { transition: color .3s ease; }
.is-night .site-header .glass::after, .is-night .mobile-nav::after { background-color: rgba(30, 34, 42, .5); background-image: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 70%); box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .4); }
.is-night .brand, .is-night .nav-list a, .is-night .menu-btn, .is-night .mobile-nav a:not(.btn) { color: var(--paper); }
.is-night .brand-sub { color: rgba(242, 239, 231, .65); }
.is-night .nav-list--active { background: var(--paper); color: var(--ink); }
.is-night .site-header .btn--ink, .is-night .mobile-nav .btn--ink { background: var(--paper); color: var(--ink); }
.is-night .site-header .btn--ink .btn-ico, .is-night .mobile-nav .btn--ink .btn-ico { background: rgba(26, 26, 24, .08); }
@media (hover: hover) and (pointer: fine) {
  .is-night .nav-list a:hover { background: rgba(255, 255, 255, .08); }
  .is-night .site-header .btn--ink:hover { background: #fff; }
}

/* ---------- Startbereich: Grundriss ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; }
.hero-visual { position: absolute; top: var(--header-h); bottom: 0; left: 35%; right: 0; z-index: 1; }
.plan, .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene { opacity: 0; }
.scene canvas { display: block; width: 100% !important; height: 100% !important; }

.plan .ln { fill: none; stroke: var(--ink); stroke-width: var(--w-thin, 2); stroke-linecap: square; }
.plan .ln--hair { stroke-width: var(--w-hair, 1.6); }
.plan .ln--med { stroke-width: var(--w-med, 3.6); }
.plan .ln--faint { opacity: .45; }
.plan .wall { fill: var(--ink); stroke: var(--ink); stroke-width: var(--w-hair, 1.6); }
.plan .fill-ink { fill: var(--ink); }
.plan .fill-red { fill: var(--red); }
.plan .prop { fill: none; stroke: var(--ink-3); stroke-width: var(--w-thin, 2); stroke-dasharray: 60 14 6 14; }
.plan text { fill: var(--ink); }
.plan .lbl { font-family: var(--sans); font-size: calc(var(--fs-lbl, 27) * 1px); font-weight: 480; letter-spacing: .01em; }
.plan .lbl-a, .plan .dim-t { font-family: var(--mono); font-size: calc(var(--fs-dim, 21) * 1px); fill: var(--ink-2); }
.plan .lbl-s { font-family: var(--mono); font-size: calc(var(--fs-s, 24) * 1px); }
.plan .lbl-s--sm { font-size: calc(var(--fs-dim, 21) * 1px); }
.plan.is-small .dim-t--in, .plan.is-small .lbl-a { display: none; }

.js .plan [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .plan .wall { fill-opacity: 0; }
.js .plan .fade { opacity: 0; }
.is-drawing .plan [pathLength] { animation: draw var(--dur, .9s) var(--ease-in-out) var(--d, 0s) forwards; }
.is-drawing .plan .wall { animation: draw .7s var(--ease-in-out) var(--d, 0s) forwards, wallFill .5s var(--ease-out) calc(var(--d, 0s) + .5s) forwards; }
.is-drawing .plan .fade { animation: fadeIn .6s var(--ease-out) var(--d, 0s) forwards; }
@keyframes wallFill { to { fill-opacity: 1; } }

.crosshair { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s ease; overflow: hidden; }
.crosshair.on { opacity: 1; }
.is-scrolled .crosshair { opacity: 0; }
.ch-x, .ch-y { position: absolute; background: var(--red); opacity: .5; }
.ch-x { left: 0; right: 0; top: 0; height: 1px; }
.ch-y { top: 0; bottom: 0; left: 0; width: 1px; }
.ch-label { position: absolute; left: 0; top: 0; font-size: 12px; color: var(--red); background: var(--paper); padding: 3px 7px; white-space: pre; }
@media (hover: hover) and (pointer: fine) {
  .hero:not(.is-scrolled) .hero-visual { cursor: none; }
}

.hero-copy { position: absolute; left: var(--g); bottom: 11vh; width: min(38vw, 640px); z-index: 3; pointer-events: none; }
.hero-copy a { pointer-events: auto; }
.eyebrow { margin: 0 0 22px; color: var(--ink-2); }
.hero-title { margin: 0; display: grid; }
.ht { grid-area: 1 / 1; display: block; }
.ht--b { opacity: 0; }
.line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.line > span { display: inline-block; }
/* Der Name: groß, aber filigraner (500). Unten genug Luft, damit das „y“ von Kaidy nicht abgeschnitten wird */
.line--xl { font-size: clamp(64px, 10vw, 200px); font-weight: 500; line-height: .84; letter-spacing: -.05em; padding: .06em 0 .28em; margin: -.06em 0 -.28em; }
.line--lg { font-size: clamp(48px, 6.4vw, 124px); font-weight: 500; line-height: .88; letter-spacing: -.045em; padding: .04em 0 .26em; margin: -.04em 0 -.26em; }
.line--role { font-size: clamp(26px, 2.7vw, 52px); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; margin-top: .4em; padding-bottom: .22em; }
.ch { display: inline-block; }
.mark { position: relative; white-space: nowrap; }
.mark-stroke { position: absolute; left: -2%; width: 104%; bottom: -.04em; height: .2em; overflow: visible; }
.mark-stroke path { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; }
.hero-sub { margin: 28px 0 0; max-width: 34ch; color: var(--ink-2); font-size: 17px; line-height: 1.5; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.js .hero .eyebrow, .js .hero-sub, .js .hero-cta { opacity: 0; transform: translateY(10px); }
.js .ht--a .ch, .js .ht--a .line--role > span { transform: translateY(110%); }
/* Mehr Luft unten heißt: die Buchstaben starten etwas tiefer, sonst lugen sie vor dem Aufsteigen hervor */
.js .ht--a .line--xl .ch { transform: translateY(140%); }
.js .mark-stroke path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-drawing .eyebrow { animation: rise .8s var(--ease-out) .2s forwards; }
/* Buchstabe für Buchstabe, 40 ms versetzt: nur beim ersten Laden */
.is-drawing .ht--a .ch { animation: rise .9s var(--ease-out) calc(.3s + var(--ci) * 40ms) forwards; }
.is-drawing .ht--a .line--role > span { animation: rise 1s var(--ease-out) .85s forwards; }
.is-drawing .mark-stroke path { animation: draw .7s var(--ease-in-out) 1.45s forwards; }
.is-drawing .hero-sub { animation: rise .8s var(--ease-out) 1s forwards; }
.is-drawing .hero-cta { animation: rise .8s var(--ease-out) 1.1s forwards; }

/* Porträt-Karte: klares Glas. Kaum Unschärfe und wenig Tönung, damit der Grundriss deutlich durchscheint
   und man sofort sieht, dass es Glas ist. Licht fällt von oben links ein (weicher Glanz innen, kein Rand). */
.glass--dark::after { background-color: rgba(24, 24, 22, .72); background-image: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 60%); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5); }
.glass--clear::before { -webkit-backdrop-filter: blur(2.5px) saturate(1.3) brightness(1.03); backdrop-filter: blur(2.5px) saturate(1.3) brightness(1.03); }
.glass--clear::after { background-color: rgba(255, 255, 255, .2); background-image: linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 30%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .18) 100%); box-shadow: 0 24px 48px -22px rgba(26, 26, 24, .38); }
@media (prefers-reduced-transparency: reduce) { .glass--clear::before { -webkit-backdrop-filter: none; backdrop-filter: none; } .glass--clear::after { background: var(--paper-3); } }
.person { position: absolute; right: var(--g); bottom: 4vh; z-index: 3; display: flex; gap: 16px; width: 420px; padding: 12px; border-radius: 22px; color: var(--ink); }
.person-img { flex: none; width: 118px; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #2a2a28; }
.person-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.person-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 4px 2px 2px 0; }
.person-k { margin: 0; color: var(--ink-3); font-size: 11px; }
.person-name { margin: 6px 0 14px; font-size: 22px; font-weight: 340; line-height: 1.15; letter-spacing: -.015em; }
.btn--light { background: var(--paper); color: var(--ink); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .7); }
.btn--light .btn-ico { background: var(--ink); color: var(--paper); }
.btn--card { --h: 46px; justify-content: space-between; gap: 10px; padding: 0 5px 0 18px; font-size: 15px; }
.btn--card .btn-ico { width: 36px; height: 36px; }
@media (hover: hover) and (pointer: fine) { .btn--light:hover { background: #fff; } }
/* Glas nie als Ganzes einblenden (sonst springt die Unschärfe am Ende), nur seine Ebenen */
.js .person { transform: translateY(10px); }
.js .person::before, .js .person::after, .js .person > * { opacity: 0; }
.is-drawing .person { animation: lift .8s var(--ease-out) 1.5s forwards; }
.is-drawing .person::before, .is-drawing .person::after, .is-drawing .person > * { animation: fadeIn .8s var(--ease-out) 1.5s forwards; }
@keyframes lift { to { transform: none; } }

/* Farbfelder hinter dem Grundriss, damit das Glas Tiefe bekommt */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 94% 6%, rgba(213, 195, 171, .5) 0, transparent 70%),
    radial-gradient(55% 60% at -6% 96%, rgba(41, 72, 98, .13) 0, transparent 72%),
    radial-gradient(42% 40% at 62% 108%, rgba(194, 59, 34, .07) 0, transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
}

/* 3D-Modell selbst drehen */
.drag-hint {
  position: absolute; left: 50%; top: 16px; z-index: 2; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  font-size: 14px; font-weight: 500; color: var(--ink); pointer-events: none; visibility: hidden; transition: visibility 0s linear .3s;
}
.drag-hint svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.drag-hint::before, .drag-hint::after, .drag-hint > * { opacity: 0; transition: opacity .3s var(--ease-out); }
.hero.is-3d:not(.has-dragged) .drag-hint { visibility: visible; transition: none; }
.hero.is-3d:not(.has-dragged) .drag-hint::before, .hero.is-3d:not(.has-dragged) .drag-hint::after, .hero.is-3d:not(.has-dragged) .drag-hint > * { opacity: 1; }
.hero.is-3d .hero-visual { cursor: grab; touch-action: pan-y; }
.hero.is-dragging .hero-visual { cursor: grabbing; }

/* Gemeinsame Grundfläche der Seite (Farbverlauf-Skill, Mechanik 1). Die Farbe setzt das Skript als --surface am html.
   Jede Fläche, die deckend sein muss (z. B. „Vom Plan zum Bau“), liest dieselbe Variable mit fixed, sonst entsteht eine Kante. */
#bgfx { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--surface, var(--paper)); }

/* Bildplätze: Platzhalter, bis das Bild unter dem angegebenen Namen in assets/img liegt */
.ph {
  position: relative; margin: 0; overflow: hidden; border-radius: 0;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(213, 195, 171, .6), transparent 62%),
    radial-gradient(90% 80% at 92% 100%, rgba(41, 72, 98, .16), transparent 70%),
    var(--paper-2);
}
.ph::after { content: attr(data-ph); position: absolute; left: 14px; bottom: 14px; z-index: 0; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .72); font-size: 13px; color: var(--ink-2); }
.ph img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.ph:has(img)::after { display: none; }
.ph:has(img) { background: var(--paper-2); }
.ph--duo { aspect-ratio: 4 / 5; }
.ph--wide { aspect-ratio: 3 / 2; }
.ph--band { aspect-ratio: 21 / 9; }
.ph--solar { aspect-ratio: 4 / 3; }

/* Glas, das erscheint, wenn es ins Bild kommt (ohne Deckkraft am Glas selbst) */
.js .glass-in { transform: translateY(10px); transition: transform .8s var(--ease-out) .45s; }
.js .glass-in::before, .js .glass-in::after, .js .glass-in > * { opacity: 0; transition: opacity .8s var(--ease-out) .45s; }
.glass-in.is-in { transform: none; }
.glass-in.is-in::before, .glass-in.is-in::after, .glass-in.is-in > * { opacity: 1; }
/* Bilder öffnen sich wie ein Vorhang aus der Mitte und zoomen dabei leicht zurück (einmal, beim Hineinscrollen) */
.js .img-reveal { clip-path: inset(0 50% 0 50%); transform: scale(1.12); transition: clip-path 1.25s var(--ease-in-out), transform 1.7s var(--ease-out); }
/* Ausgelöst über den Rahmen: ein ganz weggeschnittenes Bild meldet der Browser nie als sichtbar */
.is-in > .img-reveal { clip-path: inset(0 0 0 0); transform: none; }

/* Überschriften steigen Zeile für Zeile auf */
.ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ln > span { display: inline-block; }
.js [data-lines].is-split .ln > span { transform: translateY(108%); transition: transform .95s var(--ease-out); transition-delay: calc(var(--li) * 70ms); }
.js [data-lines].is-split.is-in .ln > span { transform: none; }

/* ---------- Abschnitte ---------- */
.section { position: relative; padding: clamp(88px, 10vw, 160px) var(--g); }
.h2 { margin: 0; font-weight: 330; font-size: clamp(34px, 4.2vw, 72px); line-height: 1.03; letter-spacing: -.03em; max-width: 18ch; }
.lead { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.5; color: var(--ink-2); max-width: 46ch; margin: 28px 0 0; }

.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--rd, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* 2 · Zwei Wege zur Genehmigung (Szymons Wahl aus drei Entwürfen).
   Oben Satz und Erklärung, darunter die Grafik: der übliche Weg mit Schleifen, meiner gerade.
   Beim Hineinscrollen zeichnen sich beide Wege, auf jedem läuft ein Punkt mit. Meiner kommt zuerst an. */
.statement { position: relative; overflow-x: clip; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 24px) var(--g) 56px; }
.vc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(24px, 5vw, 96px); margin-bottom: clamp(28px, 6vh, 72px); }
.vc-h { margin: 0; max-width: 13ch; font-weight: 300; font-size: clamp(40px, 5vw, 96px); line-height: .98; letter-spacing: -.04em; }
.vc-lead { margin: 0; max-width: 40ch; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.vc-fig { margin: 0; }
.vc-svg { display: block; width: 100%; height: auto; max-height: 44vh; overflow: visible; }
.vc-svg--tall { display: none; }
.vc-p { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vc-p--long { stroke: var(--ink-3); stroke-width: 1.8; }
.vc-p--short { stroke: var(--ink); stroke-width: 2.6; }
.vc-dot { fill: var(--paper-3); stroke: var(--ink-3); stroke-width: 1.8; }
.vc-dot--ink { stroke: var(--ink); }
.vc-run--long { fill: var(--ink-3); }
.vc-run--short { fill: var(--red); }
/* Beschriftung der Wege: groß, damit man sofort versteht, worum es geht */
.vc-tl { font-family: var(--sans); font-size: 30px; font-weight: 400; letter-spacing: -.02em; fill: var(--ink); }
.vc-tl--red { fill: var(--red); }
.vc-tl--s { font-size: 21px; }
.vc-ts { font-family: var(--sans); font-size: 17px; fill: var(--ink-3); }
.vc-ts--s { font-size: 13.5px; }
.vc-lb { font-family: var(--sans); font-size: 17px; fill: var(--ink-3); text-anchor: middle; }
.vc-lb--l { text-anchor: start; font-size: 16px; }
.vc-lb--ink { fill: var(--ink); }
.vc-lb--red { fill: var(--red); }
/* Bewegung: Striche zeichnen sich, die Stationen erscheinen, wenn der Punkt sie erreicht (Erklärgrafik, einmal pro Besuch) */
.js .vc-p { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .vc-late, .js .vc-run { opacity: 0; }
.vc-fig.is-play .vc-p--long { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s var(--ease-in-out); }
.vc-fig.is-play .vc-p--short { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-in-out); }
.vc-fig.is-play .vc-run { opacity: 1; }
.vc-fig.is-play .vc-late { opacity: 1; transition: opacity .35s var(--ease-out) var(--t); }

/* Profil */
.profil { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 100vh; height: 100svh; min-height: 640px; }
/* Foto rechts, damit sich die Bildseite mit den Leistungen (Bild links) abwechselt */
.profil-photo { order: 2; }
.profil-photo { position: relative; height: 100%; margin: 0; overflow: hidden; }
.profil-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.profil-copy { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 16px) clamp(32px, 5vw, 96px) 40px var(--g); }
.profil-k { margin: 0 0 16px; color: var(--red); }
.profil-h { margin: 0; font-weight: 300; font-size: clamp(44px, 5vw, 96px); line-height: .94; letter-spacing: -.04em; }
.profil-lead { margin: clamp(18px, 3vh, 32px) 0 0; max-width: 40ch; font-size: clamp(17px, 1.35vw, 22px); line-height: 1.45; color: var(--ink); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(22px, 4vh, 44px); }
.stat b { display: block; font-weight: 300; font-size: clamp(48px, 5vw, 96px); line-height: .85; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 10px; max-width: 16ch; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.profil-note { margin: clamp(18px, 3vh, 32px) 0 0; font-size: 14px; color: var(--ink-3); }
.profil-cta { align-self: flex-start; margin-top: clamp(18px, 3vh, 28px); }
.portrait-tag { position: absolute; left: 24px; bottom: 28px; z-index: 2; display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px; font-size: 14px; font-weight: 500; color: var(--ink); }
.facts { margin: 48px 0 0; border-top: 1px solid var(--ink); }
.facts > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--ink-3); padding-top: 3px; }
.facts dd { margin: 0; font-size: 16px; }

/* Leistungen als Maßkette */
.chain { position: relative; margin-top: clamp(56px, 7vw, 110px); }
.chain-line { position: absolute; left: 0; right: 0; top: 34px; height: 1px; background: var(--ink); }
.js .chain-line { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease-in-out); }
.chain.is-in .chain-line { clip-path: inset(0 0 0 0); }
.chain-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.chain-item { position: relative; padding-right: clamp(12px, 1.8vw, 32px); }
.chain-item::before { content: ""; position: absolute; left: 0; top: 22px; width: 1px; height: 24px; background: var(--ink); }
.chain-no { display: block; height: 34px; line-height: 30px; text-align: center; color: var(--ink-2); }
.tick { position: absolute; left: 0; top: 34px; width: 18px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%) rotate(-45deg); }
.tick--end { left: auto; right: 0; transform: translate(50%, -50%) rotate(-45deg); }
.chain::after { content: ""; position: absolute; right: 0; top: 22px; width: 1px; height: 24px; background: var(--ink); }
.chain-item h3 { margin: 44px 0 12px; font-size: clamp(19px, 1.5vw, 23px); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
.chain-item p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.chain-item--focus .tick { background: var(--red); }
.focus-tag { display: inline-flex; align-items: center; height: 28px; margin-top: 16px; padding: 0 12px; border-radius: 999px; background: rgba(194, 59, 34, .08); color: var(--red); font-size: 12px; }
.js .chain-item > :not(.tick) { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(.35s + var(--i) * .12s); }
.js .chain-item .tick, .js .tick--end, .js .chain-item::before, .js .chain::after { opacity: 0; transition: opacity .4s var(--ease-out); transition-delay: calc(.3s + var(--i, 5) * .12s); }
.chain.is-in .chain-item > :not(.tick), .chain.is-in .tick, .chain.is-in .tick--end, .chain.is-in .chain-item::before, .chain.is-in::after { opacity: 1; transform: none; }
.chain-item .tick { transform: translate(-50%, -50%) rotate(-45deg); }

/* 5 · Vom Plan zum Bau: Bühne bleibt stehen, eine rote Linie schiebt das Foto über die Bauzeichnung.
   Text gibt es zweimal (Tusche auf der Zeichnung, weiß auf dem Foto), so wechselt die Farbe genau an der Linie. */
.band { position: relative; height: 240vh; }
.band-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--surface, var(--paper)); background-attachment: fixed; }
.band-photo, .band-plan { position: absolute; inset: 0; }
/* Eigene Ebenen, damit der weiße Text des Fotos nicht über die Zeichnung rutscht */
.band-photo { z-index: 0; }
.band-plan { z-index: 1; }
.band-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; filter: saturate(.86) contrast(1.03); }
.band-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20, 22, 27, .32), rgba(20, 22, 27, 0) 50%); }
.band-plan { background: var(--surface, var(--paper)); background-attachment: fixed; }
.band-plan::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--rule-2) 1px, transparent 1px), linear-gradient(90deg, var(--rule-2) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 80%, transparent 100%); }
.band-draw { position: absolute; inset: 0; width: 100%; height: 100%; }
.band-draw path, .band-draw rect { fill: none; stroke: var(--ink); stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.band-draw .bd-main { stroke-width: 2.6px; }
.band-draw .bd-ground { stroke-width: 2.2px; }
.band-draw .bd-fine { stroke-width: .8px; opacity: .55; }
.band-draw .bd-dim { stroke-width: .9px; stroke: var(--ink-2); }
.band-draw .bd-t { font-family: var(--mono); font-size: 7px; fill: var(--ink-2); text-anchor: middle; letter-spacing: .06em; }
.band-draw .bd-t--l { text-anchor: start; }
.band-word { position: absolute; left: var(--g); top: calc(var(--header-h) + clamp(24px, 6vh, 72px)); z-index: 1; margin: 0; font-weight: 800; font-size: clamp(64px, 11vw, 220px); line-height: .86; letter-spacing: -.055em; color: var(--ink); }
.band-word--photo { color: rgba(255, 255, 255, .92); }
.band-split { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--red); transform: translateX(100vw); will-change: transform; z-index: 3; }
.band-tag { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--paper-3); box-shadow: 0 10px 28px -12px rgba(26, 26, 24, .45); font-size: 13px; font-weight: 400; color: var(--ink); white-space: nowrap; }
.band-tag b { font-weight: 400; }
.band-tag i { width: 1px; height: 14px; background: var(--rule); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Farbverlauf-Skill, Mechanik 2: ruhige Farbfelder in Sand, Nachtblau und Braun hinter dem Inhalt.
   Oben und unten laufen sie aus, damit an keiner Abschnittsgrenze eine Kante entsteht. Inhalt bleibt darüber (isolation). */
.statement, .profil, .leistungen, .projekte, .solar-s, .kontakt, .site-footer { isolation: isolate; }
.statement::before, .profil::before, .leistungen::before, .projekte::before, .solar-s::before, .kontakt::after, .site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
/* Runde 7: Felder kräftiger, damit der Verlauf wie im Werdegang spürbar wird. Text bleibt dunkel auf hell lesbar. */
.statement::before { background: radial-gradient(62% 72% at 90% 16%, rgba(213, 195, 171, .78) 0, transparent 70%), radial-gradient(60% 64% at -6% 98%, rgba(41, 72, 98, .24) 0, transparent 72%), radial-gradient(44% 44% at 62% 74%, rgba(194, 59, 34, .09) 0, transparent 70%); }
.profil::before { background: radial-gradient(72% 72% at 0% 18%, rgba(213, 195, 171, .72) 0, transparent 70%), radial-gradient(52% 52% at 44% 106%, rgba(58, 42, 27, .18) 0, transparent 70%), radial-gradient(40% 46% at 8% 104%, rgba(41, 72, 98, .16) 0, transparent 70%); }
.leistungen::before { background: radial-gradient(62% 32% at 100% 5%, rgba(41, 72, 98, .26) 0, transparent 72%), radial-gradient(72% 36% at -6% 44%, rgba(213, 195, 171, .74) 0, transparent 72%), radial-gradient(58% 32% at 88% 92%, rgba(58, 42, 27, .16) 0, transparent 72%); }
.projekte::before { background: radial-gradient(70% 70% at 4% 10%, rgba(213, 195, 171, .74) 0, transparent 70%), radial-gradient(55% 60% at 96% 100%, rgba(41, 72, 98, .2) 0, transparent 72%), radial-gradient(45% 50% at 50% 104%, rgba(58, 42, 27, .14) 0, transparent 70%); }
/* Solarparks: Felder liegen auch hinter dem Foto, damit dort nie eine leere Fläche steht. Beim Abdunkeln treten sie zurück. */
.solar-s::before { opacity: calc(1 - var(--night, 0)); background: radial-gradient(64% 70% at 0% 30%, rgba(213, 195, 171, .76) 0, transparent 70%), radial-gradient(60% 60% at 6% 104%, rgba(41, 72, 98, .24) 0, transparent 72%), radial-gradient(40% 40% at 34% 84%, rgba(58, 42, 27, .12) 0, transparent 70%), radial-gradient(48% 62% at 82% 22%, rgba(213, 195, 171, .7) 0, transparent 70%), radial-gradient(46% 56% at 100% 96%, rgba(41, 72, 98, .26) 0, transparent 72%), radial-gradient(36% 40% at 62% 70%, rgba(58, 42, 27, .12) 0, transparent 70%); }
.kontakt::after { background: radial-gradient(62% 72% at 10% 34%, rgba(213, 195, 171, .78) 0, transparent 70%), radial-gradient(54% 64% at 96% 96%, rgba(41, 72, 98, .24) 0, transparent 72%), radial-gradient(40% 40% at 50% 104%, rgba(194, 59, 34, .07) 0, transparent 70%); }
.site-footer { position: relative; }
.site-footer::before { background: radial-gradient(62% 72% at 10% 0%, rgba(213, 195, 171, .72) 0, transparent 70%), radial-gradient(54% 64% at 100% 100%, rgba(58, 42, 27, .18) 0, transparent 70%); }

/* Einheitlicher Bildton für alle Stimmungsbilder, damit sie wie eine Serie wirken */
.ss-img { filter: saturate(.86) contrast(1.03); }

/* 4 · Leistungen als Planblätter */
.leistungen { position: relative; }
.lv-cta { display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; }
.lv-cta p { margin: 0; max-width: 40ch; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* Jedes Blatt legt sich beim Scrollen auf den Stapel, das darunter tritt leicht zurück */
.lv-c { padding: clamp(88px, 10vw, 140px) var(--g) clamp(72px, 9vw, 120px); }
.lvc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 64px; flex-wrap: wrap; margin-bottom: clamp(32px, 5vh, 64px); }
.lvc-lead { margin: 0 0 .3em; max-width: 42ch; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.5; color: var(--ink-2); }
.lvc-sheet { transform-origin: 50% 0; position: sticky; top: calc(var(--header-h) + 20px + var(--i) * 22px); height: min(62vh, 560px); display: grid; grid-template-columns: auto 1fr minmax(180px, 32%); gap: clamp(20px, 4vw, 64px); align-items: center; margin-bottom: 18vh; padding: clamp(24px, 3vw, 48px); background: var(--paper-3); box-shadow: 0 -1px 0 var(--rule), 0 30px 60px -30px rgba(26, 26, 24, .35); }
.lvc-veil { position: absolute; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; }
.lvc-body .focus-tag { margin: 0 0 14px; }
.lvc-meta { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; }
.lvc-no { font-weight: 820; font-size: clamp(96px, 12vw, 220px); line-height: .8; letter-spacing: -.06em; }
.lvc-meta .mono { color: var(--ink-3); }
.lvc-body h3 { margin: 0 0 14px; font-size: clamp(28px, 2.8vw, 50px); font-weight: 400; line-height: 1.05; letter-spacing: -.03em; }
.lvc-body p { margin: 0; max-width: 36ch; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.5; color: var(--ink-2); }
.lvc-draw { width: 100%; height: auto; }
.lvc-draw path, .lvc-draw circle { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.lvc-draw .d--med { stroke-width: 2.2; }
.lvc-draw .d--faint { opacity: .4; }
.lvc-draw .d--fill { fill: var(--red); stroke: none; }
.lvc-draw .d--red { stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lv-c .lv-cta { margin-top: 4vh; }

/* 7 · Solarparks: geteilt, Text links, Foto rechts */
.solar-s { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; }
.ss-media { margin: 0; overflow: hidden; }
.ss-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-k { margin: 0 0 16px; color: var(--red); }
.ss-h { margin: 0 0 18px; font-weight: 300; font-size: clamp(36px, 4vw, 76px); line-height: .96; letter-spacing: -.035em; }
.ss-text { margin: 0 0 28px; max-width: 40ch; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.5; color: var(--ink-2); }
.solar-s { display: grid; grid-template-columns: 5fr 7fr; }
.solar-s .ss-media { order: 2; }
.ss-copy { align-self: center; padding: var(--header-h) clamp(32px, 4vw, 80px) 0 var(--g); }


/* Projekte */
.projekte { position: relative; overflow: hidden; }
.track { display: flex; align-items: stretch; gap: clamp(20px, 2.4vw, 40px); width: max-content; height: 100vh; height: 100svh; padding: calc(var(--header-h) + 5vh) var(--g) 6vh; will-change: transform; }
.projekte-head { flex: 0 0 min(28vw, 440px); display: flex; flex-direction: column; justify-content: space-between; padding-right: 2vw; padding-bottom: 56px; }
.projekte-head .note { color: var(--ink-3); max-width: 30ch; font-size: 15px; line-height: 1.55; margin: 0; }
.sheets { display: flex; gap: clamp(20px, 2.4vw, 40px); height: 86%; align-self: flex-end; }
.sheet { --sw: .45; --sm: .8; position: relative; flex: 0 0 auto; height: 100%; aspect-ratio: 1.414 / 1; display: grid; grid-template-rows: 1fr auto; border: 1px solid var(--ink); background: var(--paper-3); }
.sheet-draw { position: relative; padding: 4% 5%; border-bottom: 1px solid var(--ink); min-height: 0; }
.sheet-draw svg { width: 100%; height: 100%; }
.sheet-tag { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-size: 12px; }
.sheet-tag--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.sheet-meta { display: grid; grid-template-columns: 1.2fr 1.8fr .8fr; }
.sf { padding: 11px 14px 12px; border-right: 1px solid var(--rule); min-width: 0; }
.sf:last-child { border-right: 0; }
.sf-k { display: block; color: var(--ink-3); font-size: 11px; margin-bottom: 4px; }
.sf-v { display: block; margin: 0; font-size: 15px; line-height: 1.3; font-weight: 400; hyphens: auto; overflow-wrap: break-word; }
.sf--title { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 15px 14px 14px; }
.sf--title .sf-v { font-size: clamp(19px, 1.5vw, 25px); font-weight: 460; letter-spacing: -.012em; }
.sf--title .sf-k { margin: 0; white-space: nowrap; }
.sheet .pl { fill: none; stroke: var(--ink); stroke-width: var(--sw); }
.sheet .pl--med { stroke-width: var(--sm); }
.sheet .pl--faint { opacity: .4; }
.sheet .pf { fill: var(--ink); }
.sheet .pt { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; fill: var(--ink-2); text-transform: uppercase; }
.js .sheet .pl { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .sheet .pf, .js .sheet .pt { opacity: 0; }
.sheet.is-in .pl { animation: draw 1.1s var(--ease-in-out) var(--d, 0s) forwards; }
.sheet.is-in .pf { animation: fadeIn .5s var(--ease-out) var(--d, 0s) forwards; }
.sheet.is-in .pt { animation: fadeIn .6s var(--ease-out) 1.2s forwards; }

/* Werdegang: dunkler Abschnitt mit Zeitstrahl */
.werdegang {
  position: relative; color: var(--ink); background: #161B24;
  --ink: #F2EFE7; --ink-2: rgba(242, 239, 231, .72); --ink-3: rgba(242, 239, 231, .48);
  --rule: rgba(242, 239, 231, .18); --rule-2: rgba(242, 239, 231, .07); --paper: #161B24; --red: #E6643F;
}
/* Der Werdegang hat keine eigene Fläche mehr: Die gemeinsame Grundfläche wird beim Scrollen dunkel und wieder hell.
   Ist es noch (oder wieder) hell, steht der Werdegang in dunkler Schrift, in der Nacht in heller. */
.has-surface .werdegang { background: transparent; isolation: isolate; transition: color .25s ease; }
.has-surface:not(.is-dusk) .werdegang { --ink: #1A1A18; --ink-2: #4F4C45; --ink-3: #8A867C; --rule: rgba(26, 26, 24, .18); --rule-2: rgba(26, 26, 24, .08); --paper: #F2EFE7; --red: #C23B22; }
.has-surface .werdegang::before { opacity: var(--night, 0); }
.werdegang .g-sub, .werdegang .g-years, .werdegang .g-axis span, .werdegang .g-ms b { transition: color .25s ease; }
/* Kontakt: Kommt er noch in der Nacht ins Bild, steht seine linke Spalte hell, beim Hellwerden wechselt sie */
.kontakt-copy { color: var(--ink); transition: color .25s ease; }
.is-dusk .kontakt-copy { --ink: #F2EFE7; --ink-2: rgba(242, 239, 231, .72); --ink-3: rgba(242, 239, 231, .48); }
.has-surface .kontakt::after { opacity: calc(1 - var(--night, 0)); }
/* Solarparks: beim Abdunkeln wechselt die Schrift bei der Hälfte auf hell, der Knopf kehrt sich um.
   Farbwechsel mit kurzer Transition, damit nie graue Schrift auf grauem Grund steht. */
.has-surface .solar-s { z-index: 1; color: var(--ink); transition: color .25s ease; }
.solar-s .ss-k, .solar-s .ss-text { transition: color .25s ease; }
.solar-s .btn--ink { transition: transform .16s var(--ease-out), background-color .25s ease, color .25s ease; }
.is-dusk .solar-s { --ink: #F2EFE7; --ink-2: rgba(242, 239, 231, .72); --paper: #1A1A18; --red: #E6643F; }
.is-dusk .solar-s .btn-ico { background: rgba(26, 26, 24, .08); }
/* Farbfelder in Nachtblau, Sand und Braun hinter dem Inhalt, oben und unten auslaufend (Farbverlauf-Skill, Mechanik 2) */
.werdegang::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(90% 76% at -12% 18%, rgba(26, 41, 64, .7) 0, transparent 72%),
    radial-gradient(82% 68% at 110% 8%, rgba(213, 195, 171, .2) 0, transparent 72%),
    radial-gradient(90% 78% at 110% 62%, rgba(41, 72, 98, .48) 0, transparent 73%),
    radial-gradient(84% 72% at -8% 72%, rgba(58, 42, 27, .46) 0, transparent 73%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 80%, transparent 100%);
}
.wg-inner { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 24px) var(--g) 40px; }
.wg-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(20px, 3.5vh, 44px); }
.wg-head .h2 { max-width: 15ch; font-size: clamp(32px, 3.4vw, 58px); }
.wg-year { flex: none; text-align: right; }
.wg-year b { display: block; font-weight: 300; font-size: clamp(64px, 8.4vw, 160px); line-height: .8; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.wg-year span { display: block; margin-top: 14px; font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.werdegang:not(.is-scrub) .wg-year { display: none; }

.gantt { position: relative; }
.wl { display: none; }
.g-row { display: grid; grid-template-columns: minmax(250px, 28%) 1fr; align-items: center; min-height: clamp(44px, 6.6vh, 62px); border-bottom: 1px solid var(--rule-2); }
.g-row--axis { min-height: 32px; border-bottom-color: var(--rule); }
.g-axis { position: relative; height: 32px; }
.g-axis span { position: absolute; bottom: 8px; transform: translateX(-50%); color: var(--ink-3); font-size: 12px; }
.g-label { min-width: 0; padding: 6px 24px 6px 0; transition: opacity .3s ease; }
.g-title { display: block; font-size: 16px; font-weight: 500; line-height: 1.25; transition: color .3s ease; }
.g-sub { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-years { color: var(--ink-3); }
.g-track { position: relative; align-self: stretch; background-image: linear-gradient(to right, var(--rule-2) 1px, transparent 1px); background-size: calc(100% / 17.2) 100%; }
.g-bar { position: absolute; top: 50%; height: 10px; margin-top: -5px; border-radius: 2px; background: var(--ink); color: var(--ink); }
.g-bar--red { background: var(--red); color: var(--red); }
.g-bar--open::after { content: ""; position: absolute; right: -10px; top: 0; border-left: 10px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.g-ms { position: absolute; top: 50%; width: 0; height: 0; z-index: 1; transition: opacity .25s ease; }
.g-ms i { position: absolute; width: 10px; height: 10px; background: var(--paper); border: 1.5px solid var(--ink); transform: translate(-50%, -50%) rotate(45deg); }
.g-ms b { position: absolute; bottom: 10px; transform: translateX(-50%); font-size: 11px; font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.g-sweep { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(250px, 28%) 1fr; pointer-events: none; }
.g-sweep-track { position: relative; }
.g-sweep i { position: absolute; top: 0; bottom: 0; left: 0; width: 1.5px; background: var(--red); box-shadow: 0 0 14px rgba(230, 100, 63, .55); }
.gantt:not(.is-scrub) .g-sweep { display: none; }
/* Beim Scrollen: noch nicht erreichte Stationen gedimmt, laufende rot */
.gantt.is-scrub .g-row:not(.is-reached) .g-label { opacity: .3; }
.gantt.is-scrub .g-row.is-now .g-title { color: var(--red); }
.gantt.is-scrub .g-ms:not(.is-on) { opacity: 0; }
/* Ohne Scroll-Steuerung: Balken zeichnen sich beim Hineinscrollen */
.js .gantt:not(.is-scrub) .g-bar { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-in-out); transition-delay: calc(.2s + var(--i) * .09s); }
.gantt.is-in:not(.is-scrub) .g-bar { clip-path: inset(0 -12px 0 0); }

/* Kontakt */
.kontakt { overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--header-h) + 24px); padding-bottom: 40px; }
/* Millimeterpapier hinter dem Formular, damit man das Glas sieht */
.kontakt::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--rule-2) 1px, transparent 1px), linear-gradient(90deg, var(--rule-2) 1px, transparent 1px), linear-gradient(rgba(26, 26, 24, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 26, 24, .12) 1px, transparent 1px);
  background-size: 12px 12px, 12px 12px, 60px 60px, 60px 60px;
  -webkit-mask-image: radial-gradient(70% 80% at 72% 60%, #000 30%, transparent 75%); mask-image: radial-gradient(70% 80% at 72% 60%, #000 30%, transparent 75%);
}
.kontakt-grid { position: relative; display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.kontakt-card { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.kontakt-card img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--paper-3), 0 8px 18px -8px rgba(26, 26, 24, .45); }
.kc-name { margin: 0; font-size: 17px; font-weight: 500; }
.kc-line { margin: 2px 0 0; font-size: 14px; color: var(--ink-3); }
.antrag { border-radius: 28px; padding: clamp(18px, 1.8vw, 26px); }
.antrag::after { background-color: rgba(255, 255, 255, .48); }
.antrag-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.antrag-title { margin: 0 0 16px; font-size: clamp(20px, 1.6vw, 24px); font-weight: 400; letter-spacing: -.015em; }
.antrag-sub { margin: 0; font-size: 14px; color: var(--ink-3); }
.antrag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.field { display: block; }
.field--wide { grid-column: 1 / -1; }
.field-l { padding: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
legend.field-l { margin-bottom: 8px; }
.field-l em { font-style: normal; font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.field input, .field textarea {
  display: block; width: 100%; height: 48px; padding: 0 14px; border: 1px solid rgba(26, 26, 24, .16); border-radius: 12px;
  background: rgba(255, 255, 255, .8); font: inherit; font-size: 16px; color: var(--ink); outline: none;
  -webkit-appearance: none; appearance: none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.field textarea { height: auto; min-height: 92px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
.field ::placeholder { color: var(--ink-3); opacity: 1; }
.field input:focus, .field textarea:focus { border-color: var(--ink); background: #fff; box-shadow: 0 0 0 4px rgba(26, 26, 24, .08); }
.field-err { display: none; font-size: 14px; color: var(--red); }
.field.is-error input, .field.is-error textarea { border-color: var(--red); box-shadow: 0 0 0 4px rgba(194, 59, 34, .1); }
.field.is-error .field-err { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid rgba(26, 26, 24, .16); border-radius: 999px;
  background: rgba(255, 255, 255, .72); font-size: 14px; -webkit-user-select: none; user-select: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .16s var(--ease-out);
}
.chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.chip:active span { transform: scale(.97); }
.consent { position: relative; display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.consent input { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: 0; opacity: 0; }
.consent-box { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; border: 1px solid rgba(26, 26, 24, .32); background: rgba(255, 255, 255, .85); transition: background-color .15s ease, border-color .15s ease; }
.consent-box svg { width: 14px; height: 14px; fill: none; stroke: var(--paper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.9); transition: opacity .15s ease, transform .15s var(--ease-out); }
.consent input:checked + .consent-box { background: var(--ink); border-color: var(--ink); }
.consent input:checked + .consent-box svg { opacity: 1; transform: none; }
.consent input:focus-visible + .consent-box { outline: 2px solid var(--red); outline-offset: 2px; }
.consent.is-error .consent-box { border-color: var(--red); box-shadow: 0 0 0 4px rgba(194, 59, 34, .1); }
.consent a { color: var(--ink); }
.antrag-foot { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.form-note { margin: 0; font-size: 14px; color: var(--ink-2); }
.form-note:empty { display: none; }
.note-check { width: 20px; height: 20px; margin-right: 8px; vertical-align: -5px; }
.note-check path { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .5s var(--ease-out) forwards; }
.form-note.is-error { color: var(--red); }
/* Das Glas selbst blendet nicht ein (sonst springt die Unschärfe), nur sein Inhalt */
.js .antrag > * { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .antrag > :nth-child(2) { transition-delay: .06s; }
.js .antrag > :nth-child(3) { transition-delay: .12s; }
.js .antrag > :nth-child(4) { transition-delay: .18s; }
.antrag.is-in > * { opacity: 1; transform: none; }

.section-cta { display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap; margin-top: clamp(56px, 6vw, 96px); }
.section-cta p { margin: 0; max-width: 42ch; color: var(--ink-2); font-size: 16px; line-height: 1.5; }

/* Fußzeile */
.site-footer { padding: clamp(64px, 8vw, 120px) var(--g) calc(72px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.footer-mark { height: clamp(80px, 11vw, 170px); color: var(--ink); }
.footer-word { margin: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); font-weight: 300; font-size: clamp(48px, 14.6vw, 300px); line-height: .85; letter-spacing: -.05em; white-space: nowrap; margin-left: -.05em; }
.footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; padding: 8px 0 28px; margin-bottom: 40px; }
.footer-cta p { margin: 0; font-size: clamp(22px, 2.2vw, 32px); font-weight: 380; letter-spacing: -.015em; }
.footer-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 18px; }
.footer-row nav { display: flex; gap: 20px; }
.footer-row a { text-decoration: none; }

.grain {
  position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Ohne Fixierung (Handy, ruhige Bewegung): Projekte seitlich wischen */
.no-pin .projekte { overflow: visible; }
.no-pin .track { display: block; width: auto; height: auto; padding: clamp(96px, 12vw, 160px) 0 clamp(64px, 8vw, 120px); transform: none !important; }
.no-pin .projekte-head { padding: 0 var(--g); margin-bottom: 40px; gap: 16px; }
.no-pin .sheets { height: auto; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--g); padding: 0 var(--g) 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
.no-pin .sheets::-webkit-scrollbar { display: none; }
.sheets-count { display: none; }
.no-pin .sheets-count { display: flex; align-items: center; gap: 10px; margin: 16px var(--g) 0; color: var(--ink-3); }
.sheets-count b { font-weight: 400; color: var(--ink); }
.no-pin .sheet { width: min(84vw, 760px); height: auto; aspect-ratio: auto; scroll-snap-align: start; }
.no-pin .sheet-draw { aspect-ratio: 1.6 / 1; }

/* Niedrige Computer-Bildschirme (zum Beispiel 1280 × 720): Formular und Werdegang etwas dichter, damit alles auf einen Bildschirm passt */
@media (min-width: 900px) and (max-height: 800px) {
  .kontakt { padding-top: calc(var(--header-h) + 6px); padding-bottom: 16px; }
  .kontakt .h2 { font-size: clamp(30px, 3.4vw, 52px); }
  .kontakt .lead { margin-top: 18px; }
  .antrag { padding: 14px 18px; }
  .antrag-title { margin-bottom: 8px; font-size: 19px; }
  .antrag-grid { gap: 8px 12px; }
  .field { gap: 4px; }
  .field input { height: 40px; }
  .field textarea { min-height: 56px; }
  .chip span { height: 34px; }
  .consent { margin-top: 8px; }
  .antrag-foot { margin-top: 8px; }
  .antrag .btn--block { --h: 46px; }
  .wg-head { margin-bottom: 14px; }
  .g-row { min-height: 40px; }
}

/* ---------- Tablet und Handy ---------- */
@media (max-width: 1100px) and (min-width: 900px) {
  .chain-list { grid-template-columns: repeat(3, 1fr); row-gap: 56px; }
  .chain-line, .tick--end, .chain::after { display: none; }
  .chain-item { border-top: 1px solid var(--ink); }
  .chain-item::before { display: none; }
  .chain-item .tick { top: 0; }
  .chain-no { text-align: left; }
}

@media (max-width: 899px) {
  :root { --header-h: 68px; }
  body { font-size: 16px; }
  .site-header { padding: 0 12px; }
  .nav, .nav-cta { display: none; }
  .menu-btn { display: inline-flex; }
  .mobile-nav { display: flex; }
  .brand { height: 48px; padding: 0 16px 0 12px; gap: 10px; }
  .brand-name { font-size: 13px; }
  .brand-sub { font-size: 10px; }
  .hero-cta { flex-direction: column; align-items: stretch; margin-top: 28px; }
  .hero-cta .btn--ink { justify-content: space-between; }
  .antrag { border-radius: 24px; }
  .antrag-grid { grid-template-columns: 1fr; }
  /* Millimeterpapier hinter dem Formular: früher einsetzen, länger stehen lassen, zum Footer hin weich auslaufen */
  .kontakt::before { -webkit-mask-image: linear-gradient(transparent 6%, #000 34%, #000 64%, transparent 100%); mask-image: linear-gradient(transparent 6%, #000 34%, #000 64%, transparent 100%); }
  /* Werdegang am Handy: Zeitleiste. Senkrechte Linie füllt sich beim Scrollen rot, erreichte Stationen leuchten auf */
  .werdegang .gantt { display: none; }
  .wl { display: block; position: relative; padding-left: 34px; }
  .wl ol { margin: 0; padding: 0; list-style: none; }
  .wl-rail { position: absolute; left: 6px; top: 12px; bottom: 40px; width: 1.5px; background: var(--rule); overflow: hidden; }
  .wl-fill { position: absolute; inset: 0; background: var(--red); transform-origin: 50% 0; transform: scaleY(0); }
  .wl-st { position: relative; padding: 0 0 34px; opacity: .38; transition: opacity .3s ease; }
  .wl-st.is-on { opacity: 1; }
  .wl-dot { position: absolute; left: -34px; top: 9px; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--ink-3); transition: background-color .25s ease, border-color .25s ease; }
  .wl-st.is-on .wl-dot { background: var(--red); border-color: var(--red); }
  .wl-y { margin: 0; font-weight: 300; font-size: 30px; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .wl-t { margin: 8px 0 0; font-size: 19px; font-weight: 400; letter-spacing: -.01em; }
  .wl-s { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
  .wl-st--red .wl-y, .wl-st--red .wl-t { color: var(--red); }
  .werdegang .wg-head { margin-bottom: 32px; }
  .section-cta .btn, .footer-cta .btn { width: 100%; justify-content: space-between; }

  .hero { height: auto; min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--header-h) + 28px); }
  .hero-copy { position: relative; left: auto; bottom: auto; width: auto; padding: 0 var(--g); order: -1; }
  .eyebrow { margin-bottom: 16px; }
  .line--xl { font-size: clamp(56px, 20vw, 104px); }
  .line--lg { font-size: clamp(44px, 14vw, 76px); }
  .line--role { font-size: clamp(24px, 7vw, 34px); }
  .hero-sub { font-size: 16px; margin-top: 18px; }
  .hero-visual { position: relative; top: auto; left: auto; right: auto; bottom: auto; height: min(88vw, 520px); margin-top: 8px; flex: none; }
  /* Unten genug Luft, sonst schneidet der Rand des Startbereichs den Schatten der Karte ab (sah aus wie ein Strich) */
  .person { position: relative; right: auto; bottom: auto; width: auto; margin: 28px var(--g) 72px; order: 6; }
  /* Am Handy steht der Grundriss direkt unter dem Namen, damit er im ersten Bildschirm liegt
     und man das Aufbauen zum 3D-Modell beim Scrollen ganz sieht. Text, Knopf und Karte folgen darunter. */
  .hero-copy { display: contents; }
  .hero-copy > * { margin-left: var(--g); margin-right: var(--g); }
  .hero .eyebrow { order: 1; }
  .hero-title { order: 2; }
  .hero-visual { order: 3; }
  .hero-sub { order: 4; }
  .hero-cta { order: 5; }
  .person-img { width: 96px; }
  .person-name { font-size: 19px; }
  .drag-hint { top: 8px; height: 36px; font-size: 13px; }

  .statement { min-height: 0; padding: 96px var(--g) 72px; }
  .vc-head { display: block; margin-bottom: 36px; }
  .vc-h { font-size: clamp(40px, 12vw, 64px); }
  .vc-lead { margin-top: 18px; }
  .vc-svg--wide { display: none; }
  .vc-svg--tall { display: block; max-height: none; max-width: 380px; }
  .profil { height: auto; min-height: 0; grid-template-columns: 1fr; }
  .profil-photo, .solar-s .ss-media { order: 0; }
  .profil-photo { aspect-ratio: 4 / 5; height: auto; }
  .profil-copy { padding: 48px var(--g) 88px; }
  .stats { gap: 10px; }
  .stat span { font-size: 13px; }
  .lvc-sheet { position: relative; top: auto; height: auto; grid-template-columns: 1fr; margin-bottom: 16px; }
  .lvc-meta { flex-direction: row; align-items: baseline; gap: 16px; }
  .lvc-no { font-size: 72px; }
  .lvc-draw { max-width: 220px; }
  .solar-s { height: auto; min-height: 0; }
  .solar-s { grid-template-columns: 1fr; }
  .solar-s .ss-media { aspect-ratio: 4 / 3; }
  .ss-copy { padding: 40px var(--g) 88px; }
  .ss-copy .btn { width: 100%; justify-content: space-between; }
  .ph--duo { aspect-ratio: 4 / 5; }
  .profil { grid-template-columns: 1fr; }
  .profil-photo { position: relative; height: auto; aspect-ratio: 4 / 5; }
  .profil-block, .profil-block + .profil-block { min-height: 0; padding: 48px 0 0; }
  .profil-copy { padding: 0 var(--g) 88px; }
  .profil-cta { width: 100%; justify-content: space-between; }
  /* „Vom Plan zum Bau“ am Handy mit demselben Wechsel wie am Computer. Foto und Zeichnung liegen in einem
     gleich großen Rahmen (Seitenverhältnis des Fotos), der das Haus mittig zeigt, so bleiben beide deckungsgleich. */
  .band { height: 210svh; }
  .band-stage { height: 100svh; }
  .band-photo img, .band-draw { position: absolute; top: 0; bottom: auto; left: 50%; right: auto; height: 100%; width: auto; max-width: none; aspect-ratio: 3200 / 1377; transform: translateX(-78%); object-fit: fill; }
  .band-word { font-size: clamp(56px, 17vw, 96px); top: 88px; }

  .kontakt-grid { grid-template-columns: 1fr; }
  .facts > div { grid-template-columns: 110px 1fr; }

  .chain-line { top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: auto; }
  .js .chain-line { clip-path: inset(0 0 100% 0); }
  .chain-list { grid-template-columns: 1fr; gap: 36px; }
  .chain-item { padding: 0 0 0 32px; }
  .chain-item::before, .chain::after, .tick--end { display: none; }
  .chain-item .tick { left: 0; top: 10px; }
  .chain-no { text-align: left; height: auto; line-height: 1; }
  .chain-item h3 { margin-top: 10px; }

  .sf--title { flex-direction: column; gap: 6px; }
  .sheet-meta { grid-template-columns: 1fr 1fr; }
  .sf:nth-child(2) { border-right: 1px solid var(--rule); }
  .sf:nth-child(4) { border-right: 0; }
  .sf:nth-child(3) { order: 5; grid-column: 1 / -1; border-right: 0; border-top: 1px solid var(--rule); }
  .sf-v { hyphens: manual; }
  .sheet { --sw: .8; --sm: 1.2; }

  .wg-inner { min-height: 0; padding: 88px var(--g) 72px; }
  .wg-head { flex-direction: column; align-items: flex-start; }
  .g-row { grid-template-columns: 1fr; padding: 12px 0 4px; }
  .g-row--axis { padding: 0; }
  .g-row--axis > div:first-child { display: none; }
  .g-label { padding: 0 0 6px; }
  .g-sub { white-space: normal; }
  .g-track { height: 26px; }
  .g-axis span:nth-child(even) { display: none; }
  .g-ms b { display: none; }
  .kontakt { min-height: 0; padding-top: 80px; padding-bottom: 48px; }
  /* Profil am Handy: Name steht schon unter dem Foto, darum kein Schild auf dem Bild und kein „Über mich“ */
  .profil .portrait-tag, .profil-k { display: none; }
  .profil-h { margin-top: 40px; }
  /* Solarparks am Handy: erst der Text, dann das Foto. So dunkelt es beim Weiterscrollen über dem Foto ab */
  .solar-s .ss-media { order: 2; aspect-ratio: 4 / 5; }
  .solar-s .ss-copy { padding: 88px var(--g) 40px; }
  /* Kontakt am Handy kompakter: Karte mit Foto und Formular-Titel weg (die Überschrift sagt es schon), engere Abstände */
  .kontakt-card, .antrag-title { display: none; }
  .kontakt-copy .lead { margin-top: 16px; }
  .kontakt-grid { gap: 28px; }
  .antrag { padding: 16px; }
  .antrag-grid { gap: 12px; }
  .field input { height: 46px; }
  .field textarea { min-height: 104px; }
  .chip span { height: 34px; }
  .consent { margin-top: 14px; }

  .footer-row { flex-direction: column; }
  }

/* ---------- Ruhige Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .plan [pathLength], .js .sheet .pl, .js .mark-stroke path, .js .logo-anim .lg-arc, .js .logo-anim .lg-arm { stroke-dashoffset: 0; animation: none !important; }
  .js .plan .wall { fill-opacity: 1; animation: none !important; }
  .js .plan .fade, .js .sheet .pf, .js .sheet .pt { opacity: 1; animation: none !important; }
  .js .ht--a .ch, .js .ht--a .line--xl .ch, .js .ht--a .line--role > span { transform: none; animation: none !important; }
  .js .person { transform: none; animation: none !important; }
  .js .person::before, .js .person::after, .js .person > * { opacity: 1; animation: none !important; }
  .js [data-lines].is-split .ln > span { transform: none; }
  .js .img-reveal { transform: none; }
  .band { height: auto; }
  .band-stage { position: relative; }
  .vc-fig.is-play .vc-p--long, .vc-fig.is-play .vc-p--short { transition: none; }
  .vc-fig.is-play .vc-late { transition: opacity .3s ease; }
  .js .glass-in { transform: none; }
  .js .glass-in::before, .js .glass-in::after, .js .glass-in > * { transition: opacity .4s ease; }
  .js .img-reveal { clip-path: none; transition: none; }
  .js .img-reveal { opacity: 0; transition: opacity .4s ease; }
  .is-in > .img-reveal { opacity: 1; }
  .js .hero .eyebrow, .js .hero-sub, .js .hero-cta, .js .brand-word { opacity: 1; transform: none; animation: none !important; }
  .js .antrag > * { transform: none; transition: opacity .4s ease; }
  .nav-list--active { transition: opacity .2s ease; }
  .in-hero .nav-cta { transform: none; }
  .mobile-nav::before, .mobile-nav::after { clip-path: none !important; }
  .mobile-nav > * { transform: none !important; }
  .js .logo-anim .lg-stem { clip-path: none; animation: none !important; }
  .js .logo-anim .lg-dot { opacity: 1; transform: none; animation: none !important; }
  .js .logo-anim .lg-leaf { animation: none !important; }
  .js .reveal { transform: none; transition: opacity .4s ease; }
  .js .chain-line, .js .gantt:not(.is-scrub) .g-bar { clip-path: none; transition: none; }
  .js .chain-item > :not(.tick) { transform: none; transition: opacity .4s ease; }
}

/* Rechtsseiten (Impressum, Datenschutz): ruhige Textseite im Stil der Website */
.legal-page { min-height: 100svh; background: var(--paper); }
.legal-page::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 60% at 100% 0%, rgba(213, 195, 171, .6) 0, transparent 70%), radial-gradient(60% 60% at 0% 100%, rgba(41, 72, 98, .14) 0, transparent 72%); }
.legal-header { justify-content: space-between; }
.legal-back { --h: 48px; font-size: 15px; padding: 0 22px; }
.legal { max-width: 760px; margin: 0 auto; padding: calc(var(--header-h) + 72px) var(--g) 64px; }
.legal-k { margin: 0 0 18px; color: var(--red); }
.legal-h { margin: 0 0 40px; font-weight: 300; font-size: clamp(44px, 7vw, 88px); line-height: .98; letter-spacing: -.04em; }
.legal-sec { padding: 22px 0; border-top: 1px solid var(--rule); }
.legal-sec h2 { margin: 0 0 10px; font-size: 19px; font-weight: 400; letter-spacing: -.01em; }
.legal-sec p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.legal-gap { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: rgba(194, 59, 34, .08); color: var(--red); font-size: 13px; line-height: 22px; }
.legal-footer { padding-top: 0; }