/* Nachtglut — Probeseite für den Skill „webseiten-design" */

@property --winkel { syntax: '<angle>'; initial-value: 0deg; inherits: true; }

:root {
  --grund: #10111b;
  --text: #f2f3fa;
  --zweit: rgba(160, 168, 220, .7);
  --blass: rgba(187, 194, 229, .3);
  --signal: #e43333;
  --glut-tief: #6b0000;
  --linie: rgba(255, 255, 255, .08);
  --rand: clamp(1rem, 4vw, 3rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --holo: conic-gradient(from var(--winkel), #7af 0%, #c8f 20%, #f9c 40%, #fd8 55%, #8fd 75%, #7af 100%);
  --display: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 300 1rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }

/* ---------- Bühne ---------- */
.korn { position: fixed; inset: 0; width: 100%; height: 100%; opacity: .05; pointer-events: none; z-index: 50; }
.buehne { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.nebel {
  position: absolute; inset: -20%;
  background:
    radial-gradient(40% 35% at 70% 35%, rgba(46, 70, 110, .35), transparent 70%),
    radial-gradient(35% 30% at 25% 70%, rgba(80, 40, 90, .25), transparent 70%),
    radial-gradient(30% 25% at 60% 80%, rgba(120, 30, 30, .18), transparent 70%);
  filter: blur(40px);
  transform: translate3d(0, calc(var(--scroll, 0) * -8%), 0);
}
.farbwelt {
  position: absolute; inset: 0;
  background: radial-gradient(90% 80% at 50% 50%, #8a0a06 0%, var(--glut-tief) 55%, #3a0000 100%);
  opacity: var(--rot, 0);
}
#koi { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
#koi.bereit { opacity: 1; }
.koi-still {
  position: absolute; left: 50%; top: 50%;
  width: min(62vw, 900px); height: auto;
  translate: -50% -50%;
  transform: translate(calc(var(--kx, .22) * 100vw), calc(var(--ky, 0) * 100vh)) scale(var(--ks, 1)) rotate(var(--kr, 0deg));
  filter: drop-shadow(0 0 40px rgba(228, 51, 51, calc(var(--kg, .1) * .6)));
  transition: opacity .8s var(--ease);
}
.hat-3d .koi-still { opacity: 0; }

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 1.1rem var(--rand);
  transition: background .6s var(--ease), backdrop-filter .6s var(--ease), border-color .6s;
  border-bottom: 1px solid transparent;
}
.kopf.gescrollt {
  background: rgba(20, 22, 32, .55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--linie);
}
.marke { font: 400 1.6rem/1 var(--display); letter-spacing: -.02em; justify-self: start; display: inline-flex; align-items: baseline; gap: .12em; }
.kopf-link { font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; font-weight: 400; }
.pfeil { color: var(--signal); margin-right: .3em; }
.punkt { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-right: .9em; vertical-align: middle; translate: 0 -1px; }
.marke .punkt { margin: 0; width: 5px; height: 5px; }

.burger {
  justify-self: end; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer;
  border-radius: 50%;
}
.burger svg { width: 100%; height: 100%; overflow: visible; }
.burger path { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; transition: transform .6s var(--ease); transform-origin: 24px 24px; }
.burger .ring { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1; stroke-dasharray: 139; stroke-dashoffset: 139; transition: stroke-dashoffset .9s var(--ease); transform: rotate(-90deg); transform-origin: center; }
.burger:hover .ring, .burger[aria-expanded="true"] .ring { stroke-dashoffset: 0; }
.burger[aria-expanded="true"] .l1 { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] .l2 { transform: translateY(-4px) rotate(-45deg); }
.burger:focus-visible { outline: none; box-shadow: 0 0 0 1.5px #c8f, 0 0 18px rgba(200, 136, 255, .35); }

.menue {
  position: fixed; inset: .75rem; z-index: 25; border-radius: 20px;
  background: rgba(20, 22, 32, .55);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--linie); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  display: grid; place-items: center start; padding: 6rem var(--rand) 2rem;
}
.menue ol { list-style: none; margin: 0; padding: 0; }
.menue a { display: flex; align-items: baseline; gap: 1.2rem; font: 200 clamp(2.5rem, 6vw, 5rem)/1.1 var(--sans); letter-spacing: -.03em; color: var(--blass); transition: color .5s var(--ease), transform .6s var(--ease); }
.menue a:hover, .menue a:focus-visible { color: var(--text); transform: translateX(.5rem); outline: none; }
.menue small { font: 400 .7rem/1 var(--sans); letter-spacing: .3em; color: var(--signal); }
@supports not (backdrop-filter: blur(1px)) { .menue, .kopf.gescrollt, .glas { background: rgba(20, 22, 32, .85); } }

/* ---------- Stationsanzeige ---------- */
.station-anzeige {
  position: fixed; right: var(--rand); top: 50%; z-index: 20; translate: 0 -50%;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--zweit);
}
.zaehler b { color: var(--text); font-weight: 400; }
.leiste { width: 1px; height: 90px; background: var(--linie); position: relative; overflow: hidden; }
.leiste i { position: absolute; inset: 0; background: var(--text); transform-origin: top; transform: scaleY(var(--scroll, 0)); }
.station-anzeige .name { writing-mode: vertical-rl; }

/* ---------- Stationen ---------- */
main, .fuss { position: relative; z-index: 10; }
.station {
  min-height: 100svh; max-width: 1440px; margin: 0 auto;
  padding: 7rem calc(var(--rand) + 5.5rem) 5rem var(--rand);
  display: grid; align-content: space-between; gap: 3rem;
}
.label { font-size: .7rem; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--zweit); line-height: 1.4; }

.display {
  font: 400 clamp(3.5rem, 11vw, 11rem)/.92 var(--display);
  letter-spacing: -.035em;
}
.display .zeile { display: block; overflow: hidden; padding-bottom: .06em; }
.display .zeile > span { display: inline-block; }
.display .einzug { padding-left: clamp(2rem, 14vw, 14rem); }
.display.rechts { text-align: right; }

.holo-wort {
  font-style: italic;
  background: linear-gradient(var(--text), var(--text)), var(--holo);
  background-blend-mode: soft-light;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: saturate(1.1);
}

.lead { font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.45; max-width: 26ch; font-weight: 300; }
.unten-rechts { justify-self: end; display: grid; gap: 2rem; justify-items: start; margin-right: clamp(0rem, 8vw, 8rem); }

/* Glut (Farbwelt) */
.glut .spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 22ch)); gap: 2.5rem; justify-self: start; color: rgba(255, 220, 215, .75); }
.glut .label { color: rgba(255, 210, 205, .7); }
.glut .display { text-shadow: 0 0 60px rgba(255, 80, 40, .25); }

/* Arbeiten */
.arbeiten { list-style: none; margin: 0; padding: 0; align-self: center; }
.arbeiten a {
  display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap;
  font: 200 clamp(2.5rem, 5.5vw, 5.5rem)/1.12 var(--sans); letter-spacing: -.04em;
  color: var(--blass); transition: color .7s var(--ease);
}
.arbeiten li.aktiv a, .arbeiten a:hover, .arbeiten a:focus-visible { color: var(--text); outline: none; }
.arbeiten .titel { transition: transform .8s var(--ease); display: inline-block; }
.arbeiten li.aktiv .titel, .arbeiten a:hover .titel { transform: translateX(1rem); }
.arbeiten .meta { font: 400 .68rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--zweit); opacity: 0; transition: opacity .7s var(--ease); }
.arbeiten li.aktiv .meta, .arbeiten a:hover .meta { opacity: 1; }
.form > .textlink { justify-self: end; margin-right: clamp(0rem, 10vw, 10rem); }

/* Atelier / Glas */
.glas-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); gap: 1.5rem; justify-self: end; margin-right: clamp(0rem, 6vw, 6rem); }
.glas {
  --winkel: 0deg;
  position: relative; isolation: isolate; overflow: hidden;
  padding: 1.8rem 1.8rem 2rem; border-radius: 18px;
  background: rgba(20, 22, 32, .5);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--linie);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  display: grid; gap: .9rem; align-content: start;
}
.glas.versetzt { translate: 0 4rem; }
.glas h3 { font: 400 2rem/1.05 var(--display); letter-spacing: -.02em; }
.glas p { color: var(--zweit); font-size: .98rem; line-height: 1.65; }
.glas .preis { font: 200 1.6rem/1 var(--sans); letter-spacing: -.02em; margin-top: .4rem; }
.glas .textlink { justify-self: start; margin-top: .4rem; }
/* Holo-Glanz, der beim Hover über die Karte streicht */
.glas::before {
  content: ""; position: absolute; inset: -40%; z-index: -1;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .0) 42%, rgba(160, 200, 255, .18) 47%, rgba(255, 170, 220, .2) 50%, rgba(255, 220, 140, .14) 53%, transparent 58%);
  transform: translateX(-60%); transition: transform 1.2s var(--ease);
  mix-blend-mode: screen;
}
.glas:hover::before { transform: translateX(60%); }
/* Holo-Rand, schwach, folgt der Maus */
.glas::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--holo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .8s var(--ease);
  pointer-events: none;
}
.glas:hover::after { opacity: .45; }
.atelier > .knopf { justify-self: start; margin-top: 3rem; }

/* ---------- Knöpfe ---------- */
.knopf {
  --winkel: 0deg;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 1rem;
  padding: 1.05rem 1.6rem 1.05rem 1.8rem; border-radius: 999px;
  background: rgba(20, 22, 32, .5);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  font-size: .74rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform .7s var(--ease), --winkel 0s;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.knopf::before { /* Holo-Rand */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; z-index: -1;
  background: var(--holo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .6; transition: opacity .6s var(--ease);
}
.knopf:hover::before, .knopf:focus-visible::before { opacity: 1; }
.knopf:hover, .knopf:focus-visible { --winkel: 360deg; transition: transform .7s var(--ease), --winkel .9s var(--ease); outline: none; }
.knopf:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 24px rgba(200, 136, 255, .3); }
.knopf-text, .knopf-pfeil { transition: transform .6s var(--ease); }
.knopf:hover .knopf-text { transform: translateX(-4px); }
.knopf:hover .knopf-pfeil { transform: translateX(4px); }
.knopf-pfeil { position: relative; display: inline-block; width: 1em; height: 1.2em; overflow: hidden; color: var(--signal); font-size: 1rem; letter-spacing: 0; }
.knopf-pfeil i { position: absolute; left: 0; top: 0; font-style: normal; line-height: 1.2em; transition: transform .6s var(--ease); }
.knopf-pfeil i + i { transform: translateX(-120%); }
.knopf:hover .knopf-pfeil i:first-child { transform: translateX(120%); }
.knopf:hover .knopf-pfeil i + i { transform: translateX(0); }
.knopf:active { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(.97); transition-duration: .15s; }
.lichtring {
  position: absolute; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(255, 255, 255, .35), rgba(200, 170, 255, .15) 45%, transparent 70%);
  translate: -50% -50%; animation: ring .8s var(--ease) forwards;
}
@keyframes ring { from { transform: scale(0); opacity: 1; } to { transform: scale(40); opacity: 0; } }

.textlink { position: relative; display: inline-block; padding-bottom: 4px; font-size: .74rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; }
.textlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--signal);
  transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ease);
}
.textlink:hover::after, .textlink:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.textlink:focus-visible { outline: none; }
.kopf-link.textlink { justify-self: center; }

/* ---------- Fuß ---------- */
.fuss { min-height: 90svh; align-content: end; padding-bottom: 2rem; }
.stadt { font: 200 clamp(4rem, 13vw, 13rem)/.9 var(--sans); letter-spacing: -.06em; }
.punkt-signal { color: var(--signal); }
.fuss-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; border-top: 1px solid var(--linie); padding-top: 1.6rem; color: var(--zweit); font-style: normal; font-size: .95rem; }
.fuss-raster address { font-style: normal; }
.kleingedruckt { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--linie); padding-top: 1.1rem; font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--blass); }
.kleingedruckt .textlink { font-size: .66rem; }

/* ---------- Einblenden (nur mit JS) ---------- */
.js .zeile > span { transform: translateY(105%); transition: transform 1.3s var(--ease); }
.js .zeile:nth-child(2) > span { transition-delay: .12s; }
.js .sichtbar .zeile > span { transform: none; }
.js .station .label, .js .lead, .js .spalten, .js .glas, .js .unten-rechts .knopf, .js .atelier > .knopf, .js .fuss-raster {
  opacity: 0; translate: 0 1.5rem; transition: opacity 1.1s var(--ease) .25s, translate 1.1s var(--ease) .25s;
}
.js .glas.versetzt { translate: 0 5.5rem; }
.js .sichtbar .label, .js .sichtbar .lead, .js .sichtbar .spalten, .js .sichtbar .glas, .js .sichtbar .knopf, .js .sichtbar .fuss-raster { opacity: 1; translate: 0 0; }
.js .sichtbar .glas.versetzt { translate: 0 4rem; transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .js .zeile > span, .js .station .label, .js .lead, .js .spalten, .js .glas, .js .knopf, .js .fuss-raster { transform: none !important; opacity: 1 !important; translate: 0 0 !important; }
  .js .glas.versetzt { translate: 0 4rem !important; }
  .nebel { transform: none; }
}

/* ---------- Mobil ---------- */
@media (max-width: 760px) {
  .kopf { grid-template-columns: 1fr auto; }
  .kopf-link { display: none; }
  .station-anzeige { display: none; }
  .station { padding: 6rem var(--rand) 4rem; gap: 2.5rem; }
  .display { font-size: clamp(3.5rem, 17vw, 6rem); }
  .display .einzug { padding-left: 1.5rem; }
  .display.rechts { text-align: left; }
  .unten-rechts, .glas-reihe, .form > .textlink { justify-self: stretch; margin-right: 0; }
  .glut .spalten, .glas-reihe, .fuss-raster { grid-template-columns: 1fr; }
  .glas.versetzt, .js .sichtbar .glas.versetzt { translate: 0 0; }
  .koi-still { width: 110vw; opacity: .55; }
  #koi { opacity: 0; }
  #koi.bereit { opacity: .6; }
}