/*
    Seitengerüst des öffentlichen Teils (Konzept 15.2): Raster, Kopfbereich,
    Navigation, Inhaltsbreiten, Fußbereich.

    Grundlage sind die Baupläne unter Content/Bauplan/ – vor allem
    Home/Bauplan.pdf für Menü und Kopfbereich sowie das Bild FussZeile.png,
    das den Fußbereich bereits fertig zeigt: waldgrüne Fläche mit schräger
    Oberkante, links Wappen und Anschrift, rechts eine kurze Navigation, die
    E-Mail-Adresse in Gold.

    Bauteile stehen nicht hier, sondern in components.css. Die Grenze läuft
    dort, wo etwas auch außerhalb von Kopf, Rumpf und Fuß vorkommen könnte:
    eine Karte kann überall stehen, ein Kopfbereich nicht.
*/

/* ----------------------------------------------------------------------
   Seitengerüst

   Drei Zeilen: Kopf, Inhalt, Fuß. Der Inhalt bekommt den ganzen übrigen
   Platz, damit der Fußbereich auch auf einer kurzen Seite unten sitzt und
   nicht in der Mitte des Fensters hängt.
   ---------------------------------------------------------------------- */

body {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

/* ----------------------------------------------------------------------
   Container

   Die eine Regel, die die Seite zusammenhält: Alles, was sich an der
   Inhaltsbreite ausrichtet, bekommt diese Klasse – im Kopfbereich, im
   Rumpf und im Fußbereich. Der seitliche Abstand steckt in --breite-inhalt
   und muss deshalb nirgends als padding wiederholt werden.
   ---------------------------------------------------------------------- */

.behaelter {
    width: var(--breite-inhalt);
    margin-inline: auto;
}

/* Fließtextspalte für redaktionelle Seiten. Rund 70 Zeichen je Zeile. */
.behaelter--text {
    width: min(var(--breite-text), var(--breite-inhalt));
}

/* ----------------------------------------------------------------------
   Sprungmarke

   Konzept 6.4: Wer mit der Tastatur bedient, soll die Navigation
   überspringen können. Sie wird aus dem Blickfeld genommen, aber nicht mit
   display:none – dann wäre sie auch für Screenreader verschwunden – und
   erscheint, sobald sie den Fokus bekommt.
   ---------------------------------------------------------------------- */

.sprung-zum-inhalt {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: var(--raum-1) var(--raum-2);
    background-color: var(--farbe-flaeche);
    color: var(--farbe-primaer);
    font-family: var(--schrift-titel);
}

.sprung-zum-inhalt:focus {
    left: 0;
}

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

   Nach Home/Bauplan.pdf ist der Kopf ein illustriertes Banner: heller
   Himmel, Dorfansicht, links die Marke, rechts das Menü. Die Marke ist seit
   BannerHeaderHomeV2 das Vereinslogo mit dem Ortsnamen daneben – das Logo
   war zuvor in die Banner-Illustration eingezeichnet und steht jetzt nur
   noch hier.

   Das Banner selbst und sein Verhalten beim Scrollen – der Bauplan sieht
   vor, dass es an Ort und Stelle bleibt und später einem Video weicht –
   gehören nach hero.css. Hier steht nur, wo die Dinge liegen.
   ---------------------------------------------------------------------- */

.kopf {
    position: relative;
    background-color: var(--farbe-flaeche-alt);
}

.kopf__inhalt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--raum-2) var(--raum-3);
    padding-block: var(--raum-2);
}

/* Wappen und Vereinsname als eine Einheit, die zur Startseite führt. */
.kopf__marke {
    display: flex;
    align-items: center;
    gap: var(--raum-2);
    text-decoration: none;
    color: var(--farbe-primaer);
}

/* Das Logo ist breit statt hoch (Verhältnis 2,36:1). Angegeben wird
   deshalb die Breite; das Wappen darin steht dann etwa so hoch wie der
   Ortsname daneben. Bei 170 px war der Zusatz „Heimatverein e.V." unter
   der Zeichnung kaum noch zu lesen; 210 px sind die Grenze, ab der er
   trägt. Der Kopfbereich wächst dadurch von 102 auf 121 px. */
.kopf__logo {
    width: 210px;
    height: auto;
    flex-shrink: 0;

    /* Das Logo ist freigestellt; die Platzhalterfläche aus base.css würde
       durch die durchsichtigen Stellen scheinen. */
    background-color: transparent;
}

.kopf__name {
    font-family: var(--schrift-titel);
    font-size: var(--groesse-titel-3);
    font-weight: 600;
    line-height: 1.15;
}

@media (max-width: 30rem) {
    .kopf__logo {
        width: 150px;
    }

    .kopf__name {
        font-size: var(--groesse-vorspann);
    }

    /* Sechs Menüpunkte passen auf keinem Telefon in eine Zeile; sie brechen
       auf zwei um und stehen dann doppelt so hoch im Kopfbereich. 16 px
       nehmen ihnen das Gewicht – eine Navigation wird gesucht, nicht
       gelesen, und die Grundgröße aus Konzept 6.4 gilt dem Fließtext.

       Der größere Innenabstand ist dabei Pflicht und keine Zier: Bei 16 px
       und der bisherigen Polsterung von 8 px misst die Fläche zum Antippen
       nur noch rund 42 px und unterschritte die 44 px aus WCAG 2.5.5. Mit
       0,6 rem sind es 45,6 px, also so viel wie zuvor bei 18 px.

       Der Kopfbereich wird dadurch übrigens kaum niedriger: Seine Höhe
       bestimmen die Antippflächen und das Wappen, nicht die Schriftgröße. */
    .navigation a {
        font-size: 1rem;
        padding-block: 0.6rem;
    }
}

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

   Sechs Punkte laut Bauplan. Hier steht die offene Fassung: eine Liste, die
   auf schmalen Fenstern umbricht. Sie ist der Zustand, den jeder bekommt,
   auch ohne JavaScript – Konzept 15.6 verlangt die Bedienbarkeit ohne
   Skript, und was nicht versteckt wird, muss auch niemand hervorholen.

   Das einklappbare Menü weiter unten baut darauf auf und tritt erst in
   Kraft, wenn wwwroot/js/nav.js läuft.

   Die Links sind hier nicht unterstrichen – anders als im Fließtext, wo
   base.css das aus gutem Grund vorgibt. In einer Navigation ergibt sich
   ihre Bedeutung aus der Position, und WCAG 1.4.1 ist erfüllt, weil die
   aktuelle Seite nicht allein farblich, sondern durch den Unterstrich
   darunter gekennzeichnet ist.
   ---------------------------------------------------------------------- */

.navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-1) var(--raum-3);
    align-items: center;
}

.navigation a {
    display: inline-block;
    padding-block: var(--raum-1);
    font-family: var(--schrift-titel);
    color: var(--farbe-primaer);
    text-decoration: none;

    /* Der Unterstrich der aktuellen Seite wird hier vorbereitet, damit der
       Text beim Wechsel nicht springt. */
    border-bottom: 2px solid transparent;
}

.navigation a:hover {
    border-bottom-color: var(--farbe-primaer-hell);
}

/* Blazor setzt diese Klasse auf den Link der aktuellen Seite. */
.navigation a.active {
    font-weight: 600;
    border-bottom-color: var(--farbe-akzent);
}

/* ----------------------------------------------------------------------
   Einklappbares Menü auf schmalen Fenstern

   Sechs Menüpunkte brauchen auf dem Telefon zwei Zeilen; der Kopfbereich
   steht damit 207 px hoch, bevor der Inhalt beginnt. Eingeklappt sind es
   gemessene 157 px – ein Viertel weniger.

   Nicht weniger, weil der Schalter neben der Marke keinen Platz findet:
   Wappen und Ortsname messen zusammen rund 330 px, der Schalter 109 px, das
   Fenster bietet 358 px. Er bekommt deshalb eine eigene Zeile. Ihn dort
   wegzubekommen hieße, das Wappen auf rund 100 px zu verkleinern – und
   unter 170 px ist der Zusatz „Heimatverein e.V." darin nicht mehr zu
   lesen, weshalb es überhaupt bei 150 px steht.

   Ausgerichtet wird hier nichts: Der Abschnitt „Schmale Fenster" weiter
   unten stellt den ganzen Kopfbereich mittig, Wappen und Name eingeschlossen.
   Der Schalter folgt dem, und die aufgeklappte Liste ebenso – zentrierte
   Einträge sind hier also kein Versehen, sondern die bestehende Gestaltung
   des schmalen Kopfbereichs.

   Die Regeln greifen ausschließlich unter .js-nav. Diese Klasse setzt
   wwwroot/js/nav.js an das Wurzelelement – also erst, wenn feststeht, dass
   das Skript läuft und das Eingeklappte auch wieder hervorholen kann. Lädt
   es nicht, bleibt das Menü offen und vollständig bedienbar (Konzept 15.6).
   Dieselbe Vorsichtsmaßnahme wie bei .js-reveal in hero.css.

   Die Schwelle liegt bei 48 rem und muss mit der Konstanten SCHMAL in
   nav.js übereinstimmen. Der Kopfbereich bricht zwar schon bei rund 990 px
   auf zwei Zeilen um, aber dort ist er mit 184 px noch verträglich; erst
   auf dem Telefon wird er lästig.
   ---------------------------------------------------------------------- */

.menue-schalter {
    /* Ohne JavaScript nicht vorhanden – siehe oben. */
    display: none;

    align-items: center;
    gap: var(--raum-2);

    /* Fingerkuppengröße nach WCAG 2.5.5, wie bei .schaltflaeche. */
    min-height: 44px;
    padding: var(--raum-1) var(--raum-2);

    border: 2px solid var(--farbe-primaer);
    border-radius: 2px;
    background-color: transparent;
    color: var(--farbe-primaer);

    font-family: var(--schrift-titel);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

/* Die drei Striche: ein Element und zwei Pseudoelemente. Kein Markup, das
   nichts bedeutet, und keine Icon-Schrift – Konzept 6.2 schließt externe
   Ressourcen aus, und für drei Striche eine Datei zu laden wäre unsinnig. */
.menue-schalter__striche {
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    background-color: currentColor;
}

.menue-schalter__striche::before,
.menue-schalter__striche::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
}

.menue-schalter__striche::before { top: -6px; }
.menue-schalter__striche::after { top: 6px; }

@media (max-width: 48rem) {
    .js-nav .menue-schalter {
        display: inline-flex;
    }

    /*
        Zugeklappt ist das Menü ganz fort und nicht nur unsichtbar: Ein
        display:none nimmt es auch aus dem Baum, den Vorlesegeräte
        auswerten. Andernfalls läse ein Screenreader sechs Menüpunkte vor,
        die auf dem Bildschirm niemand sieht.

        Der Fußbereich trägt dieselbe Klasse .navigation und bleibt davon
        unberührt – deshalb steht .kopf davor.
    */
    .js-nav .kopf .navigation {
        display: none;
    }

    .js-nav .kopf .navigation.ist-offen {
        display: block;

        /* Eigene Zeile über die volle Breite, unter Wappen und Schalter. */
        flex-basis: 100%;
    }

    .js-nav .kopf .navigation.ist-offen ul {
        flex-direction: column;

        /* Die Einträge nehmen die volle Breite, nicht die ihres Textes.
           Sonst endete jede Trennlinie dort, wo das jeweilige Wort aufhört,
           und die Liste franste nach rechts aus. Der Verweis darin bleibt
           inline-block, damit der goldene Unterstrich der aktuellen Seite
           weiterhin nur unter dem Wort sitzt. */
        align-items: stretch;

        /* Der Abstand steht als Polsterung an den Einträgen, damit die
           Trennlinien zwischen ihnen durchgehen und nicht in der Lücke
           schweben. */
        gap: 0;
    }

    .js-nav .kopf .navigation.ist-offen li + li {
        border-top: 1px solid var(--farbe-primaer-hell);
    }

    /*
        Die Verweise bleiben inline-block und werden nicht auf Blockbreite
        gezogen: Der goldene Unterstrich der aktuellen Seite säße sonst unter
        der ganzen Zeile statt unter ihrem Wort. Die 44 px Höhe kommen aus
        der Polsterung und bleiben erhalten.
    */
    .js-nav .kopf .navigation.ist-offen a {
        padding-block: 0.7rem;
    }
}

/* ----------------------------------------------------------------------
   Rumpf
   ---------------------------------------------------------------------- */

/*
    Der Rumpf selbst hat bewusst keinen Abstand nach oben: Eine Hero-Sektion
    schließt bündig an den Kopfbereich an, ein Spalt dazwischen sähe nach
    Versehen aus. Den Abstand tragen stattdessen die Abschnitte darin – so
    kann eine Seite mit einem Bild über die volle Breite beginnen und eine
    andere mit Text.
*/
.rumpf > .abschnitt {
    padding-block: var(--raum-5);
}

/* Abgesetzter Grund für Seiten, die ihre Bereiche voneinander trennen.
   Der Abstand sitzt innen, damit die Fläche bis an den Fensterrand
   reicht. */
.abschnitt--abgesetzt {
    background-color: var(--farbe-flaeche-alt);
}

/* ----------------------------------------------------------------------
   Fußbereich

   Wie in FussZeile.png: waldgrüne Fläche mit schräg ansteigender
   Oberkante, links Wappen, Vereinsname und Anschrift, rechts eine kurze
   Navigation, darunter eine Trennlinie und die Rechtezeile.

   Die Schräge entsteht über clip-path und ist reine Zier: Sie schneidet
   oben einen flachen Keil weg. Das obere Innenmaß fängt das wieder auf,
   damit kein Text in die Schräge gerät.

   Der Keil ist als Anteil der Breite angegeben, nicht als feste Höhe. Eine
   feste Höhe wirkt auf einem breiten Bildschirm als kaum sichtbarer Strich
   und auf dem Telefon als steile Rampe; ein Prozentwert hält den Winkel
   dagegen gleich – so flach wie in FussZeile.png.
   ---------------------------------------------------------------------- */

.fuss {
    background-color: var(--farbe-primaer);
    color: var(--farbe-flaeche);
    clip-path: polygon(0 0, 100% 0.7%, 100% 100%, 0 100%);
    padding-top: var(--raum-5);
    padding-bottom: var(--raum-4);
}

.fuss__oben {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--raum-4);
}

.fuss__marke {
    display: flex;

    /* Mittig statt oben ausgerichtet: Das Logo ist deutlich höher als die
       zwei Zeilen der Anschrift daneben; oben bündig hinge sie in der Luft. */
    align-items: center;
    gap: var(--raum-3);

    /* Pflicht, seit hier das 260 px breite Logo steht: Auf einem schmalen
       Telefon passen Logo und Anschrift nicht nebeneinander, und ohne
       Umbruch schöbe sich die Seite waagerecht auseinander. */
    flex-wrap: wrap;
}

/* Das Vereinslogo trägt den Namen bereits im Bild. Es steht deshalb allein
   und nicht neben einem gesetzten Schriftzug. */
.fuss__logo {
    width: 260px;
    max-width: 100%;
    height: auto;
    flex-shrink: 0;

    /* Das Logo ist freigestellt; die Platzhalterfläche aus base.css würde
       durch die durchsichtigen Stellen scheinen. */
    background-color: transparent;
}

.fuss__anschrift {
    font-style: normal;
    line-height: 1.5;
}

/* Die einzige Stelle, an der Gold als Schrift steht – und die zulässige:
   auf Waldgrün sind es 6,40:1, auf hellem Grund wären es 1,53:1. Siehe
   die Verwendungsregel in tokens.css. */
.fuss a[href^="mailto:"] {
    color: var(--farbe-akzent);
}

/* Die Fußnavigation führt nur die wichtigsten Ziele. Weiß auf Waldgrün
   ergibt 9,77:1. */
.fuss .navigation a {
    color: var(--farbe-flaeche);
}

.fuss .navigation a:hover {
    border-bottom-color: var(--farbe-akzent);
}

.fuss .navigation a.active {
    border-bottom-color: var(--farbe-akzent);
}

.fuss__unten {
    /* Rechtezeile links, Gütesiegel rechts. Auf schmalem Schirm bricht das
       Siegel unter die Zeile um und bleibt rechts (margin-left: auto). */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--raum-3);
    margin-top: var(--raum-4);
    padding-top: var(--raum-2);
    border-top: 1px solid rgb(255 255 255 / 0.2);
    font-size: var(--groesse-klein);

    /* Gedämpftes Weiß für die Rechtezeile. Nicht --farbe-text-leise: das
       ist für hellen Grund gerechnet und auf Waldgrün unlesbar. */
    color: rgb(255 255 255 / 0.75);
}

.fuss__unten p {
    margin: 0;
}

/* Die Grafik bringt ihren dunklen Grund selbst mit; die Platzhalterfläche
   aus base.css wird deshalb ausgeschaltet. */
.fuss__siegel {
    display: block;
    flex-shrink: 0;
    margin-left: auto;
    line-height: 0;
}

.fuss__siegel img {
    width: 96px;
    height: 96px;
    background-color: transparent;
}

/* ----------------------------------------------------------------------
   Schmale Fenster

   Ein einziger Haltepunkt. Mehr braucht ein Auftritt aus Kopf, Textspalte
   und Fuß nicht, und jeder weitere ist eine Stelle, an der später etwas
   auseinanderläuft.
   ---------------------------------------------------------------------- */

@media (max-width: 48rem) {
    .kopf__inhalt {
        justify-content: center;
        text-align: center;
    }

    /* Nur im Kopfbereich, wo Wappen und Name darüber ebenfalls mittig
       stehen. Im Fußbereich bleibt die Navigation linksbündig, weil die
       Marke daneben es auch ist – zentriert wirkte sie dort verrutscht. */
    .kopf .navigation ul {
        justify-content: center;
    }

    .rumpf {
        padding-block: var(--raum-4);
    }

    .fuss__oben {
        gap: var(--raum-3);
    }
}