/* Aufklapp-Punkt in der Kopfzeile (FAQ -> Häufige Fragen + Hilfe-Center).
 *
 * Eigene Datei, kein Webflow-Baustein: Webflows Aufklapp-Menü hängt an
 * Webflows eigenem JavaScript, und das ist bei Brandel und Georgiadis
 * unterschiedlich eingebunden. Diese Regeln gelten in BEIDEN Kopfzeilen —
 * der übernommenen Webflow-Leiste und der aus dem Generator.
 *
 * Auf dem Handy klappt nichts auf: Unter 992 px verschwindet der Knopf und
 * die beiden Verweise fließen über `display: contents` als gewöhnliche
 * Menüpunkte in die Liste. Aufklapp-Menüs auf Touch sind eine bekannte
 * Stolperfalle — untereinander ist dort schlicht verlässlicher.
 */

.kp-auf { position: relative; display: inline-block; }

/* Bewusst KEIN `font:` und KEIN `color:` hier. Der Knopf traegt in der
   Webflow-Leiste zusaetzlich die Klasse der Menuepunkte — setzte ich hier
   etwas, gewaenne dieses Blatt (es wird spaeter geladen) und der Punkt
   erschiene in der Browserschrift: 14 px statt 20 px und grau statt blau.
   Groesse, Dicke und Farbe kommen deshalb von der Seite selbst. */
.kp-auf-knopf {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kp-auf-knopf:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Das Pfeilchen. Dreht sich, wenn offen. */
.kp-auf-pfeil {
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.kp-auf.offen .kp-auf-pfeil { transform: rotate(-135deg) translate(-2px, -2px); }

.kp-auf-feld {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 210px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e4e4e8;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(20, 16, 30, .13);
  display: none;
  z-index: 60;
}
/* Unsichtbare Brücke: Ohne sie schließt das Feld, sobald die Maus den
   Abstand zwischen Knopf und Feld überquert. */
.kp-auf-feld::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -14px; height: 14px;
}
.kp-auf.offen > .kp-auf-feld { display: block; }

.kp-auf-feld a {
  display: block;
  padding: 10px 12px;
  border-radius: 7px;
  text-decoration: none;
  white-space: nowrap;
  font-size: 16px;
  line-height: 1.3;
  color: #1c1c22;
}
.kp-auf-feld a:hover,
.kp-auf-feld a:focus-visible { background: #f4f4f6; }
.kp-auf-feld a[aria-current="page"] { font-weight: 600; }

/* Zeigen genügt auf dem Desktop. Klicken geht zusätzlich (Touch-Notebooks). */
@media (min-width: 992px) and (hover: hover) {
  .kp-auf:hover > .kp-auf-feld { display: block; }
}

/* ---- Handy: kein Aufklappen, beide Punkte untereinander ---------------- */
@media screen and (max-width: 991px) {
  .kp-auf { display: contents; }
  .kp-auf-knopf { display: none; }
  .kp-auf-feld {
    display: contents;
    position: static;
    transform: none;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .kp-auf-feld::before { content: none; }
  .kp-auf-feld a { padding: 0; border-radius: 0; white-space: normal; color: inherit; font-size: inherit; }
  .kp-auf-feld a:hover { background: none; }
}

/* ---- Die Leiste bleibt einzeilig --------------------------------------
 * Das Pfeilchen macht den FAQ-Punkt rund 13 px breiter. Das genuegte, damit
 * „Unsere Kanzlei" in der Generator-Kopfzeile auf zwei Zeilen umbrach und die
 * ganze Leiste doppelt so hoch wurde — bei Georgiadis ab 1280 px, bei Brandel
 * ab 1100 px abwaerts. Die Punkte duerfen deshalb nicht mehr umbrechen, und
 * der Abstand zwischen ihnen gibt die Breite wieder her (6 x 4 px = 24 px).
 */
.kanzlei-rahmen .kopfzeile nav { gap: 18px; }
.kanzlei-rahmen .kopfzeile nav > * { white-space: nowrap; }

/* ---- Farben der Generator-Kopfzeile uebernehmen ------------------------ */
/* Dort faerbt `nav a` die Punkte; ein <button> erbt das nicht. */
/* In der Generator-Kopfzeile gibt es keine Klasse fuer Menuepunkte — dort
   setze ich Groesse und Farbe ausdruecklich, passend zu `nav` daneben. */
.kanzlei-rahmen .kopfzeile nav .kp-auf-knopf { font-size: inherit; font-weight: inherit; }
.kanzlei-rahmen.brandel .kopfzeile nav .kp-auf-knopf { color: #333; }
.kanzlei-rahmen.georgiadis .kopfzeile nav .kp-auf-knopf { color: #000; }
.kanzlei-rahmen .kopfzeile nav .kp-auf-knopf:hover,
.kanzlei-rahmen .kopfzeile nav .kp-auf.offen .kp-auf-knopf { color: var(--akzent); }