/* menue.css — das Menue auf dem Handy.
 *
 * Warum es das gibt: Die Regeln fuer Kopfleiste und Schublade standen bis zum
 * 18.08.2026 in zehn <style>-Bloecken, einmal je Seite. Wer die Bedienung auf
 * dem Handy aendern wollte, musste zehn Stellen treffen und traf neun.
 *
 * Die Datei greift nur unter 768 px und nur, wenn die Seite eine Seitenleiste
 * mit den Kennungen sidebar / mobileMenuBtn traegt. Sie laedt nach dem
 * Seiten-CSS, deshalb gewinnt sie ohne !important.
 */

@media (max-width: 768px) {

    /* --- Kopfleiste: Logo UND Name -------------------------------------- */
    /* Das Logo war hier bis zum 03.09.2026 ausgeblendet, mit dem Argument, es
       sage nichts, was der Name daneben nicht schon sagt. Auf dem Telefon war
       damit aber genau das weg, woran man die Seite erkennt: In der Leiste
       stand nur noch "Digitale Manufaktur" als Text. Es steht wieder da, 30 px
       hoch statt 36 - schmal genug, dass der Name daneben in eine Zeile passt. */
    .mobile-topbar .mobile-logo img {
        display: block;
        height: 30px;
        width: auto;
        flex: 0 0 auto;
    }

    .mobile-topbar {
        height: 56px;
        padding: 0 0.75rem 0 1rem;
    }
    .mobile-topbar .mobile-logo {
        gap: 0.5rem;
        min-width: 0;
    }
    /* Der Name muss schrumpfen und notfalls kuerzen duerfen: Neben dem Logo und
       dem 44 px breiten Menueknopf bleiben auf einem 360-px-Geraet keine
       200 px uebrig, und ohne min-width:0 schiebt ein Flex-Kind ueber den Rand
       hinaus, statt sich zu kuerzen. */
    .mobile-topbar .mobile-logo span {
        font-size: 0.98rem;
        color: var(--gold, #d4a574);
        letter-spacing: 0.01em;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* --- Schaltflaeche: Balken werden beim Oeffnen zum Kreuz ------------ */
    .mobile-menu-btn {
        width: 44px;
        height: 44px;
        gap: 5px;
        position: relative;
    }
    .mobile-menu-btn span {
        transition: transform 0.25s ease, opacity 0.2s ease;
        transform-origin: center;
    }
    .mobile-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .mobile-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* --- Schublade ------------------------------------------------------ */
    /* Das Logo stand hier 180 px hoch, bevor der erste Menuepunkt kam. Auf
       einem Telefon ist das die halbe sichtbare Liste. */
    .sidebar .sidebar-logo { display: none; }

    .sidebar {
        width: min(320px, 88vw);
        padding: 0 0 1.25rem;
        -webkit-overflow-scrolling: touch;
    }

    /* Eigene Kopfzeile mit Schliessen-Kreuz. Bisher ging die Schublade nur
       ueber den Schleier daneben oder Escape wieder zu — beides findet auf
       dem Telefon niemand. */
    .menue-kopf {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        padding: 0 0.75rem 0 1.25rem;
        border-bottom: 1px solid var(--card-border, rgba(169,137,74,0.29));
        margin-bottom: 0.75rem;
        position: sticky;
        top: 0;
        background: var(--sidebar-bg, #0d1626);
        z-index: 2;
    }
    .menue-kopf span {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--gold, #d4a574);
    }
    .menue-zu {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid var(--card-border, rgba(169,137,74,0.4));
        border-radius: 10px;
        color: var(--gold, #d4a574);
        font-size: 1.35rem;
        line-height: 1;
        cursor: pointer;
    }

    /* Fingerkuppen sind rund 9 mm breit. 0,5 rem Polsterung ergaben knapp
       32 px hohe Ziele, darunter liegen die Punkte enger als der Finger. */
    .sidebar .nav-group { margin-bottom: 0.4rem; padding: 0 0.6rem; }
    .sidebar .nav-group-label { padding: 0 0.65rem; margin-bottom: 0.15rem; }
    .sidebar .sidebar-nav a {
        min-height: 46px;
        display: flex;
        align-items: center;
        padding: 0.55rem 0.9rem;
        font-size: 1rem;
        border-radius: 10px;
    }
    .sidebar .sidebar-legal { display: flex; gap: 0.5rem; }
    .sidebar .sidebar-legal a {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        padding: 0.5rem;
        border: 1px solid var(--card-border, rgba(169,137,74,0.29));
        border-radius: 10px;
        font-size: 0.85rem;
    }
    .sidebar .sidebar-bottom { padding: 1rem 0.9rem 0; }
    .sidebar .lang-btn { min-height: 44px; }
    .sidebar .sound-toggle { min-height: 44px; }
}

/* Auf dem Schreibtisch bleibt alles wie es war: Die Kopfzeile der Schublade
   gehoert dem Handy und wird hier gar nicht erst gezeigt. */
@media (min-width: 769px) {
    .menue-kopf { display: none; }
}

/* ================= Sprachschalter, immer sichtbar =====================
   Er lag bis zum 03.09.2026 nur ganz unten in der Schublade: auf dem Telefon
   hinter dem Menueknopf, auf dem Laptop unter der Falz. Wer die Seite auf
   Englisch lesen will, muss den Schalter sehen, ohne ihn zu suchen.

   Zwei Plaetze, einer je Bildschirmbreite - deshalb steht diese Regel
   ausserhalb des Handy-Blocks weiter oben:
     bis 768 px   in der Kopfleiste, links vom Menueknopf
     ab  769 px   oben rechts in der Ecke, ueber dem Inhalt
   Die Schublade behaelt ihren eigenen Schalter; alle sind verdrahtet. */

.sprachschalter {
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--card-border, rgba(169,137,74,0.34));
    border-radius: 8px;
    background: rgba(20, 18, 15, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.sprachschalter button {
    min-width: 34px;
    padding: 0.3rem 0.45rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-dim, #a89a80);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    cursor: pointer;
}
.sprachschalter button:hover { color: var(--gold, #d4a574); }
.sprachschalter button.active {
    background: var(--gold, #d4a574);
    color: #14120f;
}
.sprachschalter button:focus-visible {
    outline: 2px solid var(--gold, #d4a574);
    outline-offset: 2px;
}

/* Ecke oben rechts. z-index unter der Schublade (die liegt bei 200), damit er
   nicht ueber dem geoeffneten Menue schwebt. */
.sprachschalter-ecke {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 90;
}
.sprachschalter-leiste { display: none; }

@media (max-width: 768px) {
    .sprachschalter-ecke { display: none; }
    .sprachschalter-leiste { display: flex; margin-left: auto; }
    /* Der Name in der Kopfleiste teilt sich den Platz jetzt mit dem Schalter. */
    .mobile-topbar .mobile-logo { margin-right: 0.5rem; }
}