/* ──────────────────────────────────────────────────────────────
   BUCHL — Design System „Blaupause"
   Helles Blau (technische Zeichnung) · kühle Neutrale · 1px-Linien
   Inter + JetBrains Mono. Minimal, präzise, technisch.
   Blau für: Links, aktive Navigation, Focus, Kennzahlen. Buttons in Ink.
─────────────────────────────────────────────────────────────── */
/* Schriften: selbst gehostet, kein Google-CDN (DSGVO). Früher als eigene fonts.css per
   @import geladen — das erzwingt eine KETTE: app.css muss erst geladen und ausgewertet
   sein, bevor der Browser die Schriftdatei überhaupt anfordert. Hier eingebettet spart
   das eine blockierende Anfrage auf jedem Seitenaufruf. Die url(fonts/…) bleiben gültig,
   weil app.css im selben Ordner liegt wie die frühere fonts.css. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/inter-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrainsmono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrainsmono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/jetbrainsmono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/jetbrainsmono-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;
}

:root{
  --paper:#F5F7F9; --paper-2:#EBEFF3;
  --surface:#FFFFFF; --surface-2:#F5F8FA;
  /* Kontrast: --muted und --faint waren zu hell (4,00 bzw. 2,17 auf getöntem Grund,
     Mindestwert 4,5). Lighthouse beanstandete das, und im Halbdunkel auf der Baustelle
     war die Kleinschrift nicht lesbar. Neue Werte bestehen auf allen Flächen. */
  --ink:#131920; --ink-2:#3D4854; --muted:#5B6572; --faint:#626B79;
  --line:#E3E8ED; --line-2:#D2D9E0;
  --brand:#146FC2; --brand-700:#0F5A9E; --brand-bg:#E5F1FC;
  --blue:#38A1FF; --blue-soft:rgba(56,161,255,.35);
  --good:#1F7A54; --good-bg:#E2F0E9;
  --warn:#8A5D09; --warn-bg:#F5ECD8;
  --bad:#B3352C; --bad-bg:#F6E4E1;
  --r:8px; --r-md:12px; --r-lg:18px;
  /* Weiche, mehrschichtige Schatten — Tiefe ohne Kitsch (ruhig, Apple-inspiriert). */
  --shadow-sm:0 1px 2px rgba(19,25,32,.05), 0 1px 3px rgba(19,25,32,.05);
  --shadow-md:0 4px 14px -4px rgba(19,25,32,.10), 0 2px 6px -3px rgba(19,25,32,.06);
  --shadow-lg:0 24px 50px -26px rgba(19,25,32,.24);
  /* Konsistentes Spacing (4er-Raster) für großzügigen, ruhigen Weißraum. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:30px; --sp-7:40px; --sp-8:56px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --disp:'Inter',-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --sidebar:250px;
}
::selection{background:#CBE5FF;color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.12;letter-spacing:-.025em}
h1{letter-spacing:-.032em}
.mono{font-family:var(--mono);font-size:.94em;font-variant-numeric:tabular-nums}
.ic{vertical-align:middle;flex:0 0 auto}

/* ── App-Shell mit Seitenleiste ── */
.app{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
/* min-width:0 lässt die Hauptspalte unter die Inhaltsbreite schrumpfen — sonst blähen breite
   Tabellen (z. B. Bewertungen) das ganze Grid auf, statt im .table-scroll zu scrollen. */
.main{min-width:0}
.side{background:#FBFCFD;border-right:1px solid var(--line);color:var(--ink);display:flex;flex-direction:column;padding:18px 14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--ink);padding:6px 8px 18px}
.side nav{display:flex;flex-direction:column;gap:2px}
/* Nav in logische Abschnitte gruppiert — dezente Labels schaffen Ordnung bei ~18 Punkten. */
.navgroup{display:flex;flex-direction:column;gap:1px}
.navgroup + .navgroup{margin-top:14px}
.navlabel{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);padding:4px 12px 5px}
.side nav a{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:var(--r);color:var(--ink-2);font-size:14px;font-weight:500;transition:background .14s var(--ease),color .14s var(--ease)}
.side nav a .ic{color:var(--faint);transition:color .14s var(--ease)}
.side nav a:hover{background:var(--paper-2);color:var(--ink)}
.side nav a:hover .ic{color:var(--ink-2)}
.side nav a.active{background:var(--brand-bg);color:var(--brand);font-weight:600}
.side nav a.active .ic{color:var(--brand)}
.side .spacer{flex:1}
/* Suchfeld in der Seitenleiste. Die Lupe sitzt absolut im Feld, damit das Eingabefeld
   die volle Breite behält und der Text nicht darunter läuft. */
.navsuche{position:relative;margin:0 0 14px}
.navsuche-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);display:inline-flex;color:var(--muted);pointer-events:none}
.navsuche input{width:100%;font-family:var(--sans);font-size:14px;padding:9px 12px 9px 34px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;color:var(--ink)}
.navsuche input::placeholder{color:var(--faint)}
.navsuche input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--blue-soft)}
@media(max-width:820px){ .navsuche{margin-top:4px} }
.side .sidefoot{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.side .sidefoot a{color:var(--muted);font-size:13px;padding:7px 12px;display:flex;gap:10px;align-items:center;border-radius:var(--r)}
.side .sidefoot a:hover{color:var(--ink);background:var(--paper-2)}
.trial{background:var(--brand-bg);border:1px solid rgba(20,111,194,.3);color:var(--brand-700);font-size:12px;padding:9px 11px;border-radius:var(--r);margin-bottom:8px;line-height:1.4}
.trial a{color:var(--brand-700);font-weight:600;text-decoration:underline}
.side .menu{display:contents}
.menu-btn{display:none;background:none;border:1px solid var(--line-2);color:var(--ink);border-radius:var(--r);padding:7px;cursor:pointer;align-items:center;justify-content:center}
.menu-btn .ic-x{display:none}
.side.open .menu-btn .ic-menu{display:none}
.side.open .menu-btn .ic-x{display:inline-flex}

.main{padding:38px 44px 76px;max-width:1120px}
.flash{background:var(--good-bg);color:var(--good);border:1px solid rgba(47,107,79,.3);padding:12px 16px;border-radius:var(--r-md);margin-bottom:22px;font-weight:500;font-size:14px;display:flex;gap:8px;align-items:center;box-shadow:var(--shadow-sm)}
.alert{background:var(--warn-bg);color:var(--warn);border:1px solid rgba(154,107,15,.35);padding:12px 16px;border-radius:var(--r-md);margin-bottom:22px;font-size:14px;display:flex;gap:10px;align-items:center;transition:.14s}
.alert:hover{border-color:var(--warn);transform:translateY(-1px)}
.alert .arr{margin-left:auto;display:inline-flex}

/* ── Seitenkopf ── */
.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:30px;flex-wrap:wrap}
.phead h1{font-size:40px;letter-spacing:-.032em}
.phead .crumb{font-size:12px;color:var(--brand);font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px}
.phead p{color:var(--ink-2);font-size:15px;margin-top:7px;max-width:580px;line-height:1.55}

/* ── Cards ── */
.grid{display:grid;gap:18px}
/* Erst ab rund 860px nebeneinander. Mit 290px teilte das Raster schon bei einem
   700px breiten Inhaltsbereich — die Karten waren dann 340px schmal, und darin hat
   keine Liste mit Betrag und Status mehr Platz. */
/* min(420px,100%): Ist der Inhaltsbereich schmaler als 420px (Handy), schrumpft die
   Mindestbreite mit — sonst erzwingt das Raster eine 420px-Spalte und die Seite wird
   seitlich scrollbar. */
.g2{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
/* Ungleiche Spalten (Liste breiter als Formular) — nur ab Tablet. Darunter greift
   das auto-fit von .g2 und stapelt. Niemals inline setzen: Inline-Styles schlagen
   Media Queries und das Layout bleibt am Handy zweispaltig. */
/* Erst ab 1180px zweispaltig. Darunter blieb der Liste zu wenig übrig: bei 1000px
   Fensterbreite war die Listenkarte 376px schmal, davon gingen 308px an die festen
   Spalten — für Projektname und Kunde blieben je 33 Pixel. */
@media(min-width:1180px){.g2-wide{grid-template-columns:1.4fr 1fr}}
@media(max-width:1179px){.g2-wide{grid-template-columns:minmax(0,1fr)}}

/* Crew-Auswahl (Wer war dabei?) — antippbare Chips */
.crew-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.crew-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);border-radius:99px;padding:8px 14px;cursor:pointer;font-size:14px;user-select:none}
.crew-chip input{width:auto;margin:0}
.crew-chip:has(input:checked){border-color:var(--brand);background:var(--brand-bg,#eaf3fb);color:var(--brand)}
.crew-chip.fix{opacity:.75;cursor:default}
/* Der Name gehört auf eine Zeile — umgebrochen zerfällt der Chip in drei Zeilen. */
.crew-chip > span{white-space:nowrap}
/* Zahlungs-Ampel-Warnung im Nachweis-Formular */
.ampel-hint{margin-top:-6px;padding:10px 13px;border-radius:var(--r);font-size:13.5px;line-height:1.45}
.ampel-hint.gelb{background:var(--warn-bg,#fdf3e7);color:var(--warn,#a15c1a)}
.ampel-hint.rot{background:var(--bad-bg,#fdeceb);color:var(--bad,#b23a2e);font-weight:600}
/* Kunden-Autocomplete (Picker in neu.php / angebote.php) */
.ac-wrap{position:relative}
.ac-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:280px;overflow-y:auto}
.ac-list[hidden]{display:none}
.ac-item{display:block;width:100%;text-align:left;border:none;background:none;padding:9px 13px;cursor:pointer;font-family:var(--sans);font-size:14px;color:var(--ink);border-bottom:1px solid var(--line)}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.active{background:var(--blue-soft,#eef4fb)}
.ac-item .ac-name{font-weight:600}
.ac-item .ac-meta{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.ac-item .ac-nr{float:right;font-size:11.5px;color:var(--muted);font-family:var(--mono,monospace)}
/* Sterne-Auswahl im Kundenfeedback */
.stars{display:inline-flex;flex-direction:row-reverse;gap:2px}
.stars input{position:absolute;opacity:0;width:0;height:0}
.stars label{font-size:30px;line-height:1;color:#d4d4d4;cursor:pointer;transition:color .1s}
.stars label:hover,.stars label:hover ~ label,.stars input:checked ~ label{color:#f5a623}

/* Positionstabelle am Handy: Kopfzeile weg, jede Zeile wird eine Karte mit
   Beschriftung aus data-label. Vier Eingabefelder nebeneinander passen auf
   375px nicht — sie schoben sonst die ganze Seite auf 835px auf. */
@media(max-width:560px){
  .pos-tab thead{display:none}
  .pos-tab,.pos-tab tbody,.pos-tab tr,.pos-tab td{display:block;width:auto}
  .pos-tab{border:0!important}
  .pos-tab tr{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin-bottom:10px}
  .pos-tab td{border:0;padding:5px 0!important;width:auto!important}
  .pos-tab td::before{content:attr(data-label);display:block;font-size:11px;font-weight:600;color:var(--faint);margin-bottom:3px}
  .pos-tab td input{width:100%}
  .pos-tab td.pos-del{position:absolute;top:8px;right:10px;padding:0!important;width:auto!important}
  .pos-tab td.pos-del::before{display:none}
}

/* Angebots-Positionen als Karte pro Position (Desktop + Handy).
   Klarer als eine breite Tabelle, sobald interne Kalkulationsfelder (Kosten/Aufschlag)
   dazukommen — und ohne horizontalen Überlauf bei 375px. */
.pos-list{display:flex;flex-direction:column;gap:12px}
.pos-card{position:relative;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px 13px;background:var(--surface-2)}
.pos-card .pos-del{position:absolute;top:10px;right:12px;color:var(--faint);text-decoration:none;font-size:15px;line-height:1;padding:2px 4px}
.pos-card .pos-del:hover{color:var(--danger,#b23a2e)}
.pos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pos-grid .span-all{grid-column:1/-1}
.pos-grid .field{gap:5px}
.pos-grid .field label{font-size:12px}
.pos-card .field input{padding:9px 11px;font-size:14px}
.pos-intern{margin-top:12px;border-top:1px dashed var(--line-2);padding-top:11px}
.pos-intern-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 8px;margin-bottom:9px}
.pos-db-cell{justify-content:flex-end}
.pos-db-cell .pos-db{display:inline-block;padding:9px 0;font-size:14px;font-weight:600;color:var(--ink)}
@media(max-width:560px){
  .pos-grid{grid-template-columns:1fr 1fr}
  .pos-grid .span-all{grid-column:1/-1}
}

/* Interne Kalkulations-Übersicht unter dem Positionsblock (nur für den Betrieb). */
.kalk-box{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);padding:14px 16px}
.kalk-tag{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.kalk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kalk-grid > div{display:flex;flex-direction:column;gap:3px}
.kalk-l{font-size:12px;color:var(--muted)}
.kalk-v{font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
@media(max-width:560px){ .kalk-grid{grid-template-columns:1fr 1fr} }
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px;box-shadow:var(--shadow-sm)}
.card h2{font-size:18px;margin-bottom:3px;letter-spacing:-.02em}
.card .sub{color:var(--muted);font-size:13px;margin-bottom:18px}
/* overflow-x:auto statt hidden: Passt eine Tabelle trotz allem nicht (viele Spalten,
   schmales Fenster), scrollt sie IN der Karte, statt abgeschnitten zu werden oder über
   den Rand zu laufen. Senkrecht bleibt es beschnitten, damit die runden Ecken sitzen. */
.card-pad{padding:0;overflow-x:auto;overflow-y:hidden}
.card-pad h2,.card-pad .sub{padding:0 24px}
.card-pad h2{padding-top:22px}
/* .card-pad hat bewusst padding:0, damit Tabellen bis an den Kartenrand laufen.
   Alles andere darin braucht deshalb einen Seitenabstand — das wurde an einzelnen
   Stellen immer wieder vergessen (Text und Knöpfe klebten am Rand). Deshalb zentral.
   Bewusst als MARGIN, nicht als padding: Hinweisboxen bringen ihr eigenes padding
   inline mit (farbiger Kasten), und inline schlägt jede Stylesheet-Regel — mit padding
   liefen sie weiterhin über die volle Kartenbreite. .cp-inset ist für Knopfzeilen,
   die sonst am linken Kartenrand kleben. */
.card-pad > p:not(.sub),.card-pad > details,.card-pad > form,.card-pad > ul,.card-pad > ol,.card-pad > .cp-inset{margin-left:24px;margin-right:24px}
.card-pad > p:last-child,.card-pad > details:last-child,.card-pad > form:last-child,.card-pad > .cp-inset:last-child{margin-bottom:20px}
/* Steht die Überschrift in einer eingerückten Zeile (z. B. neben einem Badge), darf
   sie ihr eigenes Seitenpadding nicht behalten — sonst steht das Badge um genau diese
   24px vom Titel abgesetzt und wirkt, als gehöre es nicht dazu. */
.card-pad > .cp-inset h2,.card-pad > .cp-inset .sub{padding-left:0;padding-right:0}

/* ── Stat ── */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--shadow-sm);transition:box-shadow .16s var(--ease),transform .16s var(--ease)}
.stat:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.stat .n{font-family:var(--mono);font-size:33px;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat .l{color:var(--muted);font-size:13px;margin-top:8px}
.stat.accent .n{color:var(--brand)} .stat.good .n{color:var(--good)} .stat.warn .n{color:var(--warn)}

/* ── Tabellen ── */
table{width:100%;border-collapse:collapse;font-size:14px}
/* Breite Tabellen scrollen horizontal in sich selbst, statt am Kartenrand abgeschnitten zu werden.
   min-width nur ab Tablet — am Handy greift das gestapelte data-label-Layout (siehe unten). */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(min-width:821px){.table-scroll table{min-width:660px}}
thead th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;padding:11px 24px;border-bottom:1px solid var(--line);background:var(--surface-2)}
tbody td{padding:14px 24px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tr.click{cursor:pointer;transition:.12s}
tr.click:hover td{background:var(--surface-2)}
/* Beträge nie umbrechen — sonst rutscht in einer schmalen Spalte das € allein
   in die zweite Zeile und die Spalte wird doppelt so hoch. */
tbody td.r.mono{white-space:nowrap}
td .name{font-weight:600;color:var(--ink)}
td .meta{font-size:12.5px;color:var(--muted)}
.r{text-align:right}
/* Positionstabelle (Nachweis, Angebot): Ohne Zügel bringen die Eingabefelder ihre
   Browser-Standardbreite mit (rund 177px je Feld) — die Tabelle wurde dadurch breiter
   als ihre Karte und schob die ganze Seite seitlich auf. Feste Spaltenbreiten aus dem
   Markup wirken erst mit table-layout:fixed, und die Felder müssen mitschrumpfen dürfen. */
.pos-tab{table-layout:fixed;width:100%}
.pos-tab input,.pos-tab select{width:100%;min-width:0;box-sizing:border-box}
/* Spaltenbreiten NUR am Desktop. Am Handy formt .lst jede Zeile zu einem zweizeiligen
   Block um — nowrap und feste Spaltenbreiten machten die Seite dort seitlich scrollbar. */
@media(min-width:821px){
  /* Liste in einer halbbreiten Karte (zweispaltiges Raster): Ohne Zügel bestimmen Betrag
     und Status-Kennzeichen die Mindestbreite und die Tabelle läuft seitlich aus der Karte.
     Zwei Sackgassen zuvor: feste Pixelbreiten hungerten in schmalen Karten die Textspalten
     aus (Projektname 33px), Prozentbreiten schnitten bei table-layout:fixed sogar die
     Spaltenüberschrift ab („E…" statt „Einsätze"), obwohl daneben Platz frei war — fixed
     verteilt rein rechnerisch und sieht sich den Inhalt gar nicht erst an.
     Lösung: normales (automatisches) Tabellenlayout. Die schmalen Spalten bekommen
     width:1% + nowrap — das ist die übliche Art, einer Spalte genau ihre Inhaltsbreite zu
     geben. Den Rest teilen sich die Textspalten; sie kürzen mit … erst, wenn es eng wird. */
  .tfit{width:100%}
  /* Der eigentliche Platzfresser waren die Zellenabstände: 24px links UND rechts, also 48px
     je Spalte — bei fünf Spalten geht fast eine halbe Karte allein für Luft drauf. Innen
     deshalb schmaler; außen bleiben die 24px, damit die Tabelle mit der Überschrift fluchtet. */
  .tfit td,.tfit th{padding-left:10px;padding-right:10px}
  .tfit td:first-child,.tfit th:first-child{padding-left:24px}
  .tfit td:last-child,.tfit th:last-child{padding-right:24px}
  .tfit .c-num,.tfit .c-betrag,.tfit .c-akt{width:1%;white-space:nowrap}
  /* Status darf umbrechen: „15.07.26" und das Kennzeichen dürfen untereinander stehen,
     nebeneinander erzwängen sie sonst eine 200px breite Spalte. */
  .tfit .c-status{width:1%}
  /* max-width:1px ist der Kniff, mit dem eine Tabellenzelle überhaupt kürzen kann: ohne
     ihn wächst sie mit dem Inhalt und text-overflow greift nie. */
  .tfit td.l-main,.tfit td.l-sub{max-width:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ── Kennwert-Tabelle (Label links, Wert rechtsbündig monospaced) — ruhige, ausgerichtete Optik ── */
table.kv{width:100%;border-collapse:collapse}   /* nicht .kv — die Landingpage nutzt div.kv für Kennzahlen */
.kv td{padding:12px 24px;border-bottom:1px solid var(--line);vertical-align:baseline;font-size:14px}
.kv tr:last-child td{border-bottom:none}
.kv td:first-child{color:var(--ink-2);width:100%}
.kv td:last-child{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink);padding-left:16px}
.kv td .meta{color:var(--muted);font-family:var(--sans);font-size:12px}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:0 10px;min-height:24px;border-radius:99px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.badges{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.badge .ic{width:13px;height:13px}
.badge.good{background:var(--good-bg);color:var(--good)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.bad{background:var(--bad-bg);color:var(--bad)}
.badge.neutral{background:var(--paper-2);color:var(--ink-2)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border:1px solid var(--ink);padding:10px 18px;border-radius:var(--r);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:background .14s var(--ease),border-color .14s var(--ease),box-shadow .14s var(--ease),transform .14s var(--ease);white-space:nowrap;box-shadow:var(--shadow-sm)}
.btn:hover{background:#000;border-color:#000;box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:var(--shadow-sm)}
.btn .ic{width:17px;height:17px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2);box-shadow:none}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--muted);box-shadow:none;transform:translateY(-1px)}
.btn.danger{background:transparent;color:var(--bad);border-color:transparent;box-shadow:none}
.btn.danger:hover{box-shadow:none;transform:none}
.btn.danger:hover{background:var(--bad-bg)}
.btn.good{background:var(--good);border-color:var(--good)}
.btn.good:hover{background:#1a674699;filter:brightness(.92)}
.btn.sm{padding:7px 13px;font-size:13px}
.btn.block{width:100%;justify-content:center}
.btn.big{padding:14px 22px;font-size:15.5px}

/* ── Formulare ── */
form.stack{display:flex;flex-direction:column;gap:15px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:14.5px;padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;color:var(--ink);width:100%;transition:border-color .14s var(--ease),box-shadow .14s var(--ease)}
.field textarea{min-height:84px;resize:vertical}
/* select und input[type=date] rendern rund 2px höher als ein Textfeld. Stehen sie in
   derselben Zeile nebeneinander, sitzt das eine Feld sichtbar tiefer. Feste Höhe für
   alle einzeiligen Bedienelemente — Datei-Auswahl und textarea bleiben ausgenommen. */
.field input:not([type=file]):not([type=radio]):not([type=checkbox]),.field select{height:42px}
/* Häkchen und Optionsfelder dürfen die Textfeld-Optik NICHT erben. Sonst bekommen sie
   Rahmen, 11px Innenabstand und width:100% aus der Regel darüber — daraus wird ein
   großer Kasten, der über der Beschriftung daneben liegt (Belegart, „Wer war dabei?"). */
.field input[type=checkbox],.field input[type=radio]{
  width:16px;height:16px;flex:0 0 auto;padding:0;border:none;background:none;
  box-shadow:none;accent-color:var(--brand)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--blue-soft)}
.field input[readonly]{background:var(--surface-2);cursor:pointer}
.two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px}
/* Bricht ein Label um („Standard-Stundensatz (€)") und das daneben nicht, standen die
   Eingabefelder derselben Zeile auf verschiedener Höhe. align-self:end richtet sie unten
   aus — das genügt aber nur, solange unter dem Feld nichts mehr steht. Bei 13 Feldern
   folgt noch ein Hilfetext; dort schiebt der das Eingabefeld wieder nach oben.
   Deshalb zusätzlich ein gemeinsames Zeilenraster (subgrid): Beschriftung, Bedienelement
   und Hilfetext bekommen je eine eigene Rasterzeile, die für alle Felder der Zeile gleich
   hoch ist. Damit liegen die Eingaben in beiden Fällen auf einer Linie. */
.two > .field, .three > .field{align-self:end}
@supports (grid-template-rows: subgrid){
  .two:has(> .field), .three:has(> .field){grid-template-rows:auto auto auto}
  .two > .field, .three > .field{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-self:stretch}
}
.help{font-size:12px;color:var(--faint)}
.check{display:flex;gap:9px;align-items:center;font-size:14px;color:var(--ink-2)}
.check input{width:auto}

/* ── Auth ── */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;
  background-image:radial-gradient(var(--line-2) .5px,transparent .5px);background-size:22px 22px;background-color:var(--paper)}
.auth-card{background:var(--surface);border-radius:var(--r-lg);padding:38px 36px;max-width:410px;width:100%;border:1px solid var(--line)}
.auth-card .logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;font-size:24px;justify-content:center;margin-bottom:4px}
.auth-card .lead{text-align:center;color:var(--muted);font-size:14px;margin-bottom:24px}
.auth-card .alt{text-align:center;font-size:13.5px;color:var(--muted);margin-top:18px}
.auth-card .alt a{color:var(--brand);font-weight:600}
.demo{margin-top:16px;padding:11px;background:var(--brand-bg);border-radius:var(--r);font-size:12.5px;color:var(--ink-2);text-align:center}
.error{background:var(--bad-bg);color:var(--bad);padding:10px 14px;border-radius:var(--r);font-size:13.5px;margin-bottom:16px}

/* ── Diverses ── */
.muted{color:var(--muted)}
.empty{color:var(--muted);padding:40px 24px;text-align:center;font-size:14.5px}
.logo-mark{flex:0 0 auto;display:inline-flex;align-items:center}
.logo-mark svg{display:block}
.sig-preview{max-width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px}
.thumbs{display:flex;gap:10px;flex-wrap:wrap}
.thumbs img{width:108px;height:108px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}
.linewrap{white-space:pre-line}
/* Sichtbarkeit je Bildschirmklasse. Damit kann eine Listenzeile am Handy Angaben
   aus mehreren Spalten in ihre Nebenzeile holen, ohne dass am Desktop etwas doppelt steht. */
.only-narrow{display:none}
.sumline td{font-weight:700;color:var(--ink);border-top:2px solid var(--line-2)}

@media(max-width:820px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .side{position:sticky;top:0;z-index:40;height:auto;overflow:visible;flex-direction:row;align-items:center;gap:10px;padding:10px 16px;min-width:0}
  .side .logo{padding:0;font-size:19px}
  .menu-btn{display:inline-flex;margin-left:auto}
  .side .menu{display:none}
  .side.open .menu{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#FBFCFD;padding:8px 16px 16px;border-bottom:1px solid var(--line);box-shadow:0 22px 34px -24px rgba(19,25,32,.28);max-height:calc(100vh - 58px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .navgroup + .navgroup{margin-top:10px}
  .side .menu nav{flex-direction:column}
  .side .spacer{display:none}
  .side .trial{margin-top:8px}
  .side .sidefoot{margin-top:10px;padding-top:10px}
  .main{padding:24px 18px 60px;min-width:0}
  .phead h1{font-size:27px}
  .phead,.phead > div:last-child{flex-wrap:wrap}
  .two,.three{grid-template-columns:1fr}
  .card{padding:18px}
  /* 16px Schriftgröße, damit iOS beim Antippen nicht hineinzoomt — dadurch wird die
     Zeile höher, also die feste Höhe hier mitziehen. */
  .field input,.field select,.field textarea{font-size:16px}
  .field input:not([type=file]):not([type=radio]):not([type=checkbox]),.field select{height:45px}
  .only-narrow{display:inline}
  .only-wide{display:none}

  /* ── Tabellen am Handy ──────────────────────────────────────────────────
     Grundmuster: Label und Wert stehen NEBENeinander (Label links, schmal).
     Früher stand das Label über dem Wert — das ergab bei 4 Spalten acht
     Zeilen je Datensatz und fraß einen halben Bildschirm pro Zeile.
     Für die echten Listen gibt es darunter das kompakte .lst-Muster. */
  .card-pad table,.card-pad thead,.card-pad tbody,.card-pad tr{display:block;width:100%}
  .card-pad thead{display:none}
  .card-pad tbody tr{padding:11px 18px;border-bottom:1px solid var(--line)}
  .card-pad tbody tr:last-child{border-bottom:none}
  .card-pad tbody td{display:flex;gap:10px;align-items:baseline;padding:2px 0;border:none;text-align:left;min-width:0}
  .card-pad tbody td::before{content:attr(data-label);flex:0 0 90px;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;line-height:1.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card-pad tbody td:not([data-label])::before,.card-pad tbody td[data-label=""]::before{display:none}
  .card-pad tbody td:empty{display:none}
  /* Kennwert-Tabelle bleibt auch mobil ein sauberes Label|Wert-Raster (nicht stapeln). */
  .card-pad table.kv,.card-pad table.kv tbody,.card-pad table.kv tr{display:revert}
  .card-pad table.kv td{display:table-cell;padding:11px 18px;border-bottom:1px solid var(--line);text-align:left}
  .card-pad table.kv td::before{display:none}
  .card-pad table.kv td:last-child{text-align:right;white-space:normal}

  /* ── .lst — kompakte Listenzeile (Vorbild: Transaktionsliste einer Banking-App) ──
     EIN Datensatz = EINE Zeile mit zwei Ebenen:
         Hauptinfo …………… Betrag
         Nebeninfo ……………  Status
     Die Rolle jeder Zelle steht als Klasse am <td>:
       l-main  Hauptinformation  (links oben, fett, Ellipsis statt Umbruch)
       l-sub   Nebeninformation  (links unten, klein/grau, Ellipsis)
       l-num   Zahl/Betrag       (rechts oben, mono, tabular-nums)
       l-tag   Status/Badge      (rechts unten)
       l-off   am Handy weglassen (steht auf der Detailseite)
     Desktop bleibt unverändert eine echte Tabelle — die Klassen wirken nur hier. */
  .card-pad table.lst tbody tr,table.lst tbody tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"main num" "sub tag";
    column-gap:12px;row-gap:1px;align-content:center;align-items:center;
    padding:9px 18px;min-height:60px}
  table.lst,table.lst tbody{display:block;width:100%}
  table.lst thead{display:none}
  table.lst tbody td{display:block;padding:0;border:none;min-width:0;text-align:left}
  table.lst tbody td::before{display:none}
  table.lst tbody td:empty{display:none}
  table.lst td.l-main{grid-area:main;font-weight:600;color:var(--ink);font-size:14.5px;line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  table.lst td.l-sub{grid-area:sub;font-size:12.5px;color:var(--muted);line-height:1.35;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  table.lst td.l-num{grid-area:num;text-align:right;justify-self:end;font-family:var(--mono);
    font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);font-size:14px;white-space:nowrap}
  table.lst td.l-tag{grid-area:tag;justify-self:end;text-align:right;white-space:nowrap}
  table.lst td.l-off{display:none}
  /* .meta/.name in der Listenzeile: die Rolle setzt Größe und Farbe, nicht die Zelle. */
  table.lst td.l-main .name{font-weight:600}
  table.lst td.l-sub .meta,table.lst td.l-main .meta{font-size:inherit;color:inherit}
  table.lst td.l-main br,table.lst td.l-sub br{display:none}
  table.lst td.l-tag .badge{font-size:11.5px;min-height:22px;padding:0 8px}
  /* Aktionszelle (Formular-Button) darf nicht in die zweispaltige Logik rutschen. */
  table.lst td.l-act{grid-column:1/-1;justify-self:start;margin-top:6px}
  /* Liste mit Auswahlkästchen (z. B. Einsätze zum Abrechnen anhaken): eigene
     schmale Spalte ganz links, über beide Zeilen der Listenzeile hinweg. */
  table.lst tbody tr.has-pick{grid-template-columns:24px minmax(0,1fr) auto;
    grid-template-areas:"pick main num" "pick sub tag";column-gap:10px}
  table.lst td.l-pick{grid-area:pick;align-self:center}
  /* Steht die Liste in einer normalen Karte statt in .card-pad, bringt die Karte
     ihr Seitenpadding schon mit — sonst stünde die Zeile doppelt eingerückt. */
  .card:not(.card-pad) table.lst tbody tr{padding-left:0;padding-right:0}
  .card:not(.card-pad) table.lst tbody tr:last-child{border-bottom:none}

  /* ── Wirklich breite Tabellen (Buchungsstapel, Kontenrahmen, Kassenbuch) ──
     Die bleiben eine Tabelle und scrollen horizontal in sich selbst. Damit das
     erkennbar ist: sichtbare Scrollleiste + weiche Kante am rechten Rand. */
  .table-scroll.wide{position:relative;overflow-x:auto;
    background:linear-gradient(90deg,var(--surface) 60%,rgba(255,255,255,0)) right/26px 100% no-repeat,
               linear-gradient(90deg,rgba(19,25,32,.10),rgba(19,25,32,0)) right/12px 100% no-repeat;
    background-attachment:local,scroll}
  .table-scroll.wide table,.table-scroll.wide thead,.table-scroll.wide tbody,.table-scroll.wide tr{display:revert}
  .table-scroll.wide table{min-width:620px}
  .table-scroll.wide thead{display:table-header-group}
  .table-scroll.wide tbody td{display:table-cell;padding:11px 14px;border-bottom:1px solid var(--line)}
  .table-scroll.wide tbody td::before{display:none}
  .table-scroll.wide thead th{padding:9px 14px}
  .table-scroll.wide::-webkit-scrollbar{height:9px}
  .table-scroll.wide::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
  .table-scroll.wide{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}

  /* ── Verdichtung: weniger Luft zwischen und in den Karten ── */
  .grid{gap:14px}
  .phead{margin-bottom:20px;gap:12px}
  .phead p{font-size:14px;margin-top:5px}
  .card h2{font-size:17px}
  .card .sub{font-size:12.5px;margin-bottom:14px}
  .card-pad h2{padding-top:18px}
  .card-pad h2,.card-pad .sub{padding-left:18px;padding-right:18px}
  .card-pad > p:not(.sub),.card-pad > details,.card-pad > form,.card-pad > ul,.card-pad > ol,.card-pad > .cp-inset{margin-left:18px;margin-right:18px}
  .empty{padding:26px 18px;font-size:14px}
  thead th{padding:9px 18px}
  tbody td{padding:11px 18px}
  /* Kennzahlen-Kacheln zweispaltig statt untereinander. Gestapelt kostete allein die
     Kennzahlenreihe über einen Bildschirm, bevor die erste Listenzeile kam.
     :has() grenzt das auf echte Kennzahlen-Raster ein — die Tarifkarten in billing.php
     nutzen dasselbe .g3 und müssen voll breit bleiben. Ohne :has()-Unterstützung
     bleibt es beim bisherigen Stapeln, also unschön statt kaputt. */
  .g3:has(> .stat){grid-template-columns:1fr 1fr;gap:10px}
  /* Ungerade letzte Kachel über beide Spalten — sonst bleibt daneben ein Loch. */
  .g3:has(> .stat) > .stat:last-child:nth-child(odd){grid-column:1 / -1}
  .stat{padding:14px 15px}
  /* nowrap: sonst rutscht in der schmalen Kachel das € allein in die zweite Zeile.
     eur() bleibt dafür unangetastet — dessen Ausgabe landet auch in CSV-Exporten. */
  .stat .n{font-size:19px;letter-spacing:-.035em;white-space:nowrap}
  .stat .l{margin-top:5px;font-size:12.5px;line-height:1.25}
}

/* Ab hier: die letzte Verdichtungsstufe fürs Handy (≤560px, also 375er-iPhone). */
@media(max-width:560px){
  .main{padding:18px 14px 48px}
  .phead h1{font-size:24px}
  .phead{margin-bottom:16px}
  /* Aktions-Buttons im Seitenkopf teilen sich eine Zeile, statt je eine volle zu
     belegen. flex-basis 140px, damit sie bei drei Buttons sauber umbrechen. */
  .phead .badges{width:100%;display:flex;gap:8px;flex-wrap:wrap}
  .phead .badges > .btn{flex:1 1 140px;justify-content:center;min-width:0}
  /* Aktionsleiste im Seitenkopf: nie umbrechen lassen, nie über die Breite laufen. */
  .phead > *{min-width:0}
  .card{padding:15px}
  .stat{padding:13px 13px}
  .stat .n{font-size:18px}
  .card-pad{padding:0}
  .card-pad h2,.card-pad .sub{padding-left:15px;padding-right:15px}
  .card-pad > p:not(.sub),.card-pad > details,.card-pad > form,.card-pad > ul,.card-pad > ol,.card-pad > .cp-inset{margin-left:15px;margin-right:15px}
  .card-pad tbody tr,.card-pad table.lst tbody tr,table.lst tbody tr{padding-left:15px;padding-right:15px}
  .card-pad table.kv td{padding-left:15px;padding-right:15px}
  thead th,tbody td{padding-left:15px;padding-right:15px}
  form.stack{gap:12px}
  .two,.three{gap:12px}
}

/* Angebot: Optionsschalter (Reverse Charge, Privatkunde) + Aufmaß-Toggle */
.opt-row{display:flex;flex-direction:column;gap:10px}
.opt-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.45;cursor:pointer}
.opt-check input[type=checkbox]{margin-top:2px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--brand)}
.opt-check.sm{font-size:12.5px;color:var(--muted)}
.opt-check strong{color:var(--ink)}
/* Ankreuzfeld ausserhalb von .field (Anmeldung, Unterschriftenseite, Auswahlkacheln,
   Trefferlisten). Vorher stand die Groesse als style="width:16px;height:16px" bzw.
   style="width:auto" direkt am Element. Ein Inline-Style schlaegt JEDE Stylesheet-Regel —
   damit war die 22px-Handyregel unten wirkungslos und das Tippziel blieb bei 16px.
   Am 375px-Fenster nachgemessen, nicht im Quelltext vermutet. */
.tick{width:16px;height:16px;flex:0 0 auto;padding:0;border:none;background:none;
  box-shadow:none;accent-color:var(--brand)}
/* Beschriftungszeile daneben — ersetzt vier Mal dieselben Inline-Angaben. */
.check-zeile{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);cursor:pointer}
/* Soll-Ist-Nachkalkulation */
.si-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:4px 0 6px}
.si-grid > div{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);padding:12px 14px}
.si-l{font-size:12px;color:var(--muted);display:block;margin-bottom:4px}
.si-v{font-size:15px;font-weight:600;color:var(--ink)}
.si-v.mono{font-variant-numeric:tabular-nums}
@media(max-width:640px){ .si-grid{grid-template-columns:1fr} }

/* ── Buchhaltungs-Modul: Sub-Navigation (Tabs) ── */
.buha-tabs{display:inline-flex;gap:3px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-md);padding:3px;white-space:nowrap}
.buha-tab{padding:7px 13px;border-radius:var(--r);font-size:13.5px;font-weight:500;color:var(--ink-2);transition:.12s}
.buha-tab:hover{background:var(--paper-2);color:var(--ink)}
.buha-tab.active{background:var(--brand-bg);color:var(--brand);font-weight:600}
/* Ampel-Messbalken (Kleinunternehmer-/RKSV-Grenzen) */
.mess{height:9px;border-radius:5px;background:var(--paper-2);overflow:hidden;margin:8px 0 4px}
.mess > span{display:block;height:100%;border-radius:5px;background:var(--good)}
.mess.warn > span{background:var(--warn)}
.mess.bad > span{background:var(--bad)}
/* Kompakte Kennzahl-Zeile im Buchhaltungsmodul */
.buha-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}

/* ── Projektpipeline: Kanban-Board ── */
.avatar{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:99px;background:var(--brand-bg);color:var(--brand);font-size:11px;font-weight:700;flex:0 0 auto;font-family:var(--sans)}
.avatar.sm{width:20px;height:20px;font-size:10px}
/* Board scrollt sauber horizontal IN SICH SELBST (nie den Body aufblähen); Spalten oben
   ausgerichtet, damit kurze Spalten keinen Leerraum unter der Karte erzeugen. */
.kboard{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;padding:4px 2px 16px;margin:0;max-width:100%;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.kboard::-webkit-scrollbar{height:10px}
.kboard::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:2px solid var(--paper)}
.kboard::-webkit-scrollbar-track{background:transparent}
.kboard{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
/* An .kboard gebunden: die Landingpage benutzt .kcol ebenfalls (Kanban-Illustration) und hat
   sich die feste 268px-Spalte des echten Boards eingefangen — die Illustration ragte dadurch
   zwischen 900 und 1280 px rechts aus dem Bild. */
.kboard .kcol{flex:0 0 268px;width:268px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);display:flex;flex-direction:column;scroll-snap-align:start;max-height:calc(100vh - 150px)}
.kboard .kcol.drag-over{border-color:var(--brand);background:var(--brand-bg)}
.kcol-head{padding:12px 14px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface-2);border-radius:var(--r-md) var(--r-md) 0 0;z-index:1}
.kcol-head .t{font-weight:700;font-size:13px;letter-spacing:-.01em;display:flex;align-items:center;gap:7px}
.kcol-head .t .dot{width:8px;height:8px;border-radius:99px;flex:0 0 auto}
.kcol-head .s{font-size:11.5px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
.kcol-body{padding:10px;display:flex;flex-direction:column;gap:9px;min-height:56px;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain}
/* Ebenfalls an .kboard gebunden: sonst erbt die Kanban-Illustration der Landingpage den
   Greif-Cursor und den Hover-Effekt echter, verschiebbarer Karten. */
.kboard .kcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;cursor:grab;transition:box-shadow .12s,border-color .12s}
.kboard .kcard:hover{border-color:var(--line-2);box-shadow:0 6px 16px -12px rgba(19,25,32,.35)}
.kboard .kcard.dragging{opacity:.45}
.kboard .kcard .kname{font-weight:600;font-size:13.5px;line-height:1.3;color:var(--ink);display:block}
.kboard .kcard .kmeta{font-size:12px;color:var(--muted);margin-top:3px}
.kboard .kcard .kfoot{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}
.kboard .kcard .kwert{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.kboard .kcard .ksel{margin-top:9px}
.kboard .kcard .ksel select{width:100%;font-size:12px;padding:5px 7px}
.kmini{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);background:var(--paper-2);border-radius:99px;padding:2px 8px}
.kmini .ic{width:12px;height:12px}
.kadd{margin-top:auto}
.kadd summary{list-style:none;cursor:pointer;font-size:12.5px;color:var(--brand);font-weight:600;padding:8px 10px;text-align:center}
.kadd summary::-webkit-details-marker{display:none}
.kadd[open] summary{color:var(--muted)}
.kadd .inner{padding:0 10px 10px;display:flex;flex-direction:column;gap:7px}
.kadd input{font-size:13px}

/* ── Kalender (Monatsraster) ── */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.cal-dow{background:var(--surface-2);padding:8px 6px;font-size:11px;font-weight:700;color:var(--muted);text-align:center;text-transform:uppercase;letter-spacing:.04em}
.cal-cell{background:var(--surface);min-height:104px;padding:6px 7px;display:flex;flex-direction:column;gap:3px}
.cal-cell.out{background:var(--surface-2)}
.cal-cell.today{background:var(--brand-bg)}
.cal-cell .cd{font-size:12px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cal-cell.out .cd{color:var(--faint)}
.cal-ev{font-size:11px;line-height:1.25;padding:2px 6px;border-radius:4px;background:var(--paper-2);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ev.proj{background:var(--brand-bg);color:var(--brand-700)}
.cal-ev.term{background:var(--good-bg);color:var(--good)}

/* ── Plantafel (Team × Tage) ── */
.plan-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
table.plan{border-collapse:collapse;width:100%;min-width:640px}
table.plan th,table.plan td{border:1px solid var(--line);padding:8px 9px;vertical-align:top;text-align:left}
table.plan thead th{background:var(--surface-2);font-size:12px;color:var(--muted);font-weight:700;white-space:nowrap}
table.plan thead th.today{background:var(--brand-bg);color:var(--brand-700)}
table.plan td.who{background:var(--surface-2);font-weight:600;font-size:13px;white-space:nowrap;position:sticky;left:0}
table.plan td{min-width:118px;font-size:12px}
.plan-item{display:block;padding:4px 7px;border-radius:4px;background:var(--brand-bg);color:var(--brand-700);margin-bottom:4px;line-height:1.3}
.plan-item.term{background:var(--good-bg);color:var(--good)}
@media(max-width:720px){
  .cal-cell{min-height:74px;padding:4px 4px}
  .cal-ev{font-size:10px}
  .cal-dow{padding:6px 2px;font-size:10px}
  /* Die Plantafel ist am Handy 964 px breit — man sah Montag und Dienstag und musste den
     Rest der Woche einhändig seitwärts wischen. Ein Wochenplan, von dem man zwei Tage sieht,
     hilft niemandem. Deshalb hier untereinander: je Mitarbeiter ein Block, darin die Tage. */
  .plan-scroll{overflow-x:visible;border:none}
  table.plan{min-width:0;display:block}
  table.plan thead{display:none}
  table.plan tbody,table.plan tr{display:block}
  table.plan tr{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:12px;overflow:hidden}
  table.plan td{display:flex;gap:10px;border:none;border-top:1px solid var(--line);min-width:0;font-size:14px;padding:10px 12px}
  table.plan td.who{position:static;border-top:none;font-size:15px;padding:12px}
  table.plan td:not(.who)::before{content:attr(data-label);flex:0 0 92px;color:var(--muted);font-size:13px;font-weight:600}
  table.plan td:not(.who)>*{flex:1}
  table.plan td.today{background:var(--brand-bg)}
  /* Tage ohne Eintrag nehmen sonst die halbe Liste ein. */
  table.plan td:not(.who):not(:has(.plan-item)){display:none}
}
/* Tab-Leiste im Seitenkopf darf den Body nie breiter machen — bei Bedarf intern scrollen. */
/* Die Reiterleiste kommt am Handy nicht auf eine Zeile. Sie darf in sich selbst
   scrollen — vorher schob sie im Dashboard die ganze Karte seitlich auf.
   Gilt überall, nicht nur im Seitenkopf: sie steht auch in .dbfilter. */
@media(max-width:820px){
  .buha-tabs{display:flex;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .buha-tabs::-webkit-scrollbar{display:none}
  .buha-tabs > *{flex:0 0 auto}
  /* Ein langer Beschriftungstext darf umbrechen, statt die Seite breiter zu machen. */
  .btn{max-width:100%}
  .btn.big{white-space:normal;text-align:left;line-height:1.3}
}

/* ── Tourenübersicht in der Hilfe ──────────────────────────────────────────────
   ACHTUNG: Diese Regeln gehören NACH app.css, nicht nach tour.css. tour.css wird nur
   geladen, wenn eine Tour tatsächlich läuft — die Übersicht steht aber auf hilfe.php
   ganz ohne Tour. Lagen die Regeln dort, fiel die Kartenliste in unformatierten
   Fliesstext zusammen. Genau so ist es am 22.08. live gegangen.
─────────────────────────────────────────────────────────────────────────────── */
/* Abstand unten = Abstand seitlich. Vorher 4px unten gegen 24px an den Seiten — die
   Karten klebten am unteren Kartenrand. */
.tourliste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:10px;margin:0 24px 24px}
.tourkarte{display:flex;flex-direction:column;gap:4px;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s}
.tourkarte:hover{border-color:var(--brand);box-shadow:0 6px 18px -14px rgba(19,25,32,.4)}
.tourkarte .tk-kopf{display:flex;align-items:baseline;gap:8px;justify-content:space-between}
.tourkarte .tk-titel{font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.3}
.tourkarte .tk-dauer{font-size:11.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.tourkarte .tk-kurz{font-size:13px;color:var(--ink-2);line-height:1.5}
@media(max-width:820px){ .tourliste{margin:0 18px 18px} }
@media(max-width:560px){ .tourliste{margin:0 15px 15px} }


/* ── Handy: Mindestmasse für Finger und Augen ───────────────────────────────────
   Aus dem Bedienbarkeitstest, alles nachgemessen: Menü-Knopf 38x38, Reiter 36 px hoch,
   Materialfelder 36 px mit 13,3 px Schrift, „+ Position" 33 px, Sterne 31x30 px.
   Unter 44x44 px trifft ein Monteur mit rauen oder behandschuhten Fingern nicht mehr
   zuverlässig; Eingabefelder unter 16 px lassen iOS beim Antippen in die Seite zoomen.
   Diese Regeln heben nur Mindestwerte an und ändern das Layout nicht. */
@media (max-width: 820px) {
  .btn, .btn.sm, .buha-tab, .menu-btn { min-height: 44px }
  .btn.sm { padding: 10px 15px; font-size: 14px }
  .menu-btn { min-width: 44px; padding: 9px }
  .buha-tab { display: inline-flex; align-items: center; font-size: 14.5px; padding: 10px 14px }
  /* Preis-Umschalter .seg (billing.php, index.php): war nur 35 px hoch — hier die
     Quelle für den Mindestwert. Wirkt live erst, wenn die lokalen .seg-Regeln in
     billing.php und assets/landing.css denselben min-height mitbekommen (außerhalb
     dieses Umbaus, s. Bericht) — sie laden nach app.css und überschreiben sonst. */
  .seg button { min-height: 44px }
  input:not([type=checkbox]):not([type=radio]), select, textarea { min-height: 44px; font-size: 16px }
  table input:not([type=checkbox]):not([type=radio]), table select { min-height: 44px; font-size: 16px }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px }
  /* Die Zeile darueber hat die Spezifitaet 0,0,1 und verliert gegen die Klassenregeln von
     .field (Z.430) und .opt-check (Z.639) mit 0,1,1 — @media erhoeht die Spezifitaet NICHT.
     Ohne diese Wiederholung blieb praktisch JEDE Checkbox der App am Handy bei 16px statt
     der in marke/DESIGN-REGELN.md geforderten 22px. Im Browser nachgemessen. */
  .field input[type=checkbox], .field input[type=radio],
  .opt-check input[type=checkbox], .opt-check input[type=radio],
  .tick { width: 22px; height: 22px }
  .thumbs a, .stars label { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 30px }
  /* Kleinschrift war stellenweise bei 10,5 px — im Heizraum unlesbar. */
  .help, .meta, .l, .sub { font-size: 13.5px }
  th { font-size: 13px }
}


/* ── Ratgeber-Karten auf der Startseite ─────────────────────────────────────────
   Die Beiträge waren nur über einen Link in der Fusszeile erreichbar, obwohl sie die
   einzigen Seiten sind, über die uns jemand findet, der Buchl noch nicht kennt. */
.rgcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px}
.rgcard{display:flex;flex-direction:column;gap:9px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px 22px 24px;color:inherit;text-decoration:none;
  box-shadow:var(--shadow-sm);transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s var(--ease)}
.rgcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.rgcard .rgthema{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--brand-700)}
.rgcard h3{font-size:18px;line-height:1.3;color:var(--ink);letter-spacing:-.015em;text-wrap:balance}
.rgcard p{font-size:14.5px;line-height:1.6;color:var(--ink-2);flex:1}
.rgcard .rgmagnet{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--brand);margin-top:2px}
@media(max-width:900px){ .rgcards{grid-template-columns:1fr} }


/* ── Aufgabe mit Aktion ─────────────────────────────────────────────────────────
   Eine Zeile sagt drei Dinge: WAS ist offen, WARUM es wichtig ist, und WAS man jetzt
   tun kann. Bisher gab es dieses Muster nur als `.dbtask` im Inline-Block von
   dashboard.php — dadurch konnte es keine andere Seite verwenden, obwohl der geführte
   Start und die Terminliste genau dasselbe brauchen. Deshalb hier global, mit sprechendem
   Namen und einer echten Aktion statt nur einer Zahl am rechten Rand.

   Liegt die Liste in einer `.card-pad`, bringt sie ihr Seitenpadding selbst mit —
   `.card-pad` hat padding:0, das war im Projekt schon dreimal die Ursache für „Text
   klebt am Rand". Werte nach marke/DESIGN-REGELN.md §3/§4: 24 → 18 → 15 px. */
.aufgaben{display:flex;flex-direction:column}
.aufgabe{display:flex;gap:13px;align-items:flex-start;padding:14px 24px;
  border-bottom:1px solid var(--line);transition:background .12s var(--ease)}
.aufgabe:last-child{border-bottom:none}
.aufgabe:hover{background:var(--surface-2)}
.aufgabe .auf-ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:var(--paper-2);color:var(--ink-2)}
.aufgabe.warn .auf-ic{background:var(--warn-bg);color:var(--warn)}
.aufgabe.bad  .auf-ic{background:var(--bad-bg);color:var(--bad)}
.aufgabe.good .auf-ic{background:var(--good-bg);color:var(--good)}
.aufgabe .auf-txt{flex:1 1 auto;min-width:0}
/* Die Überschrift nennt die Sache, die Begründung darunter sagt, was es kostet, wenn
   es liegen bleibt. Ohne Begründung ist es nur eine weitere Zahl. */
.aufgabe .auf-t{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.35}
.aufgabe .auf-w{font-size:13px;color:var(--muted);line-height:1.45;margin-top:3px}
.aufgabe .auf-akt{flex:0 0 auto;margin-left:auto;align-self:center}

/* Grosse Fassung für „Heute wichtig" ganz oben — das ist der erste Blick am Morgen. */
.aufgabe.gross{padding:17px 24px;gap:15px}
.aufgabe.gross .auf-ic{width:42px;height:42px}
.aufgabe.gross .auf-t{font-size:16px}
.aufgabe.gross .auf-w{font-size:13.5px}

@media(max-width:820px){
  .aufgabe{padding:13px 18px;gap:11px}
  .aufgabe .auf-ic{width:30px;height:30px}
  .aufgabe.gross{padding:15px 18px}
  .aufgabe.gross .auf-ic{width:38px;height:38px}
  .aufgabe .auf-w{font-size:13.5px}   /* Kleinschrift nie unter 13,5 px, s. §5 */
}
@media(max-width:560px){
  /* Unter 560 px reicht die Breite nicht für Text UND Knopf nebeneinander: Der Knopf
     rutscht unter den Text und wird über die volle Breite zum sicheren Tippziel. */
  .aufgabe{flex-wrap:wrap;padding-left:15px;padding-right:15px}
  .aufgabe .auf-akt{margin-left:47px;width:calc(100% - 47px);align-self:stretch}
  .aufgabe .auf-akt .btn{width:100%;justify-content:center}
  .aufgabe.gross .auf-akt{margin-left:53px;width:calc(100% - 53px)}
}