/* ============================================================
   dsb_help.css · Stand 2026-09-19 · v1
   Gehoert nach C:\DSB_WebApp\assets\ - Dash laedt alles aus assets/
   automatisch, kein Eintrag in app.py noetig.

   ZWECK: Das "?" in Kacheln und Diagrammen (dsb_style.py v3) ist im
   Ruhezustand unsichtbar und erscheint erst, wenn die Maus die Kachel
   beruehrt. Die Erklaerung selbst zeigt sich erst beim Zeigen auf das "?".

   WARUM CSS UND NICHT DASH: Inline-Styles koennen kein :hover. Ohne diese
   Datei bleibt das "?" dauerhaft sichtbar - unschoen, aber nicht kaputt.
   ============================================================ */

/* Ruhezustand: da, aber unsichtbar. visibility/display waeren falsch -
   das Element wuerde dann beim Einblenden das Layout verschieben. */
.dsb-hilfe {
    opacity: 0;
    transition: opacity 0.14s ease-in-out;
    pointer-events: auto;     /* bleibt anklickbar, auch unsichtbar */
}

/* Maus irgendwo auf der Kachel -> "?" wird gedaempft sichtbar. */
.dsb-hat-hilfe:hover .dsb-hilfe {
    opacity: 0.5;
}

/* Maus auf dem "?" selbst -> voll sichtbar. Erst hier erscheint auch der
   Tooltip (das macht dbc.Tooltip von allein, Ziel ist der Marker). */
.dsb-hilfe:hover,
.dsb-hat-hilfe:hover .dsb-hilfe:hover {
    opacity: 1;
}

/* Tastaturbedienung: wer sich per Tab durchhangelt, soll den Marker sehen. */
.dsb-hilfe:focus,
.dsb-hilfe:focus-visible {
    opacity: 1;
    outline: 2px solid rgba(33, 48, 110, 0.35);
    outline-offset: 1px;
}

/* TOUCHGERAETE HABEN KEIN HOVER. Ohne diese Regel waere das "?" am Telefon
   nie sichtbar und die Erklaerung nicht erreichbar. Dort steht es deshalb
   dauerhaft - gedaempft, damit es die Kachel nicht dominiert. */
@media (hover: none), (pointer: coarse) {
    .dsb-hilfe {
        opacity: 0.4;
    }
}

/* Auf sehr schmalen Schirmen ist die Kachel voll - Marker etwas kleiner. */
@media (max-width: 480px) {
    .dsb-hilfe {
        width: 13px !important;
        height: 13px !important;
        font-size: 9px !important;
    }
}