/* =========================================================================
   Dachdeckerei Torben Schilling – Theme Stylesheet
   1  Schriften (lokal)
   2  Design-Tokens
   3  Basis & Typografie
   4  Layout & Container
   5  Buttons & Links
   6  Header & Navigation
   7  Sektionen & Dachlinien-Motiv
   8  Hero & Vertrauensleiste
   9  Karten, Raster, Icons
   10 Ablauf, Vorteile, Projekte, CTA
   11 Formulare
   12 Footer
   13 Gutenberg / Inhaltsbereiche
   14 Sticky-CTA mobil, Breadcrumbs, Pagination, 404
   15 Bewegung & Barrierefreiheit
   ========================================================================= */

/* ---------- 1  Schriften (lokal gehostet, keine externen Requests) ------- */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2  Design-Tokens -------------------------------------------- */
:root {
	/* Farben direkt aus dem Logo: Schwarz #0c0c0c, Grün #158118, Dunkelgrün #114712. */
	--dts-ink: #131313;
	--dts-ink-soft: #1d1d1d;
	--dts-ink-line: #2f2f2f;
	--dts-slate: #5b5f5c;
	--dts-slate-light: #9a9d9a;
	--dts-green: #158118;         /* Markengrün – Flächen, Buttons, Icons auf Hell */
	--dts-green-bright: #2ea832;  /* aufgehellt für dunkle Flächen */
	--dts-green-dark: #114712;    /* Logo-Dunkelgrün – Hover und Ränder */
	--dts-sand: #f4f5f3;
	--dts-line: #e2e4e1;
	--dts-white: #fff;

	--dts-font-display: "Montserrat", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--dts-font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

	--dts-wide: 1200px;
	--dts-content: 760px;
	--dts-gutter: clamp(1.25rem, 5vw, 2.5rem);

	--dts-radius: 4px;
	--dts-radius-lg: 8px;

	--dts-shadow-sm: 0 1px 2px rgba(19, 19, 19, .06), 0 4px 12px rgba(19, 19, 19, .05);
	--dts-shadow-md: 0 2px 6px rgba(19, 19, 19, .07), 0 18px 40px rgba(19, 19, 19, .10);

	/* Das Logo wird vollständig gezeigt – dafür darf der Header höher sein. */
	--dts-header-h: 116px;
	--dts-header-h-compact: 84px;

	--dts-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 3  Basis & Typografie --------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--dts-header-h-compact) + 1.5rem);
}

body {
	margin: 0;
	background: var(--dts-white);
	color: var(--dts-ink);
	font-family: var(--dts-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.dts-nav-open { overflow: hidden; }

img, svg, video, canvas, iframe { max-width: 100%; height: auto; display: block; }
img { border-style: none; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--dts-font-display);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.02em;
	margin: 0 0 .6em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.125rem, 1.35rem + 3.3vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 700; letter-spacing: -.01em; }
h4 { font-size: 1.125rem; font-weight: 700; letter-spacing: 0; }
h5, h6 { font-size: 1rem; font-weight: 700; letter-spacing: 0; }

p, ul, ol, dl, blockquote, figure, table { margin: 0 0 1.25rem; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--dts-green); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--dts-ink); }

strong, b { font-weight: 600; }
small { font-size: .875rem; }
hr { border: 0; border-top: 1px solid var(--dts-line); margin: 2.5rem 0; }

::selection { background: var(--dts-green); color: var(--dts-white); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--dts-green);
	outline-offset: 3px;
	border-radius: 2px;
}
.dts-section--dark :where(a, button, input, textarea, summary):focus-visible,
.dts-hero :where(a, button):focus-visible,
.dts-footer :where(a, button):focus-visible { outline-color: var(--dts-green-bright); }

.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;
}
.screen-reader-text:focus {
	background: var(--dts-white); color: var(--dts-ink); clip: auto; clip-path: none;
	display: block; font-family: var(--dts-font-display); font-weight: 700;
	height: auto; left: 1rem; top: 1rem; padding: 1rem 1.5rem; width: auto;
	z-index: 1000; box-shadow: var(--dts-shadow-md); border-radius: var(--dts-radius);
	text-decoration: none;
}

/* ---------- 4  Layout & Container --------------------------------------- */
.dts-container {
	width: 100%;
	max-width: calc(var(--dts-wide) + 2 * var(--dts-gutter));
	margin-inline: auto;
	padding-inline: var(--dts-gutter);
}
.dts-container--narrow { max-width: calc(var(--dts-content) + 2 * var(--dts-gutter)); }

.dts-site { display: flex; flex-direction: column; min-height: 100vh; }
.dts-main { flex: 1 0 auto; }

.dts-stack > * + * { margin-top: 1.25rem; }
.dts-lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); color: var(--dts-slate); line-height: 1.65; }
.dts-section--dark .dts-lead, .dts-cta .dts-lead { color: #c3cace; }

/* Eyebrow: kleines Label mit gruenem Balken */
.dts-eyebrow {
	display: flex; align-items: center; gap: .75rem;
	font-family: var(--dts-font-display);
	font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--dts-green); margin: 0 0 1rem;
}
.dts-eyebrow::before {
	content: ""; width: 2rem; height: 3px; flex: none;
	background: var(--dts-green); border-radius: 2px;
}
.dts-section--dark .dts-eyebrow, .dts-cta .dts-eyebrow, .dts-hero .dts-eyebrow { color: var(--dts-green-bright); }
.dts-eyebrow--center { justify-content: center; }

.dts-section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.dts-section-head--center { margin-inline: auto; text-align: center; }
.dts-section-head h2 { margin-bottom: 0; }
.dts-section-head p { margin-top: 1rem; }

/* ---------- 5  Buttons -------------------------------------------------- */
.dts-btn,
.wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
	font-family: var(--dts-font-display); font-weight: 700; font-size: 1rem; line-height: 1.2;
	padding: 1rem 1.75rem; min-height: 52px;
	border: 2px solid transparent; border-radius: var(--dts-radius);
	background: var(--dts-green); color: var(--dts-white);
	text-decoration: none; cursor: pointer;
	transition: background-color .25s var(--dts-ease), color .25s var(--dts-ease),
		border-color .25s var(--dts-ease), transform .25s var(--dts-ease), box-shadow .25s var(--dts-ease);
}
.dts-btn:hover, .wp-block-button__link:hover {
	background: var(--dts-ink); color: var(--dts-white);
	transform: translateY(-2px); box-shadow: var(--dts-shadow-md);
}
.dts-btn svg, .dts-btn .dts-i { width: 1.15em; height: 1.15em; flex: none; }

.dts-btn--ghost { background: transparent; color: var(--dts-ink); border-color: var(--dts-line); }
.dts-btn--ghost:hover { background: var(--dts-ink); border-color: var(--dts-ink); color: var(--dts-white); }

.dts-btn--outline-light { background: transparent; color: var(--dts-white); border-color: rgba(255, 255, 255, .38); }
.dts-btn--outline-light:hover { background: var(--dts-white); color: var(--dts-ink); border-color: var(--dts-white); }

.dts-btn--dark { background: var(--dts-ink); color: var(--dts-white); }
.dts-btn--dark:hover { background: var(--dts-green); color: var(--dts-white); }

.dts-btn--sm { padding: .7rem 1.15rem; min-height: 44px; font-size: .9375rem; }
.dts-btn--block { width: 100%; }

.dts-btn-row { display: flex; flex-wrap: wrap; gap: .875rem; }
.dts-btn-row--center { justify-content: center; }

.dts-arrow-link {
	display: inline-flex; align-items: center; gap: .5rem;
	font-family: var(--dts-font-display); font-weight: 700; font-size: .9375rem;
	color: var(--dts-green); text-decoration: none;
}
.dts-arrow-link svg, .dts-arrow-link .dts-i { width: 1rem; height: 1rem; transition: transform .25s var(--dts-ease); }
.dts-arrow-link:hover { color: var(--dts-ink); }
.dts-arrow-link:hover svg, .dts-arrow-link:hover .dts-i { transform: translateX(4px); }
.dts-section--dark .dts-arrow-link, .dts-cta .dts-arrow-link { color: var(--dts-green-bright); }
.dts-section--dark .dts-arrow-link:hover, .dts-cta .dts-arrow-link:hover { color: var(--dts-white); }

/* ---------- 6  Header & Navigation -------------------------------------- */
.dts-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--dts-white);
	border-bottom: 1px solid var(--dts-line);
	transition: box-shadow .3s var(--dts-ease);
}
.dts-header__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	height: var(--dts-header-h);
	transition: height .3s var(--dts-ease);
}
.dts-header.is-compact { box-shadow: var(--dts-shadow-sm); }
.dts-header.is-compact .dts-header__inner { height: var(--dts-header-h-compact); }

.dts-brand { display: inline-flex; align-items: center; gap: .875rem; text-decoration: none; color: inherit; flex: none; }
.dts-brand img, .dts-brand > svg { height: clamp(38px, 5vw, 52px); width: auto; transition: height .3s var(--dts-ease); }
.dts-header.is-compact .dts-brand img, .dts-header.is-compact .dts-brand > svg { height: 36px; }
.dts-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.dts-brand__name {
	font-family: var(--dts-font-display); font-weight: 800; letter-spacing: -.02em;
	font-size: clamp(.95rem, .85rem + .35vw, 1.15rem); color: var(--dts-ink);
}
.dts-brand__claim {
	font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--dts-slate); font-weight: 600;
}

.dts-nav { margin-left: auto; }
.dts-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .25rem; }
.dts-nav li { position: relative; }
.dts-nav a {
	display: block; padding: .6rem .85rem;
	font-family: var(--dts-font-display); font-weight: 600; font-size: .9375rem;
	color: var(--dts-ink); text-decoration: none; border-radius: var(--dts-radius);
	transition: color .2s var(--dts-ease), background-color .2s var(--dts-ease);
}
.dts-nav > div > ul > li > a::after {
	content: ""; display: block; height: 2px; width: 0; margin-top: 3px;
	background: var(--dts-green); border-radius: 2px;
	transition: width .28s var(--dts-ease);
}
.dts-nav > div > ul > li > a:hover::after,
.dts-nav > div > ul > li.current-menu-item > a::after,
.dts-nav > div > ul > li.current_page_parent > a::after,
.dts-nav > div > ul > li.current-menu-ancestor > a::after { width: 100%; }

.dts-nav .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 15rem; z-index: 20;
	background: var(--dts-white); border: 1px solid var(--dts-line); border-radius: var(--dts-radius-lg);
	box-shadow: var(--dts-shadow-md); padding: .5rem; flex-direction: column; align-items: stretch; gap: 0;
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .2s var(--dts-ease), transform .2s var(--dts-ease), visibility .2s;
}
.dts-nav li:hover > .sub-menu,
.dts-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dts-nav .sub-menu a { padding: .6rem .75rem; font-weight: 500; }
.dts-nav .sub-menu a:hover { background: var(--dts-sand); color: var(--dts-green-dark); }

.dts-header__actions { display: flex; align-items: center; gap: .75rem; flex: none; }
.dts-header__phone {
	display: inline-flex; align-items: center; gap: .5rem;
	font-family: var(--dts-font-display); font-weight: 700; font-size: .9375rem;
	color: var(--dts-ink); text-decoration: none; white-space: nowrap;
}
.dts-header__phone svg, .dts-header__phone .dts-i { width: 1.05rem; height: 1.05rem; color: var(--dts-green); flex: none; }
.dts-header__phone:hover { color: var(--dts-green-dark); }

.dts-nav-toggle {
	display: none; align-items: center; justify-content: center;
	width: 48px; height: 48px; padding: 0;
	background: var(--dts-ink); border: 0; border-radius: var(--dts-radius); cursor: pointer;
}
.dts-nav-toggle__bars { display: block; width: 22px; height: 14px; position: relative; }
.dts-nav-toggle__bars span {
	position: absolute; left: 0; height: 2px; width: 100%; background: var(--dts-white); border-radius: 2px;
	transition: transform .3s var(--dts-ease), opacity .2s var(--dts-ease), top .3s var(--dts-ease);
}
.dts-nav-toggle__bars span:nth-child(1) { top: 0; }
.dts-nav-toggle__bars span:nth-child(2) { top: 6px; }
.dts-nav-toggle__bars span:nth-child(3) { top: 12px; }
.dts-nav-toggle[aria-expanded="true"] .dts-nav-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.dts-nav-toggle[aria-expanded="true"] .dts-nav-toggle__bars span:nth-child(2) { opacity: 0; }
.dts-nav-toggle[aria-expanded="true"] .dts-nav-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (max-width: 1199px) {
	.dts-nav-toggle { display: inline-flex; }
	/* Nur die Nummer ausblenden – das Symbol ist ebenfalls ein span. */
	.dts-header__phone span:not(.dts-i) { display: none; }
	.dts-header__phone {
		width: 48px; height: 48px; justify-content: center;
		border: 2px solid var(--dts-line); border-radius: var(--dts-radius);
	}
	.dts-header__phone svg, .dts-header__phone .dts-i { width: 1.25rem; height: 1.25rem; }
	.dts-header__actions > .dts-btn { display: none; }

	.dts-nav {
		position: fixed; left: 0; right: 0; top: var(--dts-header-h-compact); bottom: 0;
		background: var(--dts-ink); padding: 1.5rem var(--dts-gutter) 3rem;
		overflow-y: auto; margin: 0; z-index: 99;
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity .25s var(--dts-ease), transform .25s var(--dts-ease), visibility .25s;
	}
	.dts-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
	.dts-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.dts-nav > div > ul > li { border-bottom: 1px solid var(--dts-ink-line); }
	.dts-nav a { color: var(--dts-white); font-size: 1.125rem; font-weight: 700; padding: 1.05rem .25rem; }
	.dts-nav .current-menu-item > a { color: var(--dts-green-bright); }
	.dts-nav .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none; min-width: 0;
		background: transparent; border: 0; box-shadow: none; padding: 0 0 .5rem 1rem;
	}
	.dts-nav .sub-menu a { color: #cfd5d8; font-size: 1rem; font-weight: 500; padding: .65rem .25rem; }
	.dts-nav .sub-menu a:hover { background: transparent; color: var(--dts-green-bright); }
	.dts-nav__cta { margin-top: 1.75rem; display: grid; gap: .75rem; }
}
@media (min-width: 1200px) {
	.dts-nav__cta { display: none; }
}

/* ---------- 7  Sektionen & Dachlinien-Motiv ----------------------------- */
.dts-section {
	position: relative;
	padding-block: clamp(3.5rem, 7vw, 6.5rem);
	padding-inline: var(--dts-gutter);
}
/* In PHP-Vorlagen liegt ein .dts-container in der Sektion – dann kein doppelter Abstand. */
.dts-section > .dts-container { padding-inline: 0; max-width: var(--dts-wide); }
.dts-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.dts-section--sand { background: var(--dts-sand); }
.dts-section--dark { background: var(--dts-ink); color: #dfe4e6; }
.dts-section--dark h1, .dts-section--dark h2, .dts-section--dark h3,
.dts-section--dark h4, .dts-section--dark strong { color: var(--dts-white); }
.dts-section--dark a:not(.dts-btn) { color: var(--dts-green-bright); }
.dts-section > .dts-container { position: relative; z-index: 1; }

/* Dachkante: flacher Giebel in der Farbe der Sektion, gezeichnet über den
   darüberliegenden Bereich. Das ist das wiederkehrende grafische Motiv. */
.dts-section--roof::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 0;
	height: clamp(16px, 2.6vw, 32px);
	transform: translateY(-100%);
	background-color: inherit;
	clip-path: polygon(0 100%, 0 42%, 50% 0, 100% 42%, 100% 100%);
	pointer-events: none;
}

/* Sehr dezentes Sparrenmuster auf dunklen Flächen. */
.dts-section--dark.dts-has-pattern::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 14px);
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
}
.dts-section--dark.dts-has-pattern > * { position: relative; z-index: 1; }

/* ---------- 8  Hero & Vertrauensleiste ---------------------------------- */
.dts-hero { position: relative; background: var(--dts-ink); color: var(--dts-white); overflow: hidden; isolation: isolate; }
.dts-hero__media { position: absolute; inset: 0; z-index: -2; }
.dts-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.dts-hero__media::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(100deg, rgba(19, 19, 19, .95) 0%, rgba(19, 19, 19, .88) 38%, rgba(19, 19, 19, .58) 72%, rgba(19, 19, 19, .45) 100%),
		linear-gradient(to top, rgba(19, 19, 19, .85) 0%, rgba(19, 19, 19, 0) 45%);
}
.dts-hero--noimage .dts-hero__media {
	background:
		radial-gradient(120% 90% at 12% 15%, #232b2f 0%, #131313 62%),
		var(--dts-ink);
}
.dts-hero__inner { position: relative; padding-block: clamp(4rem, 11vw, 8.5rem) clamp(3.5rem, 9vw, 7rem); max-width: 44rem; }
.dts-hero h1 { color: var(--dts-white); margin-bottom: 1.25rem; }
.dts-hero h1 .dts-hl { color: var(--dts-green-bright); }
.dts-hero__text {
	font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
	color: #cdd4d7; max-width: 38rem; margin-bottom: 2.25rem; line-height: 1.6;
}
.dts-hero__angle {
	position: absolute; right: -3%; bottom: -1px; width: min(46%, 520px); height: auto;
	color: var(--dts-green); opacity: .92; z-index: -1; pointer-events: none;
}
@media (max-width: 767px) { .dts-hero__angle { display: none; } }

.dts-hero__meta {
	list-style: none;
	margin: 2.25rem 0 0; padding: 1.75rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-family: var(--dts-font-display); font-weight: 600; font-size: .9375rem; color: #bcc4c8;
}
ul.dts-hero__meta { display: flex; flex-wrap: wrap; gap: .65rem 1.75rem; }
ul.dts-hero__meta li { display: flex; align-items: center; gap: .55rem; }
.dts-hero__meta svg, .dts-hero__meta .dts-i { width: 1.05rem; height: 1.05rem; color: var(--dts-green-bright); flex: none; }

.dts-trustbar {
	background: var(--dts-ink-soft); color: var(--dts-white);
	padding-block: clamp(2rem, 4vw, 3rem);
	padding-inline: var(--dts-gutter);
}
.dts-trustbar__grid {
	display: grid; gap: 1px; background: rgba(255, 255, 255, .09);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	border-radius: var(--dts-radius-lg); overflow: hidden;
}
.dts-trustbar__grid { list-style: none; margin: 0; padding: 0; }
.dts-trustbar__item {
	background: var(--dts-ink-soft); padding: 1.6rem 1.5rem;
	display: flex; align-items: flex-start; gap: .9rem; margin: 0;
}
.dts-trustbar__grid > li {
	position: relative; margin: 0;
	background: var(--dts-ink-soft);
	padding: 1.6rem 1.5rem 1.6rem 4rem;
	font-size: .9rem; color: #a8b1b5; line-height: 1.5;
}
.dts-trustbar__grid > li::before {
	content: ""; position: absolute; left: 1.5rem; top: 1.75rem;
	width: 1.6rem; height: 1.6rem;
	background-color: var(--dts-green);
	-webkit-mask: var(--dts-i) no-repeat center / contain;
	mask: var(--dts-i) no-repeat center / contain;
}
.dts-trustbar__grid > li strong {
	display: block; font-family: var(--dts-font-display); font-weight: 700;
	font-size: 1rem; color: var(--dts-white); margin-bottom: .15rem;
}
.dts-trustbar__item svg, .dts-trustbar__item .dts-i { width: 1.6rem; height: 1.6rem; color: var(--dts-green); flex: none; margin-top: .1rem; }
.dts-trustbar__item strong {
	display: block; font-family: var(--dts-font-display); font-weight: 700;
	font-size: 1rem; color: var(--dts-white); margin-bottom: .15rem;
}
.dts-trustbar__item span { font-size: .9rem; color: #a8b1b5; line-height: 1.5; }

/* ---------- 9  Karten, Raster, Icons ------------------------------------ */
.dts-grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.dts-grid > * { margin: 0; }
.dts-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.dts-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.dts-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.dts-card {
	position: relative; background: var(--dts-white);
	border: 1px solid var(--dts-line); border-radius: var(--dts-radius-lg);
	padding: clamp(1.5rem, 2.5vw, 2rem);
	transition: transform .3s var(--dts-ease), box-shadow .3s var(--dts-ease), border-color .3s var(--dts-ease);
	overflow: hidden;
}
.dts-card::after {
	content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0;
	background: var(--dts-green); transition: width .38s var(--dts-ease);
}
.dts-card:hover, .dts-card:focus-within { transform: translateY(-4px); box-shadow: var(--dts-shadow-md); border-color: transparent; }
.dts-card:hover::after, .dts-card:focus-within::after { width: 100%; }

/* Leistungs-Icon: kommt allein aus der Klasse (z. B. "dts-card--icon dts-i--dach"),
   damit im Editor nur echter Text steht und kein HTML-Block nötig ist. */
.dts-card--icon::before {
	content: ""; display: block; width: 42px; height: 42px; margin-bottom: 1.35rem;
	background-color: var(--dts-green);
	-webkit-mask: var(--dts-i) no-repeat center / contain;
	mask: var(--dts-i) no-repeat center / contain;
}
.dts-section--dark .dts-card--icon::before { background-color: var(--dts-green-bright); }
.dts-card h3 { margin-bottom: .5rem; }
.dts-card p { color: var(--dts-slate); font-size: 1rem; }
.dts-card__link { margin-top: 1.25rem; display: inline-flex; }
.dts-section--sand .dts-card { border-color: transparent; box-shadow: var(--dts-shadow-sm); }
.dts-section--dark .dts-card { background: var(--dts-ink-soft); border-color: rgba(255, 255, 255, .1); }
.dts-section--dark .dts-card p { color: #a8b1b5; }

.dts-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; margin-bottom: 1.25rem;
	border-radius: var(--dts-radius); background: rgba(21, 129, 24, .12);
	color: var(--dts-green); flex: none;
}
.dts-icon svg, .dts-icon .dts-i { width: 28px; height: 28px; }
.dts-section--dark .dts-icon { background: rgba(46, 168, 50, .18); color: var(--dts-green-bright); }

.dts-split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) {
	.dts-split { grid-template-columns: 1fr 1fr; }
	.dts-split--media-right .dts-split__media { order: 2; }
}
.dts-split__media { position: relative; }
.dts-split__media img { width: 100%; border-radius: var(--dts-radius-lg); box-shadow: var(--dts-shadow-md); }
.dts-split__badge {
	position: absolute; left: -1rem; bottom: -1rem; z-index: 2;
	background: var(--dts-green); color: var(--dts-white);
	font-family: var(--dts-font-display); font-weight: 800; letter-spacing: -.01em;
	padding: .9rem 1.25rem; border-radius: var(--dts-radius); box-shadow: var(--dts-shadow-md);
	line-height: 1.25; max-width: 15rem; font-size: 1rem;
}
@media (max-width: 599px) { .dts-split__badge { left: .75rem; bottom: -.75rem; font-size: .9rem; padding: .7rem 1rem; } }

.dts-placeholder {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
	aspect-ratio: 4 / 3; padding: 1.5rem; text-align: center;
	background:
		repeating-linear-gradient(135deg, rgba(19, 19, 19, .05) 0 10px, transparent 10px 20px),
		var(--dts-sand);
	border: 2px dashed var(--dts-line); border-radius: var(--dts-radius-lg);
	color: var(--dts-slate); font-family: var(--dts-font-display);
	font-size: .875rem; box-shadow: none;
}
.dts-placeholder svg, .dts-placeholder .dts-i { width: 2.5rem; height: 2.5rem; color: var(--dts-slate-light); }
.dts-placeholder strong { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .75rem; color: var(--dts-slate); }
.dts-placeholder span { max-width: 24rem; font-weight: 600; line-height: 1.5; }
.dts-placeholder--portrait { aspect-ratio: 3 / 4; }
.dts-placeholder--wide { aspect-ratio: 16 / 9; }

/* ---------- 10  Ablauf, Vorteile, Projekte, CTA ------------------------- */
.dts-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--dts-line); border-radius: var(--dts-radius-lg); overflow: hidden; }
@media (min-width: 900px) { .dts-steps { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 560px) and (max-width: 899px) { .dts-steps { grid-template-columns: repeat(2, 1fr); } }
.dts-steps { counter-reset: dts-step; }
.dts-steps li { position: relative; background: var(--dts-white); padding: 1.75rem 1.5rem; margin: 0; }
.dts-steps li::before {
	counter-increment: dts-step;
	content: counter(dts-step, decimal-leading-zero);
	display: block; font-family: var(--dts-font-display); font-weight: 800;
	font-size: 2.25rem; line-height: 1; color: var(--dts-green);
	margin-bottom: .75rem; letter-spacing: -.04em;
}
.dts-steps li strong {
	display: block; font-family: var(--dts-font-display); font-weight: 700;
	font-size: 1.0625rem; line-height: 1.25; color: var(--dts-ink); margin-bottom: .35rem;
}
.dts-steps li { font-size: .9375rem; color: var(--dts-slate); line-height: 1.6; }
.dts-section--sand .dts-steps li { background: var(--dts-sand); }
.dts-steps__num {
	display: block; font-family: var(--dts-font-display); font-weight: 800;
	font-size: 2.25rem; line-height: 1; color: var(--dts-green); margin-bottom: .75rem; letter-spacing: -.04em;
}
.dts-steps h3 { font-size: 1.0625rem; margin-bottom: .35rem; }
.dts-steps p { font-size: .9375rem; color: var(--dts-slate); }

.dts-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.dts-checklist li { display: flex; align-items: flex-start; gap: .85rem; }
.dts-checklist--auto li {
	display: block; position: relative; padding-left: 2.4rem;
	color: var(--dts-slate); font-size: .9688rem;
}
.dts-checklist--auto li::before {
	content: ""; position: absolute; left: 0; top: .18rem;
	width: 1.5rem; height: 1.5rem;
	background-color: var(--dts-green);
	-webkit-mask: var(--dts-i) no-repeat center / contain;
	mask: var(--dts-i) no-repeat center / contain;
}
.dts-checklist--auto li strong { color: var(--dts-ink); }
.dts-section--dark .dts-checklist--auto li,
.dts-cta .dts-checklist--auto li { color: #aeb6ba; }
.dts-section--dark .dts-checklist--auto li strong,
.dts-cta .dts-checklist--auto li strong { color: var(--dts-white); }
.dts-section--dark .dts-checklist--auto li::before,
.dts-cta .dts-checklist--auto li::before { background-color: var(--dts-green-bright); }
.dts-checklist svg, .dts-checklist .dts-i { width: 1.5rem; height: 1.5rem; flex: none; margin-top: .15rem; color: var(--dts-green); }
.dts-section--dark .dts-checklist svg, .dts-section--dark .dts-checklist .dts-i,
.dts-cta .dts-checklist svg, .dts-cta .dts-checklist .dts-i { color: var(--dts-green-bright); }
.dts-checklist strong { display: block; font-family: var(--dts-font-display); font-size: 1.0625rem; font-weight: 700; }
.dts-checklist span { color: var(--dts-slate); font-size: .9688rem; }
.dts-section--dark .dts-checklist span { color: #aeb6ba; }

.dts-project {
	position: relative; display: flex; flex-direction: column;
	background: var(--dts-white); border-radius: var(--dts-radius-lg); overflow: hidden;
	border: 1px solid var(--dts-line);
	transition: transform .3s var(--dts-ease), box-shadow .3s var(--dts-ease);
}
.dts-project:hover, .dts-project:focus-within { transform: translateY(-4px); box-shadow: var(--dts-shadow-md); }
.dts-project__media { position: relative; overflow: hidden; background: var(--dts-sand); }
.dts-project__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--dts-ease); }
.dts-project:hover .dts-project__media img { transform: scale(1.04); }
.dts-project__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.dts-project__meta {
	font-family: var(--dts-font-display); font-size: .8125rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; color: var(--dts-green);
}
.dts-project h3 { margin: 0; font-size: 1.1875rem; }
.dts-project h3 a { color: inherit; text-decoration: none; }
.dts-project p { color: var(--dts-slate); font-size: .9688rem; margin: 0; }
.dts-project__cover::after { content: ""; position: absolute; inset: 0; }

.dts-empty-note {
	border: 2px dashed var(--dts-line); border-radius: var(--dts-radius-lg);
	background: var(--dts-white); padding: clamp(1.75rem, 4vw, 2.75rem); text-align: center; color: var(--dts-slate);
}
.dts-empty-note strong { display: block; font-family: var(--dts-font-display); color: var(--dts-ink); font-size: 1.125rem; margin-bottom: .5rem; }

.dts-cta { position: relative; background: var(--dts-ink); color: #dfe4e6; overflow: hidden; }
.dts-cta__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .dts-cta__grid { grid-template-columns: 1.1fr .9fr; } }
.dts-cta h2 { color: var(--dts-white); }
.dts-cta__contact { display: grid; gap: 1rem; }
.dts-cta__tile {
	display: flex; align-items: center; gap: 1rem;
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--dts-radius-lg); padding: 1.2rem 1.35rem;
	text-decoration: none; color: var(--dts-white);
	transition: background-color .25s var(--dts-ease), border-color .25s var(--dts-ease), transform .25s var(--dts-ease);
}
.dts-cta__tile:hover { background: rgba(21, 129, 24, .12); border-color: var(--dts-green); transform: translateX(3px); color: var(--dts-white); }
.dts-cta__tile svg, .dts-cta__tile .dts-i { width: 1.5rem; height: 1.5rem; color: var(--dts-green-bright); flex: none; }
.dts-cta__tile small { display: block; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #9aa3a7; }
.dts-cta__tile strong { font-family: var(--dts-font-display); font-size: 1.0625rem; font-weight: 700; overflow-wrap: anywhere; }

/* Kontaktkacheln außerhalb der dunklen Abschluss-Sektion */
.dts-section:not(.dts-cta) .dts-cta__contact {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.dts-section:not(.dts-cta) .dts-cta__tile {
	background: var(--dts-white); border-color: var(--dts-line); color: var(--dts-ink);
	box-shadow: var(--dts-shadow-sm);
}
.dts-section:not(.dts-cta) .dts-cta__tile:hover {
	background: var(--dts-white); border-color: var(--dts-green); color: var(--dts-ink);
}
.dts-section:not(.dts-cta) .dts-cta__tile .dts-i { background-color: var(--dts-green); }
.dts-section:not(.dts-cta) .dts-cta__tile small { color: var(--dts-slate); }

.dts-todo {
	display: inline-block; background: #fff4d6; color: #6b4f00;
	border: 1px dashed #d9b64a; border-radius: 3px;
	padding: .1em .5em; font-family: var(--dts-font-display); font-size: .875em; font-weight: 700; letter-spacing: .02em;
}
.dts-section--dark .dts-todo, .dts-cta .dts-todo, .dts-footer .dts-todo, .dts-hero .dts-todo {
	background: rgba(255, 244, 214, .12); color: #ffe9a8;
}

/* ---------- 11  Formulare ----------------------------------------------- */
.dts-form { display: grid; gap: 1.25rem; }
.dts-form__row { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .dts-form__row--2 { grid-template-columns: 1fr 1fr; } }

.dts-field { display: grid; gap: .4rem; }
.dts-field label { font-family: var(--dts-font-display); font-weight: 600; font-size: .9375rem; color: var(--dts-ink); }
.dts-field .dts-req { color: var(--dts-green); }
.dts-field__hint { font-size: .8125rem; color: var(--dts-slate); }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], input[type="date"], textarea, select {
	width: 100%; font: inherit; font-size: 1rem; color: var(--dts-ink);
	background: var(--dts-white);
	border: 1px solid var(--dts-line); border-radius: var(--dts-radius);
	padding: .8rem 1rem; min-height: 50px;
	transition: border-color .2s var(--dts-ease), box-shadow .2s var(--dts-ease);
}
textarea { min-height: 170px; resize: vertical; line-height: 1.6; }
input:focus, textarea:focus, select:focus { border-color: var(--dts-green); box-shadow: 0 0 0 3px rgba(21, 129, 24, .20); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #c2321f; box-shadow: 0 0 0 3px rgba(194, 50, 31, .14); }
::placeholder { color: #99a1a6; opacity: 1; }

.dts-consent { display: flex; align-items: flex-start; gap: .75rem; }
.dts-consent input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; margin: .2rem 0 0; flex: none; accent-color: var(--dts-green); }
.dts-consent label { font-family: var(--dts-font-body); font-weight: 400; font-size: .9375rem; line-height: 1.55; color: var(--dts-slate); }

.dts-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.dts-notice { border-radius: var(--dts-radius-lg); padding: 1.15rem 1.35rem; border-left: 4px solid; font-size: .9688rem; }
.dts-notice--ok { background: #edf5ed; border-color: var(--dts-green); color: #10400f; }
.dts-notice--error { background: #fdeeeb; border-color: #c2321f; color: #7d2113; }
.dts-notice strong { font-weight: 700; }
.dts-notice ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.dts-form__meta { font-size: .8125rem; color: var(--dts-slate); }

.dts-contact-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .dts-contact-grid { grid-template-columns: .8fr 1.2fr; } }
.dts-contact-card {
	background: var(--dts-sand); border-radius: var(--dts-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1.5rem;
}
.dts-contact-card h2 { font-size: 1.375rem; margin: 0; }
.dts-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.dts-contact-list li { display: flex; gap: .85rem; align-items: flex-start; }
.dts-contact-list svg, .dts-contact-list .dts-i { width: 1.25rem; height: 1.25rem; color: var(--dts-green); flex: none; margin-top: .25rem; }
.dts-contact-list small { display: block; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dts-slate); font-weight: 700; font-family: var(--dts-font-display); }
.dts-contact-list a, .dts-contact-list span.dts-contact-value { font-family: var(--dts-font-display); font-weight: 700; color: var(--dts-ink); text-decoration: none; overflow-wrap: anywhere; }
.dts-contact-list a:hover { color: var(--dts-green-dark); }

/* ---------- 12  Footer -------------------------------------------------- */
.dts-footer { background: var(--dts-ink); color: #aeb6ba; font-size: .9688rem; }
.dts-footer__top {
	display: grid; gap: clamp(2rem, 4vw, 3rem);
	padding-block: clamp(3rem, 6vw, 4.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.dts-footer__brand { max-width: 24rem; }
.dts-footer__brand .dts-brand__name { color: var(--dts-white); }
.dts-footer__brand .dts-brand__claim { color: var(--dts-slate-light); }
.dts-footer__brand p { margin-top: 1rem; color: #98a1a5; font-size: .9375rem; }
.dts-footer__col h2 {
	font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--dts-white); margin-bottom: 1.1rem; font-weight: 700; font-family: var(--dts-font-display);
}
.dts-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.dts-footer a { color: #aeb6ba; text-decoration: none; }
.dts-footer a:hover { color: var(--dts-green-bright); }
.dts-footer__contact li { display: flex; gap: .7rem; align-items: flex-start; }
.dts-footer__contact svg, .dts-footer__contact .dts-i { width: 1.1rem; height: 1.1rem; color: var(--dts-green); flex: none; margin-top: .25rem; }
.dts-footer__bottom {
	border-top: 1px solid var(--dts-ink-line); padding-block: 1.5rem;
	display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between;
	font-size: .875rem; color: #8a9296;
}
.dts-footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.dts-footer__social { display: flex; gap: .6rem; }
.dts-footer__social a {
	display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
	border: 1px solid var(--dts-ink-line); border-radius: var(--dts-radius);
	transition: background-color .25s var(--dts-ease), border-color .25s var(--dts-ease), color .25s var(--dts-ease);
}
.dts-footer__social a:hover { background: var(--dts-green); border-color: var(--dts-green); color: var(--dts-white); }
.dts-footer__social svg, .dts-footer__social .dts-i { width: 1.15rem; height: 1.15rem; }

/* ---------- 13  Gutenberg / Inhaltsbereiche ----------------------------- */
.dts-page-header { background: var(--dts-sand); padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); position: relative; }
.dts-page-header h1 { margin-bottom: 0; max-width: 24ch; }
.dts-page-header .dts-lead { margin-top: 1.15rem; max-width: 46rem; }

.dts-entry { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.entry-content {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--dts-gutter), 1fr)
		[wide-start] minmax(0, calc((var(--dts-wide) - var(--dts-content)) / 2))
		[content-start] min(var(--dts-content), 100% - var(--dts-gutter) * 2) [content-end]
		minmax(0, calc((var(--dts-wide) - var(--dts-content)) / 2)) [wide-end]
		minmax(var(--dts-gutter), 1fr) [full-end];
}
.entry-content > * { grid-column: content; margin-block: 0 1.5rem; }
.entry-content > .alignwide { grid-column: wide; }
.entry-content > .alignfull { grid-column: full; max-width: none; }
.entry-content > :last-child { margin-bottom: 0; }
.entry-content > h2 { margin-top: 2.5rem; }
.entry-content > h3 { margin-top: 2rem; }
.entry-content > .dts-section,
.entry-content > .alignfull.dts-section { margin-bottom: 0; }
.entry-content .alignleft { float: left; margin: .3rem 1.75rem 1.25rem 0; max-width: 50%; }
.entry-content .alignright { float: right; margin: .3rem 0 1.25rem 1.75rem; max-width: 50%; }
.entry-content .aligncenter { margin-inline: auto; }

/* Einzug nur für echte Textlisten – Theme-Komponenten bringen ihr eigenes Layout mit. */
.entry-content ul:not([class*="dts-"]), .entry-content ol:not([class*="dts-"]) { padding-left: 1.35rem; }
.entry-content ul:not([class*="dts-"]) > li,
.entry-content ol:not([class*="dts-"]) > li { margin-bottom: .45rem; }
.entry-content ul:not([class*="dts-"]) > li::marker,
.entry-content ol:not([class*="dts-"]) > li::marker { color: var(--dts-green); }
.entry-content ul[class*="dts-"], .entry-content ol[class*="dts-"] { padding-left: 0; list-style: none; }

.wp-block-image img { border-radius: var(--dts-radius-lg); }
.wp-block-image figcaption, figcaption { font-size: .875rem; color: var(--dts-slate); text-align: center; margin-top: .6rem; }
.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-table td, .wp-block-table th { border: 1px solid var(--dts-line); padding: .7rem .9rem; text-align: left; }
.wp-block-table th { background: var(--dts-sand); font-family: var(--dts-font-display); }
.wp-block-quote { border-left: 4px solid var(--dts-green); padding-left: 1.5rem; font-size: 1.125rem; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .875rem; }
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent; color: var(--dts-ink); border-color: var(--dts-line);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--dts-ink); color: var(--dts-white); border-color: var(--dts-ink); }
.dts-section--dark .wp-block-button.is-style-outline .wp-block-button__link { color: var(--dts-white); border-color: rgba(255, 255, 255, .38); }
.dts-section--dark .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--dts-white); color: var(--dts-ink); }
.wp-block-code, pre { background: var(--dts-sand); padding: 1.15rem; border-radius: var(--dts-radius); overflow-x: auto; font-size: .9rem; }
.wp-block-table { overflow-x: auto; }

/* Rechtstexte übersichtlich halten */
.dts-legal h2 { margin-top: 2.75rem; }
.dts-legal h3 { margin-top: 1.75rem; }

/* ---------- 14  Sticky-CTA mobil, Breadcrumbs, Pagination, 404 ---------- */
.dts-mobile-cta {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
	display: none; gap: 1px; background: var(--dts-ink-line);
	box-shadow: 0 -6px 24px rgba(19, 19, 19, .18);
	padding-bottom: env(safe-area-inset-bottom);
}
.dts-mobile-cta a {
	flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .95rem .5rem; min-height: 56px; text-decoration: none;
	font-family: var(--dts-font-display); font-weight: 700; font-size: .9375rem;
}
.dts-mobile-cta svg, .dts-mobile-cta .dts-i { width: 1.15rem; height: 1.15rem; flex: none; }
.dts-mobile-cta__call { background: var(--dts-green); color: var(--dts-white); }
.dts-mobile-cta__mail { background: var(--dts-ink); color: var(--dts-white); }
@media (max-width: 767px) {
	.dts-mobile-cta { display: flex; }
	body.dts-has-mobile-cta { padding-bottom: 56px; }
	body.dts-nav-open .dts-mobile-cta { display: none; }
}

.dts-breadcrumbs { font-size: .8125rem; color: var(--dts-slate); margin-bottom: 1.15rem; }
.dts-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem .5rem; margin: 0; padding: 0; }
.dts-breadcrumbs li { display: flex; align-items: center; gap: .5rem; }
.dts-breadcrumbs li + li::before { content: "›"; color: var(--dts-slate-light); }
.dts-breadcrumbs a { color: var(--dts-slate); text-decoration: none; }
.dts-breadcrumbs a:hover { color: var(--dts-green-dark); text-decoration: underline; }
.dts-breadcrumbs [aria-current="page"] { color: var(--dts-ink); font-weight: 600; }

.dts-pagination { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.dts-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.dts-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 46px; height: 46px; padding: 0 .75rem;
	border: 1px solid var(--dts-line); border-radius: var(--dts-radius);
	font-family: var(--dts-font-display); font-weight: 700; font-size: .9375rem;
	color: var(--dts-ink); text-decoration: none;
	transition: background-color .2s var(--dts-ease), border-color .2s var(--dts-ease), color .2s var(--dts-ease);
}
.dts-pagination .page-numbers:hover { background: var(--dts-sand); }
.dts-pagination .page-numbers.current { background: var(--dts-ink); border-color: var(--dts-ink); color: var(--dts-white); }

.dts-404 { text-align: center; max-width: 40rem; margin-inline: auto; }
.dts-404__code {
	font-family: var(--dts-font-display); font-weight: 800; font-size: clamp(4rem, 14vw, 8rem);
	line-height: 1; color: var(--dts-green); letter-spacing: -.05em; margin-bottom: .5rem;
}
.dts-search-form { display: flex; gap: .5rem; max-width: 26rem; margin-inline: auto; }
.dts-search-form input[type="search"] { flex: 1; }

.dts-post-meta { font-size: .875rem; color: var(--dts-slate); margin-bottom: 1rem; }
.dts-post-list { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }

.dts-project-detail__facts {
	display: grid; gap: 1px; background: var(--dts-line); border-radius: var(--dts-radius-lg); overflow: hidden;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); margin-bottom: 2rem;
}
.dts-project-detail__facts div { background: var(--dts-white); padding: 1.15rem 1.25rem; }
.dts-project-detail__facts dt {
	font-family: var(--dts-font-display); font-size: .75rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--dts-slate); margin-bottom: .3rem;
}
.dts-project-detail__facts dd { margin: 0; font-family: var(--dts-font-display); font-weight: 700; font-size: 1.0625rem; }
.dts-gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.dts-gallery img { border-radius: var(--dts-radius-lg); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- 15  Bewegung & Barrierefreiheit ----------------------------- */
[data-dts-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s var(--dts-ease), transform .7s var(--dts-ease);
	will-change: opacity, transform;
}
[data-dts-reveal].is-visible { opacity: 1; transform: none; }
.no-js [data-dts-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	[data-dts-reveal] { opacity: 1 !important; transform: none !important; }
	.dts-card:hover, .dts-project:hover, .dts-btn:hover, .dts-cta__tile:hover { transform: none; }
}

@media print {
	.dts-header, .dts-footer, .dts-mobile-cta, .dts-nav-toggle, .dts-cta, form { display: none !important; }
	body { color: #000; background: #fff; font-size: 11pt; }
	a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}

/* ---------- 16  Block-Stile aus dem Editor ------------------------------ */
.is-style-lead {
	font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
	color: var(--dts-slate);
	line-height: 1.65;
}
.dts-section--dark .is-style-lead { color: #c3cace; }

.is-style-eyebrow {
	display: flex; align-items: center; gap: .75rem;
	font-family: var(--dts-font-display);
	font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--dts-green);
}
.is-style-eyebrow::before {
	content: ""; width: 2rem; height: 3px; flex: none;
	background: var(--dts-green); border-radius: 2px;
}
.dts-section--dark .is-style-eyebrow { color: var(--dts-green-bright); }

.wp-block-group.is-style-karte {
	background: var(--dts-white);
	border: 1px solid var(--dts-line);
	border-radius: var(--dts-radius-lg);
	padding: clamp(1.5rem, 2.5vw, 2rem);
}
.dts-section--dark .wp-block-group.is-style-karte {
	background: var(--dts-ink-soft);
	border-color: rgba(255, 255, 255, .1);
}

.wp-block-image.is-style-schatten img { box-shadow: var(--dts-shadow-md); }


/* ---------- 17  Hero: Originalfoto, Text im linken Drittel --------------
   Das Foto wird nicht verändert. Der Ausschnitt ist so gelegt, dass die
   Türme von St. Jakobi und St. Nikolai auf keiner Bildschirmbreite
   angeschnitten werden. Die Höhe wächst mit der Fensterbreite, dadurch
   bleibt der Ausschnitt auf jedem Monitor gleich.

   Die Textspalte ist absichtlich schmal, damit die Altstadt daneben frei
   sichtbar bleibt. Deshalb hier auch die höhere Spezifität (.dts-hero-cover
   davor) – sonst gewinnt die Layout-Regel von WordPress.                    */
.dts-hero-cover.wp-block-cover {
	background-color: var(--dts-ink);
	min-height: clamp(30rem, 46vw, 46rem);
	padding-block: clamp(2.5rem, 4vw, 4rem);
	padding-inline: clamp(1.25rem, 3.5vw, 5rem);
	align-items: center;
	isolation: isolate;
}

/* Das Panorama ist querformatig (1,41:1). Die beiden Türme – St. Jakobi links,
   St. Nikolai rechts – liegen zwischen 24 % und 53 % der Bildhöhe. Bei diesem
   Ausschnitt bleiben beide vollständig im Bild, darunter Altstadtdächer und
   Hafen. */
.dts-hero-cover .wp-block-cover__image-background {
	object-fit: cover;
	object-position: 50% 45%;
}

/* Nur ein weicher Verlauf hinter dem Text, nach rechts läuft er vollständig
   aus – keine abgedunkelte Bildhälfte. */
.dts-hero-cover.wp-block-cover .wp-block-cover__background {
	background-color: transparent !important;
	background-image:
		linear-gradient(94deg,
			rgba(19, 19, 19, .92) 0%,
			rgba(19, 19, 19, .86) 16%,
			rgba(19, 19, 19, .66) 26%,
			rgba(19, 19, 19, .34) 34%,
			rgba(19, 19, 19, .10) 42%,
			rgba(19, 19, 19, 0) 50%),
		linear-gradient(to top, rgba(19, 19, 19, .30) 0%, rgba(19, 19, 19, 0) 22%);
	opacity: 1 !important;
}

.dts-hero-cover .wp-block-cover__inner-container { position: relative; z-index: 1; }

.dts-hero-cover .dts-hero__text-col {
	/* Breit genug, dass "Dachdeckerhandwerk" in jeder Fenstergrösse in eine
	   Zeile passt, und schmal genug, dass der Text im linken Drittel bleibt. */
	max-width: min(34rem, 33vw);
	margin-inline: 0;
}
/* Der Cover-Block läuft bewusst im Flow-Layout: Sonst zentriert WordPress
   den Inhalt mit !important und der Text ließe sich nicht nach links legen. */
.dts-hero-cover .wp-block-cover__inner-container { width: 100%; }

.dts-hero-cover h1 {
	color: var(--dts-white);
	margin-bottom: 1.1rem;
	font-size: clamp(1.75rem, .9rem + 1.4vw, 2.75rem);
	/* Keine Silbentrennung und kein Bruch im Wort: Ortsnamen wie "Stralsund"
	   müssen vollständig bleiben. Reicht der Platz nicht, wird vor dem ganzen
	   Wort umgebrochen. */
	hyphens: none;
	word-break: normal;
	overflow-wrap: normal;
}

/* Der grüne Akzent im Titel ist ein <mark>. Ohne eigene Regel setzt der Browser
   dort seinen gelben Standardhintergrund. Die Auszeichnung im Blockmarkup kann
   beim Speichern durch die CSS-Filterung von WordPress verlorengehen, deshalb
   steht die Absicherung hier im Stylesheet. */
.dts-hero-cover h1 mark {
	background-color: transparent;
	color: var(--dts-green-bright);
}
.dts-hero-cover .is-style-eyebrow { color: var(--dts-green-bright); }
.dts-hero-cover .dts-hero__text {
	font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
	color: #d8dbd8;
	margin-bottom: 1.75rem;
	line-height: 1.6;
}
.dts-hero-cover .wp-block-buttons { margin-bottom: 0; }
.dts-hero-cover .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--dts-white); border-color: rgba(255, 255, 255, .45); background: transparent;
}
.dts-hero-cover .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--dts-white); color: var(--dts-ink); border-color: var(--dts-white);
}

/* Unter 1280 px reicht der Platz neben dem Text nicht mehr. Statt Text über
   das Motiv zu legen, wird gestapelt: erst das vollständige Foto, darunter der
   Text auf dunklem Grund. So bleibt das Bild nahezu unbeschnitten – beide
   Kirchtürme stehen vollständig im Bild. */
@media (max-width: 1279px) {
	.dts-hero-cover.wp-block-cover {
		display: block;
		min-height: 0;
		padding: 0;
		background-color: var(--dts-ink);
	}
	.dts-hero-cover .wp-block-cover__background { display: none; }
	.dts-hero-cover .wp-block-cover__image-background {
		position: static;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
		object-fit: cover;
		object-position: 50% 45%;
	}
	.dts-hero-cover .wp-block-cover__inner-container {
		padding: clamp(1.75rem, 5vw, 2.75rem) var(--dts-gutter) clamp(2.25rem, 6vw, 3.25rem);
	}
	.dts-hero-cover .dts-hero__text-col { max-width: 40rem; }
	.dts-hero-cover h1 { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem); }
}

/* Smartphone: 4:3 liegt sehr nahe am Seitenverhältnis des Fotos, es wird nur
   ein schmaler Rand seitlich abgeschnitten. Mittig ausgerichtet, damit beide
   Kirchtürme stehen bleiben. */
@media (max-width: 599px) {
	.dts-hero-cover .wp-block-cover__image-background {
		aspect-ratio: 4 / 3;
		object-position: 50% 50%;
	}
}

/* Zweispaltiges Modul innerhalb von Gutenberg-Sektionen */
.dts-split > .wp-block-group { margin: 0; }
.dts-split__media .wp-block-image { margin: 0; }
.dts-split__media .wp-block-image img { border-radius: var(--dts-radius-lg); box-shadow: var(--dts-shadow-md); width: 100%; }

/* Volle Breite innerhalb von Sektionen sauber begrenzen */
.dts-section > .wp-block-group__inner-container,
.dts-section .dts-section-head { margin-inline: auto; }

/* ---------- 18  Logo im Header und im Footer ---------------------------- */
/* Das Logo bleibt unangetastet: keine Beschnitte, keine Farbänderungen. */
.dts-brand--light .dts-brand__logo { height: clamp(58px, 6.5vw, 84px); width: auto; }
.dts-header.is-compact .dts-brand--light .dts-brand__logo,
body.dts-nav-open .dts-brand--light .dts-brand__logo { height: 60px; }

/* Menü offen: Header kompakt, damit die Navigation sauber darunter beginnt. */
body.dts-nav-open .dts-header__inner { height: var(--dts-header-h-compact); }

/* Footer: das Logo steht auf einer hellen Fläche, statt es einzufärben. */
.dts-brand--dark {
	display: inline-flex;
	background: var(--dts-white);
	padding: .9rem 1.15rem;
	border-radius: var(--dts-radius-lg);
}
.dts-brand--dark .dts-brand__logo { height: clamp(70px, 7vw, 88px); width: auto; }

@media (max-width: 1199px) {
	:root { --dts-header-h: 96px; --dts-header-h-compact: 78px; }
	.dts-brand--light .dts-brand__logo { height: 62px; }
	.dts-header.is-compact .dts-brand--light .dts-brand__logo { height: 54px; }
}

@media (max-width: 599px) {
	:root { --dts-header-h: 100px; --dts-header-h-compact: 84px; }
	.dts-brand--light .dts-brand__logo { height: 68px; }
	.dts-header.is-compact .dts-brand--light .dts-brand__logo,
	body.dts-nav-open .dts-brand--light .dts-brand__logo { height: 58px; }
	.dts-header__inner { gap: .75rem; }
	.dts-header__actions { gap: .5rem; }
	.dts-brand--dark { padding: .75rem .9rem; }
	.dts-brand--dark .dts-brand__logo { height: 76px; }
}

@media (max-width: 399px) {
	:root { --dts-header-h: 92px; --dts-header-h-compact: 80px; }
	.dts-brand--light .dts-brand__logo { height: 60px; }
	.dts-header__phone, .dts-nav-toggle { width: 44px; height: 44px; }
}

/* Meisterbetrieb-Siegel im Teaser der Startseite: Logo auf heller Karte,
   bewusst ohne Personenfoto. */
.dts-siegel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	text-align: center;
	background: var(--dts-white);
	border: 1px solid var(--dts-line);
	border-radius: var(--dts-radius-lg);
	padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
	box-shadow: var(--dts-shadow-sm);
}
.dts-siegel__logo { margin: 0; }
.dts-siegel__logo img {
	width: auto;
	max-width: min(100%, 15rem);
	height: auto;
	border-radius: 0;
	box-shadow: none;
}
.dts-siegel__text {
	margin: 0;
	font-family: var(--dts-font-display);
	font-weight: 700;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--dts-slate);
	letter-spacing: .01em;
}
.dts-siegel::after {
	content: "";
	width: 3rem;
	height: 3px;
	border-radius: 2px;
	background: var(--dts-green);
}

/* Porträt auf "Über uns": vollständige Darstellung, kein weiterer Beschnitt.
   Eigene Klasse, damit andere Bilder davon unberührt bleiben. */
.dts-about-portrait { margin: 0; }
.dts-about-portrait img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: fill;
	border-radius: var(--dts-radius-lg);
	box-shadow: var(--dts-shadow-md);
}

/* Einspaltig soll das Hochformat den Bildschirm nicht ausfüllen. */
@media (max-width: 899px) {
	.dts-about-portrait { max-width: 26rem; margin-inline: auto; }
}

/* Porträtbild in den Zweispaltern */
.dts-split__media .dts-portrait img {
	border-radius: var(--dts-radius-lg);
	box-shadow: var(--dts-shadow-md);
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* Sicherheitsfrage im Kontaktformular */
.dts-field--captcha { max-width: 22rem; }
.dts-field--captcha label { font-size: 1rem; }

/* Zwischen 1200 und 1400 px wird es im Header eng: Telefonnummer auf das
   Symbol reduzieren und die Navigation etwas enger setzen. */
@media (min-width: 1200px) and (max-width: 1399px) {
	/* Nur die Nummer ausblenden – das Symbol ist ebenfalls ein span. */
	.dts-header__phone span:not(.dts-i) { display: none; }
	.dts-header__phone {
		width: 44px; height: 44px; justify-content: center;
		border: 2px solid var(--dts-line); border-radius: var(--dts-radius);
	}
	.dts-nav a { padding: .6rem .6rem; }
	.dts-header__inner { gap: 1rem; }
	.dts-brand__claim { display: none; }
}

/* ---------- 19  Häufige Fragen ------------------------------------------ */
.dts-faq { display: grid; gap: .75rem; max-width: 52rem; }
.dts-faq .wp-block-details { --dts-i: var(--dts-i-pfeil); }
.dts-faq .wp-block-details {
	background: var(--dts-white);
	border: 1px solid var(--dts-line);
	border-radius: var(--dts-radius-lg);
	padding: 0;
	margin: 0;
	overflow: hidden;
	transition: border-color .25s var(--dts-ease), box-shadow .25s var(--dts-ease);
}
.dts-faq .wp-block-details[open] { border-color: transparent; box-shadow: var(--dts-shadow-sm); }
.dts-faq summary {
	display: flex; align-items: center; gap: 1rem;
	padding: 1.15rem 1.4rem;
	font-family: var(--dts-font-display); font-weight: 700; font-size: 1.0625rem;
	color: var(--dts-ink); cursor: pointer; list-style: none;
}
.dts-faq summary::-webkit-details-marker { display: none; }
.dts-faq summary::after {
	content: ""; margin-left: auto; flex: none;
	width: 1.15rem; height: 1.15rem;
	background-color: var(--dts-green);
	-webkit-mask: var(--dts-i) no-repeat center / contain;
	mask: var(--dts-i) no-repeat center / contain;
	transform: rotate(90deg);
	transition: transform .25s var(--dts-ease);
}
.dts-faq .wp-block-details[open] summary::after { transform: rotate(-90deg); }
.dts-faq summary:hover { color: var(--dts-green-dark); }
.dts-faq .wp-block-details > *:not(summary) {
	padding: 0 1.4rem 1.4rem;
	margin: 0;
	color: var(--dts-slate);
	font-size: 1rem;
	max-width: 46rem;
}