/* ==========================================================================
   Wunschgesichter · Komponenten (Spec 03, K01–K26)
   Farben, Größen und Abstände ausschließlich über Variablen aus tokens.css.
   ========================================================================== */

/* --- Icons als CSS-Maske (Strich-Icons aus assets/img/icons, Farbe = currentColor) --- */
.wg-icon--personen { --wg-icon: url("../img/icons/personen.svg"); }
.wg-icon--kamera { --wg-icon: url("../img/icons/kamera.svg"); }
.wg-icon--herz { --wg-icon: url("../img/icons/herz.svg"); }
.wg-icon--globus { --wg-icon: url("../img/icons/globus.svg"); }
.wg-icon--filmklappe { --wg-icon: url("../img/icons/filmklappe.svg"); }
.wg-icon--laptop { --wg-icon: url("../img/icons/laptop.svg"); }
.wg-icon--megafon { --wg-icon: url("../img/icons/megafon.svg"); }
.wg-icon--kleiderbuegel { --wg-icon: url("../img/icons/kleiderbuegel.svg"); }
.wg-icon--pinsel { --wg-icon: url("../img/icons/pinsel.svg"); }
.wg-icon--klemmbrett { --wg-icon: url("../img/icons/klemmbrett.svg"); }
.wg-icon--fernglas { --wg-icon: url("../img/icons/fernglas.svg"); }

/* --- Buttons (Spec 01/6) ------------------------------------------------ */
/* Grundform (Farbe, Radius, Schrift) kommt aus den Kadence-Button-Einstellungen. */
.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: var(--wg-s-3); min-height: var(--wg-button-h); padding-block: 0; box-sizing: border-box; text-decoration: none; transition: background-color var(--wg-t-farbe), color var(--wg-t-farbe), border-color var(--wg-t-farbe); }
.wp-block-button__link::after { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("../img/icons/pfeil-rechts.svg") center / contain no-repeat; mask: url("../img/icons/pfeil-rechts.svg") center / contain no-repeat; transition: transform var(--wg-t-farbe); }
.wp-block-button__link:hover::after, .wp-block-button__link:focus-visible::after { transform: translateX(4px); }
.wp-block-buttons { gap: var(--wg-s-4); }

.wp-block-button.is-style-wg-sekundaer .wp-block-button__link { background: transparent; color: var(--wg-tuerkis-tief); box-shadow: inset 0 0 0 1px var(--wg-tuerkis-tief); }
.wp-block-button.is-style-wg-sekundaer .wp-block-button__link:hover, .wp-block-button.is-style-wg-sekundaer .wp-block-button__link:focus-visible { background: var(--wg-softblue); color: var(--wg-tuerkis-tief); }
.wp-block-button.is-style-wg-auf-foto .wp-block-button__link { background: var(--wg-weiss); color: var(--wg-anthrazit); }
.wp-block-button.is-style-wg-auf-foto .wp-block-button__link:hover, .wp-block-button.is-style-wg-auf-foto .wp-block-button__link:focus-visible { background: var(--wg-warmwhite); color: var(--wg-anthrazit); }
.wp-block-button.is-style-wg-auf-tuerkis .wp-block-button__link { background: var(--wg-anthrazit); color: var(--wg-weiss); }
.wp-block-button.is-style-wg-auf-tuerkis .wp-block-button__link:hover, .wp-block-button.is-style-wg-auf-tuerkis .wp-block-button__link:focus-visible { background: var(--wg-anthrazit-hell); color: var(--wg-weiss); }
.wp-block-button.is-style-wg-textlink .wp-block-button__link { min-height: 44px; padding: 0; background: transparent; color: var(--wg-tuerkis-tief); }
.wp-block-button.is-style-wg-textlink .wp-block-button__link:hover, .wp-block-button.is-style-wg-textlink .wp-block-button__link:focus-visible { background: transparent; color: var(--wg-tuerkis-tief-hover); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 767px) {
	.wp-block-buttons > .wp-block-button:only-child:not(.is-style-wg-textlink), .wp-block-buttons > .wp-block-button:only-child:not(.is-style-wg-textlink) .wp-block-button__link { width: 100%; }
}

/* --- K01 Header --------------------------------------------------------- */
/* Kadence-Override: Trennlinien, Social- und Kontakt-Optik – dafür gibt es keine Einstellung. */
.wg-header-kontakt { display: grid; gap: var(--wg-s-1); justify-items: end; }
.wg-header-kontakt__link, .wg-mobil-kontakt__link { display: inline-flex; align-items: center; gap: var(--wg-s-2); min-height: 24px; font-size: var(--wg-fs-small); color: var(--wg-tuerkis-tief); text-decoration: none; }
.wg-header-kontakt__link:hover, .wg-mobil-kontakt__link:hover { color: var(--wg-tuerkis-tief-hover); text-decoration: underline; text-underline-offset: 3px; }
.wg-header-kontakt .wg-svg, .wg-mobil-kontakt .wg-svg { width: 16px; height: 16px; }

.site-header .header-social-inner-wrap .social-button, .popup-drawer .header-mobile-social-inner-wrap .social-button, .wg-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--wg-tuerkis-tief); background: transparent; }
.site-header .social-icon-custom-svg, .site-header .social-icon-custom-svg svg, .wg-social .wg-svg { display: block; width: 20px; height: 20px; }
/* Kadence-Override: Kadence füllt Social-Icons (fill: currentColor) – hier sind es Strich-Icons. */
.element-social-inner-wrap .social-icon-custom-svg svg, .element-social-inner-wrap .social-icon-custom-svg svg * { fill: none; stroke: currentColor; }
.wg-social { display: flex; gap: 0; margin: 0 0 0 -12px; padding: 0; list-style: none; }
.wg-social a:hover { color: var(--wg-anthrazit); }

/* Hauptnavigation: Versalien, 2-px-Linie Türkis unten an der Menüzeile für aktiv/hover */
.main-navigation .primary-menu-container > ul > li.menu-item > a { letter-spacing: var(--wg-ls-nav); }
.site-bottom-header-wrap .header-navigation-style-underline-fullheight .header-menu-container > ul > li > a::after { height: 2px; background: var(--wg-tuerkis); }
.header-navigation .header-menu-container ul ul.sub-menu { border: var(--wg-linie); }
.header-navigation .header-menu-container ul ul li.menu-item > a { min-height: 44px; display: flex; align-items: center; }

/* Sticky-Zustand der Menüzeile: Mini-Logo links, Button "Anfrage" rechts – sonst unsichtbar */
.wg-sticky-logo { display: inline-flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity var(--wg-t-farbe); }
.wg-sticky-logo img { display: block; height: 32px; width: auto; }
.site-bottom-header-wrap .header-button-wrap { opacity: 0; visibility: hidden; transition: opacity var(--wg-t-farbe); }
.site-bottom-header-wrap .header-button { min-height: 40px; display: inline-flex; align-items: center; }
.site-bottom-header-wrap.item-is-stuck .wg-sticky-logo, .site-bottom-header-wrap.item-is-stuck .header-button-wrap { opacity: 1; visibility: visible; }
.site-bottom-header-wrap.item-is-stuck .wg-sticky-logo { pointer-events: auto; }
.site-bottom-header-wrap.item-is-stuck { box-shadow: 0 1px 0 var(--wg-sand); }

/* Mobil: Telefon-Icon links, Off-Canvas in Warm White */
.wg-mobil-tel { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -10px; color: var(--wg-tuerkis-tief); }
.wg-mobil-tel .wg-svg { width: 24px; height: 24px; }
.site-header .menu-toggle-open { min-width: 44px; min-height: 44px; justify-content: center; }
.mobile-navigation ul li > a, .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap { letter-spacing: var(--wg-ls-nav); }
.mobile-navigation ul ul li > a { font-size: 1.0625rem; letter-spacing: 0; text-transform: none; }
#mobile-drawer .mobile-header-button-wrap { margin-top: var(--wg-s-6); }
#mobile-drawer .mobile-header-button { display: flex; align-items: center; justify-content: center; min-height: var(--wg-button-h); width: 100%; }
.wg-mobil-kontakt { display: grid; gap: var(--wg-s-3); margin-top: var(--wg-s-5); }
.wg-mobil-kontakt__link { min-height: 44px; font-size: 1.0625rem; }

/* --- Breadcrumb --------------------------------------------------------- */
.wg-breadcrumb { margin-bottom: var(--wg-s-5); font-size: var(--wg-fs-small); color: var(--wg-taupe-tief); }
.wg-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--wg-s-2); margin: 0; padding: 0; list-style: none; }
.wg-seitenkopf .wg-breadcrumb ol { justify-content: center; }
.wg-breadcrumb li + li::before { content: "›"; margin-right: var(--wg-s-2); }
.wg-breadcrumb ol { align-items: center; }
.wg-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
.entry-content .wg-breadcrumb a:not(.wp-block-button__link):not(.wp-element-button) { color: var(--wg-taupe-tief); text-decoration: none; }
.entry-content .wg-breadcrumb a:not(.wp-block-button__link):not(.wp-element-button):hover { color: var(--wg-tuerkis-tief); text-decoration: underline; }

/* --- K03 Hero Startseite ------------------------------------------------ */
.wp-block-cover.wg-hero { min-height: min(78vh, 760px); padding: 0; align-items: center; justify-content: flex-start; color: var(--wg-anthrazit); background: var(--wg-warmwhite); }
.wg-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--wg-hero-verlauf); pointer-events: none; }
.wg-hero .wp-block-cover__inner-container { position: relative; z-index: 2; box-sizing: border-box; width: 100%; max-width: var(--wg-w-wide); margin-inline: auto; padding: var(--wg-s-8) var(--wg-edge); color: var(--wg-anthrazit); }
.wg-hero__text { max-width: 520px; }
.wg-hero__text > * { margin-block: 0; }
/* Die H1 bricht nur an den gesetzten Stellen (nach "Gesichter" und "echte") und darf über die 520 px des Textblocks hinauslaufen. */
@media (min-width: 600px) {
	.wg-hero__text h1 { width: max-content; max-width: calc(100vw - 2 * var(--wg-edge)); }
}
.wg-hero .wp-block-cover__image-background { background: var(--wg-sand); }
.wg-hero__text .is-style-wg-lead { margin-top: var(--wg-s-5); }
.wg-hero__text .wp-block-buttons { margin-top: var(--wg-s-6); }
/* Spec: rechts oben. Beim aktuellen Motiv liegt dort das Gesicht – deshalb rechts unten (kein Text auf Gesichtern). */
.wg-hero__script { position: absolute; bottom: 9%; right: var(--wg-edge); margin: 0; color: var(--wg-weiss); display: none; }
@media (min-width: 1025px) {
	.wg-hero__script { display: block; }
}
/* Mobil: Bild 4:5 oben, Text darunter auf Weiß – kein Text auf dem Bild */
@media (max-width: 767px) {
	.wp-block-cover.wg-hero { display: block; min-height: 0; background: var(--wg-weiss); }
	.wg-hero::after { display: none; }
	.wp-block-cover.wg-hero .wp-block-cover__image-background { position: static; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; }
	.wg-hero .wp-block-cover__inner-container { padding-block: var(--wg-s-6) var(--wg-s-7); }
	.wg-hero__text { max-width: none; }
}

/* --- K04 / K05 Seitenkopf ---------------------------------------------- */
.wg-section.wg-seitenkopf { padding-block: var(--wg-s-7); text-align: center; }
.wg-seitenkopf .wg-container > * { margin-inline: auto; }
.wg-seitenkopf h1 { max-width: 900px; }
.wg-seitenkopf .is-style-wg-akzentlinie::after { margin-inline: auto; }
.wg-seitenkopf .is-style-wg-lead { max-width: 640px; margin-top: var(--wg-s-5); }
@media (min-width: 768px) {
	.wg-section.wg-seitenkopf { padding-block: 72px; }
}

.wg-section.wg-seitenkopf-bild { padding-block: 0; }
.wp-block-columns.wg-seitenkopf-bild__cols { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.wg-seitenkopf-bild__text { box-sizing: border-box; padding: var(--wg-s-7) var(--wg-edge); }
.wg-seitenkopf-bild__bild { order: -1; }
.wg-seitenkopf-bild__bild .wg-bild, .wg-seitenkopf-bild__bild .wg-bild img { height: 100%; }
.wg-seitenkopf-bild__bild .wg-bild img { aspect-ratio: 3 / 2; object-position: 50% 25%; } /* Gesichter sitzen oben im Bild */
@media (min-width: 1025px) {
	.wp-block-columns.wg-seitenkopf-bild__cols { grid-template-columns: 1fr 1fr; min-height: 480px; }
	/* Text bündig mit dem Seitenraster, Bild läuft bis zum rechten Viewport-Rand */
	.wg-seitenkopf-bild__text { align-self: center; padding-block: var(--wg-s-8); padding-right: var(--wg-s-8); padding-left: max(var(--wg-edge), calc(100% - var(--wg-w-content) / 2 + var(--wg-edge))); }
	.wg-seitenkopf-bild__bild { order: 0; position: relative; min-height: 480px; }
	.wg-seitenkopf-bild__bild .wg-bild { position: absolute; inset: 0; }
	.wg-seitenkopf-bild__bild .wg-bild img { aspect-ratio: auto; }
}

/* --- K06 Vorteilsleiste ------------------------------------------------- */
.wp-block-list.wg-vorteile { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--wg-s-6) var(--wg-s-4); margin: 0; padding: 0; list-style: none; }
.wg-vorteile li { display: grid; justify-items: center; gap: var(--wg-s-4); margin: 0; font-size: var(--wg-fs-eyebrow); line-height: 1.45; letter-spacing: var(--wg-ls-nav); text-transform: uppercase; text-align: center; color: var(--wg-anthrazit); hyphens: manual; }
.wg-vorteile li::before { content: ""; width: 56px; height: 56px; border: var(--wg-linie-akzent); border-radius: var(--wg-radius-rund); background: var(--wg-tuerkis-tief); -webkit-mask: var(--wg-icon) center / 26px no-repeat, radial-gradient(circle closest-side, transparent calc(100% - 1.5px), currentColor calc(100% - 1px), currentColor 100%, transparent 100%); mask: var(--wg-icon) center / 26px no-repeat, radial-gradient(circle closest-side, transparent calc(100% - 1.5px), currentColor calc(100% - 1px), currentColor 100%, transparent 100%); }
.wg-vorteile li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 768px) {
	.wp-block-list.wg-vorteile { grid-template-columns: repeat(5, 1fr); }
	.wg-vorteile li:last-child:nth-child(odd) { grid-column: auto; }
}

/* --- K08 Bildstrecke ---------------------------------------------------- */
.wg-bildstrecke { display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: var(--wg-s-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; margin-inline: calc(var(--wg-edge) * -1); padding-inline: var(--wg-edge); scroll-padding-inline: var(--wg-edge); }
.wg-bildstrecke > * { scroll-snap-align: start; margin: 0; }
@media (min-width: 768px) {
	.wg-bildstrecke { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
	.wg-bildstrecke > * { grid-column: span 2; }
	.wg-bildstrecke > :nth-child(4) { grid-column: 2 / span 2; }
}
@media (min-width: 1025px) {
	.wg-bildstrecke { grid-template-columns: repeat(5, 1fr); padding-bottom: 40px; }
	.wg-bildstrecke > *, .wg-bildstrecke > :nth-child(4) { grid-column: auto; }
	/* editorialer Rhythmus: Bild 2 und 4 um 40 px nach unten versetzt */
	.wg-bildstrecke > :nth-child(even) { transform: translateY(40px); }
}

/* --- K09 Kuratierte Galerie -------------------------------------------- */
.wg-galerie { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; grid-auto-flow: dense; gap: var(--wg-s-3); }
.wg-galerie > * { margin: 0; min-width: 0; }
/* Porträts: Gesichter sitzen im oberen Bilddrittel – beim Beschnitt (vor allem im Querformat) dort ausrichten. */
.wg-galerie .wg-bild img { object-position: 50% 22%; }
/* Muster je 12 Elemente: drei Hochformate (2 Zeilen), ein Querformat (2 Spalten). So gewählt, dass das Raster mit 18 Bildern
   und zwei Textfeldern in 4, 3 und 2 Spalten ohne Lücke schließt. */
.wg-galerie > .wg-bild:nth-child(12n), .wg-galerie > .wg-bild:nth-child(12n + 5), .wg-galerie > .wg-bild:nth-child(12n + 9) { grid-row: span 2; }
.wg-galerie > .wg-bild:nth-child(12n + 8) { grid-column: span 2; }
/* Hoch- und Querformate füllen ihre Rasterfläche, bestimmen die Zeilenhöhe aber nicht – die geben die quadratischen Bilder vor. */
.wg-galerie > .wg-bild:nth-child(12n), .wg-galerie > .wg-bild:nth-child(12n + 5), .wg-galerie > .wg-bild:nth-child(12n + 9), .wg-galerie > .wg-bild:nth-child(12n + 8) { position: relative; }
.wg-galerie > .wg-bild:nth-child(12n) img, .wg-galerie > .wg-bild:nth-child(12n + 5) img, .wg-galerie > .wg-bild:nth-child(12n + 9) img, .wg-galerie > .wg-bild:nth-child(12n + 8) img { position: absolute; inset: 0; aspect-ratio: auto; }
.wg-galerie .wg-bild img, .wg-bildstrecke .wg-bild img, .wg-raster-3 .wg-bild img { transition: transform var(--wg-t-bild); }
.wg-galerie .wg-bild:hover img, .wg-bildstrecke .wg-bild:hover img, .wg-raster-3 .wg-bild:hover img { transform: scale(1.03); }
.wg-galerie__text { display: flex; flex-direction: column; justify-content: center; gap: var(--wg-s-4); padding: var(--wg-s-5); grid-column: span 2; }
.wg-galerie__text > * { margin: 0; }
.wg-galerie__text--softblue { background: var(--wg-softblue); }
.wg-galerie__text--sand { background: var(--wg-sand); }
@media (min-width: 768px) {
	.wg-galerie { grid-template-columns: repeat(3, 1fr); gap: var(--wg-s-4); }
	.wg-galerie__text { grid-column: span 1; padding: var(--wg-s-6); }
}
@media (min-width: 1025px) {
	.wg-galerie { grid-template-columns: repeat(4, 1fr); }
	.wg-galerie__text { padding: var(--wg-s-5); }
}

/* --- K10 / K21 Karten --------------------------------------------------- */
.wg-karten { display: grid; grid-template-columns: 1fr; gap: var(--wg-s-7) var(--wg-gap); }
.wg-karte { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--wg-s-3); padding-top: var(--wg-s-5); border-top: var(--wg-linie-akzent); }
.wg-karte > * { margin: 0; }
.wg-karte[class*="wg-icon--"]::before { content: ""; width: 32px; height: 32px; margin-bottom: var(--wg-s-2); background: var(--wg-tuerkis-tief); -webkit-mask: var(--wg-icon) center / contain no-repeat; mask: var(--wg-icon) center / contain no-repeat; }
.wg-karte p { color: var(--wg-grau); }
.wg-karte .wp-block-buttons { margin-top: auto; padding-top: var(--wg-s-2); }
/* ganze Karte klickbar: der eine Link wird per Pseudo-Element gestreckt */
.wg-karte .wp-block-button__link::before { content: ""; position: absolute; inset: 0; }
.wg-karte:hover, .wg-karte:focus-within { box-shadow: inset 0 1px 0 var(--wg-tuerkis); }
@media (min-width: 768px) {
	.wg-karten { grid-template-columns: repeat(2, 1fr); }
	.wg-karten--text { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1025px) {
	.wg-karten { grid-template-columns: repeat(3, 1fr); }
}
/* Variante kompakt (Startseite): nur Icon + Titel + Pfeil, sechs in einer Reihe */
.wg-karten--kompakt { grid-template-columns: repeat(2, 1fr); gap: var(--wg-s-6) var(--wg-s-4); }
.wg-karten--kompakt .wg-karte h3 { font-size: var(--wg-fs-h4); }
.wg-karten--kompakt .wp-block-button__link { font-size: 0; gap: 0; min-height: 24px; }
@media (min-width: 768px) {
	.wg-karten--kompakt { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1025px) {
	.wg-karten--kompakt { grid-template-columns: repeat(6, 1fr); }
}

/* --- K12 "Wir"-Teaser --------------------------------------------------- */
.wg-persoenlich__bild { position: relative; }
.wg-persoenlich__bild > * { margin: 0; }
.wg-persoenlich__script { position: absolute; left: 6%; bottom: -0.35em; }
.wg-zitat { color: var(--wg-anthrazit); margin-top: var(--wg-s-5); padding-left: var(--wg-s-5); border-left: var(--wg-linie-akzent); }

/* --- K13 Team ----------------------------------------------------------- */
.wg-team { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--wg-s-6) var(--wg-gap); }
.wg-team__person > * { margin: 0; }
.wg-team__person h3 { margin-top: var(--wg-s-4); }
.wg-team__person .is-style-wg-eyebrow { margin: var(--wg-s-1) 0 0; }
.wg-team__worte { margin-top: var(--wg-s-2); font-size: var(--wg-fs-small); line-height: 1.5; color: var(--wg-taupe-tief); hyphens: none; }
.wg-section .wg-team__hunde-titel { margin: var(--wg-s-8) 0 var(--wg-s-5); text-align: center; }
.wg-team__hunde { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wg-s-6) var(--wg-s-8); }
.wg-team__hund { display: grid; justify-items: center; gap: var(--wg-s-3); text-align: center; }
.wg-team__hund > * { margin: 0; }
.wg-team__hund .wg-bild { width: 120px; }
@media (min-width: 1025px) {
	.wg-team { grid-template-columns: repeat(4, 1fr); }
}

/* --- K14 Kundenlogo-Band ----------------------------------------------- */
.wg-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wg-s-6) var(--wg-s-5); align-items: center; justify-items: center; }
.wg-logos > * { margin: 0; }
.wg-logo img { display: block; max-height: 40px; width: auto; max-width: 100%; filter: grayscale(1) opacity(.7); }
@media (min-width: 768px) {
	.wg-logos { grid-template-columns: repeat(6, 1fr); gap: var(--wg-s-7) var(--wg-s-6); }
}

/* --- K15 Definitionsliste (Referenz-Case) ------------------------------ */
.wp-block-list.wg-defliste { margin: var(--wg-s-5) 0 0; padding: 0; list-style: none; }
.wg-defliste li { margin: 0; padding-block: var(--wg-s-3); border-top: var(--wg-linie); }
.wg-defliste li strong { display: block; margin-bottom: var(--wg-s-1); font-size: var(--wg-fs-eyebrow); letter-spacing: var(--wg-ls-eyebrow); text-transform: uppercase; color: var(--wg-tuerkis-tief); }

/* --- K16 Ablauf --------------------------------------------------------- */
.wp-block-list.wg-ablauf { counter-reset: wg-schritt; display: grid; grid-template-columns: 1fr; gap: var(--wg-s-6); margin: 0; padding: 0; list-style: none; }
.wg-ablauf li { counter-increment: wg-schritt; position: relative; margin: 0; padding-left: 64px; color: var(--wg-grau); }
.wg-ablauf li::before { content: counter(wg-schritt); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 44px; height: 44px; border: var(--wg-linie-akzent); border-radius: var(--wg-radius-rund); background: var(--wg-weiss); font-size: 1.125rem; color: var(--wg-tuerkis-tief); }
.wg-ablauf li strong { display: block; margin-bottom: var(--wg-s-2); font-size: var(--wg-fs-h3); line-height: var(--wg-lh-h3); color: var(--wg-anthrazit); }
@media (min-width: 768px) {
	.wp-block-list.wg-ablauf { grid-template-columns: repeat(4, 1fr); gap: var(--wg-gap); }
	.wg-ablauf li { padding: 68px 0 0; }
	/* Verbindungslinie auf Höhe der Nummern */
	.wg-ablauf li::after { content: ""; position: absolute; top: 22px; left: 44px; right: calc(var(--wg-gap) * -1); border-top: var(--wg-linie); }
	.wg-ablauf li:last-child::after { display: none; }
}

/* --- K17 Häkchen-Liste -------------------------------------------------- */
.wp-block-list.is-style-wg-checkliste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--wg-s-3); }
.is-style-wg-checkliste li { position: relative; margin: 0; padding-left: 28px; hyphens: none; }
.is-style-wg-checkliste li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 16px; height: 16px; background: var(--wg-tuerkis-tief); -webkit-mask: url("../img/icons/haken.svg") center / contain no-repeat; mask: url("../img/icons/haken.svg") center / contain no-repeat; }
@media (min-width: 768px) {
	.wp-block-list.wg-checkliste--2 { grid-template-columns: repeat(2, 1fr); gap: var(--wg-s-3) var(--wg-gap); }
}

/* --- K18 Einsatzbereiche: Kacheln und Tags ---------------------------- */
.wg-kacheln { display: grid; grid-template-columns: 1fr; gap: var(--wg-s-4); }
.wg-kachel { padding: 28px; background: var(--wg-warmwhite); }
.is-style-wg-warmwhite .wg-kachel, .is-style-wg-softblue .wg-kachel, .is-style-wg-sand .wg-kachel { background: var(--wg-weiss); }
.wg-kachel > * { margin: 0; }
.wg-kachel h3 { margin-bottom: var(--wg-s-2); }
.wg-kachel p { color: var(--wg-grau); }
@media (min-width: 768px) {
	.wg-kacheln { grid-template-columns: repeat(2, 1fr); gap: var(--wg-gap); }
}
@media (min-width: 1025px) {
	.wg-kacheln { grid-template-columns: repeat(3, 1fr); }
}
.wp-block-list.is-style-wg-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wg-s-3); margin: 0; padding: 0; list-style: none; }
.is-style-wg-tags li { margin: 0; padding: var(--wg-s-2) 14px; border: var(--wg-linie); border-radius: var(--wg-radius-s); background: var(--wg-weiss); font-size: var(--wg-fs-small); hyphens: none; }

/* --- K19 FAQ ------------------------------------------------------------ */
.wg-faq-liste { border-bottom: var(--wg-linie); }
.wp-block-details.wg-faq { margin: 0; padding: 0; border-top: var(--wg-linie); }
.wg-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--wg-s-5); min-height: 44px; padding: 20px 0; cursor: pointer; list-style: none; }
.wg-faq summary::-webkit-details-marker { display: none; }
.wg-faq summary::after { content: ""; flex: none; width: 16px; height: 16px; background: var(--wg-tuerkis-tief); -webkit-mask: url("../img/icons/plus.svg") center / contain no-repeat; mask: url("../img/icons/plus.svg") center / contain no-repeat; transition: transform var(--wg-t-farbe); }
.wg-faq[open] summary::after { -webkit-mask-image: url("../img/icons/minus.svg"); mask-image: url("../img/icons/minus.svg"); transform: rotate(180deg); }
.wg-faq__frage { margin: 0; font-size: var(--wg-fs-h3); }
.wg-faq > :not(summary) { margin: 0; padding-bottom: 20px; max-width: 60ch; color: var(--wg-grau); }

}

/* --- K23 Kontaktblock --------------------------------------------------- */
.wg-kontakt__daten h2, .wg-kontakt__formular h2 { margin-bottom: var(--wg-s-5); }
@media (min-width: 1025px) {
	/* Adresse und Kontaktdaten bleiben beim Scrollen neben dem Formular stehen (unter der klebenden Menüzeile). */
	.wg-kontakt__daten { position: sticky; top: 88px; }
}
.wg-kontakt__daten .is-style-wg-eyebrow { margin: var(--wg-s-4) 0 2px; }
.wg-kontakt__daten h2 + .is-style-wg-eyebrow { margin-top: 0; }
/* Angaben in Fließtextgröße – kleiner als die Überschrift, die Eyebrow-Zeile darüber ordnet. */
.wg-kontakt__angabe { font-size: 1rem; line-height: 1.6; hyphens: none; }
.wg-kontakt__daten .wp-block-buttons { margin-top: var(--wg-s-4); }

/* Formulare (Contact Form 7) */
.wpcf7 form { display: grid; gap: var(--wg-s-5); max-width: var(--wg-w-text); }
.wg-feld { display: grid; gap: var(--wg-s-2); }
.wg-feld--check label, .wg-feld--check .wpcf7-list-item label { display: flex; gap: var(--wg-s-3); align-items: flex-start; font-weight: 400; font-size: var(--wg-fs-small); line-height: 1.5; }
.wg-feld--check .wpcf7-list-item { margin: 0; }
.wg-feld--upload input[type="file"] { box-sizing: border-box; width: 100%; padding: var(--wg-s-5) var(--wg-s-4); border: 1px dashed var(--wg-taupe); border-radius: var(--wg-radius-s); background: var(--wg-weiss); font: inherit; font-size: var(--wg-fs-small); }
.wg-feld__hinweis { font-size: var(--wg-fs-small); font-weight: 400; color: var(--wg-taupe-tief); }
.wpcf7 input[type="submit"], .wpcf7 button[type="submit"] { min-height: var(--wg-button-h); cursor: pointer; }
.wpcf7-not-valid-tip { display: block; margin-top: var(--wg-s-2); font-size: var(--wg-fs-small); color: var(--wg-fehler); }
.wpcf7-not-valid-tip::before { content: "⚠ "; }
.wpcf7 .wpcf7-not-valid { border: 2px solid var(--wg-fehler); }
.wpcf7 form .wpcf7-response-output { order: -1; margin: 0; padding: var(--wg-s-4); border: 1px solid var(--wg-fehler); border-radius: var(--wg-radius-s); color: var(--wg-anthrazit); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--wg-erfolg); }
.wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wg-hp { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }

/* --- K25 Rechtstext / K26 404 ------------------------------------------ */
.wg-rechtstext h2 { margin: var(--wg-s-7) 0 var(--wg-s-4); font-size: var(--wg-fs-h3); line-height: var(--wg-lh-h3); letter-spacing: 0.02em; font-weight: 700; text-transform: none; }
.wg-rechtstext h3 { margin: var(--wg-s-6) 0 var(--wg-s-3); font-size: var(--wg-fs-h4); }
.wg-rechtstext .wg-container > :first-child { margin-top: 0; }
.wg-rechtstext p, .wg-rechtstext li { font-size: 1.0625rem; }
.wg-rechtstext .wg-container > p { margin-bottom: 1.1em; }
.wg-section.wg-404 { display: flex; align-items: center; min-height: 60vh; text-align: center; }
.wg-404 .wg-container > * { margin-block: 0 var(--wg-s-5); }
.wg-404 .is-style-wg-handschrift { transform-origin: center; }
.wg-404 .wp-block-buttons { justify-content: center; margin-top: var(--wg-s-6); }

/* --- K02 Footer --------------------------------------------------------- */
/* Kadence-Override: Spaltenverhältnis 4/3/2/3 und Reihenfolge mobil – der Footer-Builder kennt nur feste Raster. */
.site-footer .wg-footer-marke { display: grid; gap: var(--wg-s-4); justify-items: start; }
.wg-footer-marke__logo img { display: block; height: 56px; width: auto; }
.wg-footer-marke__text { margin: 0; max-width: 34ch; hyphens: manual; font-size: var(--wg-fs-small); line-height: 1.6; color: var(--wg-grau); }
.wg-adresse { font-style: normal; line-height: 1.75; }
.site-footer .wg-adresse a { color: var(--wg-anthrazit); text-decoration: none; }
.site-footer .wg-adresse a:hover { color: var(--wg-tuerkis-tief); text-decoration: underline; }
.site-footer .widget_nav_menu ul { margin: 0; padding: 0; list-style: none; }
.site-footer .widget_nav_menu li a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; }
.site-footer .widget_nav_menu li a:hover { color: var(--wg-tuerkis-tief); }
@media (max-width: 1024px) {
	/* Touch: Klickfläche 44 px statt 36 px Zeilenabstand */
	.site-footer .widget_nav_menu li a { min-height: 44px; }
}
.site-footer .footer-navigation .menu li a { min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 1025px) {
	.site-middle-footer-inner-wrap.site-footer-row { grid-template-columns: 4fr 3fr 2fr 3fr; }
}
@media (max-width: 767px) {
	.site-bottom-footer-inner-wrap.site-footer-row { text-align: center; justify-items: center; }
}

/* --- Bewerbung: Formular + häufige Fragen nebeneinander ------------------ */
.wg-bewerbung__formular .wpcf7 { margin-top: var(--wg-s-6); }
.wg-bewerbung__faq .wg-faq__frage { font-size: var(--wg-fs-h4); }
@media (max-width: 1024px) {
	/* Auf Tablets sind zwei Spalten für Formular und Fragen zu schmal – untereinander. */
	.wg-bewerbung .wp-block-columns.wg-split { grid-template-columns: 1fr; }
}
@media (min-width: 1025px) {
	/* Die Fragen bleiben beim Scrollen neben dem langen Formular stehen (unter der klebenden Menüzeile). */
	.wg-bewerbung__faq { position: sticky; top: 88px; }
}

/* --- Deutschlandkarte (Standort) ----------------------------------------- */
/* Die Karte ist eine SVG-Datei (assets/img/karte-deutschland.svg). Punkt und Beschriftung "Bremen" liegen als
   Ebene darüber; die Position (32,13 % / 25,8 %) entspricht dem Punkt in der Datei. */
.wg-section .wg-karte-de.wp-block-image { position: relative; max-width: 440px; margin: 0 auto; }
.wg-karte-de img { display: block; width: 100%; height: auto; }
.wg-karte-de::before { content: ""; position: absolute; left: 32.13%; top: 25.8%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: var(--wg-radius-rund); box-shadow: 0 0 0 2px var(--wg-tuerkis-tief); animation: wg-puls 2.6s ease-out infinite; pointer-events: none; }
.wg-karte-de::after { content: "Bremen"; position: absolute; left: 32.13%; top: 25.8%; margin: -13px 0 0 22px; padding: 5px 10px; background: var(--wg-weiss); color: var(--wg-anthrazit); font-size: var(--wg-fs-eyebrow); line-height: 1.25; font-weight: 700; letter-spacing: var(--wg-ls-eyebrow); text-transform: uppercase; }
@keyframes wg-puls {
	0% { transform: scale(1); opacity: .7; }
	100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.wg-karte-de::before { animation: none; opacity: 0; }
}

/* --- Kontakt: Gruß, Karte ------------------------------------------------ */
.wg-kontakt__daten .wg-kontakt__gruss { margin: var(--wg-s-4) 0 var(--wg-s-6); transform-origin: left center; }
.wg-karte__flaeche { position: relative; min-height: 360px; background: var(--wg-sand); }
.wg-karte__karte { position: absolute; inset: 0; }
.wg-karte__karte iframe { display: block; width: 100%; height: 100%; border: 0; }
.wg-karte__adresse { position: relative; z-index: 1; max-width: 360px; margin: var(--wg-s-6); padding: var(--wg-s-6); background: var(--wg-weiss); box-shadow: var(--wg-schatten); }
.wg-karte__adresse > * { margin: 0; }
.wg-karte__adresse .wg-adresse { margin-top: var(--wg-s-2); font-size: 1.0625rem; }
.wg-karte__links { display: flex; flex-wrap: wrap; gap: var(--wg-s-2) var(--wg-s-5); margin-top: var(--wg-s-4); }
.wg-karte__links a, .wg-karte__laden { display: inline-flex; align-items: center; gap: var(--wg-s-2); min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--wg-fs-eyebrow); font-weight: 700; letter-spacing: var(--wg-ls-button); text-transform: uppercase; color: var(--wg-tuerkis-tief); cursor: pointer; text-decoration: none; }
.wg-karte__links a:hover, .wg-karte__laden:hover { color: var(--wg-tuerkis-tief-hover); text-decoration: underline; text-underline-offset: 4px; }
.wg-karte__adresse .is-style-wg-klein { margin-top: var(--wg-s-3); }
.wg-karte.is-geladen .wg-karte__adresse .is-style-wg-klein { display: none; }
@media (min-width: 782px) {
	.wg-karte__flaeche { min-height: 440px; }
}

/* --- Wissensartikel und "Gut zu wissen" ---------------------------------- */
.wg-section.wg-artikel .wg-container > * { margin-block: 0; }
.wg-artikel h2 { margin-top: var(--wg-s-7); margin-bottom: var(--wg-s-4); font-size: var(--wg-fs-h3); line-height: var(--wg-lh-h3); }
.wg-artikel .wg-container > h2:first-child { margin-top: 0; }
.wg-artikel p + p, .wg-artikel ul + p, .wg-artikel ol + p { margin-top: 1.1em; }
.wg-artikel .wg-artikel__liste { margin: var(--wg-s-4) 0 0; padding-left: 1.4em; }
.wg-artikel .wg-artikel__liste li { margin-bottom: var(--wg-s-3); }
.wg-artikel .wg-autor { margin-top: var(--wg-s-7); padding-top: var(--wg-s-4); border-top: var(--wg-linie); }
.wg-kachel--link .wp-block-buttons { margin-top: var(--wg-s-3); }

/* --- Referenzen: Kategorie-Kacheln, Projektkarten, Projektfakten --------- */
.wg-projekte__liste { display: grid; grid-template-columns: 1fr; gap: var(--wg-s-7) var(--wg-gap); }
.wg-projekt { display: grid; gap: var(--wg-s-4); }
.wg-projekt__bild { display: block; overflow: hidden; background: var(--wg-sand); }
.wg-projekt__bild img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; transition: transform var(--wg-t-bild); }
.wg-projekt:hover .wg-projekt__bild img { transform: scale(1.03); }
.wg-projekt__text > * { margin: 0; }
.wg-projekt__text .is-style-wg-eyebrow { margin-bottom: var(--wg-s-2); }
.wg-projekt__titel { font-size: var(--wg-fs-h3); }
.wg-projekt__titel a { color: inherit; text-decoration: none; }
/* Kadence-Override: Links im Inhalt sind unterstrichen – der Kartentitel ist ein Flächenlink. */
.entry-content .wg-projekt__titel a:not(.wp-block-button__link):not(.wp-element-button), .entry-content .wg-projekt__titel a:not(.wp-block-button__link):not(.wp-element-button):hover { color: var(--wg-anthrazit); text-decoration: none; }
.wg-projekt__titel a::before { content: ""; position: absolute; inset: 0; } /* ganze Karte klickbar */
.wg-projekt { position: relative; }
.wg-projekt__titel a:hover { color: var(--wg-tuerkis-tief); }
.wg-projekt__text p:not(.is-style-wg-eyebrow) { margin-top: var(--wg-s-2); color: var(--wg-grau); }
.wg-projekt__link { display: inline-flex; align-items: center; gap: var(--wg-s-2); margin-top: var(--wg-s-4); font-size: var(--wg-fs-eyebrow); font-weight: 700; letter-spacing: var(--wg-ls-button); text-transform: uppercase; color: var(--wg-tuerkis-tief); }
@media (min-width: 782px) {
	.wg-projekte__liste { grid-template-columns: repeat(2, 1fr); }
}
/* Projektseite */
.wg-seitenkopf--links .wg-container { text-align: left; }
.wg-seitenkopf--links .wg-container > * { margin-inline: 0; }
.wg-seitenkopf--links .wg-breadcrumb ol { justify-content: flex-start; }
.wg-seitenkopf--links .is-style-wg-akzentlinie::after { margin-inline: 0; }
.wg-section.wg-section--motiv { padding-top: 0; }
.wg-case__text > h2 { font-size: var(--wg-fs-h3); line-height: var(--wg-lh-h3); margin-bottom: var(--wg-s-3); }
.wg-case__text > p + h2 { margin-top: var(--wg-s-7); }
.wg-fakten { padding: var(--wg-s-6); background: var(--wg-sand); }
.wg-fakten > * { margin: 0; }
.wg-fakten dl { margin-top: var(--wg-s-4); }
.wg-fakten__zeile { display: grid; grid-template-columns: 110px 1fr; gap: var(--wg-s-3); padding-block: var(--wg-s-3); border-top: 1px solid var(--wg-weiss); }
.wg-fakten dt { font-size: var(--wg-fs-small); font-weight: 700; color: var(--wg-taupe-tief); }
.wg-fakten dd { margin: 0; }
@media (min-width: 1025px) {
	.wg-case__fakten .wg-fakten { position: sticky; top: 88px; }
}

/* --- Abschluss-CTA (alle Seiten) ----------------------------------------- */
/* Eine Form für alle Seiten: Soft Blue, Handschrift-Akzent, Überschrift, Satz, zwei Buttons.
   Variante --gesichter (Bewerbung): zwei runde Porträts darüber, der Akzent läuft in ihren Anschnitt. */
.wg-section.wg-cta { text-align: center; }
.wg-cta .wg-container > * { margin-block: 0; }
.wg-cta .is-style-wg-handschrift { transform-origin: center; }
.wg-cta h2 { margin-top: var(--wg-s-4); }
.wg-cta .is-style-wg-lead { margin-top: var(--wg-s-4); color: var(--wg-anthrazit); }
.wg-cta .wp-block-buttons { justify-content: center; margin-top: var(--wg-s-6); }
/* Auf Soft Blue braucht der Sekundär-Button eine helle Fläche, sonst verschwimmt er. */
.wg-cta .wp-block-button.is-style-wg-sekundaer .wp-block-button__link { background: var(--wg-weiss); }
.wg-cta .wp-block-button.is-style-wg-sekundaer .wp-block-button__link:hover, .wg-cta .wp-block-button.is-style-wg-sekundaer .wp-block-button__link:focus-visible { background: var(--wg-warmwhite); }
.wg-cta__gesichter { display: flex; justify-content: center; }
.wg-cta__gesichter .wg-bild { width: 112px; border: 4px solid var(--wg-softblue); box-sizing: content-box; }
.wg-section .wg-cta__gesichter .wg-bild.wp-block-image + .wg-bild.wp-block-image { margin-left: -26px; }
.wg-cta__gesichter .wg-bild img { aspect-ratio: 1 / 1; object-position: 50% 20%; }
@media (min-width: 600px) {
	.wg-cta__gesichter .wg-bild { width: 152px; }
	.wg-section .wg-cta__gesichter .wg-bild.wp-block-image + .wg-bild.wp-block-image { margin-left: -34px; }
}
.wg-cta--gesichter .is-style-wg-handschrift { position: relative; z-index: 1; margin-top: -0.42em; }
.wg-cta--gesichter h2 { margin-top: var(--wg-s-5); }

/* --- Klickflächen auf Touch-Geräten -------------------------------------- */
/* Mit der Maus bleiben Kopfzeilen-Kontakt und Footer-Links kompakt (Zeilenabstand laut Spec); per Finger sind es 44 px. */
@media (pointer: coarse) {
	.wg-header-kontakt__link, .site-footer .widget_nav_menu li a { min-height: 44px; }
	.wg-kontakt__angabe a { display: inline-flex; align-items: center; min-height: 44px; }
}