/*
Theme Name:   Interior Germany
Theme URI:    https://interior-germany.com/
Description:  Child-Theme zu Hello Elementor. Hausschrift Outfit (SIL OFL 1.1) liegt
              auf dem eigenen Server, Google Fonts sind abgeschaltet.
Author:       Taurus Competence
Template:     hello-elementor
Version:      1.0.0
Text Domain:  interior-germany
*/

/* Farben, Raster und Abstände kommen aus assets/fonts.css (so geliefert, nicht
   angefasst). Hier stehen die Schriftgrößen und alles unter 1280 px. */

:root {
	/* Entwürfe sind auf 1440 px gezeichnet, daher die vw-Werte (76/1440 = 5,28 vw). */
	--ig-fs-headline:  clamp(2.5rem,    5.28vw, 4.75rem);   /* 40 → 76 px */
	--ig-fs-plakativ:  clamp(2rem,      3.89vw, 3.5rem);    /* 32 → 56 px */
	--ig-fs-subline:   clamp(1.625rem,  2.64vw, 2.375rem);  /* 26 → 38 px */
	--ig-fs-copy:      clamp(1.0625rem, 1.32vw, 1.1875rem); /* 17 → 19 px */
	--ig-fs-tile:      clamp(1.125rem,  1.39vw, 1.25rem);   /* 18 → 20 px */
	--ig-fs-eyebrow:   0.8125rem;                           /* 13 px, fest */

	--ig-lh-headline: 1.02;
	--ig-lh-plakativ: 1;
	--ig-lh-subline:  1.1;
	--ig-lh-copy:     1.6;

	--ig-w-light:   300;
	--ig-w-regular: 400;
	--ig-w-medium:  500;
	--ig-w-bold:    700;
	--ig-w-black:   900;

	--ig-ls-eyebrow: 0.18em;
	--ig-ls-button:  0.14em;

	/* Offen beim Kunden: Fließtext steht in den Entwürfen auf #CFCFCF, in der
	   Palette gibt es diesen Wert nicht. Bis zur Klärung gilt der Entwurf. */
	--ig-copy: #cfcfcf;

	--ig-zoom:     1.04;    /* Kachel-Hover */
	--ig-zoom-dur: 0.5s;
}

/* Unter 1280 px ändern sich nur die Werte, nicht die Variablennamen. */
@media (max-width: 1024px) {
	:root {
		--ig-margin: 48px;
		--ig-space-section: 88px;
		--ig-space-head: 44px;
	}
}

@media (max-width: 767px) {
	:root {
		--ig-margin: 24px;
		--ig-space-section: 72px;
		--ig-space-head: 36px;
	}
}

/* ===========================================================================
   Grundlagen
   =========================================================================== */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	font-size: var(--ig-fs-copy);
	line-height: var(--ig-lh-copy);
}

::selection {
	background: var(--ig-white);
	color: var(--ig-black);
}

a {
	color: var(--ig-white);
	text-decoration: none;
}

a:hover {
	color: var(--ig-muted);
}

/* Auf einer Seite ohne Farbe muss der Tastaturfokus aus der Form kommen. */
:focus-visible {
	outline: 2px solid var(--ig-white);
	outline-offset: 3px;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: var(--ig-w-medium);
	text-wrap: balance;
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
}

/* ===========================================================================
   Typo-Bausteine — die fünf Stile aus Abschnitt 4.
   In Elementor werden sie als Global Fonts mit denselben Werten angelegt;
   diese Klassen sind die Referenz dafür und für alles außerhalb von Elementor.
   =========================================================================== */

.ig-headline {
	font-weight: var(--ig-w-medium);
	font-size: var(--ig-fs-headline);
	line-height: var(--ig-lh-headline);
}

.ig-plakativ {
	font-weight: var(--ig-w-black);
	font-size: var(--ig-fs-plakativ);
	line-height: var(--ig-lh-plakativ);
	text-transform: uppercase;
}

.ig-subline {
	font-weight: var(--ig-w-medium);
	font-size: var(--ig-fs-subline);
	line-height: var(--ig-lh-subline);
}

.ig-copy {
	font-weight: var(--ig-w-light);
	font-size: var(--ig-fs-copy);
	line-height: var(--ig-lh-copy);
	color: var(--ig-copy);
}

.ig-eyebrow {
	font-weight: var(--ig-w-black);
	font-size: var(--ig-fs-eyebrow);
	letter-spacing: var(--ig-ls-eyebrow);
	text-transform: uppercase;
	color: var(--ig-muted);
	margin: 0;
}

.ig-copy--klein {
	font-size: 0.9375rem;
	margin: 0 0 var(--ig-space-head);
}

.ig-eyebrow--hell {
	color: var(--ig-white);
}

/* ===========================================================================
   Raster
   =========================================================================== */

.ig-wrap {
	max-width: var(--ig-maxw);
	margin-inline: auto;
	padding-inline: var(--ig-margin);
}

/* Bühnen und Bildbänder laufen randlos — auch innerhalb eines Containers. */
.ig-full {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.ig-hairline {
	border: 0;
	border-top: 1px solid var(--ig-hairline);
	margin: 0;
}

/* ===========================================================================
   Schaltflächen — keine Radien, keine Füllfarbe außer Weiß, mind. 44 px hoch
   =========================================================================== */

.ig-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 22px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 0;
	font-weight: var(--ig-w-bold);
	font-size: var(--ig-fs-eyebrow);
	letter-spacing: var(--ig-ls-button);
	text-transform: uppercase;
}

.ig-btn--primaer {
	min-height: 56px;
	padding: 0 36px;
	background: var(--ig-white);
	color: var(--ig-black);
	border-color: var(--ig-white);
	font-weight: var(--ig-w-black);
}

.ig-btn--primaer:hover {
	background: var(--ig-muted);
	border-color: var(--ig-muted);
	color: var(--ig-black);
}

.ig-btn--sekundaer:hover {
	border-color: var(--ig-white);
	color: var(--ig-white);
}

.ig-link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-height: 44px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ig-white);
	font-weight: var(--ig-w-bold);
	font-size: var(--ig-fs-eyebrow);
	letter-spacing: var(--ig-ls-button);
	text-transform: uppercase;
}

/* ===========================================================================
   Projektkachel — 3:4, Verlauf von unten, °-Nummer oben links, Titel unten
   =========================================================================== */

.ig-tile {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #111;
}

.ig-tile img,
.ig-tile .ig-tile__bild {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ig-zoom-dur) ease;
}

/* Auch auf einen Wrapper anwendbar — Elementor legt um Bilder gern ein div. */
.ig-tile:hover img,
.ig-tile:focus-visible img,
.ig-tile:hover .ig-tile__bild,
.ig-tile:focus-visible .ig-tile__bild {
	transform: scale(var(--ig-zoom));
}

.ig-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 55%);
	pointer-events: none;
}

.ig-tile__num {
	position: absolute;
	left: 18px;
	right: 18px;
	top: 16px;
	z-index: 1;
	max-width: calc(100% - 36px);
	text-wrap: balance;
}

/* Titel und Untertitel sitzen gemeinsam im Fuß der Kachel — sonst überlappen
   sie sich, sobald der Untertitel zwei Zeilen braucht. */
.ig-tile__fuss {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 16px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ig-tile__title {
	font-weight: var(--ig-w-bold);
	font-size: var(--ig-fs-tile);
	line-height: 1.15;
}

/* Wer Bewegung abgestellt hat, bekommt keinen Zoom. */
@media (prefers-reduced-motion: reduce) {
	.ig-tile img,
	.ig-tile .ig-tile__bild,
	.ig-tile:hover img,
	.ig-tile:focus-visible img,
	.ig-tile:hover .ig-tile__bild,
	.ig-tile:focus-visible .ig-tile__bild {
		transition: none;
		transform: none;
	}
}

/* ===========================================================================
   Hilfsklassen für Elementor-Container

   Elementor lässt Kinder einer Flex-Reihe wachsen. Die Breiten-Steuerung des
   Widgets („Width: inline") wirkt nur in den alten Sections, nicht in
   Containern — deshalb diese Klasse, die per _css_classes gesetzt wird.
   =========================================================================== */

.elementor-element.ig-schrumpf {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto;
	max-width: 100%;
}

/* Container sind von Haus aus 100 % breit (--width). Das bricht jede Zeile um,
   in der ein Container neben einem Logo stehen soll. */
.e-con.ig-schrumpf,
.elementor-element.e-con.ig-schrumpf {
	--width: auto;
	width: auto;
}

/* Bilder füllen sonst die ganze Breite des Widgets und wirken dadurch
   eingerückt, obwohl die Grafik selbst schmal ist. */
.elementor-element.ig-schrumpf img {
	width: auto;
	max-width: 100%;
}

/* ===========================================================================
   Bausteine (siehe inc/bausteine.php)
   =========================================================================== */

.ig-raster {
	display: grid;
	grid-template-columns: repeat(var(--ig-spalten, 4), minmax(0, 1fr));
	gap: var(--ig-gutter);
}

@media (max-width: 1024px) {
	.ig-raster { grid-template-columns: repeat(min(var(--ig-spalten, 4), 3), minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.ig-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Platzhalterfläche, solange keine Bilder gepflegt sind. Bewusst als Schraffur
   und nicht als graue Fläche — so ist auf einen Blick klar, dass hier etwas fehlt. */
.ig-tile__bild--leer {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #101010 0 14px, #161616 14px 28px);
}

/* --- Kopfbereich einer Leistungsseite ----------------------------------- */

.ig-leistungskopf {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: calc(var(--ig-gutter) * 2);
	align-items: start;
}

@media (max-width: 1024px) {
	.ig-leistungskopf { grid-template-columns: minmax(0, 1fr); }
}

.ig-leistungskopf__haupt .ig-headline { margin: var(--ig-space-group) 0 0; }
.ig-leistungskopf__intro { max-width: 46ch; margin: var(--ig-space-head) 0 0; }

.ig-leistungskopf__seite { padding-top: 6px; }

.ig-zielgruppen {
	list-style: none;
	margin: var(--ig-space-group) 0 0;
	padding: 0;
}

.ig-zielgruppen li {
	border-top: 1px solid var(--ig-hairline);
	padding: 14px 0;
	margin: 0;
}

.ig-leistungskopf__kinder {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: var(--ig-space-head);
}

/* --- Faktenzeile, Gewerke, Bildstrecke ---------------------------------- */

.ig-fakten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: var(--ig-gutter);
	margin: 0;
}

.ig-fakten__eintrag {
	border-top: 1px solid var(--ig-hairline);
	padding-top: 14px;
}

.ig-fakten__eintrag dd { margin: 6px 0 0; }

.ig-gewerke {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--ig-gutter);
}

.ig-gewerke li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	border-top: 1px solid var(--ig-hairline);
	padding-top: 14px;
}

.ig-bildband {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--ig-gutter);
}

.ig-bildband img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ig-projektkopf .ig-headline { margin-top: var(--ig-space-group); }
.ig-projektkopf .ig-subline { margin: 10px 0 0; color: var(--ig-copy); max-width: 32ch; }

.ig-bildnachweis {
	margin: 18px 0 0;
	font-size: 0.8125rem;
	color: var(--ig-muted);
}

.ig-zweispalter {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: calc(var(--ig-gutter) * 2);
}

.ig-zweispalter .ig-copy { margin: 14px 0 0; }

.ig-eigenfertigung .ig-subline { margin: 14px 0 var(--ig-space-group); max-width: 20ch; }
.ig-eigenfertigung .ig-copy { max-width: 52ch; margin: 0; }

.ig-zitat { margin: 0; max-width: 60ch; }
.ig-zitat blockquote { margin: 0 0 var(--ig-space-group); }

/* Randloses Bildband */
.ig-band { width: 100%; aspect-ratio: 16 / 7; overflow: hidden; background: #111; }
.ig-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-band--leer {
	display: flex; align-items: center; justify-content: center;
	background: repeating-linear-gradient(45deg, #101010 0 14px, #161616 14px 28px);
}

/* Untertitel: höchstens zwei Zeilen, danach abgeschnitten. Die Agenturen
   führen sechs Unterpunkte — ungekürzt sprengt das jede Kachel. */
.ig-tile__sub {
	font-weight: var(--ig-w-light);
	font-size: 13px;
	line-height: 1.35;
	color: var(--ig-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Bühne --------------------------------------------------------------- */

.ig-buehne { position: relative; }

/* Der Verlauf liegt hier und nicht als Elementor-Overlay — so überlebt er
   jedes Update und lässt sich an einer Stelle ändern. */
.ig-buehne::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 70%);
	pointer-events: none;
}

.ig-buehne > * { position: relative; z-index: 2; }
.ig-buehne::before { z-index: 1; }
/* Das Shortcode-Widget mit der Bildebene wird selbst zur Fläche — sonst hat
   das absolut positionierte Bild keinen Bezugsrahmen mit Höhe. */
.ig-buehne > .elementor-widget-shortcode {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
}
.ig-buehne__text { max-width: 60%; }
.ig-buehne__neben { max-width: 34ch; }

@media (max-width: 1024px) {
	.ig-buehne__text { max-width: 100%; }
}

/* --- Kennzahlen ---------------------------------------------------------- */

.ig-zahlen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--ig-gutter);
	margin-top: var(--ig-space-head);
}

.ig-zahlen__eintrag { border-top: 1px solid var(--ig-hairline); padding-top: 18px; }

.ig-zahl {
	margin: 0 0 8px;
	font-weight: var(--ig-w-black);
	font-size: var(--ig-fs-plakativ);
	line-height: 1;
}

/* Offener Wert bleibt sichtbar unfertig — nicht als Zahl getarnt. */
.ig-zahl--offen { font-size: var(--ig-fs-subline); color: var(--ig-muted); }

/* ===========================================================================
   Bewegung — dezent, abschaltbar

   Die versteckende Regel hängt an `.ig-anim`, das erst von bewegung.js
   gesetzt wird. Ohne JavaScript ist deshalb alles sichtbar.
   =========================================================================== */

.ig-anim .ig-reveal {
	opacity: 0;
	transform: translateY(14px);
	will-change: opacity, transform;
}

.ig-anim .ig-reveal.ist-da {
	opacity: 1;
	transform: none;
	transition:
		opacity 700ms cubic-bezier(.22, .61, .36, 1),
		transform 700ms cubic-bezier(.22, .61, .36, 1);
}

/* --- Bühne: Bildebene, sehr langsamer Zoom ------------------------------ */

.ig-buehne__ebene {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

.ig-buehne__ebene img,
.ig-buehne__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 6 % über 24 Sekunden — man sieht es nicht, man spürt es. */
.ig-anim .ig-buehne__ebene img {
	animation: ig-langsam 24s ease-out forwards;
}

@keyframes ig-langsam {
	from { transform: scale(1); }
	to   { transform: scale(1.06); }
}

.ig-buehne__video {
	opacity: 0;
	transition: opacity 1200ms ease;
}

.ig-buehne__video.ist-da { opacity: 1; }

/* Wer Bewegung abgestellt hat, bekommt ein Standbild und sonst nichts. */
@media (prefers-reduced-motion: reduce) {
	.ig-reveal { opacity: 1 !important; transform: none !important; }
	.ig-buehne__ebene img { animation: none !important; }
	.ig-buehne__video { display: none; }
}

/* ===========================================================================
   Einwilligung

   Keine Überblendung der ganzen Seite, kein Sperrbildschirm: Die Website
   funktioniert ohne Entscheidung vollständig, also darf sie auch lesbar
   bleiben. Ablehnen und Einverstanden sind optisch gleichwertig — eine
   hervorgehobene Zustimmung wäre nach deutscher Rechtsprechung unwirksam.
   =========================================================================== */

.ig-einwilligung {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9000;
	padding: var(--ig-gutter);
	display: flex;
	justify-content: center;
}

.ig-einwilligung[hidden] { display: none; }

.ig-einwilligung__kasten {
	width: 100%;
	max-width: 760px;
	background: var(--ig-black);
	border: 1px solid rgba(255, 255, 255, 0.4);
	padding: 28px;
	max-height: calc(100vh - 2 * var(--ig-gutter));
	overflow-y: auto;
}

.ig-einwilligung__text { margin: 14px 0 0; max-width: 62ch; }

.ig-einwilligung__dienste { margin-top: var(--ig-space-group); }
.ig-einwilligung__dienste[hidden] { display: none; }

.ig-einwilligung__dienst {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	border-top: 1px solid var(--ig-hairline);
	padding: 14px 0;
	cursor: pointer;
}

.ig-einwilligung__dienst input {
	margin: 4px 0 0;
	width: 18px;
	height: 18px;
	accent-color: #fff;
	flex: 0 0 auto;
}

.ig-einwilligung__dienst > span { display: grid; gap: 4px; }
.ig-einwilligung__name { font-weight: var(--ig-w-bold); }

.ig-einwilligung__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: var(--ig-space-group);
}

/* Beide Knöpfe exakt gleich — gleiche Fläche, gleiche Farbe, gleiches Gewicht. */
.ig-einwilligung__knopf {
	flex: 1 1 200px;
	min-height: 48px;
	background: transparent;
	color: var(--ig-white);
	cursor: pointer;
	font-family: inherit;
}

.ig-einwilligung__knopf:hover {
	border-color: var(--ig-white);
	background: var(--ig-white);
	color: var(--ig-black);
}

.ig-einwilligung__fuss {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 18px;
}

.ig-einwilligung__klein {
	background: none;
	border: 0;
	padding: 6px 0;
	color: var(--ig-muted);
	font-family: inherit;
	font-size: 13px;
	font-weight: var(--ig-w-light);
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}

.ig-einwilligung__klein:hover { color: var(--ig-white); }
.ig-einwilligung__klein[hidden] { display: none; }

@media (max-width: 480px) {
	.ig-einwilligung__kasten { padding: 20px; }
	.ig-einwilligung__knopf { flex: 1 1 100%; }
}

/* ===========================================================================
   Hello Elementors Knopffarben stilllegen

   reset.css des Eltern-Themes setzt:
     button { background-color: #69727d }
     button:hover, button:focus, [type=submit]:focus { background-color: #c36 }

   #c36 ist Pink. Auf einer Seite, die laut Styleguide ausschließlich schwarz
   und weiß ist, blitzt die Farbe beim ersten Tastendruck auf — gefunden am
   „Ablehnen"-Knopf der Einwilligung, der beim Öffnen den Fokus bekommt.

   Die Regeln stehen bewusst auf Element-Ebene: Elementors eigene Knöpfe
   (.elementor-button) sind spezifischer und behalten ihre Gestaltung.
   =========================================================================== */

button,
[type="button"],
[type="submit"],
[type="reset"] {
	background-color: transparent;
	color: var(--ig-white);
	border-radius: 0;
}

button:hover,
button:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus,
[type="reset"]:hover,
[type="reset"]:focus {
	background-color: transparent;
	color: var(--ig-white);
}

/* Die Umkehrung bleibt der Entscheidung vorbehalten, nicht dem Eltern-Theme. */
.ig-einwilligung__knopf:hover,
.ig-einwilligung__knopf:focus-visible {
	background-color: var(--ig-white);
	color: var(--ig-black);
	border-color: var(--ig-white);
}

/* Der Dialog bekommt den Fokus programmatisch, damit kein Knopf hervorgehoben
   wirkt. Ein Fokusring um den ganzen Kasten wäre dann aber irreführend — die
   Knöpfe darin zeigen ihren eigenen. */
.ig-einwilligung__kasten:focus,
.ig-einwilligung__kasten:focus-visible {
	outline: none;
	box-shadow: none;
}

/* ===========================================================================
   Navigations-Overlay (Entwurf 04)
   =========================================================================== */

.ig-nav {
	position: fixed;
	inset: 0;
	z-index: 9500;
	background: var(--ig-black);
	overflow-y: auto;
	padding: 28px var(--ig-margin) var(--ig-space-section);
}

.ig-nav[hidden] { display: none; }

.ig-nav__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ig-gutter);
	margin-bottom: 28px;
}

.ig-nav__signet img { height: 44px; width: auto; display: block; }

.ig-nav__schliessen { min-height: 48px; padding: 0 22px; cursor: pointer; }
.ig-nav__schliessen:hover { background: var(--ig-white); color: var(--ig-black); border-color: var(--ig-white); }

.ig-nav__inhalt {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
	gap: calc(var(--ig-gutter) * 2);
	margin-top: var(--ig-space-head);
}

@media (max-width: 900px) {
	.ig-nav__inhalt { grid-template-columns: minmax(0, 1fr); }
}

.ig-nav__liste { list-style: none; margin: var(--ig-space-group) 0 0; padding: 0; }

/* Die Leistungen laufen über zwei Spalten, wie im Entwurf. */
.ig-nav__leistungen .ig-nav__liste {
	columns: 2;
	column-gap: calc(var(--ig-gutter) * 2);
}

@media (max-width: 700px) {
	.ig-nav__leistungen .ig-nav__liste { columns: 1; }
}

.ig-nav__leistungen .ig-nav__liste > li {
	break-inside: avoid;
	margin-bottom: 18px;
}

.ig-nav__eins {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 9px 0;
	font-weight: var(--ig-w-medium);
	font-size: 27px;
	line-height: 1.15;
}

.ig-nav__eins:hover { color: var(--ig-muted); }
.ig-nav__nr { color: var(--ig-muted); }

.ig-nav__kinder { list-style: none; margin: 0 0 0 44px; padding: 0; }

.ig-nav__kinder a {
	display: block;
	padding: 6px 0;
	font-weight: var(--ig-w-light);
	font-size: 16px;
	color: var(--ig-copy);
}

.ig-nav__kinder a:hover { color: var(--ig-white); }

.ig-nav__liste--schlicht .ig-nav__eins { gap: 0; }
.ig-nav__liste--klein a { display: block; padding: 6px 0; font-weight: var(--ig-w-light); color: var(--ig-muted); }
.ig-nav__liste--klein a:hover { color: var(--ig-white); }

.ig-nav__fuss {
	margin-top: var(--ig-space-section);
	border-top: 1px solid var(--ig-hairline);
	padding-top: var(--ig-space-head);
	max-width: 62ch;
}

.ig-nav__fuss .ig-copy { margin: 14px 0 0; }
.ig-nav__adresse { color: var(--ig-muted); }

/* ===========================================================================
   Gewerke — Bild und Text im Wechsel
   =========================================================================== */

.ig-gewerke-liste {
	display: grid;
	gap: var(--ig-space-section);
}

.ig-gewerk {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: calc(var(--ig-gutter) * 2);
	align-items: center;
}

/* Jedes zweite gespiegelt — das bricht die Gleichförmigkeit, ohne das Raster
   zu verlassen. */
.ig-gewerk--gedreht .ig-gewerk__bild { order: 2; }

@media (max-width: 860px) {
	.ig-gewerk { grid-template-columns: minmax(0, 1fr); gap: var(--ig-gutter); }
	.ig-gewerk--gedreht .ig-gewerk__bild { order: 0; }
}

.ig-gewerk__bild { aspect-ratio: 4 / 3; overflow: hidden; background: #111; }

.ig-gewerk__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 600ms ease;
}

.ig-gewerk:hover .ig-gewerk__bild img { transform: scale(1.03); }

.ig-gewerk__text .ig-subline { margin: 10px 0 var(--ig-space-group); }
.ig-gewerk__text .ig-copy { margin: 0 0 var(--ig-space-group); max-width: 46ch; }

.ig-gewerk__technik {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ig-gewerk__technik li {
	border-top: 1px solid var(--ig-hairline);
	padding: 11px 0;
	font-weight: var(--ig-w-light);
	font-size: 15px;
	color: var(--ig-copy);
}

@media (prefers-reduced-motion: reduce) {
	.ig-gewerk__bild img, .ig-gewerk:hover .ig-gewerk__bild img { transition: none; transform: none; }
}

/* ===========================================================================
   Muster — Akzentfläche aus eigenem Projektdetail (Styleguide °11/°12)
   =========================================================================== */

.ig-muster {
	height: var(--ig-muster-hoehe, 280px);
	overflow: hidden;
	background: #000;
}

.ig-muster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Stellenliste: zwei Spalten, Trennlinien statt Aufzählungspunkte */
.ig-stellen {
	list-style: none;
	margin: var(--ig-space-group) 0 0;
	padding: 0;
	columns: 2;
	column-gap: calc(var(--ig-gutter) * 2);
}

@media (max-width: 760px) { .ig-stellen { columns: 1; } }

.ig-stellen li {
	break-inside: avoid;
	border-top: 1px solid var(--ig-hairline);
	padding: 13px 0;
	font-size: 17px;
}

/* Nummerierte Liste im Fließtext — die Ziffer in Auszeichnungsschrift */
.elementor-widget-text-editor ol { counter-reset: ig; list-style: none; padding: 0; margin: var(--ig-space-group) 0 0; }
.elementor-widget-text-editor ol > li {
	counter-increment: ig;
	position: relative;
	border-top: 1px solid var(--ig-hairline);
	padding: 16px 0 16px 56px;
}
.elementor-widget-text-editor ol > li::before {
	content: "°0" counter(ig);
	position: absolute;
	left: 0;
	top: 20px;
	font-weight: var(--ig-w-black);
	font-size: 13px;
	letter-spacing: .18em;
	color: var(--ig-muted);
}

/* ===========================================================================
   Bewerbungsformular

   Eingabefelder sind Linien, keine Kästen — das Erscheinungsbild kennt keine
   Rahmen um Inhalte, nur Trennlinien. Fokus wird über die Linienstärke und
   die Farbe angezeigt, nicht über einen Rahmen.
   =========================================================================== */

.ig-bewerbung { max-width: 720px; }

.ig-bewerbung__topf {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ig-bewerbung__fortschritt {
	display: flex;
	gap: 18px;
	margin-bottom: var(--ig-space-head);
}

.ig-bewerbung__punkt {
	font-weight: var(--ig-w-black);
	font-size: 13px;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.22);
	border-top: 2px solid rgba(255, 255, 255, 0.14);
	padding-top: 12px;
	flex: 1;
	transition: color 300ms ease, border-color 300ms ease;
}

.ig-bewerbung__punkt.ist-da {
	color: var(--ig-white);
	border-top-color: var(--ig-white);
}

.ig-bewerbung__schritte { list-style: none; margin: 0; padding: 0; }
.ig-bewerbung__schritt[hidden] { display: none; }
.ig-bewerbung__schritt .ig-subline { margin: 10px 0 var(--ig-space-group); }
.ig-bewerbung__schritt > .ig-copy { margin: 0 0 var(--ig-space-head); max-width: 52ch; }

.ig-bewerbung__paar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--ig-gutter);
}

.ig-feld { display: block; margin-bottom: var(--ig-space-group); }

.ig-feld__label {
	display: block;
	font-weight: var(--ig-w-black);
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ig-muted);
	margin-bottom: 10px;
}

.ig-feld__label em {
	font-style: normal;
	font-weight: var(--ig-w-light);
	letter-spacing: 0.04em;
	text-transform: none;
}

.ig-feld input[type="text"],
.ig-feld input[type="email"],
.ig-feld input[type="tel"],
.ig-feld input[type="url"],
.ig-feld select,
.ig-feld textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 0;
	background: transparent;
	color: var(--ig-white);
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 0;
	font-family: inherit;
	font-size: 19px;
	font-weight: var(--ig-w-light);
	transition: border-color 200ms ease;
}

.ig-feld select { appearance: none; cursor: pointer; }
.ig-feld select option { background: #000; color: #fff; }
.ig-feld textarea { resize: vertical; line-height: 1.6; }

.ig-feld input:focus,
.ig-feld select:focus,
.ig-feld textarea:focus {
	outline: none;
	border-bottom-color: var(--ig-white);
	border-bottom-width: 2px;
}

.ig-feld input::placeholder,
.ig-feld textarea::placeholder { color: rgba(255, 255, 255, 0.3); }

/* Dateifelder: der Systemknopf lässt sich nicht gestalten, also bekommt er
   eine eigene Fläche statt eines halb umgestylten Originals. */
.ig-feld--datei input[type="file"] {
	width: 100%;
	min-height: 48px;
	color: var(--ig-copy);
	font-family: inherit;
	font-size: 15px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	padding: 12px 0;
}

.ig-feld--datei input[type="file"]::file-selector-button {
	margin-right: 16px;
	min-height: 44px;
	padding: 0 20px;
	background: transparent;
	color: var(--ig-white);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 0;
	font-family: inherit;
	font-weight: var(--ig-w-bold);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.ig-feld--datei input[type="file"]::file-selector-button:hover {
	background: var(--ig-white);
	color: var(--ig-black);
}

.ig-bewerbung__einwilligung {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	border-top: 1px solid var(--ig-hairline);
	padding-top: var(--ig-space-group);
	margin-bottom: var(--ig-space-head);
}

.ig-bewerbung__einwilligung input {
	width: 20px;
	height: 20px;
	margin-top: 3px;
	accent-color: #fff;
	flex: 0 0 auto;
}

.ig-bewerbung__steuerung {
	display: flex;
	gap: 14px;
	margin-top: var(--ig-space-head);
}

.ig-bewerbung__steuerung button[hidden] { display: none; }
.ig-bewerbung__steuerung .ig-btn { cursor: pointer; min-width: 160px; }

.ig-bewerbung__senden { cursor: pointer; }
.ig-bewerbung__hinweis { margin-top: var(--ig-space-group); color: var(--ig-muted); font-size: 15px; }

.ig-bewerbung__fehler {
	border-top: 2px solid var(--ig-white);
	padding-top: 14px;
	margin-bottom: var(--ig-space-head);
	font-weight: var(--ig-w-bold);
}

.ig-bewerbung__danke { max-width: 56ch; }
.ig-bewerbung__danke .ig-headline { margin: 14px 0 var(--ig-space-group); }

/* Ein Klick auf eine Stelle springt ins Formular */
.ig-stellen button {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	width: 100%;
}

.ig-stellen button:hover { color: var(--ig-muted); }

/* ===========================================================================
   Handlungsaufforderung
   =========================================================================== */

.ig-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ig-gutter) calc(var(--ig-gutter) * 1.5);
	border-top: 1px solid var(--ig-hairline);
	border-bottom: 1px solid var(--ig-hairline);
	padding: var(--ig-space-group) 0;
}

.ig-cta .ig-btn--primaer { cursor: pointer; }

.ig-cta__tel { display: grid; gap: 4px; }
.ig-cta__nummer { font-weight: var(--ig-w-medium); font-size: 24px; line-height: 1.1; }
.ig-cta__tel:hover .ig-cta__nummer { color: var(--ig-muted); }

.ig-cta__zusatz {
	flex: 1 1 260px;
	margin: 0;
	font-size: 15px;
	color: var(--ig-muted);
	max-width: 42ch;
}

/* ===========================================================================
   Ablauf
   =========================================================================== */

.ig-ablauf {
	list-style: none;
	margin: var(--ig-space-head) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--ig-gutter);
	counter-reset: none;
}

.ig-ablauf__schritt {
	border-top: 1px solid var(--ig-hairline);
	padding-top: 18px;
}

.ig-ablauf__name {
	margin: 10px 0 12px;
	font-weight: var(--ig-w-bold);
	font-size: 20px;
	line-height: 1.2;
}

.ig-ablauf__schritt .ig-copy { margin: 0; font-size: 16px; }

/* ===========================================================================
   Leistungsumfang
   =========================================================================== */

.ig-umfang {
	list-style: none;
	margin: var(--ig-space-head) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0 calc(var(--ig-gutter) * 2);
}

.ig-umfang li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	border-top: 1px solid var(--ig-hairline);
	padding: 14px 0;
}

.ig-umfang .ig-copy { margin: 0; }

/* ===========================================================================
   Anfrageformular
   =========================================================================== */

.ig-anfrage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: calc(var(--ig-gutter) * 2);
	align-items: start;
}

@media (max-width: 900px) {
	.ig-anfrage { grid-template-columns: minmax(0, 1fr); }
}

.ig-anfrage__titel { font-size: var(--ig-fs-subline); margin: 12px 0 var(--ig-space-group); }
.ig-anfrage__kopf .ig-copy { margin: 0; max-width: 40ch; }

.ig-anfrage__topf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ig-anfrage__paar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0 var(--ig-gutter);
}

.ig-anfrage__trenner {
	border-top: 1px solid var(--ig-hairline);
	padding-top: var(--ig-space-group);
	margin: var(--ig-space-group) 0 var(--ig-space-head);
}

.ig-anfrage__umfang { border: 0; padding: 0; margin: 0 0 var(--ig-space-group); }

.ig-anfrage__option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	cursor: pointer;
	font-weight: var(--ig-w-light);
	color: var(--ig-copy);
}

.ig-anfrage__option input { width: 18px; height: 18px; accent-color: #fff; }
.ig-anfrage__option:hover { color: var(--ig-white); }

.ig-anfrage__abschluss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ig-gutter);
	margin-top: var(--ig-space-head);
}

.ig-anfrage__abschluss .ig-btn { cursor: pointer; }
.ig-anfrage__direkt { margin: 0; font-size: 15px; }
.ig-anfrage__direkt span { color: var(--ig-muted); font-size: 14px; }

.ig-anfrage__danke { max-width: 56ch; }
.ig-anfrage__danke .ig-subline { margin: 12px 0 var(--ig-space-group); }

/* ===========================================================================
   Kopfzeile auf dem Telefon

   Die Maße stehen in den Container-Einstellungen (bau-01), nicht hier.
   Ein erster Versuch, Elementors Flex-Variablen per CSS zu überschreiben, hat
   den Kopf zweimal zerlegt — erst leer, dann angeschnitten. Hier bleibt nur,
   was Elementor nicht selbst kann.
   =========================================================================== */

@media (max-width: 767px) {
	.ig-kopf .elementor-menu-toggle {
		width: 44px;
		height: 44px;
		margin: 0;
		background: transparent;
	}

	.ig-kopf .elementor-button { white-space: nowrap; }
}

/* ===========================================================================
   Feinschliff Telefon
   =========================================================================== */

@media (max-width: 767px) {

	/* Auswahlfelder: 16 px ist die Grenze, unterhalb derer iOS beim Antippen
	   in die Seite hineinzoomt. Und es passt mehr Text ins Feld. */
	.ig-feld select,
	.ig-feld input,
	.ig-feld textarea {
		font-size: 16px;
	}

	.ig-feld select { padding-right: 24px; }

	/* Eine Kachel pro Zeile. Bei zweien wird der Platz oben links so schmal,
	   dass die Zeile über dem Bild abgeschnitten wird. */
	.ig-raster { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.ig-tile__fuss { left: 12px; right: 12px; bottom: 12px; }
	.ig-tile__num { left: 12px; top: 12px; right: 12px; }
	.ig-tile__sub { font-size: 12px; }

	.ig-filter { gap: 8px; }
	.ig-filter__knopf { padding: 8px 12px; font-size: 0.8125rem; }

	/* Kennzahlen und Ablauf untereinander statt in zu schmalen Spalten. */
	.ig-zahlen,
	.ig-ablauf,
	.ig-umfang,
	.ig-fakten { grid-template-columns: minmax(0, 1fr); }

	/* Die Handlungsaufforderung stapelt — Knopf zuerst, Nummer darunter. */
	.ig-cta { gap: 16px; }
	.ig-cta .ig-btn--primaer { width: 100%; }
	.ig-cta__nummer { font-size: 22px; }
}

/* ===========================================================================
   Projektfilter
   =========================================================================== */

.ig-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 var(--ig-space-head);
}

.ig-filter__knopf {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: transparent;
	color: var(--ig-copy);
	font: inherit;
	font-size: 0.875rem;
	font-weight: var(--ig-w-medium);
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.25s, color 0.25s, background-color 0.25s;
}

.ig-filter__knopf:hover,
.ig-filter__knopf:focus-visible {
	border-color: var(--ig-white);
	color: var(--ig-white);
	background: transparent;
}

.ig-filter__knopf.ist-aktiv {
	border-color: var(--ig-white);
	background: var(--ig-white);
	color: #000;
}

.ig-filter__zahl {
	font-size: 0.75rem;
	font-weight: var(--ig-w-light);
	opacity: 0.6;
}

.ig-tile__sub {
	display: block;
	margin-top: 4px;
	font-size: 0.875rem;
	font-weight: var(--ig-w-light);
	color: var(--ig-muted);
}

/* ===========================================================================
   Leistungsstruktur auf /leistungen/
   =========================================================================== */

.ig-struktur {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0;
	margin: var(--ig-space-head) 0 0;
}

.ig-struktur__feld {
	border-top: 1px solid var(--ig-hairline);
	padding: 28px var(--ig-gutter) 32px 0;
}

.ig-struktur__name {
	margin: 10px 0 0;
	font-size: 26px;
	font-weight: var(--ig-w-medium);
	line-height: 1.15;
}

.ig-struktur__name a {
	color: var(--ig-white);
	text-decoration: none;
}

.ig-struktur__name a:hover,
.ig-struktur__name a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ig-struktur__unter {
	margin: 8px 0 0;
	font-size: 15px;
	font-weight: var(--ig-w-light);
	color: var(--ig-muted);
	max-width: 28ch;
}

.ig-struktur__liste {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.ig-struktur__liste li {
	margin: 0 0 6px;
}

.ig-struktur__liste a {
	font-size: 16px;
	font-weight: var(--ig-w-light);
	color: var(--ig-copy);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s, color 0.25s;
}

.ig-struktur__liste a:hover,
.ig-struktur__liste a:focus-visible {
	color: var(--ig-white);
	border-bottom-color: var(--ig-white);
}

@media (max-width: 767px) {
	.ig-struktur { grid-template-columns: minmax(0, 1fr); }
	.ig-struktur__feld { padding-right: 0; }
}