/* ---------------------------------------------------------------------------
   Das Aussehen von LIGNO-KALKU.
   -----------------------------------------------------------------------------
   HERKUNFT: Der Abschnitt "Aus dem Prototyp" ist Zeichen für Zeichen der
   CSS-Block aus kalkulation-prototyp-v3.jsx, Zeile 216 bis 338. Er wird hier
   NICHT verbessert und nicht umsortiert. Wer das Aussehen ändern will, ändert
   es unten unter "Ergänzungen", damit jederzeit erkennbar bleibt, was aus dem
   abgestimmten Entwurf stammt und was später dazugekommen ist.

   EINE ABWEICHUNG VOM PROTOTYP, bewusst und vom Inhaber entschieden:
   Der Prototyp holte die Schriften mit @import von fonts.googleapis.com. Das
   ist hier ersetzt durch die @font-face-Regeln darunter. Die Schriftdateien
   liegen im Repo unter statisch/schriften und werden vom eigenen Dienst
   ausgeliefert.

   Drei Gründe:
     1. Kein Arbeitsplatz meldet sich beim Aufruf bei Google. Der Betrieb
        verarbeitet Kundendaten, und eine IP-Adresse je Seitenaufruf an einen
        Dritten ist eine Übermittlung, die niemand braucht.
     2. Ohne Internet sieht das Werkzeug trotzdem richtig aus. Der Server steht
        bei Profihost, die Schrift kam bisher aus einem zweiten Netz.
     3. Eine Sache weniger, die von außen ausfallen kann.

   LIZENZ: IBM Plex steht unter der SIL Open Font License 1.1. Der volle Text
   liegt daneben in statisch/schriften/OFL.txt und muss dort bleiben, das
   verlangt die Lizenz beim Weiterverteilen.

   WOHER DIE DATEIEN KOMMEN: aus der Ausgabe von fonts.googleapis.com, also die
   auf Latein zugeschnittenen Fassungen. latin deckt Deutsch vollständig ab,
   latin-ext kommt für Kundennamen mit polnischen oder tschechischen Zeichen
   dazu und wird nur geladen, wenn ein solches Zeichen vorkommt.

   PLEX SANS IST EINE EINZIGE DATEI für alle vier Stärken, ein variabler Font.
   Deshalb steht dieselbe Datei viermal darunter, einmal je Stärke. Das ist kein
   Versehen: Der Browser lädt sie einmal und stellt die Achse auf den Wert, der
   in der jeweiligen Regel steht. Plex Mono liefert Google dagegen als drei
   getrennte Dateien, deshalb sind es dort drei Regeln mit drei Dateien.
   --------------------------------------------------------------------------- */

/* IBM Plex Sans, variabel, eine Datei je Zeichenvorrat */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('schriften/plex-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('schriften/plex-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('schriften/plex-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('schriften/plex-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('schriften/plex-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('schriften/plex-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('schriften/plex-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('schriften/plex-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* IBM Plex Mono, je Stärke eine Datei. Trägt alle Zahlen des Werkzeugs. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('schriften/plex-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('schriften/plex-mono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('schriften/plex-mono-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('schriften/plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('schriften/plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('schriften/plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ===========================================================================
   Aus dem Prototyp, unverändert
   =========================================================================== */
/* DER GRUND IST GLATT, seit dem 13. August 2026. Vorher lag hier ein Karogitter
   aus Linien in --line, alle 28 Pixel, ueber die ganze Seite. Auf einem grossen
   Bildschirm waren das mehrere hundert Linien, und der Inhaber hat es benannt:
   "hintergrund das wird mir zuviel bitte ruhige augenschonend nicht zu dunkel".
   Aus vier vorgelegten Faellen hat er "warmes Papier" gewaehlt: kein Muster,
   der Grund eine Spur waermer und dunkler als vorher, damit die weissen Karten
   von selbst hervortreten und keine Linie sie abgrenzen muss. */
.tk-root{--paper:#F1EFE9;--surface:#FFF;--ink:#15171B;--soft:#5E6670;--line:#DEDBD3;
  --ls:#B9B5AB;--red:#A81E22;--redsoft:#F3E3E3;--green:#2F6B4F;--amber:#8A6A17;
  font-family:'IBM Plex Sans',system-ui,sans-serif;color:var(--ink);background-color:var(--paper);
  min-height:100vh;padding-bottom:70px;-webkit-font-smoothing:antialiased;}
.tk-root *,.tk-root *::before,.tk-root *::after{box-sizing:border-box;}
.tk-mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;}
.tk-bar{background:var(--ink);color:#F5F4F0;padding:13px 20px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.tk-bar b{font-weight:600;letter-spacing:.14em;font-size:12px;text-transform:uppercase;}
.tk-bar span{font-size:12px;color:#9AA0A8;}
.tk-note{background:var(--redsoft);border-bottom:1px solid #E0C8C8;color:#6E2225;padding:9px 20px;font-size:12.5px;line-height:1.5;}
.tk-modes{display:flex;background:var(--surface);border-bottom:1px solid var(--ls);overflow-x:auto;}
.tk-mode{flex:1 0 auto;border:0;border-right:1px solid var(--line);background:transparent;cursor:pointer;
  padding:12px 14px;font-family:inherit;font-size:13px;color:var(--soft);font-weight:500;white-space:nowrap;}
.tk-mode:last-child{border-right:0;}
.tk-mode.on{background:var(--ink);color:#F5F4F0;}
.tk-mode:not(.on):hover{background:#FBFAF8;color:var(--ink);}
.tk-steps{display:flex;border-bottom:1px solid var(--ls);background:var(--surface);overflow-x:auto;}
.tk-step{flex:1 0 auto;min-width:112px;border:0;background:transparent;cursor:pointer;padding:11px 14px;
  text-align:left;border-right:1px solid var(--line);border-bottom:2px solid transparent;font-family:inherit;color:var(--soft);}
.tk-step:last-child{border-right:0;}
.tk-step.on{color:var(--ink);border-bottom-color:var(--red);background:#FBFAF8;}
.tk-step em{display:block;font-style:normal;font-size:10px;letter-spacing:.13em;font-family:'IBM Plex Mono',monospace;color:var(--ls);margin-bottom:2px;}
.tk-step.on em{color:var(--red);}
.tk-step strong{font-size:13px;font-weight:500;}
.tk-wrap{max-width:1120px;margin:0 auto;padding:22px 18px;}
/* IN SCHMALER ANSICHT MEHR INHALT, seit dem 13. August 2026. Auf einem 390
   Pixel breiten Handy gingen 18 Pixel Rand plus 15 Pixel Karteninnenrand auf
   jeder Seite drauf, zusammen 66 von 390 Pixeln, ein Sechstel der Breite. Der
   Inhaber: "Ich hoffe in schmaler ansicht dann auch links rechts mehr vom
   Inhalt." Die Karten behalten ihren Rahmen, sie ruecken nur naeher an den
   Rand. */
@media(max-width:560px){.tk-wrap{padding:14px 10px;}.tk-pad{padding:12px;}}
.tk-grid{display:grid;grid-template-columns:1fr 296px;gap:20px;align-items:start;}
@media(max-width:880px){.tk-grid{grid-template-columns:1fr;}}
.tk-card{background:var(--surface);border:1px solid var(--ls);}
.tk-card>h3{margin:0;padding:11px 15px;border-bottom:1px solid var(--line);font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--soft);}
.tk-pad{padding:15px;}
.tk-field{margin-bottom:12px;}
.tk-field label{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);margin-bottom:5px;font-weight:500;}
.tk-in{width:100%;border:1px solid var(--ls);background:var(--surface);padding:8px 10px;font-size:14px;font-family:inherit;color:var(--ink);border-radius:0;}
.tk-in:focus{outline:2px solid var(--red);outline-offset:-1px;border-color:var(--red);}
.tk-in.num{font-family:'IBM Plex Mono',monospace;text-align:right;font-variant-numeric:tabular-nums;}
textarea.tk-in{line-height:1.55;resize:vertical;}
.tk-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.tk-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
@media(max-width:560px){.tk-row2,.tk-row3{grid-template-columns:1fr;}}
.tk-sec{border:1px solid var(--ls);background:var(--surface);margin-bottom:13px;}
.tk-sec.neg{border-left:3px solid var(--red);}
.tk-sec.ap{border-left:3px solid #B08A2E;}
.tk-sec.nopreis{border-left:3px solid var(--ls);background:#FBFAF8;}
.tk-sec-head{display:flex;gap:9px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);background:#FBFAF8;flex-wrap:wrap;}
.tk-sec-head .idx{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ls);width:20px;flex:none;}
.tk-sec-head .nm{flex:1;border:0;background:transparent;font-family:inherit;font-size:14px;font-weight:500;color:var(--ink);padding:2px 0;min-width:90px;}
.tk-sec-head .nm:focus{outline:0;border-bottom:1px solid var(--red);}
.tk-sum{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;flex:none;}
.tk-sum.neg{color:var(--red);}
.tk-sum.off{color:var(--ls);text-decoration:line-through;}
.tk-line{display:grid;grid-template-columns:1fr 1fr 84px 74px 24px;gap:8px;align-items:center;padding:7px 12px;border-bottom:1px solid #EEECE7;}
.tk-line:last-of-type{border-bottom:0;}
.tk-line .lbl{font-size:12.5px;color:var(--soft);}
.tk-line select.tk-in,.tk-line input.tk-in{padding:5px 7px;font-size:12.5px;}
.tk-mini{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--soft);text-align:right;}
.tk-mengezeile{display:grid;grid-template-columns:84px 110px 1fr 90px;gap:8px;align-items:center;
  padding:8px 12px;background:#F7F6F2;border-bottom:1px solid var(--line);}
@media(max-width:560px){.tk-mengezeile{grid-template-columns:1fr 1fr;}}
.tk-x{border:0;background:transparent;color:var(--ls);cursor:pointer;font-size:17px;line-height:1;padding:2px 4px;font-family:inherit;}
.tk-x:hover{color:var(--red);}
.tk-btn{border:1px solid var(--ink);background:var(--surface);color:var(--ink);padding:7px 13px;font-size:12.5px;font-family:inherit;cursor:pointer;border-radius:0;font-weight:500;}
.tk-btn:hover{background:var(--ink);color:var(--surface);}
.tk-btn.ghost{border-color:var(--ls);color:var(--soft);}
.tk-btn.ghost:hover{background:#F0EEE9;color:var(--ink);border-color:var(--ink);}
.tk-btn.red{border-color:var(--red);background:var(--red);color:#fff;}
.tk-btn.red:hover{background:#8E1619;border-color:#8E1619;}
.tk-btn.sm{padding:4px 9px;font-size:11.5px;}
.tk-btn:disabled{opacity:.45;cursor:default;}
.tk-btn:disabled:hover{background:var(--surface);color:var(--ink);}
.tk-side{position:sticky;top:14px;}
.tk-tot{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13px;}
.tk-tot span:last-child{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;}
.tk-tot.big{border-top:1px solid var(--ink);margin-top:8px;padding-top:10px;font-weight:600;font-size:15px;}
.tk-tot.dim{color:var(--soft);font-size:12px;}
.tk-db{background:#F0F5F2;border:1px solid #C9DDD2;padding:10px 12px;margin-top:13px;}
.tk-db .v{font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:600;color:var(--green);}
.tk-db .k{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);}
.tk-hint{font-size:12px;color:var(--soft);line-height:1.6;}
.tk-err{background:var(--redsoft);border:1px solid #E0C8C8;color:#6E2225;padding:9px 11px;font-size:12.5px;margin-bottom:12px;line-height:1.5;}
.tk-ok{background:#F0F5F2;border:1px solid #C9DDD2;color:#245240;padding:9px 11px;font-size:12.5px;margin-bottom:12px;line-height:1.5;}
.tk-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ls);background:var(--surface);
  padding:7px 11px;font-size:12.5px;cursor:pointer;font-family:inherit;color:var(--ink);margin:0 7px 7px 0;}
.tk-chip:hover{border-color:var(--ink);}
.tk-chip.on{background:var(--ink);color:#F5F4F0;border-color:var(--ink);}
.tk-chip.sm{padding:5px 9px;font-size:11.5px;margin:0 5px 5px 0;}
.tk-chip .f{font-family:'IBM Plex Mono',monospace;font-size:11px;opacity:.65;}
.tk-span{background:var(--ink);color:#F5F4F0;padding:22px 20px;text-align:center;}
.tk-span .k{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#9AA0A8;margin-bottom:10px;}
.tk-span .v{font-family:'IBM Plex Mono',monospace;font-size:clamp(24px,6vw,38px);font-weight:600;}
.tk-span .s{font-size:12px;color:#9AA0A8;margin-top:9px;}
.tk-bs{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:9px;}
.tk-bs .item{border:1px solid var(--ls);background:var(--surface);padding:0;display:flex;flex-direction:column;}
.tk-bs .item:hover{border-color:var(--ink);}
.tk-bs .pick{text-align:left;border:0;background:transparent;padding:10px 11px 8px;cursor:pointer;font-family:inherit;color:var(--ink);flex:1;}
.tk-bs .n{font-size:12.5px;font-weight:500;display:block;margin-bottom:3px;}
.tk-bs .d{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--soft);}
.tk-bs .tools{display:flex;gap:6px;padding:0 11px 9px;}
.tk-xml{background:#15171B;color:#D6D9DE;font-family:'IBM Plex Mono',monospace;font-size:11.5px;line-height:1.65;padding:15px;overflow-x:auto;white-space:pre;}
.tk-doc{background:#fff;border:1px solid var(--ls);padding:32px 28px;}
@media(max-width:560px){.tk-doc{padding:18px 15px;}}
.tk-doc-head{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid var(--ink);padding-bottom:13px;margin-bottom:18px;flex-wrap:wrap;}
.tk-logo{font-weight:700;font-size:19px;letter-spacing:.03em;}
.tk-logo small{display:block;font-weight:400;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-top:2px;}
.tk-doc table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:14px;}
.tk-doc thead th{background:var(--ink);color:#F5F4F0;text-align:left;padding:7px 9px;font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:500;}
.tk-doc thead th.r{text-align:right;}
.tk-doc td{border-bottom:1px solid var(--line);padding:9px;vertical-align:top;}
.tk-doc td.r{text-align:right;font-family:'IBM Plex Mono',monospace;white-space:nowrap;}
.tk-doc tr.zsb td{background:#F2F0EB;font-weight:600;}
.tk-doc .ptxt{color:var(--soft);font-size:11.5px;line-height:1.55;margin-top:4px;white-space:pre-wrap;}
.tk-doc-foot{margin-top:20px;border-top:2px solid var(--red);padding-top:9px;font-size:10.5px;color:var(--soft);line-height:1.6;}
.tk-sumbox{margin-left:auto;width:266px;max-width:100%;margin-top:15px;}
.tk-sumbox div{display:flex;justify-content:space-between;padding:5px 0;font-size:12.5px;border-bottom:1px solid var(--line);}
.tk-sumbox div:last-child{border-bottom:0;border-top:1px solid var(--ink);font-weight:600;padding-top:8px;margin-top:2px;font-size:14px;}
.tk-sumbox span:last-child{font-family:'IBM Plex Mono',monospace;}
.tk-tag{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;border:1px solid var(--ls);padding:2px 6px;color:var(--soft);}
.tk-tag.ap{border-color:#B08A2E;color:var(--amber);background:#FBF5E6;}
.tk-cnt{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--soft);}
.tk-cnt.over{color:var(--red);font-weight:600;}
.tk-pos{border:1px solid var(--ls);background:var(--surface);margin-bottom:13px;}
.tk-pos-head{display:flex;gap:9px;align-items:center;padding:9px 12px;background:#FBFAF8;border-bottom:1px solid var(--line);flex-wrap:wrap;}

/* ===========================================================================
   Ergänzungen, nicht im Prototyp enthalten
   ---------------------------------------------------------------------------
   Der Prototyp kannte keine Vorgangsliste, er zeigte immer genau einen
   Vorgang. Alles ab hier ist dazugekommen und hält sich an dieselben
   Grundfarben und Abstände: gleiche Variablen, gleiche Kanten, keine Rundungen,
   Zahlen immer in Plex Mono mit gleicher Ziffernbreite.
   =========================================================================== */

/* Die Filterleiste. Eine Zeile pro Gedanke, damit sie auf einem schmalen
   Bildschirm sauber umbricht statt zu quetschen. */
.tk-filter{display:flex;flex-direction:column;gap:11px;}
.tk-filter .zeile{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap;}
.tk-filter .zeile.eng{gap:0;}
.tk-filter .weit{flex:1 1 260px;min-width:200px;}
.tk-filter .schmal{flex:0 0 150px;}
.tk-filter .tk-field{margin-bottom:0;}
.tk-filter .gruppe{display:flex;align-items:center;gap:0;flex-wrap:wrap;}
.tk-filter .gruppe > .titel{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--soft);font-weight:500;margin-right:9px;}

/* Ein Chip mit Kästchen darin. Im Prototyp waren Chips Knöpfe mit eigenem
   Zustand. Hier trägt ein echtes Formularfeld den Zustand, damit die Liste
   ohne JavaScript filterbar bleibt: Das Kästchen ist die Wahrheit, die Klasse
   "on" nur die Anzeige. */
label.tk-chip{cursor:pointer;user-select:none;}
label.tk-chip input{width:13px;height:13px;margin:0;accent-color:var(--red);}
label.tk-chip.on input{accent-color:#F5F4F0;}

/* Ein Chip INNERHALB eines tk-field. Nötig, weil die Regel .tk-field label aus
   dem Prototyp dieselbe Genauigkeit hat und früher steht: Sie macht aus jedem
   label darin eine blockweise Feldbeschriftung in Versalien. Ein Chip ist aber
   keine Beschriftung, sondern ein Schalter. */
.tk-field label.tk-chip{display:inline-flex;margin-bottom:0;font-size:12.5px;
  font-weight:400;text-transform:none;letter-spacing:normal;color:var(--ink);}
.tk-field label.tk-chip.on{color:#F5F4F0;}

/* Eine Nummer, die keine Geldsumme ist: gleiche Ziffernbreite, aber linksbündig.
   tk-in.num aus dem Prototyp ist rechtsbündig und damit für Beträge gedacht. */
.tk-in.nr{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;}

/* Die Liste selbst. */
.tk-liste{width:100%;border-collapse:collapse;font-size:13px;background:var(--surface);}
.tk-liste thead th{background:var(--ink);color:#F5F4F0;text-align:left;padding:8px 10px;
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:500;white-space:nowrap;}
.tk-liste thead th.r{text-align:right;}
.tk-liste td{border-bottom:1px solid var(--line);padding:9px 10px;vertical-align:top;}
.tk-liste tbody tr:hover td{background:#FBFAF8;}
.tk-liste tbody tr:last-child td{border-bottom:0;}
.tk-liste td.r{text-align:right;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.tk-liste td.nr{font-family:'IBM Plex Mono',ui-monospace,monospace;white-space:nowrap;}
.tk-liste a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ls);}
.tk-liste a:hover{color:var(--red);border-bottom-color:var(--red);}
.tk-liste .zweit{display:block;font-size:11.5px;color:var(--soft);margin-top:2px;}
.tk-liste .neg{color:var(--red);}

/* Waagerecht scrollen statt die Spalten zu zerdrücken. Eine Kalkulationszeile
   mit Kunde und Projekt lässt sich nicht sinnvoll auf 360 Pixel falten. */
.tk-scroll{overflow-x:auto;border:1px solid var(--ls);}
.tk-scroll .tk-liste{min-width:760px;border:0;}

/* Statusfähnchen. Bewusst keine bunten Punkte, sondern dieselbe Machart wie
   tk-tag im Prototyp: Rahmen, Versalien, klein. */
.tk-stand{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.07em;
  border:1px solid var(--ls);padding:2px 6px;color:var(--soft);white-space:nowrap;display:inline-block;}
.tk-stand.entwurf{border-color:var(--ls);color:var(--soft);}
.tk-stand.geprueft{border-color:#B08A2E;color:var(--amber);background:#FBF5E6;}
.tk-stand.versendet{border-color:var(--ink);color:var(--ink);}
.tk-stand.angenommen{border-color:#C9DDD2;color:var(--green);background:#F0F5F2;}
.tk-stand.abgelehnt,.tk-stand.verworfen{border-color:#E0C8C8;color:#6E2225;background:var(--redsoft);}
.tk-stand.abgelaufen,.tk-stand.ersetzt{border-color:var(--line);color:var(--ls);}

/* Kopfzeile über der Tabelle: wie viele Treffer, und wonach sortiert ist. */
.tk-trefferkopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  flex-wrap:wrap;margin-bottom:9px;}
.tk-trefferkopf .anzahl{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:var(--soft);}

/* Leere Liste. Kein trauriges Bild, ein Satz der weiterhilft. */
.tk-leer{background:var(--surface);border:1px solid var(--ls);padding:38px 20px;text-align:center;}
.tk-leer p{margin:0 0 8px;font-size:13.5px;}
.tk-leer p:last-child{margin-bottom:0;}

/* Blättern. */
.tk-blaettern{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:13px;}
.tk-blaettern .stelle{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;color:var(--soft);}
a.tk-btn{display:inline-block;text-decoration:none;}
a.tk-btn:hover{background:var(--ink);color:var(--surface);}

/* Der Zeiger, den htmx beim Nachladen einblendet. Ohne ihn wirkt eine Suche,
   die eine halbe Sekunde braucht, wie ein Werkzeug das hängt. */
.tk-laed{display:none;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);}
.htmx-request .tk-laed,.htmx-request.tk-laed{display:inline;}
.htmx-request .tk-liste tbody{opacity:.45;}

/* Die Vorgangsansicht, lesend. Baut auf tk-doc aus dem Prototyp auf. */
.tk-kopfdaten{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:13px;}
.tk-kopfdaten .k{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);
  margin-bottom:3px;font-weight:500;}
.tk-kopfdaten .v{font-size:13.5px;}
.tk-kopfdaten .v.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;}
.tk-zurueck{font-size:12px;color:var(--soft);text-decoration:none;border-bottom:1px solid var(--ls);}
.tk-zurueck:hover{color:var(--red);border-bottom-color:var(--red);}

/* Positionen bearbeiten. Der Anfang der Kalkulationsmaske. */
.tk-posliste .eintrag{border:1px solid var(--line);padding:10px 12px;margin-bottom:9px;background:var(--surface);}
.tk-posliste .eintrag.offen{border-color:var(--red);border-left-width:3px;}
.tk-posliste .kopf{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;}
.tk-posliste .kopf b{font-size:13.5px;font-weight:500;}
.tk-posliste .werte{margin-left:auto;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11.5px;color:var(--soft);white-space:nowrap;}
.tk-posliste .ptxt{color:var(--soft);font-size:11.5px;line-height:1.55;margin-top:5px;white-space:pre-wrap;}
.tk-posliste .knoepfe{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap;align-items:flex-start;}
.tk-posliste .knoepfe form{display:inline;}

/* Reihenfolge und Baustein, seit dem 9. August 2026.

   Die Pfeile sind schmal und quadratisch, damit sie neben Ändern und Löschen
   nicht wie ein dritter gleichwertiger Weg aussehen. Sie ändern nichts an der
   Kalkulation, nur an der Reihenfolge, und die ist im Angebot trotzdem
   sichtbar (rechenregeln.md 6.3). */
.tk-posliste .knoepfe button[aria-label^="Position nach"]{min-width:30px;padding-left:8px;padding-right:8px;}
.tk-posliste .knoepfe .tk-aufklapp{flex:1 0 100%;margin-top:4px;}
.tk-aufklapp.sm > summary{font-size:11px;letter-spacing:.06em;}

/* Ein Baustein wird eingesetzt oder aus einer Position gesichert. Beide Male
   eine Reihe aus wenigen Feldern, die auf dem Telefon untereinander steht. */
.tk-bausteinwahl,.tk-bausteinform{display:grid;grid-template-columns:1fr 110px auto;gap:12px;align-items:end;}
.tk-bausteinwahl .tk-field,.tk-bausteinform .tk-field{margin-bottom:0;}
@media(max-width:640px){
  .tk-bausteinwahl,.tk-bausteinform{grid-template-columns:1fr;}
}

.tk-posform .zeile1{display:grid;grid-template-columns:220px 1fr;gap:12px;}
.tk-posform .zeile2{display:grid;grid-template-columns:110px 110px 1fr;gap:12px;}
@media(max-width:640px){.tk-posform .zeile1,.tk-posform .zeile2{grid-template-columns:1fr;}}
.tk-posform select.tk-in{height:37px;}

/* Zeitzeilen: wer arbeitet, wo, wie lange. */
.tk-zeiten{border:1px solid var(--line);background:#FBFAF8;padding:9px 11px;}
.tk-zeiten .kopfzeile,.tk-zeiten .zeit{display:grid;grid-template-columns:1fr 1fr 110px;gap:8px;align-items:center;}
.tk-zeiten .kopfzeile{font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ls);font-weight:500;margin-bottom:5px;}
.tk-zeiten .zeit{margin-bottom:6px;}
.tk-zeiten .zeit:last-of-type{margin-bottom:0;}
.tk-zeiten select.tk-in,.tk-zeiten input.tk-in{padding:5px 7px;font-size:12.5px;height:auto;}
@media(max-width:560px){.tk-zeiten .kopfzeile{display:none;}.tk-zeiten .zeit{grid-template-columns:1fr;}}

/* Die Materialposten, rechenregeln.md 2.7. Wie die Zeitzeilen aufgebaut, damit
   die beiden Blöcke im selben Formular nicht wie zwei Bauarten wirken. Vier
   Spalten statt drei: was, wie viel, welche Einheit, was es kostet. */
.tk-posten{border:1px solid var(--line);background:#FBFAF8;padding:9px 11px;}
.tk-posten .kopfzeile,.tk-posten .posten{display:grid;grid-template-columns:1fr 90px 90px 110px;gap:8px;align-items:center;}
.tk-posten .kopfzeile{font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ls);font-weight:500;margin-bottom:5px;}
.tk-posten .posten{margin-bottom:6px;}
.tk-posten .posten:last-of-type{margin-bottom:0;}
.tk-posten input.tk-in{padding:5px 7px;font-size:12.5px;height:auto;}
@media(max-width:560px){.tk-posten .kopfzeile{display:none;}.tk-posten .posten{grid-template-columns:1fr;}}

/* Ein Feld, das seine Zahl nicht aus der Tastatur bekommt, sondern aus den
   Posten darunter. Es muss anders aussehen als ein leeres Eingabefeld, sonst
   tippt jemand hinein und wundert sich, dass nichts stehen bleibt.

   NUR DER HINTERGRUND WIRD GRAU, die Zahl bleibt schwarz. Sie ist der
   Einkaufspreis und wird gelesen, nicht überflogen. */
input.tk-in[readonly]{background:#F2F0EC;cursor:not-allowed;}

/* Eine Position mit Preis, aber ohne Stunden. Meistens ein Versehen: Ohne
   Stunden fehlt der Lohn, und der ist der größere Teil der Selbstkosten. */
.tk-posliste .ohnezeit{color:var(--red);}

/* Stand und Weg zum Angebot. */
.tk-stufen{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:15px;}
.tk-stufen form{margin:0;}

/* Das Festschreiben ist der Einschnitt: Nummer ziehen, Sätze einfrieren,
   unveränderlich. Deshalb steht es abgesetzt und in Rot, nicht in der Reihe
   der anderen Knöpfe. Wer hier klickt, soll gemerkt haben, dass es anders ist. */
.tk-festschreiben{border-top:1px solid var(--line);padding-top:15px;}
.tk-festschreiben .tk-hint{margin:9px 0 0;}

/* Die Vorabprüfung. Gelb und nicht rot: Jeder Punkt kann im Einzelfall richtig
   sein, gesperrt wird nichts. */
.tk-warnung{background:#FBF5E6;border-left:3px solid #B08A2E;color:#6B5314;
  padding:11px 13px;margin-bottom:15px;font-size:12.5px;line-height:1.6;}
.tk-warnung ul{margin:6px 0 0 18px;padding:0;}
.tk-warnung li{margin-bottom:4px;}
.tk-warnung p{margin:9px 0 0;font-style:italic;}

/* Der Kunde am Vorgang. */
.tk-kunde .nm{font-size:15px;font-weight:600;}
.tk-kunde .zu{font-size:13px;color:var(--soft);}
.tk-kunde .ad{font-size:13px;margin-top:2px;}
.tk-kunde .mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;
  color:var(--soft);margin-top:5px;}
.tk-kunde .mono .ohne{color:var(--ls);}

/* Fehlt der Kunde, ist das bei einem Angebot ein echter Mangel: Amicron weiß
   dann nicht, an wen es geht. Bei einem Richtpreis ist es normal, deshalb der
   ruhige gelbe Ton und kein Rot. */
.tk-hint.kein-kunde{background:#FBF5E6;border-left:3px solid #B08A2E;color:#6B5314;
  padding:8px 11px;}

.tk-kundenliste{margin-top:9px;border:1px solid var(--line);}
.tk-kundenliste .treffer{margin:0;}
.tk-kundenliste .treffer + .treffer button{border-top:1px solid var(--line);}
.tk-kundenliste button{display:block;width:100%;text-align:left;border:0;background:var(--surface);
  padding:9px 11px;cursor:pointer;font-family:inherit;color:var(--ink);}
.tk-kundenliste button:hover{background:#FBF5E6;}
.tk-kundenliste .nm{display:block;font-size:13.5px;font-weight:500;}
.tk-kundenliste .zu,.tk-kundenliste .ad{display:block;font-size:11.5px;color:var(--soft);}
.tk-kundenliste .nr{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10.5px;color:var(--ls);margin-top:2px;}
.htmx-request.tk-kundenliste,.htmx-request .tk-kundenliste{opacity:.45;}

/* Der Rechenweg. Aufklappbar mit <details>, ohne eine Zeile JavaScript. */
.tk-aufklapp{margin-top:9px;}
.tk-aufklapp > summary{cursor:pointer;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--soft);font-weight:500;padding:4px 0;user-select:none;list-style:none;}
.tk-aufklapp > summary::-webkit-details-marker{display:none;}
/* DER PFEIL IST KLEINER ALS DIE SCHRIFT DANEBEN, seit dem 13. August 2026.
   Der Inhaber: "die kleinen aufklapp pfeile sind schoen aber sie koennte ein
   klitze kleines bisschen kleiner sein." Getroffen wird trotzdem sicher, weil
   die ganze Zeile anklickbar ist und nicht das Zeichen. Der Abstand haelt die
   Zeile in der Waage, sonst klebt der kleinere Pfeil am Wort. */
.tk-aufklapp > summary::before{content:"▸";font-family:'IBM Plex Mono',monospace;
  color:var(--ls);font-size:.72em;margin-right:.5em;}
.tk-aufklapp[open] > summary::before{content:"▾";}
.tk-aufklapp > summary:hover{color:var(--ink);}

.tk-rechenweg{background:#FBFAF8;border:1px solid var(--line);padding:12px;margin-top:5px;}
.tk-rechenweg table{width:100%;border-collapse:collapse;font-size:12.5px;}
.tk-rechenweg thead th{text-align:left;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--soft);font-weight:600;border-bottom:1px solid var(--ls);padding:0 0 5px;}
.tk-rechenweg thead th.r,.tk-rechenweg td.r{text-align:right;}
.tk-rechenweg td{padding:4px 0;border-bottom:1px solid #EEECE7;}
.tk-rechenweg td.r{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;
  white-space:nowrap;padding-left:12px;}
.tk-rechenweg td.rechnung,.tk-rechenweg th.rechnung{color:var(--soft);font-size:11.5px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;padding-left:12px;}
/* Die einzelnen Materialposten, rechenregeln.md 2.7. Eingerückt und leiser als
   die Rechenschritte: Sie sind die Herleitung der Zeile darunter und nicht
   selbst ein Schritt der Preisformel. */
.tk-rechenweg tr.posten td{color:var(--soft);border-bottom:0;padding:2px 0;}
.tk-rechenweg tr.posten td:first-child{padding-left:14px;}
.tk-rechenweg tr.zwischen td{border-top:1px solid var(--ls);color:var(--soft);}
.tk-rechenweg tr.ergebnis td{font-weight:600;border-bottom:0;border-top:1px solid var(--ink);}
.tk-rechenweg .db{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  background:#F0F5F2;border:1px solid #C9DDD2;padding:8px 11px;margin-top:11px;}
.tk-rechenweg .db .k{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);}
.tk-rechenweg .db .v{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:16px;
  font-weight:600;color:var(--green);}
@media(max-width:560px){.tk-rechenweg td.rechnung,.tk-rechenweg th.rechnung{display:none;}}

/* Stunden ohne Kostenstelle. Bewusst der ruhige gelbe Ton und nicht das Rot
   der Fehler: "ohne Platzbezug" ist erlaubt und für Planung oder Bürozeit
   richtig. Es soll auffallen, nicht anklagen. */
.tk-posliste .platzlos{background:#FBF5E6;border-left:3px solid #B08A2E;color:#6B5314;
  padding:7px 10px;margin-top:7px;font-size:11.5px;line-height:1.55;}

/* Fußzeile des Werkzeugs. Sagt, welcher Stand läuft. */
.tk-fuss{max-width:1120px;margin:0 auto;padding:0 18px 26px;font-size:11px;color:var(--ls);
  font-family:'IBM Plex Mono',ui-monospace,monospace;}

/* Die Grundzahlen des Betriebs, rechenregeln.md 12.1.

   JEDE ZEILE IST EIN EIGENES FORMULAR, deshalb ein Raster je Zeile und nicht
   eine Tabelle über alles. Wer einen Satz ändert, soll nicht versehentlich
   einen zweiten mitnehmen, und die Bemerkung gehört zu genau einer Änderung. */
.tk-satzform{display:grid;grid-template-columns:1.4fr .8fr .8fr 2fr auto;gap:12px;
  align-items:end;padding:11px 0;border-bottom:1px solid var(--line);}
.tk-satzform:last-of-type{border-bottom:0;}
.tk-satzform .tk-field{margin-bottom:0;}
.tk-satzform .tk-hint{display:block;font-size:11px;margin:0;}
.tk-satzform button{white-space:nowrap;}
@media(max-width:860px){
  .tk-satzform{grid-template-columns:1fr 1fr;}
  .tk-satzform .tk-field.breit{grid-column:1 / -1;}
  .tk-satzform button{grid-column:1 / -1;}
}

/* Die Geschichte eines Satzes. Sie ist der Grund, warum beim Ändern nicht
   überschrieben wird, und steht deshalb sichtbar darunter statt auf einer
   zweiten Seite. */
.tk-verlauf{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:9px;}
.tk-verlauf thead th{text-align:left;border-bottom:1px solid var(--ls);padding:6px 8px;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);font-weight:500;}
.tk-verlauf td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top;}
.tk-verlauf td.r{text-align:right;font-family:'IBM Plex Mono',ui-monospace,monospace;}

/* Der Weg zu den Grundzahlen im schwarzen Band. */
.tk-bar a{color:#F5F4F0;font-size:12px;text-decoration:none;border-bottom:1px solid #4A5058;}
.tk-bar a:hover{border-bottom-color:#F5F4F0;}
/* Der Name führt zur Vorgangsliste, TRÄGT ABER KEINEN STRICH. Ein Logo, das
   aussieht wie ein Navigationspunkt daneben, wird zum vierten Menüeintrag.
   Der Zeiger sagt beim Darüberfahren, dass es geht, und wer es nicht weiß,
   probiert es an dieser Stelle ohnehin als Erstes. */
.tk-bar a.tk-marke{border-bottom:0;}
.tk-bar a.tk-marke:hover b{color:#FFF;}
.tk-bar a.tk-marke b{transition:color .12s;}

/* EINE Positionsliste statt zweier, seit dem 9. August 2026.

   Vorher stand jede Position zweimal auf der Seite, oben als Tabelle zum
   Lesen und unten als Karte zum Bearbeiten. Der Inhaber: "man steigt kaum
   noch durch." Die Knöpfe hängen jetzt an der Tabellenzeile, alles Seltene
   klappt in einer Zeile darunter auf. */
/* Die Knöpfe stehen in der Zeile UNTER der Position und nicht in einer
   eigenen Spalte. Eine neunte Spalte machte die Tabelle 831 Pixel breit, und
   in einem Fenster von 600 lief sie über den Rand. Hier unten hat die Reihe
   die volle Breite und braucht keine Sonderregel für schmale Fenster. */
.tk-doc .tk-posdetails .knoepfe{display:flex;gap:5px;margin:0;flex-wrap:wrap;}
.tk-doc .tk-posdetails .knoepfe form{display:inline;margin:0;}
.tk-doc .tk-posdetails .knoepfe button{min-width:28px;padding:4px 8px;}

/* Die aufklappbare Zeile unter einer Position. Kein eigener Rahmen und ein
   ruhigerer Grund, damit die Tabelle darüber die Hauptsache bleibt. */
.tk-doc tr.details > td{border-bottom:1px solid var(--line);padding:0 9px 9px;}
/* NEBENEINANDER, nicht untereinander. Untereinander kostete jede Position
   zwei zusätzliche Zeilen, und die Seite wurde durch das Zusammenlegen kaum
   kürzer. So steht alles zu einer Position in einer Reihe. */
.tk-doc .tk-posdetails{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;}
.tk-doc .tk-posdetails > details{flex:0 0 auto;}
.tk-doc .tk-posdetails > details[open]{flex:1 0 100%;}
.tk-doc .tk-posdetails > .platzlos{flex:1 0 100%;}
.tk-doc .tk-posdetails:empty{display:none;}
.tk-doc .tk-posdetails .platzlos{margin-top:0;}

/* Die Position, die gerade geändert wird, steht an ihrer Stelle in der Liste
   und nicht am Seitenende: Sonst sieht man nicht mehr, welche Zeile man
   gerade bearbeitet. */
.tk-doc tr.offen > td{background:#FBFAF8;padding:13px 9px;}

/* Die Bausteinverwaltung, rechenregeln.md 10. Eigene Seite, damit die
   Vorgangsseite durch die nächsten Module nicht weiter wächst. */
.tk-bausteinfilter{display:grid;grid-template-columns:200px 1fr auto auto;gap:12px;align-items:end;}
.tk-bausteinfilter .tk-field{margin-bottom:0;}
@media(max-width:760px){.tk-bausteinfilter{grid-template-columns:1fr;}}

/* Ein stillgelegter Baustein bleibt lesbar, tritt aber zurück. Gelöscht ist er
   nicht: Bestehende Positionen daraus behalten ihre Herkunft. */
.tk-posliste .eintrag.still{opacity:.62;}
.tk-posliste .eintrag.still .kopf b{text-decoration:line-through;}
.tk-bausteinbearbeiten{padding:4px 0 8px;}
.tk-bausteinbearbeiten .tk-row2,.tk-bausteinbearbeiten .tk-row3{margin-bottom:12px;}

/* Die Richtpreismaske, rechenregeln.md 4. Die Spanne steht ÜBER dem Formular:
   Man ändert eine Zahl, schickt ab und sieht die neue Spanne, ohne zu
   scrollen. Am Telefon zählt das. */
.tk-spanne{border:1px solid var(--ink);padding:15px 17px;background:#FBFAF8;}
.tk-spanne .k{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);
  margin-bottom:5px;font-weight:500;}
.tk-spanne .v{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:24px;font-weight:600;
  line-height:1.25;}
.tk-spanne .tk-hint{margin:9px 0 0;}
@media(max-width:560px){.tk-spanne .v{font-size:19px;}}

.tk-rpform{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;align-items:end;}
.tk-rpform .tk-field{margin-bottom:0;}
.tk-rpform .tk-field.breit{grid-column:1 / -1;}
.tk-rpform button{grid-column:1 / -1;justify-self:start;}
.tk-merkmale{display:flex;flex-wrap:wrap;gap:7px;}

/* Die Richtpreisverwaltung. Wie die Bausteinseite aufgebaut: Liste mit
   aufklappbarem Formular an Ort und Stelle. */
.tk-rpverwaltung{padding:4px 0 8px;}
.tk-rpverwaltung .tk-row2,.tk-rpverwaltung .tk-row3{margin-bottom:12px;}

/* Textvorschlaege aus Stichworten, rechenregeln.md 17. Bewusst zurueckhaltend
   und ohne Farbe: Ein Vorschlag ist noch kein Ergebnis, er soll nicht wie eine
   Bestaetigung aussehen. */
.tk-vorschlag{background:#FAFAF8;border:1px solid #E3E1DA;padding:10px 11px;margin-bottom:8px;
  font-size:13px;line-height:1.55;}
.tk-vorschlag p{white-space:pre-wrap;}

/* Erklärungen hinter einem i, seit dem 11. August 2026.
   Warnungen mit Folgen stehen NICHT hier drin, siehe README
   „Zwei Sorten Text". Ohne JavaScript, mit <details>. */
.tk-info{margin:4px 0 11px;}
.tk-info > summary{cursor:pointer;font-size:11.5px;color:var(--soft);
  padding:2px 0;user-select:none;list-style:none;display:flex;align-items:center;gap:6px;}
.tk-info > summary::-webkit-details-marker{display:none;}
.tk-info > summary:hover{color:var(--ink);}
.tk-info-i{display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;flex:0 0 15px;border:1px solid var(--ls);border-radius:50%;
  font-family:'IBM Plex Mono',monospace;font-size:10px;line-height:1;color:var(--soft);}
.tk-info > summary:hover .tk-info-i{border-color:var(--ink);color:var(--ink);}
/* AUFGEKLAPPT NICHT AUSFÜLLEN. Gefüllt wurde daraus ein schwarzer Punkt, das i
   darin war bei 10px nicht mehr zu erkennen. Am 11. August 2026 im Browser
   gesehen, nicht in der Messung. */
.tk-info[open] > summary{color:var(--ink);}
.tk-info[open] .tk-info-i{border-color:var(--ink);color:var(--ink);}
.tk-info-text{font-size:12px;color:var(--soft);line-height:1.6;
  padding:6px 0 2px 21px;max-width:62ch;}

/* Zeiten ohne Auftrag, rechenregeln.md 16.7 und 16.14.
   Je Zettel drei Wege, und jeder braucht sein EIGENES Formular: Die
   Eingabetaste nimmt den ersten Absendeknopf eines Formulars, bei dreien in
   einem wäre der Zettel nach einem Enter beim erstbesten Vorgang gelandet
   (Fallstrick vom 11. August 2026). Damit die Zelle davon nicht zur Wand wird,
   steht jeder Weg in einer Zeile: Auswahl links, Knopf rechts. Ohne die
   Breitengrenze zieht sich das Auswahlfeld ueber die halbe Seite, weil .tk-in
   auf 100 Prozent steht. */
.tk-wohin{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;
  max-width:480px;margin-bottom:9px;}
.tk-wohin:last-child{margin-bottom:0;}
.tk-wohin > .tk-hint{grid-column:1 / -1;}
.tk-wohin select.tk-in,.tk-wohin input.tk-in{padding:5px 7px;font-size:12.5px;}
.tk-wohin > button.allein{grid-column:1 / -1;justify-self:start;}
/* Die Nacharbeit hat zwei Knoepfe nebeneinander, Gewaehrleistung und
   berechenbar. Sie stehen bewusst als zwei Knoepfe da und nicht als Auswahl
   mit einem Knopf: Es sind zwei verschiedene Entscheidungen mit zwei
   verschiedenen Folgen, und keine davon ist die Vorgabe (16.5). */
.tk-wohin.zwei{grid-template-columns:1fr auto auto;}
@media(max-width:700px){
  .tk-wohin,.tk-wohin.zwei{grid-template-columns:1fr;}
  .tk-wohin > button.allein{justify-self:stretch;}
}

/* Nachkalkulation am Vorgang, rechenregeln.md 16.10.
   Soll, Ist und Abweichung stehen untereinander und nicht nebeneinander: Es
   sind drei Zahlen, die man von oben nach unten liest, und genau so steht das
   Beispiel in 16.5. */
.tk-nk{border:1px solid var(--line);background:var(--surface);margin:12px 0;}
.tk-nk-zeile{display:grid;grid-template-columns:150px auto 1fr;gap:12px;align-items:baseline;
  padding:10px 14px;border-bottom:1px solid var(--line);}
.tk-nk-zeile:last-child{border-bottom:0;}
/* Eine Zeile aus einem einzigen Satz laeuft ueber die ganze Breite. In der
   150-Pixel-Spalte umbrach die Herkunft der Materialsumme in vier Zeilen. */
.tk-nk-zeile.breit{grid-template-columns:1fr;}
.tk-nk-zeile > b{font-size:17px;font-variant-numeric:tabular-nums;}
/* Nacharbeit steht DARUNTER und nicht darin. Der Strich links sagt das auch
   dem, der die Ueberschrift ueberliest. */
.tk-nk-zeile.nacharbeit{border-left:3px solid var(--amber);background:#FBF8F1;}
.tk-nk-drueber{color:var(--red);}
.tk-nk-drunter{color:var(--green);}
@media(max-width:560px){.tk-nk-zeile{grid-template-columns:1fr;gap:2px;}}
/* DIE MATERIALZEILEN IM IST, Aenderung 013 vom 13. August 2026.
   Vorher stand hier tk-materialform fuer EINE Summe mit einer Pflichtnotiz.
   Der Inhaber hat umentschieden: "3 Zeilen haette ich mindestens".

   Herkunft breit, Betrag schmal und rechtsbuendig, Art als Auswahl. Die
   Kopfzeile steht einmal darueber und nicht als Beschriftung in jeder Zeile,
   sonst liest man dieselben drei Woerter fuenfmal. */
.tk-materialzeilen{margin-top:12px;}
.tk-matkopf,.tk-matzeile{display:grid;grid-template-columns:1fr 120px 150px;gap:8px;}
.tk-matkopf{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--soft);font-weight:500;margin-bottom:5px;}
.tk-matzeile{margin-bottom:6px;}
.tk-materialzeilen .knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
/* Am Handy untereinander. Drei Felder nebeneinander sind auf 375 Pixeln
   unbedienbar, und der Betrag ist das Feld, das getroffen werden muss. */
@media(max-width:560px){
  .tk-matkopf{display:none;}
  .tk-matzeile{grid-template-columns:1fr;gap:4px;
    border-left:2px solid var(--line);padding-left:9px;margin-bottom:11px;}
}

/* Fremdleistung steht GETRENNT und nicht in der Materialsumme: Glaser,
   Steinmetz und Lackierer sind Zukauf und keine eigene Arbeit. Derselbe Strich
   wie bei der Nacharbeit, weil es dieselbe Aussage ist: gehoert dazu, zaehlt
   aber nicht mit. */
.tk-nk-zeile.fremd{border-left:3px solid var(--ls);background:#FBFAF8;}

/* Eine stornierte Buchung bleibt sichtbar, aber durchgestrichen (16.17).
   Wer eine Zeile verschwinden laesst, macht aus einem Fehler eine Luecke. */
.tk-tab tr.tk-still td{text-decoration:line-through;color:var(--ls);}
.tk-tab tr.tk-still .tk-hint{text-decoration:none;}

/* ===========================================================================
   13. August 2026: was auf der Benutzer- und der Zeitenseite gefehlt hat
   =========================================================================== */

/* TK-INLINE WAR NIE DEFINIERT. In der Uebergabe vom 12. August stand es als
   Fund am Rande, mit zwei Fundstellen; es sind fuenf in drei Dateien. Die
   Folge war auf jedem Bildschirmfoto zu sehen: In der Aendern-Spalte der
   Benutzertabelle steht ein <a> und daneben ein <form>, und ein form ist von
   Haus aus ein Block. "Aendern" und "Stilllegen" standen deshalb
   uebereinander, jeder in einer eigenen Zeile, und die Zeilenhoehe der
   Tabelle verdoppelte sich.

   inline-flex und nicht inline: Das Element traegt bei der Checkbox zwei
   Kinder, die mittig zueinander stehen sollen. */
.tk-inline{display:inline-flex;align-items:center;gap:7px;margin:0;
  vertical-align:middle;}
/* Ein Auswahlfeld in einem tk-inline darf NICHT auf 100 Prozent gehen. Genau
   daran lief am 12. August ein Feld ueber die halbe Seite (.tk-in steht auf
   width:100%). */
.tk-inline .tk-in{width:auto;}

/* Zwei Knoepfe in einer Tabellenzelle stehen nebeneinander und brechen
   zusammen um, nicht einzeln.

   KEIN display:flex auf dem td selbst: Das nimmt der Zelle ihr Zellverhalten,
   und in einer Tabelle, die daneben normale Zeilen hat, verrutscht dann die
   senkrechte Ausrichtung. Die Kinder inline zu setzen reicht, den Umbruch
   besorgt der normale Zeilenfluss. */
.tk-tab td.knoepfe{white-space:normal;line-height:2.1;}
.tk-tab td.knoepfe > *{vertical-align:middle;margin-right:6px;}
.tk-tab td.knoepfe > *:last-child{margin-right:0;}

/* DIE RECHTE EINER ROLLE ALS EINZELNE MARKEN statt als eine Zeile Monospace.
   Vierzehn durch Komma getrennte Bezeichner in einer Tabellenzelle sind eine
   Textwand, in der niemand ein einzelnes Recht findet. Als Marken hat jedes
   seine eigene Kante, und die Zeile bricht dort um, wo sie soll. */
.tk-rechte{display:flex;flex-wrap:wrap;gap:4px;}
.tk-recht{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;
  background:#F1EFE9;border:1px solid var(--line);padding:2px 6px;color:var(--soft);
  white-space:nowrap;}
.tk-recht.alles{background:var(--ink);color:#F5F4F0;border-color:var(--ink);}

/* EINE ZAEHLERLEISTE FUER DIE DREI LISTEN unter /zeiten. Vorher standen dort
   drei grosse Ueberschriften mit je einem Satz "Nichts wartet." darunter, und
   eine Seite, die zu neun Zehnteln aus leeren Abschnitten besteht, sieht
   kaputt aus, obwohl alles in Ordnung ist.

   Die Leiste bleibt AUCH BEI NULL stehen. Wer die leeren Abschnitte ganz
   ausblendet, nimmt dem Buero das Wissen, dass es sie gibt: dieselbe Falle wie
   eine Sperre, die niemand sieht (rechenregeln.md 16.16). */
.tk-zaehler{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);
  border:1px solid var(--ls);margin:14px 0;}
.tk-zaehler > div{flex:1 1 130px;background:var(--surface);padding:11px 14px;}
.tk-zaehler .z{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;
  line-height:1.1;}
.tk-zaehler .z.leer{color:var(--ls);font-weight:400;}
.tk-zaehler .b{font-size:11.5px;color:var(--soft);margin-top:2px;}

/* DIE BENUTZERTABELLE IN SCHMALER ANSICHT ALS KARTEN. Acht Spalten passen auf
   kein Handy. Statt zu quetschen, wird jede Zeile eine Karte und jede Zelle
   bekommt ihre Beschriftung aus data-kopf vorangestellt. */
@media(max-width:760px){
  .tk-karten thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .tk-karten tr{display:block;background:var(--surface);border:1px solid var(--ls);
    margin-bottom:9px;padding:4px 0;}
  .tk-karten td{display:flex;gap:10px;border:0;padding:5px 12px;align-items:baseline;}
  .tk-karten td::before{content:attr(data-kopf);flex:0 0 34%;font-size:11px;
    letter-spacing:.06em;text-transform:uppercase;color:var(--soft);font-weight:500;}
  .tk-karten td:empty{display:none;}
  .tk-karten td.knoepfe{justify-content:flex-start;padding-top:8px;
    border-top:1px solid var(--line);margin-top:4px;}
  .tk-karten td.knoepfe::before{content:none;}
}

/* ---------------------------------------------------------------------------
   Vier Klassen, die benutzt wurden und nie eine Regel hatten.

   GEFUNDEN VON EINEM TEST, nicht von einem Auge: "Die Stildateien kennen jede
   benutzte Klasse" in oberflaeche.test.ts. tk-inline stand seit dem 12. August
   als Randnotiz in einer Uebergabe, die anderen vier wusste niemand. Eine
   fehlende Klasse wirft keinen Fehler und faerbt nichts rot, sie laesst die
   Seite nur ein wenig falsch aussehen.
   --------------------------------------------------------------------------- */

/* Die Nachkalkulation am Vorgang. Sie enthaelt selbst weisse Bloecke (tk-nk),
   ein weisser Grund darunter waere flach. Deshalb ein abgesetzter Bereich mit
   kraeftiger Linie oben: Sie sagt, dass hier ein anderes Thema anfaengt als
   die Positionen darueber. */
.tk-karte{border-top:2px solid var(--ink);margin-top:26px;padding-top:4px;}
.tk-karte > h2{font-size:16px;margin:12px 0 2px;}
.tk-karte > h3{font-size:12.5px;letter-spacing:.04em;color:var(--soft);
  margin:22px 0 6px;font-weight:600;}

/* Das Kuerzel des Angemeldeten in der schwarzen Leiste. Monospace, damit es
   sich vom Fliesstext daneben abhebt, und leiser als die Wege. */
.tk-wer{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;
  color:#9AA0A8;letter-spacing:.06em;}

/* Das Abmeldeformular. Ohne inline steht der Knopf in einer eigenen Zeile und
   die Leiste wird doppelt so hoch. */
.tk-abmelden{display:inline-flex;margin:0;}
.tk-abmelden .tk-btn{padding:4px 10px;font-size:11.5px;}

/* Die Formulare am Vorgangskopf und am Kundenfeld: Beschriftung ueber dem
   Feld, zwei Spalten, der Knopf darunter ueber die ganze Breite. */
.tk-kopfform{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;
  align-items:start;margin-top:10px;}
.tk-kopfform .tk-field{margin-bottom:0;}
.tk-kopfform > p,.tk-kopfform > details,.tk-kopfform > button{grid-column:1 / -1;}
.tk-kopfform > button{justify-self:start;}
@media(max-width:560px){.tk-kopfform{grid-template-columns:1fr;}}

/* Die Wertschoepfung in der Summenbox (rechenregeln.md 16.18). Sie steht unter
   dem Deckungsbeitrag und misst etwas anderes, deshalb ein Strich dazwischen
   und nicht nur eine weitere Zeile: Wer die beiden Zahlen uebereinander sieht
   und keinen Einschnitt, liest sie als Fortsetzung derselben Rechnung. */
.tk-sumbox .trenner{border-top:1px solid var(--line);margin-top:7px;padding-top:8px;}
.tk-sumbox .stark{font-weight:600;}

/* Die Zeile, auf die es ankommt, in der Nachkalkulation (16.18). */
.tk-nk-zeile.stark > b{font-weight:700;}
.tk-nk-zeile.stark{background:#FBFAF8;}