/* ============================================================
   NOKTURN – DJ-Demo
   Konzept: Liquid Light Show. Die Projektion steht hinter der
   ganzen Seite, die Inhalte liegen als Dias im Lichtkegel.
   Mobile-first.
   ============================================================ */

:root {
  /* Farbwelt */
  --tinte:        #0B0410;
  --tinte-tief:   #050208;
  --tinte-weich:  #150A1E;
  --creme:        #F4EDF7;
  --creme-leise:  #B4A3C0;
  --creme-still:  #7C6C89;

  --magenta:      #FF2E88;
  --cyan:         #24E0FF;
  --bernstein:    #FFB03A;

  --glas:         rgba(255, 255, 255, 0.045);
  --glas-hoch:    rgba(255, 255, 255, 0.075);
  --kante:        rgba(255, 255, 255, 0.10);
  --kante-hell:   rgba(255, 255, 255, 0.22);

  /* Masse */
  --rand:         20px;
  --breite:       1180px;
  --radius:       4px;
  --radius-gross: 10px;

  /* Bewegung */
  --weich:        cubic-bezier(.23, 1, .32, 1);
  --schnell:      180ms var(--weich);
  --mittel:       280ms var(--weich);
}

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

html {
  /* clip statt hidden: verhindert horizontalen Ueberlauf, ohne Sticky zu brechen */
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--tinte);
  color: var(--creme);
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

::selection { background: var(--magenta); color: #fff; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 10px;
  z-index: 200;
  background: var(--magenta);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-family: 'Space Mono', monospace;
  font-size: 13px;
}
.skip-link:focus { left: 10px; }

/* ============================================================
   Projektion
   ============================================================ */

.projektion {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Rueckfall, falls WebGL fehlt oder der Kontext verloren geht */
  background:
    radial-gradient(120% 90% at 32% 38%, rgba(255, 46, 136, .34), transparent 62%),
    radial-gradient(100% 80% at 72% 30%, rgba(36, 224, 255, .22), transparent 58%),
    radial-gradient(90% 70% at 55% 78%, rgba(255, 176, 58, .18), transparent 60%),
    var(--tinte);
}
.projektion__leinwand {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 900ms var(--weich);
}
.hat-oel .projektion__leinwand { opacity: 1; }
.projektion__leinwand.oel--aus { opacity: 0; }

/* Staubschleier: nimmt der Rechnerei die Sauberkeit */
.projektion__staub {
  position: absolute;
  inset: 0;
  opacity: .28;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='.35'/%3E%3C/svg%3E");
}

/* ============================================================
   Navigation
   ============================================================ */

.navi {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 14px var(--rand);
  transition: background var(--mittel), border-color var(--mittel);
  border-bottom: 1px solid transparent;
}
.navi--fest {
  background: rgba(11, 4, 16, .82);
  border-bottom-color: var(--kante);
}
.navi__innen {
  max-width: var(--breite);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.navi__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* Touchziel */
  gap: 10px;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .10em;
  text-decoration: none;
  color: var(--creme);
}
.navi__punkt {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 12px var(--magenta);
  flex-shrink: 0;
}
.laeuft .navi__punkt { animation: puls 1.1s ease-in-out infinite; }
@keyframes puls {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: .6; }
}

.navi__burger {
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.navi__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--creme);
  transition: transform var(--schnell), opacity var(--schnell);
}
.navi__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.navi__burger[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

.navi__menue {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 96px var(--rand) 40px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(6, 2, 9, .96);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 320ms var(--weich), visibility 320ms;
}
.navi__menue--offen { transform: none; visibility: visible; }
.navi__link {
  display: block;
  padding: 14px 0;
  min-height: 44px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--creme);
  border-bottom: 1px solid var(--kante);
  transition: color var(--schnell);
}
.navi__link:hover { color: var(--magenta); }
.navi__link--cta { color: var(--bernstein); }

/* ============================================================
   Knoepfe
   ============================================================ */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid var(--kante-hell);
  background: transparent;
  color: var(--creme);
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--schnell), background var(--schnell),
              border-color var(--schnell), color var(--schnell);
}
.knopf:hover { background: var(--glas-hoch); border-color: var(--kante-hell); }
.knopf:active { transform: scale(.97); }

.knopf--voll {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
  font-weight: 700;
}
.knopf--voll:hover {
  background: #ff4e9b;
  border-color: #ff4e9b;
}
.knopf--breit { width: 100%; }

/* Ton-Knopf mit Pegelanzeige */
.tonKnopf__wellen {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.tonKnopf__wellen i {
  width: 2px;
  height: 4px;
  background: var(--cyan);
  border-radius: 1px;
  transition: height 120ms linear;
}
.laeuft .tonKnopf__wellen i { animation: pegel 700ms ease-in-out infinite; }
.laeuft .tonKnopf__wellen i:nth-child(2) { animation-delay: 90ms; }
.laeuft .tonKnopf__wellen i:nth-child(3) { animation-delay: 180ms; }
.laeuft .tonKnopf__wellen i:nth-child(4) { animation-delay: 270ms; }
.laeuft .tonKnopf__wellen i:nth-child(5) { animation-delay: 360ms; }
@keyframes pegel {
  0%, 100% { height: 4px; }
  50%      { height: 14px; }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Unten Platz fuer die Demo-Pille, sonst deckt sie die Terminzeile zu.
     Gemessen: die Pille wird auf 390px zweizeilig und ist dann 56px hoch. */
  padding: 120px var(--rand) 104px;
}
/* Der Verlauf darf nur die Schrift freistellen, nicht die Projektion ersaeufen.
   Oben bleibt er nahezu offen, erst unter der Schlagzeile wird er dicht. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(11, 4, 16, .30) 0%,
    rgba(11, 4, 16, .04) 26%,
    rgba(11, 4, 16, .34) 56%,
    rgba(11, 4, 16, .82) 84%,
    var(--tinte) 100%);
}
.hero__innen {
  max-width: var(--breite);
  width: 100%;
  margin: 0 auto;
}
.hero__kicker {
  margin: 0 0 14px;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cyan);
}
/* Gemessen: "NOKTURN" belegt in Syne 800 genau 8.52em. Daraus die Deckel —
   10.3vw traegt bis hinunter zu 360px, die Untergrenze bleibt bewusst unter
   dem 360px-Wert, weil clamp() darunter einfriert und die Spalte sprengt. */
.hero__titel {
  margin: 0 0 20px;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(2.1rem, 10.3vw, 8.4rem);
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-shadow: 0 8px 60px rgba(11, 4, 16, .7);
}
/* Die Projektion ist an manchen Stellen hell. Ein Schatten haelt den Text
   auch dann lesbar, ohne den Verlauf weiter zuzuziehen. */
.hero__lead {
  margin: 0 0 30px;
  max-width: 33ch;
  font-size: 17px;
  color: var(--creme-leise);
  text-shadow: 0 1px 14px rgba(11, 4, 16, .92);
}
.hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.hero__hinweis {
  margin: 0;
  font-family: 'Space Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--creme-leise);
  text-shadow: 0 1px 12px rgba(11, 4, 16, .95);
}
.hero__fuss {
  max-width: var(--breite);
  width: 100%;
  margin: 40px auto 0;
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--kante);
  padding-top: 16px;
}
.hero__scroll {
  width: 1px;
  height: 26px;
  background: linear-gradient(var(--cyan), transparent);
  flex-shrink: 0;
}
.hero__naechste {
  margin: 0;
  font-family: 'Space Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--creme-still);
}
.hero__naechste b {
  color: var(--creme);
  font-weight: 400;
}

/* ============================================================
   Dias
   ============================================================ */

.dia {
  position: relative;
  z-index: 1;
  padding: 64px var(--rand);
}
/* Die Dias sind Glas, keine Kaesten: die Projektion scheint gedaempft und
   unscharf hindurch. Waeren sie deckend, waere die Lichtshow nach dem Hero
   vorbei und die Seite ab Dia 01 ein gewoehnliches dunkles Layout. */
.dia__rahmen {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 34px 22px 30px;
  border-radius: var(--radius-gross);
  border: 1px solid var(--kante-hell);
  background: linear-gradient(180deg, rgba(11, 4, 16, .62), rgba(6, 2, 9, .80));
  backdrop-filter: blur(30px) saturate(1.3);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
  box-shadow:
    0 40px 90px -50px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* Lichtkante oben: das Dia sitzt im Strahl */
.dia__rahmen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kante-hell), transparent);
}

.dia__kopf { margin-bottom: 26px; }
.dia__nummer {
  display: block;
  margin-bottom: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .3em;
  color: var(--magenta);
}
.dia__titel {
  margin: 0 0 12px;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 8vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -.025em;
}
.dia__lead {
  margin: 0;
  max-width: 46ch;
  color: var(--creme-leise);
  font-size: 16px;
}

.dia__pflege {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--kante);
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: var(--creme-still);
}
.dia__pflegePunkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bernstein);
  box-shadow: 0 0 8px var(--bernstein);
  flex-shrink: 0;
}
.dia__pflege a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* Touchziel */
  color: var(--bernstein);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Zugangsdaten direkt neben dem Verwaltungs-Link: Besucher sollen den
   Bereich ausprobieren, ohne erst auf der Anmeldeseite danach zu suchen.
   Unbedenklich, weil der Bestand 30 Minuten nach der letzten Aenderung
   auf die Vorlage zurueckfaellt und nichts hochgeladen werden kann. */
.dia__zugang {
  flex-basis: 100%;
  color: var(--creme-still);
  opacity: .72;
  font-size: 11.5px;
  letter-spacing: .02em;
}
.dia__zugang b {
  color: var(--creme);
  font-weight: 400;
  padding: 1px 5px;
  border: 1px solid var(--kante);
  border-radius: 4px;
}

/* ============================================================
   Tracks
   ============================================================ */

.tracks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.track__knopf {
  position: relative;
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--glas);
  color: var(--creme);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--schnell), border-color var(--schnell), transform var(--schnell);
}
.track__knopf:hover { background: var(--glas-hoch); border-color: var(--kante); }
.track__knopf:active { transform: scale(.995); }
.track--aktiv .track__knopf {
  border-color: var(--magenta);
  background: rgba(255, 46, 136, .10);
}
.track__nr {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--creme-still);
}
.track__haupt { min-width: 0; }
/* Auf schmalen Geraeten lieber umbrechen als abschneiden: ein halber
   Stuecktitel liest sich wie ein Fehler. */
.track__titel {
  display: block;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.track__meta {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--creme-still);
  overflow-wrap: anywhere;
}
.track__bpm {
  font-family: 'Space Mono', monospace;
  font-size: 15px;
  color: var(--cyan);
  white-space: nowrap;
}
.track__bpm small {
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--creme-still);
  margin-left: 3px;
}
/* Wellenform: liegt als Lichtspur unter der Zeile */
.track__welle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--magenta), var(--cyan), var(--bernstein));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--weich);
}
.track--aktiv .track__welle { transform: scaleX(1); }

/* Stuecke mit hinterlegter Hoerprobe bekommen eine Lichtkante */
.track--hoerbar .track__knopf::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: var(--cyan);
  opacity: .45;
  transition: opacity var(--schnell);
}
.track--hoerbar .track__knopf:hover::before { opacity: 1; }

/* Laeuft gerade: aus der Nummer wird ein pochendes Zeichen */
.track--spielt .track__knopf {
  border-color: var(--cyan);
  background: rgba(36, 224, 255, .09);
}
.track--spielt .track__nr { font-size: 0; }
.track--spielt .track__nr::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: pochen 1.1s ease-in-out infinite;
}
@keyframes pochen {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(.72);  opacity: .55; }
}

/* Klick zum Laden: vorher wird nichts von der Plattform geholt */
/* Eingerueckt mit Kante, damit der Player sichtbar zum Stueck darueber gehoert */
.track__player {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  margin: 4px 0 8px 15px;
  padding: 10px 0 2px 16px;
  border-left: 1px solid var(--kante);
}
.track__laden {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--kante-hell);
  border-radius: 999px;
  background: transparent;
  color: var(--creme);
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--schnell), border-color var(--schnell), transform var(--schnell);
}
.track__laden:hover { background: var(--glas-hoch); border-color: var(--cyan); }
.track__laden:active { transform: scale(.97); }
.track__datenschutz {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  line-height: 1.55;
  color: var(--creme-still);
  max-width: 48ch;
}
.track__player iframe {
  width: 100%;
  height: 152px;
  border: 0;
  border-radius: 8px;
}

/* ============================================================
   Termine
   ============================================================ */

.termine {
  list-style: none;
  margin: 0;
  padding: 0;
}
.termin {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 4px 14px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--kante);
}
.termin:first-child { border-top: 1px solid var(--kante); }
.termin__tag {
  font-family: 'Space Mono', monospace;
  font-size: 22px;
  line-height: 1;
  color: var(--creme);
}
.termin__monat {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--creme-still);
  margin-top: 3px;
}
.termin__ort {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
}
.termin__stadt {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: var(--creme-leise);
}
.termin__marke {
  grid-column: 2;
  justify-self: start;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.termin__marke--frei {
  border: 1px solid rgba(36, 224, 255, .40);
  color: var(--cyan);
}
.termin__marke--voll {
  border: 1px solid rgba(255, 46, 136, .40);
  color: var(--magenta);
}
.termin__marke--privat {
  border: 1px solid var(--kante-hell);
  color: var(--creme-still);
}
.termin--vergangen { opacity: .48; }

/* ============================================================
   Person
   ============================================================ */

.person {
  display: grid;
  gap: 28px;
}
.person__bild {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}
.person__bild img {
  width: 100%;
  /* Das Ausgangsfoto ist sehr dunkel und braucht etwas Anhebung */
  filter: brightness(1.32) contrast(1.05) saturate(.85);
}
/* Oelschicht ueber dem Portraet: die Projektion trifft auch die Person */
.person__oel {
  position: absolute;
  inset: 0;
  mix-blend-mode: color-dodge;
  opacity: .22;
  background:
    radial-gradient(60% 50% at 28% 32%, rgba(255, 46, 136, .58), transparent 70%),
    radial-gradient(55% 45% at 74% 62%, rgba(36, 224, 255, .48), transparent 72%),
    radial-gradient(40% 40% at 52% 88%, rgba(255, 176, 58, .40), transparent 70%);
}
.person__text p {
  color: var(--creme-leise);
  max-width: 48ch;
}
.fakten {
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}
.fakten > div {
  border-top: 1px solid var(--kante);
  padding-top: 10px;
}
.fakten dt {
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--creme-still);
  margin-bottom: 3px;
}
.fakten dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

/* ============================================================
   Formular
   ============================================================ */

.formular__zeile {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}
.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.feld label {
  font-family: 'Space Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--creme-leise);
}
.feld__optional { text-transform: none; letter-spacing: .02em; color: var(--creme-still); }
.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--kante);
  background: rgba(6, 2, 9, .6);
  color: var(--creme);
  font-family: 'Syne', sans-serif;
  font-size: 16px;               /* unter 16px zoomt iOS beim Fokus hinein */
  transition: border-color var(--schnell), background var(--schnell);
}
.feld textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.feld input::placeholder,
.feld textarea::placeholder { color: var(--creme-still); }
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  border-color: var(--cyan);
  background: rgba(6, 2, 9, .85);
}
.feld--fehler input,
.feld--fehler select,
.feld--fehler textarea { border-color: var(--magenta); }

.formular__status {
  margin: 14px 0 0;
  min-height: 22px;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
}
.formular__status--gut { color: var(--cyan); }
.formular__status--schlecht { color: var(--magenta); }
.formular__hinweis {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--creme-still);
}

/* ============================================================
   Footer
   ============================================================ */

.fuss {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  padding: 48px var(--rand) 96px;
  background: var(--tinte-tief);
  border-top: 1px solid var(--kante);
}
.fuss__innen {
  max-width: var(--breite);
  margin: 0 auto;
  display: grid;
  gap: 28px;
}
.fuss__logo {
  margin: 0 0 6px;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .10em;
}
.fuss__marke p { margin: 0; color: var(--creme-still); font-size: 14px; }
.fuss__navi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.fuss__navi a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* Touchziel */
  font-family: 'Space Mono', monospace;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--creme-leise);
  text-decoration: none;
}
.fuss__navi a:hover { color: var(--magenta); }
.fuss__recht p {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--creme-still);
}
.fuss__recht a {
  display: inline-block;
  padding: 12px 2px;         /* Touchziel, ohne die Zeile zu sprengen */
  color: var(--creme-leise);
}
.lizenz-hinweis {
  display: block;
  max-width: 62ch;
  font-size: 11.5px;
  line-height: 1.7;
  opacity: .68;
}

/* Demo-Hinweis */
.demo-pill {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: calc(100vw - 28px);
  min-height: 44px;          /* Touchziel */
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--kante-hell);
  background: rgba(6, 2, 9, .90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--creme-leise);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: .03em;
  text-decoration: none;
  transition: color var(--schnell), border-color var(--schnell);
}
.demo-pill:hover { color: var(--creme); border-color: var(--magenta); }
.demo-pill-punkt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bernstein);
  box-shadow: 0 0 10px var(--bernstein);
  flex-shrink: 0;
}

/* ============================================================
   Reveals
   ============================================================ */

.zeig {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 460ms var(--weich), transform 460ms var(--weich);
}
.zeig--da { opacity: 1; transform: none; }

/* ============================================================
   Breite Bildschirme
   ============================================================ */

@media (min-width: 620px) {
  :root { --rand: 32px; }
  .formular__zeile { grid-template-columns: 1fr 1fr; }
  .dia__rahmen { padding: 44px 40px 38px; }
  .demo-pill { font-size: 12px; }
}

@media (min-width: 900px) {
  body { font-size: 18px; }
  .navi { padding: 18px var(--rand); }
  .navi__burger { display: none; }
  .navi__menue {
    position: static;
    inset: auto;
    flex-direction: row;
    align-items: center;
    gap: 34px;
    padding: 0;
    background: none;
    transform: none;
    visibility: visible;
  }
  .navi__link {
    padding: 6px 0;
    font-family: 'Space Mono', monospace;
    font-size: 12.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-bottom: 0;
  }
  .navi__link--cta {
    border: 1px solid var(--bernstein);
    border-radius: 999px;
    padding: 9px 18px;
  }
  .navi__link--cta:hover { background: var(--bernstein); color: var(--tinte); }

  /* Pille ist hier einzeilig (44px) und sitzt 14px ueberm Rand.
     Weniger als 76px und sie deckt die Terminzeile zu. */
  .hero { padding-bottom: 76px; }
  .hero__lead { font-size: 19px; max-width: 40ch; }

  .dia { padding: 96px var(--rand); }
  /* Dias sitzen versetzt im Strahl, nicht mittig gestapelt */
  .dia--links  .dia__rahmen { margin-left: 0; margin-right: auto; transform: rotate(-.35deg); }
  .dia--rechts .dia__rahmen { margin-left: auto; margin-right: 0; transform: rotate(.35deg); }
  .dia--breit  .dia__rahmen { max-width: var(--breite); }

  .person {
    grid-template-columns: 1.05fr 1fr;
    gap: 44px;
    align-items: center;
  }
  .fakten { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .fuss__innen {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 40px;
  }
  .fuss__recht { grid-column: 1 / -1; border-top: 1px solid var(--kante); padding-top: 20px; }
}

@media (min-width: 1200px) {
  .dia--links  .dia__rahmen { margin-left: calc((100% - var(--breite)) / 2); }
  .dia--rechts .dia__rahmen { margin-right: calc((100% - var(--breite)) / 2); }
}