/* ==========================================================================
   navigation.css — Kopfbereich und Navigationen
   Naturheilpraxis Pusteblume · Contao 5.7
   Stand: 2026-11-03

   Ersetzt: nav.css, naviControl-1-Mobile.css (Navi-/Header-Teil),
            naviControl-2.css, naviControl-3.css, naviControl-4.css,
            landscape.css

   Ladereihenfolge: font.css, main.css, navigation.css
   (main.css definiert :root und muss vorher geladen werden)

   Dateiverweise sind absolut ab Dokumentwurzel (/files/...), damit der
   Ablageort der CSS-Dateien keine Rolle spielt.

   AUFBAU
   1. Gerüst und gemeinsame Breiten
   2. Mobile Kopfzeile (Telefon + Hamburger)
   3. Off-Canvas-Menü (mmenu)
   4. Logo und Praxisname
   5. Desktop ab 1100 px
   6. Hauptnavigation Desktop
   7. Metanavigation und Instagram
   8. Sticky-Zustand Desktop
   9. RESERVE
   ========================================================================== */


/* ==========================================================================
   1. GERÜST UND GEMEINSAME BREITEN
   ========================================================================== */

:root {
    /* Höhe der schmalen Leiste mit Telefon/Hamburger */
    --kopf-leiste: 51px;
}

/* Alle Kopfleisten sollen bündig mit dem Seiteninhalt stehen. Vorher hatten
   sie unterschiedliche Werte (90 % gegen 100 %), weshalb der helle Balken
   nicht mit dem Rest der Seite abschloss.

   Nur die mobile Leiste ist fixiert und bezieht sich damit auf das
   Browserfenster — sie braucht die Layoutbreite selbst. Die übrigen Leisten
   liegen im Fluss innerhalb von #wrapper, der die Breite bereits vorgibt;
   dort wäre die Layoutbreite ein zweites Mal gerechnet (90 % von 90 %). */
#header-zeile1,
#header-zeile1-mobile,
#header-zeile2 {
    box-sizing: border-box;
}

#header-zeile1-mobile {
    width: var(--layout-breite, 100%);
    max-width: var(--layout-max, none);
    margin: 0 auto;
    left: 0;
    right: 0;
}

#header-zeile1,
#header-zeile2 {
    width: 100%;
}

/* #header ist der Platzhalter im Fluss. Auf Mobilgeräten ist nur die schmale
   Leiste fixiert, die Logo-Zeile läuft mit – das spart auf dem Handy Höhe
   und vermeidet drei gestapelte fixierte Elemente. */
#header {
    height: auto;
    padding-top: var(--kopf-leiste);
}

#header > .inside {
    position: static;
}


/* ==========================================================================
   2. MOBILE KOPFZEILE (Telefon + Hamburger)
   ========================================================================== */

#header-zeile1-mobile {
    position: fixed;
    top: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: var(--kopf-leiste);
    padding: 0 .75rem 0 0;
    /* Gleicher Ton wie die Desktop-Leiste. Vorher war sie hier kühl-hell
       (#f5f7fa) und auf dem Desktop bräunlich — zwei Farben für dieselbe
       Funktion. */
    background-color: var(--farbe-kopfleiste, #efe0bf);
}

/* Telefonnummer. Die Klasse kommt in beiden Leisten vor, mobil wie
   Desktop — die Regel gilt deshalb bewusst für beide. Vorher stand sie
   nur im Mobil-Abschnitt, weshalb die Nummer auf dem Desktop unformatiert
   als grauer Fließtext erschien. */
/* Die orange Fläche soll die Leiste voll ausfüllen, ohne Spalt oben oder
   unten. Dafür streckt sich der Telefonblock über die Leistenhöhe
   (align-self: stretch) und reicht das bis zum Absatz durch; der Text
   darin bleibt senkrecht mittig. Die übrigen Elemente der Leiste sind
   davon nicht betroffen, sie bleiben zentriert. */
.header1-tel {
    align-self: stretch;
    display: flex;
}

.header1-tel > .rte {
    display: flex;
}

.header1-tel p {
    display: flex;
    align-items: center;
    margin: 0;
    padding: .55rem .9rem;
    background-color: var(--farbe-akzent, #f7ac00);
    color: #fff;
    font-size: .95rem;
    line-height: 1.2;
    letter-spacing: .03rem;
    white-space: nowrap;
}

.header1-tel a {
    color: #fff;
}

/* Hamburger */
#naviMiniMobile {
    flex: 0 0 auto;
    line-height: 1;
}

#naviMiniMobile .fa-2x {
    color: var(--farbe-akzent, #f7ac00);
    font-size: 1.6rem;
}

/* Die Desktop-Leiste bleibt auf Mobilgeräten aus. Bisher sollte das
   "#header > div > div.header-zeile1" erledigen – dieser Selektor sucht
   aber eine Klasse, während das Element eine ID trägt, und traf deshalb
   nichts. Folge: Die Telefonnummer stand zweimal übereinander. */
#header-zeile1 {
    display: none;
}


/* ==========================================================================
   3. OFF-CANVAS-MENÜ (mmenu)
   ========================================================================== */

/* mmenu legt das Panel dauerhaft fixiert hinter die Seite (z-index 0) und
   verlässt sich darauf, dass der Seiten-Wrapper es verdeckt. Die zuständige
   Regel lautet aber ":where(.mm-slideout)" und hat damit Spezifität null –
   jede eigene Breitenangabe auf #wrapper sticht sie aus. Ist der Wrapper
   schmaler als das Fenster, scheint das Panel an den Rändern durch.
   Deshalb: unterhalb der Desktop-Grenze nutzt der Wrapper die volle Breite. */

/* Solange mmenu das Panel noch nicht übernommen hat, steht die rohe
   Linkliste im Dokumentfluss und bläht den Kopfbereich auf — gemessen
   480 px zusätzlich. mmenu setzt beim Start die Klasse "mm-menu" und
   nimmt das Element mit position:fixed aus dem Fluss. Bis dahin bleibt
   es außen vor. Ohne diese Regel hängt das Seitenlayout davon ab, dass
   JavaScript rechtzeitig durchläuft. */
#naviMobile:not(.mm-menu) {
    display: none;
}

/* mmenu setzt auch im geschlossenen Zustand einen Transform auf den
   Seiten-Wrapper. Ein Transform am Elternelement ändert den Bezugsrahmen
   für position:fixed – die fixierten Kopfleisten scrollen sonst mit weg.
   Im geöffneten Zustand greift mmenus eigene Regel mit drei Klassen und
   höherer Spezifität, die Schiebe-Animation bleibt also erhalten. */
.mm-wrapper--position-left .mm-slideout {
    transform: none;
}

.mm-page {
    background-image: none;
}


/* ==========================================================================
   4. LOGO UND PRAXISNAME
   ========================================================================== */

#header-zeile2 {
    position: static;
    background-color: var(--farbe-kopf, rgba(251, 246, 242, .95));
}

#logo {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .9rem 1rem;
}

/* Bildspalte vor die Textspalte holen – im Inhaltselement steht der Text
   zuerst, gestalterisch gehört das Logo nach vorn. */
#logo > div:nth-child(2) {
    order: -1;
    flex: 0 0 auto;
}

#logo img {
    display: block;
    width: auto;
    height: 58px;
}

#logo h2 {
    margin: 0;
    color: var(--farbe-logo, #8a7031);
    font-size: 1.15rem;
    line-height: 1.3;
    font-weight: normal;
}

#logo h3 {
    margin: .2rem 0 0;
    color: var(--farbe-logo, #8a7031);
    font-size: .9rem;
    line-height: 1.2;
    font-weight: 300;
}

/* Die Desktop-Navigationen bleiben auf Mobilgeräten aus,
   dort übernimmt das Off-Canvas-Menü. */
#nav,
#navi-desktop-meta {
    display: none;
}


/* ==========================================================================
   5. DESKTOP AB 1100 PX
   ==========================================================================
   Die Grenze liegt bewusst bei 1100 und nicht bei 1025: Bei 1100 px bleiben
   zwischen Namensblock und erstem Menüpunkt im Sticky-Zustand noch 11 px
   Luft, darunter überlappen sie. Auf Tablets im Querformat ist das
   Hamburger-Menü ohnehin die bessere Bedienung. */

@media (min-width: 1100px) {

    /* Mobile Leiste und Off-Canvas-Panel aus. Ohne Hamburger kann das Menü
       dort gar nicht geöffnet werden, das Ausblenden ist also korrekt und
       kein Notbehelf. */
    #header-zeile1-mobile,
    #naviMobile {
        display: none;
    }

    /* Der ganze Kopfbereich klebt als EIN Element, die Leisten liegen
       darin im normalen Fluss. Dadurch entfällt der Platzhalter mit
       fester Höhe ebenso wie der von Hand gesetzte Freiraum am Logo.
       position:sticky ist außerdem unempfindlich gegen den Transform,
       den mmenu auf den Seiten-Wrapper setzt — anders als fixed. */
    #header {
        position: sticky;
        top: 0;
        z-index: 99;
        height: auto;
        padding-top: 0;
    }

    /* Leiste 1: Telefon, Metanavigation, Instagram */
    #header-zeile1 {
        position: static;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 49px;
        padding: 0 1.5rem 0 0;
        background-color: var(--farbe-kopfleiste, #efe0bf);
    }

    /* Leiste 2 liegt im Fluss unter Leiste 1. Vorher lagen beide fixiert
       auf top:0 und der Freiraum wurde über "padding-top:3rem" am Logo
       von Hand nachgebildet – eine Kette, die bei jeder Änderung reißt. */
    #header-zeile2 {
        position: static;
        display: block;
    }

    #header-zeile2 > .content-text {
        margin: 0;
    }

    #logo {
        padding: .8rem 1.5rem .6rem 2rem;
    }

    #logo img {
        height: 64px;
    }

    #logo h2 {
        font-size: 1.5rem;
        line-height: 1.7rem;
    }

    #logo h3 {
        font-size: 1.2rem;
        line-height: 1.5rem;
    }
}


/* ==========================================================================
   6. HAUPTNAVIGATION DESKTOP
   ========================================================================== */

@media (min-width: 1100px) {

    #nav,
    #navi-desktop-meta {
        display: block;
    }

    /* Contaos layout.css setzt .block { overflow: hidden }, und das
       Navigationsmodul trägt diese Klasse. Weil die Menüpunkte unten
       position: relative bekommen, liegt #nav zwischen dem Untermenü
       und seinem Bezugsrahmen — ohne diese Zeile wird das Ausklapp-
       menü von "weitere Therapien" am unteren Rand abgeschnitten.
       #nav (ID) sticht .block (Klasse). */
    #nav {
        overflow: visible;
    }

    #nav.mod_navigation {
        padding: .5rem 1.5rem .5rem 2rem;
        background-color: var(--farbe-navi, #faf5f1);
        border-top: 1px solid var(--farbe-rahmen, #e7e3d6);
    }

    #nav ul.level_1 {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #nav ul.level_1 > li {
        position: relative;
        white-space: nowrap;
    }

    #nav ul.level_1 > li,
    #nav ul.level_1 > li > a,
    #nav ul.level_1 > li > strong {
        color: var(--farbe-primaer, #f47c00);
        font-size: 1.2rem;
        font-weight: 400;
        text-decoration: none;
    }

    /* Submenü ausklappen */
    #nav .level_2 {
        position: absolute;
        left: 0;
        z-index: 1001;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        list-style: none;
        opacity: 0;
        visibility: hidden;
        border: 1px solid var(--farbe-rahmen-hell, #ddd);
        border-top: 0;
        transition: opacity .2s ease 1s, visibility 0s linear 1.2s;
    }

    #nav .submenu:hover .level_2,
    #nav .submenu:focus-within .level_2 {
        z-index: 1002;
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    #nav .level_2 > li {
        padding: .5rem .6rem;
        background-color: #fff;
        white-space: nowrap;
    }

    #nav ul.level_2 > li,
    #nav ul.level_2 > li a {
        font-size: 1rem;
        text-decoration: none;
    }

    #nav .level_2 > li a:hover,
    #nav .level_2 > li a:focus {
        color: var(--farbe-logo, #8a7031);
    }
}


/* ==========================================================================
   7. METANAVIGATION UND INSTAGRAM
   ========================================================================== */

@media (min-width: 1100px) {

    #header-zeile1 > div:last-child {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .mod_customnav ul.level_1 {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mod_customnav ul li {
        font-size: .8rem;
        white-space: nowrap;
    }

    .mod_customnav ul li a:link,
    .mod_customnav ul li a:visited,
    #navi-desktop-meta > ul > li.active {
        color: var(--farbe-meta, #4d4d4b);
        font-size: .8rem;
        text-decoration: none;
    }

    /* Instagram */
    #header-zeile1 .fa-instagram {
        font-size: 1.5rem;
        color: var(--farbe-akzent, #f7ac00);
    }
}

/* Auf Mobilgeräten ist neben Telefonnummer und Hamburger kein Platz.
   Instagram ist dort über das Menü und den Footer erreichbar. */
@media (max-width: 1099.98px) {
    #header-zeile1 .fa-instagram {
        display: none;
    }
}


/* ==========================================================================
   8. STICKY-ZUSTAND DESKTOP
   ==========================================================================
   Beim Scrollen setzt das Skript im Seitenlayout die Klasse
   "scrolling_active". Dann rückt alles in eine Zeile: Logo klein,
   Praxisname zweizeilig umgebrochen, Zusatzzeilen aus, Navigation rechts.
   Gemessen: 216 px werden zu 57 px.

   Wichtig: KEINE festen Höhen mehr. Vorher stand hier "height:10rem", und
   weil der Inhalt nicht mitschrumpfte, hing die Navigation 51 px unter dem
   Kasten in der Luft. Jetzt bestimmt der Inhalt die Höhe. */

@media (min-width: 1100px) {

    #header-zeile2.scrolling_active {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        height: auto;
        padding: .45rem 1.5rem .45rem 2rem;
        border-top: 1px solid var(--farbe-rahmen, #e7e3d6);
    }

    #header-zeile2.scrolling_active > .content-text {
        flex: 0 0 auto;
    }

    #header-zeile2.scrolling_active #logo {
        align-items: center;
        gap: .9rem;
        padding: 0;
    }

    #header-zeile2.scrolling_active #logo img {
        height: 40px;
    }

    /* Der Zeilenumbruch entsteht allein über die Maximalbreite. Dadurch
       steht derselbe Text im Grundzustand einzeilig und hier zweizeilig,
       ohne dass er doppelt gepflegt werden muss. */
    #header-zeile2.scrolling_active #logo h2 {
        max-width: 150px;
        max-height: 2.4em;
        overflow: hidden;
        font-size: 1.05rem;
        line-height: 1.2;
    }

    /* "Sonja Carstensen-Plath" tritt zurück. Zwei Wege, beide greifen:
       Die max-height oben schneidet die dritte Zeile ab und wirkt sofort.
       Sobald der Name im Inhaltselement in <span class="inhaberin">
       gefasst ist, blendet ihn die Regel darunter sauber aus und der
       Zuschnitt greift gar nicht erst – dann kann max-height entfallen. */
    #header-zeile2.scrolling_active #logo h2 .inhaberin {
        display: none;
    }

    #header-zeile2.scrolling_active #logo h3 {
        display: none;
    }

    #header-zeile2.scrolling_active #nav.mod_navigation {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
        background: transparent;
        border-top: 0;
    }

    #header-zeile2.scrolling_active #nav ul.level_1 {
        justify-content: flex-end;
        gap: 1.1rem;
        flex-wrap: nowrap;
    }

    #header-zeile2.scrolling_active #nav ul.level_1 > li,
    #header-zeile2.scrolling_active #nav ul.level_1 > li > a,
    #header-zeile2.scrolling_active #nav ul.level_1 > li > strong {
        font-size: .95rem;
        line-height: 1.2;
    }

    #header-zeile2.scrolling_active #nav ul.level_2 {
        margin: 0;
    }
}

/* Zwischen 1100 und 1399 px wird es eng für Logo, Praxisname und sechs
   Menüpunkte nebeneinander. Statt den Namen auszublenden, wird er hier
   schmaler gesetzt (120 px statt 150 px, 0,9rem statt 1,05rem) und die
   Navigation etwas kleiner. Der Name bleibt damit an jeder Desktop-Breite
   sichtbar — bei 1240 px, einer verbreiteten Fensterbreite, war er sonst
   verschwunden.

   Gemessen bleibt so Luft zwischen Namensblock und erstem Menüpunkt:
   +45 px bei 1100, +90 bei 1150, +180 bei 1250, +315 bei 1399.
   Eine Navigationsschrift von 0,9rem wäre bei 1100 px auf genau 0 Pixel
   gelandet, deshalb 0,85rem.

   Wird die Hauptnavigation später verschlankt oder bekommen die
   Menüpunkte kürzere Beschriftungen, kann dieser Block entfallen. */
@media (min-width: 1100px) and (max-width: 1399.98px) {

    #header-zeile2.scrolling_active #logo h2 {
        max-width: 120px;
        font-size: .9rem;
    }

    #header-zeile2.scrolling_active #nav ul.level_1 {
        gap: .8rem;
    }

    #header-zeile2.scrolling_active #nav ul.level_1 > li,
    #header-zeile2.scrolling_active #nav ul.level_1 > li > a,
    #header-zeile2.scrolling_active #nav ul.level_1 > li > strong {
        font-size: .85rem;
    }
}


/* ==========================================================================
   9. RESERVE
   ==========================================================================
   Regeln, deren Nutzen unklar ist. Nicht gelöscht, nur geparkt.
   Bei Bedarf nach oben in den passenden Abschnitt holen.

   2026-11-03 – aus nav.css, bezog sich auf einen Menüpunkt an achter
   Stelle im mmenu. Nach dem Datenbank-Import stimmt die Position
   vermutlich nicht mehr. Vor dem Reaktivieren im Menü nachzählen.
   #mm-1 > ul > li:nth-child(8) > a.mm-next { display: none; }

   2026-11-03 – aus landscape.css, Sonderfall Smartphone quer bei
   480–640 px. Die neuen Mobile-First-Regeln decken das mit ab.
   Nur wiederbeleben, falls im Querformat konkret etwas klemmt.
   ========================================================================== */