:root{
  --u1:#52A63C; --u2:#E3151D; --u3:#16683D; --u6:#8C6DAB; --u8:#224F86;
  --sbahn:#008351; --tram:#D6083B; --bus:#A5459A; --ferry:#0A84FF; --other:#666;
  --ink:#101418; --paper:#FBF8EE; --yellow:#F7D117;
  --warn:#E3151D; --warn-bg:#FDE9E7;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;overflow:hidden;font-family:'Arial Narrow',Arial,sans-serif;background:var(--paper);color:var(--ink);}
.app{height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--paper);}

/* App-Leiste und Tab-Leiste spannen die volle Fensterbreite auf; der eigentliche
   Inhalt bleibt in einer zentrierten Spalte, damit es auf breiten Desktop-Screens
   nicht wie ein gestreckter/verunglückter Mobil-Layout aussieht. */
.appbar{background:var(--yellow);border-bottom:4px solid var(--ink);flex-shrink:0;}
.appbar-inner{max-width:640px;margin:0 auto;padding:calc(14px + env(safe-area-inset-top)) 18px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.appbar .brand{display:flex;align-items:center;gap:10px;}
.lang-toggle{flex-shrink:0;font-size:12px;font-weight:900;letter-spacing:.5px;color:var(--ink);background:none;border:2px solid var(--ink);border-radius:20px;padding:5px 12px;cursor:pointer;}
.mark{width:36px;height:36px;background:var(--ink);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.appbar h1{margin:0;font-size:20px;letter-spacing:0.5px;text-transform:uppercase;font-weight:900;color:var(--ink);}
.appbar .sub{font-size:10.5px;color:var(--ink);opacity:.75;text-transform:uppercase;letter-spacing:1px;margin-top:1px;}

.content{flex:1;overflow-y:auto;padding:16px;display:none;max-width:640px;width:100%;margin:0 auto;}

.app-loading{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--ink);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:800;}
.app-loading[hidden]{display:none;}
.app-loading-spinner{width:28px;height:28px;border:3px solid #e5e0cf;border-top-color:var(--ink);border-radius:50%;animation:rw-spin .8s linear infinite;}
@keyframes rw-spin{to{transform:rotate(360deg);}}
.content.active{display:block;}
/* Waehrend des ersten Ladens (Spinner oben) keine Tab-Inhalte darunter zeigen -
   sonst wirkt z.B. "Noch keine Route" schon sichtbar, obwohl die echten Daten
   erst gleich nachladen. Die Tab-Leiste selbst bleibt bewusst sichtbar. */
body.app-loading-active .content.active{display:none;}
.section-row{display:flex;align-items:center;justify-content:space-between;margin:18px 0 8px;}
.section-row:first-child{margin-top:0;}
.section-title{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:800;color:var(--ink);opacity:.6;}
.section-action{font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:800;color:var(--ink);background:var(--yellow);border:2px solid var(--ink);border-radius:20px;padding:5px 12px;cursor:pointer;}

.hint-card{background:var(--ink);color:var(--paper);border-radius:12px;padding:12px 14px;margin-bottom:16px;display:flex;align-items:center;gap:12px;}
.hint-card[hidden]{display:none;}
.hint-card .ico{width:34px;height:34px;background:var(--yellow);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;}
.hint-card .txt{flex:1;font-size:11.5px;line-height:1.4;}
.hint-card .txt b{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.3px;margin-bottom:1px;}
.hint-card button{background:var(--yellow);color:var(--ink);border:none;border-radius:8px;padding:8px 12px;font-weight:800;font-size:11px;text-transform:uppercase;white-space:nowrap;cursor:pointer;}
.hint-error{color:#FFB3AE;font-size:10.5px;margin-top:5px;}

.route-card{background:#fff;border:2px solid var(--ink);border-radius:10px;padding:12px 40px 12px 14px;margin-bottom:10px;position:relative;box-shadow:3px 3px 0 rgba(16,20,24,.08);}
.route-card.alert{border-color:var(--warn);background:var(--warn-bg);box-shadow:3px 3px 0 rgba(227,21,29,.12);}
.route-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.route-top-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.route-bell{display:flex;color:var(--ink);}
.route-bell.off{color:#999;}
.badges{display:flex;gap:6px;flex-wrap:wrap;}
.badge{width:32px;height:32px;box-sizing:border-box;border-radius:50%;color:#fff;font-weight:900;font-size:12px;display:flex;align-items:center;justify-content:center;border:none;flex-shrink:0;}
.badge.sm{width:26px;height:26px;font-size:10px;}
/* Original-BVG-Formen (direkt bei bvg.de per bds-signet-line geprueft):
   S-Bahn/unbekannt = Kreis (Default oben, fixe Breite, sonst wuerde ein
   3-stelliger Code wie "S41" die Breite ueber die Hoehe treiben und aus dem
   Kreis ein Oval machen), U-Bahn = eckiges Quadrat OHNE Rundung,
   Bus/Tram/Fähre = breiteres, nur leicht abgerundetes Rechteck. Keiner der
   Typen hat dort einen schwarzen Rand. */
.badge.mode-ubahn{border-radius:0;}
.badge.mode-bus,.badge.mode-tram,.badge.mode-ferry,.badge.mode-regional{width:auto;min-width:46px;padding:0 8px;box-sizing:border-box;border-radius:4px;}
.badge.sm.mode-bus,.badge.sm.mode-tram,.badge.sm.mode-ferry,.badge.sm.mode-regional{min-width:36px;padding:0 6px;}
.route-name{font-size:13px;font-weight:700;color:var(--ink);margin-top:8px;}
.route-meta{font-size:11px;color:#555;margin-top:2px;}
.sync-link-row{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.sync-link-row input{flex:1;min-width:120px;font-size:11px;padding:8px 10px;color:#555;}
.sync-link-row .section-action{flex-shrink:0;}
.status-pill{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:20px;white-space:nowrap;flex-shrink:0;}
.status-ok{background:#DDEFD8;color:#1A6E39;}
.status-alert{background:var(--warn);color:#fff;}
.status-partial{background:var(--yellow);color:var(--ink);}
.alert-detail{margin-top:8px;font-size:12px;color:var(--ink);background:#fff;border-left:4px solid var(--warn);padding:8px 10px;border-radius:4px;}
.checked-at{font-size:9.5px;color:#999;margin-top:7px;text-transform:uppercase;letter-spacing:.4px;}
.checked-at::before{content:'● ';color:#4CA14B;}
.route-menu{position:absolute;top:10px;right:10px;}
.route-gear{width:22px;height:22px;padding:0;border-radius:50%;background:var(--paper);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);}
.route-menu-dropdown{position:absolute;top:26px;right:0;background:#fff;border:2px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 rgba(16,20,24,.15);min-width:190px;z-index:20;overflow:hidden;}
.route-menu-item{display:block;width:100%;box-sizing:border-box;text-align:left;padding:10px 14px;font-size:12.5px;font-weight:700;color:var(--ink);background:#fff;border:none;border-bottom:1px solid #eee;cursor:pointer;font-family:inherit;}
.route-menu-item:last-child{border-bottom:none;}
.route-menu-move{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:1px solid #eee;}
.route-menu-move span{font-size:12.5px;font-weight:700;color:var(--ink);}
.route-menu-move-btn{width:24px;height:24px;padding:0;margin-left:6px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);font-weight:900;font-size:12px;color:var(--ink);cursor:pointer;}
.route-menu-item:hover{background:var(--paper);}
.route-menu-item.danger{color:var(--warn);}
.section-action.danger{background:var(--warn);color:#fff;}
.route-altroute-hint{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(227,21,29,.35);}

.empty-state{display:none;flex-direction:column;align-items:center;text-align:center;padding:36px 20px;}
.empty-state.show{display:flex;}
.empty-icon{margin-bottom:14px;opacity:.35;}
.empty-title{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--ink);margin-bottom:6px;}
.empty-text{font-size:12px;color:#666;line-height:1.5;margin-bottom:18px;max-width:280px;}
.empty-tab-hint{font-size:11px;color:#888;line-height:1.5;margin-top:34px;max-width:280px;}

.filter-scroll{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px;}
.filter-chip{flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1px;padding:5px 8px;border-radius:20px;border:2px solid var(--ink);background:#fff;color:var(--ink);white-space:nowrap;cursor:pointer;}
.filter-chip.active{background:var(--ink);color:var(--yellow);}
.filter-chip--icon{border-color:#ccc;color:#999;padding:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center;}
.filter-chip--icon.active{background:var(--ink);color:var(--yellow);border-color:var(--ink);}
.disruption-item{background:#fff;border:2px solid var(--ink);border-radius:10px;padding:11px 13px;margin-bottom:9px;}
.disruption-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.disruption-type{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#8A6B00;background:#FDF1C4;padding:2px 7px;border-radius:4px;white-space:nowrap;}
.disruption-headline{font-size:12.5px;font-weight:700;color:var(--ink);margin-top:7px;}
.disruption-stations{font-size:11px;color:#555;margin-top:2px;}
.empty-hint{font-size:12px;color:#777;text-align:center;padding:24px 0;}

.sheet-overlay{position:fixed;inset:0;background:rgba(16,20,24,.35);display:none;align-items:flex-end;justify-content:center;z-index:10;}
.sheet-overlay.open{display:flex;}
.sheet{background:#fff;border:2px solid var(--ink);border-radius:18px 18px 0 0;padding:16px 16px calc(20px + env(safe-area-inset-bottom));width:100%;max-width:640px;max-height:88vh;overflow-y:auto;}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.sheet-head h2{margin:0;font-size:15px;text-transform:uppercase;letter-spacing:.5px;font-weight:900;color:var(--ink);}
.sheet-close{width:26px;height:26px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);font-weight:900;font-size:13px;cursor:pointer;}
.sheet-error{margin-top:12px;font-size:12px;color:var(--warn);background:var(--warn-bg);border-radius:6px;padding:8px 10px;}

.toggle-row{display:flex;background:var(--ink);border-radius:8px;padding:3px;margin-top:14px;margin-bottom:14px;}
.toggle-row button{flex:1;border:none;background:transparent;color:var(--paper);font-weight:800;font-size:12px;text-transform:uppercase;padding:8px;border-radius:6px;letter-spacing:.5px;cursor:pointer;}
.toggle-row button.active{background:var(--yellow);color:var(--ink);}
label.field{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:800;color:var(--ink);opacity:.65;margin:12px 0 6px;}
.line-grid{display:flex;flex-wrap:wrap;gap:8px;max-height:180px;overflow-y:auto;margin-bottom:16px;}
.line-chip{padding:0 10px;height:34px;min-width:34px;border-radius:17px;font-weight:900;font-size:12px;display:flex;align-items:center;justify-content:center;border:none;color:#fff;filter:grayscale(1) opacity(.35);cursor:pointer;}
.line-chip.selected{filter:none;outline:3px solid var(--yellow);outline-offset:1px;}
.line-chip.mode-ubahn{border-radius:0;}
.line-chip.mode-bus,.line-chip.mode-tram,.line-chip.mode-ferry,.line-chip.mode-regional{border-radius:4px;padding:0 14px;}
.line-search{position:relative;margin-bottom:8px;}
input[type=text],input[type=time]{width:100%;padding:10px;border:2px solid var(--ink);border-radius:8px;font-size:13px;background:var(--paper);font-family:inherit;color:var(--ink);}
.route-mode{display:none;}
.route-mode.active{display:block;}
.from-to{display:flex;flex-direction:column;gap:8px;position:relative;}
.input-with-icon{position:relative;}
.input-with-icon input{padding-right:38px;}
.locate-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:#888;cursor:pointer;padding:0;border-radius:50%;}
.locate-btn:hover,.locate-btn:active{color:var(--ink);background:#f0ede0;}
.locate-btn.busy{opacity:.5;pointer-events:none;}
/* Standardziele: bewusst kein "Zuhause"/"Arbeit" vorbelegt - eine
   Zusatzfunktion fuer Power-User, deshalb vor dem ersten angelegten Ziel nur
   ein leiser Text-Link statt einer auffaelligen Chip-Reihe. */
.dest-empty-link{background:none;border:none;padding:2px 0;margin:0;flex-shrink:0;font-size:12px;color:#888;text-decoration:underline;cursor:pointer;font-family:inherit;}
.dest-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.dest-chip{position:relative;display:flex;align-items:center;gap:6px;padding:8px 26px 8px 14px;border-radius:20px;border:2px solid var(--ink);background:#fff;font-weight:800;font-size:12.5px;color:var(--ink);cursor:pointer;}
.dest-chip.add{border-style:dashed;color:#666;font-weight:700;background:none;justify-content:center;padding:8px 14px;}
/* Zeigt, welcher Chip gerade Von/Nach befuellt hat (siehe setActiveDestination()
   in app.js) - invertierte Farben, wie schon bei Alt-Auswahl/Toggle-Buttons. */
.dest-chip.active{background:var(--ink);color:var(--yellow);}
.dest-chip.active .chip-remove{background:var(--yellow);color:var(--ink);}
/* Sofortiges Feedback waehrend Standort-Ermittlung + Suche laufen (siehe
   onDestinationChipClick() in app.js) - der Chip-Hintergrund pulsiert. Ein
   evtl. vorher aktives Ziel (schwarzer Hintergrund, .dest-chip.active) wird
   dafuer sofort zurueckgesetzt, damit nie zwei Chips gleichzeitig besondere
   Faerbung zeigen - siehe ACTIVE_DEST_ID in onDestinationChipClick(). */
.dest-chip.busy{pointer-events:none;animation:rw-dest-pulse 1.9s ease-in-out infinite;}
@keyframes rw-dest-pulse{0%,100%{background:#fff;}50%{background:var(--yellow);}}
.chip-remove{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;border:2px solid var(--paper);font-size:10px;font-weight:900;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.add-dest-box{background:#fff;border:2px solid var(--ink);border-radius:12px;padding:16px;margin-bottom:14px;}
.add-dest-box .field-row{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.add-dest-box label.field{margin:0 0 2px;}
.add-dest-actions{display:flex;gap:8px;margin-top:12px;}
.add-dest-actions .save-btn{margin-top:0;flex:1;}
.add-dest-actions .cancel-btn{flex-shrink:0;background:none;border:2px solid var(--ink);color:var(--ink);border-radius:8px;padding:0 16px;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.5px;cursor:pointer;}
.autocomplete-list{background:#fff;border:2px solid var(--ink);border-radius:8px;margin-top:-4px;max-height:160px;overflow-y:auto;}
.autocomplete-list div{padding:8px 10px;font-size:12.5px;cursor:pointer;}
.autocomplete-list div:hover{background:var(--paper);}
.route-alternatives{margin-top:4px;}
.alt-hint{font-size:11px;color:#555;margin:-2px 0 10px;line-height:1.4;}
.alt-loading{font-size:12px;color:#555;padding:6px 2px;}
.alt-row{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--ink);border-radius:10px;padding:9px 11px;margin-bottom:7px;cursor:pointer;transition:opacity .15s;}
.alt-row.unselected{opacity:.4;}
.alt-check{width:20px;height:20px;border-radius:5px;border:2px solid var(--ink);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;background:#fff;}
.alt-row:not(.unselected) .alt-check{background:var(--yellow);}
.alt-body{flex:1;min-width:0;}
.alt-badges{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.alt-arrow{font-size:9px;color:#999;}
.alt-meta{font-size:10.5px;color:#666;margin-top:4px;}
.walk-leg{display:inline-flex;flex-direction:column;align-items:center;gap:1px;font-size:9px;color:#666;line-height:1.1;}
.walk-leg svg{flex-shrink:0;}

.alt-fallback-toggle{background:none;border:none;padding:4px 0;margin:2px 0 0;font-size:12px;font-weight:700;color:#555;text-decoration:underline;cursor:pointer;font-family:inherit;}
.alt-fallback-note{font-size:11.5px;color:#666;line-height:1.5;margin-top:6px;}
.time-window-row{display:flex;gap:10px;align-items:center;margin-bottom:8px;}
.time-window-row input[type=time]{flex:1;}
.remove-window{width:26px;height:26px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);font-weight:900;font-size:12px;flex-shrink:0;color:var(--ink);cursor:pointer;}
.add-window-btn{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;background:none;border:2px dashed var(--ink);border-radius:8px;padding:7px;width:100%;color:var(--ink);opacity:.7;margin-bottom:4px;cursor:pointer;}
.weekdays{display:flex;gap:5px;margin-top:6px;}
.weekdays span{width:32px;height:32px;border:2px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--ink);cursor:pointer;}
.weekdays span.active{background:var(--ink);color:var(--yellow);}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;}
.route-card .switch-row{margin-top:0;}
.switch:disabled{opacity:.4;cursor:default;}
.switch-label b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--ink);}
.switch-label span{display:block;font-size:10.5px;color:#777;margin-top:2px;}
.switch{width:44px;height:26px;border-radius:14px;background:#DADAD2;border:2px solid var(--ink);position:relative;flex-shrink:0;cursor:pointer;padding:0;}
.switch::after{content:'';position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s;}
.switch.on{background:var(--yellow);}
.switch.on::after{transform:translateX(18px);}

.save-btn{margin-top:18px;width:100%;background:var(--ink);color:var(--yellow);border:none;padding:13px;border-radius:8px;font-weight:800;text-transform:uppercase;letter-spacing:1px;font-size:13px;cursor:pointer;}
.save-btn:disabled{opacity:.5;cursor:default;}

.tabbar{flex-shrink:0;border-top:2px solid var(--ink);background:var(--paper);padding-bottom:env(safe-area-inset-bottom);}
.tabbar-inner{max-width:640px;margin:0 auto;display:flex;}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 12px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:#8A8A80;background:none;border:none;cursor:pointer;}
.tabbar .tab.active{color:var(--ink);}

.journey-when-row{margin-top:16px;}
#journey-datetime-fields{margin-bottom:14px;}
#journey-datetime-fields .toggle-row{margin-bottom:10px;}
.journey-date-time-row{display:flex;gap:10px;}
.journey-date-time-row input{flex:1;min-width:0;}
.journey-search-btn{margin-bottom:20px;}

.journey-card{background:#fff;border:2px solid var(--ink);border-radius:10px;padding:12px 14px;margin-bottom:10px;box-shadow:3px 3px 0 rgba(16,20,24,.08);}
.journey-card.alert{border-color:var(--warn);background:var(--warn-bg);box-shadow:3px 3px 0 rgba(227,21,29,.12);}
.journey-times{display:flex;align-items:center;gap:10px;}
.journey-time-block{text-align:center;}
.journey-time-block b{display:block;font-size:16px;color:var(--ink);}
.journey-time-block span{display:block;font-size:9.5px;color:#666;max-width:110px;}
.journey-arrow{color:var(--ink);opacity:.4;font-size:14px;}
.journey-duration{margin-left:auto;font-size:11px;color:#666;white-space:nowrap;}
.journey-status-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;}

a{color:var(--ink);}