/* Wenos Nazhat: Schicht für Schicht
   Alles baut sich in Lagen auf, wie beim 3D-Druck und wie ein Projekt bis zur Freigabe.
   Farben: Aubergine, Lavendel, Rosé und ein Hauch Champagner. */

@font-face {
  font-family: "Mona Sans";
  src: url("fonts/mona.woff") format("woff");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff") format("woff");
  font-weight: 200 600;
  font-style: normal;
  font-display: swap;
}

@property --lx { syntax: '<angle>'; inherits: true; initial-value: 14deg; }
@property --ly { syntax: '<angle>'; inherits: true; initial-value: -16deg; }

/* Farbwelten */

:root, html[data-farbe="1"] {
  --grund: #f6f2f5;
  --flaeche: #ffffff;
  --flaeche-2: #eee7f5;
  --tinte: #22192f;
  --text-2: #4b4159;
  --grau: #766a82;
  --linie: #e4dbe9;
  --akzent: #6a46b8;
  --akzent-tief: #3f2775;
  --akzent-hell: #e6dcf6;
  --zweit: #efcbd6;
  --zweit-tief: #a9506e;
  --gold: #b08a52;
  --gold-hell: #f1e5d0;
  --auf-akzent: #ffffff;
  --schatten-farbe: 58, 32, 92;
  --lage-1: #ede4f8; --lage-1-text: #22192f;
  --lage-2: #dccbf1; --lage-2-text: #22192f;
  --lage-3: #c2a7e7; --lage-3-text: #22192f;
  --lage-4: #a07ed6; --lage-4-text: #1b1326;
  --lage-5: #7451bd; --lage-5-text: #ffffff;
  --lage-6: #46297f; --lage-6-text: #ffffff;
  --schluss-hg: #1e1430;
  --schluss-vg: #f6f0fb;
  --schluss-leise: #b9a9cc;
  --schluss-akzent: #cdb7f7;
  --schluss-gold: #dfc28f;
  --s1: #f6f0fb; --s2: #e6d9fb; --s3: #cdb7f7; --s4: #b499ee; --s5: #ebbccb; --s6: #dfc28f;
}

html[data-farbe="2"] {
  --grund: #f4f3ef;
  --flaeche: #ffffff;
  --flaeche-2: #ebe8f2;
  --tinte: #1f1d29;
  --text-2: #484557;
  --grau: #706c7d;
  --linie: #dfdce4;
  --akzent: #7a5ac2;
  --akzent-tief: #4a3486;
  --akzent-hell: #e3dbf5;
  --zweit: #cad7c3;
  --zweit-tief: #5d7a56;
  --gold: #a4865a;
  --gold-hell: #efe7d6;
  --auf-akzent: #ffffff;
  --schatten-farbe: 40, 36, 70;
  --lage-1: #eae6f6; --lage-1-text: #1f1d29;
  --lage-2: #d6ccef; --lage-2-text: #1f1d29;
  --lage-3: #b9a8e3; --lage-3-text: #1f1d29;
  --lage-4: #9b86d2; --lage-4-text: #17151f;
  --lage-5: #7a5ac2; --lage-5-text: #ffffff;
  --lage-6: #4a3486; --lage-6-text: #ffffff;
  --schluss-hg: #24203a;
  --schluss-vg: #f4f2f8;
  --schluss-leise: #b3aec6;
  --schluss-akzent: #c9bbf2;
  --schluss-gold: #cbd8c3;
  --s1: #f4f2f8; --s2: #e1d9f7; --s3: #c9bbf2; --s4: #ad98e6; --s5: #cad7c3; --s6: #d9c39d;
}

html[data-farbe="3"] {
  --grund: #16111e;
  --flaeche: #201929;
  --flaeche-2: #281f34;
  --tinte: #f3eef8;
  --text-2: #d2c8de;
  --grau: #a598b4;
  --linie: #362c44;
  --akzent: #b99ff3;
  --akzent-tief: #d9c9fb;
  --akzent-hell: #33264a;
  --zweit: #5a3346;
  --zweit-tief: #e2a9bd;
  --gold: #d9b97f;
  --gold-hell: #3a2f22;
  --auf-akzent: #16111e;
  --schatten-farbe: 0, 0, 0;
  --lage-1: #2c2240; --lage-1-text: #f3eef8;
  --lage-2: #3e2f5c; --lage-2-text: #f3eef8;
  --lage-3: #574182; --lage-3-text: #f3eef8;
  --lage-4: #7a5fb4; --lage-4-text: #ffffff;
  --lage-5: #a88ae6; --lage-5-text: #16111e;
  --lage-6: #d9c9fb; --lage-6-text: #16111e;
  --schluss-hg: #0d0912;
  --schluss-vg: #f6f0fb;
  --schluss-leise: #a99bba;
  --schluss-akzent: #c9b2f5;
  --schluss-gold: #dfc28f;
  --s1: #f6f0fb; --s2: #e2d4fb; --s3: #c9b2f5; --s4: #a98be8; --s5: #eab4c6; --s6: #dfc28f;
  color-scheme: dark;
}

:root {
  --hg: var(--grund);
  --vg: var(--tinte);
  --fokus: var(--akzent);
  --rand: clamp(16px, 4vw, 64px);
  --abstand: clamp(80px, 9vw, 128px);
  --abstand-klein: clamp(36px, 4.5vw, 60px);
  --breite: 1320px;
  --kurve: cubic-bezier(.2, .8, .2, 1);
  --weich: cubic-bezier(.65, 0, .35, 1);
  --schrift: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --serife: "Fraunces", Georgia, "Times New Roman", serif;
}

html { overflow-x: clip; }

body {
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 1.125rem;
  line-height: 1.6;
  transition: background-color .5s, color .5s;
}

::selection { background: var(--akzent); color: var(--auf-akzent); }

/* Lagen-Aufbau für den Namen: sichtbare Schichten, aber weich */

.schicht { position: relative; }
.js:not(.ist-bereit) .schicht--sofort { clip-path: inset(100% 0 0 0); }
html.ist-bereit .schicht--sofort { animation: aufbau 1.15s steps(26, end) both; }
html.ist-bereit .schicht--spaet { animation-delay: .22s; }
@keyframes aufbau { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.schicht::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: 0; height: 2px; background: var(--gold); opacity: 0; pointer-events: none; }
html.ist-bereit .schicht--sofort::after { animation: duesenlinie 1.15s steps(26, end) both; }
html.ist-bereit .schicht--spaet::after { animation-delay: .22s; }
@keyframes duesenlinie { 0% { bottom: 0; opacity: 1; } 99% { bottom: 100%; opacity: 1; } 100% { bottom: 100%; opacity: 0; } }

/* Eröffnung */

.intro { background: transparent; }
.intro__lagen { position: absolute; inset: 0; display: flex; flex-direction: column-reverse; }
.intro__lagen i { flex: 1; transform: scaleX(0); transform-origin: left; animation: lage-rein .34s var(--kurve) calc(var(--i) * 55ms) forwards; }
.intro__lagen i:nth-child(odd) { transform-origin: right; }
.intro__lagen i:nth-child(6n + 1) { background: var(--lage-6); }
.intro__lagen i:nth-child(6n + 2) { background: var(--lage-5); }
.intro__lagen i:nth-child(6n + 3) { background: var(--lage-4); }
.intro__lagen i:nth-child(6n + 4) { background: var(--lage-3); }
.intro__lagen i:nth-child(6n + 5) { background: var(--lage-2); }
.intro__lagen i:nth-child(6n) { background: var(--lage-1); }
@keyframes lage-rein { to { transform: scaleX(1.001); } }
html.intro-geht .intro__lagen i { animation: lage-raus .45s var(--weich) calc((11 - var(--i)) * 35ms) forwards; }
@keyframes lage-raus { from { transform: scaleX(1.001); } to { transform: scaleX(0); } }
.intro__zahl { position: absolute; left: 50%; top: 50%; margin: 0; padding: 10px 18px; border-radius: 999px; background: var(--tinte); color: var(--grund); font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; translate: -50% -50%; opacity: 0; animation: zahl-rein .3s ease .3s forwards; }
@keyframes zahl-rein { to { opacity: 1; } }
html.intro-geht .intro__zahl { opacity: 0; transition: opacity .2s; animation: none; }

/* Fortschritt oben: eine Düse zieht einen Faden */

.duese { position: fixed; left: 0; right: 0; top: 0; z-index: 260; height: 3px; pointer-events: none; }
.duese__faden { position: absolute; inset: 0; background: linear-gradient(90deg, var(--lage-3), var(--akzent), var(--zweit-tief)); transform: scaleX(var(--p, 0)); transform-origin: left; }
.duese__kopf { position: absolute; top: 2px; left: 0; width: 12px; height: 14px; translate: calc(var(--p, 0) * 100vw - 6px) 0; background: var(--tinte); clip-path: polygon(0 0, 100% 0, 100% 62%, 70% 62%, 50% 100%, 30% 62%, 0 62%); opacity: 0; transition: opacity .3s; }
html.ist-gescrollt .duese__kopf { opacity: 1; }

/* Knöpfe */

.knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 26px;
  overflow: hidden;
  isolation: isolate;
  border: 1.5px solid var(--tinte);
  border-radius: 999px;
  background: var(--tinte);
  color: var(--grund);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: color .35s, border-color .35s;
}
.knopf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--akzent); transform: translateY(101%); transition: transform .5s var(--kurve); }
.knopf:hover { border-color: var(--akzent); color: var(--auf-akzent); }
.knopf:hover::before { transform: none; }
.knopf--hohl { background: transparent; color: var(--tinte); }
.knopf--klein { height: 42px; padding: 0 20px; font-size: .9375rem; }

.rundknopf { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); color: var(--tinte); font-size: .875rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color .3s, color .3s; }
.rundknopf svg { width: 18px; height: 18px; transition: transform .6s var(--kurve); }
.rundknopf:hover { border-color: var(--akzent); color: var(--akzent); }
.rundknopf:hover svg { transform: rotate(-200deg); }

.pfeilknopf { display: inline-flex; align-items: center; gap: 10px; padding: 0 0 5px; border: 0; background: linear-gradient(var(--akzent), var(--akzent)) 0 100% / 100% 2px no-repeat; color: var(--tinte); font-weight: 650; font-size: 1rem; cursor: pointer; transition: color .3s, background-size .4s var(--kurve); }
.pfeilknopf svg { width: 20px; height: 20px; transition: transform .4s var(--kurve); }
.pfeilknopf:hover { color: var(--akzent); }
.pfeilknopf:hover svg { transform: translateX(5px); }

/* Allgemein */

section { position: relative; max-width: var(--breite); margin: 0 auto; padding: var(--abstand) var(--rand) 0; }
.am-stueck { white-space: nowrap; }
.vorzeile { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--akzent); font-size: .8125rem; font-weight: 650; font-stretch: 110%; letter-spacing: .12em; text-transform: uppercase; }
.vorzeile[data-auftritt]::before { content: ""; width: 22px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .9s var(--kurve) .25s; }
.vorzeile[data-auftritt]:not(.wartet)::before { transform: scaleX(1); }
.punkt { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); }
.punkt::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--akzent); opacity: 0; animation: puls 2.4s var(--kurve) 1.6s infinite; }
@keyframes puls { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.titel { margin: 0 0 20px; font-size: clamp(2.4rem, 5.4vw, 5rem); font-weight: 650; font-stretch: 112%; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.titel--mittel { font-size: clamp(2rem, 3.6vw, 3.3rem); }
.aussage { margin: 0 0 28px; font-family: var(--serife); font-size: clamp(1.8rem, 3.1vw, 2.9rem); font-weight: 300; line-height: 1.16; letter-spacing: -.01em; text-wrap: pretty; }
.abschnitt-kopf { margin-bottom: var(--abstand-klein); }
.abschnitt-kopf--mitte { text-align: center; }
.abschnitt-kopf__lead { max-width: 36em; margin: 0; color: var(--text-2); }
.js [data-woerter].wartet .wort > span { transform: translateY(105%); }
.js [data-woerter].los .wort > span { transition: transform .9s var(--kurve) calc(var(--i) * 45ms); }
[data-auftritt] { transition: opacity .9s var(--kurve), transform .9s var(--kurve); }
.js [data-auftritt].wartet { opacity: 0; transform: translateY(26px); }

/* Kopfzeile, Grundform */

.kopf {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: max(14px, env(safe-area-inset-top)) var(--rand) 14px;
  color: var(--tinte);
  transition: background-color .4s, transform .5s var(--kurve), color .4s;
}
.kopf__name { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; margin-right: auto; font-weight: 700; font-stretch: 118%; font-size: 1.0625rem; letter-spacing: -.01em; text-decoration: none; }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo__satz { display: none; align-items: center; }
html[data-logo="1"] .logo__satz--1, html[data-logo="2"] .logo__satz--2 { display: inline-flex; }
.kopf__wort { display: none; }
/* WN-Monogramm: Linien bleiben bei jeder Größe gleich fein */
.logo__wn { display: block; height: 30px; width: auto; overflow: visible; transition: transform .6s var(--kurve); }
.logo__wn .g { fill: var(--logo-grund, var(--grund)); }
.logo__wn .k { stroke-width: var(--logo-strich, 1.3px); vector-effect: non-scaling-stroke; }
.kopf__name:hover .logo__wn { transform: translateY(-2px); }
.kopf__menue { position: relative; z-index: 2; display: none; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 14px; border: 1.5px solid currentColor; border-radius: 999px; background: none; color: inherit; font-weight: 600; font-size: .9375rem; cursor: pointer; }
.kopf__striche { display: grid; gap: 5px; width: 16px; }
.kopf__striche i { display: block; height: 1.5px; background: currentColor; transition: transform .4s var(--kurve); }
html.menue-offen .kopf__striche i:first-child { transform: translateY(3.25px) rotate(45deg); }
html.menue-offen .kopf__striche i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.kopf__kontakt { position: relative; z-index: 2; }
.navi { display: flex; align-items: center; gap: 28px; font-size: .9375rem; font-weight: 550; }
.navi a { position: relative; text-decoration: none; }
.navi__nr, .navi__fuss, .navi__marke, .navi__kontakt { display: none; }

/* Navi 1: klassische Leiste */

html[data-navi="1"].ist-gescrollt .kopf { background: color-mix(in srgb, var(--grund) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html[data-navi="1"] .kopf.ist-weg { transform: translateY(-100%); }
html[data-navi="1"] .navi a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; border-radius: 2px; background: var(--akzent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--kurve); }
html[data-navi="1"] .navi a:hover::after, html[data-navi="1"] .navi a.ist-aktiv::after { transform: scaleX(1); }
html[data-navi="1"] .navi a.ist-aktiv { color: var(--akzent); }

/* Navi 2: Menü als Vollbild */

html[data-navi="2"] .kopf__menue { display: inline-flex; }
html[data-navi="2"].ist-gescrollt .kopf { background: color-mix(in srgb, var(--grund) 94%, transparent); }
html[data-navi="2"] .navi {
  position: fixed;
  inset: 0;
  z-index: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding: 110px var(--rand) 40px;
  background: var(--schluss-hg);
  color: var(--schluss-vg);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .75s var(--weich), visibility 0s linear .75s;
}
html[data-navi="2"].menue-offen .navi { clip-path: inset(0); visibility: visible; transition: clip-path .75s var(--weich), visibility 0s; }
html[data-navi="2"].menue-offen .kopf { background: transparent; color: var(--schluss-vg); }
html[data-navi="2"].menue-offen { overflow: hidden; }
html[data-navi="2"] .navi a { display: flex; align-items: baseline; gap: 18px; padding: 6px 0; font-size: clamp(2.4rem, 6.4vw, 5.6rem); font-weight: 650; font-stretch: 114%; line-height: 1.04; letter-spacing: -.035em; transform: translateY(40px); opacity: 0; transition: transform .7s var(--kurve), opacity .5s, color .3s; }
html[data-navi="2"].menue-offen .navi a { transform: none; opacity: 1; }
html[data-navi="2"].menue-offen .navi a:nth-of-type(1) { transition-delay: .25s; }
html[data-navi="2"].menue-offen .navi a:nth-of-type(2) { transition-delay: .3s; }
html[data-navi="2"].menue-offen .navi a:nth-of-type(3) { transition-delay: .35s; }
html[data-navi="2"].menue-offen .navi a:nth-of-type(4) { transition-delay: .4s; }
html[data-navi="2"].menue-offen .navi a:nth-of-type(5) { transition-delay: .45s; }
html[data-navi="2"] .navi a:hover, html[data-navi="2"] .navi a.ist-aktiv { color: var(--schluss-akzent); }
html[data-navi="2"] .navi__nr { display: inline; font-size: clamp(.875rem, 1.2vw, 1.05rem); font-weight: 600; font-stretch: 100%; letter-spacing: .04em; color: var(--schluss-gold); }
html[data-navi="2"] .navi__kontakt { display: flex; }
html[data-navi="2"] .navi__fuss { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 1rem; color: var(--schluss-leise); opacity: 0; transition: opacity .5s .5s; }
html[data-navi="2"].menue-offen .navi__fuss { opacity: 1; }
html[data-navi="2"] .navi__fuss a { display: inline; padding: 0; font-size: inherit; font-weight: 500; font-stretch: 100%; letter-spacing: 0; opacity: 1; transform: none; }
html[data-navi="2"].menue-offen .kopf__kontakt { opacity: 0; pointer-events: none; }

/* Navi 3: schwebende Insel mit wanderndem Marker */

html[data-navi="3"] .kopf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--grund) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .4s; pointer-events: none; }
html[data-navi="3"].ist-gescrollt .kopf::before { opacity: 1; }
html[data-ton="dunkel"][data-navi="3"] .kopf::before { background: color-mix(in srgb, var(--schluss-hg) 86%, transparent); }
html[data-navi="3"] .navi {
  position: absolute;
  left: 50%;
  top: max(14px, env(safe-area-inset-top));
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: color-mix(in srgb, var(--flaeche) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px -18px rgba(var(--schatten-farbe), .45);
  transform: translateX(-50%);
}
html[data-navi="3"] .navi a { z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; color: var(--text-2); transition: color .35s; }
html[data-navi="3"] .navi a:hover { color: var(--tinte); }
html[data-navi="3"] .navi a.ist-aktiv { color: var(--akzent-tief); }
html[data-navi="3"] .navi__marke { position: absolute; top: 5px; bottom: 5px; left: 0; display: block; width: 0; border-radius: 999px; background: var(--akzent-hell); opacity: 0; transition: transform .55s var(--kurve), width .55s var(--kurve), opacity .3s; }
html[data-navi="3"] .navi.hat-marke .navi__marke { opacity: 1; }

/* Einstieg */

.held { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(28px, 5vw, 80px); min-height: min(100svh, 940px); padding-top: clamp(104px, 13vh, 140px); padding-bottom: 0; }
.held__name { margin: 0 0 26px; font-size: clamp(3.6rem, 8.4vw, 8.6rem); font-weight: 700; font-stretch: 118%; line-height: .9; letter-spacing: -.035em; }
.held__name .schicht { display: inline-block; }
.held__name .schicht--spaet { color: var(--akzent); }
.held__lead { max-width: 17em; margin: 0 0 16px; font-family: var(--serife); font-size: clamp(1.5rem, 2.3vw, 2.15rem); font-weight: 300; line-height: 1.2; letter-spacing: -.01em; }
.held__text-klein { max-width: 30em; margin: 0 0 32px; color: var(--text-2); font-size: 1.0625rem; }
.held__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.held__vorzeile::before { content: ""; width: 22px; height: 1.5px; background: currentColor; }
.held__zeile { display: inline-block; translate: 0 var(--ty, 0px); }
.js .held__vorzeile, .js .held__lead, .js .held__text-klein, .js .held__knoepfe, .js .druckbuehne { opacity: 0; transform: translateY(18px); }
html.ist-bereit .held__vorzeile, html.ist-bereit .held__lead, html.ist-bereit .held__text-klein, html.ist-bereit .held__knoepfe, html.ist-bereit .druckbuehne { opacity: 1; transform: none; transition: opacity .9s .75s, transform 1.1s var(--kurve) .75s; }
html.ist-bereit .held__vorzeile { transition-delay: .1s; }
html.ist-bereit .held__text-klein { transition-delay: .88s; }
html.ist-bereit .held__knoepfe { transition-delay: 1s; }
html.ist-bereit .druckbuehne { transition-delay: .4s; transition-duration: 1.4s; }

/* Der Drucker steht frei auf der Seite, nur ein weiches Licht dahinter */

.druckbuehne { position: relative; width: 100%; max-width: 660px; margin: 0 0 0 auto; translate: 0 var(--ty, 0px); }
.druckbuehne__schein { position: absolute; inset: -12% -18% 0; z-index: -1; pointer-events: none; background: radial-gradient(closest-side at var(--sx, 50%) var(--sy, 46%), color-mix(in srgb, var(--akzent) 26%, transparent), color-mix(in srgb, var(--zweit-tief) 8%, transparent) 55%, transparent 80%); }
.druckbuehne .drucker { aspect-ratio: 1 / .9; -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, #000 82%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, #000 82%, transparent); mask-composite: intersect; }
.druckbuehne__hinweis { position: absolute; right: 4%; top: 8%; display: inline-flex; align-items: center; gap: 6px; color: var(--grau); font-size: .8125rem; font-weight: 550; pointer-events: none; animation: schweben 4s ease-in-out infinite; transition: opacity .6s; }
.druckbuehne__hinweis svg { width: 18px; height: 18px; }
.druckbuehne:has(.wurde-gedreht) .druckbuehne__hinweis { opacity: 0; }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.druckbuehne__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 18px; max-width: 460px; margin: -6px auto 0; }
.druckbuehne__linie { grid-column: 1 / -1; height: 2px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--tinte) 12%, transparent); }
.druckbuehne__linie i { display: block; height: 100%; background: linear-gradient(90deg, var(--lage-3), var(--akzent) 70%, var(--zweit-tief)); transform: scaleX(var(--druck-fortschritt, 0)); transform-origin: left; transition: transform .6s linear; }
.druckbuehne__status { display: flex; align-items: baseline; gap: 10px; min-width: 0; color: var(--grau); font-size: .875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.druckbuehne__status b { color: var(--tinte); font-weight: 650; }
.druckbuehne__status [data-drucker-status] { overflow: hidden; text-overflow: ellipsis; }
.druckbuehne[data-phase="fertig"] [data-drucker-status], .druckbuehne[data-phase="parken"] [data-drucker-status] { color: var(--akzent); }
.leiseknopf { display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; border: 0; background: none; color: var(--grau); font-size: .875rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color .3s; }
.leiseknopf svg { width: 16px; height: 16px; transition: transform .7s var(--kurve); }
.leiseknopf:hover { color: var(--akzent); }
.leiseknopf:hover svg { transform: rotate(-200deg); }

.drucker {
  --druck-haut: #22192f #8a6ad0 #f4edff;
  --druck-haar: #2a1220 #b0577a #f6d6e2;
  --druck-linie: 34, 25, 47;
  --druck-bett: raster;
  --druck-bett-staerke: 1.25;
  --druck-schatten: 58, 32, 92;
  --druck-akzent: #6a46b8;
  --druck-faden: rgba(106, 70, 184, .5);
  --druck-heiss: #ffffff;
  --druck-glut: 106, 70, 184;
  --druck-sterne: #6a46b8 #b08a52 #e3a3b9;
  --druck-kuehler: #22192f;
  --druck-block: #4b3d63;
  --druck-rippen: #6a5b82;
  --druck-duese: #b08a52;
  --druck-groesse: 1.3;
  --druck-zeit: 84;
  --druck-vorlauf: .3;
  --druck-pendel-tempo: .17;
  --druck-pendel-weite: .42;
  background: none;
}
html[data-farbe="2"] .drucker {
  --druck-haut: #1f1d29 #8f77cf #f2eefc;
  --druck-haar: #1c2a1a #6f8a68 #dce8d6;
  --druck-linie: 31, 29, 41;
  --druck-schatten: 40, 36, 70;
  --druck-akzent: #7a5ac2;
  --druck-faden: rgba(122, 90, 194, .5);
  --druck-glut: 122, 90, 194;
  --druck-sterne: #7a5ac2 #a4865a #8fae88;
  --druck-kuehler: #1f1d29;
  --druck-block: #47445a;
  --druck-rippen: #6a6680;
  --druck-duese: #a4865a;
}
html[data-farbe="3"] .drucker {
  --druck-haut: #1b1328 #9d82e8 #f3ecff;
  --druck-haar: #2a1420 #d58aa6 #ffe3ec;
  --druck-linie: 185, 159, 243;
  --druck-bett: boden;
  --druck-bett-staerke: 1.7;
  --druck-heiss: #f1dcff;
  --druck-schatten: 0, 0, 0;
  --druck-akzent: #b99ff3;
  --druck-faden: rgba(185, 159, 243, .55);
  --druck-glut: 185, 159, 243;
  --druck-sterne: #b99ff3 #d9b97f #eab4c6;
  --druck-kuehler: #0d0912;
  --druck-block: #3a3050;
  --druck-rippen: #5a4d72;
  --druck-duese: #d9b97f;
}

/* Über mich */

.ich { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(36px, 6vw, 100px); }
.ich__bild { position: relative; padding: 30px 30px 0 0; }
.ich__lage { position: absolute; top: 0; right: 0; width: calc(100% - 30px); height: calc(100% - 30px); border-radius: 30px; translate: 0 var(--ty, 0px); }
.ich__lage--1 { background: var(--lage-3); }
.ich__lage--2 { top: 10px; right: 10px; background: var(--zweit); }
.ich__lage--3 { top: 20px; right: 20px; background: var(--gold-hell); }
.ich__foto { position: relative; z-index: 1; margin: 0; overflow: hidden; aspect-ratio: 632 / 624; border-radius: 28px; box-shadow: 0 30px 50px -34px rgba(var(--schatten-farbe), .6); }
.ich__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--kurve); }
.ich__bild:hover .ich__foto img { transform: scale(1.03); }
.ich__ort { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--flaeche); color: var(--tinte); font-size: .8125rem; font-weight: 650; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .35); }
.ich__ort::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); }
.ich__absaetze p { max-width: 36em; margin: 0 0 16px; color: var(--text-2); }
.zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 34px 0 0; }
.zahlen div { padding: 20px 20px 18px; border: 1px solid var(--linie); border-radius: 20px; background: var(--flaeche); transition: transform .6s var(--kurve), border-color .4s; }
.zahlen div:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--akzent) 50%, var(--linie)); }
.zahlen div:nth-child(2) { transition-delay: .06s; }
.zahlen div:nth-child(3) { transition-delay: .12s; }
.zahlen dt { font-family: var(--serife); font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 300; line-height: 1; color: var(--akzent); }
.zahlen dd { margin: 8px 0 0; color: var(--text-2); font-size: .9375rem; line-height: 1.4; }

/* Kompetenzen */

.faecher { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(28px, 5vw, 80px); }
.faecher__liste { display: flex; flex-direction: column; }
.fach { position: relative; display: grid; grid-template-columns: 3em minmax(0, 1fr); align-items: baseline; padding: 20px 0; border: 0; border-top: 1px solid var(--linie); background: none; color: var(--grau); font-size: clamp(1.3rem, 2.1vw, 1.9rem); font-weight: 650; font-stretch: 110%; letter-spacing: -.02em; line-height: 1.15; text-align: left; cursor: pointer; transition: color .35s; }
.fach:last-child { border-bottom: 1px solid var(--linie); }
.fach::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--farbe); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--kurve); }
.fach:hover { color: var(--tinte); }
.fach[aria-selected="true"] { color: var(--tinte); }
.fach[aria-selected="true"]::after { transform: scaleX(1); }
.fach__nr { font-size: .875rem; font-weight: 650; letter-spacing: .04em; color: var(--farbe); transition: transform .5s var(--kurve); }
.fach:hover .fach__nr, .fach[aria-selected="true"] .fach__nr { transform: translateX(5px); }
.faecher__tafeln { position: relative; display: grid; }
.tafel { position: relative; grid-area: 1 / 1; overflow: hidden; padding: clamp(26px, 3.2vw, 44px); border: 1px solid var(--linie); border-radius: 28px; background: var(--flaeche); transition: opacity .35s ease, visibility 0s linear .35s; }
.js .tafel:not(.ist-aktiv) { visibility: hidden; opacity: 0; }
.js .tafel.ist-aktiv { transition: opacity .35s ease; }
.tafel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(90deg, var(--farbe), color-mix(in srgb, var(--farbe) 35%, var(--flaeche))); }
.tafel__titel { margin: 6px 0 14px; font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: 650; font-stretch: 110%; letter-spacing: -.02em; line-height: 1.12; }
.tafel__nr { display: block; margin-bottom: 6px; color: var(--akzent); font-size: .8125rem; font-weight: 650; letter-spacing: .12em; }
.tafel > p { max-width: 34em; margin: 0 0 20px; color: var(--text-2); }
.tafel__unter { margin: 26px 0 10px !important; color: var(--grau) !important; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.stichworte { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stichworte li { padding: 7px 14px; border-radius: 999px; background: color-mix(in srgb, var(--farbe, var(--akzent)) 14%, var(--flaeche)); color: var(--tinte); font-size: .875rem; font-weight: 550; }
.stichworte--klein li { padding: 5px 11px; font-size: .8125rem; }
.werkzeuge { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.werkzeuge li, .werkzeug { display: inline-flex; align-items: center; gap: 9px; padding: 4px 14px 4px 4px; border: 1px solid var(--linie); border-radius: 999px; background: var(--grund); color: var(--tinte); font-size: .9375rem; font-weight: 550; white-space: nowrap; }
.werkzeuge b, .werkzeug b { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--farbe, var(--akzent)); color: #fff; font-size: .6875rem; font-weight: 750; font-stretch: 115%; letter-spacing: .02em; }
html[data-farbe="3"] .werkzeuge b, html[data-farbe="3"] .werkzeug b { color: var(--auf-akzent); }
.werkzeug--analog b { background: var(--gold); font-size: .875rem; }
.tafel.ist-neu .stichworte li, .tafel.ist-neu .werkzeuge li { animation: chip-rein .55s var(--kurve) both; animation-delay: calc(.08s + var(--j, 0) * 45ms); }
.tafel.ist-neu .tafel__titel, .tafel.ist-neu > p:not(.tafel__unter) { animation: tafel-rein .6s var(--kurve) both; }
@keyframes chip-rein { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tafel-rein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Arbeitsweise: links die Station im Detail, rechts der Stapel, beides läuft zusammen */

.ablauf { margin-top: var(--abstand); }
.ablauf__kopf { max-width: 760px; margin-bottom: var(--abstand-klein); }
.ablauf__lead { max-width: 34em; margin: 0; color: var(--text-2); }
.ablauf__strecke { position: relative; height: 320vh; }
.ablauf__buehne { position: sticky; top: clamp(110px, 17vh, 170px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(28px, 5vw, 80px); }
.ablauf__details { display: grid; }
.schritt { grid-area: 1 / 1; position: relative; overflow: hidden; padding: clamp(26px, 3.2vw, 44px); border: 1px solid var(--linie); border-radius: 28px; background: var(--flaeche); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .45s ease, transform .6s var(--kurve); }
.schritt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(90deg, var(--farbe), var(--akzent)); }
.schritt.ist-aktiv { opacity: 1; transform: none; pointer-events: auto; }
.schritt__nr { margin: 6px 0 4px; font-family: var(--serife); font-size: clamp(2.6rem, 4vw, 3.6rem); font-weight: 300; line-height: 1; color: var(--akzent); }
.schritt__nr span { font-size: .4em; color: var(--grau); letter-spacing: .04em; }
.schritt__name { margin: 0 0 12px; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 650; font-stretch: 112%; letter-spacing: -.03em; line-height: 1.05; }
.schritt__satz { max-width: 32em; margin: 0 0 20px; color: var(--text-2); }
.schritt__beispiel { margin: 0 0 18px; padding: 14px 18px; border-radius: 16px; background: color-mix(in srgb, var(--akzent) 10%, var(--grund)); color: var(--tinte); font-size: .9375rem; line-height: 1.5; }
.schritt__beispiel b, .schritt__wer span { display: block; margin-bottom: 4px; color: var(--grau); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.schritt__wer { margin: 0; color: var(--text-2); font-size: .9375rem; }

.ablauf__stapel { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lage { position: relative; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); align-items: center; gap: 14px; padding: 15px 20px; border: 1.5px dashed var(--linie); border-radius: 16px; color: var(--grau); transition: color .5s, border-color .5s, transform .6s var(--kurve); }
.lage::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; background: var(--farbe); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--weich); }
.lage::after { content: ""; position: absolute; left: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 3px; background: var(--farbe); transform: rotate(45deg) scale(0); transition: transform .5s var(--kurve); }
.lage > * { position: relative; z-index: 1; }
.lage.ist-gedruckt { border-color: transparent; color: var(--text); }
.lage.ist-gedruckt::before { transform: scaleX(1); }
.lage.ist-aktuell { transform: translateX(-14px); }
.lage.ist-aktuell::after { transform: rotate(45deg) scale(1); }
.lage[data-lage="0"] { --text: var(--lage-1-text); }
.lage[data-lage="1"] { --text: var(--lage-2-text); }
.lage[data-lage="2"] { --text: var(--lage-3-text); }
.lage[data-lage="3"] { --text: var(--lage-4-text); }
.lage[data-lage="4"] { --text: var(--lage-5-text); }
.lage[data-lage="5"] { --text: var(--lage-6-text); }
.lage__nr { font-weight: 700; font-stretch: 120%; font-variant-numeric: tabular-nums; }
.lage strong { font-size: 1.2rem; font-weight: 650; font-stretch: 110%; }

/* Projekte */

.fall { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(28px, 5vw, 84px); margin-bottom: var(--abstand); }
.fall:last-of-type { margin-bottom: 0; }
.fall--rechts { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.fall--rechts .buehne { order: 2; }
.buehne {
  position: relative;
  display: grid;
  gap: clamp(10px, 1.4vw, 18px);
  width: 100%;
  padding: clamp(18px, 3vw, 40px);
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 34px;
  background: var(--buehne);
  color: inherit;
  cursor: pointer;
  transition: box-shadow .7s var(--kurve);
}
.buehne::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 13px); opacity: .7; }
html[data-farbe="3"] .buehne::before { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 13px); }
.buehne:hover { box-shadow: 0 40px 70px -40px rgba(var(--schatten-farbe), .6); }
.buehne { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: box-shadow .7s var(--kurve), clip-path 1.3s var(--weich); }
.js .buehne.schicht.wartet { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round 34px); }
.buehne.schicht.los { clip-path: inset(0 0 0 0 round 34px); }
.buehne::before { animation: lagen-wandern 26s linear infinite; }
@keyframes lagen-wandern { to { background-position: 0 -260px; } }
.buehne__bild { position: relative; display: block; overflow: hidden; border-radius: 16px; background: rgba(0, 0, 0, .06); box-shadow: 0 22px 34px -22px rgba(0, 0, 0, .45); translate: 0 var(--ty, 0px); }
.buehne__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--kurve); }
.buehne:hover .buehne__bild img { transform: scale(1.045); }
.buehne--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; padding-bottom: clamp(40px, 6vw, 80px); }
.buehne--drei .buehne__bild { aspect-ratio: 559 / 1024; }
.buehne--drei .buehne__bild:nth-child(1) { margin-top: 9%; }
.buehne--drei .buehne__bild:nth-child(3) { margin-top: 18%; }
.buehne--quadrate { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; padding-bottom: clamp(40px, 6vw, 80px); }
.buehne--quadrate .buehne__bild { aspect-ratio: 389 / 404; }
.buehne--quadrate .buehne__bild:nth-child(2) { margin-top: 22%; }
.buehne--quadrate .buehne__bild:nth-child(3) { margin-top: 8%; }
.buehne--galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.buehne--galerie .buehne__bild { aspect-ratio: 16 / 9; }
.buehne--galerie .buehne__bild--gross { grid-column: 1 / -1; aspect-ratio: 1024 / 577; }
.buehne--zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
.buehne--zwei .buehne__bild:nth-child(1) { aspect-ratio: 1009 / 998; }
.buehne--zwei .buehne__bild:nth-child(2) { aspect-ratio: 1024 / 724; }
.fall__art { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: var(--akzent); font-size: .8125rem; font-weight: 650; font-stretch: 110%; letter-spacing: .12em; text-transform: uppercase; }
.fall__art span { display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid currentColor; border-radius: 50%; font-size: .75rem; letter-spacing: 0; }
.fall__titel { margin: 0 0 14px; font-size: clamp(2rem, 3.6vw, 3.3rem); font-weight: 650; font-stretch: 112%; line-height: 1.02; letter-spacing: -.03em; }
.mitnahme { margin: 26px 0 28px; }
.mitnahme__titel { margin: 0 0 10px; color: var(--grau); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mitnahme .stichworte li { --farbe: var(--gold); }
.mitnahme--fenster { margin: 0; }
.fall__satz { max-width: 30em; margin: 0; color: var(--text-2); font-size: 1.0625rem; }

/* Werkzeug-Kette: welcher Schritt mit welchem Programm */
.kette { display: grid; gap: 0; margin: 26px 0 28px; padding: 0; list-style: none; }
.kette li { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 9px 0 9px 30px; }
.kette li::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid var(--akzent); border-radius: 50%; background: var(--grund); transition: background-color .4s; }
.kette li::after { content: ""; position: absolute; left: 6px; top: calc(50% + 7px); width: 2px; height: calc(100% - 14px); background: var(--linie); }
.kette li:last-child::after { display: none; }
.kette__schritt { color: var(--text-2); font-size: .9375rem; font-weight: 550; }
.los .kette li::before, .kette--fenster li::before { background: var(--akzent); transition-delay: calc(.35s + var(--k, 0) * .18s); }
.kette li:nth-child(2) { --k: 1; }
.kette li:nth-child(3) { --k: 2; }
.kette li:nth-child(4) { --k: 3; }

.druckfotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; margin-top: clamp(64px, 8vw, 110px); }
.druckfotos figure { margin: 0; }
.druckfotos .medium { aspect-ratio: 1; border-radius: 18px; }
.druckfotos figcaption { padding-top: 8px; font-size: .875rem; color: var(--grau); }

/* Werdegang: die Düse zieht den Faden von Station zu Station */

.weg__bahn { position: relative; max-width: 1080px; margin: 0 auto; }
.weg__faden { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: var(--linie); transform: translateX(-50%); }
.weg__faden i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(var(--lage-3), var(--akzent) 60%, var(--zweit-tief)); transform: scaleY(var(--weg-p, 0)); transform-origin: top; }
.weg__duese { position: absolute; left: 50%; top: calc(var(--weg-p, 0) * 100%); width: 18px; height: 22px; background: var(--tinte); clip-path: polygon(0 0, 100% 0, 100% 58%, 68% 58%, 50% 100%, 32% 58%, 0 58%); transform: translate(-50%, -100%); }
.weg__duese::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--gold); }
.weg__liste { display: grid; gap: clamp(28px, 4vw, 48px); margin: 0; padding: 12px 0 0; list-style: none; }
.station { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.station__punkt { position: absolute; left: 50%; top: 30px; z-index: 1; width: 20px; height: 20px; border: 3px solid var(--linie); border-radius: 50%; background: var(--grund); transform: translateX(-50%); transition: background-color .5s, border-color .5s, box-shadow .6s var(--kurve); }
.station.ist-erreicht .station__punkt { border-color: var(--farbe); background: var(--farbe); box-shadow: 0 0 0 7px color-mix(in srgb, var(--farbe) 22%, transparent); }
.station__karte { position: relative; overflow: hidden; margin-right: 52px; padding: 26px 28px 24px; border: 1px solid var(--linie); border-radius: 26px; background: var(--flaeche); transition: opacity .7s var(--kurve), transform .7s var(--kurve); }
.station__karte::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--farbe); }
.station:nth-child(even) .station__karte { grid-column: 2; margin: 0 0 0 52px; }
.js .station:not(.ist-erreicht) .station__karte { opacity: .38; transform: translateY(14px); }
.station__zeit { margin: 0 0 8px; font-family: var(--serife); font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 300; line-height: 1; color: var(--akzent); }
.station h3 { margin: 0 0 2px; font-size: 1.3rem; font-weight: 650; font-stretch: 110%; letter-spacing: -.015em; line-height: 1.2; }
.station__ort { margin: 0 0 12px; color: var(--grau); font-size: 1rem; }
.station__karte > p:last-child { margin: 0; color: var(--text-2); font-size: 1rem; }
.station__punkte { margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: 1rem; }
.station__punkte li { position: relative; padding: 5px 0 5px 20px; }
.station__punkte li::before { content: ""; position: absolute; left: 2px; top: .9em; width: 8px; height: 8px; border-radius: 2px; background: var(--farbe); }
.station--heute .station__karte { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); background: linear-gradient(160deg, var(--flaeche) 40%, var(--akzent-hell)); }
.station--heute.ist-erreicht .station__punkt { animation: heute 2.2s var(--kurve) infinite; }
@keyframes heute { 0%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--farbe) 26%, transparent); } 50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--farbe) 6%, transparent); } }

/* Schluss: Kontakt und Fuß in einem */

.schluss {
  position: relative;
  margin-top: var(--abstand);
  overflow: hidden;
  border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
  background:
    radial-gradient(70% 55% at 85% 0%, color-mix(in srgb, var(--s4) 32%, transparent), transparent 70%),
    radial-gradient(50% 45% at 0% 100%, color-mix(in srgb, var(--s5) 18%, transparent), transparent 70%),
    var(--schluss-hg);
  color: var(--schluss-vg);
}
.schluss::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 14px); pointer-events: none; }
.schluss__innen { position: relative; max-width: var(--breite); margin: 0 auto; padding: var(--abstand) var(--rand) max(26px, env(safe-area-inset-bottom)); }
.vorzeile--hell { color: var(--schluss-akzent); }
.lagentitel { position: relative; margin: 0; font-size: clamp(3.4rem, 12.5vw, 12.6rem); font-weight: 750; font-stretch: 112%; line-height: .92; letter-spacing: -.045em; white-space: nowrap; }
.lagentitel__basis { display: block; }
.lagentitel.ist-gebaut .lagentitel__basis { color: transparent; }
.lagentitel__lage { position: absolute; left: 0; top: 0; display: block; color: var(--c); clip-path: inset(var(--oben) -10% var(--unten) -10%); transform: translate3d(var(--x, 0px), 0, 0); pointer-events: none; will-change: transform; }
.schluss__lead { max-width: 22em; margin: 0; font-family: var(--serife); font-size: clamp(1.3rem, 2.1vw, 1.8rem); font-weight: 300; line-height: 1.3; color: var(--schluss-leise); }
.schluss__mail { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mailknopf { position: relative; display: inline-flex; align-items: center; gap: 16px; max-width: 100%; padding: 18px 28px; overflow: hidden; isolation: isolate; border-radius: 999px; background: var(--schluss-vg); color: var(--schluss-hg); font-size: clamp(1.05rem, 2.6vw, 1.9rem); font-weight: 650; font-stretch: 106%; letter-spacing: -.015em; text-decoration: none; transition: color .4s; }
.mailknopf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--s3), var(--s5) 60%, var(--s6)); transform: translateX(-101%); transition: transform .7s var(--kurve); }
.mailknopf:hover::before { transform: none; }
.mailknopf__text { overflow-wrap: anywhere; }
.mailknopf svg { flex: none; width: 1.1em; height: 1.1em; transition: transform .4s var(--kurve); }
.mailknopf:hover svg { transform: translateX(5px) rotate(-45deg); }
.wege { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.wege li:has(> [hidden]) { display: none; }
.weg-knopf { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: transparent; color: var(--schluss-vg); font-size: .9375rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .35s, border-color .35s, color .35s; }
.weg-knopf svg { width: 18px; height: 18px; transition: transform .45s var(--kurve); }
.weg-knopf:hover { border-color: var(--schluss-akzent); background: rgba(255, 255, 255, .06); color: var(--schluss-akzent); }
a.weg-knopf:hover svg { transform: translate(2px, -2px); }
a.weg-knopf[download]:hover svg { transform: translateY(2px); }
.rundknopf--hell { height: 48px; border-color: rgba(255, 255, 255, .24); background: transparent; color: var(--schluss-vg); }
.rundknopf--hell:hover { border-color: var(--schluss-akzent); color: var(--schluss-akzent); }
.rundknopf--hell:hover svg { transform: none; }
.schluss__notiz { min-height: 1.6em; margin: 14px 0 0; color: var(--schluss-akzent); font-weight: 600; opacity: 0; transition: opacity .3s; }
.schluss__notiz.ist-da { opacity: 1; }
.schluss__raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; gap: 28px clamp(32px, 6vw, 96px); margin-top: clamp(28px, 3.5vw, 44px); }
.schluss__brief .schluss__lead { margin: 0 0 6px; }
.schluss__wege { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.schluss__wege .mailknopf { padding: 16px 24px; font-size: clamp(1rem, 1.55vw, 1.4rem); white-space: nowrap; }

.signatur { width: min(100%, 400px); margin: 10px 0 0 -8px; color: var(--schluss-gold); }
.signatur__svg { display: none; width: 100%; height: auto; overflow: visible; }
html[data-unterschrift="1"] .signatur__svg[data-variante="1"], html[data-unterschrift="2"] .signatur__svg[data-variante="2"], html[data-unterschrift="3"] .signatur__svg[data-variante="3"] { display: block; }
.signatur__form { fill: currentColor; }

.schluss__leiste { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: clamp(36px, 5vw, 64px); padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); color: var(--schluss-leise); font-size: .9375rem; }
.schluss__leiste p { margin: 0; }
.schluss__marke { display: flex; align-items: center; gap: 12px; }
.schluss__marke { --logo-grund: var(--schluss-hg); }
.schluss__marke .logo__wn { height: 22px; }
.schluss__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.schluss__links a { color: inherit; text-decoration: none; transition: color .3s; }
.schluss__links a:hover { color: var(--schluss-vg); }

/* Kopfzeile über dem dunklen Schluss */
html[data-ton="dunkel"] .kopf { color: var(--schluss-vg); }
html[data-ton="dunkel"][data-navi="1"].ist-gescrollt .kopf { background: color-mix(in srgb, var(--schluss-hg) 86%, transparent); }
html[data-ton="dunkel"][data-navi="2"].ist-gescrollt .kopf { background: color-mix(in srgb, var(--schluss-hg) 92%, transparent); }
html[data-ton="dunkel"] .kopf .knopf { border-color: var(--schluss-vg); background: var(--schluss-vg); color: var(--schluss-hg); }
html[data-ton="dunkel"] .duese__kopf { background: var(--schluss-vg); }

/* Zeiger */

.zeiger { position: fixed; left: 0; top: 0; z-index: 350; display: none; pointer-events: none; }
.hat-zeiger .zeiger { display: block; }
.zeiger::before { content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--akzent); transition: transform .4s var(--kurve), background-color .3s; }
.zeiger.ist-link::before { transform: scale(1.6); }
.zeiger.ist-aktiv::before { transform: scale(8); }
.zeiger.ist-gedrueckt::before { transform: scale(.8); }
.zeiger__text { position: absolute; left: 0; top: 0; translate: -50% -50%; color: var(--auf-akzent); font-size: .8125rem; font-weight: 650; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.zeiger.ist-aktiv .zeiger__text { opacity: 1; transition-delay: .12s; }

/* Projektansicht */

.fenster { border-radius: 28px; background: var(--grund); color: var(--tinte); }
.fenster::backdrop { background: rgba(20, 12, 32, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.fenster__titel { font-size: clamp(1.8rem, 3.2vw, 2.7rem); font-weight: 700; font-stretch: 115%; letter-spacing: -.03em; line-height: 1; }
.fenster__unterzeile { color: var(--akzent); font-size: .8125rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.fenster__zu { border-radius: 50%; border-color: var(--linie); }
.fenster__einleitung { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px clamp(24px, 4vw, 56px); align-items: start; margin-bottom: 28px; }
.fenster__einleitung .fenster__text { margin: 0; color: var(--text-2); }
.kette--fenster { margin: 0; }
.galerie img, .galerie video { border-radius: 14px; }
.galerie figcaption { color: var(--grau); opacity: 1; }

/* Vorschau der Varianten (nur für die Abstimmung) */

.vorschau { position: fixed; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 320; font: 500 13px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; color: #fff; }
.vorschau__auf { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: rgba(24, 18, 34, .9); color: #fff; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
.vorschau__auf::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #dfc28f; box-sizing: border-box; }
.vorschau__inhalt { position: absolute; left: 0; bottom: 50px; width: 340px; padding: 14px; border-radius: 18px; background: rgba(24, 18, 34, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .3s var(--kurve), visibility 0s linear .3s; }
.vorschau.ist-offen .vorschau__inhalt { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--kurve), visibility 0s; }
.vorschau__titel { margin: 0 0 8px; color: rgba(255, 255, 255, .62); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.vorschau__reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.vorschau__reihe:last-child { margin-bottom: 0; }
.vorschau__reihe button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 4px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: transparent; color: #fff; font: inherit; cursor: pointer; }
.vorschau__reihe button[aria-checked="true"] { border-color: #fff; background: rgba(255, 255, 255, .12); }
.vorschau__logo { display: grid; place-items: center; height: 36px; }
.vorschau__logo svg { width: auto; height: 26px; max-width: 64px; overflow: visible; }
.vorschau__logo .g { fill: #1e1726; }
.vorschau__reihe--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vorschau__unterschrift { display: grid; place-items: center; height: 36px; color: #dfc28f; }
.vorschau__unterschrift svg { width: 74px; height: auto; }
.vorschau__link { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .14); color: #cdb7f7; font-size: 12px; text-decoration: none; }
.vorschau__link:hover { color: #fff; }
.vorschau__reihe i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }

/* Schmal */

@media (max-width: 900px) {
  html[data-navi="1"] .kopf__menue { display: inline-flex; }
  html[data-navi="1"] .kopf__kontakt { display: none; }
  html[data-navi="1"] .navi { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 6px var(--rand) 22px; background: var(--grund); box-shadow: 0 20px 30px -20px rgba(var(--schatten-farbe), .4); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .5s var(--weich), visibility 0s linear .5s; }
  html[data-navi="1"].menue-offen .navi { clip-path: inset(0 0 -40px 0); visibility: visible; transition: clip-path .5s var(--weich), visibility 0s; }
  html[data-navi="1"].menue-offen .kopf { background: var(--grund); }
  html[data-navi="1"] .navi a { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--linie); font-size: 1.45rem; font-weight: 650; font-stretch: 112%; }
  html[data-navi="1"] .navi a::after { display: none; }
  html[data-navi="1"] .navi .navi__nr { display: inline; font-size: .8125rem; color: var(--akzent); }
  html[data-navi="1"] .navi__kontakt { display: flex; }
  html[data-navi="1"][data-ton="dunkel"] .navi { color: var(--tinte); }

  html[data-navi="2"] .kopf__kontakt { display: none; }

  html[data-navi="3"] .kopf__kontakt { display: none; }
  html[data-navi="3"] .navi { position: fixed; left: auto; right: max(14px, env(safe-area-inset-right)); top: auto; bottom: max(14px, env(safe-area-inset-bottom)); transform: none; }
  html[data-navi="3"] .navi a { gap: 0; padding: 0; width: 34px; height: 34px; justify-content: center; overflow: hidden; white-space: nowrap; font-size: 0; transition: width .5s var(--kurve), padding .5s var(--kurve), color .3s; }
  html[data-navi="3"] .navi .navi__nr { display: inline; font-size: .75rem; font-weight: 700; }
  html[data-navi="3"] .navi a.ist-aktiv { width: auto; padding: 0 14px 0 12px; gap: 8px; font-size: .875rem; }
  html[data-navi="3"] .navi a.navi__kontakt { display: inline-flex; }
  html[data-navi="3"] .schluss__leiste { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  .held { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 36px; padding-top: 100px; }
  .druckbuehne { max-width: none; margin: 0; }
  .druckbuehne__schein { inset: -8% -4% 0; }
  .druckbuehne__hinweis { right: 0; top: 2%; }
  .ich { grid-template-columns: minmax(0, 1fr); }
  .ich__bild { max-width: 460px; }
  .faecher { grid-template-columns: minmax(0, 1fr); }
  .faecher__liste { display: none; }
  .faecher__tafeln { display: grid; gap: 16px; }
  .ablauf__strecke { height: 360svh; }
  .ablauf__buehne { top: 72px; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
  .ablauf__stapel { order: -1; gap: 4px; }
  .lage { padding: 8px 14px; gap: 10px; border-radius: 12px; }
  .lage strong { font-size: .98rem; }
  .lage.ist-aktuell { transform: translateX(8px); }
  .lage::after { display: none; }
  .schritt { padding: 18px 18px 16px; border-radius: 20px; }
  .schritt__nr { font-size: 2rem; margin-top: 4px; }
  .schritt__name { font-size: 1.5rem; margin-bottom: 6px; }
  .schritt__satz { margin-bottom: 12px; font-size: 1rem; }
  .schritt__beispiel { padding: 10px 14px; margin-bottom: 10px; font-size: .875rem; }
  .schritt__wer { font-size: .875rem; }
  .js .tafel:not(.ist-aktiv) { visibility: visible; opacity: 1; }
  .faecher__tafeln { gap: 16px; }
  .tafel { grid-area: auto; }
  .logo__wn { height: 26px; }
  .schluss__raster { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .schluss__wege .mailknopf { white-space: normal; font-size: clamp(1rem, 4.4vw, 1.3rem); }
  .lage { grid-template-columns: 1.8em minmax(0, 1fr); gap: 2px 10px; padding: 10px 14px; }
  .lage__satz { grid-column: 2; font-size: .8125rem; }
  .lage strong { font-size: 1.02rem; }
  .fall, .fall--rechts { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .fall--rechts .buehne { order: 0; }
  .buehne { border-radius: 26px; }
  .fenster__einleitung { grid-template-columns: minmax(0, 1fr); }
  .weg__faden { left: 9px; transform: none; }
  .weg__duese { left: 2px; }
  .station { grid-template-columns: minmax(0, 1fr); }
  .station__punkt { left: 11px; }
  .station .station__karte, .station:nth-child(even) .station__karte { grid-column: 1; margin: 0 0 0 40px; padding: 22px 20px 20px 24px; }
  .signatur { width: min(100%, 320px); margin-left: -6px; }
}

@media (max-width: 560px) {
  .zahlen { grid-template-columns: minmax(0, 1fr); }
  .zahlen div { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 14px; padding: 16px 18px; }
  .zahlen dt { min-width: 4.4rem; }
  .zahlen dd { margin: 0; }
  .buehne--quadrate, .buehne--drei { gap: 8px; }
  .kopf__name > span:last-child { font-size: 1rem; }
  .vorschau__auf { width: 40px; padding: 0; justify-content: center; font-size: 0; }
  .vorschau__auf::before { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .ablauf__strecke { height: auto; }
  .ablauf__buehne { position: relative; top: auto; align-items: start; }
  .ablauf__details { gap: 12px; }
  .schritt { grid-area: auto; opacity: 1; transform: none; }
  .js .tafel:not(.ist-aktiv) { visibility: visible; opacity: 1; }
  .tafel { grid-area: auto; }
  .faecher__tafeln { gap: 16px; }
  .lage { border-color: transparent; color: var(--text); }
  .lage::before { transform: none; }
  .js .station:not(.ist-erreicht) .station__karte { opacity: 1; transform: none; }
  .station .station__punkt { border-color: var(--farbe); background: var(--farbe); }
  .weg__faden i { transform: none; }
  .weg__duese { display: none; }
  .punkt::after { display: none; }
}