/**
 * Basisebene. Enthält bewusst keine festen Farben oder Größen —
 * alles kommt aus den Custom Properties, die Tokens::css_variables() ausgibt.
 */

/* --- Grundfarben gegen die Theme-Vorgaben -------------------------------- */
/* Hello Elementor bringt ein kräftiges Pink als Linkfarbe mit. Überall, wo
   kein Widget seine eigene Farbe setzt, schlägt das durch — deshalb hier die
   Tokens als Grundlage. */

body {
	color: var(--dg-color-text);
	font-family: var(--dg-font-body);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--dg-color-primary);
	font-family: var(--dg-font-heading);
}

a {
	color: var(--dg-color-primary);
}

a:hover,
a:focus-visible {
	color: var(--dg-color-accent);
}

/* Nackte Bedienelemente.
   Hello setzt "[type=button], [type=submit], button" auf Rahmen und Schrift in
   #c36 und beim Überfahren zusätzlich auf einen pinken Hintergrund. Dass unsere
   Datei jetzt nach dem Theme lädt, hilft nur dort, wo wir überhaupt etwas
   deklarieren — für einen Knopf ohne .dg-button-Klasse stand bisher nichts
   dagegen, und für den Hover-Zustand des Menüknopfs ebenfalls nicht. */
button,
[type="button"],
[type="submit"] {
	border-color: currentColor;
	color: inherit;
}

button:hover,
button:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus {
	background-color: transparent;
	color: inherit;
}

:root {
	/* Aufzählungszeichen als SVG. Liegt als Variable vor, damit es sich
	   austauschen lässt, ohne die Regeln darunter anzufassen. */
	--dg-bullet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.2 2.4 2.4 4.6-4.8'/%3E%3C/svg%3E");
}

/* Schaltflächen bringen ihre Farbe selbst mit.
   Hier stand einmal eine Sammelregel "a.dg-button { color: inherit }". Die war
   mit Element + Klasse spezifischer als .dg-button--primary und hat deren Weiß
   überschrieben — die Schrift wurde grau statt weiß. Wer die Farbe erben soll,
   sagt das bei seiner eigenen Ausprägung (siehe .dg-button--quiet). */

/* --- Sichtbarkeit je Endgerät ------------------------------------------- */
/* Ersetzt das "Auf Mobil ausblenden" der gekauften Vorlage, das auf der
   Bestandsseite die rote Demo-Reihe eingeblendet hat. Hier wird nichts
   doppelt ausgeliefert: was verborgen ist, ist verborgen. */

@media (max-width: 767px) {
	.dg-hide-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.dg-hide-tablet { display: none !important; }
}

@media (min-width: 1025px) {
	.dg-hide-desktop { display: none !important; }
}

/* --- Layout-Grundlagen --------------------------------------------------- */

.dg-section {
	position: relative;
	padding-block: var(--dg-space-3xl);
}

.dg-section--tight { padding-block: var(--dg-space-xl); }
.dg-section--flush { padding-block: 0; }

.dg-section__inner {
	width: 100%;
	max-width: var(--dg-content-width);
	margin-inline: auto;
	padding-inline: var(--dg-gutter);
}

.dg-section--wide .dg-section__inner { max-width: var(--dg-wide-width); }

@media (max-width: 767px) {
	.dg-section { padding-block: var(--dg-space-2xl); }
}

/* --- Flächen ------------------------------------------------------------- */

.dg-surface        { background-color: var(--dg-color-surface); }
.dg-surface--light { background-color: var(--dg-color-primary-light); }
.dg-surface--ink   { background-color: var(--dg-color-ink); color: var(--dg-color-white); }

.dg-rule {
	border: 0;
	border-top: 1px solid var(--dg-color-line);
	margin-block: var(--dg-space-lg);
}

/* --- Bedienbarkeit ------------------------------------------------------- */
/* Sichtbarer Fokus, weil die Bestandsseite keinen hat. */

.dg-focusable:focus-visible,
.dg-section a:focus-visible,
.dg-section button:focus-visible {
	outline: 2px solid var(--dg-color-accent);
	outline-offset: 3px;
	border-radius: var(--dg-radius-sm);
}

/* Weiche Bewegung --------------------------------------------------------- */
/* Sanftes Scrollen für Sprungmarken und Anker im Text. */

html { scroll-behavior: smooth; }

/* Rücknahme für alle, die Bewegung im Betriebssystem abbestellt haben.
   Bewusst auf das ganze Dokument statt nur auf .dg-section: Die neue
   Menüanimation und das sanfte Scrollen liegen außerhalb davon und wären
   sonst nicht erfasst — für Menschen mit Migräne oder vestibulären
   Beschwerden ist das kein Schönheitsfehler. */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* =======================================================================
   Widgets
   Nur Struktur und Verhalten. Farben, Schriften und Abstände setzen die
   Widgets selbst über die Tokens — hier steht kein fester Wert.
   ======================================================================= */

/* --- Schaltfläche -------------------------------------------------------- */

.dg-button-wrap {
	display: flex;
	flex-direction: column;
}

.dg-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dg-space-2xs);
	border-style: solid;
	border-width: 2px;
	border-color: transparent;
	border-radius: var(--dg-radius-pill);
	padding: 14px 30px;
	text-decoration: none;
	cursor: pointer;
	font-family: var(--dg-font-heading);
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

/* Grundfarben, damit die Schaltfläche auch dort stimmt, wo sie nicht als
   eigenes Widget liegt: Hero, Kontaktabschnitt und Preisübersicht geben
   dieselben Klassen direkt aus. Ohne diese Regeln erbt sie die Linkfarbe
   des Themes — bei Hello Elementor ein kräftiges Pink. */
.dg-button--primary {
	background-color: var(--dg-color-primary);
	border-color: var(--dg-color-primary);
	color: var(--dg-color-white);
}

.dg-button--primary:hover,
.dg-button--primary:focus-visible {
	background-color: var(--dg-color-accent);
	border-color: var(--dg-color-accent);
	color: var(--dg-color-white);
}

.dg-button--secondary {
	background-color: transparent;
	border-color: var(--dg-color-primary);
	color: var(--dg-color-primary);
}

.dg-button--secondary:hover,
.dg-button--secondary:focus-visible {
	background-color: var(--dg-color-primary);
	color: var(--dg-color-white);
}

.dg-button--quiet {
	background-color: transparent;
	border-color: transparent;
	color: inherit;
	padding-inline: 0;
}

.dg-button--quiet:hover,
.dg-button--quiet:focus-visible { text-decoration: underline; }

.dg-button__icon {
	display: inline-flex;
	line-height: 0;
}

.dg-button__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Volle Breite, wenn die Ausrichtung auf "stretch" steht. */
.dg-button-wrap[style*="stretch"] .dg-button { width: 100%; }

/* --- Symbole ------------------------------------------------------------- */
/* Die eigenen Symbole sind Strichzeichnungen mit fill="none" im SVG. Die
   älteren Regeln ".dg-button__icon svg" und ".dg-teaser__icon svg" setzen aber
   "fill: currentColor" — und CSS schlägt das Attribut im SVG. Ohne diese
   Rücknahme liefen die Umrisse voll und aus jedem Symbol würde ein Klumpen.
   Zwei Klassen, damit die Regel gegen ".dg-…__icon svg" auch gewinnt. */

.dg-icon,
.dg-button__icon .dg-icon,
.dg-teaser__icon .dg-icon {
	fill: none;
	stroke: currentColor;
}

/* --- Aufzählungen -------------------------------------------------------- */
/* Jede Liste bekommt automatisch ein SVG-Häkchen statt des Systempunkts — auch
   die, die sie selbst im Texteditor schreibt. Deshalb steht hier
   ".elementor-widget-text-editor" und nicht ".dg-section": Die neuen Seiten
   bestehen aus Elementor-Containern, eine .dg-section gibt es dort nicht.
   Nummerierte Listen bleiben unangetastet, deren Reihenfolge trägt Bedeutung.

   Umgesetzt als Maske statt als Hintergrundbild: So bestimmt die CSS-Variable
   die Farbe und nicht die eingebettete Datei. Die Häkchen folgen damit ihrer
   Primärfarbe, auch wenn sie diese später ändert. */

.elementor-widget-text-editor ul,
.dg-prose ul {
	list-style: none;
	padding-left: 0;
}

.elementor-widget-text-editor ul > li,
.dg-prose ul > li,
.dg-preis__features li {
	position: relative;
	padding-left: 30px;
}

.elementor-widget-text-editor ul > li + li,
.dg-prose ul > li + li {
	margin-top: var(--dg-space-3xs);
}

.elementor-widget-text-editor ul > li::before,
.dg-prose ul > li::before,
.dg-preis__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 18px;
	height: 18px;
	background-color: var(--dg-color-primary);
	-webkit-mask: var(--dg-bullet) center / contain no-repeat;
	mask: var(--dg-bullet) center / contain no-repeat;
}

/* --- Kachelreihe --------------------------------------------------------- */

.dg-teaser {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dg-space-md);
}

.dg-teaser__card {
	display: flex;
	flex-direction: column;
	gap: var(--dg-space-2xs);
	text-decoration: none;
	color: inherit;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.dg-teaser__card[href] { cursor: pointer; }

.dg-teaser--lift .dg-teaser__card[href]:hover,
.dg-teaser--lift .dg-teaser__card[href]:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgb(0 0 0 / 0.10);
}

/* Hier stand eine Regel ".dg-teaser__card[style*='center'] …", die Symbol und
   Bild mittig setzen sollte. Sie hat nie gegriffen: Der Attributselektor prüft
   ein Inline-style-Attribut, Elementor schreibt die Ausrichtung aber in seine
   eigene Seiten-CSS — gemessen war das style-Attribut schlicht leer.

   Ausgerichtet wird jetzt über align-items am Karten-Container, gesetzt vom
   Steuerelement "Textausrichtung" (siehe Teaser_Trio::register_controls). */

/* Symbole mit Wirkung.
   Gemessen waren sie 32 px groß — auf vier Kacheln über 1280 px Breite
   verlieren sie sich, wie zu Recht angemerkt wurde. Jetzt 30 px Zeichnung auf
   einer 68 px großen, ruhigen Kreisfläche: Das Symbol bleibt fein gezeichnet,
   bekommt aber ein Gewicht, das zur Überschrift darunter passt. */
.dg-teaser__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	line-height: 0;
	font-size: 30px;
	margin-bottom: var(--dg-space-sm);
	border-radius: 50%;
	background-color: var(--dg-color-wash);
	transition: background-color 200ms ease, transform 200ms ease;
}

/* Beim Überfahren der Kachel hebt sich die Fläche leicht hervor. */
.dg-teaser__card:hover .dg-teaser__icon,
.dg-teaser__card:focus-visible .dg-teaser__icon {
	background-color: var(--dg-color-primary-light);
	transform: translateY(-2px);
}

@media (max-width: 767px) {
	.dg-teaser__icon {
		width: 56px;
		height: 56px;
		font-size: 26px;
	}
}

.dg-teaser__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.dg-teaser__image {
	display: block;
	max-width: 100%;
	height: auto;
	margin-bottom: var(--dg-space-2xs);
	border-radius: var(--dg-radius-md);
}

.dg-teaser__title,
.dg-teaser__text { margin: 0; }

/* --- Einstiegsbereich ---------------------------------------------------- */

.dg-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	padding: var(--dg-space-3xl) var(--dg-gutter);
}

.dg-hero__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.dg-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.dg-hero__eyebrow,
.dg-hero__title,
.dg-hero__subline { margin: 0 0 var(--dg-space-sm); }

.dg-hero__subline { margin-bottom: var(--dg-space-lg); }

/* inline-flex folgt der Textausrichtung des Elternelements. */
.dg-hero__actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--dg-space-sm);
}

.dg-hero__actions:empty { display: none; }

@media (max-width: 767px) {
	.dg-hero { padding-block: var(--dg-space-2xl); }
	.dg-hero__actions { width: 100%; }
	.dg-hero__actions .dg-button { flex: 1 1 100%; }
}

/* --- Angebotsblock ------------------------------------------------------- */

.dg-angebot__overline,
.dg-angebot__heading { margin: 0 0 var(--dg-space-sm); }

.dg-angebot__heading { margin-bottom: var(--dg-space-lg); }

.dg-angebot__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dg-space-lg);
}

.dg-angebot__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--dg-space-2xs);
	padding-top: var(--dg-space-md);
	border-top: 2px solid var(--dg-color-line);
}

.dg-angebot__title,
.dg-angebot__claim { margin: 0; }

.dg-angebot__link {
	display: inline-flex;
	align-items: center;
	gap: var(--dg-space-3xs);
	margin-top: auto;
	padding-top: var(--dg-space-2xs);
	text-decoration: none;
}

.dg-angebot__link:hover,
.dg-angebot__link:focus-visible { text-decoration: underline; }

.dg-angebot__arrow { transition: transform 160ms ease; }
.dg-angebot__link:hover .dg-angebot__arrow { transform: translateX(3px); }

/* --- Zwei Sonderbereiche ------------------------------------------------- */

.dg-paar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--dg-space-md);
}

.dg-paar__panel {
	position: relative;
	display: flex;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

/* Abdunkelung nur dort, wo tatsächlich ein Bild liegt. */
.dg-paar__panel--image::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.dg-paar__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--dg-space-2xs);
	width: 100%;
}

.dg-paar__overline,
.dg-paar__title,
.dg-paar__text { margin: 0; }

.dg-paar__link {
	display: inline-flex;
	align-items: center;
	gap: var(--dg-space-3xs);
	margin-top: var(--dg-space-sm);
	text-decoration: none;
}

.dg-paar__link:hover,
.dg-paar__link:focus-visible { text-decoration: underline; }

.dg-paar__arrow { transition: transform 160ms ease; }
.dg-paar__link:hover .dg-paar__arrow { transform: translateX(3px); }

/* --- Kontaktdaten -------------------------------------------------------- */

.dg-kontakt {
	display: flex;
	font-style: normal;          /* <address> kursiviert sonst */
	gap: var(--dg-space-md);
}

.dg-kontakt--stack { flex-direction: column; }

.dg-kontakt--row {
	flex-direction: row;
	flex-wrap: wrap;
}

.dg-kontakt--row .dg-kontakt__row { flex: 1 1 200px; }

.dg-kontakt__label { margin: 0 0 var(--dg-space-3xs); }
.dg-kontakt__value { margin: 0; }

.dg-kontakt__value a { text-decoration: none; }

.dg-kontakt__value a:hover,
.dg-kontakt__value a:focus-visible { text-decoration: underline; }

@media (max-width: 767px) {
	.dg-angebot__grid,
	.dg-paar { grid-template-columns: minmax(0, 1fr); }
}

/* --- Kundenstimmen ------------------------------------------------------- */

.dg-stimmen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--dg-space-md);
}

.dg-stimme {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--dg-space-sm);
	margin: 0;
}

.dg-stimme::before {
	content: "\201C";
	font-size: 56px;
	line-height: 1;
	opacity: 0.4;
}

.dg-stimme__quote {
	margin: 0;
	quotes: none;
}

.dg-stimme__name {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--dg-space-2xs);
	margin-top: auto;
}

.dg-stimme__person { font-weight: 600; }

.dg-stimme__context { opacity: 0.75; }

.dg-stimme__proof {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--dg-radius-sm);
}

/* --- Akkordeon ----------------------------------------------------------- */

.dg-akkordeon__item { border-bottom: 1px solid var(--dg-color-line); }

.dg-akkordeon__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dg-space-sm);
	cursor: pointer;
	list-style: none;
}

.dg-akkordeon__summary::-webkit-details-marker { display: none; }

.dg-akkordeon__title { margin: 0; }

/* Plus-/Minus-Zeichen ohne Bild und ohne JavaScript. */
.dg-akkordeon__icon {
	position: relative;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
}

.dg-akkordeon__icon::before,
.dg-akkordeon__icon::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 2px;
	background-color: currentColor;
	transition: transform 180ms ease;
}

.dg-akkordeon__icon::after { transform: rotate(90deg); }

.dg-akkordeon__item[open] .dg-akkordeon__icon::after { transform: rotate(0deg); }

.dg-akkordeon__body { padding-bottom: var(--dg-space-md); }

.dg-akkordeon__body > :first-child { margin-top: 0; }
.dg-akkordeon__body > :last-child { margin-bottom: 0; }

/* --- Beitragsliste ------------------------------------------------------- */

.dg-beitraege {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dg-space-lg);
}

.dg-beitrag {
	display: flex;
	flex-direction: column;
	gap: var(--dg-space-2xs);
}

.dg-beitrag__image {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: var(--dg-space-2xs);
}

.dg-beitrag__date,
.dg-beitrag__title,
.dg-beitrag__excerpt { margin: 0; }

.dg-beitrag__title a { text-decoration: none; }

.dg-beitrag__title a:hover,
.dg-beitrag__title a:focus-visible { text-decoration: underline; }

.dg-beitrag__more {
	display: inline-flex;
	align-items: center;
	gap: var(--dg-space-3xs);
	margin-top: auto;
	padding-top: var(--dg-space-2xs);
	text-decoration: none;
}

.dg-beitrag__more:hover,
.dg-beitrag__more:focus-visible { text-decoration: underline; }

.dg-beitrag__arrow { transition: transform 160ms ease; }
.dg-beitrag__more:hover .dg-beitrag__arrow { transform: translateX(3px); }

/* Falls das Theme die Klasse nicht mitbringt. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 767px) {
	.dg-stimmen,
	.dg-beitraege { grid-template-columns: minmax(0, 1fr); }
}

/* --- Preisübersicht ------------------------------------------------------ */

.dg-preise {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dg-space-md);
	align-items: stretch;
}

.dg-preis {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--dg-space-2xs);
	border: 2px solid transparent;
}

.dg-preis__badge {
	align-self: flex-start;
	margin: 0 0 var(--dg-space-2xs);
	padding: 4px 12px;
	border-radius: var(--dg-radius-pill);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dg-preis__name,
.dg-preis__price,
.dg-preis__period,
.dg-preis__description { margin: 0; }

.dg-preis__period { opacity: 0.75; }

.dg-preis__features {
	margin: var(--dg-space-2xs) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--dg-space-3xs);
}

/* Die Merkmalsliste hatte hier einen eigenen runden Punkt. Der ist entfallen:
   Sie wird jetzt oben unter "Aufzählungen" mitbedient und bekommt dasselbe
   SVG-Häkchen wie jede andere Liste. Die Regeln standen weiter unten in der
   Datei als die neuen und hätten Größe und Position überschrieben — aus dem
   Häkchen wäre ein 8×8 großer, rund beschnittener Rest geworden. */

.dg-preis__cta { margin-top: auto; align-self: flex-start; }

.dg-preise__note {
	margin: var(--dg-space-md) 0 0;
	opacity: 0.8;
}

/* --- Logo ---------------------------------------------------------------- */

.dg-logo {
	display: flex;
	flex-direction: column;
	gap: var(--dg-space-3xs);
}

.dg-logo__link {
	display: inline-block;
	line-height: 0;
	text-decoration: none;
}

.dg-logo__image {
	display: block;
	max-width: 100%;
	height: auto;
}

.dg-logo__tagline { margin: 0; }

/* --- Navigation ---------------------------------------------------------- */

.dg-nav {
	display: flex;
	align-items: center;
	position: relative;
}

.dg-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-nav__list li { position: relative; }

.dg-nav__list a {
	display: block;
	text-decoration: none;
	padding-block: var(--dg-space-3xs);
}

.dg-nav__list a:hover,
.dg-nav__list a:focus-visible { text-decoration: underline; }

/* Untermenü: auf Desktop aufklappend, ohne JavaScript per :hover und :focus-within */
.dg-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 220px;
	margin: 0;
	padding: var(--dg-space-2xs) 0;
	list-style: none;
	border-radius: var(--dg-radius-md);
	box-shadow: 0 12px 28px rgb(0 0 0 / 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.dg-nav__list .menu-item-has-children:hover > .sub-menu,
.dg-nav__list .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dg-nav__list .sub-menu a { padding: var(--dg-space-3xs) var(--dg-space-sm); }

/* Bewusst ".dg-nav .dg-nav__toggle" statt nur ".dg-nav__toggle":
   Hello Elementor setzt "[type='button'], [type='submit'], button" auf Pink und
   inline-block. Der Attributselektor hat dieselbe Spezifität wie eine einzelne
   Klasse — bei Gleichstand entscheidet die Ladereihenfolge, und die ist nichts,
   worauf sich ein Widget verlassen sollte. Zwei Klassen entscheiden es sicher.
   Wichtig: Die Mobil-Regel weiter unten muss genauso spezifisch sein, sonst
   schlägt diese Grundregel sie und der Menü-Knopf taucht nie auf. */
.dg-nav .dg-nav__toggle {
	display: none;
	align-items: center;
	gap: var(--dg-space-3xs);
	background: none;
	border: 0;
	padding: var(--dg-space-3xs) 0;
	cursor: pointer;
	color: inherit;
	font: inherit;
}

.dg-nav__toggle-bars {
	position: relative;
	width: 20px;
	height: 2px;
	background-color: currentColor;
}

.dg-nav__toggle-bars::before,
.dg-nav__toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: currentColor;
}

.dg-nav__toggle-bars::before { top: -6px; }
.dg-nav__toggle-bars::after  { top: 6px; }

/* Der Menüknopf wird beim Öffnen zum Kreuz.
   Bisher passierte beim Antippen sichtbar nichts — das Panel erschien, das
   Zeichen blieb stehen. Ein Umschalter muss seinen Zustand zeigen, sonst wirkt
   die Bedienung tot. Die Balken drehen sich zu einem X, der mittlere
   verschwindet; gesteuert über aria-expanded, also über denselben Zustand,
   den auch Screenreader lesen. */

.dg-nav__toggle-bars,
.dg-nav__toggle-bars::before,
.dg-nav__toggle-bars::after {
	transition: transform 220ms ease, opacity 160ms ease, top 220ms ease;
}

.dg-nav__toggle[aria-expanded="true"] .dg-nav__toggle-bars {
	background-color: transparent;
}

.dg-nav__toggle[aria-expanded="true"] .dg-nav__toggle-bars::before {
	top: 0;
	transform: rotate(45deg);
}

.dg-nav__toggle[aria-expanded="true"] .dg-nav__toggle-bars::after {
	top: 0;
	transform: rotate(-45deg);
}

.dg-nav__hint {
	margin: 0;
	padding: var(--dg-space-2xs) var(--dg-space-sm);
	border-left: 3px solid var(--dg-color-primary);
	background-color: var(--dg-color-wash, var(--dg-color-surface));
}

@media (max-width: 1024px) {
	/* Gleiche Spezifität wie die Grundregel oben — sonst bliebe der Knopf
	   verborgen und das Menü wäre auf Mobil nicht erreichbar. */
	.dg-nav .dg-nav__toggle { display: inline-flex; }

	/* Das Klappmenü hängt am Bildschirm, nicht in der Elternkette.

	   Zwei Anläufe sind hier gescheitert, beide an derselben Sache: Ein
	   absolut positioniertes Element misst sich am nächsten positionierten
	   Vorfahren. Das war zuerst ".dg-nav" (67 px breit), danach — nachdem der
	   auf static stand — ein Elementor-Container mit "position: relative" und
	   61 px Breite. Gemessen kam beide Male ein unlesbarer Streifen am rechten
	   Rand heraus, in den sich neun Einträge quetschten.

	   Elementor setzt seine Container selbst auf relative. Jedes weitere
	   "static" würde die Kette nur um ein Glied verschieben und beim nächsten
	   Strukturwechsel erneut brechen.

	   "fixed" ignoriert die Elternkette vollständig und bezieht sich auf den
	   Bildschirm. Bei einem mitlaufenden Kopfbereich ist das ohnehin das
	   richtige Verhalten: Das Menü gehört zum Bildschirmrand, nicht zum
	   Dokumentfluss. Der Abstand von oben kommt aus --dg-kopf-unten, die
	   nav.js laufend setzt: die UNTERKANTE des Kopfbereichs, nicht seine
	   Höhe. Bei angemeldeten Nutzern beginnt der Kopf erst unter der
	   Adminleiste — mit der Höhe stand das Panel 46 px zu hoch und überlappte
	   das Logo. Die Unterkante ist bildschirmbezogen und stimmt in beiden
	   Fällen, verdichtet wie unverdichtet. */
	.dg-nav__list {
		display: none;
		position: fixed;
		top: var(--dg-kopf-unten, 100px);
		right: 0;
		left: 0;
		z-index: 90;
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap;
		gap: 0;
		padding: var(--dg-space-2xs) var(--dg-gutter) var(--dg-space-sm);
		background-color: var(--dg-color-white);
		border-top: 1px solid var(--dg-color-line);
		box-shadow: 0 12px 28px rgb(0 0 0 / 0.14);

		/* Neun Einträge passen auf kleinen Geräten nicht immer auf den
		   Bildschirm — ohne diese beiden Zeilen wäre der letzte Punkt
		   unerreichbar. */
		max-height: calc(100vh - var(--dg-kopf-unten, 100px));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* Tippflächen nach Empfehlung mindestens 48 px hoch.
	   Mit reiner Polsterung kam der Eintrag auf rund 40 px — knapp unter der
	   Schwelle, ab der Fingertreffer zuverlässig sitzen. */
	.dg-nav__list > li > a {
		display: flex;
		align-items: center;
		min-height: 48px;
	}
	.dg-nav__list > li { flex:0 0 auto; width:100%; min-width:0; }

	/* Sichtbarkeit lässt sich nicht überblenden — display kennt keine
	   Zwischenschritte. Deshalb eine kurze Bewegung beim Öffnen. */
	.dg-nav--open .dg-nav__list {
		display: flex;
		animation: dg-menu-auf 200ms ease-out both;
	}

	@keyframes dg-menu-auf {
		from { opacity: 0; transform: translateY(-8px); }
		to   { opacity: 1; transform: none; }
	}

	/* Größere Tippflächen: neun Einträge auf einem Telefon brauchen Platz,
	   die 4 px der Desktop-Regel sind mit dem Finger nicht sicher zu treffen. */
	.dg-nav__list > li + li { border-top: 1px solid var(--dg-color-line); }

	.dg-nav__list a {
		padding-block: var(--dg-space-xs);
		font-size: var(--dg-font-size-body);
	}

	/* Untermenüs stehen mobil eingerückt im Fluss statt zu überlagern. */
	.dg-nav__list .sub-menu {
		position: static;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		padding: 0 0 0 var(--dg-space-sm);
	}

	.dg-nav__list .menu-item-has-children.dg-open > .sub-menu { display: block; }
}

@media (max-width: 767px) {
	.dg-preise { grid-template-columns: minmax(0, 1fr); }
}

/* --- Kopf- und Fußbereich ------------------------------------------------ */
/* Bewusst zurückhaltend: die Hüllen sollen nichts erzwingen, was im Editor
   nicht änderbar wäre. Gestaltet wird innen, mit den Widgets. */

/* Mitlaufender Kopfbereich.
   Er bleibt oben stehen und verdichtet sich beim Scrollen: weniger Polsterung,
   kleineres Logo, feine Trennlinie und ein leichter Schatten. So ist die
   Navigation jederzeit erreichbar, ohne dauerhaft viel Platz zu belegen —
   gemessen waren es vorher 153 px, also fast ein Viertel eines Telefondisplays,
   bevor überhaupt Inhalt begann. */

.dg-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--dg-color-white);
	transition: box-shadow 200ms ease, border-color 200ms ease;
	border-bottom: 1px solid transparent;
}

/* Die WordPress-Adminleiste steht selbst fest oben; ohne diesen Versatz
   schöbe sich der Kopfbereich darunter. Gilt nur für angemeldete Nutzer. */
body.admin-bar .dg-site-header { top: 32px; }

@media (max-width: 782px) {
	body.admin-bar .dg-site-header { top: 46px; }
}

.dg-site-header--kompakt {
	border-bottom-color: var(--dg-color-line);
	box-shadow: 0 6px 20px rgb(0 0 0 / 0.06);
}

/* Der innere Container trägt die Polsterung; im kompakten Zustand weniger. */
.dg-site-header .e-con-inner {
	transition: padding-block 200ms ease;
}

.dg-site-header--kompakt .e-con-inner {
	padding-block: 4px;
}

/* Elementors Voreinstellung für Kindcontainer abräumen.
   Gemessen: Die Logospalte war 98 px hoch bei einem 78 px hohen Logo — 10 px
   Polsterung oben und unten von Elementor. Der Kopfbereich kam dadurch auf
   12 + 98 + 12 = 122 px.

   Die Angabe steht zwar in header_tree(), landet aber nicht in post-1974.css:
   Elementor schreibt für eine Polsterung aus lauter Nullen offenbar keine
   Regel. Hier greift es unabhängig vom Datenformat — und ohne Aufbau-Lauf. */
.dg-site-header .e-con-inner > .e-con {
	padding-block: 0;
}

/* Das Logo schrumpft mit. !important ist hier nötig: Elementor schreibt die
   Breite mit (0,3,0) aus seiner Seiten-CSS, dagegen kommt kein Selektor an,
   den wir in einer eigenen Datei sinnvoll formulieren könnten. */
.dg-site-header--kompakt .dg-logo__image {
	width: 84px !important;
	transition: width 200ms ease;
}

.dg-site-header .dg-logo__image { transition: width 200ms ease; }

/* Bei offenem Mobilmenü das Seitenscrollen sperren — sonst scrollt die Seite
   unter dem Panel weg, während das Menü stehen bleibt. */
body.dg-menue-offen { overflow: hidden; }

/* Eine Ausnahme: Logo und Navigation gehören auf eine Zeile.
   Elementor gibt Container-Kindern auf Mobil grundsätzlich "--width: 100%",
   weshalb beide über die volle Breite liefen und umbrachen — das Logo stand
   oben, der Menüknopf weit darunter. Statt gegen diese Vorgabe pro Endgerät
   anzuschreiben, wird die Zeile hier festgehalten. Innen bleibt alles über die
   Widgets einstellbar. */

.dg-site-header .e-con-inner {
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--dg-space-sm);
}

.dg-site-header .e-con-inner > .e-con {
	width: auto;
	flex: 0 1 auto;
}

/* Die Navigation rückt nach rechts, egal wie breit das Logo ausfällt. */
.dg-site-header .e-con-inner > .e-con:last-child {
	margin-left: auto;
	align-items: flex-end;
}

/* Hier stand eine Mobilregel ".dg-site-header img { max-width: 150px }".
   Sie war wirkungslos: Elementor setzt ".elementor img { max-width: 100% }"
   mit derselben Spezifität (0,1,1) und lädt seine Datei nach unserer — bei
   Gleichstand entscheidet die Reihenfolge, also gewann Elementor.

   Die Logobreite wird deshalb am Widget je Endgerät gesetzt (siehe
   Templates::header_tree). Elementor schreibt sie dann selbst mit höherer
   Spezifität aus, und sie bleibt im Editor pro Gerät einstellbar. */

.dg-site-header,
.dg-site-footer {
	display: block;
	width: 100%;
}

/* Rechtszeile im Fußbereich.
   Die Farben standen früher als style="color:…" direkt an <p> und <a> und
   waren damit im Editor unerreichbar. Jetzt kommen sie aus den Tokens und
   folgen ihren globalen Farben, wenn sie diese später ändert. */

.dg-site-footer .dg-legal {
	margin: var(--dg-space-lg) 0 0;
	color: var(--dg-color-primary-light);
}

.dg-site-footer .dg-legal a {
	color: var(--dg-color-primary-light);
	text-decoration: none;
}

.dg-site-footer .dg-legal a:hover,
.dg-site-footer .dg-legal a:focus-visible {
	color: var(--dg-color-white);
	text-decoration: underline;
}

/* Sprungmarke für Tastaturnutzung — die Bestandsseite hat keine. */
.dg-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: var(--dg-space-2xs) var(--dg-space-sm);
	background-color: var(--dg-color-white);
	border-radius: var(--dg-radius-sm);
}

.dg-skip-link:focus {
	left: var(--dg-space-sm);
	top: var(--dg-space-sm);
}

/* --- Formular ------------------------------------------------------------ */

.dg-form {
	display: flex;
	flex-direction: column;
	gap: var(--dg-space-sm);
}

.dg-form__row {
	display: flex;
	flex-direction: column;
	gap: var(--dg-space-3xs);
	margin: 0;
}

.dg-form__label { font-weight: 600; }

.dg-form__req { color: var(--dg-color-accent); }

.dg-form__control {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--dg-color-line);
	background-color: var(--dg-color-white);
	font: inherit;
	color: inherit;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.dg-form__control:focus {
	outline: none;
	border-color: var(--dg-color-primary);
	box-shadow: 0 0 0 3px rgb(163 184 153 / 0.35);
}

.dg-form__control:invalid:not(:placeholder-shown) {
	border-color: var(--dg-color-signal);
}

textarea.dg-form__control {
	resize: vertical;
	min-height: 140px;
}

.dg-form__row--consent { margin-top: var(--dg-space-3xs); }

.dg-form__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--dg-space-2xs);
	cursor: pointer;
}

.dg-form__consent input { margin-top: 0.25em; }

/* Honigtopf: für Menschen unerreichbar, für Bots aber im Quelltext vorhanden.
   Bewusst nicht display:none — das überspringen viele Bots gezielt. */
.dg-form__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dg-form__message:empty { display: none; }

.dg-form__note {
	margin: 0 0 var(--dg-space-sm);
	padding: var(--dg-space-2xs) var(--dg-space-sm);
	border-left: 3px solid var(--dg-color-primary);
	background-color: var(--dg-color-surface);
}

.dg-form__note--error { border-left-color: var(--dg-color-signal); }

.dg-form button[aria-busy="true"] { opacity: 0.6; cursor: progress; }

/* --- Terminbuchung ------------------------------------------------------- */

.dg-termin__heading { margin: 0 0 var(--dg-space-2xs); }
.dg-termin__intro { margin: 0 0 var(--dg-space-md); }

.dg-form__hint {
	display: block;
	margin-top: var(--dg-space-3xs);
	font-size: 0.9em;
	opacity: 0.8;
}

.dg-termin__slots {
	display: flex;
	flex-direction: column;
	gap: var(--dg-space-3xs);
}

.dg-slots {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dg-space-2xs);
}

.dg-slot {
	border: 1px solid var(--dg-color-line);
	border-radius: var(--dg-radius-pill);
	padding: 10px 18px;
	font: inherit;
	cursor: pointer;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.dg-slot:hover { border-color: var(--dg-color-primary); }

.dg-slot[aria-pressed="true"] {
	border-color: var(--dg-color-primary);
	color: var(--dg-color-white);
}

.dg-slots__note {
	margin: 0;
	opacity: 0.8;
}

/* --- Kontaktabschnitt ---------------------------------------------------- */
/* Der wiederkehrende Block „Melden Sie sich“. Im Bestand lag er dreimal
   kopiert auf Startseite, Über mich und Praxis. */

.dg-cta {
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	padding-block: var(--dg-space-3xl);
}

/* Die Abdunkelung liegt nur dort, wo ein Bild hinterlegt ist. */
.dg-cta--image::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.dg-cta__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.dg-cta:not(.dg-cta--image) .dg-cta__overlay { display: none; }

.dg-cta__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--dg-content-width);
	margin-inline: auto;
	padding-inline: var(--dg-gutter);
}

.dg-cta__title { margin: 0 0 var(--dg-space-sm); }
.dg-cta__text { margin: 0 0 var(--dg-space-lg); }

@media (max-width: 767px) {
	.dg-cta { padding-block: var(--dg-space-2xl); }
}