/*
Theme Name: dakke
Theme URI: https://dakke.de/
Author: WebPiloten24
Author URI: https://webpiloten24.de/
Description: RTL-first theme for dakke.de, the Persian-language classifieds and help portal for Persian speakers in Germany. Works together with the plugin dakke-core (template API). Cream/sand/gold design with GSAP scroll motion, self-hosted Vazirmatn + Noto Naskh Arabic + Cormorant Garamond (OFL), no external requests, no jQuery.
Version: 2.1.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: dakke
*/

/* ------------------------------------------------------------------ */
/* Fonts, all self-hosted (no CDN).                                    */
/*                                                                     */
/* Body/UI: Vazirmatn 400/600/800 (OFL, assets/fonts/OFL.txt).         */
/* Display: one family "Dakke Display" that resolves by unicode-range  */
/*   - Arabic/Persian -> Noto Naskh Arabic (OFL). Chosen over          */
/*     Vazirmatn 300 after a screenshot comparison: the naskh has the  */
/*     stroke contrast and the long descenders that answer the         */
/*     reference's Cormorant serif; Vazirmatn Light stays geometric.   */
/*   - Latin -> Cormorant Garamond 400 + italic (OFL), for German and  */
/*     Latin words inside Persian headings, incl. the gold italic line */
/*     of the reference.                                               */
/* Persian script is NEVER letter-spaced (it breaks the joins);        */
/* .dk-spaced applies tracking and is only used on Latin text.         */
/* ------------------------------------------------------------------ */
@font-face {
	font-family: "Vazirmatn";
	src: url("assets/fonts/Vazirmatn-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Vazirmatn";
	src: url("assets/fonts/Vazirmatn-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Vazirmatn";
	src: url("assets/fonts/Vazirmatn-ExtraBold.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
/* Display, Arabic/Persian part (variable weight file). */
@font-face {
	font-family: "Dakke Display";
	src: url("assets/fonts/NotoNaskhArabic-arabic.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC;
}
/* Display, Latin part. */
@font-face {
	font-family: "Dakke Display";
	src: url("assets/fonts/CormorantGaramond-Regular-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	/* U+0030-0039 is deliberately missing: Cormorant's default figures are
	   old-style, so "50" reads as "5o" and "404" as "4o4" inside a heading.
	   Digits fall through to Vazirmatn instead (REVIEW-2A M1). */
	unicode-range: U+0000-002F, U+003A-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Dakke Display";
	src: url("assets/fonts/CormorantGaramond-Regular-latin-ext.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2113, U+A720-A7FF;
}
@font-face {
	font-family: "Dakke Display";
	src: url("assets/fonts/CormorantGaramond-Italic-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-002F, U+003A-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Dakke Display";
	src: url("assets/fonts/CormorantGaramond-Italic-latin-ext.woff2") format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2113, U+A720-A7FF;
}

/* ------------------------------------------------------------------ */
/* Metric-matched fallback faces (REVIEW-2A H3).                       */
/*                                                                      */
/* `font-display: swap` means the first paint uses a system font and    */
/* the webfont then replaces it. Without matching metrics that reflows   */
/* every paragraph and costs CLS 0.09-0.15. size-adjust is the ratio of  */
/* the average advance width of the webfont to the average advance width */
/* of the fallback, ascent/descent-override are the webfont's metrics    */
/* divided by that ratio.                                                */
/*                                                                      */
/* Measured with fontTools on the shipped .woff2 files and on            */
/* DejaVu Sans / DejaVu Serif, which is what `sans-serif` resolves to    */
/* here. Tahoma / Arial / Roboto are listed first for the platforms that */
/* have them; for those the numbers are an approximation, not a          */
/* measurement.                                                          */
/* The ratios are measured on rendered text, not on glyph averages: the   */
/* width of every real paragraph and heading of seven pages (255 body     */
/* strings, 112 headings), laid out once in the webfont and once in the   */
/* fallback, averaged.                                                    */
/*   Vazirmatn / DejaVu Sans  .9147   asc 1.0254  desc .5371             */
/*   Noto Naskh / DejaVu Sans .8486   asc 1.0690  desc .6340             */
/*   Cormorant / DejaVu Serif .7673   asc  .9240  desc .2870  (canvas)   */
/* ------------------------------------------------------------------ */
@font-face {
	font-family: "Vazirmatn Fallback";
	src: local("DejaVu Sans"), local("Tahoma"), local("Roboto"), local("Arial"), local("Helvetica Neue");
	size-adjust: 91.5%;
	ascent-override: 112.1%;
	descent-override: 58.7%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Dakke Display Fallback";
	src: local("DejaVu Sans"), local("Tahoma"), local("Roboto"), local("Arial"), local("Helvetica Neue");
	size-adjust: 84.9%;
	ascent-override: 125.9%;
	descent-override: 74.7%;
	line-gap-override: 0%;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
	font-family: "Dakke Display Fallback";
	src: local("DejaVu Serif"), local("Georgia"), local("Times New Roman"), local("Times");
	size-adjust: 76.7%;
	ascent-override: 120.5%;
	descent-override: 37.4%;
	line-gap-override: 0%;
	unicode-range: U+0000-002F, U+003A-00FF, U+0100-02BA, U+02BD-02C5, U+2000-206F;
}

/* ------------------------------------------------------------------ */
/* Tokens — cream / sand / dark brown / gold (reference azarmbau.de).  */
/*                                                                     */
/* Contrast (measured against --dk-cream #FAF7F0, L = 0.922):          */
/*   --dk-text   #3E2F1E  11.9:1   --dk-muted   #7A6248   5.4:1        */
/*   --dk-ink    #2C1F10  13.3:1   --dk-gold-600 #8A6524   4.9:1       */
/*   --dk-gold-500 #B8965A is decorative only (2.6:1) — lines, fills,  */
/*   and text on dark brown (5.7:1 there), never text on cream.        */
/* The old green token names are kept so every existing rule keeps     */
/* working; they now carry brown values.                               */
/* ------------------------------------------------------------------ */
:root {
	/* Surfaces */
	--dk-cream: #faf7f0;
	--dk-sand: #f2e9d8;
	--dk-sand-2: #eaddc8;
	--dk-surface: #fffcf5;

	/* Dark browns (were "green") */
	--dk-green-900: #2c1f10;
	--dk-green-800: #3a2a17;
	--dk-green-700: #5a4326;
	--dk-green-600: #7a6248;
	--dk-green-100: #eaddc8;
	--dk-green-50: #f5efe3;

	/* Gold */
	--dk-gold-500: #b8965a;
	--dk-gold-400: #cbae7c;
	--dk-gold-300: #dfc9a0;
	--dk-gold-100: #f7f0e2;
	--dk-gold-700: #7a5518;
	--dk-gold-600: #8a6524; /* gold dark enough for text/lines on cream: 4.9:1 */

	--dk-ink: #2c1f10;
	--dk-text: #3e2f1e;
	--dk-muted: #7a6248;
	--dk-line: #e3d7c2;
	--dk-bg: #faf7f0;
	--dk-bg-soft: #f2e9d8;
	--dk-focus: #8a6524; /* >= 3:1 on cream, sand and white (WCAG 1.4.11) */

	--dk-radius: 14px;
	--dk-radius-sm: 8px;
	--dk-radius-lg: 22px;
	--dk-shadow: 0 1px 2px rgba(44, 31, 16, .05), 0 6px 22px rgba(44, 31, 16, .07);
	--dk-shadow-lg: 0 18px 60px rgba(44, 31, 16, .18);
	--dk-wrap: 1200px;
	--dk-gutter: 16px;
	--dk-bbar-h: 64px;
	--dk-font: "Vazirmatn", "Vazirmatn Fallback", Tahoma, "Segoe UI", system-ui, sans-serif;
	--dk-display: "Dakke Display", "Dakke Display Fallback", "Vazirmatn", "Vazirmatn Fallback", Tahoma, serif;
	--dk-head-h: 68px;
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
	margin: 0;
	background: var(--dk-bg);
	color: var(--dk-text);
	font-family: var(--dk-font);
	font-size: 1rem;
	line-height: 1.8;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
	padding-block-end: calc(var(--dk-bbar-h) + env(safe-area-inset-bottom, 0px));
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--dk-green-700); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--dk-green-900); }
:focus-visible { outline: 3px solid var(--dk-focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { color: var(--dk-ink); line-height: 1.45; margin-block: 0 .5em; font-weight: 800; }
h1 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.25rem); }
h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }
h3 { font-size: 1.1rem; font-weight: 600; }
p { margin-block: 0 1em; }
ul, ol { padding-inline-start: 1.4em; }
button, input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-block-start: 1px solid var(--dk-line); margin-block: 2rem; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.dk-skip {
	position: absolute;
	inset-inline-start: 8px;
	inset-block-start: -100px;
	z-index: 100;
	background: var(--dk-gold-400);
	color: var(--dk-green-900);
	padding: .5rem 1rem;
	border-radius: var(--dk-radius-sm);
	font-weight: 600;
}
.dk-skip:focus { inset-block-start: 8px; }

/* Latin runs inside RTL text: phone, PLZ, URL, German. */
.dk-ltr, [dir="ltr"] { unicode-bidi: isolate; }
.dk-ltr { direction: ltr; display: inline-block; }

.dk-icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }
[dir="rtl"] .dk-icon--dir { transform: scaleX(-1); }
[dir="rtl"] .dk-icon--dir.dk-flip { transform: none; }
[dir="ltr"] .dk-icon--dir.dk-flip { transform: scaleX(-1); }

.dk-wrap {
	width: 100%;
	max-width: var(--dk-wrap);
	margin-inline: auto;
	padding-inline: var(--dk-gutter);
}
.dk-narrow { max-width: 820px; }
.dk-main { display: block; min-height: 50vh; }
.dk-main:focus { outline: none; }
.dk-muted { color: var(--dk-muted); }
.dk-small { font-size: .875rem; }
.dk-num { text-align: end; white-space: nowrap; }

/* ------------------------------------------------------------------ */
/* Buttons, badges, chips                                              */
/* ------------------------------------------------------------------ */
.dk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 48px;
	padding: .55em 1.25em;
	border-radius: 999px;
	border: 2px solid transparent;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
	text-align: center;
}
.dk-btn--primary { background: var(--dk-green-800); color: #fff; }
.dk-btn--primary:hover { background: var(--dk-green-900); color: #fff; }
.dk-btn--gold { background: var(--dk-gold-400); color: var(--dk-green-900); }
.dk-btn--gold:hover { background: var(--dk-gold-300); color: var(--dk-green-900); }
.dk-btn--ghost { background: var(--dk-surface); color: var(--dk-green-800); border-color: var(--dk-line); }
.dk-btn--ghost:hover { border-color: var(--dk-green-700); color: var(--dk-green-900); }
.dk-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.dk-btn--ghost-light:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .08); }
.dk-btn--lg { min-height: 54px; padding-inline: 1.6em; font-size: 1.05rem; }

.dk-badge {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .15em .7em;
	border-radius: 999px;
	background: var(--dk-green-50);
	color: var(--dk-green-800);
	border: 1px solid var(--dk-green-100);
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.7;
}
.dk-badge .dk-icon { width: 1.05em; height: 1.05em; }
.dk-badge--gold { background: var(--dk-gold-100); color: var(--dk-gold-700); border-color: var(--dk-gold-300); }
.dk-badge--green { background: var(--dk-green-100); color: var(--dk-green-900); border-color: transparent; }
.dk-badge--sm { font-size: .78rem; padding-inline: .55em; margin-block-start: .25rem; }

.dk-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.dk-chips a {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	min-height: 44px;
	padding: .35em 1em;
	border-radius: 999px;
	background: var(--dk-surface);
	border: 1px solid var(--dk-line);
	color: var(--dk-green-800);
	text-decoration: none;
	font-weight: 600;
}
.dk-chips a:hover { border-color: var(--dk-green-700); }
.dk-chips__n { color: var(--dk-muted); font-weight: 400; font-size: .85em; }
.dk-chips--sub { margin-block-end: 1.25rem; }

/* ------------------------------------------------------------------ */
/* Header + navigation                                                 */
/* ------------------------------------------------------------------ */
.dk-header, .dk-nav, .dk-hero, .dk-footer { --dk-focus: var(--dk-gold-400); } /* light gold on the dark brown / hero overlay */
.dk-header {
	background: var(--dk-green-900);
	color: #fff;
	position: relative;
	z-index: 30;
}
.dk-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 68px;
}
.dk-brand {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	color: #fff;
	text-decoration: none;
	flex: none;
	margin-inline-end: auto;
}
.dk-brand img { width: 50px; height: auto; }
.dk-brand__text { display: flex; flex-direction: column; line-height: 1.3; }
.dk-brand__name { font-weight: 800; font-size: 1.35rem; color: var(--dk-gold-300); }
.dk-brand__tag { font-size: .78rem; color: #d9c9ae; }
.dk-brand:hover, .dk-brand:hover .dk-brand__name { color: var(--dk-gold-300); }

.dk-navtoggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--dk-radius-sm);
	border: 1px solid rgba(255, 255, 255, .25);
	background: transparent;
	color: #fff;
	cursor: pointer;
}
.dk-navtoggle .dk-icon { width: 26px; height: 26px; }
.dk-navtoggle__close { display: none; }
.dk-nav-open .dk-navtoggle__open { display: none; }
.dk-nav-open .dk-navtoggle__close { display: block; }

.dk-nav {
	display: none;
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	background: var(--dk-green-900);
	border-block-start: 1px solid rgba(255, 255, 255, .12);
	padding: .5rem var(--dk-gutter) 1.25rem;
	border-block-end: 3px solid var(--dk-gold-400);
	box-shadow: 0 12px 24px rgba(0, 0, 0, .25);
}
.dk-nav-open .dk-nav { display: block; }
.dk-nav__list, .dk-nav ul { list-style: none; margin: 0; padding: 0; }
.dk-nav__list a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding-inline: .25rem;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	border-block-end: 1px solid rgba(255, 255, 255, .08);
}
.dk-nav__list a:hover, .dk-nav__list a[aria-current="page"], .dk-nav__list .current-menu-item > a { color: var(--dk-gold-300); }
.dk-nav__cta { margin-block-start: 1rem; width: 100%; }
.dk-nav .dk-btn--primary { background: var(--dk-gold-400); color: var(--dk-green-900); }
.dk-nav .dk-btn--primary:hover { background: var(--dk-gold-300); }

@media (min-width: 1100px) {
	.dk-header__inner { min-height: 80px; }
	.dk-brand img { width: 60px; }
	.dk-navtoggle { display: none; }
	.dk-nav {
		display: flex;
		align-items: center;
		gap: 1.25rem;
		position: static;
		padding: 0;
		border: 0;
		box-shadow: none;
		background: transparent;
		border-block-end: 0;
	}
	.dk-nav__list { display: flex; gap: .15rem; }
	.dk-nav__list a {
		min-height: 44px;
		padding-inline: .6rem;
		border: 0;
		border-radius: var(--dk-radius-sm);
		font-size: .98rem;
	}
	.dk-nav__list a:hover { background: rgba(255, 255, 255, .07); }
	.dk-nav__list a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--dk-gold-400); border-radius: 0; }
	.dk-nav__cta { margin: 0; width: auto; }
}

/* ------------------------------------------------------------------ */
/* Mobile bottom bar                                                   */
/* ------------------------------------------------------------------ */
.dk-bbar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 40;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: var(--dk-surface);
	border-block-start: 1px solid var(--dk-line);
	box-shadow: 0 -4px 16px rgba(44, 31, 16, .08);
	padding-block-end: env(safe-area-inset-bottom, 0px);
}
.dk-bbar a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: var(--dk-bbar-h);
	color: var(--dk-muted);
	text-decoration: none;
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.3;
}
.dk-bbar a .dk-icon { width: 24px; height: 24px; }
.dk-bbar a[aria-current="page"] { color: var(--dk-green-800); }
.dk-bbar a[aria-current="page"] .dk-icon { stroke-width: 2.3; }
.dk-bbar__cta .dk-icon {
	width: 34px !important;
	height: 34px !important;
	padding: 5px;
	border-radius: 50%;
	background: var(--dk-gold-400);
	color: var(--dk-green-900);
	stroke-width: 2.2;
}
.dk-bbar .dk-bbar__cta { color: var(--dk-green-900); }

@media (min-width: 1100px) {
	body { padding-block-end: 0; }
	.dk-bbar { display: none; }
}

/* Search panel (bottom bar), opened via :target so it works without JS. */
.dk-spanel { display: none; }
.dk-spanel:target {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(44, 31, 16, .55);
	padding: var(--dk-gutter);
}
.dk-spanel__box {
	background: var(--dk-surface);
	border-radius: var(--dk-radius);
	padding: 1rem;
	max-width: 640px;
	margin: 10vh auto 0;
	box-shadow: var(--dk-shadow);
}
.dk-spanel__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: .75rem; }
.dk-spanel__title { margin: 0; font-weight: 800; color: var(--dk-ink); }
.dk-spanel__close {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%; color: var(--dk-ink);
}
.dk-spanel__close:hover { background: var(--dk-green-50); }

/* ------------------------------------------------------------------ */
/* Search form                                                         */
/* ------------------------------------------------------------------ */
.dk-search {
	display: flex;
	gap: .5rem;
	background: var(--dk-surface);
	border: 1px solid var(--dk-line);
	border-radius: 999px;
	padding: 4px;
	padding-inline-start: 1rem;
	max-width: 100%;
}
.dk-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	min-height: 44px;
	font-size: 1rem;
	color: var(--dk-ink);
}
.dk-search input[type="search"]::placeholder { color: #7a6248; }
.dk-search input[type="search"]:focus { outline: none; }
.dk-search:focus-within { outline: 3px solid var(--dk-focus); outline-offset: 2px; }
.dk-search .dk-btn { min-height: 44px; padding-inline: 1rem; flex: none; }
.dk-search--big { padding: 6px; padding-inline-start: 1.2rem; box-shadow: 0 8px 28px rgba(0, 0, 0, .15); border: 0; }
.dk-search--big input[type="search"] { min-height: 50px; font-size: 1.05rem; }
.dk-search--big .dk-btn { min-height: 50px; padding-inline: 1.4rem; }
@media (max-width: 420px) {
	.dk-search .dk-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.dk-search .dk-btn { width: 48px; padding: 0; }
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */
.dk-hero {
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(226, 181, 98, .16), transparent 60%),
		linear-gradient(180deg, var(--dk-green-900), var(--dk-green-800));
	color: #fff;
	padding-block: 2rem 2.5rem;
	border-block-start: 1px solid rgba(255, 255, 255, .08);
}
.dk-hero__inner { max-width: 960px; text-align: center; }
.dk-hero__title { text-wrap: balance; color: #fff; font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.7rem); margin-block-end: .5rem; }
.dk-hero__lead { text-wrap: pretty; color: #e6dbc6; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); margin-block-end: 1.5rem; }
.dk-hero .dk-search { margin-inline: auto; max-width: 680px; }
.dk-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-block-start: 1.25rem; }
.dk-hero__stat { margin: 1rem 0 0; color: #d9c9ae; font-size: .9rem; }
@media (min-width: 900px) { .dk-hero { padding-block: 3.5rem 4rem; } }

/* ------------------------------------------------------------------ */
/* Sections, headings, grids                                           */
/* ------------------------------------------------------------------ */
.dk-section { margin-block: 2.5rem; }
.dk-sechead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: 1rem;
	flex-wrap: wrap;
}
.dk-sechead h2 { margin: 0; }
.dk-more {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	font-weight: 600;
	text-decoration: none;
	min-height: 44px;
}
.dk-more:hover { text-decoration: underline; }
.dk-section__foot { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1.25rem 0; }

.dk-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 560px) { .dk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .dk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1100px) { .dk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Market types */
.dk-types { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-block-start: 1.5rem; }
@media (min-width: 700px) { .dk-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dk-type {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .9rem 1rem;
	background: var(--dk-surface);
	border: 1px solid var(--dk-line);
	border-radius: var(--dk-radius);
	text-decoration: none;
	color: var(--dk-ink);
	min-height: 72px;
	transition: border-color .15s, box-shadow .15s;
}
.dk-type:hover { border-color: var(--dk-green-600); box-shadow: var(--dk-shadow); color: var(--dk-ink); }
.dk-type__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--dk-gold-100); color: var(--dk-gold-700); flex: none;
}
.dk-type__icon .dk-icon { width: 24px; height: 24px; }
.dk-type__text { display: flex; flex-direction: column; line-height: 1.5; flex: 1; }
.dk-type__text span { color: var(--dk-muted); font-size: .88rem; }
.dk-type__chev { color: var(--dk-muted); }

/* Category grid */
.dk-catgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 700px) { .dk-catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .dk-catgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dk-catgrid a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .1rem;
	height: 100%;
	min-height: 76px;
	padding: .75rem 1rem;
	border-radius: var(--dk-radius);
	background: var(--dk-green-50);
	border: 1px solid var(--dk-green-100);
	text-decoration: none;
	color: var(--dk-green-900);
	line-height: 1.5;
}
.dk-catgrid a:hover { background: var(--dk-green-100); }
.dk-catgrid__name { font-weight: 600; overflow-wrap: anywhere; }
.dk-catgrid__n { font-size: .82rem; color: var(--dk-muted); }

/* Listing card */
.dk-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--dk-surface);
	border: 1px solid var(--dk-line);
	border-radius: var(--dk-radius);
	overflow: hidden;
	transition: box-shadow .15s, border-color .15s;
}
.dk-card:hover { box-shadow: var(--dk-shadow); border-color: var(--dk-sand-2); }
.dk-card--featured { border-color: var(--dk-gold-300); }
.dk-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--dk-bg-soft);
}
.dk-card__media { overflow: hidden; }
.dk-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dk-card__ph {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%; color: var(--dk-gold-500);
	background: linear-gradient(135deg, var(--dk-green-50), var(--dk-gold-100));
}
.dk-card__ph .dk-icon { width: 44px; height: 44px; stroke-width: 1.4; }
.dk-card__flag { position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.dk-card__body { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.dk-card__typ { font-size: .8rem; font-weight: 600; color: var(--dk-gold-700); }
.dk-card__title { font-size: 1.05rem; margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.dk-card__title a { color: var(--dk-ink); text-decoration: none; }
.dk-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.dk-card__title a:hover { color: var(--dk-green-700); }
.dk-card__title a:focus-visible { outline: none; }
.dk-card:focus-within { outline: 3px solid var(--dk-focus); outline-offset: 2px; }
.dk-card__meta { margin: auto 0 0; padding-block-start: .35rem; display: flex; flex-wrap: wrap; gap: .25rem .9rem; color: var(--dk-muted); font-size: .85rem; }
@media (max-width: 559px) {
	.dk-card { flex-direction: row; }
	.dk-card__media { width: 112px; flex: none; aspect-ratio: auto; min-height: 112px; }
	.dk-card__ph .dk-icon { width: 34px; height: 34px; }
	.dk-card__flag { inset-block-start: .4rem; inset-inline-start: .4rem; font-size: .75rem; padding-inline: .45em; }
	.dk-card__body { padding: .7rem .85rem; }
	.dk-card__title { font-size: 1rem; }
}
.dk-card__city { display: inline-flex; align-items: center; gap: .2em; }
.dk-card__city .dk-icon { width: 1em; height: 1em; }

/* Article card */
.dk-pcard {
	display: flex; flex-direction: column;
	background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: var(--dk-radius);
	overflow: hidden; position: relative;
}
.dk-pcard:hover { box-shadow: var(--dk-shadow); }
.dk-pcard__media { display: block; aspect-ratio: 16 / 9; background: var(--dk-bg-soft); }
.dk-pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.dk-pcard__body { padding: 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.dk-pcard__title { margin: 0; font-size: 1.08rem; line-height: 1.6; }
.dk-pcard__title a { color: var(--dk-ink); text-decoration: none; }
.dk-pcard__title a::after { content: ""; position: absolute; inset: 0; }
.dk-pcard__title a:hover { color: var(--dk-green-700); }
.dk-pcard__excerpt { color: var(--dk-muted); font-size: .92rem; margin: 0; }
.dk-pcard__date { color: var(--dk-muted); font-size: .8rem; margin: auto 0 0; padding-block-start: .4rem; }
.dk-pcard:focus-within { outline: 3px solid var(--dk-focus); outline-offset: 2px; }
.dk-pcard a:focus-visible { outline: none; }

/* CTA band */
.dk-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	margin-block: 2.5rem;
	padding: 1.5rem;
	border-radius: var(--dk-radius);
	background: var(--dk-gold-100);
	border: 1px solid var(--dk-gold-300);
	border-inline-start: 6px solid var(--dk-gold-500);
}
.dk-cta h2 { margin-block-end: .25rem; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
.dk-cta p { margin: 0; color: var(--dk-text); }
.dk-cta--guides { background: var(--dk-green-50); border-color: var(--dk-green-100); border-inline-start-color: var(--dk-green-700); }
@media (min-width: 800px) {
	.dk-cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 1.75rem 2rem; }
	.dk-cta__text { max-width: 62ch; }
	.dk-cta .dk-btn { flex: none; }
}

/* About */
.dk-about {
	display: grid;
	gap: 1.5rem;
	padding: 1.5rem;
	border-radius: var(--dk-radius);
	background: var(--dk-bg-soft);
}
.dk-about__cta { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.dk-about__cta p { margin: 0; font-weight: 600; color: var(--dk-ink); }
@media (min-width: 900px) {
	.dk-about { grid-template-columns: 2fr 1fr; align-items: center; padding: 2.25rem; }
}
.dk-checks { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; }
.dk-checks li { display: flex; align-items: flex-start; gap: .6rem; }
.dk-checks .dk-icon { color: var(--dk-green-700); margin-block-start: .25em; }

/* ------------------------------------------------------------------ */
/* Page head, breadcrumbs, filter, pager, empty                        */
/* ------------------------------------------------------------------ */
.dk-crumbs { margin-block: 1rem .5rem; font-size: .85rem; color: var(--dk-muted); }
.dk-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.dk-crumbs li { display: inline-flex; align-items: center; }
/* U+203A mirrors to ‹ in an RTL run, so the chevron points the way the
   trail actually runs (REVIEW-2A M2). */
.dk-crumbs li + li::before { content: "›"; margin-inline: .45em; color: #8a7255; }
.dk-crumbs a { color: var(--dk-muted); text-decoration: none; display: inline-block; padding-block: .35rem; }
.dk-crumbs a:hover { color: var(--dk-green-800); text-decoration: underline; }
.dk-crumbs [aria-current] { color: var(--dk-ink); overflow-wrap: anywhere; }

.dk-pagehead { margin-block: .5rem 1.25rem; }
.dk-pagehead h1 { margin-block-end: .35rem; overflow-wrap: anywhere; }
.dk-pagehead__lead { color: var(--dk-muted); max-width: 70ch; }
.dk-pagehead__lead p:last-child { margin: 0; }

.dk-archive-tools { display: grid; gap: .75rem; margin-block-end: 1.5rem; }
.dk-filter {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: .75rem;
	align-items: end;
	padding: 1rem;
	background: var(--dk-bg-soft);
	border-radius: var(--dk-radius);
	border: 1px solid var(--dk-line);
}
.dk-filter__field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.dk-filter label { font-size: .85rem; font-weight: 600; color: var(--dk-ink); }
.dk-filter select {
	width: 100%;
	min-height: 48px;
	padding-inline: .75rem;
	border: 1px solid var(--dk-line);
	border-radius: var(--dk-radius-sm);
	background: var(--dk-surface);
}
.dk-filter__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.dk-filter__actions .dk-btn { flex: 1 1 auto; }

.dk-pager { margin-block: 2rem; }
.dk-pager ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.dk-pager a, .dk-pager span.page-numbers {
	display: inline-flex; align-items: center; justify-content: center; gap: .3em;
	min-width: 44px; min-height: 44px; padding-inline: .75rem;
	border-radius: var(--dk-radius-sm); border: 1px solid var(--dk-line);
	text-decoration: none; color: var(--dk-green-800); background: var(--dk-surface); font-weight: 600;
}
.dk-pager .current { background: var(--dk-green-800); color: #fff; border-color: var(--dk-green-800); }
.dk-pager .dots { border: 0; }

.dk-empty {
	text-align: center;
	padding: 2.5rem 1rem;
	border: 1px dashed var(--dk-line);
	border-radius: var(--dk-radius);
	background: var(--dk-bg-soft);
}
.dk-empty h2 { font-size: 1.2rem; }

/* ------------------------------------------------------------------ */
/* Single listing                                                      */
/* ------------------------------------------------------------------ */
.dk-listing__head { margin-block: .5rem 1.25rem; }
.dk-listing__badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-end: .5rem; }
.dk-listing__title { margin-block-end: .35rem; overflow-wrap: anywhere; }
.dk-listing__meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; font-size: .95rem; }
.dk-listing__meta a { color: var(--dk-muted); }
.dk-listing__city { display: inline-flex; align-items: center; gap: .25em; }
.dk-quick { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.dk-quick .dk-btn { flex: 1 1 140px; }
.dk-listing__layout { display: grid; gap: 1.5rem; }
.dk-listing__main { min-width: 0; }
.dk-listing__photo { margin: 0 0 1rem; border-radius: var(--dk-radius); overflow: hidden; background: var(--dk-bg-soft); border: 1px solid var(--dk-line); }
.dk-listing__photo img { width: 100%; max-height: 560px; object-fit: contain; margin-inline: auto; }
.dk-gallery { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
.dk-gallery a { display: block; aspect-ratio: 1; border-radius: var(--dk-radius-sm); overflow: hidden; border: 1px solid var(--dk-line); }
.dk-gallery img { width: 100%; height: 100%; object-fit: cover; }
.dk-listing__desc { margin-block-end: 1.5rem; }
@media (min-width: 900px) {
	.dk-quick { display: none; }
	.dk-listing__layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 2rem; }
	.dk-listing__side { position: sticky; inset-block-start: 1rem; }
}

.dk-box {
	background: var(--dk-surface);
	border: 1px solid var(--dk-line);
	border-radius: var(--dk-radius);
	padding: 1.25rem;
	margin-block-end: 1rem;
}
.dk-box > h2 { font-size: 1.15rem; margin-block-end: .75rem; }
.dk-cbtns { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.dk-cbtn {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .25rem .6rem;
	min-height: 52px;
	padding: .5rem .9rem;
	border-radius: var(--dk-radius-sm);
	border: 1px solid var(--dk-line);
	color: var(--dk-green-900);
	text-decoration: none;
	font-weight: 600;
	background: var(--dk-surface);
}
.dk-cbtn:hover { border-color: var(--dk-green-700); background: var(--dk-green-50); color: var(--dk-green-900); }
.dk-cbtn .dk-ltr { font-weight: 400; color: var(--dk-muted); margin-inline-start: auto; font-size: .9rem; overflow-wrap: anywhere; max-width: 100%; }
.dk-cbtn--call { background: var(--dk-green-800); color: #fff; border-color: var(--dk-green-800); }
.dk-cbtn--call:hover { background: var(--dk-green-900); color: #fff; }
.dk-cbtn--call .dk-ltr { color: #e6dbc6; }
.dk-contact__row { display: flex; gap: .7rem; padding-block: .8rem; border-block-start: 1px solid var(--dk-line); }
.dk-contact__hidden { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 .5rem; padding: .75rem; border-radius: var(--dk-radius-sm); background: var(--dk-bg-soft); color: var(--dk-text); }
.dk-contact__hidden > .dk-icon { flex: none; color: var(--dk-gold-700); margin-block-start: .2rem; }
.dk-contact__row > .dk-icon { color: var(--dk-gold-700); margin-block-start: .2rem; }
.dk-contact__row h3 { font-size: .9rem; margin: 0 0 .15rem; color: var(--dk-muted); font-weight: 600; }
.dk-contact__row p, .dk-contact__row address { margin: 0; }
.dk-contact__row address .dk-ltr { display: inline; }
.dk-contact__row a .dk-icon { width: 1em; height: 1em; margin-inline-start: .2em; }
.dk-hours { white-space: normal; }
.dk-contact__hint { margin: .75rem 0 0; font-size: .85rem; color: var(--dk-muted); }
.dk-claim { background: var(--dk-bg-soft); }
.dk-claim h2 { font-size: 1.05rem; }
.dk-claim p { font-size: .92rem; color: var(--dk-muted); }
.dk-updated { margin-block: 0 1rem; }

.dk-items { margin-block: 1.5rem; }
.dk-items__group { margin-block-end: 1.25rem; }
.dk-items__group h3 { margin-block-end: .5rem; color: var(--dk-green-800); }
.dk-tablewrap { overflow-x: auto; border: 1px solid var(--dk-line); border-radius: var(--dk-radius-sm); }
.dk-table th, .dk-table td { padding: .6rem .8rem; text-align: start; border-block-end: 1px solid var(--dk-line); vertical-align: top; }
.dk-table thead th { background: var(--dk-green-50); font-size: .85rem; color: var(--dk-green-900); font-weight: 600; }
.dk-table tbody tr:last-child td { border-block-end: 0; }
.dk-table .dk-num { text-align: end; }
.dk-items__fa { display: block; font-weight: 600; }
.dk-items__de { display: block; font-size: .85rem; color: var(--dk-muted); text-align: right; }
.dk-items__info { display: block; font-size: .85rem; color: var(--dk-muted); line-height: 1.6; margin-top: .15rem; max-width: 46ch; }
.dk-stable { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem; border-radius: var(--dk-radius-sm); background: var(--dk-green-100); color: var(--dk-green-900); font-weight: 600; }

/* ------------------------------------------------------------------ */
/* Articles, guides, glossary, pages                                   */
/* ------------------------------------------------------------------ */
.dk-article { margin-block-end: 2rem; }
.dk-article__head { margin-block: .5rem 1.5rem; max-width: 820px; }
.dk-article__head h1 { overflow-wrap: anywhere; }
.dk-kicker { display: inline-block; font-size: .85rem; font-weight: 600; color: var(--dk-gold-700); text-decoration: none; margin-block-end: .35rem; }
a.dk-kicker:hover { text-decoration: underline; }
.dk-article__lead { font-size: 1.1rem; color: var(--dk-muted); }
.dk-article__meta { display: flex; align-items: center; gap: .4rem; color: var(--dk-muted); font-size: .9rem; margin: 0; flex-wrap: wrap; }
.dk-article__img { margin: 0 0 1.5rem; border-radius: var(--dk-radius); overflow: hidden; }
.dk-article__img img { width: 100%; }
.dk-article__layout { display: grid; gap: 1.5rem; }
.dk-article__body { min-width: 0; max-width: 780px; }
@media (min-width: 1000px) {
	.dk-article__layout { grid-template-columns: 280px minmax(0, 1fr); gap: 3rem; align-items: start; }
	.dk-article__layout--single { grid-template-columns: minmax(0, 1fr); }
	.dk-toc { position: sticky; inset-block-start: 1rem; }
}
.dk-toc details { background: var(--dk-bg-soft); border: 1px solid var(--dk-line); border-radius: var(--dk-radius); padding: .75rem 1rem; }
.dk-toc summary { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--dk-ink); cursor: pointer; min-height: 40px; }
.dk-toc ol { margin: .5rem 0 0; padding-inline-start: 1.2em; font-size: .92rem; }
.dk-toc li { margin-block: .3rem; }
.dk-toc a { text-decoration: none; color: var(--dk-green-800); }
.dk-toc a:hover { text-decoration: underline; }
.dk-toc ol ul { margin: .25rem 0 0; padding-inline-start: 1.1em; }
.dk-toc__l3 { list-style: circle; }

.dk-prose { font-size: 1.05rem; line-height: 2; overflow-wrap: break-word; }
.dk-prose > * + h2 { margin-block-start: 2rem; }
.dk-prose > * + h3 { margin-block-start: 1.5rem; }
.dk-prose h2, .dk-prose h3 { scroll-margin-top: 1rem; }
.dk-prose img { border-radius: var(--dk-radius-sm); height: auto; }
.dk-prose figure { margin: 1.5rem 0; }
.dk-prose figcaption, .dk-prose .wp-caption-text { font-size: .85rem; color: var(--dk-muted); margin-block-start: .4rem; }
.dk-prose blockquote { margin: 1.5rem 0; padding: .5rem 1.25rem; border-inline-start: 4px solid var(--dk-gold-400); background: var(--dk-bg-soft); border-radius: var(--dk-radius-sm); }
.dk-prose table { display: block; overflow-x: auto; margin-block: 1.25rem; font-size: .95rem; }
.dk-prose th, .dk-prose td { border: 1px solid var(--dk-line); padding: .5rem .75rem; text-align: start; }
.dk-prose th { background: var(--dk-green-50); }
.dk-prose iframe, .dk-prose video, .dk-prose embed { max-width: 100%; }
.dk-prose pre, .dk-prose code { direction: ltr; unicode-bidi: isolate; font-size: .9em; }
.dk-prose pre { overflow-x: auto; background: var(--dk-bg-soft); padding: 1rem; border-radius: var(--dk-radius-sm); text-align: left; }
.dk-prose .alignleft { float: left; margin: .3rem 1.25rem 1rem 0; }
.dk-prose .alignright { float: right; margin: .3rem 0 1rem 1.25rem; }
.dk-prose .aligncenter { margin-inline: auto; }
.dk-prose .wp-block-image, .dk-prose .wp-block-table { margin-block: 1.25rem; }
.dk-prose .wp-block-button__link { display: inline-block; padding: .6em 1.2em; border-radius: 999px; background: var(--dk-green-800); color: #fff; text-decoration: none; }
.dk-prose .has-text-align-center { text-align: center; }
.dk-prose::after { content: ""; display: table; clear: both; }
@media (max-width: 600px) { .dk-prose .alignleft, .dk-prose .alignright { float: none; margin-inline: 0; } }

/* German blocks: readable LTR under/above the Persian text (legal pages). */
.dk-prose [lang="de"] { direction: ltr; text-align: left; unicode-bidi: isolate; }
.dk-prose div[lang="de"], .dk-prose section[lang="de"], .dk-prose .dk-de {
	padding: 1rem 1.25rem;
	margin-block: 1.25rem;
	background: var(--dk-bg-soft);
	border: 1px solid var(--dk-line);
	border-radius: var(--dk-radius-sm);
	line-height: 1.7;
	font-size: 1rem;
}
.dk-prose div[lang="fa"], .dk-prose section[lang="fa"], .dk-prose .dk-fa { direction: rtl; text-align: right; }
.dk-prose [lang="de"] ul, .dk-prose [lang="de"] ol { padding-inline-start: 1.4em; }
.dk-page--legal .dk-prose h2 { font-size: 1.3rem; }

.dk-sources {
	margin-block: 2rem 1rem;
	padding: 1.25rem;
	border-radius: var(--dk-radius);
	background: var(--dk-green-50);
	border: 1px solid var(--dk-green-100);
	border-inline-start: 5px solid var(--dk-green-700);
}
.dk-sources > h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; margin-block-end: .75rem; }
.dk-sources ol, .dk-sources ul { margin: 0; padding-inline-start: 1.3em; }
.dk-sources li { margin-block: .5rem; overflow-wrap: anywhere; }
.dk-sources a { font-weight: 600; }
.dk-sources h2 + h2, .dk-sources h3 { font-size: 1rem; }

.dk-note {
	display: flex;
	gap: .75rem;
	padding: 1rem 1.25rem;
	border-radius: var(--dk-radius);
	background: var(--dk-gold-100);
	border: 1px solid var(--dk-gold-300);
	font-size: .95rem;
	margin-block: 1rem 2rem;
}
.dk-note > .dk-icon { color: var(--dk-gold-700); margin-block-start: .25rem; }
.dk-note p { margin: 0 0 .35rem; }
.dk-note p:last-child { margin: 0; }

.dk-vazhe__term { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); text-align: right; }

.dk-az { position: sticky; inset-block-start: 0; z-index: 5; background: rgba(250, 247, 240, .96); padding-block: .5rem; margin-block-end: 1rem; border-block-end: 1px solid var(--dk-line); }
.dk-az ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; justify-content: center; }
.dk-az a, .dk-az span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--dk-radius-sm); font-weight: 600; }
.dk-az a { background: var(--dk-green-50); color: var(--dk-green-800); text-decoration: none; }
.dk-az a:hover { background: var(--dk-green-100); }
.dk-az span { color: #b0a084; }
.dk-azgroup { scroll-margin-top: 110px; margin-block-end: 1.5rem; }
.dk-azgroup > h2 { font-size: 1.6rem; color: var(--dk-gold-700); border-block-end: 2px solid var(--dk-gold-300); padding-block-end: .25rem; text-align: right; }
.dk-gloss { margin: 0; display: grid; gap: .75rem; }
@media (min-width: 800px) { .dk-gloss { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dk-gloss__item { padding: .9rem 1rem; border: 1px solid var(--dk-line); border-radius: var(--dk-radius); background: var(--dk-surface); position: relative; }
.dk-gloss dt { font-weight: 800; font-size: 1.1rem; text-align: right; }
.dk-gloss dt a { color: var(--dk-ink); text-decoration: none; }
.dk-gloss dt a::after { content: ""; position: absolute; inset: 0; }
.dk-gloss dt a:hover { color: var(--dk-green-700); }
.dk-gloss dd { margin: .25rem 0 0; color: var(--dk-muted); font-size: .95rem; }

/* Search results */
.dk-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.dk-result { padding: 1rem 1.25rem; border: 1px solid var(--dk-line); border-radius: var(--dk-radius); }
.dk-result__title { font-size: 1.15rem; margin-block: .15rem .35rem; }
.dk-result__title a { text-decoration: none; }
.dk-result p { margin: 0; color: var(--dk-muted); }
.dk-results__card .dk-card { flex-direction: row; }
.dk-results__card .dk-card__media { width: 112px; flex: none; aspect-ratio: auto; min-height: 112px; }
@media (min-width: 700px) { .dk-results__card .dk-card__media { width: 200px; } }

/* 404 */
.dk-404 { text-align: center; padding-block: 2.5rem 1rem; }
.dk-404__code { font-size: 4.5rem; font-weight: 800; line-height: 1; color: var(--dk-gold-600); margin: 0 0 .5rem; }
.dk-404 .dk-search { margin: 1.5rem auto; max-width: 560px; border: 1px solid var(--dk-line); box-shadow: none; }
.dk-404__links { justify-content: center; }

/* Forms rendered by plugin shortcodes inherit sensible defaults. */
.dk-prose input[type="text"], .dk-prose input[type="email"], .dk-prose input[type="tel"], .dk-prose input[type="url"],
.dk-prose input[type="number"], .dk-prose input[type="password"], .dk-prose select, .dk-prose textarea {
	width: 100%; min-height: 48px; padding: .5rem .75rem;
	border: 1px solid var(--dk-line); border-radius: var(--dk-radius-sm); background: var(--dk-surface); font-size: 1rem;
}
.dk-prose input[type="email"], .dk-prose input[type="tel"], .dk-prose input[type="url"] { direction: ltr; text-align: left; }
.dk-prose label { font-weight: 600; }
.dk-prose button[type="submit"], .dk-prose input[type="submit"] {
	min-height: 48px; padding: .55em 1.4em; border: 0; border-radius: 999px;
	background: var(--dk-green-800); color: #fff; font-weight: 600; cursor: pointer;
}
.dk-prose button[type="submit"]:hover, .dk-prose input[type="submit"]:hover { background: var(--dk-green-900); }

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
.dk-footer {
	margin-block-start: 3rem;
	background: var(--dk-green-900);
	color: #e0d3bc;
	padding-block: 2.5rem 1rem;
	font-size: .95rem;
}
.dk-footer a { color: #fff; }
.dk-footer a:hover { color: var(--dk-gold-300); }
.dk-footer__grid { display: grid; gap: 2rem; }
@media (min-width: 800px) { .dk-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.dk-brand--footer { margin-block-end: .75rem; }
.dk-brand--footer img { width: 44px; }
.dk-footer h2 { color: var(--dk-gold-300); font-size: 1rem; margin-block-end: .5rem; }
.dk-footer ul { list-style: none; margin: 0; padding: 0; }
.dk-footer li a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.dk-footer li a:hover { text-decoration: underline; }
.dk-footer__about p { max-width: 52ch; }
.dk-footer__bottom {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
	margin-block-start: 2rem; padding-block-start: 1rem;
	background: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)) center top / calc(100% - 2 * var(--dk-gutter)) 1px no-repeat;
	font-size: .85rem; color: #b8a684;
}
.dk-footer__bottom p { margin: 0; }

/* Print: no navigation chrome. */
@media print {
	.dk-header, .dk-bbar, .dk-footer, .dk-cta, .dk-filter, .dk-spanel { display: none !important; }
	body { padding: 0; }
}

/* Classic captions carry an inline width (e.g. 880px) from the old site. */
.dk-prose .wp-caption, .dk-prose figure[style*="width"] { max-width: 100% !important; }
.dk-prose .wp-caption img { width: 100%; height: auto; }

/* Filter: collapsible on phones, always open on wide screens (JS opens it). */
.dk-filterwrap > summary { list-style: none; width: 100%; }
.dk-filterwrap > summary::-webkit-details-marker { display: none; }
.dk-filterwrap[open] > summary { margin-block-end: .75rem; }
@media (min-width: 900px) {
	.dk-filterwrap[open] > summary { display: none; }
}

/* Persian numerals for ordered lists in Persian text. */
.dk-toc ol, .dk-sources ol, .dk-prose ol:not([lang="de"] ol):not(.dk-schritte):not(.dk-checkliste) { list-style-type: persian; }
.dk-toc__l3 { list-style-type: circle !important; }

/* Cookie notice (markup from dakke-core DK_Consent): match the site's buttons,
   and sit above the mobile bottom bar instead of behind it. */
.dk-cookie #dk-cookie-ok {
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: var(--dk-green-800);
	border: 0;
	border-radius: 999px;
	padding: .6em 1.4em;
	cursor: pointer;
	white-space: nowrap;
}
.dk-cookie #dk-cookie-ok:hover { background: var(--dk-green-700); }
.dk-cookie #dk-cookie-ok:focus-visible { outline: 3px solid var(--dk-focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ */
/* Stage D2: home blocks for contracts + calculators                   */
/* ------------------------------------------------------------------ */
.dk-hilfe { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 900px) { .dk-hilfe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
.dk-hilfe__box { background: var(--dk-bg-soft); border: 1px solid var(--dk-line); border-radius: var(--dk-radius); padding: 1.1rem 1.25rem; min-width: 0; }
.dk-hilfe__box .dk-sechead { margin-block-end: .25rem; }
.dk-hilfe__box > p { margin: 0 0 .75rem; font-size: .95rem; }
.dk-hilfe__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.dk-hilfe__list a { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .45rem .75rem; background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: var(--dk-radius-sm); color: var(--dk-ink); text-decoration: none; }
.dk-hilfe__list a:hover, .dk-hilfe__list a:focus-visible { border-color: var(--dk-gold-500); color: var(--dk-green-800); }
.dk-hilfe__list .dk-icon { color: var(--dk-green-700); flex: none; }

/* Stage D2: product page /kala/ + marketplace filter */
.dk-kalahead .dk-kicker { margin-block-end: .25rem; }
.dk-kalahead__unit { font-weight: 600; color: var(--dk-muted); font-size: .7em; }
.dk-kalahead__de { margin: 0; color: var(--dk-muted); text-align: right; }
.dk-kalahead__range { margin: .5rem 0 0; font-size: 1.05rem; }
.dk-kalahead__range strong { color: var(--dk-green-800); }
.dk-kalatable__best td { background: var(--dk-green-50); }
.dk-chips a[aria-current="true"] { background: var(--dk-green-800); border-color: var(--dk-green-800); color: #fff; }
.dk-filter--markt input[type="search"] { width: 100%; min-height: 48px; padding: .5rem .75rem; border: 1px solid var(--dk-line); border-radius: var(--dk-radius-sm); background: var(--dk-surface); font: inherit; }
@media (min-width: 700px) { .dk-filter--markt .dk-filter__field--kala { grid-column: span 2; } }
.dk-kalatreffer { margin-block: 1rem 2rem; }
.dk-kalatreffer h2 { font-size: 1.2rem; }
.dk-kalatreffer__laeden { font-size: 1.15rem; margin-block: 1.5rem .75rem; }
/* Price tables become stacked cards on phones (labels from data-label). */
@media (max-width: 600px) {
	.dk-stack { border: 0; overflow: visible; }
	.dk-stack table, .dk-stack tbody, .dk-stack tr, .dk-stack td { display: block; width: 100%; }
	.dk-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.dk-stack tr { border: 1px solid var(--dk-line); border-radius: var(--dk-radius-sm); margin-block-end: .6rem; padding: .35rem .75rem; background: var(--dk-surface); }
	.dk-stack .dk-table td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .3rem 0; text-align: start; }
	.dk-stack td::before { content: attr(data-label); color: var(--dk-muted); font-size: .85rem; flex: none; }
	.dk-stack .dk-kalatable__best td { background: transparent; }
	.dk-stack .dk-kalatable__best { border-color: var(--dk-green-600); background: var(--dk-green-50); }
}

/* ==================================================================== */
/* Stage G — design and motion after the reference azarmbau.de.         */
/* Cream page, sand sections, dark-brown header/footer, gold accents,   */
/* serif-feel display headings, pill buttons, soft-shadow cards.        */
/* Everything below is additive: it overrides the base rules above      */
/* without renaming a single class, so all templates keep working.      */
/* ==================================================================== */

/* -------------------------------------------------------------- */
/* Typography                                                      */
/* -------------------------------------------------------------- */
body { background: var(--dk-cream); }

h1, h2, .dk-display {
	font-family: var(--dk-display);
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: normal; /* Persian script must never be tracked. */
}
h1 { font-size: clamp(1.8rem, 1.25rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.15rem); }
h3 { font-weight: 600; }

/* Latin words inside a Persian heading: real Cormorant italic, gold. */
.dk-em { font-style: italic; color: var(--dk-gold-600); }
.dk-em--plain { font-style: italic; color: inherit; }
/* Second display line in gold — the RTL answer to the reference's gold italic. */
.dk-h-alt { display: block; color: var(--dk-gold-600); }

/* Tracking is only ever applied to Latin text (labels, eyebrows). */
.dk-spaced {
	font-family: "Vazirmatn", sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: .72rem;
	font-weight: 600;
}

a { color: var(--dk-green-700); }
a:hover { color: var(--dk-gold-700); }

/* -------------------------------------------------------------- */
/* Buttons — pill, gold filled / gold outlined                     */
/* -------------------------------------------------------------- */
.dk-btn { font-weight: 600; letter-spacing: normal; }
.dk-btn--primary { background: var(--dk-gold-500); color: var(--dk-green-900); border-color: var(--dk-gold-500); }
.dk-btn--primary:hover { background: var(--dk-gold-600); color: #fff; border-color: var(--dk-gold-600); }
.dk-btn--gold { background: var(--dk-gold-500); color: var(--dk-green-900); border-color: var(--dk-gold-500); }
.dk-btn--gold:hover { background: var(--dk-gold-400); color: var(--dk-green-900); }
.dk-btn--ghost { background: transparent; color: var(--dk-green-800); border-color: var(--dk-gold-500); }
.dk-btn--ghost:hover { background: var(--dk-gold-100); border-color: var(--dk-gold-600); color: var(--dk-green-900); }
.dk-btn--ghost-light { border-color: rgba(250, 247, 240, .5); }

/* -------------------------------------------------------------- */
/* Header — transparent over the hero, cream once scrolled          */
/* -------------------------------------------------------------- */
.dk-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 40;
	background: var(--dk-cream);
	color: var(--dk-ink);
	border-block-end: 1px solid var(--dk-line);
	transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
.dk-header__inner { min-height: var(--dk-head-h); }
.dk-brand__name { color: var(--dk-gold-600); font-family: var(--dk-display); font-weight: 400; font-size: 1.6rem; line-height: 1.2; }
.dk-brand__tag { color: var(--dk-muted); font-size: .74rem; }
.dk-brand, .dk-brand:hover { color: var(--dk-ink); }
.dk-brand:hover .dk-brand__name { color: var(--dk-gold-700); }
.dk-navtoggle { border-color: var(--dk-line); color: var(--dk-ink); }
.dk-nav { background: var(--dk-cream); border-block-start-color: var(--dk-line); border-block-end-color: var(--dk-gold-500); box-shadow: 0 16px 30px rgba(44, 31, 16, .14); }
.dk-nav__list a { color: var(--dk-text); border-block-end-color: var(--dk-line); font-weight: 600; }
.dk-nav__list a:hover, .dk-nav__list a[aria-current="page"], .dk-nav__list .current-menu-item > a { color: var(--dk-gold-700); }
.dk-nav .dk-btn--primary { background: transparent; color: var(--dk-green-800); border-color: var(--dk-gold-500); }
.dk-nav .dk-btn--primary:hover { background: var(--dk-gold-500); color: var(--dk-green-900); }
.dk-header, .dk-nav { --dk-focus: #8a6524; }

/* Over the hero: no background, light text. Falls back to the cream bar
   without JS, because .dk-header--over is only set on the front page and
   .dk-header--solid is added by the scroll handler. */
.dk-js .dk-header--over {
	background: transparent;
	border-block-end-color: transparent;
	color: #fff;
}
.dk-js .dk-header--over .dk-brand,
.dk-js .dk-header--over .dk-brand__tag { color: rgba(255, 253, 248, .82); }
.dk-js .dk-header--over .dk-brand__name { color: var(--dk-gold-300); }
.dk-js .dk-header--over .dk-navtoggle { color: #fff; border-color: rgba(255, 255, 255, .4); }
.dk-js .dk-header--over { --dk-focus: var(--dk-gold-300); }
.dk-js .dk-header--solid { background: var(--dk-cream); border-block-end-color: var(--dk-line); color: var(--dk-ink); }

@media (min-width: 1100px) {
	:root { --dk-head-h: 80px; }
	.dk-nav__list a { font-size: .95rem; }
	.dk-nav__list a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--dk-gold-500); }
	.dk-js .dk-header--over:not(.dk-header--solid) .dk-nav { background: transparent; }
	.dk-js .dk-header--over:not(.dk-header--solid) .dk-nav__list a { color: rgba(255, 253, 248, .88); border: 0; }
	.dk-js .dk-header--over:not(.dk-header--solid) .dk-nav__list a:hover,
	.dk-js .dk-header--over:not(.dk-header--solid) .dk-nav__list a[aria-current="page"] { color: #fff; }
	.dk-js .dk-header--over:not(.dk-header--solid) .dk-nav .dk-btn--primary { color: #fff; border-color: rgba(255, 255, 255, .55); }
	.dk-js .dk-header--over:not(.dk-header--solid) .dk-nav .dk-btn--primary:hover { background: var(--dk-gold-500); color: var(--dk-green-900); border-color: var(--dk-gold-500); }
}

/* -------------------------------------------------------------- */
/* Preloader — overlay only, content is in the HTML underneath      */
/* -------------------------------------------------------------- */
.dk-pre { display: none; }
.dk-js.dk-pl:not(.dk-rm) .dk-pre {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 200;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.1rem;
	background: var(--dk-green-900);
	animation: dkPlOut .45s ease .95s forwards;
}
.dk-pre__logo { font-family: var(--dk-display); font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); color: var(--dk-gold-300); line-height: 1.2; animation: dkPlUp .6s cubic-bezier(.2, .7, .3, 1) both; }
.dk-pre__bar { width: min(280px, 60vw); height: 1px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.dk-pre__bar i { display: block; height: 100%; width: 0; background: var(--dk-gold-500); animation: dkPlFill .95s cubic-bezier(.4, 0, .2, 1) forwards; }
.dk-pre__sub { color: rgba(255, 253, 248, .62); font-size: .78rem; animation: dkPlUp .6s cubic-bezier(.2, .7, .3, 1) .12s both; }
/* The scroll lock has to end by itself. It is an animation, not a static
   declaration, so it releases after 1.45 s even if no JavaScript file ever
   runs; a browser that cannot animate a discrete property simply never
   applies it (fail-open). REVIEW-2A C1. */
.dk-js.dk-pl:not(.dk-rm) { animation: dkPlLock 1.45s step-end forwards; }
@keyframes dkPlLock { from { overflow: hidden; } to { overflow: visible; } }
@keyframes dkPlUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dkPlFill { from { width: 0; } to { width: 100%; } }
@keyframes dkPlOut { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* -------------------------------------------------------------- */
/* Side tab — physically LEFT, i.e. the inline END in an RTL document.
   The brief asks for the reference's right-edge tab to be mirrored
   (REVIEW-2A M3): inset-inline-start would have kept it on the right.   */
/* -------------------------------------------------------------- */
.dk-sidetab {
	position: fixed;
	inset-inline-end: 0;
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 45;
	display: none;
}
@media (min-width: 900px) { .dk-sidetab { display: block; } }
.dk-sidetab__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 56px;
	border: 0;
	border-start-start-radius: var(--dk-radius-sm);
	border-end-start-radius: var(--dk-radius-sm);
	background: var(--dk-gold-500);
	color: var(--dk-green-900);
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(44, 31, 16, .22);
	transition: background-color .2s;
	text-decoration: none;
}
.dk-sidetab__btn:hover { background: var(--dk-gold-400); color: var(--dk-green-900); }
.dk-sidetab__btn .dk-icon { width: 24px; height: 24px; }
.dk-sidetab__panel {
	position: absolute;
	inset-inline-end: 56px;
	inset-block-start: 50%;
	transform: translateY(-50%);
	width: 268px;
	max-width: calc(100vw - 72px);
	padding: 1rem 1.1rem;
	border-radius: var(--dk-radius);
	background: var(--dk-green-900);
	color: #fff;
	box-shadow: var(--dk-shadow-lg);
	--dk-focus: var(--dk-gold-300);
}
.dk-sidetab__panel[hidden] { display: none; }
.dk-sidetab__panel h2 { font-size: 1.05rem; color: var(--dk-gold-300); margin-block-end: .4rem; }
.dk-sidetab__panel p { font-size: .85rem; color: rgba(255, 253, 248, .74); margin-block-end: .7rem; }
.dk-sidetab__list { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; gap: .35rem; }
.dk-sidetab__list a {
	display: flex; align-items: center; gap: .55rem;
	min-height: 42px; padding: .3rem .6rem;
	border-radius: var(--dk-radius-sm);
	background: rgba(255, 255, 255, .06);
	color: #fff; text-decoration: none; font-size: .9rem; font-weight: 600;
}
.dk-sidetab__list a:hover { background: rgba(184, 150, 90, .3); color: #fff; }
.dk-sidetab__list .dk-icon { color: var(--dk-gold-300); width: 1.1em; height: 1.1em; }
.dk-sidetab__list bdi { font-weight: 400; color: rgba(255, 253, 248, .74); font-size: .82em; margin-inline-start: auto; }
.dk-sidetab__panel .dk-btn { width: 100%; min-height: 44px; font-size: .92rem; }
.dk-sidetab__close { position: absolute; inset-inline-end: .4rem; inset-block-start: .4rem; width: 32px; height: 32px; border: 0; background: transparent; color: rgba(255, 253, 248, .6); cursor: pointer; border-radius: 50%; }
.dk-sidetab__close:hover { color: #fff; background: rgba(255, 255, 255, .1); }

/* -------------------------------------------------------------- */
/* Hero — full-bleed photo, pinned + scrubbed into a rounded card    */
/* -------------------------------------------------------------- */
.dk-hero {
	position: relative;
	background: var(--dk-cream);
	color: #fff;
	padding: 0;
	border: 0;
	margin-block-start: calc(-1 * var(--dk-head-h));
	overflow: clip;
}
.dk-hero__stage {
	position: relative;
	min-height: 100svh;
	display: grid;
	place-items: center;
}
.dk-hero__media {
	/* Explicit box (not `inset: 0`) so GSAP has start values for the scrub. */
	/* Physical left/top, never inset-inline-*: GSAP animates `left`, and an
	   extra `right` from a logical property would over-constrain the box in
	   RTL and pin the card to the wrong edge. */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 0;
	transform-origin: 50% 50%;
	will-change: transform;
}
.dk-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.dk-hero__veil {
	position: absolute;
	inset: 0;
	/* Strong enough that the white/gold hero text clears AA against the
	   brightest 2 % of the photo underneath it (REVIEW-2A H5). */
	background:
		radial-gradient(120% 70% at 50% 46%, rgba(44, 31, 16, .46) 0%, rgba(44, 31, 16, 0) 72%),
		linear-gradient(180deg, rgba(44, 31, 16, .72) 0%, rgba(44, 31, 16, .52) 42%, rgba(44, 31, 16, .78) 100%);
}
/* Behind the shrinking photo: the cream page shows through. */
.dk-hero__stage { background: var(--dk-cream); }
.dk-hero__inner {
	position: relative;
	z-index: 2;
	min-width: 0; /* grid item: otherwise min-content wins and clips at 320 px (M8) */
	max-width: 900px;
	text-align: center;
	padding-block: calc(var(--dk-head-h) + 2rem) 3.5rem;
	padding-inline: var(--dk-gutter);
	margin-inline: auto;
}
.dk-hero__title {
	font-family: var(--dk-display);
	font-weight: 400;
	color: #fff;
	font-size: clamp(2rem, 1.2rem + 4.2vw, 4rem);
	line-height: 1.4;
	margin-block-end: .6rem;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.dk-hero__title .dk-h-alt { color: var(--dk-gold-300); }
/* The phone size is a notch smaller than the fluid formula would give: at
   390 px the sentence otherwise lands exactly on the two/three line
   boundary, and a 1 % font-metric difference flips it — the one shift the
   metric-matched fallbacks cannot absorb (REVIEW-2A H3). */
.dk-hero__lead { color: #fffdf8; font-size: clamp(.94rem, .86rem + .4vw, 1.15rem); margin-block-end: 1.6rem; text-wrap: pretty; }
.dk-hero .dk-search { margin-inline: auto; max-width: 640px; background: rgba(255, 253, 248, .95); border: 0; }
.dk-hero__actions { margin-block-start: 1.4rem; }
.dk-hero__stat { color: #f4ece0; }
.dk-hero__scroll {
	position: absolute;
	inset-block-end: 1.5rem;
	inset-inline: 0;
	z-index: 2;
	text-align: center;
	color: #fffdf8;
}
.dk-hero__scroll span { display: inline-block; font-size: .8rem; }
.dk-hero__scroll::after {
	content: "";
	display: block;
	width: 1px;
	height: 34px;
	margin: .5rem auto 0;
	background: linear-gradient(rgba(255, 253, 248, .85), transparent);
}

/* Scrubbed state: the photo becomes a rounded card, a wordmark appears
   above it and two pill buttons below (GSAP sets the inline styles). */
.dk-hero__mark {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 7vh;
	z-index: 3;
	text-align: center;
	font-family: var(--dk-display);
	font-size: clamp(2.2rem, 1.2rem + 5vw, 4.6rem);
	line-height: 1.2;
	color: var(--dk-green-900);
	pointer-events: none;
}
.dk-hero__cardcta {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 14vh;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
	padding-inline: var(--dk-gutter);
}
.dk-hero__mark, .dk-hero__cardcta { display: none; }
.dk-js:not(.dk-rm) .dk-hero--scrub .dk-hero__mark,
.dk-js:not(.dk-rm) .dk-hero--scrub .dk-hero__cardcta { display: flex; opacity: 0; }
.dk-js:not(.dk-rm) .dk-hero--scrub .dk-hero__mark { display: block; }
.dk-js:not(.dk-rm) .dk-hero--scrub .dk-hero__media { border-radius: 0; }

/* -------------------------------------------------------------- */
/* Section heads — thin gold rule + spaced eyebrow + display head   */
/* -------------------------------------------------------------- */
.dk-sechead { align-items: flex-end; margin-block-end: 1.5rem; }
.dk-sechead h2 { line-height: 1.45; }
.dk-eyebrow {
	display: flex;
	align-items: center;
	gap: .7rem;
	color: var(--dk-gold-600);
	margin-block-end: .55rem;
}
.dk-eyebrow::before {
	content: "";
	width: 44px;
	height: 1px;
	background: var(--dk-gold-500);
	flex: none;
}
.dk-more { color: var(--dk-gold-600); }
.dk-more:hover { color: var(--dk-gold-700); }

.dk-section { margin-block: 4rem; }
/* Full-bleed band in sand; the inner .dk-wrap keeps the text measure. */
.dk-band {
	position: relative;
	background: var(--dk-sand);
	padding-block: 4rem;
	margin-block: 4rem;
}
.dk-band--cream { background: var(--dk-cream); }
.dk-band--dark { background: var(--dk-green-900); color: rgba(255, 253, 248, .86); --dk-focus: var(--dk-gold-300); }
.dk-band--dark h2, .dk-band--dark h3 { color: #fff; }
.dk-band--dark .dk-eyebrow { color: var(--dk-gold-300); }
.dk-band--dark .dk-eyebrow::before { background: var(--dk-gold-400); }
.dk-band > .dk-wrap { position: relative; z-index: 2; }

/* -------------------------------------------------------------- */
/* Key figures — large gold display digits, counted up by JS        */
/* -------------------------------------------------------------- */
.dk-figs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.75rem 1rem;
}
@media (min-width: 760px) { .dk-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dk-fig__n {
	display: block;
	font-family: var(--dk-display);
	font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.4rem);
	line-height: 1.15;
	color: var(--dk-gold-600);
	font-variant-numeric: lining-nums;
}
.dk-band--dark .dk-fig__n { color: var(--dk-gold-300); }
.dk-fig__l { display: block; margin-block-start: .35rem; color: var(--dk-muted); font-size: .85rem; }
.dk-band--dark .dk-fig__l { color: rgba(255, 253, 248, .7); }

/* -------------------------------------------------------------- */
/* Horizontal card strip — pinned on desktop, snap carousel on phone */
/* -------------------------------------------------------------- */
.dk-strip { position: relative; }
.dk-strip__track {
	display: flex;
	gap: 1rem;
	padding-inline: var(--dk-gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Snap to the leading edge, not to the centre: the very first card can
	   never be centred (there is no room before it), so a centre snap leaves
	   it hanging half off the screen at rest. With start + scroll-padding the
	   resting position is the card sitting flush in the gutter. */
	scroll-padding-inline: var(--dk-gutter);
	/* A swipe that runs out of cards must not turn into a page scroll or a
	   browser back gesture. */
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-block-end: .75rem;
}
.dk-strip__track::-webkit-scrollbar { height: 6px; }
.dk-strip__track::-webkit-scrollbar-thumb { background: var(--dk-sand-2); border-radius: 3px; }
.dk-scard {
	position: relative;
	flex: 0 0 auto;
	width: min(78vw, 300px);
	aspect-ratio: 4 / 5;
	border-radius: var(--dk-radius);
	overflow: hidden;
	scroll-snap-align: start;
	box-shadow: var(--dk-shadow);
	background: var(--dk-sand-2);
	text-decoration: none;
	isolation: isolate;
}
.dk-scard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .3, 1); }
.dk-scard:hover img { transform: scale(1.05); }
.dk-scard::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Dark enough for AA on the title and the subtitle over every photo
	   in the set, measured on the rendered pixels (REVIEW-2A H5). */
	background: linear-gradient(180deg, rgba(44, 31, 16, .06) 18%, rgba(44, 31, 16, .55) 58%, rgba(44, 31, 16, .93) 100%);
}
.dk-scard__body { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; padding: 1.1rem 1.2rem; color: #fff; }
.dk-scard__title { font-family: var(--dk-display); font-size: 1.4rem; line-height: 1.4; margin: 0; color: #fff; }
.dk-scard__sub { display: block; margin-block-start: .2rem; color: #f2e6cd; font-size: .84rem; letter-spacing: normal; }
.dk-scard:focus-visible { outline: 3px solid var(--dk-focus); outline-offset: 3px; }
.dk-strip__hint { margin: .6rem var(--dk-gutter) 0; color: var(--dk-muted); font-size: .82rem; }
@media (min-width: 900px) {
	.dk-scard { width: 340px; }
	.dk-strip__hint { display: none; }
}
/* Pinned variant (JS sets .dk-strip--pin and drives the track). */
.dk-js:not(.dk-rm) .dk-strip--pin .dk-strip__track {
	overflow: visible;
	scroll-snap-type: none;
	will-change: transform;
	backface-visibility: hidden;
}
/* The track is wider than the window and is pushed sideways, so without a clip
   it grows the document's own scrollable width by up to 770 px while it runs:
   the page gets a horizontal scrollbar and has to be laid out again as the
   value changes (FIX-2C S2). The clip sits on this wrapper and not on the
   section itself, because the section is the box ScrollTrigger switches to
   position:fixed — clipping that box makes the browser report the switch as a
   layout shift although nothing moves. The clip margin keeps the card shadows. */
.dk-js:not(.dk-rm) .dk-strip--pin .dk-strip__view {
	overflow-x: clip;
	overflow-y: visible;
	overflow-clip-margin: 40px;
}
/* While the strip runs, the cards slide under a motionless pointer. Each card
   that passes would start its own .7 s hover zoom, which is exactly the
   roughness the run is supposed to lose. */
.dk-js:not(.dk-rm) .dk-strip--pin .dk-scard:hover img { transform: none; }
/* ScrollTrigger sets the scroll position itself while it pins. Native smooth
   scrolling would animate those corrections and desynchronise the pin — that
   includes the scroll the browser performs when focus moves by keyboard. */
.dk-js:not(.dk-rm).dk-strip-on { scroll-behavior: auto; }

/* -------------------------------------------------------------- */
/* Steps — "how it works" (also used by the direct-contact block)   */
/* -------------------------------------------------------------- */
.dk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: dkstep; }
@media (min-width: 860px) { .dk-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.dk-step { position: relative; padding-block-start: .4rem; }
.dk-step::before {
	counter-increment: dkstep;
	content: counter(dkstep, persian);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-block-end: .8rem;
	border-radius: 50%;
	border: 1px solid var(--dk-gold-500);
	color: var(--dk-gold-600);
	font-family: var(--dk-display);
	font-size: 1.3rem;
	line-height: 1;
}
.dk-band--dark .dk-step::before { color: var(--dk-gold-300); border-color: var(--dk-gold-400); }
.dk-step h3 { font-family: var(--dk-display); font-weight: 400; font-size: 1.25rem; margin-block-end: .3rem; }
.dk-band--dark .dk-step h3 { color: #fff; }
.dk-step p { margin: 0; color: var(--dk-muted); font-size: .95rem; }
.dk-band--dark .dk-step p { color: rgba(255, 253, 248, .74); }

/* -------------------------------------------------------------- */
/* Quote band                                                      */
/* -------------------------------------------------------------- */
.dk-quote { text-align: center; max-width: 900px; margin-inline: auto; }
.dk-quote__mark { font-family: var(--dk-display); font-size: 4rem; line-height: .6; color: var(--dk-gold-500); display: block; margin-block-end: 1rem; }
.dk-quote p {
	font-family: var(--dk-display);
	font-size: clamp(1.25rem, 1rem + 1.4vw, 2.05rem);
	line-height: 1.85;
	color: var(--dk-ink);
	margin: 0;
	text-wrap: pretty;
}
.dk-quote footer { margin-block-start: 1.2rem; color: var(--dk-muted); }

/* -------------------------------------------------------------- */
/* Direct contact (stage H) — channels + form slot                  */
/* -------------------------------------------------------------- */
.dk-beratung { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 980px) { .dk-beratung { grid-template-columns: 1.15fr .85fr; gap: 3rem; } }
.dk-beratung__aside {
	padding: 1.4rem 1.5rem;
	border-radius: var(--dk-radius);
	background: var(--dk-surface);
	border: 1px solid var(--dk-line);
	box-shadow: var(--dk-shadow);
}
.dk-band--dark .dk-beratung__aside { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.dk-beratung__aside h3 { font-family: var(--dk-display); font-weight: 400; font-size: 1.3rem; }
.dk-kanaele__liste { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .5rem; }
.dk-kanal {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 48px;
	padding: .45rem .9rem;
	border-radius: 999px;
	border: 1px solid var(--dk-gold-500);
	background: transparent;
	color: var(--dk-green-800);
	text-decoration: none;
	font-weight: 600;
}
.dk-kanal:hover { background: var(--dk-gold-100); color: var(--dk-green-900); }
.dk-kanal bdi { margin-inline-start: auto; font-weight: 400; color: var(--dk-muted); font-size: .88em; overflow-wrap: anywhere; }
.dk-kanal--telefon { background: var(--dk-gold-500); color: var(--dk-green-900); }
.dk-kanal--telefon:hover { background: var(--dk-gold-400); }
.dk-kanal--telefon bdi { color: var(--dk-ink); } /* same reason as M9 */
.dk-band--dark .dk-kanal { color: #fff; }
.dk-band--dark .dk-kanal bdi { color: rgba(255, 253, 248, .68); }
.dk-band--dark .dk-kanal--telefon { color: var(--dk-green-900); }
.dk-kanaele__zeiten { margin: 0; font-size: .85rem; color: var(--dk-muted); }
.dk-band--dark .dk-kanaele__zeiten { color: rgba(255, 253, 248, .7); }

/* Prominent slot at the top of a contract page. */
.dk-beratung-top {
	margin-block: 1rem 2rem;
	padding: 1.4rem 1.5rem;
	border-radius: var(--dk-radius);
	background: var(--dk-sand);
	border: 1px solid var(--dk-sand-2);
	border-inline-start: 5px solid var(--dk-gold-500);
}
.dk-beratung-top h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); margin-block-end: .4rem; }
.dk-beratung-top > p { color: var(--dk-text); max-width: 68ch; }
.dk-beratung-top .dk-kanaele__liste { grid-auto-flow: row; margin-block-start: 1rem; }
@media (min-width: 760px) {
	.dk-beratung-top .dk-kanaele__liste { display: flex; flex-wrap: wrap; }
	.dk-beratung-top .dk-kanal { flex: 0 1 auto; }
}
.dk-beratung-top__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: 1rem; }
.dk-beratung__hinweis { margin-block-start: .9rem; font-size: .84rem; color: var(--dk-muted); max-width: 72ch; }

/* -------------------------------------------------------------- */
/* Floating outline shapes — thin gold, very low contrast           */
/* -------------------------------------------------------------- */
.dk-shapes {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}
.dk-shapes svg { position: absolute; color: var(--dk-gold-500); opacity: .13; }
.dk-band--dark .dk-shapes svg { color: var(--dk-gold-300); opacity: .12; }
.dk-shape--a { inset-block-start: 8%; inset-inline-end: 6%; width: 190px; }
.dk-shape--b { inset-block-end: 6%; inset-inline-start: 4%; width: 150px; }
.dk-shape--c { inset-block-start: 46%; inset-inline-start: 34%; width: 110px; }
@media (max-width: 760px) { .dk-shape--c { display: none; } .dk-shape--a { width: 130px; } .dk-shape--b { width: 100px; } }
.dk-js:not(.dk-rm) .dk-shape--a { animation: dkFloatA 19s ease-in-out infinite; }
.dk-js:not(.dk-rm) .dk-shape--b { animation: dkFloatB 24s ease-in-out infinite; }
.dk-js:not(.dk-rm) .dk-shape--c { animation: dkSpin 46s linear infinite; }
@keyframes dkFloatA { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(-18px, 26px, 0) rotate(7deg); } }
@keyframes dkFloatB { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(22px, -20px, 0) rotate(-6deg); } }
@keyframes dkSpin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------- */
/* Reveal — opacity is only ever set when JS is present             */
/* -------------------------------------------------------------- */
.dk-js:not(.dk-rm) .dk-reveal { opacity: 0; transform: translateY(26px); }
.dk-js:not(.dk-rm) .dk-reveal.dk-in { opacity: 1; transform: none; }
.dk-reveal { transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1); }

@media (prefers-reduced-motion: reduce) {
	.dk-reveal, .dk-scard img { transition: none !important; }
	.dk-shapes svg { animation: none !important; }
	.dk-pre { display: none !important; }
	html { scroll-behavior: auto; }
}

/* -------------------------------------------------------------- */
/* Cards, chips, tables in the new palette                          */
/* -------------------------------------------------------------- */
.dk-card, .dk-pcard, .dk-box, .dk-gloss__item { border-color: var(--dk-line); border-radius: var(--dk-radius); }
.dk-card:hover, .dk-pcard:hover { box-shadow: var(--dk-shadow); border-color: var(--dk-sand-2); }
.dk-card__typ, .dk-kicker { color: var(--dk-gold-600); }
.dk-card__title, .dk-pcard__title { font-family: var(--dk-font); font-weight: 600; }
.dk-card__title a:hover, .dk-pcard__title a:hover, .dk-gloss dt a:hover { color: var(--dk-gold-700); }
.dk-card__ph { background: linear-gradient(135deg, var(--dk-sand), var(--dk-gold-100)); color: var(--dk-gold-600); }
.dk-catgrid a { background: var(--dk-sand); border-color: var(--dk-sand-2); color: var(--dk-green-900); }
.dk-catgrid a:hover { background: var(--dk-sand-2); }
.dk-chips a { border-color: var(--dk-line); color: var(--dk-green-800); }
.dk-chips a:hover { border-color: var(--dk-gold-500); }
.dk-chips a[aria-current="true"] { background: var(--dk-gold-500); border-color: var(--dk-gold-500); color: var(--dk-green-900); }
.dk-type:hover { border-color: var(--dk-gold-500); }
.dk-type__icon { background: var(--dk-gold-100); color: var(--dk-gold-700); }
.dk-table thead th { background: var(--dk-sand); color: var(--dk-green-900); }
.dk-pager .current { background: var(--dk-gold-500); color: var(--dk-green-900); border-color: var(--dk-gold-500); }
.dk-pager a, .dk-pager span.page-numbers { color: var(--dk-green-800); }
.dk-stable { background: var(--dk-gold-100); color: var(--dk-gold-700); }
.dk-az a { background: var(--dk-sand); color: var(--dk-green-800); }
.dk-az a:hover { background: var(--dk-sand-2); }
.dk-azgroup > h2 { font-family: var(--dk-display); color: var(--dk-gold-600); border-block-end-color: var(--dk-gold-300); }
.dk-sources { background: var(--dk-sand); border-color: var(--dk-sand-2); border-inline-start-color: var(--dk-gold-500); }
.dk-note { background: var(--dk-gold-100); border-color: var(--dk-gold-300); }
.dk-cta { background: var(--dk-sand); border-color: var(--dk-sand-2); border-inline-start-color: var(--dk-gold-500); }
.dk-cta--guides { background: var(--dk-gold-100); border-color: var(--dk-gold-300); border-inline-start-color: var(--dk-gold-600); }
.dk-about { background: var(--dk-sand); }
.dk-checks .dk-icon { color: var(--dk-gold-600); }
.dk-empty { background: var(--dk-sand); border-color: var(--dk-sand-2); }
.dk-hilfe__box { background: var(--dk-sand); border-color: var(--dk-sand-2); }
.dk-hilfe__list .dk-icon { color: var(--dk-gold-600); }
.dk-prose th { background: var(--dk-sand); }
.dk-prose blockquote { background: var(--dk-sand); border-inline-start-color: var(--dk-gold-500); }
.dk-prose pre { background: var(--dk-sand); }
.dk-prose div[lang="de"], .dk-prose section[lang="de"], .dk-prose .dk-de { background: var(--dk-surface); border-color: var(--dk-line); }
.dk-prose .wp-block-button__link, .dk-prose button[type="submit"], .dk-prose input[type="submit"] { background: var(--dk-gold-500); color: var(--dk-green-900); }
.dk-prose button[type="submit"]:hover, .dk-prose input[type="submit"]:hover { background: var(--dk-gold-600); color: #fff; }
.dk-toc details { background: var(--dk-sand); border-color: var(--dk-sand-2); }
.dk-toc a { color: var(--dk-green-800); }
.dk-cbtn { color: var(--dk-green-900); }
.dk-cbtn:hover { border-color: var(--dk-gold-500); background: var(--dk-gold-100); color: var(--dk-green-900); }
.dk-cbtn--call { background: var(--dk-gold-500); color: var(--dk-green-900); border-color: var(--dk-gold-500); }
.dk-cbtn--call:hover { background: var(--dk-gold-400); color: var(--dk-green-900); }
.dk-cbtn--call .dk-ltr { color: var(--dk-ink); } /* solid: 5.76:1 on gold (REVIEW-2A M9) */
.dk-contact__row > .dk-icon, .dk-contact__hidden > .dk-icon { color: var(--dk-gold-600); }
.dk-items__group h3 { color: var(--dk-green-800); }
.dk-404__code { color: var(--dk-gold-600); font-family: var(--dk-display); }
.dk-kalahead__range strong { color: var(--dk-gold-700); }
.dk-kalatable__best td { background: var(--dk-gold-100); }
.dk-bbar { background: var(--dk-surface); border-block-start-color: var(--dk-line); }
.dk-bbar a[aria-current="page"] { color: var(--dk-gold-700); }
.dk-bbar__cta .dk-icon { background: var(--dk-gold-500); color: var(--dk-green-900); }
.dk-spanel__close:hover { background: var(--dk-sand); }
.dk-cookie #dk-cookie-ok { background: var(--dk-gold-500); color: var(--dk-green-900); }
.dk-cookie #dk-cookie-ok:hover { background: var(--dk-gold-600); color: #fff; }

/* -------------------------------------------------------------- */
/* Footer — dark brown                                             */
/* -------------------------------------------------------------- */
.dk-footer { background: var(--dk-green-900); color: #e0d3bc; margin-block-start: 0; padding-block: 3.5rem 1rem; }
.dk-footer h2 { font-family: var(--dk-font); font-weight: 600; color: var(--dk-gold-300); font-size: .95rem; letter-spacing: normal; }
.dk-footer .dk-brand__name { color: var(--dk-gold-300); }
.dk-footer a:hover { color: var(--dk-gold-300); }
.dk-footer { --dk-focus: var(--dk-gold-300); }

/* Intro band: text on one side, key figures on the other. */
.dk-intro { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 980px) { .dk-intro { grid-template-columns: 1.05fr .95fr; gap: 4rem; } }
.dk-intro__text p { max-width: 58ch; font-size: 1.02rem; }
.dk-intro__figs { padding-block-start: .5rem; }

/* Section heads keep the heading and the "all" link on one baseline. */
.dk-sechead > div { min-width: 0; }

/* Header on wide screens: brand at the start edge, navigation centred,
   the CTA pill at the end edge — the RTL mirror of the reference.
   The dropdown styling above is for the phone menu only and has to be
   undone here, otherwise its panel background and shadow leak onto the bar. */
@media (min-width: 1100px) {
	.dk-header__inner { gap: 1.5rem; }
	.dk-brand { margin-inline-end: 0; }
	.dk-nav {
		flex: 1 1 auto;
		justify-content: center;
		gap: 1rem;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0;
	}
	.dk-nav__list { flex: 0 1 auto; justify-content: center; }
	.dk-nav__list a { border: 0; }
	.dk-nav__cta { margin-inline-start: auto; flex: none; }
}

/* Scrolled state wins over the "over the hero" state for every part. */
.dk-js .dk-header--over.dk-header--solid .dk-brand { color: var(--dk-ink); }
.dk-js .dk-header--over.dk-header--solid .dk-brand__tag { color: var(--dk-muted); }
.dk-js .dk-header--over.dk-header--solid .dk-brand__name { color: var(--dk-gold-600); }
.dk-js .dk-header--over.dk-header--solid .dk-navtoggle { color: var(--dk-ink); border-color: var(--dk-line); }
.dk-js .dk-header--over.dk-header--solid { --dk-focus: #8a6524; }
.dk-sechead p.dk-eyebrow { margin: 0 0 .5rem; }

/* The home page starts directly with the hero, no gap under the header. */
.home .dk-main { padding-block-start: 0; }
.dk-band:first-child { margin-block-start: 0; }

/* Dark band: the muted browns of the light palette are unreadable here. */
.dk-band--dark .dk-beratung__hinweis,
.dk-band--dark .dk-muted,
.dk-band--dark .dk-small { color: rgba(255, 253, 248, .68); }
.dk-band--dark a { color: var(--dk-gold-300); }
.dk-band--dark a:hover { color: #fff; }

/* The side tab panel may open over a dark band, so it needs its own edge. */
.dk-sidetab__panel { border: 1px solid rgba(184, 150, 90, .45); }
.dk-sidetab__close { inset-inline-end: .5rem; }

/* A–Z bar: a letter without entries is plain text, not a pale chip, so it
   keeps full text contrast while still reading as "nothing here". */
.dk-az span { background: transparent; color: var(--dk-muted); opacity: .75; font-weight: 400; }

/* The preloader is an overlay over everything, including the cookie notice. */
.dk-js.dk-pl:not(.dk-rm) .dk-pre { z-index: 10000; }

/* Side tab on phones: like the reference, a small pill in the bottom corner
   (bottom-left in RTL) that clears the mobile bottom bar, instead of a tab at
   mid-height where it would sit on top of the text. */
@media (max-width: 899px) {
	.dk-sidetab {
		display: block;
		inset-block-start: auto;
		inset-block-end: calc(var(--dk-bbar-h) + env(safe-area-inset-bottom, 0px) + 12px);
		inset-inline-end: 12px;
		transform: none;
	}
	.dk-sidetab__btn { width: 52px; height: 52px; border-radius: 50%; }
	.dk-sidetab__panel {
		position: fixed;
		inset-inline: 12px;
		inset-block-start: auto;
		inset-block-end: calc(var(--dk-bbar-h) + env(safe-area-inset-bottom, 0px) + 74px);
		width: auto;
		max-width: none;
		transform: none;
	}
}

/* The header is sticky now, so in-page anchors (glossary A–Z, guide table of
   contents, section links) have to clear it. */
html { scroll-padding-top: calc(var(--dk-head-h) + 16px); }
.dk-az { inset-block-start: var(--dk-head-h); }
.dk-azgroup { scroll-margin-top: calc(var(--dk-head-h) + 72px); }
.dk-prose h2, .dk-prose h3 { scroll-margin-top: calc(var(--dk-head-h) + 16px); }
@media (min-width: 1000px) { .dk-toc { inset-block-start: calc(var(--dk-head-h) + 16px); } }
@media (min-width: 900px) { .dk-listing__side { inset-block-start: calc(var(--dk-head-h) + 16px); } }

/* ==================================================================== */
/* Round 2A fixes — see neu/FIX-2A.md. Additive, nothing renamed.       */
/* ==================================================================== */

/* -------------------------------------------------------------- */
/* H1 — plugin markup inside theme containers                      */
/* The direct-contact CTA carries a whole block of content (heading,*/
/* lead, three steps, channels, button, note), not a "text + button"*/
/* pair, so it must not be the row flexbox the other CTAs are.      */
/* -------------------------------------------------------------- */
.dk-cta > * { min-width: 0; }
section.dk-cta--beratung {
	padding: 1.5rem;
	border: 1px solid var(--dk-sand-2);
	border-inline-start: 6px solid var(--dk-gold-500);
}
@media (min-width: 800px) {
	section.dk-cta--beratung { display: block; padding: 1.75rem 2rem; }
}
.dk-cta--beratung > h2 { max-width: 34ch; }
.dk-cta--beratung > p { max-width: 68ch; }
.dk-cta--beratung .dk-kanaele__liste { margin-block: 1rem .5rem; }
.dk-cta__aktion { margin-block: 1.25rem 0; }

/* The plugin's own <ol class="dk-schritte"> and <ol class="dk-checkliste">
   had no rules at all in the theme. Both are numbered Persian lists that
   carry real instructions, so they get the counter treatment of .dk-steps
   in list form — one readable column at every width. */
ol.dk-schritte,
ol.dk-checkliste {
	/* the plugin's own inline CSS sets padding-inline-start: 1.4rem */
	padding-inline: 0;
}
.dk-schritte,
.dk-checkliste {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
	display: grid;
	gap: .85rem;
	counter-reset: dkli;
	min-width: 0;
}
.dk-schritte > li,
.dk-checkliste > li {
	position: relative;
	min-width: 0;
	padding-inline-start: 2.6rem;
	text-wrap: pretty;
}
.dk-schritte > li::before,
.dk-checkliste > li::before {
	counter-increment: dkli;
	content: counter(dkli, persian);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .15em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	border: 1px solid var(--dk-gold-500);
	color: var(--dk-gold-700);
	background: var(--dk-surface);
	font-family: var(--dk-display);
	font-size: 1rem;
	line-height: 1;
}
.dk-schritte > li > strong { display: block; color: var(--dk-ink); }
.dk-checkliste > li { font-size: .98rem; }
.dk-prose .dk-checkliste { max-width: 68ch; }
.dk-prose .dk-checkliste > li { margin: 0; }

/* -------------------------------------------------------------- */
/* H2 — photo-less strip cards, same palette, real sections         */
/* -------------------------------------------------------------- */
.dk-scard--tone { background: linear-gradient(160deg, var(--dk-green-800) 0%, var(--dk-green-900) 70%); }
.dk-scard--tone::after { background: linear-gradient(180deg, rgba(44, 31, 16, 0) 40%, rgba(44, 31, 16, .55) 100%); }
.dk-scard__tone {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dk-gold-400);
	opacity: .3;
}
.dk-scard__tone svg { width: 58%; height: auto; }
.dk-scard__tone { transition: opacity .5s ease; }
.dk-scard--tone:hover .dk-scard__tone { opacity: .42; }

/* -------------------------------------------------------------- */
/* H5 — the veil is stronger now, so the hero card end state keeps   */
/* a readable amount of it (the JS tween ends at .18, not .12).      */
/* -------------------------------------------------------------- */
.dk-hero__photo { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.dk-hero__photo img, .dk-hero__photo picture { display: block; width: 100%; height: 100%; }
.dk-hero__photo img { object-fit: cover; }

/* -------------------------------------------------------------- */
/* M7 — header navigation without JavaScript                        */
/* The menu is hidden by a class only JS can set, so with JS off the */
/* hamburger was a dead button. Without JS the list is simply there. */
/* -------------------------------------------------------------- */
@media (max-width: 1099.98px) {
	html:not(.dk-js) .dk-navtoggle { display: none; }
	html:not(.dk-js) .dk-nav {
		display: block;
		position: static;
		flex: 1 0 100%;
		box-shadow: none;
		border: 0;
		padding-block: 0 .75rem;
		background: transparent;
	}
	html:not(.dk-js) .dk-header__inner { flex-wrap: wrap; }
	html:not(.dk-js) .dk-nav__list a { color: var(--dk-text); border-block-end-color: var(--dk-line); }
	html:not(.dk-js) .dk-nav .dk-btn--primary { background: var(--dk-gold-500); color: var(--dk-green-900); }
}

/* -------------------------------------------------------------- */
/* M8 / L4 — 320 px and unbreakable words                           */
/* -------------------------------------------------------------- */
.dk-search input, .dk-search input[type="search"] { min-width: 0; }
.dk-hero .dk-search { max-width: min(640px, 100%); }
.dk-hero__title, .dk-pcard__title, .dk-scard__title, .dk-step h3, .dk-fig__l { overflow-wrap: anywhere; }

/* -------------------------------------------------------------- */
/* L3 — line length: 45-75 characters, not ~90                      */
/* -------------------------------------------------------------- */
.dk-narrow { max-width: min(820px, 68ch); }
.dk-pagehead__lead, .dk-pagehead__lead p { max-width: 68ch; }
.dk-prose > p, .dk-prose > ul, .dk-prose > ol, .dk-prose > blockquote { max-width: 68ch; }
.dk-article__lead, .dk-article__meta, .dk-box > p { max-width: 68ch; }

/* -------------------------------------------------------------- */
/* L8 — consent checkboxes were 13 x 13 px                          */
/* -------------------------------------------------------------- */
.dk-form input[type="checkbox"], .dk-check input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--dk-gold-600);
	flex: none;
	margin-block-start: .15em;
}

/* -------------------------------------------------------------- */
/* M13 — cookie notice (markup and inline CSS from dakke-core)       */
/* Its own stylesheet is printed after this one, so every rule here  */
/* needs the id to win. It used to be a centred bar over the hero    */
/* call-to-action; it is a corner card now, in the site palette, and */
/* the hero keeps clear of it on phones through --dk-cookie-h.       */
/* -------------------------------------------------------------- */
#dk-cookie.dk-cookie {
	inset-inline: auto;
	inset-inline-start: var(--dk-gutter);
	inset-block-end: calc(var(--dk-bbar-h) + env(safe-area-inset-bottom, 0px) + 10px);
	z-index: 60;
	max-width: min(24rem, calc(100vw - 2 * var(--dk-gutter)));
	margin-inline: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1rem;
	align-items: center;
	background: var(--dk-surface);
	color: var(--dk-text);
	border: 1px solid var(--dk-sand-2);
	border-inline-start: 5px solid var(--dk-gold-500);
	border-radius: var(--dk-radius);
	padding: .9rem 1rem;
	box-shadow: var(--dk-shadow-lg);
	font-size: .9rem;
	line-height: 1.7;
}
/* the id selector above also beats the plugin's `.dk-cookie[hidden]` rule,
   so the dismissed state has to be restored here */
#dk-cookie.dk-cookie[hidden] { display: none; }
#dk-cookie.dk-cookie p { margin: 0; flex: 1 1 14rem; min-width: 0; }
#dk-cookie.dk-cookie a { color: var(--dk-gold-700); }
@media (min-width: 900px) {
	#dk-cookie.dk-cookie {
		inset-block-end: var(--dk-gutter);
		inset-inline-start: var(--dk-gutter);
	}
}
/* Phones: the notice sits above the bottom bar, and the hero moves its
   buttons up by exactly the notice's height while it is showing. */
:root { --dk-cookie-h: 0px; }
@media (max-width: 899.98px) {
	.dk-cookie-on .dk-hero__inner { padding-block-end: calc(3.5rem + var(--dk-cookie-h)); }
	/* the decorative scroll hint would land on the listing counter; the notice
	   occupies that strip anyway. */
	.dk-cookie-on .dk-hero__scroll { display: none; }
	/* minus the notice's own top gap: the pills then sit centred between the
	   hero card and the notice instead of touching the card. */
	.dk-cookie-on .dk-hero__cardcta { inset-block-end: calc(14vh + var(--dk-cookie-h) - 1.5rem); }
}

/* -------------------------------------------------------------- */
/* M12 — the form status note is focused after the redirect          */
/* -------------------------------------------------------------- */
.dk-note[tabindex="-1"]:focus { outline: 3px solid var(--dk-focus); outline-offset: 3px; }
.dk-form [aria-invalid="true"] { border-color: #a4301b; box-shadow: 0 0 0 1px #a4301b; }

/* Wide screens: bigger cards, so the pinned strip still has a real run
   (at 1920 px six 340 px cards overflow by only ~250 px). */
@media (min-width: 1500px) {
	.dk-scard { width: 400px; }
}

/* The strip is pinned with its top at the viewport top, so its heading has to
   clear the sticky header. */
@media (min-width: 900px) {
	.dk-band.dk-strip { padding-block-start: calc(4rem + var(--dk-head-h)); }
}

/* Phones: the side-tab pill moves up with the cookie notice instead of
   disappearing behind it. */
@media (max-width: 899.98px) {
	.dk-cookie-on .dk-sidetab {
		inset-block-end: calc(var(--dk-bbar-h) + env(safe-area-inset-bottom, 0px) + 12px + var(--dk-cookie-h));
	}
	.dk-cookie-on .dk-sidetab__panel {
		inset-block-end: calc(var(--dk-bbar-h) + env(safe-area-inset-bottom, 0px) + 74px + var(--dk-cookie-h));
	}
}

/* A term description that carries a whole city/category text is body copy,
   not a muted page lead: at --dk-muted the plugin's `opacity: .8` source
   notes land at 3.53:1 (axe, /shahr/berlin/). */
.dk-pagehead__lead .dk-taxotext { color: var(--dk-text); max-width: 68ch; }
.dk-pagehead__lead .dk-taxotext__ref { opacity: 1; color: var(--dk-muted); }
.dk-pagehead__lead .dk-taxotext__ref a { color: var(--dk-green-700); }


/* Endless listings (dk-endless.js): the button is the fallback for the
   automatic loading, the status line announces progress to screen readers. */
.dk-endless { margin-block: 1.5rem 0; text-align: center; }
.dk-endless__btn { min-width: 14rem; }
.dk-endless__status { margin: .6rem 0 0; color: var(--dk-muted); font-size: .92rem; min-height: 1.4em; }
.dk-endless--fertig .dk-endless__status { color: var(--dk-text); }
.dk-endless__sentinel { height: 1px; }


/* Ad slots (DK_Werbung). Always visibly labelled, never mistakable for
   editorial content: own background, own label, no hover effects. */
.dk-werbung { display: block; margin: 2rem auto; max-width: min(100%, 1000px); padding: .5rem; background: var(--dk-sand, #f2e9d8); border-radius: var(--dk-radius); text-align: center; }
.dk-werbung__label { display: block; font-size: .72rem; letter-spacing: 0; color: var(--dk-muted); margin-block-end: .35rem; }
.dk-werbung a { display: inline-block; max-width: 100%; }
.dk-werbung img { max-width: 100%; height: auto; border-radius: calc(var(--dk-radius) - 4px); display: block; margin-inline: auto; }
.dk-werbung__text { display: block; padding: 1rem; font-weight: 600; color: var(--dk-ink); }
.dk-werbung--liste_inline { grid-column: 1 / -1; margin-block: .5rem; }
.dk-werbung--fusszeile { margin-block-end: 0; }
@media (max-width: 600px) { .dk-werbung { margin-block: 1.25rem; } }

/* Agency credit in the footer bar. */
.dk-footer__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.dk-footer__credit a:hover { color: var(--dk-gold-400); }

/* Nationwide providers on a city page: separate block, clearly set apart. */
.dk-bundesweit { margin-block: 2.5rem 0; padding-block-start: 1.5rem; border-block-start: 1px solid var(--dk-line); }
.dk-bundesweit h2 { margin-block: 0 .25rem; }
.dk-bundesweit .dk-muted { margin-block: 0 1.25rem; }
.dk-listing__city--bundesweit { background: var(--dk-gold-100, #f8eed9); }

/* Map card on a listing (two-click: nothing loads before the button is used). */
.dk-map { margin: 1.25rem 0 0; padding: 0; border: 1px solid var(--dk-line); border-radius: var(--dk-radius); overflow: hidden; background: var(--dk-bg-soft); }
.dk-map .dk-map__load { margin: 1rem auto; display: inline-flex; }
.dk-map figcaption { margin: 0; padding: 0 1rem 1rem; font-size: .84rem; color: var(--dk-muted); line-height: 1.9; }
.dk-map iframe { display: block; width: 100%; height: 300px; border: 0; }
.dk-map--an figcaption { padding-block-start: .75rem; }

/* Related listings under an ad (same advertiser / similar). */
.dk-related { margin-block-start: 2.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--dk-line); }
.dk-related h2 { margin-block: 0 1rem; }

/* "Service in City" lines at the foot of a listing. Small, plain, factual —
   this is orientation for readers and search engines, not a headline block. */
.dk-ortsdienste { margin-block-start: 2rem; padding: 1rem 1.25rem; background: var(--dk-bg-soft); border-radius: var(--dk-radius); }
.dk-ortsdienste h2 { font-size: 1.05rem; margin-block: 0 .6rem; }
.dk-ortsdienste ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.dk-ortsdienste li { font-size: .92rem; color: var(--dk-muted); }
.dk-ortsdienste li::after { content: '·'; margin-inline-start: .9rem; color: var(--dk-line); }
.dk-ortsdienste li:last-child::after { content: ''; }

/* ---- Bewertungen (Reviews mit Sternen) ------------------------------- */
.dk-bewertungen { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--dk-line); }
.dk-bewertungen__schnitt { font-size: 1.05rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.dk-sterne { color: #c08a2e; letter-spacing: .1em; }
.dk-bewertungen__liste { list-style: none; margin: 1.25rem 0 2rem; padding: 0; display: grid; gap: 1rem; }
.dk-bewertung { background: var(--dk-card, #fff); border: 1px solid var(--dk-line); border-radius: var(--dk-radius, 12px); padding: 1rem 1.15rem; }
.dk-bewertung--inhaber { border-color: var(--dk-gold, #c8a45c); background: var(--dk-sand, #faf6ee); }
.dk-bewertung__kopf { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .4rem; }
.dk-bewertung__text { margin: 0; line-height: 1.8; }
.dk-sterne-wahl { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; border: 1px solid var(--dk-line); border-radius: var(--dk-radius, 12px); padding: .9rem 1rem; }
.dk-sterne-wahl legend { font-weight: 600; padding: 0 .35rem; }
.dk-sterne-wahl__opt { display: flex; align-items: center; gap: .35rem; }
.dk-sterne-wahl__opt input { width: auto; }
.dk-sterne-wahl__opt label { font-weight: 400; margin: 0; }
.dk-form--bewertung { margin-top: 1rem; }

/* Buttons of the plugin forms (submit ad, contact, claim, owner panel,
   reviews) — same look as .dk-btn--primary, which they could not reuse. */
.dk-submit {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 48px; padding: .55em 1.5em; border-radius: 999px;
	border: 2px solid transparent; background: var(--dk-green-800); color: #fff;
	font: inherit; font-weight: 600; line-height: 1.3; cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
}
.dk-submit:hover, .dk-submit:focus-visible { background: var(--dk-green-900); color: #fff; }
.dk-submit--zweit { background: transparent; color: var(--dk-green-900); border-color: var(--dk-green-800); }
.dk-submit--zweit:hover, .dk-submit--zweit:focus-visible { background: var(--dk-sand, #f4ece0); color: var(--dk-green-900); }
.dk-submit--gefahr { background: transparent; color: #8d2417; border-color: #8d2417; }
.dk-submit--gefahr:hover, .dk-submit--gefahr:focus-visible { background: #8d2417; color: #fff; }
.dk-sterne-wahl__opt label { white-space: nowrap; }