/* ==========================
   iPhone-ish Liquid Glass UI
   ========================== */
:root{
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;

  --text: #e5e7eb;
  --muted: #9ca3af;

  --bg1: #111827;
  --bg2: #1f2937;

  --glass-shadow: 0 18px 60px rgba(0,0,0,0.45);
  --glass-border: rgba(255,255,255,0.08);

  --glass-fill: rgba(255,255,255,0.02);
  --glass-gloss: linear-gradient(
    135deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.04) 35%,
    rgba(255,255,255,0.02) 65%,
    rgba(255,255,255,0.01) 100%
  );

  --grain: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.01) 0px,
    rgba(255,255,255,0.01) 1px,
    transparent 2px,
    transparent 4px
  );
}

html[data-theme="light"]{
  --text: #1f2937;
  --muted: #6b7280;

  --bg1: #f9fafb;
  --bg2: #e5e7eb;

  --glass-shadow: 0 14px 40px rgba(0,0,0,0.15);
  --glass-border: rgba(0,0,0,0.06);
  --glass-fill: rgba(255,255,255,0.30);

  --glass-gloss: linear-gradient(
    135deg,
    rgba(255,255,255,0.50) 0%,
    rgba(255,255,255,0.20) 50%,
    rgba(255,255,255,0.05) 100%
  );

  --grain: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.01) 0px,
    rgba(0,0,0,0.01) 1px,
    transparent 2px,
    transparent 4px
  );
}
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body.app{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text);
  overflow-x: hidden;

  background:
    radial-gradient(circle at 18% 18%, rgba(107,114,128,0.15) 0%, transparent 55%),
    radial-gradient(circle at 85% 82%, rgba(156,163,175,0.10) 0%, transparent 55%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
}
/* Platz für Bottom-Bar */
.page-wrap{ min-height: 100vh; padding-bottom: 120px; }

.svg-filters{ position:absolute; width:0; height:0; }

/* ==========================
   DEIN Liquid-Glass Kern
   (nur sauber & sichtbar)
   ========================== */

.liquid-glass{
  position: relative;
  isolation: isolate;
  box-shadow: var(--glass-shadow);
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  text-decoration: none;
  cursor: default;
  transform: translateZ(0);
}

.liquid-glass:focus{ outline: none; }

.liquid-glass::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  border-radius: inherit;

  /* Base Fill + Border + inner shadow */
  background-color: var(--glass-fill);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 0 18px -8px rgba(0,0,0,0.75);

  /* iPhone gloss */
  background-image: var(--glass-gloss);
  opacity: 0.95;
}

.liquid-glass::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius: inherit;

  /* Das macht es “iPhone”: blur + saturate */
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);

  /* Distortion wie dein Beispiel */
  filter: url(#glass-distortion);
  -webkit-filter: url(#glass-distortion);
}

/* Extra: feines Grain (iOS wirkt selten komplett “clean”) */
.lg-surface::marker{ content: ""; }
.lg-surface{
  overflow: hidden;
}
.lg-surface > *{ position: relative; z-index: 1; }
.lg-surface::before{
  background-image: var(--glass-gloss), var(--grain);
}

/* Radius helpers */
.lg-radius-xl{ border-radius: var(--radius-xl); }
.lg-radius-lg{ border-radius: var(--radius-lg); }
.lg-radius-md{ border-radius: var(--radius-md); }
.lg-radius-pill{ border-radius: 999px; }

/* Small helpers */
.lg-muted{ font-size: 12px; color: var(--muted); }
.lg-divider{ width: 1px; height: 28px; background: rgba(255,255,255,0.14); margin: 0 2px; }
html[data-theme="light"] .lg-divider{ background: rgba(0,0,0,0.12); }
/* Chips */
.lg-chip{
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  overflow: hidden;
}
.lg-chip > *{ position: relative; z-index: 1; }
.lg-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}
/* Buttons */
.lg-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor:pointer;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.lg-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.10);
  border-color: rgba(107,114,128,0.30);
}
html[data-theme="light"] .lg-btn{
  background: rgba(255,255,255,0.60);
  border-color: rgba(0,0,0,0.10);
}
/* Cards */
.lg-card{
  overflow: hidden;
  transition: transform .30s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .30s ease;
}
.lg-card > *{ position: relative; z-index: 1; }
.lg-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 24px 78px rgba(0,0,0,0.55);
}
/* Badge */
.lg-badge{
  position:absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html[data-theme="light"] .lg-badge{
  background: rgba(255,255,255,0.75);
  border-color: rgba(0,0,0,0.10);
}
.lg-badge.static{ position: static; width: fit-content; }

/* Open button */
.lg-open{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 700;
  color: #111827;
  background: linear-gradient(90deg, #d1d5db, #9ca3af);
  border: 1px solid rgba(255,255,255,0.15);
  transition: transform .2s ease, filter .2s ease;
}
.lg-open:hover{ transform: translateY(-2px); filter: brightness(1.06); }
/* List view */
.lg-list{
  flex-direction: row !important;
  align-items: center !important;
}
.lg-list img{
  width: 112px !important;
  aspect-ratio: 16/10 !important;
  margin-right: 12px !important;
}
.lg-list p{ display:none; }
.lg-list .lg-badge.static{ display:none; }
.lg-list .lg-open{
  margin-left:auto;
  margin-top:0 !important;
  padding: 8px 10px;
}
/* ==========================
   Bottom Bar (iPhone Dock)
   ========================== */

.bottom-bar{
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 9999;

  display:flex;
  align-items:center;
  gap: 10px;

  padding: 10px 12px;
  width: fit-content;
  max-width: min(92vw, 720px);

  overflow: hidden;
}

.bottom-bar > *{ position: relative; z-index: 1; }

.bar-item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;

  height: 46px;
  padding: 0 12px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);

  color: var(--text);
  text-decoration:none;
  cursor:pointer;

  transition: transform .20s ease, background .20s ease, border-color .20s ease;
}

html[data-theme="light"] .bar-item{
  background: rgba(255,255,255,0.60);
  border-color: rgba(0,0,0,0.10);
}
.bar-item:hover{
  transform: translateY(-2px);
  border-color: rgba(107,114,128,0.35);
  background: rgba(255,255,255,0.10);
}
.bar-item.active{
  background: rgba(107,114,128,0.18);
  border-color: rgba(107,114,128,0.45);
}
.bar-icon{ width: 18px; height: 18px; stroke-width: 1.8; }
.bar-label{
  font-size: 13px;
  font-weight: 650;
  opacity: 0.92;
  white-space: nowrap;
}

/* Mobile: wie iPhone, Labels weg */
@media (max-width: 520px){
  .bar-label{ display:none; }
  .bottom-bar{ gap: 8px; padding: 10px; }
  .bar-item{ padding: 0 10px; }
}

/* Scroll progress */
#scrollProgress{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 60;
  background: #6b7280;
  box-shadow: 0 0 16px rgba(107,114,128,0.35);
  transition: width .15s ease;
}