/* Firmenportal Anton Nuding: dunkles Glas-Design. Alles lokal (CSP 'self'), keine Schriften von außen. */

/* Farben der Oberfläche: Vorgabe = Aurora. Jedes Thema überschreibt sie unten über body[data-hintergrund="…"].
   --pruef-hg ist der ungünstigste Hintergrund hinter Text (hellste Stelle bei dunklen, dunkelste bei hellen Themen);
   tests/test_hintergruende.py rechnet daran den Kontrast nach. */
:root {
  --grund: #070b16;
  --text: #e9eef7;
  --text-leise: #cdd6e8;
  --link: #8fe9dd;
  --haupt: #2dd4c0;
  --haupt2: #8b6cff;
  --fokus: #2dd4c0;
  --fokus-rgb: 45, 212, 192;
  --knopf-text: #06101c;
  --bernstein: #ffcf80;
  --rot: #ff9aa6;
  --gruen: #4ade9b;
  --glas-rgb: 6, 10, 22;
  --glas-a0: 0.30;
  --glas-a1: 0.46;
  --glas-a2: 0.30;
  --glas-a3: 0.46;
  --glas-stark: rgba(255, 255, 255, 0.12);
  --rand: rgba(255, 255, 255, 0.16);
  --rand-stark: rgba(255, 255, 255, 0.32);
  --linie-rgb: 255, 255, 255;
  --eingabe: rgba(5, 8, 18, 0.5);
  --eingabe-fokus: rgba(5, 8, 18, 0.7);
  --flaeche: #121a2b;
  --dicht-rgb: 22, 30, 52;
  --schatten: rgba(0, 0, 0, 0.7);
  --vignette: rgba(2, 4, 10, 0.7);
  --pruef-hg: #155777;
  --verlauf:
    radial-gradient(62% 52% at 20% 22%, rgba(32, 196, 184, 0.30), transparent 70%),
    radial-gradient(56% 56% at 80% 28%, rgba(120, 92, 255, 0.28), transparent 70%),
    radial-gradient(52% 46% at 55% 92%, rgba(245, 170, 80, 0.16), transparent 70%),
    linear-gradient(165deg, #0a1430 0%, #070b16 55%, #0e1118 100%);
  --radius: 22px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --schrift: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; background: var(--grund); }
body {
  --glas: rgba(var(--glas-rgb), var(--glas-a0));   /* hier statt in :root, damit die Themen --glas-rgb überschreiben können */
  --linie-fein: rgba(var(--linie-rgb), 0.08);
  margin: 0; min-height: 100vh; min-height: 100dvh;
  color: var(--text); background: transparent;
  font: 16px/1.55 var(--schrift); letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--link); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.4em; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 5.4vw, 2.9rem); font-weight: 650; }
h2 { font-size: 1.25rem; font-weight: 620; }
h3 { font-size: 1.05rem; font-weight: 620; }
p { margin: 0 0 0.8em; }
.leise { color: var(--text-leise); }
.klein { font-size: 0.9rem; }
.mitte { text-align: center; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: 8px; }

/* ---------- Hintergrund ---------- */
/* Ohne JavaScript (und unter dem Canvas) bleibt dieser Verlauf mit denselben Farben. */
.hintergrund {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: var(--verlauf);
}
.hg-canvas, .hg-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hg-video { object-fit: cover; }
.hg-abdunklung { position: absolute; inset: 0; background: rgba(5, 8, 16, 0.55); }
.hg-korn {
  position: absolute; inset: 0; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 38%, transparent 52%, var(--vignette) 100%);
}

/* ---------- Rahmen ---------- */
.huelle {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
           max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; max-width: 1080px; margin: 0 auto; }
.marke { display: inline-flex; align-items: center; gap: 12px; color: var(--text); }
.marke:hover { text-decoration: none; }
.logo { width: 44px; height: 44px; flex: none; filter: drop-shadow(0 6px 18px rgba(245, 178, 85, 0.25)); }
.marke-text { display: flex; flex-direction: column; line-height: 1.2; }
.marke-text strong { font-weight: 650; font-size: 1.05rem; }
.marke-text small { color: var(--text-leise); font-size: 0.8rem; letter-spacing: 0.04em; }
.konto-menue { display: flex; align-items: center; gap: 10px; }
.konto-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--glas); border: 1px solid var(--rand); color: var(--text); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: 38vw; }
.konto-chip:hover { text-decoration: none; background: var(--glas-stark); }
.konto-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; }
.inhalt { flex: 1; width: 100%; margin: 0 auto; padding: clamp(24px, 6vh, 64px) 0 32px; }
.seite-start .inhalt, .seite-breit .inhalt { max-width: 1080px; }
.seite-mittel .inhalt { max-width: 640px; }
.seite-text .inhalt { max-width: 780px; }
.seite-schmal .inhalt { max-width: 440px; display: flex; flex-direction: column; justify-content: center; }
.fuss-links { display: flex; justify-content: center; gap: 18px; margin-top: 6px; }
.fuss-links a { color: inherit; text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; }
.fuss-links a:hover { color: var(--text); }
.rechtstext h2 { font-size: 1.15rem; margin: 26px 0 8px; }
.rechtstext h3 { font-size: 1rem; margin: 18px 0 6px; }
.rechtstext p, .rechtstext li { line-height: 1.6; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 10px 0; }
.rechtstext th, .rechtstext td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--rand); }
.rechtstext .wichtig { border: 1px solid var(--rand); border-radius: 12px; padding: 12px 16px; margin: 14px 0; }
.fuss { text-align: center; color: var(--text-leise); font-size: 0.78rem; letter-spacing: 0.04em; padding-top: 8px; opacity: 0.8; }

/* ---------- Glas ---------- */
.glas {
  background: linear-gradient(145deg, rgba(var(--glas-rgb), var(--glas-a1)), rgba(var(--glas-rgb), var(--glas-a2)));
  border: 1px solid var(--rand);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 18px 40px -18px var(--schatten), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.karte { border-radius: var(--radius); padding: clamp(20px, 4vw, 32px); margin-bottom: 18px; }
.karte-kopf { text-align: center; margin-bottom: 18px; }
.plakette { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; margin-bottom: 12px; color: var(--knopf-text); background: linear-gradient(135deg, var(--haupt), var(--haupt2)); box-shadow: 0 10px 30px -8px var(--haupt); }
.plakette-warnung { background: linear-gradient(135deg, var(--bernstein), #ef7d57); box-shadow: 0 10px 30px -8px rgba(245, 178, 85, 0.5); }
.ico { width: 26px; height: 26px; }

/* ---------- Formulare ---------- */
.formular { display: flex; flex-direction: column; gap: 14px; }
.formular.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: end; gap: 14px; }
.feld { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: var(--text-leise); }
input[type="text"], input[type="email"], input[type="password"], input[type="month"], select {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 14px;
  background: var(--eingabe); color: var(--text); border: 1px solid var(--rand);
  font: inherit; font-size: 16px; /* 16px: iPhone zoomt sonst ins Feld */
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%239aa8c0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
select option { background: var(--flaeche); color: var(--text); }
input:focus, select:focus { outline: none; border-color: var(--fokus); box-shadow: 0 0 0 4px rgba(var(--fokus-rgb), 0.22); background: var(--eingabe-fokus); }
input[aria-invalid="true"] { border-color: var(--rot); }
input[readonly] { color: var(--text-leise); }
.feld-fehler { color: var(--rot); font-style: normal; font-size: 0.85rem; }
.haken { display: flex; align-items: center; gap: 10px; min-height: 48px; color: var(--text); cursor: pointer; }
.haken input { width: 22px; height: 22px; accent-color: var(--haupt); flex: none; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: 14px; border: 1px solid var(--rand); background: var(--glas); color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s, background 0.25s, border-color 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.knopf:hover { text-decoration: none; transform: translateY(-1px); background: var(--glas-stark); }
.knopf:active { transform: translateY(1px); }
.knopf-haupt { border-color: transparent; color: var(--knopf-text); background: linear-gradient(135deg, var(--haupt), var(--haupt2)); box-shadow: 0 12px 28px -10px var(--haupt); }
.knopf-haupt:hover { filter: brightness(1.1); box-shadow: 0 16px 34px -10px var(--haupt); }
.knopf-leise { min-height: 44px; padding: 0 16px; font-weight: 550; font-size: 0.92rem; }
.knopf-gefahr { min-height: 44px; padding: 0 16px; font-size: 0.92rem; color: var(--rot); border-color: rgba(255, 107, 125, 0.4); background: rgba(255, 107, 125, 0.1); }
.knopf-gefahr:hover { background: rgba(255, 107, 125, 0.2); }
.knopf-block { display: flex; width: 100%; }

/* ---------- Hinweise ---------- */
.hinweis { width: 100%; max-width: 1080px; margin: 14px auto 0; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--rand); background: var(--glas-stark); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: einblenden 0.6s var(--ease) backwards; }
.karte .hinweis { margin: 0 0 14px; }
.hinweis-ok { border-color: rgba(74, 222, 155, 0.5); background: rgba(74, 222, 155, 0.12); }
.hinweis-fehler { border-color: rgba(255, 107, 125, 0.55); background: rgba(255, 107, 125, 0.12); }
.hinweis-warnung { border-color: rgba(245, 178, 85, 0.55); background: rgba(245, 178, 85, 0.12); }
.hinweis-info { border-color: rgba(110, 168, 255, 0.5); background: rgba(110, 168, 255, 0.12); }

/* ---------- Startseite ---------- */
.begruessung { margin-bottom: clamp(22px, 5vh, 44px); }
.ueberschrift-klein { color: var(--bernstein); font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 10px; font-weight: 600; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.kachel {
  --akzent: var(--haupt); --akzent2: var(--haupt2);
  position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 190px; padding: 26px 24px;
  border-radius: var(--radius); color: var(--text); overflow: hidden;
  background: linear-gradient(145deg, rgba(var(--glas-rgb), var(--glas-a1)), rgba(var(--glas-rgb), var(--glas-a2)));
  border: 1px solid var(--rand);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 18px 40px -18px var(--schatten), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s;
  animation: einblenden 0.9s var(--ease) backwards;
  -webkit-tap-highlight-color: transparent;
}
.kachel:nth-child(1) { animation-delay: 0.10s; } .kachel:nth-child(2) { animation-delay: 0.20s; }
.kachel:nth-child(3) { animation-delay: 0.30s; } .kachel:nth-child(4) { animation-delay: 0.40s; }
.kachel:nth-child(5) { animation-delay: 0.50s; }
.kachel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--linie-rgb), 0.16), transparent 45%);
}
.kachel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; opacity: 0.7;
  background: linear-gradient(90deg, var(--akzent), var(--akzent2)); transform: scaleX(0.25); transform-origin: left; transition: transform 0.6s var(--ease);
}
.kachel:hover, .kachel:focus-visible { text-decoration: none; transform: translateY(-7px); border-color: var(--rand-stark); box-shadow: 0 30px 60px -22px var(--schatten), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.kachel:hover::before, .kachel:focus-visible::before { opacity: 1; }
.kachel:hover::after, .kachel:focus-visible::after { transform: scaleX(1); }
.kachel:active { transform: translateY(-2px) scale(0.99); }
.kachel-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; color: #06101c; background: linear-gradient(135deg, var(--akzent), var(--akzent2)); box-shadow: 0 12px 28px -10px var(--akzent); transition: transform 0.5s var(--ease); }
.kachel:hover .kachel-icon { transform: rotate(-6deg) scale(1.08); }
.kachel-icon .ico { width: 28px; height: 28px; }
.kachel-text { display: flex; flex-direction: column; gap: 4px; }
.kachel-text strong { font-size: 1.2rem; font-weight: 640; }
.kachel-text small { color: var(--text-leise); font-size: 0.92rem; line-height: 1.4; }
.kachel-pfeil { position: absolute; top: 22px; right: 22px; opacity: 0.35; transition: opacity 0.4s, transform 0.5s var(--ease); }
.kachel-pfeil .ico { width: 22px; height: 22px; }
.kachel:hover .kachel-pfeil { opacity: 0.9; transform: translate(3px, -3px); }
.marke-klein { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--bernstein); border: 1px solid rgba(245, 178, 85, 0.4); background: rgba(245, 178, 85, 0.1); }
.akzent-schluessel { --akzent: #2dd4c0; --akzent2: #4aa8ff; }
.akzent-vertrag { --akzent: #8b6cff; --akzent2: #4aa8ff; }
.akzent-rechnung { --akzent: #f5b255; --akzent2: #ef7d57; }
.akzent-unterschrift { --akzent: #ff7eb0; --akzent2: #8b6cff; }
.akzent-benutzer { --akzent: #7ee8a8; --akzent2: #2dd4c0; }
.akzent-einnahmen { --akzent: #ffc98a; --akzent2: #e88fb0; }

/* ---------- Verwaltung ---------- */
.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.seitentitel { margin-bottom: 6px; }
.konten { display: grid; gap: 16px; }
.konto-karte { margin-bottom: 0; }
.konto-karte.inaktiv { opacity: 0.7; }
.konto-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.konto-kopf h3 { margin: 0; overflow-wrap: anywhere; }
.konto-kopf p { margin: 0; overflow-wrap: anywhere; }
.status { padding: 4px 12px; border-radius: 999px; font-size: 0.78rem; white-space: nowrap; border: 1px solid var(--rand); }
.status-ok { color: var(--gruen); border-color: rgba(74, 222, 155, 0.4); background: rgba(74, 222, 155, 0.1); }
.status-offen { color: var(--bernstein); border-color: rgba(245, 178, 85, 0.4); background: rgba(245, 178, 85, 0.1); }
.status-aus { color: var(--text-leise); }
.aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.link-box { border-color: rgba(110, 168, 255, 0.5); }
.link-zeile { display: flex; gap: 10px; flex-wrap: wrap; }
.link-zeile input { flex: 1 1 240px; }
.protokoll { list-style: none; margin: 0 0 14px; padding: 0; }
.protokoll li { display: grid; grid-template-columns: 11.5em 12em 1fr; gap: 6px 14px; padding: 10px 0; border-bottom: 1px solid rgba(var(--linie-rgb), 0.08); font-size: 0.92rem; }
.protokoll .wer { color: var(--bernstein); overflow-wrap: anywhere; }
.protokoll time { color: var(--text-leise); }
.protokoll em { color: var(--text-leise); font-style: normal; }

/* ---------- Einnahmen ---------- */
/* Karten auf dieser Seite etwas dichter, damit Zahlen und Diagramme bei jedem Hintergrund ruhig lesbar sind. */
.seite-einnahmen .glas { background: linear-gradient(145deg, rgba(var(--dicht-rgb), 0.86), rgba(var(--dicht-rgb), 0.8)); }
.seite-einnahmen .karte h2 .leise { font-weight: 450; font-size: 0.95rem; margin-left: 0.3em; }
.seite-einnahmen .karte h3 { margin-top: 22px; }

.filterzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 14px 18px; border-radius: var(--radius); margin-bottom: 18px; }
.monatswahl { display: flex; align-items: center; gap: 10px; }
.monat-anzeige { display: flex; flex-direction: column; min-width: 9.5em; text-align: center; line-height: 1.25; }
.monat-anzeige strong { font-size: 1.2rem; }
.monat-anzeige small { color: var(--text-leise); font-size: 0.85rem; }
.knopf-rund { min-width: 48px; padding: 0; font-size: 1.6rem; line-height: 1; border-radius: 999px; }
.umschalter { display: inline-flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--eingabe); border: 1px solid var(--rand); }
.umschalter-umbruch { flex-wrap: wrap; }
.umschalter a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 12px; color: var(--text-leise); font-weight: 600; }
.umschalter a:hover { text-decoration: none; color: var(--text); background: var(--glas); }
.umschalter a[aria-current="true"] { color: #06101c; background: linear-gradient(135deg, #ffc98a, #f0a3bf); }

.zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.zahl { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: var(--radius); }
.zahl-titel { color: var(--text-leise); font-size: 0.95rem; }
.zahl-wert { font-size: clamp(1.7rem, 4vw, 2.2rem); font-weight: 650; line-height: 1.15; white-space: nowrap; }
.zahl-held { grid-column: 1 / -1; }
@media (min-width: 1040px) {
  .zahlen { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .zahl-held { grid-column: auto; }
}
.zahl-held .zahl-wert { font-size: clamp(2.6rem, 6vw, 3.3rem); }
.zahl-wert-klein { font-size: clamp(1.4rem, 3.4vw, 1.8rem); }
.zahl-sub { color: var(--text-leise); font-size: 0.9rem; }
.zahl-zeichen { font-size: 0.5em; margin-right: 0.35em; vertical-align: 0.3em; }
.zahl-gut { border-color: rgba(74, 222, 155, 0.45); }
.zahl-gut .zahl-zeichen { color: var(--gruen); }
.zahl-schlecht { border-color: rgba(255, 107, 125, 0.5); }
.zahl-schlecht .zahl-zeichen { color: var(--rot); }
.status-zeichen { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 999px; font-size: 0.7em; margin-right: 0.4em; vertical-align: 0.15em; color: #06101c; font-weight: 700; }
.status-gut { background: var(--gruen); }
.status-offen { background: var(--bernstein); }

.legende { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 4px 0 12px; padding: 0; font-size: 0.92rem; color: var(--text-leise); }
.legende li { display: inline-flex; align-items: center; gap: 8px; }
.legende svg { width: 28px; height: 12px; overflow: visible; }
.legende svg[viewBox="0 0 14 14"] { width: 14px; height: 14px; }
.diagramm { position: relative; margin: 0 -4px; }
.dg { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--schrift); }
.dg-schmal { display: none; }
.dg-text { fill: var(--text-leise); font-variant-numeric: tabular-nums; }
.dg-text-stark { fill: var(--text); font-weight: 650; }
.dg-text-jahr { opacity: 0.75; }
.dg-gitter { stroke: rgba(var(--linie-rgb), 0.07); stroke-width: 1; shape-rendering: crispEdges; }
.dg-null { stroke: rgba(var(--linie-rgb), 0.32); stroke-width: 1; shape-rendering: crispEdges; }
.dg-linie { fill: none; stroke: #3987e5; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.dg-linie-gebucht { stroke-dasharray: 7 6; }
.dg-flaeche { fill: rgba(57, 135, 229, 0.12); }
.dg-fix { stroke: #c98500; stroke-width: 2; }
.dg-heute { stroke: rgba(var(--linie-rgb), 0.35); stroke-width: 1; }
.dg-be-hilfe { stroke: rgba(var(--linie-rgb), 0.55); stroke-width: 1; stroke-dasharray: 2 3; }
.dg-punkt { fill: #3987e5; stroke: var(--flaeche); stroke-width: 2.5; }
.dg-plus { fill: #3987e5; }
.dg-minus { fill: #e66767; }
.dg-vorlaeufig { opacity: 0.5; }
.dg-auswahl { fill: rgba(var(--linie-rgb), 0.06); }
.dg-ziel { fill: transparent; cursor: crosshair; }
.dg-monate .dg-ziel { cursor: pointer; }
.dg-monate a:hover .dg-ziel { fill: rgba(var(--linie-rgb), 0.05); }
.dg-monate a:focus { outline: none; }
.dg-monate a:focus-visible .dg-ziel { stroke: var(--fokus); stroke-width: 2; }
.dg-kreuz { stroke: rgba(var(--linie-rgb), 0.45); stroke-width: 1; opacity: 0; pointer-events: none; }
.dg-kreuz.sichtbar { opacity: 1; }
.tooltip { position: fixed; z-index: 20; max-width: min(320px, 90vw); padding: 10px 14px; border-radius: 12px; background: var(--flaeche); border: 1px solid var(--rand); color: var(--text); font-size: 0.95rem; line-height: 1.4; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.8); pointer-events: none; }
.tooltip[hidden] { display: none; }

.tabelle-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.98rem; min-width: 460px; }
.tabelle th, .tabelle td { padding: 10px 12px; border-bottom: 1px solid rgba(var(--linie-rgb), 0.08); text-align: left; font-weight: 450; }
.tabelle thead th { color: var(--text-leise); font-size: 0.88rem; font-weight: 600; }
.tabelle .zahlspalte { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle .gewaehlt { color: var(--text); background: rgba(var(--linie-rgb), 0.04); }
.tabelle .summenzeile th, .tabelle .summenzeile td { font-weight: 650; border-top: 1px solid rgba(var(--linie-rgb), 0.22); }
.tabelle .nebenzeile th, .tabelle .nebenzeile td { color: var(--text-leise); font-size: 0.92rem; }
.wert-gut { color: var(--gruen); }
.wert-schlecht { color: var(--rot); }

.ausblick { list-style: none; margin: 0; padding: 0; }
/* Mieten der Vermietung: wann, was, Betrag */
.mieten { list-style: none; margin: 0; padding: 0; }
.mieten li { display: grid; grid-template-columns: minmax(14em, 1.3fr) 1.5fr auto; gap: 4px 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(var(--linie-rgb), 0.08); }
.miete-zeit { display: flex; flex-direction: column; gap: 2px; }
.miete-was .marke-klein { position: static; margin-left: 6px; }
.miete-betrag { text-align: right; font-weight: 600; white-space: nowrap; }
.umschalter a.reiter-abgesetzt { margin-left: 10px; }
.ausblick li { display: grid; grid-template-columns: 11em 1fr 1.5fr; gap: 4px 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(var(--linie-rgb), 0.08); }
.ausgaben-liste, .zuordnung { list-style: none; margin: 0 0 16px; padding: 0; }
.ausgabe { padding: 14px 0; border-bottom: 1px solid rgba(var(--linie-rgb), 0.08); }
.ausgabe-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 4px; }
.ausgabe-kopf strong { font-size: 1.05rem; }
.ausgabe .marke-klein { position: static; align-self: auto; }
.ausgabe-aendern, .neu-ausgabe { margin-top: 10px; }
.seite-einnahmen details > summary { list-style: none; cursor: pointer; }
.seite-einnahmen details > summary::-webkit-details-marker { display: none; }
.seite-einnahmen details[open] > summary { margin-bottom: 14px; }
.loeschen-zeile { margin-top: 12px; }
.zuordnung-zeile { display: grid; grid-template-columns: 1fr minmax(180px, 240px) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(var(--linie-rgb), 0.08); }
.probemail { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.stand { text-align: center; margin: 6px 0 0; }
.umfasst { margin: 0 4px 14px; }
.ust-liste { list-style: none; margin: 0 0 12px; padding: 0; }
.ust-liste > li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--linie-fein); }
.ust-zeitraum { display: flex; flex-direction: column; }
.ust-zeitraum strong { font-size: 1.05rem; }
.ust-betrag { font-size: 1.25rem; font-weight: 650; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.ust-teile { grid-column: 1 / -1; list-style: none; margin: 4px 0 0; padding: 0; }
.ust-teile li { display: block; padding: 1px 0; border: 0; }
.zur-seite-monat .ust-zeitraum strong { font-size: 1.2rem; }
.zur-seite-monat .ust-betrag { font-size: 1.7rem; }

@media (max-width: 640px) {
  .dg-breit { display: none; }
  .dg-schmal { display: block; }
  .zahlen { grid-template-columns: 1fr; }
  .zahl-wert { white-space: normal; }
  .filterzeile { padding: 12px; }
  .monatswahl { width: 100%; justify-content: space-between; }
  .monat-anzeige { flex: 1; min-width: 0; }
  .umschalter { width: 100%; }
  .umschalter a { flex: 1; justify-content: center; padding: 0 10px; }
  .ausblick li { grid-template-columns: 1fr; }
  .mieten li { grid-template-columns: 1fr; }
  .miete-betrag { text-align: left; }
  .umschalter a.reiter-abgesetzt { margin-left: 0; }
  .zuordnung-zeile { grid-template-columns: 1fr; }
}

/* ---------- Bewegung ---------- */
.einblenden { animation: einblenden 0.9s var(--ease) backwards; }
@keyframes einblenden {
  from { opacity: 0; transform: translateY(20px) scale(0.985); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

@media (max-width: 640px) {
  .kacheln { grid-template-columns: 1fr; gap: 14px; }
  .kachel { flex-direction: row; align-items: center; min-height: 0; padding: 18px; gap: 16px; }
  .kachel-pfeil { top: 16px; right: 16px; }
  .marke-klein { position: absolute; right: 14px; bottom: 12px; }
  .marke-text small { display: none; }
  .protokoll li { grid-template-columns: 1fr; gap: 2px; }
  .konto-chip { max-width: 34vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .hg-video { display: none; }
}

/* ---------- Hintergrund-Themen (Auswahl unter „Mein Konto“) ---------- */
/* Hilfsklasse: nur für Screenreader sichtbar */
.nur-leser { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hintergrund-link { text-align: center; margin: 22px 0 0; opacity: 0.85; }

/* Vorschau-Verläufe: zugleich der Ersatz ohne JavaScript hinter dem Canvas */
body[data-hintergrund="ozean"], .hg-vorschau[data-thema="ozean"] { --verlauf:
  radial-gradient(120% 38% at 30% 100%, rgba(40, 150, 180, 0.55), transparent 72%),
  radial-gradient(110% 34% at 75% 82%, rgba(30, 110, 160, 0.45), transparent 72%),
  linear-gradient(180deg, #06182a 0%, #0a3550 60%, #0c4a66 100%); }
body[data-hintergrund="wald"], .hg-vorschau[data-thema="wald"] { --verlauf:
  radial-gradient(60% 55% at 22% 25%, rgba(54, 160, 96, 0.40), transparent 72%),
  radial-gradient(55% 50% at 80% 70%, rgba(120, 170, 60, 0.28), transparent 72%),
  linear-gradient(165deg, #0a2418 0%, #07140f 70%); }
body[data-hintergrund="abendrot"], .hg-vorschau[data-thema="abendrot"] { --verlauf:
  radial-gradient(60% 55% at 15% 85%, rgba(230, 120, 60, 0.50), transparent 72%),
  radial-gradient(55% 55% at 55% 45%, rgba(214, 100, 140, 0.40), transparent 72%),
  linear-gradient(150deg, #2a1440 0%, #1a0f22 80%); }
body[data-hintergrund="graphit"], .hg-vorschau[data-thema="graphit"] { --verlauf:
  repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 26px),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 26px),
  linear-gradient(160deg, #1c1f23 0%, #101214 100%); }
body[data-hintergrund="messing"], .hg-vorschau[data-thema="messing"] { --verlauf:
  repeating-radial-gradient(ellipse at 30% 40%, transparent 0 14px, rgba(201, 162, 84, 0.30) 14px 15px),
  linear-gradient(160deg, #1d1810 0%, #14110a 100%); }
body[data-hintergrund="gletscher"], .hg-vorschau[data-thema="gletscher"] { --verlauf:
  radial-gradient(60% 50% at 25% 20%, rgba(255, 255, 255, 0.9), transparent 72%),
  radial-gradient(60% 55% at 80% 75%, rgba(150, 195, 230, 0.55), transparent 72%),
  linear-gradient(160deg, #f6fbff 0%, #d9eaf6 55%, #bcd7ec 100%); }
body[data-hintergrund="bordeaux"], .hg-vorschau[data-thema="bordeaux"] { --verlauf:
  linear-gradient(115deg, transparent 25%, rgba(190, 60, 90, 0.35) 45%, transparent 62%),
  linear-gradient(160deg, #3a0f1e 0%, #1a070e 85%); }
body[data-hintergrund="technik"], .hg-vorschau[data-thema="technik"] { --verlauf:
  radial-gradient(10px 3px at 62% 40%, rgba(120, 255, 240, 0.9), transparent 100%),
  repeating-linear-gradient(0deg, rgba(120, 230, 230, 0.07) 0 1px, transparent 1px 22px),
  repeating-linear-gradient(90deg, rgba(120, 230, 230, 0.07) 0 1px, transparent 1px 22px),
  linear-gradient(160deg, #0a2a30 0%, #061619 100%); }
body[data-hintergrund="sand"], .hg-vorschau[data-thema="sand"] { --verlauf:
  radial-gradient(55% 50% at 22% 28%, rgba(255, 250, 238, 0.85), transparent 72%),
  radial-gradient(60% 55% at 78% 75%, rgba(205, 160, 110, 0.45), transparent 72%),
  linear-gradient(160deg, #f7efe2 0%, #eadbc2 55%, #dcc7a3 100%); }
body[data-hintergrund="ente"], .hg-vorschau[data-thema="ente"] { --verlauf:
  radial-gradient(16% 26% at 66% 52%, #ffd23f 0 92%, transparent 100%),
  radial-gradient(10% 8% at 80% 56%, #f28a1c 0 92%, transparent 100%),
  radial-gradient(34% 18% at 24% 30%, rgba(255, 255, 255, 0.95), transparent 100%),
  linear-gradient(180deg, #8cc8f2 0%, #bfe2fa 62%, #e6f4fd 100%); }

/* Dunkle Themen: Farben der Oberfläche (der Rest kommt aus :root) */
body[data-hintergrund="ozean"] { --grund: #06182a; --link: #a5e0ff; --haupt: #38bdf8; --haupt2: #2dd4bf; --fokus: #38bdf8; --fokus-rgb: 56, 189, 248;
  --glas-rgb: 4, 16, 30; --flaeche: #0b2236; --dicht-rgb: 10, 32, 52; --pruef-hg: #165c78; }
body[data-hintergrund="wald"] { --grund: #07140f; --link: #b2f2c9; --haupt: #4ade80; --haupt2: #a3e635; --fokus: #4ade80; --fokus-rgb: 74, 222, 128;
  --glas-rgb: 4, 18, 12; --flaeche: #0c2218; --dicht-rgb: 12, 34, 24; --pruef-hg: #1c603e; }
body[data-hintergrund="abendrot"] { --grund: #1a0f22; --link: #ffd0b0; --haupt: #fb923c; --haupt2: #f472b6; --fokus: #fb923c; --fokus-rgb: 251, 146, 60;
  --glas-rgb: 22, 10, 28; --flaeche: #271530; --dicht-rgb: 36, 18, 44; --pruef-hg: #7e3e4c; }
body[data-hintergrund="graphit"] { --grund: #101214; --link: #dfe6ee; --haupt: #cbd5e1; --haupt2: #94a3b8; --fokus: #cbd5e1; --fokus-rgb: 203, 213, 225;
  --glas-rgb: 10, 12, 14; --flaeche: #1a1d21; --dicht-rgb: 24, 27, 31; --pruef-hg: #2c3034; }
body[data-hintergrund="messing"] { --grund: #14110a; --link: #f2d596; --haupt: #e0b25a; --haupt2: #c08a3a; --fokus: #e0b25a; --fokus-rgb: 224, 178, 90;
  --glas-rgb: 16, 12, 6; --flaeche: #231c10; --dicht-rgb: 36, 29, 16; --pruef-hg: #625030; }
body[data-hintergrund="bordeaux"] { --grund: #1a070e; --link: #ffc0d0; --haupt: #f0829b; --haupt2: #c75b8b; --fokus: #f0829b; --fokus-rgb: 240, 130, 155;
  --glas-rgb: 24, 5, 12; --flaeche: #2a0e18; --dicht-rgb: 42, 14, 24; --pruef-hg: #6e1e34; }
body[data-hintergrund="technik"] { --grund: #061619; --link: #9af2ea; --haupt: #22d3c5; --haupt2: #38bdf8; --fokus: #22d3c5; --fokus-rgb: 34, 211, 197;
  --glas-rgb: 4, 18, 20; --flaeche: #0a2226; --dicht-rgb: 8, 32, 36; --pruef-hg: #235f5d; }

/* Helle Themen: dunkle Schrift, helles Glas */
body[data-hintergrund="gletscher"], body[data-hintergrund="sand"], body[data-hintergrund="ente"] {
  color-scheme: light;
  --knopf-text: #ffffff; --bernstein: #5e3a00; --rot: #8f1912; --gruen: #085530;
  --glas-rgb: 255, 255, 255; --glas-a0: 0.50; --glas-a1: 0.68; --glas-a2: 0.48; --glas-a3: 0.78;
  --glas-stark: rgba(var(--linie-rgb), 0.09); --schatten: rgba(40, 60, 90, 0.28); --dicht-rgb: 255, 255, 255;
  --eingabe: rgba(255, 255, 255, 0.72); --eingabe-fokus: rgba(255, 255, 255, 0.96); --vignette: rgba(255, 255, 255, 0.3);
}
body[data-hintergrund="gletscher"] { --grund: #e4eef7; --text: #12202e; --text-leise: #2f4257; --link: #0a4a73; --haupt: #0b6e9a; --haupt2: #2c5fb3;
  --fokus: #0a4a73; --fokus-rgb: 10, 74, 115; --linie-rgb: 20, 40, 60; --rand: rgba(20, 40, 60, 0.2); --rand-stark: rgba(20, 40, 60, 0.4);
  --flaeche: #f7fbfe; --pruef-hg: #b2cde3; }
body[data-hintergrund="sand"] { --grund: #f1e7d6; --text: #2a2118; --text-leise: #45372a; --link: #7a3d0a; --haupt: #9a4a14; --haupt2: #a2561a;
  --fokus: #7a3d0a; --fokus-rgb: 122, 61, 10; --linie-rgb: 60, 40, 20; --rand: rgba(60, 40, 20, 0.22); --rand-stark: rgba(60, 40, 20, 0.42);
  --flaeche: #fbf6ec; --pruef-hg: #d6be98; }
body[data-hintergrund="ente"] { --grund: #cfe8fb; --text: #10202f; --text-leise: #2a3f55; --link: #0a4a73; --haupt: #0b6e9a; --haupt2: #2c5fb3;
  --fokus: #0a4a73; --fokus-rgb: 10, 74, 115; --linie-rgb: 20, 40, 60; --rand: rgba(20, 40, 60, 0.22); --rand-stark: rgba(20, 40, 60, 0.42);
  --flaeche: #f7fbfe; --pruef-hg: #96cbf0; }
:root:has(body[data-hintergrund="gletscher"], body[data-hintergrund="sand"], body[data-hintergrund="ente"]) { color-scheme: light; }
:root:has(body[data-hintergrund="gletscher"]) { background: #e4eef7; }
:root:has(body[data-hintergrund="sand"]) { background: #f1e7d6; }
:root:has(body[data-hintergrund="ente"]) { background: #cfe8fb; }
body[data-hintergrund="gletscher"] .logo rect, body[data-hintergrund="sand"] .logo rect, body[data-hintergrund="ente"] .logo rect { fill: rgba(20, 30, 45, 0.78); stroke: rgba(20, 30, 45, 0.9); }
body[data-hintergrund="gletscher"] .logo, body[data-hintergrund="sand"] .logo, body[data-hintergrund="ente"] .logo { filter: drop-shadow(0 4px 10px rgba(20, 30, 45, 0.25)); }

/* Auswahl unter „Mein Konto“ */
.hg-wahl { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.hg-kachel { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 10px; border-radius: 16px; border: 1px solid var(--rand); background: var(--glas); cursor: pointer; }
.hg-kachel:hover { background: var(--glas-stark); }
.hg-kachel input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hg-vorschau { display: block; height: 68px; border-radius: 10px; border: 1px solid var(--rand); background: var(--verlauf); }
.hg-kachel input:checked ~ .hg-vorschau { outline: 3px solid var(--fokus); outline-offset: 2px; }
.hg-kachel input:focus-visible ~ .hg-vorschau { outline: 3px dashed var(--fokus); outline-offset: 2px; }
.hg-name { font-weight: 620; font-size: 0.95rem; margin-top: 4px; }
.hg-text { color: var(--text-leise); font-size: 0.8rem; line-height: 1.35; }
.hg-aktuell { position: absolute; top: 14px; right: 14px; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 650; color: var(--knopf-text); background: var(--haupt); }

/* Ausgaben ohne festgelegten Mehrwertsteuersatz */
.marke-klein.marke-offen { color: var(--rot); border-color: currentColor; background: transparent; }
.hinweis-offen { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--rot); color: var(--text); }
.feld-offen select { outline: 2px solid var(--rot); outline-offset: 1px; }
.feld-hilfe { color: var(--text-leise); font-size: 0.8rem; line-height: 1.35; }
.nur-fest[hidden], .nur-minijob[hidden] { display: none; }