/* Gemeinsame Design-Tokens & Bausteine */
:root {
  --brand1:#e30a17; --brand2:#ff7a18; --gold:#f5b301;
  --grad:linear-gradient(135deg,var(--brand1),var(--brand2));
  --bg:#eef0f4; --panel:rgba(255,255,255,.84); --card:rgba(255,255,255,.92); --text:#14161c; --muted:#5f6573;
  --line:rgba(20,22,28,.09); --soft:rgba(20,22,28,.05); --shadow:0 20px 50px -12px rgba(15,20,40,.28);
  --rec-bg:rgba(245,179,1,.12); --rec-line:rgba(245,179,1,.45); --road:#2a2e38;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#0c0e13; --panel:rgba(20,23,31,.8); --card:rgba(30,34,45,.88); --text:#eef0f5; --muted:#9aa1b0;
  --line:rgba(255,255,255,.09); --soft:rgba(255,255,255,.06); --shadow:0 20px 60px -10px rgba(0,0,0,.7); --road:#1a1d25;
} }
:root[data-theme="dark"] {
  --bg:#0c0e13; --panel:rgba(20,23,31,.8); --card:rgba(30,34,45,.88); --text:#eef0f5; --muted:#9aa1b0;
  --line:rgba(255,255,255,.09); --soft:rgba(255,255,255,.06); --shadow:0 20px 60px -10px rgba(0,0,0,.7); --road:#1a1d25;
}
* { box-sizing:border-box; }
body { font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; -webkit-font-smoothing:antialiased; }

.flag { width:20px; height:15px; border-radius:3px; object-fit:cover; vertical-align:-2px; box-shadow:0 0 0 1px rgba(0,0,0,.08); flex:none; }
.flag-lg { width:30px; height:22px; border-radius:4px; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.1); }

.icon-btn { height:40px; min-width:40px; padding:0 11px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--text);
  display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; font:700 14px inherit; font-family:inherit; transition:.2s; flex:none; }
.icon-btn:hover { transform:translateY(-1px); }

/* Sprachmenü */
.lang { position:relative; flex:none; }
.lang-btn { height:40px; padding:0 11px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--text);
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; font:700 13px inherit; font-family:inherit; transition:.2s; }
.lang-btn:hover { transform:translateY(-1px); }
.lang-list { position:absolute; right:0; top:calc(100% + 6px); min-width:170px; padding:6px; border-radius:14px; background:var(--card);
  border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  display:none; z-index:2000; animation:langIn .18s ease; }
.lang.open .lang-list { display:block; }
@keyframes langIn { from { opacity:0; transform:translateY(-6px); } }
.lang-list button { width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; border:0; border-radius:10px; background:none;
  color:var(--text); font:600 14px inherit; font-family:inherit; cursor:pointer; text-align:left; }
.lang-list button:hover { background:var(--soft); }
.lang-list button.on { background:var(--soft); }
.lang-list button.on::after { content:'✓'; margin-left:auto; color:var(--brand2); font-weight:800; }

.legal { font-size:12px; color:var(--muted); }
.legal a { color:var(--muted); text-decoration:none; margin:0 6px; }
.legal a:hover { color:var(--text); text-decoration:underline; }

/* Bugreport */
.bug-btn { font-size:17px; }
#bugModal { position:fixed; inset:0; z-index:5000; background:rgba(8,10,16,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:none; place-items:center; padding:16px; }
#bugModal.on { display:grid; }
#bugModal .bug-box { width:min(460px,100%); background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:22px; padding:22px; position:relative; box-shadow:var(--shadow); }
#bugModal h2 { margin:0 0 4px; font-size:20px; }
#bugModal .bug-sub { color:var(--muted); font-size:13.5px; margin:0 0 12px; line-height:1.45; }
#bugModal form { display:flex; flex-direction:column; gap:10px; }
#bugModal textarea, #bugModal input { width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:12px; font:500 14px inherit; font-family:inherit; background:var(--soft); color:var(--text); resize:vertical; }
#bugModal .bug-note { font-size:11.5px; color:var(--muted); margin:0; }
#bugModal .bug-err { color:var(--brand1); font-size:13px; font-weight:600; min-height:14px; }
#bugModal .bug-send { padding:12px; border:0; border-radius:12px; background:var(--grad); color:#fff; font:700 15px inherit; font-family:inherit; cursor:pointer; }
#bugModal .bug-send:disabled { opacity:.6; }
#bugModal .bug-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; }

/* Hinweis „Seite im Aufbau“ – gelb leuchtender, umlaufender Rand */
@property --beta-a { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes betaSpin { to { --beta-a:360deg; } }
.beta-slot { display:flex; justify-content:center; }
.beta-slot:empty { display:none; }
.beta-pill { display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:6px 14px 6px 6px; border-radius:999px; font-size:13px; font-weight:600; color:var(--text);
  border:1.5px solid transparent; background:linear-gradient(var(--card),var(--card)) padding-box, conic-gradient(from var(--beta-a), #f5b301, #ffe27a, #ff9f1a, #f5b301) border-box;
  box-shadow:0 0 16px 2px rgba(245,179,1,.35); animation:betaSpin 3s linear infinite; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.beta-pill .tag { flex:none; background:#f5b301; color:#111; border-radius:999px; padding:2px 8px; font-size:11px; font-weight:800; letter-spacing:.06em; }
.beta-pill > span:last-child { min-width:0; white-space:nowrap; text-align:left; }
@media (max-width:370px) { .beta-pill > span:last-child { white-space:normal; } }
@media (prefers-reduced-motion: reduce) { .beta-pill { animation:none; } }
.index-beta, .beta-slot { margin:0 0 12px; }
.beta-slot.in-panel { margin:0 16px 10px; }
.beta-slot.in-panel .beta-pill { font-size:12.5px; }

/* ===== iPhone / iPad (Safari, „Zum Home-Bildschirm“) =====
   Ränder für Notch/Dynamic Island und Home-Leiste; in der Android-App übernimmt das die App selbst. */
html:not(.in-app) .wrap { padding-top:max(18px, calc(env(safe-area-inset-top) + 8px)); padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right)); }
html:not(.in-app) .map-ctl { top:max(12px, calc(env(safe-area-inset-top) + 6px)) !important; }
html:not(.in-app) #panel .panel-foot, html:not(.in-app) #panel .legal { padding-bottom:max(10px, env(safe-area-inset-bottom)); }
@media (max-width:860px) {
  @supports (height:1dvh) { #panel:not(.mini):not(.full) { height:58dvh; } html #panel.full { height:calc(100dvh - max(16px, env(safe-area-inset-top)) - 8px); } }
}
/* iOS zoomt beim Antippen in Felder unter 16 px Schrift – verhindern */
@supports (-webkit-touch-callout:none) { input, select, textarea { font-size:16px !important; } }

/* Hinweis „Zum Home-Bildschirm“ (nur iPhone-Safari, einmalig) */
.a2hs { position:fixed; z-index:6000; left:12px; right:12px; bottom:max(12px, env(safe-area-inset-bottom)); max-width:460px; margin:0 auto; display:flex; gap:12px; align-items:flex-start;
  padding:14px 14px 14px 12px; border-radius:18px; background:var(--card); color:var(--text); border:1px solid var(--line); box-shadow:0 20px 50px -14px rgba(0,0,0,.5);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); font-size:14px; line-height:1.45; animation:a2hsIn .4s ease; }
.a2hs img { width:44px; height:44px; border-radius:11px; flex:none; }
.a2hs b { display:block; margin-bottom:2px; }
.a2hs .x { margin-left:auto; flex:none; width:30px; height:30px; border-radius:50%; border:0; background:var(--soft); color:var(--text); cursor:pointer; }
@keyframes a2hsIn { from { opacity:0; transform:translateY(20px); } }

/* ===== Wartezeit-Verlauf (Heatmap) ===== */
.ws-grid { display:grid; grid-template-columns:22px repeat(24, minmax(0,1fr)); gap:2px; align-items:center; font-size:10.5px; }
.ws-grid b { font-weight:700; color:var(--muted); }
.ws-grid .hl { font-style:normal; color:var(--muted); font-size:9.5px; text-align:left; height:12px; }
.ws-grid .c, .ws-leg .c { display:block; height:16px; border-radius:3px; }
.ws-leg .c { display:inline-block; width:12px; height:12px; vertical-align:-2px; margin-right:4px; }
.c.g { background:#22c55e; } .c.m { background:#f59e0b; } .c.b { background:#e30a17; } .c.nd { background:var(--soft); border:1px solid var(--line); }
.ws-leg { display:flex; flex-wrap:wrap; gap:4px 12px; margin:8px 0 4px; font-size:12px; }
.ws-best, .ws-worst { font-size:13px; line-height:1.5; margin-top:6px; }
.ws-note { font-size:12px; margin-top:6px; }
.ws-empty { font-size:13px; color:var(--muted); padding:10px 0; }
.doc-alert { display:block; margin:0 0 12px; padding:10px 14px; border-radius:14px; background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.45); color:var(--text);
  text-decoration:none; font-size:13.5px; line-height:1.5; }
.doc-alert b { display:block; margin-top:2px; color:#b45309; }
.offline-pill { position:fixed; z-index:6500; left:50%; transform:translateX(-50%); top:max(8px, env(safe-area-inset-top)); padding:6px 14px; border-radius:99px;
  background:#3a2a00; color:#ffd54a; border:1px solid #ffd54a88; font-size:13px; font-weight:600; box-shadow:0 4px 14px #0006; pointer-events:none; white-space:nowrap; }

/* Eigenes Aufklapp-Menü statt des Auswahlfensters vom Handy (SY.dd in common.js) */
.dd { position:relative; }
.dd-btn { width:100%; display:flex; align-items:center; gap:8px; text-align:left; padding:11px 12px; border:1px solid var(--line); border-radius:12px;
  background:var(--card); color:var(--text); font:inherit; font-size:14px; cursor:pointer; transition:border-color .2s, box-shadow .2s; }
.dd-btn span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dd-btn i, .dd-o i { font-style:normal; font-size:15px; line-height:1; flex:none; }
.dd-arr { color:var(--muted); font-size:12px; transition:transform .2s; }
.dd.open .dd-btn { border-color:#E30A17; box-shadow:0 0 0 3px rgba(227,10,23,.15); }
.dd.open .dd-arr { transform:rotate(180deg); }
.dd-list { display:none; position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:50; min-width:max-content; max-width:min(92vw, 420px); max-height:300px; overflow:auto;
  background:linear-gradient(var(--card),var(--card)),var(--bg); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:12px; padding:4px; box-shadow:0 14px 34px -12px rgba(0,0,0,.35); }
.dd.up .dd-list { top:auto; bottom:calc(100% + 4px); }
.dd.open .dd-list { display:block; animation:ddIn .12s ease-out; }
@keyframes ddIn { from { opacity:0; transform:translateY(-4px); } }
.dd-o { width:100%; display:flex; align-items:center; gap:8px; text-align:left; padding:10px 10px; border:0; border-radius:8px; background:none; color:var(--text);
  font:inherit; font-size:14px; cursor:pointer; white-space:nowrap; }
.dd-o[hidden] { display:none; }
.dd-empty { padding:10px; color:var(--muted); font-size:13px; }
.dd-o:hover { background:var(--soft); }
.dd-o.on { background:rgba(227,10,23,.1); color:#E30A17; font-weight:600; }
.dd-o:disabled { opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.dd-q { width:100%; box-sizing:border-box; margin:2px 0 4px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:linear-gradient(var(--soft),var(--soft)),linear-gradient(var(--card),var(--card)),var(--bg); color:var(--text); font:inherit; font-size:16px; position:sticky; top:0; z-index:1; }
.dd-o span { min-width:0; overflow:hidden; text-overflow:ellipsis; }