/* Gemeinsames Glas-Design (schwebende Leisten und Knöpfe) für alle Demos.
   Jede Demo setzt nur ihre Farben: --glass-tint, --glass-fg, --glass-accent, --glass-edge, --glass-lens. */
:root {
  --glass-tint: rgba(255, 255, 255, .58);
  --glass-solid: #f4f4f6;
  --glass-fg: #1c1c1e;
  --glass-accent: #0a84ff;
  --glass-edge: rgba(255, 255, 255, .55);
  --glass-lens: rgba(255, 255, 255, .6);
  --glass-lift: 0px; /* Platz über dem Netlify-Badge, setzt glass.js */
  --glass-bar-h: 64px;
  --glass-gap: 12px;
}
/* Netlify blendet unten rechts einen Badge ein (ca. 200 × 52 px). Auf schmalen Bildschirmen schweben die Leisten darüber. */
html.has-badge { --glass-lift: 52px; }
@media (min-width: 860px) { html.has-badge { --glass-lift: 0px; } }
/* Platz am Seitenende, damit der Badge keinen Footer oder kein Impressum verdeckt */
html.has-badge body { padding-bottom: 56px; }

/* Platz am Seitenende, damit schwebende Leiste, „Design anpassen“-Knopf, Netlify-Badge und
   Safe-Area das Ende der Seite nie verdecken. Eine Demo schaltet das mit <html class="glass-pad"> ein
   (Seiten mit Tab-Leiste zusätzlich mit glass-pad-bar). */
:root {
  /* Pill-Seiten: 16 px Abstand + 44 px Knopf + Luft */
  --glass-space: calc(16px + 44px + 24px + var(--glass-lift) + env(safe-area-inset-bottom));
}
html.glass-pad-bar {
  /* Tab-Leiste + 3 Abstände (Leiste, Knopf darüber) + Knopf + Luft */
  --glass-space: calc(var(--glass-bar-h) + 3 * var(--glass-gap) + 44px + 24px + var(--glass-lift) + env(safe-area-inset-bottom));
}
html.glass-pad body { padding-bottom: var(--glass-space); }

.glass {
  color: var(--glass-fg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), var(--glass-tint);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 1px rgba(0, 0, 0, .06),
    0 18px 40px -14px rgba(0, 0, 0, .4),
    0 2px 8px rgba(0, 0, 0, .08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Tab-Leiste: schwebende Kapsel unten in der Mitte */
.glass-bar {
  position: fixed; z-index: 60;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--glass-gap) + env(safe-area-inset-bottom) + var(--glass-lift));
  width: min(440px, calc(100% - 2 * var(--glass-gap)));
  height: var(--glass-bar-h);
  padding: 6px; border-radius: 999px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  transition: bottom .3s;
}
.glass-bar > button,
.glass-bar > a {
  position: relative; z-index: 1;
  min-width: 0; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; border-radius: 999px; background: none; color: inherit;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .01em; line-height: 1.1;
  text-decoration: none; cursor: pointer; opacity: .7;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .2s, color .2s;
}
.glass-bar svg { width: 24px; height: 24px; flex: none; }
.glass-bar > [aria-selected="true"],
.glass-bar > [aria-current="true"] { opacity: 1; color: var(--glass-accent); }
.glass-bar > :active { transform: scale(.94); }
.glass-bar :focus-visible { outline: 2px solid var(--glass-accent); outline-offset: -2px; }

/* Linse unter dem aktiven Tab, gleitet beim Wechsel */
.glass-lens {
  position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; opacity: 0;
  border-radius: 999px; pointer-events: none;
  background: var(--glass-lens);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 14px -6px rgba(0, 0, 0, .3);
  transition: left .45s cubic-bezier(.3, 1.35, .5, 1), top .45s cubic-bezier(.3, 1.35, .5, 1), width .3s, height .3s, opacity .2s;
}

/* Einzelner Glas-Knopf, z. B. „Alle Demos“ */
.glass-pill {
  position: fixed; z-index: 60;
  left: 16px; bottom: calc(16px + env(safe-area-inset-bottom) + var(--glass-lift));
  padding: 11px 18px; border-radius: 999px; min-height: 44px;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 14px; line-height: 1.2; text-decoration: none;
  transition: bottom .3s;
}
.glass-pill:focus-visible { outline: 2px solid var(--glass-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .glass-lens, .glass-bar, .glass-pill { transition: none; }
}