/* Tiefgang – Design (Version 1.2)
   Tiefsee-Look: sehr dunkles Navy, je tiefer du tauchst, desto dunkler wird es.
   Der Hintergrund wird per JavaScript über die Variable --bg gesetzt.
   Jede Seltenheitsstufe hat ein eigenes Meerestier und eine eigene Farbe. */

:root {
  --oberflaeche: #0e4a6e;
  --mittel: #0a2f50;
  --tief: #07182e;
  --abgrund: #050a14;

  --licht: #e8f3fb;
  --licht-leise: #b4cde0;
  --linie: rgba(180, 205, 224, 0.28);
  --flaeche: rgba(255, 255, 255, 0.05);

  --krill: #ff7a59;
  --krill-text: #1c0a05;
  --cyan: #6fe3ff;

  --feld: #f2f8fc;
  --feld-text: #06202b;

  --bg: #0e4a6e;

  --rund: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Nunito, "Segoe UI", system-ui, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg);
  background-image: radial-gradient(130% 55% at 50% -12%, rgba(111, 227, 255, 0.16), rgba(111, 227, 255, 0) 62%);
  background-attachment: fixed;
  color: var(--licht);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.55;
  transition: background-color 1.4s ease;
}

/* ---------- Stufenfarben (für Tiere, Chips und Punkte) ---------- */

.stufe-0 { --stufe: #8da3b3; }
.stufe-1 { --stufe: #cfe3ee; }
.stufe-2 { --stufe: #7fd6c4; }
.stufe-3 { --stufe: #5db7ff; }
.stufe-4 { --stufe: #b79bff; }
.stufe-5 { --stufe: #ffd166; }
.stufe-6 { --stufe: #ff7a59; }

/* ---------- Pixel-Szene im Hintergrund ---------- */

.szene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* dunkler Schleier hinter dem Text, damit er immer gut lesbar bleibt */
.schleier {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 42%, rgba(5, 10, 20, 0.52), rgba(5, 10, 20, 0.16) 70%, rgba(5, 10, 20, 0));
  transition: opacity 0.5s ease;
}

/* Beim Abtauchen tritt der Text zurück und die Szene hat die Bühne. */
.buehne, .pips, .fuss { transition: opacity 0.35s ease; }
body.taucht .buehne,
body.taucht .pips,
body.taucht .fuss { opacity: 0; }
body.taucht #inhalt { pointer-events: none; }
body.taucht .schleier { opacity: 0; }
.tiefe-anzeige { transition: transform 0.4s ease; transform-origin: right center; }
body.taucht .tiefe-anzeige { transform: scale(1.4); }

.tauch-hud {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(2.2rem, env(safe-area-inset-bottom));
  z-index: 2;
  margin: 0;
  text-align: center;
  font-family: var(--rund);
  font-weight: 800;
  font-size: clamp(1.4rem, 5vw, 2rem);
  letter-spacing: 0.02em;
  color: var(--licht);
  text-shadow: 0 2px 0 rgba(5, 10, 20, 0.8), 0 0 18px rgba(5, 10, 20, 0.9);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
body.taucht .tauch-hud { opacity: 1; }

/* ---------- Tiefenmesser (nur auf breiten Bildschirmen) ---------- */

.tiefenmesser {
  display: none;
  position: fixed;
  top: 6rem;
  bottom: 2rem;
  left: 1.2rem;
  width: 3.2rem;
  z-index: 1;
  pointer-events: none;
}
@media (min-width: 62rem) { .tiefenmesser { display: block; } }

.spur {
  position: relative;
  height: 100%;
  margin-left: 2.4rem;
  border-left: 2px solid var(--linie);
}
.strich {
  position: absolute;
  right: 100%;
  transform: translateY(-50%);
  padding-right: 0.45rem;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--licht-leise);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.strich::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 0.45rem;
  height: 1px;
  background: var(--linie);
}
.marke {
  position: absolute;
  left: -0.4rem;
  top: calc(var(--pos, 0) * 100%);
  width: 0.8rem;
  height: 0.8rem;
  margin-top: -0.4rem;
  border-radius: 50%;
  background: var(--krill);
  box-shadow: 0 0 0 4px rgba(255, 122, 89, 0.28), 0 0 18px rgba(255, 122, 89, 0.7);
  transition: top 1.1s cubic-bezier(0.3, 0.7, 0.2, 1);
}

/* ---------- Seite und Kopfleiste ---------- */

.seite {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin: 0 auto;
  padding: max(0.8rem, env(safe-area-inset-top)) 1.1rem 3rem;
}

.leiste {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.5rem 1.1rem;
}

.wortmarke {
  font-family: var(--rund);
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: 0.01em;
  color: var(--licht);
  text-decoration: none;
}

.tiefe-anzeige {
  margin: 0;
  font-family: var(--rund);
  font-weight: 700;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.menue-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--licht);
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 0.4rem 0.95rem 0.4rem 0.8rem;
  cursor: pointer;
}
.menue-icon,
.menue-icon::before,
.menue-icon::after {
  display: block;
  width: 1.05rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.menue-icon { position: relative; }
.menue-icon::before, .menue-icon::after { content: ""; position: absolute; left: 0; }
.menue-icon::before { top: -5px; }
.menue-icon::after { top: 5px; }

/* ---------- Fortschrittspunkte ---------- */

.pips {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin: 1.3rem 0 0;
  padding: 0;
}
.pips li {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  border: 2px solid var(--linie);
}
.pips li.fertig {
  background: var(--stufe);
  border-color: var(--stufe);
  box-shadow: 0 0 10px color-mix(in srgb, var(--stufe) 60%, transparent);
}
.pips li.jetzt { border-color: var(--licht); background: rgba(255, 255, 255, 0.22); }

/* ---------- Bühne: ein Gedanke pro Bildschirm ---------- */

.buehne {
  max-width: 34rem;
  margin: 1.6rem auto 0;
  text-align: center;
}
.buehne[hidden] { display: none; }

.buehne h2 {
  margin: 0 0 0.8rem;
  font-family: var(--rund);
  font-weight: 800;
  font-size: clamp(1.7rem, 6.2vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.buehne h2:focus { outline: none; }

.buehne p { margin: 0 0 0.9rem; }
.lead { font-size: 1.1rem; color: var(--licht-leise); }
.klein { font-size: 0.93rem; color: var(--licht-leise); }

.held {
  display: block;
  width: min(15rem, 62vw);
  aspect-ratio: 3 / 2;
  height: auto;
  margin: 0 auto 0.6rem;
  color: var(--stufe, var(--licht-leise));
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--stufe, #fff) 45%, transparent));
}
.held.treiben { animation: treiben 6s ease-in-out infinite; }
.held.einsinken { animation: einsinken 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }

@keyframes treiben {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes einsinken {
  from { transform: translateY(-34px) scale(0.88); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.meter-gross {
  font-family: var(--rund);
  font-weight: 800;
  font-size: clamp(3.4rem, 15vw, 5.6rem);
  line-height: 1;
  margin: 0.3rem 0 0.8rem;
  font-variant-numeric: tabular-nums;
}

.ehrentitel {
  font-family: var(--rund);
  font-weight: 700;
  font-size: 1.5rem;
}

/* ---------- Stufenchips und Stufenreihe ---------- */

.stufe {
  display: inline-block;
  margin: 0 0 0.3rem;
  padding: 0.22rem 0.9rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  color: #06121d;
  background: var(--stufe, #8da3b3);
}

.stufenreihe {
  list-style: none;
  margin: 1.4rem 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 0.6rem;
}
.stufenreihe li { color: var(--stufe); }
.stufenreihe svg { display: block; width: 100%; max-width: 5rem; height: auto; aspect-ratio: 3 / 2; margin: 0 auto 0.2rem; }
.stufen-name { display: block; color: var(--licht); font-size: 0.9rem; font-weight: 700; line-height: 1.25; }
.stufen-punkte { display: block; color: var(--licht-leise); font-size: 0.85rem; font-variant-numeric: tabular-nums; }

@media (min-width: 34rem) {
  .stufenreihe { grid-template-columns: repeat(6, 1fr); gap: 0.4rem; }
  .stufen-name { font-size: 0.78rem; }
  .stufen-punkte { font-size: 0.78rem; }
}

/* ---------- Frage ---------- */

.frage-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.frage-kopf p { margin: 0 0 0.5rem; color: var(--licht-leise); font-size: 0.95rem; }
.zeit-text { font-variant-numeric: tabular-nums; min-width: 3.2rem; text-align: right; }
.zeit-text.knapp { color: var(--krill); font-weight: 800; }

.zeitleiste {
  height: 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  margin-bottom: 1.6rem;
}
.zeitleiste i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  transform-origin: left center;
}
.zeitleiste.knapp i { background: var(--krill); box-shadow: 0 0 12px var(--krill); }

.buehne h2.frage { font-size: clamp(1.55rem, 6.4vw, 2.2rem); margin-bottom: 1.4rem; }

#eingabe {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1.25rem;
  text-align: center;
  color: var(--feld-text);
  background: var(--feld);
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 0.85rem 1.3rem;
}
#eingabe::placeholder { color: #55737f; }
#eingabe:disabled { opacity: 0.6; }

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 1rem 0 0.5rem;
}

.knopf {
  font: inherit;
  font-weight: 700;
  color: var(--krill-text);
  background: var(--krill);
  border: 2px solid var(--krill);
  border-radius: 999px;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
}
.knopf:hover { filter: brightness(1.07); }
.knopf:disabled { opacity: 0.55; cursor: default; }
.knopf[hidden] { display: none; }
.knopf.zweit { color: var(--licht); background: transparent; border-color: var(--linie); }

.fehler { color: #ffb4a3; min-height: 1.4em; margin: 0.4rem 0 0; font-size: 0.95rem; }
.hinweis { color: #9ff0d0; margin: 0 0 1rem; font-weight: 600; }

/* ---------- Ergebnisliste ---------- */

.ende { max-width: 36rem; }
.ergebnisliste {
  list-style: none;
  margin: 1.2rem 0;
  padding: 0;
  text-align: left;
  border-top: 1px solid var(--linie);
}
.ergebnisliste li {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: 0.15rem 0.8rem;
  align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--linie);
}
.ergebnisliste svg { width: 3.6rem; height: auto; aspect-ratio: 3 / 2; color: var(--stufe); }
.ergebnisliste .antwort { overflow-wrap: anywhere; }
.ergebnisliste .antwort strong { display: block; }
.ergebnisliste .antwort small { display: block; color: var(--licht-leise); font-size: 0.85rem; line-height: 1.35; }
.ergebnisliste .antwort .stufen-text { color: var(--stufe); font-weight: 700; font-size: 0.85rem; }

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

.menue {
  width: min(26rem, 100%);
  max-height: 100%;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  color: var(--licht);
  background: var(--abgrund);
  height: 100dvh;
  max-width: 100%;
}
.menue::backdrop { background: rgba(2, 6, 12, 0.72); }
.menue-innen { padding: max(1.2rem, env(safe-area-inset-top)) 1.4rem 1.6rem; }
.menue-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.menue-kopf h2 { margin: 0; font-family: var(--rund); font-weight: 800; font-size: 1.8rem; }
.menue-zu {
  font: inherit;
  color: var(--licht);
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
  cursor: pointer;
}
.menue-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.menue-liste li { border-bottom: 1px solid var(--linie); }
.menue-liste a,
.menue-liste button {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-family: var(--rund);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--licht);
  background: none;
  border: 0;
  padding: 0.95rem 0.2rem;
  text-decoration: none;
  cursor: pointer;
}
.menue-liste button[aria-pressed="true"] { color: var(--cyan); }
.menue-liste button[aria-pressed="true"]::after { content: "  aktiv"; font-weight: 400; font-size: 0.85rem; color: var(--licht-leise); }
.menue-liste form { margin: 0; }
.menue-fuss { margin-top: 1.4rem; font-size: 0.9rem; color: var(--licht-leise); }

/* ---------- Modus-Anzeige, Tastenkürzel ---------- */

.marke-box { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.modus-label { font-size: 0.82rem; color: var(--licht-leise); letter-spacing: 0.01em; }

.tasten-hinweis {
  max-width: 34rem;
  margin: 1.2rem auto 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--licht-leise);
  min-height: 1.3em;
}
@media (hover: none) and (pointer: coarse) { .tasten-hinweis { display: none; } }

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.08em 0.5em;
  font: inherit;
  font-size: 0.85em;
  font-weight: 700;
  text-align: center;
  color: var(--licht);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--linie);
  border-bottom-width: 2px;
  border-radius: 0.4em;
}
.menue-unter { margin: 1.6rem 0 0.6rem; font-family: var(--rund); font-weight: 700; font-size: 1.1rem; }
.tasten { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; margin: 0; font-size: 0.9rem; }
.tasten dt { white-space: nowrap; }
.tasten dd { margin: 0; color: var(--licht-leise); }

/* ---------- Fuß ---------- */

.fuss {
  max-width: 34rem;
  margin: 2.2rem auto 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--licht-leise);
}
.fuss p { margin: 0 0 0.5rem; }
.fuss a { color: inherit; }

/* ---------- Login, Konto, Verwaltung ---------- */

body.verwaltung { --bg: #07182e; background-color: #07182e; }

.seite.breit { max-width: 62rem; }

.seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  margin-bottom: 1.4rem;
}

.konto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.1rem;
  font-size: 0.93rem;
  color: var(--licht-leise);
}
.konto a, .textknopf { color: var(--licht); }
.konto form.inline, form.inline { display: inline; margin: 0; }
.textknopf { font: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

.seitentitel { margin: 0 0 0.9rem; font-family: var(--rund); font-weight: 800; font-size: 1.8rem; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 1.1rem;
  padding: 1.4rem 1.4rem 1.5rem;
  margin: 0 0 1rem;
}
.karte h2 { margin: 0 0 0.75rem; font-family: var(--rund); font-weight: 800; font-size: 1.6rem; line-height: 1.2; }
.karte h3 { font-family: var(--rund); font-weight: 700; font-size: 1.2rem; margin: 0 0 0.5rem; }
.karte p { margin: 0 0 0.8rem; max-width: 40rem; }
.karte.schmal { max-width: 28rem; margin-left: auto; margin-right: auto; }
.karte .logo { display: block; width: 7rem; aspect-ratio: 3 / 2; height: auto; margin: 0 0 0.6rem; color: var(--stufe); filter: drop-shadow(0 0 12px rgba(255, 122, 89, 0.5)); }

.formular { max-width: 36rem; }
.formular label:not(.schalter) { display: block; margin: 0.9rem 0 0.3rem; font-weight: 600; }
.formular input[type="text"],
.formular input[type="password"],
.formular input[type="number"],
.formular select,
.zeile-form input[type="password"] {
  display: block;
  width: 100%;
  font: inherit;
  color: var(--feld-text);
  background: var(--feld);
  border: 2px solid transparent;
  border-radius: 0.7rem;
  padding: 0.6rem 0.85rem;
}
.formular fieldset { border: 1px solid var(--linie); border-radius: 0.9rem; margin: 0 0 1.1rem; padding: 0.4rem 1rem 1rem; }
.formular legend { padding: 0 0.4rem; font-family: var(--rund); font-weight: 700; font-size: 1.1rem; }
.formular .zeile { display: grid; grid-template-columns: 1fr 7rem; align-items: center; gap: 0.6rem; }
.formular .zeile label { margin: 0.5rem 0 0 !important; }
.formular .zeile input { margin-top: 0.5rem; }
.schalter { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.7rem 0; font-weight: 400; }
.schalter input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; flex: none; }
.fehler ul { margin: 0.2rem 0 0.4rem; padding-left: 1.2rem; }

.reiter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.1rem; }
.reiter a { color: var(--licht); text-decoration: none; border: 1px solid var(--linie); border-radius: 999px; padding: 0.35rem 1rem; }
.reiter a[aria-current="page"] { background: var(--licht); color: var(--feld-text); border-color: var(--licht); }

.tabellen-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--linie); }
.tabelle thead th { font-weight: 600; color: var(--licht-leise); }
.tabelle tbody th { font-weight: 600; }

.zeile-form { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.4rem; }
.zeile-form input[type="password"] { width: 11rem; padding: 0.4rem 0.7rem; }
.aktionen { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.verwaltung .knopf.klein-knopf { font-size: 0.88rem; padding: 0.35rem 0.9rem; }
.verwaltung .knopfreihe { justify-content: flex-start; }
.knopf.gefahr { background: transparent; color: #ffb4a3; border-color: #ffb4a3; }

.daten { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.4rem; margin: 0 0 1.2rem; }
.daten dt { color: var(--licht-leise); }
.daten dd { margin: 0; }
.pruefliste { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.35rem; }
.pruefliste .ok, .pruefliste .warn {
  display: inline-block;
  min-width: 6.5rem;
  margin-right: 0.5rem;
  padding: 0.05rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #06121d;
  text-align: center;
}
.pruefliste .ok { background: #7fd6c4; }
.pruefliste .warn { background: #ffd166; }

/* ---------- Hilfsklassen und Fokus ---------- */

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

:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
#eingabe:focus-visible { outline-offset: 2px; }

@media (max-width: 30rem) {
  body { font-size: 1rem; }
  .karte { padding: 1.1rem 1.05rem 1.25rem; }
  .wortmarke { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  body, .marke { transition: none; }
  .held.treiben, .held.einsinken { animation: none; }
}

/* ---------- Katalog-Verwaltung ---------- */

a.knopf { display: inline-block; text-decoration: none; }

.formular textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--feld-text);
  background: var(--feld);
  border: 2px solid transparent;
  border-radius: 0.7rem;
  padding: 0.6rem 0.85rem;
  resize: vertical;
}
.formular input[type="file"] { color: var(--licht); }
.formular .zaehler { font-weight: 400; color: var(--licht-leise); }
.formular code, .karte code { background: rgba(255, 255, 255, 0.1); padding: 0.05em 0.4em; border-radius: 0.3em; }

.filter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.filter input[type="search"],
.filter select {
  font: inherit;
  color: var(--feld-text);
  background: var(--feld);
  border: 2px solid transparent;
  border-radius: 0.7rem;
  padding: 0.45rem 0.8rem;
}
.filter input[type="search"] { flex: 1 1 14rem; min-width: 0; }

.tabelle tr.aus th, .tabelle tr.aus td { opacity: 0.6; }
.tabelle th a { color: var(--licht); }
.zeile-form select {
  font: inherit;
  color: var(--feld-text);
  background: var(--feld);
  border: 2px solid transparent;
  border-radius: 0.6rem;
  padding: 0.3rem 0.5rem;
}

.seitenwahl { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; font-size: 0.95rem; }
.seitenwahl a { color: var(--licht); }

.code {
  margin: 0;
  padding: 0.8rem 1rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 0.7rem;
}

.formular .zeile.stufenzeile { grid-template-columns: 1fr 7rem; align-items: end; gap: 0.6rem; }
.formular .zeile.stufenzeile label { margin: 0.5rem 0 0.3rem !important; }
.formular .zeile.stufenzeile input { margin-top: 0; }