/* ═══════════════════════════════════════════════════════════════════════
   ÖFFENTLICH · 03 — GERÜST
   Kopfzeile mit Aufklappmenüs, Fussleiste. Der Rahmen, der auf jeder Seite
   gleich ist — und deshalb an genau einer Stelle steht.
   ═════════════════════════════════════════════════════════════════════ */

@layer oe-geruest {

/* ── Kopfzeile ───────────────────────────────────────────────────────
   Das Logo bleibt in der Mitte (Kap. 01.6.1) — es ist seit Jahren dort und
   die Symmetrie ist ein Teil der Marke. Links die drei Bereiche mit
   Untermenü, rechts die flachen Punkte und der Zugang.

   Sie klebt oben, aber nur mit einer feinen Linie und einem Hauch Unschärfe.
   Eine Leiste, die beim Scrollen einen Schatten wirft, zieht Aufmerksamkeit
   auf sich, die dem Inhalt gehört. */
.oe-kopfzeile {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--linie);
}
/* ⚠ Die Punkte stehen als GRUPPE um das Logo, nicht an den Rändern.
   Vorher trug ein Raster `1fr auto 1fr`: die Menüpunkte klebten links
   aussen, der Zugang rechts aussen, und dazwischen lagen auf einem breiten
   Schirm sechshundert Pixel Leere. Jetzt ist alles eine mittige Reihe;
   Burger und Zugang sitzen absolut an den Rändern, damit sie die Mitte
   nicht verschieben. */
.oe-kopfzeile .innen {
  position: relative;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--s-7); min-height: var(--nav-h);
  width: 100%; max-width: var(--seitenbreite); margin-inline: auto;
  padding-inline: calc(var(--s-5) + var(--s-9));  /* Platz für Burger und Zugang */
}
/* Das Logo bleibt in der Spaltenmitte; die beiden Reihen rücken von aussen
   an es heran, statt an den Rändern zu kleben. */
.oe-nav { display: flex; align-items: center; gap: var(--s-5); }
.oe-nav.links  { justify-content: flex-end; }
.oe-nav.rechts { justify-content: flex-start; }

.oe-logo { line-height: 0; }
.oe-logo img { height: 40px; width: auto; }

/* Ein Menüpunkt — flacher Link oder Bereichsbeschriftung, beide gleich. */
.oe-nav > a, .oe-menue-haupt {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-2) var(--s-3); border: 0; background: none;
  border-radius: var(--r-s);
  color: var(--text); font-size: var(--t-klein); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: color var(--dauer-schnell) var(--kurve);
}
.oe-nav > a:hover, .oe-menue-haupt:hover,
.oe-menue:hover .oe-menue-haupt { color: var(--marke-text); }
/* Die Beschriftung endet vor dem Pfeil, der Pfeil beginnt dahinter —
   zusammen ergeben sie denselben Innenabstand wie ein flacher Punkt. */
.oe-menue-haupt { padding-right: var(--s-1); }
/* „Du bist hier" — eine Linie unter dem Punkt, nicht eine Farbfläche.
   Der Trunk-Test verlangt, dass man das ohne Nachdenken sieht. */
.oe-nav > a[aria-current], .oe-menue.aktiv .oe-menue-haupt { color: var(--marke-text); }
/* ⚠ Die Linie sitzt auf `::before`, nicht auf `::after`. Auf `::after`
   sitzt bei den Aufklappmenüs schon der Pfeil — beide Regeln trafen
   dasselbe Pseudo-Element und die Kaskade hat sie vermischt: Unter dem
   aktiven Punkt „Verein" hing daraufhin ein 7 px breiter roter Klecks
   statt einer Linie. Ein Pseudo-Element, eine Bedeutung. */
.oe-nav > a[aria-current]::before, .oe-menue.aktiv::before {
  content: ''; position: absolute; left: var(--s-3); right: var(--s-3); bottom: -1px;
  height: 2px; background: var(--marke);
}
/* ⚠ Der Zugang ist ausgenommen: Er steht absolut am Rand, und
   `.oe-nav > a` ist spezifischer als `.oe-zugang` — die Ausnahme muss
   hier stehen, sonst gewinnt `relative` und der Knopf rutscht nach oben. */
.oe-nav > a:not(.oe-zugang), .oe-menue { position: relative; }
.oe-menue { display: inline-flex; align-items: center; }

/* Der Pfeil ist ein eigener Knopf — mit eigener Trefferfläche, sonst
   trifft ihn auf einem Telefon niemand. */
.oe-menue-pfeil {
  display: inline-grid; place-items: center;
  width: 20px; height: 34px; padding: 0; margin-right: var(--s-2);
  border: 0; background: none; border-radius: var(--r-s);
  color: var(--text); cursor: pointer;
  transition: color var(--dauer-schnell) var(--kurve);
}
.oe-menue-pfeil:hover, .oe-menue:hover .oe-menue-pfeil { color: var(--marke-text); }
.oe-menue.aktiv .oe-menue-pfeil { color: var(--marke-text); }
.oe-menue-pfeil::after {
  content: ''; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dauer-schnell) var(--kurve);
}
.oe-menue-pfeil[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }

/* Das Aufklappmenü. Es öffnet auf Klick, nicht auf Hover: Auf einem
   Touchgerät gibt es kein Hover, und ein Menü, das beim Vorbeiziehen der
   Maus aufspringt, ist auf dem Schirm genauso lästig. */
.oe-menue-tafel {
  position: absolute; top: calc(100% + var(--s-2)); left: 0; z-index: 110;
  min-width: 16rem; padding: var(--s-3);
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-m); box-shadow: var(--heben-3);
  display: grid; gap: 2px;
}
.oe-menue-tafel[hidden] { display: none; }
.oe-menue-tafel a {
  display: grid; gap: 1px; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-s); color: var(--text);
  font-size: var(--t-klein); font-weight: 600; text-decoration: none;
}
.oe-menue-tafel a small {
  font-weight: 400; font-size: var(--t-mikro); color: var(--text-still);
}
.oe-menue-tafel a:hover { background: var(--flaeche-2); color: var(--marke-text); }
.oe-menue-tafel a:hover small { color: var(--text-leise); }
.oe-menue-tafel hr { margin: var(--s-2) var(--s-3); }
/* Ohne JavaScript öffnet die Tastatur das Menü — sonst wäre es für sie
   unerreichbar, und ein unerreichbarer Menüpunkt ist ein toter Menüpunkt. */
.oe-menue:focus-within .oe-menue-tafel { display: grid; }

/* Der Zugang rechts aussen. Angemeldete sehen „Zum Hub". */
/* Burger und Zugang sitzen an den Rändern, damit die Mitte die Mitte
   bleibt — als Teil der Reihe würden sie sie um ihre halbe Breite kippen. */
.oe-zugang {
  position: absolute; right: var(--s-5); top: 50%; transform: translateY(-50%);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--linie-stark); border-radius: var(--r-full);
  font-size: var(--t-klein); font-weight: 600; text-decoration: none; color: var(--text);
  transition: border-color var(--dauer-schnell) var(--kurve), color var(--dauer-schnell) var(--kurve);
}
.oe-zugang:hover { border-color: var(--marke); color: var(--marke-text); }
.oe-zugang.angemeldet { background: var(--marke); border-color: var(--marke); color: #fff; }
.oe-zugang.angemeldet:hover { background: var(--marke-dunkel); color: #fff; }

.oe-burger { display: none; }

/* ── Mobil: Akkordeon statt Aufklappmenü ─────────────────────────────
   Ein Menü, das auf dem Handy über den Inhalt fällt, verdeckt das, wonach
   man sucht. Die Schublade schiebt sich stattdessen von oben herein und
   nimmt den Platz, den sie braucht. */
/* Wird es eng, rücken die Punkte zusammen, bevor etwas umbricht. */
@media (max-width: 1180px) {
  .oe-kopfzeile .innen { gap: var(--s-5); }
  .oe-nav { gap: var(--s-2); }
}

@media (max-width: 900px) {
  /* Eine Spalte, Logo mittig — Burger und Zugang stehen absolut daneben.
     ⚠ Beim ersten Versuch war die rechte Reihe ganz versteckt und der
     Login-Knopf damit weg: der eine Punkt, den man auf einem Telefon am
     ehesten sucht. Seit er neben den Reihen steht, kann ihn das Verstecken
     der Reihen nicht mehr mitnehmen. */
  .oe-kopfzeile .innen {
    grid-template-columns: 1fr; justify-items: center;
    padding-inline: calc(var(--s-5) + var(--s-7));
  }
  .oe-nav { display: none; }
  .oe-burger {
    position: absolute; left: var(--s-5); top: 50%; transform: translateY(-50%);
    display: inline-grid; place-items: center; width: 44px; height: 44px;
    border: 0; background: none; border-radius: var(--r-s); color: var(--text);
  }
  .oe-burger .pn-ic { width: 22px; height: 22px; }

  .oe-schublade {
    position: fixed; inset: var(--nav-h) 0 0; z-index: 99;
    overflow-y: auto; padding: var(--s-5) var(--s-5) var(--s-9);
    background: var(--flaeche);
    display: grid; gap: var(--s-1); align-content: start;
  }
  .oe-schublade[hidden] { display: none; }
  .oe-schublade > a, .oe-schublade summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-4) var(--s-2); border-bottom: 1px solid var(--linie);
    font-family: var(--font-display); font-size: var(--t-h3); text-transform: uppercase;
    color: var(--text); text-decoration: none; list-style: none;
  }
  .oe-schublade summary::-webkit-details-marker { display: none; }
  .oe-schublade summary::after {
    content: ''; width: 9px; height: 9px;
    border-right: 2px solid var(--text-still); border-bottom: 2px solid var(--text-still);
    transform: rotate(45deg); transition: transform var(--dauer-schnell) var(--kurve);
  }
  .oe-schublade details[open] summary::after { transform: rotate(-135deg); }
  .oe-schublade details > div { display: grid; gap: 1px; padding: var(--s-2) 0 var(--s-4) var(--s-4); }
  .oe-schublade details a {
    padding: var(--s-2) 0; color: var(--text-leise);
    font-size: var(--t-body); font-weight: 500; text-decoration: none;
  }
  .oe-schublade details a:hover { color: var(--marke-text); }
  .oe-schublade details a.haupt { color: var(--text); font-weight: 600; }
  body.oe-menue-auf { overflow: hidden; }
}
@media (min-width: 901px) {
  .oe-schublade { display: none; }
}

/* ── Fussleiste ──────────────────────────────────────────────────────
   Vier Spalten (Kap. 03.9): Verein · Liga · Mitmachen · Rechtliches.
   Dunkel, damit die Seite einen Boden hat. */
.oe-fuss { background: var(--dunkel); color: var(--text-invers-leise); padding: var(--s-9) 0 var(--s-6); }
/* ⚠ `auto-fit` faltet Spalten zusammen, aber es unterschreitet ihre
   Mindestbreite nicht. Auf einem 390-px-Schirm blieben 14 rem + 9 rem +
   Abstand stehen — 50 px breiter als der Schirm, und die ganze Seite liess
   sich seitlich schieben. Unter 620 px steht deshalb eine Spalte da, nicht
   eine gefaltete Reihe. */
.oe-fuss .raster {
  display: grid; gap: var(--s-7);
  grid-template-columns: minmax(14rem, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr));
}
@media (max-width: 620px) {
  .oe-fuss .raster { grid-template-columns: 1fr; gap: var(--s-6); }
}
.oe-fuss .marke img { height: 44px; width: auto; margin-bottom: var(--s-4); }
.oe-fuss .marke p { max-width: 34ch; font-size: var(--t-klein); line-height: var(--zeile-mit); }
.oe-fuss .hashtag {
  font-family: var(--font-display); font-size: var(--t-gross);
  color: var(--marke-hell); text-transform: uppercase; margin-bottom: var(--s-3);
}
.oe-fuss h2 {
  font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--n-40);
  margin-bottom: var(--s-4);
}
.oe-fuss ul { list-style: none; display: grid; gap: var(--s-3); }
.oe-fuss a { color: var(--text-invers-leise); text-decoration: none; font-size: var(--t-klein); }
.oe-fuss a:hover { color: var(--n-00); }
.oe-fuss .unten {
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid var(--linie-licht);
  font-size: var(--t-mikro); color: var(--n-50);
}
.oe-fuss .sozial { display: flex; gap: var(--s-3); }
.oe-fuss .sozial a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--linie-licht); border-radius: var(--r-full);
  transition: border-color var(--dauer-schnell) var(--kurve),
              background var(--dauer-schnell) var(--kurve);
}
.oe-fuss .sozial a:hover { background: var(--marke); border-color: var(--marke); }
.oe-fuss .sozial svg { width: 17px; height: 17px; }

}