/* Aufklappbare Punkte in der Hauptnavigation (22.09.2026).

   Warum eine eigene Datei und nicht im <style>-Block jeder Seite: Weil
   es sonst der naechste Block waere, der 13-mal im Repo steht. Das
   Demo-Fenster macht es seit dem 20.08.2026 genauso
   (css/demo-fenster.css). Die Farben kommen aus den Variablen, die
   jede Seite selbst setzt - die Datei bringt keine eigenen mit.

   ACHTUNG beim Aendern: Die Einbindung traegt ein ?v=Datum, weil
   /css/* einen Tag lang gecacht wird. Wer hier etwas aendert, zaehlt
   die Version in .werkzeuge/setze_nav.py hoch. */

/* ---------- Der Punkt, der oeffnet ---------- */

/* Ein <button>, kein <a>: Er fuehrt nirgendwohin, er oeffnet etwas.
   Sieht aus wie seine Nachbarn in der Leiste. */
.hauptnav .klapp-punkt {
  font: inherit; font-size: .95rem; font-weight: 600;
  color: var(--c-text); background: none; border: 0; cursor: pointer;
  padding: 8px 4px; border-radius: 999px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
}
.hauptnav .klapp-punkt:hover { background: var(--c-flaeche-wechsel); }
.hauptnav .klapp-punkt[aria-expanded="true"] { color: var(--c-titel); }

/* Der Pfeil dreht sich beim Oeffnen - das einzige bewegte Teil am Knopf. */
.hauptnav .klapp-punkt .pfeil {
  width: 9px; height: 9px; transition: transform .15s ease;
}
.hauptnav .klapp-punkt[aria-expanded="true"] .pfeil { transform: rotate(180deg); }

/* Die Du-bist-hier-Markierung wie bei den anderen Punkten: ueber den
   Schatten statt ueber font-weight, damit sich die Breite nicht aendert
   und die Nachbarn nicht zur Seite rutschen (Lehre vom 21.08.2026). */
/* OHNE Wert-Angabe, damit beide Stufen greifen: "page" auf der
   Uebersichtsseite selbst, "true" auf einer Themenseite darunter. Die
   Unterscheidung ist fuer Screenreader da, sichtbar sind beide gleich -
   der Besucher will nur wissen, in welchem Bereich er ist. */
.hauptnav .klapp-punkt[aria-current] {
  color: var(--c-titel);
  text-shadow: 0 0 .45px currentColor, 0 0 .45px currentColor;
  /* Derselbe Balken wie bei jedem anderen aktiven Punkt. Beim Umbau zum
     Knopf am 22.09.2026 ist er verlorengegangen: Die Regel dafuer steht
     in jeder Seite als `.hauptnav a[aria-current="page"]` und greift bei
     einem <button> nicht. Gemessen am 23.09.2026 - "Integrationen" hatte
     inset 0 -2px 0, "Anwendungsfaelle" none. */
  box-shadow: inset 0 -2px 0 var(--c-signal);
}

/* ---------- Abstand in der Leiste ---------- */

/* Mit fuenf Punkten ist Platz (Martin, 24.09.2026: "das koennte ja jetzt
   etwas luftiger sein"). Die Grundregel in den Seiten hat gap: 0, der
   Abstand kam nur aus 4px Polsterung je Seite. Gemessen auf 1401px, der
   schmalsten Breite mit sichtbarer Leiste: Punkte 573px in 817px, mit
   28px Abstand 685px und 66px Rand je Seite. `nav.hauptnav`, damit die
   Regel die Grundregel schlaegt. */
nav.hauptnav { gap: 28px; }

/* ---------- Das Panel ---------- */

.klapp-huelle { position: relative; display: inline-flex; }

/* Es liegt UEBER dem Inhalt und schiebt nichts weg - sonst wuerde die
   Seite beim Oeffnen springen (Regel "Nichts darf springen"). */
.klapp-panel {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--c-flaeche);
  border: 1px solid var(--c-linie); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(31, 45, 61, .13);
  padding: 12px; z-index: 60;
  opacity: 0; visibility: hidden;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.klapp-panel.offen {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* Die kleine Spitze verbindet Panel und Ausloeser, damit es nicht frei
   im Raum schwebt. */
.klapp-panel::before {
  content: ''; position: absolute; top: -5px; left: 50%;
  width: 9px; height: 9px; margin-left: -5px;
  background: var(--c-flaeche);
  border-left: 1px solid var(--c-linie); border-top: 1px solid var(--c-linie);
  transform: rotate(45deg);
}

.klapp-panel .panel-innen {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 520px;
}
/* Bis drei Unterpunkte: eine Spalte, halb so breit. Das Werkzeug setzt
   die Klasse, wenn die Liste kurz ist (24.09.2026, vier Dropdowns). */
.klapp-panel.schmal .panel-innen { grid-template-columns: 1fr; width: 300px; }
.klapp-panel a {
  display: block; padding: 10px 14px; border-radius: 9px;
  color: var(--c-text); text-decoration: none;
  font-size: .95rem; font-weight: 600;
}
.klapp-panel a:hover { background: var(--c-flaeche-wechsel); color: var(--c-titel); }
/* Der Punkt, auf dessen Seite man steht. Der Balken liegt INNEN als
   Schatten, damit die Aussenkante gleich bleibt und im Raster nichts
   rutscht (dieselbe Lehre wie oben in der Leiste). */
.klapp-panel a[aria-current="page"] {
  color: var(--c-titel); background: var(--c-flaeche-wechsel);
  box-shadow: inset 3px 0 0 var(--c-signal);
}
.klapp-panel a small {
  display: block; font-weight: 500; font-size: .8rem;
  color: var(--c-nebentext); margin-top: 2px;
}

/* ---------- Das Klappmenue darf nie hoeher sein als der Platz ---------- */

/* Es haengt am festen Kopf und scrollt deshalb NICHT mit der Seite. War es
   hoeher als das Fenster, lagen die unteren Eintraege ausserhalb - auf
   einem 667px hohen Telefon "Kontakt" und "Demo-Termin vereinbaren",
   schon mit acht Punkten (675px), erst recht mit den vier Dropdowns
   (752px). Gemessen am 24.09.2026. Also: Hoechstens der Platz unter dem
   Kopf, und darueber hinaus scrollt das Menue selbst. `nav.klappnav`
   statt `.klappnav`, damit die Regel die Grundregel in den Seiten
   schlaegt (Spezifitaet, nicht Reihenfolge - Lehre vom 27.08.2026). */
nav.klappnav {
  max-height: calc(100vh - var(--kopf-hoehe, 71px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Dieselben Unterpunkte im Klappmenue ---------- */

/* Das Panel oben gibt es nur, solange die Leiste sichtbar ist. Darunter
   uebernimmt das Klappmenue, und ein 520px breites Panel hat auf einem
   Telefon keinen Platz (Martins Hinweis, 22.09.2026).

   Geloest als eingerueckte Liste, NICHT als zweites Aufklappen: Auf dem
   Telefon ist jeder zusaetzliche Tipp eine Huerde, und die Themenseiten
   sollen gefunden werden, nicht versteckt sein. */
.klappnav .unterpunkte {
  margin: 0 0 0 14px; padding: 0 0 4px 12px;
  border-left: 2px solid var(--c-linie);
}
.klappnav .unterpunkte a {
  font-weight: 500; font-size: .92rem; color: var(--c-nebentext);
  border-bottom: 0; padding: 11px 4px;
}
.klappnav .unterpunkte a:hover { color: var(--c-titel); }
.klappnav .unterpunkte a[aria-current="page"] {
  color: var(--c-titel); font-weight: 700;
}

/* Nur die Trennlinie faellt weg, die Polsterung BLEIBT - sonst sinkt das
   Klickziel unter die 40px-Grenze (gemessen: 37px statt 44px). */
.klappnav a.hat-unterpunkte { border-bottom: 0; }