/* ═══════════════════════════════════════════════════════════════════════════
   BLUE HORIZON DESIGN SYSTEM — patterns/public.css
   Version: 0.1.1 · Build: 2026-09-17

   0.1.1 — .bh-public__header wird die Pill-Navbar: schwebend, abgerundet,
   so breit wie der Inhalt. Werte aus der Vermessung von
   forum.bluehorizonrp.com. Das Aufklappmenü unter 767px wird zur Schublade
   und teilt sich die Mechanik mit der App-Shell (ds.js 0.1.1).
   Benötigt: tokens.css, base.css, button.css, card.css
   VENDORED — READ-ONLY.

   Öffentliche Seiten ohne Anmeldung: Startseite, Regelwerk, Impressum,
   Wartungshinweis. Kein Shell, keine Sidebar — Kopfzeile, Inhalt, Fußzeile.
   Dies ist der einzige Grundriss, der --bh-text-2xl (48px) benutzt.
   ═══════════════════════════════════════════════════════════════════════════ */

.bh-public { display: flex; flex-direction: column; min-height: 100vh; }

/* ══ KOPFZEILE — die Pill-Navbar ═══════════════════════════════════════════
   Das Markenzeichen über alle Projekte. Eine schwebende, abgerundete Leiste,
   so breit wie der Inhalt darunter — nicht randlos über die volle Breite.

   ES GIBT NUR DIESE EINE KOPFLEISTE. Ein Projekt trägt entweder die
   App-Shell (Sidebar, interne Werkzeuge) oder die Public-Shell (diese
   Leiste, öffentliche Seiten). Kein zweites Bauteil daneben — das wäre §0
   auf der obersten Ebene.

   Die Werte stammen aus der Vermessung von forum.bluehorizonrp.com
   (2026-09-17). Übernommen wurde die Form, nicht die Bauart: das Vorbild
   verteilt seine Werte auf zwei Klassen, die einander an vier Stellen
   überschreiben, und kennt vier widersprüchliche Breakpoints.

   NICHT übernommen und warum:
     · Hover-Reaktion — im Vorbild ein Nebeneffekt der Kartenklasse.
       Eine Navigationsleiste reagiert nicht auf Zeigen.
     · Vier Breakpoints — auf die zwei Stufen des Systems zurückgeführt.
     · max-width 1600px — die Leiste ist so breit wie der Inhalt, und der
       richtet sich nach --bh-content-max, nicht nach einem fremden Projekt.

   KEIN position: sticky und kein Scroll-Zustand. Die Leiste scrollt mit
   weg, wie im Vorbild. Eine Leiste, die beim Scrollen ihr Aussehen ändert,
   ist ein zweiter Zustand, den niemand angefordert hat.                    */

.bh-public__header {
  /* „So breit wie der Inhalt darunter" ist wörtlich gemeint: Die Sektionen
     spannen --bh-content-max und polstern innen um --bh-space-5. Die Leiste
     zieht dieselbe Polsterung von ihrer Breite ab und steht damit auf beiden
     Seiten exakt auf der Inhaltskante — bei jeder Fensterbreite, nicht nur
     oberhalb der Höchstbreite. Derselbe Wert an einer Stelle abgezogen,
     statt an zwei Stellen gepflegt. */
  width:     calc(100% - var(--bh-space-5) * 2);
  max-width: calc(var(--bh-content-max) - var(--bh-space-5) * 2);
  margin: var(--bh-space-6) auto 0;
  z-index: var(--bh-z-topbar);

  border: 1px solid var(--bh-border-subtle);
  border-radius: var(--bh-radius-2xl);
  background: var(--bh-surface-glass);
  backdrop-filter: blur(var(--bh-blur-glass));
  -webkit-backdrop-filter: blur(var(--bh-blur-glass));
  box-shadow: var(--bh-shadow-4);
}

.bh-public__header-inner {
  display: flex;
  align-items: center;
  gap: var(--bh-space-4);
  padding: var(--bh-space-4) var(--bh-space-5);
}

.bh-public__brand {
  display: flex;
  align-items: center;
  gap: var(--bh-space-2);
  color: var(--bh-text-primary);
  font-size: var(--bh-text-md);
  font-weight: var(--bh-weight-semibold);
}

.bh-public__nav { display: flex; align-items: center; gap: var(--bh-space-1); margin-left: auto; }
.bh-public__nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--bh-control-height);
  padding: 0 var(--bh-space-3);
  border-radius: var(--bh-radius-lg);
  color: var(--bh-text-tertiary);
  font-size: var(--bh-text-sm);
  font-weight: var(--bh-weight-medium);
  transition: background var(--bh-transition), color var(--bh-transition);
}
.bh-public__nav-link:hover  { background: var(--bh-surface-hover); color: var(--bh-text-primary); }
.bh-public__nav-link:active { background: var(--bh-surface-3); }
.bh-public__nav-link[aria-current="page"] { color: var(--bh-color-accent); }
.bh-public__nav-link:focus-visible {
  outline: var(--bh-focus-width) solid var(--bh-focus-color);
  outline-offset: var(--bh-focus-offset);
}

.bh-public__nav-toggle { display: none; }

/* Verdunkelung hinter der Schublade — Bau und Ebene wie in der App-Shell. */
.bh-public__scrim {
  display: none;
  position: fixed; inset: 0;
  z-index: var(--bh-z-scrim);
  background: var(--bh-surface-overlay);
}

/* ── Inhalt ──────────────────────────────────────────────────────────────── */
.bh-public__main { flex: 1; }

.bh-public__section {
  width: 100%;
  max-width: var(--bh-content-max);
  margin: 0 auto;
  padding: var(--bh-section-gap) var(--bh-space-5);
}
.bh-public__section--narrow { max-width: 720px; }

/* Einstieg. Kein Verlauf, kein Bildhintergrund — Text auf Fläche. */
.bh-public__intro {
  display: flex;
  flex-direction: column;
  gap: var(--bh-space-4);
  align-items: flex-start;
  max-width: 720px;
}
.bh-public__intro-title { margin: 0; font-size: var(--bh-text-2xl); }
.bh-public__intro-text {
  margin: 0;
  color: var(--bh-text-tertiary);
  font-size: var(--bh-text-md);
  line-height: var(--bh-leading-normal);
}
.bh-public__intro-actions { display: flex; align-items: center; gap: var(--bh-space-2); flex-wrap: wrap; }

/* ── Fußzeile ────────────────────────────────────────────────────────────── */
.bh-public__footer {
  border-top: 1px solid var(--bh-border-subtle);
  background: var(--bh-surface-1);
}
.bh-public__footer-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--bh-space-6);
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--bh-content-max);
  margin: 0 auto;
  padding: var(--bh-space-6) var(--bh-space-5);
}
.bh-public__footer-col { display: flex; flex-direction: column; gap: var(--bh-space-2); min-width: 0; }
.bh-public__footer-title {
  font-size: var(--bh-text-xs);
  font-weight: var(--bh-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--bh-tracking-caps);
  color: var(--bh-text-muted);
}
.bh-public__footer-link {
  color: var(--bh-text-tertiary);
  font-size: var(--bh-text-sm);
  border-radius: var(--bh-radius-sm);
  transition: color var(--bh-transition);
}
.bh-public__footer-link:hover  { color: var(--bh-color-accent); }
.bh-public__footer-link:active { color: var(--bh-color-accent-bright); }
.bh-public__footer-link:focus-visible {
  outline: var(--bh-focus-width) solid var(--bh-focus-color);
  outline-offset: var(--bh-focus-offset);
}

.bh-public__footer-bottom {
  border-top: 1px solid var(--bh-border-subtle);
  color: var(--bh-text-muted);
  font-size: var(--bh-text-xs);
}
.bh-public__footer-bottom > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bh-space-3);
  flex-wrap: wrap;
  max-width: var(--bh-content-max);
  margin: 0 auto;
  padding: var(--bh-space-4) var(--bh-space-5);
}

/* ── Schmal ──────────────────────────────────────────────────────────────
   Die Pille schrumpft NICHT. Sie behält Form und Radius und gibt ihren
   Inhalt an eine Schublade ab: Eine Leiste mit fünf Einträgen, auf 360px
   zusammengedrückt, ist keine Pille mehr, sondern ein Kompromiss, der oben
   auf jedem Telefon steht.

   Die Schublade ist keine neue Mechanik — ds.js schaltet .is-nav-open auf
   die Wurzel und kennt beide Shells. Sie kommt von rechts, weil dort ihr
   Knopf sitzt; die Sidebar der App-Shell kommt aus demselben Grund von
   links.                                                                   */
@media (max-width: 767px) {
  /* Rahmen und Polsterung rücken eine Stufe ein — wie .bh-shell__content. */
  .bh-public__header {
    width:     calc(100% - var(--bh-space-4) * 2);
    max-width: calc(var(--bh-content-max) - var(--bh-space-4) * 2);
    margin-top: var(--bh-space-4);
  }
  .bh-public__header-inner { padding: var(--bh-space-3) var(--bh-space-4); }

  .bh-public__nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: var(--bh-z-sidebar);
    width: min(80%, 300px);
    transform: translateX(100%);
    transition: transform var(--bh-transition-enter);

    flex-direction: column;
    align-items: stretch;
    gap: var(--bh-space-1);
    margin-left: 0;
    padding: var(--bh-space-6) var(--bh-space-4);
    overflow-y: auto;

    background: var(--bh-surface-1);
    border-left: 1px solid var(--bh-border-subtle);
    box-shadow: var(--bh-shadow-3);
  }
  .bh-public.is-nav-open .bh-public__nav   { transform: none; }
  .bh-public.is-nav-open .bh-public__scrim { display: block; }

  .bh-public__nav-toggle { display: inline-flex; margin-left: auto; }
  .bh-public__nav-link   { min-height: var(--bh-control-height-touch); }

  .bh-public__section { padding: var(--bh-space-6) var(--bh-space-4); }
  .bh-public__footer-inner { gap: var(--bh-space-5); padding: var(--bh-space-5) var(--bh-space-4); }
}