:root{
  --blau:#1f4e79; --blau-hell:#2f5f8f; --rand:#d8e0e8; --hintergrund:#f5f7fa;
  --text:#1c2733; --grau:#5f7184; --gruen:#1e7a52; --rot:#b3261e; --gelb:#8a6100;
}
*{box-sizing:border-box}
/* Bildlaufleiste immer einplanen — sonst rutscht die ganze Seite samt Menü
   seitlich, je nachdem ob die Seite lang oder kurz ist. */
html{overflow-y:scroll;scrollbar-gutter:stable}
body{margin:0;background:var(--hintergrund);color:var(--text);
  font:16px/1.55 "Segoe UI",system-ui,-apple-system,sans-serif}
a{color:var(--blau);text-decoration:none}
a:hover{text-decoration:underline}

.kopf{background:var(--blau);color:#fff;view-transition-name:kopf}
/* Seitenwechsel ohne Aufblitzen: Der Kopf bleibt stehen, nur der Inhalt blendet kurz über
   (Chrome/Edge; andere Browser wechseln wie bisher). */
@view-transition{navigation:auto}
::view-transition-group(kopf),::view-transition-old(kopf),::view-transition-new(kopf){animation:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:.12s}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* Kopf mit Menü bleibt beim Bildlauf oben stehen (auf dem Handy nicht — dort wäre er zu hoch) */
@media (min-width:601px){
  .kopf{position:sticky;top:0;z-index:40;box-shadow:0 2px 8px rgba(15,35,55,.18)}
  html{scroll-padding-top:7.5rem}
}
/* Feste Anordnung in einer Zeile: Logo links, Menü, Personensymbol rechts.
   Auf schmalen Bildschirmen rutscht das Menü unter Logo und Symbol. */
.kopf-inhalt{max-width:1180px;margin:0 auto;padding:.55rem 1.2rem;display:grid;grid-template-columns:auto 1fr auto;
  grid-template-areas:"marke nav benutzer";align-items:center;gap:.45rem 1.6rem}
.marke{grid-area:marke;justify-self:start;color:#fff;font-weight:700;font-size:1.15rem;letter-spacing:.2px;white-space:nowrap}
.marke span{font-weight:400;opacity:.7;margin-left:.3rem}
/* Kundenlogo: auf weissem Feld, damit auch dunkle oder farbige Logos auf dem Blau lesbar sind */
.marke-logo{display:inline-flex;align-items:center;background:#fff;border-radius:6px;padding:.3rem .6rem;line-height:0}
.marke-logo img{display:block;max-height:34px;max-width:200px;width:auto;height:auto}
.marke-logo:hover{text-decoration:none;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.kopf nav{grid-area:nav;display:flex;flex-wrap:wrap;gap:.2rem 1.1rem}
.kopf nav a{color:#dbe6f0;padding:.25rem 0;border-bottom:2px solid transparent}
.kopf nav a:hover{color:#fff;text-decoration:none}
.kopf nav a.aktiv{color:#fff;border-bottom-color:#fff}
.kopf-rechts{grid-area:benutzer;justify-self:end;display:flex;align-items:center;gap:.5rem}
.kopf-menue{position:relative}
.kopf-menue summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.kopf-menue summary::-webkit-details-marker{display:none}
.kopf-menue summary:hover,.kopf-menue[open] summary{background:rgba(255,255,255,.14);border-color:#fff}
.kopf-menue summary.aktiv{background:rgba(255,255,255,.2);border-color:#fff}
.kopf-feld{position:absolute;right:0;top:calc(100% + .4rem);z-index:50;min-width:230px;background:#fff;color:var(--text);
  border:1px solid var(--rand);border-radius:8px;box-shadow:0 8px 24px rgba(20,40,60,.18);padding:.7rem .9rem;font-size:.92rem}
.kopf-feld .benutzer-name{font-weight:600}
.kopf-feld hr{border:0;border-top:1px solid var(--rand);margin:.55rem 0}
.kopf-feld a{display:block;padding:.25rem 0;color:var(--blau)}
.kopf-feld a.aktiv{font-weight:600}
@media (max-width:900px){
  .kopf-inhalt{grid-template-columns:1fr auto;grid-template-areas:"marke benutzer" "nav nav"}
}

main{max-width:1180px;margin:1.6rem auto 3rem;padding:0 1.2rem}
footer{max-width:1180px;margin:0 auto 2rem;padding:0 1.2rem;color:var(--grau);font-size:.8rem}

h1{font-size:1.6rem;margin:.2rem 0 1.1rem;color:var(--blau)}
h2{font-size:1.15rem;margin:1.8rem 0 .7rem;color:var(--blau-hell)}
.zeile{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.zeile h1{margin-bottom:0}

.karte{background:#fff;border:1px solid var(--rand);border-radius:8px;padding:1.1rem 1.2rem;margin-bottom:1.1rem}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.9rem;margin-bottom:1.4rem}
.kachel{background:#fff;border:1px solid var(--rand);border-radius:8px;padding:.9rem 1.1rem}
.kachel .zahl{font-size:1.9rem;font-weight:700;color:var(--blau);line-height:1.1}
.kachel .beschriftung{color:var(--grau);font-size:.85rem;margin-top:.15rem}

table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--rand);border-radius:8px;overflow:hidden}
th{background:#eef3f8;text-align:left;font-size:.8rem;text-transform:uppercase;letter-spacing:.4px;
  color:var(--blau);padding:.55rem .8rem;border-bottom:1px solid var(--rand);white-space:nowrap}
td{padding:.55rem .8rem;border-bottom:1px solid #eef1f5;vertical-align:top}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#f8fbfe}
td.zahl,th.zahl{text-align:right;white-space:nowrap}
.leer{color:var(--grau);padding:1.2rem;text-align:center}

.mono{font-family:"Cascadia Mono",Consolas,monospace;font-size:.86rem}
.klein{font-size:.82rem;color:var(--grau)}

.abzeichen{display:inline-block;padding:.12rem .5rem;border-radius:999px;font-size:.75rem;font-weight:600;white-space:nowrap}
.abzeichen.lager{background:#fff3d6;color:var(--gelb)}
.abzeichen.verkauft{background:#e6e9ee;color:var(--grau)}
.abzeichen.kundenfahrzeug{background:#dcf0e6;color:var(--gruen)}
.abzeichen.privat{background:#e7eef7;color:var(--blau)}
.abzeichen.firma{background:#ede7f7;color:#5b3fa0}
.abzeichen.bexio{background:#dff3ef;color:#0f6b5e}
.abzeichen.nur-app{background:#fff;color:var(--grau);border:1px solid var(--rand);font-weight:500}
/* Filterleiste über Listen */
.filter{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .8rem}
.filter a{padding:.3rem .75rem;border:1px solid var(--rand);border-radius:999px;background:#fff;color:var(--text);font-size:.88rem}
.filter a span{color:var(--grau);margin-left:.25rem}
.filter a:hover{text-decoration:none;border-color:var(--blau-hell)}
.filter a.aktiv{background:var(--blau);border-color:var(--blau);color:#fff}
.filter a.aktiv span{color:#cfe0f0}

.knopf{display:inline-block;background:var(--blau);color:#fff;border:1px solid var(--blau);
  padding:.45rem 1rem;border-radius:6px;font-size:.92rem;cursor:pointer}
.knopf:hover{background:var(--blau-hell);text-decoration:none}
.knopf.leise{background:#fff;color:var(--blau)}
.knopf.leise:hover{background:#eef3f8}

form .feld{margin-bottom:.9rem}
label{display:block;font-size:.85rem;color:var(--grau);margin-bottom:.2rem}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
  width:100%;padding:.45rem .6rem;border:1px solid var(--rand);border-radius:6px;font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid #bcd4ea;border-color:var(--blau-hell)}
textarea{min-height:5rem;resize:vertical}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 1rem}
.aktionen{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1rem}

.suche{display:flex;gap:.5rem;flex-wrap:wrap}
.suche input[type=text]{width:16rem}
.suche select{width:auto}

.meldung{padding:.6rem .9rem;border-radius:6px;margin-bottom:1rem;font-size:.92rem}
.meldung.ok{background:#dcf0e6;color:var(--gruen);border:1px solid #b6ddc8}
.meldung.fehler{background:#fae4e2;color:var(--rot);border:1px solid #edc2be}

dl.daten{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;margin:0}
dl.daten dt{color:var(--grau);font-size:.85rem}
dl.daten dd{margin:0}

.anmeldung{max-width:22rem;margin:4rem auto}
.status-ja{color:var(--gruen);font-weight:600}
.status-nein{color:var(--rot);font-weight:600}
.spalten2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:820px){.spalten2{grid-template-columns:1fr}}

/* ---------- Katalog und Positionen ---------- */
.klein-knopf{padding:.2rem .6rem;font-size:.8rem}
.abzeichen.art-arbeit{background:#e7eef7;color:var(--blau)}
.abzeichen.art-teil{background:#dcf0e6;color:var(--gruen)}
.abzeichen.art-material{background:#fff3d6;color:var(--gelb)}
.abzeichen.art-fremd{background:#ede7f7;color:#5b3fa0}
tr.inaktiv td{color:var(--grau)}
.katalog-gruppe h2{display:flex;align-items:baseline}

.positionen h2{margin-top:1.2rem}
.pos-suche{position:relative;margin-bottom:.6rem}
.pos-suche input{font-size:1rem;padding:.55rem .7rem}
.vorschlaege{position:absolute;z-index:20;left:0;right:0;top:100%;margin:.2rem 0 0;padding:.25rem 0;list-style:none;
  background:#fff;border:1px solid var(--rand);border-radius:6px;box-shadow:0 6px 18px rgba(20,40,60,.12);
  max-height:22rem;overflow-y:auto}
.vorschlaege li{display:flex;flex-direction:column;padding:.4rem .75rem;cursor:pointer}
.vorschlaege li.aktiv{background:#eef3f8}
.vorschlaege li.nichts{cursor:default;color:var(--grau);font-size:.88rem}

.pos-katalog{margin-bottom:.9rem}
.pos-katalog > summary{cursor:pointer;color:var(--blau);font-size:.9rem;margin-bottom:.4rem}
.pos-gruppen{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.5rem;align-items:start}
.pos-gruppen details{background:#f8fafc;border:1px solid var(--rand);border-radius:6px;padding:.35rem .6rem}
.pos-gruppen summary{cursor:pointer;font-weight:600;color:var(--blau-hell);font-size:.92rem}
.pos-wahlliste{display:flex;flex-direction:column;gap:.15rem;margin-top:.35rem}
.pos-wahl{display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:#fff;border:1px solid #e3e9ef;
  border-radius:5px;padding:.3rem .5rem;font:inherit;font-size:.88rem;cursor:pointer;color:var(--text)}
.pos-wahl:hover{border-color:var(--blau-hell);background:#f3f7fb}

.pos-tabelle td{padding:.35rem .4rem;vertical-align:top}
.pos-tabelle input{padding:.3rem .45rem;font-size:.92rem;min-width:0}
.pos-tabelle .zahlfeld{text-align:right}
.pos-tabelle td.pos-betrag{padding-top:.55rem;white-space:nowrap}
/* Art-Abzeichen in fester Spalte: Bezeichnung und Zusatztext stehen in jeder Zeile bündig */
.pos-bez-zelle{display:grid;grid-template-columns:6.6rem minmax(0,1fr);gap:.25rem .45rem;align-items:center}
.pos-bez-zelle .pos-art{grid-column:1;grid-row:1;text-align:center;justify-self:stretch}
.pos-bez-zelle .pos-art:empty{visibility:hidden}
.pos-bez-zelle .pos-bez,.pos-bez-zelle .pos-text{grid-column:2}
.pos-text{font-size:.82rem !important;color:var(--grau)}
tr.ohne-text .pos-text{display:none}
.pos-weg{background:none;border:none;color:var(--grau);font-size:1.3rem;line-height:1;cursor:pointer;padding:.25rem .4rem}
.pos-weg:hover{color:var(--rot)}
tr.pos-zeile.neu{background:#fff8e1;transition:background .9s}
.pos-fuss{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-top:.6rem;flex-wrap:wrap}
table.pos-summen{width:auto;min-width:22rem;border:none;background:none}
table.pos-summen td{border:none;padding:.15rem .4rem}
table.pos-summen tr.total td{font-weight:700;border-top:1px solid var(--rand);padding-top:.35rem}
table.pos-summen tr:hover{background:none}
@media (max-width:820px){
  .pos-tabelle thead{display:none}
  .pos-tabelle tr.pos-zeile{display:grid;grid-template-columns:3.2rem 4.4rem minmax(3.8rem,1fr) minmax(3.6rem,auto) 1.8rem;gap:.15rem;padding:.3rem 0;border-bottom:1px solid var(--rand)}
  .pos-tabelle tr.pos-zeile td{border:none;padding:.3rem .2rem;min-width:0}
  .pos-tabelle tr.pos-zeile td:nth-child(3){grid-column:1 / -1;grid-row:2}
  table.pos-summen{min-width:0;width:100%}
}

/* ---------- Auswahlfeld (ersetzt datalist) ---------- */
.auswahl-huelle{position:relative;display:block}
input[data-auswahl]{padding-right:1.8rem !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235f7184'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .6rem center;background-size:.6rem}
.auswahl-liste{position:absolute;z-index:30;left:0;right:0;top:100%;min-width:9rem;margin:.15rem 0 0;padding:.25rem 0;list-style:none;
  background:#fff;border:1px solid var(--rand);border-radius:6px;box-shadow:0 6px 18px rgba(20,40,60,.12);
  max-height:16rem;overflow-y:auto;text-align:left}
.auswahl-liste li{padding:.35rem .7rem;cursor:pointer;font-size:.92rem;white-space:nowrap}
.auswahl-liste li.aktiv{background:#eef3f8}
.auswahl-liste li.gewaehlt{font-weight:600;color:var(--blau)}

/* ---------- Aktionen in Dokumentlisten ---------- */
/* <a> und <button> gleich hoch: gleiche Schrift und Zeilenhöhe erzwingen */
.knopf{font-family:inherit;line-height:1.4;vertical-align:middle;white-space:nowrap}
.dok-aktionen{display:flex;justify-content:flex-end;align-items:center;gap:.4rem}
.dok-aktionen form{margin:0;display:flex}

/* Kundenformular: Kontakt aus bexio übernehmen */
.bexio-uebernahme{background:#f8fafc;border:1px solid var(--rand);border-radius:6px;padding:.7rem .8rem;margin-bottom:1rem}
.bexio-uebernahme .klein{margin:.1rem 0 0}
.bexio-uebernahme .pos-suche{max-width:560px}
.bexio-uebernahme input[type=search]{width:100%}
.bexio-gewaehlt{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.5rem 0 0}
.vorschlaege li .bexio-schon{color:var(--gelb)}
.rechts{text-align:right}

/* Sortierbare Tabellen (data-sortierbar) */
th.sortierbar{cursor:pointer;user-select:none;white-space:nowrap}
th.sortierbar:hover,th.sortierbar:focus-visible{color:var(--blau-hell);outline:none;text-decoration:underline}
th.sortierbar .pfeil{display:inline-block;width:1em;margin-left:.2rem;font-size:.7em}
th.sortiert{color:var(--blau)}
.knopf.leise.gefahr{color:var(--rot);border-color:#e3b4b0}
.knopf.leise.gefahr:hover{background:#fbeceb}
.meldung.archiv{background:#f1f3f6;border:1px solid var(--rand);color:var(--grau);display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
/* Kundenabgleich: Ausschluss */
label.ausschluss{display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem;color:var(--grau);cursor:pointer;margin:0;white-space:nowrap}
tr.ausgeschlossen td{color:var(--grau);text-decoration:line-through}
tr.ausgeschlossen td:last-child{text-decoration:none}
th.wahl,td.wahl{width:2.2rem;text-align:center}
.abgleich-fuss{margin-top:1.2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;position:sticky;bottom:0;z-index:5}
/* Fahrzeugfotos */
.fotos-kopf{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap}
.foto-hochladen{display:flex;align-items:center;gap:.6rem;margin:0;flex-wrap:wrap}
.foto-hochladen label.knopf{cursor:pointer;margin:0}
.foto-hochladen.laeuft label.knopf{opacity:.5;pointer-events:none}
.foto-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.7rem;margin-top:.8rem}
.foto{margin:0;background:#f8fafc;border:1px solid var(--rand);border-radius:6px;overflow:hidden}
.foto.titel{border-color:var(--blau-hell);box-shadow:0 0 0 1px var(--blau-hell)}
.foto img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#e9eef3}
.foto figcaption{display:flex;justify-content:space-between;align-items:center;gap:.3rem;padding:.35rem .45rem}
.foto figcaption form{margin:0}
.abzeichen.titel-abz{background:#e7eef7;color:var(--blau)}
.foto-gross{position:fixed;inset:0;z-index:100;background:rgba(10,20,30,.92);display:none;align-items:center;justify-content:center}
.foto-gross.offen{display:flex}
.foto-gross img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.foto-gross button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;width:46px;height:46px;
  font-size:1.8rem;line-height:1;cursor:pointer}
.foto-gross button:hover{background:rgba(255,255,255,.25)}
.foto-gross .zu{top:14px;right:14px}
.foto-gross .vor{left:14px;top:50%;transform:translateY(-50%)}
.foto-gross .nach{right:14px;top:50%;transform:translateY(-50%)}
.foto-gross .nr{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:#dbe6f0;font-size:.9rem}
.liste-bild{width:56px;height:42px;object-fit:cover;border-radius:4px;display:block;background:#e9eef3}
td.bild{width:64px;padding-right:0}
/* Fahrzeugerfassung: Typenschein-Nr. nachschlagen */
.feld-breit{grid-column:1/-1}
.typenschein-zeile{display:flex;gap:.5rem;max-width:520px}
.typenschein-zeile input{flex:1}
.tg-varianten{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.3rem;max-width:720px}
.tg-varianten button{width:100%;text-align:left;background:#fff;border:1px solid var(--rand);border-radius:6px;padding:.4rem .6rem;
  font:inherit;cursor:pointer;color:var(--text)}
.tg-varianten button:hover{border-color:var(--blau-hell);background:#f3f7fb}
/* Demo-Hinweis und Demo-Startseite */
.demo-band{background:#fff3d6;border-bottom:1px solid #f0d9a0;color:#6b4c00;font-size:.9rem}
.demo-band{display:flex;justify-content:center;align-items:center;gap:.8rem;flex-wrap:wrap;padding:.45rem 1.2rem}
.demo-band form{margin:0}
.demo-start{max-width:720px;margin:2rem auto}
.demo-start h1{font-size:1.9rem}
.demo-start ul{margin:.4rem 0 1.2rem;padding-left:1.2rem}
.demo-start li{margin:.25rem 0}
.demo-start .knopf.gross{font-size:1.1rem;padding:.7rem 1.4rem}