/* Reset, Grundtypografie, .wrap Les Bergers Mystiques — aus dem abgenommenen Entwurf v3 ausgelagert. Quelle: design-entwurf/index.html, Zeilen 70-84 (unveraendert uebernommen). ACHTUNG: Die Einbindungsreihenfolge in ist bedeutungstragend. */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* X-Scroll-Schutz: clip statt hidden (erzeugt keinen Scroll-Container) */ html, body { overflow-x: hidden; overflow-x: clip; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.65; font-size: 16.5px; transition: background 0.5s ease, color 0.5s ease; } img { max-width: 100%; display: block; } a { color: inherit; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } /* Ersetzt zwei inline-style-Attribute aus dem Entwurf (index.html Z. 1580/1751). Ohne inline-Styles greift die strikte Content-Security-Policy aus .htaccess. Das frühere style="color: inherit" am Footer-Link war redundant — die Regel `a { color: inherit; }` weiter oben deckt es bereits ab. */ .icon-sprite { /* NICHT display:none — dann baut Blink den darin gar nicht erst auf und das Instagram-Badge bleibt leer (gemessen: mit display:none unsichtbar, mit dieser Regel korrekt). ist davon nicht betroffen, weil es ohnehin nie gerendert wird; ein Farbverlauf dagegen ist ein Paint-Server und braucht seinen Teilbaum. Absolut positioniert und ohne Ausdehnung: nimmt keinen Platz ein. */ position: absolute; width: 0; height: 0; overflow: hidden; } /* Jedes traegt jetzt width/height. Das reserviert den Platz, bevor das Bild da ist — die Seite ruckelt beim Laden nicht mehr. Nebenwirkung, die hier aufgefangen wird: die beiden Attribute wirken als Praesentations-Hinweise und setzen damit auch die CSS-EIGENSCHAFT height. Ohne diese Regel gewinnt die Pixelhoehe aus dem Attribut gegen ein `aspect-ratio` im Klassenselektor, weil dort gar keine Hoehe steht: .split-photo img rendert dann 1066px hoch statt 636px. Regeln mit Klassenselektor (.chapter img, .dog-card img, .swall-tile img …) sind spezifischer und behalten ihre ausdrueckliche Hoehe. */ img { height: auto; }