/* Unique Elements OS — Oberfläche
   Design-DNA: Briefpapier V2 „Werkkante“ + Bögen v1.0 (Kopfbalken Stahlgrau, orange Signaturstriche,
   Mikro-Labels, Monogramm-Anschnitt, Punktum). Schriften: Futura PT (UI), The Seasons (Seitentitel). */

:root {
  --tief: #32312f;
  --tief-2: #3f3d3a;
  --tief-3: #4c4a46;
  --auf-tief: #f3eee7;
  --auf-tief-leise: #b9b0a2;
  --orange: #cb6616;
  --orange-text: #a8520f;
  --orange-flaeche: #fbeee3;
  --orange-auf-tief: #e38044;
  --orange-knopf: #b75a12;
  --papier: #ffffff;
  --grund: #f8f6f2;
  --creme: #f5efe9;
  --epoxy: #f3ece4;
  --text: #3a352e;
  --leise: #6b6357;
  --zart: #7a7163;
  --linie: #d9cfc1;
  --linie-fein: #ebe4da;
  --ok: #56642f;
  --ok-flaeche: #edf0e2;
  --wartet: #4d5b66;
  --wartet-flaeche: #e7ecef;
  --knapp: #8a5d0c;
  --knapp-flaeche: #f7eedb;
  --kritisch: #a1361f;
  --kritisch-flaeche: #f8e5e0;
  --fokus: 0 0 0 3px rgba(203, 102, 22, .35);
  --schatten: 0 1px 2px rgba(50, 49, 47, .06), 0 8px 24px -12px rgba(50, 49, 47, .18);
  --schatten-hoch: 0 2px 4px rgba(50, 49, 47, .08), 0 18px 40px -18px rgba(50, 49, 47, .35);
  --r: 6px;
  --ui: "futura-pt", "Futura PT", Futura, "Century Gothic", "Avenir Next", "Segoe UI", sans-serif;
  --titel: "the-seasons", "Didot", "Bodoni 72", Georgia, serif;
  --seitenleiste: 232px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--ui); font-size: 16px; line-height: 1.5; color: var(--text);
  background: var(--grund); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
::selection { background: rgba(203, 102, 22, .22); color: var(--text); }
a { color: inherit; text-underline-offset: 3px; text-decoration-color: rgba(203, 102, 22, .6); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: #cfc5b7 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d6ccbe; border-radius: 10px; border: 2px solid var(--grund); }
input, textarea, select { caret-color: var(--orange); accent-color: var(--orange); }
[hidden] { display: none !important; }

/* ---------- Rahmen ---------- */
.rahmen { display: grid; grid-template-columns: var(--seitenleiste) 1fr; min-height: 100vh; }
.leiste {
  position: sticky; top: 0; height: 100vh; background: var(--tief); color: var(--auf-tief);
  display: flex; flex-direction: column; padding: 22px 30px 16px 16px; overflow: hidden;
}
.leiste-logo { display: block; padding: 4px 8px 18px; }
.leiste-logo img { width: 150px; height: auto; display: block; }
.leiste-strich { width: 40px; border-top: 2px solid var(--orange); margin: 0 8px 18px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 8px 10px; border-radius: var(--r);
  color: var(--auf-tief-leise); text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: .01em;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.nav a svg { width: 18px; height: 18px; flex: none; stroke: currentColor; }
.nav a:hover { background: var(--tief-2); color: var(--auf-tief); }
.nav a[aria-current="page"] { background: var(--tief-3); color: #fff; }
.nav a[aria-current="page"] svg { stroke: var(--orange); }
.nav .zahl {
  margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 11px; background: var(--orange-knopf); color: #fff;
  font-size: 12px; font-weight: 600; line-height: 22px; text-align: center;
}
.nav-trenner { height: 1px; background: rgba(255, 255, 255, .08); margin: 12px 8px; }
.leiste-fuss { margin-top: auto; padding: 12px 8px 0; display: grid; gap: 10px; font-size: 13px; color: var(--auf-tief-leise); }
.leiste-fuss label { display: grid; gap: 4px; }
.leiste-fuss select {
  width: 100%; min-width: 0; max-width: 100%;
  background: var(--tief-2); color: var(--auf-tief); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r);
  padding: 8px 10px; min-height: 40px;
}
.sprachwahl { display: flex; gap: 4px; }
.sprachwahl button {
  flex: 1; min-height: 34px; border-radius: var(--r); border: 1px solid rgba(255, 255, 255, .12); background: transparent;
  color: var(--auf-tief-leise); cursor: pointer; font-weight: 600; letter-spacing: .06em;
}
.sprachwahl button[aria-pressed="true"] { background: var(--auf-tief); color: var(--tief); border-color: var(--auf-tief); }
.kante {
  position: absolute; right: 10px; bottom: 150px; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(243, 238, 231, .28); white-space: nowrap;
  pointer-events: none;
}
.kante b { color: var(--orange-auf-tief); font-weight: 400; }

.haupt { position: relative; min-width: 0; padding: 28px 36px 64px; overflow-x: hidden; }
.haupt::after {
  content: ""; position: fixed; right: -180px; bottom: -200px; width: 620px; height: 640px; pointer-events: none;
  background: url("assets/monogramm.webp") no-repeat center / contain; opacity: .04; transform: rotate(-14deg); z-index: 0;
}
.haupt > * { position: relative; z-index: 1; }

/* ---------- Kopf einer Seite ---------- */
.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.seitenkopf h1 {
  font-family: var(--titel); font-weight: 400; font-size: 40px; line-height: 1.05; letter-spacing: -.01em; margin: 0;
  text-wrap: balance;
}
.seitenkopf .unter { color: var(--leise); margin-top: 6px; font-size: 15px; }
.seitenkopf .punkt { color: var(--orange); }
.werkzeuge { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Bausteine ---------- */
.flaeche { background: var(--papier); border: 1px solid var(--linie-fein); border-radius: var(--r); }
.block { margin-bottom: 28px; }
.blocktitel {
  display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tief);
}
.blocktitel::before { content: ""; width: 28px; border-top: 2px solid var(--orange); align-self: center; flex: none; }
.blocktitel .alt { color: var(--zart); font-weight: 500; letter-spacing: .1em; }
.blocktitel .rechts { margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 500; }
.label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-text); }
.leise { color: var(--leise); }
.zart { color: var(--zart); }
.klein { font-size: 13px; }
.gross { font-size: 18px; }
.fett { font-weight: 600; }
.rechts { text-align: right; }
.zeile { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.stapel { display: grid; gap: 10px; }
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.raster-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 16px;
  border-radius: var(--r); border: 1px solid var(--linie); background: var(--papier); color: var(--text); cursor: pointer;
  font-weight: 500; font-size: 15px; text-decoration: none; white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.knopf:hover { border-color: #bfb3a3; background: #fffdfb; }
.knopf:active { transform: translateY(1px); }
.knopf svg { width: 17px; height: 17px; stroke: currentColor; }
.knopf.haupt-knopf { background: var(--tief); border-color: var(--tief); color: #fff; }
.knopf.haupt-knopf:hover { background: #262523; }
.knopf.akzent { background: var(--orange-knopf); border-color: var(--orange-knopf); color: #fff; }
.knopf.akzent:hover { background: var(--orange-text); border-color: var(--orange-text); }
.knopf.still { border-color: transparent; background: transparent; }
.knopf.still:hover { background: rgba(50, 49, 47, .05); }
.knopf.klein { min-height: 34px; padding: 4px 12px; font-size: 14px; }
.knopf[disabled], .knopf[aria-busy="true"] { opacity: .5; cursor: not-allowed; }
.knopf.gefahr { color: var(--kritisch); }

/* Formular */
.feld { display: grid; gap: 5px; }
.feld > span { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.feld input, .feld select, .feld textarea, .eingabe {
  width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--linie); border-radius: var(--r);
  background: var(--papier); transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.feld textarea, textarea.eingabe { min-height: 110px; resize: vertical; line-height: 1.5; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: #c2b6a6; }
.feld input:focus, .feld select:focus, .feld textarea:focus, .eingabe:focus { outline: none; border-color: var(--orange); box-shadow: var(--fokus); }
.feld input::placeholder, textarea::placeholder { color: #9a917f; }
.felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 16px; }
.felder .breit { grid-column: 1 / -1; }

/* Chips (Ankreuzgruppen wie auf dem Bogen) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px 12px; border-radius: 18px;
  border: 1px solid var(--linie); background: var(--papier); cursor: pointer; font-size: 14px; user-select: none;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.chip:hover { border-color: #bfb3a3; }
.chip[aria-pressed="true"] { background: var(--tief); color: #fff; border-color: var(--tief); }
.chip.erkannt { border-color: var(--orange); background: var(--orange-flaeche); color: var(--orange-text); }
.chip .x { opacity: .6; }

/* Marken & Status */
.marke {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 12px; font-size: 12px;
  font-weight: 600; letter-spacing: .02em; white-space: nowrap; background: var(--creme); color: var(--leise);
}
.marke::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.marke.ok { background: var(--ok-flaeche); color: var(--ok); }
.marke.wartet { background: var(--wartet-flaeche); color: var(--wartet); }
.marke.knapp { background: var(--knapp-flaeche); color: var(--knapp); }
.marke.kritisch { background: var(--kritisch-flaeche); color: var(--kritisch); }
.marke.neu { background: var(--orange-flaeche); color: var(--orange-text); }
.marke.beispiel { background: #ecebe8; color: #5f5a52; }
.marke.beispiel::before { display: none; }
.punktum { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }

/* Listen & Tabellen */
.liste { display: grid; }
.liste > .eintrag {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 12px 16px;
  border-top: 1px solid var(--linie-fein); text-decoration: none; color: inherit;
  transition: background .15s var(--ease);
}
.liste > .eintrag:first-child { border-top: 0; }
a.eintrag:hover, button.eintrag:hover { background: #fcfaf7; }
.eintrag .titel { font-weight: 500; }
.eintrag .meta { color: var(--leise); font-size: 14px; }
.leer { padding: 22px 18px; color: var(--leise); }
.leer strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
table.tabelle { width: 100%; border-collapse: collapse; background: var(--papier); font-size: 15px; }
.tabelle th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leise);
  background: var(--creme); padding: 10px 12px; border-bottom: 1px solid var(--linie-fein); white-space: nowrap;
  position: sticky; top: 0;
}
.tabelle td { padding: 10px 12px; border-bottom: 1px solid var(--linie-fein); vertical-align: top; }
.tabelle tr.klickbar { cursor: pointer; }
.tabelle tr.klickbar:hover td { background: #fcfaf7; }
.tabelle .zahl { text-align: right; white-space: nowrap; }
.rolle-weg { overflow-x: auto; border: 1px solid var(--linie-fein); border-radius: var(--r); }

/* Reiter */
.reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--linie); margin-bottom: 18px; overflow-x: auto; }
.reiter button {
  min-height: 44px; padding: 8px 14px; border: 0; background: none; cursor: pointer; color: var(--leise); font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.reiter button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--orange); }
.reiter button:hover { color: var(--text); }

/* Hinweise */
.hinweis { padding: 12px 14px; border-radius: var(--r); background: var(--creme); color: var(--text); font-size: 14px; }
.hinweis.warnung { background: var(--knapp-flaeche); color: #5d3f08; }
.hinweis.fehler { background: var(--kritisch-flaeche); color: #6f2412; }
.hinweis.gut { background: var(--ok-flaeche); color: #39421d; }

/* Meldung unten */
.meldung {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 50;
  background: var(--tief); color: #fff; padding: 12px 18px; border-radius: var(--r); box-shadow: var(--schatten-hoch);
  font-size: 15px; transition: opacity .2s var(--ease), transform .25s var(--ease); max-width: min(560px, 92vw);
}
.meldung.an { opacity: 1; transform: translate(-50%, 0); }
.meldung.fehler { background: var(--kritisch); }

/* Laden */
.skelett { border-radius: var(--r); background: linear-gradient(90deg, #efe9e1, #f7f3ee, #efe9e1); background-size: 200% 100%;
  animation: glanz 1.2s linear infinite; }
@keyframes glanz { to { background-position: -200% 0; } }

/* ---------- Werkstatt-Plan: Stationen an der Werkbank ---------- */
.plan { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 6px 6px 14px; scroll-snap-type: x proximity; }
.plan.ueberlauf { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.station { display: flex; flex-direction: column; flex: 1 1 180px; min-width: 176px; max-width: 300px; min-height: 230px; scroll-snap-align: start; }
.station.leer-station { flex: 0 0 44px; min-width: 44px; }
.station-kopf { display: flex; align-items: baseline; justify-content: flex-start; gap: 8px; padding: 0 2px 10px; min-height: 30px; }
.station-kopf h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tief); white-space: nowrap; }
.station-kopf .anz { font-size: 13px; color: var(--orange-text); font-weight: 600; }
.station.leer-station .station-kopf { justify-content: center; }
.station.leer-station .station-kopf h3 { writing-mode: vertical-rl; transform: rotate(180deg); color: var(--zart); font-weight: 500; font-size: 12px; }
.station.leer-station .station-kopf { flex: 1; align-items: flex-end; padding-bottom: 12px; }
.station-fach { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 8px 0 10px;
  border-bottom: 2px solid var(--orange); }
.station.leer-station .station-fach { flex: 0 0 auto; padding: 0; }
.station-leer { display: none; }
.plan-kompakt .station { min-height: 0; }
.plan-kompakt .station.leer-station { min-height: 150px; }
.plan-kompakt .station-fach { min-height: 70px; }
.plan-frei { display: none; }

.marke-stueck {
  display: block; text-align: left; width: 100%; border: 0; padding: 0; cursor: pointer; border-radius: var(--r);
  background: var(--papier); box-shadow: var(--schatten); overflow: hidden; color: inherit; text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.marke-stueck:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.marke-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--tief);
  color: #fff; padding: 7px 10px; }
.marke-kopf .nr { font-weight: 700; letter-spacing: .04em; font-size: 15px; }
.marke-kopf .termin { font-size: 12px; color: var(--auf-tief-leise); }
.marke-kopf .termin.warn { color: #ffc98f; }
.marke-kopf .termin.rot { color: #ff9f86; }
.marke-rumpf { padding: 8px 10px 10px; display: grid; gap: 4px; }
.marke-rumpf .kunde { font-weight: 600; font-size: 15px; line-height: 1.25; }
.marke-rumpf .was { font-size: 13px; color: var(--leise); line-height: 1.35; }
.marke-rumpf .naechst { font-size: 13px; line-height: 1.35; padding-top: 6px; border-top: 1px dashed var(--linie-fein); }
.marke-rumpf .naechst b { color: var(--orange-text); font-weight: 600; margin-right: 4px; }
.fortschritt { height: 3px; background: var(--linie-fein); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.fortschritt i { display: block; height: 100%; background: var(--orange); border-radius: 2px; }
.marke-stueck.wartet { background: var(--wartet-flaeche); box-shadow: inset 0 0 0 1px var(--wartet), var(--schatten); }
.marke-stueck.wartet .marke-kopf { background: var(--wartet); }
.marke-stueck .wartet-hinweis { font-size: 12px; font-weight: 600; color: var(--wartet); }
.marke-stueck.kritisch .marke-kopf { background: var(--kritisch); }
.marke-stueck.kritisch .marke-kopf .termin { color: #fff; font-weight: 600; }
/* Sprung an den Platz im Plan: die Marke kommt einmal an */
@keyframes ankunft { from { transform: translateY(-12px); box-shadow: var(--schatten-hoch); } to { transform: none; box-shadow: var(--schatten); } }
.marke-stueck.ankunft { animation: ankunft .42s cubic-bezier(.16, 1, .3, 1); outline: 2px solid var(--orange); outline-offset: 3px; }
.eintrag.ankunft { background: var(--orange-flaeche); }
@media (prefers-reduced-motion: reduce) { .marke-stueck.ankunft { animation: none; } }
.epoxy-tag { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-text); }

.werkstatt-fuss { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 18px; }

/* ---------- Lage ---------- */
.lage-kopf { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; margin-bottom: 18px; }
.lage-datum { color: var(--leise); }
.tageszeile { margin: 10px 0 0; font-size: 15px; color: var(--leise); line-height: 1.6; }
.tageszeile a { color: inherit; text-decoration: underline; text-decoration-color: var(--linie); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.tageszeile a:hover { color: var(--text); text-decoration-color: var(--orange); }
.tageszeile b { color: var(--text); font-weight: 600; }
.mit-pfeil, .im-plan { display: inline-flex; align-items: center; gap: 6px; }
.mit-pfeil svg, .im-plan svg { width: 15px; height: 15px; stroke: currentColor; flex: none; }
.im-plan { font-size: 13px; color: var(--auf-tief); text-decoration: underline; text-decoration-color: rgba(243, 238, 231, .35); text-underline-offset: 3px; }
.im-plan:hover { text-decoration-color: var(--orange-auf-tief); }
/* Listenzeile mit zwei Zielen: Nummer → Platz im Plan, Rest der Zeile → Akte */
.eintrag.gestreckt { position: relative; }
.eintrag.gestreckt:hover { background: #fcfaf7; }
.eintrag .haupt-link { color: inherit; text-decoration: none; }
.eintrag .haupt-link::after { content: ""; position: absolute; inset: 0; }
.eintrag .nr-link { position: relative; z-index: 1; color: inherit; text-decoration: none; border-bottom: 1px dashed var(--linie); }
.eintrag .nr-link:hover { color: var(--orange-text); border-bottom-color: var(--orange); }
.kennzahlen { display: flex; gap: 28px; flex-wrap: wrap; }
.kennzahl { display: grid; gap: 2px; min-width: 88px; }
.kennzahl b { font-size: 30px; font-weight: 500; line-height: 1; letter-spacing: -.01em; }
.kennzahl span { font-size: 12px; color: var(--leise); letter-spacing: .06em; text-transform: uppercase; }
.lage-spalten { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; margin-top: 26px; }

/* ---------- Anfragen: Verkaufsstrecke ---------- */
.strecke { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.spalte { background: rgba(245, 239, 233, .55); border-radius: var(--r); padding: 12px; min-height: 240px; }
.spalte h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  display: flex; justify-content: space-between; }
.spalte h3 span { color: var(--zart); font-weight: 500; }
.karte { display: grid; gap: 6px; background: var(--papier); border-radius: var(--r); padding: 12px; margin-bottom: 10px;
  box-shadow: var(--schatten); text-decoration: none; color: inherit; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.karte:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.karte .kunde { font-weight: 600; }
.karte .was { font-size: 14px; color: var(--leise); line-height: 1.35; }
.karte .fuss { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--zart); }

/* ---------- Neue Anfrage: Erkennen ---------- */
.erkennen { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.erkennen textarea { min-height: 260px; font-size: 16px; }
.erkannt { position: sticky; top: 20px; }
.erkannt-produkt { font-family: var(--titel); font-size: 30px; line-height: 1.1; margin: 4px 0 10px; }
.erkannt-zeile { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--linie-fein); font-size: 15px; }
.erkannt-zeile > span:first-child { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); padding-top: 3px; }
.erkannt-zeile .nichts { color: #a39a8a; }

/* ---------- Akte: Kopfbalken wie Projektbogen ---------- */
.kopfbalken { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: end;
  background: var(--tief); color: #fff; border-radius: var(--r); padding: 22px 26px; margin-bottom: 22px; overflow: hidden; }
.kopfbalken::after { content: ""; position: absolute; right: -60px; top: -80px; width: 280px; height: 290px;
  background: url("assets/monogramm.webp") no-repeat center / contain; opacity: .06; transform: rotate(-14deg); filter: invert(1); }
.kopfbalken .lbl { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-auf-tief); }
.kopfbalken .nr { font-size: 46px; font-weight: 700; letter-spacing: .02em; line-height: 1; margin-top: 6px; }
.kopfbalken .nr.anfrage { font-size: 30px; font-weight: 500; }
.kopfbalken .kunde { font-size: 22px; font-weight: 500; line-height: 1.2; }
.kopfbalken .kurz { color: var(--auf-tief-leise); margin-top: 4px; }
.kopfbalken .kn { color: var(--auf-tief-leise); font-size: 14px; margin-top: 8px; }
.termin-kasten { position: relative; z-index: 1; border: 1.5px solid var(--orange); border-radius: var(--r); padding: 10px 14px; min-width: 190px; background: rgba(0, 0, 0, .12); }
.termin-kasten .wert { font-size: 26px; font-weight: 500; line-height: 1.1; margin-top: 4px; }
.termin-kasten .knopf { margin-top: 8px; }

.akte { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.akte-seite { display: grid; gap: 18px; position: sticky; top: 16px; }
.kasten { background: var(--papier); border: 1px solid var(--linie-fein); border-radius: var(--r); padding: 16px; }
.kasten h4 { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.kasten.bremse { border-color: var(--orange); }
.zahlplan { display: grid; }
.zp { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--linie-fein); }
.zp:first-child { border-top: 0; padding-top: 0; }
.zp input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--orange); }
.zp.fertig svg { width: 20px; height: 20px; color: var(--ok); stroke: currentColor; stroke-width: 2.2; }
.kasten.bremse p svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; flex: none; }

/* Schrittkette — wie der Bogen am Klemmbrett */
.kette { background: var(--papier); border: 1px solid var(--linie-fein); border-radius: var(--r); overflow: hidden; }
.kette-kopf, .schritt { display: grid; grid-template-columns: 34px 48px minmax(0, 1fr) 64px 104px minmax(120px, 190px); align-items: center; }
.kette-kopf { background: var(--creme); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.kette-kopf > div { padding: 9px 8px; }
.abschnitt-titel { padding: 7px 14px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); background: var(--epoxy); border-top: 1px solid var(--linie-fein); }
.schritt { border-top: 1px solid var(--linie-fein); min-height: 50px; transition: background .15s var(--ease); }
.schritt.epoxy { background: var(--epoxy); }
.schritt > div { padding: 6px 8px; }
.schritt .nr { text-align: right; font-size: 13px; color: var(--zart); font-weight: 600; }
.schritt .text { line-height: 1.3; }
.schritt .text .es { display: block; font-size: 12px; color: var(--zart); }
.schritt .krz, .schritt .dat { font-size: 14px; color: var(--leise); }
.schritt.erledigt .text { color: var(--leise); }
.schritt.naechster { background: var(--orange-flaeche); }
.schritt.naechster .text { font-weight: 600; }
.haken { width: 30px; height: 30px; border-radius: 6px; border: 1.5px solid #bdb2a3; background: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; }
.haken svg { width: 18px; height: 18px; stroke: #fff; opacity: 0; transition: opacity .15s; }
.haken[aria-checked="true"] { background: var(--orange); border-color: var(--orange); }
.haken[aria-checked="true"] svg { opacity: 1; }
.haken:hover { border-color: var(--orange); }
.schritt .ein input { width: 100%; min-height: 34px; padding: 4px 8px; border: 1px solid var(--linie); border-radius: 5px; background: #fff; font-size: 14px; }
.schritt .opts { display: flex; gap: 4px; flex-wrap: wrap; }
.schritt .opts button { min-width: 34px; min-height: 30px; font-size: 12px; border: 1px solid var(--linie); background: #fff; border-radius: 4px; cursor: pointer; }
.schritt .opts button[aria-pressed="true"] { background: var(--tief); color: #fff; border-color: var(--tief); }
.qc-liste { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 14px 12px 96px; background: var(--creme); }
.qc-liste label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; cursor: pointer; min-height: 32px; }
.qc-liste input { width: 18px; height: 18px; }

.foto-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.foto-slot { border: 1px dashed var(--linie); border-radius: var(--r); padding: 10px; font-size: 13px; min-height: 64px; display: grid; gap: 4px; align-content: start; }
.foto-slot.da { border-style: solid; border-color: var(--ok); background: var(--ok-flaeche); }
.foto-slot b { font-size: 12px; }
.foto-bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: var(--creme); }
.foto-knopf { justify-self: start; margin-top: 4px; cursor: pointer; }
.foto-knopf.beschaeftigt { opacity: .6; pointer-events: none; }

.bestell { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--linie-fein); font-size: 14px; }
.bestell:first-of-type { border-top: 0; }
.bestell .aktionen { display: flex; gap: 6px; }

.fragen-liste { display: grid; gap: 2px; }
.frage { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linie-fein); }
.frage:first-child { border-top: 0; }
.frage .status { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--linie); margin-top: 3px; }
.frage.ok .status { background: var(--ok); border-color: var(--ok); }
.frage.pflicht .status { border-color: var(--orange); }
.frage .kurz { font-weight: 600; font-size: 14px; }
.frage .hilfe { font-size: 13px; color: var(--leise); }
.frage .antwort { margin-top: 6px; }

.nachricht { white-space: pre-wrap; font-size: 14px; background: var(--creme); border-radius: var(--r); padding: 14px; line-height: 1.55; max-height: 360px; overflow: auto; }
.verlauf { font-size: 13px; color: var(--leise); display: grid; gap: 6px; max-height: 340px; overflow: auto; }
.verlauf div { display: grid; grid-template-columns: 92px 34px 1fr; gap: 8px; }

/* Logbuch — Kürzel-Stempel wie auf dem Projektbogen, alt durchgestrichen, neu fett */
.lb-filter { display: grid; grid-template-columns: minmax(200px, 1.6fr) minmax(160px, 1fr) minmax(120px, .7fr) auto; gap: 12px; align-items: end; margin-bottom: 22px; }
.lb-schalter { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--leise); padding-bottom: 10px; cursor: pointer; }
.lb-schalter input { width: 17px; height: 17px; }
.lb-zahl { margin: 0 0 14px; }
.lb-tag { margin-bottom: 26px; }
.lb-tag .blocktitel::first-letter { text-transform: uppercase; }
.lb-liste { display: grid; }
.lb-eintrag { display: grid; grid-template-columns: 48px 38px 1fr; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--linie-fein); align-items: start; }
.lb-eintrag:first-child { border-top: 0; }
.lb-eintrag.warn { background: var(--kritisch-flaeche); }
.lb-uhr { font-size: 14px; color: var(--leise); padding-top: 3px; }
.lb-stempel { display: grid; place-items: center; height: 28px; border: 1px solid var(--linie); border-bottom: 2px solid var(--orange);
  border-radius: 3px; font-size: 12px; font-weight: 700; letter-spacing: .06em; background: var(--papier); }
.lb-eintrag.warn .lb-stempel { border-color: var(--kritisch); color: var(--kritisch); }
.lb-text { min-width: 0; font-size: 15px; }
.lb-text a { text-decoration: none; }
.lb-text a:hover { text-decoration: underline; }
.lb-person { color: var(--leise); }
.lb-diff { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: 14px; }
.lb-diff li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.lb-feld { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--leise); min-width: 110px; }
.lb-diff s { color: var(--zart); text-decoration-color: rgba(161, 54, 31, .55); }
.lb-pfeil { display: inline-flex; align-items: center; }
.lb-pfeil svg { width: 16px; height: 16px; stroke: var(--orange); stroke-width: 2; }
.lb-dateien { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.lb-dateien svg { width: 15px; height: 15px; stroke: var(--leise); }
.lb-dateien code { font-size: 12px; background: var(--creme); border-radius: 3px; padding: 1px 6px; }
.kasten.lb-warnung { border-color: var(--kritisch); background: var(--kritisch-flaeche); margin-bottom: 18px; }
.kasten.lb-warnung h4 { color: var(--kritisch); }
.kasten .lb-liste { max-height: 420px; overflow: auto; margin: 0 -16px; }
.kasten .lb-eintrag { grid-template-columns: 74px 34px 1fr; padding: 9px 16px; gap: 8px; }
.kasten .lb-text, .kasten .lb-uhr { font-size: 13px; }
.kasten .lb-feld { min-width: 0; }
.lb-notiz { display: flex; gap: 8px; margin-top: 12px; }
.lb-notiz input { flex: 1; min-width: 0; }
@media (max-width: 760px) {
  .lb-filter { grid-template-columns: 1fr 1fr; }
  .lb-filter .feld:first-child { grid-column: 1 / -1; }
  .lb-eintrag { grid-template-columns: 40px 34px 1fr; gap: 9px; padding: 11px 12px; }
  .lb-feld { min-width: 0; }
}

/* Wissen */
.faq { border-top: 1px solid var(--linie-fein); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; gap: 10px; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: ""; flex: none; width: 14px; height: 14px; align-self: center; background: var(--orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s var(--ease);
}
.faq[open] summary::before { transform: rotate(90deg); }
.faq .antwort { margin: 10px 0 0 22px; max-width: 72ch; }
.material { display: grid; gap: 6px; }
.material .kennwerte { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--leise); }

/* Druck: Projektbogen für alle Ketten, ohne Preise */
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; font-size: 11pt; }
  .leiste, .werkzeuge, .akte-seite, .reiter, .kein-druck, .meldung, .haupt::after { display: none !important; }
  .rahmen { display: block; }
  .haupt { padding: 0; }
  .akte { display: block; }
  .kopfbalken { -webkit-print-color-adjust: exact; print-color-adjust: exact; border-radius: 0; }
  .schritt, .kette-kopf { break-inside: avoid; }
  .schritt.naechster { background: none; }
  .haken { width: 18px; height: 18px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Mehr-Blatt (Handy): restliche Bereiche, Ich bin, Sprache ---------- */
.wer-chip, .nav-mehr { display: none; }
.mehr-blatt { position: fixed; inset: 0; z-index: 40; background: rgba(28, 27, 26, .45); display: flex; align-items: flex-end;
  opacity: 0; transition: opacity .2s var(--ease); }
.mehr-blatt.offen { opacity: 1; }
.mehr-innen { width: 100%; background: var(--tief); color: var(--auf-tief); border-radius: 14px 14px 0 0;
  padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); transform: translateY(24px); transition: transform .24s cubic-bezier(.16, 1, .3, 1); }
.mehr-blatt.offen .mehr-innen { transform: none; }
.mehr-griff { width: 40px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .22); margin: -8px auto 6px; }
.mehr-kopf { display: flex; align-items: center; justify-content: space-between; margin: 0 0 4px 12px; }
.mehr-titel { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--auf-tief-leise); }
.mehr-zu { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 22px; background: var(--tief-2); color: var(--auf-tief); cursor: pointer; }
.mehr-zu svg { width: 20px; height: 20px; stroke: currentColor; }
.mehr-nav { display: grid; gap: 2px; }
.mehr-nav a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; border-radius: var(--r);
  color: var(--auf-tief); text-decoration: none; font-size: 16px; }
.mehr-nav a svg { width: 20px; height: 20px; flex: none; stroke: currentColor; }
.mehr-nav a[aria-current="page"] { background: var(--tief-3); color: #fff; }
.mehr-nav a[aria-current="page"] svg { stroke: var(--orange-auf-tief); }
.mehr-nav .zahl { margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 11px; background: var(--orange-knopf); color: #fff;
  font-size: 12px; font-weight: 600; line-height: 22px; text-align: center; }
.mehr-fuss { display: grid; gap: 12px; margin-top: 14px; padding: 14px 12px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.mehr-fuss label { display: grid; gap: 4px; font-size: 13px; color: var(--auf-tief-leise); }
.mehr-fuss select { background: var(--tief-2); color: var(--auf-tief); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r);
  padding: 8px 10px; min-height: 44px; font: inherit; }

/* ---------- Kleinere Bildschirme: Tablet und Handy in der Werkstatt ---------- */
@media (max-width: 1180px) {
  .akte { grid-template-columns: 1fr; }
  .akte-seite { position: static; }
  .lage-spalten, .erkennen { grid-template-columns: 1fr; }
  .erkannt { position: static; }
}
@media (max-width: 900px) {
  .rahmen { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .leiste { position: sticky; top: 0; z-index: 20; height: auto; flex-direction: row; align-items: center; padding: 8px 12px 8px 16px; gap: 8px; overflow: visible; }
  .leiste-logo { padding: 0; }
  .leiste-logo img { width: 112px; }
  .leiste-strich, .nav-trenner, .kante, .leiste-fuss { display: none; }
  .wer-chip { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; min-height: 40px; padding: 0 14px 0 10px; border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .16); background: var(--tief-2); color: var(--auf-tief); font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .04em; cursor: pointer; }
  .wer-chip svg { width: 18px; height: 18px; stroke: currentColor; }
  /* Leiste unten: vier Bereiche + Mehr */
  .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
    background: var(--tief); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -1px 0 rgba(255, 255, 255, .06), 0 -10px 24px -14px rgba(0, 0, 0, .45); }
  .nav .nur-breit { display: none; }
  .nav a, .nav .nav-mehr { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 54px; padding: 6px 2px; font-size: 11px; font-weight: 500; letter-spacing: .02em; }
  .nav a span.txt, .nav .nav-mehr span.txt { display: block; white-space: nowrap; }
  .nav-mehr { border: 0; background: transparent; color: var(--auf-tief-leise); border-radius: var(--r); cursor: pointer; font: inherit; }
  .nav-mehr svg { width: 18px; height: 18px; stroke: currentColor; }
  .nav-mehr[aria-current="page"] { background: var(--tief-3); color: #fff; }
  .nav-mehr[aria-current="page"] svg { stroke: var(--orange); }
  .nav .zahl { position: absolute; top: 3px; left: calc(50% + 5px); margin: 0; min-width: 18px; padding: 0 5px; line-height: 18px; font-size: 11px; }
  .haupt { padding: 18px 16px calc(100px + env(safe-area-inset-bottom)); }
  .meldung { bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* Tippflächen ab 44 px: Zahlenzeile, Plan-Link im Kopfbalken; die Nummer in Listenzeilen ist hier kein eigenes Ziel */
  .tageszeile { line-height: 1.2; }
  .tageszeile a { display: inline-block; padding-block: 12px; }
  .im-plan { padding-block: 12px; }
  .eintrag .nr-link { pointer-events: none; border-bottom: 0; }
  .seitenkopf h1 { font-size: 30px; }
  .kopfbalken { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .kopfbalken .nr { font-size: 36px; }
  .raster-2, .raster-3, .werkstatt-fuss { grid-template-columns: 1fr; }
  .kette-kopf { display: none; }
  .schritt { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "h t n" "h e e"; padding: 6px 0; }
  .schritt .nr { grid-area: n; }
  .schritt .hak { grid-area: h; }
  .schritt .text { grid-area: t; }
  .schritt .krz, .schritt .dat { display: none; }
  .schritt .ein { grid-area: e; }
  .qc-liste { padding-left: 14px; }
  .strecke { grid-template-columns: repeat(4, minmax(250px, 82vw)); }
  .foto-slots { grid-template-columns: 1fr; }
  .blocktitel { line-height: 1.5; }
  .blocktitel .rechts { flex: none; max-width: 55%; }
  .reiter-zeile { flex-direction: column; align-items: stretch !important; }
  .reiter-zeile .reiter { width: 100%; }
  .reiter-zeile label, .reiter-zeile select { width: 100%; }
  .kennzahlen { gap: 18px; }
  .kennzahl b { font-size: 24px; }
  .lage-kopf { grid-template-columns: 1fr; }
  .lage-kopf h1 { font-size: 34px !important; }
  .qc-liste { padding: 8px 12px 12px; }
}
.tabelle td.fett { white-space: nowrap; }
@media (max-width: 640px) {
  .plan { flex-direction: column; overflow: visible; gap: 18px; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .station { flex: none; min-width: 0; max-width: none; min-height: 0; }
  .station.leer-station { display: none; }
  .station-kopf { min-height: 0; padding-bottom: 6px; }
  .station-fach { justify-content: flex-start; padding-top: 4px; }
  .plan-kompakt .station-fach { min-height: 0; }
  .plan-frei { display: block; margin: 12px 0 0; font-size: 13px; color: var(--leise); }
}

/* Hauspost — das Postfach zwischen Barts OS und dem UE-OS.
   Der Hinweis auf der Lage nimmt den stahlgrauen Kopfbalken des Projektbogens auf. */
.post-hinweis {
  display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-radius: var(--r);
  background: var(--tief); color: var(--auf-tief); text-decoration: none; box-shadow: var(--schatten);
  transition: background .2s var(--ease);
}
.post-hinweis > svg { width: 20px; height: 20px; stroke: var(--orange-auf-tief); flex: none; }
.post-hinweis-text { flex: 1; min-width: 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.post-hinweis .mit-pfeil { color: var(--auf-tief); font-weight: 600; white-space: nowrap; }
.post-hinweis:hover { background: var(--tief-2); }
.post-hinweis:focus-visible { outline: none; box-shadow: var(--fokus); }
.post-stapel { gap: 12px; }
.post { padding: 16px 18px; }
.post-neu { border-color: var(--orange); }
.post-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.post-betreff { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
.post .meta { color: var(--leise); font-size: 13px; line-height: 1.35; margin-top: 3px; }
.post-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; margin: 12px 0; }
.post-aktionen { margin-top: 6px; }
.post-antwort { display: grid; gap: 10px; margin-top: 14px; }
.post-fremd { margin: 12px 2px 0; }
.post-schreiben { padding: 18px; margin-bottom: 28px; }
.post-check { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.post-alt + .post-alt { border-top: 1px solid var(--linie-fein); }
.post-alt summary { display: grid; gap: 2px; padding: 12px 16px; cursor: pointer; list-style: none; }
.post-alt summary::-webkit-details-marker { display: none; }
.post-alt summary:hover { background: #fcfaf7; }
.post-alt summary:focus-visible { outline: none; box-shadow: inset var(--fokus); }
.post-alt .titel { font-weight: 500; }
.post-alt .meta { color: var(--leise); font-size: 13px; line-height: 1.35; }
.post-alt .post-text { margin: 0; padding: 0 16px 14px; font-size: 15px; color: var(--leise); }
@media (max-width: 640px) {
  .post-hinweis { flex-wrap: wrap; gap: 8px 12px; }
  .post-hinweis .mit-pfeil { margin-left: 34px; }
}

/* =====================================================================
   Zugang, Rollen, Freigaben, Sichtbarkeit, Schnittstellen (08.10.2026)
   ===================================================================== */

/* ---------- Anmeldung: Stahl links wie die Seitenleiste, Papier rechts wie der Bogen ---------- */
.zugang { min-height: 100vh; background: var(--grund); }
.zugang-flaeche { display: grid; grid-template-columns: minmax(300px, 38%) 1fr; min-height: 100vh; }
.zugang-stahl { position: relative; overflow: hidden; background: var(--tief); color: var(--auf-tief); padding: 48px 56px; display: flex; flex-direction: column; }
.zugang-stahl::after { content: ""; position: absolute; right: -170px; bottom: -150px; width: 560px; height: 580px; pointer-events: none;
  background: url("assets/monogramm.webp") no-repeat center / contain; opacity: .06; transform: rotate(-14deg); filter: invert(1); }
.zugang-logo { width: 190px; height: auto; display: block; }
.zugang-strich { width: 40px; border-top: 2px solid var(--orange); margin: 26px 0 22px; }
.zugang-satz { max-width: 26ch; margin: 0; font-size: 17px; line-height: 1.45; color: var(--auf-tief-leise); }
.zugang-kante { position: absolute; right: 18px; bottom: 48px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(243, 238, 231, .28); white-space: nowrap; }
.zugang-kante b { color: var(--orange-auf-tief); font-weight: 400; }
.zugang-papier { display: grid; grid-template-rows: auto 1fr auto; padding: 28px 36px; min-width: 0; }
.zugang-kopf { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.zugang-logo-hell { display: none; width: 132px; height: auto; margin-right: auto; }
.zugang-kopf .sprachwahl { width: 112px; }
.zugang-kopf .sprachwahl button { border-color: var(--linie); color: var(--leise); }
.zugang-kopf .sprachwahl button[aria-pressed="true"] { background: var(--tief); color: #fff; border-color: var(--tief); }
.zugang-form { align-self: center; justify-self: center; width: min(420px, 100%); padding: 24px 0 40px; }
.zugang-form h1 { font-family: var(--titel); font-weight: 400; font-size: 44px; line-height: 1.05; letter-spacing: -.01em; margin: 0 0 8px; text-wrap: balance; }
.zugang-form .punkt { color: var(--orange); }
.zugang-unter { margin: 0 0 26px; color: var(--leise); font-size: 16px; max-width: 42ch; }
.zugang-form form { display: grid; gap: 16px; }
.zugang-form .feld input { min-height: 46px; font-size: 16px; }
.passwort-zeile { position: relative; display: block; }
.passwort-zeile input { width: 100%; padding-right: 92px; }
.passwort-zeile .knopf { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 36px; }
.knopf.breit { width: 100%; justify-content: center; min-height: 48px; font-size: 16px; }
.knopf.beschaeftigt { opacity: .6; cursor: progress; }
.zugang-fehler { margin: 0; padding: 10px 12px; border-radius: var(--r); background: var(--kritisch-flaeche); color: var(--kritisch); font-size: 14px; }
.zugang-hilfe { margin: 22px 0 0; }
.zugang-fuss { margin: 0; color: var(--leise); text-align: right; }
.zugang-person { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 20px; border: 1px solid var(--linie-fein);
  border-radius: var(--r); background: var(--papier); }
.code-eingabe { font-size: 24px !important; letter-spacing: .3em; font-variant-numeric: tabular-nums; text-align: center; max-width: 200px; }
.zf-schritte { margin: 0; padding: 0; list-style: none; counter-reset: zf; display: grid; gap: 18px; }
.zf-schritte > li { counter-increment: zf; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; row-gap: 4px; }
.zf-schritte > li::before { content: counter(zf); grid-row: span 4; width: 30px; height: 30px; border-radius: var(--r); border: 1.5px solid var(--orange);
  color: var(--orange-text); display: grid; place-items: center; font-weight: 600; }
.zf-schritte > li > * { grid-column: 2; }
.zf-schluessel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.zf-schluessel code { font-size: 15px; letter-spacing: .08em; background: var(--creme); padding: 8px 10px; border-radius: var(--r); color: var(--tief); overflow-wrap: anywhere; }
.zf-app { justify-self: start; margin-top: 6px; }
.zf-qr-zeile { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin-top: 8px; }
.zf-qr { width: 156px; height: 156px; flex: none; border: 1px solid var(--linie); border-radius: var(--r); }
.zf-qr rect { fill: var(--papier); }
.zf-qr path { fill: var(--tief); }
.zf-oder { display: grid; gap: 2px; flex: 1; min-width: 200px; }
.zf-oder .zf-schluessel { margin-top: 2px; }
#zf-platz .zf-schritte { margin-top: 4px; }
@media (min-width: 901px) { .zf-app { display: none; } }

/* ---------- Seitenleiste: angemeldete Person statt „Ich bin“ ---------- */
.ich-block { display: grid; gap: 8px; }
.ich-zeile { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ich-zeile .lb-stempel { width: 38px; height: 30px; flex: none; color: var(--text); }
.ich-name { color: var(--auf-tief); font-size: 14px; font-weight: 500; line-height: 1.25; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ich-rolle { color: var(--auf-tief-leise); font-size: 12px; font-weight: 400; }
.ich-ab { justify-self: start; min-height: 34px; padding: 0 2px; border: 0; background: none; color: var(--auf-tief-leise); font: inherit; font-size: 13px;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(227, 128, 68, .6); }
.ich-ab:hover { color: var(--auf-tief); }
.mehr-fuss .ich-block { grid-template-columns: 1fr auto; align-items: center; }
.mehr-fuss .ansicht-umschalten { background: var(--tief-2); color: var(--auf-tief); border-color: rgba(255, 255, 255, .12); min-height: 44px; }
.ansicht-chip { display: none; }

/* ---------- Lage je Rolle ---------- */
.lage-titel { font-family: var(--titel); font-weight: 400; font-size: 44px; line-height: 1.05; margin: 0; text-wrap: balance; }
.lage-titel .punkt, .kompakt-kopf .punkt { color: var(--orange); }
.geldzeile { margin: 4px 0 18px; }
.geldzeile a b { color: var(--tief); }

/* Anträge: der Zettel am Klemmbrett — Nummer, wer, alt durchgestrichen, neu fett */
.antraege { display: grid; gap: 10px; }
.antrag { background: var(--papier); border: 1px solid var(--linie-fein); border-radius: var(--r); padding: 14px 16px; }
.antrag-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.antrag-nr { font-weight: 700; letter-spacing: .04em; color: var(--tief); text-decoration: none; border-bottom: 1px dashed var(--orange); }
.antrag-kunde { font-weight: 500; }
.antrag-wer { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--leise); font-size: 13px; }
.antrag-wer .lb-stempel { width: 32px; height: 24px; font-size: 11px; }
.antrag-diff { margin: 10px 0 0; }
.antrag-fuss { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--linie); }
.antrag-nein { flex: 0 1 auto; }
.antrag-nein[open] { flex: 1 1 100%; }
.antrag-nein > summary { list-style: none; display: inline-flex; }
.antrag-nein > summary::-webkit-details-marker { display: none; }
.antrag.kompakt { padding: 12px 14px; }
.akte-antraege { margin: -6px 0 22px; }
.akte-antraege .antrag { border-color: var(--orange); }
.antrag.wartend { border-style: dashed; border-color: var(--linie); }
.akte-antraege .antrag.wartend { border-color: var(--orange); }

/* Zahlungsplan als Strich: 30 · 40 · 30, bezahlt in Orange, offen als Haarlinie */
.zahlstrich { display: inline-flex; gap: 3px; width: 92px; height: 6px; vertical-align: middle; }
.zahlstrich .zs { border-radius: 4px; background: var(--linie-fein); box-shadow: inset 0 0 0 1px var(--linie); }
.zahlstrich .zs.ok { background: var(--orange); box-shadow: none; }
.status-rechts { display: grid; justify-items: end; gap: 6px; }
.zahlstand { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.zahl-text { font-size: 12px; font-weight: 600; color: var(--leise); min-width: 64px; text-align: right; }
.zahl-legende { margin: -4px 0 10px; }

/* Produktion: „Als Nächstes“ — Teilnummer wie auf der Marke, Schritt fett, Station rechts */
.arbeit-liste { display: grid; }
.arbeit { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px;
  border-top: 1px solid var(--linie-fein); color: inherit; text-decoration: none; transition: background .15s var(--ease); }
.arbeit:first-child { border-top: 0; }
.arbeit:hover { background: #fcfaf7; }
.arbeit-nr { display: grid; place-items: center; min-height: 34px; padding: 0 8px; border-radius: var(--r); background: var(--tief); color: #fff;
  font-weight: 700; font-size: 14px; letter-spacing: .04em; white-space: nowrap; }
.arbeit.wartet .arbeit-nr { background: var(--wartet); }
.arbeit-text { display: grid; gap: 2px; min-width: 0; }
.arbeit-text b { font-weight: 600; }
.arbeit-text .meta { color: var(--leise); font-size: 14px; }
.arbeit-rechts { display: grid; justify-items: end; gap: 4px; }
.arbeit-tage { white-space: nowrap; }
.arbeit-tage-mobil { display: none; }
.arbeit-nr { justify-self: start; min-width: 0; }
.arbeit.gross { min-height: 72px; }
.arbeit.gross .arbeit-text b { font-size: 17px; }

.liefer { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--linie-fein); }
.liefer:first-child { border-top: 0; }
.liefer-tag { display: grid; justify-items: center; gap: 0; padding: 6px 7px; border: 1.5px solid var(--orange); border-radius: var(--r); }
.liefer-tag b { font-size: 16px; }
.liefer-tag span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-text); font-weight: 600; }
.liefer-was { display: grid; gap: 3px; min-width: 0; }
.liefer-adr { display: inline-flex; gap: 6px; align-items: flex-start; font-size: 14px; }
.liefer-adr svg { width: 16px; height: 16px; flex: none; stroke: var(--leise); margin-top: 2px; }
.liefer-tel svg { width: 16px; height: 16px; }

/* ---------- Kompakt (Handy): nur das Gröbste, ein Tipp zur vollen Ansicht ---------- */
.kompakt-kopf { margin-bottom: 18px; }
.kompakt-kopf .lage-titel { font-size: 34px; }
.kompakt-suche { margin-bottom: 14px; }
.kompakt-suche input { min-height: 48px; font-size: 16px; }

/* ---------- Einstellungen (Backend) ---------- */
.lead-klein { margin: 0 0 18px; color: var(--leise); max-width: 78ch; }
.benutzer-tabelle { display: grid; }
.bt-kopf, .bt-zeile { display: grid; grid-template-columns: minmax(0, 1.3fr) 190px 290px 150px 220px;
  gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--linie-fein); }
.bt-kopf { border-top: 0; background: var(--creme); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leise);
  padding-block: 10px; border-radius: var(--r) var(--r) 0 0; }
.bt-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bt-person .lb-stempel { width: 38px; height: 30px; flex: none; }
.bt-aktionen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.chip.klein { min-height: 32px; padding: 3px 10px; font-size: 13px; }
.chip:disabled { opacity: .45; cursor: not-allowed; }
.chip[aria-pressed="true"]:disabled { opacity: .8; }
.einladung-panel { grid-column: 1 / -1; padding: 12px 14px; border-radius: var(--r); background: var(--orange-flaeche); }
.neu-person { margin-top: 16px; }
.neu-person > summary { list-style: none; display: inline-flex; }
.neu-person > summary::-webkit-details-marker { display: none; }
.sicht-matrix { display: grid; }
.sm-kopf, .sm-zeile { display: grid; grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(110px, 1fr)); gap: 12px; align-items: center; padding: 12px 16px;
  border-top: 1px solid var(--linie-fein); }
.sm-kopf { border-top: 0; background: var(--creme); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leise);
  border-radius: var(--r) var(--r) 0 0; }
.sm-kopf span:not(:first-child), .sm-zeile span:not(:first-child) { text-align: center; }
.haken-gross { width: 22px; height: 22px; cursor: pointer; }
.haken-gross:disabled { cursor: not-allowed; opacity: .6; }
.link-knopf { border: 0; background: none; padding: 0; font: inherit; color: var(--orange-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Akte: Sichtbarkeit (Auge) und beantragte Felder ---------- */
.mit-sicht { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mit-sicht .sicht-knopf { margin-left: auto; }
.sicht-knopf { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 2px 9px; border-radius: 12px; border: 1px solid var(--linie);
  background: var(--papier); color: var(--leise); font: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer; white-space: nowrap; }
.sicht-knopf svg { width: 15px; height: 15px; stroke: currentColor; flex: none; }
.sicht-knopf:hover { border-color: #bfb3a3; color: var(--text); }
.sicht-knopf.abweichend { border-color: var(--orange); color: var(--orange-text); background: var(--orange-flaeche); }
.sicht-knopf[aria-expanded="true"] { background: var(--tief); color: #fff; border-color: var(--tief); }
.sicht-knopf.klein { min-height: 26px; padding: 1px 7px; font-size: 11px; }
.sicht-panel { margin: 8px 0 12px; padding: 12px; border: 1px solid var(--linie); border-radius: var(--r); background: var(--papier);
}
.sp-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.sp-kopf .lbl { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-text); }
.sp-kopf b { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.sp-kopf .knopf { margin-left: auto; min-height: 32px; padding: 0 8px; }
.sp-kopf .knopf svg { width: 16px; height: 16px; margin: 0; }
.sp-personen { display: grid; gap: 6px; margin-top: 10px; }
.sp-person { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 150px); align-items: center; gap: 8px; font-size: 14px; }
.sp-person .lb-stempel { width: 34px; height: 26px; font-size: 11px; }
.sp-person select { min-height: 34px; }
.dateiliste { display: grid; gap: 2px; }
.datei-zeile { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.datei-zeile > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datei-zeile .sicht-knopf { margin-left: auto; }
.beantragt input, .beantragt textarea, .beantragt select { border-style: dashed; border-color: var(--orange); background: var(--orange-flaeche); }
.beantragt-wert { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--orange-text); }
.termin-antrag { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--orange-auf-tief); border-top: 1px dashed rgba(227, 128, 68, .6); padding-top: 4px; }
[aria-disabled="true"], .chip:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; }

/* ---------- Schnittstellen: Leitungsplan aus dem Organigramm ---------- */
.si-liste { display: grid; }
.si { border-top: 1px solid var(--linie-fein); }
.si:first-child { border-top: 0; }
.si-kopf { width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1.4fr) minmax(0, 1fr) 96px 20px; gap: 14px; align-items: center;
  padding: 12px 16px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background .15s var(--ease); }
.si-kopf:hover { background: #fcfaf7; }
.si-nr { display: grid; place-items: center; min-height: 28px; border-radius: 12px; background: var(--tief); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.si-name { display: grid; gap: 2px; min-width: 0; }
.si-name b { font-weight: 600; }
.si-name .meta { color: var(--leise); font-size: 13px; }
.si-weg { display: inline-flex; align-items: center; gap: 6px; }
.si-richtung { width: 18px; height: 18px; stroke: var(--leise); flex: none; }
.si-pfeil { width: 18px; height: 18px; stroke: var(--leise); transition: transform .2s var(--ease); }
.si.auf .si-pfeil { transform: rotate(90deg); }
.si.auf .si-kopf { background: var(--creme); }
.si-inhalt { padding: 4px 16px 18px 82px; }
.si-text { margin: 8px 0 14px; max-width: 72ch; color: var(--leise); }
.si-felder { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.hinterlegt { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-style: normal; color: var(--ok); letter-spacing: .04em; }
.hinterlegt svg { width: 13px; height: 13px; stroke: currentColor; }

@media (max-width: 1100px) {
  .bt-kopf { display: none; }
  .bt-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "p z" "r rr" "a a"; row-gap: 10px; }
  .bt-zeile > :nth-child(1) { grid-area: p; }
  .bt-zeile > :nth-child(2) { grid-area: r; }
  .bt-zeile > :nth-child(3) { grid-area: rr; }
  .bt-zeile > :nth-child(4) { grid-area: z; justify-self: end; text-align: right; }
  .bt-zeile > :nth-child(5) { grid-area: a; justify-content: flex-start; }
  .bt-zeile > .einladung-panel { grid-area: auto; grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .bt-zeile { grid-template-columns: 1fr; grid-template-areas: "p" "z" "r" "rr" "a"; }
  .bt-zeile > :nth-child(4) { justify-self: start; text-align: left; }
}
@media (max-width: 900px) {
  .zugang-flaeche { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .zugang-stahl { padding: 18px 16px; flex-direction: row; align-items: center; gap: 14px; }
  .zugang-stahl::after, .zugang-kante, .zugang-satz, .zugang-strich { display: none; }
  .zugang-logo { width: 128px; }
  .zugang-papier { padding: 16px; }
  .zugang-kopf { position: absolute; top: 18px; right: 16px; }
  .zugang-kopf .sprachwahl button { border-color: rgba(255, 255, 255, .16); color: var(--auf-tief-leise); }
  .zugang-kopf .sprachwahl button[aria-pressed="true"] { background: var(--auf-tief); color: var(--tief); }
  .zugang-form { align-self: start; padding-top: 18px; }
  .zugang-form h1 { font-size: 34px; }
  .zugang-fuss { text-align: left; }
  .ansicht-chip { display: inline-flex; align-items: center; margin-left: auto; min-height: 40px; padding: 0 12px; border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: var(--auf-tief-leise); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
  .ansicht-chip + .wer-chip { margin-left: 0; }
  .lage-titel { font-size: 34px; }
  .arbeit { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "nr rechts" "text text"; row-gap: 8px; }
  .arbeit-nr { grid-area: nr; }
  .arbeit-text { grid-area: text; }
  .arbeit-rechts .arbeit-tage { display: none; }
  .arbeit-tage-mobil { display: block; }
  .arbeit-rechts { grid-area: rechts; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 8px; }
  .liefer { grid-template-columns: 76px minmax(0, 1fr); }
  .liefer-tel { grid-column: 1 / -1; justify-content: center; min-height: 44px; }
  .antrag-wer { margin-left: 0; width: 100%; }
  .sm-kopf, .sm-zeile { grid-template-columns: minmax(0, 1.6fr) repeat(3, 56px); padding: 10px 12px; font-size: 14px; }
  .sm-kopf { font-size: 11px; letter-spacing: .04em; }
  .si-kopf { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .si-weg, .si-pfeil { display: none; }
  .si-inhalt { padding: 4px 16px 18px; }
  .sp-person { grid-template-columns: 34px 1fr; }
  .sp-person select { grid-column: 1 / -1; }
  body.kompakt .haupt::after { display: none; }
}

.haken-zeile { display: flex; gap: 10px; align-items: flex-start; flex-wrap: nowrap; margin: 0; }
.haken-zeile input { margin-top: 3px; flex: none; width: 18px; height: 18px; }

.akte-seite > *, .akte-seite .kasten { min-width: 0; }
.sicht-panel { max-width: 100%; }
.sp-kopf { align-items: flex-start; }
.si-kopf > .marke { justify-self: end; }

@media (max-width: 640px) {
  .liste > .status-zeile { grid-template-columns: 1fr; }
  .status-zeile .status-rechts { display: flex; align-items: center; justify-content: flex-start; gap: 12px; }
}

/* Buchhaltung (Holded) im Briefing des Vorstands */
.rost { color: var(--kritisch); }
.buchhaltung .tageszeile { margin: 0 0 12px; }
.buchhaltung-fuss { margin-top: 12px; }

/* ---------- Claude: großer oranger Reiter und Sitzungen wie in Claude Code ---------- */
/* Bewusste Ausnahme von der Signaturstrich-Regel (Barts Vorgabe): Claude ist ein großer oranger Reiter ganz oben in der Leiste. */
.nav a.claude-reiter { background: var(--orange-knopf); color: #fff; min-height: 52px; font-size: 16px; font-weight: 600; letter-spacing: .02em; margin-bottom: 12px; }
.nav a.claude-reiter svg { width: 20px; height: 20px; stroke: #fff; }
.nav a.claude-reiter:hover { background: var(--orange-text); color: #fff; }
.nav a.claude-reiter[aria-current="page"] { background: var(--orange-text); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.nav a.claude-reiter[aria-current="page"] svg { stroke: #fff; }

.haupt:has(.cl-seite) { padding-bottom: 24px; }
.cl-seite { display: flex; flex-direction: column; height: calc(100vh - 52px); min-height: 520px; }
.cl-kopf { flex: none; margin-bottom: 18px; }
.cl-kopf .unter { max-width: 78ch; }
.cl-app { flex: 1; min-height: 0; display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 24px; }

/* Sitzungen */
.cl-sitzungen { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.cl-neu { width: 100%; justify-content: flex-start; }
.cl-person select { width: 100%; }
.cl-liste { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 2px; padding-right: 4px; }
.cl-liste-leer { margin: 8px 10px; }
.cl-gruppe { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); padding: 14px 10px 6px; }
.cl-gruppe:first-child { padding-top: 4px; }
.cl-eintrag { display: grid; gap: 2px; padding: 9px 10px; border-radius: var(--r); text-decoration: none; color: var(--text); transition: background .15s var(--ease); }
.cl-eintrag:hover { background: rgba(50, 49, 47, .05); }
.cl-eintrag[aria-current="page"] { background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie-fein); }
.cl-e-titel { font-size: 15px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-e-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--leise); font-variant-numeric: tabular-nums; }
.cl-e-meta .marke { font-size: 11px; padding: 1px 8px; }

/* Gespräch */
.cl-gespraech { display: flex; flex-direction: column; min-height: 0; background: var(--papier); border: 1px solid var(--linie-fein); border-radius: var(--r); }
.cl-gkopf { flex: none; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 20px; border-bottom: 1px solid var(--linie-fein); }
.cl-titel { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-zur-liste { display: none; }
.cl-verlauf { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 28px 14px; display: flex; flex-direction: column; gap: 14px; }
.cl-verlauf > * { width: 100%; max-width: 78ch; margin-inline: auto; }

.cl-du { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; background: var(--creme); border-radius: var(--r); padding: 12px 14px; }
.cl-du .lb-stempel { margin-top: 1px; }
.cl-du-text { line-height: 1.55; overflow-wrap: anywhere; }

.cl-claude { line-height: 1.6; overflow-wrap: anywhere; }
.cl-claude p { margin: 0 0 .7em; }
.cl-claude > :last-child { margin-bottom: 0; }
.cl-claude ul, .cl-claude ol { margin: 0 0 .7em; padding-left: 1.3em; }
.cl-claude li { margin: .2em 0; }
.cl-claude li::marker { color: var(--orange); }
.cl-claude h3 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tief); margin: 1.1em 0 .45em; }
.cl-claude b { font-weight: 600; }
.cl-claude code { background: var(--creme); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.cl-claude a { color: var(--orange-text); text-underline-offset: 3px; }
.cl-claude a.nr-link { text-decoration: none; border-bottom: 1px dashed var(--orange); font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-code { margin: 0 0 .7em; background: var(--creme); padding: 10px 12px; border-radius: var(--r); overflow-x: auto; font-size: 13px; line-height: 1.5; }

/* Arbeitsschritte (Werkzeuge) — wie die Zeilen in Claude Code, aufklappbar */
.cl-schritt { margin-block: -6px; }
.cl-schritt > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 10px; border-radius: var(--r);
  font-size: 14px; color: var(--leise); cursor: pointer; }
.cl-schritt > summary::-webkit-details-marker { display: none; }
.cl-schritt > summary:hover { background: rgba(50, 49, 47, .04); }
.cl-s-titel { flex: none; color: var(--text); font-weight: 500; }
.cl-s-ziel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-s-status { margin-left: auto; flex: none; font-size: 12px; font-weight: 600; }
.cl-schritt.offen .cl-s-status { color: var(--orange-text); }
.cl-schritt.fehler .cl-s-status { color: var(--kritisch); }
.cl-zeichen { width: 18px; height: 18px; flex: none; display: grid; place-items: center; }
.cl-zeichen svg { width: 16px; height: 16px; stroke: currentColor; }
.cl-zeichen.ok { color: var(--ok); }
.cl-zeichen.rot { color: var(--kritisch); }
.cl-zeichen.still { color: var(--zart); }
.cl-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: cl-puls 1.2s ease-in-out infinite; }
.cl-ring { width: 12px; height: 12px; border-radius: 50%; border: 1.5px dashed var(--orange); }
.cl-s-inhalt { margin: 2px 0 10px 38px; padding: 10px 12px; background: var(--grund); border: 1px solid var(--linie-fein); border-radius: var(--r); }
.cl-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.cl-s-inhalt pre, .cl-f-punkt pre { margin: 4px 0 10px; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.45; }
.cl-s-inhalt pre:last-child { margin-bottom: 0; }

/* Freigabe: Claude fragt vor jeder Änderung — vorläufig, also gestrichelt */
.cl-freigabe { display: grid; gap: 12px; padding: 14px 16px; border: 1px dashed var(--orange); border-radius: var(--r); background: var(--papier); }
.cl-f-kopf { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.cl-f-kopf svg { width: 20px; height: 20px; stroke: var(--orange-text); flex: none; }
.cl-f-kopf b { font-weight: 600; }
.cl-f-titel { font-weight: 600; font-size: 14px; }
.cl-f-punkt dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 14px; }
.cl-f-punkt dt { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); padding-top: 3px; }
.cl-f-punkt dd { margin: 0; overflow-wrap: anywhere; }
.cl-f-punkt dd pre { margin: 0; }
.cl-f-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--linie); }
.cl-f-fuss .klein { flex: 1 1 220px; }

/* Claude arbeitet: ein Hobel fährt über die Werkbank-Linie */
.cl-arbeitet { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--leise); }
.cl-linie { position: relative; width: 64px; height: 2px; flex: none; overflow: hidden; background: var(--linie-fein); border-radius: 1px; }
.cl-linie::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--orange); transform: translateX(-100%); animation: cl-hobel 1.3s cubic-bezier(.65, 0, .35, 1) infinite; }
.cl-cursor { display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: text-bottom; background: var(--orange); animation: cl-blinken 1s steps(1) infinite; }
@keyframes cl-hobel { to { transform: translateX(250%); } }
@keyframes cl-puls { 50% { opacity: .35; } }
@keyframes cl-blinken { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cl-linie::after { animation: none; transform: none; width: 100%; opacity: .6; }
  .cl-punkt, .cl-cursor { animation: none; }
}
.cl-fehler { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--r); background: var(--kritisch-flaeche); color: #6f2412; font-size: 14px; }
.cl-fehler svg { width: 16px; height: 16px; stroke: currentColor; flex: none; margin-top: 2px; }

/* Start einer Sitzung */
.cl-start { margin-block: auto; padding: 12px 0 24px; }
.cl-start-titel { font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0 0 8px; }
.cl-start p { margin: 0 0 16px; max-width: 64ch; }
.cl-vorschlaege { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-vorschlag { min-height: 36px; padding: 6px 14px; border-radius: 18px; border: 1px solid var(--linie); background: var(--papier); color: var(--text);
  font-size: 14px; cursor: pointer; text-align: left; transition: border-color .15s var(--ease), background .15s var(--ease); }
.cl-vorschlag:hover { border-color: #bfb3a3; background: #fffdfb; }
.cl-vorschlag:focus-visible { outline: none; box-shadow: var(--fokus); }

/* Eingabe */
.cl-eingabe { flex: none; display: grid; gap: 6px; width: min(calc(100% - 40px), calc(78ch + 26px)); margin: 4px auto 18px; padding: 10px 12px 8px;
  background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.cl-eingabe:focus-within { border-color: var(--orange); box-shadow: var(--fokus); }
.cl-eingabe textarea { display: block; width: 100%; min-height: 28px; max-height: 220px; padding: 4px 2px; border: 0; outline: 0; resize: none;
  background: transparent; font-size: 16px; line-height: 1.5; }
.cl-eingabe textarea::placeholder { color: var(--zart); }
.cl-eingabe textarea:focus-visible { box-shadow: none; }  /* der Fokusring liegt am ganzen Eingabekasten */
.cl-e-fuss { display: flex; align-items: center; gap: 10px; }
.cl-modell { height: 34px; max-width: 46%; padding: 0 8px; border: 1px solid var(--linie); border-radius: var(--r); background: var(--papier); font-size: 13px; color: var(--text); }
.cl-modell:focus-visible { outline: none; border-color: var(--orange); box-shadow: var(--fokus); }
.cl-tipp { margin-left: auto; white-space: nowrap; }
.cl-e-fuss .knopf { flex: none; }
.cl-nurlesen { flex: none; padding: 12px 20px 16px; border-top: 1px solid var(--linie-fein); }

@media (max-width: 1100px) { .cl-app { grid-template-columns: 236px minmax(0, 1fr); gap: 18px; } .cl-tipp { display: none; } .cl-e-fuss .knopf { margin-left: auto; } }

@media (max-width: 900px) {
  /* Claude sitzt in der Mitte der Handy-Leiste, mit oranger Fläche hinter dem Symbol */
  .nav > * { order: var(--o, 50); }
  .nav .nav-mehr { order: 99; }
  .nav a.claude-reiter { background: transparent; min-height: 54px; margin: 0; font-size: 11px; font-weight: 600; box-shadow: none; }
  .nav a.claude-reiter svg { box-sizing: content-box; width: 18px; height: 18px; padding: 4px 14px; border-radius: 14px; background: var(--orange-knopf); }
  .nav a.claude-reiter[aria-current="page"] { background: var(--tief-3); box-shadow: none; }
  .nav a.claude-reiter:hover { background: var(--tief-2); }

  .haupt:has(.cl-seite) { padding-top: 12px; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .cl-seite { height: calc(100dvh - 56px - 12px - 76px - env(safe-area-inset-bottom)); min-height: 380px; }
  .cl-kopf { margin-bottom: 10px; }
  .cl-kopf h1 { font-size: 26px; }
  .cl-kopf .unter { display: none; }
  .cl-app { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cl-sitzungen { display: none; }
  .cl-app.liste-offen .cl-sitzungen { display: flex; }
  .cl-app.liste-offen .cl-gespraech { display: none; }
  .cl-zur-liste { display: inline-flex; margin-left: -8px; }
  .cl-gkopf { padding: 6px 12px; min-height: 48px; gap: 8px; }
  .cl-verlauf { padding: 16px 14px 10px; }
  .cl-eingabe { width: calc(100% - 20px); margin: 4px auto 10px; }
  .cl-modell { max-width: 60%; }
  .cl-s-inhalt { margin-left: 0; }
  .cl-f-punkt dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cl-f-punkt dd { margin-bottom: 6px; }
}

/* ---------- Neukunde und Angebote (11.10.2026) ---------- */
.nk-form { padding: 18px; display: grid; gap: 14px; max-width: 900px; }
.nk-felder em, .ang-teil em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; }
.nk-fehler, .ang-fehler { margin: 0; padding: 10px 12px; border-radius: var(--r); background: var(--kritisch-flaeche); color: #6f2412; font-size: 14px; }
.nk-fuss, .ang-fuss { gap: 14px; }
.nk-dub { display: grid; gap: 8px; }
.nk-dub-liste { display: grid; gap: 6px; }
.nk-dub-liste .zeile { justify-content: space-between; }
.nk-fertig { padding: 20px; display: grid; gap: 16px; max-width: 900px; }
.nk-fertig-kopf { display: flex; align-items: center; gap: 14px; font-size: 17px; }
.nk-fertig-kopf > svg { width: 30px; height: 30px; stroke: var(--ok); flex: none; }
.nk-fertig-wege { gap: 10px; }

/* Karte: ein Angebot auf Lage, Freigaben, Liste — wartend = gestrichelt (vorläufig), wie der Antrag */
.ang-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ang-karte { display: grid; gap: 8px; padding: 14px 16px; background: var(--papier); border: 1px solid var(--linie-fein); border-radius: var(--r); }
.ang-karte.wartend { border: 1px dashed var(--orange); }
.ang-karte-kopf { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ang-nr { font-weight: 700; letter-spacing: .04em; font-size: 16px; color: var(--tief); text-decoration: none; border-bottom: 1px dashed var(--orange); font-variant-numeric: tabular-nums; }
.ang-nr:hover { color: var(--orange-text); }
.ang-kunde { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ang-karte-mitte { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ang-titel { color: var(--leise); font-size: 14px; min-width: 0; }
.ang-betrag { font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ang-karte-wer { display: flex; align-items: center; gap: 8px; }
.ang-karte-wer .lb-stempel { min-width: 32px; height: 24px; font-size: 11px; }
.ang-karte-fuss { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--linie); }
.ang-karte:not(.wartend) .ang-karte-fuss { border-top-style: solid; border-top-color: var(--linie-fein); }
.ang-nr-klein { font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ang-mini { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: inherit; text-decoration: none; padding: 4px 0; }
.ang-mini b { letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ang-mini:hover b { color: var(--orange-text); }

/* Erstellen */
.ang-editor { display: grid; gap: 18px; max-width: 980px; }
.ang-teil { padding: 18px; display: grid; gap: 14px; align-content: start; }
.ang-teil > .blocktitel { margin: 0; }
.ang-teil > .knopf { justify-self: start; }
.ang-kunde-wahl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; }
.ang-kunde-wahl .lb-stempel { min-width: 44px; }
.ang-vorgang { max-width: 520px; }
.ang-positionen { display: grid; gap: 10px; }
.ang-pos { display: grid; grid-template-columns: minmax(0, 1fr) 90px 160px 42px; gap: 10px; align-items: end; padding-bottom: 10px; border-bottom: 1px solid var(--linie-fein); }
.ang-pos textarea { min-height: 64px !important; }
.ang-pos-menge input, .ang-pos-preis input { text-align: right; font-variant-numeric: tabular-nums; }
.ang-pos-weg { width: 42px; padding: 0; justify-content: center; }
.ang-pos-weg svg { width: 16px; height: 16px; }
.ang-produkte .chip { min-height: 36px; }
.ang-rechnung { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; }
.ang-rechnung > .klein { grid-column: 1 / -1; margin: 0; }
.ang-felder-klein { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-content: start; }
.ang-summe { display: grid; gap: 6px; align-content: start; font-variant-numeric: tabular-nums; }
.ang-summe-zeile { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.ang-summe-zeile.gesamt { margin-top: 4px; padding-top: 8px; border-top: 2px solid var(--orange); font-size: 19px; font-weight: 600; }
.ang-raten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; padding: 10px 12px; background: var(--creme); border-radius: var(--r); font-size: 13px; line-height: 1.4; }
.ang-raten b { font-weight: 600; }

/* Ein Angebot */
.ang-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.ang-haupt, .ang-seite { display: grid; gap: 18px; }
.ang-status { display: grid; gap: 14px; padding: 16px 18px; border-radius: var(--r); background: var(--papier); border: 1px solid var(--linie-fein); }
.ang-status.wartend { border: 1px dashed var(--orange); background: var(--orange-flaeche); }
.ang-status.bereit { border-color: var(--ok); }
.ang-status.abgelehnt { border-color: var(--kritisch); background: var(--kritisch-flaeche); }
.ang-status-kopf { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; }
.ang-status-kopf > svg { width: 22px; height: 22px; flex: none; margin-top: 1px; stroke: var(--orange-text); }
.ang-status.bereit .ang-status-kopf > svg { stroke: var(--ok); }
.ang-status.abgelehnt .ang-status-kopf > svg { stroke: var(--kritisch); }
.ang-status-kopf b { font-weight: 600; font-size: 16px; }
.ang-wege { display: flex; flex-wrap: wrap; gap: 8px; }
.ang-mail { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--linie-fein); }
.ang-mail textarea { min-height: 170px !important; }
.ang-vermerk summary { cursor: pointer; color: var(--leise); width: fit-content; }
.ang-vermerk summary:hover { color: var(--text); }
.ang-nein summary { list-style: none; }
.ang-nein summary::-webkit-details-marker { display: none; }
.ang-pos-liste { display: grid; }
.ang-pos-zeile { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 110px; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linie-fein); align-items: baseline; }
.ang-pos-nr { color: var(--zart); font-variant-numeric: tabular-nums; }
.ang-pos-m { color: var(--leise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ang-pos-b { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ang-fakten { gap: 12px; }
.ang-fakt { display: grid; gap: 2px; }
.ang-fakt span { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.ang-fakt b { font-weight: 500; overflow-wrap: anywhere; }
.ang-versand-zeile { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.ang-versand-zeile .lb-stempel { flex: none; }

/* Handy: kompakte Startseite mit den zwei großen Wegen */
.kompakt-aktionen { display: grid; gap: 8px; margin: 4px 0 18px; }

@media (max-width: 1180px) { .ang-detail { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .ang-rechnung { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .ang-pos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px; }
  .ang-pos-text { grid-column: 1 / -1; }
  .ang-karten { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .breit-handy { width: 100%; justify-content: center; min-height: 48px; }
  .nk-form, .ang-teil { padding: 14px; }
  .nk-form input, .nk-form select, .ang-teil input, .ang-teil select { min-height: 46px; font-size: 16px; }
  .ang-raten { grid-template-columns: minmax(0, 1fr); }
  .ang-pos-zeile { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .ang-pos-zeile .ang-pos-b { grid-column: 2 / -1; }
}

/* ---------- Mein Tag: einsprechen, Tagesroutine, Tagesabschluss (Pflicht an jedem Arbeitstag) ---------- */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tag-datum { color: var(--text); font-weight: 500; }
/* Die drei Pflichten als Stationen auf der Werkbank-Linie */
.tag-pflicht { list-style: none; margin: 0 0 8px; padding: 0 0 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  border-bottom: 2px solid var(--orange); max-width: 900px; }
.tag-pflicht li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tag-pflicht b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.tag-wert { display: block; font-size: 13px; color: var(--leise); }
.tag-haken { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1.5px solid var(--linie); border-radius: var(--r);
  background: var(--papier); color: var(--leise); font-size: 14px; font-weight: 700; }
.tag-haken svg { width: 18px; height: 18px; stroke: var(--papier); stroke-width: 2.2; }
.tag-pflicht li.ok .tag-haken { background: var(--ok); border-color: var(--ok); }
.tag-serie { margin: 0 0 22px; font-size: 14px; color: var(--leise); }
.tag-raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 28px; align-items: start; max-width: 1180px; }
/* Einsprechen */
.tag-diktat { padding: 16px; display: grid; gap: 12px; }
.tag-diktat-kopf { display: flex; align-items: center; gap: 16px; }
.tag-mikro { position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--orange-knopf); color: #fff; transition: background .18s var(--ease), transform .12s var(--ease); }
.tag-mikro svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 1.8; }
.tag-mikro:hover { background: var(--orange-text); }
.tag-mikro:active { transform: scale(.97); }
.tag-mikro:focus-visible { box-shadow: var(--fokus); border-radius: 50%; }
.tag-mikro.hoert { background: var(--tief); }
.tag-mikro.hoert svg { stroke: var(--orange-auf-tief); }
.tag-mikro.hoert::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--orange); animation: tag-hoert 1.4s var(--ease) infinite; }
@keyframes tag-hoert { 0% { opacity: .9; transform: scale(.94); } 70% { opacity: 0; transform: scale(1.18); } 100% { opacity: 0; transform: scale(1.18); } }
.tag-mikro-text { display: grid; gap: 2px; min-width: 0; }
.tag-mikro-text b { font-size: 17px; font-weight: 600; }
.tag-mikro-text span { font-size: 14px; color: var(--leise); line-height: 1.4; }
.tag-diktat textarea { width: 100%; min-height: 140px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: var(--r); background: var(--papier);
  font-size: 16px; line-height: 1.55; resize: vertical; }
.tag-diktat textarea:focus { outline: none; border-color: var(--orange); box-shadow: var(--fokus); }
.tag-zwischen { margin: -4px 0 0; min-height: 1.4em; font-size: 15px; color: var(--zart); font-style: italic; }
.tag-diktat-fuss { gap: 10px 16px; }
.tag-diktat-fuss .klein { flex: 1; min-width: 220px; }
/* Tagesbuch */
.tag-eintraege { padding: 4px 16px; }
.tag-eintrag { padding: 12px 0; border-bottom: 1px solid var(--linie-fein); }
.tag-eintrag:last-child { border-bottom: 0; }
.tag-eintrag-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag-zeit { font-weight: 700; font-size: 14px; letter-spacing: .02em; min-width: 44px; }
.tag-eintrag-text { margin: 6px 0 0; line-height: 1.55; overflow-wrap: anywhere; }
.tag-weg { margin-left: auto; min-height: 32px; padding: 2px 8px; }
.tag-weg svg { width: 15px; height: 15px; }
/* Tagesroutine: große Haken, mit Handschuh tippbar */
.tag-routine { padding: 6px 8px; }
.tag-punkt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px; border-radius: var(--r); cursor: pointer; }
.tag-punkt + .tag-punkt { border-top: 1px solid var(--linie-fein); border-radius: 0; }
.tag-punkt input { appearance: none; -webkit-appearance: none; flex: none; width: 30px; height: 30px; margin: 0; border: 1.5px solid var(--linie);
  border-radius: var(--r); background: var(--papier) center / 18px no-repeat; cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.tag-punkt input:hover { border-color: var(--orange); }
.tag-punkt input:checked { background-color: var(--ok); border-color: var(--ok);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.tag-punkt input:focus-visible { box-shadow: var(--fokus); }
.tag-punkt input:disabled { cursor: default; }
.tag-punkt-text { flex: 1; line-height: 1.35; }
.tag-punkt.ok .tag-punkt-text { color: var(--leise); }
.tag-punkt-zeit { font-size: 13px; color: var(--zart); }
/* Tagesabschluss */
.tag-abschluss { padding: 16px; display: grid; gap: 12px; }
.tag-abschluss p { margin: 0; }
.tag-abschluss-text { color: var(--leise); font-size: 15px; }
.tag-abschluss.fertig { border-color: var(--ok); }
.tag-abschluss-kopf { display: flex; gap: 12px; align-items: flex-start; }
.tag-abschluss-kopf > svg { flex: none; width: 30px; height: 30px; padding: 5px; border-radius: var(--r); background: var(--ok); stroke: #fff; stroke-width: 2.4; }
.tag-abschluss-kopf b { display: block; font-size: 16px; }
.tag-offen { margin: 6px 0 0; padding-left: 18px; }
/* Team heute */
.tag-team { padding: 2px 0; }
.tag-team-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 54px; text-decoration: none; border-bottom: 1px solid var(--linie-fein); }
.tag-team-zeile:last-child { border-bottom: 0; }
.tag-team-zeile:hover { background: var(--grund); }
.tag-team-zeile .lb-stempel { width: 38px; flex: none; }
.tag-team-name { flex: 1; min-width: 0; line-height: 1.3; }
.tag-team-name .meta { font-size: 13px; color: var(--leise); }
/* Letzte Arbeitstage */
.tag-verlauf { padding: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag-feld { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r); border: 1px solid var(--linie-fein);
  background: var(--grund); color: var(--leise); font-size: 12px; font-weight: 600; text-decoration: none; }
.tag-feld.ok { background: var(--ok-flaeche); border-color: var(--ok); color: var(--ok); }
.tag-feld.knapp { background: var(--knapp-flaeche); border-color: var(--knapp); color: var(--knapp); }
.tag-feld.fehlt { background: var(--kritisch-flaeche); border-color: var(--kritisch); color: var(--kritisch); }
.tag-feld.heute { border-style: dashed; border-color: var(--orange); color: var(--orange-text); background: var(--papier); }
.tag-feld.aktuell { box-shadow: 0 0 0 2px var(--papier), 0 0 0 4px var(--tief); }
.tag-feld:focus-visible { box-shadow: var(--fokus); }
.tag-feld.mini { display: inline-block; width: 12px; height: 12px; margin: 0 4px -1px 10px; border-radius: 3px; }
.tag-feld.mini:first-child { margin-left: 0; }
.tag-legende { margin: 8px 0 0; }
/* Hinweis auf der Startseite */
.tag-karte { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--linie); border-radius: var(--r); background: var(--papier);
  text-decoration: none; transition: border-color .18s var(--ease), background .18s var(--ease); }
.tag-karte:hover { border-color: var(--orange); }
.tag-karte:focus-visible { box-shadow: var(--fokus); }
.tag-karte-mikro { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--orange-flaeche); }
.tag-karte-mikro svg { width: 20px; height: 20px; stroke: var(--orange-text); }
.tag-karte.spaet { border: 1.5px dashed var(--orange); background: var(--orange-flaeche); }
.tag-karte.spaet .tag-karte-mikro { background: var(--orange-knopf); }
.tag-karte.spaet .tag-karte-mikro svg { stroke: #fff; }
.tag-karte.fertig .tag-karte-mikro { background: var(--ok-flaeche); }
.tag-karte.fertig .tag-karte-mikro svg { stroke: var(--ok); stroke-width: 2.2; }
.tag-karte-text { flex: 1; min-width: 0; line-height: 1.4; }
.tag-karte-text b { font-weight: 600; margin-right: 6px; }
.tag-karte-satz { display: block; font-size: 15px; color: var(--leise); overflow-wrap: anywhere; }
.tag-karte-punkte { display: inline-flex; gap: 4px; vertical-align: 1px; }
.tag-karte-punkte i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--linie); }
.tag-karte-punkte i.an { background: var(--ok); border-color: var(--ok); }
.tag-karte .mit-pfeil { font-weight: 600; white-space: nowrap; color: var(--orange-text); }
@media (prefers-reduced-motion: reduce) { .tag-mikro.hoert::after { animation: none; opacity: .8; } }
@media (max-width: 1100px) { .tag-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .tag-pflicht { gap: 8px; }
  .tag-pflicht li { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tag-pflicht b { font-size: 14px; }
  .tag-diktat { padding: 14px; }
  .tag-mikro { width: 72px; height: 72px; }
  .tag-mikro svg { width: 32px; height: 32px; }
  .tag-karte { flex-wrap: wrap; gap: 8px 12px; }
  .tag-karte-text { flex-basis: calc(100% - 56px); }
  .tag-karte .mit-pfeil { margin-left: 52px; }
}