/* Gemeinsame Oberfläche für Routenplaner und Konvoi-Seite (Karte, Panel, Karten, Dialoge, Konvoi/Funk) */
  html, body { margin:0; height:100%; }
  body { color:var(--text); background:var(--bg); overflow:hidden; }
  #map { position:fixed; inset:0; z-index:0; background:var(--bg); }

  /* ---------- Panel ---------- */
  #panel { position:fixed; z-index:500; left:16px; top:16px; bottom:16px; width:450px; display:flex; flex-direction:column;
    background:var(--panel); backdrop-filter:blur(22px) saturate(1.6); -webkit-backdrop-filter:blur(22px) saturate(1.6);
    border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); animation:slideIn .6s cubic-bezier(.2,.8,.2,1); }
  @keyframes slideIn { from { transform:translateX(-30px); opacity:0; } }
  .handle { display:none; }
  header { padding:16px 16px 10px; display:flex; align-items:center; gap:10px; }
  .logo { width:42px; height:42px; border-radius:14px; background:var(--grad); display:grid; place-items:center; box-shadow:0 8px 20px -6px rgba(227,10,23,.6); flex:none; }
  .logo svg { width:24px; height:24px; }
  .ttl { flex:1; min-width:0; }
  h1 { font-size:18px; margin:0; font-weight:800; letter-spacing:-.02em; white-space:nowrap; }
  h1 span { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .sub { color:var(--muted); font-size:11.5px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* ---------- Konvoi ---------- */
  .cv-code { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .cv-code b { font-size:26px; letter-spacing:.12em; font-weight:800; font-variant-numeric:tabular-nums; }
  .cv-codebtn { display:inline-flex; align-items:center; gap:8px; border:1px dashed var(--line); background:var(--soft); color:var(--text); border-radius:12px; padding:4px 10px; cursor:pointer; font-family:inherit; transition:.2s; }
  .cv-codebtn:hover, .cv-codebtn:active { border-color:#10b981; background:rgba(16,185,129,.1); }
  .cv-codebtn span { font-size:16px; opacity:.8; }
  .cv-live { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; margin-bottom:6px;
    background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.35); font-weight:600; font-size:14px; }
  .cv-live > div { flex:1; } .cv-live .k { font-weight:500; font-size:12px; }
  .cv-live .dot { width:12px; height:12px; border-radius:50%; background:#10b981; flex:none; animation:cvPulse 1.6s infinite; }
  @keyframes cvPulse { 0% { box-shadow:0 0 0 0 rgba(16,185,129,.6); } 70% { box-shadow:0 0 0 10px rgba(16,185,129,0); } 100% { box-shadow:0 0 0 0 rgba(16,185,129,0); } }
  .cv-list { display:flex; flex-direction:column; gap:8px; }
  .cv-m { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:var(--card); }
  .cv-m.off .cv-av { opacity:.55; }
  .cv-t { flex:1; min-width:0; font-size:13.5px; line-height:1.35; }
  .cv-t .k { font-size:12px; }
  .cv-av { width:36px; height:36px; border-radius:50%; background:var(--mc); color:#fff; display:grid; place-items:center; font-weight:800; flex:none; }
  .cv-tag { color:#10b981; font-weight:700; font-size:12px; } .cv-tag.old { color:#f59e0b; }
  .cv-dur { display:flex; flex-direction:column; gap:8px; } .cv-dur .go { margin:0; }
  .cv-pin { position:relative; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; }
  .cv-pin span { width:30px; height:30px; border-radius:50%; background:var(--mc); color:#fff; display:grid; place-items:center; font-weight:800; font-size:14px;
    border:3px solid #fff; box-shadow:0 4px 14px rgba(0,0,0,.35); }
  .cv-pin.me span { box-shadow:0 0 0 4px rgba(37,99,235,.35), 0 4px 14px rgba(0,0,0,.35); }
  .cv-pin em { font-style:normal; font-size:11.5px; font-weight:700; margin-top:2px; padding:1px 7px; border-radius:99px; background:var(--card); color:var(--text); border:1px solid var(--line); white-space:nowrap; }
  .cv-acts { display:flex; gap:6px; flex:none; }
  .btn2.cv-kick { padding:9px 11px; color:#e30a17; border-color:rgba(227,10,23,.3); }
  .cv-own { font-size:11px; font-weight:800; color:#b45309; background:rgba(245,158,11,.16); padding:2px 7px; border-radius:99px; white-space:nowrap; }
  .cv-pin.off { opacity:.5; filter:grayscale(.6); }
  .src-tag { font-size:11px; font-weight:700; color:#0369a1; background:rgba(14,165,233,.12); padding:2px 7px; border-radius:99px; white-space:nowrap; }
  #tab-help .dd { margin-bottom:10px; }
  .grid2 > div:last-child .dd-list { left:auto; right:0; }
  .grid2 > div { min-width:0; }
  .ev-pick { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,5fr); gap:10px; }
  .ev-pick .dd-list { min-width:0; left:0; right:auto; width:min(calc(100vw - 32px), 420px); }
  .ev-pick > div:last-child .dd-list { left:auto; right:0; }
  .ev-info { margin:4px 0 6px; line-height:1.5; }
  .ev-info a { color:inherit; }
  .br-hint { margin:2px 0 6px; }
  /* Konvoi-Chat */
  .cv-chat { margin-top:12px; }
  .ch-list { max-height:260px; min-height:90px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:8px; margin:4px 0 8px;
    border:1px solid var(--line); border-radius:14px; background:var(--soft); overscroll-behavior:contain; }
  .ch-m { align-self:flex-start; max-width:85%; background:var(--card); border:1px solid var(--line); border-radius:14px 14px 14px 4px; padding:6px 10px; font-size:13.5px; line-height:1.4; word-wrap:break-word; }
  .ch-m b { display:block; font-size:11.5px; }
  .ch-m span { white-space:pre-wrap; }
  .ch-m i { display:block; font-style:normal; font-size:10.5px; color:var(--muted); text-align:right; margin-top:2px; }
  .ch-m.me { align-self:flex-end; background:linear-gradient(135deg,#0ea5e9,#6366f1); color:#fff; border:0; border-radius:14px 14px 4px 14px; }
  .ch-m.me i { color:rgba(255,255,255,.75); }
  .ch-empty { font-size:12.5px; text-align:center; margin:auto; padding:10px; }
  .ch-quick { display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
  .ch-q { flex:none; border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:99px; padding:6px 11px; font:600 12.5px inherit; font-family:inherit; cursor:pointer; }
  .ch-form { display:flex; gap:8px; margin-top:4px; }
  .ch-form input { flex:1; }
  .ch-form .go { width:auto; margin:0; padding:0 18px; font-size:18px; }
  /* Konvoi-Funk */
  .cv-radio { margin-top:12px; }
  .rd-people { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 12px; }
  .rd-p { display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 4px; border-radius:99px; border:1px solid var(--line); background:var(--soft); font-size:12.5px; font-weight:600; transition:.2s; }
  .rd-p i { width:22px; height:22px; border-radius:50%; background:var(--mc); color:#fff; display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:800; }
  .rd-p.wait { opacity:.6; }
  .rd-p.sp { border-color:#10b981; background:rgba(16,185,129,.15); box-shadow:0 0 0 3px rgba(16,185,129,.2); }
  .rd-ptt { width:100%; min-height:120px; border:0; border-radius:22px; cursor:pointer; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    background:linear-gradient(135deg,#6366f1,#06b6d4); font:700 15px inherit; font-family:inherit; box-shadow:0 14px 30px -12px rgba(99,102,241,.8);
    touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; transition:transform .12s, box-shadow .2s; }
  .rd-ptt .rd-mic { font-size:34px; }
  .rd-ptt:active, .rd-ptt.on { transform:scale(.98); background:linear-gradient(135deg,#e30a17,#ff7a18); box-shadow:0 0 0 6px rgba(227,10,23,.25), 0 14px 30px -12px rgba(227,10,23,.8); }
  .rd-ptt.on .rd-mic { animation:blinkMic 1s infinite; }
  @keyframes blinkMic { 50% { opacity:.5; } }
  .rd-open { display:flex; align-items:center; gap:8px; font-size:13px; margin-top:10px; cursor:pointer; }
  .rd-open input { width:auto; accent-color:#6366f1; }
  /* Dialoge */
  #modal { position:fixed; inset:0; z-index:3500; background:rgba(8,10,16,.55); backdrop-filter:blur(6px); display:none; place-items:center; padding:16px; }
  #modal.on { display:grid; animation:fadeUp .25s ease; }
  #modal .box { width:min(620px,100%); max-height:88vh; overflow:auto; background:var(--card); color:var(--text); border:1px solid var(--line);
    border-radius:22px; box-shadow:var(--shadow); padding:22px; position:relative; backdrop-filter:blur(20px); }
  #modal.narrow .box { width:min(400px,100%); }
  #modal h2 { margin:0 0 4px; font-size:20px; letter-spacing:-.02em; }
  #modal .x { position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--soft); color:var(--text); cursor:pointer; font-size:15px; }
  #modal form { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
  #modal .err { color:var(--brand1); font-size:13px; min-height:18px; font-weight:600; }
  #modal .pwbox { font:700 18px ui-monospace,Consolas,monospace; background:var(--soft); border:1px dashed var(--brand2); border-radius:12px; padding:12px; text-align:center; letter-spacing:.04em; margin:8px 0; user-select:all; }
  .utable td { vertical-align:middle; }
  .utable .perm { display:inline-flex; align-items:center; gap:4px; margin:2px 8px 2px 0; font-size:12px; white-space:nowrap; }
  .utable input[type=checkbox] { width:auto; accent-color:var(--brand1); }
  .utable .acts { white-space:nowrap; text-align:right; }
  .utable .acts button { border:1px solid var(--line); background:var(--soft); border-radius:9px; padding:5px 8px; cursor:pointer; color:var(--text); }
  .pill-me { font-size:10px; background:var(--grad); color:#fff; border-radius:99px; padding:1px 7px; margin-left:4px; }
  .inactive { opacity:.5; }
  .reports { margin:6px 0 0; font-size:12px; }
  .reports div { display:flex; align-items:center; gap:8px; padding:3px 0; border-top:1px dashed var(--line); }
  .reports button { margin-left:auto; border:0; background:none; cursor:pointer; font-size:13px; }
  .foot-admin { cursor:pointer; }

  .tabs { display:flex; flex-wrap:wrap; gap:6px; padding:2px 14px 14px; margin:0 0 14px; border-bottom:1px solid var(--line); }
  .tabs::-webkit-scrollbar { display:none; }
  .tabs button { flex:1 1 auto; border:1px solid var(--line); background:var(--soft); color:var(--muted); padding:8px 12px; border-radius:999px;
    font:600 13px inherit; font-family:inherit; cursor:pointer; transition:.25s; white-space:nowrap; }
  .tabs button:hover { color:var(--text); }
  .tabs button.on { background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 6px 16px -6px rgba(227,10,23,.6); }
  .scroll { flex:1; overflow-y:auto; padding:0 16px 16px; scrollbar-width:thin; border-radius:0 0 24px 24px; }
  section { display:none; } section.on { display:block; animation:fadeUp .35s ease; }
  @keyframes fadeUp { from { opacity:0; transform:translateY(10px); } }
  .panel-foot { padding:10px 16px 14px; border-top:1px solid var(--line); text-align:center; }

  /* ---------- Formular ---------- */
  .lbl { font-size:11px; font-weight:700; color:var(--muted); display:block; margin:12px 0 6px; text-transform:uppercase; letter-spacing:.07em; }
  input, select, textarea { width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:12px; font:500 14px inherit; font-family:inherit;
    background:var(--card); color:var(--text); outline:none; transition:.2s; }
  input:focus, select:focus, textarea:focus { border-color:var(--brand2); box-shadow:0 0 0 4px rgba(255,122,24,.15); }
  .seg { display:flex; background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:4px; position:relative; }
  .seg button { flex:1; background:none; border:0; padding:9px; font:600 13px inherit; font-family:inherit; color:var(--muted); border-radius:10px; cursor:pointer; position:relative; z-index:1; transition:color .25s; display:flex; align-items:center; justify-content:center; gap:6px; }
  .seg button.on { color:var(--text); }
  .seg .pill { position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); background:var(--card); border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.12); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
  .seg.r .pill { transform:translateX(100%); }

  .trip { position:relative; margin-top:12px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:6px 10px; }
  .trip .fields { display:flex; flex-direction:column; } .trip .fields.rueck { flex-direction:column-reverse; }
  .trip .f { display:flex; align-items:center; gap:10px; padding:6px 0; }
  .trip .f + .f { border-top:1px dashed var(--line); }
  .trip .dot { width:12px; height:12px; border-radius:50%; flex:none; border:3px solid var(--brand2); background:var(--card); }
  .trip .dot.tr { border-color:var(--brand1); background:var(--brand1); }
  .trip .f > div { flex:1; min-width:0; }
  .trip .mini { font-size:10.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
  .trip input { border:0; padding:3px 0; background:transparent; font-size:15px; font-weight:600; box-shadow:none !important; }
  .loc { background:none; border:0; cursor:pointer; font-size:17px; padding:6px; border-radius:10px; }
  .loc:hover { background:var(--soft); }
  .swap { position:absolute; right:48px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
    background:var(--card); cursor:pointer; color:var(--text); font-size:15px; transition:transform .4s; z-index:2; }
  .swap:hover { transform:translateY(-50%) rotate(180deg); }
  .grid2 { display:grid; grid-template-columns:1fr 104px; gap:8px; }
  .switch { display:flex; align-items:center; gap:10px; margin-top:10px; font-size:13.5px; font-weight:600; cursor:pointer; user-select:none; }
  .switch input { display:none; }
  .switch .tg { width:42px; height:24px; border-radius:99px; background:var(--line); position:relative; transition:.25s; flex:none; }
  .switch .tg::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:.25s; }
  .switch input:checked + .tg { background:var(--grad); }
  .switch input:checked + .tg::after { transform:translateX(18px); }
  #maxh:disabled { opacity:.45; }
  .quick { display:flex; flex-wrap:wrap; gap:6px; }
  .quick button { border:1px solid var(--line); background:var(--soft); color:var(--text); border-radius:10px; padding:8px 12px; font:700 13px inherit; font-family:inherit; cursor:pointer; }
  .quick button.on { background:var(--grad); color:#fff; border-color:transparent; }
  .pc-row { display:flex; align-items:center; gap:8px; padding:7px 0; border-top:1px dashed var(--line); font-size:12.5px; }
  .pc-dot { width:9px; height:9px; border-radius:50%; flex:none; }
  .pc-ok { background:#16a34a; } .pc-changed { background:var(--brand1); } .pc-error { background:#d97706; } .pc-pending { background:var(--muted); }

  .go { width:100%; margin-top:14px; padding:14px; border:0; border-radius:14px; background:var(--grad); color:#fff; font:700 15px inherit; font-family:inherit;
    cursor:pointer; box-shadow:0 12px 24px -10px rgba(227,10,23,.7); transition:.2s; position:relative; overflow:hidden; }
  .go:hover { transform:translateY(-2px); }
  .go:disabled { opacity:.75; cursor:wait; transform:none; }
  .go:disabled::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); animation:shine 1.2s infinite; }
  @keyframes shine { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
  .btn2 { padding:9px 13px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--text); font:600 13px inherit; font-family:inherit; cursor:pointer; transition:.2s; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
  .btn2:hover { transform:translateY(-1px); border-color:var(--brand2); }
  .status { font-size:13px; color:var(--muted); margin:12px 2px; min-height:18px; }

  /* ---------- Karten ---------- */
  .card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px; margin-bottom:12px; position:relative; overflow:hidden; animation:fadeUp .45s ease both; }
  .card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--c,var(--brand1)); }
  .rcard { cursor:pointer; transition:transform .2s, box-shadow .2s; }
  .rcard:hover { transform:translateY(-2px); }
  .rcard.active { box-shadow:0 0 0 2px var(--c), 0 14px 30px -14px var(--c); }
  .card h3 { margin:0 0 8px; font-size:15px; font-weight:700; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .big { display:flex; gap:16px; margin:4px 0 8px; flex-wrap:wrap; }
  .big div { display:flex; flex-direction:column; }
  .big b { font-size:21px; font-weight:800; letter-spacing:-.02em; }
  .big span { font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
  .badge { font-size:10.5px; background:var(--grad); color:#fff; padding:3px 9px; border-radius:999px; font-weight:700; }
  .kv { font-size:13px; margin:5px 0; line-height:1.45; } .k { color:var(--muted); }
  .chips { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0; }
  .chip { font-size:11.5px; background:var(--soft); border:1px solid var(--line); padding:3px 9px; border-radius:999px; font-weight:500; display:inline-flex; align-items:center; gap:5px; }
  a.chip, button.chip { color:var(--text); text-decoration:none; transition:.2s; cursor:pointer; font-family:inherit; }
  a.chip:hover, button.chip:hover { border-color:var(--brand2); }
  .chip.cam { background:rgba(227,10,23,.1); border-color:rgba(227,10,23,.25); }
  .chip.vig { background:rgba(255,122,24,.1); border-color:rgba(255,122,24,.3); }
  .chip .flag { width:16px; height:12px; }
  .live { width:7px; height:7px; border-radius:50%; background:var(--brand1); display:inline-block; animation:pulse 1.4s infinite; flex:none; }
  @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(227,10,23,.6)} 70%{box-shadow:0 0 0 7px rgba(227,10,23,0)} 100%{box-shadow:0 0 0 0 rgba(227,10,23,0)} }
  ul { margin:6px 0 6px; padding-left:18px; font-size:13px; line-height:1.5; }
  a { color:var(--brand2); }
  .hint { font-size:12px; color:var(--muted); margin-top:12px; line-height:1.5; }
  .skel { height:128px; border-radius:18px; margin-bottom:12px; background:linear-gradient(90deg,var(--soft) 25%,var(--line) 50%,var(--soft) 75%); background-size:200% 100%; animation:sk 1.3s infinite; }
  @keyframes sk { to { background-position:-200% 0; } }
  .warn { font-size:12.5px; padding:10px 12px; border-radius:12px; background:rgba(255,122,24,.1); border:1px solid rgba(255,122,24,.3); margin:8px 0 12px; line-height:1.45; }

  /* ---------- Livecams ---------- */
  .cams { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:10px 0 4px; }
  .cam-tile { position:relative; border-radius:12px; overflow:hidden; background:var(--soft); aspect-ratio:16/10; cursor:zoom-in; border:1px solid var(--line); }
  .cam-tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
  .cam-tile:hover img { transform:scale(1.05); }
  .cam-tile .cap { position:absolute; left:0; right:0; bottom:0; padding:14px 8px 6px; font-size:11px; font-weight:700; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.7)); display:flex; align-items:center; gap:5px; }
  .cam-tile .err { position:absolute; inset:0; display:none; place-items:center; text-align:center; font-size:11.5px; color:var(--muted); padding:8px; }
  .cam-tile.failed img { display:none; } .cam-tile.failed .err { display:grid; } .cam-tile.failed { cursor:default; }
  .src { font-size:11px; color:var(--muted); }
  #lightbox { position:fixed; inset:0; z-index:3000; background:rgba(0,0,0,.85); display:none; place-items:center; padding:20px; backdrop-filter:blur(6px); }
  #lightbox.on { display:grid; animation:fadeUp .25s ease; }
  #lightbox figure { margin:0; max-width:min(1100px,96vw); }
  #lightbox img, #lightbox video { width:100%; max-height:80vh; object-fit:contain; border-radius:14px; background:#000; }
  #lightbox video { display:none; } #lightbox.video video { display:block; } #lightbox.video img { display:none; }
  .cam-tile.stream { background:linear-gradient(135deg,#1b1f2a,#2d3445); cursor:pointer; }
  .cam-tile.stream .play { position:absolute; inset:0; display:grid; place-items:center; font-size:30px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.5); transition:transform .3s; }
  .cam-tile.stream:hover .play { transform:scale(1.15); }
  .cam-tile.stream video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
  .cam-tile.stream.playing .play, .cam-tile.stream.playing .cap { display:none; }
  .cam-tile .vbtns { position:absolute; top:6px; right:6px; display:none; gap:4px; z-index:2; }
  .cam-tile.stream.playing .vbtns { display:flex; }
  .cam-tile .vbtns button { border:0; border-radius:8px; background:rgba(0,0,0,.6); color:#fff; font-size:13px; padding:4px 7px; cursor:pointer; }
  .cam-tile.stream .msg { position:absolute; inset:0; display:none; place-items:center; text-align:center; padding:10px; font-size:11.5px; color:#ddd; }
  .cam-tile.stream.err .msg { display:grid; } .cam-tile.stream.err .play { display:none; }
  .cam-tile.stream .msg a { color:#ffb37a; }
  .cam-tile .tag { position:absolute; top:6px; left:6px; font-size:10px; font-weight:800; color:#fff; background:var(--brand1); border-radius:6px; padding:2px 6px; letter-spacing:.05em; }
  #lightbox figcaption { color:#fff; margin-top:10px; font-weight:600; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  #lightbox figcaption .src { color:#bbb; }
  #lightbox .close { position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.15); color:#fff; font-size:20px; cursor:pointer; }

  /* ---------- Rasten ---------- */
  .filters { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
  .filters button { font:600 12px inherit; font-family:inherit; padding:7px 11px; border-radius:999px; background:var(--soft); border:1px solid var(--line); color:var(--muted); cursor:pointer; transition:.2s; }
  .filters button.on { background:var(--text); color:var(--bg); border-color:var(--text); }
  .filters button.rec.on { background:var(--gold); border-color:var(--gold); color:#111; }
  /* Navigation starten */
  .nav-go { width:100%; }
  .nav-box { margin-top:8px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--soft); }
  .nav-apps { display:flex; flex-wrap:wrap; gap:6px; }
  .nav-apps button { padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--text); font:600 13px inherit; font-family:inherit; cursor:pointer; }
  .nav-apps button.on { background:#E30A17; border-color:#E30A17; color:#fff; }
  .nav-whole { width:100%; margin-top:10px; text-align:left; display:flex !important; flex-direction:column; align-items:flex-start !important; gap:2px; }
  .nav-whole small { font-size:12px; font-weight:500; }
  .nav-stops { display:flex; flex-direction:column; gap:6px; }
  .nav-stop { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--text); font:inherit; cursor:pointer; }
  .nav-stop .ic { font-size:18px; width:24px; text-align:center; flex:none; }
  .nav-stop .nm { flex:1; min-width:0; display:flex; flex-direction:column; }
  .nav-stop .nm b { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav-stop small { color:var(--muted); font-size:12px; }
  .nav-stop .go-ic { color:#E30A17; font-weight:700; }
  .nav-stop:active { transform:scale(.99); }
  .fuel-f { margin:-4px 0 12px; align-items:center; }
  .fuel-f .ff-lbl { font-size:12px; font-weight:600; margin-right:2px; }
  .fuel-f button.on { background:#E30A17; border-color:#E30A17; color:#fff; }
  .filters .sep { width:1px; background:var(--line); margin:0 4px; }
  .charge-icon { background:#10b981; color:#fff; border:3px solid var(--card); border-radius:50%; width:26px; height:26px; display:grid; place-items:center; font-size:13px; box-shadow:0 4px 12px rgba(0,0,0,.3); }
  .poi { display:flex; gap:10px; padding:10px; border-radius:14px; cursor:pointer; font-size:13px; border:1px solid transparent; transition:.2s; animation:fadeUp .3s ease both; }
  .poi:hover { background:var(--card); border-color:var(--line); }
  .poi.rec { background:var(--rec-bg); border-color:var(--rec-line); }
  .poi .ic { width:34px; height:34px; border-radius:10px; background:var(--soft); display:grid; place-items:center; flex:none; font-size:16px; }
  .poi.rec .ic { background:var(--gold); }
  .poi .nm { font-weight:700; } .poi .meta { color:var(--muted); font-size:12px; } .poi .note { font-size:12px; margin-top:3px; }
  .admin-box { background:var(--rec-bg); border:1px dashed var(--rec-line); border-radius:16px; padding:12px; margin:12px 0; }
  .admin-box input, .admin-box select { margin-bottom:8px; }

  table { width:100%; border-collapse:collapse; font-size:13px; } td, th { padding:9px 4px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
  th { font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
  td input { padding:6px 8px; width:80px; }
  td.price { white-space:nowrap; text-align:right; }
  .wait { font-weight:800; } .wait.old { color:var(--muted); font-weight:500; }
  .w-good { color:#16a34a; } .w-mid { color:#d97706; } .w-bad { color:var(--brand1); }
  .check label { display:flex; gap:10px; margin:4px 0; align-items:flex-start; font-size:14px; padding:9px 10px; border-radius:12px; cursor:pointer; transition:.2s; }
  .check label:hover { background:var(--card); }
  .check input { width:18px; height:18px; margin-top:1px; accent-color:var(--brand1); flex:none; }
  .check input:checked + span { text-decoration:line-through; color:var(--muted); }
  .progress { height:8px; border-radius:99px; background:var(--soft); overflow:hidden; margin:4px 0 12px; }
  .progress div { height:100%; background:var(--grad); transition:width .4s; }
  .ccbox { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 12px; }
  .ccbox label { display:flex; gap:5px; align-items:center; font-size:12.5px; padding:5px 9px; border-radius:999px; background:var(--soft); border:1px solid var(--line); cursor:pointer; }
  .ccbox input { width:auto; accent-color:var(--brand1); }

  /* ---------- Karten-Steuerung & Toast ---------- */
  .map-ctl { position:fixed; right:16px; top:16px; z-index:600; display:flex; gap:8px; align-items:flex-start; }
  .map-ctl .icon-btn, .map-ctl .lang-btn { height:44px; min-width:44px; border-radius:14px; background:var(--panel); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:var(--shadow); }
  .map-ctl .icon-btn { font-size:18px; display:grid; place-items:center; text-decoration:none; }
  .map-ctl #cvBtn.on { background:linear-gradient(135deg,#10b981,#06b6d4); box-shadow:0 0 0 3px rgba(16,185,129,.35), var(--shadow); }
  #toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,30px); opacity:0; z-index:4000; background:var(--text); color:var(--bg);
    padding:12px 18px; border-radius:14px; font-weight:600; font-size:14px; box-shadow:var(--shadow); transition:.35s cubic-bezier(.2,.8,.2,1); pointer-events:none; max-width:90vw; }
  #toast.show { opacity:1; transform:translate(-50%,0); }
  .leaflet-control-zoom { border:0 !important; box-shadow:var(--shadow) !important; border-radius:14px !important; overflow:hidden; }
  .leaflet-control-zoom a { background:var(--panel) !important; color:var(--text) !important; border-color:var(--line) !important; width:40px !important; height:40px !important; line-height:40px !important; }
  .leaflet-popup-content-wrapper, .leaflet-tooltip { background:var(--card); color:var(--text); border-radius:14px; font-family:inherit; }
  .leaflet-popup-tip { background:var(--card); }
  .leaflet-tooltip { border:1px solid var(--line); box-shadow:var(--shadow); }
  .leaflet-popup-content { margin:12px 14px; font-size:13px; }
  .leaflet-control-attribution { background:var(--panel) !important; color:var(--muted) !important; border-radius:8px 0 0 0; }
  .leaflet-control-attribution a { color:var(--muted) !important; }
  .route-flow { stroke-dasharray:14 12; animation:flow 1.1s linear infinite; }
  @keyframes flow { to { stroke-dashoffset:-26; } }
  .star-icon { font-size:22px; line-height:24px; text-align:center; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
  .border-icon { background:var(--card); color:var(--text); border:2px solid var(--brand1); border-radius:999px; font-size:11px; font-weight:800; padding:3px 8px; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.25); display:inline-flex; align-items:center; gap:4px; }
  .stop-icon { background:var(--text); color:var(--bg); border:3px solid var(--card); border-radius:50%; width:28px; height:28px; display:grid; place-items:center; font-size:12px; font-weight:800; box-shadow:0 4px 12px rgba(0,0,0,.3); }
  .pop-cams { display:grid; grid-template-columns:repeat(2,110px); gap:6px; margin-top:8px; }
  .pop-cams img { width:110px; height:70px; object-fit:cover; border-radius:8px; cursor:zoom-in; background:var(--soft); }
  body.adding #map { cursor:crosshair; }

  /* ---------- Mobil: Bottom-Sheet ---------- */
  @media (max-width:860px) {
    #panel { left:0; right:0; bottom:0; top:auto; width:auto; height:58vh; border-radius:24px 24px 0 0; transition:height .35s cubic-bezier(.2,.8,.2,1); animation:sheetIn .5s ease; }
    #panel.full { height:92vh; } #panel.mini { height:150px; }
    @keyframes sheetIn { from { transform:translateY(40px); opacity:0; } }
    .handle { display:block; width:46px; height:5px; border-radius:99px; background:var(--line); margin:10px auto 0; cursor:grab; position:relative; touch-action:none; }
    .handle::before { content:''; position:absolute; inset:-14px -70px; }   /* größere Greiffläche */
    #panel header { cursor:grab; }
    header { padding-top:8px; }
    .map-ctl { top:12px; right:12px; }
    .leaflet-control-zoom { display:none; }
    .scroll { border-radius:0; }
  }

  /* ===== Unterwegs-Modus ===== */
  .trip-resume { display:flex; align-items:center; gap:10px; padding:12px 14px; margin:0 0 12px; border-radius:16px; border:1px solid rgba(227,10,23,.35);
    background:linear-gradient(135deg, rgba(227,10,23,.10), rgba(255,122,24,.08)); }
  .trip-resume > div { flex:1; min-width:0; font-size:14px; }
  .trip-resume .go { width:auto; margin:0; padding:10px 14px; font-size:14px; white-space:nowrap; }
  .trip-resume .x { border:0; background:none; color:var(--muted); font-size:16px; cursor:pointer; padding:6px; }
  .dv-open { width:100%; }
  .drive { position:fixed; inset:0; z-index:3000; display:none; flex-direction:column; overflow:auto; -webkit-overflow-scrolling:touch;
    background:linear-gradient(var(--panel),var(--panel)),var(--bg); padding:max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); }
  .drive.on { display:flex; }
  html.driving body { overflow:hidden; }
  .drive > * { width:100%; max-width:640px; margin-left:auto; margin-right:auto; }
  .dv-top { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
  .dv-top > div { flex:1; min-width:0; font-size:17px; }
  .dv-top .k { font-size:12.5px; margin-top:2px; }
  .dv-x { width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--text); font-size:16px; cursor:pointer; flex:none; }
  .dv-prog { margin-bottom:10px; }
  .dv-bar { height:10px; border-radius:99px; background:var(--soft); overflow:hidden; border:1px solid var(--line); }
  .dv-bar i { display:block; height:100%; background:var(--grad); border-radius:99px; transition:width 1s; }
  .dv-nums { display:flex; justify-content:space-between; gap:8px; font-size:13px; margin-top:6px; color:var(--muted); flex-wrap:wrap; }
  .dv-nums b { color:var(--text); }
  .dv-warn, .dv-info { font-size:13px; padding:9px 12px; border-radius:12px; margin-bottom:10px; }
  .dv-warn { background:rgba(227,10,23,.1); color:#E30A17; } .dv-info { background:var(--soft); color:var(--muted); }
  .dv-list { display:flex; flex-direction:column; gap:10px; }
  .dv-card { display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:18px; background:var(--card); border:1px solid var(--line); box-shadow:0 8px 22px -16px rgba(0,0,0,.4); }
  .dv-card.dv-border { border-color:rgba(227,10,23,.35); }
  .dv-card.dv-ask { border-color:var(--gold); background:linear-gradient(135deg, rgba(245,180,0,.12), transparent), var(--card); }
  .dv-ask .dv-t { text-transform:none; letter-spacing:0; font-size:15px; color:var(--text); }
  .dv-ic { font-size:26px; line-height:1; width:32px; text-align:center; flex:none; padding-top:2px; }
  .dv-main { flex:1; min-width:0; }
  .dv-t { font-size:12.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
  .dv-big { font-size:19px; font-weight:800; margin-top:3px; line-height:1.25; overflow-wrap:anywhere; }
  .dv-wait { margin-top:6px; font-size:15px; }
  .dv-wait .wait { font-size:17px; font-weight:800; }
  .dv-row { display:flex; align-items:center; gap:8px; margin-top:6px; font-size:15px; }
  .dv-row span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dv-row b { white-space:nowrap; }
  .dv-nav { flex:none; width:46px; height:46px; border-radius:14px; border:0; background:var(--grad); color:#fff; font-size:20px; cursor:pointer; box-shadow:0 8px 18px -10px rgba(227,10,23,.8); }
  .dv-nav.sm { width:36px; height:36px; font-size:16px; border-radius:11px; }
  .dv-foot { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
  .dv-foot .go { grid-column:1/-1; margin:0; }
  .dv-foot .btn2 { text-align:center; justify-content:center; }
  .dv-sos { color:#E30A17 !important; }
  .dv-note { text-align:center; margin-top:10px; }

  /* ===== Reiter Reisezeit ===== */
  .wcal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin:6px 0 4px; }
  .wcal > b { text-align:center; font-size:11px; color:var(--muted); font-weight:700; }
  .wcal .wd { position:relative; aspect-ratio:1/1; border-radius:10px; border:1px solid var(--line); background:color-mix(in srgb, var(--wc, transparent) 26%, var(--card));
    color:var(--text); font:700 13px inherit; font-family:inherit; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; }
  .wcal .wd::after { content:''; position:absolute; left:20%; right:20%; bottom:4px; height:3px; border-radius:2px; background:var(--wc, transparent); }
  .wcal .wd em { position:absolute; top:2px; left:4px; font-style:normal; font-size:8.5px; font-weight:600; color:var(--muted); }
  .wcal .wd.past { opacity:.3; cursor:default; background:var(--soft); }
  .wmon { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:4px 0 2px; }
  .wmon b { font-size:15px; text-transform:capitalize; }
  .wnav { width:38px; height:38px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--text); font-family:inherit; font-size:24px; font-weight:700; line-height:1; cursor:pointer; padding:0 0 3px; }
  .wnav:disabled { opacity:.3; cursor:default; }
  .wcal { touch-action:pan-y; }
  .wcal .wd.oth:not(.past) { opacity:.55; }
  .wcal .wd.sel { outline:2px solid var(--text); outline-offset:1px; }
  .wleg { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; color:var(--muted); margin-bottom:10px; }
  .wleg i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:4px; vertical-align:-1px; }
  .wdet { border:1px solid var(--line); border-left:4px solid var(--wc); border-radius:14px; padding:10px 12px; background:var(--card); margin-bottom:12px; }
  .wdet-h { display:flex; justify-content:space-between; gap:8px; align-items:center; font-size:14px; }
  .wlvl { font-size:12px; font-weight:800; color:#fff; background:var(--wc); padding:2px 9px; border-radius:99px; white-space:nowrap; }
  .wdet ul { margin:6px 0 0 18px; padding:0; font-size:13px; line-height:1.5; }
  .walt { margin-top:8px; font-size:13px; } .walt .chip { cursor:pointer; margin:2px 2px 0 0; }
  .wdep { font-size:14px; margin:8px 0 6px; line-height:1.5; }
  .wopts { display:flex; flex-wrap:wrap; gap:5px; } .wopts .chip { cursor:pointer; } .wopts .chip.best { background:#22c55e; color:#fff; border-color:#22c55e; }
  #whenDep { width:100%; }
  #tab-when .chips .chip.on { background:var(--text); color:var(--bg); border-color:var(--text); }

  /* ===== Gesamtkosten ===== */
  .cost { margin:8px 0; border:1px solid var(--line); border-radius:14px; background:var(--soft); }
  .cost summary { cursor:pointer; padding:10px 12px; font-size:14px; list-style:none; }
  .cost summary::-webkit-details-marker { display:none; }
  .cost summary::after { content:'▾'; float:right; color:var(--muted); }
  .cost[open] summary::after { content:'▴'; }
  .cost table { width:100%; border-collapse:collapse; font-size:13px; }
  .cost td { padding:5px 12px; border-top:1px solid var(--line); vertical-align:top; }
  .cost tr.sub td { border-top:0; padding-top:1px; padding-bottom:1px; font-size:12px; padding-left:28px; }
  .cost tr.tot td { border-top:2px solid var(--line); }
  .cost .price { text-align:right; white-space:nowrap; }
  .cost-tip { margin:8px 12px 0; padding:8px 10px; border-radius:10px; background:rgba(34,197,94,.12); font-size:13px; line-height:1.45; }
  .cost .hint { margin:8px 12px 10px; }

  /* ===== Wetter, Gebetszeiten, Ankunft teilen ===== */
  .wx-wrap { position:relative; }
  .wx-strip { display:flex; gap:4px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:none; scroll-snap-type:x proximity; touch-action:pan-x pan-y; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
  .wx-strip .wx-c { scroll-snap-align:start; }
  .wx-arr { position:absolute; top:50%; transform:translateY(-60%); z-index:2; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:var(--card);
    color:var(--text); font-family:inherit; font-size:20px; font-weight:700; line-height:1; cursor:pointer; box-shadow:0 2px 8px #0003; display:flex; align-items:center; justify-content:center; padding:0 0 3px; }
  .wx-arr.l { left:-6px; } .wx-arr.r { right:-6px; }
  .wx-wrap.at-l .wx-arr.l, .wx-wrap.at-r .wx-arr.r { opacity:0; pointer-events:none; }
  .wx-c small { font-size:10px; color:var(--muted); }
  .wx-strip::-webkit-scrollbar { display:none; }
  .wx-c { flex:0 0 64px; display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 2px; border-radius:10px; background:var(--soft); border:1px solid var(--line); font-size:12px; }
  .wx-c b { font-size:18px; line-height:1.1; } .wx-c span { font-weight:700; } .wx-c i { font-style:normal; color:var(--muted); font-size:10.5px; display:flex; align-items:center; gap:2px; }
  .wx-c i .flag { width:13px; height:10px; }
  .wx-c.wxw { border-color:#f59e0b; background:rgba(245,158,11,.12); }
  .wx-warn { font-size:13px; line-height:1.55; padding:8px 10px; border-radius:10px; background:rgba(245,158,11,.12); margin-top:4px; }
  .wint table td { padding:8px 12px; }
  .pr-row { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:8px; font-size:12px; color:var(--muted); }
  .pr-row span { display:flex; flex-direction:column; } .pr-row b { color:var(--text); font-size:13px; }
  .pr-row span.on b { color:#059669; } .pr-row span.on { color:#059669; font-weight:700; }
  .dv-foot .live-on { background:rgba(34,197,94,.14); border-color:#22c55e; color:#15803d; }
  .dv-wint { display:block; } .dv-wint summary { cursor:pointer; font-weight:700; }
  .dv-foot { grid-template-columns:1fr 1fr 1fr; } .dv-foot .btn2 { font-size:13px; padding-left:6px; padding-right:6px; }
.dv-off { display:block; width:calc(100% - 24px); margin:8px 12px 0; }