/* =================== THEME =================== */
:root{
  /* Core palette (Dark default) */
  --bg:#0b1220; --fg:#e5e7eb; --muted:#94a3b8;
  --card:#111827; --chip:#1f2937; --chipA:#2563eb; --link:#93c5fd; --hair:rgba(148,163,184,.22);
  --accent:#2563eb; --ok:#10b981; --warn:#f59e0b; --bad:#ef4444;
  --diesel:#0ea5e9; --e5:#22c55e; --e10:#a855f7;

  /* rhythm */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --radius:.6rem;

  /* component sizing */
  --tabbar-h:56px;
}

html[data-theme="light"]{
  --bg:#f6f7fb; --fg:#0f172a; --muted:#475569;
  --card:#ffffff; --chip:#e2e8f0; --chipA:#111827; --link:#2563eb; --hair:rgba(15,23,42,.10);
  --accent:#2563eb; --ok:#059669; --warn:#b45309; --bad:#dc2626;
  --diesel:#0284c7; --e5:#16a34a; --e10:#7c3aed;
}

*{box-sizing:border-box}
html,body{height:100%}
html{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif;
  font-size:clamp(14px,1.1vw+12px,16px);
}
body{
  margin:0; background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased; line-height:1.6;
  padding-top: env(safe-area-inset-top);
}

a{color:var(--link)} a:hover{text-decoration:underline}

/* =================== LAYOUT =================== */
.container{max-width:960px; margin:0 auto; padding: 0 1rem clamp(14px,4vw,22px);}
@media (max-width:600px){
  .container{padding:12px 0;}
}

.header{padding: 0.5rem 1rem; border-bottom:1px solid var(--hair)}
.main{padding: 12px 1rem calc(var(--tabbar-h) + 40px);}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
h1{font-size:1.1rem;margin:0}
.top-actions{display:flex;align-items:center;gap:8px}
.country{font-weight:600}

/* =================== BUTTONS/STATUS =================== */
.btn{border:1px solid var(--hair);background:var(--card);color:var(--fg);padding:.45rem .7rem;border-radius:var(--radius);cursor:pointer}
.btn-icon{border:1px solid var(--hair);background:transparent;border-radius:.55rem;padding:.35rem .5rem;cursor:pointer}
.btn-icon:active{transform:translateY(1px)}

.install-btn{
  background:var(--accent); color:#fff; font-weight:600; border:none;
  border-radius:var(--radius); padding:.6rem 1rem; cursor:pointer;
  font-size:1rem; display:flex; align-items:center; gap:6px; transition:background .2s; margin-bottom:8px;
}
.install-btn:hover{ background:#1d4ed8 }

.dot{width:.6rem;height:.6rem;border-radius:50%;background:#9aa4b2}
.dot.online{background:var(--ok)} .dot.offline{background:var(--bad)}

/* =================== CHIPS & BADGES =================== */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chips.scroll-x{overflow:auto;white-space:nowrap;padding-bottom:4px}

.chip{
  border:none;background:var(--chip);color:var(--fg);
  padding:.34rem .65rem;border-radius:999px;cursor:pointer;font-size:.86rem;line-height:1.3
}
.chip.active{
  background:var(--chipA); color:#fff; box-shadow:inset 0 1px 2px rgba(0,0,0,.25)
}

.badges{display:flex;gap:6px;flex-wrap:wrap;margin:.35rem 0}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:.26rem .56rem; border-radius:999px; background:var(--chip);
  border:1px solid var(--hair); font-size:.86rem; line-height:1.35
}
.badge .dot{width:.5rem;height:.5rem;border-radius:50%}
.badge.diesel .dot{background:var(--diesel)}
.badge.e5 .dot{background:var(--e5)}
.badge.e10 .dot{background:var(--e10)}

/* =================== BLOCKS / ROWS =================== */
.row{
  border:1px solid var(--hair); border-radius:var(--radius);
  border-radius: 0.6rem;
  padding: 0.9rem 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  background:var(--card); margin-bottom:1.1rem;
}
.meta{display:flex;justify-content:space-between;gap:12px;padding:8px 0;color:var(--muted);border-top:1px solid var(--hair)}
.meta-line{font-size:.88rem;color:var(--muted);margin-top:6px;line-height:1.45}

.kv{
  display:grid; grid-template-columns:minmax(120px,180px) 1fr; gap:.5rem 1rem;
}
.kv div:nth-child(odd){color:var(--muted)}
@media (max-width:480px){
  .kv{grid-template-columns:1fr}
  .kv div:nth-child(odd){margin-top:.4rem}
}

/* =================== STAGE CARD =================== */
.stage-card{
  background:var(--card); border:1px solid var(--hair); border-radius:var(--radius);
  padding:var(--space-4); margin-bottom:var(--space-4);
}
.stage-card h3,
.row h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 .5rem 0;
  line-height: 1.3;
  color: var(--fg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.checkin-box{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:.45rem .8rem; padding-top:.6rem; font-size:.9rem;
}

.hairline {
  border-bottom: 1px solid var(--hair);
  margin: .4rem 0;
}

.stage-card .transit{font-size:.85rem;color:var(--muted)}
.stage-card a{color:var(--link); text-decoration:none}
.stage-card a:hover{text-decoration:underline}

/* =================== LISTS =================== */
.list{display:grid;gap:8px}
.row .links{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

/* =================== LIMITS =================== */
.limits{display:flex;gap:8px;flex-wrap:wrap}
.limit{
  background:var(--chip); border:1px solid var(--hair); color:var(--fg);
  padding:.24rem .56rem; border-radius:999px; font-size:.86rem; line-height:1.35
}

/* =================== TABBAR =================== */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; height:var(--tabbar-h);
  background:var(--card); border-top:1px solid var(--hair);
  display:flex; justify-content:space-around; align-items:center; z-index:50;
  padding-left:clamp(8px,3vw,18px); padding-right:clamp(8px,3vw,18px);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 -10px 26px rgba(0,0,0,.18);
}
html[data-theme="dark"] .tabbar{
  background:#0f1628; border-top:1px solid rgba(148,163,184,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 -12px 30px rgba(0,0,0,.5);
}

.tab{
  background:transparent; border:none; color:var(--fg); font-size:.92rem;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 12px; border-radius:var(--radius);
  transition:background .15s, box-shadow .15s, transform .05s;
  min-height:44px;
}
.tab span{font-size:.72rem}
.tab.active{ background:var(--chip); box-shadow:inset 0 2px 5px rgba(0,0,0,.35); font-weight:600 }
.tab:active{ transform:translateY(1px) }

/* =================== TOAST / FAB =================== */
.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--tabbar-h) + 72px);
  background:var(--card); border:1px solid var(--hair); padding:.5rem .75rem;
  border-radius:var(--radius); box-shadow:0 6px 16px rgba(0,0,0,.18); color:var(--fg);
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.toast.show{opacity:1}

.fab{
  position:fixed; right:18px; bottom:calc(var(--tabbar-h) + 16px);
  width:44px; height:44px; border-radius:999px; border:none;
  background:var(--accent); color:#fff; font-size:1.1rem; cursor:pointer; z-index:60;
  box-shadow:0 8px 20px rgba(0,0,0,.25)
}
.fab.spin{animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* =================== PANES =================== */
.pane{display:none}
.pane.active{display:block}

/* =================== REMINDER / COUNTDOWN =================== */
#reminderRow{line-height:1.5; align-items:center}
#reminderRow input[type="checkbox"]{transform:translateY(1px)}
.reminder-flex{display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap}
.reminder-left{display:flex; align-items:center; gap:.6rem}
#checkinCountdown {font-weight:600;text-align:right;flex:1;}
.daytools-status{font-weight:600; margin-bottom:.35rem; color:var(--fg)}

/* =================== NOTES / COSTS =================== */
.note-card,.cost-card{
  border:1px solid var(--hair); background:var(--card); border-radius:var(--radius); padding:.75rem;
}
.input-grid{
  display:grid; grid-template-columns:1fr 120px 120px auto; gap:.5rem;
}
@media (max-width:600px){ .input-grid{grid-template-columns:1fr 1fr} }

input[type="text"],input[type="number"],select,textarea{
  width:100%; background:var(--chip); color:var(--fg);
  border:1px solid var(--hair); border-radius:.5rem; padding:.5rem .6rem;
}
.btn-small{
  border:1px solid var(--hair); background:var(--accent); color:#fff;
  padding:.45rem .7rem; border-radius:var(--radius); cursor:pointer;
}
.cost-list{margin-top:.6rem}
.cost-item{
  display:flex; justify-content:space-between; gap:8px;
  padding:.4rem .5rem; border-bottom:1px solid var(--hair);
}
.cost-item .muted{color:var(--muted); font-size:.9rem}
.cost-total{margin-top:.6rem; font-weight:600}

/* =================== PHRASES =================== */
.phrases-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1rem;
}
@media (max-width:600px){ .phrases-grid{grid-template-columns:1fr} }
.phrase-card{
  background:var(--chip); border:1px solid var(--hair); border-radius:.5rem; padding:.6rem .8rem;
}
.phrase-de{font-weight:700; color:var(--fg); margin-bottom:.2rem}
.phrase-local{color:var(--muted); font-size:.92rem}

/* =================== DISCLAIMER MODAL =================== */
#disclaimerModal{display:none}
.disclaimer-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; z-index:9999;
}
.disclaimer-box{
  background:var(--card); color:var(--fg); max-width:90%;
  padding:1.2rem; border-radius:.8rem; box-shadow:0 6px 18px rgba(0,0,0,.4); text-align:left;
}
.disclaimer-box h2{margin-top:0; font-size:1.2rem}
.disclaimer-actions{margin-top:1rem; text-align:center}
.disclaimer-actions .btn{
  background:var(--accent); color:#fff; border:none; padding:.5rem 1rem; border-radius:.5rem; cursor:pointer;
  transition:transform .12s ease, opacity .12s ease;
}
.disclaimer-actions .btn:hover{opacity:.9}
.disclaimer-actions .btn:active{transform:translateY(1px); opacity:.9}

@keyframes modalFadeIn{from{opacity:0} to{opacity:1}}
@keyframes modalScaleIn{0%{transform:scale(.96);opacity:0} 100%{transform:scale(1);opacity:1}}

#disclaimerModal.show .disclaimer-backdrop{animation:modalFadeIn .22s ease-out both}
#disclaimerModal.show .disclaimer-box{animation:modalScaleIn .22s cubic-bezier(.2,.7,.3,1) both; will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){
  #disclaimerModal.show .disclaimer-backdrop,
  #disclaimerModal.show .disclaimer-box,
  .disclaimer-actions .btn{animation:none!important; transition:none!important}
}

/* =================== MOBILE TWEAKS =================== */
@media (max-width:600px){
  .tabbar{ padding-left:12px; padding-right:12px }
  .fab{ right:20px }
  .container{ margin: 0 auto; padding: 0.5rem 1rem 0.5rem;}
}

@media (max-width: 400px) {
  .main::after {
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 36px);
  }
}

.tabbar { z-index: 999; }

.main::after {
  content: "";
  display: block;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 28px);
}

/* ===== CARBAGE-RUN GRUNGE SKIN (additiv, theme-sicher) ===== */
body.theme-grunge {
  /* keinerlei --bg/--fg/--chipA überschreiben! */
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, color-mix(in oklab, var(--link) 16%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.08), transparent 20%),
    var(--bg);
  background-attachment: fixed;
}
body.theme-grunge::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .18; mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'>\
        <filter id='n'>\
          <feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/>\
          <feColorMatrix type='saturate' values='0'/>\
          <feComponentTransfer><feFuncA type='table' tableValues='0 0 .08 .16 .08 0'/></feComponentTransfer>\
        </filter>\
        <rect width='100%' height='100%' filter='url(%23n)'/>\
      </svg>");
  background-size: 160px 160px;
}
body.theme-grunge .row,
body.theme-grunge .stage-card,
body.theme-grunge .note-card,
body.theme-grunge .cost-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(0,0,0,.04)), var(--card);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 4px 12px rgba(0,0,0,.25);
}

body.theme-grunge .chip { border: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); }
body.theme-grunge .tabbar {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12)), var(--card);
  border-top: 1px solid var(--hair);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 -14px 32px rgba(0,0,0,.35);
}
body.theme-grunge .stage-card h3,
body.theme-grunge .row h3 {
  margin-top: 0;
  margin-bottom: .55rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-weight: 800;
}

.weather-card {
  display: flex;
  justify-content: space-around;
  gap: .5rem;
  padding: .5rem;
  border: 1px solid var(--hair);
  border-radius: .6rem;
  font-size: .9rem;
  text-align: center;
}

.weather-day {
  flex: 1;
  min-width: 70px;
}

.weather-day .date {
  font-weight: 600;
  margin-bottom: .3rem;
}

.weather-day .icon {
  font-size: 1.4rem;
  margin: .2rem 0;
}

.weather-day .temp {
  font-weight: 500;
}

.weather-day .rain {
  font-size: .8rem;
  color: var(--muted);
}

/* Highlight für heutigem Stage-Tag */
.weather-day.today {
  border: 2px solid var(--accent);
  border-radius: .5rem;
  background: var(--accent-soft, rgba(0,0,0,0.05));
}

/* --- Progress + Done-Marker --- */
.progress {
  display:flex; align-items:center; gap:.5rem;
  font-size:.9rem; color:var(--muted); margin:.25rem 0 .5rem;
}
.progress-bar {
  height:6px; width:100%; max-width:220px; border-radius:999px;
  background:var(--chip); border:1px solid var(--hair); overflow:hidden;
}
.progress-bar > span { display:block; height:100%; background:var(--ok); }

/* Route-Chips: abgehakt */
.chip.done { position:relative; padding-right:1.6rem; }
.chip.done::after{
  content:"✓"; position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  font-weight:700; opacity:.9;
}

/* Toggle im Overview */
.done-toggle { margin:.4rem 0 .2rem; display:flex; align-items:center; gap:.5rem; }

/* Progressbar-Container */
#progressbar {
  width: 100%;
  height: 6px;
  background: var(--hair);
  border-radius: 4px;
  overflow: hidden;
  margin: 0.5rem 0 0; /* etwas Luft nach den Chips */
}

/* Gefüllter Teil */
#progressbar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #16a34a, #4ade80); /* grün Verlauf */
  transition: width 0.4s ease;
}

/* Progress-Wrapper mit Zähler */
#progressbar.progress {
  display:block; /* JS schaltet auf block, HTML darf initial none haben */
  margin-top:.5rem;
}
#progressbar .progress-bar{
  width:100%; height:6px; background:var(--hair); border-radius:4px; overflow:hidden;
}
#progressbar-fill{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, #16a34a, #4ade80);
  transition: width .35s ease;
}
#routeProgressText{
  margin-top:.25rem; font-size:.85rem; color:var(--muted); text-align:right;
}