/* Medialive CMS – Design-System (mobil zuerst).
   Farben: Petrol #14434C, Honig #E9B44C, Seegrün #8CB3B0, Bernstein #9A6B0F, Sand #F2EFE6.
   Keine Inline-Styles (CSP style-src 'self'): Zustände nur über Klassen und Attribute.
   Seiteneigene Stylesheets in static/css/ über den Block "css" in base.html. */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  --petrol: #14434C;
  --petrol-tief: #0E3138;
  --honig: #E9B44C;
  --seegruen: #8CB3B0;
  --bernstein: #9A6B0F;
  --sand: #F2EFE6;
  --rot: #A8321F;
  --gruen: #2F6B3F;

  --bg: var(--sand);
  --flaeche: #FFFFFF;
  --flaeche-2: #E9E4D7;
  --text: #182A2E;
  --text-leise: #4C5D61;
  --rand: #D3CCBB;
  --link: var(--petrol);
  --primaer: var(--petrol);
  --primaer-hover: var(--petrol-tief);
  --primaer-text: #FFFFFF;
  --akzent: var(--honig);
  --akzent-text: #14434C;
  --gefahr: var(--rot);
  --gefahr-text: #FFFFFF;
  --fokus: var(--petrol);   /* hell: Petrol auf Sand/Weiß ≥ 9:1 (Honig wäre nur 1.65–1.89:1) */
  --kopf-bg: var(--petrol);
  --kopf-text: #F2EFE6;

  --ok-bg: #E3EFE5;     --ok-text: #1F4D2B;     --ok-rand: #9CC3A5;
  --fehler-bg: #F7E3DF; --fehler-text: #7A2416; --fehler-rand: #E0A496;
  --warn-bg: #FBEFD3;   --warn-text: #6B4A08;   --warn-rand: #E9B44C;
  --info-bg: #E2EEED;   --info-text: #14434C;   --info-rand: #8CB3B0;

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --groesse: 1rem;
  --klein: 0.875rem;
  --zeile: 1.5;

  --radius: 12px;
  --radius-klein: 8px;
  --abstand: 16px;
  --abstand-klein: 8px;
  --abstand-gross: 24px;
  --touch: 44px;
  --schatten: 0 1px 2px rgba(20, 67, 76, 0.08), 0 2px 8px rgba(20, 67, 76, 0.06);
  --breite: 1100px;

  --safe-oben: env(safe-area-inset-top, 0px);
  --safe-rechts: env(safe-area-inset-right, 0px);
  --safe-unten: env(safe-area-inset-bottom, 0px);
  --safe-links: env(safe-area-inset-left, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B2125;
    --flaeche: #12323A;
    --flaeche-2: #1A3F47;
    --text: #EEF1EC;
    --text-leise: #A9BDBB;
    --rand: #2B5059;
    --link: #A9D0CC;
    --primaer: var(--seegruen);
    --primaer-hover: #A6C8C5;
    --primaer-text: #0B2125;
    --gefahr: #E07A64;
    --gefahr-text: #1A0703;
    --kopf-bg: #0E2A30;
    --kopf-text: #F2EFE6;
    --fokus: var(--honig);
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.4);

    --ok-bg: #173A22;     --ok-text: #BFE3C7;     --ok-rand: #2F6B3F;
    --fehler-bg: #44190F; --fehler-text: #F6C3B7; --fehler-rand: #A8321F;
    --warn-bg: #3D2E0A;   --warn-text: #F4D78F;   --warn-rand: #9A6B0F;
    --info-bg: #15343A;   --info-text: #CFE3E1;   --info-rand: #3E6E73;
  }
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--groesse);
  line-height: var(--zeile);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 var(--abstand-klein); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
p, ul, ol, dl { margin: 0 0 var(--abstand); }
img, video, svg { max-width: 100%; height: auto; }
img, video { display: block; }

a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

code, kbd, pre, .mono { font-family: var(--schrift-mono); font-size: 0.9375em; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }

hr { border: 0; border-top: 1px solid var(--rand); margin: var(--abstand-gross) 0; }

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

.unsichtbar {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.sprung {
  position: absolute;
  left: calc(var(--abstand) + var(--safe-links));
  top: -100px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--flaeche);
  color: var(--text);
  border-radius: var(--radius-klein);
}
.sprung:focus { top: calc(var(--abstand-klein) + var(--safe-oben)); }

.leise, .meta { color: var(--text-leise); font-size: var(--klein); }
.stapel > * + * { margin-top: var(--abstand); }
.zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-klein); }
.zeile--zwischen { justify-content: space-between; }

/* ---------- Seite ---------- */
.seite {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--abstand)
           calc(var(--abstand) + var(--safe-rechts))
           calc(var(--abstand-gross) + var(--safe-unten))
           calc(var(--abstand) + var(--safe-links));
}

.seite__kopf { margin-bottom: var(--abstand); }
.seite__kopf h1 { margin-bottom: 4px; }

/* ---------- Kopf ---------- */
.kopf {
  --fokus: var(--honig);   /* auf Petrol gut sichtbar */
  background: var(--kopf-bg);
  color: var(--kopf-text);
  padding: calc(var(--abstand-klein) + var(--safe-oben))
           calc(var(--abstand) + var(--safe-rechts))
           var(--abstand-klein)
           calc(var(--abstand) + var(--safe-links));
}

.kopf__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-klein);
  max-width: var(--breite);
  margin: 0 auto;
  min-height: var(--touch);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--touch);
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.marke__zeichen {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--honig);
  color: var(--petrol);
  font-weight: 800;
}

.kopf__konto { display: flex; align-items: center; gap: var(--abstand-klein); min-width: 0; }
.kopf__name {
  display: none;
  max-width: 14em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--klein);
  opacity: 0.9;
}
.kopf__abmelden { margin: 0; }
.kopf .knopf--sekundaer {
  background: transparent;
  color: var(--kopf-text);
  border-color: rgba(242, 239, 230, 0.5);
}
.kopf .knopf--sekundaer:hover { background: rgba(242, 239, 230, 0.12); }

.projektwahl {
  display: flex;
  gap: var(--abstand-klein);
  max-width: var(--breite);
  margin: var(--abstand-klein) auto 0;
}
.projektwahl__auswahl {
  flex: 1 1 auto;
  min-width: 0;
  background-color: var(--flaeche);
  color: var(--text);
}

/* ---------- Navigation ---------- */
.navigation { max-width: var(--breite); margin: var(--abstand-klein) auto 0; }
.navigation__liste {
  display: flex;
  flex-wrap: wrap;   /* fünf Einträge (mit Admin) passen bei 375 px nicht in eine Zeile */
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.navigation__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 14px;
  border-radius: 999px;
  color: var(--kopf-text);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
}
.navigation__link:hover { background: rgba(242, 239, 230, 0.12); }
.navigation__link[aria-current="page"] {
  background: var(--honig);
  color: var(--petrol);
}

/* ---------- Karte ---------- */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: var(--abstand);
  margin-bottom: var(--abstand);
}
.karte > :last-child { margin-bottom: 0; }
.karte__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--abstand-klein); margin-bottom: var(--abstand-klein); }
.karte__titel { font-size: 1.0625rem; margin: 0; }
.karte__titel a { color: inherit; text-decoration: none; }
.karte__titel a:hover { text-decoration: underline; }
.karte__meta { color: var(--text-leise); font-size: var(--klein); }
.karte__bild {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-klein);
  background: var(--flaeche-2);
}
.karte--link { position: relative; }
.karte--link:hover { border-color: var(--seegruen); }

/* ---------- Liste ---------- */
.liste { list-style: none; margin: 0 0 var(--abstand); padding: 0; }
.liste__eintrag {
  display: flex;
  align-items: center;
  gap: var(--abstand);
  min-height: calc(var(--touch) + 12px);
  padding: 10px var(--abstand);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-top-width: 0;
}
.liste__eintrag:first-child { border-top-width: 1px; border-radius: var(--radius) var(--radius) 0 0; }
.liste__eintrag:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.liste__eintrag:only-child { border-radius: var(--radius); }
.liste__bild {
  flex: 0 0 64px;
  width: 64px; height: 80px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--flaeche-2);
}
.liste__inhalt { flex: 1 1 auto; min-width: 0; }
.liste__titel { display: block; font-weight: 600; color: inherit; text-decoration: none; }
.liste__titel:hover { text-decoration: underline; }
.liste__meta { color: var(--text-leise); font-size: var(--klein); }

.leer {
  padding: var(--abstand-gross) var(--abstand);
  text-align: center;
  color: var(--text-leise);
  border: 1px dashed var(--rand);
  border-radius: var(--radius);
}

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  background: var(--flaeche-2);
  color: var(--text);
}
.badge--proposed { background: var(--honig); color: #14434C; }
.badge--posted { background: var(--petrol); color: #FFFFFF; }
.badge--verworfen { background: #6A7477; color: #FFFFFF; text-decoration: line-through; }
.badge--offen { background: var(--seegruen); color: #14434C; }
/* Job-Status */
.badge--neu, .badge--wartet { background: var(--flaeche-2); color: var(--text); }
.badge--laeuft { background: var(--seegruen); color: #14434C; }
.badge--fertig { background: var(--gruen); color: #FFFFFF; }
.badge--fehler { background: var(--rot); color: #FFFFFF; }
.badge--abgebrochen { background: #6A7477; color: #FFFFFF; }
.badge--warnung { background: var(--bernstein); color: #FFFFFF; }

@media (prefers-color-scheme: dark) {
  .badge--posted { background: #2C6E7A; }
}

/* ---------- Knopf ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--touch);
  min-width: var(--touch);
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background: var(--flaeche);
  color: var(--text);
  border-color: var(--rand);
}
.knopf:hover { border-color: var(--seegruen); }
.knopf--primaer { background: var(--primaer); color: var(--primaer-text); border-color: var(--primaer); }
.knopf--primaer:hover { background: var(--primaer-hover); border-color: var(--primaer-hover); }
.knopf--sekundaer { background: transparent; color: var(--link); border-color: currentColor; }
.knopf--akzent { background: var(--honig); color: #14434C; border-color: var(--honig); }
.knopf--gefahr { background: var(--gefahr); color: var(--gefahr-text); border-color: var(--gefahr); }
.knopf--gefahr:hover { filter: brightness(1.08); }
.knopf--klein { min-height: var(--touch); padding: 6px 12px; font-size: var(--klein); }  /* §8.8: ≥ 44 px */
.knopf--breit { width: 100%; }
.knopf--ausgegraut,
.knopf--ausgegraut:hover,
.knopf:disabled,
.knopf:disabled:hover,
.knopf[aria-disabled="true"] {
  background: var(--flaeche-2);
  color: var(--text-leise);
  border-color: var(--rand);
  cursor: not-allowed;
  filter: none;
}
.knopf__grund { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--text-leise); }

.knopfgruppe { display: flex; flex-wrap: wrap; gap: var(--abstand-klein); margin: 0 0 var(--abstand); }
.knopfgruppe--voll > .knopf { flex: 1 1 auto; }
.knopfgruppe [aria-pressed="true"] { background: var(--primaer); color: var(--primaer-text); border-color: var(--primaer); }

@media (max-width: 380px) {
  .knopf { padding: 10px 14px; }
  .knopf--klein { padding: 6px 10px; }
  .navigation__link { padding: 0 10px; }
}

/* ---------- Formular ---------- */
.formular { display: grid; gap: var(--abstand); margin: 0 0 var(--abstand); }
.feld { display: grid; gap: 6px; }
.feld__label, label { font-weight: 600; }
.feld__hilfe { color: var(--text-leise); font-size: var(--klein); }
.feld--haken { display: flex; align-items: flex-start; gap: 10px; }
.feld--haken label {
  display: flex;
  align-items: center;
  min-height: var(--touch);   /* Tippfläche: Haken selbst ist nur 24 px */
  font-weight: 400;
}

input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="search"], input[type="number"], input[type="tel"], input:not([type]),
select, textarea {
  width: 100%;
  min-height: var(--touch);
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: max(16px, 1rem); /* verhindert Zoom in iOS */
}
textarea { min-height: 7.5em; resize: vertical; }
select { appearance: auto; }
input[type="checkbox"], input[type="radio"] {
  width: 24px; height: 24px;
  margin: 10px 0;
  flex: 0 0 auto;
  accent-color: var(--petrol);
}
input::placeholder, textarea::placeholder { color: var(--text-leise); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--petrol); }

.feld--fehler input, .feld--fehler select, .feld--fehler textarea,
[aria-invalid="true"] { border-color: var(--gefahr); }
.feldfehler { color: var(--fehler-text); font-size: var(--klein); font-weight: 600; margin: 0; }

.code-eingabe {
  font-family: var(--schrift-mono);
  font-size: 1.5rem !important;
  letter-spacing: 0.3em;
  text-align: center;
}

/* ---------- Flash / Hinweis ---------- */
.flashes { display: grid; gap: var(--abstand-klein); margin-bottom: var(--abstand); }
.flash, .hinweis {
  margin: 0 0 var(--abstand);
  padding: 12px 14px;
  border: 1px solid var(--info-rand);
  border-left-width: 4px;
  border-radius: var(--radius-klein);
  background: var(--info-bg);
  color: var(--info-text);
}
.flashes .flash { margin: 0; }
.flash--ok { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-rand); }
.flash--fehler, .hinweis--fehler { background: var(--fehler-bg); color: var(--fehler-text); border-color: var(--fehler-rand); }
.flash--warnung, .hinweis--warnung { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-rand); }
.flash--hinweis, .hinweis--info { background: var(--info-bg); color: var(--info-text); border-color: var(--info-rand); }
.hinweis > :last-child { margin-bottom: 0; }

/* ---------- Tabelle ---------- */
.tabelle-rahmen {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 var(--abstand);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--klein); }
.tabelle th, .tabelle td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rand);
}
.tabelle th { background: var(--flaeche-2); font-weight: 700; white-space: nowrap; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle td.zahl, .tabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Dialog ---------- */
.dialog, dialog {
  width: min(560px, calc(100vw - 2 * var(--abstand)));
  max-height: calc(100dvh - 2 * var(--abstand) - var(--safe-oben) - var(--safe-unten));
  padding: var(--abstand-gross);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  overflow: auto;
}
dialog::backdrop { background: rgba(11, 33, 37, 0.6); }
.dialog__titel { margin-top: 0; }
.dialog__zusammenfassung { margin: 0 0 var(--abstand); padding: 0; list-style: none; }
.dialog__zusammenfassung li { padding: 4px 0; border-bottom: 1px solid var(--rand); }
.dialog__knoepfe { display: flex; flex-wrap: wrap-reverse; gap: var(--abstand-klein); justify-content: flex-end; margin-top: var(--abstand); }

/* ---------- Fortschritt ---------- */
progress.fortschritt, .fortschritt {
  display: block;
  width: 100%;
  height: 12px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--flaeche-2);
  color: var(--petrol);
  accent-color: var(--petrol);
  appearance: none;
  -webkit-appearance: none;
}
progress.fortschritt::-webkit-progress-bar { background: var(--flaeche-2); border-radius: 999px; }
progress.fortschritt::-webkit-progress-value { background: var(--primaer); border-radius: 999px; transition: width 0.3s ease; }
progress.fortschritt::-moz-progress-bar { background: var(--primaer); border-radius: 999px; }
.fortschritt__text { margin: 6px 0 0; color: var(--text-leise); font-size: var(--klein); }

/* ---------- Raster ---------- */
.raster { display: grid; gap: var(--abstand); grid-template-columns: minmax(0, 1fr); }
.raster > * { min-width: 0; }

/* ---------- Kleinteile ---------- */
.qr {
  display: block;
  width: min(240px, 70vw);
  height: auto;
  margin: 0 auto var(--abstand);
  border-radius: var(--radius-klein);
}
.codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin: 0 0 var(--abstand);
  padding: var(--abstand);
  list-style: none;
  font-family: var(--schrift-mono);
  font-size: 1.0625rem;
  background: var(--flaeche-2);
  border-radius: var(--radius-klein);
}
.geheimnis {
  display: block;
  padding: 10px 12px;
  font-family: var(--schrift-mono);
  letter-spacing: 0.08em;
  word-break: break-all;
  background: var(--flaeche-2);
  border-radius: var(--radius-klein);
  user-select: all;
}
.symbole { display: inline-flex; gap: 6px; color: var(--text-leise); font-size: var(--klein); }
/* Eigenständige Textlinks (nicht im Fließtext): Tippfläche ≥ 44 px */
.link-gross { display: inline-flex; align-items: center; min-height: var(--touch); }
.anmeldung { max-width: 420px; margin: var(--abstand-gross) auto; }

.fehlerseite { max-width: 560px; margin: var(--abstand-gross) auto; text-align: center; }
.fehlerseite__code { margin: 0; font-size: 3rem; font-weight: 800; line-height: 1; color: var(--bernstein); }
.fehlerseite .knopfgruppe { justify-content: center; }
@media (prefers-color-scheme: dark) {
  .fehlerseite__code { color: var(--honig); }
}

/* ---------- Breitere Bildschirme ---------- */
@media (min-width: 600px) {
  .kopf__name { display: inline; }
  h1 { font-size: 1.75rem; }
}

@media (min-width: 900px) {
  .raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .raster--seitenleiste { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .kopf { padding-top: calc(var(--abstand) + var(--safe-oben)); }
  .projektwahl { max-width: var(--breite); }
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}