/* =====================================================================
   archivisu - Untermenue unter "Leistungen"

   Am Rechner klappt die Liste auf, sobald man ueber den Punkt faehrt;
   am Handy beim Antippen. "Leistungen" bleibt am Rechner ein Link auf
   die Uebersicht. Am Handy uebernimmt der Punkt das Auf- und Zuklappen
   - dort steht "Alle Leistungen" als erster Eintrag in der Liste.

   Diese Datei liegt bewusst neben kopf.css: ihre Regeln sind rein
   zusaetzlich und stoeren deshalb weder die Startseite, die ihre
   Kopfzeile selbst mitbringt, noch die Unterseiten.
   ===================================================================== */

.unter{position:relative;display:flex;align-items:center}
.unter-kopf{display:inline-flex;align-items:center;gap:6px}
.unter-kopf .pfeil{flex:0 0 auto;width:10px;height:7px;
  transition:transform .25s cubic-bezier(.4,0,.2,1)}
.unter:hover .unter-kopf .pfeil,
.unter:focus-within .unter-kopf .pfeil{transform:rotate(180deg)}

/* ------------------------- am Rechner ------------------------------- */
@media (min-width:861px){
  #nav .unterliste{position:absolute;top:100%;left:-14px;z-index:45;min-width:238px;
    display:flex;flex-direction:column;padding:8px 0;
    background:#141414;border:1px solid var(--invert-line,#2E2E2E);
    box-shadow:0 22px 48px rgba(0,0,0,.45);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .2s ease,transform .2s ease,visibility 0s .2s}
  #nav .unter:hover .unterliste,
  #nav .unter:focus-within .unterliste{opacity:1;visibility:visible;transform:none;
    transition:opacity .2s ease,transform .2s ease,visibility 0s 0s}
  /* Die Luecke zwischen Punkt und Tafel ueberbruecken, damit die Maus
     auf dem Weg nach unten nicht aus dem Bereich faellt. */
  .unter::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
  #nav .unterliste a{padding:9px 18px;font-size:14.5px;color:#D6D6D6;white-space:nowrap;
    font-weight:400;background:none;margin:0;border:0;
    transition:background-color .18s,color .18s}
  #nav .unterliste a:hover{background:#1E1E1E;color:#FFFFFF}
  #nav .unterliste a.on{color:#FFFFFF;background:var(--accent,#991B35)}
}

/* -------------------------- am Handy -------------------------------- */
@media (max-width:860px){
  .unter{display:block;position:static}
  .unter-kopf{display:flex;align-items:center;justify-content:space-between;width:100%}
  .unter-kopf .pfeil{width:14px;height:10px}
  .unter.auf .unter-kopf .pfeil{transform:rotate(180deg)}
  #nav .unterliste{display:none;flex-direction:column}
  #nav .unter.auf .unterliste{display:flex}
  #nav .unterliste a{font-family:var(--body,system-ui,sans-serif);font-size:17px;
    font-weight:400;letter-spacing:0;color:#C9C9C9;
    padding:13px 0 13px 18px;margin:0;border:0;background:none}
  #nav .unterliste a:first-child{padding-top:16px}
  #nav .unterliste a:last-child{padding-bottom:18px}
  #nav .unterliste a.on{color:#E8456A;background:none}
}

/* Nach dem Antippen bleibt ein Punkt am Handy im hover-Zustand haengen.
   Die burgundy Flaeche, die am Rechner den aktiven Punkt markiert, darf
   dort nicht auftauchen - am Handy markiert ihn die Schriftfarbe. */
@media (max-width:860px){
  #nav a.on,#nav a.on:hover{background:none;color:#E8456A}
  #nav .unterliste a.on,#nav .unterliste a.on:hover{background:none;color:#E8456A}
}