/* SAMUTEX Nachbestell-Zentrale (Bauauftrag 06). Farben aus samutex.de (siehe ../assets/marke/README.md), alle an
   DIESER Stelle. Akzent-Orange nur für die EINE Hauptaktion je Seite (Klasse .haupt; Wächter in
   tests/test_oberflaeche.py). Schrift Jost lokal (SIL OFL 1.1, marke/OFL-jost.txt), keine Fremd-Anfragen. */
@font-face { font-family:"Jost"; src:url("/marke/jost.ttf") format("truetype"); font-weight:100 900; font-display:swap; }

:root {
  --marke:#324158; --marke-dunkel:#26324a; --blau:#2b6ca3; --akzent:#c74300; --akzent-dunkel:#a33a00;
  --hintergrund:#f4f5f7; --karte:#ffffff; --rand:#dde1e7; --zeile:#eef0f3; --text:#1d2433; --leise:#5b6475;
  --auf-dunkel:#ffffff;
  --ok-text:#0f5c2e; --ok-grund:#e9f6ee; --ok-rand:#2e8b57;
  --hinweis-text:#6b4e00; --hinweis-grund:#fff6d6; --hinweis-rand:#d4a106;
  --problem-text:#a01c12; --problem-grund:#fdecea; --problem-rand:#c62828;
  --fokus:#2b6ca3; --radius:10px;
  --gesperrt:#c9ced6; --eingabe-rand:#b9c0cb; --zeile-gelb:#fbfaf3; --zeile-alle:#eef2f8;
  --schatten-farbe:rgba(20,30,50,.18); --glas:rgba(255,255,255,.08); --glas-rand:rgba(255,255,255,.55);
  --glas-trenner:rgba(255,255,255,.35); --glas-hover:rgba(255,255,255,.6);
  --schatten:0 1px 2px rgba(20,30,50,.06), 0 4px 14px rgba(20,30,50,.06);
  --titel:"Jost", "Futura", "Century Gothic", system-ui, sans-serif;
}
* { box-sizing:border-box; }
html { background:var(--hintergrund); }
body { margin:0; font-family:system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size:16px; line-height:1.5;
       color:var(--text); background:var(--hintergrund); min-height:100vh; display:flex; flex-direction:column; }
h1, h2, h3 { font-family:var(--titel); font-weight:500; line-height:1.25; color:var(--marke); }
h1 { font-size:1.9rem; margin:1.4rem 0 .8rem; letter-spacing:.01em; }
h2 { font-size:1.3rem; margin:.2rem 0 .6rem; }
a { color:var(--blau); text-underline-offset:.15em; }
a:hover { color:var(--marke); }
:focus-visible { outline:3px solid var(--fokus); outline-offset:2px; border-radius:4px; }

/* Kopfleiste in Marine-Schiefer mit weißem Logo */
.kopf { background:var(--marke); color:var(--auf-dunkel); box-shadow:0 2px 8px var(--schatten-farbe); }
.kopf-innen { max-width:1280px; margin:0 auto; padding:.7rem 1.4rem; display:flex; align-items:center; gap:1.2rem 2rem;
              flex-wrap:wrap; }
.kopf :focus-visible { outline-color:var(--auf-dunkel); }
.marke { display:flex; align-items:center; gap:.9rem; color:var(--auf-dunkel); text-decoration:none; }
.marke img { display:block; height:36px; width:auto; }
.produkt { font-family:var(--titel); font-weight:400; font-size:.95rem; text-transform:uppercase; letter-spacing:.14em;
           padding-left:.9rem; border-left:1px solid var(--glas-trenner); }
.kopf-nav { background:var(--marke-dunkel); border-top:1px solid var(--glas); }
.kopf-nav-innen { max-width:1280px; margin:0 auto; padding:0 1.4rem; display:flex; gap:.2rem 2rem; align-items:center;
                  flex-wrap:wrap; }
.kopf nav a { font-family:var(--titel); font-size:.85rem; font-weight:500; text-transform:uppercase; letter-spacing:.12em;
              color:var(--auf-dunkel); text-decoration:none; padding:.6rem 0 .5rem; border-bottom:3px solid transparent; }
.kopf nav a:hover { border-bottom-color:var(--glas-hover); color:var(--auf-dunkel); }
.kopf nav a[aria-current] { border-bottom-color:var(--auf-dunkel); }
.kopf-rechts { display:flex; align-items:center; gap:1rem; margin-left:auto; }
.abzeichen { font-family:var(--titel); font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
             text-decoration:none; padding:.3rem .75rem; border-radius:999px; white-space:nowrap; }
.abzeichen.probe { color:var(--auf-dunkel); border:1px solid var(--glas-rand); background:var(--glas); }
.abzeichen.scharf { color:var(--hinweis-text); background:var(--hinweis-grund); border:1px solid var(--hinweis-rand); }
.abzeichen:hover { text-decoration:underline; }
.abzeichen.probe:hover { color:var(--auf-dunkel); }
button.abmelden { background:none; border:none; color:var(--auf-dunkel); padding:0; font-size:.9rem; text-decoration:underline;
                  text-underline-offset:.15em; }

main { padding:.5rem 1.4rem 2rem; max-width:1280px; width:100%; margin:0 auto; flex:1; }
.fuss { text-align:center; font-size:.8rem; color:var(--leise); padding:1.2rem; letter-spacing:.04em; }

/* Karten, Raster */
.karte { background:var(--karte); border:1px solid var(--rand); border-radius:var(--radius); padding:1.2rem 1.4rem;
         margin:1rem 0; box-shadow:var(--schatten); }
.schmal { max-width:440px; margin:3rem auto; }
.raster { display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); gap:1.2rem; align-items:start; }
.raster .karte { margin:0 0 1.2rem; }
@media (max-width:900px) { .raster { grid-template-columns:1fr; } }
.kacheln { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; align-items:start; }
.kachel { background:var(--karte); border:1px solid var(--rand); border-radius:var(--radius); padding:1.1rem 1.4rem;
          box-shadow:var(--schatten); }
.kachel h2 { margin:0; }
.kachel.spaeter { box-shadow:none; background:transparent; border-style:dashed; }
.kachel.spaeter h2 { color:var(--leise); }
.kachel-joma { border-top:4px solid var(--marke); }
.kachel-kopf { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.3rem; }
.kennzahl { display:flex; align-items:baseline; gap:.8rem; margin:.8rem 0 .2rem; }
.kachel .zahl { font-family:var(--titel); font-size:3rem; font-weight:500; line-height:1; margin:0; color:var(--marke);
                font-variant-numeric:tabular-nums; }
.aktionen { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin:1.1rem 0 .9rem; }
.kachel-liste { list-style:none; padding:.8rem 0 0; margin:0; border-top:1px solid var(--zeile); }
.kachel-liste li { margin:.35rem 0; }
.abschnitt-titel { margin-top:1.6rem; font-size:1.1rem; text-transform:uppercase; letter-spacing:.1em; color:var(--leise); }
.seitentitel { margin-top:1.2rem; }
.status { display:inline-block; text-transform:uppercase; font-size:.75rem; letter-spacing:.1em; font-weight:600;
          color:var(--leise); }
.status-aktiv { color:var(--ok-text); background:var(--ok-grund); border:1px solid var(--ok-rand); border-radius:999px;
                padding:.1rem .6rem; }
/* 07d: Automatik-Stufe in der Kachel (ersetzt die Modus-Karte) */
.stufe-block { border-top:1px solid var(--zeile); margin-top:1rem; padding-top:.6rem; }
.stufe-block h3 { margin:.2rem 0 .3rem; }
.stufen-liste { list-style:none; padding:0; margin:.4rem 0; }
.stufen-liste li { padding:.35rem .5rem; border-radius:6px; margin:.15rem 0; }
.stufen-liste li.aktuell { border-left:4px solid var(--marke); }
.stufe-zeile { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.5rem; }
.automatik-stand { margin-top:.6rem; }
.automatik-stand form.freigabe { margin:.7rem 0; }
.kopf-rechts .abzeichen + .abzeichen { margin-left:.4rem; }

/* Knöpfe: Marke = normal, .zweit = Umriss, .haupt = Akzent (nur die eine Hauptaktion) */
button, .knopf { font:inherit; font-size:1rem; font-weight:500; padding:.55rem 1.1rem; border-radius:8px;
                 border:1px solid var(--marke); background:var(--marke); color:var(--auf-dunkel); cursor:pointer;
                 text-decoration:none; display:inline-block; line-height:1.3; }
button:hover, .knopf:hover { background:var(--marke-dunkel); color:var(--auf-dunkel); }
button.zweit, .knopf.zweit { background:var(--karte); color:var(--marke); }
button.zweit:hover, .knopf.zweit:hover { background:var(--hintergrund); color:var(--marke); }
button.haupt, .knopf.haupt { background:var(--akzent); border-color:var(--akzent); color:var(--auf-dunkel);
                             font-family:var(--titel); letter-spacing:.06em; text-transform:uppercase; font-size:.95rem; }
button.haupt:hover, .knopf.haupt:hover { background:var(--akzent-dunkel); border-color:var(--akzent-dunkel); }
button:disabled, button:disabled:hover { background:var(--gesperrt); border-color:var(--gesperrt); color:var(--text); cursor:not-allowed; }
button.leise { background:none; border:none; color:var(--blau); padding:0; }
.breit { width:100%; margin-top:.6rem; }
form.inline { display:inline; }

/* Formulare */
label { display:block; margin:.6rem 0; }
.schmal label input { display:block; width:100%; margin-top:.25rem; }
label.haken { display:inline; margin:0; }
.haken-zeile { margin:.8rem 0; }
input, select { font:inherit; font-size:1rem; padding:.4rem .5rem; border:1px solid var(--eingabe-rand); border-radius:6px;
                background:var(--karte); color:var(--text); }
input:focus-visible, select:focus-visible { border-color:var(--fokus); }
input[type=checkbox] { width:1.1rem; height:1.1rem; vertical-align:-.15rem; accent-color:var(--marke); }
input.kurz { width:5.5rem; }
.zeile { display:flex; gap:.6rem 1rem; align-items:center; flex-wrap:wrap; }
.zeile label { margin:0; }

/* Meldungen: ok / Hinweis / Problem, klar vom Akzent unterschieden */
.meldung { padding:.75rem 1rem; border-radius:8px; margin:.7rem 0; background:var(--karte); border:1px solid var(--rand);
           border-left:5px solid var(--blau); }
.meldung.ok { background:var(--ok-grund); border-color:var(--ok-rand); color:var(--ok-text); }
.meldung.fehler { background:var(--problem-grund); border-color:var(--problem-rand); color:var(--problem-text); font-weight:600; }
.meldung.fehler ul { font-weight:400; }
.hinweis-meldung { background:var(--hinweis-grund); border-color:var(--hinweis-rand); color:var(--hinweis-text); }
.klein { font-size:.88rem; color:var(--leise); }
.hinweis { color:var(--leise); }
.lead { font-size:1.05rem; max-width:62rem; color:var(--text); }
.leer { color:var(--leise); font-style:italic; }
.hinweis-box { border-left:5px solid var(--marke); }
.einfuehrung { border:1px solid var(--rand); border-top:5px solid var(--marke); }
.einfuehrung li { margin:.5rem 0; }
.absatz { margin:.6rem 0; }

/* Tabellen */
.artikel-kopf { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.artikel-kopf h2 { margin:0; font-size:1.1rem; text-transform:uppercase; letter-spacing:.05em; }
table { width:100%; border-collapse:collapse; margin-top:.6rem; }
th, td { text-align:left; padding:.45rem .5rem; border-bottom:1px solid var(--zeile); vertical-align:middle; }
th { font-size:.8rem; color:var(--leise); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.zahl-zelle, th.zahl-zelle { text-align:right; font-variant-numeric:tabular-nums; }
td.zahl-zelle .klein { display:block; }
.mitte { text-align:center; }
td.heute { min-width:16rem; }
tr.bewusst-nicht td { color:var(--leise); }
.grau { color:var(--leise); }
tr.neu td:first-child { box-shadow:inset 3px 0 0 var(--hinweis-rand); }   /* 05f: dezent statt gelber Zeile */
tr.gelb { background:var(--zeile-gelb); }
tr.unter td:nth-child(3) { color:var(--problem-text); font-weight:700; }
tr.fehlerhaft { outline:2px solid var(--problem-rand); }
.fehlerzeile td { color:var(--problem-text); font-weight:600; }
tr.alle td { background:var(--zeile-alle); }
.marke-neu { background:var(--hinweis-grund); color:var(--hinweis-text); border:1px solid var(--hinweis-rand);
             border-radius:4px; padding:0 .35rem; font-size:.75rem; margin-left:.3rem; white-space:nowrap; }
.von-hand { color:var(--leise); }
.filter a[aria-current] { font-weight:700; text-decoration:none; color:var(--text); }
.tabellen-karte { overflow-x:auto; }

/* ⓘ-Erklärungen (ohne JavaScript: details/summary) */
details.info { display:inline-block; position:relative; vertical-align:baseline; }
details.info summary { list-style:none; cursor:pointer; color:var(--blau); font-weight:700; display:inline-block;
                       min-width:1.2em; text-align:center; border-radius:50%; }
details.info summary::-webkit-details-marker { display:none; }
details.info[open] summary { color:var(--auf-dunkel); background:var(--blau); }
details.info .info-text { position:absolute; z-index:5; left:-.4rem; top:1.6rem; width:min(320px, 80vw); background:var(--karte);
                          border:1px solid var(--rand); border-top:3px solid var(--blau); border-radius:8px; padding:.7rem .8rem;
                          box-shadow:0 8px 24px var(--schatten-farbe); font-weight:400; font-size:.9rem; line-height:1.45;
                          color:var(--text); text-transform:none; letter-spacing:0; text-align:left; white-space:normal;
                          font-family:system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
th:nth-last-child(-n+3) details.info .info-text, td:last-child details.info .info-text,
.kopf-rechts details.info .info-text { left:auto; right:-.4rem; }

@media (max-width:700px) {
  .kopf-innen { padding:.6rem 1rem; }
  .produkt { display:none; }
  main { padding:.5rem .8rem 1.5rem; }
  .karte { padding:1rem; }
  h1 { font-size:1.5rem; }
}

/* 05f: Joma angehalten, Artikel-Karten (details, ohne JavaScript), Suche, Entscheiden */
.status-angehalten { color:var(--hinweis-text); background:var(--hinweis-grund); border:1px solid var(--hinweis-rand);
                     border-radius:999px; padding:.1rem .6rem; }
/* 05e: Tageslauf abgebrochen/unterbrochen (gleiche Problem-Farben wie .meldung.fehler) */
.status-problem { color:var(--problem-text); background:var(--problem-grund); border:1px solid var(--problem-rand);
                  border-radius:999px; padding:.1rem .6rem; }
details.artikel-karte { margin:0 0 .8rem; }
details.artikel-karte > summary { list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline;
                                  gap:.4rem 1.2rem; background:var(--karte); color:var(--text); border:1px solid var(--rand);
                                  border-radius:var(--radius); padding:.8rem 1.2rem; }
details.artikel-karte > summary::-webkit-details-marker { display:none; }
details.artikel-karte > summary::before { content:"▸"; color:var(--marke); }
details.artikel-karte[open] > summary::before { content:"▾"; }
details.artikel-karte > summary h2 { margin:0; font-size:1.1rem; }
details.artikel-karte[open] > summary { border-bottom-left-radius:0; border-bottom-right-radius:0; }
details.artikel-karte > .karte { border-top:none; border-top-left-radius:0; border-top-right-radius:0; margin-top:0; }
.karte-zahlen { color:var(--leise); font-size:.9rem; }
.karte-bedarf { margin-left:auto; color:var(--leise); }
.karte-bedarf.mit-bedarf { color:var(--text); }
.zaehler-ohne { color:var(--hinweis-text); background:var(--hinweis-grund); border:1px solid var(--hinweis-rand);
                border-radius:999px; padding:0 .45rem; font-size:.8rem; }
.marke-ohne { font-size:.75rem; color:var(--leise); margin-left:.3rem; }
.suche { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.4rem 0 0; }
.knopf-klein { font-size:.85rem; padding:.25rem .7rem; }