/* ==========================================================================
   Wunschgesichter · Layout: Sektionen, Container, Raster
   ========================================================================== */

/* Inhalt ohne Sektion (z. B. frei eingefügter Absatz) bleibt auf Lesebreite – wie im Editor (theme.json). */
.single-content > :not(.alignfull):not(.alignwide):not(.wg-section) { max-width: var(--wg-w-text); margin-inline: auto; }
.single-content > .alignwide { max-width: var(--wg-w-content); margin-inline: auto; }

/* --- Sektion ------------------------------------------------------------- */
/* Block-Stil "Sektion …" macht jede Gruppe zur Sektion – .wg-section setzen die Patterns zusätzlich. */
.wg-section, .wp-block-group[class*="is-style-wg-"] { padding-block: var(--wg-section); color: var(--wg-anthrazit); }
.wg-section { background: var(--wg-weiss); }
.wg-section.wg-section--kompakt { padding-block: var(--wg-section-kompakt); }
.wg-section.wg-section--linie-unten { border-bottom: var(--wg-linie); }
.wg-section.wg-section--linien { border-block: var(--wg-linie); }
.entry-content > .wg-section, .entry-content > .wp-block-group[class*="is-style-wg-"] { margin-block: 0; }

.is-style-wg-weiss { background: var(--wg-weiss); }
.is-style-wg-warmwhite { background: var(--wg-warmwhite); }
.is-style-wg-softblue { background: var(--wg-softblue); }
.is-style-wg-sand { background: var(--wg-sand); }
.is-style-wg-tuerkis { background: var(--wg-tuerkis); }

/* Kadence-Override: Kadence setzt über jede Überschrift im Inhalt 1,5 em Abstand. In unseren Sektionen regeln die Tokens den Abstand
   (Eyebrow → Überschrift 12 px, Sektionskopf beginnt am Sektionsrand). Nur nach Fließtext bleibt der Abstand erhalten. */
.wg-section :is(h1, h2, h3, h4), .wg-hero :is(h1, h2, h3, h4) { margin-top: 0; }
.wg-section :is(p:not(.is-style-wg-eyebrow):not(.wg-deko), ul, ol) + :is(h2, h3, h4) { margin-top: 1.5em; }

/* --- Container ----------------------------------------------------------- */
.wg-container { box-sizing: border-box; width: 100%; max-width: var(--wg-w-content); margin-inline: auto; padding-inline: var(--wg-edge); }
.wg-container--text { max-width: calc(var(--wg-w-text) + 2 * var(--wg-edge)); }
.wg-container--wide { max-width: var(--wg-w-wide); }
.wg-container > * { margin-block: 0; }

/* --- Sektionskopf: Eyebrow + H2 + Lead, zentriert ------------------------ */
.wg-section__head { max-width: 720px; margin-inline: auto; margin-bottom: var(--wg-head-gap); text-align: center; }
.wg-section__head > * { margin-block: 0; }
.wg-section__head h2 { margin-bottom: 0; }
.wg-section__head .is-style-wg-lead { margin-top: var(--wg-s-5); }
.wg-section__text { max-width: var(--wg-w-text); margin: calc(var(--wg-head-gap) * -1 + var(--wg-s-4)) auto var(--wg-head-gap); }
.wg-section__text > * { margin-block: 0; }
.wg-section__text > p + p { margin-top: 1.1em; }
.wg-section__fuss { margin-top: var(--wg-head-gap); text-align: center; display: grid; justify-items: center; gap: var(--wg-s-4); }
.wg-section__fuss > * { margin: 0; }

/* Abstände im Textfluss einer Spalte */
.wg-split__text > *, .wg-seitenkopf-bild__text > *, .wg-kontakt__daten > *, .wg-kontakt__formular > * { margin-block: 0; }
.wg-split__text > h2, .wg-seitenkopf-bild__text > h1 { margin-bottom: var(--wg-s-5); }
.wg-split__text > p + p, .wg-seitenkopf-bild__text > p + p { margin-top: 1.1em; }
.wg-split__text > .wp-block-buttons, .wg-split__text > .wp-block-list, .wg-seitenkopf-bild__text > .wp-block-buttons { margin-top: var(--wg-s-6); }

/* --- Zweispalter (Text + Bild) ------------------------------------------ */
/* Kadence-/Core-Override: Spaltenbreiten per Klasse statt Inline-Style am Block. */
.wp-block-columns.wg-split { display: grid; grid-template-columns: 1fr; gap: var(--wg-s-6); align-items: center; margin-block: 0; }
/* WordPress setzt für Spalten-Blöcke align-items: normal mit !important – die vertikale Mitte kommt deshalb über die Spalte selbst. */
.wp-block-columns.wg-split > .wp-block-column { min-width: 0; align-self: center; }
.wg-text-bild { display: grid; gap: var(--wg-s-8); }

@media (min-width: 768px) {
	.wp-block-columns.wg-split { gap: var(--wg-s-7); }
	.wp-block-columns.wg-split--5-7 { grid-template-columns: 5fr 7fr; }
	.wp-block-columns.wg-split--6-6 { grid-template-columns: 1fr 1fr; }
	.wp-block-columns.wg-split--7-5 { grid-template-columns: 7fr 5fr; }
	.wp-block-columns.wg-split--gespiegelt.wg-split--5-7 { grid-template-columns: 7fr 5fr; }
	.wp-block-columns.wg-split--gespiegelt.wg-split--7-5 { grid-template-columns: 5fr 7fr; }
	.wg-split--gespiegelt > .wg-split__bild { order: 2; }
	.wp-block-columns.wg-split--oben > .wp-block-column { align-self: start; }
}

@media (min-width: 1025px) {
	.wp-block-columns.wg-split { gap: var(--wg-s-8); }
	.wg-text-bild { gap: var(--wg-s-9); }
}

/* --- Bildformate (Platzhalter: Fläche Sand) ----------------------------- */
/* Kadence-Override: Kadence gibt Bild-Blöcken im Inhalt einen Außenabstand unten – in Rastern verzieht das die Bildhöhen. */
.wg-bild.wp-block-image, .wg-section .wg-bild.wp-block-image, .wg-section .wg-logo.wp-block-image { margin: 0; }
.wg-bild { overflow: hidden; background: var(--wg-sand); }
.wg-bild img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.wg-bild--4x5 img { aspect-ratio: 4 / 5; }
.wg-bild--3x2 img { aspect-ratio: 3 / 2; }
.wg-bild--rund { border-radius: var(--wg-radius-rund); }

/* --- Raster ------------------------------------------------------------- */
.wg-raster-3 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--wg-gap); }
.wg-raster-3 > * { margin: 0; }
.wg-raster-2 { display: grid; grid-template-columns: 1fr; gap: var(--wg-gap); }
.wg-raster-2 > * { margin: 0; }
@media (min-width: 600px) {
	.wg-raster-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
	.wg-raster-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Dreierspalte nur Text (K11 --nur-text) */
.wp-block-columns.wg-textspalten { display: grid; grid-template-columns: 1fr; gap: var(--wg-s-6); margin-block: 0; }
.wg-textspalten > .wp-block-column { border-top: var(--wg-linie); padding-top: var(--wg-s-5); }
.wg-textspalten > .wp-block-column > * { margin-block: 0; }
.wg-textspalten > .wp-block-column > h2, .wg-textspalten > .wp-block-column > h3 { margin-bottom: var(--wg-s-3); }
/* H2 in der schmalen Spalte: Versalien bleiben, Größe wie H3 – sonst brechen lange Wörter. */
.wg-textspalten > .wp-block-column > h2 { font-size: var(--wg-fs-h4); line-height: 1.35; letter-spacing: var(--wg-ls-nav); margin-right: 0; }
@media (min-width: 768px) {
	/* Zwei Spalten teilen sich die Breite, drei stehen als Dreierspalte; eine einzelne bleibt auf Lesebreite. */
	.wp-block-columns.wg-textspalten { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--wg-gap); }
	.wg-textspalten > .wp-block-column:only-child { max-width: var(--wg-w-text); }
}

/* --- Scroll-Einblendung (Klasse setzt erst site.js – ohne JS ist alles sichtbar) --- */
.wg-einblenden { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease-out, transform 500ms ease-out; }
.wg-einblenden.is-sichtbar { opacity: 1; transform: none; }
.is-style-wg-sand .wg-bild { background: var(--wg-warmwhite); }

/* Kadence-Override: Kadence gibt Gruppen, Spalten und Bildern im Inhalt einen Außenabstand unten (außer dem letzten Kind).
   In unseren Rastern regelt allein die Lücke (gap) den Abstand – sonst sind die Elemente einer Reihe ungleich hoch. */
.wg-section :is(.wg-raster-2, .wg-text-bild, .wg-karten, .wg-kacheln, .wg-team, .wg-team__hunde, .wg-team__hund, .wg-logos, .wg-galerie, .wg-raster-3, .wg-bildstrecke, .wg-faq-liste) > * { margin-block: 0; }