/* ============================================================
   DAS LABOR — Design-System
   Premium-Laborästhetik: tiefes Glas, leuchtende Reagenzien,
   ein Hauch Frankenstein. Alles lokal, keine externen Quellen.
   ============================================================ */

@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* Die beiden Markenschriften von daniel-bayer.net (Daniels eigene Lizenz,
   selbst gehostet): TopLuxury für große Überschriften, Kross für Fließtext. */
@font-face {
  font-family: "TopLuxury";
  src: url("fonts/TOPLUXURY.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: "Kross";
  src: url("fonts/KrossNeueGrotesk-Regular.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: "Kross";
  src: url("fonts/KrossNeueGrotesk-Bold.woff2") format("woff2");
  font-weight: 600 800;
  font-display: swap;
}

:root {
  --tinte: #050b14;          /* tiefste Fläche */
  --tinte-2: #081522;        /* Panels */
  --glas: rgba(255, 255, 255, 0.04);
  --glas-rand: rgba(0, 229, 208, 0.16);
  --glas-rand-hell: rgba(0, 229, 208, 0.38);
  --reagenz: #00e5d0;        /* Leucht-Türkis (Markenfamilie) */
  --reagenz-tief: #00aebb;
  --gold: #ffb347;           /* warmes Reagenz */
  --blitz: #b18cff;          /* Frankenstein-Violett */
  --text: #e8f1f2;
  --text-matt: #9fb0b8;
  --text-leise: #6f8290;
  --petrol: #15476d;         /* Verlaufsanfang der Hauptseite */
  --radius: 24px;            /* weiche Rundung wie daniel-bayer.net (~25px) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(0, 174, 187, 0.14), transparent 60%),
    radial-gradient(900px 480px at -10% 30%, rgba(177, 140, 255, 0.08), transparent 55%),
    radial-gradient(700px 500px at 50% 110%, rgba(255, 179, 71, 0.06), transparent 60%),
    var(--tinte);
  color: var(--text);
  font-family: "Kross", "DM Sans", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
  min-height: 100vh;
}

/* Kein Gitter mehr — Daniel fand das Karo zu „Schulblock" (04.08.2026).
   Die Tiefe kommt allein aus den radialen Farbschleiern des body. */

.buehne {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 96px;
}

/* ---------- Kopfzeile ---------- */

/* Schwebende Glasleiste im Patreon-Look: rund, fixiert, mit Tiefe */
.laborkopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(18px, 2.4vw, 38px);
  padding: 13px clamp(18px, 2.6vw, 30px);
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(10, 19, 32, 0.88), rgba(6, 12, 21, 0.8));
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 44px rgba(0, 0, 0, 0.42);
  transition: border-radius 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.wortmarke {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  text-decoration: none;
  color: var(--text);
}

.kopf-markenlogo {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
}

/* Kontextzeile unterm Logo: als bewusstes Lockup mit Haarlinien gefasst,
   damit das einzelne Wort mittig und hochwertig unter der Wortmarke sitzt */
.labor-kontext {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 9.5px;
  line-height: 1.25;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--reagenz);
  font-weight: 700;
  white-space: nowrap;
}

.labor-kontext::before,
.labor-kontext::after {
  content: "";
  height: 1px;
  flex: 0 0 24px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 208, 0.55));
}

.labor-kontext::after {
  background: linear-gradient(90deg, rgba(0, 229, 208, 0.55), transparent);
}

.kopf-status {
  font-size: 12.5px;
  color: var(--text-leise);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kopf-status .puls {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--reagenz);
  box-shadow: 0 0 12px var(--reagenz);
  animation: pulsieren 2.4s ease-in-out infinite;
}

@keyframes pulsieren {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

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

.held {
  display: grid;
  grid-template-columns: 0.98fr 1.02fr;
  gap: 48px;
  align-items: center;
  padding: 64px 0 56px;
}

/* Wie auf der Hauptseite: Bild links, Text rechts */
.held > div { order: 2; }
.held .heldbild { order: 1; }

.held .etikett {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--reagenz);
  border: 1px solid var(--glas-rand);
  background: var(--glas);
  border-radius: 999px;
  padding: 9px 18px;
  margin-bottom: 26px;
}

.held h1 {
  font-family: "TopLuxury", Georgia, serif;
  font-size: clamp(40px, 5.6vw, 64px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: 0.005em;
  margin-bottom: 22px;
}

.held h1 em {
  font-style: normal;
  color: var(--reagenz);
  text-shadow: 0 0 34px rgba(0, 229, 208, 0.45);
}

.held p {
  color: var(--text-matt);
  font-size: 17.5px;
  max-width: 56ch;
  margin-bottom: 14px;
}

.held .unterschrift {
  margin-top: 22px;
  color: var(--text-leise);
  font-size: 14.5px;
}

.held .unterschrift b { color: var(--text); font-weight: 600; }

/* ---------- Glaskarten ---------- */

.glas {
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 60px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
}

/* ---------- Stationsraster ---------- */

.abschnittkopf {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 54px 0 8px;
}

.abschnittkopf h2 {
  font-family: "TopLuxury", Georgia, serif;
  font-weight: 500;
  font-size: 30px;
  letter-spacing: 0.02em;
}

.abschnittkopf .linie {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--glas-rand-hell), transparent);
}

.abschnittkopf .nummer {
  font-size: 13px;
  color: var(--text-leise);
  letter-spacing: 0.2em;
}

.hinweiszeile {
  color: var(--text-leise);
  font-size: 14.5px;
  margin-bottom: 28px;
}

.stationen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 22px;
}

.station {
  position: relative;
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

.station:hover {
  transform: translateY(-4px);
  border-color: var(--glas-rand-hell);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 229, 208, 0.12),
    0 0 46px rgba(0, 229, 208, 0.10);
}

.station .versuchsnr {
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-leise);
  text-transform: uppercase;
}

.station .apparat {
  height: 96px;
  display: flex;
  align-items: flex-end;
}

.station h3 {
  font-family: "TopLuxury", Georgia, serif;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 0.015em;
}

.station .einordnung {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--reagenz);
}

.station p {
  color: var(--text-matt);
  font-size: 15px;
  flex: 1;
}

.station .fussleiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Signatur-Verlauf von daniel-bayer.net: 155°, Petrol → Türkis */
  background: linear-gradient(155deg, #15476d 0%, #007a87 100%);
  color: #fff;
  text-decoration: none;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 13px 24px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(0, 174, 187, 0.32);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.knopf:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 34px rgba(0, 174, 187, 0.45);
}

.knopf.leise {
  background: transparent;
  color: var(--reagenz);
  border: 1px solid var(--glas-rand-hell);
  box-shadow: none;
}

.merkmal {
  font-size: 12.5px;
  color: var(--text-leise);
}

/* Stationen in Entwicklung */

.station.experiment { border-style: dashed; border-color: rgba(255, 179, 71, 0.35); }

.station.experiment .einordnung { color: var(--gold); }

.brodeln {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.brodeln .blasen {
  display: inline-flex;
  gap: 4px;
}

.brodeln .blasen i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.4;
  animation: blubbern 1.6s ease-in-out infinite;
}

.brodeln .blasen i:nth-child(2) { animation-delay: 0.25s; }
.brodeln .blasen i:nth-child(3) { animation-delay: 0.5s; }

@keyframes blubbern {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-5px); }
}

/* ---------- SVG-Apparaturen ---------- */

.fluessig-t { fill: url(#verlaufTuerkis); }
.fluessig-g { fill: url(#verlaufGold); }
.fluessig-v { fill: url(#verlaufViolett); }

.glaslinie {
  fill: none;
  stroke: rgba(220, 245, 250, 0.55);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blase {
  fill: rgba(240, 255, 253, 0.85);
  animation: blaseSteigt 3.2s linear infinite;
}

.blase.b2 { animation-delay: 1.1s; }
.blase.b3 { animation-delay: 2.2s; }

@keyframes blaseSteigt {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 0.9; }
  85% { opacity: 0.7; }
  100% { transform: translateY(-34px); opacity: 0; }
}

.funke {
  fill: none;
  stroke: var(--blitz);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(177, 140, 255, 0.8));
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: zucken 5.5s ease-in-out infinite;
}

@keyframes zucken {
  0%, 78%, 100% { stroke-dashoffset: 60; opacity: 0; }
  80% { stroke-dashoffset: 0; opacity: 1; }
  86% { opacity: 0.2; }
  88% { opacity: 1; }
  92% { stroke-dashoffset: -60; opacity: 0; }
}

.orbit {
  fill: none;
  stroke: rgba(0, 229, 208, 0.7);
  stroke-width: 1.6;
  transform-origin: center;
  animation: kreisen 14s linear infinite;
}

.orbit.o2 { animation-duration: 22s; animation-direction: reverse; stroke: rgba(255, 179, 71, 0.65); }

@keyframes kreisen {
  to { transform: rotate(360deg); }
}

/* ---------- Laborordnung ---------- */

.ordnung {
  margin-top: 64px;
  padding: 34px 34px 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
}

.ordnung h3 {
  font-size: 15.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ordnung h3 .punkt {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--reagenz);
  box-shadow: 0 0 10px var(--reagenz);
}

.ordnung p { color: var(--text-matt); font-size: 14px; }

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

.laborfuss {
  margin-top: 72px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--text-leise);
  font-size: 13px;
}

/* ---------- Eingangstür (Gate) ---------- */

.tuer-buehne {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  position: relative;
  z-index: 1;
}

.tuer {
  width: min(460px, 94vw);
  padding: 44px 42px 38px;
  text-align: center;
  position: relative;
}

.tuer .apparat { margin: 0 auto 10px; width: 92px; }

.tuer h1 {
  font-size: 27px;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.tuer .untertitel {
  color: var(--reagenz);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.tuer p { color: var(--text-matt); font-size: 15px; margin-bottom: 26px; }

.tuer form { display: grid; gap: 14px; }

.tuer input[type="password"] {
  width: 100%;
  background: rgba(3, 16, 24, 0.85);
  border: 1px solid var(--glas-rand-hell);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  letter-spacing: 0.22em;
  text-align: center;
  padding: 15px 16px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tuer input[type="password"]:focus {
  border-color: var(--reagenz);
  box-shadow: 0 0 0 4px rgba(0, 229, 208, 0.14), 0 0 30px rgba(0, 229, 208, 0.18);
}

.tuer .fehler {
  display: none;
  color: #ff8f7a;
  font-size: 14px;
}

.tuer .fehler.zeigen { display: block; animation: wackeln 0.4s ease; }

@keyframes wackeln {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}

.tuer .schluesselhinweis {
  margin-top: 24px;
  font-size: 13.5px;
  color: var(--text-leise);
}

.tuer .schluesselhinweis b { color: var(--gold); font-weight: 600; }

/* ---------- Responsiv ---------- */

@media (max-width: 860px) {
  .held { grid-template-columns: 1fr; gap: 26px; padding-top: 48px; }
  .laborfuss { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .blase, .funke, .orbit, .brodeln .blasen i, .kopf-status .puls { animation: none; }
  .dampf path { animation: none; opacity: 0.3; }
}

/* ---------- Dampf über offenen Gefäßen ---------- */

.dampf path {
  fill: none;
  stroke: rgba(232, 241, 242, 0.42);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  filter: blur(1.1px);
  animation: dampfZug 5.4s ease-in-out infinite;
}

.dampf .d2 { animation-delay: 2.1s; stroke-width: 1.7; }
.dampf .d3 { animation-delay: 3.7s; stroke-width: 1.3; stroke: rgba(232, 241, 242, 0.3); }

@keyframes dampfZug {
  0%   { opacity: 0; transform: translateY(7px); }
  18%  { opacity: 0.5; }
  55%  { opacity: 0.26; }
  100% { opacity: 0; transform: translateY(-15px); }
}

/* ---------- Patreon / HD-Akademie ---------- */

.patreon-knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ff424d;
  color: #fff;
  text-decoration: none;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px 22px;
  border-radius: 999px;
  box-shadow: 0 8px 26px rgba(255, 66, 77, 0.3);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.patreon-knopf:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 34px rgba(255, 66, 77, 0.42);
}

.patreon-knopf svg { width: 15px; height: 15px; }

.akademie-band {
  margin-top: 26px;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  border-color: rgba(255, 66, 77, 0.28);
}

.akademie-band .zeile b { font-size: 16.5px; }

.akademie-band .zeile p {
  color: var(--text-matt);
  font-size: 14px;
  margin-top: 4px;
}

.akademie-band .stufen {
  color: var(--text-leise);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tuer .akademie-hinweis {
  margin-top: 18px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: grid;
  gap: 12px;
  justify-items: center;
}

.tuer .akademie-hinweis span {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* ---------- Heldbild (Higgsfield) ---------- */

/* Gestapelte Karten wie im Held von daniel-bayer.net: hinter dem Bild
   liegt leicht gedreht eine zweite Glasplatte. */
.heldbild { position: relative; }

.heldbild::before {
  content: "";
  position: absolute;
  inset: 20px 20px -16px -16px;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 229, 208, 0.13);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  transform: rotate(-2.4deg);
}

.heldbild img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--glas-rand);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(0, 229, 208, 0.10);
}

/* ---------- Türbild: Hintergrund der Eingangsseite (Higgsfield) ---------- */

/* Patreon-Look der Tür: tiefes Navy, Türkis-Leuchten, Chart-Kontur an den
   Rändern angedeutet, Daniel als Präsenz rechts (nur auf breiten Schirmen) */
.tuer-hintergrund {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1000px 560px at 16% -8%, rgba(0, 174, 187, 0.2), transparent 58%),
    radial-gradient(760px 520px at 90% 18%, rgba(0, 229, 208, 0.1), transparent 60%),
    radial-gradient(620px 480px at 62% 108%, rgba(177, 140, 255, 0.07), transparent 62%),
    linear-gradient(168deg, #0b1727 0%, #071019 52%, var(--tinte) 100%);
}

.tuer-kontur {
  position: absolute;
  height: 128%;
  width: auto;
  opacity: 0.16;
}

.tuer-kontur.links { left: -140px; top: -90px; }

.tuer-kontur.rechts {
  right: -170px;
  bottom: -110px;
  transform: scaleX(-1);
  opacity: 0.1;
}


/* Vignette, damit die Glaskarte lesbar bleibt und der Raum nach außen ausklingt */
.tuer-hintergrund::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 72% 64% at 46% 44%, rgba(5, 11, 20, 0) 0%, rgba(5, 11, 20, 0.32) 74%, rgba(5, 11, 20, 0.6) 100%);
}

/* Auf breiten Schirmen: Karte links, rechts Daniel mit Leuchtsaum */
@media (min-width: 1100px) {
  .tuer-buehne {
    place-items: center start;
    padding-left: clamp(56px, 9vw, 170px);
  }

  .tuer-portrait { opacity: 0.9; }
}

/* ---------- Logbuch ---------- */

.logbuch { padding: 24px 30px; }

.logbuch ol {
  list-style: none;
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
}

.logbuch li {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  align-items: baseline;
}

.logbuch li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 16px;
}

.logbuch .datum {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--reagenz);
  white-space: nowrap;
}

.logbuch p { color: var(--text-matt); font-size: 14.5px; line-height: 1.65; }
.logbuch p b { color: var(--text); }

@media (max-width: 640px) {
  .logbuch li { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Markenabgleich mit daniel-bayer.net ---------- */

/* Die Wortmarke spricht wie das Logo: Serifen-Versalien mit Sperrung */
.wortmarke b {
  font-family: "TopLuxury", Georgia, serif;
  font-weight: 500;
  font-size: 21px;
  letter-spacing: 0.12em;
}

.tuer h1 {
  font-family: "TopLuxury", Georgia, serif;
  font-weight: 500;
  letter-spacing: 0.015em;
}

/* Technische Etiketten und Knöpfe bleiben in DM Sans (Labor-Stimme);
   Kross übernimmt nur den Fließtext. */
.etikett, .einordnung, .versuchsnr, .kopf-status, .merkmal, .stufen,
.logbuch .datum, .abschnittkopf .nummer, .untertitel, .wortmarke span span,
.brodeln, .schluesselhinweis, .laborfuss {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Weißes Markenlogo und Claim im Fuß */
.laborfuss { align-items: center; }

.fusslogo { height: 42px; width: auto; opacity: 0.9; flex: 0 0 auto; }

.fusszeilen { display: grid; gap: 4px; text-align: right; }

.fusszeilen .claim {
  color: var(--text-matt);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11.5px;
  font-weight: 600;
}

@media (max-width: 860px) {
  .fusszeilen { text-align: left; }
}

/* Phönix-Emblem im Akademie-Band */
.band-emblem {
  height: 66px;
  width: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 18px rgba(0, 174, 187, 0.35));
}

/* Tür: kleines Markenlogo über dem Akademie-Hinweis */
.tuer .akademie-hinweis .tuerlogo { height: 34px; width: auto; opacity: 0.92; }

/* ============================================================
   DNA-Feinschliff (03.08.2026): Ankündigungsleiste, zentriertes
   Emblem, Serifen-Nav, Bewegung — Muster von daniel-bayer.net,
   übersetzt ins Dunkle.
   ============================================================ */

/* ---------- Ankündigungsleiste (wie die Hauptseite ganz oben) ---------- */

.ankuendigung {
  position: relative;
  z-index: 2;
  background: linear-gradient(155deg, #071522 0%, #0f3350 62%, #0b3a44 100%);
  border-bottom: 1px solid rgba(0, 229, 208, 0.16);
  padding: 10px clamp(16px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ankuendigung .botschaft {
  color: #dff5f7;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  flex: 1 1 auto;
  text-align: center;
}

.ankuendigung .knopf.mini {
  padding: 8px 16px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.sozialleiste {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.sozialleiste a {
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  transition: color 0.18s ease, transform 0.18s ease;
}

.sozialleiste a:hover { color: var(--reagenz); transform: translateY(-1px); }

.sozialleiste svg { width: 16px; height: 16px; }

@media (max-width: 760px) {
  .ankuendigung .botschaft { order: 3; flex-basis: 100%; }
}

/* ---------- Kopf mit fest ausgerichteter Originalmarke ---------- */

.laborkopf { position: relative; }

.kopf-nav {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 26px;
  justify-self: start;
}

.kopf-aktionen {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 12px;
}

.kopf-nav a {
  font-family: "TopLuxury", Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-matt);
  text-decoration: none;
  transition: color 0.18s ease;
}

.kopf-nav a:hover { color: var(--reagenz); }

@media (max-width: 700px) {
  .laborkopf { gap: 12px; padding: 11px 16px; }
  .kopf-markenlogo { width: 154px; }
  .labor-kontext { font-size: 8.5px; letter-spacing: 0.18em; }
}

@media (max-width: 360px) {
  .kopf-markenlogo { width: 138px; }
  .labor-kontext { font-size: 8px; letter-spacing: 0.14em; }
}

/* ---------- Sterne-Zeile (Bewertungen der Hauptseite) ---------- */

.sterne {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-matt);
  font-size: 13px;
}

.sterne .funkeln { color: var(--gold); letter-spacing: 2px; font-size: 14px; }

/* ---------- Fuß: Social-Icons + Rechtszeile ---------- */

.fuss-sozial { display: inline-flex; gap: 14px; margin-top: 10px; }

.fuss-sozial a { color: var(--text-leise); display: inline-flex; transition: color 0.18s ease; }

.fuss-sozial a:hover { color: var(--reagenz); }

.fuss-sozial svg { width: 17px; height: 17px; }

.fusszeilen .recht {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 10.5px;
  color: var(--text-leise);
}

/* ---------- Bewegung: sanftes Erscheinen beim Scrollen ---------- */

/* Nur verstecken, wenn JS da ist (Klasse mit-js im head gesetzt) —
   ohne JS bleibt alles sichtbar. */
.mit-js .erscheint {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.mit-js .erscheint.sichtbar { opacity: 1; transform: none; }

.stationen .station:nth-child(2) { transition-delay: 0.08s; }
.stationen .station:nth-child(3) { transition-delay: 0.16s; }
.stationen .station:nth-child(4) { transition-delay: 0.08s; }
.stationen .station:nth-child(5) { transition-delay: 0.16s; }
.logbuch li:nth-child(2) { transition-delay: 0.1s; }
.logbuch li:nth-child(3) { transition-delay: 0.2s; }

/* Heldbild atmet ganz langsam */
.heldbild img { animation: bildAtmen 9s ease-in-out infinite; }

@keyframes bildAtmen {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

/* Glanz, der beim Überfahren über die Knöpfe streicht */
.knopf { position: relative; overflow: hidden; }

.knopf::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -75%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}

.knopf:hover::after { left: 125%; }

@media (prefers-reduced-motion: reduce) {
  .erscheint { opacity: 1; transform: none; transition: none; }
  .heldbild img { animation: none; }
  .knopf::after { display: none; }
}

/* ============================================================
   Durchgängiges Menü + Footer (03.08.2026) — Qualität und
   Struktur wie daniel-bayer.net, übersetzt ins Labor.
   ============================================================ */

/* ---------- Menü ---------- */

/* Der Kopf liegt als eigene Ebene über den Bildbühnen. Das Mega-Menü darf
   dadurch den Inhalt überlagern, ohne vom Held-Schleier abgedunkelt zu werden. */
.kopf-buehne {
  position: sticky;
  top: 0;
  z-index: 80;
  max-width: 1360px;
  padding-top: 12px;
  padding-bottom: 0;
  transition: padding 0.3s ease;
}

/* Beim Scrollen saugt sich die Leiste bündig an die Oberkante */
.kopf-angedockt .kopf-buehne { padding-top: 0; }

.kopf-angedockt .laborkopf {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top-color: transparent;
  background: linear-gradient(180deg, rgba(9, 17, 29, 0.94), rgba(6, 12, 21, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 54px rgba(0, 0, 0, 0.5);
}

/* Leuchtkante: markiert die Fuge, unter die sich der Inhalt schiebt */
.laborkopf::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 208, 0.55) 30%, rgba(177, 140, 255, 0.4) 72%, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.kopf-angedockt .laborkopf::after { opacity: 1; }

.kopf-nav { position: static; }

.kopf-nav > a:not(.knopf) {
  font-family: "TopLuxury", Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-matt);
  text-decoration: none;
  transition: color 0.18s ease;
}

.kopf-nav > a:not(.knopf):hover { color: var(--reagenz); }

.kopf-aktionen .knopf.mini { padding: 9px 18px; font-size: 11.5px; }

.knopf.hell {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(0, 174, 187, 0.12));
  border: 2px solid rgba(0, 229, 208, 0.38);
  color: var(--text);
  box-shadow: none;
}

.knopf.hell:hover { border-color: var(--reagenz); box-shadow: 0 8px 22px rgba(0, 174, 187, 0.2); }

/* Rechner-Menü: dieselbe klare Tiefenlogik wie auf daniel-bayer.net —
   große Fläche, benannte Gruppen, großzügige Ziele. */
.hat-dropdown { position: static; display: inline-flex; }

.nav-aufklapper {
  position: relative;
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font-family: "TopLuxury", Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-matt);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: color 0.18s ease;
}

/* Unsichtbarer Übergang bis zur großen Menüfläche: Der Mauszeiger kann
   langsam nach unten fahren, ohne die Hover-Zone zu verlieren. */
.hat-dropdown.offen .nav-aufklapper::before {
  content: "";
  position: absolute;
  top: 100%;
  left: -18px;
  width: calc(100% + 36px);
  height: 42px;
}

.nav-pfeil {
  display: inline-block;
  width: 7px; height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, 1px);
  transition: transform 0.18s ease;
}

.hat-dropdown.offen .nav-aufklapper { color: var(--reagenz); }

.hat-dropdown.offen .nav-pfeil,
.nav-aufklapper[aria-expanded="true"] .nav-pfeil { transform: rotate(-135deg) translate(-1px, 1px); }

.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  transform: none;
  min-width: 0;
  padding: 30px 34px 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4.6vw, 64px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 12% -12%, rgba(255, 255, 255, 0.11), transparent 36%),
    radial-gradient(circle at 88% 115%, rgba(0, 229, 208, 0.1), transparent 38%),
    linear-gradient(145deg, rgba(13, 29, 45, 0.92), rgba(5, 11, 20, 0.88));
  border: 1px solid rgba(205, 255, 250, 0.14);
  border-radius: 26px;
  -webkit-backdrop-filter: blur(28px) saturate(142%);
  backdrop-filter: blur(28px) saturate(142%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 229, 208, 0.08),
    0 28px 70px rgba(0, 0, 0, 0.58);
  transition: opacity 0.16s ease, visibility 0.16s ease;
  z-index: 60;
}

.dropdown::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: 25px;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.08), transparent 24%, transparent 72%, rgba(0, 229, 208, 0.035)),
    radial-gradient(ellipse 44% 16% at 26% 0%, rgba(255, 255, 255, 0.12), transparent 72%);
  pointer-events: none;
}

.dropdown > * { position: relative; z-index: 1; }

.hat-dropdown.offen .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.dropdown-spalte {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 18px 16px 16px;
  overflow: hidden;
  border: 1px solid rgba(210, 255, 251, 0.13);
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.1), transparent 38%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018) 52%, rgba(0, 174, 187, 0.065));
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    inset 0 -1px 0 rgba(0, 229, 208, 0.08),
    0 14px 32px rgba(0, 0, 0, 0.2);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.dropdown-spalte::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 150px;
  top: -112px;
  left: -48px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), rgba(0, 229, 208, 0.045) 44%, transparent 70%);
  filter: blur(2px);
  pointer-events: none;
  transition: transform 0.45s ease, opacity 0.45s ease;
}

.dropdown-spalte:hover,
.dropdown-spalte:focus-within {
  border-color: rgba(0, 229, 208, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.21),
    inset 0 -1px 0 rgba(0, 229, 208, 0.11),
    0 16px 36px rgba(0, 0, 0, 0.24);
}

.dropdown-spalte:hover::before,
.dropdown-spalte:focus-within::before {
  opacity: 0.92;
  transform: translate(18px, 8px);
}

.dropdown-spalte > * { position: relative; z-index: 1; }

.dropdown-titel {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--reagenz);
  padding: 0 4px 13px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.dropdown a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  font-family: "TopLuxury", Georgia, serif;
  font-size: clamp(15px, 1.45vw, 18px);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 54%, rgba(0, 174, 187, 0.025));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.13);
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.dropdown a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.018) 30%, transparent 56%);
  opacity: 0.55;
  transform: translateX(-15%);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.42s ease;
}

.dropdown a:hover,
.dropdown a:focus-visible {
  color: var(--reagenz);
  border-color: rgba(0, 229, 208, 0.34);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(0, 229, 208, 0.085));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(0, 229, 208, 0.13),
    0 8px 22px rgba(0, 174, 187, 0.12);
}

.dropdown a:hover::before,
.dropdown a:focus-visible::before { opacity: 0.9; transform: translateX(10%); }

.dropdown-index {
  flex: 0 0 24px;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--reagenz);
}

.dropdown a > span { position: relative; z-index: 1; }
.dropdown a > span:last-child { min-width: 0; }

.dropdown a b { display: block; font: inherit; }

.dropdown a small {
  display: block;
  margin-top: 5px;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-matt);
}

.dropdown a.im-aufbau { color: var(--text-matt); }
.dropdown a.im-aufbau:hover small,
.dropdown a.im-aufbau:focus-visible small { color: var(--reagenz); }

/* Burger + Mobilmenü */
.menue-knopf {
  display: none;
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  border-radius: 12px;
  color: var(--text);
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.menue-symbol {
  position: relative;
  display: block;
  width: 20px;
  height: 16px;
}

.menue-symbol i {
  position: absolute;
  left: 0;
  width: 20px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: top 0.2s ease, transform 0.2s ease, opacity 0.15s ease;
}

.menue-symbol i:nth-child(1) { top: 1px; }
.menue-symbol i:nth-child(2) { top: 7px; }
.menue-symbol i:nth-child(3) { top: 13px; }

.menue-knopf[aria-expanded="true"] .menue-symbol i:nth-child(1) { top: 7px; transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-symbol i:nth-child(2) { opacity: 0; }
.menue-knopf[aria-expanded="true"] .menue-symbol i:nth-child(3) { top: 7px; transform: rotate(-45deg); }

.mobil-menue {
  display: grid;
  gap: 4px;
}

.mobil-menue .mobil-hauptlink,
.mobil-gruppe-knopf {
  width: min(100%, 520px);
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "TopLuxury", Georgia, serif;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  text-align: center;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.mobil-menue .mobil-hauptlink:hover,
.mobil-gruppe-knopf:hover,
.mobil-gruppe-knopf[aria-expanded="true"] {
  background: rgba(0, 229, 208, 0.06);
  border-color: rgba(0, 229, 208, 0.28);
  color: var(--reagenz);
}

.mobil-gruppe {
  width: min(100%, 520px);
  display: grid;
  justify-items: stretch;
}

.mobil-gruppe-knopf { width: 100%; }

.mobil-gruppe-knopf[aria-expanded="true"] .nav-pfeil { transform: rotate(-135deg) translate(-1px, 1px); }

.mobil-untermenue {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 2px 0 10px;
  padding: 10px 12px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(205, 255, 250, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% -8%, rgba(255, 255, 255, 0.12), transparent 37%),
    linear-gradient(150deg, rgba(18, 36, 52, 0.9), rgba(6, 14, 25, 0.86));
  -webkit-backdrop-filter: blur(24px) saturate(138%);
  backdrop-filter: blur(24px) saturate(138%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    inset 0 -1px 0 rgba(0, 229, 208, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.28);
}

.mobil-untermenue::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: 23px;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.07), transparent 34%, rgba(0, 229, 208, 0.025));
  pointer-events: none;
}

.mobil-untermenue[hidden] { display: none; }

.mobil-untermenue a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 50px;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-matt);
  text-decoration: none;
  padding: 10px 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.015) 55%, rgba(0, 174, 187, 0.035));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.mobil-untermenue a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.015) 32%, transparent 58%);
  opacity: 0.62;
  pointer-events: none;
}

.mobil-untermenue a:hover,
.mobil-untermenue a:focus-visible {
  color: var(--reagenz);
  border-color: rgba(0, 229, 208, 0.34);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(0, 229, 208, 0.085));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(0, 229, 208, 0.12),
    0 7px 18px rgba(0, 174, 187, 0.1);
  transform: translateY(-1px);
}

.mobil-untermenue a > * { position: relative; z-index: 1; }

.mobil-untermenue a small {
  flex: 0 0 auto;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-matt);
}

@media (prefers-reduced-motion: reduce) {
  .dropdown-spalte,
  .dropdown-spalte::before,
  .dropdown a,
  .dropdown a::before,
  .mobil-untermenue a { transition: none; }

  .dropdown a:hover,
  .dropdown a:focus-visible,
  .mobil-untermenue a:hover,
  .mobil-untermenue a:focus-visible { transform: none; }
}

.mobil-menue .mobil-knoepfe {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 18px 14px 6px;
  flex-wrap: wrap;
}

.menue-offen,
.menue-offen body { overflow: hidden; }

@media (max-width: 1180px) {
  .kopf-aktionen .knopf.hell { display: none; }
}

@media (max-width: 980px) {
  .kopf-nav,
  .kopf-aktionen { display: none; }
  .menue-knopf { display: inline-flex; }
  .laborkopf {
    position: relative;
    z-index: 2;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .wortmarke {
    grid-column: 1;
    justify-self: start;
  }
  .menue-knopf {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .mobil-menue {
    position: fixed;
    inset: 0;
    z-index: 1;
    margin: 0;
    padding: 112px 24px 36px;
    align-content: start;
    justify-items: center;
    overflow: hidden auto;
    background:
      radial-gradient(circle at 78% 86%, rgba(0, 174, 187, 0.13), transparent 34%),
      radial-gradient(circle at 16% 24%, rgba(177, 140, 255, 0.08), transparent 31%),
      rgba(5, 11, 20, 0.985);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: blur(18px);
  }

  .mobil-menue > * { position: relative; z-index: 1; }
}

@media (max-width: 560px) {
  .mobil-menue { padding: 108px 18px 28px; }
  .mobil-menue .mobil-hauptlink,
  .mobil-gruppe-knopf { min-height: 54px; font-size: 15px; }
}

@media (min-width: 981px) {
  .mobil-menue { display: none !important; }
}

/* ---------- Fuß in Spalten (wie die Hauptseite) ---------- */

.laborfuss {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 36px;
  align-items: start;
}

.fuss-marke { display: grid; gap: 14px; justify-items: start; }

/* Dasselbe Lockup wie im Kopf, nur auf die Breite des Fußlogos gespannt:
   die Haarlinien laufen bis an die Logokanten und fassen das Wort ein. */
.fuss-kontext {
  width: min(100%, 216px);
  margin-top: -6px;
  font-size: 10px;
}

.fuss-kontext::before,
.fuss-kontext::after { flex: 1; }

.fusslogo {
  width: min(100%, 216px);
  height: auto;
}

.fuss-marke .claim {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  color: var(--text-matt);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11.5px;
  font-weight: 600;
}

.fuss-spalte .fuss-titel {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--reagenz);
  margin-bottom: 12px;
}

.fuss-spalte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.fuss-spalte a {
  color: var(--text-matt);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s ease;
}

.fuss-spalte a:hover { color: var(--reagenz); }

.fuss-spalte .bald { color: var(--text-leise); font-size: 13.5px; }

.fuss-schluss {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-leise);
}

.fuss-schluss .recht { letter-spacing: 0.1em; text-transform: uppercase; font-size: 10.5px; }

@media (max-width: 980px) {
  .laborfuss { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .laborfuss { grid-template-columns: 1fr; }
}

/* ---------- Rechtsseiten ---------- */

.rechtsseite { max-width: 780px; margin: 0 auto; padding: 40px 0 20px; }

.rechtsseite h1 {
  font-family: "TopLuxury", Georgia, serif;
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 46px);
  margin-bottom: 10px;
}

.rechtsseite .stand { color: var(--text-leise); font-size: 13px; margin-bottom: 34px; }

.rechtsseite h2 {
  font-family: "TopLuxury", Georgia, serif;
  font-weight: 500;
  font-size: 24px;
  margin: 34px 0 10px;
}

.rechtsseite h3 { font-size: 16.5px; font-weight: 700; margin: 22px 0 6px; }

.rechtsseite p, .rechtsseite li { color: var(--text-matt); font-size: 15px; line-height: 1.75; }

.rechtsseite ul { padding-left: 22px; margin: 8px 0 14px; }

.rechtsseite a { color: var(--reagenz); text-decoration: none; }

.rechtsseite a:hover { text-decoration: underline; }

.rechtsseite .kontaktblock {
  padding: 18px 22px;
  margin: 12px 0 6px;
  width: fit-content;
}

.rechtsseite .kontaktblock p { margin: 0; line-height: 1.8; }

/* Türseite mit Kopfzeile: Bühne kompakter, damit nichts unnötig scrollt */
.tuer-buehne.kompakt { min-height: calc(100vh - 210px); padding-top: 24px; }

/* Nachbesserungen Menü: hidden respektieren und nichts umbrechen */
.mobil-menue[hidden] { display: none !important; }

.knopf { white-space: nowrap; }

.kopf-nav { gap: 22px; }

/* ============================================================
   Politur-Runde (03.08.2026): Teilchen, Funkeln, Schimmer,
   Parallax-Feinheiten, Bild-Hintergründe in Karten.
   ============================================================ */

/* Schwebeteilchen im Held — winzige Glühpunkte, die aufsteigen */
.held { position: relative; }

.schwebeteilchen { position: absolute; inset: 0; pointer-events: none; overflow: visible; }

.schwebeteilchen i {
  position: absolute;
  bottom: 8%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 229, 208, 0.9), rgba(0, 229, 208, 0));
  filter: blur(0.5px);
  opacity: 0;
  animation: schweben 11s linear infinite;
}

.schwebeteilchen i:nth-child(1) { left: 6%;  animation-delay: 0s;   animation-duration: 12s; }
.schwebeteilchen i:nth-child(2) { left: 22%; animation-delay: 3.5s; width: 4px; height: 4px; }
.schwebeteilchen i:nth-child(3) { left: 38%; animation-delay: 7s;   animation-duration: 14s; }
.schwebeteilchen i:nth-child(4) { left: 55%; animation-delay: 1.8s; width: 3.5px; height: 3.5px; }
.schwebeteilchen i:nth-child(5) { left: 72%; animation-delay: 5.4s; animation-duration: 13s; background: radial-gradient(circle, rgba(255, 179, 71, 0.8), rgba(255, 179, 71, 0)); }
.schwebeteilchen i:nth-child(6) { left: 88%; animation-delay: 9s;   width: 4px; height: 4px; background: radial-gradient(circle, rgba(177, 140, 255, 0.8), rgba(177, 140, 255, 0)); }

@keyframes schweben {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  12%  { opacity: 0.85; }
  55%  { transform: translateY(-46vh) translateX(14px); opacity: 0.4; }
  100% { transform: translateY(-78vh) translateX(-10px); opacity: 0; }
}

/* Sterne funkeln ganz leise */
.sterne .funkeln { animation: funkeln 3.4s ease-in-out infinite; }

@keyframes funkeln {
  0%, 100% { text-shadow: 0 0 4px rgba(255, 179, 71, 0.35); }
  50% { text-shadow: 0 0 12px rgba(255, 179, 71, 0.75); }
}

/* Lauflicht auf den Abschnittslinien */
.abschnittkopf .linie {
  background:
    linear-gradient(90deg, transparent 0%, rgba(0, 229, 208, 0.75) 12%, transparent 24%),
    linear-gradient(90deg, var(--glas-rand-hell), transparent);
  background-size: 260% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: linienlicht 7s ease-in-out infinite;
}

@keyframes linienlicht {
  0%, 22% { background-position: -160% 0, 0 0; }
  60%, 100% { background-position: 160% 0, 0 0; }
}

/* Das Akademie-Band hält sein Emblem und seine Inhalte auf einer Ebene. */
.akademie-band { position: relative; overflow: hidden; }

.akademie-band > div, .akademie-band > a, .akademie-band > img.band-emblem {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .schwebeteilchen i, .sterne .funkeln, .abschnittkopf .linie { animation: none; }
}

/* ---------- Vollflächiger Held (03.08., Daniels Wunsch: modern, Bild als Bühne) ---------- */

/* Patreon-Look: tiefes Navy mit Türkis-Leuchten, weiche Kartenecken,
   Chart-Kontur links angedeutet, Daniel als Präsenz rechts */
.held-voll {
  position: relative;
  overflow: hidden;
  min-height: 72vh;
  display: flex;
  align-items: center;
  margin: 14px clamp(12px, 1.9vw, 28px) 0;
  border-radius: calc(var(--radius) + 8px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  background:
    radial-gradient(860px 480px at 12% -6%, rgba(0, 174, 187, 0.2), transparent 58%),
    radial-gradient(720px 460px at 88% 12%, rgba(0, 229, 208, 0.1), transparent 58%),
    radial-gradient(560px 420px at 70% 100%, rgba(177, 140, 255, 0.07), transparent 60%),
    linear-gradient(168deg, #0b1727 0%, #071019 55%, var(--tinte) 100%);
}

.held-kontur {
  position: absolute;
  left: clamp(-170px, -9vw, -70px);
  top: -80px;
  height: 132%;
  width: auto;
  opacity: 0.15;
  pointer-events: none;
}

.held-portrait {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: 54%;
  object-fit: cover;
  object-position: top right;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.92) 34%, #000 58%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.92) 34%, #000 58%);
  opacity: 0.94;
}

/* Schleier: links dunkel für den Text, unten sanfter Auslauf */
.held-voll::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 11, 20, 0.86) 0%, rgba(5, 11, 20, 0.52) 38%, rgba(5, 11, 20, 0.06) 68%, rgba(5, 11, 20, 0.22) 100%),
    linear-gradient(180deg, rgba(5, 11, 20, 0.32) 0%, rgba(5, 11, 20, 0.05) 30%, rgba(5, 11, 20, 0.12) 68%, rgba(5, 11, 20, 0.55) 100%);
}

.held-voll .schwebeteilchen { z-index: 2; }

.held-inhalt {
  position: relative;
  z-index: 2;
  padding-top: 56px;
  padding-bottom: 72px;
  width: 100%;
}

.held-inhalt .etikett {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--reagenz);
  border: 1px solid var(--glas-rand);
  background: rgba(5, 11, 20, 0.55);
  border-radius: 999px;
  padding: 9px 18px;
  margin-bottom: 26px;
  backdrop-filter: blur(6px);
}

.held-inhalt h1 {
  font-family: "TopLuxury", Georgia, serif;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 0.005em;
  margin-bottom: 22px;
  max-width: 13ch;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.55);
}

.held-inhalt h1 em {
  font-style: normal;
  color: var(--reagenz);
  text-shadow: 0 0 34px rgba(0, 229, 208, 0.5);
}

.held-inhalt p {
  color: #c3d2d8;
  font-size: 17.5px;
  max-width: 54ch;
  margin-bottom: 14px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.held-inhalt .unterschrift { margin-top: 22px; color: var(--text-matt); font-size: 14.5px; }

.held-inhalt .unterschrift b { color: var(--text); font-weight: 600; }

@media (max-width: 860px) {
  .held-voll { min-height: 64vh; }
  /* Auf schmalen Schirmen bleibt Daniel eine leise Andeutung hinter dem Text */
  .held-portrait { opacity: 0.42; }
  .held-voll::before {
    background:
      linear-gradient(180deg, rgba(5, 11, 20, 0.8) 0%, rgba(5, 11, 20, 0.55) 40%, rgba(5, 11, 20, 0.72) 75%, rgba(5, 11, 20, 0.9) 100%);
  }
}

@media (max-width: 420px) {
  body[data-intro] .abschnittkopf {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  body[data-intro] .abschnittkopf .linie {
    order: 3;
    flex: 1 0 100%;
  }

  body[data-intro] .abschnittkopf .nummer {
    max-width: 100%;
    margin-left: auto;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-align: right;
  }

  body[data-intro] .ordnung {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .held-hintergrund { transform: none; }
}

/* ---------- Stationsbilder statt SVG-Icons (03.08., Daniels Wunsch) ---------- */

.station .stationsbild {
  margin: -26px -26px 0;
  height: 172px;
  overflow: hidden;
  position: relative;
}

.station .stationsbild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.station:hover .stationsbild img { transform: scale(1.06); }

/* Auslauf ins Kartenglas, damit Bild und Text ineinander fließen */
.station .stationsbild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(8, 16, 26, 0.62) 100%);
}

.station .versuchsnr {
  z-index: 2;
  color: rgba(232, 241, 242, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

/* ============================================================
   Lebendige Bühnen (03.08.): Nebelschwaden, Aufleuchten,
   Kolbenglühen + zweite Bildbühne weiter unten.
   ============================================================ */

.lebendig { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }

/* Ziehende Nebelschwaden */
.nebel { position: absolute; inset: -20% -10%; }

.nebel i {
  position: absolute;
  width: 55vw; height: 55vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 238, 243, 0.2), transparent 62%);
  filter: blur(28px);
  opacity: 0;
  animation: nebelzug 26s linear infinite;
}

.nebel i:nth-child(1) { left: -12%; bottom: -34%; }
.nebel i:nth-child(2) { left: 34%; bottom: -44%; width: 66vw; height: 66vw; animation-delay: 9s; animation-duration: 30s; }
.nebel i:nth-child(3) { right: -16%; bottom: -30%; animation-delay: 17s; animation-duration: 23s; }

@keyframes nebelzug {
  0%   { transform: translateY(14%) translateX(0) scale(1); opacity: 0; }
  16%  { opacity: 0.5; }
  60%  { opacity: 0.28; }
  100% { transform: translateY(-72%) translateX(7%) scale(1.28); opacity: 0; }
}

/* Gelegentliches violettes Aufblitzen (dort, wo der Funke im Bild zuckt) */
.blitzlicht {
  position: absolute;
  left: 38%; top: 34%;
  width: 30vw; height: 30vw;
  background: radial-gradient(circle, rgba(177, 140, 255, 0.5), rgba(177, 140, 255, 0.08) 45%, transparent 70%);
  filter: blur(14px);
  opacity: 0;
  animation: blitzen 9s linear infinite;
}

@keyframes blitzen {
  0%, 85.5%, 100% { opacity: 0; }
  86.4% { opacity: 0.55; }
  87.2% { opacity: 0.07; }
  88.4% { opacity: 0.7; }
  89.8% { opacity: 0.12; }
  91%   { opacity: 0; }
}

/* Pulsierendes Türkis-Glühen der Kolben */
.gluehen {
  position: absolute;
  right: 8%; bottom: -6%;
  width: 44vw; height: 26vw;
  background: radial-gradient(ellipse, rgba(0, 229, 208, 0.27), transparent 65%);
  filter: blur(22px);
  animation: gluehpuls 7s ease-in-out infinite;
}

.gluehen.mittig { right: 28%; bottom: -10%; animation-delay: 2.5s; }

@keyframes gluehpuls {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* ---------- Zweite Bildbühne (Regal) ---------- */

.zwischenbuehne {
  position: relative;
  overflow: hidden;
  min-height: 46vh;
  display: flex;
  align-items: center;
  margin-top: 72px;
  margin-left: clamp(12px, 1.9vw, 28px);
  margin-right: clamp(12px, 1.9vw, 28px);
  border-radius: calc(var(--radius) + 8px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.buehnen-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.06);
}

.zwischenbuehne::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 68% 78% at 50% 52%, rgba(5, 11, 20, 0.28) 0%, rgba(5, 11, 20, 0.7) 74%, rgba(5, 11, 20, 0.92) 100%),
    linear-gradient(180deg, var(--tinte) 0%, rgba(5, 11, 20, 0.24) 22%, rgba(5, 11, 20, 0.3) 74%, var(--tinte) 100%);
}

.zwischen-inhalt {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding-top: 64px;
  padding-bottom: 64px;
}

.zwischen-inhalt .zitat {
  font-family: "TopLuxury", Georgia, serif;
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 500;
  line-height: 1.18;
  max-width: 22ch;
  margin: 18px auto 14px;
  text-shadow: 0 4px 36px rgba(0, 0, 0, 0.6);
}

.zwischen-inhalt .unterzeile {
  color: var(--text-matt);
  font-size: 16.5px;
  max-width: 52ch;
  margin: 0 auto;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .nebel i, .blitzlicht, .gluehen { animation: none; opacity: 0.18; }
  .blitzlicht { opacity: 0; }
}

/* Video füllt die Bühne wie das Bild; Handy bekommt schlankere Effekte */
video.held-hintergrund { object-fit: cover; background: var(--tinte); }

@media (max-width: 860px) {
  .nebel i { filter: blur(16px); }
  .nebel i:nth-child(3) { display: none; }
  .blitzlicht { display: none; }
}

/* ---------- Varianten-Wahl im Held (Auswahlphase, fliegt nach Entscheidung raus) ---------- */

.varianten-wahl {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: rgba(5, 11, 20, 0.55);
  border: 1px solid var(--glas-rand);
  border-radius: 999px;
  padding: 8px 12px;
  backdrop-filter: blur(6px);
}

.varianten-wahl .wahl-titel {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-leise);
  padding-left: 6px;
}

.wahl-knopf {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-matt);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.wahl-knopf:hover { color: var(--reagenz); }

.wahl-knopf.aktiv {
  color: #03202a;
  background: linear-gradient(155deg, #15476d 0%, #007a87 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

/* ============================================================
   Stationen als „Laborbank" (04.08.2026, Daniels Wahl aus drei
   Layout-Varianten): volle Breite-Reihen, alternierend gespiegelt,
   große Versuchsnummer als Wasserzeichen.
   ============================================================ */

.bank { display: grid; gap: 26px; }

.reihe {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  min-height: 300px;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--glas-rand);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.reihe:hover {
  transform: translateY(-4px);
  border-color: var(--glas-rand-hell);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 0 46px rgba(0, 229, 208, 0.10);
}

.reihe.spiegel { grid-template-columns: 1.1fr 0.9fr; }

.reihe .bildteil { position: relative; overflow: hidden; }

.reihe .bildteil img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.reihe:hover .bildteil img { transform: scale(1.045); }

.reihe .bildteil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, rgba(8, 16, 26, 0.92) 100%);
}

.reihe.spiegel .bildteil::after {
  background: linear-gradient(270deg, transparent 55%, rgba(8, 16, 26, 0.92) 100%);
}

.reihe .textteil {
  position: relative;
  padding: 34px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.reihe h3 {
  font-family: "TopLuxury", Georgia, serif;
  font-weight: 500;
  font-size: 26px;
}

.reihe .textteil p { color: var(--text-matt); font-size: 15px; max-width: 56ch; }

.reihe .wasserzahl {
  position: absolute;
  top: 4px;
  right: 22px;
  font-family: "TopLuxury", Georgia, serif;
  font-size: 120px;
  line-height: 1;
  color: rgba(0, 229, 208, 0.07);
  pointer-events: none;
}

.reihe .fuss { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }

.reihe.spiegel .bildteil { order: 2; }
.reihe.spiegel .textteil { order: 1; }

.reihe.experiment { border-style: dashed; border-color: rgba(255, 179, 71, 0.35); }
.reihe.experiment .einordnung { color: var(--gold); }

/* Reihen gleiten passend zur Spiegelrichtung herein */
.mit-js .erscheint.von-links { transform: translateX(-30px); }
.mit-js .erscheint.von-rechts { transform: translateX(30px); }
.mit-js .erscheint.sichtbar { transform: none; }

@media (max-width: 860px) {
  .reihe, .reihe.spiegel { grid-template-columns: 1fr; }
  .reihe .bildteil { min-height: 220px; order: 1 !important; }
  .reihe .textteil { order: 2 !important; padding: 26px 24px; }
  .reihe .bildteil::after { background: linear-gradient(180deg, transparent 55%, rgba(8, 16, 26, 0.92) 100%) !important; }
  .reihe .wasserzahl { font-size: 84px; }
  .mit-js .erscheint.von-links, .mit-js .erscheint.von-rechts { transform: translateY(26px); }
  .mit-js .erscheint.sichtbar { transform: none; }
}

/* ============================================================
   Premium-Polish (04.08.2026): Feinheiten aus allen Blickwinkeln —
   Typografie, Mikro-Interaktionen, Fokus, Rhythmus.
   ============================================================ */

/* Dunkles Farbschema fürs System, dezente Scrollbar, Auswahl-Farbe */
html { color-scheme: dark; }

::selection { background: rgba(0, 229, 208, 0.28); color: #eafffb; }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--tinte); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 99px; border: 3px solid var(--tinte); }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 208, 0.35); }

/* Überschriften brechen ausgewogen, Fließtext ohne Hurenkinder-Ecken */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Sichtbarer, edler Fokus für Tastatur-Nutzer */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--reagenz);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Knöpfe reagieren auch beim Drücken */
.knopf:active { transform: translateY(0) scale(0.98); }

/* Anker landen mit Luft */
[id] { scroll-margin-top: 108px; }

/* Navigation: animierte Unterstreichung statt bloßem Farbwechsel */
.kopf-nav > a:not(.knopf), .nav-aufklapper {
  position: relative;
  padding-bottom: 4px;
}

.kopf-nav > a:not(.knopf)::after, .nav-aufklapper::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--reagenz);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav-aufklapper::after { bottom: -2px; }

.kopf-nav > a:not(.knopf):hover::after,
.nav-aufklapper:hover::after,
.hat-dropdown.offen .nav-aufklapper::after { transform: scaleX(1); }

/* Kicker über den Abschnittsköpfen — Editorial-Note wie die Hauptseite */
.kicker {
  display: block;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--reagenz);
  margin: 76px 0 6px;
}

.kicker + .abschnittkopf { margin-top: 0; }

/* Logbuch: Datum und Uhrzeit als Zeitstempel-Chip */
.logbuch .datum {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--glas-rand);
  background: rgba(0, 229, 208, 0.06);
  border-radius: 999px;
  padding: 4px 12px;
}

.logbuch .uhrzeit {
  color: var(--text-matt);
  font-size: 0.9em;
  letter-spacing: 0.06em;
}

.logbuch .uhrzeit::before {
  content: "·";
  margin-right: 7px;
  color: var(--text-leise);
}

/* Zwischenbühne: großes Zitat-Ornament */
.zwischen-inhalt { position: relative; }

.zwischen-inhalt .zitat::before {
  content: "\201E";
  display: block;
  font-family: "TopLuxury", Georgia, serif;
  font-size: 84px;
  line-height: 0.2;
  color: rgba(0, 229, 208, 0.35);
  margin-bottom: 18px;
}

/* Scroll-Hinweis unten im Held */
.scroll-wink {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(232, 241, 242, 0.6);
  display: inline-flex;
  padding: 10px;
  transition: color 0.2s ease;
  animation: winken 2.6s ease-in-out infinite;
}

.scroll-wink:hover { color: var(--reagenz); }

.scroll-wink svg { width: 22px; height: 22px; }

@keyframes winken {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.65; }
  50% { transform: translateX(-50%) translateY(7px); opacity: 1; }
}

/* Mehr Luft im Seitenrhythmus */
.zwischenbuehne { margin-top: 84px; }
.laborfuss { margin-top: 84px; padding-top: 34px; }
.ordnung { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .scroll-wink { animation: none; }
}

/* ============================================================
   Signature-Momente (04.08.2026): Labor-Licht, Eröffnungs-Vorhang,
   Ornament-Trenner, Werkbank-Chips.
   ============================================================ */

/* Labor-Licht: Lichtkegel folgt dem Zeiger über die Fläche */
.leuchtflaeche { position: relative; }

.leuchtflaeche::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 229, 208, 0.09), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.leuchtflaeche:hover::after { opacity: 1; }

/* Eröffnungs-Vorhang: Emblem glüht kurz auf, dann hebt sich der Schleier */
.vorhang {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--tinte);
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 0.7s ease;
}

.vorhang img {
  height: 96px;
  filter: drop-shadow(0 0 26px rgba(0, 174, 187, 0.55));
  animation: vorhangGlut 1.1s ease-in-out;
}

.vorhang.weg { opacity: 0; pointer-events: none; }

@keyframes vorhangGlut {
  0% { opacity: 0; transform: scale(0.92); }
  55% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; }
}

/* Ornament-Trenner vor dem Fuß: Emblem zwischen auslaufenden Linien */
.ornament {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 84px 0 -50px;
}

.ornament span { flex: 1; height: 1px; }
.ornament span:first-child { background: linear-gradient(270deg, var(--glas-rand-hell), transparent); }
.ornament span:last-child { background: linear-gradient(90deg, var(--glas-rand-hell), transparent); }
.ornament img { height: 34px; opacity: 0.85; }

/* Werkbank-Chips statt schlichter Hinweiszeile */
.werk-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }

.werk-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-matt);
  border: 1px solid var(--glas-rand);
  background: var(--glas);
  border-radius: 999px;
  padding: 8px 16px;
}

.werk-chips .chip i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--reagenz);
  box-shadow: 0 0 10px var(--reagenz);
  animation: pulsieren 2.4s ease-in-out infinite;
}

.werk-chips .chip.gold i { background: var(--gold); box-shadow: 0 0 10px var(--gold); animation-delay: 1.2s; }

@media (prefers-reduced-motion: reduce) {
  .leuchtflaeche::after { display: none; }
  .werk-chips .chip i { animation: none; }
}

/* ============================================================
   Liquid Glass auf der Werkbank (07.08.2026): Die großen
   Inhaltskacheln tragen dieselbe moderne Glastiefe wie das Menü.
   Bewusst nur auf der Labor-Halle, damit Tür und Rechtsseiten ruhen.
   ============================================================ */

body[data-intro] .logbuch,
body[data-intro] .ordnung,
body[data-intro] .akademie-band,
body[data-intro] .bank > .reihe {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(205, 255, 250, 0.17);
  background:
    radial-gradient(ellipse 44% 20% at 16% 0%, rgba(255, 255, 255, 0.12), transparent 72%),
    radial-gradient(circle at 94% 112%, rgba(0, 229, 208, 0.085), transparent 34%),
    linear-gradient(145deg, rgba(16, 34, 49, 0.86), rgba(6, 14, 24, 0.76));
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    inset 0 -1px 0 rgba(0, 229, 208, 0.075),
    0 24px 58px rgba(0, 0, 0, 0.36);
}

body[data-intro] .logbuch::before,
body[data-intro] .ordnung::before,
body[data-intro] .akademie-band::before,
body[data-intro] .bank > .reihe::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: calc(var(--radius) - 1px);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.09), transparent 25%, transparent 73%, rgba(0, 229, 208, 0.035)),
    radial-gradient(ellipse 42% 13% at 28% 0%, rgba(255, 255, 255, 0.14), transparent 74%);
  pointer-events: none;
}

body[data-intro] .logbuch > *,
body[data-intro] .ordnung > *,
body[data-intro] .akademie-band > *,
body[data-intro] .bank > .reihe > * {
  position: relative;
  z-index: 1;
}

/* Die Bildhälfte bleibt klar; die Textseite wirkt wie eine zweite,
   leicht gewölbte Glasscheibe über der Karte. */
body[data-intro] .reihe .textteil {
  background:
    radial-gradient(ellipse 68% 58% at 100% 0%, rgba(0, 229, 208, 0.075), transparent 68%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(5, 12, 22, 0.59));
  -webkit-backdrop-filter: blur(12px) saturate(132%);
  backdrop-filter: blur(12px) saturate(132%);
  box-shadow: inset 1px 0 0 rgba(213, 255, 251, 0.09);
}

body[data-intro] .reihe.spiegel .textteil {
  background:
    radial-gradient(ellipse 68% 58% at 0% 0%, rgba(0, 229, 208, 0.075), transparent 68%),
    linear-gradient(215deg, rgba(255, 255, 255, 0.055), rgba(5, 12, 22, 0.59));
  box-shadow: inset -1px 0 0 rgba(213, 255, 251, 0.09);
}

body[data-intro] .reihe .bildteil::after {
  background:
    linear-gradient(90deg, transparent 48%, rgba(8, 16, 26, 0.82) 100%),
    linear-gradient(180deg, rgba(0, 229, 208, 0.025), rgba(5, 11, 20, 0.14));
}

body[data-intro] .reihe.spiegel .bildteil::after {
  background:
    linear-gradient(270deg, transparent 48%, rgba(8, 16, 26, 0.82) 100%),
    linear-gradient(180deg, rgba(0, 229, 208, 0.025), rgba(5, 11, 20, 0.14));
}

body[data-intro] .bank > .reihe:hover,
body[data-intro] .bank > .reihe:focus-within {
  transform: translateY(-4px);
  border-color: rgba(0, 229, 208, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.21),
    inset 0 -1px 0 rgba(0, 229, 208, 0.11),
    0 30px 72px rgba(0, 0, 0, 0.48),
    0 0 44px rgba(0, 229, 208, 0.09);
}

body[data-intro] .bank > .reihe.experiment {
  border-style: dashed;
  border-color: rgba(255, 179, 71, 0.38);
  background:
    radial-gradient(ellipse 44% 20% at 16% 0%, rgba(255, 255, 255, 0.11), transparent 72%),
    radial-gradient(circle at 94% 112%, rgba(255, 179, 71, 0.095), transparent 34%),
    linear-gradient(145deg, rgba(34, 31, 35, 0.87), rgba(12, 15, 23, 0.78));
}

body[data-intro] .bank > .reihe.experiment::before {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.085), transparent 25%, transparent 73%, rgba(255, 179, 71, 0.04)),
    radial-gradient(ellipse 42% 13% at 28% 0%, rgba(255, 237, 205, 0.13), transparent 74%);
}

body[data-intro] .bank > .reihe.experiment:hover,
body[data-intro] .bank > .reihe.experiment:focus-within {
  border-color: rgba(255, 179, 71, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 224, 0.18),
    inset 0 -1px 0 rgba(255, 179, 71, 0.1),
    0 30px 72px rgba(0, 0, 0, 0.48),
    0 0 42px rgba(255, 179, 71, 0.075);
}

/* Das Akademie-Band behält seine eigene Farbsprache. */
body[data-intro] .akademie-band {
  border-color: rgba(255, 98, 107, 0.3);
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 98, 107, 0.105), transparent 32%),
    linear-gradient(145deg, rgba(38, 27, 38, 0.86), rgba(10, 14, 23, 0.77));
}

body[data-intro] .ordnung > div {
  padding: 18px 19px;
  border: 1px solid rgba(205, 255, 250, 0.1);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 58%, rgba(0, 174, 187, 0.025));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.11);
}

body[data-intro] .werk-chips .chip {
  border-color: rgba(205, 255, 250, 0.15);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.018) 58%, rgba(0, 174, 187, 0.035));
  -webkit-backdrop-filter: blur(10px) saturate(132%);
  backdrop-filter: blur(10px) saturate(132%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 8px 20px rgba(0, 0, 0, 0.18);
}

body[data-intro] .logbuch .datum {
  border-color: rgba(0, 229, 208, 0.24);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 229, 208, 0.065));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

@media (max-width: 860px) {
  body[data-intro] .logbuch,
  body[data-intro] .ordnung,
  body[data-intro] .akademie-band,
  body[data-intro] .bank > .reihe {
    -webkit-backdrop-filter: blur(10px) saturate(128%);
    backdrop-filter: blur(10px) saturate(128%);
  }

  body[data-intro] .reihe .textteil,
  body[data-intro] .reihe.spiegel .textteil {
    -webkit-backdrop-filter: blur(7px) saturate(124%);
    backdrop-filter: blur(7px) saturate(124%);
    box-shadow: inset 0 1px 0 rgba(213, 255, 251, 0.08);
  }

  body[data-intro] .reihe .bildteil::after,
  body[data-intro] .reihe.spiegel .bildteil::after {
    background:
      linear-gradient(180deg, transparent 48%, rgba(8, 16, 26, 0.86) 100%),
      linear-gradient(180deg, rgba(0, 229, 208, 0.02), rgba(5, 11, 20, 0.14));
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-intro] .bank > .reihe:hover,
  body[data-intro] .bank > .reihe:focus-within { transform: none; }
}

/* ============================================================
   Logbuch als schmale Seitenleiste (07.08.2026): Auf großen
   Schirmen begleitet die Chronik rechts die breite Werkbank.
   Darunter bleibt die vertraute volle Lesebreite erhalten.
   ============================================================ */

.werkstatt-buehne { max-width: 1320px; }

@media (min-width: 1181px) {
  .werkstatt-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 280px);
    grid-template-areas: "werkbank logbuch";
    gap: clamp(30px, 3vw, 44px);
    align-items: start;
  }

  .werkbank-spalte {
    grid-area: werkbank;
    min-width: 0;
  }

  .logbuch-spalte {
    grid-area: logbuch;
    min-width: 0;
  }

  .logbuch-spalte .abschnittkopf {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 3px;
  }

  .logbuch-spalte .abschnittkopf h2 { font-size: 28px; }
  .logbuch-spalte .abschnittkopf .linie { display: none; }

  .logbuch-spalte .abschnittkopf .nummer {
    font-size: 10.5px;
    line-height: 1.4;
    letter-spacing: 0.16em;
  }

  .logbuch-spalte .logbuch { padding: 20px 18px; }
  .logbuch-spalte .logbuch ol { gap: 0; }

  .logbuch-spalte .logbuch li {
    grid-template-columns: 1fr;
    gap: 7px;
    align-items: start;
  }

  .logbuch-spalte .logbuch li + li { margin-top: 16px; }

  .logbuch-spalte .logbuch .datum {
    justify-self: start;
    font-size: 10.5px;
    padding: 4px 10px;
  }

  .logbuch-spalte .logbuch p {
    font-size: 13.5px;
    line-height: 1.58;
  }
}

/* ============================================================
   Editorial Clean (07.08.2026): Eine ruhige Ebene pro Aufgabe.
   Liquid Glass bleibt an wenigen Hauptflächen; Metadaten,
   Status und Nebeninhalte werden durch Typografie und Haarlinien
   gegliedert. So wirkt das Labor moderner, klarer und großzügiger.
   ============================================================ */

:root {
  --glas-rand: rgba(255, 255, 255, 0.1);
  --glas-rand-hell: rgba(255, 255, 255, 0.18);
  --gold: #9fb0b8;
  --blitz: #9fb0b8;
}

body {
  background:
    radial-gradient(900px 480px at 82% -12%, rgba(255, 255, 255, 0.025), transparent 66%),
    var(--tinte);
}

/* Farbe beschreibt nur noch Interaktion, nicht jede Information. */
.labor-kontext,
.kicker,
.dropdown-titel,
.dropdown-index,
.fuss-spalte .fuss-titel,
.tuer .untertitel,
.tuer .schluesselhinweis b,
.reihe .einordnung,
.reihe.experiment .einordnung,
.brodeln,
.logbuch .datum,
.sterne .funkeln {
  color: var(--text-matt);
}

/* Kicker statt Etiketten-Pillen */
.held-inhalt .etikett,
.held .etikett {
  display: flex;
  width: fit-content;
  gap: 0;
  padding: 0;
  margin-bottom: 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.held-inhalt .etikett::before,
.held .etikett::before {
  content: "";
  width: 28px;
  height: 1px;
  margin-right: 12px;
  background: currentColor;
  opacity: 0.7;
}

.held-inhalt h1 em,
.held h1 em {
  color: var(--text);
  text-shadow: none;
}

/* Knopfform wie auf daniel-bayer.net: volle Pille mit Petrol-Türkis-Verlauf
   (08.08.2026 — die frühere eckige Editorial-Fassung wich dem Original). */
.knopf {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(135deg, #15476d 0%, #007a87 100%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.knopf:hover {
  transform: none;
  border-color: rgba(0, 229, 208, 0.5);
  background: linear-gradient(135deg, #1a5276 0%, #38a3ba 55%, #00c9d6 100%);
  box-shadow: 0 10px 26px rgba(0, 174, 187, 0.28);
}

/* Zweitrangige Aktion: nur Kontur, wie „Reading buchen" auf der Hauptseite */
.knopf.hell {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: none;
}

.knopf.hell:hover {
  background: rgba(0, 174, 187, 0.12);
  border-color: rgba(0, 229, 208, 0.55);
  box-shadow: none;
}

.patreon-knopf {
  border-radius: 999px;
  color: var(--tinte);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.patreon-knopf:hover {
  transform: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.knopf::after { display: none; }

.kopf-aktionen .knopf,
.mobil-knoepfe .knopf,
.kopf-aktionen .knopf.hell,
.mobil-knoepfe .knopf.hell {
  padding-inline: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-matt);
  box-shadow: none;
}

.kopf-aktionen .knopf:hover,
.mobil-knoepfe .knopf:hover,
.kopf-aktionen .knopf.hell:hover,
.mobil-knoepfe .knopf.hell:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}

.kopf-nav > a:not(.knopf):hover,
.nav-aufklapper:hover,
.hat-dropdown.offen .nav-aufklapper { color: var(--text); }

.kopf-nav > a:not(.knopf)::after,
.nav-aufklapper::after { background: rgba(255, 255, 255, 0.55); }

.fuss-sozial a:hover,
.fuss-spalte a:hover { color: var(--text); }

/* Das Rechner-Menü besteht aus genau einer Glasfläche. */
.dropdown {
  padding: 26px 30px 28px;
  gap: 0;
  border-color: rgba(205, 255, 250, 0.12);
  border-radius: 18px;
  background: rgba(6, 15, 25, 0.95);
  -webkit-backdrop-filter: blur(22px) saturate(102%);
  backdrop-filter: blur(22px) saturate(102%);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.42);
}

.dropdown::before,
.dropdown-spalte::before,
.dropdown a::before { display: none; }

.dropdown-spalte,
.dropdown-spalte:hover,
.dropdown-spalte:focus-within {
  gap: 2px;
  padding: 4px clamp(18px, 2.4vw, 32px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.dropdown-spalte:first-child { padding-left: 4px; }
.dropdown-spalte:last-child { padding-right: 4px; }

.dropdown-spalte + .dropdown-spalte {
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.dropdown-titel {
  padding: 0 8px 12px;
  margin-bottom: 2px;
  border-bottom-color: rgba(255, 255, 255, 0.09);
}

.dropdown a,
.dropdown a:hover,
.dropdown a:focus-visible {
  min-height: 56px;
  padding: 10px 8px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.dropdown a:hover,
.dropdown a:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
}

/* Mobil: klare Zeilen, kein Kartenstapel im Vollbildmenü. */
@media (max-width: 980px) {
  .mobil-menue {
    background: rgba(5, 11, 20, 0.985);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  .mobil-menue .mobil-hauptlink,
  .mobil-gruppe-knopf,
  .mobil-menue .mobil-hauptlink:hover,
  .mobil-gruppe-knopf:hover,
  .mobil-gruppe-knopf[aria-expanded="true"] {
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    background: transparent;
  }

  .mobil-untermenue {
    gap: 0;
    margin: 6px 0 14px;
    padding: 0 0 0 18px;
    overflow: visible;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  .mobil-untermenue::before,
  .mobil-untermenue a::before { display: none; }

  .mobil-untermenue a,
  .mobil-untermenue a:hover,
  .mobil-untermenue a:focus-visible {
    min-height: 50px;
    padding: 10px 8px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .mobil-untermenue a:hover,
  .mobil-untermenue a:focus-visible {
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
  }
}

/* Logbuch: freie Chronik statt Karte plus Zeitstempel-Pillen. */
body[data-intro] .logbuch {
  padding: 18px 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

body[data-intro] .logbuch::before { display: none; }

body[data-intro] .logbuch li + li {
  margin-top: 18px;
  padding-top: 18px;
  border-top-color: rgba(255, 255, 255, 0.08);
}

body[data-intro] .logbuch .datum,
.logbuch-spalte .logbuch .datum {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  justify-self: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
}

.logbuch .uhrzeit {
  color: var(--text-leise);
  font-size: 0.92em;
}

.logbuch .uhrzeit::before {
  margin: 0 7px;
  color: rgba(255, 255, 255, 0.32);
}

/* Werkstatus: eine Informationszeile ohne drei einzelne Behälter. */
body[data-intro] .werk-chips {
  gap: 9px 18px;
  margin: 0 0 26px;
}

body[data-intro] .werk-chips .chip {
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

body[data-intro] .werk-chips .chip + .chip {
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

body[data-intro] .werk-chips .chip i {
  width: 5px;
  height: 5px;
  background: rgba(232, 241, 242, 0.52);
  box-shadow: none;
  animation: none;
}

body[data-intro] .werk-chips .chip.gold i {
  background: rgba(232, 241, 242, 0.52);
  box-shadow: none;
}

/* Stationsreihen: eine flache Oberfläche, keine Scheibe in der Scheibe. */
body[data-intro] .bank { gap: 18px; }

body[data-intro] .bank > .reihe,
body[data-intro] .bank > .reihe.experiment {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(8, 16, 26, 0.76));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

body[data-intro] .bank > .reihe.experiment {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
}

body[data-intro] .bank > .reihe::before,
body[data-intro] .bank > .reihe.experiment::before { display: none; }

body[data-intro] .reihe .textteil,
body[data-intro] .reihe.spiegel .textteil {
  min-width: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

body[data-intro] .bank > .reihe:hover,
body[data-intro] .bank > .reihe:focus-within {
  transform: none;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.25);
}

body[data-intro] .bank > .reihe.experiment:hover,
body[data-intro] .bank > .reihe.experiment:focus-within {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.25);
}

.reihe .bildteil img,
.reihe:hover .bildteil img {
  filter: saturate(0.7) contrast(0.98) brightness(0.9);
  transform: none;
}

.reihe .wasserzahl { color: rgba(255, 255, 255, 0.04); }

.reihe .bildteil { min-width: 0; }

/* Ruhiges Einblenden ohne seitlichen Dokument-Überlauf an den Breakpoints. */
.mit-js .erscheint.von-links,
.mit-js .erscheint.von-rechts { transform: translateY(18px); }

.mit-js .erscheint.sichtbar { transform: none; }

.brodeln .blasen { display: none; }

.brodeln::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: rgba(232, 241, 242, 0.52);
}

/* Laborordnung und Akademie: freie Inhaltsbänder mit Trennlinien. */
body[data-intro] .ordnung {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 32px 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

body[data-intro] .ordnung::before { display: none; }

body[data-intro] .ordnung > div {
  padding: 0 clamp(20px, 3vw, 34px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-intro] .ordnung > div:first-child { padding-left: 0; }
body[data-intro] .ordnung > div:last-child { padding-right: 0; }

body[data-intro] .ordnung > div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.ordnung h3 .punkt {
  width: 5px;
  height: 5px;
  background: rgba(232, 241, 242, 0.52);
  box-shadow: none;
}

body[data-intro] .akademie-band {
  margin-top: 34px;
  padding: 22px 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

body[data-intro] .akademie-band::before { display: none; }

.band-emblem {
  opacity: 0.78;
  filter: saturate(0.65);
}

@media (max-width: 860px) {
  body[data-intro] .ordnung {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px 0;
  }

  body[data-intro] .ordnung > div,
  body[data-intro] .ordnung > div:first-child,
  body[data-intro] .ordnung > div:last-child {
    padding: 22px 0;
  }

  body[data-intro] .ordnung > div + div {
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    border-left: 0;
  }
}

@media (max-width: 560px) {
  body[data-intro] .werk-chips {
    display: grid;
    gap: 8px;
  }

  body[data-intro] .werk-chips .chip + .chip {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 360px) {
  body[data-intro] .reihe .textteil,
  body[data-intro] .reihe.spiegel .textteil { padding-inline: 20px; }
}

/* Eingang und Rechtsseiten erhalten dieselbe ruhigere Formensprache. */
.tuer.glas {
  width: min(460px, 100%);
  border-color: rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  background: rgba(5, 13, 23, 0.8);
  -webkit-backdrop-filter: blur(14px) saturate(112%);
  backdrop-filter: blur(14px) saturate(112%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
}

.tuer input[type="password"] {
  border-radius: 9px;
  border-color: rgba(205, 255, 250, 0.2);
}

.tuer input[type="password"]:focus {
  box-shadow: 0 0 0 3px rgba(0, 229, 208, 0.11);
}

.rechtsseite .kontaktblock.glas {
  padding: 2px 0 2px 18px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* Weniger konkurrierende Bewegung: die Bühnen dürfen atmosphärisch bleiben. */
.leuchtflaeche::after { display: none; }

.abschnittkopf .linie {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), transparent);
  background-size: 100% 100%;
  animation: none;
}

.sterne .funkeln {
  animation: none;
  text-shadow: none;
}

.zwischen-inhalt .zitat::before { display: none; }
.scroll-wink { animation: none; }

.ornament { display: none; }

/* Die Fotografie bleibt der atmosphärische Träger, aber nicht die Farbquelle. */
.buehnen-bild {
  filter: saturate(0.62) brightness(0.82) contrast(0.98);
}

.zwischenbuehne {
  min-height: 38vh;
  margin-top: 64px;
}

.zwischen-inhalt > .etikett {
  color: var(--text-matt);
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.gluehen,
.blitzlicht,
.schwebeteilchen { display: none; }

.nebel i {
  opacity: 0.1;
  animation: none;
}

.tuer .apparat {
  opacity: 0.72;
  filter: saturate(0.45);
}

.tuer .apparat.lounge-emblem {
  width: 72px;
  margin-bottom: 16px;
  opacity: 1;
  filter: none;
}

.tuer .apparat.lounge-emblem img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 22px rgba(0, 174, 187, 0.24));
}

.tuer .funke,
.tuer .blase { display: none; }

.tuer .dampf path {
  opacity: 0.18;
  animation: none;
}

@media (max-width: 860px) {
  body[data-intro] .reihe .bildteil { min-height: 180px; }
}

/* Logbuch: moderne Chronik mit einem kontrollierten Reagenz-Akzent. */
body[data-intro] .logbuch-spalte > .kicker,
body[data-intro] .logbuch .datum {
  color: #5ed8cc;
}

body[data-intro] .logbuch {
  border-top-color: rgba(94, 216, 204, 0.28);
  border-bottom-color: rgba(94, 216, 204, 0.16);
  background: linear-gradient(
    180deg,
    rgba(0, 174, 187, 0.065),
    transparent 140px
  );
}

body[data-intro] .logbuch ol {
  position: relative;
  padding-left: 18px;
}

body[data-intro] .logbuch ol::before {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 2px;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(94, 216, 204, 0.72),
    rgba(0, 174, 187, 0.09)
  );
}

body[data-intro] .logbuch li {
  position: relative;
}

body[data-intro] .logbuch li::before {
  content: "";
  position: absolute;
  top: 0.52rem;
  left: -18px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(94, 216, 204, 0.48);
}

body[data-intro] .logbuch li:first-child::before {
  background: #5ed8cc;
  box-shadow:
    0 0 0 3px rgba(94, 216, 204, 0.09),
    0 0 12px rgba(94, 216, 204, 0.3);
}

body[data-intro] .logbuch li + li {
  border-top-color: rgba(94, 216, 204, 0.12);
}

body[data-intro] .logbuch p {
  color: #b7c7cc;
}

body[data-intro] .logbuch p b {
  color: #f0f7f7;
}

body[data-intro] .logbuch .uhrzeit {
  color: #8ea5b0;
  font-size: 1em;
}

@media (min-width: 1181px) {
  body[data-intro] .logbuch-spalte .logbuch .datum {
    font-size: 11.5px;
  }
}

/* Werkbank-Instrumente: technische Präzision ohne zusätzliche Karten. */
body[data-intro] .werk-instrumente {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 30px;
  padding: 18px 0 17px;
  border-top: 1px solid rgba(94, 216, 204, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(90deg, rgba(0, 174, 187, 0.045), transparent 68%);
}

body[data-intro] .werk-instrument {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0 clamp(16px, 2.4vw, 28px);
}

body[data-intro] .werk-instrument + .werk-instrument {
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

body[data-intro] .werk-instrument:first-child { padding-left: 0; }
body[data-intro] .werk-instrument:last-child { padding-right: 0; }

body[data-intro] .werk-instrument dt {
  order: 2;
  display: flex;
  align-items: center;
  margin-top: 8px;
  color: #8ea5b0;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

body[data-intro] .werk-instrument dd {
  order: 1;
  margin: 0;
  color: #5ed8cc;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(94, 216, 204, 0.13);
}

/* Zwei ruhige Messhinweise ausschließlich auf der Transit-Radix. */
.bildteil-instrumentiert .bild-hinweise {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.bildteil-instrumentiert .bild-hinweis {
  position: absolute;
  display: grid;
  gap: 3px;
  max-width: 190px;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  text-shadow:
    0 1px 7px rgba(5, 11, 20, 1),
    0 0 16px rgba(5, 11, 20, 0.96);
}

.bildteil-instrumentiert .bild-hinweis b {
  color: #f0f7f7;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.16em;
}

.bildteil-instrumentiert .bild-hinweis small {
  color: #9fb8c0;
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

.bildteil-instrumentiert .bild-hinweis::after {
  content: "";
  position: absolute;
  top: 7px;
  left: -30px;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(94, 216, 204, 0.64));
}

.bildteil-instrumentiert .hinweis-tore {
  top: 13%;
  left: 40px;
}

.bildteil-instrumentiert .hinweis-transite {
  right: 40px;
  bottom: 13%;
  text-align: right;
}

.bildteil-instrumentiert .hinweis-transite::after {
  right: -30px;
  left: auto;
  background: linear-gradient(90deg, rgba(94, 216, 204, 0.64), transparent);
}

@media (max-width: 860px) {
  .bildteil-instrumentiert .bild-hinweise { display: none; }
}

@media (max-width: 560px) {
  body[data-intro] .werk-instrumente {
    grid-template-columns: 1fr;
    padding: 0;
  }

  body[data-intro] .werk-instrument,
  body[data-intro] .werk-instrument:first-child,
  body[data-intro] .werk-instrument:last-child {
    display: grid;
    grid-template-columns: minmax(88px, 0.45fr) 1fr;
    align-items: center;
    padding: 13px 0;
  }

  body[data-intro] .werk-instrument + .werk-instrument {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 0;
  }

  body[data-intro] .werk-instrument dt {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 9.5px;
  }

  body[data-intro] .werk-instrument dd {
    grid-column: 1;
    grid-row: 1;
    font-size: 22px;
  }
}

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Akademie-Zugang: dieselbe ruhige Farbsprache wie die Laboraktionen. */
body[data-intro] .akademie-knopf {
  border-color: rgba(205, 255, 250, 0.18);
  background: linear-gradient(155deg, #15476d 0%, #007f8c 100%);
  color: #f0f7f7;
  box-shadow: 0 8px 22px rgba(0, 174, 187, 0.18);
}

body[data-intro] .akademie-knopf:hover,
body[data-intro] .akademie-knopf:focus-visible {
  border-color: rgba(205, 255, 250, 0.3);
  background: linear-gradient(155deg, #1a5276 0%, #008f9b 100%);
  box-shadow: 0 10px 26px rgba(0, 174, 187, 0.24);
}

/* ============================================================
   HAUPTSEITEN-DNA (08.08.2026)
   Gemessene Werte von daniel-bayer.net, damit der Sprung von der
   Hauptseite ins Backstage nahtlos wirkt: gleiche Farben, gleiche
   Schriftskala, gleicher Knopf- und Kartenbauplan, gleicher
   Rhythmus — nur dunkel statt hell. Diese Schicht steht bewusst am
   Ende und überschreibt ältere Zwischenstände.
   ============================================================ */

:root {
  /* Elementor-Kit der Hauptseite: Primary #031420, Secondary #00AEBB */
  --tinte: #031420;
  --tinte-2: #071c2b;
  --tinte-tief: #01101b;     /* Copyright-Leiste der Hauptseite */
  --reagenz-tief: #00aebb;
  --petrol: #15476d;
  --radius: 15px;            /* Karten und Chips — 98× auf der Hauptseite */
  --radius-gross: 25px;      /* große Panels, Medienbänder, Fuß */
  --radius-pille: 33px;      /* Knöpfe und Eingabefelder */
  --bahn: 1400px;            /* Inhaltsbreite der Hauptseite */
  --bahn-weit: 1600px;       /* Fuß und Testimonials */
  --sprung: 100px;           /* vertikaler Abstand zwischen Abschnitten */
  --luft: 20px;              /* Kicker → Titel → Text → Knopf */
}

/* Fließtext ist auf der Hauptseite DM Sans (Kross ist dort nur ein
   ungenutztes Fallback) — Überschriften bleiben TopLuxury. */
body {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(1.067rem, 1.0026rem + 0.2062vw, 1.25rem);
  line-height: 1.7;
}

/* Fluide Schriftskala der Hauptseite (Utopia-Muster, ohne Sprünge) */
h1, .held-inhalt h1 {
  font-size: clamp(1.476rem, 0.4992rem + 3.1256vw, 4.25rem);
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: none;
}

h2 {
  font-size: clamp(1.383rem, 0.7953rem + 1.8806vw, 3.052rem);
  line-height: 1.15;
  letter-spacing: normal;
}

h3 {
  font-size: clamp(1.296rem, 0.8928rem + 1.2901vw, 2.441rem);
  line-height: 1.2;
}

/* Kicker: das tragende Stilmittel der Hauptseite (14px/600/1.9px) */
.kicker, .etikett, .einordnung, .dropdown-titel, .fuss-spalte .fuss-titel {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1em;
  letter-spacing: 1.9px;
  text-transform: uppercase;
}

.held-inhalt .etikett { margin-bottom: var(--luft); }
.held-inhalt h1 { margin-bottom: var(--luft); }

/* Knopf-Bauplan der Hauptseite: Pille 33px, immer 2px Rand,
   Verlauf 155°, Hover dreht den Verlauf um. */
.knopf {
  border-radius: var(--radius-pille);
  border: 2px solid var(--reagenz-tief);
  background: linear-gradient(155deg, #15476d 0%, #007a87 100%);
  padding: 10px 30px;
  font-weight: 500;
  letter-spacing: 2.6px;
  box-shadow: none;
}

.knopf:hover {
  background: linear-gradient(155deg, #007a87 0%, #15476d 100%);
  border-color: var(--reagenz-tief);
  box-shadow: none;
}

.knopf.hell {
  border-radius: var(--radius-pille);
  border: 2px solid rgba(255, 255, 255, 0.32);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.09) 0%, rgba(0, 174, 187, 0.18) 100%);
}

.knopf.hell:hover {
  background: linear-gradient(155deg, rgba(0, 174, 187, 0.22) 0%, rgba(255, 255, 255, 0.09) 100%);
  border-color: var(--reagenz-tief);
}

.knopf.mini { padding: 8px 22px; letter-spacing: 1.6px; }

/* Karten: Tiefe kommt aus Rand und Tönung, nicht aus Schatten —
   das dunkle Glasrezept steht so bereits auf der Hauptseite. */
.glas, .reihe, .logbuch, .ordnung, .tuer, .dropdown, .mobil-menue {
  border-radius: var(--radius);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

.held-voll, .zwischenbuehne, .laborkopf {
  border-radius: var(--radius-gross);
  box-shadow: none;
}

.kopf-angedockt .laborkopf {
  border-radius: 0 0 var(--radius-gross) var(--radius-gross);
}

/* Rhythmus: 1400er Bahn, 100px zwischen den Abschnitten */
.buehne { max-width: var(--bahn); }
.kopf-buehne { max-width: var(--bahn-weit); }
.werkstatt-buehne { padding-top: var(--sprung); }
.zwischenbuehne { margin-top: var(--sprung); }

/* Fuß als Navy-Panel mit oben gerundeten Ecken, darunter die
   dunklere Copyright-Leiste — beides wie auf der Hauptseite. */
.laborfuss {
  max-width: var(--bahn-weit);
  margin-top: var(--sprung);
  padding: 56px clamp(24px, 3vw, 48px) 40px;
  border: 0;
  border-radius: var(--radius-gross) var(--radius-gross) 0 0;
  background: linear-gradient(180deg, #041b29 0%, var(--tinte) 100%);
}

.fuss-schluss {
  margin-top: 34px;
  padding: 20px clamp(24px, 3vw, 48px);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: var(--tinte-tief);
}

@media (max-width: 767px) {
  .werkstatt-buehne { padding-top: 48px; }
  .zwischenbuehne { margin-top: 48px; }
  .laborfuss { margin-top: 48px; padding: 40px 20px 28px; }
}

/* Der Held-Text braucht wie auf der Hauptseite Abstand zur Panelkante:
   dort liegt die Inhaltsinsel (1225px) deutlich innerhalb der Bühne. */
.held-inhalt {
  padding-left: clamp(24px, 4vw, 72px);
  padding-right: clamp(24px, 4vw, 72px);
  max-width: min(100%, 1225px);
}

.held-inhalt p { max-width: 640px; }

@media (max-width: 767px) {
  .held-inhalt { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 767px) {
  /* Etiketten bleiben lesbar, brechen aber nicht mehr unschön um */
  .kicker, .etikett, .einordnung { font-size: 12px; letter-spacing: 1.4px; }
  .held-inhalt .etikett { line-height: 1.5; }
}

/* Knopfmaße exakt wie auf der Hauptseite: dort gilt line-height 1 und
   8px Innenabstand — ohne das wurden die Pillen 46px statt 36px hoch.
   Das Lauflicht entfällt; die Hauptseite dreht beim Hover nur den Verlauf. */
.knopf {
  line-height: 1;
  padding: 9px 30px;
  font-size: 14px;
}

.knopf::after { display: none; }

.knopf.mini {
  padding: 7px 20px;
  font-size: 12px;
  letter-spacing: 1.6px;
}

@media (max-width: 1024px) {
  .knopf { font-size: 12.5px; padding: 9px 22px; letter-spacing: 2px; }
  .knopf.mini { font-size: 11px; padding: 7px 16px; }
}

/* ---------- Fuß exakt nach dem Vorbild der Hauptseite ---------- */

/* Panel: 5em oben, 3em unten; die Copyright-Leiste trennt allein der
   Farbsprung — auf der Hauptseite liegt dort bewusst keine Linie. */
.laborfuss {
  padding: 90px clamp(24px, 3vw, 48px) 54px;
  row-gap: 44px;
}

/* Spaltenköpfe: große TopLuxury-Zeile in gemischter Schreibung,
   nicht das kleine gesperrte Etikett. */
.laborfuss .fuss-spalte .fuss-titel {
  font-family: "TopLuxury", Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
  margin-bottom: 18px;
  line-height: 1.2;
}

/* Menülinks: Versalien in Petrol-Türkis, weiß beim Überfahren */
.laborfuss .fuss-spalte a {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #00b2c2;
  line-height: 1.4;
}

.laborfuss .fuss-spalte a:hover { color: #ffffff; }

.laborfuss .fuss-spalte li { margin-bottom: 9px; }

.laborfuss .fuss-sozial { gap: 17px; margin-top: 16px; }
.laborfuss .fuss-sozial a { color: #eaedf1; }
.laborfuss .fuss-sozial a:hover { color: #00b2c2; }

/* Copyright-Leiste: eigene, dunklere Fläche ohne Trennlinie */
.laborfuss .fuss-schluss {
  margin: 44px calc(clamp(24px, 3vw, 48px) * -1) calc(-54px);
  padding: 16px clamp(24px, 3vw, 48px);
  border-top: 0;
  background: var(--tinte-tief);
  font-size: 11.2px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0;
}

@media (max-width: 1024px) {
  .laborfuss { padding: 54px clamp(20px, 3vw, 36px) 36px; }
  .laborfuss .fuss-spalte .fuss-titel { font-size: 19px; }
  .laborfuss .fuss-schluss {
    margin: 34px calc(clamp(20px, 3vw, 36px) * -1) -36px;
    justify-content: center;
    text-align: center;
  }
}

/* ---------- Kopfzeile exakt nach dem Vorbild der Hauptseite ---------- */

/* Dort ist die Leiste 99–121px hoch, unten mit 35px gerundet, und die
   Wortmarke hängt per negativem Rand unter die Leiste hinaus (Desktop
   60px, mobil 40px) — das ist das prägendste Detail des Kopfes. */
.kopf-buehne { overflow: visible; }

.laborkopf {
  min-height: 99px;
  overflow: visible;
  align-items: center;
}

.wortmarke {
  position: relative;
  z-index: 25;
  margin-bottom: -46px;
}

.kopf-angedockt .laborkopf {
  border-radius: 0 0 35px 35px;
}

/* Menütitel: TopLuxury in Versalien, 16px/2px ab 1601px,
   darunter 13px/1.3px — wie im Original gestaffelt. */
.kopf-nav > a:not(.knopf),
.nav-aufklapper {
  font-size: 13px;
  letter-spacing: 1.3px;
  font-weight: 600;
}

@media (min-width: 1601px) {
  .kopf-nav > a:not(.knopf),
  .nav-aufklapper {
    font-size: 16px;
    letter-spacing: 2px;
  }
}

/* Das Aufklappmenü startet unterhalb der hängenden Wortmarke */
.dropdown { top: calc(100% + 30px); }

@media (max-width: 1024px) {
  .laborkopf { min-height: 68px; }
  .wortmarke { margin-bottom: -30px; }
  .kopf-angedockt .laborkopf { border-radius: 0 0 25px 25px; }
}

/* ---------- Logbuch als eigene, mitlaufende Spalte ---------- */

/* Auf breiten Schirmen bleibt die Chronik stehen und scrollt in sich
   selbst, während man rechts durch die Rechner geht. */
@media (min-width: 1025px) {
  .logbuch-spalte {
    position: sticky;
    top: 124px;
    align-self: start;
    max-height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .logbuch-spalte .abschnittkopf { flex: 0 0 auto; }

  .logbuch {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 178, 194, 0.45) transparent;
  }

  .logbuch::-webkit-scrollbar { width: 6px; }
  .logbuch::-webkit-scrollbar-track { background: transparent; }

  .logbuch::-webkit-scrollbar-thumb {
    background: rgba(0, 178, 194, 0.4);
    border-radius: 99px;
  }

  .logbuch::-webkit-scrollbar-thumb:hover { background: rgba(0, 178, 194, 0.65); }
}

/* ---------- Nachjustierung 08.08.2026 (Daniels Feedback) ---------- */

/* Die Kopfkachel endet jetzt deutlich UNTER der Backstage-Zeile, damit
   die Haarlinien links und rechts frei stehen. */
.laborkopf { min-height: 118px; }
.wortmarke { margin-bottom: 0; }
.dropdown { top: calc(100% + 12px); }

@media (max-width: 1024px) {
  .laborkopf { min-height: 76px; }
  .wortmarke { margin-bottom: 0; }
}

/* Das Logbuch scrollt in sich selbst — die Eröffnungs-Fassung setzt
   overflow:hidden, das hier gezielt zurückgenommen wird. */
@media (min-width: 1025px) {
  body .logbuch,
  body[data-intro] .logbuch {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 178, 194, 0.45) transparent;
  }
}

/* Der Kopf ist die oberste Ebene und muss breiter sein als die Kacheln
   darunter — vorher war er schmaler, was die Hierarchie verdrehte. */
.kopf-buehne {
  max-width: none;
  padding-left: clamp(6px, 0.8vw, 14px);
  padding-right: clamp(6px, 0.8vw, 14px);
}

/* ============================================================
   TYPO-KORREKTUR nach direkter Messung auf daniel-bayer.net
   (08.08.2026). Die vorherigen Werte stammten aus dem CSS-Text,
   die hier stehenden aus den tatsächlich gerenderten Elementen.
   ============================================================ */

/* Hauptmenü: DM Sans, NICHT gesperrt, Petrol — nicht TopLuxury */
.kopf-nav > a:not(.knopf),
.nav-aufklapper,
.dropdown-titel {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 12.4px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--reagenz-tief);
}

@media (min-width: 1601px) {
  .kopf-nav > a:not(.knopf),
  .nav-aufklapper { font-size: 13.5px; }
}

.kopf-nav > a:not(.knopf):hover,
.nav-aufklapper:hover { color: var(--text); }

/* Knöpfe tragen auf der Hauptseite TopLuxury, nicht DM Sans */
.knopf {
  font-family: "TopLuxury", Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.3px;
  line-height: 1.5;
}

.knopf.mini { font-size: 12px; letter-spacing: 1.2px; }

/* Hero-Kicker: 16px mit 3,2px Sperrung — das ist die elegante Fassung */
.held-inhalt .etikett,
.zwischenbuehne .etikett {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 3.2px;
  line-height: 1.1;
}

/* Displayzeilen: TopLuxury im mittleren Schnitt, nie gesperrt */
h1, h2, .held-inhalt h1 { font-weight: 500; letter-spacing: normal; }

/* Fuß: Spaltenköpfe 18px, Links 12,6px */
.laborfuss .fuss-spalte .fuss-titel { font-size: 18px; line-height: 1.15; }

.laborfuss .fuss-spalte a {
  font-size: 12.6px;
  letter-spacing: 1.386px;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .laborfuss .fuss-spalte .fuss-titel { font-size: 17px; }
  .held-inhalt .etikett { font-size: 13px; letter-spacing: 2.4px; }
}

/* ============================================================
   ZENTRIERTE ABSCHNITTE + KENNZAHLEN-KACHEL (08.08.2026)
   Die Hauptseite baut ihre Abschnitte zentriert auf: Kicker,
   Überschrift und Einleitung mittig, darunter das Raster. Die
   Kennzahlen stehen dort in einer eigenen gerundeten Kachel.
   ============================================================ */

.abschnitt-mitte {
  max-width: 726px;
  margin: 0 auto 40px;
  text-align: center;
}

.abschnitt-mitte .kicker {
  display: block;
  margin-bottom: var(--luft);
  color: var(--reagenz);
}

.abschnitt-mitte h2 { margin-bottom: var(--luft); }

.abschnitt-mitte .einleitung {
  color: var(--text-matt);
  margin: 0 auto;
  max-width: 640px;
}

/* Kennzahlen als eigene Kachel — Vorbild ist die Statistik-Kachel
   der Hauptseite (Radius 25px, drei Werte nebeneinander). */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 760px;
  margin: 0 auto 56px;
  padding: 28px 20px 22px;
  border-radius: var(--radius-gross);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(ellipse 60% 120% at 50% 0%, rgba(0, 174, 187, 0.12), transparent 70%),
    rgba(255, 255, 255, 0.04);
  text-align: center;
}

.kennzahl { padding: 4px 12px; position: relative; }

.kennzahl + .kennzahl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}

.kennzahl dd {
  margin: 0 0 8px;
  font-family: "TopLuxury", Georgia, serif;
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem);
  font-weight: 500;
  line-height: 1;
  color: var(--text);
}

.kennzahl dt {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.9px;
  text-transform: uppercase;
  color: var(--reagenz-tief);
}

/* Der Zugangshinweis vor dem Fuß wird zentriert wie auf der Hauptseite */
.akademie-band {
  flex-direction: column;
  text-align: center;
  justify-content: center;
  gap: 18px;
  padding: 56px 32px;
}

.akademie-band .zeile { max-width: 640px; margin: 0 auto; }
.akademie-band .band-emblem { margin: 0 auto 4px; }
.akademie-band .stufen { justify-content: center; }

@media (max-width: 767px) {
  .kennzahlen { grid-template-columns: 1fr; gap: 22px; }
  .kennzahl + .kennzahl::before { display: none; }
  .logbuch-buehne { padding-top: 48px; }
}

/* Der zentrierte Kopf und die Kennzahlen stehen über dem Raster und
   nehmen die volle Bahnbreite ein; darunter läuft die alte Aufteilung
   aus Rechnerreihen und Logbuch-Spalte weiter. */
.werkstatt-buehne > .abschnitt-mitte,
.werkstatt-buehne > .kennzahlen { grid-column: 1 / -1; }


/* Zugangsbereich vor dem Fuß: zentrierter Abschnitt nach dem Muster der
   Hauptseite — Emblem, Kicker, TopLuxury-Zeile, Einleitung, Knopf. */
.akademie-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 64px 32px 56px;
}

.akademie-band .band-emblem { width: 52px; height: auto; margin: 0 0 4px; }

.akademie-band .kicker {
  color: var(--reagenz);
  margin: 0;
}

.akademie-band h2 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(1.383rem, 0.7953rem + 1.8806vw, 2.6rem);
}

.akademie-band .einleitung {
  max-width: 620px;
  margin: 0;
  color: var(--text-matt);
}

.akademie-band .akademie-knopf { margin-top: 10px; }

@media (max-width: 767px) {
  .akademie-band { padding: 44px 22px 40px; }
}

/* ============================================================
   ELEGANZ-RUNDE (08.08.2026)
   Kennzahlen zurückgenommen auf das Maß der Statistik-Kachel der
   Hauptseite (659px breit, schmale Werte) und farbige Flächen nach
   ihren Bändern: vertikaler Petrol-Verlauf statt flächigem Glas.
   ============================================================ */

.kennzahlen {
  max-width: 660px;
  padding: 22px 24px 16px;
  margin-bottom: 64px;
  border-radius: var(--radius-gross);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(0deg, rgba(3, 20, 32, 0.6) 0%, rgba(0, 100, 121, 0.22) 100%);
}

.kennzahl { padding: 2px 10px; }

.kennzahl dd {
  font-size: clamp(1.35rem, 1.05rem + 0.85vw, 1.85rem);
  font-weight: 500;
  margin-bottom: 6px;
  color: #eaf6f8;
}

.kennzahl dt {
  font-size: 10px;
  letter-spacing: 2.2px;
  color: rgba(0, 178, 194, 0.92);
}

.kennzahl + .kennzahl::before {
  top: 18%;
  bottom: 18%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}

/* Farbige Flächen: jede zweite Rechnerreihe bekommt einen leisen
   Petrol-Schimmer, wie die getönten Bänder der Hauptseite. */
.bank .reihe:nth-child(even) {
  background:
    linear-gradient(115deg, rgba(0, 100, 121, 0.16) 0%, rgba(3, 20, 32, 0.5) 62%),
    rgba(255, 255, 255, 0.04);
}

.bank .reihe:nth-child(odd) {
  background:
    linear-gradient(245deg, rgba(21, 71, 109, 0.2) 0%, rgba(3, 20, 32, 0.5) 62%),
    rgba(255, 255, 255, 0.035);
}

/* Der Zugangsbereich wird zum farbigen Band mit vertikalem Verlauf —
   dasselbe Rezept wie die E-Book-Zeile der Hauptseite. */
.akademie-band {
  border: 0.5px solid rgba(0, 174, 187, 0.28);
  background: linear-gradient(0deg, var(--tinte) 0%, rgba(0, 100, 121, 0.55) 100%);
}

/* Etwas mehr Luft und feinere Linien für den ruhigen Gesamteindruck */
.abschnitt-mitte { margin-bottom: 44px; }
.abschnitt-mitte .einleitung { line-height: 1.75; }

.bank { gap: 28px; }

/* Die Eröffnungs-Fassung setzt das Zugangsband auf transparent und ohne
   Rahmen — hier bewusst zurückgenommen, damit der Petrol-Verlauf trägt. */
body[data-intro] .akademie-band {
  margin-top: 0;
  padding: 64px 32px 56px;
  overflow: hidden;
  border: 0.5px solid rgba(0, 174, 187, 0.28);
  border-radius: var(--radius-gross);
  background: linear-gradient(0deg, var(--tinte) 0%, rgba(0, 100, 121, 0.5) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

@media (max-width: 767px) {
  body[data-intro] .akademie-band { padding: 44px 22px 40px; }
}

/* ---------- Rechtsseiten und Tür im neuen Stil ---------- */

/* Zentrierter Seitenkopf wie bei den Abschnitten der Hauptseite */
.seiten-kopf {
  text-align: center;
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.seiten-kopf .kicker {
  display: block;
  margin-bottom: var(--luft);
  color: var(--reagenz);
}

.seiten-kopf h1 { margin-bottom: 12px; }
.seiten-kopf .stand { margin: 0 auto; max-width: 620px; }

.rechtsseite { max-width: 820px; padding-top: 56px; }

/* Der Kontaktblock wird zur Karte im Kartenrezept der Hauptseite */
.rechtsseite .kontaktblock.glas {
  padding: 22px 26px;
  border-radius: var(--radius);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(115deg, rgba(0, 100, 121, 0.14) 0%, rgba(3, 20, 32, 0.5) 62%);
  box-shadow: none;
}

/* Eingabefeld der Tür als Pille wie alle Bedienelemente */
.tuer input[type="password"] {
  border-radius: var(--radius-pille);
  padding-left: 26px;
  padding-right: 26px;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Die Türkarte bekommt denselben Petrol-Verlauf wie das Zugangsband */
.tuer.glas {
  background: linear-gradient(0deg, rgba(3, 20, 32, 0.82) 0%, rgba(0, 100, 121, 0.3) 100%);
  border: 0.5px solid rgba(0, 174, 187, 0.24);
}

/* ============================================================
   ABENDRUNDE AUF DEM ZWEITRECHNER (08.08.2026, zweite Fassung, 21:45)
   Daniels Rückmeldung eingearbeitet:
   1) Werkzeugband: „Deine Werkzeuge" trägt den Petrol-Verlauf der
      Akademie-Kachel; die bewährten drei Kennzahlen leben im Band,
      ohne eigene Kachel.
   2) Himmelsbericht: die Tagesqualität als eigener Wetterbericht
      direkt unter dem Held — Datum, Sonnenstand groß, Erde, Mond
      mit gezeichneter Mondphase (assets/tagesqualitaet.js).
   3) Patreon-Partnerlogo aus dem Brand Kit im Fuß aller vier
      Hauptseiten (BRAND.md: weiße Fassung auf dunklem Grund),
      verlinkt wie auf der Hauptseite.
   ============================================================ */

/* Daniels Wahl aus der Stylingvorlage (09.08.2026): Fassung 2,
   „Petrol-Saum" — dunkle Kachel mit feiner Leuchtlinie oben, Text
   links, Kennzahlen rechts hinter einer Haarlinie. */
.werkzeug-band {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 40px;
  align-items: center;
  margin: 0 auto 72px;
  padding: 48px 44px;
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-gross);
  background: linear-gradient(180deg, var(--tinte-2) 0%, var(--tinte) 100%);
  text-align: left;
}

.werkzeug-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 208, 0.6) 35%, rgba(0, 174, 187, 0.35) 70%, transparent);
}

.werkstatt-buehne > .werkzeug-band { grid-column: 1 / -1; }

.werkzeug-band .abschnitt-mitte {
  margin: 0;
  max-width: none;
  text-align: left;
}

.werkzeug-band .abschnitt-mitte .einleitung { margin: 0; max-width: none; }

.werkzeug-band .kennzahlen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  max-width: none;
  margin: 0;
  padding: 0 0 0 40px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0;
  background: none;
  text-align: left;
}

.werkzeug-band .kennzahl { padding: 0; }

.werkzeug-band .kennzahl + .kennzahl::before { display: none; }

.werkzeug-band .kennzahl dd {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem);
  margin-bottom: 6px;
}

@media (max-width: 860px) {
  .werkzeug-band { grid-template-columns: 1fr; gap: 26px; padding: 40px 26px 34px; }
  .werkzeug-band .kennzahlen {
    padding: 26px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
  }
}

/* ---------- Himmelsbericht: schmale Wetterleiste ganz oben ---------- */

/* Ganz oben unter der Kopfzeile, vor der Begrüßung — dezent, eine
   Zeile. Sie scrollt natürlich mit dem Inhalt (eine Haftung wirkte
   gekünstelt); das Milchglas-Kleid bleibt. */
.himmelsbericht {
  padding-top: 14px;
  padding-bottom: 0;
  max-width: 1180px;
}

.hb-karte {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px 24px;
  padding: 12px 62px;
  border-radius: var(--radius);
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(3, 20, 32, 0.6) 42%, rgba(0, 100, 121, 0.3) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(1.25);
  backdrop-filter: blur(26px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 13.5px;
}

.hb-datum { font-weight: 600; color: var(--text); white-space: nowrap; }

.hb-glied {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.hb-zeile { color: var(--text-matt); line-height: 1.45; }

.hb-zeile > b { color: #eaf6f8; font-weight: 600; }

.hb-torname { color: var(--text-leise); }

/* Sonne und Mond als kleine, leise leuchtende Scheiben */
.hb-scheibe {
  flex: none;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #ffd28a 0%, #ffb347 52%, #d98324 100%);
  box-shadow: 0 0 9px rgba(255, 179, 71, 0.4), 0 0 22px rgba(255, 179, 71, 0.14);
}

/* Das Mondband nach dem klassischen Bild: der Vollmond in der Mitte am
   größten, zu den Sicheln hin werden die Scheiben kleiner. Die aktuelle
   Phase leuchtet mit Petrol-Ring, der Rest bleibt leise. */
.hb-mondband { gap: 5px; align-items: center; }

.hb-mondband svg {
  flex: none;
  opacity: 0.34;
  transition: opacity 0.3s ease;
}

.hb-mondband svg:nth-child(1),
.hb-mondband svg:nth-child(9) { width: 9px; height: 9px; }

.hb-mondband svg:nth-child(2),
.hb-mondband svg:nth-child(8) { width: 11px; height: 11px; }

.hb-mondband svg:nth-child(3),
.hb-mondband svg:nth-child(7) { width: 14px; height: 14px; }

.hb-mondband svg:nth-child(4),
.hb-mondband svg:nth-child(6) { width: 18px; height: 18px; }

.hb-mondband svg:nth-child(5) { width: 24px; height: 24px; opacity: 0.55; }

/* Die aktuelle Phase markiert allein Helligkeit und ein weiches,
   silbernes Leuchten — keine farbige Umrandung. */
.hb-mondband svg.aktuell {
  opacity: 1;
  filter:
    drop-shadow(0 0 3px rgba(232, 241, 242, 0.95))
    drop-shadow(0 0 14px rgba(223, 233, 236, 0.6));
}

.hb-mondband svg.aktuell circle { stroke: rgba(232, 241, 242, 0.85); stroke-width: 1.6; }

/* Weiter zum ganzen Himmel: ein stilles rundes Pfeilzeichen wie der
   Scroll-Hinweis des Helden — matt, Farbe erst bei Interaktion. */
.hb-pfeil {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: #9fb0b8;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.hb-pfeil svg { width: 15px; height: 15px; }

a.hb-karte:hover .hb-pfeil { color: var(--reagenz); border-color: rgba(0, 229, 208, 0.5); }

@media (max-width: 1080px) {
  .hb-karte { gap: 8px 18px; }
  .hb-datum { width: 100%; text-align: center; }
  .hb-glied { padding-left: 0; border-left: 0; justify-content: center; }
}

@media (max-width: 760px) {
  .himmelsbericht { padding-top: 10px; }
  .hb-karte { position: relative; padding: 12px 18px; }
  .hb-datum { width: 100%; padding-right: 44px; }
  .hb-glied { padding-left: 0; border-left: 0; width: 100%; }
  .hb-pfeil { width: 30px; height: 30px; right: 12px; }
}

/* ---------- Patreon-Partnerlogo im Fuß (alle vier Hauptseiten) ---------- */

/* In der Schlussleiste unten rechts, gegenüber dem Copyright */
.fuss-partnerlogo { display: inline-flex; align-items: center; opacity: 0.92; }

.fuss-partnerlogo img { display: block; height: 24px; width: auto; }

.fuss-partnerlogo:hover { opacity: 1; }

/* Die Tür erklärt Neulingen den Weg hinein (09.08.2026): wer ohne
   Schlüssel von der Hauptseite kommt, sieht, dass der Zugang über die
   Stufe HD Phönix auf Patreon läuft. */
.tuer .neuling-titel {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.tuer .neuling-text {
  max-width: 460px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-matt);
}

@media (max-width: 767px) {
  .fuss-partnerlogo { width: 100%; justify-content: center; }
}

/* ---------- Stationsbilder: einspaltig kein flacher Streifen mehr ----------
   Bei schmalen Fenstern wurden die 3:2-Motive auf 180-220px Höhe beschnitten
   (nur das mittlere Viertel sichtbar). Jetzt 16:9-Ausschnitt mit Obergrenze —
   Sternkarten, Rad und Planeten bleiben erkennbar. */
@media (max-width: 860px) {
  .reihe .bildteil,
  body[data-intro] .reihe .bildteil {
    aspect-ratio: 16 / 9;
    min-height: 220px;
    max-height: 430px;
  }
}

/* ============================================================
   SCHRIFTWAHL BACKSTAGE-ZEILE (09.08.2026)
   Daniels Wahl aus der Schriftvorlage: Fassung 1 — TopLuxury,
   kräftig gesperrt. Gilt für Kopf und Fuß; die Größenstufen der
   Basis (700px/360px) werden hier mitgeführt, weil diese Schicht
   sonst die früheren Medienregeln überstimmen würde.
   ============================================================ */

.labor-kontext {
  font-family: "TopLuxury", Georgia, serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
}

@media (max-width: 700px) {
  .labor-kontext { font-size: 9.5px; letter-spacing: 0.24em; }
}

@media (max-width: 360px) {
  .labor-kontext { font-size: 9px; letter-spacing: 0.2em; }
}

/* ============================================================
   VIP-TÜR (09.08.2026)
   Daniels Wunsch: die Eingangstür soll sich nach einem edlen,
   hochwertigen Bereich anfühlen. Eine innere Gold-Haarlinie wie
   bei einer Einladungskarte, der Exklusiv-Untertitel in sparsamem
   Gold mit flankierenden Linien, das Emblem mit leisem Glühen.
   Gold bleibt der einzige warme Akzent der Seite. Außerdem trägt
   die Tür nur noch den kompakten Fuß (Marke, Rechtliches,
   Schlussleiste) — die Linklisten der Mitgliederseiten entfallen.
   ============================================================ */

.tuer.glas {
  position: relative;
  padding-top: 52px;
  padding-bottom: 48px;
}

.tuer.glas::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: calc(var(--radius-gross) - 8px);
  pointer-events: none;
}

.tuer .untertitel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* Echtes Gold: Metallverlauf in den Buchstaben statt flacher Farbe */
  background: linear-gradient(180deg, #f9ecc0 0%, #e8c96d 50%, #c49a35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tuer .untertitel::before,
.tuer .untertitel::after {
  content: "";
  height: 1px;
  flex: 0 0 30px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6));
}

.tuer .untertitel::after {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.6), transparent);
}

.tuer .lounge-emblem img {
  filter: drop-shadow(0 0 16px rgba(0, 174, 187, 0.35));
}

/* Die Knöpfe der Tür folgen dem Hausrezept: petrolfarbene 36px-Pille in
   Inhaltsbreite — das Patreon-Rot weicht, das kleine Patreon-Zeichen
   bleibt in Weiß. */
.tuer form .knopf {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 38px;
}

.patreon-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: auto;
  min-height: 36px;
  padding: 7px 24px;
  border: 2px solid #00aebb;
  border-radius: 33px;
  background: linear-gradient(155deg, #15476d 0%, #007a87 100%);
  color: #fff;
  font-family: "TopLuxury", Georgia, serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.3px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.patreon-knopf:hover { background: linear-gradient(155deg, #007a87 0%, #15476d 100%); box-shadow: none; }

.patreon-knopf svg { width: 14px; height: 14px; }

/* Eine Kontur statt zwei — dezent auf der RECHTEN Seite (Daniels
   Wunsch), nach links weich in die Liquid-Verläufe auslaufend;
   zwei nebeneinander wirkten wie ein Doppel-Logo. */
.tuer-kontur.links { display: none; }

.tuer-kontur.rechts {
  /* Deutlich kleiner als die Basisgröße (128% Höhe) — ein leises
     Wasserzeichen rechts, kein raumgreifendes Motiv. */
  height: 62%;
  top: 50%;
  transform: translateY(-50%);
  right: -60px;
  /* Radiale Maske vom rechten Rand aus: blendet links, oben und unten
     weich aus, damit keine Bildkante der Grafik sichtbar wird. */
  -webkit-mask-image: radial-gradient(95% 85% at 100% 50%, #000 38%, transparent 90%);
  mask-image: radial-gradient(95% 85% at 100% 50%, #000 38%, transparent 90%);
}

/* Ohne das Porträt trägt die Karte die Bühne allein — sie steht auf
   allen Breiten exakt mittig (das alte Raster stammte aus der Zeit,
   als rechts das Foto lag). */
.tuer-buehne,
.tuer-buehne.kompakt {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
  justify-items: center;
  padding-left: 24px;
  padding-right: 24px;
}

/* Liquid Glass: farbige Verlaufsinseln hinter einer Milchglas-Karte */
.tuer-hintergrund::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(620px 420px at 16% 24%, rgba(0, 174, 187, 0.22), transparent 62%),
    radial-gradient(720px 520px at 84% 72%, rgba(125, 84, 214, 0.14), transparent 65%),
    radial-gradient(520px 380px at 72% 12%, rgba(0, 229, 208, 0.12), transparent 60%),
    radial-gradient(480px 360px at 30% 88%, rgba(0, 100, 121, 0.2), transparent 62%);
}

.tuer.glas {
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(3, 20, 32, 0.5) 42%, rgba(0, 100, 121, 0.28) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(1.25);
  backdrop-filter: blur(26px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Kompakter Fuß der Eingangsseite: zwei Spalten statt vier, weniger Luft */
.tuerfuss {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  padding: 48px clamp(24px, 3vw, 48px) 40px;
  row-gap: 30px;
}

@media (max-width: 700px) {
  .tuerfuss { grid-template-columns: 1fr; }
}

/* ============================================================
   KANÄLE ALS TEXT (09.08.2026)
   Daniels Anweisung: keine nachgebauten Fremdlogos. Die
   Social-Icon-Reihe im Fuß (Patreon, Telegram, YouTube,
   Instagram, Spotify — alles Nachzeichnungen) weicht schlichten
   Textlinks; nur das offizielle Partnerlogo aus dem Brand Kit
   bleibt. Trocken, wie die Fußzeilen-Sprache es verlangt.
   ============================================================ */

.fuss-kanaele {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 16px;
}

.fuss-kanaele a {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-leise);
  text-decoration: none;
  transition: color 0.18s ease;
}

.fuss-kanaele a:hover { color: var(--reagenz); }

/* ============================================================
   MOBILE MITTE (09.08.2026)
   Daniels Vorgabe: auf Mobilgeräten stehen die Elemente mittig —
   auch der Fuß. Gilt jeweils dort, wo die Layouts einspaltig
   werden. Außerdem entfällt das Porträt im Tür-Hintergrund.
   ============================================================ */

.tuer-portrait { display: none; }

@media (max-width: 860px) {
  .werkzeug-band,
  .werkzeug-band .abschnitt-mitte,
  .werkzeug-band .kennzahlen { text-align: center; }
  .werkzeug-band .abschnitt-mitte .einleitung { margin: 0 auto; max-width: 560px; }
}

@media (max-width: 760px) {
  .hb-karte { text-align: center; }
  /* Die Sonnenscheibe steht mittig über ihrem Text, statt links neben
     dem umbrechenden Satz zu hängen (das Mondband bleibt eine Reihe). */
  .hb-glied:not(.hb-mondband) { flex-direction: column; gap: 6px; }
  /* Der Torname bricht nicht mitten im Namen um, sondern steht als
     eigene, zentrierte Zeile unter „Sonne in Tor X.Y". */
  .hb-zeile .hb-torname { display: block; margin-top: 2px; }
  .hb-datum { text-align: center; padding-right: 0; }
  .hb-glied { justify-content: center; }
  /* Der Pfeil kollidiert absolut positioniert mit den zentrierten
     Zeilen — mobil steht er mittig darunter. */
  .hb-pfeil { position: static; transform: none; margin: 2px auto 0; }
}

@media (max-width: 560px) {
  .laborfuss { text-align: center; }
  .fuss-marke { justify-items: center; }
  .fusslogo { margin-left: auto; margin-right: auto; }
  .fuss-kanaele { justify-content: center; }
  .fuss-spalte ul { padding-left: 0; list-style-position: inside; }
  .fuss-schluss { justify-content: center; text-align: center; }
  .fuss-partnerlogo { width: 100%; justify-content: center; }
}

@media (max-width: 520px) {
  .tuer .untertitel { font-size: 11.5px; letter-spacing: 1.8px; }
}

/* ============================================================
   WASSERZEICHEN AUCH IM HELD (09.08.2026)
   Dieselbe Behandlung wie an der Tür: die Chart-Kontur im Held
   der Startseite wird vom raumgreifenden Motiv (132 % Höhe,
   harte Bildkanten) zum leisen Wasserzeichen — links mittig,
   radial weich auslaufend; Daniels Porträt bleibt rechts.
   ============================================================ */

.held-kontur {
  height: 62%;
  width: auto;
  left: -50px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-mask-image: radial-gradient(95% 85% at 0% 50%, #000 38%, transparent 90%);
  mask-image: radial-gradient(95% 85% at 0% 50%, #000 38%, transparent 90%);
}

/* Mobil trägt der Held nur Text und Kontur — das Porträt braucht
   Breite, um zu wirken, und bleibt dem Desktop vorbehalten. */
@media (max-width: 760px) {
  .held-portrait { display: none; }
}

/* ============================================================
   MOBILER TEXT MITTIG (09.08.2026)
   Daniels Vorgabe: Text steht mobil zentriert — Held, Rechner-
   Reihen und die Ordnungs-Kachel ziehen nach (Fuß, Werkzeugband
   und Transit-Leiste stehen bereits mittig). Das Logbuch bleibt
   als Chronik bewusst linksbündig.
   ============================================================ */

@media (max-width: 860px) {
  .reihe .textteil { text-align: center; }
  .reihe .fuss { justify-content: center; }
  .ordnung { text-align: center; }
  .ordnung h3 { justify-content: center; }
}

@media (max-width: 760px) {
  .held-inhalt { text-align: center; }
  .held-inhalt .etikett { justify-content: center; }
}

/* ============================================================
   ZEITQUALITÄT ZUM AUFKLAPPEN (09.08.2026)
   Ein Klick auf die Transit-Leiste öffnet die Erklärung der
   Zeitqualität. Deutungstexte wortgleich aus dem Transite-
   Rechner; das Panel trägt dasselbe Milchglas wie die Leiste.
   ============================================================ */

a.hb-karte { cursor: pointer; color: inherit; text-decoration: none; }

a.hb-karte:hover { border-color: rgba(0, 229, 208, 0.35); }








/* ============================================================
   MOBILE AUSRICHTUNG DER KACHELN (09.08.2026)
   Daniels Rückmeldung zur mobilen Ansicht:
   1) Stationsbilder liefen über die Kachel hinaus — aspect-ratio
      16:9 + min-height 220px übertrug bei schmalen Spalten die
      Höhe auf die Breite (220 × 16/9 = 391px im 370er-Fenster).
      width:100% bindet das Bild wieder an die Spaltenbreite.
   2) Das Held-Etikett zentrierte den Text, ließ seinen Strich
      aber links außen stehen — mobil entfällt der Strich, der
      zweizeilige Umbruch wird ausgewogen gesetzt.
   3) Über „Deine Werkzeuge" stapelten sich 164px Leerraum
      (Bühne 48 + Band 40 + Kicker-Abstand 76) — der große
      Kicker-Abstand gehört zum Desktop-Rhythmus und weicht
      mobil einem ruhigen Maß.
   ============================================================ */

@media (max-width: 860px) {
  .reihe .bildteil,
  body[data-intro] .reihe .bildteil {
    width: 100%;
  }

  .werkzeug-band { padding-top: 28px; }
  .werkzeug-band .abschnitt-mitte .kicker { margin-top: 16px; }
}

@media (max-width: 760px) {
  .held-inhalt .etikett,
  .held .etikett {
    display: block;
    width: auto;
    text-wrap: balance;
  }

  .held-inhalt .etikett::before,
  .held .etikett::before {
    content: none;
  }
}

/* ============================================================
   KANAL-ICONS WIE DIE HAUPTSEITE (09.08.2026)
   Daniels Vorgabe: Die Kanäle stehen wie im Footer von
   daniel-bayer.net — runde, helle Scheiben mit den offiziellen
   Marken-Glyphen (SVG-Pfade wortgleich von der Hauptseite
   übernommen, keine nachgebauten Logos). 32px-Kreis, dunkle
   Glyphe, sanftes Wachsen bei Berührung.
   ============================================================ */

.fuss-kanal-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.fuss-kanal-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eaedf1;
  transition: transform 0.2s ease;
}

.fuss-kanal-icons a:hover {
  transform: scale(1.1);
}

.fuss-kanal-icons svg {
  width: 15px;
  height: 15px;
  fill: #0d1f2d;
}

@media (max-width: 760px) {
  .fuss-kanal-icons { justify-content: center; }
}

/* ============================================================
   LANGE TITEL BRECHEN MOBIL (09.08.2026)
   „Datenschutzerklärung" lief als unteilbares Wort über den
   Rand des schmalen Fensters — lange Seitentitel trennen sich
   jetzt nach deutschen Silbenregeln.
   ============================================================ */
.rechtsseite .seiten-kopf h1 {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: anywhere;
}

/* ============================================================
   PETROL-SAUM (10.08.2026)
   Daniels Wahl aus der Deutungskachel-Vorlage, übertragen auf
   die Instrument-Karten der Startseite: Transit-Leiste und
   Werkzeug-Band tragen dieselbe Leuchtlinie mit Petrol-Auslauf
   wie die Deutungskachel im Transite-Rechner.
   ============================================================ */

.hb-karte {
  overflow: hidden;
  border-color: rgba(159, 176, 184, 0.2);
  background: linear-gradient(180deg, rgba(0, 141, 158, 0.16) 0%, rgba(6, 20, 31, 0.72) 44%, rgba(3, 12, 20, 0.85) 100%);
}

.hb-karte::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #00e5d0 30%, #5ff2e3 50%, #00e5d0 70%, transparent);
  opacity: 0.85;
}

.hb-karte::after {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 46px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(0, 229, 208, 0.14), transparent 75%);
  pointer-events: none;
}

.werkzeug-band {
  background: linear-gradient(180deg, rgba(0, 141, 158, 0.13) 0%, var(--tinte-2) 32%, var(--tinte) 100%);
  border-color: rgba(159, 176, 184, 0.18);
}

.werkzeug-band::before {
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #00e5d0 30%, #5ff2e3 50%, #00e5d0 70%, transparent);
  opacity: 0.85;
}

.werkzeug-band::after {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 68px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(0, 229, 208, 0.14), transparent 75%);
  pointer-events: none;
}

/* ============================================================
   ZUGANGSKACHEL „INSTRUMENT GOLD" (10.08.2026)
   Daniels Wahl aus der Zugangskachel-Vorlage: Fassung 5 —
   fast schwarze Karte mit feinem Gold-Verlaufsrahmen und der
   goldenen Zeile der Eingangstür. Bewusst OHNE Schein hinter
   dem Emblem: Auf der ruhigen dunklen Fläche steht das farbige
   Zeichen von selbst im Kontrast.
   Korrektur 12:2x: Die Eröffnungs-Schichten der Startseite
   (body[data-intro] …) waren spezifischer und hielten Karte und
   Rahmen im alten Petrol-Kleid — deshalb hier beide Selektoren,
   und der Rahmen hebt das display:none von Zeile ~3262 auf.
   ============================================================ */

.akademie-band,
body[data-intro] .akademie-band {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 25px;
  background: linear-gradient(180deg, rgba(6, 17, 27, 0.94), rgba(3, 10, 17, 0.98));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.akademie-band::before,
body[data-intro] .akademie-band::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 25px;
  padding: 1px;
  background: linear-gradient(155deg, rgba(249, 236, 192, 0.6), rgba(140, 106, 32, 0.3) 45%, rgba(232, 201, 109, 0.6));
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.akademie-band .goldzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.9px;
  text-transform: uppercase;
}

.akademie-band .goldschrift {
  background: linear-gradient(180deg, #f9ecc0 0%, #e8c96d 42%, #c49a35 78%, #a67c22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.akademie-band .goldzeile::before,
.akademie-band .goldzeile::after {
  content: "";
  height: 1px;
  flex: 0 0 30px;
}

.akademie-band .goldzeile::before { background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6)); }
.akademie-band .goldzeile::after { background: linear-gradient(270deg, transparent, rgba(212, 175, 55, 0.6)); }

/* Daniels Wunsch 12:2x: Das Zeichen steht weiß auf der schwarzen
   Karte — wie im Fußzeilen-Logo. Die Bildmarke ist Linienkunst mit
   Transparenz, der Filter stellt sie deckend weiß. */
.akademie-band .band-emblem {
  opacity: 1;
  filter: brightness(0) invert(1);
}

/* ============================================================
   HELD IN INSTRUMENT GOLD – MOBIL (10.08.2026)
   Daniels Wunsch: Die Held-Kachel („Exklusiv für HD Phönix auf
   Patreon") trägt auf schmalen Schirmen dasselbe Kleid wie die
   Zugangskachel unten – fast schwarze Karte mit feinem 1px-
   Goldrahmen, das Etikett in goldener Metallschrift mit
   flankierenden Goldlinien. Alle Werte wortgleich aus Fassung 5
   „Instrument Gold" (stylingvorlage-zugangskachel.html).
   Kontur-Wasserzeichen, Portrait-Andeutung und Schleier bleiben.
   ============================================================ */
@media (max-width: 760px) {
  .held-voll {
    border: 0;
    background: linear-gradient(180deg, rgba(6, 17, 27, 0.94), rgba(3, 10, 17, 0.98));
  }

  /* Goldrahmen als Maskenrahmen über allem Innenleben */
  .held-voll::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: calc(var(--radius) + 8px);
    padding: 1px;
    background: linear-gradient(155deg, rgba(249, 236, 192, 0.6), rgba(140, 106, 32, 0.3) 45%, rgba(232, 201, 109, 0.6));
    -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, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }

  .held-inhalt .etikett {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: auto;
  }

  .held-inhalt .etikett .goldschrift {
    background: linear-gradient(180deg, #f9ecc0 0%, #e8c96d 42%, #c49a35 78%, #a67c22 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-wrap: balance;
  }

  .held-inhalt .etikett::before,
  .held-inhalt .etikett::after {
    content: "";
    height: 1px;
    flex: 0 0 30px;
    width: auto;
    margin: 0;
    opacity: 1;
  }

  .held-inhalt .etikett::before { background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6)); }
  .held-inhalt .etikett::after { background: linear-gradient(270deg, transparent, rgba(212, 175, 55, 0.6)); }
}

/* ============================================================
   PHÖNIXFEDER IN DER ZUGANGSKACHEL (10.08.2026)
   Daniels Wahl: Fassung L5 der Higgsfield-Federn — die
   Kalligrafische, liegend mit steigender Spitze, Glut nah am
   Kiel. Das Bild trägt rein schwarzen Grund; der Screen-
   Mischmodus lässt Schwarz auf der fast schwarzen Karte
   verschwinden, nur Gold und Glut bleiben sichtbar.
   Original: _MATERIAL/higgsfield-federn-2026-08-10/
   feder-4a-liegend-5.png (Stand-Wurzel, nicht im Repo).
   ============================================================ */
.akademie-band .band-feder {
  display: block;
  width: min(320px, 70%);
  height: auto;
  margin: 22px auto 0;
  mix-blend-mode: screen;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ============================================================
   FEDER STATT EMBLEM (10.08.2026)
   Daniels Vorschlag: Das weiße Zeichen oben in der Zugangskachel
   entfällt — die Phönixfeder tritt an seine Stelle und krönt die
   Kachel, sonst wird es zu viel. Die Feder rückt nach oben, der
   untere Abstand entfällt. Größe: Daniels Wahl aus der
   Federkachel-Vorlage ist F2 „Mittel" — 200 px.
   ============================================================ */
.akademie-band .band-feder {
  width: min(200px, 48%);
  margin: 0 auto 10px;
}

/* ============================================================
   LOGBUCH IN HÄPPCHEN (10.08.2026)
   Daniels Wunsch: Das Logbuch überlädt mit allen Einträgen —
   es zeigt jetzt fünf, ein Knopf holt jeweils fünf ältere nach
   und verschwindet, wenn alles sichtbar ist. Ohne JS erscheinen
   weiterhin alle Einträge (der Knopf existiert dann gar nicht).
   ============================================================ */
.logbuch ol > li[hidden] { display: none; }

.logbuch .logbuch-mehr {
  display: flex;
  margin: 30px auto 0;
}

/* ============================================================
   HELD-GOLDSCHRIFT AUCH AM GROSSEN SCHIRM (10.08.2026)
   Daniels Wunsch: Die Zeile „Exklusiv für HD Phönix auf Patreon"
   im Held trägt das edle Gold nicht nur mobil, sondern überall.
   Der Strich davor wird zur goldenen Linie (Werte wortgleich von
   den Flanken der Goldzeile); die Mobil-Schicht bleibt unberührt.
   ============================================================ */
.held-inhalt .etikett .goldschrift {
  background: linear-gradient(180deg, #f9ecc0 0%, #e8c96d 42%, #c49a35 78%, #a67c22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.held-inhalt .etikett::before {
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6));
  opacity: 1;
}

/* ============================================================
   AUCH DIE ZWEITE EXKLUSIV-ZEILE IN GOLD (10.08.2026)
   Befund aus dem Diskrepanzen-Check, Daniels Okay: Das Etikett
   „Exklusiv im Backstage-Bereich" auf der Zwischenbühne spricht
   jetzt dasselbe Gold wie die Schwester-Zeile im Held.
   ============================================================ */
.zwischen-inhalt .etikett .goldschrift {
  background: linear-gradient(180deg, #f9ecc0 0%, #e8c96d 42%, #c49a35 78%, #a67c22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   FLIESSTEXT-LINKS IN HAUSFARBE (10.08.2026)
   Daniels Fund: Der E-Mail-Link im Feedback-Absatz zeigte das
   Browser-Lila für besuchte Links — Fließtext-Links hatten keine
   eigene Farbregel (nur Kopf, Fuß, Menüs und Rechtsseiten). Jetzt
   tragen sie Petrol wie überall, besucht wie unbesucht, mit
   feiner Unterstreichung als Erkennungszeichen.
   ============================================================ */
.ordnung a,
.ordnung a:visited,
.logbuch a,
.logbuch a:visited {
  color: var(--reagenz);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 178, 194, 0.45);
}

.ordnung a:hover,
.logbuch a:hover {
  text-decoration-color: currentColor;
}

/* ============================================================
   HELD H1 – DER GOLDRAHMEN (10.08.2026)
   Daniels Wahl aus der Held-Design-Vorlage: Fassung H1. Der Held
   trägt jetzt auf allen Breiten die fast schwarze Karte mit dem
   feinen Goldrahmen der Zugangskachel, statt des Portraits steht
   der Phönix P1a (Feinzeichnung) rechts im Screen-Mischmodus,
   und „Backstage" glänzt gold im Titel. Schleier und
   Chart-Kontur entfallen — die Karte ist selbst dunkel genug.
   Original: _MATERIAL/higgsfield-phoenix-2026-08-10/
   phoenix-1a-feinzeichnung.png.
   ============================================================ */
.held-voll {
  border: 0;
  background: linear-gradient(180deg, rgba(6, 17, 27, 0.94), rgba(3, 10, 17, 0.98));
}

.held-voll::before { display: none; }

.held-voll::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: calc(var(--radius) + 8px);
  padding: 1px;
  background: linear-gradient(155deg, rgba(249, 236, 192, 0.6), rgba(140, 106, 32, 0.3) 45%, rgba(232, 201, 109, 0.6));
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.held-kontur { display: none; }

.held-portrait {
  -webkit-mask-image: none;
  mask-image: none;
  top: 50%;
  transform: translateY(-50%);
  right: 3%;
  height: 88%;
  width: auto;
  max-width: 46%;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: screen;
  opacity: 1;
}

.held-inhalt h1 em {
  background: linear-gradient(180deg, #f9ecc0 0%, #e8c96d 42%, #c49a35 78%, #a67c22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

@media (max-width: 860px) {
  /* Auf schmalen Schirmen bleibt der Phönix eine leise Andeutung hinter dem Text */
  .held-portrait {
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 82%;
    height: 74%;
    opacity: 0.32;
  }
}

/* ============================================================
   BARRIEREFREIHEIT (11.08.2026)
   Ergebnisse des großen Audits: Sprunglink für alle drei
   Hauptseiten, Kennzahlen visuell wie gehabt (Zahl über Begriff,
   im Markup steht jetzt korrekt dt vor dd), Logbuch-Scrollkasten
   fokussierbar, Goldschrift im Windows-Kontrastmodus lesbar,
   sanftes Scrollen und Tür-Wackeln respektieren reduzierte
   Bewegung. Die Knopf-Verläufe enden seit diesem Stand bei
   #007a87 statt #00aebb (Weiß erreicht damit 5,08:1).
   ============================================================ */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 999px;
  background: #eaf6f8;
  color: #031420;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  transform: translateY(-250%);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--reagenz);
  outline-offset: 3px;
}

#main-content:focus { outline: none; }

.kennzahl {
  display: flex;
  flex-direction: column-reverse;
}

.logbuch:focus-visible {
  outline: 2px solid var(--reagenz);
  outline-offset: 3px;
}

.logbuch ol > li:focus { outline: none; }

@media (forced-colors: active) {
  .goldschrift,
  .tuer .untertitel,
  .held-inhalt h1 em,
  .held-inhalt .etikett .goldschrift,
  .zwischen-inhalt .etikett .goldschrift,
  .akademie-band .goldschrift {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tuer .fehler.zeigen { animation: none; }
}

/* Bewegung pausieren (WCAG 2.2.2): Der Fußzeilen-Schalter hält alle
   CSS-Animationen der Seite an; die Parallaxe steigt im Skript aus. */
html.bewegung-aus *,
html.bewegung-aus *::before,
html.bewegung-aus *::after {
  animation-play-state: paused !important;
}

/* ============================================================
   HELD MOBIL: DAS VERBLASSEN (11.08.2026)
   Daniels Wahl: Fassung M18 aus stylingvorlage-heldmobil.html.
   Auf schmalen Schirmen trägt die Held-Karte den Phönix als
   feine Linienskizze halb angeschnitten am rechten Rand — der
   Schweif nur angedeutet, die Linien lösen sich nach unten auf.
   Schwarzer Bildgrund verschwindet per Screen-Mischmodus auf der
   fast schwarzen Karte. Original: _MATERIAL/higgsfield-phoenix-
   2026-08-10/phoenix-skizze-f-verblasst.png (nicht im Repo).
   ============================================================ */
.held-skizze { display: none; }

@media (max-width: 760px) {
  /* Maße aus der Vorlage übernommen: Bildbreite 81 % der Karten-
     breite, 28 % nach rechts hinausgeschoben — die echte Karte ist
     höher als die Mockup-Karte, darum skaliert die Breite, nicht
     die Höhe. */
  .held-skizze {
    display: block;
    position: absolute;
    z-index: 1;
    right: -28%;
    top: 50%;
    transform: translateY(-50%);
    width: 81%;
    height: auto;
    mix-blend-mode: screen;
    opacity: 0.55;
    pointer-events: none;
  }
}

@media (forced-colors: active) {
  .held-skizze { display: none; }
}

/* ============================================================
   DIE DREI ZUSAGEN ALS GOLDKARTEN (11.08.2026)
   Daniels Wahl: Fassung O1 aus stylingvorlage-ordnung.html. Die
   Ordnungs-Leiste wird zu drei eigenen Karten im Kleid der
   Zugangskachel — fast schwarz, feiner 1px-Goldrahmen, goldene
   Nummern statt Leuchtpunkte. Der Mail-Link steht in dickem Weiß.
   ============================================================ */
/* Zwillings-Selektoren mit body[data-intro]: Die Intro-Schicht
   (Bänder mit Trennlinien, Padding 0) hat höhere Spezifität und
   würde die Goldkarten sonst aushebeln — gleiche Falle wie einst
   bei der Zugangskachel. */
.ordnung,
body[data-intro] .ordnung {
  margin-top: 64px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.ordnung > div,
body[data-intro] .ordnung > div,
body[data-intro] .ordnung > div:first-child,
body[data-intro] .ordnung > div:last-child {
  position: relative;
  padding: 28px 26px 26px;
  border-radius: 25px;
  background: linear-gradient(180deg, rgba(6, 17, 27, 0.94), rgba(3, 10, 17, 0.98));
}

body[data-intro] .ordnung > div + div { border: 0; }

.ordnung > div::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 25px;
  padding: 1px;
  background: linear-gradient(155deg, rgba(249, 236, 192, 0.6), rgba(140, 106, 32, 0.3) 45%, rgba(232, 201, 109, 0.6));
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.ordnung .zusage-nr {
  display: block;
  font-family: "TopLuxury", Georgia, serif;
  font-size: 19px;
  line-height: 1;
  margin-bottom: 14px;
  background: linear-gradient(180deg, #f9ecc0 0%, #e8c96d 42%, #c49a35 78%, #a67c22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ordnung a,
.ordnung a:visited {
  color: #fff;
  font-weight: 700;
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

.ordnung a:hover {
  text-decoration-color: #fff;
}

@media (forced-colors: active) {
  .ordnung > div { border: 1px solid CanvasText; }
  .ordnung .zusage-nr {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: CanvasText;
  }
}

/* ============================================================
   DIE TÜR IN INSTRUMENT GOLD MIT PHÖNIX (11.08.2026)
   Daniels Wahl: Fassung T2 („Der Rand") aus stylingvorlage-tuer.html.
   Die Passwort-Karte trägt jetzt das Kleid der Startseite — fast
   schwarz, feiner 1px-Goldrahmen (ersetzt die innere VIP-Haarlinie)
   — und den Linien-Phönix (Skizze „Das Verblassen") halb
   angeschnitten am rechten Kartenrand, auf allen Breiten.
   ============================================================ */
.tuer.glas {
  overflow: hidden;
  border: 0;
  border-radius: 25px;
  background: linear-gradient(180deg, rgba(6, 17, 27, 0.94), rgba(3, 10, 17, 0.98));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
}

.tuer.glas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0;
  border-radius: 25px;
  padding: 1px;
  background: linear-gradient(155deg, rgba(249, 236, 192, 0.6), rgba(140, 106, 32, 0.3) 45%, rgba(232, 201, 109, 0.6));
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.tuer-skizze {
  position: absolute;
  z-index: 1;
  right: -30%;
  top: 50%;
  transform: translateY(-50%);
  width: 84%;
  height: auto;
  mix-blend-mode: screen;
  opacity: 0.5;
  pointer-events: none;
}

.tuer > :not(.tuer-skizze) { position: relative; z-index: 2; }

/* Der Akademie-Link im Neulings-Block: dickes Weiß wie der
   Mail-Link in den drei Zusagen. */
.tuer .neuling-text a,
.tuer .neuling-text a:visited {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

.tuer .neuling-text a:hover { text-decoration-color: #fff; }

/* ============================================================
   DICKE WEISSE LINKS (11.08.2026)
   Daniels Regel: Links im Fließtext stehen überall in dickem
   Weiß mit feiner Unterstreichung — nirgendwo Browser-Blau oder
   Besucht-Lila. Menü-, Fuß- und Knopf-Navigation behalten ihre
   Systemfarben. Hier eingefangen: die Rechtsseite (Datenschutz,
   dort standen die Mail-Links noch ungestylt) und das Logbuch
   (stand noch in Türkis).
   ============================================================ */
.rechtsseite a,
.rechtsseite a:visited,
.logbuch a,
.logbuch a:visited {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

.rechtsseite a:hover,
.logbuch a:hover {
  text-decoration-color: #fff;
}

/* ============================================================
   STERNE HINTER DER TÜR (11.08.2026)
   Daniels Wahl: Fassung N4 („Die Tiefe") aus
   stylingvorlage-tuersterne.html. Kleine Lichtpunkte im dunklen
   Raum hinter der Passwortkarte, in zwei Ebenen: ferne matte
   Pünktchen und einzelne nähere, hellere. Jeder Stern lebt in
   seinem eigenen Rhythmus mit langer Dunkelphase — meist ist er
   ganz weg. Reine CSS-Punkte, gestochen scharf auf jedem Schirm.
   ============================================================ */
.tuer-stern {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation-name: tuer-funkeln;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.tuer-stern.hell {
  width: 2.4px;
  height: 2.4px;
  --hell: 0.9;
  background: #eef6f8;
  box-shadow: 0 0 6px rgba(238, 246, 248, 0.8);
}

.tuer-stern.fern {
  width: 1.1px;
  height: 1.1px;
  --hell: 0.55;
  background: rgba(238, 246, 248, 0.7);
  box-shadow: 0 0 4px rgba(238, 246, 248, 0.45);
}

@keyframes tuer-funkeln {
  0%   { opacity: 0; }
  38%  { opacity: 0; }
  50%  { opacity: var(--hell, 0.9); }
  62%  { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tuer-stern { animation: none; opacity: 0.3; }
}

@media (forced-colors: active) {
  .tuer-stern { display: none; }
}

/* ============================================================
   DIE TÜR GETEILT — NUR MOBIL (11.08.2026)
   Daniels Anweisung, wörtlich: Nur auf dem Handy zerfällt die Tür
   vor „Noch kein HD Phönix?" in zwei eigene Karten. Am Desktop
   bleibt alles unverändert EINE Karte mit der leisen Trennlinie.
   Dafür trägt die Karte innen zwei Halter (.tuer-teil und
   .akademie-hinweis) und zwei Skizzen-Exemplare: .nur-breit sitzt
   wie bisher in der großen Karte, .nur-schmal mobil in Karte 1.
   ============================================================ */
.tuer-skizze.nur-schmal { display: none; }

/* Kompakter Kartenfuß (Fassung E4 aus stylingvorlage-tuermobil.html):
   lebt nur mobil in Karte 2. */
.karten-fuss { display: none; }

@media (max-width: 760px) {
  /* Die äußere Karte tritt ab … (main-Vorsatz: die späteren
     Feinschliff-Regeln mit Titel-Luft 60px stehen im Stylesheet
     weiter unten und würden bei gleicher Spezifität gewinnen) */
  main.tuer.glas {
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
  }

  main.tuer.glas::after { display: none; }

  .tuer-skizze.nur-breit { display: none; }
  .tuer-skizze.nur-schmal { display: block; }

  /* … und ihre zwei Teile werden eigene Goldkarten. */
  .tuer-teil,
  .tuer .akademie-hinweis {
    position: relative;
    overflow: hidden;
    border-radius: 25px;
    background: linear-gradient(180deg, rgba(6, 17, 27, 0.94), rgba(3, 10, 17, 0.98));
  }

  .tuer-teil { padding: 60px 30px 40px; }

  .tuer .akademie-hinweis {
    margin-top: 18px;
    padding: 34px 30px 32px;
    border-top: 0;
  }

  .tuer-teil::before,
  .tuer .akademie-hinweis::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: 25px;
    padding: 1px;
    background: linear-gradient(155deg, rgba(249, 236, 192, 0.6), rgba(140, 106, 32, 0.3) 45%, rgba(232, 201, 109, 0.6));
    -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, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }

  .tuer-teil > :not(.tuer-skizze) { position: relative; z-index: 2; }

  /* Fassung E4: Der Fuß wohnt mobil mit in Karte 2 — der große
     Seitenfuß zeigt dort nur noch die freie Schlusszeile. */
  .laborfuss.tuerfuss {
    background: none;
    border-radius: 0;
    border-top: 0;
    margin-top: 0;
    padding: 0 20px;
  }

  .tuerfuss .fuss-marke,
  .tuerfuss .fuss-spalte { display: none; }

  .tuerfuss .fuss-schluss {
    margin-top: 0;
    background: none;
    border-top: 0;
  }

  /* Menüabstand: die Tür beginnt dicht unter der Kopfzeile.
     Zwilling mit .kompakt nötig — die Regel bei „Karte exakt mittig"
     ist spezifischer und würde sonst Mindesthöhe und Abstand
     zurückholen. */
  .tuer-buehne,
  .tuer-buehne.kompakt {
    min-height: 0;
    align-items: start;
    padding: 14px 20px 34px;
  }

  /* Der kompakte Kartenfuß in Karte 2 */
  .karten-fuss {
    display: block;
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .karten-fuss .kf-logo {
    height: 34px;
    width: auto;
    display: block;
    margin: 0 auto 10px;
  }

  .karten-fuss .kf-kontext {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-matt);
    margin-bottom: 10px;
  }

  .karten-fuss .kf-kontext::before,
  .karten-fuss .kf-kontext::after {
    content: "";
    height: 1px;
    flex: 0 0 22px;
    background: rgba(0, 178, 194, 0.5);
  }

  .karten-fuss .kf-claim {
    display: block;
    font-size: 11.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-leise);
    margin-bottom: 16px;
  }

  .karten-fuss .kf-icons { justify-content: center; gap: 10px; margin-bottom: 18px; }

  .karten-fuss .kf-icons a { width: 28px; height: 28px; }

  .karten-fuss .kf-icons svg { width: 13px; height: 13px; }

  .karten-fuss .kf-recht {
    margin-bottom: 0;
    font-size: 12px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
  }

  .karten-fuss .kf-recht span { color: var(--text-leise); }

  .karten-fuss .kf-recht a,
  .karten-fuss .kf-recht a:visited {
    color: var(--reagenz);
    font-weight: 400;
    text-decoration: none;
  }

  .karten-fuss .kf-recht a:hover { color: #fff; }
}

/* Ruhiger Auftritt (Daniels Feinschliff): Die Chart-Kontur im
   Hintergrund entfällt auf allen Breiten — mit dem Phönix wäre sie
   zu viel. Die Karte wird breiter und steht wieder mittig; die
   Links-Stellung ab 1100 px stammte noch aus der Portrait-Zeit. */
.tuer-kontur { display: none; }

.tuer.glas { width: min(580px, 94vw); }

/* Ohne das türkise Emblem (raus, es taucht in Kopf und Fuß schon
   auf) trägt der Titel die Karte: größer, mit mehr Luft nach oben. */
.tuer.glas { padding-top: 60px; }

.tuer h1 {
  font-size: 34px;
  margin-bottom: 10px;
}

@media (min-width: 1100px) {
  .tuer-buehne {
    place-items: center;
    padding-left: 20px;
  }
}

@media (forced-colors: active) {
  .tuer-skizze { display: none; }
}

.bewegung-schalter {
  margin-top: 14px;
  padding: 8px 18px;
  border: 1px solid rgba(159, 176, 184, 0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--text-matt);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.bewegung-schalter:hover {
  color: var(--reagenz);
  border-color: var(--reagenz);
}


/* ============================================================
   ZENTRIERTE MOBIL-UNTERMENÜS (11.08.2026)
   Daniels Hinweis: Im zentrierten Startseiten-Menü müssen auch
   die aufgeklappten Rechner-Punkte mittig stehen.
   ============================================================ */
.mobil-untermenue a {
  justify-content: center;
  text-align: center;
}


/* ============================================================
   DESKTOP-MENÜ IN DREI PUNKTEN (11.08.2026)
   Wie auf daniel-bayer.net: Transite, Radix & Mandala und
   Spezialrechner sind eigene Aufklapper — jedes Panel hängt
   schmal unter seinem Knopf statt als breites Band.
   ============================================================ */
.hat-dropdown { position: relative; }

.dropdown.dropdown-schmal {
  left: 0;
  right: auto;
  width: max-content;
  min-width: 320px;
  grid-template-columns: 1fr;
  padding: 14px 16px;
}


/* ============================================================
   DESKTOP-MENÜ IM HAUPTSEITEN-KLEID (11.08.2026)
   Nach Daniels Screenshots und den GEMESSENEN Werten von
   daniel-bayer.net: Menüpunkte DM Sans 600, Versalien, 20,8 px
   bei 2,72 px Sperrung (hier fließend skaliert), Grundfarbe
   neutral hell statt Türkis, Hover petrol. Das Panel ist OPAK
   (kein Liquid-Glass über dem Seitentext), Radius 4 px wie das
   weiße Hauptseiten-Panel; Unterpunkte DM Sans 14 px in
   Mischschreibung mit großzügiger Luft, ohne Nummern.
   ============================================================ */
.kopf-nav a,
.nav-aufklapper {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(15px, 1.25vw, 20.8px);
  font-weight: 600;
  letter-spacing: 0.131em;
  text-transform: uppercase;
  color: #e8f1f2;
}

.kopf-nav a:hover,
.nav-aufklapper:hover,
.hat-dropdown.offen .nav-aufklapper { color: #00e5d0; }

.dropdown.dropdown-schmal {
  background: #0e1c2e;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  padding: 6px 0;
  min-width: 300px;
}

.dropdown-schmal .dropdown-spalte { padding: 0; gap: 0; }

.dropdown-schmal .dropdown-spalte::before { display: none; }

.dropdown-schmal a {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: #d5e2e8;
  padding: 17px 26px;
  border-radius: 0;
}

.dropdown-schmal a:hover {
  background: rgba(0, 229, 208, 0.08);
  color: #00e5d0;
}

.dropdown-schmal .dropdown-index { display: none; }

/* Kopf-Pillen in Hauptseiten-Typo: DM Sans-Versalien in der 33px-Pille */
.kopf-aktionen .knopf {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
}


/* ============================================================
   MENÜ-KACHELN WIE AUF DER HAUPTSEITE (11.08.2026)
   Nach Daniels Screenshots: keine Pfeile an den Punkten, der
   offene Punkt trägt eine sanfte helle Pille, und die Panels
   sind weiße, weich gerundete Karten — kleine Petrol-Überschrift
   mit Haarlinie, Einträge in gesperrten TopLuxury-Versalien,
   dazu das Chart-Wasserzeichen wie im Hauptseiten-Panel.
   ============================================================ */
.nav-aufklapper {
  padding: 9px 16px;
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease;
}

.hat-dropdown.offen .nav-aufklapper {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.dropdown.dropdown-schmal {
  overflow: hidden;
  background: #fdfefe;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
  padding: 26px 30px 28px;
  min-width: 340px;
}

.dropdown.dropdown-schmal::after {
  content: "";
  position: absolute;
  right: -72px;
  top: 50%;
  transform: translateY(-46%);
  width: 300px;
  height: 118%;
  background: url("bilder/hd-chart-kontur.png") right center / contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

.dropdown-schmal .dropdown-titel {
  display: block;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #007a87;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(9, 32, 44, 0.16);
}

.dropdown-schmal a {
  position: relative;
  z-index: 1;
  font-family: "TopLuxury", Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1e2b38;
  padding: 14px 2px;
  border-radius: 0;
  background: none;
}

.dropdown-schmal a:hover {
  background: none;
  color: #007a87;
}


/* Hauptseiten-Feinheiten (Daniels Hover-Screenshot, 11.08.2026):
   Beim Überfahren eines Panel-Eintrags erscheint der kleine Pfeil
   hinter dem Text; die Menüpunkte selbst tragen wie auf der
   Hauptseite die Serifen-Versalien. */
.kopf-nav a,
.nav-aufklapper {
  font-family: "TopLuxury", Georgia, serif;
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 500;
  letter-spacing: 0.14em;
}

.dropdown-schmal .dropdown-titel {
  position: relative;
  z-index: 1;
}

.dropdown-schmal a:hover { color: #1e2b38; }

.dropdown-schmal a::after {
  content: "\2192";
  margin-left: 12px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.dropdown-schmal a:hover::after,
.dropdown-schmal a:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}


/* Kopf-Balance (11.08.2026): Der Hauptseiten-Punkt wohnt rechts
   neben dem Patreon-Knopf — links neben dem breiten Logo war für
   vier Punkte kein Platz (Überlappung). Die Nav-Punkte brechen
   nicht mehr um. */
.kopf-nav a,
.nav-aufklapper { white-space: nowrap; }

.kopf-nav { gap: 16px; }

.kopf-aktionen .kopf-textlink {
  font-family: "TopLuxury", Georgia, serif;
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e8f1f2;
  text-decoration: none;
  white-space: nowrap;
  margin-right: 6px;
}

.kopf-aktionen .kopf-textlink:hover { color: #00e5d0; }


/* ============================================================
   PLATZ-STAFFEL FÜR DEN KOPF (11.08.2026)
   Die Serifen-Menüpunkte brauchen Raum neben dem breiten Lockup —
   bis 1420 px überlappten sie mit den vollständigen Aktionen das Logo. Bis
   einschließlich 1420 px übernimmt darum das Mobilmenü (Burger).
   ============================================================ */
@media (max-width: 1420px) {
  .kopf-nav,
  .kopf-aktionen { display: none; }

  .laborkopf {
    position: relative;
    z-index: 2;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .wortmarke { grid-column: 1; justify-self: start; }

  .menue-knopf {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .mobil-menue {
    position: fixed;
    inset: 0;
    z-index: 1;
    margin: 0;
    padding: 112px 24px 36px;
    align-content: start;
    justify-items: center;
    overflow: hidden auto;
    background:
      radial-gradient(circle at 78% 86%, rgba(0, 174, 187, 0.13), transparent 34%),
      radial-gradient(circle at 16% 24%, rgba(177, 140, 255, 0.08), transparent 31%),
      rgba(5, 11, 20, 0.985);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: blur(18px);
  }

  .mobil-menue:not([hidden]) { display: grid !important; }

  .mobil-menue > * { position: relative; z-index: 1; }
}

/* Zugangskomfort: Sitzung als Standard, freiwillige 60-Tage-Auswahl
   und ein echtes POST-Abmelden auf jeder geschützten Hauptebene. */
.tuer-merken {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-matt);
  font-size: 13.5px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.tuer-merken input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #00aebb;
}

.tuer-merken:focus-within {
  outline: 2px solid var(--reagenz);
  outline-offset: 4px;
  border-radius: 4px;
}

.logout-form {
  display: inline-flex;
  margin: 0;
}

.logout-knopf { cursor: pointer; }

.kopf-aktionen .logout-knopf,
.laborfuss .fuss-spalte .fuss-logout {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
}

.laborfuss .fuss-spalte .fuss-logout {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 12.6px;
  font-weight: 500;
  letter-spacing: 1.386px;
  line-height: 1.6;
  text-transform: uppercase;
  color: #00b2c2;
}

.laborfuss .fuss-spalte .fuss-logout:hover { color: #ffffff; }

.mobil-knoepfe .logout-form { display: inline-flex; }