/* Blaauw-System – Design „Showroom“ (wie die Website der Bobby Ian Blaauw Empire GmbH)
   Blau #061231 als Grund, dunkle blaue Platten, helle Schrift (Papier #F4F1EA), Gold #C8A95A nur für Akzente (nie Fließtext) – edel, ruhig.
   Display-Schrift Cinzel (Marke, Titel, Zahlen), Text Manrope – beide lokal aus /fonts/ (Dateien der Website). Handy zuerst: untere Leiste mit 4 Zielen + „Mehr“, Desktop Seitenleiste.
   Komponenten: .kopf .seite .unten .seitenkopf .kacheln/.kachel .karte .raster/.feld/.kasten .tab .liste .pille .zeitleiste .knopf .toast .schleier/.dialog .leer .ico[data-ico] */
@font-face{font-family:"Cinzel";font-weight:400 500;font-style:normal;font-display:swap;src:url("/fonts/Cinzel-500.woff2") format("woff2")}
@font-face{font-family:"Cinzel";font-weight:600;font-style:normal;font-display:swap;src:url("/fonts/Cinzel-600.woff2") format("woff2")}
@font-face{font-family:"Cinzel";font-weight:700 900;font-style:normal;font-display:swap;src:url("/fonts/Cinzel-700.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/Manrope-400.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:500;font-style:normal;font-display:swap;src:url("/fonts/Manrope-500.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:600;font-style:normal;font-display:swap;src:url("/fonts/Manrope-600.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:700 900;font-style:normal;font-display:swap;src:url("/fonts/Manrope-700.woff2") format("woff2")}

:root{
  --grund:#061231;--platte:#040D26;--platte2:#0B1A3D;--platte3:#102250;
  --text:#F4F1EA;--text2:#BCC3D2;--text3:#7F89A3;
  --gruen:#C8A95A;--glow:rgba(200,169,90,.38);--glow2:rgba(200,169,90,.16);--kern:#E9D59A;--weiss:#F7F4EC;
  --rot:#FF6B57;--gelb:#F2C14E;--blau:#6FC8FF;--grau:#7F89A3;
  --linie:rgba(244,241,234,.1);--linie2:rgba(244,241,234,.2);--fokus:rgba(200,169,90,.45);
  --radius:18px;--radius-k:12px;--radius-g:24px;--kurve:cubic-bezier(.2,.8,.2,1);--kopf-h:60px;
  --display:"Cinzel",Georgia,"Times New Roman",serif;--font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --schatten:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px rgba(0,0,0,.35);
  --ico-uebersicht:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5L12 4l9 7.5'/%3E%3Cpath d='M5.5 10v10h13V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E");
  --ico-fahrzeuge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 13l1.7-4.6A2 2 0 0 1 8.1 7h7.8a2 2 0 0 1 1.9 1.4L19.5 13'/%3E%3Cpath d='M3 13h18a1 1 0 0 1 1 1v3.5a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1H6v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V14a1 1 0 0 1 1-1z'/%3E%3Cpath d='M6.5 15.5h2M15.5 15.5h2'/%3E%3C/svg%3E");
  --ico-kunden:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c0-3.9 3.4-6.5 7.5-6.5s7.5 2.6 7.5 6.5'/%3E%3C/svg%3E");
  --ico-vermietung:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4.5'/%3E%3Cpath d='M11.2 11.8L20 3M16.5 6.5l2.5 2.5M14 9l2.5 2.5'/%3E%3C/svg%3E");
  --ico-rechnungen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7.5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V7.5z'/%3E%3Cpath d='M14 3v4.5h4.5'/%3E%3Cpath d='M14.5 11.5a3 3 0 1 0 0 5M8.5 13h5M8.5 15h5'/%3E%3C/svg%3E");
  --ico-vorgaenge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l2.2-7.4A2 2 0 0 1 7.1 4h9.8a2 2 0 0 1 1.9 1.6L21 13v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M3 13h5l1.5 2.5h5L16 13h5'/%3E%3C/svg%3E");
  --ico-einstellungen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E");
  --ico-mehr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E");
  --ico-haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.8 4.8L19.5 7'/%3E%3C/svg%3E");
  --ico-suche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
  --ico-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --ico-zurueck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6l-6 6 6 6'/%3E%3C/svg%3E");
  --ico-weiter:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E");
  --ico-kamera:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5h2.5l1.5-2.5h8l1.5 2.5H20a1 1 0 0 1 1 1V18a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.5a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13.5' r='3.2'/%3E%3C/svg%3E");
  --ico-pdf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7.5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V7.5z'/%3E%3Cpath d='M14 3v4.5h4.5M8.5 12.5h7M8.5 16h7'/%3E%3C/svg%3E");
  --ico-telefon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3.5l1.5 4-2 1.5a11 11 0 0 0 6.5 6.5l1.5-2 4 1.5V19a1.5 1.5 0 0 1-1.5 1.5A15.5 15.5 0 0 1 3.5 5.5 1.5 1.5 0 0 1 5 4z'/%3E%3C/svg%3E");
  --ico-stift:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l10.5-10.5a2.1 2.1 0 0 0-3-3L5 17z'/%3E%3Cpath d='M13.5 8.5l3 3'/%3E%3C/svg%3E");
  --ico-kalender:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='3'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");
  --ico-warnung:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9 16H3z'/%3E%3Cpath d='M12 9.5v4.5M12 17h.01'/%3E%3C/svg%3E");
  --ico-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --ico-abmelden:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4M15 8l4 4-4 4M19 12H9'/%3E%3C/svg%3E");
  --ico-euro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 6.5a6.5 6.5 0 1 0 0 11M4.5 10h9M4.5 14h9'/%3E%3C/svg%3E");
  --ico-werkstatt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4.5a4 4 0 0 0-4.7 5.3L4 15.6a1.8 1.8 0 0 0 2.5 2.5l5.8-5.8a4 4 0 0 0 5.3-4.7l-2.4 2.4-2.1-.6-.6-2.1z'/%3E%3C/svg%3E");
  --ico-uhr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --ico-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E");
  --ico-tank:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V5a1.5 1.5 0 0 1 1.5-1.5h6A1.5 1.5 0 0 1 14 5v15M3.5 20h12M7 6.5h5v4H7zM14 9h2.5a1.5 1.5 0 0 1 1.5 1.5v6a1.5 1.5 0 0 0 3 0V9.5l-2-2'/%3E%3C/svg%3E");
  /* Stufe 2 Handel: Artikel (Karton mit Etikett), Lager (Regal), Einkauf (Lkw), Verkauf (Einkaufstasche), Kasse (Kasse), Scan (Barcode) */
  --ico-artikel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3.5 7.5v9L12 21l8.5-4.5v-9zM3.5 7.5 12 12l8.5-4.5M12 12v9M7.5 5.3l8.5 4.5'/%3E%3C/svg%3E");
  --ico-lager:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5 12 4l8.5 5.5V20h-17zM7 20v-5h4v5M13 20v-5h4v5M8 11.5h3M13 11.5h3'/%3E%3C/svg%3E");
  --ico-einkauf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h12v10h-12zM14.5 10h4l3 3.5v3h-7zM6 19a1.8 1.8 0 1 0 0-3.6A1.8 1.8 0 0 0 6 19zM17.5 19a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6z'/%3E%3C/svg%3E");
  --ico-verkauf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12.5H6zM8.5 8V6.5a3.5 3.5 0 0 1 7 0V8M9 12.5v1M15 12.5v1'/%3E%3C/svg%3E");
  --ico-kasse:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11h16l1.5 9h-19zM7 11V5.5h7L15.5 8V11M8 15h2M12 15h2M8 18h6M10 5.5v2.5'/%3E%3C/svg%3E");
  --ico-scan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8V4.5h3.5M17.5 4.5H21V8M21 16v3.5h-3.5M6.5 19.5H3V16M7 8.5v7M10 8.5v7M13.5 8.5v7M17 8.5v7'/%3E%3C/svg%3E");
}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box}
html{background:var(--grund)}
html,body{margin:0;color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:radial-gradient(120% 60% at 50% -10%,#091634 0%,var(--grund) 55%);min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--kern);text-underline-offset:2px}
b,strong{font-weight:600}
h1,h2,h3,.display{font-family:var(--display);font-weight:700;letter-spacing:-.01em;color:var(--weiss)}
h1{font-size:28px;line-height:1.15;margin:0}
h2{font-size:20px;line-height:1.25;margin:24px 0 10px}
h3{font-size:16px;line-height:1.3;margin:16px 0 6px}
p{margin:0 0 10px}
.gedaempft{color:var(--text2)}.leise{color:var(--text3)}.klein{font-size:13.5px}.rechts{text-align:right}
.zahl{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.zahl.gross{font-size:34px;line-height:1.05}
.roehre{color:var(--gruen);text-shadow:0 0 14px var(--glow)}
.weiss-roehre{color:var(--weiss);text-shadow:0 0 12px rgba(247,244,236,.45)}
:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
::selection{background:var(--glow2)}
.laden{padding:64px 16px;text-align:center;color:var(--text3)}
.laden-roehre{display:block;width:72px;height:3px;margin:0 auto 18px;border-radius:3px;background:var(--gruen);box-shadow:0 0 16px var(--glow);animation:puls 1.4s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:.35}50%{opacity:1}}
#app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.ico{display:inline-block;width:22px;height:22px;flex:0 0 auto;vertical-align:-5px;background:currentColor;-webkit-mask:var(--ico-mehr) center/contain no-repeat;mask:var(--ico-mehr) center/contain no-repeat}
.ico[data-ico=uebersicht]{-webkit-mask-image:var(--ico-uebersicht);mask-image:var(--ico-uebersicht)}.ico[data-ico=fahrzeuge]{-webkit-mask-image:var(--ico-fahrzeuge);mask-image:var(--ico-fahrzeuge)}.ico[data-ico=kunden]{-webkit-mask-image:var(--ico-kunden);mask-image:var(--ico-kunden)}.ico[data-ico=vermietung]{-webkit-mask-image:var(--ico-vermietung);mask-image:var(--ico-vermietung)}.ico[data-ico=rechnungen]{-webkit-mask-image:var(--ico-rechnungen);mask-image:var(--ico-rechnungen)}.ico[data-ico=vorgaenge]{-webkit-mask-image:var(--ico-vorgaenge);mask-image:var(--ico-vorgaenge)}.ico[data-ico=einstellungen]{-webkit-mask-image:var(--ico-einstellungen);mask-image:var(--ico-einstellungen)}
.ico[data-ico=mehr]{-webkit-mask-image:var(--ico-mehr);mask-image:var(--ico-mehr)}.ico[data-ico=haken]{-webkit-mask-image:var(--ico-haken);mask-image:var(--ico-haken)}.ico[data-ico=suche]{-webkit-mask-image:var(--ico-suche);mask-image:var(--ico-suche)}.ico[data-ico=plus]{-webkit-mask-image:var(--ico-plus);mask-image:var(--ico-plus)}.ico[data-ico=zurueck]{-webkit-mask-image:var(--ico-zurueck);mask-image:var(--ico-zurueck)}.ico[data-ico=weiter]{-webkit-mask-image:var(--ico-weiter);mask-image:var(--ico-weiter)}.ico[data-ico=kamera]{-webkit-mask-image:var(--ico-kamera);mask-image:var(--ico-kamera)}.ico[data-ico=pdf]{-webkit-mask-image:var(--ico-pdf);mask-image:var(--ico-pdf)}.ico[data-ico=telefon]{-webkit-mask-image:var(--ico-telefon);mask-image:var(--ico-telefon)}.ico[data-ico=stift]{-webkit-mask-image:var(--ico-stift);mask-image:var(--ico-stift)}.ico[data-ico=kalender]{-webkit-mask-image:var(--ico-kalender);mask-image:var(--ico-kalender)}.ico[data-ico=warnung]{-webkit-mask-image:var(--ico-warnung);mask-image:var(--ico-warnung)}.ico[data-ico=x]{-webkit-mask-image:var(--ico-x);mask-image:var(--ico-x)}.ico[data-ico=abmelden]{-webkit-mask-image:var(--ico-abmelden);mask-image:var(--ico-abmelden)}.ico[data-ico=euro]{-webkit-mask-image:var(--ico-euro);mask-image:var(--ico-euro)}.ico[data-ico=werkstatt]{-webkit-mask-image:var(--ico-werkstatt);mask-image:var(--ico-werkstatt)}.ico[data-ico=uhr]{-webkit-mask-image:var(--ico-uhr);mask-image:var(--ico-uhr)}.ico[data-ico=mail]{-webkit-mask-image:var(--ico-mail);mask-image:var(--ico-mail)}.ico[data-ico=tank]{-webkit-mask-image:var(--ico-tank);mask-image:var(--ico-tank)}
.ico[data-ico=artikel]{-webkit-mask-image:var(--ico-artikel);mask-image:var(--ico-artikel)}.ico[data-ico=lager]{-webkit-mask-image:var(--ico-lager);mask-image:var(--ico-lager)}.ico[data-ico=einkauf]{-webkit-mask-image:var(--ico-einkauf);mask-image:var(--ico-einkauf)}.ico[data-ico=verkauf]{-webkit-mask-image:var(--ico-verkauf);mask-image:var(--ico-verkauf)}.ico[data-ico=kasse]{-webkit-mask-image:var(--ico-kasse);mask-image:var(--ico-kasse)}.ico[data-ico=scan]{-webkit-mask-image:var(--ico-scan);mask-image:var(--ico-scan)}

/* ---------- Kopfzeile ---------- */
header.kopf{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;min-height:var(--kopf-h);padding:8px 14px;padding-top:calc(8px + env(safe-area-inset-top));background:rgba(4,13,38,.86);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--linie)}
header.kopf .logo{display:block;height:30px;width:30px;object-fit:cover;object-position:0 50%;flex:0 0 auto} /* Handy-Kopf: nur das B-Zeichen aus dem Querlogo */
header.kopf .titel-block{flex:1;min-width:0;line-height:1.15}
header.kopf .firma{display:none;font-family:var(--display);font-weight:700;font-size:15px;color:var(--weiss);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.kopf .wer{font-size:12.5px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.kopf .wer b{color:var(--text);font-weight:600}
header.kopf .rund{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:48px;min-height:48px;padding:0 12px;border:1px solid var(--linie2);border-radius:999px;background:rgba(244,241,234,.04);color:var(--text);font-size:13.5px;font-weight:500;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .18s var(--kurve),border-color .18s var(--kurve),transform .1s var(--kurve)}
header.kopf .rund:hover{background:rgba(244,241,234,.09);border-color:rgba(244,241,234,.3)}
header.kopf .rund:active{transform:scale(.96)}
header.kopf .rund .lbl{display:none}
/* Bereichs-Schalter (Stufe 2): Pille „Autovermietung | Handel“ im Kopf; auf dem Handy weicht der Name, der Bereich ist wichtiger */
header.kopf .bereich{display:inline-flex;flex:0 0 auto;gap:3px;padding:3px;border:1px solid var(--linie2);border-radius:999px;background:rgba(244,241,234,.04)}
header.kopf .bereich button{min-height:48px;min-width:48px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--text2);font:600 13px/1 var(--text-font,Manrope,system-ui,sans-serif);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .18s var(--kurve),color .18s var(--kurve),box-shadow .18s var(--kurve)}
header.kopf .bereich button:hover{color:var(--text)}
header.kopf .bereich button.an{background:var(--gruen);color:#061231;box-shadow:0 0 16px rgba(200,169,90,.4)}
header.kopf .bereich .lang{display:none}
@media(max-width:699px){header.kopf.mit-bereich .titel-block{display:none}}
@media(min-width:700px){header.kopf .bereich .kurz{display:none}}
.offline-balken{display:none;position:sticky;top:var(--kopf-h);z-index:4;padding:6px 14px;background:rgba(242,193,78,.14);color:var(--gelb);font-size:13px;font-weight:500;text-align:center;border-bottom:1px solid rgba(242,193,78,.3)}
.offline-balken.an{display:block}

/* ---------- Rumpf und Navigation ---------- */
.rumpf{display:flex;flex:1;min-height:0}
nav.seite{display:none}
main{flex:1;width:100%;max-width:1180px;min-width:0;margin:0 auto;padding:18px 16px calc(96px + env(safe-area-inset-bottom))}
nav.unten{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:space-around;align-items:stretch;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:rgba(4,13,38,.9);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);border-top:1px solid var(--linie)}
nav.unten a,nav.seite a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:4px 6px;border-radius:12px;color:var(--text3);font-size:11px;font-weight:500;letter-spacing:.01em;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:color .18s var(--kurve),background .18s var(--kurve)}
nav.unten a{flex:1 1 0;max-width:100%;min-height:52px;padding:6px 2px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav a .lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
nav a .ico{width:24px;height:24px;vertical-align:0}
nav a.aktiv{color:var(--gruen)}
nav.unten a.aktiv .ico{filter:drop-shadow(0 0 8px var(--glow))}
nav.unten a.aktiv::after{content:"";position:absolute;bottom:0;left:50%;width:22px;height:3px;margin-left:-11px;border-radius:3px;background:var(--gruen);box-shadow:0 0 10px var(--glow)}
nav a .badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--gruen);color:var(--grund);font-size:11px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 10px var(--glow)}
@media(min-width:900px){
  nav.unten{display:none}
  nav.seite{display:flex;flex-direction:column;gap:2px;width:248px;flex:0 0 248px;position:sticky;top:var(--kopf-h);height:calc(100vh - var(--kopf-h));overflow:auto;padding:20px 12px 24px;background:var(--platte);border-right:1px solid var(--linie)}
  nav.seite .seiten-logo{display:block;width:150px;height:auto;margin:4px 12px 26px}
  nav.seite a{flex-direction:row;justify-content:flex-start;gap:12px;min-height:48px;padding:11px 14px;font-size:15px;font-weight:500;color:var(--text2);border-radius:12px}
  nav.seite a:hover{background:rgba(244,241,234,.05);color:var(--text)}
  nav.seite a.aktiv{background:var(--glow2);color:var(--kern)}
  nav.seite a.aktiv .ico{color:var(--gruen);filter:drop-shadow(0 0 8px var(--glow))}
  nav.seite a .badge{position:static;margin-left:auto}
  header.kopf{padding:8px 28px}
  header.kopf .logo{display:none}
  header.kopf .firma{display:block}
  header.kopf .rund .lbl{display:inline}
  header.kopf .bereich .lang{display:inline}
  header.kopf .bereich button{padding:0 16px;font-size:13.5px}
  main{padding:30px 40px 56px}
  h1{font-size:34px}
}

/* ---------- Seitenkopf: Titel + Primäraktion ---------- */
.seitenkopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px}
.seitenkopf .dehn{flex:1;min-width:min-content} /* Titelblock schrumpft nie unter sein längstes Wort: passen Titel + Knöpfe nicht nebeneinander (390 px), brechen die Knöpfe unter den Titel statt zu überlappen */
.seitenkopf h1{overflow-wrap:break-word} /* Notnagel für ein einzelnes Wort breiter als die Seite (ändert die Mindestbreite nicht) */
.seitenkopf .untertitel{color:var(--text2);font-size:14.5px;margin-top:3px}
.seitenkopf a.zurueck{display:inline-flex;align-items:center;gap:4px;min-height:48px;margin:-10px 0 -4px -8px;padding:0 8px;color:var(--text2);font-size:14px;text-decoration:none} /* Tippziel ≥ 48 px, Layout bleibt durch Negativ-Rand fast gleich */
.seitenkopf a.zurueck:hover{color:var(--kern)}
.zeile{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.zeile .dehn{flex:1;min-width:0}
.zeile.eng{gap:6px;margin-bottom:8px}

/* ---------- Knöpfe (mind. 48 px) ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 20px;border:1px solid transparent;border-radius:14px;background:var(--gruen);color:var(--grund);font-size:16px;font-weight:600;line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;box-shadow:0 0 0 1px rgba(200,169,90,.25),0 6px 22px rgba(200,169,90,.22);transition:transform .1s var(--kurve),box-shadow .18s var(--kurve),background .18s var(--kurve),opacity .18s}
.knopf:hover{background:var(--kern);box-shadow:0 0 0 1px rgba(200,169,90,.35),0 8px 28px var(--glow)}
.knopf:active{transform:scale(.97)}
.knopf .ico{width:20px;height:20px;vertical-align:0}
.knopf.gross{width:100%;min-height:56px;border-radius:16px;font-size:17px}
.knopf.zweit{background:rgba(244,241,234,.05);color:var(--text);border-color:var(--linie2);box-shadow:none}
.knopf.zweit:hover{background:rgba(244,241,234,.1);border-color:rgba(244,241,234,.32)}
.knopf.weiss{background:var(--weiss);color:var(--grund);box-shadow:0 0 0 1px rgba(247,244,236,.2),0 6px 22px rgba(247,244,236,.12)}
.knopf.gefahr{background:rgba(255,107,87,.12);color:var(--rot);border-color:rgba(255,107,87,.45);box-shadow:none}
.knopf.gefahr:hover{background:rgba(255,107,87,.22)}
.knopf.klein{min-height:48px;padding:6px 14px;border-radius:12px;font-size:14px}
.knopf.leise{background:transparent;color:var(--text2);border-color:transparent;box-shadow:none}
.knopf.leise:hover{color:var(--text);background:rgba(244,241,234,.06)}
.knopf:disabled,.knopf.aus{opacity:.4;cursor:default;transform:none;box-shadow:none}
.knopf.rund{min-width:48px;padding:10px;border-radius:999px}

/* ---------- Karten, Kacheln, Listen ---------- */
.karte{position:relative;background:var(--platte);border:1px solid var(--linie);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;box-shadow:var(--schatten);transition:transform .18s var(--kurve),border-color .18s var(--kurve)}
.karte.klick{cursor:pointer}
.karte.klick:hover{border-color:var(--linie2);transform:translateY(-1px)}
.karte.klick:active{transform:scale(.995)}
.karte.hell{background:var(--platte2)}
.karte.gruen{border-color:rgba(200,169,90,.4);box-shadow:var(--schatten),0 0 24px rgba(200,169,90,.12)}
.karte.rot{border-color:rgba(255,107,87,.45)}
.karte.gelb{border-color:rgba(242,193,78,.45)}
.karte .titel{font-weight:600;font-size:17px;line-height:1.3;color:var(--weiss)}
.karte .sub{color:var(--text2);font-size:14.5px;margin-top:3px}
.karte>.zeile:last-child{margin-bottom:0}
.karte .kante{position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--gruen);box-shadow:0 0 10px var(--glow)}
.karte .kante.rot{background:var(--rot);box-shadow:none}.karte .kante.gelb{background:var(--gelb);box-shadow:none}.karte .kante.grau{background:var(--grau);box-shadow:none}.karte .kante.blau{background:var(--blau);box-shadow:none}
.kennzahlen{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
@media(min-width:700px){.kennzahlen{grid-template-columns:repeat(4,1fr)}}
.kennzahl{background:var(--platte);border:1px solid var(--linie);border-radius:var(--radius-k);padding:12px 14px;text-decoration:none;color:inherit;display:block}
.kennzahl.klick{cursor:pointer}.kennzahl.klick:hover{border-color:var(--linie2)}
.kennzahl .lbl{color:var(--text3);font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:.06em}
.kennzahl .wert{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.15;color:var(--weiss);margin-top:4px;font-variant-numeric:tabular-nums}
.kennzahl.gruen .wert{color:var(--gruen);text-shadow:0 0 12px var(--glow)}
.kennzahl.rot .wert{color:var(--rot)}.kennzahl.gelb .wert{color:var(--gelb)}
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:16px}
@media(min-width:700px){.kacheln{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}}
.kachel{position:relative;display:flex;flex-direction:column;min-height:150px;overflow:hidden;border:1px solid var(--linie);border-radius:var(--radius);background:var(--platte2);color:var(--text);text-decoration:none;cursor:pointer;box-shadow:var(--schatten);transition:transform .18s var(--kurve),border-color .18s var(--kurve)}
.kachel:hover{border-color:var(--linie2);transform:translateY(-2px)}
.kachel:active{transform:scale(.985)}
.kachel .bild{position:relative;aspect-ratio:4/3;background:#0A1838 center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--text3)}
.kachel .bild .ico{width:40px;height:40px;opacity:.5}
.kachel .bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,13,38,0) 45%,rgba(4,13,38,.85) 100%)}
.kachel .pille{position:absolute;top:10px;left:10px;z-index:1}
.kachel .text{padding:10px 12px 12px}
.kachel .titel{font-weight:600;font-size:15.5px;line-height:1.25;color:var(--weiss);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kachel .sub{color:var(--text2);font-size:13px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kachel .zahl{margin-top:4px;color:var(--kern)}
.kachel.gross{grid-column:span 2}
.liste{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.eintrag{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;background:var(--platte);border:1px solid var(--linie);border-radius:var(--radius-k);text-decoration:none;color:inherit}
.eintrag.klick{cursor:pointer}.eintrag.klick:hover{border-color:var(--linie2);background:var(--platte2)}
.eintrag .dehn{flex:1;min-width:0}
.eintrag .titel{font-weight:600;color:var(--weiss);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eintrag .sub{color:var(--text2);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eintrag .rechts{text-align:right;flex:0 0 auto}
.eintrag .ico.pfeil{color:var(--text3);width:18px;height:18px}
.avatar{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:var(--platte3);color:var(--text2);font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.02em;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar .ico{width:22px;height:22px}

/* ---------- Status-Pille, Marken, Chips ---------- */
.pille{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;letter-spacing:.02em;line-height:1.5;white-space:nowrap;background:rgba(244,241,234,.1);color:var(--text2);border:1px solid rgba(244,241,234,.14)}
.pille::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pille.gruen{background:rgba(200,169,90,.12);color:var(--gruen);border-color:rgba(200,169,90,.3)}
.pille.gruen::before{box-shadow:0 0 8px var(--glow)}
.pille.gelb{background:rgba(242,193,78,.12);color:var(--gelb);border-color:rgba(242,193,78,.3)}
.pille.rot{background:rgba(255,107,87,.12);color:var(--rot);border-color:rgba(255,107,87,.35)}
.pille.blau{background:rgba(111,200,255,.12);color:var(--blau);border-color:rgba(111,200,255,.3)}
.pille.weiss{background:rgba(247,244,236,.12);color:var(--weiss);border-color:rgba(247,244,236,.3)}
.pille.grau{color:var(--text3)}
.pille.gross{padding:6px 14px;font-size:13.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:9px 16px;border:1px solid var(--linie2);border-radius:999px;background:rgba(244,241,234,.04);color:var(--text);font-size:15px;font-weight:500;line-height:1.2;cursor:pointer;user-select:none;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background .18s var(--kurve),border-color .18s var(--kurve),transform .1s var(--kurve)}
.chip:hover{border-color:rgba(244,241,234,.35)}
.chip:active{transform:scale(.97)}
.chip.an{background:var(--glow2);border-color:var(--gruen);color:var(--kern)}
.chip.an::before{content:"";flex:0 0 auto;width:13px;height:13px;background:var(--gruen);-webkit-mask:var(--ico-haken) center/contain no-repeat;mask:var(--ico-haken) center/contain no-repeat}
.chip.klein{min-height:36px;padding:5px 12px;font-size:13px}
.chip .ico{width:18px;height:18px;vertical-align:0}

/* ---------- Formulare ---------- */
.raster{display:grid;grid-template-columns:1fr;gap:12px 16px}
@media(min-width:700px){.raster{grid-template-columns:1fr 1fr}.raster .voll{grid-column:1/-1}.raster .drittel{grid-column:span 1}}
.feld{display:flex;flex-direction:column;gap:5px;min-width:0}
.feld>span{font-size:13px;font-weight:500;color:var(--text2);letter-spacing:.01em}
.feld>span .pflicht{color:var(--gruen)}
.feld .hinweis-text{font-size:12.5px;color:var(--text3);margin-top:-1px}
.feld.fehler input,.feld.fehler select,.feld.fehler textarea{border-color:var(--rot)}
input,select,textarea{width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--linie2);border-radius:var(--radius-k);background:var(--platte2);color:var(--text);font-size:16px;line-height:1.3;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .18s var(--kurve),box-shadow .18s var(--kurve)}
input::placeholder,textarea::placeholder{color:var(--text3)}
input:focus,select:focus,textarea:focus{border-color:var(--gruen);box-shadow:0 0 0 3px rgba(200,169,90,.18)}
input:disabled,select:disabled,textarea:disabled,input[readonly]{background:var(--platte);color:var(--text2);border-color:var(--linie)}
input[type=date],input[type=datetime-local],input[type=time],input[type=month]{color-scheme:dark}
input[type=search]{padding-left:40px;background-image:var(--ico-suche);background-repeat:no-repeat;background-position:12px center;background-size:20px;filter:none}
select{padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B1BAAD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
textarea{min-height:96px;resize:vertical}
input[type=checkbox]{width:24px;height:24px;min-height:0;margin:0;padding:0;border-radius:7px;background:var(--platte2);border:1px solid var(--linie2);display:inline-grid;place-content:center;cursor:pointer;flex:0 0 auto}
input[type=checkbox]:checked{background:var(--gruen);border-color:var(--gruen);box-shadow:0 0 10px var(--glow)}
input[type=checkbox]:checked::before{content:"";width:14px;height:14px;background:var(--grund);-webkit-mask:var(--ico-haken) center/contain no-repeat;mask:var(--ico-haken) center/contain no-repeat}
label.kasten{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 14px;border:1px solid var(--linie);border-radius:var(--radius-k);background:var(--platte);cursor:pointer;font-size:15.5px;user-select:none}
label.kasten:has(input:checked){border-color:rgba(200,169,90,.4)}
.betrag-feld{position:relative}
.betrag-feld input{padding-right:36px;text-align:right;font-variant-numeric:tabular-nums}
.betrag-feld::after{content:"€";position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text2);pointer-events:none}
.foto-feld{display:flex;flex-direction:column;gap:10px}
.foto-feld .foto-knopf{position:relative;overflow:hidden}
.foto-feld .foto-knopf input{position:absolute;inset:0;opacity:0;cursor:pointer;min-height:0}
.foto-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.foto-raster .foto{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--platte3);border:1px solid var(--linie)}
.foto-raster .foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto-raster .foto .weg{position:absolute;top:2px;right:2px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(4,13,38,.8);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;min-height:0}
.foto-raster .foto .weg .ico{width:16px;height:16px;vertical-align:0}
.foto-raster .foto .nr{position:absolute;left:6px;bottom:4px;font-size:11px;font-weight:600;color:var(--weiss);text-shadow:0 1px 3px #000}
.foto-raster .foto.leer{display:flex;align-items:center;justify-content:center;color:var(--text3);border-style:dashed}
.unterschrift-feld{display:flex;flex-direction:column;gap:8px}
.unterschrift-feld canvas{width:100%;height:170px;border:1px dashed var(--linie2);border-radius:var(--radius-k);background:#F7F4EC;touch-action:none;cursor:crosshair;display:block}
.unterschrift-feld .hinweis-text{color:var(--text3);font-size:12.5px}
/* Positionen-Erfassung (Stufe 2, App.positionen): Suche mit Trefferliste, eine Karte je Position, Summenblock */
.pos{display:flex;flex-direction:column;gap:10px}
.pos .pos-such{position:relative}
.pos .pos-treffer{position:absolute;left:0;right:0;top:100%;z-index:4;margin-top:4px;background:var(--platte2);border:1px solid var(--linie2);border-radius:14px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.pos .pos-treffer button{display:flex;width:100%;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border:0;border-bottom:1px solid var(--linie);background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.pos .pos-treffer button:last-child{border-bottom:0}
.pos .pos-treffer button:hover,.pos .pos-treffer button.an{background:rgba(200,169,90,.1)}
.pos .pos-treffer .sub{color:var(--text3);font-size:12.5px}
.pos-zeilen{display:flex;flex-direction:column;gap:8px}
.pos-zeile{display:grid;grid-template-columns:1fr;gap:8px;padding:10px 12px;border:1px solid var(--linie);border-radius:14px;background:var(--platte)}
.pos-zeile.pfand{border-style:dashed}
.pos-zeile .pos-text{font-weight:600;overflow-wrap:anywhere}
.pos-zeile .pos-text input{width:100%}
.pos-zeile .pos-felder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pos-zeile .pos-felder label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--text3)}
.pos-zeile .pos-felder input,.pos-zeile .pos-felder select{width:100%;min-height:44px;font-variant-numeric:tabular-nums}
.pos-zeile .pos-summe{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pos-zeile .pos-summe .zahl{font-size:17px}
.pos-zeile .pos-weg{min-width:44px;min-height:44px;padding:0}
.pos-zeile .pos-bestand{font-size:12px;font-weight:500;color:var(--text3);white-space:nowrap}
.pos-zeile .pos-bestand.rot{color:var(--rot)}
.pos-summen{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:12px 14px;border:1px solid var(--linie);border-radius:14px;background:rgba(244,241,234,.04);font-variant-numeric:tabular-nums}
.pos-summen .gesamt{font-weight:700;font-size:18px;color:var(--weiss)}
.pos-summen .pos-leer{grid-column:1/-1}
.pos-leer{padding:14px;color:var(--text3);text-align:center;border:1px dashed var(--linie2);border-radius:14px}
@media(min-width:700px){.pos-zeile{grid-template-columns:minmax(0,2fr) minmax(0,3fr) auto;align-items:center}.pos-zeile .pos-felder{grid-template-columns:repeat(3,minmax(90px,1fr))}}
.segment{display:flex;gap:4px;padding:4px;border:1px solid var(--linie);border-radius:999px;background:var(--platte)}
.segment button{flex:1;min-height:44px;padding:6px 10px;border:0;border-radius:999px;background:transparent;color:var(--text2);font-size:14px;font-weight:500;cursor:pointer}
.segment button.an{background:var(--glow2);color:var(--kern)}
.tank{display:flex;gap:4px}
.tank button{flex:1;min-height:48px;border:1px solid var(--linie2);border-radius:8px;background:var(--platte2);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;padding:0}
.tank button.an{background:var(--gruen);border-color:var(--gruen);color:var(--grund)}

/* ---------- Tabelle ---------- */
.tab-wrap{overflow:auto;border:1px solid var(--linie);border-radius:var(--radius-k);background:var(--platte);margin-bottom:16px;-webkit-overflow-scrolling:touch}
table.tab{width:100%;border-collapse:collapse;font-size:14.5px}
table.tab th{position:sticky;top:0;z-index:1;padding:10px 12px;text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);background:var(--platte2);border-bottom:1px solid var(--linie2);white-space:nowrap}
table.tab td{padding:11px 12px;border-bottom:1px solid var(--linie);vertical-align:middle;color:var(--text)}
table.tab tr:last-child td{border-bottom:0}
table.tab tr.klick{cursor:pointer}
table.tab tr.klick:hover td{background:rgba(244,241,234,.04)}
table.tab td.rechts,table.tab th.rechts{text-align:right;font-variant-numeric:tabular-nums}
table.tab td.leise{color:var(--text3)}
table.tab .zahl{font-family:var(--display)}

/* ---------- Zeitleiste (Tage × Zeilen – Fahrzeugkalender) ---------- */
.zeitleiste{position:relative;overflow:auto;border:1px solid var(--linie);border-radius:var(--radius-k);background:var(--platte);margin-bottom:16px;-webkit-overflow-scrolling:touch;user-select:none}
.zeitleiste .zl-raster{display:grid;grid-template-columns:var(--zl-links,150px) repeat(var(--zl-tage,14),minmax(var(--zl-tag,48px),1fr));min-width:max-content}
.zeitleiste .zl-kopf{position:sticky;top:0;z-index:2;background:var(--platte2);border-bottom:1px solid var(--linie2)}
.zeitleiste .zl-kopf .zl-tag{padding:6px 2px;text-align:center;font-size:11px;line-height:1.2;color:var(--text3);border-left:1px solid var(--linie)}
.zeitleiste .zl-kopf .zl-tag b{display:block;font-size:13px;color:var(--text2);font-family:var(--display)}
.zeitleiste .zl-kopf .zl-tag.we{background:rgba(244,241,234,.03)}
.zeitleiste .zl-kopf .zl-tag.heute{color:var(--gruen)}.zeitleiste .zl-kopf .zl-tag.heute b{color:var(--gruen);text-shadow:0 0 10px var(--glow)}
.zeitleiste .zl-links{position:sticky;left:0;z-index:1;padding:8px 12px;background:var(--platte);border-right:1px solid var(--linie2);border-bottom:1px solid var(--linie);font-size:14px;line-height:1.25;cursor:pointer}
.zeitleiste .zl-links .titel{font-weight:600;color:var(--weiss);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zeitleiste .zl-links .sub{font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zeitleiste .zl-kopf .zl-links{background:var(--platte2);cursor:default}
.zeitleiste .zl-zeile{position:relative;grid-column:2/-1;display:grid;grid-template-columns:repeat(var(--zl-tage,14),minmax(var(--zl-tag,48px),1fr));min-height:50px;border-bottom:1px solid var(--linie)}
.zeitleiste .zl-zelle{border-left:1px solid var(--linie);cursor:pointer}
.zeitleiste .zl-zelle.we{background:rgba(244,241,234,.025)}
.zeitleiste .zl-zelle.heute{background:rgba(200,169,90,.05)}
.zeitleiste .zl-zelle:hover{background:rgba(244,241,234,.06)}
.zeitleiste .zl-balken{position:absolute;top:8px;height:34px;display:flex;align-items:center;padding:0 8px;border-radius:8px;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;background:rgba(244,241,234,.14);color:var(--text);border:1px solid rgba(244,241,234,.2);z-index:1}
.zeitleiste .zl-balken.angefragt{background:rgba(242,193,78,.18);color:var(--gelb);border-color:rgba(242,193,78,.45);border-style:dashed}
.zeitleiste .zl-balken.bestaetigt{background:rgba(200,169,90,.16);color:var(--kern);border-color:rgba(200,169,90,.5)}
.zeitleiste .zl-balken.abgeholt{background:rgba(200,169,90,.4);color:var(--grund);border-color:var(--gruen);box-shadow:0 0 12px var(--glow2)}
.zeitleiste .zl-balken.zurueck,.zeitleiste .zl-balken.abgerechnet{background:rgba(244,241,234,.08);color:var(--text2)}
.zeitleiste .zl-balken.sperre{background:repeating-linear-gradient(135deg,rgba(255,107,87,.2) 0 6px,rgba(255,107,87,.08) 6px 12px);color:var(--rot);border-color:rgba(255,107,87,.45)}
.zeitleiste .zl-balken.wendezeit{background:transparent;color:var(--text3);border-color:var(--linie);border-style:dotted;font-weight:500}

/* ---------- Dialog, Toast, Hinweise ---------- */
.schleier{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:rgba(2,6,18,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:schleier-ein .2s var(--kurve)}
.dialog{position:relative;width:100%;max-width:680px;max-height:92vh;max-height:92dvh;overflow:auto;padding:12px 20px calc(22px + env(safe-area-inset-bottom));background:var(--platte);border:1px solid var(--linie2);border-bottom:0;border-radius:var(--radius-g) var(--radius-g) 0 0;box-shadow:0 -10px 50px rgba(0,0,0,.6);animation:dialog-hoch .26s var(--kurve)}
.dialog::before{content:"";display:block;width:36px;height:5px;margin:0 auto 14px;border-radius:999px;background:rgba(244,241,234,.2)}
.dialog h2{margin:0 0 14px;font-size:22px}
.dialog .fuss{display:flex;gap:10px;margin-top:18px;justify-content:flex-end;flex-wrap:wrap}
.dialog .fuss .knopf{flex:1 1 auto}
.dialog.breit{max-width:960px}
@media(min-width:700px){
  .schleier{align-items:center;padding:24px}
  .dialog{border-radius:var(--radius-g);border-bottom:1px solid var(--linie2);padding:22px 28px 24px;animation:dialog-auf .22s var(--kurve)}
  .dialog::before{display:none}
  .dialog .fuss .knopf{flex:0 1 auto}
}
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));z-index:30;transform:translateX(-50%);max-width:min(92%,460px);padding:12px 18px;border-radius:14px;background:rgba(11,26,61,.96);color:var(--text);border:1px solid var(--linie2);font-size:15px;font-weight:500;line-height:1.35;box-shadow:0 10px 36px rgba(0,0,0,.5);animation:toast-ein .22s var(--kurve)}
.toast.rot{border-color:rgba(255,107,87,.6);color:#FFD2CB}.toast.gruen{border-color:rgba(200,169,90,.6);color:var(--kern);box-shadow:0 10px 36px rgba(0,0,0,.5),0 0 20px var(--glow2)}
@media(min-width:900px){.toast{bottom:32px}}
.hinweis{display:flex;gap:10px;align-items:flex-start;background:rgba(242,193,78,.1);border:1px solid rgba(242,193,78,.35);border-radius:var(--radius-k);padding:11px 14px;color:#F8E3A8;font-size:14.5px;line-height:1.45;margin-bottom:14px}
.hinweis .ico{color:var(--gelb);width:20px;height:20px;margin-top:1px}
.hinweis.rot{background:rgba(255,107,87,.1);border-color:rgba(255,107,87,.4);color:#FFD2CB}.hinweis.rot .ico{color:var(--rot)}
.hinweis.gruen{background:rgba(200,169,90,.08);border-color:rgba(200,169,90,.35);color:var(--kern)}.hinweis.gruen .ico{color:var(--gruen)}
.leer{color:var(--text3);padding:36px 16px;text-align:center;font-size:15px;border:1px dashed var(--linie2);border-radius:var(--radius-k);margin-bottom:16px}
.leer .ico{display:block;width:34px;height:34px;margin:0 auto 10px;opacity:.5}
.verlauf{list-style:none;margin:0 0 16px;padding:0}
.verlauf li{position:relative;padding:6px 0 6px 22px;font-size:14px;color:var(--text2);border-left:1px solid var(--linie2);margin-left:6px}
.verlauf li::before{content:"";position:absolute;left:-5px;top:12px;width:9px;height:9px;border-radius:50%;background:var(--platte3);border:1px solid var(--linie2)}
.verlauf li:first-child::before{background:var(--gruen);border-color:var(--gruen);box-shadow:0 0 8px var(--glow)}
.verlauf li .zeit{display:block;font-size:12px;color:var(--text3)}
.kette{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.kette .schritt{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text3);font-weight:500}
.kette .schritt::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--text3);box-sizing:border-box}
.kette .schritt.fertig{color:var(--text2)}.kette .schritt.fertig::before{background:var(--gruen);border-color:var(--gruen)}
.kette .schritt.aktiv{color:var(--kern)}.kette .schritt.aktiv::before{border-color:var(--gruen);box-shadow:0 0 10px var(--glow)}
.kette .strich{flex:1;min-width:10px;height:1px;background:var(--linie2)}
.suchergebnis h3{margin:14px 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);font-family:var(--font);font-weight:600}
.trenner{height:1px;background:var(--linie);margin:14px 0}

/* ---------- Anmeldung ---------- */
#app:has(>.login){position:relative;justify-content:center;align-items:center;padding:24px 16px;background:radial-gradient(90% 50% at 50% 0%,#0A1838 0%,var(--grund) 60%)}
.login{position:relative;width:100%;max-width:420px;padding:36px 24px 28px;background:var(--platte);border:1px solid var(--linie2);border-radius:var(--radius-g);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(200,169,90,.06);animation:dialog-auf .3s var(--kurve)}
.login .logo{display:block;width:min(260px,80%);height:auto;margin:0 auto 10px;filter:drop-shadow(0 0 18px rgba(200,169,90,.25))}
.login .roehre-linie{width:64px;height:3px;margin:0 auto 24px;border-radius:3px;background:var(--gruen);box-shadow:0 0 16px var(--glow)}
.login .claim{text-align:center;color:var(--text2);font-size:14px;margin:-12px 0 24px}
.login .feld{margin-bottom:12px}
.login .knopf.gross{margin-top:8px}
.login .fuss-text{margin-top:18px;text-align:center;color:var(--text3);font-size:12.5px}
@media(min-width:700px){.login{padding:44px 40px 36px}}

/* ---------- Animationen, Druck ---------- */
@keyframes schleier-ein{from{opacity:0}to{opacity:1}}
@keyframes dialog-hoch{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
@keyframes dialog-auf{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
@keyframes toast-ein{from{transform:translate(-50%,10px);opacity:0}to{transform:translateX(-50%);opacity:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{html,body{background:#fff;color:#000}header.kopf,nav,.knopf,.toast{display:none!important}main{padding:0}.karte,.tab-wrap{border-color:#999;background:#fff;color:#000;box-shadow:none}}