/* =====================================================================
   Werkstatt · Oberflaeche
   Farben, Abstaende UND Schriften folgen dem Shop-Kalkulator, damit beides
   als ein Werkzeug wirkt. Die Farbwerte waren von Anfang an dieselben; seit
   dem 10.09.2026 auch die Typografie.

   Schriften: Archivo (Text), Big Shoulders Display (Ueberschriften und die
   Kartennummern), IBM Plex Mono (Messwerte). Sie stehen als Datenblock in
   assets/schriften.css - kein externer Aufruf, keine Datenschutzfrage. Der
   Grund fuer die frueheren Systemschriften faellt damit nicht weg, er ist
   nur anders geloest: die Datei liegt bei uns, nicht bei Google.

   JEDE font-family hier traegt eine echte Ersatzkette. Faellt schriften.css
   aus (nicht hochgeladen, Zwischenspeicher leer), sieht die Seite anders
   aus - aber sie bleibt lesbar.
   ===================================================================== */

:root{
  --bg:#EEF1F0; --surface:#FFFFFF; --surface-2:#E4E9E7; --surface-3:#DAE1DE;
  --text:#1B2320; --text-muted:#57635D; --text-faint:#7C8983;
  --border:#CBD3D0; --border-strong:#AEB8B4;
  --accent:#E85A0C; --accent-ink:#A6420A; --accent-soft:#FCE4D3;
  --data:#0E7C86; --data-soft:#D9EEEE;
  --good:#2E7D32; --good-soft:#E1F0E1;
  --warn:#9A6400; --warn-soft:#F7EAD1;
  --bad:#B91C1C;  --bad-soft:#FBE2E2;
  --shadow:0 1px 2px rgba(20,26,24,.06), 0 8px 24px -12px rgba(20,26,24,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#13181A; --surface:#1B2123; --surface-2:#232A2C; --surface-3:#2C3436;
    --text:#E9EEEC; --text-muted:#A2ADA7; --text-faint:#798580;
    --border:#333C3E; --border-strong:#454F51;
    --accent:#FF7A33; --accent-ink:#FFB088; --accent-soft:#3A2416;
    --data:#35C5CE; --data-soft:#113538;
    --good:#5FBF66; --good-soft:#16301A;
    --warn:#E0A64D; --warn-soft:#392C10;
    --bad:#F87171;  --bad-soft:#3A1414;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.55 "Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* Messwerte in Ziffern gleicher Breite - so springen Tabellenspalten und
   Preise nicht, wenn sich eine Stelle aendert. Wie im Shop. */
.num{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;font-variant-numeric:tabular-nums}
a{color:var(--accent-ink)}
h1,h2,h3{margin:0;letter-spacing:-.01em;text-wrap:balance}
/* h1 in der schmalen Anzeigeschrift wie die Ueberschrift des Shops -
   deutlich groesser, aber schmaler, deshalb kostet sie keine Zeile. */
h1{font-family:"Big Shoulders Display","Archivo",sans-serif;font-weight:800;
  font-size:clamp(30px,4.4vw,44px);letter-spacing:.005em;line-height:.98}
h2{font-size:16.5px;font-weight:700;letter-spacing:.01em}
h3{font-size:15px;font-weight:700}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- Kopf ---------- */
.kopf{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.kopf-innen{max-width:1280px;margin:0 auto;padding:0 clamp(14px,3vw,26px);
  height:56px;display:flex;align-items:center;gap:16px}
.kopf-innen .marke{flex:0 0 auto}
.kopf-innen .nav{flex:1 1 auto}
.marke{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:16px;
  color:var(--text);text-decoration:none;letter-spacing:-.01em}
.marke-punkt{width:11px;height:11px;border-radius:3px;background:var(--accent);flex:0 0 auto}
.nav{display:flex;gap:4px;align-items:center;overflow-x:auto;scrollbar-width:none;
  min-width:0}
.nav::-webkit-scrollbar{display:none}
.nav a,.mehr>summary,.kopf-rechts .nav-aus{padding:6px 11px;border-radius:7px;
  text-decoration:none;color:var(--text-muted);font-size:14px;font-weight:600;
  white-space:nowrap}
.nav a:hover,.mehr>summary:hover,.kopf-rechts .nav-aus:hover{background:var(--surface-2);color:var(--text)}
.nav a.ist-aktiv,.mehr>summary.ist-aktiv{background:var(--accent-soft);color:var(--accent-ink)}
.nav-aus{color:var(--text-faint)}

/* ---------- Klappmenue "Mehr" ----------
   Ein <details>: klappt ohne JavaScript auf, was zur Inhaltsregel des Servers
   passt (script-src 'self', keine Handler im Markup). assets/menue.js schliesst
   es zusaetzlich bei einem Klick daneben und mit Escape - Beiwerk, kein Muss.
   Steht bewusst AUSSERHALB von .nav: dort wuerde overflow-x es abschneiden. */
.kopf-rechts{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.mehr{position:relative}
.mehr>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  user-select:none}
.mehr>summary::-webkit-details-marker{display:none}
.mehr-pfeil{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.7;transition:transform .15s}
.mehr[open]>summary .mehr-pfeil{transform:rotate(180deg)}
.mehr-liste{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:210px;
  background:var(--surface);border:1px solid var(--border);border-radius:11px;
  box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;gap:1px}
.mehr-liste a{display:block;padding:8px 11px;border-radius:7px;text-decoration:none;
  color:var(--text);font-size:14.5px;font-weight:500;white-space:nowrap}
.mehr-liste a:hover{background:var(--surface-2)}
.mehr-liste a.ist-aktiv{background:var(--accent-soft);color:var(--accent-ink);font-weight:650}
.mehr-trenner{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-faint);padding:9px 11px 3px}
/* ---------- Schmale Schirme: alles ins Menue ----------
   Gemessen, nicht geschaetzt: die vier Links brauchen rund 400px, dazu
   kommen Marke (124px), "Mehr"+"Abmelden" (165px), Abstaende und Rand -
   zusammen etwa 760px. Genau dort passt es auch gerade eben, ohne jeden
   Spielraum; umgeschaltet wird deshalb bei 820px. Auf einem iPhone
   (375-402px) blieben der Nav 25-52px uebrig - sie zeigte anderthalb
   Buchstaben. Darunter wandern die vier Hauptpunkte ins Klappmenue, das
   dann ein vollwertiges Menue ist und kein "Mehr". "Abmelden" bleibt oben:
   dafuer ist Platz, und das Menue passt so ohne Rollen auf den Schirm. */
.nur-schmal{display:contents}
.wort-menue{display:none}
/* Drei Striche, rein aus CSS - ein Bild waere eine Datei mehr und die
   Inhaltsregel erlaubt ohnehin nur eigene Quellen. Der mittlere Strich ist
   das Element selbst, die beiden aeusseren sind seine Pseudoelemente. */
.mehr-striche{display:none;width:16px;height:2px;position:relative;flex:0 0 auto;
  background:currentColor;border-radius:1px}
.mehr-striche::before,.mehr-striche::after{content:"";position:absolute;left:0;right:0;
  height:2px;background:currentColor;border-radius:1px}
.mehr-striche::before{top:-5px}
.mehr-striche::after{top:5px}

@media(min-width:820px){
  .nur-schmal{display:none}
}
@media(max-width:819.98px){
  .nav{display:none}
  /* Ohne die Nav schiebt nichts mehr auseinander - Knopf und Abmelden
     gehoeren an den rechten Rand, dorthin reicht der Daumen. */
  .kopf-rechts{margin-left:auto;gap:2px}
  .wort-mehr{display:none}
  .wort-menue{display:inline}
  .mehr-striche{display:inline-block}
  .mehr-pfeil{display:none}
  /* Das Menue traegt hier alle dreizehn Punkte - es braucht die volle
     Breite. Auf einem iPhone 17 Pro passt es genau (762px Inhalt bei 808px
     Platz); auf kleineren Schirmen rollt es, deshalb max-height. */
  .mehr-liste{position:fixed;left:10px;right:10px;top:56px;min-width:0;
    max-height:calc(100dvh - 66px);overflow-y:auto;overscroll-behavior:contain}
  /* Fingerkuppen brauchen mehr als 35px - im Werkstattbetrieb erst recht. */
  .mehr-liste a{padding:11px 13px;font-size:15px}
  /* Die Zwischenueberschriften duerfen enger stehen: sie werden gelesen,
     nicht getippt. Das holt die letzten Pixel heraus, damit alle vierzehn
     Punkte ohne Rollen auf einen iPhone-Schirm passen. */
  .mehr-trenner{padding:7px 11px 2px}
  .mehr>summary{padding:8px 10px}
}

/* ---------- Zweiter Faktor ---------- */
/* Der Schluessel und die Notfallcodes werden abgetippt oder abgeschrieben -
   deshalb feste Zeichenbreite, grosszuegige Sperrung und genug Zeilenluft.
   Ziffer und Buchstabe duerfen sich hier nicht aehneln. */
.geheim-kasten{margin:8px 0;padding:12px 14px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:9px}
.geheim-kasten code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:17px;letter-spacing:.12em;word-break:break-all;color:var(--text)}
.notfall-codes{display:grid;gap:8px;margin-top:14px;
  grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}
.notfall-codes code{display:block;padding:9px 11px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:8px;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15px;letter-spacing:.06em}
/* Der Haken "Gerät merken" braucht eine eigene Zeile mit Abstand - im
   Formularraster saehe er sonst wie ein Eingabefeld aus. */
.faktor-merken{display:flex;align-items:center;gap:9px;margin-top:14px;
  font-size:14.5px;color:var(--text-muted);cursor:pointer}
.faktor-merken input{flex:0 0 auto}

/* ---------- Rumpf ---------- */
.inhalt{max-width:1080px;margin:0 auto;padding:clamp(20px,4vw,34px) clamp(14px,3vw,26px) 60px;
  display:flex;flex-direction:column;gap:22px}
.fuss{max-width:1080px;margin:0 auto;padding:18px clamp(14px,3vw,26px) 34px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:var(--text-faint);font-size:13px;border-top:1px solid var(--border)}

.kopfzeile{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.lede{color:var(--text-muted);font-size:15px;margin-top:6px;max-width:62ch}

/* ---------- Meldungen ---------- */
.meldung{padding:12px 16px;border-radius:9px;font-size:14.5px;border:1px solid;font-weight:500}
.meldung-gut{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.meldung-warnung{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.meldung-fehler{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}

/* ---------- Karten ---------- */
.karte{background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:20px 22px 22px;box-shadow:var(--shadow)}

/* Kartenkopf mit Nummer - das auffaelligste Stueck der Shop-Optik. Die
   orange Ziffer gibt dem Auge einen Ankerpunkt je Abschnitt; ohne sie
   verschwimmen acht gleich aussehende Karten untereinander.
   Die Nummer steht im Markup, nicht in einem CSS-Zaehler: sie soll auch
   dann dastehen, wenn eine Karte aus- oder eingeblendet wird. */
.karten-kopf{display:flex;align-items:baseline;gap:10px;margin-bottom:16px}
.karten-nummer{font-family:"Big Shoulders Display","Archivo",sans-serif;
  font-weight:700;font-size:20px;color:var(--accent);line-height:1;min-width:1.4em}
.karten-kopf h2{margin:0}
.karten-kopf .hinweis,.karten-kopf .klein{margin-left:auto;font-size:11.5px;
  color:var(--text-faint);font-family:"IBM Plex Mono",monospace}
.raster{display:grid;gap:14px}
@media(min-width:640px){.raster-3{grid-template-columns:repeat(3,1fr)}
.raster-4{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}}
@media(min-width:720px){.raster-2{grid-template-columns:repeat(2,1fr)}}

/* ---------- Kennzahlen ---------- */
.kennzahl{display:flex;flex-direction:column;gap:3px}
.kennzahl .wert{font-size:27px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kennzahl .bezeichnung{font-size:12.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.07em;font-weight:600}

/* ---------- Rollenliste ---------- */
.rollen{display:grid;gap:12px}
@media(min-width:700px){.rollen{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.rollen{grid-template-columns:repeat(3,1fr)}}
.rolle{display:flex;gap:14px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;padding:15px;
  text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.rolle:hover{border-color:var(--border-strong)}
.klecks{width:38px;height:38px;border-radius:9px;flex:0 0 auto;
  border:1px solid rgba(0,0,0,.18);box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}
.rolle-text{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.rolle-name{font-weight:650;font-size:15px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rolle-unter{font-size:12.5px;color:var(--text-faint)}
.rolle-zahl{display:flex;align-items:baseline;gap:7px;font-variant-numeric:tabular-nums}
.rolle-zahl b{font-size:18px;font-weight:700}
.rolle-zahl span{font-size:12.5px;color:var(--text-muted)}

/* ---------- Balken ---------- */
.balken{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.balken i{display:block;height:100%;border-radius:99px;background:var(--data)}
.balken.ist-knapp i{background:var(--warn)}
.balken.ist-leer  i{background:var(--bad)}

/* ---------- Vertrauensgrad ---------- */
.vertrauen{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;
  padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.v-gruen{background:var(--good-soft);color:var(--good)}
.v-gelb {background:var(--warn-soft);color:var(--warn)}
.v-rot  {background:var(--bad-soft); color:var(--bad)}

/* ---------- Formulare ---------- */
form{display:flex;flex-direction:column;gap:14px}
.feld{display:flex;flex-direction:column;gap:6px;min-width:0}
/* Kleiner und ruhiger als vorher - wie im Shop. Das Etikett soll das Feld
   benennen, nicht mit ihm um Aufmerksamkeit streiten. */
.feld label{font-size:11.5px;font-weight:600;color:var(--text-muted);letter-spacing:.02em}
/* Die Einheit im Etikett noch eine Stufe leiser: "Druckzeit (Std)" -
   der Name traegt das Gewicht, die Einheit sagt nur, worin gemessen wird. */
.feld label .einheit{color:var(--text-faint);font-weight:500;letter-spacing:0}
.feld .hinweis{font-size:12px;color:var(--text-faint);line-height:1.5}
/* Kleiner Nebentext ausserhalb der Formularfelder - Herkunftsangaben in
   Tabellenzellen etwa. .hinweis wirkt nur in .feld und .suchzeile. */
.klein{font-size:12.5px;color:var(--text-faint)}
/* Gefuellt statt weiss: auf der weissen Karte hebt sich ein weisses Feld
   nur durch seinen Rahmen ab und wirkt wie ein Kasten um nichts. Der
   gefuellte Grund macht sofort sichtbar, wo man schreiben kann. */
input,select,textarea{
  font:inherit;font-size:14px;padding:9px 10px;border-radius:7px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text);width:100%}
/* AUF FINGERGERAETEN MINDESTENS 16px - sonst zoomt iOS von selbst.
   Bekommt ein Textfeld mit kleinerer Schrift den Fokus, vergroessert iOS die
   Seite, damit man beim Tippen etwas erkennt. Die Anmeldeseite setzt den
   Fokus schon beim Laden (`autofocus`), also passiert es sofort beim Start -
   und in der Home-Bildschirm-App bleibt der Zoom danach stehen, weil dort
   keine Adressleiste ist, die ihn zuruecksetzt. Am 19.09.2026 im Video als
   "die Aufloesung aendert sich" aufgefallen, mit angeschnittener Kopfzeile.
   `.suchleiste input` und `.wiegen-zeile input` trugen die 16px schon einzeln
   (Scannen und Wiegen) - das war derselbe Fall, nur nicht zu Ende gedacht.
   MUSS NACH der Grundregel stehen: gleiche Spezifitaet, es zaehlt die
   Reihenfolge. Und nur `pointer: coarse` - am Rechner bleibt es bei 14px,
   dort gibt es das Verhalten nicht. */
@media (pointer: coarse){
  input,select,textarea{font-size:16px}
}
/* Zahlenfelder in der Monoschrift: Werte stehen dann untereinander
   buendig, auch ueber mehrere Zeilen hinweg.
   ABER NICHT die Auswahlfelder - anders als im Shop. Dort stehen in einer
   Auswahl kurze technische Werte ("PLA", "Bambu X1C"); hier stehen ganze
   Saetze darin ("dem Text oben", "Name des Auftrags uebernehmen"), und
   Fliesstext in der Monoschrift liest sich schlecht und wird zu breit. */
input[type=number],input[type=date],input.num{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px var(--accent-soft)}
/* Die Regel darueber gibt ALLEN Eingabefeldern width:100% - gemeint waren
   Textfelder. Ein Ankreuzfeld wurde dadurch so breit wie seine Spalte und
   schob alles daneben aus der Zelle heraus. Vier Stellen im Projekt trugen
   deshalb ein eigenes style="width:auto"; das ist die Ursache statt des
   Symptoms. */
input[type=checkbox],input[type=radio]{width:auto;padding:0}
/* Ein <button> erbt die Schrift NICHT von selbst - der Browser gibt ihm
   Arial. Ein Knopf neben einem Verweis war dadurch anders breit und anders
   hoch, obwohl beide dieselbe Klasse tragen. Betrifft elf Seiten, deshalb
   hier zentral und nicht an einzelnen Stellen. */
button{font-family:inherit}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 18px;border-radius:9px;border:1px solid var(--accent);
  background:var(--accent);color:#fff;font-weight:650;font-size:15px;
  /* Feste Zeilenhoehe: ein <button> setzt sonst "normal" und wird
     dadurch anders hoch als ein <a> mit derselben Klasse. */
  line-height:1.4;font-family:inherit;
  cursor:pointer;text-decoration:none;width:auto;align-self:flex-start}
.knopf:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.knopf-still{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.knopf-still:hover{background:var(--surface-2);border-color:var(--border-strong)}
.knopf-reihe{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- Tabellen ---------- */
.tabelle-rahmen{overflow-x:auto;border:1px solid var(--border);border-radius:11px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:14.5px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:top}
thead th{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);
  background:var(--surface-2);font-weight:650;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.zahl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.minus{color:var(--bad)}
td.plus{color:var(--good)}

/* ---------- Leerer Zustand ---------- */
.leer{text-align:center;padding:44px 20px;color:var(--text-muted);
  border:1px dashed var(--border-strong);border-radius:12px;background:var(--surface)}
.leer h2{margin-bottom:8px}
.leer p{max-width:46ch;margin:0 auto 18px;font-size:14.5px}

/* ---------- Anmeldung ---------- */
.anmelde-huelle{min-height:72vh;display:grid;place-items:center}
.anmelde-karte{width:100%;max-width:390px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Gruppenüberschrift im Bestand ---------- */
.gruppe-kopf{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:12px; padding-bottom:7px; border-bottom:1px solid var(--border);
}
.gruppe-kopf h2{ font-size:17px; letter-spacing:.01em; }
.gruppe-kopf span{
  font-size:12.5px; color:var(--text-faint); font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ---------- Filterleiste ---------- */
/* Sprungziel #filter: der klebende Kopf ist 56 px hoch und darf die
   Leiste nicht verdecken, wenn die Seite dorthin springt. */
/* Suchfeld ueber einer langen Auswahlliste */
/* flex-direction MUSS hier stehen. Zwei der drei Suchzeilen sind ein
   <form>, und form{} weiter oben setzt flex-direction:column - .suchzeile
   gab nur display, gap und align-items an, also blieb die Spalte stehen und
   Feld, "Suchen" und "Archiv" standen untereinander. Die dritte Fassung
   (rolle-neu.php) ist ein <div> und sah deshalb immer richtig aus; deswegen
   fiel es lange nicht auf. Gemeldet am 11.09.2026. */
.suchzeile{display:flex;flex-direction:row;gap:10px;align-items:center;margin-bottom:6px}
.suchzeile input{flex:1;min-width:0}
.suchzeile .hinweis{white-space:nowrap;flex:0 0 auto}
/* Schmale Schirme. Hier lag der zweite Fehler, und er war der eigentliche:
   Die Suchzeile steht in .kopfzeile NEBEN der Ueberschrift, und die teilt
   sich die Breite mit ihr. Am 11.09.2026 aus Daniels Bild zurueckgerechnet:
   der Behaelter war nur 173 px breit, die beiden Knoepfe brauchen aber
   90 + 9 + 104 = 203 px. Mit flex-wrap:wrap landete deshalb JEDES Element
   auf einer eigenen Zeile - obwohl flex-direction:row laengst stimmte.

   Also bekommt die Suchzeile hier ihre EIGENE Zeile unter der Ueberschrift
   (flex:1 0 100% im Elternraster). Dann steht die ganze Kartenbreite zur
   Verfuegung, und alle drei passen nebeneinander.

   Das Feld schrumpft dabei mit statt 100% zu belegen - sonst draengt es die
   Knoepfe wieder in die naechste Zeile. Die Grundbreite 4rem entscheidet,
   wann umgebrochen wird: die beiden Knoepfe brauchen 216 px, bei 4rem passt
   alles noch in einen 320-px-Schirm. Gemessen: 375 px -> eine Reihe, Feld
   131 px breit; 320 px -> eine Reihe, Feld 76 px. Unter etwa 300 px bricht
   es doch um, und das ist dann auch richtig so. */
@media(max-width:640px){
  .kopfzeile > .suchzeile{flex:1 0 100%}
  .suchzeile{flex-direction:row;flex-wrap:wrap;gap:8px}
  .suchzeile input{flex:1 1 4rem;min-width:0}
  .suchzeile .knopf{flex:0 0 auto;white-space:nowrap}
  .suchzeile .hinweis{margin-left:auto}
}

.filterleiste{ scroll-margin-top:68px; }
#bearbeiten{ scroll-margin-top:68px; }
.filterleiste{
  display:grid; gap:12px; align-items:end;
}
@media(min-width:700px){
  .filterleiste{ grid-template-columns:repeat(3,1fr) auto; }
}
.filterleiste .feld{ gap:5px; }
.filter-knoepfe{ display:flex; gap:9px; flex-wrap:wrap; }
.filter-knoepfe .knopf{ align-self:stretch; }

/* Kennzahl als Filterknopf */
.kennzahl-knopf{ text-decoration:none; color:inherit; display:flex; }
.kennzahl-knopf:hover{ border-color:var(--border-strong); }
.kennzahl-knopf.ist-aktiv{ border-color:var(--warn); background:var(--warn-soft); }
.kennzahl-knopf .bezeichnung em{
  display:block; margin-top:3px; font-style:normal; font-weight:600;
  text-transform:none; letter-spacing:0; color:var(--accent-ink); font-size:11.5px;
}

/* Aktive Filter als Chips */
.filter-chips{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--text-faint); }
.chip-filter{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  padding:5px 9px 5px 11px; border-radius:999px; font-size:13px; font-weight:600;
  background:var(--accent-soft); color:var(--accent-ink); border:1px solid transparent;
}
.chip-filter:hover{ border-color:var(--accent); }
.chip-filter i{ width:11px; height:11px; border-radius:3px; border:1px solid rgba(0,0,0,.2); }
.chip-filter span{ font-weight:700; opacity:.65; font-size:15px; line-height:1; }

/* ---------- Aufklappbarer Block „neu anlegen“ ---------- */
.neu-block{
  border:1px dashed var(--border-strong); border-radius:10px;
  padding:0 16px; background:var(--surface-2);
}
.neu-block[open]{ padding-bottom:16px; }
.neu-block summary{
  cursor:pointer; padding:13px 0; font-weight:650; font-size:14.5px; color:var(--accent-ink);
  list-style:none; display:flex; align-items:center; gap:8px;
}
.neu-block summary::-webkit-details-marker{ display:none; }
.neu-block summary::before{
  content:"+"; display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; border-radius:5px; background:var(--accent); color:#fff;
  font-weight:700; font-size:14px; line-height:1; flex:0 0 auto;
}
.neu-block[open] summary::before{ content:"−"; }
.neu-block summary:hover{ color:var(--accent); }

/* ---------- Trenner zwischen zwei Wegen ---------- */
.trenner{
  display:flex; align-items:center; gap:14px; color:var(--text-faint);
  font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
}
.trenner::before, .trenner::after{
  content:""; flex:1; height:1px; background:var(--border);
}

/* ---------- Farbe: Wähler und Hex-Feld nebeneinander ---------- */
.farbfeld{ display:flex; gap:9px; align-items:center; }
.farbfeld input[type=color]{
  width:46px; height:42px; padding:3px; flex:0 0 auto; cursor:pointer;
  border-radius:8px; border:1px solid var(--border-strong); background:var(--surface);
}
.farbfeld input[type=text]{ flex:1; font-family:ui-monospace,Menlo,monospace; letter-spacing:.04em; }
.farbfeld .farbprobe{
  width:42px; height:42px; border-radius:8px; flex:0 0 auto;
  border:1px solid var(--border-strong); box-shadow:inset 0 0 0 2px rgba(255,255,255,.3);
}
.farbfeld.ist-ungueltig input[type=text]{ border-color:var(--bad); }

/* ---------- Archiv und Nachkauf ---------- */
.stapel{display:flex;flex-direction:column;gap:14px}

/* Knopf fuer etwas Endgueltiges - sieht anders aus als "speichern" */
.knopf-gefahr{background:var(--bad);border-color:var(--bad);color:#fff}
.knopf-gefahr:hover{filter:brightness(1.08)}

.nachkauf-satz{display:flex;flex-direction:column;gap:14px}
.nachkauf-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nachkauf-kopf>div{flex:1;min-width:12rem}
.nachkauf-wahl{display:flex;flex-direction:column;gap:12px;
  border-top:1px solid var(--border);padding-top:14px}
@media(min-width:760px){
  .nachkauf-wahl{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
  .nachkauf-wahl .knopf-reihe{grid-column:1 / -1}
}
.erinnern-zeile{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.erinnern-zeile label{display:inline-flex;align-items:center;gap:5px;margin:0}

/* Ankreuzfeld "als Filament anlegen" in der Rechnungspruefung */
.anlegen-wahl{display:flex;align-items:center;gap:6px;font-size:13px;
  color:var(--text-muted);margin-top:5px;flex-wrap:wrap}
.anlegen-wahl input{margin:0;flex:0 0 auto}
/* Ausgegraut, wenn oben schon ein Filament steht - dann kann nichts
   Neues entstehen, und der Haken soll das auch zeigen. */
.anlegen-wahl.ist-aus{opacity:.45}

/* Adresse zum Herauskopieren (Cronjob) - umbricht auch bei langen Merkmalen */
.beleg-kasten{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;padding:10px 12px;word-break:break-all;color:var(--text);
  user-select:all}

/* Ein Knopf, der wie ein Verweis aussieht - fuer Nebenhandlungen in Tabellen,
   die ein Formular brauchen (Loeschen), aber keinen Knopf verdienen. */
.alslink{background:none;border:none;padding:0;font:inherit;font-size:inherit;
  color:var(--accent-ink);text-decoration:underline;cursor:pointer}
.alslink:hover{color:var(--accent)}

/* Blättern von Rolle zu Rolle */
.blaettern{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-6px 0 4px}
.blaettern .knopf{max-width:13rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blaettern-stand{font-size:13px;color:var(--text-faint);white-space:nowrap}
.knopf.ist-aus{opacity:.4;pointer-events:none}
/* Schmale Schirme: nur Pfeile und Zaehler. Ein abgeschnittener Farbname
   mitten im Wort hilft niemandem, und Platz ist dort knapp. */
@media(max-width:560px){
  .blaettern-name{display:none}
  .blaettern .knopf{max-width:none;min-width:2.8rem;text-align:center}
}


/* =====================================================================
   Bestandsseite: kurze Wege (Etappe B)
   ---------------------------------------------------------------------
   Vorher stand auf einem Telefon vor der ersten Rolle: Ueberschrift, zwei
   Knoepfe, bis zu SIEBEN Kennzahlkarten und die Filterleiste - gemessen
   1281 px, also 1,58 Bildschirme Wischen. Die Kennzahlen sind nicht falsch,
   sie standen nur vor dem, was man staendig braucht.

   Deshalb: dieselben Zahlen als schmales Band, Suchfeld darueber, Liste
   direkt darunter, Filter zugeklappt. NUR NEUE KLASSEN - .karte, .kennzahl,
   .klecks und .vertrauen bleiben unberuehrt, damit die anderen 19 Seiten
   sich nicht mitaendern.
   ===================================================================== */

/* --- Kennzahlenband ------------------------------------------------- */
.band{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.band-teil{display:flex;align-items:baseline;gap:6px;
  padding:7px 11px;border-radius:9px;background:var(--surface);
  border:1px solid var(--border);text-decoration:none;color:var(--text);
  font-size:13px;line-height:1.2}
a.band-teil:hover{background:var(--surface-2);border-color:var(--border-strong)}
.band-teil b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.band-teil span{color:var(--text-muted)}
.band-teil.ist-warn b{color:var(--warn)}
.band-teil.ist-aktiv{background:var(--accent-soft);border-color:var(--accent);
  color:var(--accent-ink)}
.band-teil.ist-aktiv b,.band-teil.ist-aktiv span{color:var(--accent-ink)}

/* --- Suchleiste ----------------------------------------------------- */
/* Ohne Skript unsichtbar: dann filtert nichts, und ein totes Feld waere
   schlimmer als keines. rollensuche.js blendet sie selbst ein.          */
.suchleiste{display:flex;gap:8px;align-items:center;margin:0 0 12px}
.suchleiste input{flex:1 1 auto;width:auto;font-size:16px}
.suchleiste .such-zahl{font-size:13px;color:var(--text-muted);white-space:nowrap}

/* --- Filter als Klappblock ------------------------------------------ */
.filter-klapp{margin:0 0 14px}
.filter-klapp>summary{list-style:none;cursor:pointer;display:inline-flex;
  align-items:center;gap:7px;padding:7px 11px;border-radius:9px;
  background:var(--surface);border:1px solid var(--border);
  font-size:13px;font-weight:600;color:var(--text-muted)}
.filter-klapp>summary::-webkit-details-marker{display:none}
.filter-klapp>summary:hover{background:var(--surface-2);color:var(--text)}
.filter-klapp[open]>summary{margin-bottom:10px;background:var(--surface-2);color:var(--text)}
.filter-klapp>summary .pfeil{width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;
  transition:transform .15s}
.filter-klapp[open]>summary .pfeil{transform:rotate(-135deg);margin-top:2px}
.filter-klapp>summary .zaehler{background:var(--accent);color:#fff;border-radius:99px;
  padding:1px 7px;font-size:11px}

/* Eine Gruppe, die die Suche leergeraeumt hat, verschwindet ganz -
   sonst stuende eine Ueberschrift ueber nichts.                        */
.gruppe-leer{display:none}
.such-nichts{padding:18px;text-align:center;color:var(--text-muted)}

/* Sprungziel unter der klebenden Kopfleiste.
   Ohne scroll-margin-top landet #wiegen bei genau 0 px - und die 57 px hohe
   .kopf liegt darueber, sodass die Ueberschrift verdeckt ist. Gemessen, nicht
   vermutet. Etwas mehr als die Kopfhoehe, damit es nicht auf Kante steht. */
#wiegen{scroll-margin-top:70px}

/* =====================================================================
   Wiegen direkt aus der Liste (Etappe C)
   ---------------------------------------------------------------------
   Die Karte wird zur Huelle: oben der Verweis wie bisher, darunter eine
   angesetzte Zeile mit Gewichtsfeld. Der Rahmen wandert von .rolle auf
   .rolle-karte, damit beides wie EIN Kaestchen wirkt statt wie zwei.

   .rolle, .rollen, .rolle-name und .rolle-zahl kommen ausschliesslich auf
   index.php vor - nachgeschlagen, nicht vermutet. Deshalb sind Aenderungen
   daran fuer die anderen 19 Seiten folgenlos.
   ===================================================================== */

/* min-width:0 ist Pflicht, nicht Kosmetik: ein Rasterelement darf sonst nicht
   unter seine Mindestbreite schrumpfen. Das Eingabefeld bringt ueber sein
   voreingestelltes size=20 rund 199 px Eigenbreite mit, wodurch die Spalte auf
   368 px wuchs und die Seite bei 375 px waagerecht scrollte. Gemessen. */
.rolle-karte{display:flex;flex-direction:column;min-width:0;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.rolle-karte:hover{border-color:var(--border-strong)}

/* Innerhalb der Huelle traegt .rolle keinen eigenen Rahmen mehr - sonst
   saehe man zwei Kaesten ineinander. Ausserhalb (falls je woanders
   verwendet) bleibt die alte Regel wirksam. */
.rolle-karte>.rolle{border:0;box-shadow:none;background:none;border-radius:12px}
.rolle-karte.hat-wiegen>.rolle{border-radius:12px 12px 0 0;padding-bottom:11px}

/* flex-direction MUSS hier stehen: Zeile 216 setzt fuer jedes <form>
   flex-direction:column. Ohne die ausdrueckliche Richtung stapelt sich die
   Wiegezeile senkrecht - im Quelltext unsichtbar, nur im Browser zu sehen.
   Dieselbe Sorte Fehler wie die geschluckten Farbkleckse und der tote
   Drucken-Knopf. */
.wiegen-zeile{display:flex;flex-direction:row;gap:8px;align-items:center;
  padding:9px 15px 12px;border-top:1px dashed var(--border)}
.wiegen-zeile input{width:auto;flex:1 1 auto;min-width:0;font-size:16px;
  padding:7px 10px}
.wiegen-zeile button{flex:0 0 auto;padding:7px 13px;font-size:14px}
.wiegen-zeile .einheit{font-size:13px;color:var(--text-faint);flex:0 0 auto}

/* Rollen ohne Spulentyp koennen hier nicht gewogen werden - ein Feld ohne
   Leergewicht wuerde eine Zahl erzeugen, die niemand nachrechnen kann.
   Lieber ein ehrlicher Verweis als ein falscher Wert. */
.wiegen-fehlt{padding:9px 15px 12px;border-top:1px dashed var(--border);
  font-size:13px;color:var(--text-muted)}
.wiegen-fehlt a{font-weight:600}

/* Schmale Fassung einer Meldung: eine Zeile statt eines Absatzes. Fuer
   Hinweise, die dauerhaft stehen und deshalb nicht dauerhaft Platz kosten
   duerfen - anders als eine Rueckmeldung, die nach einer Handlung erscheint. */
.meldung-schmal{padding:9px 13px;font-size:14px}

/* --- Zuletzt angefasst ---------------------------------------------- */
/* Eine Zeile, waagerecht rollbar statt umbrechend: bei vier Eintraegen soll
   die Reihe nie zwei Zeilen hoch werden - sie ist eine Abkuerzung und darf
   nicht selbst Platz kosten. Bildlaufleiste versteckt wie bei .nav.        */
.zuletzt{display:flex;gap:7px;align-items:center;margin:0 0 12px;
  overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.zuletzt::-webkit-scrollbar{display:none}
.zuletzt-wort{font-size:12px;font-weight:650;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.04em;flex:0 0 auto}
.zuletzt-teil{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:5px 10px 5px 6px;border-radius:99px;background:var(--surface);
  border:1px solid var(--border);text-decoration:none;color:var(--text);
  font-size:13px;white-space:nowrap}
.zuletzt-teil:hover{background:var(--surface-2);border-color:var(--border-strong)}
.zuletzt-teil i{width:16px;height:16px;border-radius:5px;flex:0 0 auto;
  border:1px solid rgba(0,0,0,.18)}
.zuletzt-teil b{font-weight:650;color:var(--text-muted)}

/* Kennzahlenband auf breiten Schirmen wieder in Kachelgroesse.
   ---------------------------------------------------------------------
   Auf dem Telefon war das Band die ganze Ersparnis: dort standen die
   Zahlen als gestapelte Karten und schoben die erste Rolle 1281 px nach
   unten. Auf dem Desktop gibt es diese Enge nicht - dort stehen die
   Kacheln nebeneinander und duerfen wieder lesbar gross sein.

   Werte bewusst aus .kennzahl uebernommen (Zeile 180-182), damit die
   Zahlen hier genauso aussehen wie auf den sechs anderen Seiten, die
   diese Klasse noch benutzen. Sonst gaebe es eine dritte Variante.

   Dieselbe Schwelle wie beim Filterblock (900 px, siehe filter.js),
   damit auf einem Schirm nicht das eine schon im Desktop-Zustand ist
   und das andere noch nicht.                                          */
@media (min-width: 900px) {
  .band{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:14px;margin-bottom:16px}
  .band-teil{flex-direction:column;align-items:flex-start;gap:3px;
    padding:16px 18px;border-radius:12px;box-shadow:var(--shadow);
    font-size:inherit;line-height:inherit}
  .band-teil b{font-size:27px;font-weight:700;letter-spacing:-.02em;
    font-variant-numeric:tabular-nums}
  .band-teil span{font-size:12.5px;color:var(--text-faint);
    text-transform:uppercase;letter-spacing:.07em;font-weight:600}
  /* Der Farbwechsel bei Warnungen und aktivem Filter muss die
     Vorgabe oben ueberschreiben - sonst waeren die Zahlen wieder grau. */
  .band-teil.ist-warn b{color:var(--warn)}
  .band-teil.ist-aktiv b,.band-teil.ist-aktiv span{color:var(--accent-ink)}
}

/* ---------- Kalkulation ----------
   Eigene Klassen statt style-Attributen: eine Medienabfrage laesst sich im
   Attribut nicht unterbringen, und ohne sie stuenden auf dem Telefon zwei
   Spalten nebeneinander, die dort nicht nebeneinanderpassen. */
.kalk-spalten{display:grid;gap:18px;align-items:start;grid-template-columns:1fr}
@media(min-width:960px){.kalk-spalten{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.kalk-zeile{display:grid;gap:8px;align-items:end;grid-template-columns:1fr 1fr;margin-bottom:10px}
@media(min-width:760px){.kalk-zeile{grid-template-columns:2fr 1.4fr .8fr .8fr .8fr auto}}
.kalk-pos{display:grid;gap:8px;align-items:end;grid-template-columns:1fr 1fr}
@media(min-width:760px){.kalk-pos{grid-template-columns:2fr 1.4fr .7fr .7fr .6fr auto}}
/* Zeilenabstand 14, Spaltenabstand 16 - die Masse des Shop-Kalkulators.
   Mit den vorherigen 10 px standen die Felder so dicht, dass Etikett und
   darueberliegendes Feld zusammenliefen. */
.kalk-2{display:grid;gap:14px 16px;grid-template-columns:1fr}
@media(min-width:520px){.kalk-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kalk-3{display:grid;gap:14px 16px;grid-template-columns:1fr}
@media(min-width:520px){.kalk-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kalk-4{display:grid;gap:14px 16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.kalk-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Zwei Raster hintereinander in derselben Karte stiessen aneinander - im
   Shop sitzen sie in EINEM Raster und bekommen den Zeilenabstand von dort.
   Hier sind es getrennte Bloecke, also braucht der zweite ihn selbst. */
.karte > :is(.kalk-2,.kalk-3,.kalk-4,.kalk-titel,.feld,.feld-reihe)
       + :is(.kalk-2,.kalk-3,.kalk-4,.kalk-titel,.feld,.feld-reihe){margin-top:14px}
.kalk-5{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.kalk-5{grid-template-columns:repeat(5,minmax(0,1fr))}}
.kalk-titel{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:520px){.kalk-titel{grid-template-columns:2fr .6fr}}
.kalk-schalter{flex-direction:row;align-items:center;gap:8px}
.kalk-preis .wert{font-size:2.2rem}
/* ---------- Ergebnistafel der Kalkulation ----------
   Aufbau und Masse folgen dem bisherigen Kostenkalkulator (Panel, Stackbar,
   bd-row, taxline, metrics), damit beides gleich aussieht. Die acht Farben
   sind seine Farben, hell wie dunkel - dort heissen sie --mat-pla, --warn,
   --text-faint, --mat-pc, --data, --mat-tpu, --mat-abs, --accent.
   Keine Tabelle: table{} traegt hier min-width:480px, das sprengt die Karte. */
:root{
  --kalk-1:#3E8E5A; --kalk-2:#9A6400; --kalk-3:#798580; --kalk-4:#556B78;
  --kalk-5:#0E7C86; --kalk-6:#7C4DAF; --kalk-7:#C1621B; --kalk-8:#E85A0C;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --kalk-1:#5FBF7A; --kalk-2:#E0A64D; --kalk-3:#7C8983; --kalk-4:#93B0BF;
    --kalk-5:#35C5CE; --kalk-6:#B08AE0; --kalk-7:#E0913F; --kalk-8:#FF7A33;
  }
}
.kalk-f1{background:var(--kalk-1)}.kalk-f2{background:var(--kalk-2)}
.kalk-f3{background:var(--kalk-3)}.kalk-f4{background:var(--kalk-4)}
.kalk-f5{background:var(--kalk-5)}.kalk-f6{background:var(--kalk-6)}
.kalk-f7{background:var(--kalk-7)}.kalk-f8{background:var(--kalk-8)}

.kalk-tafel{padding:0;overflow:hidden}
.kalk-tafel-kopf{padding:20px 20px 16px;border-bottom:1px solid var(--border)}
.kalk-etikett{font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-faint);font-weight:650}
.kalk-preis{font-size:42px;line-height:1;font-weight:800;letter-spacing:-.03em;
  margin-top:7px;font-variant-numeric:tabular-nums}
.kalk-preis .waehrung{font-size:.46em;color:var(--text-faint);margin-left:4px;font-weight:700}
.kalk-unter{display:flex;flex-wrap:wrap;gap:18px;margin-top:13px}
.kalk-unter div{font-size:12.5px;color:var(--text-muted)}
.kalk-unter b{display:block;font-size:15px;color:var(--text);font-weight:650;
  margin-top:2px;font-variant-numeric:tabular-nums}

.kalk-aufschluesselung{padding:16px 20px}
.kalk-balken{display:flex;width:100%;height:10px;border-radius:999px;
  overflow:hidden;background:var(--surface-3);margin-bottom:12px}
.kalk-balken span{height:100%}
.kalk-bd{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px}
.kalk-bd .sw{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.kalk-bd .nm{flex:1;min-width:0;color:var(--text-muted)}
.kalk-bd .amt{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.kalk-bd .pct{width:3.8em;text-align:right;font-size:11.5px;color:var(--text-faint);
  font-variant-numeric:tabular-nums}

.kalk-steuerzeile{display:flex;justify-content:space-between;gap:10px;
  padding:9px 20px;font-size:12.5px;color:var(--text-muted);
  border-top:1px dashed var(--border)}
.kalk-steuerzeile b{color:var(--text);font-weight:650;font-variant-numeric:tabular-nums}

.kalk-kennzahlen{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--border)}
.kalk-kennzahl{padding:13px 14px;border-right:1px solid var(--border)}
.kalk-kennzahl:last-child{border-right:none}
.kalk-kennzahl .m-etikett{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-faint);font-weight:650}
.kalk-kennzahl .m-wert{font-size:16.5px;font-weight:700;margin-top:3px;
  font-variant-numeric:tabular-nums}

.kalk-pruefhinweise{margin:14px 20px 16px;padding:10px 12px;border-radius:8px;
  background:var(--warn-soft);border:1px solid var(--warn)}
.kalk-pruefhinweise .wt{font-size:11.5px;font-weight:700;color:var(--warn);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.kalk-pruefhinweise ul{margin:0;padding-left:16px;font-size:12.5px;color:var(--text)}
.kalk-pruefhinweise li{margin-bottom:2px}
.kalk-plausibel{margin:14px 20px 16px;padding:9px 12px;border-radius:8px;
  background:var(--good-soft);border:1px solid var(--good);font-size:12.5px;
  color:var(--good);font-weight:650;display:flex;align-items:center;gap:7px}
.kalk-plausibel .punkt{width:7px;height:7px;border-radius:999px;background:var(--good);flex:0 0 auto}
.kalk-tafel-fuss{padding:14px 20px 18px;border-top:1px solid var(--border)}
/* Die Knopfreihe braucht Luft zum Notizfeld - sonst sieht es aus, als
   gehoerten die Knoepfe an das Feld angeklebt. */
.kalk-tafel-fuss .knopf-reihe{margin-top:16px}
.kalk-tafel-fuss textarea{resize:vertical;min-height:58px}
/* Angebot direkt aus der Kalkulation (13.09.2026). Ein eigener Abschnitt der
   Tafel mit Linie darueber: sonst stuende „Angebot erstellen" wie ein dritter
   Knopf neben „Neu berechnen" und „Speichern" - und er tut mehr als beide. */
/* Positionen eines Angebots bearbeiten: die Bezeichnung breit, die drei Zahlen
   schmal daneben. Auf dem Telefon zweispaltig - vier Felder nebeneinander
   waeren dort je 80 px. */
.pos-zeile{display:grid;grid-template-columns:minmax(10rem,3fr) 6.5rem 6rem 8rem;
  gap:10px 12px;align-items:end;margin-bottom:10px}
.pos-zeile .feld{margin:0}
@media(max-width:640px){.pos-zeile{grid-template-columns:1fr 1fr}}

.kalk-angebot{padding:14px 20px 18px;border-top:1px solid var(--border)}
.kalk-angebot .kalk-etikett{margin-bottom:10px}
.kalk-angebot .knopf{width:100%;margin-top:12px}
.kalk-angebot .klein{margin:10px 0 0;line-height:1.5}
/* Neuer Kunde gleich beim Angebot (02.10.2026): die Kurzfassung des
   Kundenformulars, sichtbar nur bei „Neuen Kunden anlegen".
   [hidden] MUSS eigens dastehen. display:grid aus dieser Datei schlaegt das
   display:none, das der Browser dem Attribut von sich aus mitgibt - ohne die
   zweite Regel bliebe der Block trotz hidden stehen, und das Umschalten in
   kalkulation.js taete sichtbar nichts.
   .paar haelt Vorname/Name und PLZ/Ort IMMER nebeneinander - auch auf dem
   Telefon. .kalk-2 braeche dort um (unter 520 px Fensterbreite einspaltig),
   und acht Felder untereinander waeren ein langer Weg bis zum Knopf.
   Gemessen am 02.10.2026: der Block ist 305 px breit auf dem Telefon (375 px
   Fenster) und 354 px am Rechner bei 1000 px Fenster; ein halbes Paar also
   146 bzw. 171 px, das PLZ-Feld 104 bzw. 121 px.
   Die Regel fuer .klein steht NACH der von .kalk-angebot (gleiches Gewicht,
   es zaehlt die Reihenfolge): der Abstand kommt hier vom Raster. */
.kalk-neukunde{display:grid;gap:12px;margin-top:12px}
.kalk-neukunde[hidden]{display:none}
.kalk-neukunde .paar{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.kalk-neukunde .paar-plz{grid-template-columns:minmax(0,.55fr) minmax(0,1fr)}
.kalk-neukunde .klein{margin:0}
.kalk-neukunde-frage{padding:10px 12px;border-radius:8px;background:var(--warn-soft);
  border:1px solid var(--warn);font-size:12.5px;line-height:1.5}
.kalk-neukunde-frage p{margin:0 0 8px}

/* Der Knopf zum Entfernen einer Zeile.
   .knopf traegt align-self:flex-start - in einer Rasterzelle mit
   align-items:end zieht ihn das nach OBEN, waehrend die Felder daneben unten
   stehen: genau der schiefe Eindruck. Hier also ausdruecklich nach unten,
   und quadratisch statt in Knopfbreite. Die Hoehe ist die eines Eingabefelds:
   15px Schrift * 1.5 + 2 * 9px Innenabstand + 2 * 1px Rahmen = 42,5px. */
.kalk-weg{align-self:end;justify-self:end;width:42px;height:42.5px;padding:0;
  font-size:19px;line-height:1;flex:0 0 auto}
@media(min-width:960px){.kalk-ergebnis{position:sticky;top:16px}}

/* ---------- Angebot als Dokument ----------
   Wird mit $ohne_rumpf ausgegeben, also ohne den Inhaltsbereich - dafuer mit
   eigener Breite. Im Druck fallen Kopf- und Fusszeile weg; was auf dem Papier
   landet, soll das Dokument sein und sonst nichts. */
.dokument{max-width:52rem;margin:24px auto;padding:32px 34px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.dok-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  border-bottom:2px solid var(--text);padding-bottom:14px;margin-bottom:26px}
.dok-absender{font-size:12.5px;line-height:1.55;color:var(--text-muted)}
.dok-marke{font-size:26px;font-weight:800;letter-spacing:-.02em}
.dok-anschrift{font-size:14.5px;line-height:1.6;margin-bottom:26px}
.dok-zeile{display:flex;justify-content:space-between;gap:16px;font-size:14px;
  border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:16px}
.dok-betreff{font-size:15px;font-weight:650;margin:0 0 18px}
.dok-tabelle{width:100%;min-width:0;border-collapse:collapse;font-size:13.5px}
.dok-tabelle th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-faint);border-bottom:1px solid var(--border);padding:0 8px 6px}
.dok-tabelle td{padding:8px;border-bottom:1px solid var(--border);vertical-align:top}
.dok-tabelle .zahl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dok-summen{margin:18px 0 0 auto;max-width:22rem;font-size:14px}
.dok-summen div{display:flex;justify-content:space-between;gap:16px;padding:5px 0}
.dok-summen b{font-variant-numeric:tabular-nums}
.dok-gesamt{border-top:2px solid var(--text);margin-top:6px;padding-top:8px!important;
  font-size:16px;font-weight:700}
.dok-hinweis{font-size:12.5px;color:var(--text-muted);margin:20px 0 0}
@media print{
  .kopf,.fuss,.meldung{display:none!important}
  body{background:#fff}
  .dokument{max-width:none;margin:0;padding:0;border:none;box-shadow:none;background:#fff}
  .dok-tabelle{page-break-inside:auto}
  .dok-tabelle tr{page-break-inside:avoid}
}
.dok-fuss{margin-top:26px;padding-top:12px;border-top:1px solid var(--border);
  font-size:11.5px;line-height:1.6;color:var(--text-faint)}
.dok-knoepfe{max-width:52rem;margin:0 auto 32px;padding:0 34px;display:flex;
  align-items:center;gap:14px;flex-wrap:wrap}
@media print{.dok-knoepfe{display:none!important}}
/* Sprungziel fuer Suche und Archiv: ohne diesen Abstand schoebe die klebende
   Kopfzeile die Ueberschrift der Liste unter sich. */
#liste{scroll-margin-top:76px}
/* Zwei bis drei Formularfelder nebeneinander, ohne sie zu quetschen.
   Feste Spalten pressen sie in der schmalen linken Spalte der Kalkulation
   zusammen; auto-fit mit Mindestbreite bricht stattdessen um. Gebraucht in
   der Kalkulation („Bezeichnung bilden aus · Kunde · Auftragsname", je nach
   Auswahl ein bis drei Felder) und im Angebot („Stand · Angebotsdatum ·
   Gültig bis"). */
.feld-reihe{display:grid;gap:12px;margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.feld-reihe .feld select,.feld-reihe .feld input{min-width:0}