/* ---------------------------------------------------------------------------
   Ein Seitenrand fuer die mobile Ansicht
   -------------------------------------
   Gemessen auf der Startseite bei 375px standen die Inhalte vorher auf vier
   verschiedenen Kanten: Logo im Kopfbereich auf 42, Agentur-Text auf 44, alle
   Abschnitte auf 14, der Fussbereich auf 24.

   Der Grund liegt im Theme: Der Seitencontainer hat 20px Innenabstand, und der
   Elementor-Wrapper darin zieht mit einem negativen Aussenabstand wieder 30px
   heraus, damit farbige Abschnitte bis an den Rand laufen. Auf dieser
   verschobenen Grundlage ergaben gleiche Innenabstaende unterschiedliche
   Kanten.

   Deshalb hier zuerst beide Verschiebungen neutralisieren, dann einen einzigen
   Rand setzen. Die Abschnitte laufen weiterhin bis an den Bildschirmrand -
   ihre Farbflaeche haengt am Abschnitt selbst, nicht am Wrapper.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	:root {
		--mh-rand: 28px;
	}

	/* 1. Verschiebungen des Themes aufheben.
	   Auf den Projektseiten steckt der Versatz in einem margin-left, nicht in
	   einem Innenabstand - beides muss weg. Und ohne !important gewinnt hier
	   projekt.css: Das Blatt wird von der Seite selbst noch einmal nach diesem
	   geladen, die Reihenfolge im Layout hilft also nicht. */
	.content_wrap,
	.content_wrap_fullscreen {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		/* Der Container traegt seine Breite als fester Wert (Bildschirmbreite
		   minus zweimal 20px). Ohne width:100% bliebe er 40px schmaler, und
		   die vollflaechigen Baender reichten nicht bis zum Rand. */
		width: 100% !important;
		max-width: none !important;
	}

	.content > .elementor,
	.post_content > .elementor {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* 2. Ein Rand fuer alle Inhaltsbahnen */
	.mh_section_inner,
	.mh_intro,
	.mh_footer_inner,
	.lst_hero_inner,
	.lst_category_inner,
	.lst_ablauf_inner,
	.lst_projekte_inner,
	.lst_person_inner,
	.lst_cta_inner,
	.lst_detail_inner,
	.lst_detail_kopf,
	.proj_related_inner,
	.proj_page,
	.ref_page_inner,
	.ref_ausblick_inner,
	.ref_page,
	.proj_body,
	.proj_hero {
		/* !important, weil mehrere dieser Blaetter von den Seiten selbst noch
		   einmal nach diesem geladen werden - die Reihenfolge im Layout
		   entscheidet dann nicht mehr. */
		padding-left: var(--mh-rand) !important;
		padding-right: var(--mh-rand) !important;
		box-sizing: border-box;
	}

	/* Die inneren Bahnen liegen teils ineinander - dann darf der Rand nur
	   einmal zaehlen, sonst addiert er sich. */
	.proj_page .proj_body,
	.proj_page .proj_hero,
	.proj_related .proj_related_inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.proj_page {
		padding-left: var(--mh-rand) !important;
		padding-right: var(--mh-rand) !important;
	}

	/* Die dunklen Baender laufen weiterhin bis an den Rand, ihr Inhalt haelt
	   den Rand ueber einen eigenen Innenabstand.

	   Der Aussenabstand rechnet sich selbst aus, weil der Elternteil je nach
	   Seite ein anderer ist: Bei Ruhrbau haengt das Band direkt in .content
	   (schon fensterbreit), bei Qomparo und MERGE in .proj_page (mit 28px
	   Rand). Ein fester Wert war deshalb immer auf einer der beiden Seiten
	   falsch - erst lief das Band 28px ueber den Rand hinaus und die Seite
	   liess sich seitlich schieben, dann stand es mit weissen Streifen links
	   und rechts im Bild.

	   calc(50% - 50vw) trifft beide Faelle: 50% der eigenen Bahn gegen die
	   halbe Fensterbreite. Steckt das Band in einer Bahn mit Rand, ergibt das
	   genau diesen Rand als negativen Abstand; ist die Bahn schon
	   fensterbreit, ergibt es null. */
	.proj_related {
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}

	.proj_related .proj_related_inner {
		padding-left: var(--mh-rand) !important;
		padding-right: var(--mh-rand) !important;
	}

	/* 2b. Der Agentur-Text sitzt als einziger Block in einer Elementor-Spalte.
	   Die bringt 10px Aussenabstand und 10px Innenabstand mit - zusammen 20px,
	   die sich auf den Rand aufaddieren. Nur fuer diesen Abschnitt aufheben,
	   damit uebrige Elementor-Inhalte unberuehrt bleiben. */
	.elementor-section:has(.mh_intro) .elementor-container {
		margin-left: 0;
		margin-right: 0;
		max-width: none;
	}

	.elementor-section:has(.mh_intro) .elementor-widget-wrap {
		padding-left: 0;
		padding-right: 0;
	}

	/* 2c. Theme-eigene Seiten (Impressum, Datenschutz, Blog) haben keine
	   eigene Bahn - ihr Rand kam bisher aus .content_wrap, den wir oben
	   aufheben mussten. Ihn hier zurueckgeben.

	   Die Ausschluesse sind noetig: Auf unseren eigenen Seiten bringen die
	   Abschnitte ihren Rand selbst mit, dort wuerde er sonst doppelt zaehlen -
	   und die vollflaechigen dunklen Baender waeren eingerueckt statt bis an
	   den Rand zu laufen. */
	.post_content:not(:has(.mh_section)):not(:has(.proj_page)):not(:has(.ref_page)):not(:has(.lst_hero)) {
		padding-left: var(--mh-rand);
		padding-right: var(--mh-rand);
		box-sizing: border-box;
	}

	/* Auf den Theme-Seiten bringt die Elementor-Spalte noch einmal 10px mit. */
	.post_content:not(:has(.mh_section)):not(:has(.proj_page)):not(:has(.ref_page)):not(:has(.lst_hero)) .elementor-widget-wrap {
		padding-left: 0;
		padding-right: 0;
	}

	.post_content:not(:has(.mh_section)):not(:has(.proj_page)):not(:has(.ref_page)):not(:has(.lst_hero)) .elementor-container {
		margin-left: 0;
		margin-right: 0;
		max-width: none;
	}

	/* 3. Der Innenabstand des Kopfbereichs steht jetzt in header-overlay.css,
	   zusammen mit der uebrigen Kopf-Geometrie und mit demselben Umschaltpunkt
	   wie die Kopfzeilen des Themes (1279px). Hier galt er nur bis 1024px. */

	/* 4. Das mobile Menue richtet sich jetzt selbst nach --mh-kopf-x
	   (siehe menu-mobil.css) - dieselbe Groesse, nach der auch Logo und Burger
	   der geschlossenen Kopfzeile stehen. Die Kopien hier sind entfallen. */
}

/* ---------------------------------------------------------------------------
   Fliesstext auf dem Handy
   ------------------------
   Gemessen bei 390px lief der beschreibende Text in drei Groessen mit sehr
   offenem Zeilenabstand: Abschnitts-Vorspann und Leistungsbeschreibungen mit
   19px auf 30px Zeilenhoehe, die FAQ-Antworten mit 17px auf 29px. Auf einer
   Spalte von 334px sind das sechs bis sieben Woerter je Zeile - der Blick
   springt haeufiger zurueck, als er liest, und ein Absatz aus vier Saetzen
   fuellt den halben Bildschirm.

   Auf dem Handy daher eine Stufe kleiner (17px, die Fliesstextstufe der
   Skala) und enger gesetzt (1,45 statt 1,6). Am Desktop bleibt beides, wie es
   ist - dort traegt die breitere Spalte den groesseren Zeilenabstand.

   Der Block steht hier und nicht in typo.css, wo er thematisch hingehoert:
   typo.css wird als zweites Blatt geladen, homepage.css und
   services-overview.css kommen danach und setzen dieselben Absaetze mit
   gleicher Spezifitaet. Dieses Blatt laeuft nach beiden.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
	/* .mh_services_row_body und .mh_section_header sind Behaelter, der Text
	   steckt in Absaetzen darin - deshalb als Nachfahren adressiert. */
	.mh_services_row_body p,
	/* Die beiden Ketten sind so lang wie ihre Vorbilder in homepage.css
	   (.mh_section.mh_services .mh_section_header p und
	   .mh_faq_accordion .proj_accordion_content p) - mit einer kuerzeren
	   Auswahl kaeme die Groesse hier nicht an. */
	.mh_section.mh_services .mh_section_header p,
	.mh_section_header p,
	.lst_detail p,
	.lst_hero_intro,
	.mh_faq_accordion .proj_accordion_content p,
	.proj_accordion_content p,
	.mh_faq_agentur p,
	.proj_fakt_text p,
	p.proj_intro {
		font-size: var(--mh-t5);
		line-height: 1.45;
	}
}