/* Die Schriften werden im Kopf der Seite als eigenes <link> geladen, NICHT
   per @import. Ein @import haengt sich hinter diese Datei und macht aus zwei
   parallelen Anfragen eine Kette - Lighthouse hat dafuer 320 ms gemessen. */

/* =========================================================================
   ESCAPE THE SILENCE - SYNCORP Labs: Projekt V-404
   Gestaltungsprinzip: eine klinische Laboroberflaeche, die kippt.
   Links steril (weiss, Raster, Mono-Typo), rechts Sperrgebiet (Blut, Rauch).
   ========================================================================= */

:root {
  /* Grund */
  --schwarz:      #05060a;
  --tief:         #0a0c11;
  --rauch:        #12151c;
  --panel:        #0e1118;
  --linie:        rgba(198, 210, 228, 0.13);
  --linie-stark:  rgba(198, 210, 228, 0.28);

  /* Schrift */
  --weiss:        #eef2f8;
  --grau:         #9ba5b4;
  /* 07.09.2026 von #7c8695 aufgehellt: Der bewegte Grund legt einen roten
     Schleier ueber die Seite; unter dem Mausschein sank der alte Ton auf
     3,69 und damit unter die Grenze von 4,5. Jetzt 4,66 an der
     schlimmsten Stelle und 6,94 auf blankem Grund. Dunkler geht nicht. */
  --grau-leise:   #8e98a7;

  /* Marke */
  --knochen:      #c9b189;   /* Farbe des Wortmarken-Logos */
  --gruen:        #7bd88f;   /* Terminalgruen des Laborausweises */
  --gruen-tief:   #12281a;
  --blut:         #b0121e;   /* Flaechen und Rahmen */
  --blut-hell:    #e01824;
  --blut-text:    #ff7070;   /* Rot, das auf Schwarz noch lesbar ist */

  /* Masse */
  --rand:         clamp(1.15rem, 4.5vw, 3.5rem);
  --breite:       76rem;
  --breite-eng:   46rem;

  --serif: "Oswald", "Oswald Ersatz", "Arial Narrow", sans-serif;
  --mono:  "IBM Plex Mono", "Plex Mono Ersatz", ui-monospace, Menlo, monospace;
  --sans:  "IBM Plex Sans", "Plex Sans Ersatz", system-ui, -apple-system, sans-serif;
}

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

html {
  background: var(--schwarz);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--schwarz);
  color: var(--weiss);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  overflow-x: hidden;            /* Sperre gegen seitliches Wegrutschen */
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--gruen); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--weiss); }

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

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

/* ---------- Grundbausteine ------------------------------------------------ */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.eng { max-width: var(--breite-eng); }

section { position: relative; }

.abschnitt { padding-block: clamp(4rem, 10vw, 8rem); }
.abschnitt--knapp { padding-block: clamp(2.75rem, 6vw, 4.5rem); }

/* Laborbeschriftung: "// 02 — SEKTOR B" */
.marke {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gruen);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.35rem;
}
.marke::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--linie-stark), transparent);
}
.marke--blut { color: var(--blut-text); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: 0.005em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h2 { font-size: clamp(2rem, 1.35rem + 3.1vw, 3.5rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem); }
h4 { font-size: 1.05rem; letter-spacing: 0.04em; }
.spalten-3 h3, .recht h3 + p ~ h3 { font-size: 1.05rem; letter-spacing: 0.04em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.fuehrung {
  font-size: clamp(1.06rem, 1rem + 0.45vw, 1.28rem);
  color: var(--grau);
  max-width: 42ch;
}

.klein {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--grau-leise);
  line-height: 1.6;
}

/* ---------- Knoepfe ------------------------------------------------------- */

.knopf {
  --k-grund: var(--blut);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.05rem 2rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--k-grund);
  border: 1px solid var(--blut-hell);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;           /* haelt den Glanz-Streifen im Knopf */
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.knopf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .5s ease;
}
.knopf:hover {
  background: var(--blut-hell);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--blut-hell), 0 12px 34px -14px var(--blut-hell);
}
.knopf:hover::before { transform: translateX(120%); }
.knopf:active { transform: translateY(0); }

.knopf--geist {
  background: transparent;
  color: var(--weiss);
  border-color: var(--linie-stark);
}
.knopf--geist:hover {
  background: rgba(238, 242, 248, 0.07);
  border-color: var(--weiss);
  box-shadow: none;
}

.knopf--voll { width: 100%; }

/* ---------- Kopfleiste ---------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(5, 6, 10, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.kopf__logo { display: flex; align-items: center; margin-right: auto; }
.kopf__logo img {
  height: 2rem;
  width: auto;
}

.nav { display: flex; align-items: center; gap: 0.35rem; }

.nav a {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau);
  text-decoration: none;
  padding: 0.55rem 0.8rem;
  border-radius: 2px;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--weiss); background: rgba(238,242,248,.06); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--blut-hell); }

.kopf .knopf { padding: 0.72rem 1.15rem; font-size: 0.74rem; letter-spacing: 0.12em; }

.menue-schalter {
  display: none;
  background: none;
  border: 1px solid var(--linie-stark);
  border-radius: 2px;
  color: var(--weiss);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 60rem) {
  .menue-schalter { display: block; }
  .nav {
    position: fixed;
    inset: 4.25rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--tief);
    border-bottom: 1px solid var(--linie);
    padding: 0.5rem var(--rand) 1.25rem;
    display: none;
  }
  .nav[data-offen="ja"] { display: flex; }
  .nav a { padding: 0.95rem 0.25rem; border-bottom: 1px solid var(--linie); font-size: 0.85rem; }
  .kopf__innen > .knopf { display: none; }
}

/* ---------- Warnband ------------------------------------------------------ */

.laufband {
  background: var(--blut);
  color: #fff;
  border-bottom: 1px solid var(--blut-hell);
  overflow: hidden;
  padding-block: 0.42rem;
}
.laufband__spur {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: schieben 34s linear infinite;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes schieben { to { transform: translateX(-50%); } }

/* ---------- Held ---------------------------------------------------------- */

.held {
  position: relative;
  min-height: min(92svh, 54rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  border-bottom: 1px solid var(--linie);
}

.held__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--tief);
  transform: scale(1.06);
}
/* Die Zoomfahrt startet erst, wenn die Seite fertig geladen ist. Solange sie
   waehrend des Aufbaus laeuft, aendern sich staendig Bildpunkte - Lighthouse
   wertet das als "Seite noch nicht fertig" und der Speed Index sprang von
   1,1 s auf 3,7 s, ohne dass es fuer den Besucher einen Unterschied macht. */
body.geladen .held__bild {
  animation: atmen 26s ease-in-out infinite alternate;
}
@keyframes atmen { to { transform: scale(1.13) translateY(-1.2%); } }

.held__schleier {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 85% at 50% 8%, transparent 0%, rgba(5,6,10,.55) 55%, var(--schwarz) 100%),
    linear-gradient(to top, var(--schwarz) 2%, rgba(5,6,10,.35) 45%, rgba(5,6,10,.62) 100%);
}

.held__innen {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding: clamp(3rem, 9vw, 6rem) var(--rand) clamp(2.5rem, 6vw, 4rem);
}

.held__logo {
  width: min(30rem, 82%);
  margin: 0 0 1.75rem;
  filter: drop-shadow(0 6px 34px rgba(0,0,0,.95));
}

.held__zeile {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gruen);
  margin: 0 0 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.9rem;
}

.puls {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--blut-hell);
  box-shadow: 0 0 0 0 rgba(224,24,36,.75);
  animation: pulsieren 2.1s ease-out infinite;
  flex: none;
}
@keyframes pulsieren {
  70%  { box-shadow: 0 0 0 0.62rem rgba(224,24,36,0); }
  100% { box-shadow: 0 0 0 0 rgba(224,24,36,0); }
}

.held h1 {
  font-size: clamp(2.15rem, 1.2rem + 4.4vw, 4.6rem);
  max-width: 17ch;
  margin-bottom: 0.5em;
}

.held__text { max-width: 46ch; color: var(--grau); font-size: clamp(1rem, .95rem + .4vw, 1.2rem); }

.held__knoepfe { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.1rem; }

/* ---------- Datenleiste --------------------------------------------------- */

.daten {
  border-block: 1px solid var(--linie);
  background:
    linear-gradient(to bottom, rgba(123,216,143,.035), transparent),
    var(--tief);
}
.daten__gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.daten__feld {
  padding: 1.6rem var(--rand);
  border-right: 1px solid var(--linie);
  min-width: 0;
}
.daten__feld:last-child { border-right: 0; }
.daten__feld dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grau-leise);
  margin-bottom: 0.5rem;
}
.daten__feld dd {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  text-transform: uppercase;
  line-height: 1.12;
}
.daten__feld dd span { display: block; font-family: var(--mono); font-size: 0.78rem; text-transform: none; color: var(--grau); letter-spacing: 0; margin-top: 0.3rem; }

/* Auf dem Handy hat das Gitter sonst Innenabstand vom Bildschirmrand doppelt */
@media (max-width: 46rem) {
  .daten__gitter { grid-template-columns: 1fr 1fr; }
  .daten__feld { padding: 1.15rem var(--rand); border-bottom: 1px solid var(--linie); }
  .daten__feld:nth-child(2n) { border-right: 0; }
}

/* ---------- Zweispalter --------------------------------------------------- */

.paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.paar--oben { align-items: start; }

.bild-rahmen {
  position: relative;
  border: 1px solid var(--linie-stark);
  background: var(--tief);
  overflow: hidden;
}
.bild-rahmen img, .bild-rahmen video { width: 100%; display: block; }
.bild-rahmen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(5,6,10,.55), transparent 45%);
}
.bild-rahmen__schild {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 0.5rem 0.85rem;
  background: rgba(5,6,10,.82);
  border-top: 1px solid var(--linie);
  border-right: 1px solid var(--linie);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gruen);
}

/* ---------- Karten -------------------------------------------------------- */

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
}

.karte {
  background: var(--panel);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  min-width: 0;
}
.karte__nr {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--blut-text);
  margin-bottom: 1.1rem;
}
.karte h3 { margin-bottom: 0.55rem; }
.karte p { color: var(--grau); font-size: 0.97rem; margin: 0; }

/* ---------- Haertegrade --------------------------------------------------- */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 1.25rem;
}

.grad {
  position: relative;
  border: 1px solid var(--linie-stark);
  background: linear-gradient(to bottom, var(--panel), var(--tief));
  padding: clamp(1.6rem, 3.4vw, 2.5rem);
  min-width: 0;
}
.grad--hart { border-color: rgba(224,24,36,.42); }
.grad--hart::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(to right, var(--blut-hell), transparent);
}
.grad--mild::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(to right, var(--gruen), transparent);
}
.grad__alter {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gruen);
  margin-bottom: 0.9rem;
}
.grad--hart .grad__alter { color: var(--blut-text); }
.grad__zeit {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.1rem);
  line-height: 1;
  margin-bottom: 0.65rem;
}
.grad p { color: var(--grau); }

/* ---------- Listen -------------------------------------------------------- */

.spalten-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
}

.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.72rem;
  color: var(--grau);
  font-size: 0.97rem;
  line-height: 1.55;
}
.liste li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.55rem; height: 1px;
  background: var(--grau-leise);
}
.liste--warnung li::before { background: var(--blut-hell); height: 2px; top: 0.6em; }
.liste--haken li::before {
  content: "\2713";
  width: auto; height: auto;
  background: none;
  color: var(--gruen);
  font-size: 0.8rem;
  top: 0;
}

/* ---------- Bildstrecke --------------------------------------------------- */

.strecke {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
}
@media (min-width: 48rem) { .strecke { grid-template-columns: repeat(3, 1fr); } }
.strecke > figure { margin: 0; position: relative; background: var(--tief); overflow: hidden; }
.strecke img, .strecke video {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: saturate(.88) contrast(1.06);
  transition: transform .7s cubic-bezier(.2,.7,.3,1), filter .4s ease;
}
.strecke > figure:hover img, .strecke > figure:hover video { transform: scale(1.05); filter: saturate(1) contrast(1.12); }
.strecke figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 0.9rem 0.75rem;
  background: linear-gradient(to top, rgba(5,6,10,.92), transparent);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--weiss);
}

/* ---------- Termine ------------------------------------------------------- */

.termine { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }

.termin {
  background: var(--panel);
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.3rem, 3vw, 2.2rem);
  align-items: center;
}
@media (max-width: 40rem) { .termin { grid-template-columns: 1fr; gap: 1.1rem; } }

.termin__tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grau-leise);
}
.termin__datum {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem);
  line-height: 1;
  margin-top: 0.25rem;
}
.termin__hinweis {
  display: inline-block;
  margin-top: 0.55rem;
  padding: 0.18rem 0.5rem;
  background: var(--blut);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.termin__slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem,100%), 1fr)); gap: 0.8rem; }
.slot {
  border: 1px solid var(--linie-stark);
  padding: 0.85rem 1rem;
  min-width: 0;
}
.slot__zeit { font-family: var(--serif); font-size: 1.3rem; line-height: 1; }
.slot__alter { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grau); margin-top: 0.35rem; }

/* ---------- Kasten -------------------------------------------------------- */

.kasten {
  border: 1px solid var(--linie-stark);
  background: var(--panel);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.kasten--warnung {
  border-color: rgba(224,24,36,.4);
  background: linear-gradient(to bottom, rgba(176,18,30,.1), var(--panel));
}
.kasten--gruen { border-color: rgba(123,216,143,.32); background: linear-gradient(to bottom, rgba(123,216,143,.06), var(--panel)); }

/* Rechnung / Preisaufstellung */
.rechnung { font-family: var(--mono); font-size: 0.92rem; }
.rechnung__zeile { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px dashed var(--linie); }
.rechnung__zeile--summe { border-bottom: 0; border-top: 1px solid var(--linie-stark); margin-top: 0.4rem; padding-top: 0.9rem; font-size: 1.15rem; font-weight: 600; }
.rechnung__zeile--summe span:last-child { color: var(--gruen); }

/* ---------- Fragen (Aufklapper) ------------------------------------------- */

.fragen { border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  text-transform: uppercase;
  color: var(--weiss);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--mono);
  font-size: 1.3rem;
  color: var(--gruen);
  transition: transform .2s ease;
  flex: none;
}
.frage[open] summary::after { content: "\2212"; }
.frage summary:hover { color: var(--gruen); }
.frage__inhalt { padding: 0 0 1.5rem; color: var(--grau); max-width: 62ch; }

/* ---------- Abschluss-Aufruf ---------------------------------------------- */

.aufruf {
  position: relative;
  text-align: center;
  border-block: 1px solid var(--linie);
  background:
    radial-gradient(60% 100% at 50% 100%, rgba(176,18,30,.28), transparent 70%),
    var(--tief);
  overflow: hidden;
}
.aufruf h2 { max-width: 18ch; margin-inline: auto; }
.aufruf .fuehrung { margin-inline: auto; }
.aufruf .knopf { margin-top: 2rem; }

/* ---------- Fusszeile ----------------------------------------------------- */

.fuss {
  border-top: 1px solid var(--linie);
  background: var(--tief);
  padding-block: clamp(2.75rem, 6vw, 4.5rem) 2rem;
}
.fuss__gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  margin-bottom: 2.5rem;
}
.fuss h2 {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.4;
  color: var(--grau-leise);
  margin-bottom: 1rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 0.6rem; }
.fuss a { color: var(--grau); text-decoration: none; font-size: 0.94rem; }
.fuss a:hover { color: var(--weiss); text-decoration: underline; }
.fuss__logo { height: 1.85rem; width: auto; margin-bottom: 1rem; }
.fuss__unten {
  border-top: 1px solid var(--linie);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* ---------- Formulare ----------------------------------------------------- */

.feld { margin-bottom: 1.15rem; }
.feld label, .feldsatz > legend {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 0.5rem;
  padding: 0;
}
.feld input, .feld select, .feld textarea {
  width: 100%;
  padding: 0.85rem 0.95rem;
  background: var(--schwarz);
  border: 1px solid var(--linie-stark);
  border-radius: 2px;
  color: var(--weiss);
  font-family: var(--sans);
  font-size: 1rem;      /* unter 16px zoomt Safari beim Antippen hinein */
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--gruen);
  outline: none;
  box-shadow: 0 0 0 3px rgba(123,216,143,.16);
}
.feldsatz { border: 0; padding: 0; margin: 0 0 1.15rem; }

.haken { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.85rem; }
.haken input { margin-top: 0.28rem; width: 1.05rem; height: 1.05rem; accent-color: var(--blut-hell); flex: none; }
.haken label { font-family: var(--sans); font-size: 0.93rem; letter-spacing: 0; text-transform: none; color: var(--grau); margin: 0; line-height: 1.5; }

.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Rechtstexte --------------------------------------------------- */

.recht { max-width: 44rem; }
.recht h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin-top: 2.5rem; }
.recht h3 { font-size: 1.1rem; margin-top: 1.75rem; }
.recht p, .recht li { color: var(--grau); font-size: 0.97rem; }
.recht ul { padding-left: 1.2rem; }
.recht li { margin-bottom: 0.5rem; }

/* ---------- Stimmung: Rauschen und Zeilen --------------------------------- */

.stoerung {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .5;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.028) 0px,
    rgba(255,255,255,.028) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 89;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* Einblenden beim Scrollen */
.zeigt-sich {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.zeigt-sich.ist-da { opacity: 1; transform: none; }

/* Flackernde Wortmarke */
@keyframes flackern {
  0%, 96%, 100% { opacity: 1; }
  97%           { opacity: .35; }
  98%           { opacity: .9; }
  99%           { opacity: .18; }
}
body.geladen .flackert { animation: flackern 7.5s steps(1, end) infinite; }

/* Bewegung ist Beiwerk - wer sie abstellt, verliert keinen Inhalt */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .zeigt-sich { opacity: 1; transform: none; }
  .held__bild { transform: none; }
}

/* Sprungmarke fuer Tastatur und Vorlesegeraete */
.sprung {
  position: absolute;
  left: 0.5rem; top: -4rem;
  z-index: 100;
  background: var(--gruen);
  color: var(--schwarz);
  padding: 0.6rem 1rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.sprung:focus { top: 0.5rem; color: var(--schwarz); }


/* Weit unten liegende Abschnitte laesst der Browser zunaechst ungerechnet.
   contain-intrinsic-size gibt ihm eine Platzhaltergroesse, damit die
   Bildlaufleiste nicht springt. */
.abschnitt.spaeter {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* Ersatzschriften auf die Masse der echten Schriften ziehen. Ohne das
   verschiebt sich das Layout in dem Moment, in dem die Schrift ankommt. */
@font-face {
  font-family: "Oswald Ersatz";
  src: local("Arial Narrow"), local("Helvetica Neue Condensed"), local("Arial");
  size-adjust: 80%;
  ascent-override: 125%;
  descent-override: 30%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Sans Ersatz";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 104%;
  ascent-override: 100%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Mono Ersatz";
  src: local("Menlo"), local("Courier New");
  size-adjust: 96%;
  ascent-override: 100%;
  descent-override: 26%;
  line-gap-override: 0%;
}

/* Mausschein: ein weicher roter Lichtkreis, der dem Zeiger mit Traegheit
   folgt - dasselbe Mittel wie auf funderground.events, dort in Gelb.
   Liegt hinter allem Inhalt (z-index 2) und faengt keine Klicks ab.
   Erscheint nur bei echter Maus: Auf Touch gaebe es nichts zu verfolgen, und
   bei "Bewegung reduzieren" wird er vom Skript ganz abgeschaltet. */
.mausschein {
  position: fixed; top: 0; left: 0;
  width: 640px; height: 640px; border-radius: 50%;
  z-index: 2; pointer-events: none;
  /* Kraeftiger als das gelbe Vorbild auf funderground.events: Rot hat auf
     fast schwarzem Grund (#05060a) deutlich weniger Leuchtkraft als Gelb -
     mit dessen 10 % war hier schlicht nichts zu sehen. */
  background: radial-gradient(circle,
    rgba(200, 24, 38, 0.30) 0%,
    rgba(176, 18, 30, 0.16) 30%,
    rgba(140, 14, 24, 0.06) 55%,
    transparent 72%);
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .5s ease;
  will-change: transform;
}
.mausschein--an { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mausschein { display: none; } }

/* Terminliste: jeder Eintrag fuehrt in die Buchung.
   text-decoration: none ist noetig, weil die Grundregel fuer <a> in dieser
   Datei unterstreicht - ohne das saehen die Kacheln wie Fliesstextlinks aus. */
.termin__kopf, a.slot { text-decoration: none; }
.termin__kopf:hover, a.slot:hover { text-decoration: none; }
.termin__kopf { display: block; }
.termin__kopf .termin__tag,
.termin__kopf .termin__datum { display: block; }
.termin__kopf:hover .termin__datum { color: var(--blut-text); }

a.slot {
  display: block; position: relative;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
a.slot .slot__zeit, a.slot .slot__alter { display: block; }
a.slot:hover {
  border-color: var(--blut); background: rgba(176,18,30,.10);
  transform: translateY(-2px);
}
.slot__ruf {
  display: block; margin-top: 0.45rem;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--grau-leise);
}
a.slot:hover .slot__ruf { color: var(--blut-text); }

/* Ablauf in Schritten - vier Karten statt eines Absatzes Fliesstext */
.ablauf {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  /* min(...,100%) ist Pflicht: Ohne das sprengt eine Karte auf schmalen
     Geraeten die Zeile und die Seite scrollt waagerecht. */
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  background: var(--linie);
  border: 1px solid var(--linie);
}
.ablauf li {
  background: var(--panel);
  padding: 1.4rem clamp(1rem, 2.5vw, 1.5rem);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.ablauf li::before { content: none; }
.ablauf__nr {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.2em; color: var(--blut-text);
}
.ablauf strong {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 700;
  color: var(--weiss); line-height: 1.1;
}
.ablauf span:last-child {
  font-size: 0.92rem; color: var(--grau); line-height: 1.55;
}

/* Erfolgio-Zeile im Fuss - wie auf funderground.events: rundes Logo neben
   dem Text. alt="" ist Absicht: Der Linktext sagt bereits, worum es geht;
   ein zusaetzliches "Erfolgio" waere fuer Screenreader eine Dopplung. */
.fuss__erfolgio a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  text-decoration: none;
}
.fuss__erfolgio img { border-radius: 50%; flex: none; }
.fuss__erfolgio a:hover { color: var(--knochen); }

/* ---------------------------------------------------------------------------
   Lebender Grund
   ---------------------------------------------------------------------------
   Drei Ebenen, die den schwarzen Seitengrund beleben:
     1. zwei Farbschleier, die gegeneinander wandern (rot wie die Warnlampen,
        gruen wie die Laborbeleuchtung)
     2. ein Pulsieren, das an eine Warnlampe erinnert
     3. eine Stoerlinie, die von oben nach unten durchlaeuft

   Die Zeiten sind bewusst kurz genug, um wahrgenommen zu werden: Ein erster
   Versuch mit 46 s Umlauf und 0,2 % Groessenaenderung je Sekunde war
   technisch aktiv, aber schlicht unsichtbar.

   Die MAXIMALE Deckkraft bleibt wie zuvor (0.16 rot / 0.07 gruen) - daran
   haengt die Lesbarkeit: Der leiseste Textton hat darauf 4,66 Kontrast, und
   unter 4,5 darf er nicht fallen. Sichtbar wird der Effekt ueber Tempo und
   Weg, nicht ueber mehr Farbe.
   Bewegt werden nur transform und opacity - beides laeuft auf der
   Grafikkarte und loest kein Neuberechnen des Layouts aus. */
.grund {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.grund::before,
.grund::after {
  content: ""; position: absolute; inset: -30%;
  background-repeat: no-repeat;
  will-change: transform, opacity;
}
.grund::before {
  background-image:
    radial-gradient(38rem 30rem at 18% 22%, rgba(176, 18, 30, 0.16), transparent 70%),
    radial-gradient(32rem 26rem at 82% 70%, rgba(176, 18, 30, 0.13), transparent 70%);
  animation: grund-links 19s ease-in-out infinite alternate,
             grund-puls 6.5s ease-in-out infinite;
}
.grund::after {
  background-image:
    radial-gradient(34rem 28rem at 72% 18%, rgba(123, 216, 143, 0.07), transparent 70%),
    radial-gradient(30rem 24rem at 25% 82%, rgba(123, 216, 143, 0.06), transparent 70%);
  animation: grund-rechts 26s ease-in-out infinite alternate;
}
@keyframes grund-links {
  from { transform: translate3d(-9%, -6%, 0) scale(1.0); }
  to   { transform: translate3d(9%, 7%, 0) scale(1.22); }
}
@keyframes grund-rechts {
  from { transform: translate3d(8%, 6%, 0) scale(1.18); }
  to   { transform: translate3d(-9%, -7%, 0) scale(1.0); }
}
/* Warnlampe: das Rot atmet, statt gleichmaessig zu stehen. */
@keyframes grund-puls {
  0%, 100% { opacity: 0.62; }
  50%      { opacity: 1; }
}

/* Stoerlinie, die ueber die ganze Seite laeuft - der Monitor-Look der Marke. */
.grund__scan {
  position: absolute; inset: -10% 0;
  background: linear-gradient(180deg,
    transparent 0%, rgba(123, 216, 143, 0.05) 46%,
    rgba(123, 216, 143, 0.11) 50%, rgba(123, 216, 143, 0.05) 54%, transparent 100%);
  background-size: 100% 34%;
  background-repeat: no-repeat;
  animation: grund-scan 9s linear infinite;
  will-change: transform;
}
@keyframes grund-scan {
  from { transform: translate3d(0, -40%, 0); }
  to   { transform: translate3d(0, 120%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .grund::before, .grund::after, .grund__scan { animation: none; }
  .grund__scan { opacity: 0; }
}

/* Der Inhalt muss ueber dem Grund liegen, sonst verschluckt ihn der Schleier. */
body > header, body > main, body > footer, body > .abschnitt { position: relative; z-index: 3; }

/* Profile im Fuss. Die Symbole sind eingebettete SVG - kein zusaetzlicher
   Abruf und keine fremde Quelle, die die Sicherheitsrichtlinie erlauben
   muesste. Der Name steht daneben: ein Symbol allein ist fuer viele Leute
   nicht eindeutig, und Screenreader brauchen ohnehin Text. */
.fuss__sozial {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
  align-items: center; margin: 0 0 0.9rem;
}
.fuss__sozial a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--grau); text-decoration: none;
  transition: color .15s ease;
}
.fuss__sozial a:hover { color: var(--blut-text); }
.fuss__sozial svg { flex: none; }