/* ============================================================
   SMARTPHONE-OPTIMIERUNG (mobile-opt.css) — 2026-07
   Zentrale Datei fuer alle Seiten (ausser der deutschen Startseite
   index.php, die dieselben Fixes inline mitbringt).

   Behebt site-weit:
   - kaputtes/fehlendes Mobilmenue (rd-navbar erzeugt nur eine tote
     blaue Leiste; die eigentliche <nav> ist display:none)
   - Blocksatz-Fliesstext (.inset) -> linksbuendig

   Der zugehoerige Hamburger-Button + Toggle + die Zoom-Freigabe
   kommen aus js/mobile-opt.js.

   Alle Regeln greifen nur bei <= 767px. Desktop bleibt unveraendert.
   ============================================================ */

/* Hamburger-Button standardmaessig ausblenden (nur mobil sichtbar) */
.m-nav-toggle { display: none; }

/* ============================================================
   SEO-H1-Angleichung (2026-07): Die inhaltliche Hauptueberschrift
   jeder Seite wurde aus SEO-Gruenden von h2/h3 auf h1 umgestellt
   (vorher war das Logo die h1). Diese Regeln lassen die neuen h1
   exakt wie die bisherigen h2/h3 aussehen. Gilt auf allen Breiten.
   ============================================================ */
.camera_caption h1 { font-size: 37px; line-height: 1.1; margin: 0; }
h1.h1-like-h2 { font-size: 37px; }
h1.h1-like-h3 { font-size: 36px; }
@media (max-width: 767px) {
    .camera_caption h1 { font-size: 25px; }
    h1.h1-like-h2 { font-size: 25px; }
    h1.h1-like-h3 { font-size: 31px; }
}

@media (max-width: 767px) {

    /* ---- Kaputtes rd-navbar Mobile-Panel (blaue Leiste) abschalten ---- */
    .rd-mobilepanel,
    .rd-mobilepanel_toggle,
    .rd-mobilepanel_title { display: none !important; }

    /* ---- Header als Kopfleiste; .container darf kein Containing-Block
       sein (der GPU-Hack `header *` setzt transform/perspective).
       So wird der <header> selbst Containing-Block von Button und Nav. */
    header .container {
        position: static !important;
        transform: none !important;
        perspective: none !important;
        will-change: auto !important;
        filter: none !important;
    }
    header .navbar-brand { float: none; margin: 0; }
    header .navbar-brand img { max-height: 40px; width: auto; height: auto; }

    /* ---- Eigener Hamburger-Button (oben rechts, vertikal zentriert) ---- */
    .m-nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        padding: 9px;
        margin: 0;
        background: transparent;
        border: 0;
        cursor: pointer;
        z-index: 10001;
        -webkit-tap-highlight-color: transparent;
    }
    .m-nav-toggle span {
        display: block;
        width: 26px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: transform .3s ease, opacity .3s ease;
    }
    header.m-open .m-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    header.m-open .m-nav-toggle span:nth-child(2) { opacity: 0; }
    header.m-open .m-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ---- Navigation als aufklappbares Panel unter dem Header ---- */
    header nav.navbar {
        display: block !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        /* !important noetig, da .navbar-default background:transparent!important setzt */
        background: rgba(10, 12, 16, 0.97) !important;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        max-height: calc(100vh - 74px);
        overflow-y: auto;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
    }
    header.m-open nav.navbar {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity .28s ease, transform .28s ease, visibility 0s linear 0s;
    }
    header nav.navbar .navbar-nav {
        float: none !important;
        margin: 0 !important;
        padding: 4px 0 !important;
        width: 100%;
        text-align: left !important; /* header setzt center – hier zuruecksetzen */
    }
    header nav.navbar .navbar-nav > li {
        float: none !important;
        display: block !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    header nav.navbar .navbar-nav > li:last-child { border-bottom: 0; }
    header nav.navbar .navbar-nav > li > a {
        display: block !important;
        color: #fff !important;
        padding: 15px 22px !important;
        font-size: 17px !important;
        line-height: 1.3 !important;
        text-shadow: none !important;
        background: transparent !important;
    }
    header nav.navbar .navbar-nav > li > a:hover,
    header nav.navbar .navbar-nav > li.active > a {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    /* Untermenue: immer ausgeklappt, eingerueckt */
    header nav.navbar .dropdown-menu {
        display: block !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(0, 0, 0, 0.25) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    header nav.navbar .dropdown-menu > li > a {
        color: rgba(255, 255, 255, 0.85) !important;
        padding: 12px 22px 12px 42px !important;
        font-size: 15px !important;
    }
    /* Superfish-/Bootstrap-Pfeile + Dropdown-Dreieck ausblenden */
    header nav.navbar .sf-with-ul:after,
    header nav.navbar .sf-sub-indicator,
    header nav.navbar .caret,
    header nav.navbar b.caret,
    header nav.navbar .dropdown-menu:before,
    header nav.navbar .dropdown-menu:after { display: none !important; content: none !important; }

    /* ---- Inhalt-Polish: Blocksatz -> linksbuendig (Lesbarkeit) ---- */
    .inset { text-align: left !important; }
}