:root{
  --bg:#0f172a; --panel:#1e293b; --panel2:#334155; --text:#f1f5f9;
  --muted:#94a3b8; --accent:#22c55e; --accent2:#3b82f6; --danger:#ef4444;
  --warn:#f59e0b; --radius:14px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; height:100%; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--text); overflow:hidden;}
#map{position:absolute; inset:0; z-index:1; background:#0b1120;}
.overlay{position:absolute; z-index:1000; pointer-events:none;}
.overlay *{pointer-events:auto;}

/* Top stats bar */
#stats{top:0; left:0; right:0; padding:8px 8px calc(8px + env(safe-area-inset-top)) 8px;
  padding-top:calc(8px + env(safe-area-inset-top));
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.75) 70%, rgba(15,23,42,0));
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
.stat{background:rgba(30,41,59,.85); border:1px solid rgba(148,163,184,.15);
  border-radius:12px; padding:8px 6px; text-align:center; backdrop-filter:blur(6px);}
.stat .v{font-size:19px; font-weight:700; line-height:1.1;}
.stat .l{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-top:2px;}
/* Menü-Kachel: gleiche Optik wie die Statistik-Kacheln */
.stat-menu{background:rgba(30,41,59,.85); border:1px solid rgba(148,163,184,.15);
  border-radius:12px; padding:0; font-size:26px; color:var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px);}

/* Bottom controls */
#controls{bottom:0; left:0; right:0; padding:10px 12px calc(12px + env(safe-area-inset-bottom)) 12px;
  background:linear-gradient(0deg, rgba(15,23,42,.95), rgba(15,23,42,.6) 70%, rgba(15,23,42,0));
  display:flex; flex-direction:column; gap:10px;}
.row{display:flex; gap:10px;}
button{font-family:inherit; font-size:16px; font-weight:600; color:var(--text);
  border:none; border-radius:var(--radius); padding:14px 16px; cursor:pointer;
  background:var(--panel2); transition:transform .05s, filter .15s; flex:1;}
button:active{transform:scale(.97);}
button.primary{background:var(--accent); color:#04210f;}
button.blue{background:var(--accent2);}
button.danger{background:var(--danger);}
button.ghost{background:rgba(51,65,85,.85); backdrop-filter:blur(6px);}
button:disabled{opacity:.4; cursor:not-allowed;}
button.icon{flex:0 0 auto; width:52px; padding:14px 0;}
button.big{padding:20px 16px; font-size:19px;}
/* Start-Button: das wichtigste Ziel auf dem Rad — doppelt so hoch */
#btn-start{padding:38px 16px; font-size:26px;}
#btn-resume-save{padding:38px 16px; font-size:22px;}
/* Nachfahren/Zufallsrunde: Start pulsiert, solange die Aufzeichnung noch nicht läuft */
@keyframes startpulse{0%,100%{filter:brightness(1); transform:scale(1);}50%{filter:brightness(1.35); transform:scale(1.02);}}
#btn-start.pulse{animation:startpulse 1.2s ease-in-out infinite;}

/* Statistikleiste ausblenden, solange sie nur Nullen zeigt (Ruhezustand).
   WICHTIG: auf #stats begrenzen — .stat-Kacheln gibt es auch auf der
   Statistik-Seite und im Tillo-Profil, die sollen natürlich bleiben! */
body.statsoff #stats .stat{display:none;}
body.statsoff #stats{background:none;}

/* Zähler-Badge im Menü (offene Anfragen/Einladungen) */
.badge{display:inline-block; background:var(--danger); color:#fff; border-radius:12px;
  padding:2px 9px; font-size:13px; font-weight:700; margin-left:10px; vertical-align:2px;}
.menu-item{width:100%; text-align:left; font-size:17px; margin-bottom:10px; padding:16px;}

/* Vollbild-Seiten: Menü und alle Unterseiten */
.page{position:absolute; inset:0; z-index:2500; background:var(--bg);
  display:none; flex-direction:column;}
.page.open{display:flex;}
.page-head{display:flex; align-items:center; gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
  border-bottom:1px solid var(--panel2); flex:0 0 auto;}
.page-head h2{margin:0; font-size:18px; flex:1;}
.backbtn{flex:0 0 auto; background:var(--panel2); font-size:14px; padding:10px 14px;}
.page-body{flex:1; overflow-y:auto; padding:16px;}
.page-foot{flex:0 0 auto; padding:12px 16px calc(14px + env(safe-area-inset-bottom));}
.page-foot button{width:100%;}

/* Groß und gut lesbar auf dem Rad; verschwindet nach 5 s von selbst (setStatus) */
#status{position:absolute; z-index:1000; left:50%; transform:translateX(-50%);
  top:calc(84px + env(safe-area-inset-top)); background:rgba(30,41,59,.92); backdrop-filter:blur(6px);
  padding:12px 20px; border-radius:24px; font-size:18px; color:var(--text);
  border:1px solid rgba(148,163,184,.2); white-space:nowrap; max-width:92vw; overflow:hidden; text-overflow:ellipsis;}

/* Live-Teilen-Button: erst groß unter der Statistikleiste, nach 20 s schrumpft er
   nach RECHTS zum quadratischen Button — direkt über dem Standort-Button, gleiche Größe */
#live-bar{top:calc(78px + env(safe-area-inset-top)); left:8px; right:8px; display:none;}
#live-bar.on{display:block;}
#live-bar button{display:block; margin:0 auto; width:100%; max-width:640px; height:58px;
  padding:0 12px; white-space:nowrap; overflow:hidden; font-size:18px; font-weight:600;
  color:#fff; background:var(--accent2); border:1px solid var(--accent2); border-radius:12px;
  backdrop-filter:blur(6px); transition:max-width .5s ease, height .5s ease;}
#live-bar button{position:relative;}
#live-bar.mini button{max-width:76px; height:76px; margin:0 0 0 auto; padding:0; font-size:34px; border-radius:18px;}
/* Zuschauerzähler: im großen Button inline hinter dem Text, im Mini-Zustand
   füllt „👀 N" die GANZE Kachel (statt eines winzigen Eck-Badges) */
#live-count{margin-left:8px; font-weight:800;}
#live-bar.mini #live-label{display:none;}
#live-bar.mini button.live-on #live-icon{display:none;}
#live-bar.mini button.live-on #live-count{margin-left:0; font-size:26px;}
#live-bar.mini button:not(.live-on) #live-count{display:none;}
#live-bar button.live-on{background:var(--accent); border-color:var(--accent); color:#04210f;}
/* Solange der große Button (volle Breite) da ist: Status-Pille weicht darunter aus */
#status{transition:top .4s ease, left .4s ease, transform .4s ease, max-width .4s ease;}
#sidebtns{transition:top .4s ease;}
body.livebar-big #status{top:calc(146px + env(safe-area-inset-top));}
/* Sobald der Live-Button aktiv ist, rückt der Standort-Button darunter (rechts gestapelt) —
   mit klarem Abstand unter die 76px-Mini-Kachel (top 78 + 76 + 20 Lücke) */
body.livebar-active #sidebtns{top:calc(174px + env(safe-area-inset-top));}
/* Mini-Zustand (rechts): Status-Pille links andocken, damit sie nicht unter dem Button liegt */
body.livebar-active:not(.livebar-big) #status{left:8px; transform:none; max-width:calc(100vw - 110px);}

/* side buttons */
#sidebtns{right:8px; top:calc(96px + env(safe-area-inset-top)); display:flex; flex-direction:column; gap:14px;}
#sidebtns button{flex:0 0 auto; width:76px; height:76px; padding:0; font-size:34px; background:rgba(30,41,59,.9);
  backdrop-filter:blur(6px); border:1px solid rgba(148,163,184,.15); border-radius:18px;}
#sidebtns button.active{background:var(--accent2); border-color:var(--accent2);}

/* Sheet / modal */
.sheet{position:absolute; z-index:2600; inset:0; background:rgba(2,6,23,.6); /* ÜBER den Vollbild-Seiten (2500): Sheets aus Seiten heraus (z. B. Galerie → Wegpunkt) müssen oben aufgehen */
  display:none; flex-direction:column; align-items:center; justify-content:flex-end;}
.sheet.open{display:flex;}
/* Foto-Vorschau im Wegpunkt-Dialog begrenzen — sonst schiebt ein Hochkant-Foto
   den Speichern-Button aus dem Bildschirm und man vergisst zu speichern */
#wp-preview{width:100%; max-height:36vh; object-fit:cover; border-radius:12px;}
/* Aktions-Zeile klebt am unteren Rand des scrollenden Sheets — immer sichtbar */
.sheet-actions{position:sticky; bottom:0; background:var(--panel);
  padding:10px 0 4px; margin-top:8px;}
/* Das Auswahl-/Bestätigungs-Sheet muss IMMER zuoberst liegen — es wird auch
   aus anderen offenen Sheets heraus geöffnet (z. B. Verwerfen-Rückfrage) */
#sheet-choose{z-index:2700;}

/* Großer Zurück-Button ÜBER dem Sheet — auf dem Rad viel leichter zu treffen als das kleine × */
.sheet-back{flex:0 0 auto; width:calc(100% - 24px); max-width:640px; margin:0 12px 10px;
  padding:16px; font-size:17px; font-weight:600; color:var(--text);
  background:rgba(30,41,59,.95); border:1px solid rgba(148,163,184,.3); border-radius:14px;
  backdrop-filter:blur(6px);}
.sheet-inner{background:var(--panel); width:100%; max-width:640px; max-height:82vh; overflow-y:auto;
  border-radius:20px 20px 0 0; padding:16px 16px calc(20px + env(safe-area-inset-bottom)) 16px;
  box-shadow:0 -10px 40px rgba(0,0,0,.5);}
.sheet h2{margin:2px 0 12px; font-size:18px; display:flex; justify-content:space-between; align-items:center;}
/* ×-Schließen: großzügiges Tap-Ziel — kleine Ziele sind auf dem Rad kaum zu treffen */
.close{background:none; border:none; color:var(--muted); font-size:30px; width:auto; flex:0;
  padding:8px 14px; margin:-8px -10px -8px 0;}
/* Zentrierter, großer Schließen-Button ÜBER der Box (mit Abstand) — ersetzt das
   fummelige Eck-× an allen Bottom-Sheets. Rund, mittig, gut mit dem Daumen zu treffen. */
.sheet-x{flex:0 0 auto; width:58px; height:58px; margin:0 auto 14px; padding:0;
  font-size:30px; line-height:1; color:var(--text); background:rgba(30,41,59,.95);
  border:1px solid rgba(148,163,184,.25); border-radius:50%; backdrop-filter:blur(6px);
  box-shadow:0 4px 18px rgba(0,0,0,.45);}
.route-item{background:var(--panel2); border-radius:12px; padding:12px; margin-bottom:10px;}
.route-item .top{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.route-item .name{font-weight:700; font-size:15px;}
.route-item .meta{color:var(--muted); font-size:12px; margin-top:4px;}
.route-item .acts{display:flex; gap:6px; margin-top:10px;}
.route-item .acts button{font-size:13px; padding:8px 10px;}
.empty{color:var(--muted); text-align:center; padding:30px 10px; font-size:14px;}
.hint{color:var(--muted); font-size:12px; line-height:1.5; background:rgba(51,65,85,.4);
  padding:10px 12px; border-radius:10px; margin-top:6px;}
input[type=text],input[type=password],input[type=email],select,textarea{
  width:100%; padding:12px; border-radius:10px; border:1px solid var(--panel2);
  background:var(--bg); color:var(--text); font-size:15px; font-family:inherit; margin-bottom:8px; resize:vertical;}
input[type=range]{width:100%; margin:2px 0 10px; accent-color:var(--accent2);}
.trim-label{font-size:12px; color:var(--muted);}
.check-row{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text);
  margin:4px 0 12px; cursor:pointer;}
.check-row input{width:20px; height:20px; margin:0; accent-color:var(--accent);}
.tag{display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px;
  background:rgba(59,130,246,.25); color:#93c5fd; margin:4px 4px 0 0;}

/* Tillo-Profilseite */
#tp-map, #ride-map{height:240px; border-radius:14px; overflow:hidden; margin-bottom:10px; background:var(--panel2);}
.tp-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:10px 0;}
.tp-stats .stat{background:var(--panel2); border:none;}
.tp-desc{background:var(--panel2); border-radius:12px; padding:12px; font-size:14px;
  line-height:1.6; white-space:pre-wrap; margin-bottom:4px;}
.linkname{cursor:pointer; text-decoration:underline; text-decoration-color:rgba(148,163,184,.4);
  text-underline-offset:3px;}

/* Auf-/zuklappbare Rubriken in Meine Tillos */
.sect-h{cursor:pointer; user-select:none; display:flex; align-items:center; gap:6px;}
.sect-arrow{display:inline-block; width:14px; color:var(--muted);}

/* Wegpunkt-Auswahl: zwei große Kacheln */
.wp-choice-row{display:flex; gap:12px; margin:8px 0 6px;}
.wp-choice{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:44px; padding:26px 10px; background:var(--panel2); border-radius:16px;}
.wp-choice span{font-size:15px; font-weight:700;}

/* ⚡ Gefahr melden: gelber Schnell-Button neben dem Wegpunkt-Button */
.hazardbtn{background:var(--warn); color:#3b2a00; font-size:26px;}
/* Gefahr-Schnellwahl: große Kacheln, zwei Spalten, ein Tipp genügt */
.hz-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.hz-grid button{display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:32px; padding:18px 8px; background:var(--panel2); border-radius:14px;}
.hz-grid button span{font-size:14px; font-weight:700;}

/* Favoriten-Stern */
.favstar{cursor:pointer; font-size:20px; margin-right:8px; color:var(--muted); user-select:none;}
.favstar.on{color:var(--warn);}

/* Gruppen-Kacheln */
.grp-tile{background:var(--panel2); border-radius:14px; padding:16px; margin-bottom:10px; cursor:pointer;}
.grp-tile:active{transform:scale(.98);}
.grp-tile .gname{font-weight:800; font-size:17px;}
.grp-tile .gmeta{color:var(--muted); font-size:13px; margin-top:6px;}
.grp-tile .garrow{float:right; color:var(--muted); font-size:20px;}

/* Communitys */
.comm-tile{border-left:5px solid var(--cc, var(--accent2));}
/* Invite-Banner im Auth-Overlay */
#invite-banner .invite-card{display:flex; align-items:center; gap:12px; text-align:left;
  background:rgba(14,165,233,.12); border:1px solid var(--cc,#0ea5e9); border-radius:12px;
  padding:12px; margin-bottom:14px;}
.invite-emblem{font-size:34px; flex:0 0 auto;}
.invite-txt b{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}
.invite-name{font-weight:800; font-size:16px; margin:2px 0;}
.invite-sub{color:var(--muted); font-size:12px; line-height:1.4;}
/* Community-Detail: Kopf mit Signaturfarbe */
.comm-hero{border-radius:16px; padding:22px 16px; text-align:center; margin-bottom:12px;
  background:linear-gradient(135deg, var(--cc,#0ea5e9), rgba(2,6,23,.55));}
.comm-emblem{font-size:46px; line-height:1;}
.comm-hero-name{font-weight:800; font-size:22px; margin-top:6px; color:#fff;}
.comm-hero-sub{color:rgba(255,255,255,.85); font-size:13px; margin-top:2px;}
.comm-desc{font-size:14px; line-height:1.5; color:var(--text); margin-bottom:10px;}
.comm-live{background:rgba(34,197,94,.15); color:#4ade80; font-weight:600; font-size:14px;
  padding:10px 12px; border-radius:10px; margin-bottom:6px; text-align:center;}
/* Abzeichen (Statistik) */
#stats-badges{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px; margin-bottom:6px;}
.badge-tile{background:var(--panel2); border-radius:12px; padding:10px 6px; text-align:center; opacity:.45;}
.badge-tile.on{opacity:1; box-shadow:0 0 0 2px var(--accent);}
.badge-e{font-size:30px; line-height:1;}
.badge-t{font-weight:700; font-size:12px; margin-top:4px;}
.badge-d{font-size:10px; color:var(--muted); margin-top:2px; line-height:1.3;}
.badge-p{font-size:11px; color:var(--accent2); margin-top:4px; font-weight:600;}

/* Mitglieder-Wall */
.comm-members{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:6px;}
.comm-mem{display:flex; flex-direction:column; align-items:center; width:62px; gap:4px; cursor:pointer;}
.comm-mem-n{font-size:11px; color:var(--muted); max-width:62px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; text-align:center;}

/* Aktivitäts-Feed */
.feed-item{display:flex; align-items:center; gap:10px; padding:10px 4px;
  border-bottom:1px solid rgba(148,163,184,.12);}
.feed-ic{font-size:18px; flex:0 0 auto;}
.feed-tx{flex:1; font-size:14px; line-height:1.35;}
.feed-t{flex:0 0 auto; color:var(--muted); font-size:11px;}
/* Beitritts-/Willkommens-Emblem */
.welcome-emblem{width:72px; height:72px; border-radius:50%; margin:0 auto; display:flex;
  align-items:center; justify-content:center; font-size:38px; background:var(--accent2);}
.welcome-emblem.big{width:96px; height:96px; font-size:52px;}
.welcome-name{font-weight:700; font-size:16px;}
.join-name{font-weight:800; font-size:20px; margin-top:2px;}

/* Streckeninfo auf dem Tillo-Profil (Wegbelag + Gefahren, lädt) */
.tp-trackinfo{margin:2px 0 12px;}
.ti-row{background:rgba(51,65,85,.4); border-radius:10px; padding:9px 12px; margin-bottom:6px;
  font-size:13px; color:var(--text); line-height:1.4;}
.ti-m{color:var(--muted); font-size:12px;}
.ti-warn{color:var(--warn); font-weight:600;}
.ti-ok{color:#4ade80;}
.spin{display:inline-block; width:12px; height:12px; border:2px solid var(--muted);
  border-top-color:transparent; border-radius:50%; animation:spin .8s linear infinite; vertical-align:-2px; margin-right:5px;}
@keyframes spin{to{transform:rotate(360deg)}}

/* Profilbild (Avatar) */
.avatar{display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  overflow:hidden; flex:0 0 auto; background:var(--panel2); vertical-align:middle;}
.avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.avatar-initial{background:var(--accent2); color:#fff; font-weight:700;}
/* Zeilen mit Avatar + Name */
.name-row{display:flex; align-items:center; gap:10px;}

/* Spots */
.spot-tile{display:flex; align-items:center; gap:12px; background:var(--panel2); border-radius:14px;
  padding:12px; margin-bottom:10px; cursor:pointer;}
.spot-tile:active{transform:scale(.98);}
.spot-tile-em{font-size:30px; flex:0 0 auto; width:44px; text-align:center;}
.spot-tile-main{flex:1; min-width:0;}
.spot-tile-name{font-weight:700; font-size:16px;}
.spot-tile .meta{color:var(--muted); font-size:12px; margin-top:3px;}
.spot-tile-thumb{width:56px; height:56px; object-fit:cover; border-radius:10px; flex:0 0 auto;}
/* Emblem-Auswahl beim Erstellen */
.emblem-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(48px,1fr)); gap:6px; margin-bottom:10px;}
.emblem-grid button{font-size:24px; padding:8px 0; background:var(--panel2); border-radius:10px;}
.emblem-grid button.on{background:var(--accent2); box-shadow:0 0 0 2px var(--accent2);}
/* Foto-Vorschau vor dem Speichern */
.spot-prev-grid{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px;}
.spot-prev{position:relative; width:80px; height:80px;}
.spot-prev img{width:80px; height:80px; object-fit:cover; border-radius:10px;}
.spot-prev-rm{position:absolute; top:-6px; right:-6px; width:24px; height:24px; padding:0; border-radius:50%;
  background:var(--danger); color:#fff; font-size:16px; line-height:1;}
/* Foto-Galerie auf der Spot-Seite */
.spot-gallery{display:flex; gap:8px; overflow-x:auto; margin-bottom:10px; padding-bottom:4px;}
.spot-gallery img{height:120px; border-radius:10px; cursor:pointer; flex:0 0 auto;}
/* Karten-Marker: EINHEITLICHER Pin für alle Spots (kein wählbares Emblem) */
.spot-marker{background:none; border:none;}
.spot-marker i{display:block; width:18px; height:18px; background:var(--accent2); border:2px solid #fff;
  border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:0 2px 5px rgba(0,0,0,.45);}
/* Kooperations-Link (Community → externe Seite) + Kooperations-Hinweis (Spot → Community) */
.comm-link{display:block; text-align:center; background:var(--accent2); color:#fff; text-decoration:none;
  padding:12px; border-radius:10px; font-weight:600; margin:6px 0 2px;}
.spot-coop{background:rgba(14,165,233,.14); border:1px solid var(--accent2); border-radius:10px;
  padding:10px 12px; margin-bottom:10px; font-size:14px; cursor:pointer;}

/* Galerie */
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px;}
.gallery-grid figure{margin:0;}
.gallery-grid img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; cursor:pointer; display:block;}
.gallery-grid figcaption{font-size:11px; color:var(--muted); text-align:center; margin-top:3px;}
.wpview-img{width:100%; border-radius:12px; margin-bottom:10px; display:block; cursor:zoom-in;}

/* Bild-Großansicht */
#lightbox{position:fixed; inset:0; z-index:4000; background:rgba(2,6,23,.96);
  display:none; align-items:center; justify-content:center; cursor:zoom-out;}
#lightbox.open{display:flex;}
#lightbox img{max-width:100vw; max-height:100vh; object-fit:contain;}
.wp-marker{filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); font-size:22px; line-height:1; cursor:pointer;}

/* Auth overlay */
/* Halbtransparent: die Karte dahinter schimmert durch — gratis „Hero-Bild" für die Landing */
#auth{position:absolute; inset:0; z-index:3000; background:rgba(15,23,42,.88);
  backdrop-filter:blur(2px); display:none; padding:20px; overflow-y:auto;}
#auth.open{display:flex;}
.auth-box{width:100%; max-width:380px; margin:auto;}
/* Landing für Gäste */
.land-claim{text-align:center; font-size:20px; font-weight:800; line-height:1.35; margin-bottom:16px;}
.land-feats{display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
.land-feats div{background:rgba(30,41,59,.8); border:1px solid rgba(148,163,184,.14);
  border-radius:12px; padding:10px 12px; font-size:14px; line-height:1.45;}
.auth-logo{font-size:28px; font-weight:800; text-align:center; margin-bottom:6px;}
.auth-sub{color:var(--muted); text-align:center; font-size:13px; margin-bottom:22px;}
.auth-view button{width:100%; margin-top:4px;}
.auth-alt{text-align:center; color:var(--muted); font-size:13px; margin-top:14px;}
.auth-alt a{color:var(--accent2); cursor:pointer; text-decoration:underline;}
.auth-err{color:var(--danger); font-size:13px; text-align:center; margin-top:12px; min-height:18px;}
.auth-hello{text-align:center; font-size:16px; margin-bottom:14px;}
.pin-input{text-align:center; font-size:28px; letter-spacing:14px;}
.page h3, .sheet h3{font-size:14px; color:var(--muted); margin:16px 0 8px; text-transform:uppercase; letter-spacing:.04em;}
.grp-invite-row{display:flex; gap:6px; margin-top:8px;}
.grp-invite-row input{margin-bottom:0; flex:1;}
.grp-invite-row button{flex:0 0 auto; font-size:13px; padding:8px 12px;}
/* Navigations-Banner: groß und mit dickem Richtungspfeil — muss während
   der Fahrt mit einem Blick erfassbar sein */
.navinfo{position:absolute; z-index:1000; left:8px; right:8px;
  top:calc(84px + env(safe-area-inset-top)); background:rgba(59,130,246,.96);
  color:#fff; padding:14px 16px; border-radius:16px; display:none; box-shadow:0 4px 20px rgba(0,0,0,.4);}
.nav-main{display:flex; align-items:center; gap:14px;}
#nav-arrow{font-size:40px; line-height:1; flex:0 0 auto;}
.navinfo .instr{font-size:21px; font-weight:800; line-height:1.25;}
.navinfo .sub{font-size:15px; opacity:.92; margin-top:6px;}
/* Während der Navigation weichen ALLE oberen Elemente unter das Anweisungs-Banner aus:
   erst der Live-Teilen-Button, darunter Status-Pille und Seitenbuttons
   (diese Regeln stehen bewusst NACH den livebar-big-Regeln und gewinnen daher) */
body.navon #live-bar{top:calc(224px + env(safe-area-inset-top));}
body.navon #status{top:calc(292px + env(safe-area-inset-top));}
body.navon #sidebtns{top:calc(292px + env(safe-area-inset-top));}
/* Navigation UND Live-Teilen gleichzeitig: die Mini-Kachel sitzt bei 224+76=300,
   der 🎯-Button muss klar darunter (sonst kleben/überlappen sie — Screenshot-Bug) */
body.navon.livebar-active #sidebtns{top:calc(320px + env(safe-area-inset-top));}

/* Gefahrenstellen-Warnung: GROSS und unübersehbar — sie verschwindet ja von selbst wieder */
#hazard-banner{position:absolute; z-index:1500; left:8px; right:8px;
  top:calc(84px + env(safe-area-inset-top)); background:rgba(245,158,11,.97);
  color:#231a02; padding:18px 16px; border-radius:16px; display:none;
  box-shadow:0 4px 20px rgba(0,0,0,.4);}
#hazard-banner .instr{font-size:26px; font-weight:800; line-height:1.25;}
#hazard-banner button{background:rgba(0,0,0,.15); color:#231a02;}
.leaflet-control-attribution{font-size:9px !important;}
.pill{display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; background:rgba(148,163,184,.2); color:var(--muted);}

/* Eigenschafts-Chips (Radweg, Schotter, …): Auswahl beim Speichern & Filter in der Suche */
.attr-chips{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0;}
.attr-chips button{flex:0 0 auto; width:auto; font-size:14px; padding:10px 14px;
  border-radius:20px; background:var(--panel2);}
.attr-chips button.on{background:var(--accent2);}

/* „Tillos in der Nähe" auf der Profilseite: nur Name + Entfernung */
.near-item{display:flex; justify-content:space-between; align-items:center; gap:8px;
  background:var(--panel2); border-radius:12px; padding:12px; margin-bottom:8px; font-size:15px;}

/* Tillo-Kacheln in den Übersichten: ganze Kachel klickbar, alle Aktionen auf der Profilseite */
.tillo-tile{background:var(--panel2); border-radius:14px; padding:14px; margin-bottom:10px; cursor:pointer;}
.tillo-tile:active{transform:scale(.98);}
.tillo-tile .top{display:flex; align-items:center; gap:8px;}
.tillo-tile .name{font-weight:700; font-size:16px; flex:1;}
.tillo-tile .meta{color:var(--muted); font-size:13px; margin-top:6px;}
.tillo-tile .acts{margin-top:8px; display:flex;}
.tillo-tile .acts button{font-size:13px; padding:8px 12px; flex:0 0 auto;}

/* Wartungshinweis-Banner (Feature-Flag maintenance_banner) */
#maintenance-banner{position:fixed; top:0; left:0; right:0; z-index:3000;
  background:var(--warn); color:#3b2a00; padding:10px 42px 10px 14px; font-size:13px;
  line-height:1.4; text-align:center; display:none; box-shadow:0 2px 10px rgba(0,0,0,.35);}
#maintenance-banner.show{display:block;}
#maintenance-banner #mb-close{position:absolute; right:6px; top:6px; width:28px; height:28px;
  background:rgba(0,0,0,.18); color:#3b2a00; border:none; border-radius:6px; font-size:16px; padding:0; line-height:1;}
/* Live-Teilen per Feature-Flag deaktiviert */
body.livedisabled #live-bar{display:none !important;}

/* ---------- Routen-Vorschau (Navigation/Nachfahren) ---------- */
.pv-meta{font-size:18px; font-weight:800; margin-bottom:6px;}
.pv-haz-ok{color:var(--accent); font-weight:700; padding:6px 0;}
.pv-haz-head{color:#f59e0b; font-weight:800; margin-bottom:4px;}
.pv-haz-list{margin:0; padding-left:20px;}
.pv-haz-list li{margin:4px 0; font-size:15px;}
/* Treppen (nicht befahrbar → rot) & Wegbelag (Info) in der Vorschau */
.pv-stairs-head{color:var(--danger); font-weight:800; margin-bottom:4px;}
.pv-surf{font-size:15px; padding:4px 0;}
.pv-surf-m{color:var(--muted); font-size:13px;}
/* Treppen-Warnung im Tillo-Profil */
.tp-stairs-warn{background:rgba(239,68,68,.15); border:1px solid var(--danger);
  color:#fecaca; border-radius:12px; padding:10px 12px; margin:6px 0 10px; font-size:14px; font-weight:600;}
.tp-source{font-size:12px; color:var(--muted); margin:2px 0 8px; line-height:1.4;}
/* Treppen-Rückfrage im Speichern-Dialog */
#save-stairs{margin:10px 0; padding:12px; border-radius:12px;
  background:rgba(239,68,68,.12); border:1px solid var(--danger);}
.stair-head{font-size:13px; line-height:1.5; margin-bottom:10px;}
.stair-row{margin-bottom:10px;}
.stair-q{font-size:14px; font-weight:600; margin-bottom:6px;}
.stair-toggle{display:flex; gap:8px;}
.stair-toggle button{flex:1; font-size:14px; padding:10px; background:var(--panel2); opacity:.6;}
.stair-toggle .stair-yes.on{background:var(--danger); opacity:1;}
.stair-toggle .stair-no.on{background:var(--accent); opacity:1;}

/* ---------- Bewertungen (Tillo-Profil) ---------- */
.stars{color:#f5b301; letter-spacing:1px;}
.rev-summary{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); margin-bottom:12px;}
.rev-summary .rev-avg{font-size:26px; font-weight:800; color:var(--text);}
.rev-form{background:var(--panel); border:1px solid rgba(148,163,184,.15); border-radius:12px; padding:12px; margin-bottom:14px;}
.star-input{display:flex; gap:4px; margin-bottom:8px;}
.star-input button{flex:0 0 auto; background:none; border:none; padding:2px 4px; font-size:32px; line-height:1; color:#f5b301; cursor:pointer;}
.rev-form textarea{width:100%; min-height:70px;}
.rev-list{margin-top:6px;}
.rev-item{border-top:1px solid rgba(148,163,184,.12); padding:10px 0;}
.rev-head{font-size:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.rev-head .rev-date{color:var(--muted); font-size:12px; margin-left:auto;}
.rev-text{font-size:14px; color:var(--text); line-height:1.5; margin-top:4px; white-space:pre-wrap;}