/* Grundgestaltung: Farben, Abstände und Schriften für Dashboard und Anmeldung.
   Ersetzt die Variablen, die vorher die Claude-Laufzeit bereitgestellt hat. */
:root {
  color-scheme: light dark;
  --font-anthropic-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-anthropic-serif: Georgia, "Times New Roman", serif;

  --color-bg: #f4f5f7;
  --color-panel: #ffffff;
  --color-fg: #1f2328;
  --color-fg-muted: #5f6670;
  --color-border-line: #dde1e6;
  --color-bad: #c0392b;
  --cds-chart-status-critical: #c0392b;

  --cds-font-size-caption: .8125rem;
  --cds-font-size-body: .9375rem;
  --cds-font-size-heading: 1.0625rem;
  --cds-font-size-title: 1.75rem;
  --cds-font-weight-medium: 600;
  --cds-gap-xs: .25rem;
  --cds-gap-sm: .5rem;
  --cds-gap-md: .875rem;
  --cds-gap-lg: 1.25rem;
  --cds-pad-xs: .3rem;
  --cds-pad-sm: .6rem;
  --cds-pad-md: .9rem;
  --cds-pad-lg: 1.1rem;
  --cds-radius: 8px;
  --cds-dur-slow: .3s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #15181c;
    --color-panel: #1e2227;
    --color-fg: #e6e8eb;
    --color-fg-muted: #9aa1aa;
    --color-border-line: #343a42;
    --color-bad: #ff7b6b;
    --cds-chart-status-critical: #e5533f;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-anthropic-sans);
  font-size: var(--cds-font-size-body);
  line-height: 1.45;
}
main { max-width: 96rem; margin: 0 auto; padding: var(--cds-gap-lg) 16px 3rem; }

/* Platzhalter, solange Zahlen laden */
.skel { color: transparent !important; position: relative; }
.skel::after {
  content: ""; position: absolute; inset: .15em 0; max-width: 12rem; border-radius: 4px;
  background: var(--color-border-line); animation: skel 1.2s ease-in-out infinite alternate;
}
@keyframes skel { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

/* Anmeldeseite */
.anmeldung { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.anmeldung form {
  width: 100%; max-width: 24rem; display: flex; flex-direction: column; gap: var(--cds-gap-md);
  background: var(--color-panel); border: 1px solid var(--color-border-line); border-top: 4px solid #4C68B1;
  border-radius: var(--cds-radius); padding: 1.5rem;
}
.anmeldung .logo { line-height: 0; margin-bottom: var(--cds-gap-sm); }
.anmeldung .logo img { height: auto; width: 100%; max-width: 18rem; }
.anmeldung h1 { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: 1.5rem; margin: 0; }
.anmeldung label { display: flex; flex-direction: column; gap: var(--cds-gap-xs); font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.anmeldung input {
  font: inherit; font-size: 1rem; color: var(--color-fg); background: var(--color-bg);
  border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: .6rem .7rem;
}
.anmeldung input:focus { outline: 2px solid #4C68B1; outline-offset: 1px; }
.anmeldung button {
  font: inherit; font-weight: var(--cds-font-weight-medium); cursor: pointer; padding: .65rem;
  border: 0; border-radius: var(--cds-radius); background: #4C68B1; color: #fff;
}
.anmeldung button:disabled { opacity: .6; cursor: progress; }
.anmeldung .meldung { margin: 0; min-height: 1.3em; font-size: var(--cds-font-size-caption); color: var(--color-bad); }
.anmeldung .hinweis { margin: 0; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.klein { display: block; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .92em; }
.meldung[data-art=erfolg] { color: var(--color-ok); }

/* Seiten Konto und Verwaltung */
:root { --g-blue: #4C68B1; --g-yellow: #FBBD1E; --color-ok: #2f8a63; }
@media (prefers-color-scheme: dark) { :root { --color-ok: #66BC99; } }
.seite { max-width: 64rem; }
.seite h1 { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); margin: var(--cds-gap-lg) 0 var(--cds-gap-md); }
.seite h2 { font-size: var(--cds-font-size-heading); margin: 0 0 var(--cds-gap-sm); padding-left: .6rem; border-left: 4px solid var(--g-blue); }
.kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cds-gap-md); padding-bottom: var(--cds-gap-md); border-bottom: 3px solid var(--g-blue); }
.kopf .logo { line-height: 0; }
.kopf .logo img { height: 2.6rem; width: auto; max-width: 100%; }
.kopf nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-gap-sm) var(--cds-gap-md); font-size: var(--cds-font-size-caption); }
.kopf nav a { color: var(--color-fg); text-decoration: none; padding: .2rem 0; border-bottom: 2px solid transparent; }
.kopf nav a:hover, .kopf nav a[aria-current=page] { border-bottom-color: var(--g-blue); }
.kopf .wer { color: var(--color-fg-muted); }
.karte { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-lg); margin-bottom: var(--cds-gap-lg); }
.hinweis { margin: 0 0 var(--cds-gap-md); font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); max-width: 48rem; }
.hinweis.warnung { color: var(--color-fg); background: color-mix(in srgb, var(--g-yellow) 20%, transparent); border-left: 4px solid var(--g-yellow); padding: var(--cds-pad-sm) var(--cds-pad-md); border-radius: 4px; }
.formular { display: flex; flex-direction: column; gap: var(--cds-gap-md); max-width: 34rem; }
.formular.zeile { flex-direction: row; flex-wrap: wrap; align-items: flex-end; max-width: none; }
.formular label { display: flex; flex-direction: column; gap: var(--cds-gap-xs); font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.formular.zeile label { flex: 1 1 12rem; max-width: 20rem; }
.formular input, .formular select, .liste select {
  font: inherit; font-size: 1rem; color: var(--color-fg); background: var(--color-bg);
  border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: .5rem .6rem;
}
.liste select { font-size: var(--cds-font-size-caption); padding: .25rem .4rem; }
.formular input:focus, .formular select:focus { outline: 2px solid var(--g-blue); outline-offset: 1px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: var(--cds-gap-sm); }
.knopf { font: inherit; font-weight: var(--cds-font-weight-medium); cursor: pointer; padding: .5rem .9rem; border: 1px solid var(--g-blue); border-radius: var(--cds-radius); background: var(--g-blue); color: #fff; }
.knopf.zweit { background: var(--color-panel); color: var(--color-fg); border-color: var(--color-border-line); }
.knopf.zweit:hover { border-color: var(--g-blue); }
.knopf.gefahr { background: var(--color-panel); color: var(--color-bad); border-color: var(--color-border-line); }
.knopf.gefahr:hover { border-color: var(--color-bad); }
.knopf:disabled { opacity: .6; cursor: progress; }
.klein-knopf { font-size: var(--cds-font-size-caption); font-weight: 400; padding: .25rem .55rem; }
.formular .meldung, .karte > .meldung { margin: var(--cds-gap-sm) 0 0; min-height: 1.3em; font-size: var(--cds-font-size-caption); color: var(--color-bad); }
.tabelle { overflow-x: auto; margin-top: var(--cds-gap-md); }
.liste { width: 100%; border-collapse: collapse; font-size: var(--cds-font-size-caption); }
.liste th.aktionen { display: table-cell; }
.liste th { text-align: left; color: var(--color-fg-muted); font-weight: var(--cds-font-weight-medium); padding: var(--cds-pad-xs) var(--cds-pad-sm); border-bottom: 2px solid var(--g-blue); white-space: nowrap; }
.liste td { padding: var(--cds-pad-sm); border-bottom: 1px solid var(--color-border-line); vertical-align: middle; }
.liste .aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-gap-xs); }
.link { color: var(--g-blue); text-decoration: none; }
.link:hover { text-decoration: underline; }
.liste .leer { color: var(--color-fg-muted); }
.marke { display: inline-block; padding: 0 .5em; border-radius: 999px; font-size: .92em; border: 1px solid var(--color-border-line); }
.marke.warnung { border-color: var(--g-yellow); background: color-mix(in srgb, var(--g-yellow) 22%, transparent); }
.einmal { margin-top: var(--cds-gap-md); padding: var(--cds-pad-md); border: 2px solid var(--g-blue); border-radius: var(--cds-radius); background: color-mix(in srgb, var(--g-blue) 8%, var(--color-panel)); }
.einmal p { margin: 0 0 var(--cds-gap-sm); }
.einmal-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-gap-sm); margin-bottom: var(--cds-gap-sm); }
.einmal code { font-size: 1.35rem; letter-spacing: .05em; padding: .2rem .5rem; background: var(--color-panel); border-radius: 4px; user-select: all; }
.status { display: grid; grid-template-columns: max-content 1fr; gap: var(--cds-gap-xs) var(--cds-gap-md); margin: 0 0 var(--cds-gap-md); font-size: var(--cds-font-size-caption); }
.status dt { color: var(--color-fg-muted); }
.status dd { margin: 0; }
.status dd[data-art=fehler] { color: var(--color-bad); }
.status dd[data-art=erfolg] { color: var(--color-ok); }
.anleitung { margin-top: var(--cds-gap-lg); font-size: var(--cds-font-size-caption); }
.anleitung summary { cursor: pointer; color: var(--g-blue); }
.anleitung ol { padding-left: 1.3rem; line-height: 1.7; }
.anleitung a { color: var(--g-blue); }
@media (max-width: 600px) {
  .liste thead { display: none; }
  .liste tr { display: block; padding: var(--cds-pad-sm) 0; border-bottom: 1px solid var(--color-border-line); }
  .liste td { display: block; border: 0; padding: .2rem 0; }
}

.neu-liste { margin: 0 0 var(--cds-gap-md); padding-left: 1.2rem; font-size: var(--cds-font-size-caption); line-height: 1.6; }
.neu-liste code { color: var(--color-fg-muted); }