/* Kopfzeile der Bummsbunnys-Seiten. Eigenständig: keine Variablen oder Klassen außerhalb von .bbk-*,
   kein JavaScript (Mobil-Menü über <details>). Wird auch von der Bunny-Karte (BummsBot) genutzt. */
.bbk-kopf {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(18, 18, 20, .94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid #34343c;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  line-height: 1.4; color: #f2f2f2;
}
.bbk-kopf *, .bbk-kopf *::before, .bbk-kopf *::after { box-sizing: border-box; }
.bbk-innen {
  position: relative; max-width: 72rem; margin: 0 auto; padding: .5rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.bbk-marke { display: flex; align-items: center; gap: .6rem; color: #f2f2f2; text-decoration: none; font-weight: 800; font-size: 1.15rem; }
.bbk-marke img { display: block; width: 48px; height: 50px; max-width: none; }
.bbk-kopf ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .25rem; }
.bbk-kopf nav a:not(.bbk-discord) {
  display: block; padding: .55rem .8rem; border-radius: 8px;
  color: #f2f2f2; text-decoration: none; font-weight: 600; font-size: .98rem;
}
.bbk-kopf nav a:not(.bbk-discord):hover { background: #26262c; color: #fff; }
.bbk-kopf nav a[aria-current="page"] { color: #ff6b6f; }
.bbk-kopf a:focus-visible, .bbk-kopf summary:focus-visible { outline: 3px solid #ff6b6f; outline-offset: 2px; border-radius: 6px; }
.bbk-knopf-li { margin-left: .5rem; }
.bbk-discord {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: #5865f2; color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem;
  padding: .6rem 1rem; border-radius: 10px; line-height: 1.2;
}
.bbk-discord:hover { background: #4752c4; color: #fff; }
.bbk-discord svg { width: 20px; height: 20px; flex: none; }
.bbk-menue { display: none; }
.bbk-menue > summary { list-style: none; cursor: pointer; }
.bbk-menue > summary::-webkit-details-marker { display: none; }
@media (max-width: 52rem) {
  .bbk-nav { display: none; }
  .bbk-menue { display: block; }
  .bbk-menue > summary {
    display: flex; align-items: center; gap: .6rem; min-height: 44px;
    padding: .55rem .9rem; border: 1px solid #34343c; border-radius: 10px; font-weight: 700; color: #f2f2f2;
  }
  .bbk-strich, .bbk-strich::before, .bbk-strich::after { display: block; width: 18px; height: 2px; background: #f2f2f2; content: ""; }
  .bbk-strich { position: relative; }
  .bbk-strich::before { position: absolute; top: -6px; }
  .bbk-strich::after { position: absolute; top: 6px; }
  .bbk-menue[open] > summary { background: #26262c; }
  .bbk-menue nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #121214; border-bottom: 1px solid #34343c; padding: .5rem 1rem 1rem;
  }
  .bbk-menue ul { flex-direction: column; align-items: stretch; gap: .15rem; }
  .bbk-menue nav a:not(.bbk-discord) { padding: .8rem .6rem; font-size: 1.05rem; }
  .bbk-knopf-li { margin: .6rem 0 0; }
  .bbk-discord { width: 100%; padding: .8rem 1rem; }
}