/**
 * toolbar-menus.css - die Aufklappmenues der Werkzeugleiste (§74).
 *
 * ⚠️ VERBORGEN WIRD MIT `visibility`, NICHT MIT `opacity` (§95.1). Eine
 * Ueberblendung braucht fortlaufende Bilder; bleiben die aus, haengt sie auf
 * ihrem Startwert fest und das Menue ist offen, aber unsichtbar - von aussen
 * nicht von "klappt sofort zu" zu unterscheiden.
 *
 * ⚠️ `align-self: flex-start` an `.dropdown` ist ebenfalls kein Beiwerk
 * (§95): ohne das streckt sich die Box auf die Hoehe ihrer Flex-Zeile, und
 * unter dem Knopf entsteht eine tote Zone, die schmaler ist als das Menue.
 *
 * Die Schliess-Verzoegerung von 0,25 s laesst eine schraege Mausbewegung zum
 * obersten Eintrag zu, ohne dass das Menue zufaellt.
 *
 * Aus toolbar.css herausgeloest (250-Zeilen-Limit).
 */
/* Dropdown "Listen" */
.dropdown {
    position: relative;
    display: inline-block;
    /* ⚠️ OHNE DAS SCHLIESST SICH DAS MENUE BEIM HERUNTERFAHREN.
       #toolbar ist ein Flex-Container; ohne align-self streckt sich die
       Dropdown-Box auf die Hoehe ihrer Flex-Zeile. Sitzt in derselben Zeile
       ein hohes Element - #font-size-control und #line-width-control sind
       44 px hoch, ein .tool-btn nur 31 px -, entsteht unter dem Button eine
       13 px hohe tote Zone: sie gehoert noch zur Dropdown-Box, ist aber nur
       so breit wie der Button (89 px), waehrend das Menue 162 px breit ist.
       Wer schraeg auf den ersten Menuepunkt zielt, verlaesst dabei beide
       Boxen, :hover faellt weg und das Menue klappt zu.
       Gemessen ueber mehrere Fensterbreiten: Luecke 13 px bei 1280 und
       2560 px, 0 px bei 1440/1600/1920 - es haengt allein daran, ob der
       Zeilenumbruch ein hohes Element neben das Dropdown legt. Deshalb trat
       es im Vollbild auf und im Fenster nicht. */
    align-self: flex-start;
}

.dropdown-content {
    /* Nicht display:none - siehe Schliess-Verzoegerung unten. */
    display: block;
    visibility: hidden;
    /* Die Sichtbarkeit wechselt erst nach 0,25 s zurueck auf hidden. Damit
       ueberlebt das Menue ein kurzes Verlassen des Hover-Bereichs. Noetig,
       weil ein Menue breiter ist als sein Button: eine schraege Mausbewegung
       zum rechten (bzw. bei .dropdown-right linken) Rand des obersten
       Eintrags schneidet sonst die Ecke und verlaesst beide Boxen.
       Verborgen bleibt es dabei echt verborgen - visibility:hidden nimmt das
       Menue aus der Trefferpruefung, es faengt also keine Klicks ab.

       ⚠️ KEINE opacity-UEBERBLENDUNG HIER. Der erste Anlauf hatte
       zusaetzlich "opacity:0" mit "opacity .12s linear". Am laufenden System
       gemessen: bei :hover stand visibility bereits auf visible, opacity aber
       weiterhin auf 0 - das Menue war offen und trotzdem unsichtbar. Eine
       Ueberblendung braucht fortlaufende Bilder; bleiben die aus, haengt sie
       auf ihrem Startwert fest. visibility ist ein harter Umschalter und
       kennt dieses Problem nicht. Sie allein verbirgt vollstaendig - eine
       zweite, zerbrechliche Angabe daneben bringt keinen Gewinn. */
    transition: visibility 0s linear 0.25s;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--pd-flaeche);
    backdrop-filter: blur(10px);
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(12,35,64,0.14);
    border-radius: 6px;
    border: 1px solid var(--pd-rahmen-fein);
    z-index: 1000;
    padding: 5px 0;
}

.dropdown:hover .dropdown-content {
    visibility: visible;
    transition-delay: 0s;   /* aufklappen ohne Verzoegerung */
}

.dropdown-item {
    padding: 9px 14px;
    color: var(--pd-text-n);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

.dropdown-item:hover {
    background: var(--pd-doku-b);
    color: var(--pd-text);
}

.dropdown-item input[type="checkbox"] {
    cursor: pointer;
}

/* Aktiver Zustand für Dropdown-Items (z.B. Volumenkörper-Auswahlmodus) */
.dropdown-item.active {
    background: var(--pd-gefahr-b);
    color: var(--pd-text);
}

/* Vollbild + Logout als Paar ganz nach rechts schieben (flex margin).
   margin-left:auto sitzt am Vollbild-Button; Logout folgt direkt rechts daneben. */
.toolbar-fullscreen {
    margin-left: auto;
}

/* Beginn der rechten Toolbar-Gruppe (Dropdowns + Zurück/Vor + Logout) */
.tb-right-start {
    margin-left: auto;
}

/* Rechtsbuendige Dropdowns oeffnen nach links, damit sie nicht ueber den
   Bildschirmrand hinauslaufen. */
.dropdown-content.dropdown-right {
    left: auto;
    right: 0;
}

/* Lange Menues scrollen (§357). Gemeldet am 05.10.2026: „Mach das Extras
   Menue bitte scrollbar, es wird zu lang." Die Hoehe richtet sich nach dem
   Fenster, nicht nach einer festen Zahl - auf einem Laptop ist weniger Platz
   als auf dem Arbeitsplatz. 70 px lassen die Werkzeugleiste darueber frei.
   ⚠️ overscroll-behavior: das Mausrad am Listenende dreht sonst die Kamera
   im Bild darunter. */
.dropdown-content.dropdown-scroll {
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    overscroll-behavior: contain;
}