/* ==========================================================================
   layout.css – Kopfbereich, Navigation, Inhaltsraster, Fussbereich
   ========================================================================== */

.seite {
    display: flex;
    flex-direction: column;

    /* 100vh rechnet auf dem Telefon mit dem Fenster ohne Adressleiste - die
       Seite ist dort also hoeher als das, was man sieht. 100dvh nimmt den
       Ausschnitt, der wirklich sichtbar ist. Die vh-Zeile bleibt als
       Rueckfall fuer Browser ohne dvh davor stehen. */
    min-height: 100vh;
    min-height: 100dvh;
}

.inhalt-container {
    width: 100%;
    max-width: var(--breite-inhalt);
    margin: 0 auto;
    padding: 0 var(--abstand-m);
}

.inhalt-container--weit {
    max-width: var(--breite-weit);
}

/* --- Kopfbereich --------------------------------------------------------- */

.kopf {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--farbe-hell);
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
}

.kopf__inner {
    display: flex;
    align-items: center;
    gap: var(--abstand-m);
    max-width: var(--breite-inhalt);
    margin: 0 auto;
    padding: 0 var(--abstand-m);
    min-height: 72px;
}

.kopf__logo img {
    max-height: 56px;
    width: auto;
}

.kopf__navigation {
    flex: 1;
}

.kopf__menue-schalter {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.kopf__menue-schalter span,
.kopf__menue-schalter span::before,
.kopf__menue-schalter span::after {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background-color: var(--farbe-primaer);
    transition: transform var(--transition), opacity var(--transition);
}

.kopf__menue-schalter span {
    position: relative;
    margin: 0 auto;
}

.kopf__menue-schalter span::before,
.kopf__menue-schalter span::after {
    content: "";
    position: absolute;
    left: 0;
}

.kopf__menue-schalter span::before { top: -8px; }
.kopf__menue-schalter span::after  { top:  8px; }

.kopf__menue-schalter[aria-expanded="true"] span         { background-color: transparent; }
.kopf__menue-schalter[aria-expanded="true"] span::before  { transform: translateY(8px) rotate(45deg); }
.kopf__menue-schalter[aria-expanded="true"] span::after   { transform: translateY(-8px) rotate(-45deg); }

/* --- Hauptnavigation ----------------------------------------------------- */

.navigation__liste {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigation__liste li {
    position: relative;
    margin: 0;
}

.navigation__liste a {
    display: inline-block;
    padding: 10px;
    color: var(--farbe-text);
    font-size: 15px;
    font-weight: 300;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
}

.navigation__liste a:hover,
.navigation__liste a:focus,
.navigation__liste .ist-aktiv > a {
    color: var(--farbe-primaer);
}

.navigation__unterliste {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 230px;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--farbe-hell);
    border-bottom: 4px solid rgba(32, 71, 126, .2);
    box-shadow: 5px 5px 30px rgba(0, 0, 0, .15);
}

/* Das Schweben gilt nur dort, wo es ein Zeigegeraet gibt. Auf einem
   Touch-Geraet bliebe die Schwebespur nach dem Antippen haengen und hielte
   ein Untermenue offen, das der Tipp daneben gerade geschlossen hat. */
@media (hover: hover) {
    .navigation__liste li:hover > .navigation__unterliste {
        display: block;
    }
}

/* Der Fokus oeffnet ueberall - so kommt die Tastatur in die Untermenues.
   .ist-aufgeklappt setzt js/seite.js: Mit dem Finger gibt es kein Schweben,
   dort oeffnet der erste Tipp das Untermenue und erst der zweite folgt dem
   Verweis. */
.navigation__liste li:focus-within > .navigation__unterliste,
.navigation__liste li.ist-aufgeklappt > .navigation__unterliste {
    display: block;
}

.navigation__unterliste li {
    display: block;
}

.navigation__unterliste a {
    display: block;
    padding: 8px 20px;
    letter-spacing: .08em;
}

/* --- Kopfbild ------------------------------------------------------------ */

/* Gleich hoch auf allen Seiten - Startseite wie Unterseite. Frueher war es
   auf den Unterseiten nur halb so hoch; das liess die Seiten unterschiedlich
   beginnen, ohne dass die kleinere Fassung etwas gewonnen haette. */
.kopfbild {
    height: 420px;
    background-image: url("/assets/img/header.jpg");
    background-size: cover;
    background-position: center 50%;
    background-repeat: no-repeat;
}

/* Eigenes Kopfbild je Bereich - so hielt es der bisherige Auftritt: "Ueber
   uns" und "Technik" hatten dort ein anderes Bild als der Rest der Seite.

   Die Regeln stehen bewusst nach .kopfbild und haben dieselbe Staerke; es
   entscheidet die Reihenfolge. Wer eine weitere Kategorie will, ergaenzt hier
   eine Zeile und in beiden Grundgeruesten den Bereich (siehe dort).

   Neben dem Bild darf hier auch der Bildausschnitt abweichen: das Bild von
   "Ueber uns" sitzt tiefer, damit Fahrzeuge und Haus vollstaendig im
   Ausschnitt liegen und nicht unten abgeschnitten werden. */
.kopfbild--ueber-uns {
    background-image: url("/assets/img/header-ueber-uns.jpg");
    background-position: center 64%;
}

.kopfbild--technik { background-image: url("/assets/img/header-technik.jpg"); }

/* --- Titelleiste / Brotkrumen -------------------------------------------- */

.titelleiste {
    background-color: var(--farbe-primaer);
    color: var(--farbe-hell);
}

.titelleiste__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-s);
    max-width: var(--breite-inhalt);
    margin: 0 auto;
    padding: 10px var(--abstand-m);
}

.titelleiste__titel {
    font-family: var(--schrift-text);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--farbe-hell);
}

/* Der Verweis ist der ganze Inhalt seines Feldes, nicht Teil eines Satzes -
   also ein Ziel fuer sich, und mit 19 Pixeln zu flach. */
.titelleiste__titel a {
    color: inherit;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
}

.brotkrumen {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-xs);
    font-size: 14px;
}

.brotkrumen li + li::before {
    content: "\203A";
    margin-right: var(--abstand-xs);
    opacity: .7;
}

.brotkrumen a {
    color: rgba(255, 255, 255, .85);
}

.brotkrumen a:hover {
    color: var(--farbe-hell);
}

/* --- Hauptbereich -------------------------------------------------------- */

.hauptbereich {
    flex: 1;
    padding: var(--abstand-xl) 0;
}

.abschnitt {
    margin-bottom: var(--abstand-xl);
}

.abschnitt:last-child {
    margin-bottom: 0;
}

/* --- Raster -------------------------------------------------------------- */

.raster {
    display: grid;
    gap: var(--abstand-l);
}

.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- Fussbereich --------------------------------------------------------- */

.fuss {
    background-color: var(--farbe-dunkel);
    color: var(--farbe-hell);
    padding: var(--abstand-xl) 0 var(--abstand-l);
}

.fuss a {
    color: var(--farbe-hell);
}

.fuss__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--abstand-l);
    max-width: var(--breite-inhalt);
    margin: 0 auto;
    padding: 0 var(--abstand-m);
}

.fuss h3 {
    color: var(--farbe-hell);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.fuss__liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Eine Navigationsliste, kein Satz - die Ausnahme fuer Verweise im Fliesstext
   greift hier nicht. Die Eintraege waren 19 Pixel hoch und senkrecht nur
   durch die Zeilenhoehe getrennt; im Fuss ist Platz genug. */
.fuss__liste a {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
}

.fuss__logo img {
    max-width: 173px;
}

.fuss__abschluss {
    max-width: var(--breite-inhalt);
    margin: var(--abstand-l) auto 0;
    padding: var(--abstand-m) var(--abstand-m) 0;
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-m);
    justify-content: space-between;
}

/* Die Versionsnummer steht dezenter als die Rechtsverweise daneben - sie ist
   eine Angabe fuer den Betrieb, kein Navigationsziel. */
.fuss__version {
    opacity: .65;
    white-space: nowrap;
}

/* --- Anpassung an kleinere Bildschirme ----------------------------------- */

/* Hier klappt auch das Menue um - nicht erst bei 767 wie alles Uebrige.
   Diese Grenze ergibt sich naemlich nicht aus der Bildschirmgroesse, sondern
   aus der Leiste selbst: Ihre acht Eintraege brauchen zusammen 780 Pixel,
   dazu kommen Logo (133), Luecke (16) und Innenabstand (32).

   Frueher stand der Schalter bei 767. Zwischen 768 und 960 Pixeln war er
   deshalb schon fort, die Leiste aber noch zu breit: Sie brach zweizeilig
   um, und das Untermenue eines Eintrags der ersten Zeile legte sich ueber
   die zweite - "Intern" war dort nicht erreichbar. Das traf genau das
   Tablet im Hochformat.

   Gerechnet passte sie ab 961 Pixeln in eine Zeile. Genommen sind trotzdem
   diese 1023, aus zwei Gruenden:

   Erstens rechnen Media Queries die Bildlaufleiste mit, das Layout aber
   nicht: Bei einem 992 Pixel breiten Fenster greift "max-width: 991px"
   nicht mehr, zum Setzen stehen aber nur 977 Pixel bereit. Der Leiste
   blieben dort 796 Pixel - passend, aber nur 16 Pixel ueber dem Bedarf.
   Zweitens ist .inhalt-container ab 990 Pixeln gedeckelt. Erst oberhalb
   davon hat die Leiste immer dieselben 809 Pixel, gleich wie breit das
   Fenster ist und wie breit die Bildlaufleiste des Systems.

   Mit 1023 erscheint die waagerechte Leiste also nur im gedeckelten
   Zustand. Wer einen Eintrag hinzufuegt, muss nachrechnen: Von den
   809 Pixeln sind nur 30 frei. */
@media (max-width: 1023px) {
    .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .kopf__menue-schalter { display: block; }

    .kopf__navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        background-color: var(--farbe-hell);
        border-top: 1px solid var(--farbe-linie);
        box-shadow: var(--schatten);

        /* Dieselbe Ueberlegung wie bei .seite: Mit 100vh reichte das offene
           Menue am Telefon unter die Adressleiste, und die letzten Eintraege
           waren nicht erreichbar. */
        max-height: calc(100vh - 72px);
        max-height: calc(100dvh - 72px);
        overflow-y: auto;
    }

    .kopf__navigation.ist-offen {
        display: block;
    }

    .navigation__liste {
        flex-direction: column;
        padding: var(--abstand-s) 0;
    }

    .navigation__liste a {
        display: block;
        padding: 12px var(--abstand-m);
    }

    .navigation__unterliste {
        display: block;
        position: static;
        min-width: 0;
        border: 0;
        box-shadow: none;
        background-color: var(--farbe-flaeche);
    }

    .navigation__unterliste a {
        padding-left: var(--abstand-l);
    }
}

@media (max-width: 767px) {
    .kopfbild { height: 220px; }

    .hauptbereich { padding: var(--abstand-l) 0; }

    .raster--2,
    .raster--3,
    .raster--4 { grid-template-columns: minmax(0, 1fr); }

    .fuss__inner { grid-template-columns: minmax(0, 1fr); }

    .titelleiste__inner { flex-direction: column; align-items: flex-start; }
}

/* --- Tippziele auf Geraeten mit Finger ----------------------------------- */
/* Begruendung steht in components.css. */

@media (pointer: coarse) {
    .fuss__liste a,
    .titelleiste__titel a {
        min-height: 44px;
    }
}