:root{
      --bg:#081225;
      --panel:#111f36;
      --panel2:#0d1a2f;
      --line:#2f466f;
      --text:#ecf3ff;
      --muted:#a9bbd6;
      --accent:#1957bd;
      --accent2:#2c7cff;
      --green:#3df08b;
      --red:#ff6b81;
      --yellow:#ffb84d;
    }

    *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
    html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif}
    body{display:flex;flex-direction:column;overflow:hidden}

    .top-cards{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:6px;
      padding:8px;
      flex-shrink:0;
      max-width:900px;
      margin:0 auto;
      width:100%;
      box-sizing:border-box;
    }

    @media (orientation: landscape) and (max-height: 520px){
      .top-cards{display:none}
    }

    .card{
      background:linear-gradient(180deg,var(--panel),var(--panel2));
      border:1px solid var(--line);
      border-radius:12px;
      padding:8px 6px;
      text-align:center;
      cursor:pointer;
      min-width:0; /* prevent overflow in grid */
    }
    .card.active{
      border-color:var(--accent2);
      box-shadow:inset 0 0 0 1px rgba(44,124,255,.25);
    }
    .card h4{
      margin:0 0 2px 0;
      font-size:10px;
      letter-spacing:.06em;
      text-transform:uppercase;
      color:var(--muted);
    }
    .card .p{
      color:var(--green);
      font-weight:900;
      font-size:clamp(14px, 3.5vw, 20px); /* scales with screen width */
      line-height:1.1;
    }
    .card .s{
      color:var(--muted);
      font-size:clamp(8px, 1.8vw, 10px);
      margin-top:2px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .tabs{
      display:flex;
      border-top:1px solid rgba(255,255,255,.03);
      border-bottom:1px solid var(--line);
      background:#08101f;
      flex-shrink:0;
    }
    .tab{
      flex:1;
      text-align:center;
      padding:13px 6px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.03em;
      color:var(--muted);
      cursor:pointer;
      user-select:none;
    }
    .tab.active{
      color:#fff;
      border-bottom:3px solid var(--accent2);
      background:rgba(44,124,255,.08);
    }

    .filters{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      gap:6px;
      padding:8px;
      flex-shrink:0;
      border-bottom:1px solid var(--line);
    }

    @media (max-width:600px){
      .filters{grid-template-columns:1fr 1fr 1fr}
    }

    select,input,button{
      font:inherit;
    }

    select,input{
      width:100%;
      background:#09162b;
      color:#fff;
      border:1px solid #7a6e53;
      border-radius:10px;
      padding:11px 12px;
      outline:none;
    }

    .content{
      flex:1;
      overflow-y:auto;
      padding:10px 6px 14px;
    }

    .page{display:none}
    .page.active{display:block}
.station-card{
      background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
      border:1px solid var(--line);
      border-radius:14px;
      overflow:hidden;
      margin-bottom:10px;
    }

    .station-main{
      display:grid;
      grid-template-columns:28px 1fr auto;
      gap:10px;
      align-items:start;
      padding:14px;
    }

    .station-check{
      width:19px;
      height:19px;
      margin-top:4px;
      accent-color:var(--accent2);
    }

    .station-name{
      font-size:14px;
      font-weight:900;
      margin-bottom:4px;
      line-height:1.2;
    }

    .station-address,
    .station-place{
      font-size:12px;
      color:var(--muted);
      line-height:1.35;
    }

    .badge-row{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      margin-top:8px;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:4px;
      border-radius:999px;
      padding:4px 10px;
      font-size:10px;
      font-weight:800;
      border:1px solid var(--line);
      background:#09162b;
      color:#dbe7f8;
    }

    .badge.open{
      color:#d9ffe8;
      border-color:rgba(61,240,139,.4);
      background:rgba(61,240,139,.12);
    }

    .badge.closed{
      color:#ffd7de;
      border-color:rgba(255,107,129,.4);
      background:rgba(255,107,129,.10);
    }

    .station-right{
      text-align:right;
      min-width:88px;
    }

    .station-price{
      color:var(--green);
      font-size:18px;
      font-weight:900;
      line-height:1.1;
    }

    .station-distance{
      color:#7eb1ff;
      font-size:12px;
      font-weight:700;
      margin-top:4px;
      min-height:15px;
    }

    .details-row{
      display:flex;
      justify-content:flex-end;
      padding:0 14px 12px;
    }

    .details-btn{
      border:1px solid var(--accent2);
      background:transparent;
      color:#fff;
      border-radius:999px;
      padding:7px 12px;
      font-size:11px;
      font-weight:800;
      cursor:pointer;
    }

    .station-details{
      display:none;
      border-top:1px solid rgba(255,255,255,.06);
      padding:10px 12px 12px;
      background:rgba(0,0,0,.08);
    }

    .station-details.open{display:block}

    .detail-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }

    @media (max-width:700px){
      .detail-grid{grid-template-columns:1fr}
    }

    .detail-box{
      border:1px solid #45618f;
      background:#07152b;
      border-radius:12px;
      padding:12px 10px;
    }

    .detail-label{
      font-size:10px;
      text-transform:uppercase;
      letter-spacing:.06em;
      color:var(--muted);
      font-weight:800;
      margin-bottom:6px;
    }

    .detail-value{
      font-size:14px;
      font-weight:900;
      color:#fff;
      line-height:1.3;
    }

    .detail-sub{
      margin-top:3px;
      font-size:12px;
      color:var(--muted);
      line-height:1.35;
    }

    .map-toolbar{
      display:flex;
      gap:8px;
      margin-bottom:10px;
    }

    .map-toggle{
      flex:1;
      border:1px solid var(--line);
      background:#12213c;
      color:#fff;
      border-radius:10px;
      padding:10px 12px;
      font-size:12px;
      font-weight:800;
      cursor:pointer;
    }

    .map-toggle.active{
      border-color:var(--accent2);
      background:rgba(44,124,255,.15);
    }

    #map{
      width:100%;
      height: clamp(420px, calc(100vh - 160px), 1000px);
      border-radius:0;
      border:none;
      overflow:hidden;
      background:#000;
    }

   .map-price-tag{
  display:inline-block;
  background:#fff;
  color:#0a1a30;
  font-weight:900;
  border-radius:8px;
  padding:3px 7px;
  border:2px solid rgba(0,0,0,0.15);
  box-shadow:0 2px 8px rgba(0,0,0,0.45);
  font-size:12px;
  line-height:1.1;
  white-space:nowrap;
}

    
    .map-price-tag.best  { border-color: var(--green);  color: #003316; }
    .map-price-tag.mid   { border-color: var(--yellow); color: #332000; }
    .map-price-tag.worst { border-color: var(--red);    color: #330008; }

    .distance-label{
      background:rgba(8,18,37,.94);
      color:#fff;
      border:1px solid #6784b5;
      border-radius:999px;
      padding:2px 7px;
      font-size:10px;
      font-weight:900;
      white-space:nowrap;
    }

    .chart-wrap{
      background:rgba(0,0,0,.08);
      border:1px solid var(--line);
      border-radius:14px;
      padding:8px;
    }

    .chart-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      margin-bottom:8px;
    }

    .chart-head select{
      width:auto;
      min-width:90px;
    }

    #trend-box{
      font-size:12px;
      font-weight:900;
      color:#fff;
      text-align:right;
    }

    .chart-box{
      position:relative;
      height:420px;
    }

    .section-card{
      background:linear-gradient(180deg,var(--panel),var(--panel2));
      border:1px solid var(--line);
      border-radius:14px;
      padding:16px;
      margin-bottom:12px;
    }

    .calc-title{
      margin:0 0 14px 0;
      color:#fff;
      font-size:22px;
      font-weight:900;
      line-height:1.15;
      letter-spacing:.01em;
    }

    .calc-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }

    @media (max-width:700px){
      .calc-grid{grid-template-columns:1fr}
    }

    .field-label{
      display:block;
      margin-bottom:6px;
      font-size:10px;
      text-transform:uppercase;
      letter-spacing:.06em;
      color:var(--muted);
      font-weight:800;
    }

    #calc-res,#v-res{
      margin-top:14px;
      font-size:24px;
      font-weight:900;
      text-align:center;
    }

    #calc-res-sub{
      margin-top:5px;
      text-align:center;
      color:var(--muted);
      font-size:12px;
      font-weight:700;
    }

    #full-res{
      margin-top:14px;
      font-size:13px;
      line-height:1.5;
      color:var(--muted);
    }

    .legal-box{
      background:linear-gradient(180deg,var(--panel),var(--panel2));
      border:1px solid var(--line);
      border-radius:14px;
      padding:15px;
      line-height:1.6;
      color:var(--muted);
      font-size:13px;
    }

    
    .border-best { border-left: 5px solid var(--green) !important; }
    .border-mid  { border-left: 5px solid var(--yellow) !important; }
    .border-worst{ border-left: 5px solid var(--red) !important; }

    

    
    .station-card.is-closed { opacity: .52; }

    
    .filter-open-wrap{
      display:flex;
      align-items:center;
      gap:6px;
      background:#09162b;
      border:1px solid #7a6e53;
      border-radius:10px;
      padding:0 12px;
      cursor:pointer;
      user-select:none;
      font-size:12px;
      font-weight:800;
      color:var(--muted);
      white-space:nowrap;
    }
    .filter-open-wrap input{ width:auto; border:none; background:transparent; padding:0; }
    .filter-open-wrap.on{ border-color:var(--green); color:var(--green); background:rgba(61,240,139,.08); }

    
    .poi-panel-grid{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
    }
    .poi-btn{
      border:1px solid var(--line);
      background:#12213c;
      color:var(--muted);
      border-radius:10px;
      padding:8px 12px;
      font-size:11px;
      font-weight:800;
      cursor:pointer;
      transition: border-color .15s, color .15s, background .15s;
    }
    .poi-btn.active{
      border-color:var(--accent2);
      color:#fff;
      background:rgba(44,124,255,.18);
    }

    
    footer{
      flex-shrink:0;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:6px 10px;
      background:#060f1e;
      border-top:1px solid var(--line);
      font-size:10px;
      color:var(--muted);
      flex-wrap:wrap;
    }
    footer a{ color:var(--muted); text-decoration:underline; }
    #last-update-status{
      display:inline-flex;
      align-items:center;
      gap:4px;
      font-weight:800;
    }
    #last-update-status::before{
      content:'';
      display:inline-block;
      width:7px; height:7px;
      border-radius:50%;
      background:var(--green);
      box-shadow:0 0 4px var(--green);
    }
    #last-update-status.stale::before{ background:var(--yellow); box-shadow:0 0 4px var(--yellow); }
    #last-update-status.error::before{ background:var(--red); box-shadow:0 0 4px var(--red); }

    
    .loc-search-wrap{
      display:flex;
      gap:6px;
      padding:8px;
      border-bottom:1px solid var(--line);
      flex-shrink:0;
    }
    .loc-search-wrap input{
      flex:1;
      background:#09162b;
      color:#fff;
      border:1px solid #7a6e53;
      border-radius:10px;
      padding:10px 12px;
      font:inherit;
      outline:none;
    }
    .loc-search-wrap input:focus{ border-color:var(--accent2); }
    .loc-search-btn{
      border:1px solid var(--line);
      background:#12213c;
      color:#fff;
      border-radius:10px;
      padding:12px 16px;
      font-size:14px;
      cursor:pointer;
      white-space:nowrap;
      font-weight:800;
      min-width:80px;
      min-height:48px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:4px;
    }
    .loc-search-btn:active{ background:rgba(44,124,255,.2); }
    .loc-suggestions{
      position:absolute;
      z-index:9000;
      background:#0d1a2f;
      border:1px solid var(--line);
      border-radius:10px;
      width:calc(100% - 16px);
      left:8px;
      margin-top:2px;
      overflow:hidden;
      box-shadow:0 8px 24px rgba(0,0,0,.5);
    }
    .loc-suggestion-item{
      padding:10px 14px;
      font-size:13px;
      cursor:pointer;
      border-bottom:1px solid rgba(255,255,255,.04);
    }
    .loc-suggestion-item:hover{ background:rgba(44,124,255,.12); }
    .loc-suggestion-item:last-child{ border-bottom:none; }

    
    .move-up   { color: var(--red);    font-weight:900; font-size:11px; }
    .move-down { color: var(--green);  font-weight:900; font-size:11px; }
    .move-same { color: var(--muted);  font-weight:700; font-size:11px; }

    .today-range{
      display:flex;
      gap:6px;
      font-size:10px;
      color:var(--muted);
      margin-top:3px;
      justify-content:flex-end;
    }
    .today-range .tmin{ color:var(--green); font-weight:800; }
    .today-range .tmax{ color:var(--red);   font-weight:800; }

    
    .brand-table{
      width:100%;
      border-collapse:collapse;
      font-size:12px;
      margin-top:10px;
    }
    .brand-table th{
      text-align:left;
      color:var(--muted);
      font-size:10px;
      text-transform:uppercase;
      letter-spacing:.05em;
      padding:6px 8px;
      border-bottom:1px solid var(--line);
    }
    .brand-table td{
      padding:7px 8px;
      border-bottom:1px solid rgba(255,255,255,.04);
    }
    .brand-table tr:last-child td{ border-bottom:none; }
    .brand-table .best-brand td{ background:rgba(61,240,139,.06); }
    .brand-rank{ color:var(--muted); font-size:10px; }

    
    .alert-wrap{
      position:relative;
    }
    .alert-btn{
      border:1px solid var(--line);
      background:#12213c;
      color:var(--muted);
      border-radius:10px;
      padding:10px 13px;
      font-size:16px;
      cursor:pointer;
      line-height:1;
    }
    .alert-btn.active{
      border-color:var(--yellow);
      color:var(--yellow);
      background:rgba(255,184,77,.1);
    }
    .alert-btn.has-filters{
      border-color:var(--accent2);
      color:var(--accent2);
      background:rgba(44,124,255,.12);
      animation:alert-pulse 2s ease-in-out 3;
    }
    @keyframes alert-pulse{
      0%,100%{box-shadow:none}
      50%{box-shadow:0 0 0 4px rgba(44,124,255,.25)}
    }
    .alert-panel{
      display:none;
      position:absolute;
      right:0;
      top:calc(100% + 6px);
      background:#0d1a2f;
      border:1px solid var(--line);
      border-radius:14px;
      padding:14px;
      width:260px;
      z-index:8000;
      box-shadow:0 8px 24px rgba(0,0,0,.6);
    }
    .alert-panel.open{ display:block; }
    .alert-panel h4{
      margin:0 0 10px;
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.06em;
      color:var(--muted);
    }
    .alert-row{
      display:flex;
      gap:6px;
      align-items:center;
      margin-bottom:8px;
    }
    .alert-row input[type=number]{
      flex:1;
      padding:8px 10px;
      font-size:13px;
    }
    .alert-row select{
      width:auto;
      padding:8px 10px;
      font-size:13px;
    }
    .alert-save{
      width:100%;
      padding:9px;
      background:var(--accent);
      color:#fff;
      border:none;
      border-radius:10px;
      font-weight:800;
      font-size:13px;
      cursor:pointer;
      margin-top:4px;
    }
    .alert-save:active{ background:var(--accent2); }
    .alert-status{
      margin-top:8px;
      font-size:11px;
      color:var(--muted);
      text-align:center;
      min-height:16px;
    }
    .alert-clear{
      background:none;
      border:none;
      color:var(--red);
      font-size:11px;
      cursor:pointer;
      padding:0;
      margin-top:6px;
      display:block;
      width:100%;
      text-align:center;
    }

    .empty-state{
      border:1px dashed #4a628f;
      border-radius:14px;
      padding:24px 14px;
      text-align:center;
      color:var(--muted);
      background:rgba(255,255,255,.02);
    }

    #error-overlay{
      display:none;
      position:fixed;
      inset:0;
      z-index:9999;
      background:rgba(4,10,22,.96);
      align-items:center;
      justify-content:center;
      flex-direction:column;
      padding:20px;
      text-align:center;
    }
/* === Privacy strip === */
#privacy-strip {
  flex-shrink: 0;
  background: rgba(61,240,139,.06);
  border-top: 1px solid rgba(61,240,139,.15);
  border-bottom: 1px solid rgba(61,240,139,.15);
  padding: 5px 10px;
}
#privacy-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  max-width: 900px;
  margin: 0 auto;
  font-size: 10px;
  font-weight: 800;
  color: rgba(61,240,139,.8);
  letter-spacing: .04em;
  text-align: center;
}
.privacy-dot {
  color: rgba(61,240,139,.3);
}
@media (max-width: 480px) {
  .privacy-dot { display: none; }
  #privacy-strip-inner { gap: 4px 8px; }
}

/* === Navigation + Favorites buttons === */
.details-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  padding: 0 14px 12px;
}

.nav-btn, .fav-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.nav-btn:hover {
  background: rgba(44,124,255,.12);
  border-color: var(--accent2);
  color: #fff;
}
.fav-btn {
  font-size: 16px;
}
.fav-btn:hover {
  background: rgba(255,184,77,.1);
  border-color: var(--yellow);
  color: var(--yellow);
}
.fav-btn.active {
  background: rgba(255,184,77,.12);
  border-color: var(--yellow);
  color: var(--yellow);
}

/* Favorite station card highlight */
.station-card.is-favorite {
  border-left-color: var(--yellow) !important;
}

/* === RC14: Location Hero === */
.location-hero {
  text-align: center;
  padding: 24px 16px 20px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(25,87,189,.08), rgba(25,87,189,.03));
  border: 1px solid rgba(44,124,255,.2);
  border-radius: 16px;
}
.location-hero-icon {
  font-size: 40px;
  margin-bottom: 8px;
  line-height: 1;
}
.location-hero-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}
.location-hero-sub {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.location-hero-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.hero-btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.hero-btn-primary:active { background: var(--accent2); }
.hero-btn-secondary {
  background: rgba(44,124,255,.1);
  color: var(--accent2);
  border: 1px solid rgba(44,124,255,.3);
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.hero-skip {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px;
}
.location-hero.hidden { display: none; }

/* ============================================================
   RC17 Fixes
   ============================================================ */

/* Karte größer — alle Modi */
#map {
  height: clamp(400px, calc(100vh - 220px), 900px) !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
}

/* Karten-Seite kein Padding damit Karte bis zum Rand geht */
#p-map.page.active {
  padding: 0 !important;
}
#p-map .map-toolbar,
#p-map .poi-panel {
  padding: 6px 8px;
}

/* Dark Mode: Badge + Details-Button Kontrast */
.badge {
  color: var(--text) !important;
}
.badge.open   { background: rgba(61,240,139,.15); color: #3df08b !important; border-color: rgba(61,240,139,.3); }
.badge.closed { background: rgba(255,107,129,.15); color: #ff6b81 !important; border-color: rgba(255,107,129,.3); }
.details-btn {
  color: var(--accent2) !important;
  border-color: rgba(44,124,255,.3) !important;
}

/* Light Mode: Privacy Strip gedämpfter */
[data-theme="light"] #privacy-strip {
  background: #dde6f0;
}
[data-theme="light"] #privacy-strip span {
  color: #4a6080 !important;
}

/* Light Mode: helle Kartenkacheln via JS — Fallback Hintergrund */
[data-theme="light"] #map {
  background: #e8ecf0 !important;
}

/* Light Mode: station cards lesbar */
[data-theme="light"] .station-card {
  background: #ffffff;
  color: var(--text);
}
[data-theme="light"] .station-name  { color: #1a2535; }
[data-theme="light"] .station-price { color: var(--accent); }
[data-theme="light"] .station-address,
[data-theme="light"] .station-place,
[data-theme="light"] .station-distance { color: var(--muted); }

/* Vampir: weiße Texte dämpfen */
[data-theme="vampire"] .station-name { color: #cc8877; }
[data-theme="vampire"] .details-btn  { color: var(--accent2) !important; border-color: #4a1010 !important; }
[data-theme="vampire"] .badge.open   { color: #cc4422 !important; }

/* Theme-Toggle im Light Mode sichtbar */
[data-theme="light"] #theme-toggle {
  background: rgba(255,255,255,.8);
  border-color: #c5d0de;
}

/* ============================================================
   Proximity Filter + Brand Alphabet Picker (RC15)
   ============================================================ */
.prox-card { background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:12px 14px; }
.prox-row { display:flex;align-items:center;gap:10px; }
.prox-label { font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;min-width:72px; }
.prox-slider-wrap { display:flex;align-items:center;gap:10px;flex:1; }
.prox-slider-wrap input[type=range] { flex:1;accent-color:var(--accent);height:4px;cursor:pointer; }
.radius-badge { background:var(--accent);color:#fff;font-size:11px;font-weight:900;border-radius:999px;padding:3px 10px;min-width:42px;text-align:center; }
.brand-picker-toggle { width:100%;display:flex;justify-content:space-between;align-items:center;background:rgba(44,124,255,.07);border:1px solid rgba(44,124,255,.25);border-radius:10px;padding:8px 12px;color:var(--accent2);font-size:13px;font-weight:700;cursor:pointer; }
.brand-picker-toggle:hover { background:rgba(44,124,255,.13); }
.alpha-bar { display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px; }
.alpha-btn { background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:11px;font-weight:800;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s; }
.alpha-btn.has-brands { color:var(--text);border-color:rgba(44,124,255,.3); }
.alpha-btn.active { background:var(--accent);border-color:var(--accent);color:#fff; }
.alpha-btn.disabled { opacity:.25;cursor:default; }
.alpha-brands { display:flex;flex-wrap:wrap;gap:6px;min-height:32px; }
.brand-chip { background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px;font-weight:700;padding:4px 12px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap; }
.brand-chip:hover { background:rgba(44,124,255,.1);color:var(--accent2); }
.brand-chip.selected { background:rgba(44,124,255,.18);border-color:var(--accent);color:#fff; }
.brand-action-btn { background:none;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:11px;font-weight:700;padding:5px 12px;cursor:pointer; }
.brand-action-btn:hover { border-color:var(--accent2);color:var(--accent2); }

/* ============================================================
   Theme System — Light / Dark / Vampire (RC17)
   ============================================================ */
[data-theme="light"] { --bg:#f0f4f8;--panel:#ffffff;--panel2:#e8eef5;--line:#c5d0de;--text:#1a2535;--muted:#5a6a80;--accent:#1957bd;--accent2:#2c7cff;--green:#0a8f4a;--red:#d42b42;--yellow:#c07800; }
[data-theme="dark"]  { --bg:#081225;--panel:#111f36;--panel2:#0d1a2f;--line:#2f466f;--text:#ecf3ff;--muted:#a9bbd6;--accent:#1957bd;--accent2:#2c7cff;--green:#3df08b;--red:#ff6b81;--yellow:#ffb84d; }
[data-theme="vampire"] { --bg:#080000;--panel:#160404;--panel2:#100202;--line:#4a1010;--text:#cc8877;--muted:#7a3322;--accent:#8b1a1a;--accent2:#cc2200;--green:#cc4422;--red:#ff2200;--yellow:#cc5500; }

#theme-toggle { position:fixed;top:8px;right:8px;z-index:8000;display:flex;gap:2px;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:999px;padding:3px 5px;backdrop-filter:blur(8px); }
.theme-btn { background:none;border:none;cursor:pointer;font-size:16px;padding:3px 5px;border-radius:999px;opacity:.45;transition:opacity .15s,background .15s;line-height:1; }
.theme-btn:hover { opacity:.85; }
.theme-btn.active { opacity:1;background:rgba(255,255,255,.12); }
[data-theme="light"] #theme-toggle { background:rgba(255,255,255,.8);border-color:#c5d0de; }
[data-theme="light"] .tabs { background:#e8eef5;border-bottom-color:#c5d0de; }
[data-theme="light"] .tab.active { color:var(--accent);border-bottom-color:var(--accent); }
[data-theme="light"] footer { background:#e0e8f0;color:var(--muted); }
[data-theme="light"] input,[data-theme="light"] select { background:#f8fafc;color:#1a2535;border-color:#c5d0de; }
[data-theme="vampire"] .station-card,[data-theme="vampire"] .section-card,[data-theme="vampire"] .prox-card { background:#130202;border-color:#3a0808; }
[data-theme="vampire"] input,[data-theme="vampire"] select { background:#0d0101;color:#cc8877;border-color:#4a1010; }
[data-theme="vampire"] .tabs { background:#0d0101;border-bottom-color:#4a1010; }
[data-theme="vampire"] .card { background:linear-gradient(180deg,#160404,#100202); }

/* ============================================================
   RC18 Fixes — Karte Overlay + POI Bubbles
   ============================================================ */

/* Map-Container als Positionierungs-Anker */
#p-map.page.active {
  position: relative;
  padding: 0 !important;
  overflow: hidden;
}

/* Karte füllt alles */
#map {
  height: clamp(420px, calc(100vh - 160px), 1000px) !important;
  border-radius: 0 !important;
  border: none !important;
}

/* Toolbar + POI als sticky Overlay oben auf der Karte */
.map-toolbar {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 1000;
  display: flex;
  gap: 6px;
  margin: 0 !important;
  pointer-events: all;
}

.map-toggle {
  flex: 1;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(13,26,47,.88);
  backdrop-filter: blur(8px);
  color: #fff;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.map-toggle.active {
  border-color: var(--accent2);
  background: rgba(44,124,255,.25);
}
[data-theme="light"] .map-toggle {
  background: rgba(255,255,255,.88);
  color: #1a2535;
  border-color: rgba(0,0,0,.15);
}
[data-theme="light"] .map-toggle.active {
  background: rgba(44,124,255,.15);
  border-color: var(--accent);
  color: var(--accent);
}

/* POI panel — see consolidated styles below */

/* Distanzlinien-Label — entfernt, aber Klasse bleibt für Kompatibilität */
.distance-label { display: none; }

/* POI Marker Bubbles — größer, Text zentriert */
.poi-bubble {
  min-width: 28px;
  min-height: 28px;
  padding: 4px 7px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.6);
  line-height: 1;
  text-align: center;
}

/* Theme Variables */
[data-theme="light"]   { --bg:#f0f4f8;--panel:#ffffff;--panel2:#e8eef5;--line:#c5d0de;--text:#1a2535;--muted:#5a6a80;--accent:#1957bd;--accent2:#2c7cff;--green:#0a8f4a;--red:#d42b42;--yellow:#c07800; }
[data-theme="dark"]    { --bg:#081225;--panel:#111f36;--panel2:#0d1a2f;--line:#2f466f;--text:#ecf3ff;--muted:#a9bbd6;--accent:#1957bd;--accent2:#2c7cff;--green:#3df08b;--red:#ff6b81;--yellow:#ffb84d; }
[data-theme="vampire"] { --bg:#080000;--panel:#160404;--panel2:#100202;--line:#4a1010;--text:#cc8877;--muted:#7a3322;--accent:#8b1a1a;--accent2:#cc2200;--green:#cc4422;--red:#ff2200;--yellow:#cc5500; }
#theme-toggle { position:fixed;top:8px;right:8px;z-index:8000;display:flex;gap:2px;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:999px;padding:3px 5px;backdrop-filter:blur(8px); }
.theme-btn { background:none;border:none;cursor:pointer;font-size:16px;padding:3px 5px;border-radius:999px;opacity:.45;transition:opacity .15s,background .15s;line-height:1; }
.theme-btn:hover { opacity:.85; }
.theme-btn.active { opacity:1;background:rgba(255,255,255,.12); }
[data-theme="light"] #theme-toggle { background:rgba(255,255,255,.8);border-color:#c5d0de; }
.badge.open   { color: #3df08b !important; }
.badge.closed { color: #ff6b81 !important; }
.details-btn  { color: var(--accent2) !important; border-color: rgba(44,124,255,.3) !important; }
[data-theme="light"] #privacy-strip { background: #dde6f0; }
[data-theme="light"] #privacy-strip span { color: #4a6080 !important; }
[data-theme="light"] .station-card { background: #ffffff; }
[data-theme="light"] .tabs { background: #e8eef5; border-bottom-color: #c5d0de; }
[data-theme="light"] .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
[data-theme="light"] footer { background: #e0e8f0; }
[data-theme="light"] input, [data-theme="light"] select { background: #f8fafc; color: #1a2535; border-color: #c5d0de; }
[data-theme="light"] .section-card { background: #ffffff; border-color: #c5d0de; }
.loc-suggestions { background: var(--panel) !important; border-color: var(--line) !important; }
.loc-suggestion-item { color: var(--text) !important; }
.loc-suggestion-item:hover { background: rgba(44,124,255,.15) !important; }
.prox-card { background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:12px 14px; }
.prox-row { display:flex;align-items:center;gap:10px; }
.prox-label { font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;min-width:72px; }
.prox-slider-wrap { display:flex;align-items:center;gap:10px;flex:1; }
.prox-slider-wrap input[type=range] { flex:1;accent-color:var(--accent);height:4px;cursor:pointer; }
.radius-badge { background:var(--accent);color:#fff;font-size:11px;font-weight:900;border-radius:999px;padding:3px 10px;min-width:42px;text-align:center; }
.brand-picker-toggle { width:100%;display:flex;justify-content:space-between;align-items:center;background:rgba(44,124,255,.07);border:1px solid rgba(44,124,255,.25);border-radius:10px;padding:8px 12px;color:var(--accent2);font-size:13px;font-weight:700;cursor:pointer; }
.alpha-bar { display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px; }
.alpha-btn { background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:11px;font-weight:800;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer; }
.alpha-btn.has-brands { color:var(--text);border-color:rgba(44,124,255,.3); }
.alpha-btn.active { background:var(--accent);border-color:var(--accent);color:#fff; }
.alpha-btn.disabled { opacity:.25;cursor:default; }
.alpha-brands { display:flex;flex-wrap:wrap;gap:6px;min-height:32px; }
.brand-chip { background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px;font-weight:700;padding:4px 12px;cursor:pointer;white-space:nowrap; }
.brand-chip:hover { background:rgba(44,124,255,.1);color:var(--accent2); }
.brand-chip.selected { background:rgba(44,124,255,.18);border-color:var(--accent);color:#fff; }
.brand-action-btn { background:none;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:11px;font-weight:700;padding:5px 12px;cursor:pointer; }
.tabs { overflow-x: auto; }


/* ============================================================
   RC18 — Karten-Overlay + Theme-Toggle + POI Bubbles
   ============================================================ */

/* Theme-Toggle */
/* theme-toggle ist jetzt statisch im Layout (top-cards-wrap) */
.theme-btn { background:none;border:none;cursor:pointer;font-size:16px;padding:3px 5px;border-radius:999px;opacity:.45;transition:opacity .15s,background .15s;line-height:1; }
.theme-btn:hover { opacity:.85; }
.theme-btn.active { opacity:1;background:rgba(255,255,255,.12); }
[data-theme="light"] #theme-toggle { background:rgba(255,255,255,.85);border-color:#c5d0de; }

/* Theme Variables */
[data-theme="light"]   { --bg:#f0f4f8;--panel:#ffffff;--panel2:#e8eef5;--line:#c5d0de;--text:#1a2535;--muted:#5a6a80;--accent:#1957bd;--accent2:#2c7cff;--green:#0a8f4a;--red:#d42b42;--yellow:#c07800; }
[data-theme="dark"]    { --bg:#081225;--panel:#111f36;--panel2:#0d1a2f;--line:#2f466f;--text:#ecf3ff;--muted:#a9bbd6;--accent:#1957bd;--accent2:#2c7cff;--green:#3df08b;--red:#ff6b81;--yellow:#ffb84d; }
[data-theme="vampire"] { --bg:#080000;--panel:#160404;--panel2:#100202;--line:#4a1010;--text:#cc8877;--muted:#7a3322;--accent:#8b1a1a;--accent2:#cc2200;--green:#cc4422;--red:#ff2200;--yellow:#cc5500; }

/* Karte Overlay-Modus */
#p-map.page.active { position:relative;padding:0 !important;overflow:hidden; }
.map-toolbar { position:absolute;top:8px;left:8px;right:8px;z-index:500;display:flex;gap:6px;margin:0 !important; }
.map-toggle { flex:1;border:1px solid rgba(255,255,255,.2);background:rgba(13,26,47,.88);backdrop-filter:blur(8px);color:#fff;border-radius:10px;padding:9px 12px;font-size:12px;font-weight:800;cursor:pointer; }
.map-toggle.active { border-color:var(--accent2);background:rgba(44,124,255,.25); }
[data-theme="light"] .map-toggle { background:rgba(255,255,255,.88);color:#1a2535;border-color:rgba(0,0,0,.12); }
[data-theme="light"] .map-toggle.active { background:rgba(44,124,255,.15);border-color:var(--accent);color:var(--accent); }
/* POI collapsible panel */
.poi-panel { position:absolute;top:52px;left:8px;right:8px;z-index:500;
  background:rgba(13,26,47,.92);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:10px;
  max-height:0;overflow:hidden;opacity:0;pointer-events:none;
  transition:max-height .3s ease,opacity .2s ease,padding .3s ease; }
.poi-panel.open { max-height:200px;opacity:1;pointer-events:auto;padding:10px; }
.poi-panel-grid { display:flex;gap:6px;flex-wrap:wrap; }
.poi-panel-toggle { max-width:60px !important;flex:0 0 auto !important; }
.poi-panel-toggle.has-active { border-color:var(--green) !important;color:var(--green) !important; }
.poi-btn { border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);border-radius:20px;padding:6px 12px;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s; }
.poi-btn.active { border-color:var(--accent2);background:rgba(44,124,255,.35);color:#fff; }
[data-theme="light"] .poi-panel { background:rgba(255,255,255,.92);border-color:rgba(0,0,0,.1); }
[data-theme="light"] .poi-btn { background:rgba(0,0,0,.04);color:#1a2535;border-color:rgba(0,0,0,.12); }
[data-theme="light"] .poi-btn.active { background:rgba(44,124,255,.15);border-color:var(--accent);color:var(--accent); }
.distance-label { display:none !important; }

/* RC21: Colored station pins */
.station-pin { width:28px;height:38px;position:relative;cursor:pointer; }
.station-pin svg { width:100%;height:100%;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.station-pin.best svg .pin-fill { fill:var(--green); }
.station-pin.mid svg .pin-fill { fill:var(--yellow); }
.station-pin.worst svg .pin-fill { fill:var(--red); }

/* RC21: Favorite marker pulse */
.station-pin.is-fav { z-index:600 !important; }
.station-pin.is-fav::before {
  content:'';position:absolute;top:-4px;left:-4px;right:-4px;bottom:6px;
  border:2px solid var(--yellow);border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  animation:fav-pulse 2s ease-in-out infinite;
}
@keyframes fav-pulse {
  0%,100% { opacity:.4;transform:rotate(-45deg) scale(1); }
  50% { opacity:1;transform:rotate(-45deg) scale(1.12); }
}

/* POI source hint inside panel */
.poi-panel .poi-source-hint { font-size:9px;color:var(--muted);margin-top:8px;text-align:center; }

/* RC21: Navigation button in popup */
.popup-nav-btn { display:inline-flex;align-items:center;gap:4px;background:rgba(44,124,255,.15);
  border:1px solid rgba(44,124,255,.3);border-radius:8px;padding:5px 10px;color:var(--accent2);
  font-size:11px;font-weight:800;cursor:pointer;margin-top:6px;text-decoration:none; }
.popup-nav-btn:hover { background:rgba(44,124,255,.25); }

/* Light Mode */
.loc-suggestions { background:var(--panel) !important;border-color:var(--line) !important; }
.loc-suggestion-item { color:var(--text) !important;border-bottom-color:var(--line) !important; }
.loc-suggestion-item:hover { background:rgba(44,124,255,.15) !important; }
.badge.open { color:#3df08b !important; }
.badge.closed { color:#ff6b81 !important; }
.details-btn { color:var(--accent2) !important;border-color:rgba(44,124,255,.3) !important; }
[data-theme="light"] .station-card { background:#fff; }
[data-theme="light"] .section-card { background:#fff;border-color:#c5d0de; }
[data-theme="light"] .tabs { background:#e8eef5;border-bottom-color:#c5d0de; }
[data-theme="light"] .tab.active { color:var(--accent);border-bottom-color:var(--accent); }
[data-theme="light"] footer { background:#e0e8f0; }
[data-theme="light"] input,[data-theme="light"] select { background:#f8fafc;color:#1a2535;border-color:#c5d0de; }
[data-theme="light"] #privacy-strip { background:#dde6f0; }
[data-theme="light"] #privacy-strip span { color:#4a6080 !important; }

/* Proximity Filter + Brand Picker */
.prox-card { background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:12px 14px; }
.prox-row { display:flex;align-items:center;gap:10px; }
.prox-label { font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;min-width:72px; }
.prox-slider-wrap { display:flex;align-items:center;gap:10px;flex:1; }
.prox-slider-wrap input[type=range] { flex:1;accent-color:var(--accent);height:4px;cursor:pointer; }
.radius-badge { background:var(--accent);color:#fff;font-size:11px;font-weight:900;border-radius:999px;padding:3px 10px;min-width:42px;text-align:center; }
.brand-picker-toggle { width:100%;display:flex;justify-content:space-between;align-items:center;background:rgba(44,124,255,.07);border:1px solid rgba(44,124,255,.25);border-radius:10px;padding:8px 12px;color:var(--accent2);font-size:13px;font-weight:700;cursor:pointer; }
.alpha-bar { display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px; }
.alpha-btn { background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:11px;font-weight:800;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer; }
.alpha-btn.has-brands { color:var(--text);border-color:rgba(44,124,255,.3); }
.alpha-btn.active { background:var(--accent);border-color:var(--accent);color:#fff; }
.alpha-btn.disabled { opacity:.25;cursor:default; }
.alpha-brands { display:flex;flex-wrap:wrap;gap:6px;min-height:32px; }
.brand-chip { background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px;font-weight:700;padding:4px 12px;cursor:pointer;white-space:nowrap; }
.brand-chip:hover { background:rgba(44,124,255,.1);color:var(--accent2); }
.brand-chip.selected { background:rgba(44,124,255,.18);border-color:var(--accent);color:#fff; }
.brand-action-btn { background:none;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:11px;font-weight:700;padding:5px 12px;cursor:pointer; }
.tabs { overflow-x:auto; }

/* ============================================================
   RC18.1 — Theme-Toggle physisch über Kacheln
   ============================================================ */
.top-cards-wrap {
  display: flex;
  align-items: center;
  padding: 8px 8px 0;
  gap: 8px;
}
.top-cards-wrap .top-cards {
  flex: 1;
  padding: 0;
  margin: 0;
}
#theme-toggle {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 5px;
  flex-shrink: 0;
}
[data-theme="light"] #theme-toggle {
  background: rgba(0,0,0,.05);
  border-color: #c5d0de;
}
.theme-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
  border-radius: 8px;
  opacity: .4;
  transition: opacity .15s, background .15s;
  line-height: 1;
}
.theme-btn:hover { opacity: .85; }
.theme-btn.active {
  opacity: 1;
  background: rgba(255,255,255,.15);
}
[data-theme="light"] .theme-btn.active {
  background: rgba(44,124,255,.12);
}

/* Light Mode: Offen-Button + Alarm-Button lesbar */
[data-theme="light"] .filter-open-wrap {
  background: rgba(0,0,0,.06);
  border-color: #c5d0de;
  color: #1a2535;
}
[data-theme="light"] .filter-open-wrap.on {
  border-color: var(--green);
  color: var(--green);
  background: rgba(10,143,74,.08);
}
[data-theme="light"] .alert-btn {
  background: rgba(0,0,0,.06);
  border-color: #c5d0de;
  color: #1a2535;
}
[data-theme="light"] .alert-btn.active {
  color: var(--yellow);
  border-color: var(--yellow);
}
[data-theme="light"] .alert-btn.has-filters {
  color: var(--accent2);
  border-color: var(--accent2);
  background: rgba(44,124,255,.08);
}
[data-theme="light"] .filters {
  background: #e8eef5;
}

/* OSM POI Quelle — kleiner Hinweis */
.poi-source-hint {
  position: absolute;
  bottom: 6px;
  left: 8px;
  z-index: 500;
  font-size: 10px;
  color: rgba(255,255,255,.5);
  pointer-events: none;
}
[data-theme="light"] .poi-source-hint {
  color: rgba(0,0,0,.4);
}

/* ============================================================
   RC20 — Neues Top-Layout: Top-Bar + Fuel-Cards
   ============================================================ */

/* Top Bar: Melden + Modus (schmal, volle Breite) */
.top-bar {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 12px 0;
  max-width: 900px;
  margin: 0 auto;
}
.top-bar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  min-width: 120px;
}
.top-bar-btn:hover {
  border-color: var(--accent2);
  background: rgba(44,124,255,.1);
}
.top-bar-icon { font-size: 16px; }
.top-bar-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

/* Report Button Highlight */
#report-btn:hover {
  border-color: var(--yellow);
  background: rgba(255,184,77,.08);
}

/* Fuel Cards: 3 Kacheln - BREITER */
.fuel-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px 12px;
  max-width: 900px;
  margin: 0 auto;
}

/* Lang switcher im Footer */
.lang-switch {
  display: inline-flex;
  gap: 6px;
}
.lang-switch a {
  font-size: 16px;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity .15s;
}
.lang-switch a:hover,
.lang-switch a.lang-active {
  opacity: 1;
}

/* Light Mode Anpassungen */
[data-theme="light"] .top-bar-btn {
  background: linear-gradient(180deg, #ffffff, #f0f4f8);
  border-color: #c5d0de;
  color: #1a2535;
}
[data-theme="light"] .top-bar-btn:hover {
  background: rgba(44,124,255,.08);
  border-color: var(--accent2);
}
[data-theme="light"] #report-btn:hover {
  border-color: var(--yellow);
  background: rgba(192,120,0,.08);
}

/* Alte .top-cards wird jetzt nur noch für Fuel-Cards genutzt */
.top-cards {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* RC20: Theme-Toggle ist jetzt in .top-bar, nicht mehr als Kachel */
#theme-toggle {
  cursor: pointer;
}
#theme-toggle:hover {
  border-color: var(--accent2);
}

.theme-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 2px 4px;
  border-radius: 6px;
  opacity: .35;
  transition: opacity .15s, background .15s;
  line-height: 1;
  width: 100%;
  text-align: center;
}
.theme-btn:hover { opacity: .8; }
.theme-btn.active {
  opacity: 1;
  background: rgba(255,255,255,.12);
}
[data-theme="light"] .theme-btn.active {
  background: rgba(44,124,255,.12);
}

/* top-cards-wrap nicht mehr nötig */
.top-cards-wrap { display: contents; }

/* RC20: Theme-Icon Styling für Top-Bar */
#theme-icon { line-height: 1; font-size: 16px; }
#theme-label { font-size: 11px; }

/* ============================================================
   RC20.1 — Loading Overlay mit Animation
   ============================================================ */
#loading-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9998;
  background: rgba(8,18,37,.95);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px 40px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  transition: opacity .3s, visibility .3s;
}
#loading-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.loading-spinner {
  font-size: 48px;
  animation: loadingSpin 1.5s ease-in-out infinite;
}
@keyframes loadingSpin {
  0%, 100% { transform: rotate(-10deg) scale(1); }
  50% { transform: rotate(10deg) scale(1.1); }
}
.loading-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  max-width: 240px;
  line-height: 1.4;
}
.loading-source {
  font-size: 12px;
  opacity: 0.5;
  margin-top: 4px;
  cursor: help;
}
[data-theme="light"] #loading-overlay {
  background: rgba(255,255,255,.97);
  border-color: #c5d0de;
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
}

/* ============================================================
   RC20.1 — Light Mode Fixes für Fakten-Seite
   ============================================================ */
[data-theme="light"] .section-card {
  background: #fff;
  border-color: #c5d0de;
}
[data-theme="light"] .section-card h3,
[data-theme="light"] .section-card .calc-title {
  color: #1a2535;
}
[data-theme="light"] .detail-box {
  background: #f5f8fc;
  border-color: #c5d0de;
}
[data-theme="light"] .detail-value {
  color: #1a2535;
}
/* Fakten-Seite spezifisch */
[data-theme="light"] #oil-price-val {
  color: var(--green);
}
[data-theme="light"] #tax-breakdown {
  color: #1a2535;
}
[data-theme="light"] #tax-breakdown span {
  color: #1a2535;
}
[data-theme="light"] #tax-breakdown .detail-sub,
[data-theme="light"] #tax-breakdown [style*="color:var(--muted)"] {
  color: #5a6a80 !important;
}

/* Lang-Switcher Styling */
.lang-switch {
  display: inline-flex;
  gap: 4px;
}
.lang-switch a {
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 4px;
  transition: all .15s;
}
.lang-switch a:hover {
  color: var(--text);
  background: rgba(255,255,255,.1);
}
.lang-switch a.lang-active {
  color: var(--accent2);
  background: rgba(44,124,255,.15);
}
[data-theme="light"] .lang-switch a:hover {
  background: rgba(0,0,0,.05);
}
[data-theme="light"] .lang-switch a.lang-active {
  background: rgba(44,124,255,.1);
}