@charset "utf-8";
/* ==================================================================================================================
   ISO-FLEX 2026 :: basic.css (Grundlage: vollmond basis)
   Schriften, Farben, Grundklassen und alle Bausteine in der Grundform (mobil).
   Werte aus dem Layout _projekt/1_layout/startseite/startseite.html (Design-Tokens im :root dort).
   Schriftgrößen in rem (1rem = 16px). Größen je Breakpoint stehen als Variablen in res750 / res1225 / res1400 / res1800.
   ================================================================================================================== */

/* |||||||||| Start :: SCHRIFTEN |||||||||| */

@font-face { font-display: swap; font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; src: url('../fonts/space-grotesk-v22-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; src: url('../fonts/space-grotesk-v22-latin-500.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; src: url('../fonts/space-grotesk-v22-latin-600.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; src: url('../fonts/space-grotesk-v22-latin-700.woff2') format('woff2'); }

@font-face { font-display: swap; font-family: 'Inter'; font-style: normal; font-weight: 400; src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Inter'; font-style: normal; font-weight: 500; src: url('../fonts/inter-v20-latin-500.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Inter'; font-style: normal; font-weight: 600; src: url('../fonts/inter-v20-latin-600.woff2') format('woff2'); }

/* |||||||||| Ende :: SCHRIFTEN |||||||||| */


/* |||||||||| Start :: FARBEN + VARIABLEN |||||||||| */
/* Namen wie in der Referenz (--rot, --schwarz …), Werte aus dem Layout. Mobil (unter 750px) = Werte des Layouts bis 760px */

:root{
	--rot:				#E20613;	/* Markenrot (4,9:1 auf Weiß) */
	--rot_dunkel:		#B20410;
	--rot_hell:			#FF4A55;	/* Rot auf dunklem Grund */
	--rot_flaeche:		#FCEBEC;	/* sehr helle Rotfläche */
	--schwarz:			#121211;	/* Text, dunkler Hero, Anthrazit */
	--schwarz_tief:		10,10,9;	/* für rgba() in Verläufen */
	--weiss:			#FFFFFF;
	--bg:				#FBFBF9;	/* Grundfläche, warmes Off-White */
	--grau_bg:			#F1F1EE;	/* Kartenfläche hell */
	--grau_bg_dunkel:	#E7E7E2;	/* Kartenfläche betont */
	--grau_linie:		#E2E2DD;	/* Haarlinie */
	--grau_linie_dunkel:#C6C6C0;	/* Linie betont, Outline-Ziffern */
	--markengrau:		#575756;
	--text:				#6B6B68;	/* Sekundärtext / Fließtext hell (5,0:1) */
	--text_dunkel:		#121211;
	--text_grau:		#6B6B68;
	--text_hell:		#CFCFCA;	/* Sekundärtext auf dunkel */

	--font_headline:	'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
	--font_text:		'Inter', 'Helvetica Neue', Arial, sans-serif;

	/* Schriftgrößen (mobil fest, ab 750px fließend wie im Layout) */
	--h_hero:			2.375rem;	/* 38px */
	--h_header:			2.125rem;	/* Seitenname im Kopf der Unterseiten */
	--h_big:			1.75rem;	/* 28px */
	--h_mittel:			1.5rem;
	--h_box:			1.1875rem;	/* 19px */
	--h_zitat:			1.25rem;	/* 20px */
	--h_klein:			1.1875rem;
	--lead:				1.0625rem;	/* 17px */
	--txt:				1.0625rem;	/* 17px */
	--txt_lh:			1.7;
	--txt_klein:		.875rem;	/* 14px */
	--label:			.875rem;	/* 14px – kleinste Schrift der Website (Fabian 06.11.2026: nichts unter 14px) */
	--zahl_outline:		2.875rem;	/* 46px */
	--zahl_fakt:		2.75rem;	/* 44px */
	--kicker:			.875rem;
	--button:			1.0625rem;
	--nav:				1.0625rem;
	--lh_head:			1.08;
	--ls_head:			-0.035em;
	--ls_label:			0.1em;		/* Layout 0.14em bei 12px – bei 14px etwas enger, damit Pillen kompakt bleiben */

	/* Abstände (8er-Raster wie im Layout) */
	--sp1: 8px; --sp2: 16px; --sp3: 24px; --sp4: 32px; --sp5: 48px; --sp6: 72px; --sp7: 104px;
	--sp8: clamp(96px, 8vw, 148px);
	--sp9: clamp(120px, 11vw, 200px);
	--abstand_bereich:	var(--sp8);
	--abstand_klein:	var(--sp5);
	--rand:				clamp(24px, 3.6vw, 80px);	/* Seitenrand neben dem 1800er Raster */

	/* Formen */
	--r_s:				10px;
	--r_m:				18px;
	--r_l:				22px;
	--button_hoehe:		54px;
	--kreis:			48px;

	/* Kopf */
	--topbar_hoehe:		42px;
	--navbar_hoehe:		76px;
	--header_hoehe:		calc(var(--topbar_hoehe) + var(--navbar_hoehe));
	--header_hoehe_scroll: var(--navbar_hoehe);
	--logo_breite:		168px;
	--kontaktleiste_hoehe: 64px;

	--outline:			1.6px;
}

/* |||||||||| Ende :: FARBEN + VARIABLEN |||||||||| */


/* |||||||||| Start :: RESET + GRUNDLAGEN |||||||||| */

*,
*::before,
*::after{ box-sizing:border-box; }

/* overflow-x:clip statt hidden (hidden nur Rückfall für alte Browser): verhindert seitliches Scrollen, ohne html/body zum
   Scroll-Container zu machen – sonst funktioniert position:sticky nicht (Seitenleiste Karriere, Adresse Kontaktformular) */
html{ font-size:100%; -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip; }
body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:var(--font_text); font-size:var(--txt); line-height:var(--txt_lh); font-weight:400; overflow-x:hidden; overflow-x:clip; }
body.nav_is_open{ overflow:hidden; }

img, video, iframe{ max-width:100%; display:block; }
img{ height:auto; }

a{ color:inherit; text-decoration:none; transition:color .3s ease, background-color .3s ease, border-color .3s ease; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--rot); outline-offset:3px; }

p{ margin:0 0 var(--txt_lh) 0; }
p:last-child{ margin-bottom:0; }
b, strong{ font-weight:700; }
ul{ margin:0; padding:0; }
button{ font-family:inherit; font-size:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; }
h1, h2, h3, h4, h5, h6{ margin:0; font-weight:inherit; }

/* Sprungmarken nicht unter der festen Navigation verstecken */
[id]{ scroll-margin-top:calc(var(--header_hoehe_scroll) + 20px); }

::selection{ background:var(--rot); color:var(--weiss); }

.sr_only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip_link{ position:absolute; left:10px; top:-60px; z-index:1000; background:var(--rot); color:var(--weiss); padding:10px 16px; font-weight:600; }
.skip_link:focus{ top:10px; }

/* Grundklassen wie im Referenzprojekt */
.standard{ position:relative; }
.div_con_100{ position:relative; width:100%; float:none; }
.div_con_center_big{ position:relative; margin:0 auto; }
.topdiv{ position:relative; width:100%; overflow:clip; }

.bg_z_grey{ background:var(--grau_bg); }
.bg_z_schwarz{ background:var(--schwarz); color:var(--text_hell); }
.bg_z_weiss{ background:var(--weiss); }

/* Icons als Maske :: Farbe über background-color steuerbar (Grafiken aus 2_assets / Referenz) */

/* |||||||||| Ende :: RESET + GRUNDLAGEN |||||||||| */


/* |||||||||| Start :: TYPOGRAFIE |||||||||| */

/* Pille mit rotem Punkt (Layout .pill) :: kleine Überschrift aller Bereiche; .kicker = Pille aus den Referenz-Bausteinen */
.pille,
.kicker{
	display:inline-flex; align-items:center; gap:10px; width:fit-content; max-width:100%;
	margin:0 0 var(--sp3) 0; padding:9px 18px;
	background:var(--weiss); border:1px solid var(--grau_linie); border-radius:999px;
	font-family:var(--font_headline); font-size:var(--label); line-height:1.3; font-weight:600;
	letter-spacing:var(--ls_label); text-transform:uppercase; color:var(--text_dunkel);
}
.kicker{ display:flex; }
.pille::before,
.kicker::before{ content:""; flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--rot); }
.pille_ohne_punkt::before{ display:none; }
.pille_dunkel{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.26); color:var(--weiss); }
.pille_rot{ color:var(--rot); }
.bg_z_grey .kicker{ background:var(--weiss); }

.headline_big,
.headline_mittel,
.headline_header,
.headline_hero,
.headline_cta,
.headline_box{
	font-family:var(--font_headline); font-weight:600; letter-spacing:var(--ls_head); color:var(--text_dunkel);
}
span.headline_big{ display:block; }
.headline_big{ font-size:var(--h_big); line-height:var(--lh_head); margin:0 0 .4em 0; text-wrap:balance; overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; }
.headline_hero{ font-size:var(--h_hero); line-height:1.02; font-weight:700; }
.headline_mittel{ font-size:var(--h_mittel); line-height:1.12; margin:0 0 .5em 0; }
.headline_box{ font-size:var(--h_box); line-height:1.2; margin:0 0 .5em 0; }
.container_content, .content_kopf, .content_texte{ min-width:0; }
.text_rot{ color:var(--rot); }
.text_lead,
.txt_content.text_lead{ font-size:var(--lead); line-height:1.6; color:var(--text); }

/* Punkt am Ende einer Überschrift (formatHEADLINE) :: im Layout nicht rot */
.punkt{ font-style:normal; color:inherit; }

/* Roter Punkt vor einem Titel (Layout .dotted) */
.punkt_rot{ display:flex; gap:12px; }
.punkt_rot::before{ content:""; flex:0 0 auto; width:9px; height:9px; margin-top:.48em; border-radius:50%; background:var(--rot); }

/* Überschriften aus mehreren Feldern :: jede Zeile eigene Zeile, 2. Zeile rot */
.zeile{ display:block; }
.zeile_rot{ color:var(--rot); }
.zeile_outline{ color:transparent; -webkit-text-stroke:var(--outline) currentColor; }

/* Fließtext überall gleich (Content, Zusatzinhalte, Accordeons, FAQ, Formulare, Footer): --txt = 17px. Größer nur die Leads
   (Hero, Seitenkopf, Teaser der Startseite = .text_lead), kleiner nur Neben-Texte mit --txt_klein = 14px (Fabian 06.11.2026) */
.txt_content{ font-size:var(--txt); line-height:var(--txt_lh); color:var(--text); hyphens:auto; -webkit-hyphens:auto; }
.txt_content + .txt_content{ margin-top:1.7em; }
.txt_content p{ margin:0 0 1em 0; }
.txt_content p:last-child{ margin-bottom:0; }
.txt_content a{ color:var(--rot); text-decoration:underline; text-underline-offset:3px; }
.txt_content a:hover{ color:var(--rot_dunkel); }
.txt_content ul, .txt_content ol{ margin:0 0 1em 0; padding-left:1.3em; }
.txt_content li{ margin-bottom:.3em; }
.txt_content li::marker{ color:var(--rot); }
.txt_content strong, .txt_content b{ color:var(--text_dunkel); font-weight:600; }
.txt_content h2, .txt_content h3, .txt_content h4{ font-family:var(--font_headline); font-weight:600; letter-spacing:var(--ls_head); color:var(--text_dunkel); font-size:var(--h_box); line-height:1.2; margin:1.4em 0 .5em 0; }
.txt_content table{ border-collapse:collapse; }
.txt_content td{ padding:0 var(--sp5) 0 0; vertical-align:top; }

.datum_content{ font-size:var(--txt_klein); font-weight:600; letter-spacing:.06em; color:var(--rot); margin-bottom:.625rem; }

/* |||||||||| Ende :: TYPOGRAFIE |||||||||| */


/* |||||||||| Start :: GRAFISCHE ELEMENTE (Layout .gfx-stripes / .gfx-dots) |||||||||| */

.gfx_streifen{ position:absolute; pointer-events:none; background-image:repeating-linear-gradient(112deg, var(--rot) 0 10px, transparent 10px 24px); }
.gfx_punkte{ position:absolute; pointer-events:none; background-image:radial-gradient(var(--grau_linie_dunkel) 1.5px, transparent 1.6px); background-size:22px 22px; }
.linie{ display:block; height:1px; background:var(--grau_linie); margin:var(--sp3) 0; }

/* Outline-Ziffern */
.zahl_outline{ font-family:var(--font_headline); font-size:var(--zahl_outline); font-weight:700; line-height:.8; color:transparent; -webkit-text-stroke:var(--outline) var(--grau_linie_dunkel); }
@supports not (-webkit-text-stroke: 1px red){ .zahl_outline{ color:var(--grau_linie_dunkel); } }

/* Icons als Maske (Grafiken aus _projekt/2_assets/icons, images/icon_*.svg) */
.icon_maske{ display:inline-block; flex:0 0 auto; width:1em; height:1em; background-color:currentColor; -webkit-mask:no-repeat center / contain; mask:no-repeat center / contain; }
.icon_telefon{ -webkit-mask-image:url("../images/icon_telefon.svg"); mask-image:url("../images/icon_telefon.svg"); }
.icon_mail{ -webkit-mask-image:url("../images/icon_mail.svg"); mask-image:url("../images/icon_mail.svg"); }
.icon_check{ -webkit-mask-image:url("../images/icon_bauwerks-check.svg"); mask-image:url("../images/icon_bauwerks-check.svg"); }
.icon_pfeil_hoch{ -webkit-mask-image:url("../images/icon_pfeil-hoch.svg"); mask-image:url("../images/icon_pfeil-hoch.svg"); }
.icon_pfeil_links{ -webkit-mask-image:url("../images/icon_pfeil-links.svg"); mask-image:url("../images/icon_pfeil-links.svg"); }
.icon_pfeil_rechts{ -webkit-mask-image:url("../images/icon_pfeil-rechts.svg"); mask-image:url("../images/icon_pfeil-rechts.svg"); }

/* Runder Knopf mit Diagonalpfeil (Layout .circ) */
.kreis,
.kreis_button{
	position:relative; display:grid; place-items:center; flex:0 0 auto;
	width:var(--kreis); height:var(--kreis); border-radius:50%;
	border:1px solid var(--grau_linie_dunkel); background:transparent; color:var(--text_dunkel);
	transition:background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.kreis::before{ content:""; width:18px; height:18px; background-color:currentColor; -webkit-mask:url("../images/icon_pfeil-rechts-oben.svg") no-repeat center / contain; mask:url("../images/icon_pfeil-rechts-oben.svg") no-repeat center / contain; }
.kreis_button .icon_maske{ width:18px; height:18px; }
.kreis_rot{ background:var(--rot); border-color:var(--rot); color:var(--weiss); }
.kreis_button:hover{ background:var(--rot); border-color:var(--rot); color:var(--weiss); }

/* |||||||||| Ende :: GRAFISCHE ELEMENTE |||||||||| */


/* |||||||||| Start :: BUTTONS + LINKS |||||||||| */

.button_leiste{ display:flex; flex-wrap:wrap; gap:var(--sp2); margin-top:var(--sp4); }

/* Button wie im Layout (.btn): Pille mit rundem Knopf rechts, der Pfeil dreht sich beim Hover */
.button{
	display:inline-flex; align-items:center; justify-content:space-between; gap:var(--sp2);
	min-height:var(--button_hoehe); padding:6px 6px 6px var(--sp4);
	font-family:var(--font_text); font-size:var(--button); line-height:1.25; font-weight:600; text-align:left; text-decoration:none;
	border:1px solid transparent; border-radius:999px;
	transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.button:not(:has(.knopf)){ padding:6px var(--sp4); justify-content:center; }
.knopf{ position:relative; display:grid; place-items:center; flex:0 0 auto; width:calc(var(--button_hoehe) - 12px); height:calc(var(--button_hoehe) - 12px); border-radius:50%; transition:transform .3s ease; }
.knopf::before{ content:""; width:16px; height:16px; background-color:currentColor; -webkit-mask:url("../images/icon_pfeil-rechts-oben.svg") no-repeat center / contain; mask:url("../images/icon_pfeil-rechts-oben.svg") no-repeat center / contain; }
.button:hover .knopf{ transform:rotate(45deg); }

.button_rot{ background:var(--rot); border-color:var(--rot); color:var(--weiss); }
.button_rot .knopf{ background:var(--weiss); color:var(--rot); }
.button_rot:hover{ background:var(--rot_dunkel); border-color:var(--rot_dunkel); color:var(--weiss); }
.button_rahmen_hell{ background:transparent; border-color:var(--grau_linie_dunkel); color:var(--text_dunkel); }
.button_rahmen_hell .knopf{ background:var(--schwarz); color:var(--weiss); }
.button_rahmen_hell:hover{ background:var(--rot); border-color:var(--rot); color:var(--weiss); }
.button_rahmen_hell:hover .knopf{ background:var(--weiss); color:var(--rot); }
.button_rahmen_dunkel{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); color:var(--weiss); }
.button_rahmen_dunkel .knopf{ background:var(--weiss); color:var(--schwarz); }
.button_rahmen_dunkel:hover{ background:rgba(255,255,255,.18); color:var(--weiss); }

/* Textlink mit Pfeil */
.link_pfeil{ display:inline-flex; align-items:center; gap:10px; font-size:var(--txt_klein); font-weight:600; color:var(--rot); text-decoration:none; }
.link_pfeil::after{ content:""; flex:0 0 16px; width:16px; height:16px; background-color:currentColor; -webkit-mask:url("../images/icon_pfeil-rechts.svg") no-repeat center / contain; mask:url("../images/icon_pfeil-rechts.svg") no-repeat center / contain; transition:transform .3s ease; }
.link_pfeil:hover{ color:var(--rot_dunkel); }
.link_pfeil:hover::after{ transform:translateX(4px); }
.link_zurueck{ flex-direction:row-reverse; }
.link_zurueck::after{ -webkit-mask-image:url("../images/icon_pfeil-links.svg"); mask-image:url("../images/icon_pfeil-links.svg"); }
.link_zurueck:hover::after{ transform:translateX(-4px); }

/* Dateien / Links / Videos :: Linkboxen im Raster */
.liste_dateien{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap:var(--sp2); }
.link_box_dateien{
	position:relative; display:flex; align-items:center; gap:var(--sp2);
	min-height:96px; padding:var(--sp3) 4.5rem var(--sp3) var(--sp3);
	background:var(--grau_bg); border:1px solid transparent; border-radius:var(--r_m); text-decoration:none;
	transition:border-color .3s ease, background-color .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.bg_z_grey .link_box_dateien,
.rahmen_accordeon .link_box_dateien{ background:var(--weiss); }
.link_box_dateien::after{ content:""; position:absolute; right:var(--sp3); top:50%; width:40px; height:40px; margin-top:-20px; border-radius:50%; border:1px solid var(--grau_linie_dunkel); background:transparent; transition:background-color .3s ease, border-color .3s ease; }
.link_box_dateien::before{ content:""; position:absolute; right:calc(var(--sp3) + 12px); top:50%; z-index:1; width:16px; height:16px; margin-top:-8px; background-color:var(--text_dunkel); -webkit-mask:url("../images/icon_pfeil-rechts-oben.svg") no-repeat center / contain; mask:url("../images/icon_pfeil-rechts-oben.svg") no-repeat center / contain; transition:background-color .3s ease, transform .3s ease; }
.link_box_dateien:hover{ background:var(--weiss); border-color:var(--grau_linie); transform:translateY(-4px); box-shadow:0 26px 54px rgba(18,18,17,.08); }
.link_box_dateien:hover::after{ background:var(--rot); border-color:var(--rot); }
.link_box_dateien:hover::before{ background-color:var(--weiss); transform:rotate(45deg); }
.link_box_icon{ flex:0 0 48px; height:48px; border-radius:var(--r_s); background:var(--rot) no-repeat center / 22px auto; transition:background-color .3s ease; }
.link_box_dateien:hover .link_box_icon{ background-color:var(--schwarz); }
.icon_download .link_box_icon{ background-image:url("../images/icon_download_white.png"); }
.icon_link .link_box_icon{ background-image:url("../images/icon_linkbox_white.png"); }
.icon_video .link_box_icon{ background-image:url("../images/icon_play_white.png"); }
.link_box_text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.link_box_titel{ font-family:var(--font_headline); font-size:1.0625rem; line-height:1.25; font-weight:600; letter-spacing:-0.01em; color:var(--text_dunkel); overflow-wrap:anywhere; }
.link_box_info{ font-family:var(--font_headline); font-size:var(--label); line-height:1.3; font-weight:600; letter-spacing:var(--ls_label); text-transform:uppercase; color:var(--text); }

/* |||||||||| Ende :: BUTTONS + LINKS |||||||||| */


/* |||||||||| Start :: HEADERGRAFIK UNTERSEITEN |||||||||| */
/* Abgeleitet vom Hero der Startseite: Bild mit dunklem Verlauf, Pille, Seitenname (2. Zeile rot), Teaser. Kein H-Tag. */

.headergfx_detail{
	position:relative; display:flex; align-items:flex-end;
	min-height:var(--header_detail_hoehe, 440px);
	padding:calc(var(--header_hoehe) + var(--sp6)) 0 var(--sp6) 0;
	background:var(--schwarz); color:var(--weiss); overflow:hidden;
}
.headergfx_bild{ position:absolute; inset:0; z-index:0; }	/* eigene Ebene: ein Video liegt in Chrome sonst über dem Text */
.headergfx_bild img,
.headergfx_bild video{ display:block; width:100%; height:100%; object-fit:cover; object-position:72% center; }
.headergfx_bild::after{
	content:""; position:absolute; inset:0;
	background:
		linear-gradient(to bottom, rgba(var(--schwarz_tief),.82) 0, rgba(var(--schwarz_tief),.46) 134px, rgba(var(--schwarz_tief),0) 280px),
		linear-gradient(96deg, rgba(var(--schwarz_tief),.95) 0%, rgba(var(--schwarz_tief),.86) 38%, rgba(var(--schwarz_tief),.5) 68%, rgba(var(--schwarz_tief),.25) 100%);
}
.headergfx_streifen{ right:0; bottom:0; width:110px; height:150px; opacity:.2; }
.headergfx_text{ position:relative; z-index:2; }
.headergfx_text .pille{ margin-bottom:var(--sp3); }
.headline_header{ max-width:1100px; margin:0; font-size:var(--h_header); line-height:1.04; font-weight:700; color:var(--weiss); overflow-wrap:break-word; text-wrap:balance; }
.headline_header_rot{ color:var(--rot_hell); }
.headergfx_teaser{ max-width:660px; margin:var(--sp3) 0 0 0; font-size:var(--lead); line-height:1.6; color:var(--text_hell); }

/* |||||||||| Ende :: HEADERGRAFIK UNTERSEITEN |||||||||| */


/* |||||||||| Start :: SEITENPFAD (Breadcrumb, nur mit $breadcrumbs = "ja") |||||||||| */

.bereich_breadcrumb{ padding-top:var(--breadcrumb_oben, 24px); }
.breadcrumb{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; font-size:var(--txt_klein); line-height:1.5; color:var(--text_dunkel); }
.breadcrumb li{ display:flex; align-items:center; }
.breadcrumb li + li::before{ content:"/"; margin:0 .5rem; }
.breadcrumb a{ color:inherit; text-decoration:none; }
.breadcrumb a:hover,
.breadcrumb a:focus-visible{ color:var(--rot); text-decoration:underline; }
.breadcrumb [aria-current]{ color:var(--rot); }

/* |||||||||| Ende :: SEITENPFAD |||||||||| */


/* |||||||||| Start :: CONTENTBEREICH |||||||||| */

.bereich_content,
.bereich_zusatz_offen,
.bereich_accordeons,
.bereich_galerie,
.bereich_liste{ padding:var(--abstand_bereich) 0; }

.raster_content{ display:grid; grid-template-columns:1fr; gap:var(--abstand_klein); }
.raster_content_50 .container_picbox{ order:2; }

.abstand_top_content{ margin-top:var(--abstand_klein); }
.abstand_top_klein{ margin-top:1.25rem; }

.bereich_zurueck{ padding:0 0 var(--sp5) 0; }
/* Liste direkt unter dem Content (Leistungen, Karriere, Aktuelles …) :: Fortsetzung, kein zweiter Abstand oben */
.bereich_liste_anschluss{ padding-top:0; }
.bereich_content + .bereich_zurueck,
.bg_z_grey + .bereich_zurueck{ padding-top:var(--sp5); }

/* Content :: Pille + H1 (2. Zeile rot), Text, Buttons; Bilder mit großem Radius */
.content_kopf .headline_big{ margin-bottom:var(--sp4); }
.container_content .button_leiste{ margin-top:var(--sp5); }
.headline_mittel{ margin-bottom:var(--sp3); }
.bereich_zusatz_offen .headline_mittel{ font-size:var(--h_big); line-height:var(--lh_head); }
.container_picbox .slider_track,
.container_picbox .slider_slide{ border-radius:var(--r_l); }

/* |||||||||| Ende :: CONTENTBEREICH |||||||||| */


/* |||||||||| Start :: BILDSLIDER |||||||||| */

.slider{ position:relative; }
.slider_track{
	display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
	scrollbar-width:none; -ms-overflow-style:none;
}
.slider_track::-webkit-scrollbar{ display:none; }
.slider_slide{ flex:0 0 100%; scroll-snap-align:start; position:relative; aspect-ratio:3 / 2; background:var(--schwarz); }
.slider_slide a{ display:block; width:100%; height:100%; }
.slider_slide img{ width:100%; height:100%; object-fit:cover; }
.slider_slide_video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* YouTube erst nach Zustimmung "Marketing" (nur live mit Cookie-Banner) :: Platzhalter im Slider, Hinweis unter der Linkbox */
.video_zustimmung{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:var(--schwarz); color:var(--weiss); text-align:center; }
.video_zustimmung_inhalt{ max-width:32rem; }
.video_zustimmung p{ margin:0 0 1.25rem 0; font-size:var(--txt_klein); line-height:1.6; color:#dddddd; }
.video_hinweis{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; padding:1.25rem 1.5rem; border-left:4px solid var(--rot); background:var(--grau_bg); }
.bg_z_grey .video_hinweis,
.rahmen_accordeon .video_hinweis{ background:var(--weiss); }
.video_hinweis p{ flex:1 1 280px; margin:0; font-size:var(--txt_klein); line-height:1.6; color:var(--text_dunkel); }

.slider_pfeil{
	position:absolute; top:50%; z-index:3; width:48px; height:48px; margin-top:-24px; border-radius:50%;
	background:var(--weiss); color:var(--text_dunkel); box-shadow:0 10px 26px rgba(18,18,17,.18); transition:background-color .3s ease, color .3s ease;
}
.slider_pfeil:hover{ background:var(--rot); color:var(--weiss); }
.slider_pfeil::before{ content:""; position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; background-color:currentColor; -webkit-mask:url("../images/icon_pfeil-rechts.svg") no-repeat center / contain; mask:url("../images/icon_pfeil-rechts.svg") no-repeat center / contain; }
.slider_prev{ left:var(--sp2); }
.slider_prev::before{ -webkit-mask-image:url("../images/icon_pfeil-links.svg"); mask-image:url("../images/icon_pfeil-links.svg"); }
.slider_next{ right:var(--sp2); }

.slider_punkte{ display:flex; justify-content:center; gap:8px; margin-top:var(--sp2); }
.slider_punkte span{ width:24px; height:3px; border-radius:2px; background:var(--grau_linie_dunkel); transition:background-color .3s ease; }
.slider_punkte span.is_active{ background:var(--rot); }

/* |||||||||| Ende :: BILDSLIDER |||||||||| */


/* |||||||||| Start :: ACCORDEONS (Zusatzinhalte + FAQ) |||||||||| */
/* Karten wie im Layout (weiß, auf hellem Grund Kartenfläche), runder Knopf rechts dreht beim Öffnen und wird rot */

.rahmen_accordeon{ border:1px solid var(--grau_linie); border-radius:var(--r_m); background:var(--weiss); transition:border-color .3s ease; }
.bereich_accordeons:not(.bg_z_grey) .rahmen_accordeon{ background:var(--grau_bg); border-color:transparent; }
.rahmen_accordeon + .rahmen_accordeon{ margin-top:var(--sp2); }
.rahmen_accordeon:hover{ border-color:var(--grau_linie_dunkel); }

.headline_acc_wrapper{ margin:0; }
.accordion{
	position:relative; display:block; width:100%; min-height:72px; text-align:left;
	padding:var(--sp3) calc(var(--kreis) + var(--sp4)) var(--sp3) var(--sp3);
	font-family:var(--font_headline); font-size:var(--h_box); line-height:1.25; font-weight:600; letter-spacing:var(--ls_head); color:var(--text_dunkel);
	transition:color .25s ease;
}
.accordion::before{
	content:""; position:absolute; right:var(--sp3); top:50%; width:calc(var(--kreis) - 8px); height:calc(var(--kreis) - 8px); margin-top:calc((var(--kreis) - 8px) / -2);
	border:1px solid var(--grau_linie_dunkel); border-radius:50%; transition:background-color .3s ease, border-color .3s ease;
}
.accordion::after{
	content:""; position:absolute; right:calc(var(--sp3) + (var(--kreis) - 8px) / 2 - 8px); top:50%; width:16px; height:16px; margin-top:-8px;
	background-color:var(--text_dunkel); -webkit-mask:url("../images/icon_chevron-runter.svg") no-repeat center / contain; mask:url("../images/icon_chevron-runter.svg") no-repeat center / contain;
	transition:transform .3s ease, background-color .3s ease;
}
.accordion:hover{ color:var(--rot); }
.accordion:hover::before,
.accordion[aria-expanded="true"]::before{ background:var(--rot); border-color:var(--rot); }
.accordion:hover::after,
.accordion[aria-expanded="true"]::after{ background-color:var(--weiss); }
.accordion[aria-expanded="true"]::after{ transform:rotate(180deg); }

/* Accordeon :: Höhe weich auf / zu (js/main.js), Inhalt blendet mit ein. Abstände nur im .contentacc_inner,
   nie als padding am .contentacc selbst (sonst bleibt bei Höhe 0 ein Rest stehen und es springt am Anfang / Ende) */
.contentacc{ overflow:hidden; transition:height .5s cubic-bezier(.4,0,.2,1); }
.contentacc > *{ transition:opacity .4s ease, transform .5s cubic-bezier(.4,0,.2,1); }
.contentacc.is_zu > *{ opacity:0; transform:translateY(-8px); }
@media (prefers-reduced-motion: reduce){
	.contentacc, .contentacc > *{ transition:none; }
}
.contentacc_inner{ margin:0 var(--sp3); padding:var(--sp3) 0 var(--sp4) 0; border-top:1px solid var(--grau_linie); }

.raster_acc{ display:grid; grid-template-columns:1fr; gap:var(--sp3); }
.container_acc_bild .slider_track,
.container_acc_bild .slider_slide{ border-radius:var(--r_s); }

/* FAQ :: Überschrift + Pille links (ab 1225px, läuft mit), Fragen rechts */
.bereich_faq .div_con_center_big{ display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--sp4); align-items:start; }
.faq_kopf .headline_big{ margin:0; }

/* |||||||||| Ende :: ACCORDEONS |||||||||| */


/* |||||||||| Start :: FOTOGALERIE |||||||||| */

.galerie_raster{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
/* Galeriebilder im Format 3:2 (Raster der Seite und Slider in den Zusatzinhalten, wie der Bildslider im Content) */
.galerie_bild{ display:block; aspect-ratio:3 / 2; overflow:hidden; border-radius:var(--r_s); background:var(--schwarz); }
.galerie_bild img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease, opacity .5s ease; }
.galerie_bild:hover img{ transform:scale(1.05); opacity:.85; }

/* Galerie als Slider (Zusatzinhalte offen / Accordeon) :: mobil 2 Bilder + Anschnitt, 750: 3, 1225: 4, 1800: 5
   Wischen über natives Scrollen mit Einrasten, Pfeile über main.js (ausgeblendet, wenn alle Bilder hineinpassen) */
.galerie_slider{ --galerie_anzahl:2.35; --galerie_abstand:10px; position:relative; }
.galerie_slider_track{
	display:grid; grid-auto-flow:column; gap:var(--galerie_abstand);
	grid-auto-columns:calc((100% - (var(--galerie_anzahl) - 1) * var(--galerie_abstand)) / var(--galerie_anzahl));
	overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; overscroll-behavior-x:contain;
	scrollbar-width:none; -ms-overflow-style:none;
}
.galerie_slider_track::-webkit-scrollbar{ display:none; }
.galerie_slider_track:focus-visible{ outline:2px solid var(--rot); outline-offset:3px; }
.galerie_slider .galerie_bild{ scroll-snap-align:start; }
.galerie_slider.is_statisch .slider_pfeil{ display:none; }

/* |||||||||| Ende :: FOTOGALERIE |||||||||| */


/* |||||||||| Start :: HINWEIS / MELDUNG |||||||||| */

/* Schwebende Box unten links, bleibt beim Scrollen sichtbar (unter dem Burgermenü: Header z-index 70) */
.achtung_wrapper{
	position:fixed; left:12px; right:12px; bottom:12px; z-index:65;
	display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
.bg_achtung{
	position:relative; pointer-events:auto;
	background:var(--schwarz); color:var(--weiss); border-left:4px solid var(--rot);
	box-shadow:0 12px 32px rgba(0,0,0,.28);
	animation:achtung_rein .6s ease .6s both;
	transition:opacity .3s ease, transform .3s ease;
}
.bg_achtung.is_closing{ opacity:0; transform:translateY(12px); }
@keyframes achtung_rein{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
.achtung_inner{ padding:1rem 3.25rem 1.125rem 1.125rem; }
.achtung_kicker{
	display:flex; align-items:center; gap:.625rem; margin:0 0 .5rem 0;
	font-size:var(--label); line-height:1; font-weight:600; letter-spacing:var(--ls_label); text-transform:uppercase; color:var(--rot);
}
.achtung_kicker::before{ content:""; flex:0 0 8px; height:8px; border-radius:50%; background:var(--rot); animation:achtung_puls 2s ease-in-out infinite; }
@keyframes achtung_puls{ 0%, 100%{ opacity:1; } 50%{ opacity:.3; } }
.container_txt_achtung{ font-size:var(--txt_klein); line-height:1.5; color:#dddddd; }
.container_txt_achtung p{ margin:0 0 .5em 0; }
.container_txt_achtung p:last-child{ margin-bottom:0; }
.container_txt_achtung a{ color:var(--weiss); text-decoration:underline; text-underline-offset:3px; }
.container_txt_achtung a:hover{ color:var(--rot); }
.achtung_close{
	position:absolute; top:.5rem; right:.5rem; width:36px; height:36px;
	font-size:1.625rem; line-height:1; color:var(--weiss); transition:color .3s ease;
}
.achtung_close:hover{ color:var(--rot); }
@media (prefers-reduced-motion: reduce){ .achtung_kicker::before{ animation:none; } }

/* |||||||||| Ende :: HINWEIS / MELDUNG |||||||||| */


/* |||||||||| Start :: ANIMATIONEN |||||||||| */

@media (prefers-reduced-motion: reduce){
	*, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
	[data-aos]{ opacity:1 !important; transform:none !important; }
}

/* |||||||||| Ende :: ANIMATIONEN |||||||||| */


/* |||||||||| Start :: KARTEN (Karriere, Aktuelles) |||||||||| */
/* printKARTE() :: Optik wie die Karten des Layouts (weiß, Radius, Pfeil), REGELN.md §5 „Seiten, die das Layout nicht zeigt“ */

.liste_karten{ list-style:none; display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--sp3); }
.karte{ display:flex; }
.karte_link{
	display:flex; flex-direction:column; width:100%; background:var(--weiss); border:1px solid var(--grau_linie); border-radius:var(--r_m);
	overflow:hidden; color:inherit; text-decoration:none;
	transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.bg_z_grey .karte_link{ border-color:transparent; }
.karte_bild{ position:relative; display:block; overflow:hidden; aspect-ratio:3 / 2; background:var(--grau_bg); }
.karte_bild img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.karte_nummer{ position:absolute; right:var(--sp3); bottom:-.12em; font-family:var(--font_headline); font-size:5rem; line-height:1; font-weight:700; color:transparent; -webkit-text-stroke:1.6px rgba(255,255,255,.9); }
.karte_box{ display:flex; flex-direction:column; flex:1 1 auto; padding:var(--sp3) var(--sp3) var(--sp2) var(--sp3); }
.karte_datum{ align-self:flex-start; margin-bottom:var(--sp2); padding:6px 14px; border:1px solid var(--grau_linie); border-radius:999px; font-family:var(--font_headline); font-size:var(--label); font-weight:600; letter-spacing:var(--ls_label); text-transform:uppercase; color:var(--rot); }
.karte_titel{ margin:0 0 var(--sp2) 0; font-family:var(--font_headline); font-size:var(--h_box); line-height:1.25; font-weight:600; letter-spacing:var(--ls_head); color:var(--text_dunkel); transition:color .3s ease; }
.karte_text{
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
	font-size:var(--txt_klein); line-height:1.6; color:var(--text); hyphens:auto; -webkit-hyphens:auto;
}
.karte_balken{
	position:relative; display:flex; align-items:center; justify-content:space-between; gap:var(--sp2);
	margin:0 var(--sp3) var(--sp3) var(--sp3); padding-top:var(--sp2); border-top:1px solid var(--grau_linie);
	font-size:var(--txt_klein); font-weight:600; color:var(--rot);
}
.karte_balken::after{ content:""; flex:0 0 16px; width:16px; height:16px; background-color:currentColor; -webkit-mask:url("../images/icon_pfeil-rechts.svg") no-repeat center / contain; mask:url("../images/icon_pfeil-rechts.svg") no-repeat center / contain; transition:transform .3s ease; }
.karte_link:hover{ transform:translateY(-6px); border-color:var(--grau_linie_dunkel); box-shadow:0 26px 54px rgba(18,18,17,.08); }
.karte_link:hover .karte_bild img{ transform:scale(1.05); }
.karte_link:hover .karte_titel{ color:var(--rot); }
.karte_link:hover .karte_balken::after{ transform:translateX(4px); }

/* Platzhalter für fehlende Vorschaubilder (printBILD_PLATZHALTER) :: Anfangsbuchstabe auf ruhiger Fläche, aus OST Fenster */
.bild_platzhalter{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:var(--grau_bg); }
.bild_platzhalter_initial{ font-family:var(--font_headline); font-size:4.5rem; line-height:1; font-weight:700; color:transparent; -webkit-text-stroke:1.6px var(--grau_linie_dunkel); transition:-webkit-text-stroke-color .3s ease; }
.karte_link:hover .bild_platzhalter_initial{ -webkit-text-stroke-color:var(--rot); }

/* |||||||||| Ende :: KARTEN |||||||||| */


/* |||||||||| Start :: FORMULARE + KONTAKT + DOWNLOADS |||||||||| */

/* Raster :: links dunkle Karte (Kontaktdaten bzw. Ablauf Bauwerks-Check), rechts das Formular */
.bereich_formular{ padding:var(--abstand_bereich) 0; scroll-margin-top:var(--header_hoehe_scroll); }
.raster_formular{ display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--sp3); align-items:start; }

.formular_adresse,
.formular_seite{
	position:relative; overflow:hidden; padding:var(--sp5) var(--sp3);
	background:var(--schwarz); border-radius:var(--r_l); color:var(--text_hell);
}
.formular_seite_streifen{ right:-60px; top:-60px; width:220px; height:220px; opacity:.22; }
.formular_seite .pille{ position:relative; margin-bottom:var(--sp3); }
.formular_seite_titel{ position:relative; margin:0 0 var(--sp4) 0; font-family:var(--font_headline); font-size:var(--h_mittel); line-height:1.12; font-weight:600; letter-spacing:var(--ls_head); color:var(--weiss); text-wrap:balance; }
.ablauf_liste{ position:relative; list-style:none; margin:0; padding:0; display:grid; gap:var(--sp3); }
.ablauf_liste li{ display:flex; gap:var(--sp2); font-size:var(--txt_klein); line-height:1.6; }
.ablauf_liste strong{ display:block; margin-bottom:2px; font-family:var(--font_headline); font-size:var(--txt); font-weight:600; color:var(--weiss); }
.ablauf_nummer{ flex:0 0 auto; font-family:var(--font_headline); font-size:2rem; line-height:.9; font-weight:700; color:transparent; -webkit-text-stroke:1.2px var(--rot_hell); }
.formular_seite_kontakt{ position:relative; margin-top:var(--sp5); padding-top:var(--sp4); border-top:1px solid rgba(255,255,255,.18); }
.formular_seite_kontakt p{ margin:0 0 2px 0; font-size:var(--txt_klein); }

.formular_adresse img{ width:190px; height:auto; margin-bottom:var(--sp4); }
.formular_adresse p{ margin:0 0 var(--sp3) 0; font-size:var(--txt); line-height:1.8; }
.formular_adresse p:last-child{ margin-bottom:0; }
.formular_adresse strong{ color:var(--weiss); font-weight:600; }
.formular_adresse a{ color:var(--weiss); text-decoration:none; }
.formular_adresse a:hover{ color:var(--rot_hell); }
.formular_adresse .footer_link_icon{ color:var(--weiss); }
.formular_adresse .footer_link_icon .icon_maske{ color:var(--rot_hell); }
.formular_adresse .formular_zeiten{ padding-top:var(--sp3); border-top:1px solid rgba(255,255,255,.18); font-size:var(--txt_klein); line-height:1.9; }
.formular_adresse .formular_zeiten td{ padding:0 var(--sp4) 0 0; }
.formular_adresse .formular_zeiten p{ margin:0; font-size:var(--txt_klein); }
.formular_adresse .button{ margin-top:var(--sp4); }

/* Formular als helle Karte */
.formular_karte,
.raster_formular > .formular{ padding:var(--sp4) var(--sp3); background:var(--weiss); border:1px solid var(--grau_linie); border-radius:var(--r_l); }
.bg_z_grey .raster_formular > .formular{ border-color:transparent; }

.formular_meldung{ margin-bottom:var(--sp3); padding:var(--sp2) var(--sp3); border-left:4px solid var(--rot); border-radius:var(--r_s); background:var(--rot_flaeche); font-size:var(--txt); line-height:1.6; color:var(--text_dunkel); }
.formular_felder{ display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--sp2); }
.formular_feld{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.formular_feld label,
.formular_gruppe legend{ font-size:var(--txt_klein); font-weight:600; color:var(--text_dunkel); }
.pflicht{ color:var(--rot); }
.formular_gruppe{ min-width:0; margin:0; padding:0; border:0; }
.formular_gruppe legend{ margin-bottom:10px; padding:0; }
.eingabe{
	width:100%; min-height:56px; padding:14px 18px; border:1px solid var(--grau_linie_dunkel); border-radius:14px;
	background:var(--weiss); font-family:var(--font_text); font-size:var(--txt); line-height:1.4; color:var(--text_dunkel);
	transition:border-color .25s ease, box-shadow .25s ease; -webkit-appearance:none; appearance:none;
}
.eingabe:hover{ border-color:var(--text); }
.eingabe:focus{ outline:none; border-color:var(--rot); box-shadow:0 0 0 3px rgba(226,6,19,.14); }
.eingabe::placeholder{ color:var(--text_grau); }
textarea.eingabe{ min-height:170px; resize:vertical; }
.input_honey{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }

/* Auswahl-Pillen (Anliegen im Bauwerks-Check) :: echte Radio-Knöpfe, per Tastatur bedienbar */
.wahl_pillen{ display:flex; flex-wrap:wrap; gap:10px; }
.wahl_pille{ position:relative; display:inline-flex; cursor:pointer; }
.wahl_pille input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.wahl_pille span{
	display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border:1px solid var(--grau_linie_dunkel); border-radius:999px;
	background:var(--weiss); font-size:var(--txt_klein); font-weight:600; color:var(--text_dunkel); transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.wahl_pille:hover span{ border-color:var(--rot); color:var(--rot); }
.wahl_pille input:checked + span{ background:var(--rot); border-color:var(--rot); color:var(--weiss); }
.wahl_pille input:focus-visible + span{ outline:2px solid var(--rot); outline-offset:3px; }

.formular_captcha{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp2) var(--sp3); margin-top:6px; padding:var(--sp3); background:var(--grau_bg); border-radius:var(--r_m); }
.bg_z_grey .formular_captcha{ background:var(--grau_bg); }
.formular_captcha label{ flex:1 1 100%; font-size:var(--txt_klein); font-weight:600; color:var(--text_dunkel); }
/* Captcha-Bilder images/captcha_*.png sind 360 × 60 px :: in Originalgröße zeigen (sonst unscharf), schmaler nur verkleinern */
.formular_captcha img{ width:360px; max-width:100%; height:auto; border-radius:var(--r_s); }
.formular_captcha .eingabe{ flex:0 1 220px; width:auto; }

.formular_datenschutz{ display:flex; align-items:flex-start; gap:14px; margin-top:6px; font-size:var(--txt_klein); line-height:1.6; color:var(--text); }
.formular_datenschutz input{ flex:0 0 20px; width:20px; height:20px; margin:.1rem 0 0 0; accent-color:var(--rot); }
.formular_datenschutz a{ color:var(--rot); text-decoration:underline; text-underline-offset:3px; }
.formular_absenden{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp2) var(--sp3); margin-top:var(--sp2); }
.formular_pflicht{ font-size:var(--txt_klein); color:var(--text_grau); }
.formular_hinweis{ margin:0; font-size:var(--txt_klein); line-height:1.6; color:var(--text); }

/* Datei-Uploads (Bauwerks-Check, Bewerbung) :: echtes Dateifeld liegt unsichtbar über der Fläche */
.datei_raster{ display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; margin-top:10px; }
.datei_feld{ position:relative; }
.datei_flaeche{
	display:flex; align-items:center; justify-content:space-between; gap:var(--sp2); min-height:56px; padding:14px 18px;
	border:1px dashed var(--grau_linie_dunkel); border-radius:14px; background:var(--grau_bg);
	font-size:var(--txt); line-height:1.4; color:var(--text_grau); transition:border-color .25s ease, background-color .25s ease;
}
.datei_name{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.datei_feld.hat_datei .datei_flaeche{ border-style:solid; background:var(--weiss); }
.datei_feld.hat_datei .datei_name{ color:var(--text_dunkel); }
.datei_icon{ flex:0 0 20px; height:19px; color:var(--rot); -webkit-mask-image:url("../images/icon_upload_white.png"); mask-image:url("../images/icon_upload_white.png"); }
.datei_input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.datei_feld:hover .datei_flaeche,
.datei_feld:focus-within .datei_flaeche{ border-color:var(--rot); }
.datei_feld:focus-within .datei_flaeche{ outline:2px solid var(--rot); outline-offset:2px; }
.bereich_bewerbung .headline_mittel{ margin-bottom:var(--sp4); font-size:var(--h_big); }
.bereich_bewerbung .formular{ padding:var(--sp4) var(--sp3); background:var(--weiss); border:1px solid var(--grau_linie); border-radius:var(--r_l); }
.bg_z_grey.bereich_bewerbung .formular{ border-color:transparent; }

/* Downloads */
.downloads_text{ max-width:900px; margin-bottom:var(--abstand_klein); }
.bereich_liste .headline_mittel + .liste_dateien{ margin-top:var(--sp3); }
.bereich_liste .headline_mittel{ font-size:var(--h_mittel); }

/* Ansprechpartner :: Karten mit Foto (4:5) oder Initialen */
.liste_ansprechpartner{ list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap:var(--sp3); }
.ansprechpartner{ padding:var(--sp3); background:var(--grau_bg); border-radius:var(--r_m); }
.bg_z_grey .ansprechpartner{ background:var(--weiss); }
.ansprechpartner_bild{ position:relative; margin-bottom:var(--sp3); aspect-ratio:4 / 5; overflow:hidden; border-radius:var(--r_s); background:var(--weiss); }
.bg_z_grey .ansprechpartner_bild{ background:var(--grau_bg); }
.ansprechpartner_bild img{ width:100%; height:100%; object-fit:cover; }
.ansprechpartner_initialen{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font_headline); font-size:5rem; font-weight:700; color:transparent; -webkit-text-stroke:1.6px var(--grau_linie_dunkel); }
.ansprechpartner .headline_box{ margin-bottom:4px; }
.ansprechpartner_position{ margin:0 0 var(--sp2) 0; font-family:var(--font_headline); font-size:var(--label); font-weight:600; letter-spacing:var(--ls_label); text-transform:uppercase; color:var(--rot); }
.ansprechpartner_kontakt{ display:flex; flex-direction:column; gap:4px; margin:0; font-size:var(--txt_klein); line-height:1.6; }
.ansprechpartner_kontakt a{ color:var(--text_dunkel); text-decoration:none; overflow-wrap:anywhere; }
.ansprechpartner_kontakt a:hover{ color:var(--rot); }

/* Datenschutz im Iframe (Lightbox) :: ohne AOS, schmale Abstände */
.seite_iframe [data-aos]{ opacity:1 !important; transform:none !important; }
.seite_iframe .bereich_content{ padding:30px 0; }
.seite_iframe .div_con_center_big{ width:calc(100% - 40px); }

/* |||||||||| Ende :: FORMULARE + KONTAKT + DOWNLOADS |||||||||| */


/* |||||||||| Start :: STARTSEITE :: HERO |||||||||| */
/* Slides mit Bild oder Video und eigenem Text wechseln (main.js, data-hero), Pfeile + Zähler unten. Werte: Layout Block hero
	Alle Slides liegen in einer Rasterzelle übereinander → der Hero ist so hoch wie der längste Text (mind. min-height) */

.hero{ position:relative; display:flex; flex-direction:column; min-height:600px; background:var(--schwarz); overflow:hidden; }
.hero_slides{ position:relative; display:grid; flex:1 0 auto; }
.hero_slide{ grid-area:1 / 1; position:relative; display:flex; flex-direction:column; opacity:0; visibility:hidden; transition:opacity 1.2s ease, visibility 0s linear 1.2s; }
.hero_slide.is_active{ opacity:1; visibility:visible; transition:opacity 1.2s ease, visibility 0s linear 0s; }
.hero_bild{ position:absolute; inset:0; z-index:0; }	/* eigene Ebene: ein Video liegt in Chrome sonst über dem Text */
.hero_bild img,
.hero_bild video{ display:block; width:100%; height:100%; object-fit:cover; object-position:72% center; }
.hero_verlauf{
	position:absolute; inset:0; pointer-events:none;
	background:
		linear-gradient(to bottom, rgba(var(--schwarz_tief),.82) 0, rgba(var(--schwarz_tief),.46) 134px, rgba(var(--schwarz_tief),0) 280px),
		linear-gradient(96deg, rgba(var(--schwarz_tief),.95) 0%, rgba(var(--schwarz_tief),.88) 34%, rgba(var(--schwarz_tief),.55) 62%, rgba(var(--schwarz_tief),.22) 100%);
}
.hero_streifen{ z-index:1; right:0; bottom:0; width:240px; height:300px; opacity:.22; }

.hero_inhalt{ position:relative; z-index:10; flex:1 1 auto; display:flex; align-items:center; padding:calc(var(--header_hoehe) + var(--sp7)) 0 var(--sp7) 0; }
.hero[data-hero] .hero_inhalt{ padding-bottom:calc(var(--sp7) + var(--kreis) + var(--sp3)); }	/* Platz für Pfeile + Zähler */
.hero_text{ max-width:1340px; }
.headline_hero{ display:block; }
.hero_text .pille{ margin-bottom:var(--sp4); }
.hero .headline_hero{ margin:0 0 var(--sp4) 0; color:var(--weiss); }
.hero_lead{ max-width:660px; margin:0 0 var(--sp5) 0; font-size:var(--lead); line-height:1.6; color:var(--text_hell); }
.hero_lead p{ margin:0; }

.hero_aktionen{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp3) var(--sp5); }
.hero_telefon{ display:inline-flex; align-items:center; gap:var(--sp2); color:var(--weiss); text-decoration:none; }
.hero_telefon_kreis{ display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); transition:background-color .3s ease, border-color .3s ease; }
.hero_telefon_kreis .icon_maske{ width:20px; height:20px; }
.hero_telefon:hover .hero_telefon_kreis{ background:var(--rot); border-color:var(--rot); }
.hero_telefon_nummer{ display:block; font-family:var(--font_headline); font-size:var(--txt); font-weight:600; }
.hero_telefon_info{ display:block; font-size:var(--txt_klein); color:var(--text_hell); }

.hero_fuss{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp3) var(--sp5); max-width:900px; margin-top:var(--sp5); padding-top:var(--sp4); border-top:1px solid rgba(255,255,255,.18); }
.hero_material{ display:flex; align-items:center; gap:var(--sp2); }
.hero_material_kreis{ position:relative; flex:0 0 44px; width:44px; height:44px; border-radius:50%; opacity:.9; }
.hero_material_titel{ display:block; font-family:var(--font_headline); font-size:var(--txt); font-weight:600; color:var(--weiss); }
.hero_material_info{ display:block; font-size:var(--txt_klein); color:var(--text_hell); }
.hero_trenner{ display:none; width:1px; height:42px; background:rgba(255,255,255,.2); }
.hero_satz{ max-width:460px; margin:0; font-size:var(--txt_klein); line-height:1.6; color:var(--text_hell); }

/* Pfeile + Zähler (ab zwei Slides) :: mobil unter dem Text, ab 1225px unten rechts (res1225) */
.hero_steuerung{ position:absolute; z-index:20; left:0; right:0; bottom:var(--sp5); display:flex; align-items:center; justify-content:flex-start; gap:var(--sp2); }
.hero_zaehler{ margin-right:var(--sp1); font-family:var(--font_headline); font-size:var(--txt_klein); font-weight:600; letter-spacing:.06em; color:var(--text_hell); }
.hero_zaehler_aktuell{ color:var(--weiss); }
.hero_pfeil.kreis_button{ border-color:rgba(255,255,255,.32); color:var(--weiss); }
.hero_pfeil.kreis_button:hover{ background:var(--rot); border-color:var(--rot); }

/* |||||||||| Ende :: STARTSEITE :: HERO |||||||||| */


/* |||||||||| Start :: STARTSEITE :: BEREICHE |||||||||| */

/* Kopf eines Bereichs :: Pille, Überschrift (2. Zeile rot), Teaser, Button rechts */
.bereich_kopf{ max-width:900px; margin-bottom:var(--sp6); }
.bereich_kopf .headline_big{ margin:0; }
.bereich_kopf .text_lead{ margin:var(--sp3) 0 0 0; max-width:720px; }
.bereich_kopf_mit_button{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--sp4); max-width:none; }
.bereich_kopf_mit_button .bereich_kopf_text{ flex:1 1 620px; min-width:0; max-width:900px; }
.bereich_kopf_mit_button .button{ flex:0 0 auto; }

/* Einstiege „Wo drückt es?“ */
.start_einstiege{ background:var(--weiss); border-bottom:1px solid var(--grau_linie); overflow:hidden; padding:var(--sp8) 0; }
.start_einstiege_streifen{ left:0; bottom:0; width:180px; height:160px; opacity:.14; }
.einstieg_kacheln{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, max(200px, calc((100% - 4 * var(--sp3)) / 5))), 1fr)); gap:var(--sp3); }	/* bis zu 5 Kacheln in einer Reihe */
.einstieg_kacheln > li{ display:flex; }
.einstieg_kachel{
	position:relative; display:flex; flex-direction:column; justify-content:flex-start; gap:var(--sp5); width:100%;	/* Text oben bündig: Überschriften aller Kacheln auf einer Höhe (Fabian 06.11.2026) */
	padding:var(--sp4); background:var(--weiss); border:1px solid var(--grau_linie); border-radius:var(--r_m);
	color:inherit; text-decoration:none; overflow:hidden;
	transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.einstieg_kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp3); }
.einstieg_titel{ display:block; margin:0; font-family:var(--font_headline); font-size:var(--h_box); line-height:1.2; font-weight:600; letter-spacing:var(--ls_head); color:var(--text_dunkel); }
.einstieg_info{ display:block; margin-top:var(--sp2); font-size:var(--txt_klein); line-height:1.6; color:var(--text); }
a.einstieg_kachel:hover{ transform:translateY(-6px); border-color:var(--grau_linie_dunkel); box-shadow:0 26px 54px rgba(18,18,17,.07); }
a.einstieg_kachel:hover .kreis{ background:var(--rot); border-color:var(--rot); color:var(--weiss); transform:rotate(45deg); }

/* Willkommen + Keyfacts */
.start_willkommen{ padding:var(--sp9) 0; }
.willkommen_raster{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp6); margin-bottom:var(--sp7); }
.willkommen_raster:last-child{ margin-bottom:0; }
.willkommen_text{ flex:1 1 560px; min-width:0; }
.willkommen_text .headline_big{ max-width:760px; margin-bottom:var(--sp4); }
.willkommen_text .text_lead{ max-width:640px; line-height:1.65; }
.willkommen_bild{ position:relative; flex:1 1 460px; min-width:0; }
.willkommen_bild img{ width:100%; height:480px; object-fit:cover; border-radius:var(--r_l); }
.bild_karte{ position:absolute; left:var(--sp4); right:var(--sp4); bottom:var(--sp4); padding:var(--sp4); background:rgba(255,255,255,.95); border-radius:var(--r_m); }
.bild_karte_titel{ margin:0; font-family:var(--font_headline); font-size:var(--h_box); line-height:1.25; font-weight:600; letter-spacing:var(--ls_head); color:var(--text_dunkel); }
.bild_karte_text{ margin:0; font-size:var(--txt_klein); line-height:1.6; color:var(--text); }

.keyfacts_rahmen{ position:relative; }
.keyfacts_rahmen .gfx_punkte{ inset:-20px; opacity:.4; }
.keyfacts{ position:relative; list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, max(250px, calc((100% - 3 * var(--sp3)) / 4))), 1fr)); gap:var(--sp3); }
.keyfact{ position:relative; padding:var(--sp4); background:var(--grau_bg); border-radius:var(--r_m); overflow:hidden; transition:background-color .3s ease; }
.keyfact:hover{ background:var(--grau_bg_dunkel); }
.keyfact_streifen{ right:-30px; top:-30px; width:130px; height:130px; opacity:.16; }
.keyfact_zahl{ position:relative; margin:0; font-family:var(--font_headline); font-size:var(--zahl_fakt); line-height:.9; font-weight:700; letter-spacing:-0.05em; color:var(--text_dunkel); }
.keyfact_zahl em{ font-style:normal; color:var(--rot); }
.keyfact .linie{ background:var(--grau_linie_dunkel); opacity:.7; }
.keyfact_text{ margin:0; font-size:var(--txt_klein); line-height:1.55; color:var(--text); }
.keyfact_dunkel{ background:var(--schwarz); }
.keyfact_dunkel:hover{ background:#22221f; }
.keyfact_dunkel .keyfact_streifen{ opacity:.3; }
.keyfact_dunkel .keyfact_zahl{ color:var(--weiss); }
.keyfact_dunkel .keyfact_zahl em{ color:var(--rot_hell); }
.keyfact_dunkel .linie{ background:#33332F; opacity:1; }
.keyfact_dunkel .keyfact_text{ color:var(--text_hell); }

/* Leistungen :: Karten (list_leistungen) */
.start_leistungen{ padding:0 0 var(--sp9) 0; }
.leistung_karten{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, max(320px, calc((100% - 3 * var(--sp3)) / 4))), 1fr)); gap:var(--sp3); }	/* höchstens 4 Spalten wie im Layout */
.leistung_karten > li{ display:flex; }
.leistung_karte{
	position:relative; display:flex; flex-direction:column; width:100%;
	padding:var(--sp3); background:var(--grau_bg); border:1px solid transparent; border-radius:var(--r_m);
	color:inherit; text-decoration:none; overflow:hidden;
	transition:background-color .3s ease, border-color .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.leistung_karte .karte_kopf{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:var(--sp3); }
.leistung_karte .pille{ margin:0; }
.leistung_icon{ position:relative; display:block; width:42px; height:42px; margin:var(--sp4) 0 var(--sp3) 0; background-color:var(--markengrau); -webkit-mask:var(--icon) no-repeat left center / contain; mask:var(--icon) no-repeat left center / contain; transition:background-color .3s ease; }
.leistung_icon.is_leer{ background:none; }
.leistung_titel{ position:relative; display:flex; margin:0; font-family:var(--font_headline); font-size:var(--h_box); line-height:1.2; font-weight:600; letter-spacing:var(--ls_head); color:var(--text_dunkel); }
.leistung_linie{ position:relative; display:block; height:1px; margin:var(--sp3) 0; background:var(--grau_linie_dunkel); opacity:.8; }
.leistung_text{ position:relative; display:block; font-size:var(--txt_klein); line-height:1.65; color:var(--text); }
.leistung_karte:hover{ background:var(--weiss); border-color:var(--grau_linie); transform:translateY(-6px); box-shadow:0 26px 54px rgba(18,18,17,.08); }
.leistung_karte:hover .kreis{ background:var(--rot); border-color:var(--rot); color:var(--weiss); transform:rotate(45deg); }
.leistung_karte:hover .leistung_icon{ background-color:var(--rot); }
.leistung_karte_rot{ background:var(--rot_flaeche); }
.leistung_karte_rot .gfx_streifen{ right:-50px; top:-40px; width:230px; height:230px; opacity:.24; }
.leistung_karte_rot .pille{ border-color:transparent; }
.leistung_karte_rot .leistung_icon{ background-color:var(--rot); }
.leistung_karte_rot .leistung_linie{ background:rgba(226,6,19,.3); opacity:1; }
.leistung_karte_rot .leistung_text{ color:var(--markengrau); }
.bereich_liste .leistung_karte{ background:var(--weiss); border-color:var(--grau_linie); }
.bg_z_grey .leistung_karte{ background:var(--weiss); }

/* Referenzen :: Bild links mit fester Textauflage, Projektkarte rechts, Wechsel über die Pfeile (main.js, data-ref-slider) */
.start_referenzen{ background:var(--grau_bg); border-top:1px solid var(--grau_linie); border-bottom:1px solid var(--grau_linie); overflow:hidden; padding:var(--sp8) 0; }
.start_referenzen_punkte{ right:0; top:0; width:420px; height:420px; opacity:.5; }
.ref_slider{ display:flex; flex-wrap:wrap; align-items:stretch; gap:var(--sp3); }
.ref_bildseite{ position:relative; flex:1 1 380px; min-width:0; min-height:420px; border-radius:var(--r_m); overflow:hidden; background:var(--grau_bg_dunkel); }
.ref_bild{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease; }
.ref_bild.is_active{ opacity:1; }
.ref_verlauf{ position:absolute; inset:0; background:linear-gradient(to top, rgba(var(--schwarz_tief),.88) 0%, rgba(var(--schwarz_tief),.45) 28%, rgba(var(--schwarz_tief),0) 56%); }
.ref_auflage{ position:absolute; left:var(--sp4); right:var(--sp4); bottom:var(--sp4); }
.ref_auflage_titel{ display:flex; align-items:center; gap:var(--sp2); margin:0; font-family:var(--font_headline); font-size:var(--h_box); font-weight:700; letter-spacing:var(--ls_head); color:var(--weiss); }
.ref_auflage_kreis{ position:relative; flex:0 0 46px; width:46px; height:46px; border-radius:50%; }
.ref_auflage .linie{ background:rgba(255,255,255,.3); }
.ref_auflage_text{ max-width:420px; margin:0; font-size:var(--txt_klein); line-height:1.6; color:var(--weiss); }
.ref_karte{ position:relative; display:flex; flex-direction:column; gap:var(--sp4); flex:1 1 560px; min-width:0; padding:var(--sp4) var(--sp3); background:var(--weiss); border-radius:var(--r_m); }
.ref_texte{ flex:1 1 auto; display:flex; }
.ref_text{ display:flex; flex-direction:column; width:100%; }
.ref_text[hidden]{ display:none; }
.ref_text .pille{ margin:0; }
.ref_zitat{ margin:var(--sp5) 0 0 0; font-family:var(--font_headline); font-size:var(--h_zitat); line-height:1.32; font-weight:600; letter-spacing:var(--ls_head); color:var(--text_dunkel); text-wrap:balance; }
.ref_text .linie{ margin:var(--sp5) 0 var(--sp4) 0; }
.ref_objekt{ margin:0; font-family:var(--font_headline); font-size:var(--h_box); line-height:1.25; font-weight:600; letter-spacing:var(--ls_head); color:var(--text_dunkel); }
.ref_ort{ margin:4px 0 0 0; font-size:var(--txt_klein); color:var(--text); }
.ref_link{ margin-top:auto; padding-top:var(--sp4); align-self:flex-start; }
.ref_steuerung{ display:flex; align-items:center; justify-content:flex-end; gap:var(--sp2); }
.ref_zaehler{ font-family:var(--font_headline); font-size:var(--txt_klein); font-weight:600; letter-spacing:.06em; color:var(--text); }

/* |||||||||| Ende :: STARTSEITE :: BEREICHE |||||||||| */


/* |||||||||| Start :: CALL TO ACTION (Block cta-bauwerks-check) |||||||||| */

.bereich_cta{ padding:var(--sp9) 0; }
.bereich_zurueck + .bereich_cta{ padding-top:var(--sp4); }
.start_referenzen + .bereich_cta,
.bereich_content + .bereich_cta{ padding-top:var(--sp9); }
.cta_box{ position:relative; padding:var(--sp6) var(--sp3); background:var(--schwarz); border-radius:var(--r_l); overflow:hidden; }
.cta_streifen{ right:-120px; top:-120px; width:260px; height:260px; opacity:.22; }	/* mobil klein, ab 750px wie im Layout (res750) */
.cta_punkte{ left:0; bottom:0; width:280px; height:200px; opacity:.22; }
.cta_ring{ position:absolute; border:2px solid var(--rot); border-radius:50%; pointer-events:none; }
.cta_ring_1{ left:-120px; top:-120px; width:320px; height:320px; opacity:.6; }
.cta_ring_2{ left:-60px; top:-60px; width:200px; height:200px; opacity:.4; }
.cta_content{ position:relative; max-width:900px; }
.cta_content .pille{ margin-bottom:var(--sp4); }
.headline_cta{ margin:0 0 var(--sp3) 0; color:var(--weiss); }
.cta_content .text_lead{ max-width:620px; margin:0 0 var(--sp5) 0; color:var(--text_hell); }
.cta_content .text_lead p{ margin:0; }
.cta_aktionen{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp3) var(--sp5); }
.cta_kontakt_text{ margin:0 0 2px 0; font-size:var(--txt_klein); color:var(--text_hell); }
.cta_telefon{ display:inline-flex; font-family:var(--font_headline); font-size:clamp(1.5rem, 1.9vw, 2.125rem); font-weight:600; letter-spacing:var(--ls_head); color:var(--weiss); text-decoration:none; }
.cta_telefon:hover{ color:var(--rot_hell); }

/* |||||||||| Ende :: CALL TO ACTION |||||||||| */


/* |||||||||| Start :: REFERENZEN (Liste mit Filter + Projektseite) |||||||||| */

/* Filter :: mobil Auswahlliste (Fabian 06.11.2026), ab 750px Knöpfe */
.ref_filter_auswahl{ display:flex; flex-direction:column; gap:6px; margin-bottom:var(--sp4); }
.ref_filter_auswahl label{ font-size:var(--txt_klein); font-weight:600; color:var(--text_dunkel); }
.ref_filter_auswahl select{ padding-right:48px; background:var(--weiss) url("../images/icon_chevron-runter.svg") no-repeat right 18px center / 16px 16px; cursor:pointer; }
.ref_filter{ display:none; }
.ref_filter_knopf{
	flex:0 0 auto; min-height:44px; padding:0 20px; scroll-snap-align:start;
	border:1px solid var(--grau_linie_dunkel); border-radius:999px; background:var(--weiss);
	font-size:var(--txt_klein); font-weight:600; color:var(--text_dunkel); white-space:nowrap;
	transition:background-color .25s ease, border-color .25s ease, color .25s ease;
}
.ref_filter_knopf:hover{ border-color:var(--rot); color:var(--rot); }
.ref_filter_knopf[aria-pressed="true"]{ background:var(--rot); border-color:var(--rot); color:var(--weiss); }

/* Karten :: höchstens 3 nebeneinander */
.ref_karten{ list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, max(320px, calc((100% - 2 * var(--sp3)) / 3))), 1fr)); gap:var(--sp3); }
.ref_karten > li{ display:flex; }
.ref_karten > li[hidden]{ display:none; }
.ref_karte_liste{
	display:flex; flex-direction:column; width:100%; background:var(--weiss); border:1px solid var(--grau_linie); border-radius:var(--r_m);
	overflow:hidden; color:inherit; text-decoration:none;
	transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.ref_karte_bild{ display:block; aspect-ratio:3 / 2; overflow:hidden; background:var(--grau_bg); }
.ref_karte_bild img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.ref_karte_text{ display:flex; flex-direction:column; flex:1 1 auto; padding:var(--sp3); }
.ref_karte_text .karte_kopf{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp2); margin-bottom:var(--sp3); }
.ref_karte_text .pille{ margin:0; }
.ref_karte_titel{ margin:0; font-family:var(--font_headline); font-size:var(--h_box); line-height:1.25; font-weight:600; letter-spacing:var(--ls_head); color:var(--text_dunkel); }
.ref_karte_ort{ display:block; margin-top:4px; font-size:var(--txt_klein); color:var(--text); }
.ref_karte_zitat{ display:block; font-size:var(--txt_klein); line-height:1.6; color:var(--text); }
.ref_karte_liste:hover{ transform:translateY(-6px); border-color:var(--grau_linie_dunkel); box-shadow:0 26px 54px rgba(18,18,17,.08); }
.ref_karte_liste:hover .ref_karte_bild img{ transform:scale(1.05); }
.ref_karte_liste:hover .kreis{ background:var(--rot); border-color:var(--rot); color:var(--weiss); transform:rotate(45deg); }

/* Projektseite :: Ausgangslage, Umsetzung, Ergebnis, Material (2 Spalten), zugeordnete Leistungen */
.bereich_projekt{ padding:var(--abstand_bereich) 0; }
.projekt_bloecke{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, max(320px, calc((100% - var(--sp3)) / 2))), 1fr)); gap:var(--sp3); }
.projekt_block{ padding:var(--sp4); background:var(--grau_bg); border-radius:var(--r_m); }
.bg_z_grey .projekt_block{ background:var(--weiss); }
.projekt_block .zahl_outline{ display:block; margin-bottom:var(--sp3); }
.projekt_block_titel{ margin:0; font-family:var(--font_headline); font-size:var(--h_box); line-height:1.25; font-weight:600; letter-spacing:var(--ls_head); color:var(--text_dunkel); }
.projekt_leistungen{ margin-top:var(--sp5); }
.projekt_leistungen_titel{ margin:0 0 var(--sp2) 0; font-family:var(--font_headline); font-size:var(--label); font-weight:600; letter-spacing:var(--ls_label); text-transform:uppercase; color:var(--text_dunkel); }
.projekt_leistungen ul{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; }
.projekt_leistung_link{ margin:0; text-decoration:none; transition:border-color .25s ease, color .25s ease; }
.projekt_leistung_link:hover{ border-color:var(--rot); color:var(--rot); }

/* |||||||||| Ende :: REFERENZEN |||||||||| */


/* |||||||||| Start :: FOOTER (Block footer-global) |||||||||| */

.footer_seite{ background:var(--bg); border-top:1px solid var(--grau_linie); }
.footer_haupt{ padding:var(--sp7) 0 var(--sp5) 0; }
.raster_footer{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap:var(--sp6); }
.logobox_footer{ display:block; width:212px; margin-bottom:var(--sp3); }
.logobox_footer img{ width:100%; height:auto; }
.footer_text{ max-width:340px; font-size:var(--txt); line-height:1.7; color:var(--text); }
.footer_text p{ margin:0 0 var(--sp3) 0; }
.footer_text p:last-child{ margin-bottom:0; }
.footer_headline{ margin:0 0 var(--sp3) 0; font-family:var(--font_headline); font-size:var(--label); line-height:1.3; font-weight:600; letter-spacing:var(--ls_label); text-transform:uppercase; color:var(--text_dunkel); }
.footer_adresse{ font-style:normal; font-size:var(--txt); line-height:2.1; color:var(--text); }
.footer_kontakt{ display:flex; flex-direction:column; margin:0; }
.footer_link_icon{ display:inline-flex; align-items:center; gap:10px; font-size:var(--txt); line-height:2.1; color:var(--text); text-decoration:none; }
.footer_link_icon .icon_maske{ width:15px; height:15px; color:var(--rot); }
.footer_link_icon:hover{ color:var(--rot); }
.footer_zeiten{ max-width:none; line-height:2.1; }
.footer_zeiten table{ border-collapse:collapse; }
.footer_zeiten td{ padding:0 var(--sp5) 0 0; vertical-align:top; }
.footer_zeiten td:last-child{ padding-right:0; }
.footer_zeiten p{ margin:0; }
.footer_liste{ list-style:none; display:grid; }
.footer_liste a{ font-size:var(--txt); line-height:2.1; color:var(--text); text-decoration:none; }
.footer_liste a:hover,
.footer_liste a[aria-current]{ color:var(--rot); }
.raster_footer_unten{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp2) var(--sp4); padding:var(--sp3) 0; border-top:1px solid var(--grau_linie); }
.footer_copyright{ margin:0; font-size:var(--txt_klein); color:var(--text); }
.footer_legal{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--sp4); }
.footer_legal a{ font-size:var(--txt_klein); color:var(--text); text-decoration:none; }
.footer_legal a:hover,
.footer_legal a.is_active{ color:var(--rot); }

/* |||||||||| Ende :: FOOTER |||||||||| */


/* |||||||||| Start :: SCHNELLZUGRIFFE + NACH OBEN + KONTAKTLEISTE |||||||||| */

/* Rechter Rand (ab 1225px, res1225): nur das Icon sichtbar, beim Hover fährt die Beschriftung aus. Der Bauwerks-Check pulsiert. */
@keyframes isoPuls{
	0%   { box-shadow:0 0 0 0 rgba(226,6,19,.55); }
	70%  { box-shadow:0 0 0 20px rgba(226,6,19,0); }
	100% { box-shadow:0 0 0 0 rgba(226,6,19,0); }
}
.schnellzugriffe{ display:none; position:fixed; right:0; top:50%; z-index:80; transform:translateY(-50%); flex-direction:column; align-items:flex-end; gap:6px; pointer-events:none; }	/* Leiste ist so breit wie der ausgeklappte Text → nur die Knöpfe selbst sind klickbar (sonst blockiert sie z. B. Einstieg 05) */
.schnellzugriff{
	display:flex; align-items:center; gap:var(--sp3); height:60px; padding:0 19px;
	border-radius:14px 0 0 14px; white-space:nowrap; background:var(--schwarz); color:var(--weiss); text-decoration:none;
	transform:translateX(calc(100% - 60px)); transition:transform .4s cubic-bezier(.2,.8,.2,1), background-color .25s ease;
	pointer-events:auto;
}
.schnellzugriff .icon_maske{ width:22px; height:22px; }
.schnellzugriff_text{ font-size:var(--txt_klein); font-weight:600; }
.schnellzugriff:hover,
.schnellzugriff:focus-visible{ transform:translateX(0); background:var(--rot); color:var(--weiss); }
.schnellzugriff_puls{ background:var(--rot); animation:isoPuls 2.4s ease-out infinite; }
.schnellzugriff_puls:hover,
.schnellzugriff_puls:focus-visible{ background:var(--rot_dunkel); }

/* Zurück nach oben :: erst ab 600px Scrollweite (main.js, Klasse is_sichtbar) */
.nach_oben{
	position:fixed; right:var(--sp2); bottom:calc(var(--kontaktleiste_hoehe) + env(safe-area-inset-bottom, 0px) + var(--sp2)); z-index:80;
	display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
	background:var(--weiss); border:1px solid var(--grau_linie_dunkel); color:var(--text_dunkel); box-shadow:0 14px 34px rgba(18,18,17,.14);
	opacity:0; visibility:hidden; pointer-events:none;
	transition:opacity .3s ease, visibility .3s ease, background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.nach_oben .icon_maske{ width:21px; height:21px; }
.nach_oben.is_sichtbar{ opacity:1; visibility:visible; pointer-events:auto; }
.nach_oben:hover{ background:var(--rot); border-color:var(--rot); color:var(--weiss); transform:translateY(-3px); }

/* Mobile Kontaktleiste unten (unter 1225px, Konzept): Bauwerks-Check + Anrufen, berücksichtigt den Bildschirmrand */
.kontaktleiste{
	position:fixed; left:0; right:0; bottom:0; z-index:75;
	display:flex; gap:8px; padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) 8px;
	background:rgba(var(--schwarz_tief),.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.kontaktleiste_link{ flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 12px; border-radius:999px; font-size:var(--txt_klein); font-weight:600; color:var(--weiss); text-decoration:none; }
.kontaktleiste_link .icon_maske{ width:18px; height:18px; }
.kontaktleiste_check{ background:var(--rot); }
.kontaktleiste_telefon{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); }
/* Platz am Seitenende, damit die Leiste nichts verdeckt */
.footer_seite{ padding-bottom:calc(var(--kontaktleiste_hoehe) + env(safe-area-inset-bottom, 0px)); }

/* |||||||||| Ende :: SCHNELLZUGRIFFE + NACH OBEN + KONTAKTLEISTE |||||||||| */


/* |||||||||| Start :: BARRIEREFREIHEIT (nur bei $barrierefrei = "ja" :: Klasse "barrierefrei" am <html>) |||||||||| */
/* WCAG 2.1 AA. Schalter im Kopf (allg_nav_regular, main.js): ansicht_schrift_1 / _2 = Schrift 125 / 150 %, ansicht_kontrast =
   hoher Kontrast. Ohne die Klasse "barrierefrei" bleibt alles wie im Layout. Regeln: 2_wissen/REGELN.md §9 */

/* Schriftgröße :: alle Größen sind rem, also wächst alles mit der Grundgröße */
html.ansicht_schrift_1{ font-size:125%; --ansicht_faktor:1.25; }
html.ansicht_schrift_2{ font-size:150%; --ansicht_faktor:1.5; }
/* Sehr große Überschriften (ab ca. 42px) wachsen nicht mit – sie sind schon groß genug und würden sonst Header / Hero sprengen */
.barrierefrei .headline_hero{ font-size:calc(var(--h_hero) / var(--ansicht_faktor, 1)); }
.barrierefrei .headline_big,
.barrierefrei .headline_header,
.barrierefrei .headline_cta{ font-size:calc(var(--h_big) / var(--ansicht_faktor, 1)); }
/* Hauptmenü passt mit größerer Schrift nicht mehr in die Leiste :: steht dann im Burgermenü (wie mobil), Telefonnummer nur als Symbol */
html.ansicht_schrift_1 .nav_haupt_liste,
html.ansicht_schrift_2 .nav_haupt_liste{ display:none; }
html.ansicht_schrift_1 .nav_overlay_haupt,
html.ansicht_schrift_2 .nav_overlay_haupt{ display:block; }
html.ansicht_schrift_1 .nav_telefon_nummer,
html.ansicht_schrift_2 .nav_telefon_nummer{ display:none; }
/* Buttons im Hero stehen auf dem Desktop rechts neben der Überschrift (absolut) :: mit größerer Schrift darunter */
html.ansicht_schrift_1 .hero_text .button_leiste,
html.ansicht_schrift_2 .hero_text .button_leiste{ position:static; margin-top:1.875rem; }
/* Hero wächst mit dem Inhalt (sonst läuft der Text oben unter die Navigation) :: aktiver Slide bestimmt die Höhe */
html.ansicht_schrift_1 .hero_slides,
html.ansicht_schrift_2 .hero_slides{ position:relative; min-height:inherit; }
html.ansicht_schrift_1 .hero_slide.is_active,
html.ansicht_schrift_2 .hero_slide.is_active{ position:relative; display:flex; flex-direction:column; min-height:inherit; }
html.ansicht_schrift_1 .hero_slide.is_active .hero_inhalt,
html.ansicht_schrift_2 .hero_slide.is_active .hero_inhalt{ flex:1 0 auto; height:auto; }

/* AA-Korrekturen :: Kontrast mind. 4,5:1 für Text, 3:1 für Bedienelemente
   --text_grau (#999) steht auf Weiß (2,8:1 – zu wenig) und auf Schwarz (7,4:1 – ok) :: nur die hellen Stellen abdunkeln */
.barrierefrei{ --text_grau_hell:#6b6b6b; }	/* 5,3:1 auf Weiß, 4,9:1 auf #f6f6f6 */
.barrierefrei .link_box_info,
.barrierefrei .eingabe::placeholder,
.barrierefrei .formular_pflicht,
.barrierefrei .datei_flaeche{ color:var(--text_grau_hell); }

/* Rot auf dunklem Grund :: #b70220 hat auf Schwarz nur 3,0:1 → für Text ein helleres Rot (6,3:1). Buttons bleiben (Weiß auf Rot ok) */
.barrierefrei{ --rot_hell:#f05a6a; }
.barrierefrei .bg_z_schwarz .kicker,
.barrierefrei .bg_z_schwarz .punkt,
.barrierefrei .bg_z_schwarz .datum_content,
.barrierefrei .bg_z_schwarz .link_pfeil,
.barrierefrei .branche_unterzeile,
.barrierefrei .willkommen_box_kicker,
.barrierefrei .karte_datum,
.barrierefrei .cta_banner_text span,
.barrierefrei .hero .punkt,
.barrierefrei .headergfx_detail .punkt,
.barrierefrei .formular_adresse a,
.barrierefrei .nav_dropdown_link.is_active,
.barrierefrei .nav_dropdown_link:hover,
.barrierefrei .nav_overlay a.is_active,
.barrierefrei .nav_overlay a:hover,
.barrierefrei .sprachwahl_liste a:hover,
.barrierefrei .footer_seite a.is_active,
.barrierefrei .footer_seite a:hover{ color:var(--rot_hell); }

/* Text über Bildern :: Verlauf überall mind. 55 % Schwarz → weiße Schrift auch über hellen Bildstellen mind. 4,7:1 */
.barrierefrei .hero_bild::after{ background:linear-gradient(90deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.62) 50%, rgba(0,0,0,.55) 100%); }
.barrierefrei .headergfx_bild::after{ background:linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.6) 45%, rgba(0,0,0,.55) 100%); }
.barrierefrei .laufschrift{ background:rgba(0,0,0,.65); }
/* Aktiver Menüpunkt über dem Bild :: Weiß mit roter Linie statt roter Schrift (Rot auf Bild ist nicht sicher lesbar) */
.barrierefrei .header_seite:not(.is_scrolled) .nav_haupt_link.is_active,
.barrierefrei .header_seite:not(.is_scrolled) .nav_haupt_link:hover,
.barrierefrei .header_seite:not(.is_scrolled) .nav_haupt_punkt:hover > .nav_haupt_link{ color:var(--weiss); text-decoration:underline; text-decoration-color:var(--rot); text-decoration-thickness:2px; text-underline-offset:6px; }

/* Große Schrift / Zoom :: lange Wörter umbrechen statt abschneiden, Captcha-Feld darf schmaler werden */
/* (im Grid zählt für die Mindestbreite nur „anywhere“, nicht „break-word“) */
.barrierefrei .headline_box{ overflow-wrap:anywhere; hyphens:auto; -webkit-hyphens:auto; }
.barrierefrei .teaser_box,
.barrierefrei .txt_content{ overflow-wrap:break-word; }
.barrierefrei .formular_captcha .eingabe{ min-width:0; flex:1 1 12rem; }
.barrierefrei .eingabe:focus,
.barrierefrei .eingabe:focus-visible{ outline:2px solid var(--rot); outline-offset:2px; }
.barrierefrei a:focus-visible,
.barrierefrei button:focus-visible,
.barrierefrei [tabindex]:focus-visible{ outline-width:3px; }
/* Fokus auf dunklem Grund weiß (Rot hat dort nur 3:1) */
.barrierefrei .ansicht_panel :focus-visible,
.barrierefrei .nav_overlay :focus-visible,
.barrierefrei .nav_dropdown :focus-visible,
.barrierefrei .footer_seite :focus-visible,
.barrierefrei .bg_z_schwarz :focus-visible,
.barrierefrei .hero :focus-visible,
.barrierefrei .headergfx_detail :focus-visible{ outline-color:var(--weiss); }

/* Bewegung aus (Schalter in der Leiste, WCAG 2.3.3) :: keine Animationen und Übergänge, Einblendungen sofort sichtbar */
html.ansicht_ruhig *,
html.ansicht_ruhig *::before,
html.ansicht_ruhig *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
html.ansicht_ruhig{ scroll-behavior:auto; }
html.ansicht_ruhig [data-aos]{ opacity:1 !important; transform:none !important; }

/* Zielgröße mind. 44 × 44 px (WCAG 2.5.5, AAA) :: Knöpfe und Symbol-Links in Kopf, Hero und Slidern */
.barrierefrei .ansicht_button,
.barrierefrei .button_menu{ width:44px; height:44px; flex-basis:44px; }
.barrierefrei .sprachwahl_button{ height:44px; min-width:50px; }
.barrierefrei .nav_telefon{ min-width:44px; min-height:44px; justify-content:center; }
.barrierefrei .logobox_nav{ display:flex; align-items:center; min-height:44px; }
.barrierefrei .hero_pfeil{ width:44px; height:44px; }
.barrierefrei .formular_datenschutz label{ min-height:44px; padding:.5rem 0; }
/* Links außerhalb von Fließtext (Menüs, Linklisten, Pfeil-Links) :: mind. 44px hoch. Der kleine Dropdown-Pfeil im Hauptmenü bleibt –
   dieselben Unterpunkte gibt es im Burgermenü mit 44px-Knöpfen (Ausnahme „gleichwertig“) */
.barrierefrei .breadcrumb a,
.barrierefrei .nav_haupt_link,
.barrierefrei .nav_dropdown_link,
.barrierefrei .sprachwahl_liste a,
.barrierefrei .nav_overlay_link,
.barrierefrei .nav_overlay_sub a,
.barrierefrei .nav_overlay_legal a,
.barrierefrei .nav_overlay_kontakt a,
.barrierefrei .nav_overlay_sprache a{ display:flex; align-items:center; min-height:44px; }
.barrierefrei .nav_overlay_sprache a{ display:inline-flex; min-width:44px; justify-content:center; }
.barrierefrei .sprachwahl_liste a{ justify-content:center; }
.barrierefrei .nav_overlay_toggle{ width:44px; height:44px; flex-basis:44px; }
.barrierefrei .link_pfeil,
.barrierefrei .cta_telefon,
.barrierefrei .kachel_kontakt_bewerben{ min-height:44px; }
.barrierefrei .cta_telefon{ display:inline-flex; align-items:center; }
.barrierefrei .footer_spalte li,
.barrierefrei .footer_legal li{ line-height:1.3; }
.barrierefrei .footer_spalte a,
.barrierefrei .footer_legal a,
.barrierefrei .footer_kontakt a,
.barrierefrei .formular_adresse a,
.barrierefrei .kachel_kontakt_daten a{ display:inline-flex; align-items:center; min-height:44px; }
.barrierefrei .footer_legal{ gap:0 1.75rem; }
.barrierefrei .footer_legal a,
.barrierefrei .footer_spalte a,
.barrierefrei .nav_haupt_link{ min-width:44px; }	/* kurze Wörter wie „AGB“, „Home“, „News“ */
.barrierefrei .headline_box a,
.barrierefrei main a[href^="tel:"],
.barrierefrei main a[href^="mailto:"]{ display:inline-flex; align-items:center; min-height:44px; }
.barrierefrei .txt_content a[href^="tel:"],
.barrierefrei .txt_content a[href^="mailto:"]{ display:inline; min-height:0; }	/* im Fließtext bleibt alles, wie es ist (Ausnahme „inline“) */

/* Pause-Knöpfe :: Header-Slider + Laufschrift (WCAG 2.2.2) */
.hero_pause::before{ width:10px; height:12px; border:0; border-left:3px solid var(--weiss); border-right:3px solid var(--weiss); transform:translate(-50%,-50%); }
.hero_pause.is_angehalten::before{ width:0; height:0; border-style:solid; border-width:7px 0 7px 12px; border-color:transparent transparent transparent var(--weiss); transform:translate(-35%,-50%); }
.laufschrift_pause{ position:absolute; right:0; top:0; bottom:0; z-index:2; width:var(--laufschrift_hoehe); background:var(--schwarz); border-left:1px solid rgba(255,255,255,.25); }
.laufschrift_pause::before{ content:""; position:absolute; left:50%; top:50%; width:10px; height:12px; border-left:3px solid var(--weiss); border-right:3px solid var(--weiss); transform:translate(-50%,-50%); }
.laufschrift.is_angehalten .laufschrift_pause::before{ width:0; height:0; border-style:solid; border-width:7px 0 7px 12px; border-color:transparent transparent transparent var(--weiss); transform:translate(-35%,-50%); }
.laufschrift.is_angehalten .laufschrift_track{ animation-play-state:paused; }
.laufschrift_pause:hover{ background:var(--rot); }

/* Hoher Kontrast :: Schwarz auf Weiß / Weiß auf Schwarz, Akzentfarbe dunkler, Links unterstrichen, Bilder mit dunklerem Verlauf */
html.ansicht_kontrast{
	--rot:				#8f0119;
	--rot_dunkel:		#5e0010;
	--text:				#000000;
	--text_dunkel:		#000000;
	--text_grau_hell:	#000000;
	--text_hell:		#ffffff;
	--grau_linie:		#000000;
	--grau_bg:			#ffffff;
}
html.ansicht_kontrast .txt_content a,
html.ansicht_kontrast .footer_seite a,
html.ansicht_kontrast .link_pfeil{ text-decoration:underline; text-underline-offset:3px; }
html.ansicht_kontrast .zeile_outline{ color:currentColor; -webkit-text-stroke:0; }
html.ansicht_kontrast .bg_z_grey{ border-top:1px solid #000; border-bottom:1px solid #000; }
html.ansicht_kontrast .hero_bild::after,
html.ansicht_kontrast .headergfx_bild::after{ background:rgba(0,0,0,.75); }
html.ansicht_kontrast .laufschrift{ background:#000; }
/* Rot auf Schwarz im hohen Kontrast :: noch helleres Rot (7,9:1) */
html.ansicht_kontrast{ --rot_hell:#ff7a87; }
html.ansicht_kontrast .eingabe{ border-color:#000; }
html.ansicht_kontrast .eingabe::placeholder{ color:#333333; }
html.ansicht_kontrast a:focus-visible,
html.ansicht_kontrast button:focus-visible,
html.ansicht_kontrast [tabindex]:focus-visible,
html.ansicht_kontrast .eingabe:focus{ outline:3px solid #000; outline-offset:3px; box-shadow:0 0 0 6px #ffd400; }

/* |||||||||| Ende :: BARRIEREFREIHEIT |||||||||| */


/* |||||||||| Start :: WINDOWS-KONTRASTMODUS (forced-colors) :: gilt immer, betrifft nur Nutzer mit diesem Modus |||||||||| */
/* Der Browser ersetzt dort alle Farben durch Systemfarben, background-color wird zur Hintergrundfarbe → per Maske eingefärbte Icons,
   Burger-Linien und Punkte verschwinden, Zustände nur über die Hintergrundfarbe sind nicht mehr erkennbar. Abhilfe: Systemfarben
   (CanvasText, ButtonText, LinkText, Highlight) mit forced-color-adjust:none. Test: 4_werkzeuge/pruefen/kontrastmodus_test.js */
@media (forced-colors: active){
	/* Icons per CSS-Maske */
	.nav_telefon::before,
	.ansicht_button::before,
	.kachel_kontakt_icon,
	.icon_maske,
	.datei_icon,
	.laufschrift_inhalt span::after{ forced-color-adjust:none; background-color:CanvasText; }
	.nav_telefon::before{ background-color:LinkText; }
	.ansicht_button::before{ background-color:ButtonText; }
	/* Burger-Linien, Slider-Punkte, Linien vor dem Kicker */
	.button_menu_lines span,
	.slider_punkte span,
	.kicker::before{ forced-color-adjust:none; background-color:CanvasText; }
	.button_menu_lines span{ background-color:ButtonText; }
	.button_menu,
	.slider_pfeil,
	.hero_pfeil,
	.laufschrift_pause{ border:1px solid ButtonText; }
	/* Zustände sichtbar machen :: gewählt / aktiv */
	.ansicht_wahl[aria-pressed="true"],
	.slider_punkte span.is_active{ forced-color-adjust:none; background-color:Highlight; color:HighlightText; border-color:Highlight; }
	.nav_haupt_link.is_active,
	.nav_overlay_link.is_active,
	.nav_dropdown_link.is_active,
	.footer_seite a.is_active{ text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:5px; }
	/* Pause-Symbol (zwei Balken aus Rahmenlinien) und geöffnete Leiste in Systemfarben */
	.hero_pause::before,
	.laufschrift_pause::before{ forced-color-adjust:none; background:transparent; border-left-color:ButtonText; border-right-color:ButtonText; }
	.hero_pause.is_angehalten::before,
	.laufschrift.is_angehalten .laufschrift_pause::before{ border-left-color:ButtonText; border-right-color:transparent; }
	.ansicht.is_open .ansicht_button::before,
	.ansicht_button:hover::before{ background-color:Highlight; }
	/* Fokus immer mit Systemfarbe */
	a:focus-visible, button:focus-visible, .eingabe:focus{ outline:3px solid Highlight; outline-offset:3px; }
}

/* |||||||||| Ende :: WINDOWS-KONTRASTMODUS |||||||||| */