/* =========================================================
   Die goldene Mitte – WordPress-spezifische Ergänzungen
   (Design-System: assets/styles.css)
   ========================================================= */

/* --- Accessibility helpers --- */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
	position: absolute !important; word-wrap: normal !important;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--surface); color: var(--text); padding: 12px 20px;
	border-radius: 0 0 var(--r-md) 0; box-shadow: var(--shadow-md); font-weight: 700;
}
.skip-link:focus { left: 0; }

/* --- Generische Seiten/Beiträge (Inhalt ohne eigene .section/.wrap) ---
   Direkte Section-Kinder bleiben full-bleed; alle übrigen Blöcke werden
   wie der Lese-Content zentriert und begrenzt. */
.dgm-entry > :not(section):not(.hero):not(.dgm-bleed) {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.dgm-entry > section,
.dgm-entry > .hero { margin-block: 0; }

/* Lese-Layout (Beitrag, Suche, 404, generische Seite) */
.dgm-article .entry-content > * { margin-block: 1.1rem; }
.dgm-article .entry-content > h2 { margin-top: 1.8rem; }
.dgm-article .entry-content > h3 { margin-top: 1.4rem; }
.dgm-article .entry-content :where(ul, ol):not(.checklist) {
	padding-left: 1.4em; list-style: revert;
}
.dgm-article .entry-content li { margin-block: 0.4rem; }
.dgm-article .entry-content img { border-radius: var(--r-lg); }
.dgm-article .entry-content blockquote {
	border-left: 3px solid var(--accent); padding-left: 1.2em; font-style: italic; color: var(--text-soft);
}
.dgm-article .entry-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* --- Rechtstexte (Impressum, Datenschutz, Cookies) ---
   Die Abschnitte sind semantisch h2, optisch aber Zwischentitel im
   Lesefluss – sie sitzen deshalb auf der h3-Stufe der Skala. Ersetzt
   die früheren Inline-Größen in den Patterns. */
.dgm-legal h2 { font-size: var(--fs-h3); margin-top: 1.6rem; }
/* Der übernommene Datenschutztext ist dreistufig gegliedert (Abschnitt →
   Thema → Einzelfrage). Damit sich h3 nicht mit der h2-Stufe deckt – beide
   stünden sonst auf --fs-h3 – rutscht jede Unterebene eine Stufe herunter. */
.dgm-legal h3 { font-size: var(--fs-h4); margin-top: 1.3rem; }
.dgm-legal h4 { font-size: var(--fs-h6); margin-top: 1rem; }
/* Globales `ul { list-style: none }` zurücknehmen – Aufzählungen im
   Fließtext (z. B. die Server-Log-Felder) brauchen ihre Punkte. */
.dgm-legal ul { list-style: disc; padding-left: 1.4em; }
.dgm-legal li { margin-block: 0.3rem; }
.dgm-legal a {
	color: var(--primary); text-decoration: underline; text-underline-offset: 2px;
	overflow-wrap: anywhere;
}

/* --- Beitragsbild in Karten --- */
.post-card-img,
.post-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.post-card.featured { flex-direction: row; align-items: stretch; }
.post-card.featured .post-card-img,
.post-card.featured .ph { flex: 1; min-width: 0; min-height: 320px; height: auto; border-radius: 0; }
.post-card.featured .post-body { flex: 1; justify-content: center; padding: clamp(28px, 4vw, 52px); }
@media (max-width: 760px) {
	.post-card.featured { flex-direction: column; }
	.post-card.featured .post-card-img,
	.post-card.featured .ph { min-height: 220px; }
}

/* --- Pagination --- */
.dgm-pagination { margin-top: 48px; }
.dgm-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dgm-pagination a, .dgm-pagination span {
	display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px;
	border-radius: 999px; font-weight: 700; color: var(--text-soft);
	border: 1px solid var(--line); background: var(--surface);
}
.dgm-pagination a:hover { border-color: var(--primary); color: var(--primary); }
.dgm-pagination .current { background: var(--primary); color: var(--bg); border-color: var(--primary); }

/* --- Suchformular --- */
.dgm-search { display: flex; gap: 10px; max-width: 520px; }
.dgm-search input[type="search"] {
	font: inherit; flex: 1; padding: 0.85em 1.1em; border-radius: var(--r-md);
	border: 1.5px solid var(--line); background: var(--surface); color: var(--text);
}
.dgm-search input[type="search"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ghost); }

/* --- WordPress-Bildausrichtungen --- */
.alignleft { float: left; margin: 0.4rem 1.6rem 1rem 0; }
.alignright { float: right; margin: 0.4rem 0 1rem 1.6rem; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text, .wp-element-caption { font-size: var(--fs-body); color: var(--text-mute); margin-top: 8px; text-align: center; }
.sticky, .gallery-caption { display: block; }

/* --- Kontaktformular (nativ) → Design-System --- */
.dgm-form .form-grid { display: grid; gap: 18px; }
.dgm-form .field { display: grid; gap: 7px; }
.dgm-form .field label { font-weight: 700; font-size: var(--fs-body); color: var(--text); }
.dgm-form input.dgm-input:not([type="checkbox"]):not([type="radio"]),
.dgm-form textarea.dgm-input,
.dgm-form select.dgm-input {
	font: inherit; font-size: var(--fs-body); padding: 0.85em 1em; border-radius: var(--r-md);
	border: 1.5px solid var(--line); background: var(--surface); color: var(--text); width: 100%;
	transition: border-color .15s, box-shadow .15s;
}
.dgm-form input.dgm-input:focus,
.dgm-form textarea.dgm-input:focus,
.dgm-form select.dgm-input:focus {
	outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ghost);
}
.dgm-form textarea.dgm-input { resize: vertical; min-height: 130px; }
.dgm-form .checkbox-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.dgm-form .checkbox-row label { font-weight: 400; font-size: var(--fs-body); color: var(--text-soft); }
.dgm-form .checkbox-row input[type="checkbox"] { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--primary); }
.dgm-field-error { color: #b32228; font-size: var(--fs-body); margin-top: 4px; display: block; }
.dgm-form input.dgm-input-invalid, .dgm-form textarea.dgm-input-invalid, .dgm-form select.dgm-input-invalid { border-color: #c53637; }
.dgm-form-notice {
	margin: 0 0 18px; padding: 14px 18px; border-radius: var(--r-md);
	border: 1.5px solid var(--line); font-size: var(--fs-body);
}
.dgm-form-success { border-color: var(--primary); background: var(--primary-tint); color: var(--primary-deep); }
.dgm-form-error {
	border-color: #ce514d; background: #ffebe8; color: #a20519;
}
/* Honeypot: für Menschen unsichtbar, für Bots erreichbar. */
.dgm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Kommentare (schlicht) --- */
.dgm-comments { max-width: 760px; margin: 56px auto 0; }
.dgm-comments .comment-list { display: grid; gap: 20px; }
.dgm-comments .comment-body { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 20px; }
.dgm-comments .comment-author { font-weight: 700; color: var(--text); }

/* --- Embeds full-bleed in Lese-Content --- */
.dgm-article .entry-content .wp-block-embed { margin-block: 1.6rem; }

/* =========================================================
   Native Blocks (dgm/*) – Bild-Helfer
   Layout & Optik kommen aus styles.css (.card, .ph, .split …);
   hier nur die Ergänzungen für echte Bilder in Blocks.
   ========================================================= */
/* Die Seitenverhältnisse kommen aus .ph-portrait/-wide/-square (styles.css) und
   gelten für Platzhalter wie Bilder gleichermaßen. Die Editor-Vorschau rendert
   Bilder ohne .dgm-media-Klasse – daher greifen die Regeln auch auf img.ph-*,
   sonst wird das Bild dort ins Seitenverhältnis gequetscht statt beschnitten. */
.dgm-media,
img.ph-portrait,
img.ph-wide,
img.ph-square { width: 100%; height: auto; border-radius: var(--r-lg); object-fit: cover; display: block; }

.card-center { text-align: center; }
.card-media { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-lg); margin-bottom: 18px; display: block; }
.card-media.round { width: 140px; height: 140px; min-height: 0; aspect-ratio: 1/1; border-radius: 50%; margin: 0 auto 20px; }
.card-media.round .ph-label { font-size: var(--fs-body); }

/* Dunkle Themen-Karte (dgm/target-card, „dark") – ersetzt die früheren
   Inline-Styles aus dem Pattern.
   Kundenvorgabe: exakt der Onyx-Ton des Abschnitts darunter (.section-dark =
   var(--text) = #29323b), nicht mehr das frühere Braun. */
.target-card.dark { background: #29323b; color: #d9dee5; border-color: transparent; }
.target-card.dark h3 { color: #fcfbf6; }
.target-card.dark p { color: #c7ccd2; }
/* Fetter Text stünde sonst als var(--text) auf dieser dunklen Karte (1,16:1).
   Die Karte ist in beiden Modi dunkel, daher ein fester heller Ton. */
.target-card.dark strong { color: #fcfbf6; }
.target-card.dark .tc-tag,
.target-card.dark .link-arrow { color: var(--accent); }
/* Im Dark Mode zieht die Karte mit der .section-dark nach (#090d10). */
:root[data-theme="dark"] .target-card.dark { background: #090d10; }

/* Lesbarkeit in dunklen Sektionen (dgm/section „dark", dgm/heading &
   dgm/checklist darin) – ohne dass der Kunde Inline-Farben pflegen muss. */
.section-dark .eyebrow { color: var(--accent); }
.section-dark .eyebrow::before { background: var(--accent); }
.section-dark .lead { color: #d1cdc7; }
.section-dark .checklist span { color: #d1cdc7; }
.section-dark .checklist b,
.section-dark .checklist strong { color: #fcfbf6; }
/* Häkchen bleiben auch auf dem Onyx-Banner golden (Kundenvorgabe: Häkchen
   generell im Goldton, außer auf goldener Fläche). Gold auf Onyx ~10:1. */
.section-dark .checklist .ck svg { stroke: var(--accent); }

/* Preiskarte (dgm/price-card) */
.price-card { display: flex; flex-direction: column; }
.price-card .tc-tag { color: var(--accent-deep); }
.price-card h3 { margin: 6px 0 16px; }
.price-card .checklist { margin: 22px 0; }
.price-card .btn { margin-top: auto; }
.price-card.featured { box-shadow: var(--shadow-md); border-color: var(--primary); position: relative; }
.price-badge {
	position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
	background: var(--accent); color: #2b1f11;
	font-size: var(--fs-body); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}

/* USPs im Hero als Häkchen-Liste (dgm/hero, Darstellung „Liste mit Haken").
   Im zentrierten Layout bleibt die Liste linksbündig – zentrierte Häkchen-
   Zeilen mit unterschiedlich langem Text ergeben eine ausgefranste Kante –,
   sitzt als Block aber mittig unter der Überschrift. */
.page-hero .wrap-narrow .hero-usps {
	max-width: 46ch;
	margin-inline: auto;
	text-align: left;
}

/* Ausgerichteter Einzel-Button (dgm/button, align center/right) */
.dgm-btn { margin-top: 32px; }
.dgm-btn-center { text-align: center; }
.dgm-btn-right { text-align: right; }

/* Ausgerichtete Überschrift (dgm/heading, align center/right) */
.dgm-heading-center { text-align: center; max-width: 820px; margin-inline: auto; }
.dgm-heading-right { text-align: right; }
.dgm-heading-center .eyebrow { justify-content: center; }
/* FAQ-Gruppen: Überschrift, die direkt auf eine FAQ-Liste folgt, bekommt
   Abstand nach oben (trennt die Themenblöcke sichtbar). */
.faq-list + .dgm-heading { margin-top: clamp(40px, 6vw, 56px); }

/* Online-Buchungs-Karte (dgm/contact-info) */
.dgm-booking-card { background: var(--primary); color: var(--primary-contrast); }
.dgm-booking-card h3 { color: #fcfbf6; }
.dgm-booking-card p { color: #dae9df; margin: 8px 0 18px; }

/* =========================================================
   Prominentes Logo (dgm/media, Format „logo") – z. B. im
   Willkommen-Abschnitt der Startseite. Freigestellt, zentriert,
   ohne Beschnitt/Rahmen. Deutlich größer als das Header-Logo.
   ========================================================= */
.dgm-logo-hero {
	display: block;
	width: auto;
	max-width: min(460px, 100%);
	height: auto;
	margin: 0 auto clamp(28px, 4vw, 44px);
}

/* Illustration/Grafik (dgm/media, Format „figure") – z. B. die
   Beckenboden-Zeichnungen. contain statt cover, weiche Fläche dahinter. */
.dgm-figure { margin: 0 auto; max-width: min(320px, 100%); }
.dgm-figure img,
.dgm-figure-img {
	display: block; width: 100%; height: auto;
	object-fit: contain; background: var(--surface);
	border-radius: var(--r-lg); border: 1px solid var(--line-soft);
	padding: clamp(12px, 2vw, 20px);
}
.dgm-figure figcaption {
	font-style: italic; font-size: var(--fs-body); color: var(--text-mute);
	line-height: 1.5; margin-top: 10px; text-align: center;
}
/* Mehrere Figures nebeneinander (dgm/card-grid): schmale Spalten – der
   Innenabstand des Rahmens würde die Illustration sonst zusammendrücken. */
.grid .dgm-figure img,
.grid .dgm-figure-img { padding: clamp(8px, 1.2vw, 14px); border-radius: var(--r-md); }
.grid .dgm-figure figcaption { margin-top: 8px; }

/* =========================================================
   Slider / Karussell (dgm/slider) – Verhalten in assets/site.js.
   Jede Folie = ein direkter Kind-Block, je 100 % breit.
   ========================================================= */
.dgm-slider { position: relative; }
.dgm-slider-viewport { position: relative; overflow: hidden; border-radius: var(--r-lg); }
/* Foto-Slider liegen wie eine Karte auf der Fläche: Schatten und eine
   Haarlinie, damit helle Bildkanten auf hellem Grund nicht ausfransen.
   Nur für Bild-Folien – Inhalts-Slider (Kundenstimmen) bleiben flach. */
.dgm-slider-viewport:has(> .dgm-slider-track > img),
.dgm-slider-viewport:has(> .dgm-slider-track > .dgm-media),
.dgm-slider-viewport:has(> .dgm-slider-track > picture > .dgm-media) {
	background: var(--surface); box-shadow: var(--shadow-lg);
}
.dgm-slider-viewport:has(> .dgm-slider-track > img)::after,
.dgm-slider-viewport:has(> .dgm-slider-track > .dgm-media)::after,
.dgm-slider-viewport:has(> .dgm-slider-track > picture > .dgm-media)::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line-soft);
}
.dgm-slider-track { display: flex; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.dgm-slider-track > * { flex: 0 0 100%; min-width: 0; margin: 0; transition: opacity .5s ease; }
/* Folien tragen oft .reveal (opacity:0 bis im Viewport). Nicht sichtbare
   Folien sind aus dem Viewport geschoben, würden also nie „aufgedeckt" und
   blieben unsichtbar – daher hier direkt sichtbar schalten. */
.dgm-slider-track > .reveal { opacity: 1; transform: none; }
/* Beim Wechsel blendet die abgehende Folie leicht ab, die neue kommt klar
   herein. Erst aktiv, wenn site.js den Slider verdrahtet hat (.is-ready) –
   ohne JS bleiben alle Folien voll sichtbar. */
.dgm-slider.is-ready .dgm-slider-track > :not(.is-active) { opacity: .4; }
/* Bilder in Folien füllen die Fläche randlos. */
.dgm-slider-track > img,
.dgm-slider-track > .dgm-media,
.dgm-slider-track > picture > .dgm-media { border-radius: 0; }

/* Folien-Bilder liegen wegen AVIF/WebP in einem <picture>. Hier – und nur
   hier – bleibt dieses <picture> ein echter Kasten: Es ist der Träger der
   Folienbreite, den Track-Flexbox, .is-active und inert ansprechen. */
.dgm-slider-track > picture { display: block; min-width: 0; }
.dgm-slider-track > picture > .reveal { opacity: 1; transform: none; }

.dgm-slider-arrow {
	position: absolute; top: 50%; transform: translateY(-50%) scale(.9);
	width: 48px; height: 48px; border-radius: 50%;
	background: #ffffffeb; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	box-shadow: var(--shadow-md);
	display: grid; place-items: center; z-index: 3; color: var(--primary);
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease, background .2s ease, color .2s ease;
}
/* Pfeile erscheinen erst bei Hover/Tastaturfokus – das Foto bleibt frei. */
.dgm-slider:hover .dgm-slider-arrow,
.dgm-slider:focus-within .dgm-slider-arrow { opacity: 1; transform: translateY(-50%) scale(1); }
.dgm-slider-arrow:hover { background: var(--accent); color: var(--accent-contrast); transform: translateY(-50%) scale(1.07); }
.dgm-slider-arrow:focus-visible { outline: none; box-shadow: var(--shadow-md), 0 0 0 4px var(--primary-ghost); }
.dgm-slider-arrow svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
.dgm-slider-arrow.prev { left: 16px; }
.dgm-slider-arrow.prev svg { transform: scaleX(-1); }
.dgm-slider-arrow.next { right: 16px; }
/* Touch-Geräte kennen kein Hover: dort dauerhaft sichtbar, etwas kleiner. */
@media (hover: none) {
	.dgm-slider-arrow { opacity: 1; transform: translateY(-50%); width: 42px; height: 42px; }
	.dgm-slider-arrow.prev { left: 10px; }
	.dgm-slider-arrow.next { right: 10px; }
}
.dgm-slider.is-single .dgm-slider-arrow,
.dgm-slider.is-single .dgm-slider-dots { display: none; }

/* Punkte: der aktive wächst zu einem goldenen Strich. */
.dgm-slider-dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 20px; }
.dgm-slider-dot {
	width: 8px; height: 8px; border-radius: 999px; background: var(--grey-deep); opacity: .45;
	transition: width .35s cubic-bezier(.16,1,.3,1), background .25s ease, opacity .25s ease;
}
.dgm-slider-dot:hover { opacity: .8; }
.dgm-slider-dot:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-ghost); }
.dgm-slider-dot.active { width: 30px; background: var(--accent); opacity: 1; }

/* Weniger Bewegung: keine Gleit-/Blend-Animation. */
@media (prefers-reduced-motion: reduce) {
	.dgm-slider-track,
	.dgm-slider-track > *,
	.dgm-slider-arrow,
	.dgm-slider-dot { transition: none; }
	.dgm-slider.is-ready .dgm-slider-track > :not(.is-active) { opacity: 1; }
}

/* Kundenstimmen im Slider: die Testimonial-Sektion bringt sonst ihre eigene
   vertikale Polsterung mit – im Slider soll sie flach sitzen (der äußere
   dgm/section liefert Fläche & Abstand). */
.dgm-slider-track > section { padding-block: 0; }

/* Editor-Vorschau: Folien untereinander statt im 100%-Track. */
.dgm-slider--edit .block-editor-inner-blocks > .block-editor-block-list__layout { display: grid; gap: 16px; }

/* =========================================================
   Themen-Karte mit Foto (dgm/target-card mit Bild statt Icon)
   – Flyer-Bilder im Abschnitt „Für wen es gemacht ist".
   ========================================================= */
/* .target-card ist bereits display:flex / overflow:hidden (styles.css). */
.target-card .tc-body { display: flex; flex-direction: column; flex: 1; }
.target-card .tc-body .link-arrow { margin-top: auto; padding-top: 16px; }
.target-card h3 { margin-bottom: 8px; }
.target-card .tc-tag { margin-bottom: 6px; }
/* Karte ohne Foto: klassische Polsterung auf der Karte selbst. */
.target-card:not(.has-photo) { padding: clamp(22px, 2.6vw, 32px); }
.target-card:not(.has-photo) .tc-body { padding: 0; }
/* Karte mit Foto: Bild randlos oben, Text in eigener Polsterung. */
.target-card.has-photo { padding: 0; }
.target-card.has-photo .tc-body { padding: clamp(22px, 2.6vw, 30px); }
.target-card .tc-media { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
/* Bild-Platzhalter statt Foto: gleiche Fläche, ohne eigene Rundung (Karte schneidet ab). */
.target-card .tc-ph { width: 100%; min-height: 0; border-radius: 0; }

/* =========================================================
   CTA-Band mit Foto (dgm/cta-band mit Bild, z. B. Team Anja & Daniel)
   ========================================================= */
.cta-band--photo { display: grid; grid-template-columns: 1.35fr 0.65fr; align-items: end; gap: clamp(20px, 4vw, 48px); }
.cta-band--photo .cta-band-inner { align-self: center; }
/* Innen-Split (Text | Buttons): halbe/halbe quetscht die Überschrift und
   lässt rechts neben den Buttons eine Lücke zum Foto. Der Text bekommt
   deshalb zwei Drittel, die Button-Spalte nur so viel, wie sie braucht. */
.cta-band--photo .cta-band-inner .split { grid-template-columns: 2fr 1fr; }
/* Das Band ist unten abgeschnitten (overflow:hidden am .cta-band); das
   freigestellte Foto „steht" auf der Grundlinie und ragt oben ein Stück heraus. */
/* width:auto + max-width/-height: das Bildelement umschließt das freigestellte
   Motiv exakt. Mit width:100% blieb links und rechts durchsichtige Fläche
   stehen (object-fit: contain zentriert darin) – die sah wie eine Lücke
   zwischen Buttons und Foto aus. */
.cta-band-photo {
	align-self: end; justify-self: start;
	width: auto; max-width: 100%; height: auto; max-height: 420px;
	object-fit: contain; object-position: bottom center;
	position: relative; z-index: 2; margin-bottom: calc(-1 * clamp(40px, 6vw, 72px));
}
/* Text | Buttons | Foto nebeneinander braucht Platz: Die Button-Spalte
   umbricht nicht (white-space: nowrap), ihre Mindestbreite drückt sonst die
   Foto-Spalte auf nahezu null. Darunter stapeln Text und Buttons deshalb. */
@media (max-width: 1300px) {
	.cta-band--photo .cta-band-inner .split { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.cta-band--photo { grid-template-columns: 1fr; }
	.cta-band-photo { max-height: 280px; margin: 0 auto; justify-self: center; object-position: center; }
}