/* HaushaltMGM — Knotenpunkt im Hologramm-Stil (01.11.2026).
   Die 60 Antworten dazu stehen in redesign-fragen.md (F1–F60). Nur die
   Stimmung ist geborgt: dunkler Sternenhimmel, Cyan-Linien, das Haus als
   Lichtzeichen in der Mitte, die Apps als leuchtende Kugeln auf einer Bahn.
   Die Apps selbst bleiben, wie sie sind — dieses Blatt gilt nur für den
   Knotenpunkt und die Anmeldung. */

:root {
  --grund: #02040a;
  --cyan: #49E3F0;
  --cyan-hell: #8EF3FF;
  --cyan-zart: rgba(73, 227, 240, .22);
  --text: #E3F9FC;
  --gedaempft: #9FD8E0;
  --leise: #5FB6C2;
  --warnung: #FF8A8A;
  --gut: #8EF3FF;

  /* Bahn, Kugeln und Mitte wachsen mit dem Schirm (F52): am Handy wie im
     Entwurf, am Tablet und Rechner eine größere Szene. */
  --r: clamp(108px, min(36vw, (100svh - 300px) * .42), 300px);
  --kugel: clamp(58px, calc(var(--r) * .5), 128px);
  --mitte: calc(var(--r) * .88);
  --r1: calc(var(--r) * .76);
  --r2: min(calc(var(--r) * 1.2), calc(50vw - 36px));
  --y: 47svh;
  --oben: env(safe-area-inset-top);
  --unten: env(safe-area-inset-bottom);
}

* { box-sizing: border-box; }
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

html, body { min-height: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(ellipse 75% 60% at 50% var(--y), #0b1d2e 0%, #050b16 55%, var(--grund) 100%) fixed, var(--grund);
  color: var(--text);
  font-family: Barlow, system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; }
:where(button, a, input):focus-visible { outline: 2px solid var(--cyan-hell); outline-offset: 4px; }

.chroma {
  text-shadow: -.7px 0 rgba(255, 70, 110, .55), .7px 0 rgba(70, 235, 255, .6), 0 0 14px rgba(73, 227, 240, .35);
}

.titelschrift {
  font-family: Rajdhani, sans-serif;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ── Sternenhimmel (F7, F12) ───────────────────────────────────────────── */

.sterne {
  position: fixed;
  inset: -40px;
  pointer-events: none;
  animation: drift 240s linear infinite alternate;
}
.stern {
  position: absolute;
  border-radius: 50%;
  background: #CFEFFF;
  animation: funkeln 6s ease-in-out infinite;
}
@keyframes drift { to { transform: translate(-30px, 18px); } }
@keyframes funkeln { 0%, 100% { opacity: .22; } 50% { opacity: .9; } }

.marke {
  position: fixed;
  top: calc(var(--oben) + 22px);
  left: 0;
  right: 0;
  text-align: center;
  font-family: Rajdhani, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .42em;
  color: #7FD9E3;
  pointer-events: none;
  z-index: 3;
}

/* ── Die Szene ─────────────────────────────────────────────────────────── */

.szene {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  transform-origin: 50% var(--y);
  transition: transform .55s cubic-bezier(.3, .7, .2, 1);
}
/* Unterkategorie gewählt (F33): der Ring rückt nach oben und wird halb so groß,
   das Panel steht darunter. */
.szene.klein {
  transform: translateY(calc(var(--oben) + 44px + var(--r2) * .5 - var(--y))) scale(.5);
}

.mittelpunkt {
  position: absolute;
  left: 50%;
  top: var(--y);
  width: 0;
  height: 0;
}

.messring {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.messring.aussen { width: calc(var(--r) * 2); height: calc(var(--r) * 2); border: 1px dashed rgba(73, 227, 240, .2); }
.messring.innen  { width: calc(var(--r) * 1.82); height: calc(var(--r) * 1.82); border: 1px solid rgba(73, 227, 240, .1); }

.teilchen {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cyan-hell);
  box-shadow: 0 0 6px var(--cyan);
  animation: schweben 9s ease-in-out infinite;
}
@keyframes schweben {
  0%, 100% { transform: translate(0, 0); opacity: .2; }
  50% { transform: translate(6px, -14px); opacity: .9; }
}

/* Die Mitte: das Haus, flach, mit Lichtkranz (F4, F20). */
.mitte {
  position: absolute;
  left: calc(var(--mitte) * -.5);
  top: calc(var(--mitte) * -.5);
  width: var(--mitte);
  height: var(--mitte);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  z-index: 6;
}
.mitte svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mitte .kranz  { animation: dreh 40s linear infinite; }
.mitte .kranz2 { animation: dreh 26s linear infinite reverse; }
.mitte .haus   { filter: drop-shadow(0 0 8px rgba(73, 227, 240, .75)) drop-shadow(-1px 0 0 rgba(255, 70, 110, .45)) drop-shadow(1px 0 0 rgba(70, 235, 255, .5)); }

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

/* ── Die Bahn mit den App-Kugeln (F9, F10, F24) ─────────────────────────── */

.bahn {
  position: absolute;
  left: 0;
  top: 0;
  animation: dreh 120s linear infinite;
  transition: opacity .35s;
}
.gegen { animation: dreh 120s linear infinite reverse; }
/* Wer den Finger an eine Kugel legt, hält die Bahn an (F9). */
.bahn:hover, .bahn:hover .gegen, .bahn.halt, .bahn.halt .gegen { animation-play-state: paused; }
.szene.ringmodus .bahn { opacity: 0; pointer-events: none; }

.platz {
  position: absolute;
  transform: rotate(var(--w)) translateX(var(--r)) rotate(calc(-1 * var(--w)));
}

.kugel {
  position: absolute;
  left: calc(var(--kugel) * -.5);
  top: calc(var(--kugel) * -.5);
  width: var(--kugel);
  height: var(--kugel);
  padding: 0;
  border: 1.5px solid var(--farbe);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .3), color-mix(in srgb, var(--farbe) 25%, transparent) 42%, rgba(3, 8, 16, .65) 74%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--farbe) 60%, transparent), inset 0 0 22px color-mix(in srgb, var(--farbe) 40%, transparent);
  cursor: pointer;
  pointer-events: auto;
  transition: transform .2s, opacity .4s, filter .4s;
}
.kugel:hover { transform: scale(1.07); }
.kugel > svg { width: 46%; height: 46%; border-radius: 22%; }
/* Nicht erreichbar: abgedunkelt (F15). */
.kugel.aus { opacity: .32; filter: grayscale(.85); }

.zahl {
  position: absolute;
  right: -3px;
  top: -3px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 11px;
  background: var(--cyan);
  color: #03121A;
  font: 700 12px/21px Rajdhani, sans-serif;
  text-align: center;
  box-shadow: 0 0 10px var(--cyan);
}
.zahl[hidden] { display: none; }

.etikett {
  position: absolute;
  left: -70px;
  top: calc(var(--kugel) * .5 + 7px);
  width: 140px;
  text-align: center;
  font-family: Rajdhani, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #CDF6FA;
  white-space: nowrap;
  pointer-events: none;
}
.etikett.aus { color: #6F8C94; }
.taste { display: none; margin-left: 6px; font-size: 10px; color: #4E8E99; letter-spacing: 0; }
@media (hover: hover) and (pointer: fine) { .taste { display: inline; } }

/* ── Hochfahren (F13, F16, F44, F57) ────────────────────────────────────── */

.hochfahren .mitte { animation: aufbau 1s cubic-bezier(.2, .8, .2, 1) both; }
.hochfahren .mitte .strich { stroke-dasharray: 200; animation: zeichnen 1.1s .15s ease-out both; }
.hochfahren .einflug { animation: einflug .7s cubic-bezier(.2, .9, .25, 1.1) both; animation-delay: calc(1s + var(--i) * .15s); }
@keyframes aufbau { from { opacity: 0; transform: scale(.6); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes zeichnen { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
@keyframes einflug { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }

.gruss {
  position: fixed;
  left: 24px;
  right: 24px;
  top: calc(var(--y) + var(--r) + var(--kugel) * .5 + 48px);
  z-index: 5;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
.gruss.zeigen { animation: gruss 2.6s ease both; }
@keyframes gruss { 0% { opacity: 0; transform: translateY(8px); } 18% { opacity: 1; transform: none; } 82% { opacity: 1; } 100% { opacity: 0; } }
.gruss h1 { margin: 0; font-family: Rajdhani, sans-serif; font-weight: 600; font-size: 26px; letter-spacing: .06em; }
.gruss p { margin: 6px 0 0; font-size: 14px; color: var(--gedaempft); }

/* ── App öffnen: die Kugel zieht ins Bild (F14) ─────────────────────────── */

.ziehen {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ziehen[hidden] { display: none; }
.ziehen .grosskugel {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), var(--farbe) 45%, transparent 72%);
  box-shadow: 0 0 60px var(--farbe);
  animation: ziehen .9s cubic-bezier(.6, 0, .2, 1) both;
}
@keyframes ziehen { 0% { transform: scale(.6); opacity: .4; } 60% { transform: scale(2.2); opacity: 1; } 100% { transform: scale(9); opacity: 0; } }
.ziehen .strahlen { position: absolute; left: 50%; top: 50%; }
.ziehen .strahl {
  position: absolute;
  left: 0;
  top: -1px;
  width: 60vmax;
  height: 2px;
  transform-origin: 0 50%;
  transform: rotate(var(--w));
  background: linear-gradient(90deg, rgba(142, 243, 255, .9), transparent);
  animation: strahl .9s ease-out both;
}
@keyframes strahl { from { opacity: 0; clip-path: inset(0 100% 0 0); } 40% { opacity: 1; } to { opacity: 0; clip-path: inset(0 0 0 0); } }

/* ── Ringmenü (F25, F29–F36) ────────────────────────────────────────────── */

.leer {
  position: fixed;
  inset: 0;
  z-index: 3;
  border: 0;
  background: transparent;
  cursor: default;
}
.leer[hidden] { display: none; }

.ring { position: absolute; left: 0; top: 0; }
.ring[hidden] { display: none; }
.ringlinie {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ringlinie.eins { width: calc(var(--r1) * 2); height: calc(var(--r1) * 2); border: 1px dashed rgba(73, 227, 240, .35); }
.ringlinie.zwei { width: calc(var(--r2) * 2); height: calc(var(--r2) * 2); border: 1px dotted rgba(73, 227, 240, .2); }

.knotenplatz { position: absolute; transform: rotate(var(--w)) translateX(var(--rr)) rotate(calc(-1 * var(--w))); }
.knotenplatz.eins { --rr: var(--r1); }
.knotenplatz.zwei { --rr: var(--r2); }

.knoten {
  position: absolute;
  left: -29px;
  top: -29px;
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 50%;
  border: 1.2px solid rgba(73, 227, 240, .65);
  background: rgba(6, 26, 36, .6);
  color: #BFF6FB;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  animation: einflug .45s cubic-bezier(.2, .9, .25, 1.1) both;
}
.knoten.an { background: rgba(73, 227, 240, .22); border-color: var(--cyan-hell); box-shadow: 0 0 18px rgba(73, 227, 240, .55); }
.knoten svg { width: 24px; height: 24px; }
.knoten.unter { left: -24px; top: -24px; width: 48px; height: 48px; border-style: dashed; }
.knotenname {
  position: absolute;
  left: -60px;
  top: 34px;
  width: 120px;
  text-align: center;
  font-family: Rajdhani, sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #CDF6FA;
  pointer-events: none;
}
.knotenplatz.zwei .knotenname { top: 28px; }
.untergruppe[hidden] { display: none; }

/* Das Panel in der Mitte (F30, F33). */
.panel-offen .marke { opacity: 0; }
.panel {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(520px, calc(100vw - 36px));
  top: calc(var(--oben) + 44px + var(--r2) + 26px);
  bottom: calc(18px + var(--unten));
  overflow-y: auto;
  z-index: 7;
  padding: 22px 22px 26px;
  border-radius: 18px;
  background: rgba(7, 22, 32, .7);
  border: 1px solid rgba(73, 227, 240, .42);
  box-shadow: 0 0 40px rgba(73, 227, 240, .12), inset 0 0 30px rgba(73, 227, 240, .05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: aufbau .45s cubic-bezier(.2, .8, .2, 1) both;
}
.panel[hidden] { display: none; }
.panel .ort { font-family: Rajdhani, sans-serif; font-size: 11px; letter-spacing: .3em; color: var(--leise); text-transform: uppercase; }
.panel h2 { margin: 0 0 6px; font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 22px; letter-spacing: .12em; text-transform: uppercase; }
.panel p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; color: #CBEFF4; }
.panel .lage.gut { color: var(--gut); }
.panel .lage.schlecht { color: var(--warnung); }
.panel .fussnote, .panel .ruhe { font-size: 13px; color: var(--gedaempft); }

.zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(73, 227, 240, .14);
  font-size: 14.5px;
}
.zeile.kopfzeile { color: var(--leise); font: 600 11.5px Rajdhani, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.zeile .klein { font-size: 12.5px; color: var(--gedaempft); }
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 10px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.punkt.halb { background: #F0B429; box-shadow: 0 0 8px #F0B429; }
.punkt.aus { background: #38505A; box-shadow: none; }
.punkt.rot { background: var(--warnung); box-shadow: 0 0 8px var(--warnung); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.knopf {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 1px solid var(--cyan-hell);
  background: rgba(73, 227, 240, .16);
  color: var(--text);
  font: 600 13px Rajdhani, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}
.knopf.leise { border-color: rgba(73, 227, 240, .4); background: transparent; }
.knopf:disabled { opacity: .45; cursor: default; }
.knopf[hidden] { display: none; }

.schalter {
  flex: none;
  width: 54px;
  height: 30px;
  padding: 0;
  border-radius: 15px;
  border: 1px solid rgba(73, 227, 240, .6);
  background: rgba(73, 227, 240, .1);
  position: relative;
  cursor: pointer;
}
.schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #7FA7B3; transition: left .2s, background .2s; }
.schalter[aria-pressed="true"] { background: rgba(73, 227, 240, .35); }
.schalter[aria-pressed="true"]::after { left: 27px; background: var(--text); box-shadow: 0 0 10px var(--cyan); }

/* Abmelden durch Gedrückthalten (F32). */
.halten {
  display: block;
  margin: 26px auto 8px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 1px solid rgba(255, 120, 120, .5);
  background: rgba(60, 10, 16, .35);
  color: #FFC9C9;
  font: 600 13px Rajdhani, sans-serif;
  letter-spacing: .2em;
  cursor: pointer;
  position: relative;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.halten svg { position: absolute; inset: -6px; width: 144px; height: 144px; transform: rotate(-90deg); pointer-events: none; }
.halten .fuell { stroke-dasharray: 440; stroke-dashoffset: 440; transition: stroke-dashoffset .25s; }
.halten.haelt .fuell { stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }

/* Meldungen: eine Zeile je Gerät mit Häkchen je App (aus der alten Tafel). */
.geraeteliste { list-style: none; margin: 14px 0 0; padding: 0; }
.geraeteliste li { padding: 12px 0; border-bottom: 1px solid rgba(73, 227, 240, .14); font-size: 13.5px; }
.geraet-kopf { display: flex; justify-content: space-between; gap: 10px; }
.geraet-kopf .wann { color: var(--gedaempft); white-space: nowrap; }
.geraet-warnung { margin-top: 6px; font-size: 12.5px; color: #F0B429; }
.haken { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.haken label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gedaempft); }
.haken input { accent-color: var(--cyan); width: 16px; height: 16px; }

/* ── Wer benutzt dieses Gerät: Teil des Hochfahrens (F26) ───────────────── */

.wer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 28px calc(64px + var(--unten));
  background: linear-gradient(180deg, transparent 35%, rgba(2, 6, 12, .9) 62%);
}
.wer[hidden] { display: none; }
.wer h2 { margin: 0 0 4px; font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .24em; }
.wer p { margin: 0 0 8px; color: var(--gedaempft); font-size: 14px; text-align: center; }
.wer-namen { width: min(420px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wer-name {
  padding: 14px 10px;
  border-radius: 12px;
  border: 1px solid rgba(73, 227, 240, .5);
  background: rgba(6, 26, 36, .65);
  color: var(--text);
  font: 600 16px Rajdhani, sans-serif;
  letter-spacing: .12em;
  cursor: pointer;
}
.wer-name.an { background: rgba(73, 227, 240, .3); border-color: var(--cyan-hell); }
.wer-zu { margin-top: 6px; background: none; border: 0; color: var(--gedaempft); font: 600 12px Rajdhani, sans-serif; letter-spacing: .24em; cursor: pointer; padding: 10px; }
.wer-zu[hidden] { display: none; }
.wer-fehler { color: var(--warnung) !important; }
.wer-fehler[hidden] { display: none; }

/* ── Hinweis unten (z. B. „nicht erreichbar") ───────────────────────────── */

.meldung {
  position: fixed;
  left: 50%;
  bottom: calc(40px + var(--unten));
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 48px));
  z-index: 60;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(40, 10, 16, .85);
  border: 1px solid rgba(255, 140, 140, .45);
  color: #FFD5D5;
  text-align: center;
  font-size: 14px;
}
.meldung[hidden] { display: none; }

/* ── Ladeschirm, falls eine App noch nicht vorgeladen ist ───────────────── */

.laden {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 44%, var(--verlauf, rgba(73, 227, 240, .2)), var(--grund) 64%);
  cursor: pointer;
}
.laden[hidden] { display: none; }
.laden .kranz { position: relative; width: 150px; height: 150px; }
.laden .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.laden .ring .bahn2 { stroke: rgba(73, 227, 240, .15); }
.laden .ring .zug { stroke: var(--ring, var(--cyan)); stroke-dasharray: 120 458; animation: kreisen 1.4s linear infinite; }
@keyframes kreisen { to { stroke-dashoffset: -578; } }
.laden .zeichen { position: absolute; inset: 40px; }
.laden .zeichen svg { display: block; width: 100%; height: 100%; }
.laden .titel { margin-top: 22px; font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 26px; letter-spacing: .14em; }
.laden .lage { font-size: 13px; color: var(--gedaempft); margin-top: 8px; }
.laden .lage.stockt { color: var(--warnung); }
.laden .abbruch { margin-top: 26px; font-size: 12px; color: var(--leise); }

/* ── Vollbild: die App im Rahmen (unverändert übernommen) ───────────────── */

.buehne {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--grund);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
.buehne[hidden] { display: none; }
.buehne iframe { width: 100%; height: 100%; border: none; display: none; }
.buehne iframe.vorn { display: block; }

/* ── Anmeldung (F50) ───────────────────────────────────────────────────── */

.anmeldung {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: calc(var(--oben) + 40px) 36px calc(var(--unten) + 36px);
}
.anmeldung .zeichenfeld { position: relative; width: 120px; height: 120px; }
.anmeldung .zeichenfeld svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.anmeldung .zeichenfeld .kranz { animation: dreh 40s linear infinite; }
.anmeldung .wortmarke { font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 26px; letter-spacing: .38em; margin-right: -.38em; }
.anmeldung .unterzeile { margin-top: -14px; font-size: 14px; color: var(--gedaempft); }
.anmeldung form { width: min(340px, 100%); display: flex; flex-direction: column; gap: 24px; }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld label { font-family: Rajdhani, sans-serif; font-weight: 600; font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: #7FD9E3; }
.feld input {
  height: 44px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid rgba(73, 227, 240, .5);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: 500 17px Barlow, sans-serif;
  outline: none;
}
.feld input:focus { border-bottom-color: var(--cyan-hell); box-shadow: 0 8px 14px -12px var(--cyan); }
.anmeldung button[type="submit"] {
  margin-top: 6px;
  height: 52px;
  border-radius: 26px;
  border: 1px solid var(--cyan-hell);
  background: rgba(73, 227, 240, .16);
  color: var(--text);
  font: 700 15px Rajdhani, sans-serif;
  letter-spacing: .3em;
  text-transform: uppercase;
  box-shadow: 0 0 22px rgba(73, 227, 240, .3);
  cursor: pointer;
}
.anmeldung .fehler { margin: -8px 0 0; color: var(--warnung); font-size: 14px; text-align: center; }
.anmeldung .fusszeile { margin: 0; max-width: 320px; text-align: center; font-size: 12.5px; color: var(--leise); }

.installieren {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 1px solid rgba(73, 227, 240, .35);
  background: transparent;
  color: #7FD9E3;
  font: 600 12px Rajdhani, sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: pointer;
}
.installieren[hidden] { display: none; }
.anleitung {
  max-width: 320px;
  margin: -8px 0 0;
  padding: 13px 15px;
  border-radius: 14px;
  background: rgba(7, 22, 32, .7);
  border: 1px solid rgba(73, 227, 240, .3);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--gedaempft);
  text-align: center;
}
.anleitung b { color: var(--text); font-weight: 600; }
.anleitung .pruefung { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(73, 227, 240, .2); font-size: 11.5px; color: var(--leise); text-align: left; }
.anleitung .pruefung b { color: var(--warnung); }
.hinweis { max-width: 320px; margin: 0; text-align: center; font-size: 12px; line-height: 1.55; color: var(--leise); }

/* Bewegung reduzieren: ein ruhiges Bild ohne Kreisen und Hochfahren (F43). */
@media (prefers-reduced-motion: reduce) {
  .sterne, .stern, .teilchen, .bahn, .gegen, .mitte .kranz, .mitte .kranz2,
  .anmeldung .zeichenfeld .kranz { animation: none !important; }
  .hochfahren .mitte, .hochfahren .mitte .strich, .hochfahren .einflug { animation: none !important; }
  .szene { transition: none; }
  .ziehen { display: none !important; }
}
.szene.klein .knotenplatz.eins .knotenname { opacity: 0; }

/* ── Wissen (F37–F41): kurz beschrieben, Formeln mittig mit Abstand ─────── */
.thema { padding: 6px 0 22px; border-bottom: 1px solid rgba(73, 227, 240, .14); }
.thema + .thema { padding-top: 18px; }
.thema:last-child { border-bottom: 0; }
.thema h3 { margin: 0; font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-hell); }

/* Was die Zeichen bedeuten: links das Zeichen, rechts die Bedeutung, die
   Einheit leise dahinter. Zwei Spalten statt drei - auf dem Handy bleibt so
   genug Breite für den Text. */
.zeichen { width: 100%; margin: 4px 0 18px; border-collapse: collapse; font-size: 13.5px; }
.zeichen caption { text-align: left; padding: 0 0 6px; font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); opacity: .85; }
.zeichen th, .zeichen td { padding: 7px 0; border-top: 1px solid rgba(73, 227, 240, .1); vertical-align: baseline; text-align: left; }
.zeichen th { padding-right: 14px; white-space: nowrap; font-weight: 400; color: var(--cyan-hell); width: 1%; }
.zeichen td { color: #CFE7EC; line-height: 1.4; }
.zeichen .einheit { margin-left: 8px; padding: 1px 7px; border-radius: 8px; background: rgba(73, 227, 240, .08); font-size: 12px; color: #9FD3DB; white-space: nowrap; }
.formel { margin: 20px 0; text-align: center; color: var(--cyan-hell); overflow-x: auto; overflow-y: hidden; }
.formel .katex-display { margin: 0; }
.formel .katex { font-size: 1.12em; }
.beispiel { margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: rgba(73, 227, 240, .07); border: 1px dashed rgba(73, 227, 240, .3); font-size: 13.5px; color: #BFE9EF; }
.beispiel p { margin: 0; font-size: 13.5px; }
.beispiel .formel { margin: 14px 0 4px; }
.beispiel .formel .katex { font-size: 1em; }
@media (max-width: 420px) {
  .formel .katex { font-size: 1em; }
  .beispiel .formel .katex { font-size: .9em; }
}

/* ── Meldungen: nur dieses Gerät (02.11.2026) ───────────────────────────── */
.karte { margin-top: 14px; padding: 4px 16px; border-radius: 14px; background: rgba(73, 227, 240, .06); border: 1px solid rgba(73, 227, 240, .2); }
.schalterzeile { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; }
.schalterzeile + .schalterzeile { border-top: 1px solid rgba(73, 227, 240, .12); }
.zweizeilig { display: flex; flex-direction: column; gap: 3px; }
.zweizeilig b { font-weight: 600; font-size: 15.5px; }
.zweizeilig small { font-size: 13px; color: var(--gedaempft); }
.zweizeilig small.gut { color: var(--gut); }
.zweizeilig small.schlecht { color: var(--warnung); }
.appname { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.appname svg { width: 28px; height: 28px; border-radius: 7px; flex: none; }
.schalter:disabled { opacity: .4; cursor: default; }
.hinweiskarte { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(240, 180, 41, .08); border: 1px solid rgba(240, 180, 41, .35); }
.hinweiskarte p { margin: 0; font-size: 13.5px; color: #F3DDA6; }
.hinweiskarte .knopf { margin-top: 12px; }
.hinweiskarte[hidden], #melden-details[hidden], .fussnote[hidden] { display: none; }
.feldzeile { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; }
.feldzeile span, .untertitel { font-family: Rajdhani, sans-serif; font-weight: 600; font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; color: #7FD9E3; }
.untertitel { margin-top: 22px; }
.feldzeile input { height: 44px; padding: 0 4px; border: 0; border-bottom: 1px solid rgba(73, 227, 240, .5); border-radius: 0; background: transparent; color: var(--text); font: 500 16px Barlow, sans-serif; outline: none; }
.feldzeile input:focus { border-bottom-color: var(--cyan-hell); }