:root {
  --schwarz: #03050a;
  --tief: #060a12;
  --panel: rgba(8, 16, 28, .66);
  --neon: #16d9ff;
  --neon2: #2f7bff;
  --neon-hauch: rgba(22, 217, 255, .14);
  --linie: rgba(22, 217, 255, .26);
  --text: #d9f6ff;
  --text2: #7fa3b5;
  /* Hinweis-Farbe bewusst Bernstein, nicht Gold - Akzent und Warnung
     duerfen nie verwechselt werden. */
  --gelb: #ff9f2e;
  --rot: #ff3b4e;
  /* Pfau (Dennis, 14:32: "ein bischen pfau dazu und ein wenig gold") -
     das Auge der Pfauenfeder: Saphir, Tuerkis, ein feiner Goldring. */
  --pfau: #0fd1b8;
  --gold: #d9b45a;
  --gold-hell: #f3d58a;
  --ring: var(--neon);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--schwarz); color: var(--text);
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif; }
body { overflow-x: hidden; }
canvas#netz { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.schleier { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, transparent 0 30%, rgba(3,5,10,.55) 70%, rgba(3,5,10,.92) 100%); }
.inhalt { position: relative; z-index: 2; }

/* Kopfzeile */
header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 24px;
  padding: 14px 28px; background: linear-gradient(to bottom, rgba(3,5,10,.92), rgba(3,5,10,.4));
  border-bottom: 1px solid rgba(22,217,255,.12); backdrop-filter: blur(6px); }
.marke { display: flex; flex-direction: column; line-height: 1; }
.marke b { font-weight: 600; letter-spacing: .42em; font-size: 15px; color: var(--text); }
.marke span { margin-top: 5px; font-size: 10px; letter-spacing: .3em; color: var(--gold); text-transform: uppercase; }
nav { display: flex; gap: 4px; margin: 0 auto; }
nav button { background: none; border: 1px solid transparent; color: var(--text2); font: inherit; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase; padding: 8px 14px; cursor: pointer; }
nav button:hover { color: var(--text); }
nav button.an { color: var(--neon); border-color: var(--linie); background: var(--neon-hauch); }
.status { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.status small { display: block; font-size: 10px; letter-spacing: .26em; color: var(--text2); text-transform: uppercase; }
.status strong { display: block; font-size: 12px; letter-spacing: .24em; color: var(--ring); text-transform: uppercase; }

/* Der Ring - leuchtet blau / gelb / rot */
.ring { --g: 34px; width: var(--g); height: var(--g); border-radius: 50%; position: relative; flex: none;
  background: conic-gradient(from 0deg, var(--ring), transparent 35%, var(--ring) 50%, transparent 85%, var(--ring));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: kreisen 3.2s linear infinite; filter: drop-shadow(0 0 6px var(--ring)); }
.ring.gross { --g: 64px; }
@keyframes kreisen { to { transform: rotate(360deg); } }

/* Ansichten */
.ansicht { display: none; padding: 26px 28px 60px; max-width: 1240px; margin: 0 auto; }
.ansicht.an { display: block; animation: auftauchen .5s ease; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Kern + Frage */
.kern-bereich { display: flex; flex-direction: column; align-items: center; padding: 28px 0 34px; text-align: center; }
/* Der Kern als Auge einer Pfauenfeder */
.kern { width: 150px; height: 150px; border-radius: 50%; position: relative; margin-bottom: 26px;
  background: radial-gradient(circle at 50% 50%, #f4ffff 0 5%, var(--neon) 11%, #0b3a8c 21%,
    rgba(15,209,184,.95) 29%, rgba(15,209,184,.32) 36%, rgba(217,180,90,.92) 40%,
    rgba(217,180,90,.16) 45%, rgba(47,123,255,.06) 57%, transparent 66%);
  animation: pochen 3.6s ease-in-out infinite; }
.kern::before, .kern::after { content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 1px solid var(--linie); animation: welle 3.6s ease-out infinite; }
.kern::before { border-color: rgba(217,180,90,.6); }
.kern::after { animation-delay: 1.8s; }
@keyframes pochen { 50% { transform: scale(1.06); filter: brightness(1.25); } }
@keyframes welle { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.65); opacity: 0; } }
.etikett { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--text2); }
h1 { margin: 10px 0 18px; font-weight: 300; font-size: clamp(24px, 4vw, 38px); letter-spacing: .06em; }
h1 em { font-style: normal; color: var(--neon);
  background: linear-gradient(90deg, var(--neon) 0%, var(--pfau) 55%, var(--gold-hell) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(15,209,184,.35)); }
.frage { position: relative; width: min(640px, 100%); }
.frage input { width: 100%; padding: 16px 20px 16px 48px; font: inherit; font-size: 17px; color: var(--text);
  background: rgba(6,12,22,.82); border: 1px solid var(--linie); outline: none; letter-spacing: .02em;
  box-shadow: 0 0 0 0 rgba(22,217,255,0); transition: box-shadow .25s, border-color .25s; }
.frage input:focus { border-color: var(--neon); box-shadow: 0 0 22px rgba(22,217,255,.28), inset 0 0 12px rgba(22,217,255,.08); }
.frage::before { content: ""; position: absolute; left: 18px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border: 2px solid var(--neon); border-radius: 50%; box-shadow: 0 0 8px var(--neon); }
.vorschlaege { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.chip { font: inherit; font-size: 12px; letter-spacing: .06em; color: var(--text2); background: rgba(8,16,28,.7);
  border: 1px solid rgba(22,217,255,.18); padding: 7px 12px; cursor: pointer; transition: all .2s; }
.chip:hover, .chip.an { color: var(--neon); border-color: var(--neon); box-shadow: 0 0 12px rgba(22,217,255,.25); }

/* Paneele mit Eck-Klammern */
.raster { display: grid; grid-template-columns: 1.25fr 1fr .9fr; gap: 18px; }
.panel { position: relative; background: var(--panel); border: 1px solid rgba(22,217,255,.12); padding: 18px 18px 16px;
  backdrop-filter: blur(5px); min-width: 0; }
.panel::before, .panel::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--neon);
  filter: drop-shadow(0 0 4px var(--neon)); }
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0;
  border-color: var(--gold); filter: drop-shadow(0 0 4px var(--gold)); }
.panel h2 { margin: 0 0 14px; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--neon); display: flex; justify-content: space-between; }
.panel h2 span { color: var(--text2); font-weight: 400; letter-spacing: .16em; }

.treffer { display: grid; gap: 10px; }
.karte { border-left: 2px solid transparent; border-image: linear-gradient(to bottom, var(--neon), var(--pfau), var(--gold)) 1;
  padding: 10px 12px; background: rgba(22,217,255,.05); animation: auftauchen .35s ease; }
.karte .kopf { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; letter-spacing: .14em; color: var(--text2); }
.karte p { margin: 6px 0 8px; line-height: 1.45; font-size: 14.5px; }
.balken { height: 3px; background: rgba(22,217,255,.12); }
.balken i { display: block; height: 100%; background: linear-gradient(90deg, var(--neon2), var(--neon) 45%, var(--pfau) 75%, var(--gold));
  box-shadow: 0 0 8px rgba(15,209,184,.6); }
.leer { color: var(--text2); font-size: 14px; line-height: 1.6; }

.zeitachse { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid var(--linie); max-height: 420px; overflow: auto; }
.zeitachse li { position: relative; padding: 6px 0 10px 12px; font-size: 13px; color: var(--text2); line-height: 1.4; transition: color .3s; }
.zeitachse li::before { content: ""; position: absolute; left: -21px; top: 11px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--tief); border: 1px solid var(--neon); }
.zeitachse li.hell { color: var(--text); }
.zeitachse li.hell::before { background: var(--gold-hell); border-color: var(--gold); box-shadow: 0 0 10px var(--gold); }
.zeitachse b { display: block; font-size: 10.5px; letter-spacing: .2em; color: var(--pfau); font-weight: 500; }

.netz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.netz-chips .chip b { color: var(--gold); font-weight: 500; margin-left: 6px; }
.werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.wert { border-top: 1px solid var(--linie); padding-top: 8px; }
.wert strong { display: block; font-size: 22px; font-weight: 300; color: var(--text); }
.wert small { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text2); }

.hinweis-demo { margin-top: 26px; text-align: center; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--text2); }
.hinweis-demo b { color: var(--gold); font-weight: 500; }

/* Uebersicht nach dem Login */
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kachel-zahl { font-size: 40px; font-weight: 200; margin: 6px 0 2px; }
.kachel-zahl.platz { color: rgba(217,246,255,.35); }
.zeile { display: flex; justify-content: space-between; font-size: 13px; color: var(--text2); padding: 7px 0;
  border-bottom: 1px solid rgba(22,217,255,.08); }
.zeile b { color: var(--text); font-weight: 400; }
.waechter { display: flex; align-items: center; gap: 18px; }

/* Anmeldung */
.anmeldung { display: grid; place-items: center; min-height: calc(100vh - 140px); }
.anmelde-panel { width: min(400px, 100%); text-align: center; padding: 34px 30px 28px; }
.anmelde-panel .ring { margin: 0 auto 18px; }
.anmelde-panel label { display: block; text-align: left; margin: 14px 0 6px; }
.anmelde-panel input { width: 100%; padding: 12px 14px; font: inherit; color: var(--text); background: rgba(6,12,22,.85);
  border: 1px solid var(--linie); outline: none; letter-spacing: .04em; }
.anmelde-panel input:focus { border-color: var(--neon); box-shadow: 0 0 16px rgba(22,217,255,.25); }
.knopf { margin-top: 22px; width: 100%; padding: 13px; font: inherit; font-size: 13px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--schwarz); background: linear-gradient(90deg, var(--neon), var(--pfau)); border: 0; cursor: pointer;
  box-shadow: 0 0 22px rgba(15,209,184,.42); transition: box-shadow .25s, filter .25s; }
.knopf:hover { filter: brightness(1.1); box-shadow: 0 0 26px rgba(217,180,90,.55); }
.klein { margin-top: 16px; font-size: 12px; color: var(--text2); }

@media (max-width: 900px) {
  header { flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; }
  nav { order: 3; width: 100%; justify-content: center; flex-wrap: wrap; }
  nav button { font-size: 11px; letter-spacing: .12em; padding: 7px 9px; }
  .ansicht { padding: 18px 16px 48px; }
  .raster, .kacheln { grid-template-columns: 1fr; }
  .kern { width: 112px; height: 112px; }
}
.standbild .ansicht.an, .standbild .karte { animation: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- App (16.10.2026): Links statt Reiter, Abmelden, Fehler, Zustaende --- */
a.marke { text-decoration: none; color: inherit; }
nav a { color: var(--text2); text-decoration: none; border: 1px solid transparent; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase; padding: 8px 14px; }
nav a:hover { color: var(--text); }
nav a.an { color: var(--neon); border-color: var(--linie); background: var(--neon-hauch); }
.status { cursor: default; }
.abmelden { margin: 0; }
.abmelden button { background: none; border: 1px solid rgba(217,180,90,.35); color: var(--gold); font: inherit;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 7px 12px; cursor: pointer; }
.abmelden button:hover { border-color: var(--gold); box-shadow: 0 0 12px rgba(217,180,90,.3); }
.fehler { margin-top: 14px; padding: 10px 12px; border-left: 2px solid var(--rot); background: rgba(255,59,78,.08);
  color: #ffd0d5; font-size: 13px; text-align: left; }
.zustand-hinweis { --ring: var(--gelb); }
.zustand-alarm { --ring: var(--rot); }
.gut { color: var(--neon) !important; }
.abstand { margin: 8px 0 18px; }
.zeilen { margin-top: 14px; }
@media (max-width: 900px) { nav a { font-size: 11px; letter-spacing: .12em; padding: 7px 9px; } }