/* ==========================================================================
   JUPITER Designsprache — v1
   Eine Datei für alle JUPITER-Module. Referenzseite: /design
   Aufbau: 1 Tokens · 2 Basis · 3 Layout · 4 Komponenten · 5 Hilfsklassen
   Regel: Module verwenden NUR Tokens (var(--…)), keine eigenen Farbwerte.
   ========================================================================== */

/* 1 · Tokens ---------------------------------------------------------------- */
:root {
  /* Marke: Nachtblau (Ruhe, Verlässlichkeit) + Bernstein (Jupiter-Bänder, Akzent) */
  --j-nacht-900: #111a33;
  --j-nacht-800: #1b2750;
  --j-nacht-700: #243468;
  --j-nacht-600: #2f4383;
  --j-nacht-100: #e6eaf5;
  --j-nacht-50:  #f2f4fa;
  --j-bernstein-600: #c77d12;
  --j-bernstein-500: #e39a2d;
  --j-bernstein-100: #fcefd9;

  /* Neutral: warmes Steingrau statt kaltem Grau */
  --j-stein-900: #1e1f24;
  --j-stein-700: #43454d;
  --j-stein-500: #6b6e78;
  --j-stein-300: #c9cbd2;
  --j-stein-200: #e1e2e7;
  --j-stein-100: #eef0f3;
  --j-stein-50:  #f7f7f9;
  --j-weiss: #ffffff;

  /* Bedeutungsfarben (immer Paar: Hintergrund + Text, Kontrast ≥ 4.5:1) */
  --j-ok-bg: #dff3e4;      --j-ok-fg: #17663a;
  --j-warn-bg: #fdf0c8;    --j-warn-fg: #7a5600;
  --j-fehler-bg: #fbe0de;  --j-fehler-fg: #a3261d;
  --j-info-bg: #dcecfb;    --j-info-fg: #0d5a8c;
  --j-neutral-bg: var(--j-stein-100); --j-neutral-fg: var(--j-stein-700);

  /* Rollen (Module referenzieren diese, nicht die Palette) */
  --flaeche: var(--j-stein-50);
  --karte: var(--j-weiss);
  --text: var(--j-stein-900);
  --text-leise: var(--j-stein-500);
  --linie: var(--j-stein-200);
  --primaer: var(--j-nacht-700);
  --primaer-hover: var(--j-nacht-800);
  --akzent: var(--j-bernstein-500);
  --fokus: var(--j-bernstein-500);

  /* Typografie: Systemschrift, 4 Stufen */
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --schrift-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --gr-klein: .8125rem;  /* 13px: Hinweise, Etiketten */
  --gr-text:  .9375rem;  /* 15px: Fließtext, Felder */
  --gr-titel: 1.125rem;  /* 18px: Kachel-Überschriften */
  --gr-seite: 1.625rem;  /* 26px: Seitentitel */

  /* Abstände: 4er-Raster */
  --a1: .25rem; --a2: .5rem; --a3: .75rem; --a4: 1rem; --a5: 1.5rem; --a6: 2rem; --a8: 3rem;

  --rund-s: 6px; --rund-m: 10px; --rund-voll: 999px;
  --schatten: 0 1px 2px rgba(17, 26, 51, .06), 0 1px 1px rgba(17, 26, 51, .04);
  --breite-max: 72rem;
}

/* 2 · Basis ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--flaeche); color: var(--text); font: var(--gr-text)/1.5 var(--schrift); }
h1, h2, h3 { line-height: 1.25; margin: 0; }
a { color: var(--primaer); text-underline-offset: 2px; }
a:hover { color: var(--primaer-hover); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 3px; }
code { font-family: var(--schrift-mono); font-size: .9em; background: var(--j-stein-100); padding: 0 .3em; border-radius: 4px; }

/* 3 · Layout ---------------------------------------------------------------- */
.kopf { background: var(--j-nacht-800); color: var(--j-weiss); border-bottom: 3px solid var(--akzent); }
.kopf-innen { max-width: var(--breite-max); margin: 0 auto; padding: var(--a3) var(--a5);
              display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3) var(--a6); }
.kopf-marke { display: flex; align-items: center; gap: var(--a2); color: inherit; text-decoration: none; font-weight: 700; }
.kopf-marke:hover { color: inherit; }
.kopf-marke .logo { width: 28px; height: 28px; flex: none; }
.kopf-marke small { display: block; font-weight: 400; font-size: var(--gr-klein); opacity: .75; }
.navi { display: flex; flex-wrap: wrap; gap: var(--a1); flex: 1; }
.navi a { color: var(--j-nacht-100); text-decoration: none; padding: var(--a2) var(--a3); border-radius: var(--rund-s); }
.navi a:hover { background: var(--j-nacht-700); color: var(--j-weiss); }
.navi a[aria-current="page"] { background: var(--j-nacht-600); color: var(--j-weiss); box-shadow: inset 0 -2px 0 var(--akzent); }
.kopf-nutzer { font-size: var(--gr-klein); color: var(--j-nacht-100); display: flex; gap: var(--a3); align-items: center; }
.kopf-nutzer a { color: var(--j-weiss); }

.inhalt { max-width: var(--breite-max); margin: 0 auto; padding: var(--a5); }

/* Seitenkopf: Brotkrume · Titel (+Status) · Hauptaktion rechts */
.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--a3) var(--a4); margin-bottom: var(--a5); }
.seitenkopf h1 { font-size: var(--gr-seite); display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3); }
.seitenkopf .aktionen { margin-left: auto; display: flex; gap: var(--a2); }
.brotkrume { width: 100%; font-size: var(--gr-klein); color: var(--text-leise); }
.brotkrume a { color: var(--text-leise); }
.untertitel { width: 100%; color: var(--text-leise); margin: calc(-1 * var(--a2)) 0 0; }

.raster-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--a4); }

/* 4 · Komponenten ------------------------------------------------------------ */

/* Kachel: jeder inhaltliche Block */
.kachel { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-m);
          box-shadow: var(--schatten); padding: var(--a5); margin-bottom: var(--a4); }
.kachel-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a4); margin-bottom: var(--a4); }
.kachel-kopf h2 { font-size: var(--gr-titel); }
.kachel-kopf .aktionen { margin-left: auto; display: flex; gap: var(--a2); }
.kachel > h3, .abschnitt-titel { font-size: var(--gr-klein); text-transform: uppercase; letter-spacing: .06em;
          color: var(--text-leise); margin: var(--a5) 0 var(--a3); font-weight: 600; }
.kachel > h3:first-child { margin-top: 0; }

/* Knöpfe: primär (1 pro Bereich) · sekundär · still · gefahr */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--a2);
         min-height: 2.5rem; padding: 0 var(--a4); border-radius: var(--rund-s); border: 1px solid transparent;
         font: 600 var(--gr-text)/1 var(--schrift); text-decoration: none; cursor: pointer; white-space: nowrap;
         background: var(--primaer); color: var(--j-weiss); }
.knopf:hover { background: var(--primaer-hover); color: var(--j-weiss); }
.knopf-sekundaer { background: var(--karte); color: var(--primaer); border-color: var(--j-stein-300); }
.knopf-sekundaer:hover { background: var(--j-nacht-50); color: var(--primaer-hover); }
.knopf-still { background: transparent; color: var(--primaer); padding: 0 var(--a2); }
.knopf-still:hover { background: var(--j-nacht-50); color: var(--primaer-hover); }
.knopf-gefahr { background: var(--karte); color: var(--j-fehler-fg); border-color: #e7b3ae; }
.knopf-gefahr:hover { background: var(--j-fehler-bg); color: var(--j-fehler-fg); }
.knopf-klein { min-height: 2rem; padding: 0 var(--a3); font-size: var(--gr-klein); }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }

/* Formulare: Etikett über Feld, Hinweis darunter */
.felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--a4); }
.felder .breit { grid-column: 1 / -1; }
.feld { display: flex; flex-direction: column; gap: var(--a1); min-width: 0; }
.feld > span, .feld > legend { font-size: var(--gr-klein); font-weight: 600; color: var(--j-stein-700); padding: 0; }
.feld .pflicht::after { content: " *"; color: var(--j-fehler-fg); }
.feld small { font-size: var(--gr-klein); color: var(--text-leise); }
fieldset.feld { border: 0; margin: 0; padding: 0; }
.eingabe, input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search], select, textarea {
  width: 100%; min-height: 2.5rem; padding: var(--a2) var(--a3); border: 1px solid var(--j-stein-300);
  border-radius: var(--rund-s); background: var(--j-weiss); color: var(--text); font: inherit; }
input:hover, select:hover, textarea:hover { border-color: var(--j-stein-500); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--fokus); outline-offset: 0; border-color: var(--primaer); }
.feld-schmal input { max-width: 8rem; }
.formular-fuss { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; margin-top: var(--a5);
                 padding-top: var(--a4); border-top: 1px solid var(--linie); }
.formular-fuss .rechts { margin-left: auto; }

/* Auswahl-Kacheln für Checkbox/Radio-Gruppen */
.auswahl { display: flex; flex-wrap: wrap; gap: var(--a2); }
.auswahl label { display: inline-flex; align-items: center; gap: var(--a2); padding: var(--a2) var(--a3);
                 border: 1px solid var(--j-stein-300); border-radius: var(--rund-s); background: var(--j-weiss); cursor: pointer; }
.auswahl label:hover { border-color: var(--primaer); }
.auswahl label:has(input:checked) { border-color: var(--primaer); background: var(--j-nacht-50); font-weight: 600; }
.auswahl label:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.auswahl input { accent-color: var(--primaer); margin: 0; }

/* Anzeige (Lesemodus): Etikett/Wert-Paare */
.werte { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--a4) var(--a5); margin: 0; }
.werte div { min-width: 0; }
.werte dt { font-size: var(--gr-klein); color: var(--text-leise); margin-bottom: 2px; }
.werte dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.werte dd:empty::before, .leer { content: "—"; color: var(--j-stein-300); }

/* Marken: Status und Ampel — immer Text + Farbe, nie Farbe allein */
.marke { display: inline-flex; align-items: center; gap: .4em; padding: .15rem .6rem; border-radius: var(--rund-voll);
         font-size: var(--gr-klein); font-weight: 600; white-space: nowrap; line-height: 1.5; vertical-align: middle; }
.marke::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.marke-ok, .ampel-gueltig, .status-Aktiv { background: var(--j-ok-bg); color: var(--j-ok-fg); }
.marke-warn, .ampel-laeuft_bald_ab { background: var(--j-warn-bg); color: var(--j-warn-fg); }
.marke-fehler, .ampel-abgelaufen, .status-Inaktiv { background: var(--j-fehler-bg); color: var(--j-fehler-fg); }
.marke-info, .ampel-eingereicht { background: var(--j-info-bg); color: var(--j-info-fg); }
.marke-neutral, .ampel-fehlt { background: var(--j-neutral-bg); color: var(--j-neutral-fg); }
.marke-schlicht::before { display: none; }

/* Chips: verlinkte Personen/Objekte */
.chips { display: flex; flex-wrap: wrap; gap: var(--a2); }
.chip { display: inline-flex; align-items: center; gap: var(--a1); padding: var(--a1) var(--a3); border-radius: var(--rund-voll);
        background: var(--j-nacht-50); border: 1px solid var(--j-nacht-100); color: var(--primaer); text-decoration: none; font-size: var(--gr-klein); font-weight: 600; }
.chip:hover { background: var(--j-nacht-100); }
.chip small { font-weight: 400; color: var(--text-leise); }

/* Meldungen */
.meldung { display: flex; gap: var(--a3); align-items: flex-start; padding: var(--a3) var(--a4); border-radius: var(--rund-s);
           margin-bottom: var(--a4); border: 1px solid transparent; }
.meldung::before { font-weight: 700; }
.meldung-ok { background: var(--j-ok-bg); color: var(--j-ok-fg); border-color: #b7e2c3; }
.meldung-ok::before { content: "✓"; }
.meldung-fehler { background: var(--j-fehler-bg); color: var(--j-fehler-fg); border-color: #efbdb8; }
.meldung-fehler::before { content: "!"; }
.meldung-info { background: var(--j-info-bg); color: var(--j-info-fg); border-color: #b9d8f1; }
.meldung-info::before { content: "i"; font-style: italic; font-family: Georgia, serif; }

/* Filterleiste */
.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--a3); margin-bottom: var(--a4); }
.filter .feld { min-width: 10rem; }
.filter .feld-suche { flex: 1; min-width: 12rem; }

/* Tabellen: auf schmalen Bildschirmen automatisch Karten */
.tabelle-rahmen { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-m); box-shadow: var(--schatten); overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th { text-align: left; font-size: var(--gr-klein); font-weight: 600; color: var(--text-leise); background: var(--j-stein-50);
              padding: var(--a3) var(--a4); border-bottom: 1px solid var(--linie); white-space: nowrap; }
.tabelle td { padding: var(--a3) var(--a4); border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: var(--j-nacht-50); }
.tabelle .haupt a { font-weight: 600; text-decoration: none; }
.tabelle .haupt a:hover { text-decoration: underline; }
.tabelle-fuss { font-size: var(--gr-klein); color: var(--text-leise); margin-top: var(--a2); }

/* Leerzustand */
.leerzustand { text-align: center; padding: var(--a6) var(--a4); color: var(--text-leise); }
.leerzustand strong { display: block; color: var(--text); margin-bottom: var(--a1); }

/* Anmeldeseite */
.anmeldung { max-width: 26rem; margin: 10vh auto; text-align: center; }
.anmeldung .logo { width: 56px; height: 56px; margin-bottom: var(--a3); }

/* Designreferenz */
.farbfelder { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--a3); }
.farbfeld { border: 1px solid var(--linie); border-radius: var(--rund-s); overflow: hidden; font-size: var(--gr-klein); background: var(--karte); }
.farbfeld i { display: block; height: 3rem; }
.farbfeld span { display: block; padding: var(--a2); }
.farbfeld code { background: none; padding: 0; color: var(--text-leise); }

/* Dienstplan: Monatswahl, Kalender, Planungstabelle */
.monatswahl { display: flex; align-items: center; gap: var(--a3); margin-bottom: var(--a4); }
.kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--a2); margin-bottom: var(--a4); }
.kalender-kopf { font-size: var(--gr-klein); font-weight: 600; color: var(--text-leise); text-align: center; }
.kalender-tag { position: relative; display: flex; flex-direction: column; gap: var(--a1); min-width: 0; min-height: 4.5rem;
                padding: var(--a2); border: 1px solid var(--linie); border-radius: var(--rund-s); background: var(--karte);
                cursor: pointer; font-size: var(--gr-klein); }
.kalender-tag.wochenende { background: var(--j-stein-50); }
.kalender-tag:hover { border-color: var(--primaer); }
.kalender-tag input { position: absolute; opacity: 0; pointer-events: none; }
.kalender-tag:has(input:checked) { border-color: var(--primaer); background: var(--j-nacht-50); box-shadow: inset 0 0 0 1px var(--primaer); }
.kalender-tag:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
.kalender-tag .tag-nr { font-weight: 700; font-size: var(--gr-text); }
.kalender-tag small { color: var(--text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planung select { min-width: 10rem; }
.planung td .marke { margin-top: var(--a1); }
.planung tr.wochenende td { background: var(--j-stein-50); }
.liste { margin: 0; padding-left: var(--a5); }
.liste li { margin: var(--a1) 0; }
@media (max-width: 44rem) {
  .kalender { gap: var(--a1); }
  .kalender-tag { min-height: 3.5rem; padding: var(--a1); }
  .kalender-tag .marke { font-size: .6875rem; padding: 0 .3rem; }
  .kalender-tag small { display: none; }
}

/* 5 · Hilfsklassen ----------------------------------------------------------- */
.hinweis { font-size: var(--gr-klein); color: var(--text-leise); }
.versteckt, [hidden] { display: none !important; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zahl { font-variant-numeric: tabular-nums; }

@media (max-width: 44rem) {
  .inhalt { padding: var(--a4); }
  .kachel { padding: var(--a4); }
  .seitenkopf .aktionen { margin-left: 0; width: 100%; }
  .seitenkopf .aktionen .knopf { flex: 1; }
  .tabelle-rahmen { background: none; border: 0; box-shadow: none; }
  .tabelle thead { display: none; }
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
  .tabelle tr { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-m); margin-bottom: var(--a3); padding: var(--a2) 0; }
  .tabelle td { border: 0; padding: var(--a1) var(--a4); display: flex; justify-content: space-between; gap: var(--a3); }
  .tabelle td[data-label]::before { content: attr(data-label); font-size: var(--gr-klein); color: var(--text-leise); }
  .tabelle td.haupt { font-size: var(--gr-titel); }
  .tabelle td.haupt::before { display: none; }
}

@media print {
  .kopf, .aktionen, .formular-fuss, .filter { display: none !important; }
  .kachel, .tabelle-rahmen { box-shadow: none; }
}