/* Fixes für die 1024px-Breakpoint (Oxygen "Tablet"-Ansicht, max-width: 1120px) */
@media (max-width: 1120px) {

	/* Seitliche Abstände: skalieren statt fix 20px, damit Text nicht am Rand klebt.
	   Oxygens Basisregel ist nur eine Klasse (.ct-section-inner-wrap) – die Klasse
	   dreifach zu wiederholen reicht als Spezifität, ohne !important und ohne
	   die ID-spezifischen Padding-Overrides einzelner Sections (Hero etc.) zu brechen. */
	.ct-section-inner-wrap.ct-section-inner-wrap.ct-section-inner-wrap {
		padding-left: clamp(20px, 4vw, 48px);
		padding-right: clamp(20px, 4vw, 48px);
	}

	/* Hero-Buttons "Kostenloses Erstgespräch" / "Angebot ansehen":
	   nicht mehr im Wort umbrechen, sondern als Ganzes in die nächste Zeile,
	   falls der Platz nicht reicht. */
	#div_block-90-26 {
		flex-wrap: wrap;
		row-gap: 15px;
	}
	#link_button-88-26,
	#link_text-93-26 {
		white-space: nowrap;
		flex-shrink: 0;
	}
	/* Umgebrochener Textlink auf die Schriftkante des Buttons darüber ausrichten
	   (25px padding-left + 1px Border des Buttons). */
	#link_text-93-26 {
		margin-left: 26px;
	}

	/* Hero: erzwang 100svh (= volle Bildschirmhöhe) auf Section, Inner-Wrap und
	   Bildspalte – dadurch viel Weißraum über/unter dem kurzen Text und ein leerer
	   Streifen unter dem Foto. Bewusst nur auf den Hero gemünzt (per ID), denn die
	   Klassen .fullscreen-sektion / .bildspalte nutzt auch der "Über mich"-Bereich,
	   der seine volle Höhe behalten soll. */
	#section-79-26,
	#section-79-26 > .ct-section-inner-wrap,
	#div_block-81-26 {
		min-height: clamp(560px, 60vh, 720px);
	}

	/* "Über mich": Foto soll auf volle Sectionhöhe mitlaufen (Text ist ohnehin lang),
	   statt auf der 100svh-Mindesthöhe der .bildspalte-Klasse zu kleben. */
	#div_block-225-26 {
		align-self: stretch;
		min-height: 0;
	}
	/* ... und der Fließtext daneben etwas kleiner, damit die Spalte nicht so hoch baut. */
	#text_block-251-26 {
		font-size: clamp(14px, 1.4vw, 15.5px);
	}

	/* Abstand zwischen Bild- und Textspalte im "Kommt dir das bekannt vor?"-Bereich
	   verkleinern, damit der Text mehr Luft zum rechten Rand hat.
	   Konkurriert mit einer ID-Regel (#section-429-26 > .ct-section-inner-wrap),
	   daher hier ausnahmsweise !important – nur auf "gap". */
	#section-429-26 > .ct-section-inner-wrap {
		gap: clamp(30px, 4vw, 60px) !important;
	}

	/* Die 4 Angebots-Karten: zu viert nebeneinander zu schmal (fester height: 520px,
	   Text lief unten raus). Stattdessen 2 pro Zeile im Grid; grid-auto-rows: 1fr
	   macht alle vier Karten gleich hoch, ohne dass Text clippt.
	   display/width/height kommen bei Oxygen per ID-Regel, daher dort !important. */
	#div_block-213-26 {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 1fr;
		align-items: stretch;
	}
	#div_block-177-26,
	#div_block-191-26,
	#div_block-197-26,
	#div_block-203-26 {
		width: auto !important;
		height: auto !important;
		/* Oxygen setzt nur padding-top/left/right, unten 0 – dadurch klebte der Text
		   der längsten Karte an der Unterkante. Symmetrisch zum padding-top. */
		padding-bottom: 40px;
	}

	/* Leistungs-Pills ("Social Media", "Content-Strategie" etc.): Zeile soll umbrechen, nicht der Text */
	#div_block-410-26 {
		flex-wrap: wrap;
		row-gap: 15px;
	}
	#div_block-410-26 > .ct-text-block {
		white-space: nowrap;
		flex-shrink: 0;
	}
}


/* Tablet ab hier abwärts (768px). Bewusst als eigener Block, damit die
   1024px-Ansicht oben unverändert bleibt. Alle überschriebenen Werte stehen bei
   Oxygen in ID-Regeln, daher jeweils !important auf der einen Eigenschaft. */
@media (max-width: 991px) {

	/* "Kommt dir das bekannt vor?": zwischen Ziffer (01/02/03) und Text lagen
	   75–80px. Bei ~340px Spaltenbreite bleibt dem Text so nur ein Viertel.
	   Zusätzlich die vertikalen Abstände enger: je 25px oben/unten ergaben 50px
	   zwischen den drei Einträgen. */
	#div_block-112-26,
	#div_block-138-26,
	#div_block-154-26 {
		gap: clamp(16px, 3vw, 28px) !important;
		padding-top: clamp(10px, 1.8vw, 18px) !important;
		padding-bottom: clamp(10px, 1.8vw, 18px) !important;
	}

	/* Überschrift darüber hatte 50px padding-bottom zum ersten Eintrag. */
	#_rich_text-301-26 {
		padding-bottom: clamp(16px, 3vw, 28px) !important;
	}

	/* "Über mich": Bild darf schmaler werden, die Textspalte nimmt den Rest.
	   Dadurch passt mehr Text nebeneinander und der Abschnitt baut flacher.
	   Zusätzlich die 100svh-Mindesthöhe lösen, sonst bleibt der Abschnitt auf
	   Bildschirmhöhe gestreckt, obwohl der Text kürzer ist. Das Foto läuft über
	   align-self: stretch (Block oben) weiterhin auf volle Höhe mit. */
	#section-224-26,
	#section-224-26 > .ct-section-inner-wrap {
		min-height: 0;
	}
	#section-224-26 > .ct-section-inner-wrap {
		gap: clamp(8px, 1.5vw, 16px) !important;
	}
	#div_block-225-26 {
		width: 34% !important;
		flex: 0 0 34%;
	}
	#div_block-227-26 {
		width: auto !important;
		flex: 1 1 auto;
		min-width: 0;
		/* Linker Seitenabstand: 36px der .textspalte plus 50px am inneren Block
		   ergaben 86px Einzug. Jetzt eine Kante – exakt derselbe Ausdruck wie das
		   Padding von "So arbeite ich", damit beide Sections links fluchten. */
		padding-left: clamp(32px, 7vw, 120px);
	}
	#div_block-228-26 {
		padding-left: 0 !important;
	}

	/* "So arbeite ich": die beiden Icon-Spalten untereinander statt nebeneinander. */
	#div_block-318-26 {
		flex-direction: column !important;
		align-items: stretch;
		gap: 50px !important;
	}
	#div_block-267-26,
	#div_block-390-26 {
		width: 100% !important;
	}
	/* 150px/120px Innenabstand sind bei dieser Breite unverhältnismäßig. */
	#section-223-26 > .ct-section-inner-wrap {
		padding: clamp(60px, 9vw, 150px) clamp(32px, 7vw, 120px) !important;
	}

	/* Kontaktbereich: 100px Spaltenabstand drücken die Formularspalte schmal
	   und ziehen den Abschnitt in die Höhe.
	   (Die Sektion heißt seit einer Änderung im Builder #kontakt statt
	   #section-252-26 – die Selektoren wurden entsprechend nachgezogen.) */
	#kontakt > .ct-section-inner-wrap {
		gap: clamp(20px, 4vw, 40px) !important;
	}

	/* Das Foto hing auf fester height: 600px, das Formular daneben baut aber 766px –
	   dadurch blieben oben und unten Lücken. Foto läuft jetzt auf Formularhöhe mit
	   (object-fit: cover ist gesetzt, es wird also beschnitten statt verzerrt). */
	#div_block-253-26 {
		align-self: stretch;
		position: relative;
		/* Feste Spaltenbreite: sonst zieht die Flex-Basis des Bildes die Spalte mit
		   in die Breite, sobald das Bild höher wird (Rückkopplung Höhe -> Breite). */
		flex: 0 0 46%;
	}
	#image-254-26 {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100% !important;
	}
	#div_block-255-26 {
		width: auto !important;
		flex: 1 1 auto;
		min-width: 0;
	}
}


/* Breakpoint-unabhängig: Bild in "Kommt dir das bekannt vor?" oben und unten
   bündig mit der Textspalte. Oxygen setzt am Bild eine feste height: 450px per
   ID-Regel, daher !important – aber nur auf height. Die Breite (width: 400px,
   auf schmalen Viewports per max-width gedeckelt) bleibt unangetastet, und
   object-fit: cover ist bereits gesetzt, es wird also beschnitten statt verzerrt. */
#div_block-431-26 {
	align-self: stretch;
	position: relative;
}
#image-434-26 {
	position: absolute;
	top: 0;
	height: 100% !important;
}


/* "Über mich": Die Person sitzt bei ca. 37% der Bildbreite, nicht bei 50%.
   Bei der schmalen Bildspalte (34%) schneidet object-fit: cover links und rechts
   gleich viel weg, dadurch rutscht sie aus der Mitte. Der X-Wert holt sie zurück;
   Y bleibt auf 0 (oben), wie in Oxygens ≤991px-Regel. Nur in diesem Bereich nötig –
   darüber ist der Beschnitt zu flach, darunter (≤767px) gilt Oxygens eigene
   Mobil-Ausrichtung. */
@media (min-width: 768px) and (max-width: 991px) {
	#image-226-26 {
		object-position: 24% 0;
	}
}

/* Ab 992px ist die Bildspalte breiter, der horizontale Beschnitt entsprechend
   flacher: Rechnerisch müsste der Wert negativ sein, um die Person in die Mitte
   zu holen – der linke Anschlag (0) ist also das erreichbare Optimum. Wo gar kein
   Beschnitt mehr entsteht (breite Spalte, z.B. Desktop), bleibt die Regel wirkungslos.
   Y unverändert bei 50%, wie in Oxygens Basisregel. */
@media (min-width: 992px) {
	#image-226-26 {
		object-position: 0 50%;
	}
}


/* Handy (≤767px, Oxygens eigener Mobil-Breakpoint): Alles, was in den Sektionen
   noch nebeneinander steht, untereinander umbrechen. Oxygen hat für einige
   Elemente zwar schon Mobilregeln, die aber an ID-Regeln scheitern – und meine
   Tablet-Werte oben (feste Spaltenbreiten, align-self, Mindesthöhen) müssen hier
   ebenfalls zurückgenommen werden. */
@media (max-width: 767px) {

	/* Spaltenzeilen der Sektionen auf Stapel umstellen. */
	#section-79-26 > .ct-section-inner-wrap,
	#section-429-26 > .ct-section-inner-wrap,
	#section-224-26 > .ct-section-inner-wrap,
	#kontakt > .ct-section-inner-wrap {
		flex-direction: column !important;
		gap: clamp(24px, 6vw, 40px) !important;
	}

	/* Die Spalten selbst auf volle Breite; setzt die Tablet-Regeln oben zurück. */
	#div_block-82-26,
	#div_block-81-26,
	#div_block-431-26,
	#div_block-101-26,
	#div_block-227-26,
	#div_block-225-26,
	#div_block-253-26,
	#div_block-255-26 {
		/* stretch statt width: 100% – sonst addiert sich z.B. der 25px-Eigenmargin
		   der Hero-Textspalte auf die volle Breite und die Seite scrollt seitlich. */
		width: auto !important;
		flex: 0 0 auto !important;
		align-self: stretch !important;
	}

	/* Angebots-Karten einspaltig. grid-auto-rows zurück auf auto, sonst bekämen
	   auch kurze Karten die Höhe der längsten. */
	#div_block-213-26 {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}

	/* Die beiden Bilder, die für die Spaltenansicht absolut positioniert sind,
	   zurück in den Fluss – sonst hätte die gestapelte Spalte keine Höhe mehr
	   und das Bild verschwände. Natürliches Seitenverhältnis, kein Beschnitt. */
	#image-434-26,
	#image-254-26 {
		position: static;
		width: 100%;
		height: auto !important;
	}

	/* Hero: meine Tablet-Mindesthöhen zurücknehmen, damit Oxygens Mobilwerte greifen. */
	#section-79-26,
	#section-79-26 > .ct-section-inner-wrap,
	#div_block-81-26 {
		min-height: 0;
	}

	/* Footer: Logo, Links und E-Mail standen nebeneinander und liefen 7px über. */
	#section-10-65 > .ct-section-inner-wrap {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 20px;
	}
}


/* Handy: zwei Sonderfälle für die ersten beiden Sektionen. */
@media (max-width: 767px) {

	/* 1) Hero: Foto als Hintergrund hinter den Text legen. Die Bildspalte wird
	   dafür absolut über die ganze Sektion gezogen, das Bild füllt sie formatfüllend.
	   Ein halbtransparenter Überzug in der Sektionsfarbe (238,234,228) hält den
	   dunklen Text (23,8,67) lesbar. */
	#section-79-26 > .ct-section-inner-wrap {
		position: relative;
	}
	#div_block-81-26 {
		position: absolute !important;
		inset: 0;
		width: auto !important;
		height: auto !important;
		z-index: 0;
	}
	#image-83-26 {
		position: absolute !important;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	#div_block-81-26::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(238, 234, 228, 0.72);
	}
	#div_block-82-26 {
		position: relative;
		z-index: 1;
	}

	/* 2) "Kommt dir das bekannt vor?": Bild unter den Text und ins Querformat,
	   damit es deutlich flacher baut. Der Bildausschnitt ist so gesetzt, dass
	   Kopf und Laptop im Bild bleiben (Person sitzt bei ca. 23–46% der Bildhöhe). */
	#div_block-101-26 {
		order: 1;
	}
	#div_block-431-26 {
		order: 2;
	}
	#image-434-26 {
		aspect-ratio: 3 / 2;
		height: auto !important;
		object-fit: cover;
		object-position: 50% 23%;
	}
}


/* Handy: Feinschliff der einzelnen Bereiche. */
@media (max-width: 767px) {

	/* Hero höher und das Hintergrundfoto deutlicher zeigen.
	   Die min-height aus dem Block oben wird hier bewusst wieder gesetzt. */
	#section-79-26,
	#section-79-26 > .ct-section-inner-wrap {
		min-height: 78svh;
	}
	#div_block-81-26::after {
		background: rgba(238, 234, 228, 0.55);
	}

	/* "Mein Angebot": Schrift und Innenabstand der Karten fürs Handy zurücknehmen. */
	#div_block-177-26,
	#div_block-191-26,
	#div_block-197-26,
	#div_block-203-26 {
		padding: 28px 22px !important;
	}
	#div_block-213-26 .ct-headline {
		font-size: 17px;
		line-height: 1.3;
	}
	#div_block-213-26 > div > .ct-text-block:last-child {
		font-size: 14.5px;
	}

	/* "Über mich": Foto größer skalieren und horizontal so verschieben, dass die
	   Person mittig steht – sie sitzt bei ca. 37% der Bildbreite. Die Spalte hat
	   bereits overflow: hidden, der Überstand wird also sauber abgeschnitten.
	   Rechnung: Bildbox = 150% der Spalte, Person landet bei 0,37 × 1,5 = 55,5%
	   der Spaltenbreite; Verschiebung um -5,5% bringt sie auf 50%. */
	#image-226-26 {
		width: 150%;
		max-width: none;
		margin-left: -5.5%;
		/* Vertikal: Kopf liegt bei ca. 38% der Bildhöhe; mit diesem Wert sitzt er
		   im oberen Drittel des Ausschnitts statt knapp über der Unterkante. */
		object-position: 50% 44%;
	}

	/* Kontakt: Foto unter das Formular und kleiner (quadratisch statt hochkant).
	   Ausschnitt so, dass Kopf (13–30% der Bildhöhe) und Oberkörper drin bleiben. */
	#div_block-255-26 {
		order: 1;
	}
	#div_block-253-26 {
		order: 2;
	}
	#image-254-26 {
		aspect-ratio: 1 / 1;
		height: auto !important;
		object-fit: cover;
		object-position: 50% 20%;
	}
}


/* Kontaktformular: eckige Ecken statt der 7px-Rundung, passend zum übrigen Stil
   (Buttons der Seite haben bereits border-radius: 0).
   Oxygen setzt zwar schon 0, wird aber von fluentform-public-default.css
   (.ff-default .ff-el-form-control) überschrieben, das später lädt. Tag + Klasse
   hebt die Spezifität eine Stufe über dessen zwei Klassen – ohne !important und
   unabhängig von der Ladereihenfolge. Gilt in allen Bildschirmgrößen. */
.frm-fluent-form input.ff-el-form-control,
.frm-fluent-form textarea.ff-el-form-control,
.frm-fluent-form select.ff-el-form-control {
	border-radius: 0;
}


/* Hero im gesamten Handy-/Phablet-Bereich bis zum Tablet-Breakpoint (≤767px):
   Abstände mitskalieren lassen statt fester 40/24px, und oben deutlich mehr Luft.
   Der 25px-Eigenmargin der Textspalte fällt weg, damit der linke Abstand allein
   über das Padding gesteuert wird. */
@media (max-width: 767px) {
	#div_block-82-26 {
		/* Oxygen setzt die 25px per ID-Regel und lädt nach dieser Datei – hier
		   kommt man ohne !important nicht dagegen an. */
		margin-left: 0 !important;
		padding-top: clamp(64px, 14vw, 112px);
		padding-bottom: clamp(40px, 8vw, 72px);
		padding-left: clamp(24px, 6vw, 52px);
		padding-right: clamp(24px, 6vw, 52px);
	}
	#section-79-26,
	#section-79-26 > .ct-section-inner-wrap {
		min-height: clamp(560px, 78svh, 820px);
	}
}


/* Hero-Feinschliff im Handy-/Phablet-Bereich. */
@media (max-width: 767px) {

	/* Überschrift mitwachsen lassen: bei ~46px bricht sie ab etwa 600px Breite nur
	   noch zweizeilig um und wirkt verloren. Ab ~548px skaliert sie mit, sodass
	   der Dreizeiler erhalten bleibt. */
	#section-79-26 h1 {
		font-size: clamp(46px, 8.4vw, 64px);
	}

	/* Gleicher Abstand oben und unten: Der Textblock stand oben, der Rest der
	   Sektionshöhe blieb als Leerfläche unten. Zentriert verteilt sich der
	   Freiraum gleichmäßig; das Padding der Spalte ist dafür symmetrisch. */
	#section-79-26 > .ct-section-inner-wrap {
		justify-content: center;
	}
	#div_block-82-26 {
		padding-top: clamp(48px, 9vw, 80px);
		padding-bottom: clamp(48px, 9vw, 80px);
		/* Inhalt mittig, solange der Hero die gestapelte Variante mit
		   Hintergrundbild zeigt (also unterhalb von 767px). */
		text-align: center;
		align-items: center;
	}
	#div_block-90-26 {
		justify-content: center;
	}
	/* Der 26px-Versatz stammt aus der Tablet-Ansicht, wo der Link unter dem
	   Button auf dessen Schriftkante ausgerichtet wurde – zentriert stört er. */
	#link_text-93-26 {
		margin-left: 0;
	}

	/* Foto näher an die Person: 1,3-fach vergrößert und horizontal so verschoben,
	   dass ihr Kopf (bei ca. 35% der Bildbreite) in der Sektionsmitte landet.
	   Rechnung: 0,35 × 1,3 = 45,5% – plus 4,5% Versatz ergibt 50%.
	   Die Bildspalte hat overflow: hidden, der Überstand wird abgeschnitten. */
	#image-83-26 {
		/* Zoomstufe begrenzen: Die Bildbreite in Prozent zu setzen bedeutet, dass
		   der Zoom mit dem Viewport mitwächst – bei 767px waren nur noch 41% der
		   Bildhöhe zu sehen (praktisch nur der Kopf). Der Pixelwert deckelt das:
		   auf schmalen Displays bleibt es bei spürbarem Zoom, ab ca. 520px
		   Breite läuft es auf 100% hinaus. max(100%, ...) sichert dabei, dass die
		   Sektion immer voll bedeckt ist und links kein Streifen entsteht. */
		width: max(100%, min(150%, 520px));
		max-width: none;
		left: 0;
		/* Kopf an die Oberkante: Im Originalfoto liegt über ihrem Kopf noch rund
		   ein Fünftel leere Wand. object-view-box schneidet diesen Bereich aus der
		   Bildquelle heraus, danach sitzt der Kopf am oberen Rand des Ausschnitts –
		   unabhängig von der Viewportbreite, ohne dass ich je Breite einen eigenen
		   object-position-Wert pflegen muss.
		   Firefox kennt die Eigenschaft noch nicht und zeigt dort weiterhin den
		   bisherigen Ausschnitt; das ist ein reiner Rückfall, nichts bricht. */
		object-view-box: inset(18% 0 0 0);
		object-position: 50% 0;
	}
}


/* Große Bildschirme (ab 1600px). Darunter bleibt alles wie bisher – Laptops mit
   1440/1512px sind bewusst ausgenommen, die Ansicht dort war abgenommen.
   Die Theme-Werte sind bereits fluid (clamp), laufen aber alle schon bei rund
   1180px Viewport in ihre Obergrenze. Hier werden nur diese Deckel angehoben,
   die Skalierungskurve selbst bleibt unverändert. */
@media (min-width: 1600px) {

	/* Inhaltsbreite: 1120px sind bei 2300px Viewport nicht mal die Hälfte.
	   Oxygens Regel ist eine einzelne Klasse – doppelt genannt reicht als
	   Spezifität, ohne !important. */
	.ct-section-inner-wrap.ct-section-inner-wrap,
	.oxy-header-container.oxy-header-container {
		max-width: min(1760px, 84vw);
	}

	/* Schrift: Obergrenzen anheben. Elementselektoren mit body davor schlagen
	   die Theme-Regeln (h2,h3,… bzw. body) ohne !important. */
	html body {
		font-size: clamp(15.5px, 0.95vw, 22px);
	}
	body h1 {
		font-size: clamp(2.9rem, 4.8vw, 7rem);
	}
	body h2 {
		font-size: clamp(1.9rem, 2.6vw, 3.9rem);
	}
	body h3,
	body h4,
	body h5,
	body h6 {
		font-size: clamp(19px, 1.85vw, 30px);
	}

	/* Fließtext der Angebots-Karten hängt an ID-Regeln je Karte; der Selektor
	   aus ID + zwei Klassen liegt darüber. */
	#div_block-213-26 > div > .ct-text-block:last-child {
		font-size: clamp(16.5px, 0.9vw, 20px);
	}

	/* Zwei prominente Absätze mit fester Größe aus ID-Regeln. */
	#text_block-86-26 {
		font-size: clamp(25px, 1.25vw, 30px) !important;
	}
	#text_block-259-26 {
		font-size: clamp(18px, 0.95vw, 22px) !important;
	}

	/* Sektion 2: Bild darf die Spalte ausfüllen statt auf 400px zu bleiben.
	   Oxygens width: 400px steht in einer ID-Regel; Eltern-ID davor hebt die
	   Spezifität, ohne !important. */
	#div_block-431-26 #image-434-26 {
		width: 100%;
	}
	/* Spalten neu verteilt: vorher 50/50, wobei das Bild seine Spalte gar nicht
	   ausfüllte (400 von 810px). Jetzt 40/60 – das Bild wird trotzdem breiter
	   (400 -> ~640px), und die Textspalte gewinnt genug, damit die Überschrift
	   eine Zeile weniger braucht. Die 50px je Spalte sind der halbe Spaltenabstand. */
	#div_block-431-26 {
		flex: 0 0 calc(40% - 50px);
	}
	#div_block-101-26 {
		flex: 0 0 calc(60% - 50px);
	}
	/* Mehr Luft zu den Nachbarsektionen: Der Abschnitt hatte 75px oben/unten
	   (Oxygens Basiswert), während "Mein Angebot" und "So arbeite ich" bei 150px
	   liegen. Skaliert mit und erreicht bei ~2300px genau diese 150px. */
	#section-429-26 > .ct-section-inner-wrap {
		padding-top: clamp(75px, 6.5vw, 170px);
		padding-bottom: clamp(75px, 6.5vw, 170px);
	}

	/* "Erstgespräch": Foto (400px fest) und Formular (50%) füllten die neue
	   Breite nicht – rechts blieben 650px ungenutzt. Beide Spalten auf feste
	   Anteile, das Foto läuft wie in der Tabletansicht absolut in seiner Spalte
	   mit, damit es nicht über die eigene Seitenverhältnis-Höhe die Zeile aufzieht. */
	#div_block-253-26 {
		flex: 0 0 calc(42% - 50px);
		align-self: stretch;
		position: relative;
	}
	#div_block-255-26 {
		flex: 0 0 calc(58% - 50px);
		width: auto;
	}
	#kontakt #image-254-26 {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}


/* Kopfbereich auf dem Handy. */
@media (max-width: 767px) {

	/* Oxygen setzt hier "padding: 25px 10vh" – der seitliche Abstand hängt also an
	   der Viewport-HÖHE statt an der Breite. Auf einem hohen Display werden daraus
	   über 90px (mehr als ein Fünftel der Breite), auf einem flachen Fenster fast
	   nichts. Dadurch passte der Inhalt (Links + Button, zusammen ~278px) nicht in
	   die verbleibende Fläche und lief rechts über den Rand hinaus.
	   Jetzt ein breitenbasierter Wert, symmetrisch auf beiden Seiten. */
	#inner_content-3-228 #section-9-66 > .ct-section-inner-wrap {
		padding-left: clamp(20px, 6vw, 48px);
		padding-right: clamp(20px, 6vw, 48px);
		/* Notbehelf, solange es kein Burger-Menü gibt: Logo + Button in Zeile eins,
		   die Menüpunkte darunter. Vorher wurde alles in eine Zeile gequetscht –
		   das Logo auf 19px und die Links links abgeschnitten. */
		flex-wrap: wrap;
		row-gap: 14px;
	}
	/* Logo links, Button rechts – beide behalten ihre natürliche Breite, statt
	   zusammengequetscht zu werden. (Die fünf Menüpunkte, für die hier vorher ein
	   Umbruch nötig war, sind inzwischen nicht mehr im Header-Markup.) */
	#inner_content-3-228 #div_block-12-66,
	#inner_content-3-228 #div_block-10-66 {
		flex: 0 0 auto;
	}
}


/* ==========================================================================
   Mobile Fassung nach Screenshot-Vorlage (ohne Header und Footer).
   Steht bewusst am Dateiende, damit sie die vorherigen Mobil-Regeln ablöst.
   ========================================================================== */
@media (max-width: 767px) {

	/* --- Hero: Foto oben, darunter eine dunkle Karte mit orangefarbenem CTA --- */
	#section-79-26 {
		background-color: rgba(165, 88, 143, 0.16);
		min-height: 0;
	}
	#section-79-26 > .ct-section-inner-wrap {
		min-height: 0;
		justify-content: flex-start;
		gap: 0 !important;
		padding-bottom: clamp(28px, 7vw, 48px);
	}

	/* Bildspalte wieder in den Fluss und nach oben; der Überzug von vorher entfällt. */
	#div_block-81-26 {
		position: relative !important;
		inset: auto;
		order: 1;
		width: auto !important;
		align-self: stretch !important;
		/* height braucht !important: der Hintergrundbild-Block weiter oben setzt
		   height: auto !important, sonst fällt die Spalte auf 0 zusammen. */
		height: clamp(240px, 40svh, 420px) !important;
		min-height: 0;
		overflow: hidden;
		z-index: auto;
	}
	#div_block-81-26::after {
		content: none;
	}
	#image-83-26 {
		position: absolute !important;
		inset: 0;
		left: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
	}

	/* Textspalte als dunkle Karte, die das Foto leicht überlappt. */
	#div_block-82-26 {
		order: 2;
		position: relative;
		z-index: 1;
		background-color: rgb(23, 8, 67);
		margin: clamp(-56px, -9vw, -32px) clamp(14px, 4vw, 28px) 0 !important;
		padding: clamp(28px, 6vw, 40px) clamp(22px, 5vw, 32px);
		text-align: left;
		align-items: stretch;
	}
	#section-79-26 h1,
	#text_block-86-26 {
		color: rgb(250, 246, 240);
	}

	/* CTA: orangefarbener Button über die volle Kartenbreite, Link darunter mittig.
	   Hintergrund, Rahmen und Farbe stehen bei Oxygen in ID-Regeln, daher !important. */
	#div_block-90-26 {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		row-gap: 14px;
	}
	#link_button-88-26 {
		background-color: rgb(255, 150, 73) !important;
		border-color: rgb(255, 150, 73) !important;
		color: rgb(23, 8, 67) !important;
		text-align: center;
		width: 100%;
		align-self: stretch;
	}
	#link_text-93-26 {
		color: rgb(250, 246, 240) !important;
		text-align: center;
		align-self: center;
		margin-left: 0;
	}

	/* --- "Kommt dir das bekannt vor?": in der Vorlage ohne Foto --- */
	#div_block-431-26 {
		display: none;
	}

	/* --- "So arbeite ich": Überschrift und Einleitung linksbündig --- */
	#headline-263-26,
	#text_block-266-26 {
		text-align: left;
	}

	/* --- Erstgespräch: Foto wieder über das Formular, Absenden über volle Breite --- */
	#div_block-253-26 {
		order: 1;
	}
	#div_block-255-26 {
		order: 2;
	}
	#image-254-26 {
		aspect-ratio: 4 / 5;
	}
	.frm-fluent-form .ff-btn-submit {
		width: 100%;
	}
}


/* Ankersprünge (#kontakt, #angebot, #top): weich scrollen statt hart springen,
   und am Ziel etwas Luft nach oben lassen, damit die Sektion nicht bündig an der
   Fensterkante klebt. Gilt in allen Breiten.
   Wer im Betriebssystem "Bewegung reduzieren" aktiviert hat, bekommt weiterhin
   den harten Sprung – weiches Scrollen kann bei Vestibularstörungen Übelkeit
   auslösen. */
html {
	scroll-behavior: smooth;
}
#kontakt,
#angebot {
	scroll-margin-top: clamp(16px, 4vw, 48px);
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}


/* Nachbesserungen nach dem Livegang (geprüft auf iPhone 16 Pro, 402px). */
@media (max-width: 767px) {

	/* Hero-Foto: Das Motiv ging im Hintergrund unter – im Streifen war fast nur
	   leere Wand zu sehen, die Person klein in der Mitte. Gemessen steht sie bei
	   34% der Bildbreite, ihr Kopf zwischen 23% und 40% der Bildhöhe.
	   Der Ausschnitt zeigt jetzt nur noch den Bereich 0–76% waagerecht und
	   18–62% senkrecht; dessen Seitenverhältnis (1,15) entspricht etwa dem des
	   Streifens, es wird also kaum zusätzlich beschnitten. */
	#image-83-26 {
		/* Bewusst OHNE object-view-box: Safari kennt die Eigenschaft erst ab
		   iOS 18.2 und ignoriert sie davor ersatzlos – auf solchen Geräten war
		   gar kein Ausschnitt wirksam. Deshalb hier mit Mitteln, die jeder
		   Browser beherrscht:
		   - width: 130% zeigt waagerecht nur die linken 77% des Fotos. Die Person
		     steht bei 34% der Bildbreite und landet damit bei 44% des Streifens,
		     also ungefähr mittig.
		   - height: auto behält das Seitenverhältnis, das Bild wird nicht verzerrt.
		   - translateY(-18%) schiebt es um 18% SEINER EIGENEN Höhe nach oben und
		     schneidet so die leere Wand über ihrem Kopf weg. Prozent beziehen sich
		     bei transform auf das Element selbst – dadurch stimmt der Ausschnitt
		     bei jeder Streifenhöhe, ohne Sonderwerte je Breite.
		   Der Überstand wird von der Spalte (overflow: hidden) abgeschnitten. */
		object-view-box: none;
		width: 130%;
		max-width: none;
		height: auto;
		left: 0;
		top: 0;
		transform: translateY(-18%);
	}
}

/* Überschrift "Von der Standortbestimmung" ragte auf sehr schmalen Geräten
   (unter ca. 390px, z.B. iPhone SE) seitlich heraus: "Standortbestimmung" passt
   bei 30px Schriftgröße nicht in die Zeile und wurde nicht getrennt. Die Seite
   ist auf Deutsch gestellt, der Browser kann also sauber "Standort-bestimmung"
   trennen – das war nur nicht eingeschaltet. */
@media (max-width: 389px) {
	#_rich_text-427-26,
	#_rich_text-427-26 h2 {
		hyphens: auto;
	}
	/* Sicherheitsnetz für andere lange Wörter: greift nur, wenn ein Wort sonst
	   überlaufen würde, sonst bleibt alles wie es ist. */
	h1, h2, h3 {
		overflow-wrap: break-word;
	}
}


/* Hero näher an den ursprünglichen Entwurf (nur mobil).
   Gemessener Vergleich bei 402px Breite – Entwurf gegen bisherigen Stand:
   Fotohöhe 486 statt 350, Überlappung der Karte 113 statt 36, seitlicher
   Einzug 27 statt 16, und unter der Karte bleibt im Entwurf noch ein Streifen
   Sektionsfarbe sichtbar (rund 30px) statt bündig abzuschließen.
   Die Zoomstufe des Fotos bleibt unverändert – sie stimmte bereits mit dem
   Entwurf überein (beide etwa 1,3-fach). */
@media (max-width: 767px) {
	#div_block-81-26 {
		height: clamp(320px, 56svh, 560px) !important;
	}
	#div_block-82-26 {
		margin: clamp(-140px, -28vw, -72px) clamp(20px, 6.7vw, 40px) 0 !important;
	}
	/* Eltern-ID davor: Oxygen setzt in 26.css "padding: 0" auf denselben
	   Selektor und lädt nach dieser Datei – ohne die zusätzliche ID bliebe
	   der Streifen unter der Karte unsichtbar. */
	#inner_content-3-228 #section-79-26 > .ct-section-inner-wrap {
		padding-bottom: clamp(24px, 7.5vw, 48px);
	}
}