/* AKworkz — Hauptnavigation mit Untermenüs
   ---------------------------------------------------------------------------
   Erweitert den bestehenden Kopf (#topbar, .topnav) um zwei Dinge, die es
   vorher nicht gab: aufklappbare Gruppen und ein Menü für schmale Geräte.
   Unterhalb von 700 px waren die Navigationspunkte bisher schlicht
   ausgeblendet — auf dem Telefon gab es also gar kein Menü.

   Es werden ausschliesslich die Tokens des Bestands verwendet: --gold,
   --gold-bright, --paper, --serif, --sans. Keine neue Technik, kein Framework,
   kein Umbau der bestehenden Regeln. */

/* --- Gruppe mit Untermenü --------------------------------------------- */
.topnav .nav-gruppe { position: relative; display: inline-flex; align-items: center; }

.topnav .nav-knopf {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); letter-spacing: .28em; text-transform: uppercase;
  color: #f2ede399; font-size: 10.5px; transition: color .25s;
  display: inline-flex; align-items: center; gap: 6px;
}
.topnav .nav-knopf:hover, .topnav .nav-gruppe:hover .nav-knopf,
.topnav .nav-knopf[aria-expanded="true"] { color: var(--gold-bright); }

.nav-pfeil {
  width: 5px; height: 5px; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-1px);
  transition: transform .2s;
}
.nav-knopf[aria-expanded="true"] .nav-pfeil { transform: rotate(-135deg) translateY(-1px); }

.topnav .nav-menue {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  min-width: 250px; display: none; flex-direction: column;
  background: #0a0a0cf2; border: 1px solid #c9a96a4d;
  padding: 10px 0; z-index: 60;
  box-shadow: 0 18px 40px #00000080;
}
.topnav .nav-gruppe:hover .nav-menue,
.topnav .nav-gruppe:focus-within .nav-menue,
.topnav .nav-knopf[aria-expanded="true"] + .nav-menue { display: flex; }

/* Der Abstand zwischen Knopf und Klappe darf den Hover nicht abreissen lassen. */
.topnav .nav-gruppe::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px;
}

.topnav .nav-menue a {
  display: flex; align-items: baseline;
  padding: 8px 20px; letter-spacing: .12em; font-size: 10.5px;
  color: #f2ede3a6; white-space: nowrap; text-transform: uppercase;
}
/* Beitragszahl hinter einem Menuepunkt. Vorlesend ergaebe „(3)" nichts —
   deshalb steht daneben unsichtbar „3 Beitraege". */
.topnav .nav-menue .nav-zahl {
  /* `auto` schiebt die Zahl an den rechten Rand, solange Platz ist; im
     schmalen Menue bleibt wenigstens der Abstand nach links stehen. */
  margin-left: auto; padding-left: 14px;
  font-size: 9.5px; letter-spacing: .06em; color: #c9a96a99; font-variant-numeric: tabular-nums;
}
.topnav .nav-menue a:hover .nav-zahl,
.topnav .nav-menue a:focus-visible .nav-zahl { color: var(--gold-bright); }
/* Pfeil an einem Verweis, der die Seite verlaesst. */
.topnav .nav-extern {
  margin-left: 5px; font-size: 8.5px; color: #c9a96a99; vertical-align: 1px;
}
.topnav a:hover .nav-extern, .topnav a:focus-visible .nav-extern { color: var(--gold-bright); }
#footer .nav-extern { margin-left: 4px; font-size: 8.5px; opacity: .7; }

.nav-nurlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.topnav .nav-menue a:hover, .topnav .nav-menue a:focus-visible {
  color: var(--gold-bright); background: #c9a96a14;
}
.nav-trenner { display: block; height: 1px; background: #c9a96a33; margin: 8px 20px; }

/* --- Schalter für schmale Geräte --------------------------------------- */
.nav-burger {
  display: none; background: none; border: 1px solid #c9a96a4d; cursor: pointer;
  width: 38px; height: 34px; padding: 8px 9px; pointer-events: auto;
  flex-direction: column; justify-content: space-between;
}
.nav-burger span { display: block; height: 1px; background: var(--gold-bright); transition: transform .2s, opacity .2s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mittlere Breiten: enger setzen statt abschneiden -------------------
   Acht Menuepunkte mit 26 px Abstand und .28em Sperrung brauchen rund 1120 px.
   Zwischen 1201 und 1440 px wird deshalb zusammengerueckt; darunter uebernimmt
   das aufklappbare Menue. Abgeschnittene Menuepunkte gibt es nicht. */
@media (1200px < width <= 1440px) {
  .topnav { gap: 16px; }
  .topnav a, .topnav .nav-knopf { letter-spacing: .16em; }
}

/* --- Schmale Geräte ---------------------------------------------------- */
@media (width <= 1200px) {
  .nav-burger { display: flex; }

  #topbar { flex-wrap: wrap; row-gap: 14px; }

  /* Die bestehende Regel blendet Punkte unterhalb 980/700 px aus.
     Hier wird sie für das aufgeklappte Menü gezielt überschrieben. */
  .topnav {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    gap: 0; border-top: 1px solid #c9a96a33; padding-top: 10px;
    max-height: calc(100vh - 110px); overflow-y: auto;
  }
  /* Der Zustand steht auf <html>, weil React auf der Startseite die Kopfzeile
     austauscht — eine Klasse am Menue selbst waere danach verschwunden.
     Die drei Bestandsregeln (.topnav a, .topnav a:not(.nav-cta)) werden hier
     bewusst uebersteuert; ohne das blieben die einfachen Punkte unsichtbar. */
  html.nav-offen .topnav { display: flex; }
  html.nav-offen .topnav a,
  html.nav-offen .topnav a:not(.nav-cta) { display: block; }

  /* Solange das Menue offen ist, gehoert es nach ganz vorn. Der AK-Agent
     liegt auf z-index 2147480600; ein Menue dahinter waere unbedienbar. */
  html.nav-offen #topbar { z-index: 2147480700; }

  /* Undurchsichtig: sonst liest man das Menue vor dem Hero-Bild. */
  html.nav-offen .topnav {
    background: #07070a; padding: 10px 4px 6px; margin: 0 -4px;
  }

  .topnav > a, .topnav .nav-knopf {
    padding: 12px 2px; border-bottom: 1px solid #c9a96a1f; width: 100%;
    text-align: left; justify-content: space-between;
  }
  .topnav .nav-gruppe { display: block; width: 100%; }
  .topnav .nav-gruppe::after { display: none; }
  .topnav .nav-menue {
    position: static; transform: none; min-width: 0; border: 0; padding: 4px 0 10px 14px;
    background: none; box-shadow: none; border-bottom: 1px solid #c9a96a1f;
  }
  /* Auf dem Telefon klappt nur, was angeklickt wurde — kein Hover. */
  .topnav .nav-gruppe:hover .nav-menue { display: none; }
  .topnav .nav-knopf[aria-expanded="true"] + .nav-menue { display: flex; }
  .topnav .nav-menue a { padding: 9px 4px; white-space: normal; }
  .topnav .nav-cta { margin: 16px 0 6px; text-align: center; }
}

/* --- Fusszeile: Spalten mit den neuen Bereichen ------------------------- */
.ft-spalten {
  display: flex; flex-wrap: wrap; gap: 40px; margin: 26px 0 8px;
}
.ft-spalte { display: flex; flex-direction: column; gap: 7px; }
.ft-spalte .ft-kopf {
  font-family: SF Mono, Menlo, monospace; letter-spacing: .2em; text-transform: uppercase;
  font-size: 9px; color: var(--gold); margin-bottom: 3px;
}
.ft-spalte a { color: #f2ede38c; font-size: 12px; text-decoration: none; }
.ft-spalte a:hover { color: var(--gold-bright); }

/* --- Startseite: Karten der neuen Bereiche ----------------------------- */
.neu-bei-akworkz { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
@media (width <= 900px) { .neu-bei-akworkz { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (width <= 620px) { .neu-bei-akworkz { grid-template-columns: 1fr; } }