/* ---------------------------------------------------------------------------
   Eine Inhaltsbahn fuer die ganze Seite
   ------------------------------------
   Gemessen bei 1497px Inhaltsbreite standen die Blocks auf drei verschiedenen
   Kanten: Startseite, Portfolio und die Leistungsabschnitte auf 179, der
   Fussbereich und die Projektseiten auf 104, der Hero der Leistungsseiten auf
   274. Ursache waren unterschiedliche Bahnbreiten (1100 / 1290 / Theme-Breite)
   und teils fehlende Innenabstaende.

   Hier steht die Bahn nun einmal: 1290px breit, 75px Rand. Wer sie braucht,
   bekommt sie ueber diese Liste - Ausnahmen (vollflaechige Baender) regeln
   ihren Rand weiterhin selbst ueber ihre inneren Bahnen.

   !important ist noetig, weil mehrere dieser Blaetter von den Seiten selbst
   noch einmal nach diesem geladen werden; die Reihenfolge im Layout
   entscheidet dann nicht mehr. Der mobile Rand liegt in raster-mobil.css und
   ueberschreibt den Wert weiter unten im Ladeweg.
   --------------------------------------------------------------------------- */
:root {
	--mh-bahn: 1290px;
	--mh-bahn-rand: 75px;
}

.mh_section_inner,
.mh_intro,
.mh_footer_inner,
.lst_hero_inner,
.lst_category_inner,
.lst_detail_inner,
.lst_detail_kopf,
.lst_ablauf_inner,
.lst_projekte_inner,
.lst_person_inner,
.lst_cta_inner,
.proj_page,
.proj_related_inner,
.ref_page,
.ref_ausblick_inner {
	max-width: var(--mh-bahn) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--mh-bahn-rand) !important;
	padding-right: var(--mh-bahn-rand) !important;
	box-sizing: border-box !important;
}


/* ---------------------------------------------------------------------------
   Bilder: Masse im Markup, Groesse im Stil
   ---------------------------------------
   Jedes <img> traegt jetzt seine echten Masse als width und height. Der
   Browser kennt damit das Seitenverhaeltnis, bevor die Datei geladen ist, und
   haelt den Platz frei - ohne das rutscht beim Nachladen alles darunter nach
   unten (gemessen als Cumulative Layout Shift von 0,291; alles ueber 0,1 gilt
   als schlecht).

   Diese Zahlen duerfen aber nicht die Darstellung bestimmen: Ein Logo mit
   3109px Breite im Attribut wuerde sonst 3109px breit gezeichnet. Die beiden
   Zeilen hier sind die uebliche Absicherung dagegen. Sie stehen bewusst ohne
   !important und mit dem schwaechsten Selektor, den es gibt - jede
   spezifischere Regel im Projekt sticht sie aus.
   --------------------------------------------------------------------------- */
img {
	max-width: 100%;
	height: auto;
}