/* ==========================================================================
   DRILLER HAUSTECHNIK – Corporate Design 2026 für das Theme „driller-haustechnik“
   CI-Ebene: wird nach design.css geladen (inc/setup.php, Priorität 100) und
   stellt die Website auf das neue CI um – Petrol/Lime/Mint, Outfit + IBM Plex
   Sans, Sechseck mit Dach. Freigegeben von Ralph Driller am 01.10.2026 nach
   den Mockups; Gestaltungsregeln: GitLab Driller/dh-corporate-design.

   Aufbau
     1  Schriften (fonts.css)
     2  Variablen (alte Namen, neue Werte)
     3  Basis, Typografie, Kicker
     4  Buttons, Chips, Abzeichen
     5  Topbar, Header, Navigation, Megamenü
     6  Hero
     7  Abschnitte und Bausteine
     8  Footer
     9  Mobil
   ========================================================================== */

/* 1  Schriften: assets/fonts/fonts.css (Outfit, IBM Plex Sans) ================ */

/* 2  Variablen ============================================================ */

:root {
	/* Markenfarben CI 2026 */
	--ci-petrol: #0D4F5C;
	--ci-petrol-600: #0A4250;
	--ci-petrol-900: #083640;
	--ci-petrol-300: #1C6574;
	--ci-lime: #A8D12E;
	--ci-lime-600: #96BD22;
	--ci-lime-hell: #E4F0C2;
	--ci-mint: #E6F1EF;
	--ci-mint-200: #CFE0DD;
	--ci-graupetrol: #557177;
	--ci-tinte: #0E2A30;
	--ci-auf-dunkel: #A9C6C8;

	/* Alte Variablen des Themes → CI-Werte */
	--dh-navy: var(--ci-petrol);
	--dh-navy-2: var(--ci-petrol-600);
	--dh-navy-3: var(--ci-petrol-900);
	--dh-blau: var(--ci-petrol);
	--dh-blau-dunkel: var(--ci-petrol-600);
	--dh-blau-hell: var(--ci-lime);
	--dh-blau-zart: var(--ci-auf-dunkel);
	--dh-blau-flaeche: var(--ci-mint);
	--dh-orange: var(--ci-lime);
	--dh-orange-hover: var(--ci-lime-600);
	--dh-orange-text: var(--ci-petrol);
	--dh-gruen: var(--ci-petrol);
	--dh-gruen-2: var(--ci-petrol-300);
	--dh-gruen-3: var(--ci-lime);
	--dh-gruen-4: var(--ci-lime-hell);
	--dh-gruen-flaeche: var(--ci-mint);
	--dh-text: var(--ci-tinte);
	--dh-text-2: var(--ci-graupetrol);
	--dh-grau: var(--ci-mint);
	--dh-linie: var(--ci-mint-200);
	--dh-linie-2: #DCE9E6;
	--dh-linie-3: #A9C6C8;
	--dh-warm: var(--ci-mint);

	--dh-schrift-titel: "Outfit", "Segoe UI", system-ui, sans-serif;
	--dh-schrift-text: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

	--dh-radius-s: 8px;
	--dh-radius-m: 12px;
	--dh-radius-l: 20px;
	--dh-schatten: 0 1px 2px rgba(14, 42, 48, 0.06), 0 4px 16px rgba(14, 42, 48, 0.06);
	--dh-schatten-hover: 0 12px 32px rgba(14, 42, 48, 0.12);
	--dh-schatten-karte: 0 16px 48px rgba(14, 42, 48, 0.14);

	--dh-raster-hell: none;
	--dh-raster-dunkel: none;

	/* Solvior-Variablen (Seiten ohne Driller-Widgets) */
	--tj-color-theme-primary: var(--ci-petrol);
	--tj-color-theme-dark: var(--ci-petrol);
	--tj-color-heading-primary: var(--ci-petrol);
	--tj-color-text-body: var(--ci-tinte);
	--tj-color-text-body-2: var(--ci-graupetrol);
	--tj-color-theme-bg: var(--ci-mint);
	--tj-color-theme-bg-2: var(--ci-mint);
	--tj-color-border-2: var(--ci-mint-200);
	--tj-ff-heading: var(--dh-schrift-titel);
	--tj-ff-body: var(--dh-schrift-text);
	--dr-color-accent: var(--ci-lime);
	--dr-color-accent-hover: var(--ci-lime-600);
	--dr-color-accent-text: var(--ci-petrol);
	--dr-color-success: var(--ci-petrol);
	--dr-color-success-bg: var(--ci-mint);
	--dr-color-warm-bg: var(--ci-mint);
}

/* 3  Basis, Typografie, Kicker ============================================ */

body {
	font-family: var(--dh-schrift-text);
	color: var(--ci-tinte);
}

::selection {
	background: var(--ci-lime);
	color: var(--ci-petrol-900);
}

.dh-titel,
.dh-hero__titel,
.dh-band__titel,
h1, h2, h3 {
	letter-spacing: -0.01em;
}

/* Kicker: Versalien mit Lime-Dach statt Linie */
.dh-kicker,
.dh-hero__label,
.dh-band__kicker,
.dh-wege__kicker,
.dh-infobox__kicker {
	gap: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
}

.dh-kicker::before,
.dh-hero__label::before {
	width: 18px;
	height: 9px;
	background: url("../img/ci/dach.svg") center / contain no-repeat;
}

.dh-kopf--zentriert .dh-kicker::after {
	display: none;
}

.dh-s--navy .dh-kicker,
.dh-s--navy-raster .dh-kicker {
	color: var(--ci-lime);
}

.dh-s--warm .dh-kicker {
	color: var(--ci-petrol);
}

.dh-textlink,
.dh-karte__link {
	color: var(--ci-petrol);
}

/* 4  Buttons, Chips, Abzeichen ============================================ */

.dh-btn {
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* Lime = Haupt-Handlung, Schrift Tiefpetrol (7,3 : 1) */
.dh-btn--handlung,
.dh-btn--handlung:visited {
	background: var(--ci-lime);
	color: var(--ci-petrol-900);
	font-weight: 600;
}

.dh-btn--handlung:hover {
	background: var(--ci-lime-600);
	color: var(--ci-petrol-900);
	box-shadow: 0 8px 24px rgba(150, 189, 34, 0.35);
}

.dh-btn--primaer,
.dh-btn--primaer:visited {
	background: var(--ci-petrol);
	color: #fff;
}

.dh-btn--sekundaer,
.dh-btn--sekundaer:visited {
	border-color: var(--ci-petrol);
	color: var(--ci-petrol);
}

.dh-btn--hell,
.dh-btn--hell:visited {
	background: #fff;
	color: var(--ci-petrol);
}

.dh-chip {
	border-radius: 999px;
	background: var(--ci-mint);
	color: var(--ci-petrol);
}

.dh-abzeichen {
	border-radius: 999px;
	font-family: var(--dh-schrift-titel);
	font-weight: 600;
}

.dh-abzeichen--gruen { background: var(--ci-lime); color: var(--ci-petrol-900); }
.dh-abzeichen--blau { background: var(--ci-mint); color: var(--ci-petrol); }
.dh-abzeichen--gelb { background: #fff; color: var(--ci-graupetrol); box-shadow: inset 0 0 0 1px var(--ci-graupetrol); }

.dh-s--navy .dh-abzeichen--blau,
.dh-s--navy-raster .dh-abzeichen--blau {
	background: transparent;
	color: var(--ci-lime);
	box-shadow: inset 0 0 0 1px var(--ci-lime);
}

/* 5  Topbar, Header, Navigation, Megamenü ================================ */

.dh-topbar {
	background: var(--ci-petrol-900);
	color: var(--ci-auf-dunkel);
}

.dh-topbar .dh-icon {
	color: var(--ci-lime);
}

.dh-header {
	background: var(--ci-petrol);
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dh-header.is-gescrollt {
	box-shadow: 0 8px 24px rgba(8, 54, 64, 0.3);
}

.dh-logo__voll {
	height: 44px;
}

.dh-nav__link,
.dh-nav__umschalter {
	color: #fff;
}

.dh-nav__link:hover,
.dh-nav__punkt:hover > .dh-nav__link,
.dh-nav__punkt.is-aktiv > .dh-nav__link,
.dh-nav__punkt:hover > .dh-nav__umschalter {
	color: var(--ci-lime);
}

.dh-nav__punkt.is-aktiv > .dh-nav__link {
	box-shadow: inset 0 -3px 0 var(--ci-lime);
}

.dh-header__telefon {
	color: #fff;
}

.dh-header__telefon-icon {
	background: rgba(255, 255, 255, 0.1);
	color: var(--ci-lime);
}

.dh-header__telefon-text small {
	color: var(--ci-auf-dunkel);
}

.dh-header__menueknopf {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

/* Kopf-Button auf Petrol: Weiß. Lime bleibt der einen Haupt-Handlung im Inhalt vorbehalten. */
.dh-header .dh-btn--primaer,
.dh-header .dh-btn--primaer:visited {
	background: #fff;
	color: var(--ci-petrol);
}

.dh-header .dh-btn--primaer:hover {
	background: var(--ci-lime);
	color: var(--ci-petrol-900);
}

.dh-mega__kopf {
	color: var(--ci-petrol);
}

.dh-mega__kopf .dh-icon {
	color: var(--ci-petrol);
}

/* 6  Hero ================================================================= */

.dh-hero {
	--ci-hex-b: 500px;
	--ci-hex-r: max(var(--dh-rand), calc((100% - var(--dh-breite)) / 2));
	--ci-hex-o: 104px;
	--ci-ring-plus: 280px;
	background: var(--ci-petrol);
}

/* feiner Sechseck-Ring hinter dem Bild (wie Visitenkarte), mittig zum Sechseck */
.dh-hero::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: calc(var(--ci-hex-o) + var(--ci-hex-b) * 0.5774 - (var(--ci-hex-b) + var(--ci-ring-plus)) / 2);
	right: calc(var(--ci-hex-r) - var(--ci-ring-plus) / 2);
	width: calc(var(--ci-hex-b) + var(--ci-ring-plus));
	aspect-ratio: 1;
	background: url("../img/ci/ring_fein.svg") center / contain no-repeat;
	pointer-events: none;
}

.dh-hero__folie::after {
	display: none;
}

.dh-hero__bild {
	inset: auto;
	top: var(--ci-hex-o);
	right: var(--ci-hex-r);
	width: var(--ci-hex-b);
	height: calc(var(--ci-hex-b) * 1.1547);
	-webkit-mask: url("../img/ci/hexmaske.svg") center / 100% 100% no-repeat;
	mask: url("../img/ci/hexmaske.svg") center / 100% 100% no-repeat;
}

.dh-hero__bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Reiter nur in der Textspalte, das Sechseck reicht bis unten */
.dh-hero__steuerung {
	left: var(--ci-hex-r);
	width: calc(min(100% - 2 * var(--dh-rand), var(--dh-breite)) - var(--ci-hex-b) - 72px);
	transform: none;
}

.dh-hero__reiter-text {
	display: none;
}

/* Lime-Dach über dem Sechseck */
.dh-hero__folie::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: calc(var(--ci-hex-o) - var(--ci-hex-b) * 0.18); /* Abstand Dach – Bild wie im Druck */
	right: calc(var(--ci-hex-r) + var(--ci-hex-b) * 0.06);
	width: calc(var(--ci-hex-b) * 0.88);
	aspect-ratio: 100 / 40;
	background: url("../img/ci/dach.svg") center / contain no-repeat;
}

.dh-hero__h1 {
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(8, 54, 64, 0.55);
	font-weight: 600;
	letter-spacing: 0.12em;
}

.dh-hero__punkt {
	background: var(--ci-lime);
}

.dh-hero__inhalt {
	top: 176px;
}

.dh-hero__label {
	color: var(--ci-lime);
	font-weight: 600;
}

.dh-hero__titel {
	max-width: 640px;
	font-size: clamp(38px, 2.6vw + 18px, 58px);
	font-weight: 600;
	line-height: 1.06;
}

.dh-hero__titel span:last-child {
	color: var(--ci-lime);
}

.dh-hero__text {
	max-width: 560px;
	color: rgba(255, 255, 255, 0.86);
}

.dh-hero__fortschritt {
	background: rgba(255, 255, 255, 0.18);
}

.dh-hero__fortschritt span {
	background: var(--ci-lime);
}

.dh-hero__reiter-knopf.is-aktiv .dh-hero__reiter-nr {
	color: var(--ci-lime);
}

.dh-hero__knopf {
	background: rgba(8, 54, 64, 0.4);
}

/* 7  Abschnitte und Bausteine ============================================= */

/* Dunkle Abschnitte: Petrol mit Sechseck-Ring statt Raster (oben rechts, neben der Überschrift) */
.dh-s--navy-raster {
	background-color: var(--ci-petrol);
	background-image: url("../img/ci/ring_petrol.svg");
	background-size: 440px 440px;
	background-position: right -120px top -36px;
	background-repeat: no-repeat;
}

.dh-band--navy {
	background-color: var(--ci-petrol);
	background-image: none;
}

.dh-s--navy .dh-karte,
.dh-s--navy-raster .dh-karte {
	border-color: rgba(255, 255, 255, 0.14);
	background-color: var(--ci-petrol-600);
}

.dh-s--navy,
.dh-s--navy-raster {
	color: rgba(255, 255, 255, 0.82);
}

/* Helle Abschnitte mit Raster: Mint ohne Raster */
.dh-s--grau-raster {
	background-color: var(--ci-mint);
	background-image: none;
}

/* Seitenkopf ohne Bild: Sechseck-Ring mit Dach anstelle des Bildes */
.dh-seitenkopf--ohne-bild {
	background-image: url("../img/ci/ring_mint.svg");
	background-size: 400px 400px;
	background-position: right max(var(--dh-rand), calc((100% - var(--dh-breite)) / 2 + 40px)) center;
	background-repeat: no-repeat;
}

/* Vertrauensleiste */
.dh-trust__icon {
	color: var(--ci-petrol);
}

/* Karten: Symbol im Sechseck */
.dh-karte {
	border-color: var(--ci-mint-200);
}

.dh-karte__icon {
	border-radius: 0;
	background: url("../img/ci/hexkontur.svg") center / contain no-repeat;
	color: var(--ci-petrol);
}

.dh-karte--kontakt {
	background: var(--ci-petrol);
	background-image: url("../img/ci/ring_petrol_ohne_dach.svg");
	background-size: 300px;
	background-position: right -150px bottom -150px;
	background-repeat: no-repeat;
}

.dh-karte--kontakt .dh-karte__icon {
	background: url("../img/ci/hexkontur_lime.svg") center / contain no-repeat;
	color: var(--ci-lime);
}

.dh-karte--kontakt .dh-karte__telefon {
	color: var(--ci-lime);
}

.dh-s--navy .dh-karte__icon,
.dh-s--navy-raster .dh-karte__icon {
	background: url("../img/ci/hexkontur_lime.svg") center / contain no-repeat;
	color: var(--ci-lime);
}

/* Zwei Wege: dunkle Karte in Petrol mit Ring */
.dh-wege__karte--dunkel {
	border-color: var(--ci-petrol);
	background-color: var(--ci-petrol);
	background-image: url("../img/ci/ring_petrol_ohne_dach.svg");
	background-size: 380px;
	background-position: right -190px bottom -200px;
	background-repeat: no-repeat;
}

/* Förderung: Balken in Markenfarben */
.dh-foerder__segment--1, .dh-foerder__farbe--1 { background: var(--ci-petrol); color: #fff; }
.dh-foerder__segment--2, .dh-foerder__farbe--2 { background: var(--ci-petrol-300); color: #fff; }
.dh-foerder__segment--3, .dh-foerder__farbe--3 { background: var(--ci-lime); color: var(--ci-petrol-900); }
.dh-foerder__segment--4, .dh-foerder__farbe--4 { background: var(--ci-lime-hell); color: var(--ci-petrol-900); }
.dh-foerder__segment--rest { background: var(--ci-mint-200); color: var(--ci-petrol); }

/* Ablauf: Nummern im Sechseck */
.dh-ablauf__nummer {
	border: 0;
	border-radius: 0;
	background: url("../img/ci/hexkontur.svg") center / contain no-repeat;
	color: var(--ci-petrol);
	font-family: var(--dh-schrift-titel);
	font-weight: 600;
}

.dh-ablauf__schritt--letzter .dh-ablauf__nummer {
	background: url("../img/ci/hexvoll.svg") center / contain no-repeat;
	color: var(--ci-lime);
}

.dh-ablauf--karten .dh-ablauf__nummer {
	background: none;
	color: var(--ci-graupetrol);
}

.dh-ablauf--karten .dh-ablauf__schritt--letzter {
	background-color: var(--ci-petrol);
}

.dh-ablauf--karten .dh-ablauf__schritt--letzter .dh-ablauf__nummer {
	background: none;
	color: var(--ci-lime);
}

/* Warum Driller */
.dh-warum__fakt {
	border-color: rgba(255, 255, 255, 0.16);
	background: var(--ci-petrol-600);
	box-shadow: inset 0 3px 0 var(--ci-lime);
}

.dh-warum__fakt--offen {
	box-shadow: none;
}

/* FAQ */
.dh-faq__zeichen {
	background: var(--ci-mint);
	color: var(--ci-petrol);
}

.dh-faq__eintrag[open] .dh-faq__zeichen {
	background: var(--ci-petrol);
	color: var(--ci-lime);
}

/* Karriere-Band: Lime wie „Mitarbeiter gesucht!“ auf Fahrzeug und Flyer */
.dh-band--blau {
	background-color: var(--ci-lime);
	background-image: none;
	color: var(--ci-petrol-900);
}

.dh-band--blau .dh-band__kicker,
.dh-band--blau .dh-band__titel,
.dh-band--blau .dh-band__beschreibung {
	color: var(--ci-petrol-900);
}

.dh-band--blau .dh-band__kicker::before {
	background-image: url("../img/ci/dach_petrol.svg");
}

.dh-band--blau .dh-btn--hell,
.dh-band--blau .dh-btn--hell:visited {
	background: var(--ci-petrol);
	color: #fff;
}

.dh-band--blau .dh-btn--hell:hover {
	background: var(--ci-petrol-900);
	color: #fff;
}

/* Kontaktwege */
.dh-kontaktweg--hervor {
	border: 1.5px solid var(--ci-petrol);
	background: var(--ci-mint);
}

.dh-kontaktweg__icon {
	border-radius: 0;
	background: url("../img/ci/hexkontur.svg") center / contain no-repeat;
	color: var(--ci-petrol);
}

.dh-kontaktweg--hervor .dh-kontaktweg__icon {
	background: url("../img/ci/hexvoll.svg") center / contain no-repeat;
	color: var(--ci-lime);
}

/* Ratgeber: Platzhalter ohne Bild in Mint mit Sechseck */
.dh-artikel__bild,
.dh-beitragskarte__bild {
	background: var(--ci-mint) url("../img/ci/ring_mint.svg") center / 96px no-repeat;
}

/* Seitenkopf und Eckdaten */
.dh-seitenkopf__siegel {
	box-shadow: 0 12px 32px rgba(14, 42, 48, 0.12);
}

.dh-eckdaten__wert {
	font-weight: 600;
}

/* Infobox: Lime-Kante */
.dh-infobox {
	box-shadow: inset 4px 0 0 var(--ci-lime);
}

/* Rechner / Maßlinie */
.dh-masslinie__linie::before {
	background: var(--ci-mint-200);
}

.dh-masslinie__linie i:nth-child(2) {
	background: var(--ci-lime);
}

/* Pflichtfeld-Stern: Petrol statt Akzentfarbe (Lime auf Weiß ist nicht lesbar) */
.dh-feld__pflicht {
	color: var(--ci-petrol);
}

/* 8  Footer =============================================================== */

.dh-fuss {
	background: var(--ci-petrol-900);
	color: var(--ci-auf-dunkel);
}

.dh-fuss .dh-logo--hell .dh-logo__voll {
	height: 46px;
	padding: 0;
	border-radius: 0;
	background: none;
}

.dh-fuss__titel {
	color: #fff;
}

.dh-fuss a:hover {
	color: var(--ci-lime);
}

.dh-fuss__claim {
	color: var(--ci-lime);
}

.dh-fuss .dh-fuss__kontakt .dh-btn--primaer,
.dh-fuss .dh-fuss__kontakt .dh-btn--primaer:visited {
	background: #fff;
	color: var(--ci-petrol);
}

.dh-fuss .dh-fuss__kontakt .dh-btn--primaer:hover {
	background: var(--ci-lime);
	color: var(--ci-petrol-900);
}

.dh-fuss__unten {
	border-top-color: var(--ci-petrol-300);
}

.dh-ci-aufgabe {
	margin: 18px 0 0;
	font-family: var(--dh-schrift-titel);
	line-height: 1.5;
}

.dh-ci-aufgabe strong {
	display: block;
	color: var(--ci-lime);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.dh-ci-aufgabe span {
	color: #fff;
}

/* 9  Mobil ================================================================ */

@media (max-width: 992px) {
	.dh-hero {
		--ci-hex-b: 380px;
	}
}

@media (max-width: 767px) {
	.dh-header__telefon-icon {
		background: rgba(255, 255, 255, 0.1);
		color: #fff;
	}

	.dh-hero {
		--ci-hex-b: 200px;
		--ci-hex-o: 94px;
		--ci-hex-r: calc(50% - var(--ci-hex-b) / 2);
		--ci-ring-plus: 130px;
		min-height: 700px;
	}

	.dh-hero__inhalt {
		top: auto;
		bottom: 76px;
	}

	.dh-hero__steuerung {
		left: 50%;
		width: min(100% - 2 * var(--dh-rand), var(--dh-breite));
		transform: translateX(-50%);
	}

	.dh-hero__kopfzeile {
		text-align: center;
	}

	.dh-hero__titel {
		font-size: 34px;
	}

	/* Mobil trägt die Sticky-Leiste die Lime-Handlung, der Hero-Button ist weiß (Regel des Themes) */
	.dh-hero__knoepfe .dh-btn--handlung,
	.dh-hero__knoepfe .dh-btn--handlung:visited {
		background: #fff;
		color: var(--ci-petrol);
	}

	.dh-s--navy-raster {
		background-size: 300px 300px;
		background-position: right -150px top -24px;
	}

	.dh-seitenkopf--ohne-bild {
		background-size: 260px 260px;
		background-position: right -110px top 24px;
	}

}