/*
 * layout.css  --  Seitengeruest und Bloecke
 *
 * Das Vokabular hier ist Vertrag: Plugins geben .module, .block und
 * .block-wide aus, die Contentbreite kommt als .contentwidth-NN vom
 * Blockrahmen (src/blocks/block.php). Abstaende stehen in spacing.css,
 * erzeugt von bin/g5-abstaende.
 *
 * Die Regeln sind aus guladevs style.css uebernommen (Abschnitt SECTIONS) --
 * mit den Werten, nicht nachgebaut. Meine erste Fassung hatte section,
 * contentwidth und main selbst formuliert; das ergab dieselben Zahlen, aber
 * eine zweite Quelle dafuer. Eine Quelle ist besser.
 *
 * Document & Code @copyright by SteckDesign
 * Changes by third parties are not permitted.
 */

.module     { width: 100%; }
.block      { margin-inline: auto; }
.block-wide { width: 100%; }

/* =================================================================
   SECTIONS
   ================================================================= */

section {
    padding-left: var(--size-2);
    padding-right: var(--size-2);
    position: relative;
}
section-wide {
    position: relative;
    display: block; 
}

 .contentwidth-90, 
 .contentwidth-80 {
    padding-left: 0px;
    padding-right: 0px;
}
 .contentwidth-70 {
    padding-left: 5%;
    padding-right: 5%;
}
 .contentwidth-60 {
    padding-left: 10%;
    padding-right: 10%;
}
    @media (min-width: 576px) {
        section {
            padding-left: var(--size-4);
            padding-right: var(--size-4);
            position: relative;
        }
        .contentwidth-90 {
            padding-left: 0px;
            padding-right: 0px;
        }
        .contentwidth-70 {
            padding-left: 5%;
            padding-right: 5%;
        }
        .contentwidth-60 {
            padding-left: 10%;
            padding-right: 10%;
        }
    }
    @media (min-width: 768px) { 
        section {
            padding-left: var(--size-8);
            padding-right: var(--size-8);
            position: relative;
        }
       .contentwidth-90 {
            padding-left: 5%;
            padding-right: 5%;
        }
        .contentwidth-80 {
            padding-left: 10%;
            padding-right: 10%;
        }
        .contentwidth-70 {
            padding-left: 15%;
            padding-right: 15%;
        }
        .contentwidth-60 {
            padding-left: 20%;
            padding-right: 20%;
        }
    }

/*
 * DER FUSS KLEBT UNTEN, auch wenn die Seite kurz ist.
 *
 * Drei Regeln, und sie gehoeren zusammen -- deshalb stehen sie hier
 * beieinander und nicht in base.css bei den uebrigen body-Angaben:
 *
 *   html   height: 100%          gibt dem body eine Bezugsgroesse
 *   body   flex-column + 100vh   macht die Seite zur Spalte, mindestens
 *                                 fensterhoch
 *   main   flex: 1               nimmt den Rest, schiebt Fuss und
 *                                 Copyright ans untere Ende
 *
 * WARUM SIE HIER ZUSAMMENSTEHEN. Genau das war der Fehler: beim Neubau kam
 * "main { flex: 1 }" mit, der Container darum herum nicht. flex-grow an
 * einem Element, dessen Elternteil kein Flex-Container ist, tut NICHTS --
 * ohne Meldung, ohne Warnung im Log, und im HTML ist nichts zu sehen.
 * Gemessen am 05.09.2026 auf /design-referenzen/ bei 1400x1600:
 * guladev Copyright-Unterkante 1600 (buendig), gula5 1281 -- 319 Pixel
 * Loch unter dem Fuss. Der Nutzer hat es am Bildschirm gesehen.
 *
 * Halbe Mechanismen sind die teuerste Sorte Rueckstand: der uebernommene
 * Teil sieht richtig aus und belegt scheinbar, dass die Sache erledigt ist.
 *
 * WOHER DIE REGEL KOMMT: guladev fuehrt sie in seiner style.css. Fuer gula5
 * geht das nicht -- dort ist style.css nur der Theme-Kopf, und das Handle
 * gula-style laedt die style.css der AKTIVEN Site. Eine Grundregel des
 * Themes darf nicht in einer Datei stehen, die jede Site ueberschreibt.
 *
 * 100vh und nicht 100dvh: bewusst gleich wie guladev. dvh waere auf dem
 * Handy genauer (100vh zaehlt dort die eingeklappte Adressleiste mit), aber
 * es laesst die Seitenhoehe beim Ein- und Ausblenden der Leiste springen.
 * Das ist eine Gestaltungsfrage fuer beide Themes, keine des Neubaus.
 */
html {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	display: block;
	flex: 1;
}

/*
 * BESSER ALS DIE VORLAGE: der Fuss klebt auch ohne <main>.
 *
 * guladevs Fassung haengt vollstaendig an "main { flex: 1 }" -- fehlt das
 * Element, waechst niemand, und alle Bauteile stehen oben zusammen. Das ist
 * kein Gedankenspiel, sondern auf devwp26 gemessen (05.09.2026, 1400x1600):
 *
 *     /?s=galerie   guladev  kein <main>, kein Kind mit flex-grow,
 *                            Copyright-Unterkante bei 158 -- 1442 Pixel
 *                            Loch unter dem Fuss, auf einer Seite, die
 *                            jeder Besucher ueber die Suche erreicht.
 *
 * gula5 hat in jeder eigenen Vorlage ein <main>. Die Regel gilt dem Fall,
 * den ich nicht in der Hand habe: gula5 ist als ELTERN-Theme gebaut
 * (G5_DIR = get_template_directory()). Ein Site-Theme darf page.php
 * ersetzen oder den Loop per gula_page_main_loop austauschen -- und dann
 * haengt das Kleben des Fusses an fremdem Markup.
 *
 * Auto-Rand statt flex-grow: in einer Flex-Spalte schluckt "margin-top:auto"
 * den ganzen freien Platz und schiebt das Bauteil samt allem danach nach
 * unten. Gibt es ein <main>, hat dessen flex:1 den Platz schon verbraucht --
 * der Auto-Rand bekommt dann 0 und tut nichts. Die zwei koennen sich also
 * nicht in die Quere kommen; :has() sorgt zusaetzlich dafuer, dass immer nur
 * EIN Auto-Rand entsteht (zwei wuerden den Platz unter sich aufteilen und
 * eine Luecke zwischen Fuss und Copyright reissen).
 */
body:not(:has(main)) #footer {
	margin-top: auto;
}

body:not(:has(main)):not(:has(#footer)) #copyright {
	margin-top: auto;
}
main img {
    display: block;
    height: auto;
    max-width: 100%;
}

.fadeInBlock {
    opacity:1;
}

.vhtheme {
    /*	Hoehe des SICHTBAREN Bereichs, nicht des ganzen Fensters.

		Steht die Navigation fest oben (position: fixed, so machen es alle
		theme-nav-*-Plugins), dann beginnt der Abschnitt erst unter ihr —
		bei 100vh ragt er anschliessend genau um die Navihoehe unter den
		Bildschirmrand. Gemessen auf gaw2 am 18.08.2026: Fenster 735,
		Navi 99, Abschnitt 99 bis 834. Der Scroll-Pfeil am unteren Rand des
		Abschnitts — das eigene Signal des Entwurfs, dass es weitergeht —
		endete bei 804 und war damit unsichtbar.

		--gula-nav-hoehe liefert das Navi-Plugin. Fehlt es, rechnet der
		Rueckfall mit 0px und es bleibt beim alten 100vh; fuer Sites ohne
		diese Angabe aendert sich also nichts.	*/
    height: calc( 100vh - var( --gula-nav-hoehe, 0px ) );
    /* height: fit-content; */
    display: grid;
}
.vh100 {
    height: 100vh;
    display: grid;
    min-height:fit-content;
}
.vh75 {
    height: 75vh;
    display: grid;
    min-height: fit-content;
}
.vh50 {
    height: 50vh;
    display: grid;
    min-height: fit-content;
}

/*	14.08.2026: Beschnitt fuer <img> statt CSS-Hintergrund.
	Ein Bild, das ueber gula_bild() ausgegeben wird, traegt dieselben Klassen
	wie vorher das <div> — also 'cover' und eine aspr-Klasse. Die aspr-Klasse
	liefert das Seitenverhaeltnis, diese Regel den Beschnitt. Ergebnis ist
	pixelgleich zu background-size: cover, nur mit alt, srcset und lazy.
	Die Hintergrund-Regel darunter bleibt, solange nicht alle 114 Stellen
	umgestellt sind — beide Wege muessen nebeneinander funktionieren.	*/
img.cover,
img.gula-bild {
	display: block;
	width: 100%;
	height: auto;          /* NICHT 100% — siehe unten */
	object-fit: cover;
	object-position: 50% 50%;
}
/*	WARUM height: auto und nicht 100%
	Zuerst stand hier height: 100%. Das war falsch: Sind Breite UND Hoehe
	gesetzt, hat aspect-ratio keine Wirkung mehr. Wo das Bild in einer
	gestreckten Rasterzelle sitzt — etwa das Beitragsbild der Blog-Einzelseite
	in seiner <figure> —, fuellte es die volle Zellenhoehe und wurde hochkant
	statt 16:9. Gemessen am 14.08.2026: Seitenhoehe 2870 -> 4216 px.
	Mit height: auto bestimmt die aspr-Klasse die Hoehe, genau wie vorher beim
	Hintergrundbild.	*/

.module.cover {
	position: relative;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important; 
}