body{margin:0}
*{box-sizing:border-box}
a{color:#305a96;text-decoration:none}a:hover{color:#23467a;text-decoration:underline}
.r{font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;font-size:13.5px;line-height:1.55;color:#3e3b35;background:#faf8f5;font-variant-numeric:tabular-nums}
.h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:24px;line-height:1.25;color:#201e1b;margin:0}
.h2{font-size:14px;font-weight:600;color:#201e1b;margin:0;display:flex;gap:8px;align-items:baseline}
.n{color:#6e6759;font-weight:400}
.klein{font-size:12.5px;color:#6e6759}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav{width:208px;flex-shrink:0;background:#f5f2ec;border-right:1px solid #e7e2da;padding:18px 12px;display:flex;flex-direction:column;gap:2px;min-height:100%}
.marke{font-family:Georgia,serif;font-size:17px;color:#201e1b;padding:2px 10px 16px}
.marke span{color:#6e6759;font-family:"Segoe UI",system-ui,sans-serif;font-size:12.5px;display:block}
.ne{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:7px;color:#3e3b35}
.ne:hover{background:#ebe6dd;text-decoration:none;color:#201e1b}
.ne.an{background:#ebe6dd;color:#201e1b;font-weight:600}
.ne .z{color:#9a5826;font-weight:600}
.kopf{display:flex;justify-content:space-between;align-items:center;gap:16px}
.suche{width:290px;height:34px;border:1px solid #e7e2da;border-radius:7px;background:#fff;display:flex;align-items:center;gap:8px;padding:0 10px;color:#6e6759;font:inherit}
.q{height:34px;padding:0 14px;border:1px solid #e7e2da;border-radius:7px;background:#faf8f5;color:#201e1b;font:inherit;font-size:12.5px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.q:hover{background:#f5f2ec}
.q.p{background:#305a96;border-color:#305a96;color:#fff}
.q.p:hover{background:#23467a}
.kasten{background:#fff;border:1px solid #e7e2da;border-radius:9px;overflow:hidden}
.zeile{display:flex;gap:12px;align-items:baseline;padding:10px 14px;border-top:1px solid #f0ebe2}
.zeile:first-child{border-top:0}
.titel{color:#201e1b;font-weight:600}
.tt{color:#201e1b}
.id{color:#6e6759;font-size:12px;min-width:38px}
.eig{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:#6e6759}
.eig b{color:#3e3b35;font-weight:600}
.ok{color:#3e7d4e;font-weight:600}
.wa{color:#9a5826;font-weight:600}
.lf{color:#305a96;font-weight:600}
.punkt{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}
.pille{display:inline-block;font-size:10.5px;font-weight:600;padding:1px 8px;border-radius:999px;border:1px solid #d6d0c4;color:#3e3b35;background:#fff;white-space:nowrap}
.pille.blau{border-color:#305a96;color:#305a96}
table{border-collapse:collapse;width:100%;font-size:13px}
th{font-weight:600;font-size:12px;color:#6e6759;text-align:left;padding:9px 14px;background:#f5f2ec;border-bottom:1px solid #e7e2da}
td{padding:10px 14px;border-top:1px solid #f0ebe2;vertical-align:baseline}
tr:first-child td{border-top:0}
.feld{display:flex;flex-direction:column;gap:6px}
.feld label,.feld .lab{font-size:12.5px;color:#3e3b35;font-weight:600}
.ein{height:40px;border:1px solid #8a8375;border-radius:7px;background:#fff;padding:0 12px;font:inherit;font-size:14px;color:#201e1b;width:100%}
textarea.ein{height:auto;padding:10px 12px;line-height:1.5;resize:vertical}
.fehler{color:#9b2f22;font-size:12.5px}
.griff{color:#8a8375;background:none;border:0;padding:2px;cursor:grab;display:flex;align-items:center;border-radius:5px}
.spalte-z{display:flex;gap:10px;align-items:flex-start;padding:10px 4px;border-top:1px solid #e7e2da}

/* Zusatz zum Design-Stil (design.css, wörtlich aus der Design-Fläche vom
   01.10.2026). Hier steht nur, was eine echte Seite braucht und die Fläche
   nicht zeigt: ganze Seitenhöhe, Formular-Knöpfe in der Navigation, das
   Handy-Layout als Umbruch statt als eigene Datei, das Feld für ein neues
   Token. Werte aus dem Design, keine neuen Farben. */

html{color-scheme:light;background:#faf8f5}
body{background:#faf8f5}
button.ne{width:100%;border:0;background:none;font:inherit;cursor:pointer;text-align:left}
form{margin:0}
summary{list-style:none}
summary::-webkit-details-marker{display:none}
select.ein{appearance:auto}
.ein:focus-visible,.q:focus-visible,.ne:focus-visible,summary:focus-visible{outline:2px solid #305a96;outline-offset:2px}

/* Anmeldekarte: Anmelden.dc.html (Desktop) und HandyCode.dc.html (Handy). */
.karte-seite{min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;padding:40px 16px}
.karte-spalte{width:100%;max-width:360px;display:flex;flex-direction:column;gap:18px}
.karte-marke{font-family:Georgia,serif;font-size:24px;color:#201e1b}
.karte{padding:22px;display:flex;flex-direction:column;gap:14px}
.code-ein{font-size:22px;letter-spacing:6px;height:52px;text-align:center}
.schluessel{font-family:Consolas,monospace;font-size:13px}
.adresse{word-break:break-all}
a.adresse{color:#305a96}

/* Rahmen: Zugang.dc.html (Seitenleiste) und HandyLage/HandyMenue.dc.html. */
.rahmen{min-height:100vh;width:100%;display:flex;flex-direction:column}
.rahmen-zeile{display:flex;flex-grow:1}
.haupt{flex-grow:1;min-width:0;padding:26px 30px 40px;display:flex;flex-direction:column;gap:22px;max-width:1072px}
.abschnitt{display:flex;flex-direction:column;gap:8px}
.handykopf{display:none}
.knopf-flach{width:44px;height:44px;border:0;background:transparent;justify-content:center;padding:0}
.menue-flaeche{display:none}

/* Neues Token: Knopf aus dem Design, darunter das Formular. */
.neu{position:relative}
.neu-flaeche{position:absolute;right:0;top:40px;z-index:5;width:320px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 6px 24px rgba(32,30,27,.12)}

/* Scheibe 3: Listen, Detailseiten, Formulare (Auftraege, Auftrag,
   AuftragForm, Abschluss, Entscheidungen, Entscheidung, EntscheidungForm,
   Features, HandyAuftrag). Werte aus dem Design. */
.nur-handy{display:none}
.zweispaltig{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:28px;align-items:start}
.knopfzeile{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dehner{flex-grow:1}
.trennstrich{width:1px;height:22px;background:#e7e2da;margin:0 6px}
.spaltenwahl{display:flex;align-items:center;gap:8px}
.aufklapp{position:relative}
.aufklapp-flaeche{position:absolute;left:0;top:40px;z-index:5;width:320px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 6px 24px rgba(32,30,27,.12)}
.auswahl-flaeche{position:absolute;left:0;top:40px;z-index:5;min-width:200px;padding:4px;display:flex;flex-direction:column;box-shadow:0 6px 24px rgba(32,30,27,.12)}
.auswahl-flaeche form{display:block}
.wahl{display:flex;align-items:center;width:100%;min-height:34px;padding:6px 12px;border:0;border-radius:6px;background:none;font:inherit;font-size:13px;color:#3e3b35;text-align:left;cursor:pointer;white-space:nowrap}
.wahl:hover{background:#f5f2ec;color:#201e1b;text-decoration:none}
.wahl.an{color:#201e1b;font-weight:600}
.wahl:focus-visible,.reiter:focus-visible{outline:2px solid #305a96;outline-offset:-2px}
.reiter-leiste{display:flex;gap:4px;border-bottom:1px solid #e7e2da}
.reiter{font:inherit;color:#6e6759;padding:8px 12px;margin-bottom:-1px;border-bottom:2px solid transparent;white-space:nowrap}
.reiter:hover{color:#201e1b;text-decoration:none}
.reiter.an{border-bottom-color:#305a96;color:#201e1b;font-weight:600}
.datei{color:#3e3b35;word-break:break-all}
.suchzeile{display:flex;gap:8px;max-width:640px}
.suchzeile .ein{flex-grow:1;min-width:0}
.ein-flach{flex-grow:1;min-width:0;height:32px;border:0;border-bottom:1px solid #d6d0c4;background:transparent;font:inherit;color:#201e1b;padding:0 2px}
.ein-flach:focus-visible{outline:2px solid #305a96;outline-offset:2px}
.abschluss-seite{min-height:100vh;width:100%;display:flex}
.abschluss-nav{opacity:.45;display:flex}
.abschluss-flaeche{flex-grow:1;min-width:0;display:flex;flex-direction:column;background:rgba(32,30,27,.06)}
.abschluss-mitte{position:relative;flex-grow:1;display:flex;align-items:flex-start;justify-content:center;padding:60px 16px 40px}
.abschluss-dialog{width:520px;max-width:100%;padding:22px;display:flex;flex-direction:column;gap:16px;box-shadow:0 12px 32px rgba(32,30,27,.14)}
.abschluss-liste{max-height:320px;overflow-y:auto}
.zeile.datei,.zeile .tt{min-width:0}

@media (max-width:760px){
  .karte-seite{padding:24px 16px}
  .nav{display:none}
  .seitenkopf .h1,.seitenkopf [role=search]{display:none}
  .seitenkopf.ohne-aktion{display:none}
  .seitenkopf{justify-content:flex-start}
  .haupt{padding:16px;gap:20px}
  .handykopf{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 16px;border-bottom:1px solid #e7e2da;background:#f5f2ec}
  .handytitel{font-family:Georgia,serif;font-size:17px;color:#201e1b}
  .menue[open] .menue-flaeche{display:flex;flex-direction:column;position:fixed;inset:0;z-index:20;background:#f5f2ec;overflow-y:auto}
  .menue summary{position:relative;z-index:21}
  .menue[open] summary{position:fixed;top:6px;right:4px}
  .menue .zu-icon{display:none}
  .menue[open] .zu-icon{display:block}
  .menue[open] .auf-icon{display:none}
  .menue-kopf{height:56px;display:flex;align-items:center;padding:0 4px 0 16px;border-bottom:1px solid #e7e2da}
  .menue nav{padding:12px;display:flex;flex-direction:column;gap:2px}
  .menue .ne{min-height:48px;font-size:15px}
  .trenner{height:1px;background:#e7e2da;margin:10px 0}
  table.stapel thead{display:none}
  table.stapel tr{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;padding:10px 14px;border-top:1px solid #f0ebe2}
  table.stapel tr:first-child{border-top:0}
  table.stapel td{padding:0;border:0}
  table.stapel td:last-child{grid-column:2;grid-row:1 / span 3}
  table.stapel td.leer{grid-column:1 / -1;grid-row:auto}
  .neu-flaeche{width:min(320px,calc(100vw - 32px))}
  .nur-desk{display:none}
  .nur-handy{display:inline}
  .zurueck.nur-handy{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:-8px 0 -12px}
  .haupt .h1{font-size:22px}
  .zweispaltig{grid-template-columns:minmax(0,1fr);gap:20px}
  .knopfzeile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .knopfzeile .erster{grid-column:1 / -1;order:-2}
  .knopfzeile .spaltenwahl{order:-1}
  .knopfzeile .dehner,.knopfzeile .trennstrich{display:none}
  .knopfzeile .q{height:44px;width:100%;justify-content:center}
  .knopfzeile form,.knopfzeile details,.spaltenwahl{width:100%}
  .aufklapp-flaeche,.auswahl-flaeche{position:static;width:100%;margin-top:8px;box-shadow:none}
  .wahl{min-height:44px}
  .reiter-leiste{overflow-x:auto}
  .reiter{display:flex;align-items:center;min-height:44px}
  table.karten thead{display:none}
  table.karten tr{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;padding:10px 14px;border-top:1px solid #f0ebe2}
  table.karten tr:first-child{border-top:0}
  table.karten td{padding:0;border:0;font-size:12.5px}
  table.karten td:empty{display:none}
  table.karten td.k-titel{flex-basis:100%;order:-1;font-size:13.5px}
  table.karten td.k-titel a{display:inline-block;padding:4px 0}
  table.karten td.leer{flex-basis:100%}
  .abschluss-nav{display:none}
  .seitenkopf .q,.aufklapp summary.q{height:44px}
  .suchzeile.nur-handy{display:flex}
  .abschluss-mitte{padding:16px}
}
.qr{align-self:center;line-height:0;border:1px solid #e7e2da;border-radius:7px;overflow:hidden}

/* Scheibe 4: Lage (Main.dc.html, LageLeer.dc.html, HandyLage.dc.html) und
   Stand. Die Lage hat auf dem Handy eine eigene Reihenfolge, deshalb zwei
   Fassungen, von denen das Stylesheet eine zeigt. */
.lage-desk{display:flex;flex-direction:column;gap:22px}
.lage-handy{display:none}
.lage-raster{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:22px;align-items:start}
.lage-spalte{display:flex;flex-direction:column;gap:22px}
.stand-details summary{color:#305a96;cursor:pointer;display:inline-block;margin-top:2px}
.stand-details summary:focus-visible{outline:2px solid #305a96;outline-offset:2px}
@media (max-width:760px){
  .lage-desk{display:none}
  .lage-handy{display:flex;flex-direction:column;gap:20px}
  .stand-details summary{min-height:44px;display:inline-flex;align-items:center}
  table.karten td.k-voll{flex-basis:100%}
}

/* Scheibe 5: Roadmap (Roadmap.dc.html, HandyRoadmap.dc.html). Drei Spalten
   nebeneinander auf dem Rechner, Reiter auf dem Handy, je eine Fassung. Der
   Griff zieht mit Maus und Finger (leitstand.js), ohne JavaScript öffnet er
   dieselben Züge als Formulare. */
.roadmap-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;margin:0 -16px}
.roadmap-spalte{display:flex;flex-direction:column;min-width:0;padding:0 16px;border-left:1px solid #e7e2da}
.roadmap-spalte.erste{border-left:0}
.roadmap-liste{min-height:44px}
.roadmap-liste:has([data-id]) .roadmap-leer{display:none}
.roadmap-leer{color:#6e6759}
.roadmap-handy{display:none}
.griff{touch-action:none}
.griff:hover{color:#3e3b35;background:#f5f2ec}
.griff:focus-visible{outline:2px solid #305a96;outline-offset:2px}
.verschieben .auswahl-flaeche{top:26px}
[data-id].zieht{background:#fff;box-shadow:0 6px 24px rgba(32,30,27,.12);border-radius:7px;position:relative;z-index:6}
.beim-ziehen,.beim-ziehen *{cursor:grabbing !important;user-select:none;-webkit-user-select:none}
.roadmap-reiter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#f5f2ec;border:1px solid #e7e2da;border-radius:9px;padding:3px}
.reiter-knopf{font:inherit;border-radius:7px;height:44px;display:flex;align-items:center;justify-content:center;gap:6px;color:#6e6759;white-space:nowrap}
.reiter-knopf:hover{text-decoration:none;color:#201e1b}
.reiter-knopf.an{background:#fff;color:#201e1b;font-weight:600;box-shadow:0 1px 2px rgba(32,30,27,.08)}
.reiter-knopf:focus-visible{outline:2px solid #305a96;outline-offset:-2px}
.roadmap-karte{flex-direction:column;align-items:stretch;gap:8px}
.roadmap-karte-kopf{display:flex;gap:8px;align-items:flex-start}
.roadmap-karte-kopf>.griff,.roadmap-karte-kopf>.mehr,.spalte-z>.verschieben{flex-shrink:0}
.roadmap-nach{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-left:40px}
.roadmap-nach .q{height:44px;width:100%;justify-content:center}
@media (max-width:760px){
  .roadmap-desk{display:none}
  .roadmap-handy{display:flex;flex-direction:column;gap:20px}
  .roadmap-handy .mehr .auswahl-flaeche{position:absolute;left:auto;right:0;top:44px;width:200px;margin-top:0;box-shadow:0 6px 24px rgba(32,30,27,.12)}
}
