/* ══════════════════════════════════════════════════════════════════════
   RAHMEN_20260927 (KEES) — der Inhalt bleibt im Rahmen.

   BEFUND vom 27.9. (Chrome, 390x844, gemessen):
     header.topbar  position fixed, oben,  Hoehe 72 px, background rgba(0,0,0,0)
     aside.shelf    position fixed, unten, Hoehe 72 px, background rgba(0,0,0,0)
     Seitenhoehe 3672 px, kein Innenscroll.
   Beide Balken sind VOLLSTAENDIG durchsichtig. Der Text laeuft beim Rollen
   darunter durch und kollidiert mit "CRITICA AI" oben und den drei
   Reitern unten — auf den Bildschirmfotos bei 900, 1800 und 2700 px zu sehen.

   Marcus: "wenn schon der content im frame läuft OBEN UND UNTEN
   DANN NUR IM FRAME."

   LOESUNG, zwei Teile:
   1. Der Rahmen wird dicht: Balken bekommen einen deckenden Grund mit
      weichem Rueckfall und eine Haarlinie zur Kante. Nichts scheint durch.
   2. Der Inhalt bekommt oben und unten genau so viel Platz, wie die Balken
      hoch sind. Er endet also am Rahmen, statt darunter zu verschwinden.

   Diese Datei AENDERT styles.css NICHT, sie wird danach geladen und
   ueberschreibt nur diese Punkte. Faellt sie weg, ist der alte Stand da.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --rahmen-hoehe: 5rem;          /* Desktop: Hoehe der Kopfleiste */
  --rahmen-grund: rgba(9, 9, 8, 0.92);
}

/* ── 1. Der Rahmen wird dicht ──────────────────────────────────────── */
.topbar {
  background: linear-gradient(180deg, rgba(9,9,8,0.97) 0%, rgba(9,9,8,0.92) 62%, rgba(9,9,8,0) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(112%);
  backdrop-filter: blur(14px) saturate(112%);
}

.shelf {
  background: var(--rahmen-grund);
  -webkit-backdrop-filter: blur(14px) saturate(112%);
  backdrop-filter: blur(14px) saturate(112%);
}

/* ── 2. Der Inhalt endet am Rahmen ─────────────────────────────────── */
.site-shell > main {
  padding-top: var(--rahmen-hoehe);
}

/* Anker springen nicht mehr unter die Kopfleiste. */
html {
  scroll-padding-top: calc(var(--rahmen-hoehe) + 0.5rem);
}

/* ── Telefon: Balken oben UND unten, beide 4,5 rem ─────────────────── */
@media (max-width: 900px) {
  :root { --rahmen-hoehe: 4.5rem; }

  .shelf {
    /* unten: Verlauf nach oben hin weich, damit die Kante nicht hart abschneidet */
    background: linear-gradient(0deg, rgba(9,9,8,0.97) 0%, rgba(9,9,8,0.93) 62%, rgba(9,9,8,0.72) 100%);
  }

  .site-shell {
    /* 4,5 rem Leiste + Platz fuer die Homezeile des iPhone */
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }

  .shelf {
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
    height: calc(4.5rem + env(safe-area-inset-bottom));
  }

  /* .room bringt oben schon 6rem mit; die anderen Abschnitte nicht. */
  .site-shell > main { padding-top: 0; }
  .site-shell > main > *:first-child { padding-top: var(--rahmen-hoehe); }
}