/*
    Hero-Sektionen und Bewegung (Konzept 15.3).

    Die Grundregel des Kapitels bestimmt alles Weitere: Die Hero-Sektion
    enthält das Largest-Contentful-Paint-Element. Daraus folgt, dass das
    Hero-Bild niemals eingeblendet und niemals per JavaScript nachgeladen
    wird – es steht mit fetchpriority="high" und ohne loading="lazy" im
    Markup. Animiert werden ausschließlich transform und opacity; beides
    läuft auf der Grafikkarte und erzwingt kein neues Layout.

    Steht als letzte Datei in Stylesheets.Oeffentlich, weil sie Grundregeln
    überschreibt.
*/

/* ----------------------------------------------------------------------
   Hero-Sektion
   ---------------------------------------------------------------------- */

.hero {
    position: relative;
    display: grid;
    align-items: end;
    height: clamp(400px, 70vh, 700px);
    overflow: hidden;

    /* Erzeugt einen eigenen Stapelkontext, damit die z-index-Werte der
       Kinder nicht mit dem Rest der Seite konkurrieren. */
    isolation: isolate;
}

/* Flachere Ausprägung für Unterseiten, wo das Bild den Inhalt ankündigt
   und nicht die ganze erste Bildschirmhöhe füllen soll. */
.hero--flach {
    height: clamp(240px, 40vh, 380px);
}

.hero__bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Der Bildausschnitt sitzt etwas unterhalb der Mitte: Bei Dorf- und
       Schlossansichten liegt das Motiv dort, der Himmel darüber trägt
       nichts bei. */
    object-position: center 60%;
    transform-origin: center 60%;

    /* Ken-Burns (Konzept 15.3, Variante A). 24 Sekunden sind bewusst
       gewählt – die Bewegung soll unterschwellig bleiben und nicht
       auffallen. */
    animation: kenburns 24s ease-in-out infinite alternate;
}

/*
    Verlauf für den Textkontrast. Pflicht, nicht Zier: Ohne ihn steht heller
    Text über einem Foto, dessen Helligkeit man nicht kennt, und der
    geforderte Kontrast von 4,5:1 lässt sich nicht zusichern. Der Verlauf ist
    unten dichter, weil der Text dort steht.
*/
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom,
                rgb(0 0 0 / 0.15) 0%,
                rgb(0 0 0 / 0.35) 55%,
                rgb(0 0 0 / 0.70) 100%);
}

.hero__inhalt {
    position: relative;
    z-index: 2;
    width: var(--breite-inhalt);
    margin-inline: auto;
    padding-block: var(--raum-4);
    color: var(--farbe-flaeche);
}

/* Goldene Plakette über dem Titel, wie im Bauplan. Gold als Fläche mit
   dunklem Text darauf – die einzige Verwendung, die tokens.css erlaubt;
   Gold als Schrift auf hellem Grund wäre mit 1,53:1 unlesbar. Hier sind es
   14,4:1. */
.hero__etikett {
    display: inline-block;
    margin: 0 0 var(--raum-2);
    padding: var(--raum-1) var(--raum-2);
    border-radius: 2rem;

    background-color: var(--farbe-akzent);
    color: var(--farbe-text);

    font-family: var(--schrift-titel);
    font-size: var(--groesse-klein);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero__titel {
    color: var(--farbe-flaeche);
    margin: 0 0 var(--raum-2);

    /* Hebt die Schrift auch dort ab, wo das Foto unter dem Verlauf hell
       bleibt – etwa bei Schnee oder hellem Himmel. */
    text-shadow: 0 2px 8px rgb(0 0 0 / 0.5);
}

.hero__untertitel {
    font-size: var(--groesse-vorspann);
    max-width: 40rem;
    margin-bottom: var(--raum-3);
    text-shadow: 0 1px 6px rgb(0 0 0 / 0.5);
}

/* ----------------------------------------------------------------------
   Gestaffelter Texteinstieg (Konzept 15.3, Variante B)

   Für Suchmaschinen unproblematisch: Der Text steht vollständig im HTML
   und ist lediglich anfangs per CSS unsichtbar. Kritisch wäre nur ein
   Nachladen per JavaScript.
   ---------------------------------------------------------------------- */

.hero__titel,
.hero__untertitel,
.hero__cta {
    opacity: 0;
    animation: einblenden 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero__titel { animation-delay: 0.15s; }
.hero__untertitel { animation-delay: 0.35s; }
.hero__cta { animation-delay: 0.55s; }

/* Mitten in der Seite gibt es keinen gestaffelten Einstieg: Er liefe beim
   Seitenaufbau ab und wäre längst vorbei, bevor jemand hinunterscrollt.
   Das Erscheinen übernimmt dort reveal.js über data-reveal am Inhalt. */
.hero--sektion .hero__etikett,
.hero--sektion .hero__titel,
.hero--sektion .hero__untertitel,
.hero--sektion .hero__cta {
    opacity: 1;
    animation: none;
}

/* Auf dem abgedunkelten Foto steht Gold besser als Waldgrün: Die gefüllte
   Schaltfläche aus components.css trägt dort sonst dunkles Grün auf
   dunklem Grund. Gold mit dunkler Schrift ergibt 14,4:1. */
.hero .schaltflaeche {
    background-color: var(--farbe-akzent);
    border-color: var(--farbe-akzent);
    color: var(--farbe-text);
}

.hero .schaltflaeche:hover {
    background-color: var(--farbe-flaeche);
    border-color: var(--farbe-flaeche);
    color: var(--farbe-primaer);
}

/* ----------------------------------------------------------------------
   Kopfbanner mit Scroll-Verhalten

   Home/Bauplan.pdf sieht vor, dass das Banner zunächst oben stehen bleibt
   und beim Herunterscrollen einem Video weicht. Der Bauplan schlägt dafür
   GSAP mit ScrollTrigger vor; Konzept 15.3 führt GSAP jedoch unter
   „ausdrücklich nicht eingesetzt" – jede Bibliothek ist eine Abhängigkeit,
   die dauerhaft gepflegt werden muss, und der Bedarf ist mit eigenem CSS
   gedeckt. Das Konzept ist die Autorität, also position: sticky.

   Die Größenfrage ist entschieden: die Quelle wog 5,1 MB bei 4,3 Mbit/s
   und war schlicht unkomprimiert. Neu kodiert mit H.264 CRF 22 bleiben
   0,87 MB bei voller Länge, gemessen VMAF 96,6 gegenüber der Quelle. Die
   Grenze aus Konzept 15.3 ist damit eingehalten, ohne dass etwas fehlt.
   ---------------------------------------------------------------------- */

.banner {
    position: relative;
    overflow: hidden;
    background-color: var(--farbe-flaeche-alt);

    /* Die Höhe folgt Standbild und Video, die beide 1280 × 436 px messen:
       34,06 % der Breite. Die Deckelung greift ab etwa 1230 px
       Fensterbreite, damit der Streifen auf großen Bildschirmen nicht
       unnötig hoch wird.

       Nicht aspect-ratio mit max-height: die Kombination schnürt
       stattdessen die Breite ein, das Banner wird dann schmaler als das
       Fenster. */
    height: min(34.06vw, 420px);
}

.banner--haftend {
    position: sticky;
    top: 0;
    z-index: 10;
}

.banner__bild {
    width: 100%;
    height: 100%;

    /* cover, weil die Deckelung oben das Seitenverhältnis beschneidet.
       Der Bildausschnitt bleibt dabei mittig – dort steht das Dorf. */
    object-fit: cover;
}

/* Kopfbilder, die ihren Titel selbst im Bild tragen – die V2-Fassungen von
   Geschichte, Heimatverein und Impressum. Sie dürfen nicht beschnitten
   werden, sonst fiele die Beschriftung weg. Die Höhe folgt deshalb dem Bild
   statt einem festen Maß, und object-fit hat nichts zu tun.

   Die Überschrift steht auf diesen Seiten trotzdem im Markup, nur unsichtbar
   (.nur-vorlesen): Text in einem Bild ist für Suchmaschinen und Vorlesegeräte
   nicht vorhanden, und ohne h1 fehlte der Seite ihre Gliederung. */
.banner--ungeschnitten,
.banner--ungeschnitten .banner__bild {
    height: auto;
    object-fit: initial;
}

/* Das Video liegt deckungsgleich über dem Bild und ist zunächst
   durchsichtig. So steht die Fläche von Anfang an fest – ein Videoelement,
   das erst beim Wechsel entsteht, würde die Seite springen lassen. */
.banner__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0;
    transition: opacity 0.5s ease-out;

    /* Bis zum Wechsel darf es keine Klicks abfangen. */
    pointer-events: none;
}

.banner.ist-video .banner__video {
    opacity: 1;
}

/* Das Standbild bleibt darunter stehen und wird nicht entfernt: Bricht das
   Abspielen ab, ist sofort wieder etwas zu sehen. */
.banner.ist-video .banner__bild {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/* ----------------------------------------------------------------------
   Wechselraster der Hero-Sektionen

   Home/Bauplan.pdf setzt HeroSektion 1 als Viererfeld: oben links der Text,
   oben rechts ein Foto, unten links ein Foto, unten rechts die Datenliste.
   Text und Bild wechseln sich also über Kreuz ab.

   Auf einer Spalte greift die Reihenfolge des Markups, und die ist bewusst
   so gewählt, dass sie auch dort gelesen werden kann: Text, Foto, Foto,
   Daten. Kein grid-auto-flow: dense und keine order-Angaben – beides würde
   die sichtbare Reihenfolge von der Vorlesereihenfolge trennen.
   ---------------------------------------------------------------------- */

.wechselraster {
    display: grid;
    gap: var(--raum-4);
    align-items: center;
}

@media (min-width: 52rem) {
    .wechselraster {
        grid-template-columns: 1fr 1fr;
        gap: var(--raum-5);
    }
}

/* Zahlen und Fakten als Beschreibungsliste: je Zeile die Bezeichnung, dann
   der Wert, getrennt durch eine feine Linie. Sie wird gelesen, nicht
   überflogen, deshalb Luft zwischen den Zeilen.

   Auf schmalen Fenstern stehen Bezeichnung und Wert untereinander – zwei
   Spalten würden dort für beide zu wenig Platz lassen. */
.datenliste {
    margin: 0;
}

.datenliste > div {
    padding-block: var(--raum-1);
    border-bottom: 1px solid var(--farbe-primaer-hell);
}

.datenliste > div:last-child {
    border-bottom: 0;
}

.datenliste dt {
    font-weight: 600;
}

.datenliste dd {
    margin: 0;
}

@media (min-width: 26rem) {
    .datenliste > div {
        display: grid;
        grid-template-columns: 9rem 1fr;
        gap: var(--raum-2);
    }
}

/* ----------------------------------------------------------------------
   Erscheinen beim Scrollen (Konzept 15.3, Variante D)

   Keine Bibliothek wie AOS – wwwroot/js/reveal.js genügt mit einem
   IntersectionObserver. Der Ausgangszustand steht hier und nicht im Skript,
   damit nichts flackert, bevor das Skript läuft.

   Wichtig: Ohne JavaScript bliebe der Inhalt sonst dauerhaft unsichtbar.
   Deshalb greift die Regel nur, wenn das Skript sich am Wurzelelement
   angemeldet hat.
   ---------------------------------------------------------------------- */

.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-reveal [data-reveal].ist-sichtbar {
    opacity: 1;
    transform: translateY(0);
}

/* ----------------------------------------------------------------------
   Bewegungsabläufe
   ---------------------------------------------------------------------- */

@keyframes kenburns {
    from { transform: scale(1.00) translate3d(0%, 0%, 0); }
    to   { transform: scale(1.12) translate3d(-2%, -1%, 0); }
}

@keyframes einblenden {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------------------
   Bewegungsreduzierung

   base.css kürzt bereits alle Dauern auf nahezu null. Das allein genügt
   hier nicht: Elemente, die mit opacity: 0 beginnen und per Animation
   sichtbar werden, blieben sonst unsichtbar. Sie werden deshalb
   ausdrücklich in ihren Endzustand gesetzt.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .hero__bild {
        animation: none;
        transform: none;
    }

    .hero__titel,
    .hero__untertitel,
    .hero__cta,
    .js-reveal [data-reveal] {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ----------------------------------------------------------------------
   Druck

   Beim Drucken wird nicht gescrollt: Abschnitte, die der Beobachter noch
   nicht erreicht hat, stünden sonst als leere Flächen auf dem Papier.
   Dasselbe gilt für den gestaffelten Texteinstieg im Hero.
   ---------------------------------------------------------------------- */

@media print {
    .hero__titel,
    .hero__untertitel,
    .hero__cta,
    .js-reveal [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    /* Auf Papier bewegt sich nichts: Das Standbild darunter ist das, was
       gedruckt gehört. */
    .banner__video {
        display: none !important;
    }

    .banner.ist-video .banner__bild {
        opacity: 1 !important;
    }
}