/* DK-Dach-Plugin: Website-Bausteine im Look „Variante B“
   Farben kommen aus „Farben & Design“ im Backend (CSS-Variablen).
   Viele Regeln sind mit #top verstärkt, weil Enfold Überschriften, Links und Absätze
   sehr spezifisch einfärbt (body hat dort id="top"). */

:root {
	--dki-schrift: inherit;
	--dki-schrift-titel: inherit;
	--dki-breite: 1240px;
	--dki-rand: 24px;
}

.dki { --dki-gap: clamp(16px, 2.4vw, 32px); color: var(--dki-dunkel); box-sizing: border-box; font-family: var(--dki-schrift); font-size: 17px; line-height: 1.6; }
.dki *, .dki *::before, .dki *::after { box-sizing: inherit; }
#top .dki p, .dki p { margin: 0 0 1em; font-family: var(--dki-schrift); }
/* Enfold färbt strong/b in der Akzentfarbe des Themes – hier soll die Farbe vom Baustein kommen */
#top .dki strong, #top .dki b, .dki strong, .dki b { color: inherit; }
.dki p:last-child { margin-bottom: 0; }
.dki img { max-width: 100%; height: auto; display: block; }

/* ---------- Überschriften (gegen Enfold-Farben und -Schriften abgesichert) ---------- */
#top .dki h1, #top .dki h2, #top .dki h3,
.dki h1, .dki h2, .dki h3 { font-family: var(--dki-schrift-titel); color: inherit; letter-spacing: 0; text-transform: uppercase; }

#top .dki .dki-heading, .dki .dki-heading {
	hyphens: auto; overflow-wrap: break-word;
	font-size: clamp(36px, 4.4vw, 56px); line-height: 1; font-weight: 700;
	margin: 0 0 22px; color: inherit;
}
.dki-heading::after { content: ""; display: block; width: 64px; height: 5px; background: var(--dki-akzent); margin-top: 16px; }
.dki-kopf-mitte { text-align: center; display: flex; flex-direction: column; align-items: center; }
.dki-kopf-mitte .dki-heading::after { margin-left: auto; margin-right: auto; }
.dki-kopf-mitte p { max-width: 34em; }
.dki-dachzeile { font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--dki-blau); margin-bottom: 14px; }
.dki-akzent { color: var(--dki-akzent-text); }
.dki-balken { display: block; width: 64px; height: 5px; background: var(--dki-akzent); }

/* ---------- Buttons ---------- */
#top .dki .dki-button, .dki-button, .dki .dki-button {
	display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
	background: var(--dki-akzent); color: #fff; border: 2px solid var(--dki-akzent); text-decoration: none;
	font-family: var(--dki-schrift-titel); font-weight: 700; font-size: 19px; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
	border-radius: var(--dki-radius); transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
#top .dki .dki-button:hover, #top .dki .dki-button:focus-visible, .dki .dki-button:hover, .dki .dki-button:focus-visible { background: var(--dki-akzent-text); border-color: var(--dki-akzent-text); color: #fff; }
#top .dki .dki-button:focus-visible, .dki .dki-button:focus-visible { outline: 3px solid var(--dki-blau); outline-offset: 3px; }
#top .dki .dki-button-linie, .dki .dki-button-linie { background: transparent; border-color: #fff; color: #fff; font-family: var(--dki-schrift); font-size: 17px; font-weight: 600; letter-spacing: .02em; text-transform: none; }
#top .dki .dki-button-linie:hover, #top .dki .dki-button-linie:focus-visible, .dki .dki-button-linie:hover, .dki .dki-button-linie:focus-visible { background: #fff; border-color: #fff; color: var(--dki-dunkel); }

/* ---------- Bänder: volle Breite + gleiche Abstände ---------- */
.dki-band { --dki-seite: var(--dki-rand); --dki-oben: clamp(64px, 8vw, 104px); position: relative; padding: var(--dki-oben) var(--dki-seite); margin: 0; }
.dki-volle-breite .dki-band {
	width: 100vw; max-width: 100vw;
	margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
	--dki-seite: max(var(--dki-rand), calc((100vw - var(--dki-breite)) / 2));
	padding-left: var(--dki-seite);
	padding-right: var(--dki-seite);
}
html:has(.dki-volle-breite .dki-band), body.dki-volle-breite { overflow-x: clip; }
.dki-band { margin-top: 0 !important; margin-bottom: 0 !important; }
/* WordPress setzt zwischen Shortcodes gern leere Absätze – die sollen keine Lücken reißen */
p:empty:has(+ .dki-band), .dki-band + p:empty, .dki-band + br, p:has(> br:only-child):has(+ .dki-band) { display: none; }
.dki-band-bild { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; z-index: 0; }
.dki-band-inhalt { position: relative; z-index: 2; }

/* Raster */
.dki-grid {
	--dki-min: 230px; display: grid; gap: var(--dki-gap);
	grid-template-columns: repeat(auto-fill, minmax(max(var(--dki-min), calc((100% - (var(--dki-cols, 3) - 1) * var(--dki-gap)) / var(--dki-cols, 3))), 1fr));
}
.dki-team .dki-grid { --dki-min: 160px; }
.dki-cols-1 { --dki-cols: 1; } .dki-cols-2 { --dki-cols: 2; } .dki-cols-3 { --dki-cols: 3; } .dki-cols-4 { --dki-cols: 4; }
@media (max-width: 599px) { .dki-grid { --dki-min: 100%; } .dki-team .dki-grid { --dki-min: 140px; } }

/* ---------- Aktuelles ---------- */
.dki-aktuelles { background: var(--dki-blau); color: #fff; border-radius: var(--dki-radius); padding: clamp(24px, 4vw, 48px); margin: 0 0 var(--dki-gap); }
#top .dki-aktuelles *, .dki-aktuelles * { color: inherit; }
#top .dki .dki-aktuelles-titel, .dki .dki-aktuelles-titel { font-size: clamp(30px, 4vw, 48px); line-height: 1.05; font-weight: 700; margin: 0 0 .3em; }
.dki-aktuelles-titel span { display: block; }
#top .dki-aktuelles .dki-akzent, .dki-aktuelles .dki-akzent { color: #fff; opacity: .78; }
.dki-aktuelles-datum { display: inline-block; font-weight: 700; letter-spacing: .08em; border-bottom: 3px solid var(--dki-akzent); padding-bottom: 4px; }
.dki-punkte { list-style: none; margin: 1em 0; padding: 0; display: grid; gap: 12px; }
.dki-punkte li { padding-left: 22px; position: relative; }
.dki-punkte li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--dki-akzent); }
.dki-punkte strong, .dki-punkte span { display: block; }
.dki-punkte span { opacity: .85; }
.dki-hinweis { font-size: 14px; opacity: .85; margin: 1em 0 0 !important; }

/* ---------- Einstieg (Hero) ---------- */
.dki-hero { min-height: clamp(560px, 80vh, 760px); display: flex; align-items: center; background: var(--dki-dunkel); color: #fff; overflow: hidden; }
.dki-hero-bild { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; z-index: 0; }
.dki-hero-filter { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dki-hero-inner { position: relative; z-index: 2; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 32px; }

.dki-badge {
	width: 380px; height: 380px; flex: none; border-radius: 50%; background: var(--dki-akzent); color: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px; text-align: center;
	box-shadow: 0 18px 40px rgba(0,0,0,.35); transform: rotate(-5deg);
}
.dki-badge-chip { font-family: var(--dki-schrift-titel); font-weight: 700; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; background: rgba(0,0,0,.22); padding: 4px 12px; border-radius: 999px; }
.dki-badge-titel { font-family: var(--dki-schrift-titel); font-weight: 700; font-size: 38px; line-height: 1; text-transform: uppercase; }
.dki-badge-text { font-size: 17px; line-height: 1.4; }
#top .dki .dki-badge-link, .dki-badge-link, .dki .dki-badge-link {
	display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 6px 14px; border: 2px solid #fff; border-radius: 16px;
	font-family: var(--dki-schrift-titel); font-weight: 700; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-decoration: none;
}
.dki-badge-link span { width: 10px; height: 10px; border-radius: 50%; background: #fff; display: inline-block; }
#top .dki .dki-badge-link:hover, #top .dki .dki-badge-link:focus-visible, .dki .dki-badge-link:hover, .dki .dki-badge-link:focus-visible { background: #fff; color: var(--dki-akzent-text); }
.dki-badge-platz { flex: 1 1 0; }

.dki-hero-box {
	width: min(100%, 470px); background: rgba(52,51,55,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff;
	border-radius: var(--dki-radius); padding: 48px 44px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px;
}
.dki-hero-portrait { width: 112px !important; height: 112px !important; border-radius: 50%; object-fit: cover; object-position: center 22%; border: 3px solid rgba(255,255,255,.85); }
#top .dki .dki-hero-titel, .dki .dki-hero-titel { margin: 0; color: #fff; font-size: clamp(40px, 4.4vw, 54px); line-height: .98; font-weight: 700; }
#top .dki .dki-werte, .dki-werte, .dki .dki-werte { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-family: var(--dki-schrift-titel); font-weight: 600; font-size: 20px; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.dki-wert { display: inline-flex; align-items: center; gap: 8px; }
.dki-wert > span { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dki-wert-0 > span { background: var(--dki-blau); }
.dki-wert-1 > span { background: #fff; }
.dki-wert-2 > span { background: var(--dki-akzent); }
#top .dki .dki-hero-box p, .dki .dki-hero-box p { color: #E9E8EC; font-weight: 300; }
.dki-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

@media (max-width: 899px) {
	.dki-hero-inner { flex-direction: column; align-items: center; }
	.dki-badge { width: 280px; height: 280px; padding: 28px; gap: 6px; }
	.dki-badge-titel { font-size: 30px; }
	.dki-badge-text { font-size: 15px; }
	#top .dki .dki-badge-link, .dki-badge-link, .dki .dki-badge-link { font-size: 15px; letter-spacing: .08em; padding: 5px 12px; white-space: nowrap; }
	.dki-badge-platz { display: none; }
	.dki-hero-box { padding: 36px 24px; }
}

/* ---------- Leistungen: dunkles Band ---------- */
.dki-leistungen { background: var(--dki-dunkel); color: #fff; overflow: hidden; }
.dki-leistungen.has-bild::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--dki-dunkel); opacity: .84; }
#top .dki-leistungen .dki-heading, #top .dki-leistungen h3, .dki-leistungen .dki-heading, .dki-leistungen h3 { color: #fff; }
#top .dki-leistungen .dki-dachzeile, .dki-leistungen .dki-dachzeile { color: #C9C8CC; font-weight: 500; letter-spacing: .22em; }
#top .dki-leistungen p, .dki-leistungen p { color: #E3E2E6; font-weight: 300; }
.dki-leistungen .dki-kopf { margin-bottom: 56px; }
.dki-leistungen-raster {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
	border-top: 1px solid rgba(255,255,255,.22); border-left: 1px solid rgba(255,255,255,.22);
}
.dki-leistung { padding: 40px 36px; border-right: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); display: flex; flex-direction: column; gap: 14px; }
.dki-icon { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#top .dki .dki-leistung h3, .dki .dki-leistung h3 { margin: 0; font-family: var(--dki-schrift); font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: .18em; }

/* ---------- Projekte ---------- */
.dki-projekte { background: #fff; }
.dki-projekte-start .dki-kopf { margin-bottom: 40px; }
.dki-referenz { position: relative; border-radius: var(--dki-radius); overflow: hidden; min-height: 520px; display: flex; align-items: flex-end; background: var(--dki-dunkel); margin-bottom: 12px; }
.dki-referenz-bild { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
.dki-referenz-text { position: relative; margin: 32px; max-width: 480px; background: rgba(52,51,55,.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; border-radius: var(--dki-radius); padding: 30px 32px; display: flex; flex-direction: column; gap: 12px; }
#top .dki-referenz-text .dki-dachzeile, .dki-referenz-text .dki-dachzeile { color: #C9C8CC; font-weight: 500; letter-spacing: .22em; margin: 0; }
#top .dki .dki-referenz-text h3, .dki .dki-referenz-text h3 { margin: 0; color: #fff; font-size: 34px; line-height: 1.02; font-weight: 700; }
#top .dki-referenz-text p, .dki-referenz-text p { color: #E3E2E6; font-weight: 300; }
.dki-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.dki-kachel { margin: 0; position: relative; border-radius: var(--dki-radius); overflow: hidden; aspect-ratio: 1 / 1; background: var(--dki-hell); }
.dki-kachel img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .5s ease; }
.dki-kachel:hover img { transform: scale(1.04); }
.dki-kachel figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; background: linear-gradient(to top, rgba(52,51,55,.85), rgba(52,51,55,0)); color: #fff; }
.dki-kachel figcaption strong { display: block; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 15px; }
.dki-kachel figcaption em { font-style: normal; font-size: 14px; color: #E3E2E6; }
#top .dki .dki-kachel-alle, .dki .dki-kachel-alle { border: 1px solid var(--dki-dunkel); color: var(--dki-dunkel); background: #fff; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; font-weight: 300; font-size: 26px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; transition: background-color .2s ease, color .2s ease; }
#top .dki .dki-kachel-alle:hover, #top .dki .dki-kachel-alle:focus-visible, .dki .dki-kachel-alle:hover, .dki .dki-kachel-alle:focus-visible { background: var(--dki-dunkel); color: #fff; }

.dki-projekte-raster { background: var(--dki-hell); }
.dki-werkzeugleiste {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
	/* weißer Streifen über die ganze Breite oben im Abschnitt, wie im Entwurf */
	background: #fff; border-bottom: 1px solid #E6E5E8;
	margin: calc(-1 * var(--dki-oben)) calc(-1 * var(--dki-seite)) 56px;
	padding: 28px var(--dki-seite);
}
.dki-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.dki-filter button { min-height: 44px; padding: 0 18px; border: 1.5px solid #C9C8CC; background: #fff; color: var(--dki-dunkel); border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.dki-filter button[aria-pressed="true"] { background: var(--dki-dunkel); border-color: var(--dki-dunkel); color: #fff; }
.dki-filter button:focus-visible { outline: 3px solid var(--dki-blau); outline-offset: 2px; }
.dki-projektkarten { --dki-min: 300px; }
.dki-projekt { margin: 0; background: #fff; border-radius: var(--dki-radius); overflow: hidden; display: flex; flex-direction: column; }
.dki-projekt[hidden] { display: none; }
.dki-projekt-haupt img { width: 100% !important; aspect-ratio: 4 / 3; height: auto !important; object-fit: cover; }
.dki-projekt-zusatz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px 6px 0; }
.dki-projekt-zusatz img, .dki-projekt-zusatz .dki-leer { width: 100% !important; aspect-ratio: 3 / 2; height: auto !important; object-fit: cover; border-radius: 10px; display: block; background: var(--dki-hell); }
.dki-projekt-text { padding: 20px 22px 24px; border-left: 5px solid var(--dki-akzent); margin-top: 16px; flex: 1; }
.dki-projekt-meta { font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--dki-blau); text-transform: uppercase; }
#top .dki .dki-projekt-text h3, .dki .dki-projekt-text h3 { margin: 6px 0 10px; font-size: 28px; line-height: 1.05; font-weight: 700; color: var(--dki-dunkel); }
#top .dki-tags, .dki-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
#top .dki-tags li, .dki-tags li { margin: 0; color: var(--dki-blau); padding: 4px 10px; border-radius: 10px; border: 1px solid #B7D4E8; font-size: 13px; font-weight: 600; }

/* ---------- Stimmen ---------- */
.dki-stimmen { background: #fff; }
.dki-stimme { margin: 0; background: #fff; border: 1px solid #E6E5E8; border-radius: var(--dki-radius); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.dki-stimme blockquote { margin: 0; padding: 0; border: 0; font-size: 18px; line-height: 1.55; font-style: normal; }
.dki-stimme blockquote::before { content: "„"; display: block; font-size: 64px; line-height: .6; color: var(--dki-akzent); font-weight: 700; margin-bottom: 8px; }
.dki-stimme figcaption strong { display: block; }
.dki-stimme figcaption span { display: block; font-size: 14px; color: var(--dki-blau); letter-spacing: .04em; }

/* ---------- Team ---------- */
.dki-team { background: var(--dki-hell); }
.dki-team-chef { display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: stretch; }
.dki-team-links { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.dki-team-links p { color: #55545A; max-width: 30em; margin: 0; }
.dki-team-links .dki-heading { margin-bottom: 0; }
.dki-team-raster { flex: 2 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 28px 20px; align-content: start; }
.dki-person { margin: 0; }
.dki-person img, .dki-person-platzhalter { width: 100% !important; height: auto !important; aspect-ratio: 5 / 6; object-fit: cover; object-position: center 30%; border-radius: var(--dki-radius); background: #fff; }
.dki-person figcaption { padding-top: 12px; }
.dki-person figcaption strong { display: block; font-size: 18px; }
.dki-person figcaption span { display: block; font-size: 14px; color: var(--dki-akzent-text); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.dki-person-gross { position: relative; margin-top: 8px; }
.dki-person-gross img { object-position: center 25%; }
.dki-person-gross figcaption { position: absolute; left: 0; bottom: 24px; background: #fff; padding: 14px 20px; border-left: 6px solid var(--dki-blau); }
.dki-person-gross figcaption strong { font-size: 20px; }
#top .dki-person-gross figcaption span, .dki-person-gross figcaption span { color: var(--dki-blau); }

/* ---------- Werte-Kacheln ---------- */
.dki-volle-breite .dki-werte-band, .dki-werte-band { padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.dki-wert-kachel { padding: 64px 48px; min-height: 300px; display: flex; flex-direction: column; justify-content: center; color: #fff; }
#top .dki .dki-wert-kachel p, .dki .dki-wert-kachel p { margin: 0; color: #fff; font-weight: 300; font-size: clamp(20px, 2vw, 26px); line-height: 1.75; letter-spacing: .08em; text-transform: uppercase; }
.dki-wert-blau { background: var(--dki-blau); } .dki-wert-grau { background: var(--dki-grau); } .dki-wert-akzent { background: var(--dki-akzent); } .dki-wert-dunkel { background: var(--dki-dunkel); }

/* ---------- Spenglerwerkstatt ---------- */
.dki-volle-breite .dki-werkstatt, .dki-werkstatt { padding: 0 !important; display: flex; flex-wrap: wrap; background: var(--dki-dunkel); color: #fff; }
.dki-werkstatt-bild { flex: 1 1 520px; min-width: 0; width: 100% !important; height: auto !important; min-height: 560px; object-fit: cover; }
.dki-werkstatt-text { flex: 1 1 480px; min-width: 0; padding: 88px clamp(24px, 6vw, 88px); display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.dki-werkstatt:not(.has-bild) .dki-werkstatt-text { max-width: var(--dki-breite); margin: 0 auto; }
#top .dki-werkstatt .dki-dachzeile, .dki-werkstatt .dki-dachzeile { color: #C9C8CC; font-weight: 500; letter-spacing: .22em; margin: 0; }
#top .dki-werkstatt .dki-heading, .dki-werkstatt .dki-heading { color: #fff; margin: 0; }
#top .dki-werkstatt p, .dki-werkstatt p { color: #E3E2E6; font-weight: 300; max-width: 32em; }
.dki-werkstatt-klein { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.dki-werkstatt-klein img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--dki-radius); }

/* ---------- Mitglieds-Logos ---------- */
.dki-mitglieder { background: #fff; padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.dki-mitglieder .dki-dachzeile { margin: 0; color: #6A6970; }
#top .dki-logos, .dki-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 56px; }
#top .dki-logos li, .dki-logos li { margin: 0; padding: 0; }
.dki-logos img { height: 64px !important; width: auto !important; max-width: 220px; object-fit: contain; }

/* ---------- Qualifikationen ---------- */
.dki-quali { background: var(--dki-hell); display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: center; }
.dki-quali-text { flex: 1 1 380px; min-width: 0; }
.dki-quali-person { display: flex; align-items: center; gap: 22px; margin: 8px 0 20px; }
.dki-quali-portrait { width: 128px !important; height: 128px !important; border-radius: 50%; object-fit: cover; object-position: center 22%; border: 4px solid #fff; box-shadow: 0 10px 24px rgba(0,0,0,.15); flex: none; }
.dki-quali-person strong { display: block; font-family: var(--dki-schrift-titel); font-size: 26px; line-height: 1.1; text-transform: uppercase; }
.dki-quali-titel { display: block; color: var(--dki-akzent-text); font-weight: 600; letter-spacing: .04em; }
.dki-quali-zusatz { display: block; color: var(--dki-grau); font-size: 15px; }
.dki-quali-text p { color: #55545A; max-width: 30em; }
.dki-urkunden-box { flex: 1 1 520px; min-width: 0; }
.dki-urkunden { list-style: none; margin: 0; padding: 0; display: grid; }
#top .dki-urkunden li, .dki-urkunden li { margin: 0; padding: 0; list-style: none; }
.dki-urkunden-quer { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 36px 32px; align-items: end; }
.dki-urkunden-weitere { margin-top: 48px; padding-top: 28px; border-top: 1px solid #E0DED6; }
.dki-urkunden-weitere:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.dki-dachzeile-grau { color: var(--dki-grau); }
.dki-urkunden-hoch { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 24px 20px; align-items: start; }
.dki-urkunde { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; color: inherit; text-align: center; }
.dki-urkunde-blatt { display: block; background: #fff; padding: 10px; border-radius: 4px; box-shadow: 0 14px 30px rgba(0,0,0,.14); transition: transform .25s ease; }
.dki-urkunden-hoch .dki-urkunde-blatt { padding: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.dki-urkunde:hover .dki-urkunde-blatt, .dki-urkunde:focus-visible .dki-urkunde-blatt { transform: rotate(0deg) scale(1.03) !important; }
.dki-urkunde:focus-visible { outline: 3px solid var(--dki-blau); outline-offset: 6px; }
.dki-urkunde-blatt img { width: 100%; height: auto; display: block; }
.dki-urkunde-titel { display: block; margin-top: 18px; font-weight: 600; font-size: 15px; }
.dki-urkunden-hoch .dki-urkunde-titel { margin-top: 12px; font-size: 14px; line-height: 1.3; }
.dki-urkunde-jahr { display: block; font-size: 14px; color: var(--dki-blau); letter-spacing: .08em; }
.dki-lightbox { border: 0; padding: 16px; border-radius: 6px; width: min(820px, 92vw); max-height: 92vh; }
.dki-lightbox::backdrop { background: rgba(52,51,55,.86); }
.dki-lightbox img { width: 100%; max-height: 74vh; object-fit: contain; display: block; }
.dki-lightbox-fuss { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; }
.dki-lightbox-zu { min-height: 44px; padding: 0 20px; border: 2px solid var(--dki-dunkel); background: #fff; color: var(--dki-dunkel); border-radius: var(--dki-radius); font-family: var(--dki-schrift-titel); font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }

/* ---------- Kontakt ---------- */
.dki-kontakt { display: grid; gap: 20px; }
.dki-kontakt-adresse span, .dki-kontakt-firma { display: block; }
.dki-kontakt-firma { font-size: 19px; margin-bottom: 4px; }
.dki-kontakt-wege { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.dki-kontakt-wege dt { color: #6A6970; }
.dki-kontakt-wege dd { margin: 0; }
#top .dki-kontakt a, #top .dki-notdienst a, .dki-kontakt a, .dki-notdienst a { color: var(--dki-blau); text-decoration: none; }
#top .dki-kontakt a:hover, #top .dki-notdienst a:hover, .dki-kontakt a:hover, .dki-notdienst a:hover { color: var(--dki-akzent-text); }
.dki-zeiten { list-style: none; margin: 4px 0 0; padding: 0; }
.dki-notdienst { border-left: 5px solid var(--dki-akzent); padding: 10px 14px; background: var(--dki-hell); margin: 0; }

/* ---------- Sortier-Umschalter ---------- */
.dki-sortierung { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 28px; }
.dki-sortierung span { font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #6A6970; }
.dki-sortierung button { min-height: 44px; padding: 0 16px; border: 1px solid var(--dki-dunkel); background: #fff; color: var(--dki-dunkel); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; border-radius: var(--dki-radius); }
.dki-sortierung button[aria-pressed="true"] { background: var(--dki-dunkel); color: #fff; }
.dki-sortierung button:focus-visible { outline: 3px solid var(--dki-blau); outline-offset: 2px; }

/* ---------- Anfrage-Block (Fußzeile) ---------- */
.dki-fusszeile { background: var(--dki-dunkel); color: #fff; overflow: hidden; }
.dki-fusszeile-bild { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.dki-fusszeile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--dki-dunkel); opacity: .82; }
.dki-fusszeile-inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.dki-fusszeile-text { display: flex; flex-direction: column; align-items: center; gap: 22px; }
#top .dki-fusszeile h2, .dki-fusszeile h2 { color: #fff; font-size: clamp(36px, 4.6vw, 56px); line-height: 1; font-weight: 700; margin: 0; }
.dki-fusszeile h2::after { content: ""; display: block; width: 64px; height: 5px; background: var(--dki-akzent); margin: 22px auto 0; }
#top .dki-fusszeile .dki-akzent, .dki-fusszeile .dki-akzent { color: #fff; }
#top .dki-fusszeile p, .dki-fusszeile p { color: #E3E2E6; font-weight: 300; max-width: 34em; margin: 0; }
.dki-fusszeile-aktionen { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; }
#top .dki .dki-fusszeile-tel, .dki .dki-fusszeile-tel { color: #fff; text-decoration: none; font-weight: 300; font-size: 30px; letter-spacing: .08em; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 2px; }
#top .dki .dki-fusszeile-tel:hover, .dki .dki-fusszeile-tel:hover { border-bottom-color: #fff; }

/* ---------- Karte (2-Klick) ---------- */
.dki-karte { position: relative; border-radius: var(--dki-radius); overflow: hidden; background-color: #E3E8EC; background-image: linear-gradient(90deg, rgba(255,255,255,.9) 0 10px, transparent 10px), linear-gradient(0deg, rgba(255,255,255,.9) 0 10px, transparent 10px); background-size: 160px 160px, 120px 120px; display: flex; align-items: center; justify-content: center; padding: 24px; }
.dki-karte-hinweis { background: #fff; border-radius: var(--dki-radius); padding: 22px 24px; max-width: 380px; box-shadow: 0 10px 30px rgba(0,0,0,.12); display: flex; flex-direction: column; gap: 12px; }
.dki-karte-hinweis span { font-size: 14px; color: #4A4A4A; }
.dki-karte-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.dki-karte-laden { min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--dki-radius); background: var(--dki-blau); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.dki-karte-laden:focus-visible { outline: 3px solid var(--dki-akzent); outline-offset: 2px; }
.dki-karte.is-geladen { padding: 0; background: none; }
.dki-karte iframe { width: 100%; height: 100%; min-height: inherit; border: 0; display: block; }

/* ---------- Footer ---------- */
.dki-footer { background: #fff; color: var(--dki-dunkel); padding-top: 48px; padding-bottom: 0; }
.dki-footer-oben { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 56px; padding-bottom: 32px; }
.dki-footer-logo { height: 64px !important; width: auto !important; }
.dki-footer-spalte { flex: 0 1 auto; min-width: 0; line-height: 1.7; font-weight: 300; font-size: 15px; }
.dki-footer-spalte strong { display: block; margin-bottom: 4px; font-weight: 600; }
#top .dki-footer a, .dki-footer a { color: var(--dki-blau); text-decoration: none; }
#top .dki-footer a:hover, .dki-footer a:hover { color: var(--dki-akzent-text); }
.dki-footer-unten {
	background: var(--dki-dunkel); color: #C9C8CC; font-size: 13px; letter-spacing: .08em;
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 14px var(--dki-rand);
	margin: 0 calc(-1 * var(--dki-rand));
}
.dki-volle-breite .dki-footer-unten {
	margin: 0 calc(-1 * max(var(--dki-rand), calc((100vw - var(--dki-breite)) / 2)));
	padding-left: max(var(--dki-rand), calc((100vw - var(--dki-breite)) / 2));
	padding-right: max(var(--dki-rand), calc((100vw - var(--dki-breite)) / 2));
}
.dki-footer-links { display: flex; gap: 20px; }
#top .dki-footer .dki-footer-unten a, .dki-footer .dki-footer-unten a { color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.dki-urkunde-blatt, .dki-projekt img, .dki-button { transition: none; }
}

/* ---------- Anfrage-Formular „Schnell gefragt“ ---------- */
.dki-anfrage { background: #fff; text-align: center; }
.dki-anfrage .dki-kopf { margin-bottom: 8px; }
.dki-unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dki-honig { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dki-anfrage-form { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
#top .dki .dki-themen, .dki-themen, .dki .dki-themen { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.dki-thema { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid #C9C8CC; border-radius: 999px; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.dki-thema input { accent-color: var(--dki-akzent); margin: 0; width: 16px; height: 16px; }
.dki-thema:has(input:checked) { border-color: var(--dki-akzent); background: #FFF6EF; }
.dki-thema:has(input:focus-visible) { outline: 3px solid var(--dki-blau); outline-offset: 2px; }
.dki-anfrage-felder { width: min(100%, 620px); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 20px; text-align: left; }
.dki-feld-nachricht { grid-column: 1 / -1; }
#top .dki .dki-feld input, #top .dki .dki-feld textarea, .dki-feld input, .dki-feld textarea, .dki .dki-feld input, .dki .dki-feld textarea {
	width: 100%; min-height: 48px; margin: 0; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--dki-dunkel); border-radius: 0;
	background: transparent; box-shadow: none; font-family: var(--dki-schrift); font-size: 17px; color: var(--dki-dunkel);
}
#top .dki .dki-feld textarea, .dki .dki-feld textarea { resize: vertical; min-height: 72px; }
#top .dki .dki-feld input:focus, #top .dki .dki-feld textarea:focus, .dki .dki-feld input:focus, .dki .dki-feld textarea:focus { outline: none; border-bottom: 2px solid var(--dki-akzent); }
.dki-feld ::placeholder { color: #6A6970; opacity: 1; }
.dki-datenschutz { display: flex; align-items: flex-start; gap: 10px; max-width: 620px; text-align: left; font-size: 14px; line-height: 1.5; color: #55545A; cursor: pointer; }
.dki-datenschutz input { accent-color: var(--dki-akzent); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
#top .dki-datenschutz a, .dki-datenschutz a { color: var(--dki-blau); }
.dki-anfrage-meldung { max-width: 620px; margin: 8px auto 0 !important; padding: 16px 20px; border-radius: var(--dki-radius); text-align: left; }
.dki-anfrage-meldung.is-ok { background: var(--dki-hell); border-left: 5px solid var(--dki-akzent); font-size: 18px; }
.dki-anfrage-meldung.is-fehler { background: #FDF1EE; border-left: 5px solid #C0392B; color: #8E2A1F; margin-bottom: 16px !important; }

/* Sortierung als Segment-Schalter (Projekte-Seite) */
.dki-werkzeugleiste .dki-sortierung { margin: 0; }
.dki-segment { display: inline-flex; border: 1px solid var(--dki-dunkel); border-radius: var(--dki-radius); overflow: hidden; }
.dki-segment button { border: 0 !important; border-radius: 0 !important; }