/* =========================================================
   Glas-Variante (Test) — schwebende Kopfzeile als Pille,
   Karten, Reiter und Leisten aus mattiertem Glas.
   Farben bleiben unverändert; nur Flächen, Unschärfe, Rand,
   Rundung und Schatten. Abschalten: GLASS = False in build.py.
   ========================================================= */
:root{
  --nav-h: 76px;            /* Pille 58px + Abstand oben */
  --r-lg: 26px;
  --glass:        rgba(255,255,255,.62);
  --glass-strong: rgba(252,251,249,.8);
  --glass-line:   rgba(255,255,255,.75);
  --glass-dark:   rgba(255,255,255,.08);
  --glass-dark-line: rgba(255,255,255,.18);
  --glass-blur: saturate(1.6) blur(20px);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(19,26,43,.05), 0 22px 48px -22px rgba(19,26,43,.32);
}

/* ---------- Kopfzeile: schwebende Glas-Pille ---------- */
.nav, .nav.is-solid{ background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:10px clamp(10px, 1.6vw, 22px) 0; }
.nav__in{
  height:58px; border-radius:999px; padding:0 8px 0 clamp(18px, 2vw, 26px);
  background:var(--glass-strong); border:1px solid var(--glass-line);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
  transition:background .35s var(--ease), border-color .35s, box-shadow .35s;
}
.nav__actions .btn{ min-height:44px; }
.nav__burger{ margin-right:2px; }
/* über dem dunklen Startfoto: dunkles Glas */
.on-dark .nav:not(.is-solid) .nav__in{
  background:var(--glass-dark); border-color:var(--glass-dark-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 22px 48px -24px rgba(0,0,0,.5);
}

/* ---------- Knöpfe als Pillen ---------- */
.btn{ border-radius:999px; }
.btn--line{ background:rgba(255,255,255,.4); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }

/* ---------- Schwebende Info-Karten ---------- */
.fcard{
  background:var(--glass); border:1px solid var(--glass-line); border-radius:22px;
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow); padding:16px 18px;
}

.panelcard{
  background:var(--glass); border:1px solid var(--glass-line);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow);
}

/* ---------- Reiter als Glas-Segmentschalter ---------- */
.journey__tabs{
  display:flex; width:max-content; max-width:100%; margin-left:auto; margin-right:auto; gap:4px; padding:5px;
  border-radius:999px; background:rgba(19,26,43,.05); border:1px solid rgba(19,26,43,.06);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
}
.journey--sticky .journey__tabs{ margin-left:auto; margin-right:auto; }
/* Handy und Tablet (.journey--flow): der Schalter bleibt unter dem Kopf stehen, mit dichterem Glas über dem Text */
.journey--flow .journey__tabs{
  top:calc(var(--head-h) + 8px); margin-left:auto; margin-right:auto; padding:5px; overflow:visible; justify-content:center;
  background:rgba(252,251,249,.84); box-shadow:0 10px 30px -14px rgba(19,26,43,.28);
}
@media (max-width: 720px){
  .journey--flow .journey__tabs{ padding:4px; justify-content:space-between; }
  .journey--flow .journey__tabs button{ flex:1 1 auto; }
}
.journey__tabs button{ border:0; border-radius:999px; padding:10px 20px; align-items:center; transition:background .3s var(--ease), color .25s, box-shadow .3s; }
.journey__tabs button[aria-selected="true"]{ background:#fff; box-shadow:0 1px 2px rgba(19,26,43,.08), 0 8px 20px -10px rgba(19,26,43,.3); }

/* ---------- Kästen und Karten ---------- */
.box{ background:rgba(255,255,255,.72); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); }
.press-card{ border:1px solid var(--glass-line); box-shadow:var(--glass-shadow); }
.pill:not(.status){ background:rgba(19,26,43,.05); border:1px solid rgba(19,26,43,.06); }

/* ---------- Mobiles Menü und Handy-Leiste ---------- */
.menu{ background:rgba(252,251,249,.86); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); }
.dock{ background:var(--glass-strong); border:1px solid var(--glass-line); border-radius:999px; backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); }

@media (max-width: 960px){
  .nav__in{ height:54px; }
  :root{ --nav-h: 70px; }
}
@media (max-width: 720px){
  .nav, .nav.is-solid{ padding:8px 10px 0; }
  .journey__tabs{ width:100%; justify-content:space-between; flex-wrap:nowrap; gap:2px; padding:4px; }
  .journey__tabs button{ padding:9px 5px; flex:1 1 auto; min-width:0; justify-content:center; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .journey__tabs button small{ display:none; }
}

/* Ohne Unschärfe (ältere Browser): deckender, damit Text lesbar bleibt */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav__in, .fcard, .panelcard, .box, .dock{ background:rgba(252,251,249,.97); }
  .on-dark .nav:not(.is-solid) .nav__in{ background:rgba(19,26,43,.7); }
}