/**
 * roundmenu.css - die runden Knoepfe unter dem Ansichtswuerfel.
 *
 * Drei Gruppen: „Messen" (Linie, Polylinie, Flaeche), „Doku" (Screenshot,
 * Drucken) und „Begehen". Maus darauf - die Untermenues fahren nacheinander
 * versetzt nach rechts heraus, ebenfalls rund.
 *
 * ⚠️ „Begehen" HAT KEIN UNTERMENUE und braucht deshalb auch keine Bruecke.
 * Seine Werkzeuge liegen auf Tasten, nicht auf Knoepfen - im Begehen-Modus
 * steuert die Maus den Blick (walkModi.js).
 *
 * ⚠️ DIE HOVER-BRUECKE IST KEIN BEIWERK. §95 hat genau diesen Fehler schon
 * einmal gekostet: zwischen Knopf und Menue lag eine tote Zone, der Zeiger
 * verlor `:hover` und das Menue klappte beim Hinuebergehen zu. `.rm-gruppe`
 * traegt deshalb ein unsichtbares Pseudoelement, das den Weg abfaengt, und
 * das Menue schliesst mit Verzoegerung (`transition-delay` auf
 * `visibility`) - eine schraege Mausbewegung schneidet sonst die Ecke.
 *
 * ⚠️ `z-index: 185` liegt zwischen Ansichtswuerfel (180) und Werkzeugleiste
 * (190). Ueber dem Wuerfel, damit ein aufgefahrenes Untermenue nicht hinter
 * ihm verschwindet; unter der Leiste, damit deren Aufklappmenues Vorrang
 * behalten - das war der Befund aus §95.2.
 */

#rundmenue {
    position: fixed;
    left: 29px;              /* mittig unter dem 108 px breiten Wuerfel */
    z-index: 185;
    display: none;           /* erst im 3D-Modus mit offenem Projekt */
    flex-direction: column;
    gap: 15px;
}

/* Sichtbar nur dort, wo auch der Wuerfel steht. */
body.mode-3d.project-open #rundmenue { display: flex; }

.rm-gruppe { position: relative; }

/* Die Bruecke: unsichtbar, faengt aber den Weg zum Untermenue ab. */
.rm-gruppe::after {
    content: '';
    position: absolute;
    left: 100%;
    top: -6px;
    width: 30px;
    height: calc(100% + 12px);
    display: none;
}
.rm-gruppe:hover::after,
.rm-gruppe.rm-offen::after { display: block; }
/* Ohne Untermenue gibt es keinen Weg abzufangen - die Bruecke faenge dort
   nur Klicks neben dem Knopf ab. */
.rm-gruppe[data-gr="gehen"]:hover::after,
.rm-gruppe[data-gr="gehen"].rm-offen::after { display: none; }

/* ---------- der Hauptknopf ---------- */
.rm-haupt {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 3px solid var(--pd-flaeche);
    cursor: pointer;
    color: var(--pd-text-auf);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    box-shadow: var(--pd-schatten-x);
    transition: transform .2s cubic-bezier(.2, 1.3, .4, 1), filter .2s;
    position: relative;
    z-index: 2;
    padding: 0;
    font-family: inherit;
}
.rm-haupt:hover  { transform: scale(1.07); filter: brightness(1.10); }
.rm-haupt:active { transform: scale(.95); }
.rm-haupt:focus-visible { outline: none; box-shadow: var(--pd-schatten-x), var(--pd-fokus); }

.rm-haupt .rm-zeichen { font-size: 27px; line-height: 1; }
.rm-haupt .rm-wort {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    line-height: 1;
    margin-top: 3px;
}

.rm-gruppe[data-gr="messen"] .rm-haupt {
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--pd-messen) 78%, var(--pd-flaeche)), var(--pd-messen));
}
.rm-gruppe[data-gr="doku"] .rm-haupt {
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--pd-doku) 78%, var(--pd-flaeche)), var(--pd-doku));
}
.rm-gruppe[data-gr="gehen"] .rm-haupt {
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--pd-ansicht) 78%, var(--pd-flaeche)), var(--pd-ansicht));
}

/* Ein laufendes Werkzeug ist am Hauptknopf zu sehen - sonst muesste man
   in der Werkzeugleiste nachsehen, was der runde Knopf gerade tut. */
.rm-gruppe.rm-aktiv .rm-haupt {
    border-color: var(--pd-warn);
    box-shadow: var(--pd-schatten-x), 0 0 0 4px color-mix(in srgb, var(--pd-warn) 35%, transparent);
}

/* ---------- die Untermenues ---------- */
.rm-sub {
    position: absolute;
    left: 88px;
    top: 12px;
    display: flex;
    gap: 11px;
    align-items: flex-start;
    pointer-events: none;
}
.rm-gruppe:hover .rm-sub,
.rm-gruppe.rm-offen .rm-sub { pointer-events: auto; }

.rm-eintrag {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    /* Startlage: klein, links, unsichtbar */
    transform: translateX(-48px) scale(.35);
    opacity: 0;
    /* Ueberschwingen am Ende - das ist der „Ausfahr"-Eindruck. */
    transition: transform .34s cubic-bezier(.18, 1.5, .45, 1),
                opacity .18s linear;
}
.rm-gruppe:hover .rm-eintrag,
.rm-gruppe.rm-offen .rm-eintrag { transform: translateX(0) scale(1); opacity: 1; }

/* Versetzt: die Knoepfe fliegen NACHEINANDER heraus, nicht als Block. */
.rm-gruppe:hover .rm-eintrag:nth-child(1),
.rm-gruppe.rm-offen .rm-eintrag:nth-child(1) { transition-delay: 0s; }
.rm-gruppe:hover .rm-eintrag:nth-child(2),
.rm-gruppe.rm-offen .rm-eintrag:nth-child(2) { transition-delay: .055s; }
.rm-gruppe:hover .rm-eintrag:nth-child(3),
.rm-gruppe.rm-offen .rm-eintrag:nth-child(3) { transition-delay: .11s; }
/* Beim Schliessen in umgekehrter Reihenfolge und schneller. */
.rm-eintrag:nth-child(1) { transition-delay: .10s; }
.rm-eintrag:nth-child(2) { transition-delay: .05s; }
.rm-eintrag:nth-child(3) { transition-delay: 0s; }

.rm-eintrag button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--pd-flaeche);
    background: var(--pd-flaeche);
    cursor: pointer;
    font-size: 23px;
    display: grid;
    place-items: center;
    box-shadow: var(--pd-schatten-m);
    transition: transform .16s, background .16s, color .16s;
    padding: 0;
}
.rm-gruppe[data-gr="messen"] .rm-eintrag button { color: var(--pd-messen); }
.rm-gruppe[data-gr="doku"]   .rm-eintrag button { color: var(--pd-doku); }
.rm-gruppe[data-gr="messen"] .rm-eintrag button:hover {
    background: var(--pd-messen); color: var(--pd-text-auf); transform: scale(1.12);
}
.rm-gruppe[data-gr="doku"] .rm-eintrag button:hover {
    background: var(--pd-doku); color: var(--pd-text-auf); transform: scale(1.12);
}
.rm-eintrag button:focus-visible { outline: none; box-shadow: var(--pd-schatten-m), var(--pd-fokus); }

/* Der aktive Eintrag bleibt gefuellt, auch ohne Maus darauf. */
.rm-gruppe[data-gr="messen"] .rm-eintrag.rm-an button {
    background: var(--pd-messen); color: var(--pd-text-auf);
}
.rm-gruppe[data-gr="doku"] .rm-eintrag.rm-an button {
    background: var(--pd-doku); color: var(--pd-text-auf);
}

.rm-eintrag span {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--pd-text);
    background: var(--pd-flaeche);
    padding: 2px 10px;
    border-radius: 9px;
    box-shadow: var(--pd-schatten);
}

/* Auf schmalen Geraeten waere die ausgefahrene Reihe zu breit: dort
   untereinander statt nebeneinander. */
@media (max-width: 760px) {
    .rm-sub { flex-direction: column; left: 84px; gap: 8px; }
    .rm-eintrag { flex-direction: row; gap: 8px; }
}