/* Dunkel ab dem ersten Bild (Inline-Style wäre von der CSP blockiert). */
html { background: #06090F; }
/* Vollmondwerk – Konto und Sammlung.
   Gleiche Farben und Schriften wie die persönliche Seite (site/s/seite.css),
   aber ruhiger: ein stiller Himmel als Hintergrund, kein Sternen-Canvas.
   Der bleibt der Nacht auf /s/ vorbehalten. */

:root {
  --nacht: #06090F; --tiefe: #0E1626; --kreide: #EFE9DC; --silber: #B9C1CF; --mondlicht: #F4F1E6;
  --papier: #E6DECB; --tinte: #1A1A1C; --morgen: #23304A;
  --linie: rgba(239,233,220,0.14); --stumm: #6F7A90;
  --display: 'Instrument Serif', 'Cormorant Garamond', 'Georgia', serif;
  --body: 'Manrope', 'Helvetica Neue', 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', 'Menlo', monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --box: rgba(6, 9, 15, 0.58);
}

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: var(--nacht); color: var(--kreide);
  font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
/* Der stille Himmel: ein Verlauf als Grund, darüber die Sterne aus himmel.js. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 78% 8%, rgba(244,241,230,0.10) 0%, rgba(244,241,230,0) 60%),
    radial-gradient(ellipse at 50% 120%, #0f1a30 0%, #070d1c 45%, var(--nacht) 100%);
}
/* Das Canvas von himmel.js. Steht als erstes Kind im <body> und liegt damit über
   body::before, aber unter allem Inhalt (der hat z-index 1 und höher). */
.sternenhimmel {
  position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%;
  pointer-events: none; display: block;
}
h1, h2, h3 { margin: 0; font-weight: 400; font-family: var(--display); color: var(--mondlicht); }
h1 { font-size: clamp(38px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.01em; }
h2 { font-size: 28px; line-height: 1.15; }
h3 { font-size: 21px; line-height: 1.2; }
p { margin: 0; }
a { color: var(--silber); text-decoration: none; border-bottom: 1px solid var(--linie); }
@media (hover: hover) { a:hover { color: var(--mondlicht); border-color: var(--silber); } }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; }
.klein { font-size: 14px; color: var(--silber); }
.stumm { color: var(--stumm); }

/* ---------- Rahmen ---------- */
.rahmen { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: 0 24px 96px; }
.rahmen.weit { max-width: 1280px; }

.kopfzeile {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; max-width: 1040px; margin: 0 auto; padding: 26px 24px; border-bottom: 1px solid var(--linie);
}
.kopfzeile.weit { max-width: 1280px; }
/* Die Wortmarke: das SVG aus site/assets/ci/ mit dem großen Mond als „o“.
   Das <symbol id="vmw-wort"> steht am Anfang jeder Konto-Seite, die Farbe kommt
   über fill: currentColor – genau wie auf der Hauptseite. */
.vmw-symbole { position: absolute; width: 0; height: 0; overflow: hidden; }
.wortmarke { display: inline-flex; align-items: center; color: var(--kreide); border: none; transition: color 0.5s; }
@media (hover: hover) { .wortmarke:hover { color: var(--mondlicht); } }
.wm { display: block; width: 168px; height: 44px; fill: currentColor; }
.wm-karte { display: block; width: 104px; height: 27px; color: #4A4640; fill: currentColor; }
.kopf-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.kopf-nav a, .kopf-nav button {
  font-family: var(--body); font-size: 14px; color: var(--silber); background: none; border: none;
  border-bottom: 1px solid transparent; padding: 0 0 3px; cursor: pointer; letter-spacing: 0.01em;
}
@media (hover: hover) { .kopf-nav a:hover, .kopf-nav button:hover { color: var(--mondlicht); border-color: var(--silber); } }
.kopf-nav .aktiv { color: var(--mondlicht); border-color: var(--linie); }

.seitenkopf { padding: 56px 0 38px; max-width: 680px; }
.seitenkopf p { margin-top: 16px; color: var(--silber); font-size: 17px; }
.vorzeile { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stumm); margin-bottom: 18px; }

/* ---------- Flächen ---------- */
.flaeche {
  background: var(--box); border: 1px solid var(--linie); padding: 30px 32px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.flaeche + .flaeche { margin-top: 22px; }
.flaeche h2 { font-size: 24px; margin-bottom: 8px; }
.flaeche .einleitung { color: var(--silber); font-size: 15px; margin-bottom: 20px; max-width: 58ch; }
.trenner { height: 1px; background: var(--linie); border: none; margin: 34px 0; }

/* ---------- Formular ---------- */
.feld-gruppe { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; max-width: 420px; }
label { font-size: 14px; color: var(--silber); }
.feld {
  font-family: var(--body); font-size: 16px; color: var(--kreide);
  background: rgba(244,241,230,0.05); border: 1px solid var(--linie); padding: 12px 14px; width: 100%;
  transition: border-color 0.3s, background 0.3s;
}
.feld.mono { font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em; }
.feld:focus { outline: none; border-color: var(--silber); background: rgba(244,241,230,0.08); }
.feld::placeholder { color: var(--stumm); }
textarea.feld { resize: vertical; min-height: 84px; line-height: 1.5; }
select.feld { cursor: pointer; }

.kaestchen { display: flex; align-items: flex-start; gap: 12px; max-width: 520px; margin-bottom: 24px; font-size: 14px; color: var(--silber); cursor: pointer; }
.kaestchen input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--kreide); flex: 0 0 auto; cursor: pointer; }

.knopf {
  display: inline-block; font-family: var(--body); font-size: 15px; letter-spacing: 0.01em;
  background: var(--kreide); color: var(--nacht); border: 1px solid var(--kreide); padding: 13px 26px;
  cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s; text-align: center;
}
@media (hover: hover) { .knopf:hover { background: var(--mondlicht); border-color: var(--mondlicht); } }
.knopf[disabled] { opacity: 0.45; cursor: default; }
.knopf.still { background: none; color: var(--kreide); border-color: var(--linie); }
@media (hover: hover) { .knopf.still:hover { border-color: var(--silber); color: var(--mondlicht); } }
.knopf.warnung { background: none; color: #E4A79A; border-color: rgba(228,167,154,0.4); }
@media (hover: hover) { .knopf.warnung:hover { background: rgba(228,167,154,0.12); color: #F0BDB2; border-color: rgba(228,167,154,0.7); } }
.knopf.klein { font-size: 13px; padding: 8px 15px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.textknopf {
  font: inherit; font-size: 14px; color: var(--silber); background: none; border: none;
  border-bottom: 1px solid var(--linie); padding: 0 0 3px; cursor: pointer;
}
@media (hover: hover) { .textknopf:hover { color: var(--mondlicht); border-color: var(--silber); } }

/* ---------- Meldungen ---------- */
.meldung { border-left: 2px solid var(--silber); background: rgba(244,241,230,0.05); padding: 14px 18px; font-size: 15px; margin-bottom: 22px; }
.meldung.gut { border-color: #9FBF9A; }
.meldung.schlecht { border-color: #E4A79A; }
/* Leer bleibt die Meldung im Dokument (als Live-Region für Screenreader), nur ohne Platz und Rahmen. */
.meldung:empty { padding: 0; margin: 0; border: 0; background: none; }
.feld[aria-invalid="true"] { border-color: #E4A79A; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
.laedt { color: var(--stumm); font-size: 15px; padding: 30px 0; }

/* ---------- Die Karte (wie auf /s/, nur kleiner) ---------- */
.karte {
  position: relative; color: var(--tinte); padding: 30px 32px 22px; width: 100%; max-width: 520px;
  background-color: var(--papier);
  background-image:
    radial-gradient(ellipse at 18% 8%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(ellipse at 90% 100%, rgba(120,100,70,0.16) 0%, rgba(120,100,70,0) 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.30  0 0 0 0 0.22  0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
  box-shadow: 0 34px 80px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(21,26,36,0.08), inset 0 0 60px rgba(120,100,70,0.12);
}
.karte-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
.karte-marke { font-family: var(--display); font-size: 19px; color: #4A4640; }
.karte-nr { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: #4A4640; }
.karte-nr b { color: var(--tinte); font-weight: 500; }
.karte-titel { font-family: var(--display); font-size: 50px; line-height: 0.95; color: var(--tinte); margin: 0 0 6px; }
.karte-mineral { font-size: 14px; color: #5A554C; margin-bottom: 16px; }
.karte-satz { font-family: var(--display); font-size: 19px; line-height: 1.35; color: var(--tinte); margin-bottom: 20px; }
.karte-daten { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 20px; padding-top: 16px; border-top: 1px solid rgba(26,26,28,0.22); }
.karte-daten div { display: flex; flex-direction: column; gap: 2px; }
.karte-daten .breit { grid-column: 1 / -1; }
.karte-daten dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #6E685E; }
.karte-daten dd { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--tinte); }
.karte-fuss { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 12px; border-top: 1px solid rgba(26,26,28,0.22); color: #6E685E; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; }

/* ---------- Die Sammlung ---------- */
.nacht-gruppe { margin-top: 48px; }
.nacht-titel { display: flex; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--linie); margin-bottom: 26px; flex-wrap: wrap; }
.nacht-titel h2 { font-size: 26px; }
.nacht-titel .mono { color: var(--stumm); }

.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.raster.eins { grid-template-columns: minmax(0, 1fr); max-width: 560px; }

.kachel {
  display: block; background: var(--box); border: 1px solid var(--linie); padding: 22px;
  text-decoration: none; color: inherit; transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
a.kachel { border-bottom: 1px solid var(--linie); }
@media (hover: hover) { a.kachel:hover { border-color: rgba(239,233,220,0.4); transform: translateY(-3px); } }
.kachel-bild { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: rgba(244,241,230,0.04); margin-bottom: 18px; }
.kachel-art { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--mondlicht); margin-bottom: 8px; }
.kachel-zeile { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--silber); }
.kachel-fuer { font-size: 14px; color: var(--silber); margin-top: 10px; }
.marke-uebergabe {
  display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--nacht); background: var(--silber); padding: 4px 9px;
}

.leer-flaeche { padding: 90px 0 120px; max-width: 560px; }
.leer-flaeche p { color: var(--silber); font-size: 19px; line-height: 1.6; font-family: var(--display); }

/* Datenliste auf dunklem Grund (Sammlung, Stein-Seite) */
.daten-liste { margin: 22px 0 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.daten-liste div { display: flex; flex-direction: column; gap: 3px; }
.daten-liste dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stumm); }
.daten-liste dd { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--kreide); }

/* Die große Kachel, wenn nur ein Stück da ist */
.gross { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 46px; align-items: center; }
.gross img { width: 100%; height: auto; display: block; box-shadow: 0 28px 64px rgba(0,0,0,0.55); }

/* ---------- Stein-Seite ---------- */
.stein-oben { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 52px; align-items: start; padding-top: 12px; margin-bottom: 52px; }
.stein-links { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.stein-links .mehr { margin-top: 6px; }
.stein-bild { margin: 0; width: min(300px, 70vw); }
.stein-bild img { width: 100%; height: auto; display: block; box-shadow: 0 28px 64px rgba(0,0,0,0.6); }

.historie { list-style: none; margin: 0; padding: 0; }
.historie li { display: flex; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--linie); align-items: baseline; }
.historie li:last-child { border-bottom: none; }
.historie .zeit { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--stumm); flex: 0 0 108px; }
.historie .was { font-size: 15px; }

.link-kasten { display: flex; gap: 12px; align-items: stretch; margin: 18px 0 14px; flex-wrap: wrap; }
.link-kasten .feld { flex: 1 1 320px; min-width: 0; }

/* ---------- Player (gleiche Optik wie auf /s/) ---------- */
.player {
  width: 100%; max-width: 420px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 16px 18px 16px 14px; background: var(--box); border: 1px solid var(--linie);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); text-align: left;
}
.player-knopf { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(244,241,230,0.55); background: rgba(244,241,230,0.06); color: var(--mondlicht); cursor: pointer; display: grid; place-items: center; transition: background 0.3s, color 0.3s, transform 0.4s var(--ease); }
@media (hover: hover) { .player-knopf:hover { background: var(--mondlicht); color: var(--nacht); transform: scale(1.04); } }
.player-knopf.laeuft { background: var(--mondlicht); color: var(--nacht); }
.player-knopf[disabled] { opacity: 0.5; cursor: default; transform: none; }
.player-mitte { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.player-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.player-titel { font-family: var(--display); font-size: 20px; line-height: 1; color: var(--mondlicht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-zeit { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--silber); font-variant-numeric: tabular-nums; }
.player-track { height: 38px; cursor: pointer; }
.player-knopf:focus-visible { outline: 1px solid var(--mondlicht); outline-offset: 4px; }
.player-track:focus-visible { outline: 1px solid rgba(244,241,230,0.65); outline-offset: 5px; }
.welle { width: 100%; height: 100%; display: block; }
.mitlauf { min-height: 3em; max-width: 420px; font-family: var(--display); font-size: 21px; line-height: 1.35; color: var(--kreide); transition: opacity 0.6s; }
.mitlauf.leer { opacity: 0.75; font-family: var(--body); font-size: 15px; color: var(--silber); }
.vorlesetext { width: 100%; max-width: 420px; white-space: pre-line; text-align: left; border-top: 1px solid var(--linie); padding-top: 20px; color: var(--silber); font-size: 16px; }
.mehr { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }

/* ---------- Übergabe-Seite ---------- */
.uebergabe-mitte { max-width: 560px; margin: 0 auto; text-align: center; padding-top: 30px; }
.uebergabe-mitte .karte { margin: 0 auto 32px; text-align: left; }
.uebergabe-nachricht { font-family: var(--display); font-style: italic; font-size: 26px; line-height: 1.35; color: var(--mondlicht); margin: 26px 0; }
.uebergabe-mitte .knopfreihe { justify-content: center; }

/* ---------- Verwaltung ---------- */
.reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin-bottom: 30px; flex-wrap: wrap; }
.reiter button {
  font-family: var(--body); font-size: 14px; color: var(--silber); background: none; border: none;
  border-bottom: 2px solid transparent; padding: 12px 18px; cursor: pointer; margin-bottom: -1px;
}
@media (hover: hover) { .reiter button:hover { color: var(--mondlicht); } }
.reiter button.aktiv { color: var(--mondlicht); border-bottom-color: var(--kreide); }

.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; background: var(--linie); border: 1px solid var(--linie); margin-bottom: 34px; }
.zahl { background: var(--nacht); padding: 20px 22px; }
.zahl b { display: block; font-family: var(--display); font-size: 40px; line-height: 1; color: var(--mondlicht); font-weight: 400; }
.zahl span { display: block; margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stumm); }

.balken-zeile { display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px; gap: 16px; align-items: center; padding: 9px 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; }
.balken { height: 8px; background: rgba(244,241,230,0.10); position: relative; }
.balken i { position: absolute; inset: 0 auto 0 0; background: var(--silber); width: var(--anteil, 0%); }
.balken-zeile .rechts { text-align: right; color: var(--stumm); }

.tabelle-rahmen { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
th { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stumm); font-weight: 400; }
@media (hover: hover) { tbody tr:hover { background: rgba(244,241,230,0.03); } }
td.aktion { white-space: normal; }
.zeile-auf { background: rgba(244,241,230,0.04); }
.aufklapp td { padding: 20px 14px 26px; white-space: normal; }
.aufklapp .knopfreihe { margin-top: 16px; }
.aufklapp .feld { max-width: 320px; display: inline-block; margin-right: 10px; }
.status-frei { color: var(--silber); }
.status-in_sammlung { color: #9FBF9A; }
.status-gesperrt { color: #E4A79A; }
.filterzeile { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.filterzeile .feld { width: auto; min-width: 150px; }

/* ---------- Fuß ---------- */
.fuss { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 50px 24px 56px; color: var(--stumm); border-top: 1px solid var(--linie); margin-top: 60px; }
.fuss .mono { color: var(--stumm); }
.fuss a { color: var(--stumm); }

/* Das „o“ der Wortmarke als Mondsichel – wie auf der bestehenden Seite */
.o { display: inline-block; position: relative; width: 0.5em; height: 0.5em; margin: 0 0.02em; vertical-align: -0.02em; }
.o svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.o path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

@media (max-width: 900px) {
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .rahmen, .kopfzeile { padding-left: 18px; padding-right: 18px; }
  .raster { grid-template-columns: minmax(0, 1fr); }
  .gross, .stein-oben { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .stein-links { align-items: flex-start; text-align: left; }
  .mehr { justify-content: flex-start; }
  .flaeche { padding: 24px 20px; }
  .karte { padding: 24px 22px 18px; }
  .karte-titel { font-size: 40px; }
  .historie li { flex-direction: column; gap: 4px; }
  .historie .zeit { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  @media (hover: hover) { a.kachel:hover { transform: none; } }
}

/* QA 4.10.2026: Dekorative Lichtscheine (z. B. .sammlung-spalte::before) dürfen die Seite am Handy
   nicht breiter machen – sonst zoomt iOS die ganze Seite heraus. */
html { overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }

/* 5.10.2026: Die Links der Kopfzeile werden per Skript eingesetzt (je nach Anmeldung). Statt aufzuploppen
   blenden sie weich ein; die Zeile hat von Anfang an ihre Höhe, damit darunter nichts springt. */
.kopfzeile { min-height: 82px; }
.kopf-nav > * { animation: navAuf 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes navAuf { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kopf-nav > * { animation: none; } }

/* 16.10.2026: Rechtliche Links im Fuß (auf jeder Seite gleich, siehe konto/scripts/rechtsseiten-bauen.py). */
.fuss-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.fuss-links a, .fuss-links button { font: inherit; letter-spacing: inherit; color: var(--stumm); background: none; border: none; border-bottom: 1px solid var(--linie); padding: 0 0 1px; cursor: pointer; }
@media (hover: hover) { .fuss-links a:hover, .fuss-links button:hover { color: var(--silber); border-color: var(--silber); } }