/* ==========================================================================
   MOBILE-/TABLET-NAVIGATION (Hamburger)  bis 1279px
   Aenderungswunsch 2026-06-19: Umschaltpunkt von 990px auf 1279px angehoben,
   da die Kopfleiste mit groesserem Logo + Sprachwahl auf Tablets/kleineren
   Desktops sonst unschoen umbricht. Es wird nur das Desktop-Hauptmenue (.c7)
   ausgeblendet; Such-Icon, Sprachwahl (Flaggen) und Social-Icons (.c3) bleiben
   sichtbar.
   ========================================================================== */
@media (max-width: 1279px) {

    header,
    header .header {
        position: static!important;
    }

    /* Desktop-Hauptmenue aus, Hamburger an */
    header .c7 { display:none; }
    .navbar-toggle {display:block!important;}

    /* Logo links floaten (das Grid floatet erst ab 992px -> sonst Block ueber
       voller Breite und die Icons rutschen darunter). */
    .header .c2 { float:left; width:auto; margin:0 0 0 10px; }

    /* Such-Icon + Sprachwahl + Social in EINER Zeile, rechts, links neben dem
       (absolut positionierten) Hamburger-Button. Sprach-Toggle kompakt
       (nur Flagge + Caret), damit alles in eine Zeile passt. */
    .header .c3 {
        position: static !important;
        float: right;
        clear: none;
        width: auto !important;
        text-align: right;
        margin: 0 72px 0 0;   /* genug Abstand zum Hamburger (right:20px, ~44px breit) */
        white-space: nowrap;
        top: auto;
    }
    .header .c3 ul.nav.right { display:inline-block; margin:0; padding:0; white-space:nowrap; }
    .header .c3 ul.nav.right > li { display:inline-block; vertical-align:middle; margin:0 6px; border:0; float:none; }
    .header .c3 .lang-switch .lang-switch-current { display:none; }   /* Text "Deutsch" im Toggle ausblenden -> kompakt */

    /* Mobiles Menue: unter die Kopfzeile, volle Breite, DECKEND und ueber dem
       Seiteninhalt (sonst scheinen die Fly-In-/Teaser-Elemente der Startseite
       durch). Vertikale Liste statt Spalten. */
    #mobi-navbar {
        clear: both;
        width: 100%;
        margin: 10px 0 0 0;
        background: #fff;
        position: relative;
        z-index: 1000;
    }
    #mobi-navbar.in,
    #mobi-navbar.in .nav li,
    #mobi-navbar.in .nav {display:block!important;}
    #mobi-navbar .nav > li { display:block!important; float:none!important; }   /* untereinander, nicht als Spalten */
    #mobi-navbar .open ul.dropdown-menu {display:inline !important;}

    .navbar-collapse.in {
        overflow-y: hidden;
    }

    #mobi-navbar ul {
        -webkit-box-shadow:none!important;
        box-shadow:none!important;
    }

    #mobi-navbar .dropdown-menu {
        position: static;
        float: none;
        min-width: 160px;
        margin: 0;
        font-size: 1em;
        text-align: left;
        list-style: none;
        background-color: #fff;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border: 0;
        -webkit-box-shadow:none!important;
        box-shadow:none!important;
        padding: 0;   /* Einrueckung wird explizit je Ebene am Link gesetzt (s.u.) */
        text-transform: none;
    }
    /* Hierarchie sichtbar machen + touch-freundliche Abstaende:
       Top-Ebene buendig + fett + groesserer vertikaler Abstand, Unterpunkte
       eingerueckt mit ausreichend Tap-Hoehe. */
    #mobi-navbar .navbar-nav > li { margin: 2px 0; }
    #mobi-navbar .navbar-nav > li > a {
        display: block;
        padding: 12px 0;
        font-weight: 600;
        line-height: 1.3;
    }
    #mobi-navbar .nav .dropdown-menu li li {
        padding: 0;
    }
    /* Ebene 2: explizit 18px eingerueckt */
    #mobi-navbar .navbar-nav .dropdown-menu > li > a {
        display: block;
        padding: 10px 15px 10px 18px;
        line-height: 1.3;
    }
    /* Ebene 3 (z. B. Schwarzwald -> Spiegelhalder-Sammlung/Uhren):
       deutlich staerker eingerueckt (44px), kompakter, naeher an der Eltern-
       Seite (negativer oberer Abstand), kleinere Schrift. */
    #mobi-navbar .dropdown-menu .dropdown-menu {
        margin: -8px 0 6px 0;
    }
    #mobi-navbar .dropdown-menu .dropdown-menu > li > a {
        display: block;
        font-size: 0.85em;
        padding: 5px 15px 5px 44px;
        font-weight: 400;
    }
    #mobi-navbar .dropdown-menu > .active > a {background:#ccc;background-image:none;
    }
}

/* ==========================================================================
   FUSSLEISTE mobil  (weiterhin erst ab Smartphone-Breite)
   ========================================================================== */
@media (max-width: 990px) {

    body {font-size: 1em; }

    footer hr, footer .container:first-child { display: block;}
    footer hr {width:92%;margin:1em 4%;}
    footer .container { padding: 0 10px;}
    footer > div:first-child div,
    footer nav {display:block}
    footer > div:first-child div:nth-child(5) {border-top:1px solid #fff;margin-top: 1em;padding-top: 1em;}
    footer > div:first-child div.logos div {display:inline-block;vertical-align:center;width:45%}
    footer > div:first-child a,
    footer .nav.right a {display: block;  color: #fff;  background: none; padding: 10px;border: 1px solid #666;border-radius: 4px;margin: 5px auto;}
    footer .nav.right a {width:100%;margin:0;}
    footer .nav.right li {
        margin: 0 0 10px 0;
        display: block;
    }
    footer > div:first-child div.logos div a img {padding: 10px; min-width:60px;max-width:100%;height:auto;max-height: 80px;}
    footer > div:first-child div.logos div:last-child {margin: 1em 0 0 0;width:90%;}

}