/*
Theme Name:   Thalhammer
Theme URI:    https://thalhammer-entruempelung.de/
Author:       ITSB Deutschland UG
Author URI:   https://itsb-deutschland.de/
Description:  Individuelles Theme für Thalhammer Entrümpelung & Dienstleistungen, München. Helles, handwerklich-sachliches Design aus den Formen des Firmenlogos (Winkel und Pfeile) – ohne externe Schriften oder Skripte (DSGVO-freundlich). Inhalte werden über den Customizer gepflegt, Logos von Partnern und Referenzen über „Logos“ im Admin-Menü.
Version:      1.3.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  thalhammer
*/

/* ==========================================================================
   1. Design-Tokens
   Farben aus dem Logo: Blau als Hauptfarbe, Orange nur als Akzent.
   Formen aus dem Logo: rechte Winkel, Pfeile, Großbuchstaben.
   ========================================================================== */
:root {
	--c-blue: #0048ac;
	--c-blue-dark: #00377f;
	--c-blue-tint: #e7edf7;
	--c-orange: #e6611a;
	--c-ink: #1e2328;
	--c-muted: #5d636b;
	--c-paper: #f6f4ef;
	--c-paper-dark: #ece8df;
	--c-line: #dcd7cc;
	--c-white: #fff;

	--font: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	--font-display: "Arial Narrow", "Helvetica Neue Condensed", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
	--container: 1200px;
	--gutter: clamp(16px, 4vw, 40px);
	--section: clamp(64px, 9vw, 120px);
	--header-h: 84px;
	--bracket: 6px;
}

/* ==========================================================================
   2. Basis
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.65;
	color: var(--c-ink);
	background: var(--c-paper);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip; /* Einfahr-Animationen dürfen keinen horizontalen Scroll erzeugen. */
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--c-blue); text-underline-offset: 3px; }
a:hover { color: var(--c-blue-dark); }
:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 2px; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--c-ink);
	margin: 0 0 .55em;
}
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.2rem; letter-spacing: .03em; }
p { margin: 0 0 1em; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto; z-index: 1000;
	top: 8px; left: 8px; padding: 10px 16px; background: var(--c-white); color: var(--c-ink);
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--white { background: var(--c-white); }
.section--blue { background: var(--c-blue); color: #dbe5f5; }
.section--blue h2, .section--blue h3 { color: var(--c-white); }

/* Abschnittstitel mit Logo-Winkel links oben */
.heading {
	position: relative;
	padding: 18px 0 0 26px;
	margin-bottom: clamp(32px, 5vw, 56px);
	max-width: 760px;
}
.heading::before {
	content: ""; position: absolute; left: 0; top: 0;
	width: 64px; height: 64px;
	border-top: var(--bracket) solid var(--c-orange);
	border-left: var(--bracket) solid var(--c-orange);
}
.heading h2 { margin-bottom: 14px; }
.heading p { font-size: 1.12rem; color: var(--c-muted); margin: 0; }
.section--blue .heading::before { border-color: var(--c-white); }
.section--blue .heading p { color: #c9d7ef; }

/* Pfeil-Aufzählung (aus der Bildmarke) */
.chev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.chev-list li { position: relative; padding-left: 30px; }
.chev-list li::before {
	content: ""; position: absolute; left: 0; top: .42em;
	width: 14px; height: 12px; background: var(--c-orange);
	clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%);
}

/* ==========================================================================
   3. Buttons – eckig, Blau als Hauptfarbe
   ========================================================================== */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 12px 22px;
	font: 700 .9rem/1.2 var(--font); letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
	border: 2px solid transparent; border-radius: 0;
	cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--c-blue); color: var(--c-white); }
.btn--primary:hover { background: var(--c-blue-dark); color: var(--c-white); }
.btn--line { border-color: var(--c-ink); color: var(--c-ink); background: transparent; }
.btn--line:hover { background: var(--c-ink); color: var(--c-white); }
.btn--white { background: var(--c-white); color: var(--c-blue); }
.btn--white:hover { background: var(--c-paper); color: var(--c-blue-dark); }
.btn--block { width: 100%; }

/* ==========================================================================
   4. Kopfbereich – hell, Telefonnummer prominent
   ========================================================================== */
.topbar { background: var(--c-paper-dark); color: var(--c-muted); font-size: .85rem; border-bottom: 1px solid var(--c-line); }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.topbar a { color: var(--c-ink); text-decoration: none; }
.topbar a:hover { color: var(--c-blue); }
.topbar__links { display: flex; gap: 24px; }
.topbar__links a, .topbar__links span { display: inline-flex; align-items: center; gap: 7px; }
.topbar svg { width: 15px; height: 15px; color: var(--c-blue); }
@media (max-width: 860px) { .topbar { display: none; } }

.site-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--c-white);
	border-bottom: 1px solid var(--c-line);
	transition: box-shadow .2s;
}
.site-header.is-scrolled { box-shadow: 0 6px 18px -12px rgba(30, 35, 40, .35); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

.site-header__inner { display: flex; align-items: center; gap: 28px; min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--c-ink); flex: none; }
.brand__mark { width: 54px; height: auto; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; font-family: var(--font); }
.brand__name { font-size: 1.4rem; font-weight: 700; letter-spacing: .14em; color: var(--c-ink); }
.brand__claim { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); margin-top: 5px; }
.brand--light .brand__name { color: var(--c-white); }
.brand--light .brand__claim { color: #bcd0ee; }
.custom-logo-link img { max-height: 60px; width: auto; }

.main-nav { margin-left: auto; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.main-nav a {
	display: block; padding: 10px 11px; white-space: nowrap;
	color: var(--c-ink); font-weight: 700; font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
	border-bottom: 3px solid transparent;
}
.main-nav a:hover, .main-nav .current-menu-item > a, .main-nav a.is-active { color: var(--c-blue); border-bottom-color: var(--c-orange); }
.main-nav .sub-menu { display: none; }

.header-phone {
	flex: none; display: flex; align-items: center; gap: 12px;
	padding-left: 24px; border-left: 1px solid var(--c-line);
	text-decoration: none; color: var(--c-ink);
}
.header-phone__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--c-blue); color: var(--c-white); }
.header-phone__icon svg { width: 20px; height: 20px; }
.header-phone small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.header-phone strong { display: block; font-size: 1.15rem; letter-spacing: .02em; line-height: 1.2; }
.header-phone:hover { color: var(--c-blue); }

.nav-toggle {
	display: none; margin-left: auto;
	width: 46px; height: 46px; padding: 0; align-items: center; justify-content: center;
	border: 2px solid var(--c-ink); background: var(--c-white); color: var(--c-ink); cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-open .nav-toggle .icon-close { display: block; }
.nav-open .nav-toggle .icon-menu { display: none; }

/* Zwischen Desktop und Tablet nur das Telefon-Symbol zeigen (Nummer bleibt für Screenreader). */
@media (min-width: 961px) and (max-width: 1319px) {
	.header-phone { padding-left: 16px; }
	.header-phone__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 960px) { .header-phone { margin-left: auto; order: 2; } .nav-toggle { margin-left: 0; order: 3; } }
@media (max-width: 760px) { .header-phone { display: none; } .nav-toggle { margin-left: auto; } }
@media (max-width: 960px) {
	.nav-toggle { display: inline-flex; }
	.main-nav {
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--c-white); border-bottom: 4px solid var(--c-blue);
		display: none; padding: 4px var(--gutter) 16px;
	}
	.nav-open .main-nav { display: block; }
	.main-nav ul { flex-direction: column; }
	.main-nav a { padding: 15px 4px; border-bottom: 1px solid var(--c-line); font-size: .9rem; }
	.main-nav .sub-menu { display: block; padding-left: 16px; }
}
@media (max-width: 400px) {
	.brand__mark { width: 42px; }
	.brand__name { font-size: 1.15rem; }
	.brand__claim { font-size: .58rem; letter-spacing: .08em; }
}

/* ==========================================================================
   5. Hero – hell, Projektfoto im Logo-Rahmen
   ========================================================================== */
.hero { background: var(--c-white); padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 104px); overflow: hidden; }
.hero .container { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 84px); align-items: center; }
.hero__kicker { font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-blue); margin-bottom: 18px; }
.hero h1 { margin-bottom: 24px; }
.hero h1 em { font-style: normal; color: var(--c-blue); }
.hero__text { font-size: 1.15rem; color: var(--c-muted); max-width: 560px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .chev-list { margin-top: 32px; grid-template-columns: repeat(2, max-content); gap: 10px 32px; font-weight: 600; }

/* Bildrahmen mit den Winkeln aus dem Logo (Orange oben links, Blau unten rechts) */
.frame { position: relative; padding: 22px; }
.frame::before, .frame::after { content: ""; position: absolute; width: 42%; height: 46%; pointer-events: none; }
.frame::before { left: 0; top: 0; border-top: 12px solid var(--c-orange); border-left: 12px solid var(--c-orange); }
.frame::after { right: 0; bottom: 0; border-bottom: 12px solid var(--c-blue); border-right: 12px solid var(--c-blue); }
.frame img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; position: relative; z-index: 1; }
.frame__fallback {
	position: relative; z-index: 1; aspect-ratio: 4 / 3.4;
	display: flex; flex-direction: column; justify-content: center; gap: 28px;
	padding: 12%; background: var(--c-paper);
}
.frame__fallback svg { width: 60%; }
.frame__fallback p { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.5rem); text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; }

@media (max-width: 900px) {
	.hero .container { grid-template-columns: 1fr; }
	.hero__media { max-width: 560px; }
}
@media (max-width: 520px) {
	.hero .chev-list { grid-template-columns: 1fr; }
	.hero__actions .btn { width: 100%; }
}

/* Faktenleiste */
.facts { background: var(--c-blue); color: var(--c-white); }
.facts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts li { padding: 26px 24px; border-left: 1px solid rgba(255, 255, 255, .18); }
.facts li:first-child { border-left: 0; padding-left: 0; }
.facts strong { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; }
.facts li > span { display: block; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: #c9d7ef; margin-top: 6px; }
.facts .stars { display: inline-flex; gap: 2px; color: var(--c-orange); vertical-align: middle; margin-left: 6px; }
.facts .stars svg { width: 16px; height: 16px; }
@media (max-width: 860px) {
	.facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.facts li:nth-child(3) { border-left: 0; padding-left: 0; }
	.facts li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .18); }
}
@media (max-width: 520px) {
	.facts li { padding: 20px 14px; }
	.facts strong { font-size: 1.6rem; }
	.facts .stars { display: flex; margin: 6px 0 0; }
	.facts li > span { font-size: .75rem; }
}

/* ==========================================================================
   6. Leistungen – nummerierte Liste statt Karten
   ========================================================================== */
.services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(32px, 5vw, 72px); border-top: 2px solid var(--c-ink); }
.service { display: grid; grid-template-columns: 64px 1fr; gap: 6px 20px; padding: 30px 0; border-bottom: 1px solid var(--c-line); }
.service__num { grid-row: span 2; font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--c-blue); }
.service h3 { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; }
.service h3 svg { width: 22px; height: 22px; color: var(--c-orange); flex: none; }
.service p { margin: 0; color: var(--c-muted); }
@media (max-width: 820px) { .services { grid-template-columns: 1fr; } .service { grid-template-columns: 52px 1fr; } .service__num { font-size: 2rem; } }

.more {
	display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap;
	margin-top: 40px; padding: 28px 32px; background: var(--c-white); border-left: var(--bracket) solid var(--c-orange);
}
.more h3 { margin: 0 0 4px; }
.more p { margin: 0; color: var(--c-muted); }

/* ==========================================================================
   7. Ablauf – Pfeilkette wie die Bildmarke
   ========================================================================== */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.step { position: relative; }
.step__head {
	display: flex; align-items: center; gap: 14px;
	height: 76px; padding: 0 44px 0 26px; margin-right: -18px;
	background: var(--c-white); color: var(--c-blue);
	clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 26px 50%);
}
.step:first-child .step__head { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); padding-left: 22px; }
.step:last-child .step__head { margin-right: 0; background: var(--c-orange); color: var(--c-white); }
.step__num { font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; line-height: 1; }
.step__head h3 { margin: 0; font-size: .98rem; line-height: 1.15; color: inherit; }
.step p { margin: 18px 22px 0 0; color: #d7e2f4; font-size: .98rem; }
@media (max-width: 960px) {
	.steps { grid-template-columns: 1fr 1fr; gap: 28px 6px; }
	.step:nth-child(2) .step__head { margin-right: 0; }
	.step:nth-child(3) .step__head { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); padding-left: 22px; }
}
@media (max-width: 560px) {
	.steps { grid-template-columns: 1fr; }
	.step .step__head, .step:first-child .step__head, .step:nth-child(3) .step__head { margin-right: 0; padding-left: 22px; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); }
}

/* ==========================================================================
   8. Über uns
   ========================================================================== */
.about { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.about__media .frame img, .about__media .frame__fallback { aspect-ratio: 4 / 4.6; }
.about__text > p { color: var(--c-muted); font-size: 1.05rem; }
.about .heading, .contact .heading { margin-bottom: 22px; }
.about .chev-list { margin: 28px 0 32px; }
.about .chev-list strong { display: block; }
.about .chev-list span { color: var(--c-muted); font-size: .97rem; }
.signature { display: flex; flex-direction: column; padding-top: 22px; border-top: 2px solid var(--c-ink); }
.signature strong { font-family: var(--font-display); font-size: 1.35rem; text-transform: uppercase; letter-spacing: .04em; }
.signature span { color: var(--c-muted); font-size: .92rem; }
@media (max-width: 860px) {
	.about { grid-template-columns: 1fr; }
	.about__media { max-width: 460px; }
}

/* ==========================================================================
   9. Bilder
   ========================================================================== */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gallery-grid a { display: block; position: relative; overflow: hidden; aspect-ratio: 1; background: var(--c-line); }
.gallery-grid--feature a:first-child { grid-column: span 2; grid-row: span 2; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gallery-grid a:hover img { transform: scale(1.05); }
.gallery-more { margin-top: 32px; }
@media (max-width: 760px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

.lightbox { padding: 0; border: 0; background: transparent; max-width: min(1100px, 94vw); max-height: 90vh; }
.lightbox::backdrop { background: rgba(20, 22, 25, .92); }
.lightbox img { max-width: 100%; max-height: 86vh; width: auto; margin: auto; }
.lightbox__close {
	position: fixed; top: 16px; right: 16px; width: 50px; height: 50px;
	display: flex; align-items: center; justify-content: center;
	border: 0; background: var(--c-white); color: var(--c-ink); cursor: pointer;
}
.lightbox__close svg { width: 22px; height: 22px; }

/* ==========================================================================
   10. Bewertungen – Siegel
   ========================================================================== */
.reviews { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.seal {
	width: clamp(230px, 26vw, 290px); aspect-ratio: 1;
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
	border: 10px solid var(--c-blue); border-radius: 50%;
	outline: 2px solid var(--c-blue); outline-offset: 8px;
	background: var(--c-white); margin: 12px;
}
.seal__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.2rem, 6vw, 4.2rem); line-height: 1; color: var(--c-blue); }
.seal .stars { display: inline-flex; gap: 3px; color: var(--c-orange); margin: 10px 0 8px; }
.seal .stars svg { width: 20px; height: 20px; }
.seal__label { font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .82rem; }
.seal__meta { font-size: .82rem; color: var(--c-muted); margin-top: 4px; }

.scores { list-style: none; margin: 28px 0 32px; padding: 0; border-top: 2px solid var(--c-ink); }
.scores li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.scores span { font-weight: 600; }
.scores b { font-family: var(--font-display); font-size: 1.5rem; color: var(--c-blue); }
@media (max-width: 760px) { .reviews { grid-template-columns: 1fr; justify-items: start; } }

/* Einsatzgebiet */
.areas__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.areas__list li {
	display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px;
	background: rgba(255, 255, 255, .1); color: var(--c-white); font-weight: 700; font-size: .95rem; letter-spacing: .02em;
}
.areas__list li::before {
	content: ""; width: 10px; height: 9px; background: var(--c-orange);
	clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%);
}
.areas__note { margin: 24px 0 0; color: #c9d7ef; }

/* Häufige Fragen */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq__list { border-top: 2px solid var(--c-ink); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item summary {
	position: relative; list-style: none; cursor: pointer;
	padding: 20px 48px 20px 0; font-weight: 700; font-size: 1.08rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
	content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 12px; margin-top: -6px;
	background: var(--c-blue); clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%);
	transition: transform .3s;
}
.faq__item[open] summary::after { transform: rotate(90deg); background: var(--c-orange); }
.faq__item summary:hover { color: var(--c-blue); }
.faq__answer { padding: 0 48px 20px 0; color: var(--c-muted); }
.faq__answer p { margin: 0; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

/* ==========================================================================
   11. Logos
   ========================================================================== */
.logo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.logo-grid li { display: flex; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background: var(--c-white); }
.logo-grid a, .logo-grid .logo-tile {
	display: flex; align-items: center; justify-content: center; width: 100%;
	min-height: 120px; padding: 22px;
	text-decoration: none; color: var(--c-ink); font-weight: 700; text-align: center; font-size: .9rem;
}
.logo-grid img { max-height: 64px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .25s, opacity .25s; }
.logo-grid a:hover img, .logo-grid a:focus-visible img { filter: none; opacity: 1; }
.logos-block + .logos-block { margin-top: clamp(44px, 6vw, 72px); }
.logos-block > h3 { font-size: 1rem; letter-spacing: .12em; color: var(--c-muted); margin-bottom: 18px; }

.engage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.engage__item { display: flex; align-items: center; gap: 22px; height: 100%; padding: 20px; background: var(--c-white); color: var(--c-ink); text-decoration: none; border-bottom: 3px solid transparent; transition: border-color .25s; }
a.engage__item:hover { border-bottom-color: var(--c-orange); color: var(--c-ink); }
.engage__item img { width: 120px; height: 72px; object-fit: contain; flex: none; }
.engage__item strong { display: block; font-size: 1.05rem; }
.engage__item span { color: var(--c-muted); font-size: .95rem; line-height: 1.45; }
.estate { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; padding: clamp(28px, 4vw, 44px); background: var(--c-blue); color: #d7e2f4; }
.estate h3 { color: var(--c-white); font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: 8px; }
.estate p { margin: 0; }
.estate__logos { display: flex; gap: 10px; flex-wrap: wrap; }
.estate__logos a, .estate__logos .logo-tile { display: flex; align-items: center; justify-content: center; height: 84px; min-width: 140px; padding: 12px 18px; background: var(--c-white); color: var(--c-ink); text-decoration: none; font-weight: 700; }
.estate__logos img { max-height: 60px; width: auto; max-width: 170px; object-fit: contain; }
@media (max-width: 860px) { .estate { grid-template-columns: 1fr; } }

/* ==========================================================================
   12. Kontakt
   ========================================================================== */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
.contact__lead { color: var(--c-muted); font-size: 1.1rem; margin-bottom: 28px; }
.contact__list { font-style: normal; border-top: 2px solid var(--c-ink); }
.contact__list > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--c-line); }
.contact__list small { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); padding-top: 2px; }
.contact__ways { display: grid; gap: 16px; }
.contact__way {
	display: block; padding: clamp(24px, 3vw, 34px); text-decoration: none;
	background: var(--c-white); color: var(--c-ink); border-left: var(--bracket) solid var(--c-orange);
	transition: background-color .25s, transform .25s;
}
.contact__way small { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.contact__way strong { display: flex; align-items: center; gap: 14px; margin: 6px 0 8px; font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 1.7rem); letter-spacing: .01em; color: var(--c-blue); word-break: break-word; }
.contact__way strong svg { width: 28px; height: 28px; flex: none; color: var(--c-orange); }
.contact__way span { display: block; color: var(--c-muted); font-size: .97rem; }
.contact__way:hover { background: var(--c-blue-tint); color: var(--c-ink); transform: translateX(4px); }
.contact__way--phone { background: var(--c-blue); border-left-color: var(--c-orange); }
.contact__way--phone small, .contact__way--phone span { color: #c9d7ef; }
.contact__way--phone strong { color: var(--c-white); font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.contact__way--phone:hover { background: var(--c-blue-dark); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .contact__list > div { grid-template-columns: 1fr; gap: 2px; } }

/* Formulare in Inhaltsseiten */
.prose input[type="text"], .prose input[type="email"], .prose input[type="tel"], .prose textarea, .prose select {
	width: 100%; padding: 13px 14px; font: inherit; font-size: 1rem; color: var(--c-ink);
	background: var(--c-paper); border: 0; border-bottom: 2px solid var(--c-line); border-radius: 0;
}
.prose input:focus, .prose textarea:focus, .prose select:focus { outline: none; border-bottom-color: var(--c-blue); background: var(--c-blue-tint); }

/* ==========================================================================
   13. Fußbereich – Logo-Blau
   ========================================================================== */
.site-footer { background: var(--c-blue); color: #c9d7ef; font-size: .95rem; padding-top: clamp(56px, 7vw, 84px); position: relative; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, var(--c-orange) 0 33%, transparent 33%); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.15fr .75fr; gap: 40px; padding-bottom: 52px; }
.site-footer h4 { color: var(--c-white); font-size: .9rem; letter-spacing: .12em; margin-bottom: 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: var(--c-white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-about p { margin: 20px 0; max-width: 320px; }
.footer-about .brand__mark path { fill: var(--c-white); }
.footer-about .brand__mark path:first-child { fill: var(--c-orange); }
.social { display: flex; gap: 10px; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 2px solid rgba(255, 255, 255, .5); }
.social a:hover { background: var(--c-white); }
.social a:hover svg { color: var(--c-blue); }
.social svg { width: 18px; height: 18px; color: var(--c-white); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .2); padding-block: 22px; font-size: .85rem; }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* Mobile Aktionsleiste */
.mobile-bar { display: none; }
@media (max-width: 760px) {
	body { padding-bottom: 64px; }
	.mobile-bar {
		position: fixed; inset: auto 0 0 0; z-index: 60;
		display: grid; grid-template-columns: 1.2fr 1fr;
		padding-bottom: env(safe-area-inset-bottom); background: var(--c-white);
		box-shadow: 0 -6px 18px rgba(30, 35, 40, .12);
	}
	.mobile-bar .btn { min-height: 60px; padding: 8px; font-size: .85rem; }
}

/* ==========================================================================
   14. Unterseiten & Inhalte
   ========================================================================== */
.page-hero { background: var(--c-white); padding-block: clamp(44px, 6vw, 72px) clamp(36px, 5vw, 56px); border-bottom: 1px solid var(--c-line); }
.page-hero .heading { margin-bottom: 0; }
.page-hero h1 { margin: 0; font-size: clamp(2rem, 4.4vw, 3rem); }
.breadcrumbs { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 12px; }
.breadcrumbs a { color: var(--c-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-blue); }

.prose { max-width: 780px; background: var(--c-white); padding: clamp(24px, 4vw, 48px); }
.prose > * + * { margin-top: 1.1em; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 1.5rem; margin-top: 1.8em; }
.prose h3 { font-size: 1.15rem; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: var(--bracket) solid var(--c-orange); color: var(--c-muted); font-size: 1.1rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--c-line); }
.prose .wp-block-button__link { background: var(--c-blue); border-radius: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.prose a { word-break: break-word; }
.alignwide { max-width: 1100px; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.wp-caption-text, figcaption { font-size: .88rem; color: var(--c-muted); margin-top: 8px; }

.post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.post-card { background: var(--c-white); display: flex; flex-direction: column; border-top: var(--bracket) solid var(--c-blue); }
.post-card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.post-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.post-card h2 { font-size: 1.25rem; }
.post-card h2 a { color: var(--c-ink); text-decoration: none; }
.post-card h2 a:hover { color: var(--c-blue); }
.post-card time { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); display: block; margin-bottom: 8px; }
.post-card p { color: var(--c-muted); font-size: .97rem; }
.pagination { margin-top: 48px; display: flex; gap: 6px; flex-wrap: wrap; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 12px; background: var(--c-white); text-decoration: none; color: var(--c-ink); font-weight: 700; }
.pagination .current { background: var(--c-blue); color: var(--c-white); }

.error-404 { padding-block: var(--section); }
.error-404 .big { font-family: var(--font-display); font-size: clamp(6rem, 18vw, 11rem); font-weight: 700; line-height: .9; color: var(--c-blue); margin-bottom: 24px; }
.error-404 p { color: var(--c-muted); max-width: 560px; }

.elementor-page .site-main--builder { padding: 0; }

/* ==========================================================================
   14b. Leistungsseiten
   ========================================================================== */
.service h3 a { color: inherit; text-decoration: none; }
.service h3 a:hover { color: var(--c-blue); }
.service__more {
	grid-column: 2; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
	font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--c-blue);
}
.service__more svg { width: 16px; height: 16px; transition: transform .25s; }
.service__more:hover svg, .service:hover .service__more svg { transform: translateX(4px); }

.service-hero .breadcrumbs { margin-bottom: 18px; }
.service-hero h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.frame__fallback--icon { align-items: flex-start; }
.frame__icon { display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; background: var(--c-blue); color: var(--c-white); }
.frame__icon svg { width: 60px; height: 60px; }
.frame__fallback--icon > svg { width: 42%; }

.service-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.service-content { max-width: none; }
.service-content > h2:first-child { margin-top: 0; }
.service-content ol { counter-reset: none; }
.service-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 14px; }
.service-aside .contact__way strong { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.service-aside .contact__way--phone strong { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.aside-rating { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--c-white); color: var(--c-muted); text-decoration: none; font-size: .9rem; line-height: 1.4; }
.aside-rating .stars { display: inline-flex; gap: 2px; color: var(--c-orange); flex: none; }
.aside-rating .stars svg { width: 15px; height: 15px; }
.aside-rating strong { display: block; color: var(--c-ink); }
.aside-services { padding: 22px 20px; background: var(--c-white); }
.aside-services h3 { font-size: .95rem; letter-spacing: .1em; margin-bottom: 14px; }
.aside-services .chev-list { gap: 10px; font-size: .97rem; }
.aside-services a { color: var(--c-ink); text-decoration: none; font-weight: 600; }
.aside-services a:hover { color: var(--c-blue); }
@media (max-width: 960px) {
	.service-body { grid-template-columns: 1fr; }
	.service-aside { position: static; }
}

/* Ausklapp-Blöcke (FAQ) im Inhalt */
.prose .wp-block-details { border-bottom: 1px solid var(--c-line); margin: 0; }
.prose h2 + .wp-block-details { border-top: 2px solid var(--c-ink); margin-top: 1em; }
.prose .wp-block-details summary {
	position: relative; list-style: none; cursor: pointer; padding: 18px 44px 18px 0; font-weight: 700;
}
.prose .wp-block-details summary::-webkit-details-marker { display: none; }
.prose .wp-block-details summary::after {
	content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 12px; margin-top: -6px;
	background: var(--c-blue); clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%); transition: transform .3s;
}
.prose .wp-block-details[open] summary::after { transform: rotate(90deg); background: var(--c-orange); }
.prose .wp-block-details summary:hover { color: var(--c-blue); }
.prose .wp-block-details > :not(summary) { margin: 0 44px 18px 0; color: var(--c-muted); }
.prose > .wp-block-details + .wp-block-details { margin-top: 0; }

/* Aufzählungen im Inhalt mit Logo-Pfeil */
.prose ul.wp-block-list { list-style: none; padding-left: 0; }
.prose ul.wp-block-list > li { position: relative; padding-left: 28px; }
.prose ul.wp-block-list > li::before {
	content: ""; position: absolute; left: 0; top: .5em; width: 13px; height: 11px; background: var(--c-orange);
	clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%);
}
.prose ol.wp-block-list { list-style: none; padding-left: 0; counter-reset: th-step; }
.prose ol.wp-block-list > li { position: relative; padding-left: 48px; counter-increment: th-step; min-height: 34px; }
.prose ol.wp-block-list > li::before {
	content: counter(th-step); position: absolute; left: 0; top: -2px; width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	background: var(--c-blue); color: var(--c-white); font-family: var(--font-display); font-weight: 700;
}
.prose ol.wp-block-list > li + li { margin-top: .8em; }

/* ==========================================================================
   15. Animationen
   Nur aktiv, wenn <html class="anim"> gesetzt ist (JS vorhanden, keine
   reduzierte Bewegung). Ohne diese Klasse ist alles sofort sichtbar.
   ========================================================================== */

/* Scroll-Fortschritt in Logo-Orange */
.scroll-progress {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 4px;
	background: var(--c-orange); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}
.admin-bar .scroll-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .scroll-progress { top: 46px; } }

/* Kopfzeile wird beim Scrollen schlanker */
.site-header__inner { transition: min-height .3s; }
.site-header.is-scrolled .site-header__inner { min-height: 68px; }
.brand__mark path { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.brand:hover .brand__mark path:last-child { transform: translateX(10px); }
.brand:hover .brand__mark path:first-child { transform: translateX(5px); }

@keyframes th-up { from { opacity: 0; transform: translateY(26px); } }
@keyframes th-draw { from { width: 0; height: 0; } }
@keyframes th-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes th-chev { from { opacity: 0; transform: translateX(-40px); } }

/* Startbereich: Text gestaffelt, Logo-Winkel zeichnen sich, Foto wird aufgezogen */
.anim .hero__content > * { animation: th-up .8s cubic-bezier(.2, .8, .2, 1) both; }
.anim .hero__content > :nth-child(2) { animation-delay: .1s; }
.anim .hero__content > :nth-child(3) { animation-delay: .2s; }
.anim .hero__content > :nth-child(4) { animation-delay: .3s; }
.anim .hero__content > :nth-child(5) { animation-delay: .4s; }
.anim .hero .frame::before, .anim .hero .frame::after { animation: th-draw .9s .35s cubic-bezier(.6, 0, .2, 1) both; }
.anim .hero .frame img, .anim .hero .frame__fallback { animation: th-wipe 1.1s .2s cubic-bezier(.7, 0, .2, 1) both; }
.anim .frame__fallback svg path { animation: th-chev .8s 1s cubic-bezier(.2, .8, .2, 1) both; }
.anim .frame__fallback svg path:last-child { animation-delay: 1.15s; }

/* Elemente gleiten beim Scrollen ins Bild */
.anim .reveal {
	opacity: 0; transform: translateY(28px);
	transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1);
	transition-delay: var(--d, 0s);
}
.anim .reveal.is-in { opacity: 1; transform: none; }
.anim .step.reveal, .anim .areas__list li.reveal { transform: translateX(-32px); }
.anim .seal.reveal { transform: scale(.82) rotate(-10deg); transition-duration: .9s; }
.anim .gallery-grid a.reveal { transform: scale(.94); }
.anim .contact__way.reveal { transform: translateX(32px); }
.anim .service-aside .contact__way.reveal { transform: translateY(20px); }
.anim .step.reveal.is-in, .anim .areas__list li.reveal.is-in, .anim .seal.reveal.is-in,
.anim .gallery-grid a.reveal.is-in, .anim .contact__way.reveal.is-in { transform: none; }

/* Logo-Winkel an Abschnittstiteln und Bildrahmen zeichnen sich */
.anim .heading.reveal::before { width: 0; height: 0; transition: width .6s .25s cubic-bezier(.6, 0, .2, 1), height .6s .25s cubic-bezier(.6, 0, .2, 1); }
.anim .heading.reveal.is-in::before { width: 64px; height: 64px; }
.anim .about__media.reveal .frame::before, .anim .about__media.reveal .frame::after { width: 0; height: 0; transition: width .9s .3s cubic-bezier(.6, 0, .2, 1), height .9s .3s cubic-bezier(.6, 0, .2, 1); }
.anim .about__media.reveal.is-in .frame::before, .anim .about__media.reveal.is-in .frame::after { width: 42%; height: 46%; }

/* Bewertungsbalken in der Faktenleiste: kurzer Lichteffekt */
.facts { position: relative; overflow: hidden; }
.anim .facts.is-in::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .14) 50%, transparent 70%);
	animation: th-shine 1.6s .3s ease-out both;
}
@keyframes th-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }