:root{
  --navy:#0f2a4a;--navy-700:#163a66;--navy-800:#0b2038;--navy-50:#e9eef5;--navy-100:#d3dde9;
  --akzent:#6366f1;--akzent-600:#4f46e5;--akzent-50:#eef2ff;--akzent-100:#e0e7ff;
  --bg:#f4f6f9;--panel:#fff;--line:#e2e7ee;--line-strong:#c9d2de;--text:#172033;--muted:#55616f;--muted-2:#66727f;
  --green:#1a9a66;--green-50:#e5f6ee;--red:#c93c3c;--red-50:#fdeaea;--amber:#c47d06;--amber-50:#fff4dc;--gray-50:#eef1f5;--gray-600:#5c6572;
  --radius:14px;--radius-sm:10px;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);--shadow:0 1px 3px rgba(16,24,40,.08);--shadow-lg:0 12px 32px rgba(16,24,40,.14);
  --sidebar:252px;--topbar-h:64px;--font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Grundstil (Runde 3): Abstände 8/16/24, Innenrand der Karten, Feldhöhe, Statusfarben (Text und Fläche) – hell; dunkel weiter unten. */
  --s1:8px;--s2:16px;--s3:24px;--pad:20px;--feld-h:44px;
  --st-offen:#0f2a4a;--st-offen-bg:#e9eef5;--st-ok:#0f6b46;--st-ok-bg:#e5f6ee;--st-warn:#9a6400;--st-warn-bg:#fff4dc;
  --st-err:#9b2626;--st-err-bg:#fdeaea;--st-neutral:#5c6572;--st-neutral-bg:#eef1f5;
}
*{box-sizing:border-box}
html{font-size:93.75%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--navy-700);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;line-height:1.25}
h1{font-size:1.6rem}h2{font-size:1.15rem}h3{font-size:1.05rem}
small,.muted{color:var(--muted)}
.muted-2{color:var(--muted-2)}
.ico{width:18px;height:18px;flex:none;vertical-align:-3px}
.ico-xs{width:13px;height:13px}
.ico-big{width:44px;height:44px;color:var(--muted-2)}
.inline{display:inline}
.right{text-align:end}.center{text-align:center}.nowrap{white-space:nowrap}
.mono{font-variant-numeric:tabular-nums}
/* Zahlen der Arbeitsflaeche laufen tabellarisch: Betraege, Summen und Kennzahlen stehen dann
   untereinander. Auf Segoe UI ist das wirkungslos (dort sind die Ziffern ohnehin gleich breit,
   gemessen 8,625px fuer 1 und 0), auf SF Pro unter macOS und iOS nicht – dort wandern die
   Nachkommastellen heute von Zeile zu Zeile. Geprueft: "font:inherit" an Knopf und Feld gibt die
   Angabe weiter, und nirgends in der Datei steht ein font-variant-numeric:normal, das sie
   zuruecknimmt. Die oeffentliche Seite bleibt aussen vor, sie hat ihre eigene Regel. */
body.chrome-app,body.chrome-bare{font-variant-numeric:tabular-nums}
.mt{margin-top:1rem}.mb{margin-bottom:1rem}.mt-2{margin-top:2rem}
.hidden{display:none!important}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:8px 12px;border-radius:var(--radius-sm);z-index:999}
.skip:focus{left:8px}
/* Nur fuer Screenreader – clip statt Verschieben, damit RTL nichts spiegeln muss */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}

/* ---------- Marke ---------- */
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:1.15rem;color:var(--text);text-decoration:none!important;letter-spacing:-.02em}
.brand-name b{color:var(--akzent);font-weight:700}
.brand-mark{display:inline-grid;place-items:center;flex:none}
.brand-side{display:flex;align-items:center;min-height:var(--topbar-h);padding:0 20px;color:#fff;border-bottom:1px solid rgba(255,255,255,.10)}
.brand-big{justify-content:center;padding:0 0 20px;font-size:1.6rem}
.brand-big .brand-mark svg{width:36px;height:36px}

/* ---------- App-Rahmen ---------- */
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
.sidebar{background:var(--navy);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.nav{padding:4px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.nav-group{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.45);padding:14px 10px 4px;font-weight:600}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);color:rgba(255,255,255,.82);font-weight:500;text-decoration:none!important;border-inline-start:3px solid transparent}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.active{background:rgba(255,255,255,.12);color:#fff;border-inline-start-color:var(--akzent);font-weight:600}
.nav-item .ico{width:19px;height:19px;opacity:.9}
.nav-count{margin-inline-start:auto;background:var(--red);color:#fff;font-size:.72rem;padding:1px 7px;border-radius:99px;font-weight:700}
.sidebar-foot{padding:12px 16px 16px;border-top:1px solid rgba(255,255,255,.1)}
.plan-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(99,102,241,.18);color:#c7d2fe;font-size:.8rem;padding:5px 10px;border-radius:99px;font-weight:600}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:10px;padding:0 24px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;min-height:var(--topbar-h)}
.topbar .lbl{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.company-switch summary{font-weight:600}
.gsearch{position:relative;flex:1;max-width:340px;min-width:120px}
/* [type=search] muss mit: die allgemeine Feldregel weiter unten hat dieselbe Genauigkeit, steht später und setzte den Innenabstand zurück. Die Lupe lag dadurch auf dem Wort "Suchen", und das Feld war zwei Pixel höher als die übrigen Bedienelemente der Kopfleiste. */
.gsearch input[type=search]{padding-inline-start:36px;padding-top:8px;padding-bottom:8px;font-size:.88rem;background:#f5f7fa}
.gsearch .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted-2);width:16px;height:16px}
/* Dieselbe Suche im Seitenkopf, nur schmaler und ohne den grauen Grund der Kopfleiste */
.gsearch-page{flex:0 1 300px;max-width:300px;min-width:180px}
.gsearch-page input[type=search]{background:var(--panel)}
.notif summary{position:relative}
.notif-count{position:absolute;top:2px;right:2px;background:var(--red);color:#fff;font-size:.72rem;min-width:16px;height:16px;padding:0 4px;border-radius:99px;display:grid;place-items:center;font-weight:700}
.usermenu summary{display:flex;align-items:center;gap:8px;padding-top:4px;padding-bottom:4px;line-height:1}
.avatar{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy-50);color:var(--navy);font-weight:700;flex:none;font-size:.88rem}
.burger{display:none}
.backdrop{display:none}
.content{padding:24px 24px 56px;max-width:1320px;width:100%}
.content-narrow{max-width:920px}
.page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head .topbar-title{flex:1;min-width:200px}
.subtitle{color:var(--muted);font-size:.88rem;margin-top:4px;max-width:75ch}
.page-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
/* flex-wrap: Auf schmalen Geraeten passten Text und Knoepfe eines Hinweisbandes nicht nebeneinander
   und schoben die Seite seitlich hinaus. Umbrechen ist hier besser als quetschen. */
.banner{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:.88rem;border:1px solid transparent}
.banner-demo{background:var(--akzent-50);border-color:var(--akzent-100);color:var(--akzent-600)}
.banner-warn{background:var(--amber-50);border-color:#f3dfae;color:#7a5200}
.banner a{font-weight:600}

/* ---------- Bare (Anmelden) ---------- */
.bare{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.bare-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 34px;width:100%;max-width:460px}
.bare-box.wide{max-width:680px}
.bare-box h2{margin-bottom:4px;font-size:1.15rem}
.bare-box .field{margin-bottom:14px}
.bare-box .btn-primary.btn-block{padding:11px}

/* ---------- Flash ---------- */
.flash{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:.88rem;border:1px solid transparent}
.flash span{flex:1;display:flex;align-items:center;gap:8px}
.flash-success{background:var(--green-50);color:#0f6b46;border-color:#bfe8d3}
.flash-error{background:var(--red-50);color:#9b2626;border-color:#f5c6c6}
.flash-info{background:var(--navy-50);color:#1f3c66;border-color:var(--navy-100)}
.flash-x{background:none;border:0;font-size:1.15rem;color:inherit;cursor:pointer;opacity:.6;padding:0 4px}
.flash-x:hover{opacity:1}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--panel);color:var(--text);font:inherit;font-weight:500;font-size:.88rem;cursor:pointer;text-decoration:none!important;white-space:nowrap;line-height:1.2;transition:background .12s,border-color .12s}
.btn:hover{background:var(--gray-50)}
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-700);border-color:var(--navy-700)}
.btn-accent{background:var(--akzent);border-color:var(--akzent);color:#fff}
.btn-accent:hover{background:var(--akzent-600);border-color:var(--akzent-600)}
.btn-success{background:var(--green);border-color:var(--green);color:#fff}
.btn-success:hover{background:#15804f}
.btn-danger{color:var(--red);border-color:#f0c4c4}
.btn-danger:hover{background:var(--red-50)}
.btn-ghost{border-color:transparent;background:transparent;color:var(--gray-600)}
.btn-ghost:hover{background:var(--gray-50);color:var(--text)}
.btn-sm{padding:4px 12px;font-size:.8rem}
.btn-sm .ico{width:15px;height:15px}
.btn-icon{padding:8px}
.btn-lg{padding:12px 20px;font-size:.95rem}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.btn-block{width:100%;justify-content:center}
.dd{position:relative;display:inline-block}
.dd summary{list-style:none;cursor:pointer}
.dd summary::-webkit-details-marker{display:none}
.dd-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:230px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;z-index:30;display:flex;flex-direction:column}
/* min-width schlaegt max-width: Mit festen 340px war das Menue auf einem 320px-Bildschirm breiter
   als das Fenster, und die max-width von 92vw kam gar nicht zum Zug. min() nimmt den kleineren Wert. */
.dd-wide{min-width:min(340px,92vw);max-width:92vw}
.company-switch .dd-menu{left:0;right:auto}
.dd-menu form{display:block}
.dd-menu .btn,.dd-menu .dd-item{display:flex;width:100%;justify-content:flex-start;border:0;border-radius:var(--radius-sm);background:none;padding:8px 12px;font-weight:500;color:var(--text);text-align:start;gap:8px;align-items:center}
.dd-menu .btn:hover,.dd-menu .dd-item:hover{background:var(--gray-50);text-decoration:none}
.dd-menu .btn.is-current{background:var(--akzent-50)}
.dd-menu .btn-danger{color:var(--red)}
.dd-menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.dd-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.dd-head small{display:block;font-weight:400}
.dd-empty{padding:16px 12px;color:var(--muted);font-size:.88rem}
.notif-item{flex-direction:column;align-items:flex-start!important;gap:2px!important;font-size:.88rem;white-space:normal}
.notif-item.unread{background:var(--akzent-50)}
.notif-item small{color:var(--muted)}

/* ---------- Karten / Raster ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:20px}
.card-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-head h2{flex:1}
.card-body{padding:20px}
.card-body.tight{padding:0}
.card-foot{padding:16px 20px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-side{grid-template-columns:minmax(0,2fr) minmax(300px,1fr)}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden}
.kpi .label{font-size:.8rem;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:6px}
.kpi .value{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:.8rem;color:var(--muted)}
.kpi.warn .value{color:var(--red)}.kpi.good .value{color:var(--green)}.kpi.primary .value{color:var(--navy)}
.kpi-link{position:absolute;inset:0}

/* ---------- Tabellen ---------- */
.table-wrap{overflow-x:auto}
table.table{width:100%;border-collapse:collapse;font-size:.95rem}
.table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:start;padding:12px 16px;border-bottom:1px solid var(--line-strong);font-weight:600;white-space:nowrap;background:#f8fafc}
.table td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.table th:first-child,.table td:first-child{padding-inline-start:20px}
.table th:last-child,.table td:last-child{padding-inline-end:20px}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:#f8fafd}
.table tr.row-link{cursor:pointer}
.table .num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.table .actions{white-space:nowrap;text-align:end}
.table .actions .btn{margin-inline-start:4px}
.table tfoot td{font-weight:600;background:#f8fafc;border-top:1px solid var(--line-strong)}
.table .sub{display:block;font-size:.8rem;color:var(--muted)}
/* Eine Zusatzzeile, die warnt: ueberfaellige Betraege sollen sich vom Rest abheben. */
.table .sub.sub-warn{color:var(--red);font-weight:600}
/* Was in weniger als einer Woche endgueltig verschwindet, hebt sich ab. */
.table tr.pk-bald td{background:var(--amber-50)}
/* Zusatzzeile in einer Beschreibungsliste. Ohne diese Regel lief sie ohne Abstand hinter den
   Wert – aus „unbegrenzt“ und „2 Konten“ wurde „unbegrenzt2 Konten“. */
.dl .sub{display:block;font-size:.8rem;font-weight:400;color:var(--muted);margin-top:2px}
.table a.strong{color:var(--text);font-weight:600}
.table-sm td,.table-sm th{padding:8px 12px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;font-size:.72rem;font-weight:600;line-height:1.3;white-space:nowrap;background:var(--gray-50);color:var(--gray-600)}
.badge.s-entwurf{background:var(--gray-50);color:var(--gray-600)}
.badge.s-offen{background:var(--navy-50);color:var(--navy)}
.badge.s-teilbezahlt{background:var(--amber-50);color:#9a6400}
.badge.s-bezahlt,.badge.s-angenommen,.badge.s-erledigt{background:var(--green-50);color:#0f6b46}
.badge.s-ueberfaellig,.badge.s-abgelehnt{background:var(--red-50);color:#9b2626}
.badge.s-storniert{background:var(--gray-50);color:var(--muted);text-decoration:line-through}
.badge.b-neutral{background:var(--gray-50)}.badge.b-blue{background:var(--navy-50);color:var(--navy)}.badge.b-teal{background:var(--akzent-50);color:var(--akzent-600)}
.badge.b-green{background:var(--green-50);color:#0f6b46}.badge.b-red{background:var(--red-50);color:#9b2626}.badge.b-amber{background:var(--amber-50);color:#9a6400}

/* ---------- Formulare ---------- */
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.field label{font-size:.8rem;font-weight:600;color:var(--gray-600)}
/* Kleiner Hinweistext – auch neben Schaltflaechen, nicht nur unter einem Feld */
.help{font-size:.8rem;color:var(--muted)}
.field.check{flex-direction:row;align-items:center;gap:8px}
/* Ohne flex:none schrumpft das Kaestchen neben einem langen Text mit – auf der
   Registrierungsseite blieben davon 13 Pixel uebrig. */
.field.check input[type=checkbox],.field.check input[type=radio]{flex:none}
.field.check label{font-weight:500;color:var(--text)}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],input[type=search],input[type=tel],input[type=url],input[type=color],select,textarea{width:100%;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);font:inherit;font-size:.95rem;color:var(--text);background:#fff;transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--akzent);box-shadow:var(--ring)}
input[readonly]{background:#f7f8fa;color:var(--muted)}
input[type=color]{padding:2px;height:38px;width:60px}
input[type=file]{font-size:.88rem}
textarea{min-height:84px;resize:vertical;line-height:1.45}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6b7a' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-inline-end:32px}
.input-group{display:flex;align-items:stretch}
.input-group input{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.input-group .addon{display:flex;align-items:center;padding:0 12px;border:1px solid var(--line-strong);border-inline-start:0;border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:#f7f8fa;color:var(--muted);font-size:.88rem;white-space:nowrap}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.form-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid .full{grid-column:1/-1}
.form-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.form-actions .spacer{flex:1}
.hint{display:inline-flex;color:var(--muted-2);vertical-align:middle}
/* Auf den Kennzahl-Kacheln liegt ein unsichtbarer Verweis ueber der ganzen Karte. Ohne eigene
   Malschicht fing er auch das Fragezeichen ab – die Erklaerung war nicht zu oeffnen. */
.kpi .hint{position:relative;z-index:1}
.hint:hover{color:var(--akzent-600)}
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.toolbar .search{position:relative;flex:1;min-width:200px;max-width:380px}
.toolbar .search input{padding-inline-start:36px}
.toolbar .search .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted-2)}
.toolbar select{width:auto;min-width:140px}
.pills{display:flex;gap:4px;flex-wrap:wrap}
.pill{padding:8px 12px;border-radius:99px;font-size:.88rem;font-weight:500;color:var(--gray-600);background:var(--panel);border:1px solid var(--line);text-decoration:none!important}
.pill:hover{background:var(--gray-50)}
.pill.active{background:var(--navy);color:#fff;border-color:var(--navy)}
/* Zahl an einem Filterreiter: sagt vor dem Klick, ob dahinter etwas liegt. */
.pill-count{display:inline-block;margin-inline-start:5px;padding:0 5px;min-width:16px;text-align:center;border-radius:99px;background:var(--gray-50);color:var(--muted);font-size:.72rem;font-weight:700;line-height:1.5}
/* Heller als die Pille ergab 4,02:1 – unter den 4,5, die kleine fette Schrift braucht.
   Dunkler statt heller: 22 % Schwarz ueber #4f46e5 ergibt #3d36b2, weiss darauf 8,5:1. */
.pill.active .pill-count{background:rgba(0,0,0,.22);color:#fff}
/* Gespeicherte Filter. Der Name und das Entfernen sitzen in einem Chip nebeneinander, damit klar
   ist, dass das Kreuz zu genau diesem Filter gehoert. */
.saved-filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-8px 0 16px}
.saved-filters .chip{display:inline-flex;align-items:center;border-radius:99px;border:1px solid var(--line);background:var(--panel);overflow:hidden}
.saved-filters .chip>a{display:inline-flex;align-items:center;gap:5px;padding:5px 4px 5px 11px;font-size:.88rem;font-weight:500;color:var(--gray-600);text-decoration:none!important}
.saved-filters .chip:hover{border-color:var(--line-strong)}
.saved-filters .chip.active{background:var(--akzent-50);border-color:var(--akzent)}
.saved-filters .chip.active>a{color:var(--text)}
.saved-filters .chip-x{background:none;border:0;padding:5px 9px 5px 5px;color:var(--muted-2);cursor:pointer;line-height:0}
.saved-filters .chip-x:hover{color:var(--red)}
.saved-filters .chip-add>summary{list-style:none}
.saved-filters .chip-add>summary::-webkit-details-marker{display:none}
/* Elf Reiter passen nicht auf jeden Bildschirm. Statt eines grauen Systembalkens, der 16 Pixel Hoehe
   frisst und trotzdem uebersehen wird, blendet die Kante aus, solange in dieser Richtung noch Reiter
   stehen. Welche Seite ausblendet, setzt app.js ueber data-ovf. */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.tabs::-webkit-scrollbar{height:0;width:0}
/* Zwoelf Reiter passen in keine Zeile. Waagerecht scrollen versteckt die Haelfte davon – in der
   Verwaltung bricht die Leiste deshalb um, statt den Rest hinter dem Rand zu lassen. */
.tabs.tabs-wrap{flex-wrap:wrap;overflow-x:visible;-webkit-mask-image:none;mask-image:none;row-gap:0}
/* Trennt in der Verwaltung den taeglichen Betrieb von den Einstellungen der Plattform */
.tab.tab-cut{margin-inline-start:12px;border-inline-start:1px solid var(--line);padding-inline-start:20px}
.tabs>.hint{align-self:center;margin-inline-start:-4px;margin-inline-end:4px}
.tabs[data-ovf=end]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.tabs[data-ovf=start]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
.tabs[data-ovf=both]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
@media (prefers-reduced-motion:reduce){.tabs{scroll-behavior:auto}}
.tab{padding:12px 16px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none!important;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.active{color:var(--navy);border-color:var(--akzent)}
.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.empty h3{margin:12px 0 6px;color:var(--text)}
.empty p{margin:0 auto 16px;max-width:75ch}
.dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 16px;font-size:.95rem}
.dl dt{color:var(--muted);font-weight:500}
/* Lange Adressen und Schluessel muessen umbrechen duerfen. Ohne min-width:0 kann eine Gitterspalte
 nicht unter ihre kleinste Inhaltsbreite; die Seite bekam davon auf dem Handy eine Ueberbreite. */
.dl dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
.notice{background:var(--amber-50);border:1px solid #f3dfae;color:#7a5200;border-radius:10px;padding:12px 16px;font-size:.88rem}
.notice-blue{background:var(--navy-50);border-color:var(--navy-100);color:#1f3c66}
.notice-teal{background:var(--akzent-50);border-color:var(--akzent-100);color:var(--akzent-600)}
.kbd{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--gray-50);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.8rem}
.explain{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px dashed var(--line-strong);border-radius:10px;padding:12px 16px;font-size:.88rem;color:var(--muted);margin-bottom:16px}
.explain .ico{color:var(--akzent-600);margin-top:2px}
.explain b{color:var(--text)}
/* Zeilenlaenge: ein Erklaertext ueber die ganze Inhaltsbreite (1320 px) ist kaum zu lesen. */
.explain>span{max-width:75ch}

/* ---------- Beleg-Editor ---------- */
.pos-table{width:100%;min-width:900px;border-collapse:collapse;font-size:.88rem}
.pos-table td:nth-child(2),.pos-table th:nth-child(2){min-width:260px}
.pos-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px 12px;text-align:start;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.pos-table th.c-menge,.pos-table th.c-preis,.pos-table th.c-rabatt{text-align:end}
.pos-table td{padding:8px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.pos-table input,.pos-table select,.pos-table textarea{padding:8px;font-size:.88rem}
.pos-table textarea{min-height:0;height:56px;margin-top:8px;font-size:.8rem}
.pos-table .num input{text-align:end}
.pos-table .c-nr{width:44px;color:var(--muted);text-align:center;font-weight:600}@media (min-width:761px){.pos-table td.c-nr{padding-top:16px}}
.pos-table .c-menge{width:90px}.pos-table .c-einheit{width:110px}.pos-table .c-preis{width:120px}.pos-table .c-rabatt{width:80px}.pos-table .c-ust{width:90px}
.pos-table .c-summe{width:120px;text-align:end;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}@media (min-width:761px){.pos-table td.c-summe{padding-top:16px}}
.pos-table .c-tools{width:96px;white-space:nowrap;padding-top:8px}
.pos-table .c-tools .btn{padding:5px}
.ac{position:relative}
.ac-list{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);max-height:260px;overflow:auto;margin-top:4px;display:none}
.ac-list.open{display:block}
.ac-item{padding:8px 12px;cursor:pointer;display:flex;justify-content:space-between;gap:12px;font-size:.88rem}
.ac-item:hover,.ac-item.hl{background:var(--akzent-50)}
.ac-item small{color:var(--muted)}.ac-item b{font-weight:600}
.ac-empty{padding:10px 12px;color:var(--muted);font-size:.88rem}
.totals{margin-inline-start:auto;width:100%;max-width:380px;font-size:.95rem}
.totals .row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}
.totals .row.grand{font-weight:700;font-size:1.15rem;border-bottom:0;border-top:2px solid var(--text);margin-top:4px;padding-top:10px}
/* Die rechte Spalte (Nummer, Datum, Fristen, Rabatt, Sprache, Vertrag) hat die meisten Felder, die linke
   nur Kunde, Anschrift, Mail und Betreff: die breitere Spalte gehoert dahin, wo mehr drinsteht. */
.editor-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px}
.sticky-bar{position:sticky;bottom:0;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-top:1px solid var(--line);padding:12px 0;margin:0 -24px -56px;padding-inline-start:24px;padding-inline-end:24px;display:flex;gap:8px;align-items:center;z-index:15;flex-wrap:wrap}
/* Umbricht auf schmalen Geräten: ohne Umbruch schob die Importzeile des Bankabgleichs die
   ganze Seite bei 320 px auf 510 px Breite. */
.range{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.range>input,.range .input-group{flex:1;min-width:0}
.range-sep{color:var(--muted);font-size:.8rem;white-space:nowrap}
/* Die Schnellerfassung in der Liste der offenen Posten. Auf dem Rechner haelt sie ihre Breite,
   darunter nicht: Als feste Angabe im Element schob sie die Seite auf dem Telefon hinaus, und
   aus dem Stilblatt war sie nicht zu erreichen. */
.zahl-schnell{min-width:360px}
@media (max-width:900px){.zahl-schnell{min-width:0}}
.quick{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.quick .btn{padding:4px 8px;font-size:.72rem;border-radius:6px;font-weight:500}

/* ---------- Beleg-Detail ---------- */
.doc-hero .amount{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.doc-hero .meta{display:flex;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:.88rem;margin-top:8px}
.progress{height:8px;background:var(--gray-50);border-radius:99px;overflow:hidden;margin:8px 0}
.progress i{display:block;height:100%;background:var(--green);border-radius:99px}
.timeline{list-style:none;margin:0;padding:0;font-size:.88rem}
.timeline li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);align-items:center}
.timeline li:last-child{border-bottom:0}
.timeline .t{color:var(--muted);min-width:82px;font-variant-numeric:tabular-nums}
.doc-preview{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px 32px;font-size:.95rem}
.doc-preview .pv-items{width:100%;border-collapse:collapse;margin:16px 0}
.doc-preview .pv-items th{text-align:start;font-size:.72rem;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding:6px 4px}
.doc-preview .pv-items td{padding:8px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.doc-preview .pv-items .num{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.doc-preview .desc{color:var(--muted);font-size:.8rem;white-space:pre-line}
/* Die Positionstabelle behaelt ihre Spaltenbreiten (Betraege sollen nicht umbrechen) und
   scrollt dafuer auf schmalen Geraeten in sich, statt die Seite breiter zu machen. */
.doc-preview .pv-scroll{overflow-x:auto}
@media (max-width:520px){.doc-preview{padding:20px 16px}}
.steps{display:flex;gap:8px;flex-wrap:wrap;font-size:.8rem;margin-bottom:16px}
.step{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;background:var(--gray-50);color:var(--muted)}
.step.done{background:var(--green-50);color:#0f6b46}
/* Dunkelgruen auf dunkelgruen ergab 2,2:1 – derselbe helle Ton wie bei den Statusmarken. */
:root[data-theme=dark] .step.done{color:#8fe0b5}
.step.now{background:var(--navy);color:#fff}
.chart{width:100%;height:auto;display:block}
/* Die zweite Skala am rechten Rand gilt nur dem Telefon (siehe Diagramm im Abschnitt Responsive). */
.chart text.achse-r{display:none}
.legend{display:flex;gap:16px;font-size:.8rem;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:99px;margin-inline-end:6px;vertical-align:-1px}
.logo-preview{max-height:90px;max-width:260px;border:1px solid var(--line);padding:8px;border-radius:var(--radius-sm);background:#fff}
.file-link{display:inline-flex;align-items:center;gap:6px}
.tasks{list-style:none;margin:0;padding:0}
.tasks li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:.88rem}
.tasks li:last-child{border-bottom:0}
.tasks li span{flex:1}
.tasks li .ico{color:var(--akzent-600)}
.checks{list-style:none;margin:0;padding:0}
.checks li{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);font-size:.88rem}
.checks li:last-child{border-bottom:0}
.checks li>span:nth-child(2){flex:1;display:flex;flex-direction:column}
.checks li small{color:var(--muted)}
.check-ico{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none}
.checks li.ok .check-ico{background:var(--green-50);color:var(--green)}
.checks li.warn .check-ico{background:var(--red-50);color:var(--red)}
.codes{display:grid;grid-template-columns:repeat(4,max-content);gap:8px;margin-top:10px}
.codes .kbd{font-size:.95rem;padding:4px 12px;background:#fff}
.qr{border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px;background:#fff}
.layout-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.layout-opt{border:2px solid var(--line);border-radius:var(--radius);padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:6px;position:relative}
.layout-opt:has(input:checked){border-color:var(--akzent);background:var(--akzent-50)}
.layout-opt input{position:absolute;opacity:0}
.layout-opt b{font-size:.95rem}.layout-opt small{color:var(--muted);font-size:.8rem}
.layout-opt .btn{align-self:flex-start;margin-top:4px}
.layout-thumb{display:block;height:90px;border-radius:6px;background:#fff;border:1px solid var(--line);position:relative;overflow:hidden}
.layout-thumb i{position:absolute;left:10%;right:10%;height:8px;border-radius:2px;background:#e3e7ee}
.layout-thumb i:nth-child(1){top:14px;width:30%;background:var(--navy)}
.layout-thumb i:nth-child(2){top:40px;background:var(--navy);opacity:.9}
.layout-thumb i:nth-child(3){top:56px;height:20px;background:#f0f2f5}
.layout-thumb-modern i:nth-child(1){top:0;left:0;right:0;width:auto;height:22px;border-radius:0}
.layout-thumb-modern i:nth-child(2){top:44px;height:2px}
.layout-thumb-minimal i:nth-child(1){background:#172033;height:6px}
.layout-thumb-minimal i:nth-child(2){background:transparent;border-bottom:1px solid #172033;height:0;border-radius:0}
/* Zugang & Paket: der Kopf der Kundenseite. Eine grosse Aussage statt sieben grauer Zeilen –
   Paketname und Preis lesbar, ein Satz in ganzen Worten, die Einzelheiten als Kacheln daneben. */
/* Kundenlink: die Seite, die der Kunde des Kunden sieht. Der Betrag und der Satz dazu sind die
   ganze Nachricht – alles andere steht daneben oder darunter. */
.beleg-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:start}
.beleg-betrag{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:10px 0 0;color:var(--navy)}
.beleg-zusatz{margin:4px 0 0;font-size:.8rem;color:var(--muted)}
.beleg-satz{margin:12px 0 0;font-size:.95rem;line-height:1.6}
.beleg-qr{text-align:center}
.beleg-qr .muted{font-size:.8rem;margin-top:8px;max-width:170px}
.beleg-bank{border-top:1px solid var(--line)}
.beleg-bank h3{margin:0 0 10px;font-size:.95rem}
.beleg-bank dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px;margin:0;font-size:.95rem}
.beleg-bank dt{color:var(--muted)}
.beleg-bank dd{margin:0;font-weight:600;overflow-wrap:anywhere}
@media (max-width:700px){.beleg-kopf{grid-template-columns:minmax(0,1fr)}.beleg-qr{text-align:start}}
:root[data-theme=dark] .beleg-betrag{color:#9cc2ff}
/* Einstellungen: eine Kachel je Bereich. Zwoelf Reiter sagen nur, wie etwas heisst – die Kachel
   sagt, was drinsteht und wie es heute aussieht. */
.einst-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.einst-kachel{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);text-decoration:none!important;color:inherit}
.einst-kachel:hover{border-color:var(--akzent)}
.einst-kachel.offen{border-color:#f3dfae;background:var(--amber-50)}
.einst-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-sm);background:var(--gray-50);color:var(--navy)}
.einst-kachel.offen .einst-ico{background:#fff;color:#9a6400}
.einst-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.einst-text b{font-size:.95rem}
.einst-was{font-size:.8rem;color:var(--muted);line-height:1.45}
/* var(--green) ergibt auf Weiss nur 3,6:1; derselbe dunklere Ton wie bei .btn-success:hover. */
.einst-stand{font-size:.8rem;font-weight:600;color:#15804f;display:flex;align-items:center;gap:5px;margin-top:4px}
.einst-kachel.offen .einst-stand{color:#9a6400}
.einst-stand.neutral{color:var(--muted);font-weight:500}
.einst-stand.neutral .ico{color:var(--muted-2)}
:root[data-theme=dark] .einst-ico{color:#9cc2ff}
:root[data-theme=dark] .einst-stand{color:#8fe0b5}
:root[data-theme=dark] .einst-kachel.offen{border-color:#5a4520}
:root[data-theme=dark] .einst-kachel.offen .einst-ico{background:var(--panel);color:#e0b563}
:root[data-theme=dark] .einst-kachel.offen .einst-stand{color:#e0b563}
.zugang-kopf{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start}
.zugang-paket{font-size:1.6rem;font-weight:700;color:var(--navy);line-height:1.15;margin:10px 0 2px}
.zugang-preis{font-size:1.15rem;font-weight:600;color:var(--text)}
.zugang-preis small{font-weight:400;color:var(--muted);font-size:.8rem;margin-inline-start:4px}
.zugang-satz{margin:12px 0 0;font-size:.95rem;line-height:1.65;color:var(--muted)}
.zugang-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.zugang-fakten{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.zugang-fakten li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;background:var(--gray-50);border-radius:10px;padding:8px 12px}
.zugang-fakten span{color:var(--muted);font-size:.8rem}
.zugang-fakten b{font-weight:600;text-align:end;font-size:.95rem}
/* Die Funktionsliste ist Nachschlagewerk, nicht Einstieg: zugeklappt, zweispaltig, mit Kreuz
   fuer das, was nicht dabei ist. */
/* Eine Karte, die sich auf- und zuklappen laesst. Der Kopf bleibt derselbe, er bekommt nur
   einen Zeiger und traegt den Klick. */
.karte-klapp>summary{cursor:pointer;list-style:none}
.karte-klapp>summary::-webkit-details-marker{display:none}
.karte-klapp>summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-top:-3px;flex:none}
.karte-klapp[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
.karte-klapp:not([open])>summary{border-bottom:0}
.zugang-mehr{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.zugang-mehr>summary{cursor:pointer;font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:8px;list-style:none}
.zugang-mehr>summary::-webkit-details-marker{display:none}
.zugang-mehr>summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-inline-start:2px;margin-top:-3px}
.zugang-mehr[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
.zugang-funktionen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 28px;margin-top:10px}
.zugang-funktionen .checklist li.aus{color:var(--muted)}
.zugang-funktionen .checklist li.aus .ico{color:var(--line-strong)}
@media (max-width:860px){.zugang-kopf{grid-template-columns:minmax(0,1fr);gap:18px}.zugang-funktionen{grid-template-columns:minmax(0,1fr)}}
.plan-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plan{border:2px solid var(--line);border-radius:var(--radius);padding:24px;background:#fff;display:flex;flex-direction:column;gap:10px;position:relative}
.plan.current{border-color:var(--akzent)}
.plan .price{font-size:1.9rem;font-weight:700;letter-spacing:-.02em}
.plan .price small{font-size:.8rem;font-weight:500;color:var(--muted)}
.plan ul{margin:0;padding-inline-start:20px;color:var(--gray-600);font-size:.88rem;flex:1}
.plan .btn{justify-content:center}
/* Weiss auf Tuerkis waren 2,5:1. Dunkelblau auf demselben Tuerkis kommt auf 6,4:1 und
   entspricht dem Zeichen im Benutzermenue. */
.plan-tag{position:absolute;top:-11px;right:16px;background:var(--akzent);color:var(--navy);font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:99px}
/* Aktionspreis: der beworbene Preis gross, der regulaere klein und durchgestrichen daneben. */
.plan .plan-chip-aktion{background:rgba(99,102,241,.14);color:var(--akzent-600);align-self:flex-start}
.plan .price-alt{margin:-4px 0 0;font-size:.95rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.plan .price-alt s{color:var(--gray-600)}
.plan .price-hint{margin:0;font-size:.8rem;color:var(--muted)}

/* Eigener Bestätigungsdialog */
.px-dialog{border:0;border-radius:var(--radius);padding:24px;max-width:460px;width:calc(100% - 32px);box-shadow:var(--shadow-lg);color:var(--text);font:inherit}
.px-dialog::backdrop{background:rgba(15,42,74,.45)}
.px-dialog-msg{font-size:.95rem;line-height:1.5;margin-bottom:20px}
.px-dialog-actions{display:flex;gap:8px;justify-content:flex-end}

/* ---------- Responsive ---------- */
/* Zwischen 901 und 1100 Pixeln kostet die Seitenleiste mehr, als das breitere Fenster
   einbringt. Schmalere Leiste und schmaleres Polster drehen das um: gemessen 724 -> 784 px
   Inhaltsbreite bei 1024 px. Darunter bleibt alles, wie es ist – die Schublade auf dem Tablet
   behaelt ihre 252 px, das Telefon sein 16-px-Polster. */
@media (min-width:901px) and (max-width:1100px){
  /* 224 und nicht 200: Gemessen braucht der laengste deutsche Menuepunkt („Produkte &
     Leistungen") 221 Pixel Leistenbreite, um nicht umzubrechen. Bei 200 brechen zwei Punkte um,
     bei 224 keiner – und die Umkehr ist trotzdem behoben: 745 statt 709 Pixel Inhalt bei
     1024 px, gegen 721 bei 768 px. (Italienisch braeuchte 316 Pixel; „Amministratore della
     piattaforma" bricht schon bei den heutigen 252 um – das ist eine Frage des Wortes, nicht
     der Leiste.) */
  :root{--sidebar:224px}
  .content{padding-inline:20px}
}
@media (max-width:1100px){
  /* minmax(0,1fr) statt 1fr: Eine Spalte darf nie breiter werden als der Platz, den sie hat.
     Mit blossem 1fr wuchs sie auf die Mindestbreite ihres Inhalts – auf dem Dashboard schob die
     Umsatzgrafik die Seite dadurch auf 541 px, obwohl das Fenster nur 320 px breit war. */
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-side{grid-template-columns:minmax(0,1fr)}.editor-head{grid-template-columns:minmax(0,1fr)}.plan-cards{grid-template-columns:minmax(0,1fr)}.layout-pick{grid-template-columns:minmax(0,1fr)}
}
/* Drei Kennzahlen untereinander brauchen 426 Pixel Hoehe, nebeneinander 137. Nur die Kennzahl-
   zeilen, nicht jedes Dreierraster: In der Uebersicht stehen in einem .grid-3 drei Texttafeln,
   die nebeneinander zu schmal wuerden. */
@media (min-width:561px) and (max-width:900px){
  .grid-3:has(>.kpi){grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);z-index:50;transform:translateX(-100%);transition:transform .2s}
  .app.nav-open .sidebar{transform:none;box-shadow:var(--shadow-lg)}
  .app.nav-open .backdrop{display:block;position:fixed;inset:0;background:rgba(15,42,74,.4);z-index:45}
  .burger{display:inline-flex}
  .nav-collapse{display:none}
  .topbar{padding:8px 12px;gap:6px}
  .topbar .lbl{display:none}
  .gsearch{max-width:none}
  .content{padding:16px 16px 44px}
  .sticky-bar{margin:0 -16px -44px;padding-inline-start:16px;padding-inline-end:16px}
  /* minmax(0,1fr) statt 1fr: Sonst waechst die Spalte auf die Mindestbreite ihres Inhalts. Im
     Rechnungseditor schob ein Eingabefeld mit Anhaengsel („Tagen") die Seite so 20px hinaus. */
  .grid-2,.grid-3,.form-grid,.form-grid-3{grid-template-columns:minmax(0,1fr)}
  .grid-4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  html{font-size:90.625%}
  .codes{grid-template-columns:repeat(2,max-content)}
}
/* Eingabefelder auf Telefon und Tablet.
   Zwei Dinge zugleich: 44 Pixel Hoehe, weil ein Daumen kein Mauszeiger ist, und 16 Pixel
   Schrift, weil Safari bei kleinerer Schrift beim Antippen hineinzoomt – die Seite steht
   danach schief, und man muss sie von Hand zurueckziehen. Die Grenze liegt bei 900 Pixeln,
   dort schaltet auch die Grundschrift um; bis 700 galt sie nur fuer das Telefon, und auf dem
   Tablet standen die Felder wieder bei 13,3 Pixeln. */
@media (max-width:900px){
  input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],
  input[type=password],input[type=search],input:not([type]),select,textarea{min-height:44px;font-size:16px}
  /* Die beiden Suchfelder haben eigene, schwerere Regeln – hier noch einmal mit gleichem Gewicht. */
  .gsearch input[type=search],.cmdk-head input[type=search]{font-size:16px}
  textarea{min-height:72px}
  .btn{min-height:44px}
  .btn-sm{min-height:44px}
  .pos-table input,.pos-table select{font-size:16px;min-height:44px}
  .pos-table textarea{min-height:44px;height:44px;font-size:16px}
  /* Kaestchen und Schalter ebenso: 16 Pixel trifft niemand verlaesslich. */
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
}

/* Das Diagramm auf dem Telefon.
   Sein Rahmen ist 760 Pixel breit; auf 375 Pixeln Bildschirm bleiben davon 92 Pixel Hoehe –
   Saeulen von zwei Millimetern, aus denen niemand etwas abliest. Es behaelt deshalb eine
   Mindestbreite und laesst sich im Behaelter schieben; 520 Pixel ergeben 157 Pixel Hoehe.
   Der Behaelter steht beim Aufruf am rechten Ende: Der laufende Monat ist der, um den es geht
   (app.js). Die Schrift in den Einheiten der Grafik gleicht die Verkleinerung aus. */
@media (max-width:700px){
  .chart-wrap{overflow-x:auto;overscroll-behavior-x:contain}
  /* Solange links aeltere Monate verdeckt sind, zeigt ein Verlauf es an (data-ovf aus app.js). */
  .chart-wrap[data-ovf=start],.chart-wrap[data-ovf=both]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
  .chart-wrap[data-ovf=end]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .chart{min-width:520px}
  .chart text{font-size:16px}
  .chart text.achse-r{display:inline}
}

/* Vier Kennzahlen untereinander sind auf dem Telefon vier Bildschirme weit auseinander.
   Nebeneinander stehen sie beim Aufschlagen zusammen – dafuer eine Zahl, die in die halbe
   Breite passt, und weniger Rand. */
@media (max-width:700px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi .sub{font-size:.72rem}
}

/* Auf dem Telefon steht zuerst, was zu tun ist: Heute wichtig, faellige Rechnungen,
   Schnellzugriff. Der Rueckblick – Diagramm und zuletzt bearbeitete Belege – kommt danach. */
/* Bis zur vollen Breite gilt dasselbe wie auf dem Telefon: erst was zu tun ist, dann der
   Rueckblick. Zwischen 701 und 1100 Pixeln stand die Handlungsspalte sonst erst nach einer
   ganzen Bildschirmhoehe Diagramm. */
@media (max-width:1100px){.dash-grid>:nth-child(2){order:-1}}

/* Zwoelf Reiter brauchen umgebrochen fuenf Zeilen – ein Drittel des Bildschirms, bevor der
   Inhalt anfaengt. Auf dem Telefon bleibt eine Zeile, die sich schieben laesst; das
   Verlaufsbild am Rand zeigt, dass dort noch etwas kommt. In jeden Bereich fuehren ohnehin
   auch die Kacheln im Ueberblick. */
@media (max-width:700px){
  .tabs.tabs-wrap{flex-wrap:nowrap;overflow-x:auto}
  .tab.tab-cut{margin-inline-start:6px;padding-inline-start:12px}
}

/* ---------- Leiste am unteren Rand (nur Telefon) ----------
   Oben in der Kopfleiste liegen zehn Bedienelemente. Wer das Gerät mit einer Hand hält, kommt
   dort nicht hin. Unten stehen die fünf Wege, die im Alltag zählen. Die Leiste liegt über allem,
   deshalb bekommt der Inhalt unten Platz – sonst verdeckt sie die letzte Zeile jeder Liste. */
.tabbar{display:none}
@media (max-width:700px){
  .tabbar{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;
    position:fixed;inset-inline:0;bottom:0;z-index:40;
    background:var(--panel);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .tabbar .tab-i{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:9px 4px 8px;min-height:56px;border:0;background:none;cursor:pointer;
    color:var(--muted);font:inherit;font-size:.72rem;text-decoration:none;line-height:1.1;
  }
  .tabbar .tab-i .ico{width:21px;height:21px}
  .tabbar .tab-i.active{color:var(--text);font-weight:600}
  .tabbar .tab-i.active .ico{color:var(--akzent)}
  /* Der Hauptweg sticht hervor: eine neue Rechnung ist das, was am häufigsten ansteht. */
  .tabbar .tab-neu{
    align-self:center;width:52px;height:52px;min-height:0;border-radius:50%;
    background:var(--navy);color:#fff;box-shadow:var(--shadow-lg);margin-top:-14px;padding:0;
  }
  .tabbar .tab-neu .ico{width:24px;height:24px}
  /* Platz für die Leiste: sonst steht die letzte Zeile jeder Liste hinter ihr. */
  .content{padding-bottom:88px}
  .sticky-bar{bottom:calc(56px + env(safe-area-inset-bottom))}
  /* Im Belegeditor ist die Leiste im Weg: Dort zaehlt nur die eine Aufgabe, und unten stehen
     schon die Knoepfe zum Speichern. Zwei Leisten uebereinander nehmen auf 844 Pixeln ein
     Sechstel des Bildschirms. */
  main:has(.pos-table) + .tabbar{display:none}
  main.content:has(.pos-table){padding-bottom:20px}
  main:has(.pos-table) .sticky-bar{bottom:0}
}

/* Die Knopfleiste im Belegeditor.
   Fuenf Knoepfe untereinander nehmen auf dem Telefon 173 von 812 Pixeln. Der Hauptknopf steht
   allein in der ersten Zeile; darunter das Speichern des Entwurfs und die drei Nebenwege, die
   dort nur ihr Zeichen zeigen. Ihr Name steht im aria-label weiter – eine Vorlesehilfe haette
   sonst nur „Schaltflaeche“ zu melden. */
@media (max-width:700px){
  .sticky-bar{gap:8px;padding:10px 0}
  .sticky-bar .btn-primary{flex:1 0 100%;order:-1;justify-content:center}
  .sticky-bar button[name=stay]{flex:1 1 auto}
  .sticky-bar #previewToggle .lbl,.sticky-bar .btn-ghost .lbl,.sticky-bar .btn-danger .lbl{display:none}
}
/* Was nur auf breiten Geraeten Sinn ergibt: Zusatzangaben und Nebenwege in Baendern.
   Auf dem Telefon bleibt die Aussage und der eine Weg, der weiterhilft. */
@media (max-width:700px){.nur-breit{display:none}}
/* ---------- Listen auf dem Telefon ----------
   Eine Tabelle mit acht Spalten wird auf 390 Pixeln zur Schiebearbeit: sichtbar sind Nummer,
   halber Kundenname und ein Datum, der Betrag liegt rechts außerhalb. Unter 700 px wird aus jeder
   Zeile eine Karte. Die erste Zelle ist die Überschrift, die übrigen nennen ihre Beschriftung
   selbst – ohne Kopfzeile wüsste sonst niemand, ob ein Datum das Belegdatum oder die Fälligkeit
   ist.

   Das gilt nur für Listen, die ihre Rollen mitbringen (z-titel und die übrigen z-Klassen). Ohne
   sie weiß das Stilblatt nicht, was Überschrift, was Betrag und was entbehrlich ist: Eine
   Auswertung oder eine Tabelle in der Verwaltung würde zu einem Raster aus zwei Spalten ohne
   Beschriftung, und ihre Knöpfe wären weg. Die bleibt eine Tabelle und lässt sich schieben.
   Kennt ein Browser :has() nicht, bleiben alle Listen Tabellen – das ist der alte Zustand. */
@media (max-width:700px){
  .table-wrap:has(td.z-titel){overflow-x:visible}
  .table:has(td.z-titel){display:block;width:100%}
  .table:has(td.z-titel) thead{display:none}
  .table:has(td.z-titel) tbody{display:block}
  .table:has(td.z-titel) tbody tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
    gap:3px 12px;position:relative;padding:12px 14px 12px;
    border-bottom:1px solid var(--line);
  }
  .table:has(td.z-titel) tbody tr:last-child{border-bottom:0}
  .table:has(td.z-titel) tbody tr:hover{background:none}
  .table:has(td.z-titel) td{display:block;padding:2px 0;border:0;text-align:start;white-space:normal}
  .table:has(td.z-titel) td.num{text-align:start}
  .table:has(td.z-titel) td.z-status,.table:has(td.z-titel) td.z-betrag{text-align:end}
  .table:has(td.z-titel) td.c-sel{padding:0}
  .table:has(td.z-titel) td[data-l]::before{content:attr(data-l) ": ";color:var(--muted);font-size:.8rem}
  /* Vier Zeilen je Datensatz: Nummer und Status, Kunde, Frist und Betrag, Aktionen.
     Was auf dem Telefon niemand braucht, bleibt weg – es steht auf der Belegseite. */
  .table td.z-titel{grid-column:1;grid-row:1;font-size:.95rem;font-weight:600}
  .table td.z-status{grid-column:2;grid-row:1;text-align:end}
  /* Platz fuer das Auswahlkaestchen nur dort, wo es eines gibt – sonst bricht die Nummer
     ohne Grund um. */
  .table tbody tr:has(td.c-sel) td.z-titel,
  .table tbody tr:has(td.c-sel) td.z-status{padding-inline-end:26px}
  .table td.z-kunde{grid-column:1/3;grid-row:2;color:var(--muted)}
  .table td.z-meta{grid-column:1;grid-row:3;font-size:.88rem;color:var(--muted)}
  .table td.z-betrag{grid-column:2;grid-row:3;text-align:end;font-size:1.15rem;font-weight:600}
  .table td.z-offen{grid-column:1;grid-row:4;font-size:.88rem}
  /* „Offen: –“ ist keine Auskunft, sondern eine leere Zeile mit Text. Ist nichts offen,
     steht dort ein Gedankenstrich – dann faellt die Zeile auf dem Telefon weg. */
  .table td.z-offen:has(.muted){display:none}
  /* Die Knoepfe je Zeile fallen weg: Auf dem Telefon ist die ganze Zeile der Knopf, und zwei
     Symbole von 20 Pixeln trifft niemand mit dem Daumen. Alles, was sie koennen, steht auf
     der Belegseite – einen Fingertipp entfernt. Wo die Ueberschrift kein Link ist, bleiben sie
     stehen: Sonst waere die Zeile auf dem Telefon eine Sackgasse. */
  .table tbody tr:has(td.z-titel a) td.actions{display:none}
  /* Ausnahme: Listen, deren Knoepfe es nirgends sonst gibt – Pausieren, Jetzt erstellen, Mahnung
     erstellen. Dort stehen sie als fuenfte Zeile der Karte, mit Abstand fuer den Daumen. */
  .table.table-aktionen tbody tr:has(td.z-titel a) td.actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
  .table.table-aktionen td.actions .inline{display:contents}
  .table.table-aktionen td.actions .btn{margin:0;min-height:44px}
  /* Mit :has() davor: Die allgemeine Zellenregel oben traegt den Zusatz und waere sonst staerker. */
  .table:has(td.z-titel) td.z-weg{display:none}
  /* Auswahlkästchen und Aktionen an den Rand, nicht in den Textfluss. */
  .table td.c-sel{position:absolute;top:12px;inset-inline-end:12px;width:auto;padding:0}
  .table:has(td.z-titel) td.actions{grid-column:1/3;grid-row:5;text-align:end}
  .table td.actions .btn{margin:0 0 0 6px}
  .table:has(td.z-titel) td:empty{display:none}
  .table:has(td.z-titel) tfoot{display:block}
  .table:has(td.z-titel) tfoot tr{display:flex;justify-content:space-between;gap:10px;padding:10px 14px}
  .table:has(td.z-titel) tfoot td{padding:0}
}
/* ---------- Mittlere Breiten: zwei Spalten weichen ----------
   Die Rechnungsliste braucht 1068 Pixel. Sichtbar sind 707 (1024 px Fenster), 963 (1280) und
   1049 (1366) – erst ab rund 1385 px passt sie. Bis dahin lagen Brutto, Offen und die
   Zeilenaktionen rechts ausserhalb; dass man schieben kann, zeigt seit dem 2. Oktober ein
   Schatten, aber schieben muss man trotzdem. Datum und Netto stehen auf der Belegseite und
   weichen deshalb hier – nur in Listen, die ihre Kopfzellen selbst dafuer gekennzeichnet haben.
   „screen": Auf Papier (A4 sind rund 794 Pixel) gehoeren alle Spalten aufs Blatt. */
@media screen and (min-width:701px) and (max-width:1384px){
  .table:has(thead th.z-weg) .z-weg{display:none}
  /* 8 statt 14 Pixel: Die acht Spalten sparen damit 96 Pixel – genau die, die bei 768 und
     1024 px noch fehlten (gemessen 744 gegen 719 bzw. 760 gegen 743). */
  .table:has(thead th.z-weg) th,.table:has(thead th.z-weg) td{padding-inline:8px}
}

/* ---------- Positionseditor auf dem Telefon ----------
   Neun Spalten und 900 Pixel Mindestbreite bedeuten auf einem 390-Pixel-Gerät: seitlich schieben,
   um eine Menge einzutragen. Genau daran scheitert das Rechnungschreiben unterwegs.

   Unter 760 px wird aus jeder Zeile eine Karte: Bezeichnung über die ganze Breite, darunter zwei
   Reihen mit je drei Feldern. Die Beschriftungen stehen in data-l am Feld – ohne Kopfzeile wüsste
   sonst niemand, ob dort Menge, Rabatt oder Steuersatz steht. */
@media (max-width:760px){
  .pos-table{min-width:0;display:block;font-size:.88rem}
  .pos-table thead{display:none}
  .pos-table tbody{display:block;counter-reset:pos}
  .pos-table tr.pos-row{
    display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 10px;align-items:end;
    counter-increment:pos;border:1px solid var(--line);border-radius:var(--radius-sm);
    padding:12px;margin-bottom:12px;background:var(--panel);
  }
  .pos-table td{display:block;padding:0;border:0;vertical-align:baseline}
  /* Die Breiten der Desktop-Spalten (90 bis 120 Pixel, Bezeichnung mindestens 260) gelten sonst weiter –
     ein Gitterelement mit fester Breite dehnt sich nicht auf seinen Bereich, sondern ragt hinaus.
     tr.pos-row td wiegt (0,2,2) und schlaegt jede dieser Regeln, auch die spaetere fuer c-tools. */
  .pos-table tr.pos-row td{width:auto;min-width:0}
  .pos-table td[data-l]::before{
    content:attr(data-l);display:block;font-size:.72rem;text-transform:uppercase;
    letter-spacing:.05em;color:var(--muted);margin-bottom:4px;font-weight:600;
  }
  /* Nummer links, Werkzeuge rechts – beide über die ganze Zeile gelegt, jede an ihren Rand gerückt.
     Mit festen Spalten (1/4 und 4/7) bekamen die Werkzeuge 150 Pixel für 220 und liefen aus der Karte. */
  .pos-table .c-nr{grid-column:1/-1;grid-row:1;justify-self:start;width:auto;padding:0;display:flex;align-items:center;gap:6px;
    color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
  /* Ohne Zeigegerät gibt es kein Überfahren: Der Griff muss von sich aus sichtbar sein. */
  .pos-table .pos-griff{opacity:1;margin-top:0}
  .pos-table .c-tools{grid-column:1/-1;grid-row:1;justify-self:end;width:auto;padding:0;display:flex;align-items:center;gap:0;white-space:nowrap}
  .pos-table .c-tools .btn{padding:8px;min-width:44px;min-height:44px;justify-content:center}
  /* Hoch, Runter, Entfernen bleiben sichtbar; Duplizieren und „Als Produkt speichern“ stehen im Menü. */
  .pos-table .c-tools>[data-dup],.pos-table .c-tools>[data-produkt]{display:none}
  .pos-table .pos-mehr{display:inline-block}
  .pos-table .pos-mehr .dd-menu{min-width:220px;white-space:normal}
  .pos-table .pos-griff{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .pos-table .c-bez{grid-column:1/7;grid-row:2}
  .pos-table .c-menge{grid-column:1/3;grid-row:3}
  .pos-table .c-einheit{grid-column:3/5;grid-row:3}
  .pos-table .c-preis{grid-column:5/7;grid-row:3}
  .pos-table .c-rabatt{grid-column:1/3;grid-row:4}
  .pos-table .c-ust{grid-column:3/5;grid-row:4}
  .pos-table .c-summe{grid-column:5/7;grid-row:4;width:auto;padding:0;text-align:end;font-size:1.15rem;font-weight:600}
  /* 16 Pixel, nicht 1rem: Unter 16 zoomt Safari auf dem iPhone beim Antippen hinein. */
  .pos-table input,.pos-table select{width:100%;padding:10px;font-size:16px;min-height:44px}
  .pos-table .num input{text-align:end}
  .pos-table textarea{height:44px;min-height:44px;margin-top:8px;font-size:16px}
  /* Die Karte trägt schon einen Rahmen; ein zweiter darum herum wirkt gestapelt. */
  .card-body.tight.table-wrap{padding:12px 12px 0}
}
@media (max-width:600px){.page-actions .btn span.lbl{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- Sprachumschalter ---------- */
.lang-switch summary{gap:6px}
.lang-switch .dd-menu{min-width:170px}
/* Untermenue im Benutzermenue: eine Zeile, die sich oeffnet. Ohne sie standen zwoelf Sprachen
   fest im Menue und schoben das Abmelden unter den Bildrand. */
.dd-sub>summary{list-style:none;cursor:pointer}
.dd-sub>summary::-webkit-details-marker{display:none}
.dd-sub>summary small{margin-inline-start:auto}
.dd-sub>summary .ico-xs{margin-inline-start:2px;transition:transform var(--t-fast) var(--ease)}
.dd-sub[open]>summary .ico-xs{transform:rotate(180deg)}
.dd-sub[open]>summary{background:var(--gray-50)}
/* Zwoelf Sprachen passen nicht auf jeden Bildschirm: die Liste bekommt eine Hoehe und scrollt selbst,
   damit das Menue darunter erreichbar bleibt. */
.dd-sub-menu{max-height:236px;overflow-y:auto;margin:2px 0 2px 10px;padding-inline-start:6px;border-inline-start:2px solid var(--line)}
@media (prefers-reduced-motion:reduce){.dd-sub>summary .ico-xs{transition:none}}
.dd-menu a.dd-item.is-current,.dd-menu .btn.is-current{background:var(--akzent-50,#eef2ff);font-weight:600}
.bare-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.bare-top .brand-big{flex:1;justify-content:flex-start}
.lang-bare summary{padding:6px 8px}
@media (max-width:900px){.site-cta .lang-switch{align-self:flex-start}}

/* Erweiterungen: Kalkulation (intern) */
.card-intern{border-inline-start:4px solid var(--akzent-600)}
.kalk-box{background:var(--gray-50);border:1px solid var(--line);border-radius:10px;padding:16px;margin-top:8px}
.kalk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kalk-grid>div{display:flex;flex-direction:column;gap:2px}
.kalk-grid .lbl{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:4px}
.kalk-grid b{font-size:1.15rem;font-variant-numeric:tabular-nums}
.kalk-grid .sub{font-size:.8rem;color:var(--muted)}
.kalk-rabatt{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px;font-size:.88rem}
.kalk-rabatt label{font-weight:600}
.neg{color:var(--red)}
[hidden]{display:none!important}

/* Georgisch: keine Großschreibung (Mtavruli) in Überschriften */
:lang(ka) th,:lang(ka) .nav-group,:lang(ka) .site-footer h4,:lang(ka) .doc-preview .pv-items th{text-transform:none}

/* ---------- Zugang ---------- */
.banner-info{background:var(--navy-50);border-color:var(--navy-100);color:#1f3c66}
.checklist{list-style:none;padding:0;margin:0}
.checklist li{display:flex;gap:8px;align-items:center;padding:4px 0;font-size:.95rem}
.checklist .ico{color:var(--akzent-600)}

/* ---------- Design 2: Verläufe, weichere Flächen, ruhigere Seitenleiste ---------- */
:root{--bg:#f3f6fb;--grad-brand:linear-gradient(135deg,#1e1b4b 0%,#312e81 55%,#4f46e5 100%);--grad-accent:linear-gradient(135deg,#6366f1,#818cf8);--line:#e6e8f2}
body.chrome-app{background:var(--bg)}
.brand-name{letter-spacing:-.025em}
/* Die Marke traegt den Akzent als Farbe, nicht als Verlauf im Text; siehe die Logo-Regel weiter unten. */
.brand-mark svg{display:block;filter:drop-shadow(0 2px 4px rgba(11,32,56,.25))}
.brand-side{padding:20px 20px 14px}
.brand-side .brand-name{color:#fff}
.sidebar{background:#0c2239}
/* Der Lichtschein ueber der Seitenleiste ist in beiden Breiten auf display:none gesetzt; die Flaeche bleibt eine Flaeche. */
.sidebar>*{position:relative}
.nav-item{border-inline-start:0;padding:8px 12px;border-radius:10px;color:rgba(255,255,255,.78)}
.nav-item .ico{opacity:.7;transition:opacity .12s,color .12s}
.nav-item:hover .ico,.nav-item.active .ico{opacity:1;color:#c7d2fe}
.nav-item.active{background:rgba(255,255,255,.12);box-shadow:inset 3px 0 0 var(--akzent);color:#fff}
.nav-group{color:rgba(255,255,255,.55)}
.sidebar-foot{border-top-color:rgba(255,255,255,.08)}
.plan-chip{background:rgba(255,255,255,.07);color:#c7d2fe;border:1px solid rgba(99,102,241,.35)}
.topbar{background:rgba(255,255,255,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:rgba(228,233,240,.9)}
.gsearch input{background:#eef2f8;border-color:transparent;transition:background .12s,border-color .12s}
.gsearch input:focus{background:#fff;border-color:var(--akzent)}
.avatar{background:var(--navy-50);color:var(--navy)}
/* Kein Akzentstrich unter jeder Seitenueberschrift: Der Akzent soll Bedeutung tragen, nicht jede
   Ueberschrift schmuecken. Design 4 setzt ihn schon auf display:none. */
/* Kartenkoepfe sind flach; dieser kaum sichtbare Verlauf wurde vom spaeteren background:none ohnehin ueberdeckt. */
.kpi{transition:border-color .15s}
/* Die farbige Oberkante der Kennzahlen ist entfallen (Design 4 setzt .kpi::before auf display:none);
   den Status traegt jetzt das Zeichen im Kopf der Kachel. */
.kpi:hover{border-color:var(--line-strong)}
.btn{transition:background .12s,border-color .12s,box-shadow .12s,transform .06s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy);border-color:transparent;box-shadow:var(--shadow-xs)}
.btn-primary:hover{background:var(--grad-brand);filter:brightness(1.1)}
/* Der Akzentknopf ist flach; siehe Design 4 weiter unten. */
.btn-success{background:var(--green);border-color:transparent}
.dd-menu .btn-primary{background:none;box-shadow:none;color:var(--text)}
/* Der Tabellenkopf stand mit #6b7683 auf #f6f8fb bei 4,34:1 und blieb damit unter den 4,5:1, die
   fuer kleine Schrift gefordert sind – bei 11px in Grossbuchstaben faellt das im Alltag auf.
   #626c78 kommt auf 5,02:1 und sieht praktisch gleich aus. */
.table th{background:#f6f8fb;color:#626c78}
.table tbody tr:hover{background:#f3f7fc}
.tabs{gap:6px}
.tab{border-radius:10px 10px 0 0;padding:12px 16px}
.tab:hover{background:rgba(99,102,241,.06)}
/* Der aktive Reiter wird von der Akzentlinie unten markiert, nicht von einer Flaeche (background:none in Design 4). */
.pill.active{background:var(--akzent-600);border-color:var(--akzent-600)}
.badge{font-weight:600}
.empty .ico-big{color:var(--muted-2)}
.flash{box-shadow:var(--shadow-xs)}
.notice{border-radius:var(--radius-sm)}
.bare{background:var(--bg);position:relative;overflow:hidden}
.bare::before,.bare::after{content:"";position:absolute;border-radius:50%;filter:blur(48px);pointer-events:none}
/* Erste Fassung der Farbkreise der Anmeldeseite; sie wird weiter unten vollstaendig neu gesetzt. */
.bare-box{position:relative;z-index:1;border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--radius);padding:34px 36px}
.bare-box .btn-primary.btn-block{padding:12px;border-radius:var(--radius-sm)}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],input[type=search],input[type=tel],input[type=url],select,textarea{transition:border-color .12s,box-shadow .12s,background .12s}
@media (prefers-reduced-motion:reduce){.kpi,.btn,.feature,.plan{transition:none!important}}
/* ---------- Design 2b: Komfort ---------- */
.brand-side .brand-mark svg{width:30px;height:30px}
.brand-side{font-size:1.15rem}
.brand-big .brand-mark svg{width:40px;height:40px}
@keyframes pxy-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.content{animation:pxy-in .22s ease-out}
.flash{transition:opacity .5s,transform .5s,margin .4s,max-height .4s;max-height:200px;overflow:hidden}
.flash.is-fading{opacity:0;transform:translateY(-4px);margin-bottom:0;max-height:0;padding-top:0;padding-bottom:0;border-width:0}
.sidebar{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px}
.table tr.row-link:hover td{background:#eef6fb}
.card-head .btn-sm{border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){.content{animation:none}.flash{transition:none}}
/* ---------- Support / Admin ---------- */
.msg-list{list-style:none;margin:0;padding:0}
.msg{padding:14px 20px;border-bottom:1px solid var(--line)}
.msg:last-child{border-bottom:0}
.msg-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.88rem;margin-bottom:4px}
.msg-text{white-space:pre-line;font-size:.95rem}
.msg-reply{margin-top:12px;padding:12px;border-radius:10px;background:var(--akzent-50);border:1px solid var(--akzent-100)}
.msg-admin{background:var(--navy-50)}
.card-admin{border-color:#f3dfae;background:var(--panel)}
.card-admin .card-head{background:none}
.banner .btn{margin-inline-start:auto}
/* ---------- Design 3: Schrift, Anmeldebühne ---------- */
:root{--font-display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif}
h1,h2{font-family:var(--font-display)}
.bare{padding:0;display:block}
.bare-stage{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);position:relative;z-index:1}
.bare-aside{position:relative;display:flex;flex-direction:column;justify-content:center;padding:56px 64px;color:#fff;background:linear-gradient(160deg,#0c2239 0%,#163a66 55%,#312e81 100%);overflow:hidden}
.bare-aside::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.6px);background-size:22px 22px;opacity:.55;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 92%);mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 92%)}
/* Kein tuerkiser Lichtkreis auf der Anmeldeflaeche: Tuerkis traegt in dieser Oberflaeche keine
   Bedeutung, und die Flaeche hat mit Verlauf und Punktraster schon zwei Schichten. */
.bare-aside>*{position:relative}
.bare-aside-brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.75rem;letter-spacing:-.03em;margin-bottom:30px;font-family:var(--font-display)}
.bare-aside-brand b{color:#c7d2fe}
.bare-aside-brand svg{filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
.bare-aside h2{font-size:2.1rem;line-height:1.12;letter-spacing:-.03em;margin:0 0 22px;max-width:520px;color:#fff}
.bare-aside ul{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:12px;font-size:.95rem;color:rgba(255,255,255,.88);max-width:520px}
.bare-aside li{display:flex;gap:10px;align-items:flex-start}
.bare-aside li .ico{color:#c7d2fe;margin-top:4px;flex:none;width:16px;height:16px}
.bare-aside-foot{font-size:.8rem;color:rgba(255,255,255,.6)}
.bare-box{align-self:center;justify-self:center;margin:40px 24px;width:calc(100% - 48px)}
@media (max-width:900px){.bare-stage{grid-template-columns:1fr;min-height:100vh;align-items:center}.bare-aside{display:none}.bare-box{margin:24px auto}}
/* Bei 393 Pixeln blieben dem Formular nur 271 Pixel (Aussenrand 24+24, Innenabstand 36+36). */
@media (max-width:480px){.bare-box{padding:24px 16px;width:calc(100% - 24px);margin:12px auto}}
/* Logo 4: flache Marke */
.brand-mark svg,.bare-aside-brand svg{filter:none}
.brand-mark{margin-inline-end:1px}
.brand-name{font-family:var(--font-display);font-weight:700}
.brand-name b{background:none;color:var(--akzent);-webkit-text-fill-color:initial}
.brand-side .brand-name b,.mock-brand i{color:#c7d2fe}

/* ---------- Komfort ---------- */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-inline-end:40px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--muted);cursor:pointer;padding:4px;border-radius:6px;display:inline-flex}
.pw-toggle:hover{color:var(--akzent-600);background:var(--gray-50)}
/* Gemessen 26 x 26 Pixel: Der Knopf liegt im Feld und kann deshalb nicht nach aussen wachsen –
   das Feld ist 44 hoch, also nimmt er die ganze Hoehe und 44 Pixel Breite. */
@media (max-width:900px){.pw-toggle{min-width:44px;min-height:44px;justify-content:center;padding:0}}
.sortlink{color:inherit;text-decoration:none!important;white-space:nowrap}
.sortlink:hover,.sortlink.active{color:var(--navy)}
.c-sel,.table th.c-sel{width:34px;text-align:center}
.c-sel input{width:16px;height:16px;accent-color:var(--akzent)}
.bulk-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px;border-radius:var(--radius-sm);background:var(--navy-50);border:1px solid var(--navy-100);position:sticky;top:64px;z-index:10}
.bulk-bar b{font-size:1.15rem}
.px-help{max-width:420px}
.px-help h3{margin:0 0 10px}
.px-help table{width:100%;border-collapse:collapse;font-size:.95rem}
.px-help td{padding:6px 4px;border-bottom:1px solid var(--line)}
.px-help td:first-child{width:110px;white-space:nowrap}
#autosaveInfo{white-space:nowrap}
.c-tools .btn{padding:4px}
.pos-table .c-tools{width:126px}
/* Das Menü „Weitere Aktionen“ der Position gibt es nur in der Kartenform des Telefons. */
.pos-mehr{display:none}
/* ---------- Admin: SEO und Besucher ---------- */
.serp{padding:12px 16px;border:1px solid var(--line);border-radius:10px;margin-bottom:12px;background:var(--panel)}
.serp-url{font-size:.78rem;color:#1a7f3c;word-break:break-all}.serp-title{color:#1a0dab;font-size:1.05rem;font-weight:500;margin:2px 0}.serp-desc{font-size:.86rem;color:#4d5156}
.checks{list-style:none;margin:0;padding:0}.checks li{display:flex;gap:8px;align-items:flex-start;padding:8px 16px;border-bottom:1px solid var(--line);font-size:.88rem}.checks li:last-child{border-bottom:0}.checks li .ico{margin-top:3px;flex:none}.checks li.ok .ico{color:var(--green)}.checks li.warn .ico{color:var(--amber)}
.hours{display:flex;align-items:flex-end;gap:2px;height:60px}.hours i{flex:1;background:var(--akzent);border-radius:2px 2px 0 0;min-height:2px;opacity:.85}
/* ---------- Dunkelmodus (App und Anmeldeseiten) ---------- */
/* Rot als Schrift: #c93c3c erreicht auf dunklem Grund nur 3,4:1 und bleibt damit unter den 4,5:1,
   die kleine Schrift braucht; im Menue stand es fast unsichtbar auf rotem Grund. Der hellere Ton
   kommt auf 7:1. Die beiden Zaehler tragen Rot als Flaeche und behalten den kraeftigen Ton –
   sonst stuende weisse Schrift auf hellem Rot. */
:root[data-theme=dark]{--red:#f08a8a}
:root[data-theme=dark] .nav-count,:root[data-theme=dark] .notif-count{background:#c93c3c;color:#fff}
:root[data-theme=dark] .btn-danger{border-color:#6b3232}
:root[data-theme=dark]{--st-offen:#9cc2ff;--st-offen-bg:#1b2740;--st-ok:#8fe0b5;--st-ok-bg:#12301f;--st-warn:#f3c777;--st-warn-bg:#3a2c12;--st-err:#f3a7a7;--st-err-bg:#3a1c1c;--st-neutral:#b4bfcd;--st-neutral-bg:#1b2537}
:root[data-theme=dark]{--bg:#0d1422;--panel:#151d2e;--line:#243044;--line-strong:#31405a;--text:#e6ebf3;--muted:#9aa7b8;--muted-2:#8593a6;--navy-50:#1b2740;--navy-100:#26395a;--akzent-50:#1d2440;--akzent-100:#2c3660;--gray-50:#1b2537;--gray-600:#b4bfcd;--green-50:#12301f;--red-50:#3a1c1c;--amber-50:#3a2c12;--shadow-xs:0 1px 2px rgba(0,0,0,.28);--shadow:0 1px 3px rgba(0,0,0,.42);--shadow-lg:0 12px 32px rgba(0,0,0,.55);color-scheme:dark}
:root[data-theme=dark] body.chrome-app{background:var(--bg)}
:root[data-theme=dark] body.chrome-bare .bare,:root[data-theme=dark] .bare{background:var(--bg)}
:root[data-theme=dark] .bare-box{background:rgba(21,29,46,.96);border-color:var(--line)}
:root[data-theme=dark] .topbar{background:rgba(21,29,46,.9);border-bottom-color:var(--line)}
:root[data-theme=dark] .gsearch input{background:#1b2537}
:root[data-theme=dark] .gsearch input:focus{background:#101827}
:root[data-theme=dark] .card-head{background:none}
:root[data-theme=dark] .table th,:root[data-theme=dark] .table tfoot td{background:none;color:var(--muted)}
:root[data-theme=dark] .table tbody tr:hover,:root[data-theme=dark] .table tr.row-link:hover td{background:#1c283b}
:root[data-theme=dark] input[type=text],:root[data-theme=dark] input[type=number],:root[data-theme=dark] input[type=email],:root[data-theme=dark] input[type=password],:root[data-theme=dark] input[type=date],:root[data-theme=dark] input[type=search],:root[data-theme=dark] input[type=tel],:root[data-theme=dark] input[type=url],:root[data-theme=dark] select,:root[data-theme=dark] textarea{background:#101827;color:var(--text);border-color:var(--line-strong)}
:root[data-theme=dark] input[readonly]{background:#141c2b;color:var(--muted)}
:root[data-theme=dark] .input-group .addon{background:#141c2b;border-color:var(--line-strong)}
:root[data-theme=dark] .btn{background:var(--panel);color:var(--text);border-color:var(--line-strong)}
:root[data-theme=dark] .btn:hover{background:#1c283b}
:root[data-theme=dark] .btn-primary,:root[data-theme=dark] .btn-accent,:root[data-theme=dark] .btn-success{color:#fff}
:root[data-theme=dark] .btn-ghost{background:transparent;border-color:transparent;color:var(--gray-600)}
:root[data-theme=dark] .pill{background:var(--panel);border-color:var(--line-strong);color:var(--gray-600)}
/* Der ausgewaehlte Filter sah im Dunkeln aus wie die uebrigen – die allgemeine Dunkelregel
   wiegt genauso viel wie .pill.active und steht spaeter. */
:root[data-theme=dark] .pill.active{background:var(--akzent-600);border-color:var(--akzent-600);color:#fff}
:root[data-theme=dark] .dd-menu,:root[data-theme=dark] .ac-list,:root[data-theme=dark] .px-dialog{background:var(--panel);border-color:var(--line-strong);color:var(--text)}
:root[data-theme=dark] .dd-menu .btn,:root[data-theme=dark] .dd-menu .dd-item{background:none;color:var(--text)}
:root[data-theme=dark] .dd-menu .btn:hover,:root[data-theme=dark] .dd-menu .dd-item:hover{background:#1c283b}
:root[data-theme=dark] .explain{background:var(--panel);border-color:var(--line-strong)}
/* --akzent-600 (#4f46e5) auf dem dunklen Grund #151d2e ergibt 2,68:1; fuer ein
   bedeutungstragendes Zeichen fordert WCAG 1.4.11 mindestens 3:1. Der helle Indigoton,
   den im Dunkelmodus schon die Fliesstextlinks tragen, kommt auf 8,6:1. */
:root[data-theme=dark] .explain .ico{color:#aab4ff}
:root[data-theme=dark] .notice{background:#3a2c12;border-color:#5a4520;color:#f3d9a4}
:root[data-theme=dark] .notice-blue{background:var(--navy-50);border-color:var(--navy-100);color:#c7d8f2}
:root[data-theme=dark] .notice-teal{background:var(--akzent-50);border-color:var(--akzent-100);color:#c7d2fe}
:root[data-theme=dark] .flash-success{background:#12301f;color:#a8e6c4;border-color:#1f4d33}
:root[data-theme=dark] .flash-error{background:#3a1c1c;color:#f3b4b4;border-color:#5a2a2a}
:root[data-theme=dark] .flash-info{background:var(--navy-50);color:#c7d8f2;border-color:var(--navy-100)}
:root[data-theme=dark] .banner-warn{background:#3a2c12;border-color:#5a4520;color:#f3d9a4}
:root[data-theme=dark] .banner-info{background:var(--navy-50);border-color:var(--navy-100);color:#c7d8f2}
:root[data-theme=dark] .banner-demo{background:var(--akzent-50);border-color:var(--akzent-100);color:#c7d2fe}
:root[data-theme=dark] .badge.b-teal{color:#c7d2fe}
:root[data-theme=dark] .kbd{background:#1b2537;border-color:var(--line-strong);color:var(--text)}
/* Dunkle Fassung des aktiven Reiters: Design 4 setzt auch sie auf background:none. */
:root[data-theme=dark] .kpi,:root[data-theme=dark] .card,:root[data-theme=dark] .card-admin{background:var(--panel)}
:root[data-theme=dark] .kpi.primary .value{color:#9cc2ff}
/* Der Paketname im Kopf der Kundenseite und die Paketkarten: Beide standen im Dunkelmodus
   unsichtbar da – der Name in Marineblau auf dunklem Grund, die Karten weiss mit hellem Text. */
:root[data-theme=dark] .zugang-paket{color:#9cc2ff}
:root[data-theme=dark] .plan{background:var(--panel)}
:root[data-theme=dark] .plan-tag{color:#0d1422}
:root[data-theme=dark] .card-admin{background:var(--panel);border-color:#5a4520}
:root[data-theme=dark] .sticky-bar{background:rgba(21,29,46,.94);border-top-color:var(--line)}
:root[data-theme=dark] .pos-table th{background:none}
:root[data-theme=dark] .msg-reply{background:var(--akzent-50);border-color:var(--akzent-100)}
:root[data-theme=dark] .msg-admin{background:var(--navy-50)}
:root[data-theme=dark] .serp{background:#fff;color:#172033}
:root[data-theme=dark] .bulk-bar{background:var(--navy-50);border-color:var(--navy-100)}
:root[data-theme=dark] .avatar{color:#9cc2ff}
:root[data-theme=dark] .empty h3,:root[data-theme=dark] a.strong{color:var(--text)}
:root[data-theme=dark] a{color:#8fc4ff}
:root[data-theme=dark] .nav-item{color:rgba(255,255,255,.78)}
:root[data-theme=dark] .chart text{fill:var(--muted)}
:root[data-theme=dark] .hours i{opacity:.9}
:root[data-theme=dark] .mock-kpi,:root[data-theme=dark] .mock-row{background:#fff}
/* Rechnungs-Check: Pflichtangabe fehlt */
.checks li.err .ico{color:var(--red)}
.checks li .sub{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}

/* Erste Schritte: erledigte Punkte zurückhaltend darstellen */
.card-start .tasks li.done{color:var(--muted)}
.card-start .tasks li.done .ico{color:var(--green)}

/* ---------- Illustrationen: ein Stil für alle leeren Listen und Erfolgsmomente ---------- */
:root{--illu-paper:#fff;--illu-line:var(--line-strong);--illu-soft:var(--navy-50);--illu-accent:var(--akzent);--illu-ground:rgba(15,42,74,.06)}
:root[data-theme=dark]{--illu-paper:#1b2537;--illu-line:#3a4a63;--illu-soft:#26395a;--illu-accent:var(--akzent);--illu-ground:rgba(0,0,0,.35)}
.illu{width:132px;height:106px;display:block;margin:0 auto 4px}
.illu .p{fill:var(--illu-paper);stroke:var(--illu-line);stroke-width:2.5;stroke-linejoin:round}
.illu .s{fill:var(--illu-soft)}
.illu .a{fill:var(--illu-accent)}
.illu .ao{fill:none;stroke:var(--illu-accent);stroke-width:2.5;stroke-linecap:round}
.illu .l{fill:none;stroke:var(--illu-line);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.illu .r{fill:none;stroke:var(--illu-line);stroke-width:2.5;stroke-linecap:round;opacity:.7}
.illu .c{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.illu .g{fill:var(--illu-ground)}
.empty .illu{margin-bottom:2px}
.empty-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}

/* Kennzahl mit Verlaufslinie und Vergleich zum Vormonat */
.kpi-spark{padding-bottom:18px;overflow:hidden}
/* Die Linie liegt auf der Kartenunterkante statt im Fluss: Sonst ist die Umsatzkachel 30
   Pixel hoeher als ihre Nachbarn, und die Zeile wird insgesamt hoeher. */
.spark{position:absolute;inset-inline:0;bottom:0;width:100%;height:30px;margin:0;display:block}
.spark .sf{fill:var(--akzent);opacity:.10}
.spark .sl{fill:none;stroke:var(--akzent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.trend{display:inline-flex;align-items:center;gap:2px;font-weight:600}
.trend.up{color:var(--green)}.trend.down{color:var(--red)}
.tasks li.urgent .ico{color:var(--red)}

/* ---------- Seitenleiste: eingeklappter Zustand ---------- */
.nav-collapse{display:flex;align-items:center;gap:10px;margin:4px 12px 8px;padding:8px 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:rgba(255,255,255,.6);font:inherit;font-size:.88rem;cursor:pointer;transition:background .15s,color .15s;position:relative}
.nav-collapse:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-collapse .ico{width:18px;height:18px}
/* Nur auf breiten Bildschirmen: Unter 900 Pixeln ist die Leiste Schublade oder Blatt, und ein
   gemerktes „mini“ aus dem Rechner liess dort Beschriftungen, Gruppen und Fusszeile verschwinden. */
@media (min-width:901px){
body.nav-mini{--sidebar:74px}
body.nav-mini .sidebar .brand span,body.nav-mini .nav-item>span,body.nav-mini .nav-group,body.nav-mini .nav-collapse span,body.nav-mini .sidebar-foot{display:none}
body.nav-mini .nav-item{justify-content:center;padding:10px;border-inline-start-width:0;position:relative}
body.nav-mini .nav-item.active{box-shadow:inset 3px 0 0 var(--akzent)}
body.nav-mini .nav-collapse{justify-content:center}
body.nav-mini .nav-collapse .ico{transform:rotate(180deg)}
body.nav-mini .brand-side{justify-content:center;padding-inline-start:0;padding-inline-end:0}
body.nav-mini .nav-count{position:absolute;top:3px;right:6px;margin:0;padding:0 5px;font-size:.72rem}
body.nav-mini .nav-item::after,body.nav-mini .nav-collapse::after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%) scale(.96);background:var(--navy-800);color:#fff;padding:5px 9px;border-radius:6px;font-size:.8rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;z-index:60;box-shadow:var(--shadow-lg)}
body.nav-mini .nav-item:focus-visible::after{opacity:1;transform:translateY(-50%) scale(1)}
/* Nur mit Maus: Auf dem Tablet machte das Einblenden beim ersten Tipp daraus ein „Zeigen“, erst der
   zweite Tipp öffnete den Punkt (Safari wertet sichtbar werdende Inhalte als Hover-Menü). */
@media (hover:hover){body.nav-mini .nav-item:hover::after,body.nav-mini .nav-collapse:hover::after{opacity:1;transform:translateY(-50%) scale(1)}}
}
.app{transition:grid-template-columns .18s ease}
@media (prefers-reduced-motion:reduce){.app{transition:none}body.nav-mini .nav-item::after{transition:none}}

/* ---------- Menü „Neu“ ---------- */
.btn-neu{font-weight:600}
.dd-item .kbd-hint{margin-inline-start:auto;font-size:.72rem;color:var(--muted-2);border:1px solid var(--line);border-radius:6px;padding:0 5px}

/* ---------- Befehlssuche ---------- */
.cmdk{position:fixed;inset:0;background:rgba(11,32,56,.45);z-index:120;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;animation:pxy-in .14s ease}
.cmdk-box{width:min(560px,100%);background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden}
.cmdk-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.cmdk-head .ico{color:var(--muted)}
.cmdk-head input{flex:1;border:0;background:none;font:inherit;font-size:.95rem;color:var(--text);outline:none;padding:0}
.cmdk-list{list-style:none;margin:0;padding:6px;max-height:46vh;overflow:auto}
.cmdk-list li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);cursor:pointer;font-size:.95rem}
.cmdk-list li em{margin-inline-start:auto;font-style:normal;font-size:.72rem;color:var(--muted-2)}
.cmdk-list li.on{background:var(--navy-50)}
:root[data-theme=dark] .cmdk-list li.on{background:var(--navy-100)}
.cmdk-list li.leer{color:var(--muted);cursor:default}
.cmdk-foot{display:flex;gap:16px;align-items:center;padding:8px 16px;border-top:1px solid var(--line);font-size:.72rem;color:var(--muted);flex-wrap:wrap}
body.cmdk-open{overflow:hidden}

/* Tabellen: etwas mehr Luft, ruhigerer Wechsel beim Überfahren */
.table tbody tr{transition:background .12s}
.table .actions{display:flex;gap:2px;justify-content:flex-end;align-items:center}
.row-dd{position:relative}
.row-dd .dd-menu{min-width:210px}
.dd-menu .dd-item.danger,.dd-item.danger{color:var(--red)}
:root[data-theme=dark] .dd-menu .dd-item.danger{color:var(--red)}
.badge .ico-xs{opacity:.85;margin-inline-end:1px}
@media (prefers-reduced-motion:reduce){.table tbody tr{transition:none}}

/* ---------- Meldungen oben rechts ---------- */
.toasts{position:fixed;top:64px;right:16px;z-index:110;display:flex;flex-direction:column;gap:8px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.toasts .toast{pointer-events:auto;margin:0;box-shadow:var(--shadow-lg);background:var(--panel);animation:toast-in .22s cubic-bezier(.2,.8,.3,1)}
.toasts .flash-success{background:var(--green-50)}
.toasts .flash-error{background:var(--red-50)}
.toasts .flash-info{background:var(--navy-50)}
@keyframes toast-in{from{opacity:0;transform:translateX(14px) scale(.98)}to{opacity:1;transform:none}}
.toast.is-fading{opacity:0;transform:translateX(14px);max-height:0;margin:0;padding-top:0;padding-bottom:0;border-width:0}
/* Häkchen zeichnet sich kurz */
.check-anim .ring{opacity:.35}
.check-anim .tick{stroke-dasharray:16;stroke-dashoffset:16;animation:tick-draw .34s .06s ease forwards}
@keyframes tick-draw{to{stroke-dashoffset:0}}
@media (max-width:720px){.toasts{top:auto;bottom:12px;right:12px;left:12px;width:auto}}
/* Auf dem Telefon liegt unten die Tab-Leiste; die Meldungen stehen darueber. Hinter der 720px-Regel,
   weil beide gleich schwer wiegen und die spaetere gewinnt. */
@media (max-width:700px){
  /* 76 statt 66 Pixel: Der runde Knopf „Neu“ ragt 14 Pixel über die Leiste und lag sonst unter der Meldung. */
  .toasts{bottom:calc(76px + env(safe-area-inset-bottom))}
  .toasts .toast{padding:10px 12px;gap:8px}
  /* Im Belegeditor gibt es keine Tab-Leiste, dort liegt unten die Speichern-Leiste. */
  main:has(.pos-table) .toasts{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.toasts .toast{animation:none}.check-anim .tick{animation:none;stroke-dashoffset:0}}

/* ---------- Dateifeld zum Ablegen ---------- */
.drop{position:relative;border:1.5px dashed var(--line-strong);border-radius:10px;background:var(--gray-50);padding:16px;text-align:center;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--akzent);background:var(--akzent-50)}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop-hint{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:.88rem;pointer-events:none}
.drop-hint .ico{color:var(--muted-2)}
.drop-hint b{color:var(--text);font-weight:600}
.drop-file{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.88rem;pointer-events:none}
.drop-file .ico{color:var(--green)}
.drop-file b{font-weight:600}
.drop-file em{font-style:normal;color:var(--muted);margin-inline-start:6px}
.drop.has-file{border-style:solid;border-color:var(--green);background:var(--green-50)}
:root[data-theme=dark] .drop{background:#1b2537}
:root[data-theme=dark] .drop:hover,:root[data-theme=dark] .drop.over{background:var(--akzent-50)}
:root[data-theme=dark] .drop.has-file{background:var(--green-50)}

/* ---------- Schaltfläche arbeitet gerade ---------- */
.btn.is-busy{position:relative;pointer-events:none;opacity:.85}
.btn.is-busy::before{content:"";width:14px;height:14px;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;display:inline-block;margin-inline-end:2px;animation:spin .7s linear infinite}
.btn.is-busy .ico{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.is-busy::before{animation-duration:2s}}

/* ---------- Feine Bewegungen ---------- */
.card{transition:border-color .16s ease}
.dd-menu{animation:pxy-in .13s ease}
input[type=checkbox]{transition:transform .12s ease}
input[type=checkbox]:active{transform:scale(.9)}
@media (prefers-reduced-motion:reduce){.card,.kpi,input[type=checkbox]{transition:none}.dd-menu{animation:none}}

/* ---------- Live-Vorschau im Belegeditor ---------- */
.preview-pane{display:none}
body.with-preview .preview-pane{display:flex;flex-direction:column;position:fixed;top:var(--topbar-h);right:0;bottom:0;width:min(46vw,620px);background:var(--gray-50);border-inline-start:1px solid var(--line);z-index:40}
body.with-preview .content{padding-inline-end:calc(min(46vw,620px) + 20px)}
.preview-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel);font-size:.88rem}
.preview-head .muted{margin-inline-start:auto;font-size:.8rem}
.preview-pane iframe{flex:1;width:100%;border:0;background:#fff}
.preview-note{margin:0;padding:8px 16px;border-top:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:.8rem}
#previewToggle[aria-pressed=true]{background:var(--navy-50);border-color:var(--navy-100);color:var(--navy)}
:root[data-theme=dark] #previewToggle[aria-pressed=true]{background:var(--navy-100);color:#fff}
@media (max-width:1199px){
  body.with-preview .preview-pane{left:0;width:auto;top:var(--topbar-h)}
  body.with-preview .content{padding-inline-end:20px}
}

/* Einklappbare Karten */
details.collapse>summary.card-head{cursor:pointer;list-style:none;user-select:none}
details.collapse>summary.card-head::-webkit-details-marker{display:none}
details.collapse>summary.card-head::after{content:"";width:8px;height:8px;border-inline-end:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);transform:rotate(45deg);margin-inline-start:auto;transition:transform .15s}
details.collapse[open]>summary.card-head::after{transform:rotate(-135deg)}
details.collapse>summary.card-head:hover::after{border-color:var(--text)}
@media (prefers-reduced-motion:reduce){details.collapse>summary.card-head::after{transition:none}}

/* SEO-Bereich: Reiter, Zeichenzähler, Social-Vorschau */
.subtabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:-4px 0 16px}
.subtab{border:0;background:none;font:inherit;font-size:.88rem;color:var(--muted);padding:8px 12px;border-bottom:2px solid transparent;cursor:pointer;border-radius:10px 10px 0 0;transition:color .15s,border-color .15s,background .15s}
.subtab:hover{color:var(--text);background:var(--gray-50)}
.subtab.active{color:var(--text);border-bottom-color:var(--akzent);font-weight:600}
.zeichen{font-weight:500;font-size:.72rem;padding:1px 8px;border-radius:99px;margin-inline-start:6px}
.zeichen.gut{background:var(--green-50);color:#0f6b46}
.zeichen.kurz{background:var(--gray-50);color:var(--muted)}
.zeichen.lang{background:var(--amber-50);color:#9a6400}
/* Ohne diese beiden Zeilen stand die dunkle Schrift des Zaehlers im Dunkelmodus auf dunklem Grund. */
:root[data-theme=dark] .zeichen.gut{color:#8fe0b5}
:root[data-theme=dark] .zeichen.lang{color:#f3c777}
.social-preview{display:flex;gap:0;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;max-width:420px}
.sp-img{aspect-ratio:1200/630;background:var(--gray-50);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.88rem}
.sp-img img{width:100%;height:100%;object-fit:cover}
.sp-text{padding:10px 12px;background:var(--panel)}
.sp-text small{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.sp-text b{display:block;font-size:.95rem;margin:2px 0}
.sp-text span{font-size:.8rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.subtab{transition:none}}

.layout-thumb-elegant i:nth-child(1){top:12px;left:10%;width:44%;background:var(--akzent)}
.layout-thumb-elegant i:nth-child(2){top:38px;height:2px;width:26%;background:var(--akzent)}
.layout-thumb-elegant i:nth-child(3){top:52px;height:16px;background:#f6f8fa}
/* Einrichtung: Schrittanzeige */
.steps-setup{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 10px;padding:0}
.steps-setup li{display:flex;flex-direction:column;gap:1px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);position:relative}
.steps-setup .nr{position:absolute;top:10px;right:12px;width:20px;height:20px;border-radius:50%;background:var(--gray-50);color:var(--muted);display:grid;place-items:center;font-size:.72rem;font-weight:700}
.steps-setup b{font-size:.95rem}
.steps-setup em{font-style:normal;font-size:.8rem;color:var(--muted)}
.steps-setup li.done{border-color:var(--green);background:var(--green-50)}
.steps-setup li.done .nr{background:var(--green);color:#fff}
@media (max-width:640px){.steps-setup{grid-template-columns:1fr}}

/* Anmeldeseiten: ruhige Hintergrundformen, nur angedeutet */
.bare{position:relative;overflow:hidden}
.bare::before,.bare::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0}
/* Keine Farbkreise hinter dem Anmeldeformular: Die Identitaet traegt die Markenflaeche links,
   die Formularseite bleibt eine ruhige Flaeche. Die leeren Pseudoelemente oben schaden nicht. */
.bare-stage,.bare-box{position:relative;z-index:1}
/* feines Punktraster über der ganzen Fläche */
/* Nur die Markenflaeche links traegt ein Punktraster (.bare-aside::before); ein zweites ueber der
   ganzen Buehne war dieselbe Aussage zweimal. */
/* Die dunklen Fassungen der entfallenen Kreise und des Buehnenrasters sind damit ebenfalls weg. */

/* ---------- Einheitliche Bewegungswerte ---------- */
:root{--t-fast:140ms;--t-normal:200ms;--t-slow:300ms;--ease:cubic-bezier(.2,.8,.3,1)}

/* ---------- Verlauf eines Belegs ---------- */
.tl{list-style:none;margin:0;padding:14px 16px 16px;position:relative}
.tl::before{content:"";position:absolute;left:27px;top:22px;bottom:22px;width:2px;background:var(--line)}
.tl li{display:flex;align-items:flex-start;gap:12px;padding:7px 0;position:relative}
.tl-dot{width:24px;height:24px;border-radius:50%;background:var(--gray-50);color:var(--muted);display:grid;place-items:center;flex:none;z-index:1;border:2px solid var(--panel)}
.tl-ok .tl-dot{background:var(--green-50);color:var(--green)}
.tl-warn .tl-dot{background:var(--amber-50);color:var(--amber)}
.tl-datum{font-size:.8rem;color:var(--muted);min-width:76px;font-variant-numeric:tabular-nums;padding-top:3px}
.tl-text{font-size:.88rem;padding-top:2px}
/* Statuswechsel weich andeuten */
.badge{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
@media (prefers-reduced-motion:reduce){.badge{transition:none}}

/* Positionen umsortieren */
.pos-table .c-nr{position:relative}
.pos-table .c-nr::before{content:attr(data-nr);position:absolute;left:0;right:0;top:16px;color:var(--muted);font-weight:600;font-size:.88rem;pointer-events:none}
/* In der Kartenform des Telefons gehoert die Nummer in den Fluss: absolut gesetzt laege sie
   sonst ueber dem Griff zum Verschieben. */
@media (max-width:760px){
  .pos-table .c-nr{position:static}
  .pos-table .c-nr::before{position:static;inset:auto;font-size:.72rem;letter-spacing:.05em}
}
.pos-griff{opacity:0;background:none;border:0;color:var(--muted-2);cursor:grab;padding:2px 4px;margin-top:32px;border-radius:6px;transition:opacity var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.pos-griff:focus-visible{opacity:1}
/* Mit Maus erscheint der Griff beim Zeigen. Auf Touch-Geräten steht er immer da: Ein Griff, der erst
   beim Antippen der Zeile sichtbar wird, kostete auf iPhone und iPad den ersten Tipp – ins Textfeld
   der Position musste man zweimal tippen. */
@media (hover:hover){.pos-row:hover .pos-griff{opacity:1}}
@media (hover:none){.pos-griff{opacity:.55;touch-action:none}}
.pos-griff:hover{color:var(--text);background:var(--gray-50)}
.pos-griff:active{cursor:grabbing}
.pos-row.zieht{background:var(--navy-50);box-shadow:var(--shadow-lg)}
:root[data-theme=dark] .pos-row.zieht{background:var(--navy-100)}
@media (prefers-reduced-motion:reduce){.pos-griff{transition:none}}

/* Blättern in Listen */
.seiten{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px}
.seiten .is-off{opacity:.45;pointer-events:none}

/* SEO: Hinweise je Seite */
.hinweis{display:flex;align-items:flex-start;gap:4px;font-size:.8rem;margin-bottom:4px;line-height:1.4}
.hinweis.err{color:var(--red)}
.hinweis.warn{color:var(--amber)}
.hinweis .ico{margin-top:2px;flex:none}

/* Belegvorschau bleibt immer heller Druckbogen: Sie zeigt das Blatt, das der Kunde bekommt.
   Ohne diese Insel erbt sie im Dunkelmodus die helle Schriftfarbe und steht dann fast
   unlesbar auf weissem Grund. */
:root[data-theme=dark] .doc-preview{
  --line:#e4e9f0;--line-strong:#c9d2de;--text:#172033;--muted:#55616f;--muted-2:#66727f;
  --navy:#0f2a4a;--navy-700:#163a66;--navy-50:#e9eef5;--navy-100:#d3dde9;--gray-50:#eef1f5;
  color:#172033;
}
:root[data-theme=dark] .doc-preview a{color:#163a66}

/* Die öffentliche Website bleibt immer hell. Der Dunkelmodus ist eine Einstellung des
   Arbeitsbereichs; auf der Website hatte er nur die Schriftfarbe umgestellt, nicht die
   weissen Flächen – helle Schrift auf weissem Grund war das Ergebnis. */
:root[data-theme=dark] body.chrome-site{
  --bg:#f3f6fb;--panel:#fff;--line:#e4e9f0;--line-strong:#c9d2de;--text:#172033;--muted:#55616f;--muted-2:#66727f;
  --navy-50:#e9eef5;--navy-100:#d3dde9;--akzent-50:#eef2ff;--akzent-100:#e0e7ff;--gray-50:#eef1f5;--gray-600:#5c6572;
  --green-50:#e5f6ee;--red-50:#fdeaea;--amber-50:#fff4dc;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);--shadow:0 1px 3px rgba(16,24,40,.08);--shadow-lg:0 12px 32px rgba(16,24,40,.14);
  --illu-paper:#fff;--illu-line:#c9d2de;--illu-soft:#e9eef5;--illu-ground:rgba(15,42,74,.08);
  color:var(--text);color-scheme:light;
}
/* Auf der hellen Website müssen auch die Schaltflächen ihre hellen Werte behalten. Die dunkle
   Regel für .btn setzt sonst weissen Grund unter weisse Schrift – die Schaltfläche verschwindet. */
:root[data-theme=dark] body.chrome-site .btn{background:var(--panel);color:var(--text);border-color:var(--line-strong)}
:root[data-theme=dark] body.chrome-site .btn:hover{background:var(--gray-50)}
:root[data-theme=dark] body.chrome-site .btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
:root[data-theme=dark] body.chrome-site .btn-accent{background:var(--akzent-600);border-color:var(--akzent-600);color:#fff}
:root[data-theme=dark] body.chrome-site .btn-success{background:var(--green);border-color:var(--green);color:#fff}
:root[data-theme=dark] body.chrome-site .btn-ghost{background:transparent;border-color:transparent;color:var(--gray-600)}
:root[data-theme=dark] body.chrome-site .btn-ghost:hover{background:var(--gray-50);color:var(--text)}
/* Auch im Dunkelmodus behalten Haupt-Schaltflächen ihre Markenfarbe. Die allgemeine dunkle
   .btn-Regel hatte sie eingeebnet, sodass „Neue Rechnung“ und „Neues Angebot“ gleich aussahen. */
:root[data-theme=dark] .btn-primary{border-color:transparent;color:#fff}
:root[data-theme=dark] .btn-accent{background:var(--akzent-600);border-color:transparent;color:#fff}
:root[data-theme=dark] .btn-success{background:var(--green);border-color:transparent;color:#fff}
:root[data-theme=dark] .dd-menu .btn-primary{background:none;color:var(--text)}
/* Kurzes Aufblinken, damit man das angesprungene Feld sofort findet */
.fix-blink{animation:fixBlink 1.4s ease-out}
@keyframes fixBlink{0%,100%{box-shadow:none}15%,55%{box-shadow:0 0 0 3px var(--akzent)}}
.checks li .btn{margin-inline-start:auto;flex:none}

/* ---------- Detailbereich neben der Liste ---------- */
/* Klick auf eine Zeile zeigt den Beleg rechts, statt die Seite zu wechseln. Auf schmalen Geraeten
   nimmt der Bereich die volle Breite ein – dort waere ein 380px-Streifen sinnlos. */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,100vw);background:var(--panel);border-inline-start:1px solid var(--line);box-shadow:var(--shadow-lg);z-index:60;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .18s ease}
.drawer[hidden]{display:none}
.drawer.open{transform:translateX(0)}
.drawer-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.28);z-index:59;opacity:0;transition:opacity .18s ease}
.drawer-backdrop[hidden]{display:none}
.drawer-backdrop.open{opacity:1}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:1.15rem;margin:0}
.drawer-head .sub{color:var(--muted);font-size:.88rem;margin-top:4px}
.drawer-body{flex:1;overflow-y:auto;padding:14px 16px}
.drawer-body h3{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:20px 0 8px;font-weight:600}
.drawer-body h3:first-child{margin-top:0}
.drawer-zahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.drawer-zahlen>div{background:var(--gray-50);border-radius:10px;padding:8px 12px}
.drawer-zahlen .label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:2px}
.drawer-zahlen b{font-size:1.15rem}
.drawer-zahlen b.warn{color:var(--red)}
.drawer-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.drawer-timeline li{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:.88rem;border-inline-start:2px solid var(--line);padding-inline-start:12px;margin-inline-start:5px}
.drawer-timeline li.ok{border-inline-start-color:var(--akzent)}
.drawer-timeline li.warn{border-inline-start-color:var(--amber)}
.drawer-timeline li span{flex:1;min-width:0}
.drawer-timeline time{color:var(--muted);font-size:.8rem;white-space:nowrap}
.drawer-items{list-style:none;margin:0;padding:0}
.drawer-items li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:.88rem;border-bottom:1px solid var(--line)}
.drawer-items li:last-child{border-bottom:0}
.drawer-actions{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px;border-top:1px solid var(--line);background:var(--gray-50)}
tr.row-link.is-open{background:var(--akzent-50)}
@media (prefers-reduced-motion:reduce){.drawer,.drawer-backdrop{transition:none}}

/* ---------- Leserichtung von rechts nach links (Arabisch) ----------
   Abstände und Rahmen drehen sich von selbst, weil sie „Anfang“ und „Ende“ heißen. Alles, was
   fest an einer Bildschirmkante sitzt, steht hier: Es kennt nur links und rechts. Die Vorschau
   der Drucklayouts bleibt bewusst unverändert – sie zeigt ein Blatt Papier, und das Blatt sieht
   in jeder Sprache gleich aus. */
[dir="rtl"] .gsearch .ico{left:auto;right:10px}
[dir="rtl"] .tabs[data-ovf]{-webkit-mask-image:none;mask-image:none}
[dir="rtl"] .toolbar .search .ico{left:auto;right:11px}
[dir="rtl"] .notif-count{right:auto;left:2px}
[dir="rtl"] .dd-menu{right:auto;left:0}
[dir="rtl"] .company-switch .dd-menu{left:auto;right:0}
[dir="rtl"] .plan-tag{right:auto;left:16px}
[dir="rtl"] .pw-toggle{right:auto;left:6px}
[dir="rtl"] .steps-setup .nr{right:auto;left:12px}
[dir="rtl"] .tl::before{left:auto;right:27px}
[dir="rtl"] .toasts{right:auto;left:16px}
[dir="rtl"] body.nav-mini .nav-count{right:auto;left:6px}
[dir="rtl"] body.nav-mini .nav-item::after,[dir="rtl"] body.nav-mini .nav-collapse::after{left:auto;right:calc(100% + 8px)}
[dir="rtl"] .drawer{right:auto;left:0;transform:translateX(-100%)}
[dir="rtl"] .drawer.open{transform:translateX(0)}
[dir="rtl"] body.with-preview .preview-pane{right:auto;left:0}
[dir="rtl"] .skip{left:auto;right:-999px}
[dir="rtl"] .skip:focus{right:8px}
@media (max-width:1024px){
  [dir="rtl"] .sidebar{left:auto;right:0;transform:translateX(100%)}
  [dir="rtl"] body.nav-open .sidebar{transform:translateX(0)}
}
@media (max-width:720px){
  [dir="rtl"] .toasts{left:12px;right:12px}
}

/* Auswahl zwischen mehreren gleichwertigen Wegen: je Zeile eine Beschreibung und eine Schaltflaeche.
   Bewusst keine Radiokreise – die Wahl wird sofort wirksam und nicht erst beim Absenden. */
.wahl-liste{display:grid;gap:10px}
.wahl{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:#fff}
.wahl.ist-gewaehlt{border-color:var(--akzent);background:var(--akzent-50)}
.wahl b{display:block;font-size:.95rem}
.wahl .ico{color:var(--akzent-600);vertical-align:-2px}
.wahl-aktion{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex-shrink:0}
.wahl-marke{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:700;color:var(--akzent-600);white-space:nowrap}
:root[data-theme=dark] .wahl-marke{color:#c7d2fe}
.mandatstext{border:1px dashed var(--line-strong);border-radius:10px;padding:12px 16px;font-size:.88rem;color:var(--gray-600);background:var(--gray-50);margin:16px 0 12px;max-height:220px;overflow:auto}
:root[data-theme=dark] .wahl{background:var(--panel)}
:root[data-theme=dark] .wahl.ist-gewaehlt{background:var(--akzent-50)}
:root[data-theme=dark] .mandatstext{background:var(--panel);color:var(--muted)}
@media (max-width:560px){.wahl{flex-direction:column}.wahl-aktion{align-items:stretch;width:100%}}

/* ---------- Das Menü auf dem Telefon: ein Blatt von unten ----------
   Bisher kam die Schublade des Rechners von links: einundzwanzig Zeilen untereinander, die
   obersten am oberen Bildrand – dort, wo ein Daumen nicht hinkommt – dazu Marke und
   „Einklappen“, die auf dem Telefon nichts zu suchen haben. Unter 700 px ist das Menü ein Blatt,
   das von unten hereinkommt: Griff, Titel und Schließen oben, zwei Spalten Kacheln nach Bereichen,
   unten Paket, Profil und Abmelden. Die Kacheln liegen im unteren Drittel des Bildschirms, wo der
   Daumen ohnehin ist. Auf dem Rechner ändert sich nichts. */
.sheet-kopf,.sheet-konto{display:none}
@media (max-width:700px){
  .sidebar{
    position:fixed;inset-inline:0;top:auto;bottom:0;width:auto;height:auto;
    max-height:min(92vh,780px);max-height:min(92svh,780px);border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;
    transform:translateY(103%);visibility:hidden;
    transition:transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s .24s;
    box-shadow:var(--shadow-lg);padding-bottom:env(safe-area-inset-bottom);
  }
  .app.nav-open .sidebar{transform:none;visibility:visible;transition:transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s}
  /* Arabisch: die Schubladenregel fuer rtl (rechts, translateX) gilt sonst auch fuer das Blatt. */
  [dir="rtl"] .sidebar{left:0;right:0;transform:translateY(103%)}
  [dir="rtl"] .app.nav-open .sidebar{transform:none}
  .sidebar::before{display:none}
  .brand-side,.nav-collapse{display:none}
  .sheet-kopf{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;cursor:pointer;
    padding:8px 12px 8px 16px;font-size:.95rem;
  }
  .sheet-kopf b{grid-column:2;color:#fff;font-weight:600}
  .sheet-griff{
    grid-column:1/4;grid-row:1;justify-self:center;align-self:start;
    width:40px;height:4px;border-radius:99px;background:rgba(255,255,255,.35);margin-bottom:2px;
  }
  .sheet-kopf b{grid-row:2}
  .sheet-zu{
    grid-column:3;grid-row:2;justify-self:end;display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.10);color:#fff;cursor:pointer;
  }
  .sheet-zu .ico{width:18px;height:18px}
  .nav{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;align-content:start;
    padding:2px 12px 14px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  /* Solange unten noch Kacheln folgen, blendet ein Verlauf sie an (data-ovf aus app.js). */
  .nav[data-ovf=end],.nav[data-ovf=both]{-webkit-mask-image:linear-gradient(#000 calc(100% - 36px),transparent);mask-image:linear-gradient(#000 calc(100% - 36px),transparent)}
  /* Die Uebersicht steht allein vor dem ersten Bereich – halb breit saehe sie vergessen aus. */
  .nav>.nav-item:first-child{grid-column:1/3}
  /* Hinter dem offenen Blatt soll die Seite stehen bleiben. */
  body:has(.app.nav-open){overflow:hidden}
  .nav-group{grid-column:1/3;padding:12px 4px 2px;font-size:.72rem}
  .nav-item{
    min-height:46px;padding:7px 10px;border-radius:var(--radius-sm);gap:9px;
    background:rgba(255,255,255,.06);color:rgba(255,255,255,.88);font-size:.88rem;line-height:1.2;
  }
  .nav-item .ico{width:20px;height:20px;flex:0 0 auto;opacity:.85}
  .nav-item.active{box-shadow:inset 0 0 0 1.5px var(--akzent);background:rgba(99,102,241,.18)}
  .nav-count{margin-inline-start:auto;flex:0 0 auto}
  .sidebar-foot{
    display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
    padding:10px 14px 12px;
  }
  .sheet-konto{display:flex;gap:6px;margin-inline-start:auto}
  .sheet-konto .inline{display:contents}
  .sheet-konto-i{
    display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 12px;border:0;
    border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:.8rem;
    font-weight:500;text-decoration:none!important;cursor:pointer;
  }
  .sheet-konto-i .ico{width:16px;height:16px}
}
@media (prefers-reduced-motion:reduce){.sidebar{transition:none}}

/* ---------- Die Kopfleiste auf dem Telefon ----------
   Auf dem Rechner ist die Kopfleiste ein Werkzeugstreifen: Suche, Neu, Firma, Glocke, Konto
   nebeneinander. Auf 375 Pixeln stand davon ein linksbuendiger Haufen ungleich breiter Knoepfe
   mit leerem Rand rechts, darunter die Suche in einer zweiten Zeile – schief. Jetzt ist sie eine
   App-Leiste: Menue links, daneben der Firmenname, rechts Suche, Glocke und Konto, alles auf
   einer Hoehe von 56 Pixeln. „Neu“ steckt schon in der Leiste unten, die Suche hat ihre eigene
   Seite. Seit Runde 3 (F9) hell wie am Rechner: eine Kopfzeile, ein Stil – der dunkle Streifen machte drei Stile auf einer Seite. */
.nur-schmal{display:none}
@media (max-width:700px){
  .nur-schmal{display:inline-flex}
  .topbar,:root[data-theme=dark] .topbar{
    flex-wrap:nowrap;gap:2px;padding:env(safe-area-inset-top) 6px 0 4px;min-height:calc(56px + env(safe-area-inset-top));
    background:var(--panel);border-bottom:1px solid var(--line);box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .topbar .gsearch,.topbar .neu-dd{display:none}
  .topbar .burger{order:1}
  .topbar .company-switch{order:2;flex:1 1 auto;min-width:0;display:flex;justify-content:flex-start}
  .topbar .such-link{order:3}
  .topbar .notif{order:4}
  .topbar .usermenu{order:5}
  .topbar .btn-ghost,:root[data-theme=dark] .topbar .btn-ghost{
    color:var(--text);background:transparent;border-color:transparent;min-width:44px;min-height:44px;
    padding:8px;justify-content:center;border-radius:var(--radius-sm);
  }
  .topbar .btn-ghost:hover,.topbar .btn-ghost:focus-visible,.topbar details[open]>summary.btn-ghost,
  :root[data-theme=dark] .topbar .btn-ghost:hover,:root[data-theme=dark] .topbar .btn-ghost:focus-visible,:root[data-theme=dark] .topbar details[open]>summary.btn-ghost{background:var(--gray-50);color:var(--text)}
  .topbar .btn-ghost .ico{color:currentColor;opacity:.9}
  /* Der Firmenname als Titel neben dem Menue: sichtbar, weiss, mit Pfeil – und nicht laenger als der
     Platz. Links neben ihm steht ein Knopf, rechts stehen drei; „in der Mitte“ saehe deshalb immer
     nach links verrutscht aus. */
  .topbar .company-switch summary{max-width:100%;gap:6px;padding-inline:6px 8px;justify-content:flex-start;font-size:.95rem;font-weight:600;letter-spacing:-.01em}
  .topbar .company-switch summary>.ico:first-child{display:none}
  .topbar .company-switch .lbl{display:inline;max-width:52vw;color:var(--text)}
  .topbar .company-switch .ico-xs{width:14px;height:14px;opacity:.8}
  .topbar .usermenu summary{padding:6px}
  .topbar .usermenu .lbl{display:none}
  .topbar .avatar{width:32px;height:32px}
  .notif-count{top:4px;right:4px;box-shadow:0 0 0 2px var(--panel)}
  /* Klappmenues aus der Leiste: ein Blatt ueber die ganze Breite, kein schmaler Zettel am Rand. */
  .topbar .dd-menu,.topbar .company-switch .dd-menu{
    position:fixed;left:10px;right:10px;top:calc(56px + env(safe-area-inset-top) + 8px);
    width:auto;min-width:0;max-width:none;max-height:min(70vh,560px);overflow:auto;overscroll-behavior:contain;border-radius:14px;
  }
  /* Die Leistenregel oben trifft jeden Geisterknopf in der Leiste – auch „alle gelesen“ im Blatt der
     Benachrichtigungen, der damit weiss auf weiss stand. Im Blatt gilt wieder die Menueform. */
  .topbar .dd-menu .btn-ghost,:root[data-theme=dark] .topbar .dd-menu .btn-ghost{color:var(--text);background:none;min-width:0;min-height:38px;padding:5px 10px;justify-content:flex-start;border-radius:var(--radius-sm)}
  .topbar .dd-menu .btn-ghost:hover,.topbar .dd-menu .btn-ghost:focus-visible{background:var(--gray-50)}
  :root[data-theme=dark] .topbar .dd-menu .btn-ghost:hover,:root[data-theme=dark] .topbar .dd-menu .btn-ghost:focus-visible{background:#1c283b}
  .topbar .dd-menu .btn-ghost .ico{color:currentColor}
  /* Die Sammelleiste klebt unter der Kopfleiste – die ist auf dem Telefon 56 Pixel hoch, nicht 64. */
  .bulk-bar{top:calc(56px + env(safe-area-inset-top))}
  /* Das Suchfeld der Suchseite nimmt die ganze Breite, nicht 300 Pixel rechtsbuendig. */
  .page-actions:has(.gsearch-page){flex:1 1 100%}
  .page-actions .gsearch-page{flex:1 1 100%;max-width:none;min-width:0}

  /* Der Rest der Seite: ruhiger, mit mehr Luft und weicheren Kanten. */
  .content{padding:16px 16px 88px}
  .page-head{align-items:center}
  .page-head .topbar-title h1::after{margin-top:6px}
  .banner{padding:12px;border-radius:var(--radius-sm);font-size:.88rem;gap:8px 12px;margin-bottom:12px}
  .banner .btn{min-height:36px;padding:5px 10px}
  /* Die Leiste unten: der Hauptweg mit dem Markenverlauf, der Rest ruhig. */
  .tabbar .tab-neu{background:var(--navy)}
  .tabbar .tab-i .ico{opacity:.85}
  .tabbar .tab-i.active .ico{opacity:1}
}

/* Diagrammbalken in Marineblau: Im Dunkelmodus braucht dieselbe Reihe eine helle Entsprechung –
   Navy auf dunkler Karte war schlicht unsichtbar. */
.chart .b-navy{fill:var(--navy)}
.legend .b-navy{background:var(--navy)}
:root[data-theme=dark] .chart .b-navy{fill:#9cc2ff}
:root[data-theme=dark] .legend .b-navy{background:#9cc2ff}

/* Die Layoutwahl versteckt ihr Radio – der Tastaturfokus braucht deshalb einen eigenen Ring. */
.layout-opt:has(input:focus-visible){outline:3px solid var(--akzent);outline-offset:2px}

/* Tuermen sich mehrere Banner (Rechtstexte, Ankuendigung, Admin-Zugriff), ruecken sie zusammen. */
.banner + .banner{margin-top:-4px}

/* ================= Design 4: klar, ruhig, einheitlich =================
   Weniger Verlauf, mehr Ordnung: flache Flaechen mit feinen Linien, ein Akzent (Indigo) fuer
   „hier bin ich“ und „hier geht es weiter“, Farbe sonst nur fuer Bedeutung (rot = ueberfaellig,
   gruen = bezahlt). Die Symbole kommen aus Lucide, jeder Menuepunkt hat ein eigenes. Die Regeln
   stehen gesammelt am Ende, damit die aelteren Schichten nicht einzeln angefasst werden muessen. */
:root{
  --bg:#f5f7fb;--line:#e6eaf0;--line-strong:#cfd7e2;
  --ring:0 0 0 3px rgba(99,102,241,.38);
}
body.chrome-app,:root[data-theme=dark] body.chrome-app{background:var(--bg)}

/* ---------- Seitenleiste (Rechner und Schublade; das Blatt auf dem Telefon bleibt) ---------- */
@media (min-width:701px){
  .sidebar{background:#0c2239;border-inline-end:1px solid rgba(255,255,255,.05)}
  .sidebar::before{display:none}
  .brand-side{padding:18px 20px 12px}
  .nav{padding:4px 10px 10px;gap:1px}
  /* .46 ergab 3,7:1 auf dem dunklen Grund – fuer eine Versalzeile dieser Groesse zu wenig. */
  .nav-group{padding:20px 12px 8px;font-size:.72rem;letter-spacing:.1em;color:rgba(214,226,240,.58)}
  .nav-item{position:relative;gap:11px;padding:7px 12px;min-height:36px;border-radius:var(--radius-sm);font-size:.88rem;font-weight:500;color:rgba(226,234,244,.8);transition:background .12s,color .12s}
  .nav-item .ico{width:18px;height:18px;opacity:.72;color:inherit}
  .nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
  .nav-item:hover .ico{opacity:1;color:#fff}
  .nav-item.active{background:rgba(255,255,255,.09);box-shadow:none;color:#fff;font-weight:600}
  .nav-item.active .ico{opacity:1;color:#c7d2fe}
  .nav-item.active::before{content:"";position:absolute;inset-inline-start:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:#818cf8}
  .nav-item:focus-visible{outline:2px solid #c7d2fe;outline-offset:-2px}
  body.nav-mini .nav-item.active{box-shadow:none}
  body.nav-mini .nav-item.active::before{inset-inline-start:-6px}
  .nav-collapse{color:rgba(226,234,244,.62)}
  .plan-chip{background:rgba(255,255,255,.06);border-color:rgba(199,210,254,.28)}
}
.nav-count{min-width:20px;text-align:center;line-height:1.35;font-variant-numeric:tabular-nums}
/* Der Fokusring auf dunklem Grund: Indigo auf der Leistenfarbe kommt auf 1,41:1, #c7d2fe auf 4,22:1
   und auf der Seitenleiste auf 10,8:1 – derselbe helle Ton, den .nav-item schon benutzt. */
.sidebar :focus-visible{outline-color:#c7d2fe}

/* ---------- Kopfleiste und Seitenkopf ---------- */
@media (min-width:701px){
  .topbar{background:rgba(255,255,255,.9);border-bottom-color:var(--line)}
  .gsearch input{background:#f1f4f8;border-color:#e6eaf0}
  .gsearch input:hover{border-color:var(--line-strong)}
}
.gsearch input:focus{background:var(--panel);border-color:var(--akzent);box-shadow:var(--ring)}
.page-head .topbar-title h1{font-size:1.75rem;font-weight:700;letter-spacing:-.025em}
.page-head .topbar-title h1::after{display:none}
.page-head .subtitle{margin-top:3px}

/* ---------- Karten ---------- */
.card-head{background:none}
.card-head h2 .ico{color:var(--muted-2)}

/* ---------- Kennzahlen: Symbol als Chip statt farbiger Oberkante ---------- */
.kpi{padding:20px;gap:8px;box-shadow:none}
.kpi::before{display:none}
.kpi:hover{border-color:var(--line-strong)}
.kpi .label{font-size:.8rem;font-weight:500;color:var(--muted)}
.kpi .label>.ico,.kpi .label>span>.ico{width:30px;height:30px;padding:6px;border-radius:var(--radius-sm);background:var(--akzent-50);color:var(--akzent-600);margin-inline-end:4px;vertical-align:middle}
.kpi.primary .label>.ico,.kpi.primary .label>span>.ico{background:var(--navy-50);color:var(--navy-700)}
.kpi.warn .label>.ico,.kpi.warn .label>span>.ico{background:var(--red-50);color:var(--red)}
.kpi.good .label>.ico,.kpi.good .label>span>.ico{background:var(--green-50);color:var(--green)}
.kpi .value{font-size:1.6rem;font-weight:700;letter-spacing:-.02em}
:root[data-theme=dark] .kpi.primary .label>.ico,:root[data-theme=dark] .kpi.primary .label>span>.ico{color:#9cc2ff}
:root[data-theme=dark] .kpi .label>.ico,:root[data-theme=dark] .kpi .label>span>.ico{color:#c7d2fe}
:root[data-theme=dark] .kpi.good .label>.ico,:root[data-theme=dark] .kpi.good .label>span>.ico{color:#8fe0b5}

/* ---------- Schaltflaechen und Felder ---------- */
.btn,.btn-sm,.btn-icon,.btn-lg{border-radius:var(--radius-sm)}
.btn{box-shadow:var(--shadow-xs);line-height:1.5}
.btn-ghost,.dd-menu .btn,.dd-menu .dd-item{box-shadow:none}
.btn-primary,.btn-primary:hover{background:var(--navy);box-shadow:var(--shadow-xs);filter:none}
.btn-primary:hover{background:var(--navy-700)}
.btn-accent,.btn-accent:hover{background:var(--akzent-600);filter:none;box-shadow:var(--shadow-xs)}
.btn-accent:hover{background:#4338ca}
.btn-success,.btn-success:hover{background:var(--green)}
.btn-success:hover{background:#15804f}
.btn:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
:root[data-theme=dark] .btn-primary{background:#1d4c80}
:root[data-theme=dark] .btn-primary:hover{background:#245a96}
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:var(--red)}
input:user-invalid:focus,select:user-invalid:focus,textarea:user-invalid:focus{box-shadow:0 0 0 3px rgba(201,60,60,.28)}

/* ---------- Tabellen ---------- */
.table th{background:#f8fafc;color:#5b6675}
.table tbody tr:hover,.table tr.row-link:hover td,.table tr.row-link:focus-within td{background:#f7f9fc}
/* Die Aktionsspalte war per display:flex keine Tabellenzelle mehr: ihre Trennlinie sass hoeher als
   die der Nachbarzellen, jede Zeile hatte dort eine Luecke. Jetzt bleibt sie Zelle, die Knoepfe
   stehen nebeneinander in einer Reihe. */
.table td.actions{display:table-cell;white-space:nowrap;text-align:end}
.table td.actions>*{display:inline-flex;vertical-align:middle}
.table td.actions>*+*{margin-inline-start:2px}

/* ---------- Reiter und Filter ---------- */
.tab{font-weight:500;border-radius:10px 10px 0 0;transition:color .12s,background .12s}
.tab:hover{color:var(--text);background:var(--gray-50)}
.tab:focus-visible{outline-offset:-3px}
.tab.active{color:var(--navy);border-bottom-color:var(--akzent);background:none}
:root[data-theme=dark] .tab.active{background:none;color:var(--text)}
.pill{transition:background .12s,border-color .12s,color .12s}

/* ---------- Hinweisbaender ---------- */
.banner{border-radius:10px}
@media (min-width:701px){
  /* Die Links zu Impressum, Datenschutz und Vertragsbedingungen klebten ohne Abstand aneinander. */
  .banner .nur-breit{display:inline-flex;flex-wrap:wrap;gap:4px 16px}
}

/* ---------- Belegeditor: Skonto ----------
   In der halben Spalte blieben fuer Prozent und Tage je rund 30 Pixel: aus „0“ wurde „C“. Die
   Gruppen behalten jetzt eine Mindestbreite und brechen lieber in eine zweite Zeile um. */
.range .input-group{flex:1 1 96px;min-width:96px}
.range .input-group input{min-width:44px}

/* ---------- Menues ---------- */
.dd-menu{border-radius:var(--radius);padding:4px;box-shadow:var(--shadow-lg)}
.dd-menu .dd-item .ico,.dd-menu .btn .ico{color:var(--muted-2)}
.dd-menu .dd-item:hover .ico,.dd-menu .btn:hover .ico{color:var(--akzent-600)}

/* ---------- Seitenmenue in Gruppen (Verwaltung, Einstellungen) ----------
   Breit: Menue links, Inhalt rechts; das Menue bleibt beim Scrollen stehen. Schmal: eine waagerechte
   Leiste mit Zeichen, die unter der Kopfleiste stehen bleibt – zwoelf Reiter in fuenf Zeilen fielen weg. */
.sub-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
.sub-main{min-width:0}
.sub-nav{position:sticky;top:calc(var(--topbar-h) + 16px);display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:8px;box-shadow:var(--shadow)}
.sub-nav-g{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--muted-2);padding:12px 10px 4px}
.sub-nav-i{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);color:var(--text);font-weight:500;font-size:.88rem;text-decoration:none!important;transition:background .12s,color .12s}
.sub-nav-i .ico{width:18px;height:18px;color:var(--muted-2);transition:color .12s}
.sub-nav-i:hover{background:var(--gray-50)}
.sub-nav-i:hover .ico{color:var(--navy-700)}
.sub-nav-i.active{background:var(--akzent-50);color:var(--navy);font-weight:600}
.sub-nav-i.active .ico{color:var(--akzent-600)}
.sub-nav-i.active::before{content:"";position:absolute;inset-inline-start:-8px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--akzent)}
.sub-nav-i .nav-count{margin-inline-start:auto}
.sub-nav-i:focus-visible{outline:2px solid var(--akzent);outline-offset:1px}
:root[data-theme=dark] .sub-nav-i.active{background:rgba(99,102,241,.14);color:var(--text)}
:root[data-theme=dark] .sub-nav-i.active .ico{color:#c7d2fe}
:root[data-theme=dark] .sub-nav-i:hover .ico{color:var(--text)}
@media (max-width:1100px){
  .sub-shell{grid-template-columns:1fr;gap:14px}
  .sub-nav{position:sticky;top:var(--topbar-h);z-index:15;flex-direction:row;overflow-x:auto;scrollbar-width:none;padding:6px;gap:4px;border-radius:var(--radius-sm);margin-inline:-2px}
  .sub-nav::-webkit-scrollbar{display:none}
  .sub-nav-g{display:none}
  .sub-nav-i{flex:none;white-space:nowrap;padding:7px 12px;font-size:.88rem;border-radius:99px}
  .sub-nav-i.active::before{display:none}
  .sub-nav-i.active{box-shadow:inset 0 0 0 1px var(--akzent-100)}
  .sub-nav[data-ovf=end]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .sub-nav[data-ovf=start]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
  .sub-nav[data-ovf=both]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
}
/* Die Verwaltung hat elf Bereiche. Im Schiebeband sieht man auf dem Telefon drei davon, und zu
   einem Bereich weiter hinten kommt man nur durch Wischen – in den Einstellungen fuehren
   wenigstens die Kacheln im Ueberblick hinein, in der Verwaltung gibt es diesen Weg nicht.
   Sie bricht deshalb um: drei Zeilen Navigation, dafuer jeder Bereich mit einem Griff. */
@media (max-width:700px){
  .sub-nav-viel{flex-wrap:wrap;overflow-x:visible;-webkit-mask-image:none;mask-image:none;row-gap:6px}
  .sub-nav-viel .sub-nav-i{padding:8px 12px;font-size:.88rem}
  .sub-nav-viel .sub-nav-i .ico{width:16px;height:16px}
}

/* Zwischen Telefon und Rechner ist Platz fuer zwei, drei Zeilen – dann sind alle zwoelf Bereiche
   zu sehen. Das Schiebeband mit dem Verlauf am Rand bleibt dem Telefon vorbehalten. */
@media (min-width:701px) and (max-width:1100px){
  .sub-nav{flex-wrap:wrap;overflow-x:visible;-webkit-mask-image:none;mask-image:none}
}
/* Die Kopfleiste ist nur auf dem Telefon 56 Pixel hoch; darueber gilt --topbar-h aus der Regel oben. */
@media (max-width:700px){
  .sub-nav{top:56px}
}
/* Benutzermenue: Name und Adresse untereinander – nebeneinander brach der Name in zwei Zeilen. */
.usermenu .dd-head{flex-direction:column;align-items:flex-start;gap:1px}
/* Im Dunkelmodus faerbt die allgemeine Linkregel alle <a> hellblau – das Seitenmenue ist Navigation, kein Fliesstext. */
:root[data-theme=dark] .sub-nav-i{color:var(--text)}
:root[data-theme=dark] .sub-nav-i:hover{background:#1c283b}
/* Geöffnetes Klappmenü in Tabellen und Karten: fest am Bildschirm neben dem Knopf (Lage setzt app.js). */
.dd-menu.dd-schwebend{position:fixed;right:auto;z-index:45;max-height:calc(100vh - 16px);overflow:auto;overscroll-behavior:contain}

/* ---------- Verwaltung: Detailseiten mit Kopf und Bereichen ----------
   Oben die Person bzw. das Unternehmen mit Status, Kennzahlen und den Hauptaktionen, darunter
   Bereiche statt einer Seite von über 4000 Pixeln. Seltene und gefährliche Aktionen im Menü „Mehr“. */
.brotkrumen{margin:0 0 10px;font-size:.88rem}
.brotkrumen a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:500}
.brotkrumen a:hover{color:var(--text);text-decoration:none}
.profil-kopf{padding:18px 20px 16px;margin-bottom:14px}
.profil-haupt{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.profil-bild{flex:none;width:52px;height:52px;border-radius:var(--radius);display:grid;place-items:center;background:var(--akzent-50);color:var(--akzent-600);font-weight:700;font-size:1.15rem}
.profil-bild-firma{background:var(--navy-50);color:var(--navy-700)}
.profil-bild-firma .ico{width:26px;height:26px}
.profil-titel{flex:1 1 260px;min-width:0}
.profil-titel h2{font-size:1.15rem;margin:0;overflow-wrap:anywhere}
.profil-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:8px;color:var(--muted);font-size:.88rem}
.profil-aktionen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-inline-start:auto}
.profil-fakten{display:flex;flex-wrap:wrap;gap:10px 28px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.profil-fakten div{min-width:0}
.profil-fakten dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);font-weight:600}
.profil-fakten dd{margin:2px 0 0;font-weight:600;font-variant-numeric:tabular-nums}
.profil-fakten dd.neg{color:var(--red)}
:root[data-theme=dark] .profil-bild{color:#c7d2fe}
:root[data-theme=dark] .profil-bild-firma{color:#9cc2ff}
.detail-reiter{margin-bottom:16px}
.tab-zahl{display:inline-block;min-width:20px;padding:0 6px;margin-inline-start:4px;border-radius:99px;background:var(--gray-50);color:var(--muted);font-size:.72rem;font-weight:600;text-align:center;line-height:1.5}
.tab.active .tab-zahl{background:var(--akzent-50);color:var(--akzent-600)}
:root[data-theme=dark] .tab.active .tab-zahl{color:#c7d2fe}
.mitglieder{list-style:none;margin:0;padding:0}
.mitglieder li{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line)}
.mitglieder li:last-child{border-bottom:0}
.mitglied-name{flex:1;min-width:0}
.mitglied-name b{overflow-wrap:anywhere}
.mitglied-aktion{display:flex;align-items:center;gap:4px;flex:none}
.mitglied-aktion select{width:auto;min-width:130px}
.notiz-fuss{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-top:10px}
.notiz-fuss .field{margin:0;flex:1 1 200px}
details.gefahr{border-color:#f0c4c4}
details.gefahr>summary.card-head h2{color:var(--red)}
:root[data-theme=dark] details.gefahr{border-color:#6b3232}
/* Auf Detailseiten ist das Seitenmenü eine schmale Leiste mit Zeichen – die Tabellen brauchen die Breite. */
@media (min-width:1101px){
  .sub-shell.ist-detail{grid-template-columns:56px minmax(0,1fr)}
  .ist-detail .sub-nav{padding:6px;align-items:center}
  .ist-detail .sub-nav-g{display:none}
  .ist-detail .sub-nav-i{justify-content:center;padding:9px;width:42px}
  .ist-detail .sub-nav-i span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ist-detail .sub-nav-i .nav-count{position:absolute;top:1px;inset-inline-end:-2px;font-size:.72rem;padding:0 4px;min-width:16px}
  .ist-detail .sub-nav-i.active::before{inset-inline-start:-6px}
}
@media (max-width:700px){
  /* Dreizehn Bereiche in sechs Zeilen sind 318 Pixel. Kleben duerfen sie damit nicht: Nach dem
     Scrollen blieben von 660 Pixeln Fensterhoehe noch 229 fuer die Liste. Oben stehen sie
     weiterhin – man scrollt an ihnen vorbei, statt sie mitzuschleppen. */
  .sub-nav-viel{position:static}
  .profil-aktionen{margin-inline-start:0;width:100%}
  .profil-fakten{gap:10px 20px}
  /* 0,72 rem sind auf dem Telefon 10,44 Pixel – unter den zwoelf, ab denen Schrift ueberhaupt
     noch zumutbar ist. 0,88 rem ergeben 12,76; Grossbuchstaben und Fettung tragen die
     Unterscheidung zum Wert weiterhin. */
  .profil-fakten dt{font-size:.88rem;letter-spacing:.04em}
  /* Der Knopf „Mitglied entfernen" war 33 Pixel breit. Eng gefasst, damit nicht jeder
     Zeichenknopf in jeder Tabelle mitwaechst – dort ist der Platz knapp. */
  .mitglied-aktion .btn-icon{min-width:44px}
  .mitglieder li{flex-wrap:wrap}
}
/* Reiter im Dunkelmodus: Die allgemeine Linkregel färbte sie hellblau wie Fließtext-Links. */
:root[data-theme=dark] .tab{color:var(--muted)}
:root[data-theme=dark] .tab:hover,:root[data-theme=dark] .tab.active{color:var(--text)}
.mitglied-name .sub{display:block;font-size:.8rem;color:var(--muted)}
@media (max-width:700px){
  .profil-haupt{gap:12px}
  .profil-bild{width:44px;height:44px;border-radius:var(--radius);font-size:1.15rem}
  .profil-titel{flex:1 1 0}
  .profil-titel h2{font-size:1.15rem}
}
/* Frühere Fassungen eines korrigierten Belegs und der Hinweis im Editor */
.fassungen{list-style:none;margin:0;padding:0}
.fassungen li{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line)}
.fassungen li:last-child{border-bottom:0}
.fassungen .sub{display:block;font-size:.8rem;color:var(--muted)}
.korrektur-hinweis{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.korrektur-hinweis>div{flex:1 1 280px}
.korrektur-hinweis form{margin-inline-start:auto}

/* ---------- App (iOS/Android) ----------
   Die App zeigt die Seiten randlos (viewport-fit=cover, nur mit Klasse is-app). Auf dem Telefon halten
   Kopf- und Tab-Leiste schon Abstand zu Statusleiste und Home-Indikator. Auf dem iPad, auf den
   Anmeldeseiten und auf der Website fehlte er: Dort läge die oberste Zeile unter der Uhrzeit. */
@media (min-width:701px){
  .is-app .topbar{padding-top:env(safe-area-inset-top);min-height:calc(var(--topbar-h) + env(safe-area-inset-top))}
  .is-app .sidebar{padding-top:env(safe-area-inset-top)}
}
.is-app .site-header{padding-top:env(safe-area-inset-top)}
.is-app .site-footer{padding-bottom:env(safe-area-inset-bottom)}
.is-app .bare-stage{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
/* Während die App eine Datei holt, zeigt der Link, dass etwas passiert. */
.is-app a[aria-busy="true"]{opacity:.6;pointer-events:none}

/* ---------- Telefon: die Feinabstimmung, die hinter dem Design-4-Satz stehen muss ----------
   Der Abschnitt „Design 4" weiter oben setzt Kennzahlen, Kartenkoepfe und Seitentitel ohne
   Breitenabfrage neu. Eine Medienabfrage wiegt aber nicht schwerer als eine Regel ohne, und sie
   steht spaeter in der Datei – die Telefonwerte an ihrem urspruenglichen Platz blieben deshalb
   wirkungslos. Gemessen: Kennzahl 23,9 statt 17,7 Pixel, Kachelrand 20 statt 14 Pixel. Hier,
   hinter allem anderen, greifen sie. */
@media (max-width:700px){
  .kpi{padding:16px}
  .kpi .value{font-size:1.3rem}
  .kpi .label{font-size:.8rem}
  .kpi .label>.ico,.kpi .label>span>.ico{width:24px;height:24px;padding:4px}
  .page-head .topbar-title h1{font-size:1.4rem}

  /* Die Kartenkopfzeile darf umbrechen. Titel, Hinweis und Suchfeld nebeneinander brauchten auf der
     Zahlungsseite 507 Pixel – die ganze Seite liess sich dadurch seitlich schieben. */
  .card-head{flex-wrap:wrap;row-gap:8px}
  .card-head .gsearch-page{flex:1 1 100%;max-width:none;min-width:0;order:3}

  /* Tippflaechen. Ein Daumen trifft 44 Pixel, keine 13. */
  .table .btn-sm{min-width:44px}
  .pos-table .c-tools .btn{min-width:44px;min-height:44px}
  /* Elf Filter ergeben umgebrochen drei Zeilen – vor der Liste liegt dann ein halber Bildschirm.
     Eine schiebbare Zeile mit Verlauf am Rand zeigt dasselbe auf 44 Pixeln. */
  .pills{gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .pills::-webkit-scrollbar{display:none}
  .pill{padding:12px;flex:none}
  .sub-nav{gap:8px}
  .sub-nav-i{min-height:44px;padding:10px 14px}
  .dd-menu .dd-item{min-height:44px}
  .dd-sub>summary{min-height:44px;display:flex;align-items:center}
  /* Das Auswahlkaestchen der Belegliste: die Spaltenregel weiter oben setzt es auf 16 Pixel zurueck. */
  .table td.c-sel input{width:22px;height:22px}
  .table td.c-sel{top:10px;inset-inline-end:10px}
  /* Das Erklaerzeichen bleibt 13 Pixel klein – seine Tippflaeche nicht. In der Reiterleiste enger
     gefasst, damit sie nicht in den Nachbarreiter reicht. */
  .hint{position:relative}
  .hint::after{content:"";position:absolute;inset:-16px}
  .tabs>.hint::after{inset:-8px 0}

  /* Beide Knoepfe der Einwilligung nebeneinander: gestapelt nahm das Banner 38 Prozent des
     Bildschirms ein, obwohl der Text derselbe bleibt. */
  .consent-btn,.consent-btn:hover{flex:1 1 130px}
  .consent-mehr>summary{min-height:44px;display:flex;align-items:center}
}
/* ---------- Datenschutz-Einstellungen (Banner und Formular in der Datenschutzerklärung) ----------
   Schwebt unten und sperrt die Seite nicht: Impressum und Datenschutzerklärung bleiben ohne Wahl lesbar.
   Beide Hauptknöpfe sehen gleich aus – die Ablehnung darf nicht schwächer wirken als die Zustimmung. */
.consent{position:fixed;z-index:90;inset-inline:16px;bottom:16px;display:flex;justify-content:center;pointer-events:none}
.consent-box{pointer-events:auto;width:min(560px,100%);max-height:calc(100vh - 32px);max-height:calc(100svh - 32px);overflow:auto;overscroll-behavior:contain;
  background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:20px}
.consent h2{display:flex;align-items:center;gap:8px;font-size:1.15rem;margin:0 0 8px;color:var(--text)}
.consent h2 .ico{color:var(--akzent)}
.consent p{margin:0 0 12px;font-size:.88rem;line-height:1.5;color:var(--muted)}
.consent-knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.consent-btn,.consent-btn:hover{flex:1 1 180px;justify-content:center;min-height:44px;background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.consent-btn:hover{filter:brightness(1.15)}
:root[data-theme=dark] .consent-btn,:root[data-theme=dark] .consent-btn:hover{background:#8fc4ff;border-color:#8fc4ff;color:#0b2038}
.consent-mehr{margin:0 0 12px}
.consent-mehr>summary{cursor:pointer;font-size:.88rem;font-weight:600;color:var(--text);padding:4px 0}
.consent-mehr[open]>summary{margin-bottom:4px}
.consent-zweck{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.consent-zweck input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--akzent)}
.consent-zweck label{display:grid;gap:4px;font-size:.88rem;cursor:pointer}
.consent-zweck label b span{margin-inline-start:8px;font-weight:500;font-size:.72rem;color:var(--akzent-600)}
.consent-zweck small{color:var(--muted);font-size:.8rem;line-height:1.45}
.consent-mehr .btn-sm{margin-top:4px}
.consent-seite{border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin:12px 0 20px;background:var(--panel)}
.consent-stand{margin:0 0 8px}
.consent-tabelle td{vertical-align:top;font-size:.88rem}
.consent-tabelle code{white-space:nowrap;font-size:.8rem}
/* In der App über dem Home-Indikator, auf dem Telefon zusätzlich über der Tab-Leiste. */
.is-app .consent{bottom:calc(16px + env(safe-area-inset-bottom))}
@media (max-width:700px){
  .consent{inset-inline:10px;bottom:10px}
  .consent-box{padding:16px}
  .chrome-app .consent{bottom:calc(66px + env(safe-area-inset-bottom))}
  .consent-tabelle code{white-space:normal}
}
@media print{.consent{display:none}}

/* ---------- Kontaktanfragen: jede Anfrage eine Karte, zugeklappt eine Zeile ----------
   Vorher standen sie in einer Tabelle mit fuenf Spalten; die Nachricht – das Einzige, worum es
   geht – bekam die schmalste davon, und auf einen Bildschirm passten zwei Anfragen. */
.anfrage{border-bottom:1px solid var(--line)}
.anfrage:last-of-type{border-bottom:0}
.anfrage-kopf{display:grid;gap:3px;padding:12px 16px 12px 34px;cursor:pointer;list-style:none;position:relative}
.anfrage-kopf::-webkit-details-marker{display:none}
/* Das Dreieck zeigt, dass sich die Zeile oeffnen laesst – ohne es sieht sie aus wie Text. */
.anfrage-kopf::before{content:"";position:absolute;inset-inline-start:14px;top:17px;width:6px;height:6px;
  border-right:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);transform:rotate(-45deg);transition:transform .15s}
.anfrage[open]>.anfrage-kopf::before{transform:rotate(45deg)}
.anfrage-kopf:hover{background:var(--gray-50)}
.anfrage-zeile{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.anfrage-betreff{font-size:.95rem;font-weight:600}
.anfrage-sub{color:var(--muted);font-size:.8rem}
.anfrage-von{font-weight:500}
.anfrage-vorschau{color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anfrage[open] .anfrage-vorschau{display:none}
.anfrage-koerper{display:grid;gap:12px;padding:0 16px 16px 34px}
.anfrage-kontakt{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.88rem;align-items:center}
.anfrage-kontakt .ico{vertical-align:-2px}
/* Der Text des Kunden steht auf einer eigenen Flaeche: Was er geschrieben hat, ist nicht dasselbe
   wie das, was wir dazu anzeigen. */
.anfrage-text{white-space:pre-line;line-height:1.55;background:var(--gray-50);border-radius:var(--radius-sm);padding:12px 16px}
.anfrage-antwort{border-inline-start:3px solid var(--akzent-100);padding-inline-start:12px;display:grid;gap:4px}
.anfrage-antwort .anfrage-text{background:var(--akzent-50)}
:root[data-theme=dark] .anfrage-text{background:#141c2b}
:root[data-theme=dark] .anfrage-antwort .anfrage-text{background:rgba(99,102,241,.12)}

/* ---------- Fehlerprotokoll in der Verwaltung ---------- */
.log-liste{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.log-liste li{padding:8px 12px;background:var(--gray-50);border-radius:var(--radius-sm);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;line-height:1.45;overflow-wrap:anywhere}
:root[data-theme=dark] .log-liste li{background:#141c2b}

/* ---------- Was anklickbar ist, muss man sehen ----------
   Gemessen auf der Belegliste: 59 von 92 Links trugen dieselbe Farbe und dieselbe Schrift wie der
   Text daneben. Am Rechner verraet sie das Ueberfahren, auf dem Telefon gibt es das nicht – dort
   war ein Link von einer Angabe nicht zu unterscheiden.

   Ein Link braucht aber nicht ueberall dieselbe Form. Im Fliesstext ist er ein farbiges,
   unterstrichenes Wort. In einer Listenzeile ist die ganze Zeile das Ziel; ein farbiges Wort je
   Spalte waere dort ein Flickenteppich. Deshalb drei Staerken: Fliesstext farbig und
   unterstrichen, die Ueberschrift einer Zeile dunkel mit Winkel am Ende, Nebenlinks in der Zeile
   mit feiner grauer Unterstreichung. */
:where(.explain,.banner,.hinweis,.notice,.faq-body,.dl dd,.consent,.flash,.empty,.empty-state,
       .anfrage-kontakt,.anfrage-koerper,.doc-hero .meta,.kpi .sub,.profil-fakten,.verlauf,.card-body>p,.card-body>ul,.card-body>ol,.subtitle,
       .checks li,.fassungen li,.log-liste li,.card-foot)
  a:not(.btn):not(.pill):not(.tab):not(.badge):not(.sub-nav-i){
  color:var(--akzent-600);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;
}
:where(.explain,.banner,.hinweis,.notice,.faq-body,.dl dd,.consent,.flash,.empty,.empty-state,
       .anfrage-kontakt,.anfrage-koerper,.doc-hero .meta,.kpi .sub,.profil-fakten,.verlauf,.card-body>p,.card-body>ul,.card-body>ol,.subtitle,
       .checks li,.fassungen li,.log-liste li,.card-foot)
  a:not(.btn):not(.pill):not(.tab):not(.badge):not(.sub-nav-i):hover{
  text-decoration-thickness:2px;
}
:root[data-theme=dark] :where(.explain,.banner,.hinweis,.notice,.faq-body,.dl dd,.consent,.flash,
       .empty,.empty-state,.anfrage-kontakt,.anfrage-koerper,.doc-hero .meta,.kpi .sub,.profil-fakten,.verlauf,.card-body>p,.card-body>ul,
       .card-body>ol,.subtitle,.checks li,.fassungen li,.log-liste li,.card-foot)
  a:not(.btn):not(.pill):not(.tab):not(.badge):not(.sub-nav-i){
  color:#aab4ff;
}

/* Listenzeilen: Die Ueberschrift bleibt dunkel und schwer – sie ist die Zeile, nicht ein Wort
   darin. Nebenlinks (Kunde, Beleg, Unternehmen) tragen eine feine graue Linie: erkennbar als
   Link, ohne die Liste bunt zu machen. */
.table td a:not(.btn):not(.badge),.table th a:not(.btn):not(.badge){color:var(--text)}
.table td:not(.z-titel) a:not(.btn):not(.badge){
  text-decoration:underline;text-decoration-color:var(--line-strong);
  text-decoration-thickness:1px;text-underline-offset:.18em;
}
.table td a:not(.btn):not(.badge):hover{color:var(--akzent-600);text-decoration:underline;
  text-decoration-color:currentColor;text-decoration-thickness:2px;text-underline-offset:.18em}

/* Der Winkel am Ende der Zeilenueberschrift. Am Rechner erscheint er beim Ueberfahren – dort gibt
   es schon Zeiger und Hintergrund. Auf dem Telefon steht er immer, denn dort gibt es beides nicht. */
.table td.z-titel a:not(.btn)::after{
  content:"";display:inline-block;width:6px;height:6px;margin-inline-start:7px;vertical-align:2px;
  border-top:2px solid var(--line-strong);border-right:2px solid var(--line-strong);
  transform:rotate(45deg);transition:opacity .12s;
}
[dir=rtl] .table td.z-titel a:not(.btn)::after{transform:rotate(-135deg)}
@media (min-width:701px) and (hover:hover){
  .table td.z-titel a:not(.btn)::after{opacity:0}
  .table tbody tr:hover td.z-titel a:not(.btn)::after{opacity:1}
}

/* ---------- Breite Tabellen auf dem Telefon ----------
   Sechzehn der achtzehn Tabellen der Verwaltung bringen keine Zeilenrollen mit und bleiben
   deshalb Tabellen, die man seitlich schiebt. Dass sie das sind, war nicht zu sehen: Die Spalte
   rechts endete einfach am Rand. Jetzt liegt dort ein Schatten, solange noch etwas folgt – und die
   erste Spalte bleibt beim Schieben stehen, damit man weiss, in welcher Zeile man liest. */
.table-wrap{
  background:
    linear-gradient(90deg,var(--panel),rgba(0,0,0,0)) left center,
    linear-gradient(90deg,rgba(0,0,0,0),var(--panel)) right center,
    radial-gradient(farthest-side at 0 50%,rgba(15,42,74,.16),rgba(0,0,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%,rgba(15,42,74,.16),rgba(0,0,0,0)) right center;
  background-repeat:no-repeat;
  background-size:22px 100%,22px 100%,11px 100%,11px 100%;
  background-attachment:local,local,scroll,scroll;
}
:root[data-theme=dark] .table-wrap{
  background-image:
    linear-gradient(90deg,var(--panel),rgba(0,0,0,0)),
    linear-gradient(90deg,rgba(0,0,0,0),var(--panel)),
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.5),rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.5),rgba(0,0,0,0));
}
@media (max-width:700px){
  /* Nur fuer Tabellen, die Tabellen bleiben. Wo aus Zeilen Karten werden, gibt es kein Schieben. */
  .table:not(.table-karten):not(:has(td.z-titel)) thead th:first-child,
  .table:not(.table-karten):not(:has(td.z-titel)) tbody td:first-child{
    position:sticky;inset-inline-start:0;z-index:1;background:var(--panel);
  }
  .table:not(.table-karten):not(:has(td.z-titel)) thead th:first-child{background:#f8fafc}
  :root[data-theme=dark] .table:not(.table-karten):not(:has(td.z-titel)) thead th:first-child{background:#1b2537}
  .table:not(.table-karten):not(:has(td.z-titel)) tfoot td:first-child{position:sticky;inset-inline-start:0;z-index:1}
}

/* ---------- Akzentfarbe durchziehen ----------
   Reste aus dem fruehereren Tuerkis: Der Hinweis-Kennzeichner setzte tuerkise Schrift auf
   indigofarbenen Grund (1,9:1 – unlesbar), und die Akzent-Schaltflaeche wurde beim Ueberfahren
   tuerkis. Im Dunkelmodus waren die Akzentflaechen noch ganz tuerkis. */
.badge.b-teal{color:var(--akzent-600)}
.btn-accent,.btn-accent:hover{box-shadow:0 1px 2px rgba(79,70,229,.25)}
.btn-accent:hover{background:#4338ca}
:root[data-theme=dark] .notice-teal,:root[data-theme=dark] .banner-demo{color:#c7d2fe}
:root[data-theme=dark] .badge.b-teal{color:#aab4ff}

/* ---------- Verwaltung auf dem Telefon: aus jeder Zeile ein Block ----------
   Die Belegliste und ihre Geschwister bringen Zeilenrollen mit (z-titel, z-betrag …) und werden
   auf dem Telefon zu Karten. Die Verwaltung hat achtzehn Tabellen, und sechzehn davon kannten
   diese Rollen nicht: Protokoll, Postausgang, Mandate, Besucher, Papierkorb blieben Tabellen mit
   sechs bis sieben Spalten auf 390 Pixeln – sichtbar waren die erste Spalte und ein Drittel der
   zweiten, der Rest lag rechts daneben.

   Ein Protokolleintrag hat aber keine „Überschrift, Kunde, Betrag"-Form wie ein Beleg. Deshalb
   hier die allgemeine Form: Die Tabelle trägt table-karten, eine Zelle je Zeile trägt z-kopf
   (die Zeile heißt so), und jede weitere Zelle nennt ihre Beschriftung in data-l. Aus der Zeile
   wird dann ein Block „Beschriftung … Wert" je Angabe – lesbar ohne Schieben, und am Rechner
   bleibt alles die Tabelle, die es war. */
@media (max-width:700px){
  .table-wrap:has(.table-karten){overflow-x:visible;background:none}
  .table.table-karten{display:block;width:100%;font-size:.95rem}
  .table.table-karten thead{display:none}
  .table.table-karten tbody,.table.table-karten tfoot{display:block}
  .table.table-karten tbody tr{display:block;position:relative;padding:12px 14px;border-bottom:1px solid var(--line)}
  .table.table-karten tbody tr:last-child{border-bottom:0}
  .table.table-karten tbody tr:hover{background:none}
  .table.table-karten td{
    display:flex;gap:10px 14px;justify-content:space-between;align-items:baseline;
    padding:2px 0;border:0;text-align:start;white-space:normal;overflow-wrap:anywhere;
  }
  .table.table-karten td[data-l]::before{
    content:attr(data-l);flex:none;color:var(--muted);font-size:.82rem;font-weight:500;
  }
  .table.table-karten td.num{font-variant-numeric:tabular-nums}
  /* Die Zeile heißt so: groß, dunkel, ohne Beschriftung – und ohne die Linie, die Nebenlinks
     tragen, denn hier ist der ganze Block das Ziel. */
  .table.table-karten td.z-kopf{display:block;font-size:1.04rem;font-weight:600;margin-bottom:4px}
  .table.table-karten td.z-kopf::before{display:none}
  .table.table-karten td.z-kopf a:not(.btn){text-decoration:none}
  /* Was auf dem Telefon nichts beiträgt, bleibt weg; leere Zellen ergeben keinen leeren Block. */
  .table.table-karten td.z-weg,.table.table-karten td:empty{display:none}
  .table.table-karten td.actions{justify-content:flex-end;margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
  .table.table-karten td.actions::before{display:none}
  .table.table-karten td.actions>*{margin:0}
  .table.table-karten td.actions .btn{min-height:44px}
  .table.table-karten .sub{display:block;font-size:.84rem;color:var(--muted)}
  /* Ohne diese Zeile faerbt die Zeile darueber die Warnung grau zurueck: gleiches Gewicht,
     spaeter in der Datei. Gemessen: 1422 px rot, 504 px grau – die Frist verschwand genau da,
     wo die Liste zu Bloecken wird. */
  .table.table-karten .sub.sub-warn{color:var(--red)}
  /* Die ablaufende Zeile als Flaeche, nicht als Streifenmuster: in der Kartenform traegt das
     tr die Polsterung, die Zellen sind Bloecke mit Zwischenraum. */
  .table.table-karten tbody tr.pk-bald{background:var(--amber-50)}
  .table.table-karten tfoot tr{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border:0}
  .table.table-karten tfoot td{padding:0}
  /* Eine leere Liste zeigt ihr Bild, keinen Block mit Beschriftungen. */
  .table.table-karten tbody tr:has(td[colspan]) {padding:0}
  .table.table-karten td[colspan]{display:block}
}

/* ---------- Tippflächen und Feldgrößen auf dem Telefon: nachgemessen ----------
   Gemessen auf zehn Seiten bei 390, 768 und 1024 Pixeln. Drei Befunde, die bleiben mussten:

   – Die Filter waren 43,86 Pixel hoch. Knapp daneben ist auch daneben: Die 44 Pixel sind kein
     runder Wunschwert, sondern die Fläche, die ein Daumen trifft.
   – Die Felder der Verwaltung trugen 13,3 bis 13,8 Pixel Schrift. Safari auf dem iPhone zoomt beim
     Antippen in jedes Feld unter 16 Pixeln hinein; danach steht die Seite schief und muss von Hand
     zurückgeschoben werden. Der Positionseditor hatte das schon, die übrigen Felder nicht.
   – „Jetzt eintragen" im Hinweisband war 84 × 19 Pixel. Ein Innenabstand über und unter dem Wort
     vergrößert die Fläche, ohne den Textfluss zu verändern. */
@media (max-width:700px){
  .pill{display:inline-flex;align-items:center;min-height:44px}
  .tab{display:inline-flex;align-items:center;min-height:44px}
  details.collapse>summary.card-head,details.card>summary.card-head{min-height:44px}
  .skip{padding:12px 14px}
  :where(.banner,.explain,.hinweis,.notice,.card-foot,.consent) a:not(.btn):not(.pill){padding-block:13px}
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select,textarea{font-size:16px}
  /* Das Auswahlkästchen der Belegliste bleibt 22 Pixel groß – seine Tippfläche nicht. Die
     Beschriftung liegt unsichtbar darüber und misst 44 Pixel; der Mittelpunkt bleibt derselbe. */
  .table td.c-sel .sel-box{position:absolute;inset:50% auto auto 50%;width:44px;height:44px;
    transform:translate(-50%,-50%);cursor:pointer}
}
.table .c-sel{position:relative}
.sel-box{display:block}
/* Weiß auf #1a9a66 erreicht 3,58:1 und bleibt damit unter den 4,5, die kleine Schrift braucht. */
.btn-success,.btn-success:hover{background:#157f4e}
.btn-success:hover{background:#12603c}

/* ---------- Die letzten Tippflächen, nachgemessen bei 390 Pixeln ---------- */
@media (max-width:700px){
  /* Kästchen mit Erklärtext: Die Beschriftung war 35 Pixel hoch. Sie ist bei einem Kästchen das
     Ziel, auf das der Daumen zielt – nicht das Kästchen. */
  .field.check>label{min-height:44px;display:flex;flex-direction:column;justify-content:center;gap:2px}
  /* 13 Pixel Innenabstand ergaben 43 – einen zu wenig. */
  :where(.banner,.explain,.hinweis,.notice,.card-foot,.consent) a:not(.btn):not(.pill){padding-block:14px}
  /* Der Betreff im Postausgang klappt die ganze E-Mail auf und war 23 Pixel hoch. */
  .table.table-karten summary,.table.table-karten td.z-kopf>details>summary{min-height:44px;display:flex;align-items:center}
}

/* ---------- Tablet: 701 bis 900 Pixel ----------
   Bis 700 gilt die Telefonansicht, darueber stand die Seitenleiste mit 36 Pixel hohen Zeilen da –
   auf einem iPad im Hochformat (768) ist das eine Tippflaeche fuer die Maus, nicht fuer den Daumen.
   Gemessen: Menuezeile 221 x 36, Einwilligung „Einstellungen" 518 x 27. */
@media (max-width:900px){
  .nav-item{min-height:44px}
  .consent-mehr>summary{min-height:44px;display:flex;align-items:center}
  .skip{padding:12px 14px}
}

/* ---------- Tippflaechen auch auf dem Tablet und auf Beruehrungsgeraeten ----------
   Bis hier galten die 44 Pixel nur bis 700 Pixel Breite. Ein iPad im Hochformat ist 768 Pixel
   breit und wird mit dem Finger bedient: Gemessen standen dort die Reiter der Verwaltung mit
   33 Pixeln, „Einklappen" mit 35 und das Erklaerzeichen mit 13. Deshalb zweimal:

   – bis 900 Pixel, weil dort auch die Felder schon auf 16 Pixel umschalten;
   – und zusaetzlich fuer jedes Geraet mit groberem Zeiger, unabhaengig von der Breite. Ein
     Tablet im Querformat ist 1024 Pixel breit und hat trotzdem keine Maus. Diese Abfrage kann
     der Messlauf nicht pruefen – er kennt nur Breiten. */
@media (max-width:900px),(pointer:coarse){
  .sub-nav-i{min-height:44px;padding:10px 14px}
  .nav-item{min-height:44px}
  .consent-mehr>summary{min-height:44px;display:flex;align-items:center}
  .skip{padding:12px 14px}
  .nav-collapse{min-height:44px}
  .dd-menu .dd-item,.dd-sub>summary{min-height:44px}
  .pill{display:inline-flex;align-items:center;min-height:44px}
  .hint{position:relative}
  .hint::after{content:"";position:absolute;inset:-16px}
  .tabs>.hint::after{inset:-8px 0}
  :where(.banner,.explain,.hinweis,.notice,.card-foot,.consent,.brotkrumen) a:not(.btn):not(.pill){padding-block:14px}
}
/* Dieselben drei Flaechen, die auf dem Telefon schon 44 Pixel haben, auch auf dem Tablet:
   die Beschriftung eines Kaestchens (gemessen 261 x 35), ein aufklappbarer Kartenkopf (108 x 41)
   und der Unternehmensumschalter in der Kopfleiste (36 Pixel breit). */
@media (max-width:900px),(pointer:coarse){
  .field.check>label{min-height:44px;display:flex;flex-direction:column;justify-content:center;gap:2px}
  details.collapse>summary.card-head,details.card>summary.card-head{min-height:44px}
  .company-switch>summary{min-width:44px}
  .table.table-karten summary,.table.table-karten td.z-kopf>details>summary{min-height:44px;display:flex;align-items:center}
}
/* Die Zeichenknoepfe der Kopfleiste: 36 Pixel breit (der Benachrichtigungszaehler) und 6 Pixel
   Abstand – zwei Nachbarn, die der Daumen verwechselt. */
@media (max-width:900px),(pointer:coarse){
  .topbar details>summary.btn,.topbar>.btn{min-width:44px;justify-content:center}
  .topbar{gap:8px}
}
/* Links in einer Kennzahl-Kachel: Deckt ein .kpi-link die ganze Kachel ab, liegt er als
   positioniertes Element über allem, was danach kommt – das Fragezeichen war deshalb einmal gar
   nicht antippbar. Dasselbe gilt für „Protokoll ansehen" und „Einrichten" in der Unterzeile. */
.kpi .sub a,.kpi .value a{position:relative;z-index:1}

/* ---------- Touch: sofort reagieren, sichtbar quittieren (4.10.2026) ----------
   touch-action:manipulation nimmt dem Browser das Warten auf einen möglichen Doppeltipp-Zoom.
   Den grauen Standard-Blitz von Safari ersetzt eine eigene, ruhige Rückmeldung: Knöpfe geben
   kurz nach, Zeilen und Karten färben sich – so sieht man, dass der Tipp angekommen ist. */
html{-webkit-tap-highlight-color:transparent}
a,button,summary,label,select,[role=button],tr.row-link{touch-action:manipulation}
@media (hover:none){
  .btn{transition:transform .08s ease,background-color .12s ease,box-shadow .12s ease}
  .btn:active{transform:scale(.97)}
  .dd-item:active,.nav-item:active,.tabbar a:active,tr.row-link:active td,.table-karten tr:active{background:var(--akzent-50,#eef2ff)}
  a.card-link:active,.card-link:active{transform:scale(.99)}
}

/* ---------- Listen auf dem Telefon: jede Zeile eine eigene Karte (4.10.2026) ----------
   Vorher trennte nur eine feine Linie die Belege; Nummer, Kunde und Betrag des einen liefen in den
   nächsten über. Jetzt steht jeder Beleg auf eigenem Grund, mit Abstand, und ein Streifen am Rand
   sagt den Stand schon vor dem Lesen: rot überfällig, indigo offen, gelb teilbezahlt, grün bezahlt. */
@media (max-width:700px){
  .table:has(td.z-titel) tbody{display:flex;flex-direction:column;gap:8px;padding:8px;background:var(--bg)}
  .table:has(td.z-titel) tbody tr,
  .table:has(td.z-titel) tbody tr:last-child{border:1px solid var(--line);border-radius:14px;background:var(--panel);
    box-shadow:none;border-inline-start:4px solid var(--zt,var(--line-strong));padding:12px 14px 12px 12px}
  .table:has(td.z-titel) tbody tr:has(.s-offen){--zt:var(--st-offen)}
  .table:has(td.z-titel) tbody tr:has(.s-teilbezahlt){--zt:var(--amber)}
  .table:has(td.z-titel) tbody tr:is(:has(.s-bezahlt),:has(.s-angenommen),:has(.s-erledigt)){--zt:var(--green)}
  .table:has(td.z-titel) tbody tr:has(.s-ueberfaellig){--zt:var(--red)}
  .table:has(td.z-titel) tbody tr:has(.s-entwurf){--zt:var(--line-strong)}
  .table:has(td.z-titel) tbody tr:is(:has(.s-storniert),:has(.s-abgelehnt)){--zt:var(--muted-2)}
  .table:has(td.z-titel) td.z-titel{font-size:1rem}
  .table:has(td.z-titel) td.z-betrag{font-size:1.2rem;letter-spacing:-.01em}
  .table:has(td.z-titel) td.z-kunde{color:var(--text);font-weight:500}
}
/* Lange Angaben (E-Mail-Adressen, Kundennamen) brechen in der Karte um, statt in die Nachbarspalte
   zu laufen – gemessen in der Kundenliste: Die Adresse lag über dem Umsatzbetrag. */
@media (max-width:700px){.table:has(td.z-titel) td{min-width:0;overflow-wrap:anywhere}}

/* Verwaltung und Einwilligungsbanner auf dem Telefon. Breit sind Knopf, Kurztext und Klappkopf unsichtbar. */
.sub-nav-auf,.consent-kurz,.tel-klapp>summary{display:none}
@media (max-width:700px){
  .consent-lang{display:none}
  .consent-kurz{display:inline}
  /* Zu: nur der Knopf mit dem aktuellen Bereich. Auf: alle Bereiche als Zeilen darunter. */
  .sub-nav-viel .sub-nav-auf{display:flex;align-items:center;gap:8px;flex:1 1 100%;min-height:44px;padding:8px 12px;border:0;border-radius:99px;background:var(--akzent-50);color:var(--navy);font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;text-align:start}
  .sub-nav-auf>span{flex:1}
  .sub-nav-auf .nav-count{margin-inline-start:0}
  .sub-nav-auf>.ico:last-child{transition:transform .15s}
  .sub-nav-viel.offen .sub-nav-auf>.ico:last-child{transform:rotate(180deg)}
  .sub-nav-viel:not(.offen)>.sub-nav-i,.sub-nav-viel:not(.offen)>.sub-nav-g{display:none}
  .sub-nav-viel.offen>.sub-nav-g{display:block;flex:1 0 100%;padding:6px 4px 0}
  :root[data-theme=dark] .sub-nav-auf{background:rgba(99,102,241,.14);color:var(--text)}
  .tel-klapp>summary{display:flex;align-items:center;gap:8px;min-height:44px;margin-bottom:8px;font-weight:600;cursor:pointer}
}

/* ---------- Handy-Durchsicht 14.10.2026 (docs/review-handy-2026-10-14.md) ----------
   Schrift: In der Anwendung war die Grundschrift auf dem Telefon 14,5 Pixel; Hinweise unter Feldern,
   Nebenangaben und Beschriftungen landeten bei 10 bis 12,8 Pixeln (gemessen 89 bis 148 Textstellen
   unter 13 Pixeln je Seite). Jetzt: 16 Pixel Grundschrift wie iOS und Android, Hinweise und
   Nebenangaben mindestens 14 Pixel, Großbuchstaben-Beschriftungen 13, Kennzeichen und Zähler 12.
   Die Website (chrome-site) hat ihr eigenes Stilblatt und bleibt, wie sie ist. */
@media (max-width:700px){
  html:has(> body:not(.chrome-site)){font-size:100%}
  body:not(.chrome-site) :is(small,.help,.sub,.desc,.legend,.steps,.range-sep,.tl-datum,.hinweis,.field label,
    .kpi .label,.kpi .sub,.table .sub,.dl .sub,.kalk-grid .lbl,.kalk-grid .sub,.checks li .sub,.preview-note,
    .preview-head .muted,.beleg-zusatz,.beleg-qr .muted,.drawer-timeline time,.wahl-marke,.mitglied-name .sub,
    .fassungen .sub,.einst-was,.einst-stand,.anfrage-sub,.anfrage-vorschau,.btn-sm,.quick .btn,.consent-zweck small,
    .layout-opt small,.timeline,.tl-text,.flash,.kalk-rabatt,.table.table-karten .sub){font-size:.875rem}
  /* Feste Angaben im HTML (style="font-size:.8…rem") – ohne Vorrang bleiben sie klein. */
  body:not(.chrome-site) :is([style*="font-size:.7"],[style*="font-size:.8"]){font-size:.875rem!important}
  /* Spaltenbeschriftungen in Großbuchstaben wirken größer, als sie sind: 13 Pixel. */
  body:not(.chrome-site) :is(.table th,.pos-table th,.doc-preview .pv-items th,.drawer-body h3,.drawer-zahlen .label,
    .sub-nav-g,.profil-fakten dt,.sp-text small){font-size:.8125rem}
  .pos-table td[data-l]::before,.pos-table .c-nr,.pos-table .c-nr::before{font-size:.8125rem}
  .table:has(td.z-titel) td[data-l]::before,.table.table-karten td[data-l]::before{font-size:.875rem}
  /* Kennzeichen und Zähler: 12 Pixel, sonst sprengen sie Kartenköpfe und Filterzeilen. */
  body:not(.chrome-site) :is(.badge,.pill-count,.tab-zahl,.nav-count,.notif-count,.zeichen,.plan-chip){font-size:.75rem}
  /* Tab-Leiste: 12 statt 10,4 Pixel; fünf Beschriftungen passen auch auf 360 Pixel. */
  .tabbar .tab-i{font-size:.75rem}
}

/* Belegvorschau auf dem Telefon als Liste statt Tabelle: Die Tabelle war 358 Pixel breit in
   293 Pixeln Platz, die Spalte „Gesamt“ lag rechts außerhalb, die Beschreibung brach auf
   100 Pixeln um. Jetzt: Nummer und Bezeichnung über die ganze Breite, darunter „Menge × Preis · USt.“
   und rechts die Summe. */
@media (max-width:700px){
  .doc-preview .pv-scroll{overflow-x:visible}
  .doc-preview .pv-items,.doc-preview .pv-items tbody{display:block;width:100%}
  .doc-preview .pv-items thead{display:none}
  .doc-preview .pv-items tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;padding:10px 0;border-bottom:1px solid var(--line)}
  .doc-preview .pv-items td{display:block;padding:0;border:0}
  .doc-preview .pv-items .pv-pos{flex:0 0 1.5em;color:var(--muted)}
  .doc-preview .pv-items .pv-bez{flex:1 1 calc(100% - 1.5em - 6px);min-width:0;overflow-wrap:anywhere}
  .doc-preview .pv-items .pv-menge{margin-inline-start:calc(1.5em + 6px)}
  .doc-preview .pv-items :is(.pv-menge,.pv-preis,.pv-ust){color:var(--muted);font-size:.875rem}
  .doc-preview .pv-items .pv-preis::before{content:"× "}
  .doc-preview .pv-items .pv-ust::before{content:"· "}
  .doc-preview .pv-items .pv-summe{margin-inline-start:auto;font-weight:600}
}

/* Zeilentabellen (Anlage EÜR, Umsatzsteuer-Voranmeldung) auf dem Telefon: Zeile oder Kennzahl links,
   Bezeichnung in der Mitte (sie bricht um), Betrag rechts. Wo es zwei Beträge gibt, stehen sie mit
   Beschriftung (data-l) darunter. Vorher 364 und 537 Pixel breit in 326 Pixeln Platz. */
@media (max-width:700px){
  .table-wrap:has(.table-zeilen){overflow-x:visible;background:none}
  .table.table-zeilen{display:block;width:100%}
  .table.table-zeilen thead{display:none}
  .table.table-zeilen tbody,.table.table-zeilen tfoot{display:block}
  .table.table-zeilen tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:9px 14px;border-bottom:1px solid var(--line)}
  .table.table-zeilen td{display:block;padding:0;border:0;white-space:normal;overflow-wrap:break-word}
  /* Die Bezeichnung wird nie schmaler als ihr längstes Wort; passt der Betrag daneben nicht mehr, steht er darunter rechts. */
  .table.table-zeilen td:nth-child(2){flex:1 1 0}
  .table.table-zeilen td.num:last-child:not([data-l]){margin-inline-start:auto}
  .table.table-zeilen td.num{white-space:nowrap;overflow-wrap:normal}
  .table.table-zeilen tbody td:first-child,.table.table-zeilen tfoot td:first-child{flex:0 0 2.4em;position:static;background:none;text-align:start;color:var(--muted)}
  .table.table-zeilen td[data-l]{flex:1 1 100%;padding-inline-start:calc(2.4em + 10px);display:flex;justify-content:space-between;gap:10px}
  .table.table-zeilen td[data-l]::before{content:attr(data-l);color:var(--muted);font-size:.875rem;white-space:normal}
  .table.table-zeilen td[data-l]:empty{display:none}
  .table.table-zeilen .sub{display:block}
  /* Summenzeile der Kartenform (Monatsübersicht): wie eine Karte, nicht als Zeile nebeneinander. */
  .table.table-karten tfoot tr:has(td.z-kopf){display:block;padding:12px 14px;border-top:1px solid var(--line-strong)}
}

/* Kundenlink: Auf dem Telefon steht der Link über die ganze Breite, Kopieren und Teilen darunter
   nebeneinander – drei Elemente in einer Zeile ließen vom Link 60 Pixel übrig. */
@media (max-width:700px){
  .range>#shareLink{flex:1 1 100%}
  .range>[data-copy],.range>[data-share]{flex:1 1 0;justify-content:center}
}
/* E-Mail-Adressen brechen in schmalen Spalten an beliebiger Stelle um, statt die Nachbarspalte zu überdecken. */
.mail-link{overflow-wrap:anywhere}

/* Dashboard „Fällige Rechnungen“ als Karte: links Nummer und Kunde, rechts Status, Frist und Betrag.
   Mit 16 Pixeln Grundschrift war die Dreispaltentabelle 374 Pixel breit in 326 Pixeln Platz. */
@media (max-width:700px){
  .table.table-faellig td.z-titel{grid-row:1/3}
  .table.table-faellig td.z-status .sub{display:block;margin-top:2px}
  .table.table-faellig td.z-betrag{grid-row:2}
  /* Knöpfe im Positionsmenü erben die Schrift (sonst 13,3 Pixel Browser-Vorgabe); Platzhalter-Chips 14 Pixel. */
  .pos-mehr .dd-item{font:inherit;font-size:1rem}
  body:not(.chrome-site) .kbd{font-size:.875rem}
}

/* ================= Grundstil der Anwendung (Runde 3, 21.10.2026) =================
   Ein Stil für alle Seiten hinter der Anmeldung (C12 in docs/review-bedienung-2026-10-20.md). Die Website bleibt, wie sie ist:
   site.css baut auf denselben Grundbausteinen auf (.btn, .card, Felder) – deshalb stehen die neuen Werte unter .chrome-app bzw.
   .chrome-bare und nicht an den Bausteinen selbst. Die Seitenabschnitte danach (Dienstplan, Kalender, Übersicht …) bauen darauf auf.
   – Abstände 8/16/24 (--s1 … --s3), Innenrand der Karten 20 px (Telefon 16).
   – Karten ohne Schatten, feine Linie; Schatten nur für Menüs, Blätter und Dialoge.
   – Kartenkopf ist Überschrift: kein Strich darunter, Titel links, rechts höchstens ein Knopf oder ein Zähler. Marken im Kopf
     werden zu ruhigem Text mit Farbpunkt – Flächenmarken bleiben dem Status in Listen.
   – Ein gefüllter Knopf je Seite (Navy); alle übrigen hell mit Rahmen oder als Text. „Erfolgreich“ (Grün) ist kein zweiter Hauptknopf.
   – Felder und Knöpfe 44 px, kleine Knöpfe 34 px (auf Touch 44), Fokusring sichtbar.
   – Tabellen: Zeilenlinien, Kopf ohne Fläche, Zeilen 44 px.
   – Seitentitel 1,75 rem (Telefon 1,4), Kartentitel 1,1 rem.
   – Statusfarben aus einem Satz Tokens (--st-…), hell und dunkel. */
.chrome-app .page-head{margin-bottom:var(--s3);gap:var(--s2)}
.chrome-app .page-head .topbar-title h1{line-height:1.2}
.chrome-app .subtitle{font-size:.95rem;margin-top:4px}
.titel-zeile{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.card-head>.titel-zeile{flex:1;min-width:0}
.card-head .titel-zeile h2{flex:none}
.chrome-app .grid{gap:var(--s2)}
.chrome-app .card{box-shadow:none;border:1px solid var(--line);margin-bottom:var(--s3)}
.chrome-app .card-head{border-bottom:0;padding:var(--pad) var(--pad) 0;gap:12px;flex-wrap:wrap;row-gap:var(--s1)}
.chrome-app .card-head h2{font-size:1.1rem;font-weight:600;letter-spacing:-.01em}
/* Zeichen nur in Navigation, Hauptknopf und Leerzuständen (C12 Nr. 12) – nicht vor jedem Kartentitel. */
.chrome-app .card-head h2>.ico{display:none}
.chrome-app .card-head small{color:var(--muted);font-size:.88rem}
.chrome-app .card-body:not(.tight){padding:var(--s2) var(--pad) var(--pad)}
.chrome-app .card>.card-body:first-child:not(.tight),.chrome-app .card>form>.card-body:first-child:not(.tight){padding-top:var(--pad)}
.chrome-app .card-head+.card-body.tight,.chrome-app .card-head+.table-wrap{margin-top:12px}
.chrome-app details>summary.card-head{padding-bottom:var(--s2)}
.chrome-app details[open]>summary.card-head{padding-bottom:0}
.chrome-app .card-foot{padding:var(--s2) var(--pad)}
/* Marken im Kartenkopf: Text mit Farbpunkt statt Fläche. */
.chrome-app .card-head .badge{background:none;padding:0;border-radius:0;font-weight:500;font-size:.85rem;color:var(--muted);gap:6px;text-decoration:none}
.chrome-app .card-head .badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-strong);flex:none}
.chrome-app .card-head .badge:is(.b-green,.s-bezahlt,.s-angenommen,.s-erledigt)::before{background:var(--green)}
.chrome-app .card-head .badge:is(.b-red,.s-ueberfaellig,.s-abgelehnt)::before{background:var(--red)}
.chrome-app .card-head .badge:is(.b-amber,.s-teilbezahlt)::before{background:var(--amber)}
.chrome-app .card-head .badge:is(.b-blue,.b-teal,.s-offen)::before{background:var(--akzent)}
.chrome-app .card-head .badge .ico{display:none}
/* Statusmarken in Listen: ein Farbsatz für hell und dunkel. */
.chrome-app .badge.s-offen,.chrome-app .badge.b-blue{background:var(--st-offen-bg);color:var(--st-offen)}
.chrome-app .badge.s-teilbezahlt,.chrome-app .badge.b-amber{background:var(--st-warn-bg);color:var(--st-warn)}
.chrome-app .badge:is(.s-bezahlt,.s-angenommen,.s-erledigt,.b-green){background:var(--st-ok-bg);color:var(--st-ok)}
.chrome-app .badge:is(.s-ueberfaellig,.s-abgelehnt,.b-red){background:var(--st-err-bg);color:var(--st-err)}
.chrome-app .badge:is(.s-entwurf,.b-neutral){background:var(--st-neutral-bg);color:var(--st-neutral)}
.chrome-app .card-head .badge:is(.s-offen,.b-blue,.s-teilbezahlt,.b-amber,.s-bezahlt,.s-angenommen,.s-erledigt,.b-green,.s-ueberfaellig,.s-abgelehnt,.b-red,.s-entwurf,.b-neutral){background:none;color:var(--muted)}
/* Ein Zeichen statt einer Marke (z. B. „versendet“ in der Belegliste). */
.zeichen-mark{display:inline-flex;vertical-align:middle;margin-inline-start:6px;color:var(--muted-2)}
.text-ruhig{color:var(--muted)}
/* Kennzahlen: Kacheln ohne Schatten. */
.chrome-app .kpi,.chrome-app .kpi:hover{box-shadow:none}
/* Knöpfe: 44 px hoch, flach. */
:is(.chrome-app,.chrome-bare) .btn{min-height:44px;box-shadow:none}
:is(.chrome-app,.chrome-bare) .btn-sm{min-height:34px}
.chrome-app .btn-icon{min-width:44px;justify-content:center}
.chrome-app .btn-success,.chrome-app .btn-success:hover{background:var(--panel);border-color:color-mix(in srgb,var(--green) 50%,var(--line-strong));color:var(--st-ok)}
.chrome-app .btn-success:hover{background:var(--st-ok-bg)}
:root[data-theme=dark] .chrome-app .btn-success{background:var(--panel);color:var(--st-ok);border-color:#2b5a40}
@media (max-width:900px),(pointer:coarse){:is(.chrome-app,.chrome-bare) .btn-sm{min-height:44px}}
/* Ein Hauptknopf je Seite (C12 Nr. 5). Gefüllt bleibt der Hauptknopf im Seitenkopf; steht dort keiner, der erste der Seite. Weitere
   – in späteren Karten, Listenzeilen, Kartenköpfen – erscheinen als normaler Knopf. „Neu“ in der Kopfleiste ist ein Weg, kein
   Hauptknopf der Seite. Menüs, Dialoge und die Speichern-Leiste des Editors stehen nicht in Karten und bleiben, wie sie sind. */
.chrome-app .topbar .btn-neu,
.chrome-app .content:has(.page-actions .btn-primary) .card .btn-primary,
.chrome-app .content .card:has(.btn-primary) ~ .card .btn-primary,
.chrome-app .content :is(.table,.tasks,.card-head,.checks) .btn-primary{background:var(--panel);border-color:var(--line-strong);color:var(--text);box-shadow:none}
.chrome-app .topbar .btn-neu:hover,
.chrome-app .content:has(.page-actions .btn-primary) .card .btn-primary:hover,
.chrome-app .content .card:has(.btn-primary) ~ .card .btn-primary:hover,
.chrome-app .content :is(.table,.tasks,.card-head,.checks) .btn-primary:hover{background:var(--gray-50)}
:root[data-theme=dark] .chrome-app .topbar .btn-neu,
:root[data-theme=dark] .chrome-app .content:has(.page-actions .btn-primary) .card .btn-primary,
:root[data-theme=dark] .chrome-app .content .card:has(.btn-primary) ~ .card .btn-primary,
:root[data-theme=dark] .chrome-app .content :is(.table,.tasks,.card-head,.checks) .btn-primary{background:var(--panel);color:var(--text);border-color:var(--line-strong)}
/* Felder: 44 px, sichtbarer Fokusring. */
:is(.chrome-app,.chrome-bare) :is(input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],input[type=search],input[type=tel],input[type=url],input[type=time],input:not([type]),select){min-height:var(--feld-h)}
.chrome-app .cmdk-head input[type=search]{min-height:0}
:is(.chrome-app,.chrome-bare) :is(input,select,textarea):focus{border-color:var(--akzent);box-shadow:var(--ring)}
:root[data-theme=dark] :focus-visible{outline-color:#a5b4fc}
/* Tabellen: Zeilenlinien, Kopf ohne Fläche. */
.chrome-app .table th{background:none;color:var(--muted);font-size:.75rem}
/* Zeilen 44 px – nur als Tabelle; auf dem Telefon werden viele Listen zu Karten mit eigenen Abständen. */
@media (min-width:701px){
  .chrome-app .table td{padding-top:11px;padding-bottom:11px}
  .chrome-app .table-sm td,.chrome-app .table-sm th{padding-top:8px;padding-bottom:8px}
}
.chrome-app .table tfoot td{background:none}
/* Erklärung in einem Satz und Leerzustand (leer_zustand()). */
.leer{padding:32px 20px}
.leer .illu{margin-bottom:4px}
.leer-satz{margin:8px auto 16px;max-width:60ch;font-size:1rem;color:var(--text)}
.leer-satz .i-tip-text{font-size:.88rem}
.hinweis-zeile{margin:0 0 var(--s2);font-size:.92rem;color:var(--muted)}
.hinweis-zeile .i-tip{margin-inline-end:4px}
.hinweis-zeile b{color:var(--text);font-weight:600}
.abschnitt-titel{font-size:1.1rem;font-weight:600;margin:var(--s1) 0 12px}

/* ---------- Formular-Muster: „Weitere Angaben (n)“ und (i)-Hinweis (aus Runde 1) ----------
   details.mehr hält alles, was nicht Pflicht ist; offen, wenn darin etwas steht oder die letzte Eingabe fehlschlug (details_mehr()).
   .i-tip zeigt Erklärtext erst auf Tippen – kein Schweben, auf dem Telefon als Blatt über der Tab-Leiste. */
details.mehr{margin:0 0 var(--s2)}
details.mehr>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--akzent-600);font-weight:500;font-size:.92rem}
details.mehr>summary::-webkit-details-marker{display:none}
details.mehr>summary .ico{transition:transform .15s}
details.mehr[open]>summary .ico{transform:rotate(90deg)}
details.mehr>.mehr-inhalt{padding-top:6px}
.form-grid>details.mehr,.form-grid>.mehr-voll{grid-column:1/-1}
:root[data-theme=dark] details.mehr>summary{color:#aab4ff}
.i-tip{display:inline-block;position:relative;vertical-align:middle;margin-inline-start:2px}
.i-tip>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;border-radius:50%;color:var(--muted-2)}
.i-tip>summary::-webkit-details-marker{display:none}
.i-tip[open]>summary,.i-tip>summary:hover{color:var(--akzent-600);background:var(--gray-50)}
.i-tip-text{position:absolute;z-index:25;top:calc(100% + 4px);inset-inline-start:0;width:max-content;min-width:240px;max-width:min(440px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);padding:12px 14px;font-size:.86rem;font-weight:400;line-height:1.5;color:var(--text);text-align:start;white-space:normal;letter-spacing:0;text-transform:none}
h1 .i-tip,h2 .i-tip,.card-head .i-tip,.titel-zeile .i-tip{font-size:1rem}
@media (max-width:700px){.i-tip-text{position:fixed;inset-inline:12px;top:auto;bottom:calc(76px + env(safe-area-inset-bottom));min-width:0;max-width:none;width:auto}}
/* Abschnitte eines langen Formulars (Einstellungen → Firma & Steuern): Überschrift zum Zuklappen. */
details.abschnitt{border-top:1px solid var(--line);padding:4px 0}
details.abschnitt:first-of-type{border-top:0}
details.abschnitt>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:48px;font-weight:600;font-size:1rem}
details.abschnitt>summary::-webkit-details-marker{display:none}
details.abschnitt>summary small{font-weight:400;color:var(--muted);font-size:.85rem}
details.abschnitt>summary::after{content:"";width:8px;height:8px;margin-inline-start:auto;border-inline-end:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);transform:rotate(45deg);transition:transform .15s}
details.abschnitt[open]>summary::after{transform:rotate(-135deg)}
details.abschnitt>.abschnitt-inhalt{padding:4px 0 12px}
.form-actions.klebt{position:sticky;bottom:0;z-index:5;background:var(--panel);margin:0 calc(-1 * var(--pad)) calc(-1 * var(--pad));padding:12px var(--pad);border-top:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius)}
@media (max-width:700px){.form-actions.klebt{bottom:calc(56px + env(safe-area-inset-bottom));margin:0 -16px -16px;padding:12px 16px}}

/* ---------- Seitenleiste in Gruppen (F1) ----------
   Eine Gruppe ist ein <details>: am Rechner auf- und zuklappbar (app.js merkt sich die Wahl), im Blatt auf dem Telefon und in der
   schmalen Leiste immer offen. Zugeklappt trägt der Kopf die Summe der Zähler. Der Punkt an „Einstellungen“ meldet Rechtstexte
   mit Platzhaltern (F10) – ohne Band über jeder Seite. */
.nav-sec{display:flex;flex-direction:column;gap:1px}
.nav-sec>summary{list-style:none;cursor:pointer;user-select:none;display:flex;align-items:center;gap:11px;min-height:36px;padding:7px 12px;margin-top:6px;border-radius:var(--radius-sm);color:rgba(226,234,244,.82);font-size:.88rem;font-weight:600}
.nav-sec>summary::-webkit-details-marker{display:none}
.nav-sec>summary>.ico:first-child{width:18px;height:18px;opacity:.72}
.nav-sec>summary>span:not(.nav-punkt){flex:1;min-width:0}
.nav-sec>summary:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-sec>summary:focus-visible{outline:2px solid #c7d2fe;outline-offset:-2px}
.nav-sec-pfeil{opacity:.6;transition:transform .15s}
.nav-sec[open]>summary .nav-sec-pfeil{transform:rotate(180deg)}
.nav-sec[open]>summary .nav-sec-zahl,.nav-sec[open]>summary>.nav-punkt{display:none}
.nav-sec-inhalt{display:flex;flex-direction:column;gap:1px;margin-inline-start:20px;padding-inline-start:8px;border-inline-start:1px solid rgba(255,255,255,.1)}
.nav-sec-inhalt .nav-item.active::before{inset-inline-start:-9px}
.nav-punkt{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:#f0b429;margin-inline-start:6px;box-shadow:0 0 0 2px #0c2239}
.nav-item .nav-punkt{margin-inline-start:auto}
.nav-item .nav-count+.nav-punkt{margin-inline-start:6px}
@media (min-width:901px){
  body.nav-mini .nav-sec>summary{display:none}
  body.nav-mini .nav-sec-inhalt{margin:0;padding:0;border:0}
  body.nav-mini .nav-item .nav-punkt{position:absolute;top:6px;right:8px;margin:0}
}
@media (max-width:900px) and (min-width:701px){.nav-sec>summary{min-height:44px}}
@media (max-width:700px){
  /* Im Blatt: Gruppenkopf als Zwischenüberschrift, Einträge als Kacheln in zwei Spalten. */
  .nav:has(.nav-sec)>.nav-item{grid-column:1/3}
  .nav-sec{grid-column:1/3;display:block}
  .nav-sec>summary{pointer-events:none;min-height:0;margin:0;padding:12px 4px 4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.55)}
  .nav-sec>summary>.ico,.nav-sec>summary .nav-sec-zahl,.nav-sec>summary>.nav-punkt{display:none}
  .nav-sec-inhalt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:0;padding:0;border:0}
}
:lang(ka) .nav-sec>summary{text-transform:none}

/* ---------- Tab-Leiste: „+“-Blatt und rote Zahl an „Übersicht“ ---------- */
.tab-plus>summary{list-style:none}
.tab-plus>summary::-webkit-details-marker{display:none}
.tab-zahl{position:absolute;top:5px;inset-inline-start:calc(50% + 4px);min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--red);color:#fff;font-size:.72rem;font-weight:700;line-height:18px;text-align:center}
:root[data-theme=dark] .tab-zahl{background:#c93c3c}
:root[data-theme=dark] .tabbar .tab-neu{background:#1d4c80}
@media (max-width:700px){
  .tabbar .tab-i{position:relative}
  .tabbar .tab-plus{display:flex;align-items:center;justify-content:center}
  .tabbar .tab-plus>.tab-neu{display:flex;align-items:center;justify-content:center}
  .tabbar .tab-plus[open]>.tab-neu .ico{transform:rotate(45deg)}
  .tabbar .tab-neu .ico{transition:transform .15s}
  .tab-plus-menu{position:fixed;left:10px;right:10px;top:auto;bottom:calc(72px + env(safe-area-inset-bottom));min-width:0;max-width:none;width:auto;padding:12px;border-radius:16px;max-height:min(70vh,520px);overflow:auto}
  .tab-plus-titel{display:block;margin:2px 4px 10px;font-size:.88rem;font-weight:600;color:var(--muted)}
  .tab-plus-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tab-plus-i{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px;border-radius:12px;background:var(--gray-50);color:var(--text);font-weight:500;line-height:1.25;text-decoration:none!important}
  .tab-plus-i .ico{flex:none;color:var(--navy-700)}
  :root[data-theme=dark] .tab-plus-i .ico{color:#9cc2ff}
}
@media (prefers-reduced-motion:reduce){.nav-sec-pfeil,.tabbar .tab-neu .ico,details.mehr>summary .ico,details.abschnitt>summary::after{transition:none}}

/* ---------- Telefon: Abstände 16 px ---------- */
@media (max-width:700px){
  .chrome-app .page-head{margin-bottom:var(--s2)}
  .chrome-app .card{margin-bottom:var(--s2)}
  .chrome-app .card-head{padding:var(--s2) var(--s2) 0}
  .chrome-app .card-body:not(.tight){padding:12px var(--s2) var(--s2)}
  .chrome-app .card>.card-body:first-child:not(.tight),.chrome-app .card>form>.card-body:first-child:not(.tight){padding-top:var(--s2)}
  .chrome-app .card-head+.card-body.tight,.chrome-app .card-head+.table-wrap{margin-top:8px}
  .chrome-app details>summary.card-head{padding-bottom:12px}
  .chrome-app .card-foot{padding:12px var(--s2)}
}

/* ---------- Marketing im Admin-Bereich (views/parts/admin_marketing.php) ---------- */
.mkt-kreise{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 14px}
.mkt-kreis{display:flex;align-items:center;gap:6px;font-size:.9rem;padding:4px 0;min-height:32px}
.mkt-ziel,.mkt-fassung{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 14px;min-width:0}
.mkt-zeile{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px}
.mkt-zeile .field{margin:0;flex:1 1 200px;min-width:0}
.mkt-text{white-space:pre-wrap;font-size:.85rem;background:var(--gray-50);padding:10px;border-radius:8px;overflow-wrap:anywhere}
@media (max-width:700px){.mkt-kreise{grid-template-columns:1fr}.mkt-zeile>*{flex:1 1 100%}.mkt-zahlen{grid-template-columns:1fr 1fr}}

/* ---------- Dienstplan und Zeiterfassung (views/dienstplan.php, zeiten.php, abwesenheiten.php, mitarbeiter.php) ----------
   Am Rechner ein Raster Mitarbeiter × Tage, auf dem Telefon eine Tagesliste: Beide stehen im HTML, die Breite entscheidet
   über Klassen – nicht über das hidden-Attribut, das eine Klassenregel mit display überstimmen würde. Keine Hover-Einblendung:
   Warnungen stehen als Zeichen an der Schicht, in der Liste darunter und auf dem Telefon als Text. */
.dp-leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:16px}
.dp-leiste .tabs{margin-bottom:0}
.dp-blaettern{display:flex;align-items:center;gap:6px}
.dp-jahr{font-weight:600;min-width:3.5em;text-align:center}
.dp-wahl select{width:auto;max-width:100%}
.dp-raster th,.dp-raster td{vertical-align:top}
.dp-raster thead th{text-align:center;white-space:nowrap}
.dp-raster thead th .sub,.dp-raster .dp-name .sub{display:block;font-weight:400;color:var(--muted);font-size:.75rem}
.dp-raster .dp-name{min-width:150px;text-align:start;white-space:nowrap;font-weight:600}
.dp-woche .dp-zelle{min-width:116px;padding:3px 2px}
.dp-monat .dp-zelle{min-width:44px;padding:4px 3px}
.dp-raster .dp-frei{background:var(--gray-50)}
.dp-raster thead .dp-heute{box-shadow:inset 0 -3px 0 var(--akzent-600);color:var(--text)}
/* Die Namensspalte ist Zeilenkopf (th), soll aber wie eine Zelle aussehen – nicht wie die Spaltenköpfe in Versalien. */
.table.dp-raster tbody th{text-transform:none;letter-spacing:normal;font-size:.9rem;color:var(--text);background:var(--panel);border-bottom:1px solid var(--line)}
:root[data-theme=dark] .table.dp-raster tbody th{background:var(--panel);color:var(--text)}
/* Chips ohne Ring (C12 Nr. 11): farbige Kante, heller Grund in der Farbe der Vorlage, Warnung als roter Rand und Punkt. */
.dp-chip{position:relative;display:block;margin:0 0 4px;padding:4px 7px;border-radius:7px;border:1px solid var(--line);border-inline-start:4px solid var(--f,#4f46e5);background:color-mix(in srgb,var(--f,#4f46e5) 8%,var(--panel));font-size:.8rem;font-weight:600;color:var(--text);text-decoration:none;line-height:1.3;white-space:nowrap}
.dp-chip small{display:block;font-weight:400;color:var(--muted);font-size:.72rem;white-space:normal}
.dp-chip.dp-offen{background:var(--amber-50);border-color:#e8c77a;border-inline-start-color:var(--f,#4f46e5)}
.dp-chip.dp-warn{border-color:var(--red)}
.dp-chip.dp-vorschlag{border-style:dashed;background:var(--akzent-50);color:var(--akzent-600)}
.dp-chip .ico{color:var(--red);margin-inline-end:3px;vertical-align:-2px}
.dp-monat .dp-chip{padding:3px 4px;font-size:.72rem;border-inline-start-width:3px}
a.dp-chip:hover{text-decoration:none;background:color-mix(in srgb,var(--f,#4f46e5) 14%,var(--panel))}
.dp-plus{display:flex;align-items:center;justify-content:center;min-height:30px;border-radius:7px;color:var(--muted);border:1px dashed var(--line-strong)}
.dp-punkt{display:inline-block;width:10px;height:10px;border-radius:50%;margin-inline-end:7px;flex:none}
.dp-abw{display:inline-block;padding:2px 7px;border-radius:6px;font-size:.74rem;font-weight:600;margin:0 0 4px;white-space:nowrap}
.dp-abw-urlaub{background:#fef3c7;color:#854d0e}
.dp-abw-krank{background:#fee2e2;color:#991b1b}
.dp-abw-sonstiges{background:var(--gray-50);color:var(--gray-600)}
:root[data-theme=dark] .dp-abw-urlaub{background:#3d300c;color:#fde68a}
:root[data-theme=dark] .dp-abw-krank{background:#421515;color:#fecaca}
.dp-tage{list-style:none;margin:0;padding:0}
.dp-tage-karte{display:none}
.dp-tag{border-bottom:1px solid var(--line);padding:10px 14px}
.dp-tag:last-child{border-bottom:0}
.dp-tag.dp-heute{box-shadow:inset 3px 0 0 var(--akzent-600)}
.dp-tag-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;font-size:.9rem;color:var(--gray-600);min-height:32px}
.dp-zeile{display:flex;align-items:center;gap:8px;padding:6px 0}
.dp-zeile-text{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;overflow-wrap:anywhere}
.dp-zeile .sub{display:block;width:100%;font-size:.82rem;color:var(--muted)}
.dp-zeile .sub-warn{color:var(--red)}
.dp-bearb,.dp-tag-neu{min-width:44px;min-height:44px;justify-content:center;flex:none}
.dp-hinweise{margin:6px 0 0;padding-inline-start:18px;font-size:.88rem}
.dp-hinweise li{margin-bottom:4px}
.dp-leer{margin:0 0 12px;font-size:.88rem}
.dp-unter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.dp-kopieren{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 12px}
.dp-kopieren .field{min-width:150px}
.dp-uhr .card-body{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.dp-uhr-stand{display:flex;flex-direction:column;gap:6px}
.dp-uhr-stand .badge{font-size:.85rem;padding:5px 12px;align-self:flex-start}
.dp-uhr-knoepfe{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.dp-kommen{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.dp-kommen .field{margin-bottom:0;min-width:180px}
.dp-stempel{min-height:48px;min-width:132px;justify-content:center;font-size:1rem}
.dp-storniert td{color:var(--muted)}
.dp-storniert td b{text-decoration:line-through}
.dp-entscheiden{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.dp-entscheiden input{width:auto;min-width:150px;flex:1}
.dp-vorlagen{list-style:none;margin:0 0 16px;padding:0}
.dp-vorlagen li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--line)}
.dp-minus{color:var(--red)}
.dp-kpis .kpi .value{font-size:1.4rem}
@media (max-width:700px){
  .dp-raster-karte{display:none}
  .dp-tage-karte{display:block}
  .dp-blaettern .btn,.dp-leiste .tab{min-height:44px;min-width:44px;justify-content:center}
  .dp-uhr-knoepfe,.dp-kommen,.dp-uhr-knoepfe>form{width:100%}
  .dp-stempel,.dp-kommen .field{width:100%}
  .dp-entscheiden{justify-content:stretch}
  .dp-entscheiden input{flex:1 1 100%}
  .dp-entscheiden .btn{flex:1 1 0;min-height:44px;justify-content:center}
  .dp-kopieren .field{flex:1 1 100%}
}

/* Raster als Editor (Runde 1): Tippziel je Zelle (44 px), Warnpunkt, Pinsel-Chips, Dialog, Tagesliste, einzeilige Kennzahlen. */
.dp-zf{margin:0}
.dp-tipp{-webkit-touch-callout:none;user-select:none;display:block;width:100%;min-height:44px;margin:0;padding:3px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer;text-decoration:none}
.dp-tipp:focus-visible{outline:2px solid var(--akzent-600);outline-offset:1px}
.dp-pinsel-an .dp-tipp{cursor:copy}
.dp-tipp-still{cursor:default}
.dp-tipp.dp-wartet{opacity:.45;pointer-events:none}
.dp-dot{position:absolute;top:-5px;inset-inline-end:-5px;width:11px;height:11px;border-radius:50%;background:var(--red);border:2px solid var(--panel)}
.dp-frei-mark{display:flex;align-items:center;justify-content:center;min-height:36px;border-radius:7px;color:var(--muted-2);border:1px dashed var(--line-strong);font-weight:500}
.dp-raster .dp-frei .dp-frei-mark{border-color:transparent}
.dp-tipp:hover .dp-frei-mark{border-color:var(--line-strong);color:var(--text)}
.dp-fuss{text-align:start}
.dp-fuss .btn{min-height:36px}
.dp-werkzeuge{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dp-werkzeuge form{display:inline}
.dp-werkzeuge .btn{min-height:36px}
.dp-vorlagen-leiste{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px}
.dp-vchip{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:4px 12px;border-radius:99px;border:1px solid var(--line-strong);background:var(--panel);color:var(--text);font:inherit;font-size:.85rem;cursor:pointer}
.dp-vchip b{font-weight:600}
.dp-vchip-frei{color:var(--muted);border-style:dashed}
.dp-vchip-aktiv{outline:2px solid var(--akzent-600);outline-offset:1px;background:var(--akzent-50)}
.dp-vneu summary{min-height:36px}
.dp-vmenu{min-width:320px;max-width:calc(100vw - 24px);padding:12px 14px}
.dp-vmenu .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.dp-vmenu .field{margin-bottom:10px}
.dp-vmenu .dp-vorlagen{margin-bottom:10px}
.dp-vmenu .dp-vorlagen li{font-size:.85rem}
.dp-vmenu .dp-vorlagen form{margin-inline-start:auto}
.dp-ki-menu{min-width:320px;max-width:calc(100vw - 24px);padding:12px 14px;font-size:.88rem}
.dp-ki-menu p{margin:0 0 10px;color:var(--gray-600)}
.dp-ki-menu .field{margin-bottom:12px}
.dp-vorschlag-karte{border:1px dashed var(--akzent-600)}
.dp-vorschlag-leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.dp-vorschlag-leiste .sub{display:block;font-size:.85rem;color:var(--muted)}
.dp-vorschlag-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.dp-vorschlag-knoepfe form{display:inline}
.dp-hinweis-klapp{margin-top:16px}
.dp-hinweis-klapp summary{cursor:pointer;color:var(--red);font-weight:600;min-height:44px;display:flex;align-items:center;gap:6px}
.dp-hinweis-klapp .dp-leer{margin:4px 0 6px}
.dp-dialog{max-width:560px;width:calc(100% - 24px);padding:20px}
.dp-dialog-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.dp-dialog-kopf h2{font-size:1.05rem;margin:0}
.dp-dialog-warn{margin-bottom:12px}
.dp-dialog .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.dp-dialog-knoepfe{justify-content:flex-start;flex-wrap:wrap}
.dp-dialog-platz{flex:1}
.dp-zeile-name{flex:0 0 7.5em;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-zeile .dp-zf{flex:1;min-width:0}
.dp-tipp-zeile{flex:1;min-width:0}
.dp-tipp-zeile .dp-chip{display:inline-block;margin:0 4px 0 0}
.dp-tipp-zeile .dp-frei-mark{min-height:38px;width:48px}
.dp-tage .dp-tag.dp-frei .dp-tag-kopf{color:var(--muted)}
.dp-kpi-zeile{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:baseline;font-size:.92rem;color:var(--muted)}
.dp-kpi-zeile b{font-size:1.2rem;color:var(--text);font-variant-numeric:tabular-nums;margin-inline-start:4px}
.dp-kpi-zeile .dp-minus b{color:var(--red)}
.dp-stempel-gross{min-height:64px;width:100%;justify-content:center;font-size:1.15rem}
.dp-stempel-reihe{display:flex;gap:10px;flex-wrap:wrap}
.dp-stempel-reihe form{flex:1 1 160px;display:flex}
.dp-stempel-reihe .btn{flex:1}
.dp-name-paar{display:flex;gap:8px}
.dp-name-paar input{min-width:0;flex:1}
.dp-liste-kompakt .btn-sm{min-height:36px}
@media (max-width:700px){
  .dp-werkzeuge{width:100%}
  .dp-werkzeuge .btn,.dp-werkzeuge summary{min-height:44px}
  .dp-vchip{min-height:44px}
  .dp-vmenu,.dp-ki-menu{position:fixed;left:12px;right:12px;top:auto;min-width:0;max-width:none;width:auto}
  .dp-vmenu .form-grid,.dp-dialog .form-grid{grid-template-columns:1fr}
  .dp-vorschlag-knoepfe{width:100%}
  .dp-vorschlag-knoepfe form{flex:1}
  .dp-vorschlag-knoepfe .btn{width:100%;justify-content:center;min-height:44px}
}
:root[data-theme=dark] .dp-chip{background:color-mix(in srgb,var(--f,#4f46e5) 18%,var(--panel))}
:root[data-theme=dark] .dp-chip.dp-offen{background:#3a2c12;border-color:#5a4520}
:root[data-theme=dark] .dp-chip.dp-vorschlag{background:var(--akzent-50);color:#c7d2fe}

/* ---------- Dokumente (app/dokumente.php) ---------- */
.dok-warnung{display:flex;gap:10px;align-items:flex-start;background:var(--red-50);color:#9b2626;border:1px solid #f5c6c6;border-radius:10px;padding:12px 16px;font-size:.9rem}
.dok-warnung .ico{flex:none;margin-top:2px}
.dok-warnung ul{margin:6px 0 0}
:root[data-theme=dark] .dok-warnung{background:#3a1c1c;color:#f3b4b4;border-color:#5a2a2a}
.dok-hinweis{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;font-size:.9rem}
.dok-hinweis .ico{flex:none;margin-top:2px}
.dok-ok{color:#15803d;display:flex;gap:6px;align-items:center;margin:0}
.dok-pruefliste{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px}
.dok-pruefliste li{display:flex;gap:8px;align-items:flex-start;font-size:.88rem}
.dok-pruefliste li .ico{flex:none;margin-top:2px}
.dok-pruefliste li.ok .ico{color:#15803d}
.dok-pruefliste li.fehlt{color:#b42318}
.dok-pruefliste li.frei{color:var(--muted)}
:root[data-theme=dark] .dok-pruefliste li.fehlt{color:#f3b4b4}
.dok-hinweise{margin:0;padding-inline-start:18px}
.dok-hinweise li{margin:2px 0}
.dok-unter{font-size:.95rem;margin:14px 0 8px}
.dok-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted);margin:0 0 14px}
.dok-zurueck{margin:0 0 12px}
.dok-zurueck a{display:inline-flex;gap:6px;align-items:center}
.dok-suche{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.dok-suche input[type=search]{flex:1 1 220px;width:auto;min-width:0}
.dok-suche select{width:auto;max-width:100%}
.dok-suche .field{margin:0}
.dok-kontaktwahl{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:14px}
.dok-kontaktwahl .field{flex:1 1 260px;margin:0;min-width:0}
.dok-vorschau{background:#fff;color:#1b2230;border:1px solid var(--line);border-radius:8px;padding:20px 22px;font-size:.92rem;line-height:1.5;overflow-wrap:anywhere}
.dok-vorschau h2.dok-titel{font-size:1.15rem;margin:0 0 12px;color:#0f2f5f}
.dok-vorschau h3{font-size:1rem;margin:16px 0 6px;color:#0f2f5f}
.dok-vorschau p{margin:0 0 8px}
.dok-vorschau ul{margin:0 0 8px;padding-inline-start:20px}
.dok-feld{display:flex;flex-wrap:wrap;gap:4px 12px;border-bottom:1px solid #e3e7ee;padding:4px 0}
.dok-feld-l{color:#5f6876;flex:0 0 200px;max-width:100%}
.dok-feld-w{flex:1 1 160px;min-width:0}
.dok-anschrift{margin-bottom:12px}
.dok-ortdatum{text-align:end;color:#5f6876}
.dok-unterschriften{display:flex;flex-wrap:wrap;gap:20px;margin-top:28px}
.dok-unterschriften>div{flex:1 1 180px;display:flex;flex-direction:column;gap:2px;min-width:0}
.dok-linie{display:block;border-bottom:1px solid #1b2230;height:36px}
.dok-daten{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0 0 12px;font-size:.9rem}
.dok-daten dt{color:var(--muted)}
.dok-daten dd{margin:0;overflow-wrap:anywhere;min-width:0}
.dok-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.dok-aktuell td{font-weight:600}
.dok-editor{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem;line-height:1.45}
.dok-ph-liste{display:flex;flex-wrap:wrap;gap:6px}
.dok-ph-liste .dok-unter{flex:1 1 100%;margin:10px 0 2px}
.dok-ph{white-space:normal;text-align:start;max-width:100%}
.dok-ph code{font-size:.75rem;opacity:.75;overflow-wrap:anywhere}
.dok-hilfe{margin:0;padding-inline-start:18px;font-size:.88rem}
.dok-hilfe li{margin:4px 0}
.dok-hilfe code{overflow-wrap:anywhere}
.dp-zusatz{margin:4px 0 14px}
.dp-zusatz summary{cursor:pointer;color:var(--akzent-600);margin-bottom:10px}
@media (max-width:700px){
  .dok-feld-l{flex-basis:100%}
  .dok-vorschau{padding:14px}
  .dok-suche .btn,.dok-kontaktwahl .btn{min-height:44px}
  .dok-unterschriften>div{flex-basis:100%}
}

/* ---------- Tourenplanung (app/touren.php, assets/touren.js) ----------
   Karte und Liste nebeneinander ab 1000 px, darunter untereinander. Tippziele mindestens 44 px. */
.tr-kopfzeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.tr-gps{font-size:.84rem;display:flex;gap:6px;align-items:flex-start;margin:0 0 14px}
.tr-gps .ico{flex:0 0 auto;width:16px;height:16px;margin-top:2px}
.tr-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:1000px){.tr-raster{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}.tr-karte-spalte{position:sticky;top:calc(var(--topbar-h, 60px) + 12px)}}
.tr-karte{height:440px;border-radius:var(--radius);border:1px solid var(--line);overflow:hidden;background:#e5e9ef;z-index:0}
.tr-karte-klein{height:300px;border-radius:0;border:0}
.tr-karte-leer{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:24px;color:var(--muted);background:var(--panel)}
.tr-karte-leer .ico{width:40px;height:40px}
.tr-hinweis{font-size:.8rem;margin:6px 0 0}
.tr-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tr-knoepfe .btn,.tr-stopp-aktionen .btn,.tr-gross{min-height:44px}
.tr-marker{background:none;border:0}
.tr-marker span{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#4f46e5;color:#fff;font:600 13px/1 system-ui,sans-serif;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.tr-m-angekommen span{background:#0891b2}.tr-m-erledigt span{background:#059669}.tr-m-problem span{background:#dc2626}
.tr-m-spaet span{box-shadow:0 0 0 3px #dc2626}
.tr-m-start span,.tr-m-ziel span{background:#172033;border-radius:8px}
/* Nachstellen 21.10.2026: unsicherer Ort (Befund der Adresssuche) und Details zur Berechnung */
.tr-m-unsicher span{box-shadow:0 0 0 3px #f59e0b}
.tr-vorschlag-karte{font-size:.84rem;margin:10px 0 0}
.tr-berechnung-tabelle .sub{display:block;color:var(--muted);font-size:.82rem}
.tr-berechnung-tabelle td{vertical-align:top;overflow-wrap:anywhere}
.tr-berechnung-zahlen{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:14px 0 0;font-size:.9rem}
.tr-berechnung-zahlen dt{font-weight:600}.tr-berechnung-zahlen dd{margin:0}
@media (max-width:600px){.tr-berechnung-zahlen{grid-template-columns:1fr}.tr-berechnung-zahlen dd{margin-bottom:6px}}
.tr-stopps{list-style:none;margin:0;padding:0}
.tr-stopp{padding:12px 16px;border-bottom:1px solid var(--line)}
.tr-stopp:last-child{border-bottom:0}
.tr-stopp.tr-erledigt{background:color-mix(in srgb, #059669 6%, transparent)}
.tr-stopp.tr-problem{background:color-mix(in srgb, #dc2626 7%, transparent)}
.tr-zieht{opacity:.7;outline:2px dashed var(--line-strong)}
.tr-stopp-kopf{display:flex;align-items:flex-start;gap:10px}
.tr-stopp-text{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.tr-stopp-text .sub{display:block;color:var(--muted);font-size:.84rem}
.tr-nr{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#4f46e5;color:#fff;font-weight:600;font-size:.82rem}
.tr-erledigt .tr-nr{background:#059669}.tr-problem .tr-nr{background:#dc2626}.tr-angekommen .tr-nr{background:#0891b2}
.tr-griff{flex:0 0 auto;width:44px;height:44px;margin:-8px 0 -8px -10px;border:0;background:none;color:var(--muted-2);cursor:grab;touch-action:none;display:inline-flex;align-items:center;justify-content:center}
.tr-stopp-info{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 0 38px;font-size:.82rem;color:var(--muted)}
.tr-stopp-info .ico{width:14px;height:14px;vertical-align:-2px}
.tr-stopp-zeiten{margin:4px 0 0 38px;font-size:.82rem}
.tr-stopp-zeiten:empty{display:none}
.tr-stopp-aktionen{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0 38px}
.tr-bearbeiten,.tr-treffer{margin:10px 0 0 38px}
.tr-bearbeiten summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.tr-umsetzen{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:100%}
.tr-umsetzen select{max-width:100%}
.tr-vergleich th[scope=row]{font-weight:500;text-align:start}
.tr-vorschlag-liste{margin:12px 0;padding-inline-start:22px;font-size:.88rem}
.tr-vorschlag-liste li{display:flex;flex-wrap:wrap;gap:4px 10px;padding:3px 0}
.tr-details>summary{cursor:pointer;list-style:none}
.tr-details>summary::-webkit-details-marker{display:none}
.tr-wahl{display:flex;flex-wrap:wrap;gap:4px 18px}
.tr-datum,.tr-vorlage{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.tr-fahrten{list-style:none;margin:0;padding:0}
.tr-fahrten a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;min-height:44px}
.tr-fahrten li:last-child a{border-bottom:0}
.tr-fahrten .tr-heute a{border-inline-start:4px solid #4f46e5}
.tr-fahrt-stopps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.tr-fahrt-stopp .tr-stopp-info,.tr-fahrt-stopp .tr-stopp-zeiten{margin-inline-start:38px}
.tr-fahrt-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tr-fahrt-knoepfe>*{flex:1 1 140px}
.tr-fahrt-knoepfe form.inline{display:flex}
.tr-fahrt-knoepfe .btn{width:100%;justify-content:center}
.tr-aufklapp{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
.tr-aufklapp summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;font-weight:500}
.tr-unterschrift{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.tr-unterschrift canvas{width:100%;max-width:600px;height:auto;aspect-ratio:600/220;background:#fff;border:1px dashed var(--line-strong);border-radius:8px;touch-action:none}
.tr-nachweis-bilder{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.tr-nachweis-bilder img{max-width:min(100%,260px);height:auto;border:1px solid var(--line);border-radius:6px;background:#fff}
@media (max-width:700px){
  .tr-karte{height:300px}
  .tr-stopp{padding:12px}
  .tr-stopp-info,.tr-stopp-zeiten,.tr-stopp-aktionen,.tr-bearbeiten,.tr-treffer{margin-inline-start:0}
  .tr-stopp-aktionen .btn{flex:1 1 auto;justify-content:center}
  .tr-fahrt-stopp .tr-stopp-info,.tr-fahrt-stopp .tr-stopp-zeiten{margin-inline-start:0}
}
/* Uhrzeitfelder (Tourenplanung, Dienstplan) wie die übrigen Eingabefelder – bisher fehlten sie in den Listen oben. */
input[type=time]{width:100%;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);font:inherit;font-size:.95rem;color:var(--text);background:#fff;transition:border-color .12s,box-shadow .12s}
:root[data-theme=dark] input[type=time]{background:#101827;color:var(--text);border-color:var(--line-strong)}
@media (max-width:900px){input[type=time]{font-size:16px;min-height:44px}}

/* KI-Belegerkennung (views/ausgabe.php): unsichere Felder gelb, mittlere blass; Vorschau des Belegfotos neben dem Formular. */
.ki-niedrig{outline:2px solid #e0a800;outline-offset:1px;background:#fffbe6}
.ki-mittel{outline:2px solid #e6d28a;outline-offset:1px}
:root[data-theme=dark] .ki-niedrig{background:#3a3310;outline-color:#d9a400}
.ki-beleg{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}.ki-beleg img{max-width:100%;max-height:260px;border:1px solid var(--line);border-radius:8px}

/* ---------- App (Capacitor): Sperrbild der App-Sperre und Kamera-Knopf (public/assets/app-bruecke.js) ---------- */
/* Das Sperrbild hängt direkt am <html>, vor dem <body>, damit es vor dem ersten Inhalt da ist; der Inhalt bleibt unsichtbar. */
html.app-gesperrt body{visibility:hidden}
.app-sperre{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#0f2a4a;color:#fff;padding:calc(env(safe-area-inset-top) + 24px) 24px calc(env(safe-area-inset-bottom) + 24px);text-align:center;visibility:visible}
.app-sperre-box{max-width:320px}
.app-sperre-box svg{width:56px;height:56px;color:#2fd4c0}
.app-sperre-box b{display:block;font-size:1.3rem;margin:14px 0 4px}
.app-sperre-box p{margin:0 0 22px;color:#c9d8ea}
.app-sperre-box .btn{min-height:48px;padding:0 26px;background:#2fd4c0;color:#0f2a4a;border:0}
.app-kamera{margin-top:8px}
/* Ladebalken beim Seitenwechsel und Hinweis der Zurück-Taste (app-bruecke.js); liegen am <html>, also auch vor dem <body> sichtbar. */
.app-ladebalken{position:fixed;left:-30%;top:env(safe-area-inset-top, 0px);width:30%;height:3px;border-radius:0 2px 2px 0;background:#2fd4c0;z-index:10001;animation:app-laden 1.1s ease-in-out infinite}
@keyframes app-laden{0%{left:-30%}100%{left:100%}}
.app-hinweis{position:fixed;left:50%;bottom:calc(36px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);max-width:calc(100vw - 32px);padding:10px 18px;border-radius:999px;background:#0f2a4a;color:#fff;font-size:.9rem;line-height:1.3;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.3);z-index:10001}
@media (prefers-reduced-motion:reduce){.app-ladebalken{animation:none;left:0;width:100%;opacity:.7}}

/* ---------- Kalender (app/views/kalender.php) ---------- */
.kal-ebenen .dd-menu{right:auto;left:0}
.kal-ebenen-menu{padding:10px 12px;gap:2px}
.kal-ebenen-menu .btn{margin-top:8px;align-self:flex-start}
.kal-ebene{min-height:32px}
.kal-farbe{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--f,#64748b);margin-inline-end:7px;vertical-align:-1px}
.kal-monat th,.kal-monat td,.kal-woche th,.kal-woche td{vertical-align:top}
.kal-monat thead th,.kal-woche thead th{text-align:center;white-space:nowrap}
.kal-woche thead th a{color:inherit;text-decoration:none}
.kal-woche thead th .sub,.kal-monat .kal-kw{font-weight:400;color:var(--muted);font-size:.78rem}
.kal-monat .kal-kw{width:34px;text-align:center;padding:6px 2px}
.kal-monat .kal-kw a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;border-radius:6px}
.kal-monat .kal-kw a:hover{background:var(--gray-50);color:var(--text)}
.kal-tag{width:13.5%;min-width:108px;height:96px;padding:4px 4px 6px}
.kal-woche .kal-tag{min-height:220px;height:auto;min-width:120px}
.kal-frei{background:var(--gray-50)}
.kal-aussen .kal-nr,.kal-aussen .kal-e{opacity:.55}
.kal-tag-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.kal-nr{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;border-radius:50%;font-weight:600;font-size:.86rem;color:var(--text);text-decoration:none}
.kal-nr:hover{background:var(--gray-50)}
.kal-heute .kal-nr{background:var(--akzent-600);color:#fff}
.kal-plus{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;border-radius:6px;color:var(--muted);text-decoration:none;font-weight:600;border:1px dashed transparent}
.kal-plus:hover{border-color:var(--line-strong);color:var(--text)}
.kal-plus-woche{width:100%;margin-bottom:4px;border-color:var(--line)}
/* Chips ohne Ring: nur farbige Kante und heller Grund (C12 Nr. 11) */
.kal-e{display:block;margin:0 0 3px;padding:2px 6px;border-radius:6px;border-inline-start:3px solid var(--f,#64748b);background:color-mix(in srgb,var(--f,#64748b) 9%,var(--panel));font-size:.76rem;line-height:1.3;color:var(--text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kal-e b{font-weight:600;color:inherit}
.kal-e.kal-rot{--f:var(--red);color:var(--red)}
.kal-e.kal-g-feiertag{background:none;color:var(--muted)}
a.kal-e:hover{background:var(--gray-50)}
.kal-mehr{display:block;font-size:.74rem;color:var(--muted);text-decoration:none;padding:2px 6px}
.kal-mehr:hover{color:var(--text)}
.kal-agenda{display:none}
.kal-agenda-immer{display:block}
.kal-zeile .kal-e{white-space:normal;font-size:.9rem;flex:1;min-width:0;padding:6px 10px}
.kal-zeile{flex-wrap:wrap}
.kal-zeile .sub{padding-inline-start:14px}
.kal-karte-knoepfe{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.kal-karte p{margin:0 0 8px}
.kal-karte .kal-notiz{white-space:pre-wrap;color:var(--gray-600);font-size:.92rem}
.kal-label{display:block;font-weight:600;font-size:.85rem;margin-bottom:6px}
.kal-teilnehmer{display:flex;flex-wrap:wrap;gap:4px 18px}
.kal-teilnehmer .field.check{min-height:36px}
.kal-ganztag{align-self:end;min-height:44px}
@media (max-width:700px){
  .kal-raster-karte{display:none}
  .kal-agenda{display:block}
  .kal-ebenen .dd-menu{position:fixed;left:12px;right:12px;top:auto;max-width:none;width:auto}
  .kal-ebenen-menu .btn{min-height:44px}
}

/* ---------- Kalender und Übersicht: vier Gruppenfarben (Runde 2) ----------
   Geld Navy, Team Grün, Termine Akzent, Unterwegs Amber; Rot nur für Überfälliges. Gelten für Kalender, Übersicht und Liste. */
.kal-g-geld{--f:var(--navy-700)}
.kal-g-team{--f:var(--green)}
.kal-g-termine{--f:var(--akzent-600)}
.kal-g-unterwegs{--f:var(--amber)}
.kal-g-feiertag{--f:var(--gray-600)}
:root[data-theme=dark] .kal-g-geld{--f:#9cc2ff}
:root[data-theme=dark] .kal-g-termine{--f:#a5b4fc}
:root[data-theme=dark] .kal-g-feiertag{--f:#9aa4b2}

/* Kalender: Leiste mit Ansicht und Blättern, darunter vier Schalter */
.kal-leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 16px}
.kal-ansichten{display:inline-flex;padding:3px;border-radius:12px;background:var(--gray-50);border:1px solid var(--line)}
.kal-seg{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:9px;color:var(--muted);font-weight:500;text-decoration:none!important}
.kal-seg.aktiv{background:var(--panel);color:var(--text);font-weight:600;box-shadow:var(--shadow-xs)}
.kal-blaettern{display:flex;gap:8px}
.kal-blaettern .btn{min-height:40px;min-width:44px;justify-content:center}
.kal-schalter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 24px}
.kal-schalter form{display:inline-flex}
.kal-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:99px;border:1px solid var(--line-strong);background:var(--panel);color:var(--muted);font:inherit;font-size:.9rem;font-weight:500;cursor:pointer}
.kal-chip i{display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid var(--f);flex:none}
.kal-chip.an{color:var(--text);border-color:color-mix(in srgb,var(--f) 55%,var(--line));background:color-mix(in srgb,var(--f) 8%,var(--panel))}
.kal-chip.an i{background:var(--f)}
.kal-chip:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
.kal-heute{box-shadow:inset 0 3px 0 var(--akzent-600)}
/* Liste „Nächste 14 Tage“: Tage als Abschnitte, heute hervorgehoben, jede Zeile tippbar */
.kal-liste{list-style:none;margin:0;padding:0}
.kal-ltag{padding:16px 20px;border-bottom:1px solid var(--line)}
.kal-ltag:last-child{border-bottom:0}
.kal-ltag-kopf{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;font-size:1rem;font-weight:600}
.kal-ltag-kopf small{font-weight:400;font-size:.88rem;color:var(--muted)}
.kal-lheute{background:color-mix(in srgb,var(--akzent) 5%,var(--panel));box-shadow:inset 3px 0 0 var(--akzent-600)}
.kal-lheute .kal-ltag-kopf>span{color:var(--akzent-600)}
.kal-liste-karte .kal-ltag:first-child{border-radius:var(--radius) var(--radius) 0 0}
.kal-lzeilen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.kal-lz{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:8px 12px;border-radius:10px;border-inline-start:3px solid var(--f);background:color-mix(in srgb,var(--f) 6%,var(--panel));color:var(--text);text-decoration:none!important}
.kal-lz-zeit{flex:0 0 64px;display:flex;flex-direction:column;font-size:.88rem;line-height:1.35;font-variant-numeric:tabular-nums}
.kal-lz-zeit b{font-weight:600}
.kal-lz-zeit span{color:var(--muted);font-size:.82rem}
.kal-lz-titel{flex:1;min-width:0;line-height:1.35;overflow-wrap:anywhere}
.kal-lz-titel small{display:block;margin-top:2px;color:var(--muted);font-size:.82rem}
.kal-lz.kal-rot{--f:var(--red)}
.kal-lz.kal-rot .kal-lz-titel{color:var(--red)}
.kal-lz.kal-g-feiertag{min-height:32px;padding-block:4px;background:none;border-inline-start-color:transparent;color:var(--muted)}
.kal-lleer{padding:4px 0;color:var(--muted);font-size:.9rem}
@media (hover:hover){a.kal-lz:hover{background:color-mix(in srgb,var(--f) 12%,var(--panel))}}
/* Termin: vier Felder, alles Weitere eingeklappt */
.kal-form{grid-template-columns:repeat(2,minmax(0,1fr))}
.kal-von-bis{display:flex;align-items:center;gap:8px}
.kal-von-bis input{flex:1;min-width:0}
.kal-von-bis[hidden]{display:none}
.kal-zeit .kal-ganztag{align-self:flex-start;margin:4px 0 0;min-height:44px}
.kal-form-karte details.mehr{margin:4px 0 16px}
@media (max-width:700px){
  .kal-leiste{gap:8px}
  .kal-ansichten{flex:1 1 auto}
  .kal-seg{flex:1;justify-content:center;min-height:44px;padding:0 12px}
  .kal-blaettern .btn,.kal-chip{min-height:44px}
  .kal-schalter{gap:8px}
  .kal-ltag{padding:16px}
  .kal-lz-zeit{flex-basis:52px}
  .kal-form{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Übersicht (Runde 2) ----------
   Heute · Braucht dich (links) – Schnell · Zahlen (rechts); auf dem Telefon Heute, Braucht dich, Zahlen, Schnell. Karten, Köpfe
   und Abstände kommen aus dem Grundstil. */
.ue-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:24px;align-items:start}
.ue-haupt,.ue-seite{display:flex;flex-direction:column;gap:24px;min-width:0}
.ue .card{margin-bottom:0}
.ue-karte>.card-head{align-items:baseline}
.ue-kopf-link{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0 -12px auto;font-size:.9rem;font-weight:500}
.ue-willkommen{margin-bottom:24px}
.ue-willkommen h2{font-size:1.25rem;margin-bottom:8px}
.ue-schritte{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ue-schritte li{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;border:1px solid var(--line);border-radius:12px}
.ue-schritte span{color:var(--muted);font-size:.9rem}
.ue-schritte .btn{min-height:40px}
.ue-fuss{margin:16px 0 0}
.ue-leer{margin:0;color:var(--muted)}
/* Heute */
.ue-tag+.ue-tag{margin-top:16px}
.ue-tag h3{margin:0 0 8px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ue-tag h3 small{text-transform:none;letter-spacing:0;font-weight:400;font-size:.82rem}
.ue-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ue-z{--f:var(--line-strong);display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 12px;border-radius:10px;border-inline-start:3px solid var(--f);background:color-mix(in srgb,var(--f) 6%,var(--panel));color:var(--text);text-decoration:none!important}
.ue-z.kal-g-geld{--f:var(--navy-700)}.ue-z.kal-g-team{--f:var(--green)}.ue-z.kal-g-termine{--f:var(--akzent-600)}.ue-z.kal-g-unterwegs{--f:var(--amber)}.ue-z.kal-g-feiertag{--f:var(--gray-600)}
.ue-z-zeit{flex:0 0 44px;font-weight:600;font-size:.9rem;line-height:1.4;font-variant-numeric:tabular-nums}
.ue-z-ico{margin-top:2px;color:var(--f)}
.ue-z-titel{flex:1;min-width:0;line-height:1.4;overflow-wrap:anywhere}
.ue-z-titel small{display:block;color:var(--muted);font-size:.82rem}
.ue-z.kal-rot{--f:var(--red)}
.ue-z.kal-rot .ue-z-titel{color:var(--red)}
.ue-z-mehr{background:none;border-inline-start-color:transparent;color:var(--akzent-600);font-weight:500;align-items:center}
@media (hover:hover){a.ue-z:hover{background:color-mix(in srgb,var(--f) 12%,var(--panel))}}
/* Braucht dich: eine Liste, die ganze Zeile führt zur Erledigung */
.ue-aufgaben-liste{list-style:none;margin:0 -8px;padding:0}
.ue-a{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;border-bottom:1px solid var(--line)}
.ue-a:last-child{border-bottom:0}
.ue-a-link{flex:1 1 240px;display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 8px;border-radius:10px;color:var(--text);text-decoration:none!important}
.ue-a-link>.ico{color:var(--muted-2)}
.ue-a-text{flex:1;min-width:0;line-height:1.4;overflow-wrap:anywhere}
.ue-a-knopf{flex:none;color:var(--akzent-600);font-size:.88rem;font-weight:600;white-space:nowrap}
.ue-p3 .ue-a-link>.ico{color:var(--red)}
.ue-p3 .ue-a-text{font-weight:500}
.ue-p2 .ue-a-link>.ico{color:var(--amber)}
.ue-a>form{margin:0 8px 10px auto}
.ue-a-aktion{min-height:40px}
@media (hover:hover){.ue-a-link:hover{background:var(--gray-50)}}
.ue-erledigt{display:flex;align-items:center;gap:12px;padding:4px 0}
.ue-erledigt .ico{width:28px;height:28px;color:var(--green)}
.ue-erledigt>div{display:flex;flex-direction:column}
.ue-erledigt span{color:var(--muted);font-size:.9rem}
/* Schnell: höchstens sechs Ziele, zwei Spalten */
.ue-schnell-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ue-s{min-height:56px;justify-content:flex-start;gap:10px;padding:8px 14px;white-space:normal;text-align:start;line-height:1.25}
.ue-s:not(.btn-primary) .ico{color:var(--akzent-600)}
/* Zahlen: vier Zeilen statt vier Kacheln, Verlauf aufklappbar */
.ue-zahlen{display:flex;flex-direction:column}
.ue-zahl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;min-height:44px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none!important}
.ue-zahl:first-child{padding-top:4px}
.ue-zahl-l{font-size:.9rem;color:var(--muted)}
.ue-zahl-w{grid-column:2;grid-row:1/span 2;align-self:center;text-align:end;font-size:1.25rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ue-zahl-u{grid-column:1;font-size:.82rem;color:var(--muted-2)}
.ue-zahl-u.rot,.ue-zahl-w.rot,.ue-jahr .rot{color:var(--red)}
.ue-jahr .gut{color:var(--green)}
.ue-verlauf{margin:8px 0 0}
.ue-verlauf .chart-wrap{margin-top:4px}
.ue-leg-aus{background:#6366f1}
.ue-jahr{display:grid;gap:8px;margin-top:16px;font-size:.9rem}
.ue-jahr>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
.ue-jahr small{flex-basis:100%;color:var(--muted)}
/* Erste Schritte: eingeklappt, solange die Einrichtung offen ist */
.ue-start>summary{list-style:none;cursor:pointer;min-height:44px;padding-bottom:16px}
.ue-start>summary::-webkit-details-marker{display:none}
.ue-start>summary small{margin-inline-start:auto}
.ue-start[open]>summary{padding-bottom:8px}
.ue-start .tasks li{padding:10px 20px}
.ue-start .ue-fuss{margin:0;padding:8px 20px 16px}
/* Rolle „personal“: eine Spalte */
.ue-personal{display:flex;flex-direction:column;gap:24px;max-width:760px}
.ue-uhr .dp-stempel-reihe{margin:0}
@media (max-width:1100px){
  .ue-raster{grid-template-columns:minmax(0,1fr)}
  .ue-seite .ue-schnell{order:2}
}
@media (max-width:900px){.ue-schritte{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .ue-raster,.ue-haupt,.ue-seite,.ue-personal{gap:16px}
  .ue-start .tasks li{padding:10px 16px}
  /* Schmal: der Knopftext rückt unter den Text, statt ihn auf drei Zeilen zu drücken */
  .ue-a-link{flex-wrap:wrap;gap:4px 12px}
  .ue-a-text{flex:1 1 calc(100% - 40px)}
  .ue-a-knopf{margin-inline-start:30px;font-size:.85rem}
}
:root[data-theme=dark] .ue-a-link:hover{background:rgba(255,255,255,.04)}

/* ---------- Runde 4: Dokumente und Touren ----------
   Auswahl „Dokument erstellen“ (Suche, Chips, eine Zeile je Vorlage), Prüfung als Checkliste, Platzhalter-Suche im Editor,
   Mehrfachauswahl der Stopps, Stopp-Dialog, Fahrer-Ansicht mit einem großen Knopf je Status. */
.dok-dialog{max-width:640px;width:calc(100% - 24px);padding:20px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto}
.dok-wahl-fuer{margin-bottom:12px}
.dok-wahl-fuer .field{margin:0}
.dok-wahl-suche{width:100%;margin-bottom:10px}
.dok-wahl-chips{margin-bottom:8px}
.dok-wahl-chips .pill.aktiv{background:var(--akzent-600);border-color:var(--akzent-600);color:#fff}
.dok-wahl-gruppe h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:16px 0 4px}
.dok-wahl-zeile{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.dok-wahl-zeile:last-child{border-bottom:0}
.dok-wahl-link{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;padding:10px 4px;min-height:44px;color:inherit;text-decoration:none!important;overflow-wrap:anywhere}
a.dok-wahl-link:hover b{color:var(--akzent-600)}
.dok-wahl-link .sub{color:var(--muted);font-size:.86rem}
.dok-wahl-beleg{flex-wrap:wrap}
.dok-wahl-belege{display:flex;flex-wrap:wrap;gap:4px 14px;padding:0 4px 10px;font-size:.9rem}
.dok-wahl-leer{margin:12px 0 0}
.dok-suche details.mehr{flex:1 1 100%;margin:0}
.dok-suche-mehr{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.dok-suche-mehr .field{margin:0}
.dok-fehlt>label,.dok-fehlt>.lbl-text{color:var(--amber)}
.dok-fehlt input,.dok-fehlt select,.dok-fehlt textarea{border-color:var(--amber)}
.dok-fehlt-zahl{color:var(--amber);font-weight:600}
.dok-check-kopf{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:.92rem}
.dok-check-kopf.ok .ico{color:var(--green)}
.dok-check-kopf.warn .ico{color:var(--amber)}
.dok-check{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px;font-size:.86rem}
.dok-check li{display:flex;gap:8px;align-items:flex-start}
.dok-check li .ico{flex:none;width:14px;height:14px;margin-top:2px;color:var(--green)}
.dok-check li.frei{color:var(--muted)}
.dok-punkt{flex:none;width:8px;height:8px;border-radius:50%;background:var(--amber);margin:6px 3px 0}
.dok-check li.frei .dok-punkt{background:var(--line-strong)}
@media (min-width:900px){.dok-check-2{grid-template-columns:1fr 1fr;column-gap:20px}}
.dok-check-alle{margin:0 0 12px;font-size:.86rem}
.dok-check-alle>summary{cursor:pointer;color:var(--akzent-600);min-height:32px;display:inline-flex;align-items:center}
.dok-check-alle .dok-check{margin-top:6px}
.dok-editor{max-height:60vh;resize:vertical}
.dok-ph-suche{width:100%;margin-bottom:8px}
.dok-ph-gruppe{border-top:1px solid var(--line)}
.dok-ph-gruppe>summary{cursor:pointer;min-height:40px;display:flex;align-items:center;gap:6px;font-weight:500;font-size:.9rem}
.dok-ph-gruppe>summary small{color:var(--muted);font-weight:400}
.dok-ph-gruppe .dok-ph-liste{padding:4px 0 10px}

.tr-wahl-box{margin:0 0 var(--s2)}
.tr-wahl-kopf{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tr-wahl-kopf .lbl-text{font-weight:500;font-size:.9rem}
.tr-wahl-zahl{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--akzent-600);color:#fff;font-size:.78rem}
.tr-wahl-box input[type=search]{width:100%;margin-bottom:6px}
.tr-wahl-liste{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel)}
.tr-wahl-zeile{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;min-height:44px;margin:0}
.tr-wahl-zeile:last-of-type{border-bottom:0}
.tr-wahl-zeile input{flex:none;width:20px;height:20px;margin-top:1px}
.tr-wahl-zeile>span{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.tr-wahl-zeile .sub{color:var(--muted);font-size:.84rem}
.tr-wahl-zeile:has(input:checked){background:var(--akzent-50)}
.tr-wahl-aus{cursor:default;opacity:.6}
.tr-wahl-leer{padding:10px 12px;margin:0}
.tr-wahl-adressen{margin-top:6px}
.tr-dialog{max-width:560px;width:calc(100% - 24px);padding:20px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto}
.tr-dialog .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.tr-dialog .tr-umsetzen{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.tr-kopfzeile .tr-gps{margin:0}
.tr-knoepfe .i-tip{align-self:center}
.tr-naechster .card-body{display:flex;flex-direction:column;gap:10px}
.tr-naechster .tr-gross{justify-content:center;font-size:1.05rem;min-height:52px}
.tr-alt-navi{font-size:.88rem;align-self:center}
.tr-fahrt-navi{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0 38px}
.tr-fahrt-navi .btn{min-height:44px}
.tr-status-knopf{margin-top:12px}
.tr-status-knopf form{display:block}
.tr-status-knopf .btn{width:100%;justify-content:center;min-height:52px;font-size:1.05rem}
@media (max-width:700px){

  .tr-fahrt-navi{margin-inline-start:0}
  .tr-fahrt-navi .btn{flex:1 1 auto;justify-content:center}
}
/* Vorher/Nachher-Vergleich der Reihenfolge: auf dem Telefon drei schmale Spalten statt Seitwärts-Scrollen (Runde 4). */
.tr-vergleich{width:100%;table-layout:fixed}
@media (max-width:700px){.tr-vergleich th,.tr-vergleich td{padding:6px 4px;font-size:.84rem;overflow-wrap:anywhere}.tr-vergleich th[scope=row]{width:40%}}
.tr-gps{align-items:center;flex-wrap:nowrap}
.tr-gps .i-tip{flex:none}
.field.dok-fehlt>label{color:var(--amber)}
/* KI-Stellen (Runde 5, app/ki_stellen.php): Eingabe „aus einem Satz“, Vorschlag der KI, „Text vorschlagen“, Antworten, Vorschau der Stopps.
   .ki-text startet mit hidden (ohne Skript unsichtbar) – die Regel unten hält das, auch wenn eine Klasse display setzt. */
.ki-satz{display:grid;gap:8px;margin:0}
.ki-satz-titel{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.92rem;margin:0}
.ki-satz-zeile{display:flex;gap:8px;align-items:flex-start}
.ki-satz-zeile input,.ki-satz-zeile textarea{flex:1;min-width:0}
.ki-satz-zeile .btn{flex:none}
.ki-satz-fuss{margin:0;font-size:.82rem;color:var(--muted)}
.ki-satz-hinweis{font-size:.88rem;margin:0 0 8px}
.ki-einw{margin:0}
.ki-einw label{font-size:.85rem}
.kal-form-karte .ki-satz,.kal-form-karte .ki-vorschlag,form.ki-satz+form{margin-bottom:14px}
.ki-hinweise{margin:6px 0 0;padding-inline-start:18px;font-size:.9rem}
.ki-text{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:-4px 0 10px}
.ki-text[hidden]{display:none}
.ki-text-meldung{font-size:.85rem;color:var(--muted)}
.ki-antwort{margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--gray-50)}
.ki-antwort p{margin:0 0 6px}
.ki-antwort-frage{font-weight:600}
.ki-links{display:flex;gap:6px;flex-wrap:wrap}
.ki-stopps{list-style:none;margin:8px 0 12px;padding:0;display:grid;gap:6px}
.ki-stopps li{padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.ki-stopps label{display:flex;flex-wrap:wrap;gap:2px 8px}
.ki-stopps small{flex-basis:100%;color:var(--muted)}
.ki-plus{padding:0 4px 12px;margin:0 0 10px;border-bottom:1px solid var(--line)}
.ki-plus input{width:100%}
.ki-plus-knoepfe{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:600px){.ki-satz-zeile{flex-direction:column;align-items:stretch}}
.dd-menu .ki-plus-knoepfe .btn{flex:1;width:auto;justify-content:center;border:1px solid var(--line);background:var(--gray-50)}
.dd-menu .ki-text .btn{width:auto;border:1px solid var(--line)}

/* KI-Belegerkennung: Fortschritt beim Auslesen (Nachstellen 21.10.2026) */
.ki-fortschritt{display:flex;gap:10px;align-items:flex-start}.ki-fortschritt>div{flex:1 1 auto;min-width:0}
.ki-fortschritt .ki-sekunden{font-variant-numeric:tabular-nums;color:var(--muted)}
.ki-balken{height:6px;border-radius:3px;background:color-mix(in srgb, currentColor 15%, transparent);overflow:hidden;margin:8px 0}
.ki-balken span{display:block;height:100%;width:35%;border-radius:3px;background:currentColor;opacity:.55;animation:ki-balken 1.6s ease-in-out infinite}
@keyframes ki-balken{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@media (prefers-reduced-motion:reduce){.ki-balken span{animation:none;width:100%;opacity:.3}}
.ki-lange{display:block;margin-top:6px}
.ki-diagnose-stufe-ok{color:var(--green,#059669)}.ki-diagnose-stufe-warn{color:#b45309}.ki-diagnose-stufe-fehler{color:#dc2626}
.ki-diagnose td{vertical-align:top;overflow-wrap:anywhere}