/* =======================================================================
   Meh.Go Tourplaner  app.css  (Design-Relaunch nach Claude-Design-Spec)
   ======================================================================= */
@font-face{
  font-family:"Nunito";
  src:url("fonts/Nunito.ttf") format("truetype");
  font-weight:200 1000; font-style:normal; font-display:swap;
}

:root{
  --bg:#0b0a0d; --bg-2:#100e13; --panel:#161318; --panel-2:#201c24; --panel-3:#2a2530;
  --line:#2c2630; --line-2:#38313f;
  --text:#f3f1ec; --muted:#9a909a; --faint:#6b6470;
  --accent:#e62778; --accent-600:#c71d65; --brand2:#f6b134; --brand:#e62778;
  --grad:linear-gradient(105deg,#f6b134 0%,#f57a45 42%,#e62778 100%);
  --grad-soft:linear-gradient(105deg,rgba(246,177,52,.16),rgba(230,39,120,.16));
  --warn:#ffb036; --ok:#5ec27a; --danger:#ff5a6e; --info:#6ab0ff;
  --accent-08:rgba(230,39,120,.10); --accent-16:rgba(230,39,120,.18); --brand2-12:rgba(246,177,52,.14);
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 24px rgba(0,0,0,.45);
  --shadow-pop:0 18px 48px rgba(0,0,0,.55); --glow-accent:0 10px 30px rgba(230,39,120,.35);
  --font-body:"Nunito",system-ui,-apple-system,sans-serif;
  --font-head:"Oswald","Nunito",sans-serif;
  --font:var(--font-body);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{
  height:100%;
  background:
    radial-gradient(1200px 700px at 12% -8%, rgba(246,177,52,.05), transparent 55%),
    radial-gradient(1100px 800px at 100% 0%, rgba(230,39,120,.07), transparent 50%),
    var(--bg);
  color:var(--text); font-family:var(--font-body); line-height:1.45;
  overflow:hidden; -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent; overscroll-behavior:none; -webkit-font-smoothing:antialiased;
}
.osw,.nr,.trip-time,.k-val{ font-family:var(--font-head); font-weight:500; letter-spacing:.01em; }
#app{ position:fixed; inset:0; height:100dvh; width:100vw; }
.view{ position:absolute; inset:0; display:none; }
.view.active{ display:block; }

/* ---------------- SPLASH ---------------- */
#splash{ position:fixed; inset:0; z-index:9999;
  background:radial-gradient(120% 80% at 50% 18%, rgba(230,39,120,.16), transparent 60%),
    radial-gradient(90% 60% at 50% 100%, rgba(246,177,52,.10), transparent 60%), var(--bg);
  display:flex; align-items:center; justify-content:center; text-align:center; transition:opacity .55s ease; }
#splash.hide{ opacity:0; pointer-events:none; }
.splash-inner{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px; }
.splash-logo{ max-width:78vw; max-height:150px; width:auto; animation:splashIn .8s cubic-bezier(.2,.8,.2,1) both; }
.splash-greet{ margin-top:12px; font-size:1.15rem; font-weight:700; color:var(--muted); min-height:1.4em; max-width:80vw;
  animation:splashIn .8s .25s cubic-bezier(.2,.8,.2,1) both; }
.splash-loader{ margin-top:30px; width:74px; height:74px; position:relative; }
.splash-loader::before{ content:""; position:absolute; inset:0; border-radius:50%; border:3px solid var(--line); }
.splash-loader .orbit{ position:absolute; inset:0; animation:orbitSpin 1.4s linear infinite; }
.splash-loader .orbit svg{ position:absolute; top:-7px; left:50%; transform:translateX(-50%); filter:drop-shadow(0 3px 8px rgba(230,39,120,.5)); }
@keyframes orbitSpin{ to{ transform:rotate(360deg); } }
@keyframes splashIn{ from{ opacity:0; transform:translateY(10px) scale(.96);} to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .splash-loader .orbit,.splash-logo,.splash-greet{ animation:none; } }

/* ---------------- MAP / DRIVE ---------------- */
#driveMap{ position:absolute; inset:0; z-index:0; background:#e7e3da; }
.scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(11,10,13,0) 0%, rgba(11,10,13,0) 40%,
    rgba(11,10,13,.5) 58%, rgba(11,10,13,.9) 76%, rgba(11,10,13,.98) 100%); }

/* topbar */
.topbar{ position:absolute; top:0; left:0; right:0; z-index:9;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:max(env(safe-area-inset-top),16px) 14px 10px; pointer-events:none; }
.topbar .toprow,.topbar .trip{ pointer-events:auto; }
.trip{ position:relative; display:flex; flex-direction:column; gap:1px;
  background:rgba(22,19,24,.85); border:1px solid var(--line); border-radius:var(--r-md);
  padding:8px 14px; backdrop-filter:blur(8px); visibility:hidden; cursor:grab; touch-action:none; box-shadow:var(--shadow-1); }
.trip.dragging{ cursor:grabbing; border-color:var(--accent); }
body.touring .trip{ visibility:visible; }
.trip-time{ font-size:1.6rem; color:var(--text); font-variant-numeric:tabular-nums; line-height:1; }
.trip-km{ font-size:.95rem; color:var(--brand2); font-weight:800; letter-spacing:.02em; }
.trip-grip{ position:absolute; top:5px; right:5px; width:15px; height:15px; opacity:.4; }
.trip-grip .icon{ width:15px; height:15px; }
.toprow{ display:flex; gap:9px; margin-left:auto; align-items:center; }
.iconbtn{ width:46px; height:46px; border-radius:50%; background:rgba(22,19,24,.82);
  border:1px solid var(--line); color:var(--text); display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(8px); }
.iconbtn:active{ background:var(--panel-3); }
.iconbtn .icon{ width:23px; height:23px; }
.iconbtn.on{ background:var(--accent-16); border-color:var(--accent); color:var(--accent); animation:micPulse 1.1s ease-in-out infinite; }
.iconbtn.on .icon path,.iconbtn.on .icon rect{ stroke:var(--accent); }
.offline-badge{ align-self:center; pointer-events:auto; background:rgba(255,90,110,.16); color:var(--danger);
  border:1px solid var(--danger); border-radius:var(--r-pill); padding:5px 12px; font-size:.8rem; font-weight:800;
  letter-spacing:.03em; text-transform:uppercase; backdrop-filter:blur(8px); }
.mic-badge{ display:none; align-self:center; pointer-events:none; background:rgba(94,194,122,.16); color:var(--ok);
  border:1px solid var(--ok); border-radius:var(--r-pill); padding:5px 11px; font-size:.8rem; font-weight:800;
  letter-spacing:.03em; text-transform:uppercase; animation:micPulse 1.4s ease-in-out infinite; }
body.listening .mic-badge{ display:inline-flex; }
@keyframes micPulse{ 0%,100%{ opacity:.55;} 50%{ opacity:1; } }

/* meta + gps pills */
.meta-line{ position:absolute; top:max(env(safe-area-inset-top),16px); left:0; right:0; z-index:4;
  text-align:center; margin-top:74px; pointer-events:none; }
.meta-pill{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border-radius:var(--r-pill);
  background:rgba(22,19,24,.85); border:1px solid var(--line); font-size:.92rem; font-weight:800; color:var(--text);
  letter-spacing:.01em; backdrop-filter:blur(8px); box-shadow:var(--shadow-1); white-space:nowrap; }
.meta-pill b{ font-family:var(--font-head); font-weight:600; color:var(--accent); }
.gpschip{ position:absolute; left:50%; top:max(env(safe-area-inset-top),16px); margin-top:120px; transform:translateX(-50%);
  z-index:4; display:none; align-items:center; gap:7px; height:32px; padding:0 14px; border-radius:var(--r-pill);
  background:rgba(22,19,24,.85); border:1px solid var(--line); color:var(--muted); font-size:.88rem; font-weight:800;
  pointer-events:none; backdrop-filter:blur(8px); }
.gpschip.show{ display:inline-flex; }
.gpschip.near{ border-color:var(--ok); color:var(--ok); }

/* tapzones */
.tapzone{ position:absolute; bottom:0; height:30%; width:50%; z-index:3; display:flex; align-items:center;
  cursor:pointer; transition:background-color .12s ease; padding-bottom:3vh; color:rgba(243,241,236,.55); }
.tapzone-left{ left:0; justify-content:flex-start; padding-left:7vw; }
.tapzone-right{ right:0; justify-content:flex-end; padding-right:7vw; }
.tapzone-left.flash{ background:linear-gradient(90deg, var(--accent-16), transparent); }
.tapzone-right.flash{ background:linear-gradient(270deg, var(--accent-16), transparent); }
.chev{ color:rgba(243,241,236,.6); transition:color .12s, transform .12s; }
.chev .icon{ width:8vmin; height:8vmin; }
.tapzone:active .chev{ color:var(--accent); transform:scale(1.1); }
.tap-divider{ position:absolute; bottom:3%; height:24%; left:50%; width:1px; background:rgba(255,255,255,.06); z-index:3; transform:translateX(-.5px); pointer-events:none; }

/* stage = bottom sheet */
.stage{ position:absolute; left:0; right:0; bottom:0; z-index:4; display:flex; flex-direction:column; align-items:center;
  text-align:center; pointer-events:none; padding:18px 12vw max(env(safe-area-inset-bottom),3vh); gap:.8vmin; }
.spot-badge{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 12px; border-radius:var(--r-pill);
  background:var(--accent-16); color:#ff8fbb; font-size:.82rem; font-weight:800; }
.hinweis{ background:var(--brand2-12); border:1px solid var(--warn); color:var(--warn); border-radius:var(--r-sm);
  padding:8px 14px; font-size:clamp(.95rem,3.6vmin,1.4rem); font-weight:800; max-width:92%; }
.papers{ display:flex; gap:2vmin; flex-wrap:wrap; justify-content:center; margin-bottom:.4vmin; }
.paper{ display:flex; align-items:center; gap:9px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:.9vmin 2.4vmin; }
.paper.paused{ opacity:.45; border-style:dashed; }
.paper .abbr{ font-family:var(--font-head); font-size:clamp(1.2rem,5vmin,2.1rem); font-weight:600; color:var(--brand2); line-height:1; }
.paper .full{ font-size:clamp(.6rem,2vmin,.85rem); color:var(--muted); font-weight:700; }
.name{ font-size:clamp(1.1rem,4.6vmin,2rem); font-weight:800; color:var(--text); text-shadow:0 2px 10px rgba(0,0,0,.9); }
.street{ font-family:var(--font-head); font-size:clamp(1.3rem,5.4vmin,2.4rem); font-weight:500; letter-spacing:.03em;
  color:var(--accent); text-transform:uppercase; line-height:1.05; text-shadow:0 2px 12px rgba(0,0,0,.9); }
.nr{ font-size:clamp(3.4rem,20vmin,9rem); font-weight:600; line-height:.86; letter-spacing:-.01em; color:var(--text);
  text-shadow:0 0 30px rgba(0,0,0,.9),0 4px 16px rgba(0,0,0,.9); font-variant-numeric:tabular-nums; }

/* floating report button */
.fab-report{ position:absolute; left:16px; bottom:calc(30% + 16px); z-index:6; width:58px; height:58px; border-radius:50%;
  background:var(--grad); color:#1c1013; border:none; display:none; place-items:center; box-shadow:var(--glow-accent); cursor:pointer; }
body.touring .fab-report{ display:grid; }
body.editing .fab-report{ display:none !important; }
.fab-report .icon{ width:27px; height:27px; }
.fab-report .icon path,.fab-report .icon line,.fab-report .icon polyline,.fab-report .icon circle{ stroke:#1c1013; }

/* reorder + reroute */
.reorder-bar{ position:absolute; left:50%; bottom:max(env(safe-area-inset-bottom),18px); transform:translateX(-50%);
  z-index:9; width:92%; max-width:460px; background:rgba(22,19,24,.95); border:1px solid var(--accent); border-radius:var(--r-xl);
  padding:16px 18px; backdrop-filter:blur(8px); box-shadow:var(--shadow-pop); }
.reorder-info{ display:flex; flex-direction:column; gap:4px; margin-bottom:14px; }
.reorder-info b{ font-family:var(--font-head); font-size:1.15rem; color:var(--accent); }
.reorder-info span{ font-size:.95rem; color:var(--muted); line-height:1.3; }
.reorder-count{ color:var(--ok) !important; font-weight:800; }
.reorder-btns{ display:flex; gap:12px; }
.reorder-btns .btn{ flex:1; }
.reroute{ position:absolute; left:50%; top:36%; transform:translateX(-50%); z-index:8; width:88%; max-width:440px;
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-xl); padding:20px; box-shadow:var(--shadow-pop); text-align:center; }
.reroute-text{ font-size:1.2rem; color:var(--text); margin-bottom:16px; line-height:1.35; font-weight:700; }
.reroute-text b{ color:var(--accent); }
.reroute-btns{ display:flex; gap:12px; justify-content:center; }

/* ---------------- OVERLAYS (start / end) ---------------- */
.overlay{ position:absolute; inset:0; z-index:7; background:transparent; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:8vw; gap:2.4vmin; overflow-y:auto; }
.overlay.hidden{ display:none; }
.overlay .big{ font-family:var(--font-head); font-size:clamp(2rem,10vmin,4rem); font-weight:600; color:var(--text); line-height:1; }
.overlay .sub{ font-size:clamp(1rem,4.2vmin,1.5rem); color:var(--muted); font-weight:700; }
.overlay .count{ font-family:var(--font-head); font-size:clamp(3rem,17vmin,7.5rem); font-weight:600; color:var(--text); line-height:.9; }
.start-logo{ max-width:60vw; max-height:84px; width:auto; margin-bottom:1vmin; }
.start-info{ width:100%; max-width:440px; margin:1vmin auto; }
.di-title{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800; margin-bottom:8px; }
.di-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.di-paper{ display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:7px 12px; font-size:1rem; font-weight:800; color:var(--text); }
.di-paper b{ font-family:var(--font-head); color:var(--brand2); font-weight:600; margin-right:2px; }
.di-sum{ margin-top:10px; color:var(--muted); font-size:.95rem; font-weight:700; }
.di-hint{ margin-top:8px; color:var(--warn); font-size:.9rem; font-weight:700; }
.weather{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; max-width:440px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 16px; }
.weather .w-temp{ font-family:var(--font-head); font-size:1.5rem; color:var(--text); font-weight:600; }
.weather .w-cond{ color:var(--muted); font-weight:700; }
.weather .w-warn{ width:100%; margin-top:4px; color:var(--warn); background:var(--brand2-12); border-radius:var(--r-sm); padding:7px 14px; font-weight:800; }
.trip-summary{ font-size:clamp(1.05rem,4.4vmin,1.5rem); color:var(--text); line-height:1.6; font-weight:700; }
.trip-summary b{ font-family:var(--font-head); color:var(--brand2); font-weight:600; }
.problem-summary{ width:100%; max-width:440px; text-align:left; margin:6px auto; }
.end-note{ width:100%; max-width:440px; text-align:left; }
.end-note label{ display:block; color:var(--muted); margin-bottom:8px; font-size:1rem; font-weight:800; }
.end-note textarea{ width:100%; min-height:84px; background:var(--panel-2); color:var(--text); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:12px 14px; font-family:var(--font-body); font-size:1.05rem; font-weight:600; resize:vertical; margin-bottom:12px; }

/* ---------------- BUTTONS ---------------- */
.btn{ font-family:var(--font-body); font-weight:800; font-size:1rem; border:none; border-radius:var(--r-md);
  padding:0 22px; min-height:54px; display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  color:#1c1013; background:var(--grad); box-shadow:var(--glow-accent); letter-spacing:.01em; }
.btn .icon{ width:22px; height:22px; }
.btn .icon path,.btn .icon line,.btn .icon polyline,.btn .icon circle,.btn .icon rect{ stroke:#1c1013; }
.btn:active{ transform:translateY(1px); }
.btn.ghost{ background:transparent; border:1.5px solid var(--line-2); color:var(--text); box-shadow:none; }
.btn.ghost .icon path,.btn.ghost .icon line,.btn.ghost .icon polyline,.btn.ghost .icon circle,.btn.ghost .icon rect{ stroke:var(--text); }
.btn.secondary{ background:var(--panel-2); color:var(--text); box-shadow:none; }
.btn.small{ min-height:42px; font-size:.95rem; padding:0 16px; border-radius:var(--r-sm); }
.btn:disabled,.btn[disabled]{ background:var(--panel-2); color:var(--faint); box-shadow:none; }

/* ---------------- PANELS ---------------- */
.panel{ position:absolute; inset:0; z-index:20; background:var(--bg); transform:translateY(100%);
  transition:transform .28s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column; }
.panel.open{ transform:none; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; padding:max(env(safe-area-inset-top),16px) 18px 12px; }
.panel-head h2{ font-family:var(--font-head); font-size:1.5rem; font-weight:500; }
.panel-subhead{ display:flex; gap:10px; padding:0 18px 10px; flex-wrap:wrap; }
.panel-body{ flex:1; overflow-y:auto; padding:6px 18px 28px; -webkit-overflow-scrolling:touch; }

.tabbar{ display:flex; gap:4px; margin:0 14px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-md); padding:5px; }
.tab{ flex:1; text-align:center; padding:10px 4px; border-radius:11px; font-size:.85rem; font-weight:800; color:var(--muted); cursor:pointer; }
.tab.active{ background:var(--panel); color:var(--text); box-shadow:var(--shadow-1); }
.tabpane{ padding-top:6px; }

.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label,.mlabel{ font-size:.85rem; color:var(--muted); font-weight:800; }
.field input,.field select,.field textarea,input[type="time"],input[type="date"],input[type="number"],input[type="text"],select,textarea{
  background:var(--panel-2); border:1px solid var(--line); color:var(--text); border-radius:var(--r-sm);
  padding:0 14px; min-height:50px; width:100%; font-family:var(--font-body); font-size:1rem; font-weight:700; }
textarea{ padding:12px 14px; min-height:84px; font-weight:600; resize:vertical; }
input::placeholder,textarea::placeholder{ color:var(--faint); }
.note{ color:var(--muted); font-size:.88rem; font-weight:600; margin-top:6px; line-height:1.5; }
.status-line{ color:var(--muted); font-size:.9rem; margin-top:10px; font-weight:700; }

.toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--panel-2);
  border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; margin-bottom:14px; }
.toggle-row > span:first-child{ display:flex; align-items:center; gap:4px; flex:1 1 auto; min-width:0; font-size:1.05rem; font-weight:800; }
.toggle-row .info-wrap{ flex:0 0 auto; }
.toggle-row .info-pop{ font-size:.82rem; font-weight:600; }
.switch{ position:relative; display:inline-block; width:50px; height:30px; flex:0 0 auto; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; inset:0; border-radius:var(--r-pill); background:var(--panel-3); border:1px solid var(--line); cursor:pointer; transition:.2s; }
.slider::before{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--faint); transition:.2s; }
.switch input:checked + .slider{ background:var(--grad); border-color:transparent; }
.switch input:checked + .slider::before{ left:25px; background:#1c1013; }

.seg{ display:flex; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:4px; gap:4px; }
.seg button{ flex:1; text-align:center; min-height:40px; border:none; border-radius:9px; font-family:var(--font-body);
  font-size:.95rem; font-weight:800; color:var(--muted); background:transparent; cursor:pointer; }
.seg button.active{ background:var(--grad); color:#1c1013; }

/* ---------------- HÄUSER-ROUTE ---------------- */
.manage-intro{ color:var(--muted); font-size:.9rem; margin-bottom:14px; font-weight:600; line-height:1.5; }
.stop-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:10px; overflow:hidden; }
.stop-card.paused-house{ opacity:.7; }
.stop-card.paused-house .adr{ text-decoration:line-through; text-decoration-color:var(--muted); }
.stop-head{ display:flex; align-items:center; gap:10px; padding:14px; cursor:pointer; }
.stop-head.has-warn{ border-left:3px solid var(--warn); }
.stop-head.paused-house{ border-left:3px solid var(--accent); }
.drag-handle{ width:24px; height:24px; color:var(--muted); cursor:grab; touch-action:none; display:grid; place-items:center; flex:0 0 auto; opacity:.65; }
.drag-handle:active{ cursor:grabbing; color:var(--accent); }
.drag-handle .icon{ width:22px; height:22px; }
.stop-head .num{ font-family:var(--font-head); font-size:1rem; color:var(--muted); min-width:30px; }
.stop-head .adr{ flex:1; font-size:1.25rem; color:var(--accent); font-weight:800; }
.stop-head .mini{ font-size:.85rem; color:var(--muted); font-weight:700; }
.warn-flag{ color:var(--warn); font-weight:800; }
.hold-flag{ color:var(--accent); font-weight:800; }
.stop-head .chev-acc{ width:22px; height:22px; color:var(--muted); transition:transform .2s; }
.stop-card.open .chev-acc{ transform:rotate(180deg); }
.stop-body{ display:none; flex-direction:column; gap:6px; padding:0 14px 16px; }
.stop-card.open .stop-body{ display:flex; }
.sortrow{ display:flex; gap:8px; margin-bottom:6px; }
.sortbtn,.delbtn{ width:44px; height:40px; border-radius:var(--r-sm); background:var(--panel-2); border:1px solid var(--line); color:var(--text); display:grid; place-items:center; cursor:pointer; }
.delbtn{ color:var(--danger); margin-left:auto; }
.sortbtn .icon,.delbtn .icon{ width:20px; height:20px; }
.hold-box{ display:flex; flex-direction:column; gap:10px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:14px; margin-bottom:10px; }
.hold-box.on{ border-color:var(--warn); background:var(--brand2-12); }
.hold-box .btn{ width:100%; }
.hold-until{ display:flex; flex-direction:column; gap:6px; }
.assign-list{ display:flex; flex-direction:column; gap:8px; }
.assign{ display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; }
.assign.paused{ opacity:.5; }
.pabbr{ font-family:var(--font-head); font-weight:600; color:var(--brand2); min-width:42px; }
.psched{ flex:1; }
.psched select{ min-height:40px; }
.pause-btn,.rm-btn{ width:40px; height:40px; border-radius:var(--r-sm); background:var(--panel); border:1px solid var(--line); color:var(--text); display:grid; place-items:center; cursor:pointer; }
.pause-btn.on{ color:var(--ok); }
.rm-btn{ color:var(--danger); }
.pause-btn .icon,.rm-btn .icon{ width:18px; height:18px; }
.add-paper-btn{ display:inline-flex; align-items:center; gap:6px; background:transparent; border:1.5px dashed var(--line-2); color:var(--muted); border-radius:var(--r-sm); padding:10px; font-family:var(--font-body); font-weight:800; cursor:pointer; }
.add-paper-btn .icon{ width:18px; height:18px; }
.coord-row{ display:flex; gap:8px; align-items:stretch; }
.coord-row .cell{ flex:1; }
.coord-row [data-gps]{ min-height:50px; }
.coord-state{ font-size:.85rem; font-weight:700; margin-top:4px; }
.coord-state.has-coord{ color:var(--ok); }
.coord-state.no-coord{ color:var(--warn); }
.sticky-actions{ display:flex; gap:10px; position:sticky; bottom:0; padding:12px 0; background:linear-gradient(transparent,var(--bg) 30%); }
.sticky-actions .btn{ flex:1; }
.paper-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.paper-row .pid{ font-family:var(--font-head); font-weight:600; color:var(--brand2); min-width:50px; }
.paper-row .pname{ flex:1; font-weight:700; }
.paper-add{ margin-top:16px; }
.paper-add .row{ display:flex; gap:10px; }
.paper-add .c1{ flex:0 0 110px; } .paper-add .c2{ flex:1; }

/* ---------------- HISTORY + STATS ---------------- */
.hist-item{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:14px; margin-bottom:10px; cursor:pointer; transition:border-color .15s; }
.hist-item:active{ border-color:var(--accent); }
.hist-item .top{ display:flex; justify-content:space-between; font-size:1.05rem; }
.hist-item .top .d{ font-family:var(--font-head); color:var(--accent); font-weight:600; }
.hist-item .stats{ color:var(--muted); font-size:.92rem; margin-top:4px; font-weight:700; }
.hist-item .hnote{ color:var(--text); font-size:.95rem; margin-top:8px; line-height:1.4; border-left:2px solid var(--line); padding-left:10px; }
.hist-probs{ color:var(--warn); font-weight:800; }
.hp-item{ display:flex; gap:8px; align-items:center; color:var(--text); margin-top:6px; font-size:.9rem; }
.hist-more{ color:var(--accent); font-size:.85rem; margin-top:8px; font-weight:800; }
.hist-map,.hd-stats{ }
.hist-map{ height:190px; width:100%; border-radius:var(--r-md); overflow:hidden; margin-bottom:12px; background:#e7e3da; }
.hd-stats{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.hd-stats span{ color:var(--muted); font-size:1rem; font-weight:700; }
.hd-stats b{ font-family:var(--font-head); color:var(--text); font-size:1.4rem; font-weight:600; }
.ps-title{ font-size:1rem; color:var(--muted); margin:14px 0 8px; font-weight:800; }
.ps-title.warn{ color:var(--danger); }
.ps-item{ display:flex; gap:10px; align-items:flex-start; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px; margin-bottom:8px; }
.ps-thumb{ width:54px; height:54px; object-fit:cover; border-radius:var(--r-xs); flex:0 0 auto; }
.ps-text{ font-size:.95rem; color:var(--text); line-height:1.4; font-weight:700; }
.ps-text span{ color:var(--muted); font-size:.8rem; font-weight:700; }

.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.stat-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; }
.sc-val{ font-family:var(--font-head); font-size:2.1rem; font-weight:600; color:var(--text); line-height:1; }
.sc-lab{ font-size:.78rem; color:var(--muted); margin-top:6px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.stats-h{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800; margin:20px 0 10px; }
.bars{ display:flex; flex-direction:column; gap:8px; }
.bar-row{ display:flex; align-items:center; gap:10px; }
.bar-lab{ width:28px; color:var(--muted); font-size:.9rem; font-weight:800; }
.bar-track{ flex:1; height:14px; background:var(--panel-2); border-radius:var(--r-pill); overflow:hidden; }
.bar-fill{ display:block; height:100%; background:var(--grad); border-radius:var(--r-pill); }
.bar-val{ width:56px; text-align:right; color:var(--text); font-size:.88rem; font-weight:700; font-variant-numeric:tabular-nums; }

/* ---------------- MODALS ---------------- */
.modal{ position:fixed; inset:0; z-index:30; background:rgba(8,7,10,.72); display:none; align-items:center; justify-content:center; padding:18px; backdrop-filter:blur(3px); }
.modal.open{ display:flex; }
.modal-card{ background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-xl); width:min(420px,94vw); max-height:86vh; overflow-y:auto; box-shadow:var(--shadow-pop); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 18px 8px; }
.modal-head h3{ font-family:var(--font-head); font-size:1.3rem; font-weight:500; color:var(--accent); }
.modal-x{ background:var(--panel-2); border:1px solid var(--line); color:var(--text); width:38px; height:38px; border-radius:50%; display:grid; place-items:center; cursor:pointer; }
.modal-x .icon{ width:20px; height:20px; }
.modal-body{ padding:4px 18px 18px; }
.modal-label{ display:block; font-size:.85rem; color:var(--muted); font-weight:800; margin:12px 0 6px; }
.modal-body select,.modal-body textarea{ width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text); border-radius:var(--r-sm); padding:11px 12px; font-family:var(--font-body); font-size:1.05rem; font-weight:600; }
.modal-actions{ display:flex; gap:10px; margin-top:14px; }
.modal-actions .btn{ flex:1; }
.seg-modal{ margin:4px 0 6px; }
.problem-photo{ display:block; max-width:100%; max-height:240px; border-radius:var(--r-sm); margin-top:10px; border:1px solid var(--line); }

/* ---------------- MAP MARKER ---------------- */
.mk-wrap{ background:none; border:none; }
.mk{ width:30px; height:30px; border-radius:50% 50% 50% 2px; display:grid; place-items:center; font-family:var(--font-head);
  font-weight:600; font-size:.95rem; color:#1c1013; border:2px solid rgba(0,0,0,.45); box-shadow:0 2px 6px rgba(0,0,0,.6);
  transform:rotate(45deg); font-variant-numeric:tabular-nums; }
.mk > *{ transform:rotate(-45deg); }
.mk-todo{ background:#cdb7d6; color:#221426; }
.mk-done{ background:var(--faint); color:#1c1013; opacity:.75; }
.mk-cur{ background:var(--grad); color:#fff; width:38px; height:38px; font-size:1.15rem; border-color:#fff;
  box-shadow:0 0 0 4px rgba(230,39,120,.32), 0 2px 8px rgba(0,0,0,.7); z-index:1000; }
.mk-sel{ background:var(--ok); }
.mk-warn{ background:var(--warn); color:#231405; border-color:#5a3a09; box-shadow:0 0 0 4px rgba(255,176,54,.28), 0 2px 8px rgba(0,0,0,.6); }
.mk-flagged{ box-shadow:0 0 0 3px var(--warn), 0 2px 7px rgba(0,0,0,.6) !important; }
.mk-undelivered{ box-shadow:0 0 0 3px var(--danger), 0 2px 7px rgba(0,0,0,.6) !important; }
.mk-box{ display:flex; flex-direction:column; align-items:center; gap:1px; }
.mk-box svg{ background:var(--accent); border:2px solid #46102c; border-radius:var(--r-xs); padding:3px; box-shadow:0 2px 8px rgba(0,0,0,.6); }
.mk-box span{ font-size:.7rem; font-weight:800; color:#fff; background:rgba(11,10,13,.85); padding:0 6px; border-radius:6px; letter-spacing:.04em; }
.mk-box.drag svg{ box-shadow:0 0 0 4px rgba(230,39,120,.3), 0 2px 8px rgba(0,0,0,.6); }

/* eigener Standort: Twingo */
.me-car-wrap{ pointer-events:none; background:none; border:none; }
.me-car{ animation:meBob 1.1s ease-in-out infinite; will-change:transform; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.me-car-svg .wheel{ transform-box:fill-box; transform-origin:center; animation:meSpin .5s linear infinite; }
@keyframes meBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-1.2px); } }
@keyframes meSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .me-car,.me-car-svg .wheel,.mic-badge{ animation:none; } }

/* ---------------- LEAFLET ---------------- */
.leaflet-container{ background:#e7e3da !important; font-family:var(--font-body); }
.leaflet-popup-content-wrapper,.leaflet-popup-tip{ background:var(--panel); color:var(--text); border:1px solid var(--line-2); }
.leaflet-popup-content{ font-size:1.05rem; font-weight:700; }
.leaflet-popup-content button{ background:var(--grad); color:#1c1013; border:none; border-radius:var(--r-sm); padding:8px 14px; font-family:var(--font-body); font-weight:800; font-size:1rem; cursor:pointer; }
.leaflet-bar a{ background:var(--panel) !important; color:var(--text) !important; border-color:var(--line) !important; }
.leaflet-top.leaflet-left{ margin-top:120px; }

/* toast */
.toast{ position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 92px); transform:translateX(-50%) translateY(24px);
  background:var(--panel-2); color:var(--text); border:1px solid var(--line-2); border-left:6px solid var(--accent); border-radius:15px;
  padding:16px 24px; font-size:1.12rem; font-weight:800; line-height:1.3; box-shadow:var(--shadow-pop); opacity:0; pointer-events:none;
  transition:.22s cubic-bezier(.2,.8,.2,1); z-index:9000; max-width:88vw; text-align:center; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.ok{ border-left-color:var(--ok); }
.toast.err{ border-left-color:var(--danger); }

/* =======================================================================
   DESIGN-FEINSCHLIFF (exakt nach Entwurf)
   ======================================================================= */
.progress{ display:none; }
.row{ display:flex; align-items:center; gap:12px; }
.row.between{ justify-content:space-between; }
.stack{ display:flex; flex-direction:column; }
.sec-label{ font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.muted{ color:var(--muted); } .faint{ color:var(--faint); }
.ico{ width:24px; height:24px; display:inline-grid; place-items:center; flex:0 0 auto; }
.ico .icon{ width:100%; height:100%; }
.ico-18{ width:18px; height:18px; } .ico-20{ width:20px; height:20px; } .ico-28{ width:28px; height:28px; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; }
.badge{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:var(--r-pill); font-size:.72rem; font-weight:800; letter-spacing:.02em; }
.badge .ico,.badge .ico-18{ width:14px; height:14px; }
.badge-accent{ background:var(--accent-16); color:#ff8fbb; }
.badge-warn{ background:var(--brand2-12); color:var(--brand2); }
.badge-ok{ background:rgba(94,194,122,.16); color:var(--ok); }
.badge-danger{ background:rgba(255,90,110,.16); color:var(--danger); }
.badge-muted{ background:var(--panel-2); color:var(--muted); }
.pill{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border-radius:var(--r-pill);
  background:rgba(22,19,24,.85); border:1px solid var(--line); font-size:.84rem; font-weight:800; color:var(--text); backdrop-filter:blur(8px); }
.pill .dot{ width:7px; height:7px; border-radius:50%; }
.pill .ico,.pill .ico-18{ width:15px; height:15px; }
.np-tile{ display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 12px 0 10px; border-radius:var(--r-sm);
  background:var(--panel-2); border:1px solid var(--line); font-weight:800; font-size:.9rem; }
.np-tile .qty{ font-family:var(--font-head); font-size:1.05rem; color:var(--brand2); }
.np-chip{ width:16px; height:22px; border-radius:3px; flex:0 0 auto; }
.pin{ width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(0,0,0,.4); flex:0 0 auto; }
.pin::after{ content:""; width:11px; height:11px; border-radius:50%; background:#fff; }
.pin.grad{ background:var(--grad); } .pin.accent{ background:var(--accent); }
.ploader{ width:74px; height:74px; position:relative; }
.ploader .track{ position:absolute; inset:0; border-radius:50%; border:3px solid var(--line); }
.ploader .orbit{ position:absolute; inset:0; animation:orbitSpin 1.4s linear infinite; }
.ploader .orbit .pin{ position:absolute; top:-9px; left:calc(50% - 12px); width:24px; height:24px; }
@media (prefers-reduced-motion: reduce){ .ploader .orbit{ animation:none; } }

/* splash */
.splash-greet{ font-size:1.5rem; color:var(--text); margin-top:0; min-height:auto; }
.splash-sub{ color:var(--muted); font-size:.9rem; font-weight:700; margin-top:2px; }
.splash-foot{ position:absolute; bottom:34px; left:0; right:0; text-align:center; }
.splash-ver{ font-size:.75rem; margin-top:10px; font-weight:700; color:var(--faint); }

/* start screen */
.start-screen{ align-items:stretch; justify-content:flex-start; padding:0; gap:0; }
.start-scroll{ flex:1; width:100%; max-width:480px; margin:0 auto; overflow-y:auto;
  padding:max(env(safe-area-inset-top),18px) 22px 24px; display:flex; flex-direction:column; text-align:left; }
.start-top{ margin-bottom:18px; }
.start-datepill{ white-space:nowrap; }
.start-foot{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:26px; padding-top:8px; opacity:.85; }
.start-foot-logo{ height:18px; width:auto; opacity:.7; }
.start-foot-text{ font-size:.64rem; letter-spacing:.02em; color:var(--muted); text-align:center; }
#startCount{ font-size:74px; line-height:.9; color:var(--text); }
.start-hcap{ font-size:26px; color:var(--muted); }
.start-headline{ margin-bottom:16px; }
.start-actions{ gap:10px; margin-top:16px; }
#startInfo{ margin-bottom:auto; }
.weather-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px; margin-bottom:14px; }
.wc-temp{ font-family:var(--font-head); font-weight:600; font-size:1.3rem; }
.wc-cond{ color:var(--muted); font-size:.82rem; font-weight:700; }
.wc-time{ font-family:var(--font-head); font-size:.82rem; color:var(--faint); }
.wc-warn{ display:flex; align-items:center; gap:9px; margin-top:12px; padding:9px 12px; background:var(--brand2-12); border-radius:var(--r-sm); color:var(--warn); font-weight:800; font-size:.85rem; }
.di-card{ }
.di-rownp{ display:flex; align-items:center; justify-content:space-between; }
.di-rownp .nm{ font-weight:800; font-size:.92rem; }
.di-rownp .qty{ font-family:var(--font-head); font-size:1.1rem; color:var(--brand2); }

/* drive overlays */
.drv-top{ position:absolute; top:max(env(safe-area-inset-top),14px); left:0; right:0; padding:0 14px;
  display:flex; justify-content:space-between; align-items:flex-start; z-index:30; }
.drv-iconcol{ display:flex; flex-direction:column; gap:9px; align-items:center; }
.drv-center{ position:absolute; top:max(env(safe-area-inset-top),14px); margin-top:96px; left:0; right:0;
  display:flex; flex-direction:column; align-items:center; gap:8px; z-index:25; pointer-events:none; }
.trip{ display:inline-flex; flex-direction:column; align-items:stretch; gap:2px; padding:6px 12px;
  background:rgba(22,19,24,.85); border:1px solid var(--line); border-radius:18px; backdrop-filter:blur(8px);
  visibility:hidden; cursor:grab; touch-action:none; box-shadow:var(--shadow-1); }
.trip-main{ display:flex; flex-direction:row; align-items:center; gap:12px; height:30px; }
body.touring .trip{ visibility:visible; }
.trip .trip-time{ font-size:1.05rem; line-height:1; color:var(--text); }
.trip .trip-km{ font-size:1.05rem; color:var(--brand2); }
/* Restzeit als kleine Zeile unter der Timer-Zeit */
.trip-eta{ display:none; align-items:center; gap:5px; font-size:.72rem; font-weight:700; color:var(--muted);
  padding-top:3px; border-top:1px solid var(--line-2); }
.trip-eta.show{ display:flex; }
.trip-eta .ico{ width:13px; height:13px; color:var(--brand2); }
.trip-div{ width:1px; height:18px; background:var(--line-2); }
.trip-grip{ width:13px; height:13px; opacity:.35; }
.trip-grip .icon{ width:13px; height:13px; }

/* tapzones group */
.tapzones{ position:absolute; left:0; right:0; bottom:0; height:30%; display:flex; z-index:20; }
.tapzone{ position:static; flex:1; height:100%; width:auto; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; padding:0 0 18px; gap:4px; color:rgba(243,241,236,.5); }
.tz-label{ font-size:.74rem; font-weight:800; }
.tapzone .chev .icon{ width:7vmin; height:7vmin; }

/* sheet */
.stage{ position:absolute; left:0; right:0; bottom:0; z-index:35; display:block; text-align:left; align-items:stretch;
  pointer-events:none; padding:22px 22px max(env(safe-area-inset-bottom),24px);
  background:linear-gradient(180deg,rgba(11,10,13,.9),var(--bg) 24%); border-radius:26px 26px 0 0;
  border-top:1px solid var(--line-2); box-shadow:0 -18px 40px rgba(0,0,0,.45); gap:0; }
.sheet-main{ }
.stage .street{ font-family:var(--font-body); font-size:.85rem; font-weight:800; color:var(--muted);
  text-transform:none; letter-spacing:0; text-shadow:none; line-height:1.2; }
.stage .nr,.hugenum{ font-family:var(--font-head); font-weight:600; font-size:clamp(3.6rem,16vmin,5.4rem);
  line-height:.86; letter-spacing:-.01em; color:var(--text); text-shadow:none; }
.stage .name{ font-size:1rem; font-weight:900; color:var(--text); text-shadow:none; }
.stage .spot-badge{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:var(--r-pill);
  background:var(--brand2-12); color:var(--brand2); font-size:.72rem; font-weight:800; white-space:nowrap; }
.stage .papers{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; justify-content:flex-start; margin-bottom:0; }
.stage .hinweis{ display:flex; align-items:center; gap:9px; margin-top:12px; padding:10px 12px; background:var(--panel-2);
  border:none; border-radius:var(--r-sm); color:var(--text); font-size:.85rem; font-weight:700; max-width:100%; }
.stage .hinweis .ico{ color:var(--brand2); flex:0 0 auto; }
.fab{ width:58px; height:58px; border-radius:50%; background:var(--grad); display:inline-flex; align-items:center;
  justify-content:center; box-shadow:var(--glow-accent); color:#1c1013; cursor:pointer; border:none; pointer-events:auto; }
.fab .icon{ width:25px; height:25px; }
.fab .icon path,.fab .icon line,.fab .icon polyline,.fab .icon circle,.fab .icon rect{ stroke:#1c1013; }
.stage .fab{ position:absolute; left:22px; top:-29px; }

/* Ziel-Pille (gpschip) */
.gpschip{ position:static; margin:0; transform:none; background:var(--accent); border-color:transparent; color:#fff;
  height:34px; font-weight:800; }
.gpschip.show{ display:inline-flex; }
.gpschip.near{ background:var(--ok); color:#fff; }
.gpschip .ico{ width:15px; height:15px; }
.meta-pill .dot{ width:7px; height:7px; border-radius:50%; }

/* Konto-Tab */
.acc-card{ display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px; margin-bottom:14px; }
.acc-ava{ width:44px; height:44px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.acc-ava .icon{ width:24px; height:24px; }
.acc-ava .icon path, .acc-ava .icon circle{ stroke:#1c1013; }
.acc-info{ display:flex; flex-direction:column; min-width:0; }
.acc-info b{ font-size:1.05rem; color:var(--text); }
.acc-info span{ font-size:.85rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
.acc-seg{ margin-bottom:14px; }
.acc-link{ margin-top:10px; text-align:center; color:var(--brand2); font-size:.85rem; font-weight:700; cursor:pointer; }
.acc-link:active{ opacity:.6; }

/* Konto-Knopf am Startbildschirm: eingeloggt Avatar mit kleinem Namen darunter, ausgeloggt nur Icon */
.acct-btn{ display:inline-flex; flex-direction:column; align-items:center; gap:3px; padding:5px 8px; border:1px solid var(--line);
  border-radius:16px; background:var(--panel); color:var(--text); cursor:pointer; min-width:0; max-width:30vw; }
.acct-btn.solo{ padding:6px; border-radius:50%; }
.acct-ava{ width:34px; height:34px; border-radius:50%; overflow:hidden; flex:0 0 auto; display:flex;
  align-items:center; justify-content:center; background:var(--grad); }
.acct-ava img{ width:100%; height:100%; object-fit:cover; }
.acct-ava .icon{ width:19px; height:19px; }
.acct-ava .icon path, .acct-ava .icon circle{ stroke:#1c1013; }
.acct-name{ font-size:.64rem; font-weight:800; line-height:1; max-width:70px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acct-btn.solo .acct-name{ display:none; }

/* Profil im Konto-Panel */
.prof-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.prof-ava{ position:relative; width:72px; height:72px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  border:none; padding:0; cursor:pointer; background:var(--grad); display:flex; align-items:center; justify-content:center; }
.prof-ava img{ width:100%; height:100%; object-fit:cover; }
.prof-ava > .icon{ width:34px; height:34px; }
.prof-ava > .icon path, .prof-ava > .icon circle{ stroke:#1c1013; }
.prof-cam{ position:absolute; right:0; bottom:0; width:24px; height:24px; border-radius:50%;
  background:var(--panel); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.prof-cam .icon{ width:13px; height:13px; color:var(--text); }
.prof-actions{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.prof-actions .btn{ width:100%; }
.prof-tools{ display:flex; flex-direction:column; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.prof-tools .btn{ width:100%; font-size:.9rem; }
.pw-form{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }

/* Modus-Banner (Demo / Vertretung) */
.mode-banner{ position:fixed; top:0; left:0; right:0; z-index:150; display:none;
  align-items:center; justify-content:center; gap:14px; padding:max(env(safe-area-inset-top),6px) 14px 6px;
  font-weight:800; font-size:.82rem; color:#1c1013; box-shadow:0 2px 10px rgba(0,0,0,.3); }
.mode-banner.show{ display:flex; }
.mode-banner.demo{ background:var(--brand2); }
.mode-banner.standin{ background:var(--info, #6ab0ff); }
.mode-banner button{ background:rgba(0,0,0,.18); border:none; color:#1c1013; font-weight:800;
  padding:3px 12px; border-radius:999px; cursor:pointer; }

/* Geführte Einführung */
.intro-overlay{ position:fixed; inset:0; z-index:200; }
.intro-hole{ position:fixed; display:none; border-radius:12px; border:2px solid var(--brand2);
  box-shadow:0 0 0 9999px rgba(6,5,8,.66); transition:all .28s cubic-bezier(.2,.8,.2,1); pointer-events:none; }
.intro-tip{ position:fixed; width:240px; max-width:82vw; background:var(--panel); border:1px solid var(--line-2);
  border-radius:14px; padding:14px; box-shadow:var(--shadow-pop); animation:popIn .28s cubic-bezier(.2,.9,.3,1.3); }
.intro-tip p{ margin:0 0 12px; font-size:.92rem; line-height:1.35; color:var(--text); }
.intro-actions{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.intro-skip{ background:none; border:none; color:var(--muted); font-weight:700; cursor:pointer; font-size:.82rem; }
.intro-dots{ font-size:.78rem; color:var(--muted); font-weight:700; }
.intro-actions .btn.small{ width:auto; padding:0 16px; height:38px; }

/* Berichts-Vorschau (wie das spätere PDF) */
.report-preview{ margin-top:14px; }
.rp-doc{ background:#fff; color:#1a1a1a; border-radius:12px; padding:16px; font-size:.8rem; }
.rp-head{ display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid #e62778; padding-bottom:8px; margin-bottom:10px; }
.rp-logo{ height:38px; width:auto; }
.rp-title{ color:#444; font-weight:800; text-align:right; line-height:1.25; font-size:.82rem; }
.rp-bez{ margin-top:8px; color:#444; font-weight:700; }
.rp-foot{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:14px; padding-top:10px; border-top:1px solid #eee; }
.rp-foot-logo{ height:16px; width:auto; }
.rp-foot span{ color:#888; font-weight:800; font-size:.82rem; }
.rp-table{ width:100%; border-collapse:collapse; }
.rp-table th, .rp-table td{ text-align:left; padding:4px 6px; border-bottom:1px solid #eee; }
.rp-table th{ color:#666; font-weight:700; }
.rp-sum td{ font-weight:800; color:#e62778; border-top:2px solid #ddd; }
.rp-kpi{ margin-top:10px; color:#444; font-weight:700; }

/* =======================================================================
   MIKRO-ANIMATIONEN  (subtil, verspielt, native App-Gefühl)
   ======================================================================= */
@media (prefers-reduced-motion: no-preference){
  .btn, .iconbtn, .fab, .tab, .acct-btn, .seg button, .modal-x, .prof-ava,
  .hist-item, .stat-card, .np-tile, .info-i, .acc-link{
    transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease, opacity .14s ease, background-color .16s ease;
  }
  /* Tippen drückt Elemente kurz herein */
  .btn:active, .iconbtn:active, .tab:active, .acct-btn:active, .seg button:active, .modal-x:active, .prof-ava:active{ transform: scale(.93); }
  .fab:active{ transform: scale(.88); }
  .hist-item:active, .stat-card:active, .np-tile:active{ transform: scale(.97); }
  .tapzone:active .chev{ transform: scale(.86); transition: transform .12s ease; }

  /* Modal federt sanft herein, Hintergrund blendet auf */
  @keyframes popIn{ 0%{ opacity:0; transform: translateY(10px) scale(.96);} 60%{ opacity:1; transform: translateY(0) scale(1.012);} 100%{ transform: translateY(0) scale(1);} }
  @keyframes fadeBg{ from{ opacity:0;} to{ opacity:1;} }
  .modal.open{ animation: fadeBg .2s ease; }
  .modal.open .modal-card{ animation: popIn .28s cubic-bezier(.2,.9,.3,1.35); }

  /* Tab- und Ansichtswechsel blenden weich ein */
  @keyframes paneIn{ from{ opacity:0; transform: translateY(7px);} to{ opacity:1; transform:none; } }
  .tabpane{ animation: paneIn .22s ease; }

  /* Startbildschirm-Elemente steigen gestaffelt herein */
  @keyframes riseIn{ from{ opacity:0; transform: translateY(12px);} to{ opacity:1; transform:none; } }
  .start-screen:not(.hidden) .start-headline{ animation: riseIn .42s ease both; }
  .start-screen:not(.hidden) #bezirkOverview{ animation: riseIn .42s .06s ease both; }
  .start-screen:not(.hidden) #startInfo{ animation: riseIn .42s .12s ease both; }
  .start-screen:not(.hidden) .start-actions{ animation: riseIn .42s .18s ease both; }

  /* Ziel-Pille und Restzeit pulsen kurz beim Hauswechsel */
  @keyframes chipPop{ 0%{ transform: translateX(-50%) scale(1);} 40%{ transform: translateX(-50%) scale(1.06);} 100%{ transform: translateX(-50%) scale(1);} }
}

/* Monatsbericht-Karte */
.report-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px; margin-bottom:16px; }
.report-row{ display:flex; gap:10px; align-items:center; margin-top:10px; }
.report-row select{ flex:1 1 auto; min-width:0; }
.report-row .btn.small{ flex:0 0 auto; width:auto; padding:0 16px; height:42px; }
.report-card .status-line{ margin-top:8px; min-height:0; }

/* Chip-Reihe: Ziel-Pille und Restzeit nebeneinander, bei Bedarf umbrechend */
.chip-row{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
/* Restzeit-Chip: dezent, neutral, hebt sich von der farbigen Ziel-Pille ab */
.etachip{ background:rgba(22,19,24,.85); border:1px solid var(--line); color:var(--text); backdrop-filter:blur(8px); font-weight:700; }
.etachip.near{ background:rgba(22,19,24,.85); color:var(--text); }
.etachip .ico{ color:var(--brand2); }

/* Fahransicht-Chrome nur während der Tour einblenden (verhindert Überlagern von Start/Ende) */
.drv-top, .drv-center, .tapzones{ display:none; }
.stage{ display:none; }
body.touring .drv-top{ display:flex; }
body.touring .drv-center{ display:flex; }
body.touring .tapzones{ display:flex; }
body.touring .stage{ display:block; }
.scrim{ display:none; }
.weather-card:empty{ display:none; }

/* =======================================================================
   KORREKTUREN RUNDE 2
   ======================================================================= */
/* Start- und Endbildschirm bekommen den dunklen App-Hintergrund (vorher transparent) */
.overlay{ background:radial-gradient(120% 80% at 50% 18%, rgba(230,39,120,.16), transparent 60%),
  radial-gradient(90% 60% at 50% 100%, rgba(246,177,52,.10), transparent 60%), var(--bg); }
/* Startbildschirm: Akzentfarbe folgt dem aktiven Bezirk (sonst BZ-Pink) */
.start-screen{ --start-accent:#e62778; --start-glow:rgba(230,39,120,.16); }
.start-screen.overlay{ background:radial-gradient(120% 80% at 50% 18%, var(--start-glow), transparent 60%),
  radial-gradient(90% 60% at 50% 100%, rgba(246,177,52,.10), transparent 60%), var(--bg); }
.start-screen::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--start-accent); z-index:3; transition:background .3s ease; }
/* Logo oben links als Bildmarke, etwas größer */
.start-logo{ height:50px; max-height:50px; }
/* Melde-FAB rechts statt links */
.stage .fab{ left:auto; right:22px; }
/* Optionen-Panel und Modale über die Fahransicht-Icons legen */
.panel{ z-index:60; }
.modal{ z-index:70; }
/* Karte bearbeiten: Haus/Box-Sheet und Pillen ausblenden, damit die Bearbeiten-Leiste frei liegt */
body.editing .stage, body.editing .drv-center, body.editing .tapzones{ display:none; }
.ansage-badge{ cursor:pointer; }

/* =======================================================================
   DESIGN-SCREENS: END, OPTIONEN, ROUTE, MODAL, STATISTIK
   ======================================================================= */
/* KPI-Karten (Kennzahlen) */
.spec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.kpi{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 15px; overflow:hidden; }
.kpi .k-label{ font-size:.74rem; font-weight:800; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; }
.kpi .k-val{ font-family:var(--font-head); font-weight:600; font-size:1.9rem; line-height:1.05; margin-top:3px; color:var(--text); }
.kpi .k-sub{ font-size:.74rem; font-weight:700; color:var(--faint); margin-top:2px; }
.kpi .k-ico{ position:absolute; top:13px; right:13px; opacity:.9; }

/* vertikale Balken (Wochentage) */
.bars-v{ display:flex; align-items:flex-end; justify-content:space-between; gap:6px; height:150px; }
.bars-v .bcol{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; height:100%; }
.bars-v .bval{ font-size:.72rem; color:var(--muted); }
.bars-v .bar{ width:100%; max-width:26px; border-radius:6px 6px 0 0; background:var(--grad); min-height:6px; }
.bars-v .bar.dim{ background:var(--panel-3); }
.bars-v .blabel{ font-size:.72rem; font-weight:800; color:var(--muted); }

/* Pokal/Highlight-Karte */
.trophy-card{ background:var(--grad-soft); border-color:transparent; margin-top:12px; padding:14px 16px; }

/* Endbildschirm: Haken-Kreis */
.end-check{ width:48px; height:48px; border-radius:50%; background:rgba(94,194,122,.16); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.end-check .ico{ color:var(--ok); }
.problem-summary:empty{ display:none; }

/* Optionen: Tabs mit Icons */
.tab{ display:inline-flex; align-items:center; gap:6px; }
.tab .ico{ width:16px; height:16px; }
.tabbar{ gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.tabbar::-webkit-scrollbar{ display:none; }
.tab{ flex:0 0 auto; white-space:nowrap; }
/* Listenzeilen-Karte mit Toggle */
.opt-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:4px 16px; margin-bottom:14px; }
.list-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.list-row:last-child{ border-bottom:none; }
.list-row .lr-label{ font-weight:800; flex:1; font-size:.95rem; }
.list-row .ico{ color:var(--muted); }

/* gestaltete Eingabe-Pille (Modal) */
.input-pill{ display:flex; align-items:center; justify-content:space-between; gap:10px; height:48px; padding:0 14px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); font-weight:800; font-size:.95rem; }
.input-pill .ico{ color:var(--muted); }

/* Häuser-Route: Karten je Haus */
.hcard{ display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 13px; }
.hcard.active{ border:1.5px solid transparent; background:linear-gradient(var(--panel),var(--panel)) padding-box, var(--grad) border-box; }
.hcard.paused{ border-style:dashed; opacity:.92; }
.hcard .h-grip{ color:var(--faint); cursor:grab; touch-action:none; }
.hcard .h-num{ width:30px; height:30px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:.95rem; flex:0 0 auto; color:var(--text); }
.hcard.active .h-num{ background:var(--grad); border:none; color:#1c1013; border-radius:50% 50% 50% 0; transform:rotate(-45deg); }
.hcard.active .h-num span{ transform:rotate(45deg); }
.hcard.paused .h-num{ background:var(--brand2-12); border:none; color:var(--brand2); }
.hcard .h-main{ flex:1; min-width:0; }
.hcard .h-name{ font-weight:900; font-size:.95rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hcard.paused .h-name{ color:var(--brand2); }
.hcard .h-sub{ color:var(--muted); font-size:.76rem; font-weight:700; margin-top:1px; }
.hcard .h-chev{ color:var(--muted); flex:0 0 auto; }

/* Häuser-Route: Akkordeon-Kopf im Karten-Stil */
.stop-head{ display:flex; align-items:center; gap:11px; }
.stop-head .num{ width:30px; height:30px; min-width:30px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:.95rem; color:var(--text); flex:0 0 auto; padding:0; }
.stop-head .h-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.stop-head .adr{ font-weight:900; font-size:.95rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stop-head .mini{ color:var(--muted); font-size:.76rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stop-head.paused-house .adr{ color:var(--brand2); }
.stop-head.paused-house .num{ background:var(--brand2-12); border:none; color:var(--brand2); }
.stop-head.has-warn .num{ border-color:var(--warn); color:var(--warn); }

/* =======================================================================
   FEINSCHLIFF RUNDE 3
   ======================================================================= */
/* Startinhalt etwas tiefer setzen, kleineres Logo */
.start-headline{ margin-top:50px; }
.start-logo{ height:35px; max-height:35px; }
/* Optionen-Tabs: mehr Innenabstand, rechter Verlauf als Scroll-Hinweis */
.tab{ flex:0 0 auto; white-space:nowrap; padding:10px 16px; }
.tabbar{ margin:0; }
.tabbar-wrap{ position:relative; margin:0 14px; }
.tabbar-wrap::after{ content:""; position:absolute; top:0; bottom:0; right:0; width:34px; pointer-events:none;
  border-radius:0 11px 11px 0; background:linear-gradient(90deg, rgba(32,28,36,0), var(--panel-2) 82%); }
/* Badges nicht umbrechen (z.B. "Sa am längsten" im Diagramm) */
.badge{ flex:0 0 auto; white-space:nowrap; }

/* Bezirks-Übersicht auf dem Startbildschirm */
#bezirkOverview{ margin-bottom:14px; }
.bz-row{ display:flex; align-items:center; gap:12px; padding:10px; border-radius:var(--r-md); background:var(--panel-2); border:1px solid var(--line); }
.bz-row.active{ border-color:var(--accent); }
.bz-main{ flex:1; min-width:0; }
.bz-ord{ font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.bz-name{ font-weight:900; font-size:1.02rem; color:var(--text); line-height:1.15; }
.bz-sub{ color:var(--muted); font-size:.78rem; font-weight:700; margin-top:1px; }
.bz-start{ flex:0 0 auto; }
.bz-row.done{ opacity:.92; }
.bz-namerow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bz-donebadge{ flex:0 0 auto; }
.bz-right{ flex:0 0 auto; display:flex; align-items:center; margin-left:6px; }
.bz-sub + .bz-sub{ margin-top:0; }
.bz-start .icon{ width:16px; height:16px; }
/* Bezirks-Tag in der Häuser-Route */
.bz-tag{ display:inline-block; padding:1px 7px; border-radius:var(--r-pill); background:var(--accent-16); color:#ff8fbb; font-size:.7rem; font-weight:800; }
/* Bezirks-Auswahl-Chips in der Häuser-Route */
.bz-chips{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.bz-chip{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px; border-radius:var(--r-pill);
  background:var(--panel-2); border:1px solid var(--line); color:var(--muted); font-weight:800; font-size:.82rem; cursor:pointer; }
.bz-chip .bz-dot{ width:9px; height:9px; border-radius:50%; background:var(--bzc, var(--accent)); flex:0 0 auto; }
.bz-chip.on{ color:var(--text); border-color:var(--bzc, var(--accent)); background:var(--panel-3); }

/* =======================================================================
   FEINSCHLIFF RUNDE 4
   ======================================================================= */
/* Weiße Schrift und Icons auf den Verlaufs-Buttons (Punkt 7) */
.btn{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.22); }
.btn .icon path,.btn .icon line,.btn .icon polyline,.btn .icon circle,.btn .icon rect{ stroke:#fff; }
.btn.ghost{ text-shadow:none; }
.fab{ color:#fff; }
.fab .icon path,.fab .icon line,.fab .icon polyline,.fab .icon circle,.fab .icon rect{ stroke:#fff; }
.seg button.active{ color:#fff; }
.bz-start{ min-width:96px; }

/* Bezirke-und-Häuser: nebeneinander scrollbare Tab-Leiste, Plus rechts daneben */
.bzt-row{ display:flex; align-items:center; gap:8px; margin:0 0 14px; }
.bzt-tabs-wrap{ position:relative; flex:1; min-width:0; }
.bzt-tabs-wrap::after{ content:""; position:absolute; top:0; bottom:0; right:0; width:22px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--bg) 80%); }
.bzt-tabs{ display:flex; gap:8px; align-items:center; overflow-x:auto; flex-wrap:nowrap;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-right:18px; }
.bzt-tabs::-webkit-scrollbar{ display:none; }
.bzt-tab{ flex:0 0 auto; white-space:nowrap; display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:var(--r-pill);
  background:var(--panel-2); border:1px solid var(--line); color:var(--muted); font-weight:800; font-size:.85rem; cursor:pointer; }
.bzt-tab .bz-dot{ width:9px; height:9px; border-radius:50%; background:var(--bzc, var(--accent)); flex:0 0 auto; }
.bzt-tab.on{ color:var(--text); border-color:var(--bzc, var(--accent)); background:var(--panel-3); }
.bzt-add{ width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--panel-2); border:1px dashed var(--line-2); color:var(--text); cursor:pointer; flex:0 0 auto; }
.bzt-add .icon{ width:18px; height:18px; }
.iconbtn.ic-sm{ width:38px; height:38px; }
.iconbtn.ic-sm .icon{ width:18px; height:18px; }
.bzt-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px; }
.bzt-title{ display:flex; align-items:center; gap:9px; font-family:var(--font-head); font-size:1.15rem; }
.bzt-title .bz-dot{ width:12px; height:12px; border-radius:50%; }
.bzt-empty{ text-align:center; padding:26px 10px; color:var(--muted); }

/* Pause als Toggle-Zeile */
.pause-toggle{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--panel-2);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 14px; margin:6px 0; }
.pause-toggle .pt-label{ font-weight:800; font-size:.95rem; }
.pause-fields{ margin:0 0 6px; padding:0 2px; }

/* Pin-Setzen-Knopf in der Koordinaten-Zeile */
.coord-row .btn[data-pin]{ background:var(--panel-2); }
.coord-row .btn[data-pin] .icon path,.coord-row .btn[data-pin] .icon circle{ stroke:var(--brand2); }

/* Pin-Picker-Modal */
.pinpick-map{ width:100%; height:300px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); margin:6px 0 12px; }

/* Zeitung hinzufügen per Dropdown */
.assign-add{ margin-top:8px; }
.assign-add select{ width:100%; }
/* Selects in der Haus-Karte einheitlich */
.stop-body select{ width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  border-radius:var(--r-sm); padding:11px 12px; font-family:var(--font-body); font-weight:700; font-size:.95rem; }
/* Neuer-Bezirk-Eingabe in der Tab-Leiste */
.bzt-newwrap{ display:inline-flex; align-items:center; gap:6px; }
.bzt-newinput{ height:36px; width:150px; background:var(--panel-2); border:1px solid var(--line-2); color:var(--text);
  border-radius:var(--r-pill); padding:0 14px; font-family:var(--font-body); font-weight:700; font-size:.85rem; }
/* Pin- und GPS-Knopf gleich groß in der Koordinatenzeile */
.coord-row .btn.small{ min-width:48px; padding:0 12px; }

/* Info-Icons mit kleinem animiertem Popup */
.lbl-row{ display:flex; align-items:center; }
.lbl-row label{ margin:0; }
.info-wrap{ position:relative; display:inline-flex; vertical-align:middle; margin-left:6px; }
.info-i{ width:21px; height:21px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--panel-3); border:1px solid var(--line-2); color:var(--muted); cursor:pointer; padding:0; flex:0 0 auto; }
.info-i .icon{ width:13px; height:13px; }
.info-wrap.open .info-i{ color:var(--accent); border-color:var(--accent); }
.info-pop{ position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%) translateY(6px) scale(.96);
  width:250px; max-width:74vw; background:var(--panel-2); border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:11px 13px; font-size:.82rem; font-weight:600; line-height:1.4; color:var(--text); text-align:left;
  box-shadow:var(--shadow-pop); opacity:0; pointer-events:none; transition:.18s cubic-bezier(.2,.8,.2,1); z-index:200; }
.info-wrap.open .info-pop{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); pointer-events:auto; }
.info-pop::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--panel-2); }
/* Wenn oben kein Platz ist, klappt das Popup nach unten */
.info-wrap.below .info-pop{ bottom:auto; top:calc(100% + 9px); transform:translateX(-50%) translateY(-6px) scale(.96); }
.info-wrap.below.open .info-pop{ transform:translateX(-50%) translateY(0) scale(1); }
.info-wrap.below .info-pop::after{ top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:var(--panel-2); }

/* Fahrzeug-Symbol-Auswahl */
.veh-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(76px,1fr)); gap:10px; margin-top:8px; }
.veh-opt{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px; border-radius:var(--r-md);
  background:var(--panel-2); border:1.5px solid var(--line); color:var(--muted); cursor:pointer; }
.veh-opt.on{ border-color:var(--accent); color:var(--text); }
.veh-prev{ width:48px; height:34px; display:flex; align-items:center; justify-content:center; }
.veh-prev .me-car, .veh-prev .me-arrow{ position:static; transform:none; }
.veh-prev .ico .icon{ width:26px; height:26px; }
.veh-lab{ font-size:.78rem; font-weight:800; }
.me-img{ width:36px; height:36px; object-fit:contain; }
.me-arrow{ display:flex; align-items:center; justify-content:center; }

/* Gebiets-Übersichtskarte (alle Bezirke) */
.overview{ position:fixed; inset:0; z-index:80; background:var(--bg); display:none; flex-direction:column; }
.overview.show{ display:flex; }
.overview-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:max(env(safe-area-inset-top),12px) 14px 12px; background:var(--panel); border-bottom:1px solid var(--line); }
.overview-title{ display:flex; align-items:center; gap:9px; font-family:var(--font-head); font-size:1.2rem; }
.overview-map{ flex:1; width:100%; }
.overview-legend{ position:absolute; left:12px; bottom:calc(env(safe-area-inset-bottom) + 14px); display:flex; flex-wrap:wrap; gap:8px;
  max-width:calc(100% - 24px); background:rgba(22,19,24,.92); border:1px solid var(--line); border-radius:var(--r-md); padding:9px 12px; backdrop-filter:blur(8px); }
.ovl-item{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:800; color:var(--text); }
.ovl-dot{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; }

/* App-Feeling auf dem Handy: kein Lupen-Popup, Eingaben bleiben markier- und bearbeitbar */
body{ -webkit-touch-callout:none; }
input, textarea, select, [contenteditable]{ -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
button, .btn, .iconbtn, .tab, .seg button, .tapzone, .bz-chip, .bzt-tab{ touch-action:manipulation; }