/* Aus dem Relaunch-Stylesheet uebernommen (Phase 8, B4/B5).
   Aufgeteilt an den Abschnittsgrenzen der Quelle, weil das
   Regelwerk CSS auf 400 Zeilen begrenzt. */

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.section {
    padding: var(--space-3xl) 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

/* Der Kopf steht am Dokumentanfang und laeuft nicht mit: als klebender Kopf
   lag er ueber jedem Sprungziel, weil der Browser die angesprungene
   Ueberschrift an den oberen Rand rollt und die Leiste sie verdeckte.
   relative statt gar keiner Angabe, weil die Mobilnavigation weiter unten
   mit position absolute daran haengt und sonst an den Seitenanfang spraenge. */
.site-header {
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 100;
    /* In der Quelle stand hier var(--max-width): nirgends definiert, das
       Padding fiel aus und die Navigation lief aus dem Bild. */
    padding: var(--space-md)
        max(var(--space-lg), calc((100% - var(--container-max)) / 2 + var(--space-lg)));
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 88px;
}

.logo {
    display: block;
    flex-shrink: 0;
    margin-right: var(--space-2xl);
}

.logo img {
    height: 72px;
    width: auto;
    transition: opacity var(--transition-base);
}

.logo:hover img {
    opacity: 0.8;
}

/* Die Schaltflaeche steht neben der Navigation, nicht darin: sie ist kein
   weiterer Menuepunkt, sondern der Handlungsaufruf. Auf Mobil bleibt sie
   dadurch sichtbar, auch wenn das Menue eingeklappt ist. */
.kopfknopf {
    flex-shrink: 0;
    margin-left: var(--space-lg);
}

.main-nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    list-style: none;
    margin: 0;
}

.main-nav .kopfknopf {
    color: #3d2a2e;
}

.main-nav a {
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.main-nav a:hover {
    color: var(--color-primary-dark);
}

.menu-toggle {
    display: none;
}

/* Die Schwelle steht bei 1239 und nicht bei einer runden Zahl, weil sie
   gemessen ist: mit vier Menuepunkten und der Beschriftung Freie Termine
   finden braucht die Zeile aus Logo, Navigation und Knopf 1240 Pixel. Bei
   1200 wird der rechte Rand des Knopfs abgeschnitten, bei 1160 der Text.
   Darunter uebernimmt das vorhandene Klappmenue. Vorher lag sie bei 768,
   was fuer drei kuerzere Punkte und Termin buchen reichte. */
/* Kompakter Kopf mit weiterhin 44px großen Bedienflächen.
   pgdoc://lisa-public/rules/52-gestaltung */
@media (max-width: 1239px) {
    .site-header {
        min-height: 62px;
        padding: var(--space-xs) var(--space-sm);
        column-gap: var(--space-sm);
    }

    .logo {
        margin-right: 0;
    }

    .logo img {
        height: 52px;
    }

    /* Mindestens 44 mal 44 Pixel: das Ziel wurde vorher mit 43 mal 21
       verfehlt, und auf dem Telefon ist es das einzige Bedienelement der
       Navigation. */
    .menu-toggle {
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        min-width: 44px;
        min-height: 44px;
        background: none;
        border: none;
        cursor: pointer;
        padding: var(--space-sm);
    }

    /* Drei Striche aus einem Element: die Vorlage traegt nur ein span, und
       ein einzelner Strich ist als Menuezeichen nicht zu erkennen. Die
       beiden aeusseren entstehen deshalb als Pseudoelemente. */
    .menu-toggle span {
        position: relative;
        display: block;
        width: 24px;
        height: 2px;
        background: var(--color-text);
    }

    .menu-toggle span::before,
    .menu-toggle span::after {
        content: "";
        position: absolute;
        left: 0;
        width: 24px;
        height: 2px;
        background: var(--color-text);
    }

    .menu-toggle span::before {
        top: -7px;
    }

    .menu-toggle span::after {
        top: 7px;
    }

    /* Der Buchungsknopf steht vor dem Menuesymbol, damit die wichtigste
       Handlung auch mit eingeklapptem Menue erreichbar bleibt. */
    .kopfknopf {
        order: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 0;
        flex-shrink: 1;
        margin-left: auto;
        padding-inline: var(--space-sm);
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }

    /* stylelint-disable-next-line no-duplicate-selectors -- Reihenfolge zur Kopfknopf-Regel bewusst erhalten. */
    .menu-toggle {
        order: 3;
    }

    /* Ohne Skript bleibt die Navigation sichtbar. Eingeklappt wird nur,
       wenn Skripte laufen - dann kann der Umschalter sie auch wieder
       aufklappen. Vorher war sie immer eingeklappt und die Klasse hier
       hiess is-open, waehrend navigation.js offen setzt: das Menue liess
       sich nie oeffnen. */
    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-white);
        box-shadow: var(--shadow-md);
    }

    /* Eingeklappt wird erst, wenn das Skript den Umschalter uebernommen hat
       und die Klasse am html-Element setzt. Bleibt das Skript aus - sei es
       abgeschaltet, blockiert oder fehlerhaft - bleibt die Navigation
       sichtbar. Eine Medienabfrage auf scripting reichte dafuer nicht: sie
       trifft auch dann zu, wenn das Modul gar nicht laedt. */
    .mit-menue .main-nav {
        display: none;
    }

    .mit-menue .main-nav.offen {
        display: block;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 0;
        padding: var(--space-lg);
    }

    .main-nav li {
        padding: var(--space-md) 0;
        border-bottom: 1px solid var(--color-bg-alt);
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background: var(--color-black);
    color: var(--color-white);
    padding: var(--space-3xl) 0 var(--space-xl);
}