/* POPP · Komponenten-Layer (CSS)
   ------------------------------------------------------------------
   Ergänzt das Design-System (Tokens + Typo/Button-Klassen) um die
   STRUKTUR-/LAYOUT-Klassen, die das DS nicht abdeckt – damit die HTML-
   Fragmente so rendern wie die PDF-Vorlage.
   Tokens (--popp-*) stammen aus design-system-tokens.css / popp-ds.css.
   Reihenfolge: NACH der DS-CSS einbinden.

   Batch 1: 06 Hero · 12/13 Feature-Grid+Item · 19 Akkordeon ·
            18 Berater-Karte · 25 PLZ-/Inline-Form
   ------------------------------------------------------------------ */

/* ============ Seiten-Grid · Sticky-Footer ============ */
/* Kurze Seiten (z.B. /bildquellen mit noch leerer Quellen-Liste) sind niedriger als der Viewport →
   der Footer hinge sonst mitten auf der Seite. Body als Flex-Spalte über volle Viewport-Höhe, der
   Content-Wrapper (je nach Seitentyp main.site-main / wp-page / error-404 / search-results — alle
   direkte body-Kinder) wächst. Nicht im Elementor-Editor: dort verwaltet der Canvas das Layout. */
body:not(.elementor-editor-active){display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
body:not(.elementor-editor-active)>main.site-main,
body:not(.elementor-editor-active)>[data-elementor-type="wp-page"],
body:not(.elementor-editor-active)>[data-elementor-type="error-404"],
body:not(.elementor-editor-active)>[data-elementor-type="search-results"]{flex:1 0 auto}

/* Anker-Sprünge (#ackerbau, #sonderkulturen, #spezialberater, #mission): der Sticky-Header verdeckt
   sonst die angesprungene Überschrift (Desktop ≈100px, mobil ≈64px). scroll-padding-top auf dem
   Scroll-Container hält das Sprungziel darunter — +16px Luft (check-04). */
html{scroll-padding-top:116px}
@media(max-width:1024px){html{scroll-padding-top:80px}}

/* ============ Seiten-Grid · Content-Spalte ============ */
/* Container-Breite = DS-Default (.popp-container max-width:1360, popp-ds.css). Content, Header,
   Footer, Mission und Hero laufen alle auf diese eine Breite (User-Entscheidung) — KEINE fb-max-
   Verengung mehr (die früheren max-width:fb-max-Overrides waren falsch: sie machten Header/Footer
   schmaler als den Content). */
/* Lange deutsche Komposita in Überschriften notfalls umbrechen (greift nur, wenn ein Wort sonst
   über die Spalte ragen würde) — sonst horizontaler Overflow auf schmalen Handys (z.B. H1
   „Wir sind Spezialberater für Mikronährstoffe"). Silbentrennung (wp-Typography) bricht bevorzugt. */
.popp-h1,.popp-h2,.popp-h3{overflow-wrap:break-word}
/* Mobiler Content-Seitenrand = 36px (gemessen an Vorlage RZ_11, L=R=36 bei 576px). Der Basis-Container
   trägt ihn; die Content-Komponenten (10/16) dürfen NICHT zusätzlich padding-inline draufsetzen, sonst
   doppelt sich der Rand (war 60px, Karussell-Karten sogar 80px). 2-Klassen-Selektor schlägt die
   Einzelregeln. Full-bleed-Bänder (Header/Hero/Footer/Mission …) haben eigene Container-Overrides. */
@media(max-width:767px){
  .popp-container{padding-inline:36px}
  /* Content-Komponenten IM Container dürfen keinen eigenen Seiten-Rand doppeln (Container liefert 36).
     Innen-Padding von Karten/Panels (card-preis, akk-body, card-maengel-body) bleibt — das ist echter
     Innenabstand, kein Seitenrand. */
  .popp-container .popp-textbild,
  .popp-container .popp-karussell,
  .popp-container .popp-karussell-track,
  .popp-container .popp-feature-grid,
  .popp-container .popp-berater,
  .popp-container .popp-preis-grid{padding-inline:0}
  /* Karussell-Pfeile: Position kommt jetzt aus der geklemmten Basis-Regel (max(), check-04 #10) —
     kein Tablet/Mobil-Override mehr nötig (die früheren −10px ragten über die Karten). */
}

/* ============ 06 · Hero (Bild + Kachel-Overlay) ============ */
.popp-hero{position:relative;width:100%;overflow:hidden;height:clamp(360px,35vw,540px)}   /* Höhe gedeckelt — 35vw ≈ 490px @1400, wächst danach nur noch gering bis 540px */
.popp-hero-img{display:block;width:100%;height:100%;object-fit:cover}
.popp-hero>.popp-container{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding-block:32px} /* normaler popp-container (Basis max-width:fb-max + padding 40 + margin-inline:auto greift) → Kachel fluchtet mit dem Content wie 17/22, statt full-bleed am Seitenrand; Padding oben/unten */
.popp-hero-kachel{align-self:flex-start;max-width:max-content;
  background:color-mix(in srgb, var(--popp-eins-dk1) 85%, transparent);padding:18px 28px 20px} /* popp-eins-dk1 @85%; bündig mit Content-Rand (Vorlage); Breite = Textinhalt (max-content) */
.popp-hero-kachel .popp-h1-kachel{margin:0}

/* ============ 12/13 · Feature-Grid (2×2) + Feature-Item ============ */
.popp-feature-grid{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:36px 56px}
.popp-feature-grid>li{margin:0;min-width:0}
.popp-feature-item{display:flex;gap:22px;align-items:flex-start}
.popp-feature-icon{flex:0 0 auto;width:64px;height:64px;object-fit:contain;display:block}
.popp-feature-body{min-width:0}
.popp-feature-body .popp-h3{margin:0 0 8px}
.popp-feature-body .popp-ft{margin:0}

/* ============ 18 · Berater-Profilkarte ============ */
.popp-card-berater{display:flex;flex-direction:column;          /* füllt die (halbe Content-)Breite des Containers */
  background:var(--popp-weiss);overflow:hidden}   /* kein border-radius (Vorlage: eckig) */
.popp-card-berater-img{display:block;width:100%;aspect-ratio:5/3;object-fit:cover}   /* skaliert mit der Breite */
.popp-card-berater-body{background:var(--popp-zwei-h2);padding:20px 22px 24px}
.popp-card-berater-body .popp-meta{margin:0 0 6px}
.popp-card-berater-body>.popp-lockup{margin:0 0 12px}   /* Kopf = 09-Lockup; H2-Indent + Meta-Abstand erbt von .popp-lockup */
.popp-card-berater-body .popp-box{margin:0 0 4px}   /* Box-Text = DS-popp-box (15/24), keine Typo-Sonderregel */
.popp-card-berater-body .popp-box:last-child{margin:0}

/* ============ 19 · Akkordeon ============ */
.popp-akk-group{display:flex;flex-direction:column;gap:12px}
.popp-akk-item{border-radius:0;overflow:hidden;background:var(--popp-weiss)}   /* eckig (Vorlage) */
.popp-akk-head{display:flex;align-items:center;gap:0;width:100%;
  padding:0 22px 0 0;background:var(--popp-zwei-h2);
  border:0;cursor:pointer;text-align:left;font:inherit}
.popp-akk-thumb{flex:0 0 auto;width:120px;height:64px;object-fit:cover;border-radius:0}   /* randabfallend in die Leiste (Entwurf): bündig + breiter, eckig */
.popp-akk-head .popp-h3{flex:1 1 auto;margin:0 0 0 18px}
.popp-akk-chevron{flex:0 0 auto;width:18px;height:10px;margin-left:8px;background:url(assets/arrow-down-green.svg) center/contain no-repeat;transition:transform .2s ease}
.popp-akk-item.is-open .popp-akk-chevron,
.popp-akk-item[open] .popp-akk-chevron{background-image:url(assets/arrow-up-green.svg)}   /* offen = mitgeliefertes Up-Asset (03: JS · 19: nativ), nicht rotiert */
summary.popp-akk-head{list-style:none}                             /* <details>/<summary> (19): Default-Dreieck weg */
summary.popp-akk-head::-webkit-details-marker{display:none}
details.popp-akk-item:not([open])>.popp-akk-body{display:none}     /* geschlossenes <details> hart ausblenden (display:flex am direkten Kind leakt sonst in Alt-Engines); nur 19, nicht 03 (<li>) */
.popp-akk-body{padding:20px 22px 26px;display:flex;gap:26px;align-items:flex-start}
details.popp-akk-item>.popp-akk-body{background:var(--popp-panel)}   /* 19: aufgeklapptes Feld = Panel-Grau */
.popp-akk-body>figure{margin:0;flex:0 0 var(--popp-akk-img-w,33%)}   /* Beispielbild-Breite per Var steuerbar (Entwurf schmaler) */
.popp-akk-body>figure img{display:block;width:100%;height:auto;border-radius:0}
.popp-akk-body .popp-ft{margin:0}
.popp-akk-body .popp-ft p{margin:0 0 12px}
.popp-akk-body .popp-ft p:last-child{margin:0}

/* ============ 25 · PLZ-/Inline-Form (grün + hell/taupe) ============ */
.popp-inline-form{margin:0}
.popp-inline-form + .popp-inline-form{margin-top:16px}
.popp-inline-form-row{display:flex;gap:10px;align-items:stretch;max-width:560px;
  background:var(--popp-zwei-h2);padding:6px;border-radius:0}    /* grauer Container um Feld+Button (Vorlage 11/14/24); eckig (Vorlage) */
.popp-input{flex:1 1 auto;min-width:0;
  border:1px solid var(--popp-zwei-h1);border-radius:var(--popp-radius);
  background:var(--popp-weiss);padding:4px 18px;                   /* kompakt — DS-Höhe wäre zu hoch */
  font-family:var(--popp-font-base);font-size:16px;color:var(--popp-zwei-dk3)}
/* Höhe auf DS-Button-Maß (36px): tag-qualifiziert (0,1,1), um die 8px-Basis-Padding von input[type]
   zu schlagen. line-height 24 + 2×5 + border 2 = 36 → Feld == Button, Container ~48px. */
input.popp-input{padding-block:5px}
.popp-input::placeholder{color:var(--popp-zwei-dk1)}
.popp-inline-form .popp-button,
.popp-inline-form .popp-button-hell{white-space:nowrap}   /* border:0/cursor jetzt im DS-Button-Atom */
/* Kein Höhen-Override mehr: inline-form-Buttons erben die 36px-Basis (DS padding 5px 45px). Via
   .popp-inline-form-row{align-items:stretch} zieht das Eingabefeld auf dieselben 36px → Container ~48px. */
.popp-privacy{display:flex;gap:8px;align-items:flex-start;margin-top:10px;max-width:560px}
.popp-privacy input{margin-top:2px;accent-color:var(--popp-eins)}   /* 2px = optischer Ausgleich zur ersten Textzeile */

/* =========================================================================
   Batch 2 — restliche Komponenten (01-29). Tokens aus popp-ds.css.
   ========================================================================= */

/* ===== 01 · Header ===== */
.popp-header{width:100%;background:var(--popp-weiss);padding:11px 0}   /* 01: Kopfhöhe 153 CSS. (position:sticky war wirkungslos — der Theme-Wrapper ist exakt headerhoch, sticky hat keinen Spielraum; echtes Sticky-Verhalten: .popp-header--sticky via JS) */
/* Header-lokal: eigener, schmalerer Container (PDF-Content ~1203 @1400-Seite) statt des geteilten popp-container (1280) */
.popp-header>.popp-container{display:flex;align-items:stretch;gap:77px}
.popp-logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.popp-logo img{height:130px;width:auto;display:block}   /* 01: Logo-Inhalt = Crop (117 CSS); PNG hat Innen-Padding → Box 130 (Standard-Header unverändert, check-04 #4) */
.popp-header-right{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.popp-hauptmenue{display:flex;gap:51px;list-style:none;margin:0;padding:0}   /* 01: gap 51 gemessen am 1400-Crop (Vorlage) */
.popp-hauptmenue a{display:inline-flex;align-items:center;text-decoration:none;color:inherit}   /* Gewicht/Farbe aus popp-hauptmenue-Atom (700/dk2) */
.popp-menu-caret{display:inline-block;width:17px;height:8px;margin-left:6px;position:relative;top:2px;background:url(assets/arrow-down-green.svg) center/contain no-repeat}   /* näher an Text, 2px runter, kräftiger — mitgeliefertes SVG */
.popp-menu-caret.is-open{background-image:url(assets/arrow-up-green.svg)}   /* offen = mitgeliefertes Up-Asset, nicht rotiert */
.popp-header-meta{display:flex;justify-content:flex-end;align-items:center;gap:28px}
.popp-header-meta .popp-meta{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:none;border:0;cursor:pointer;text-transform:uppercase;letter-spacing:.08em;font-size:14px;font-weight:400}   /* Farbe aus popp-meta-Atom; font-weight:400 = entkräftet (Vorlage); +10% Größe header-lokal */
.popp-meta-icon{height:15px;width:auto;display:block}
.popp-header-meta .popp-meta-icon{position:relative;top:1px}   /* Meta-Icons 1px runter (check-04 #7) — nur im Header-Meta, nicht Suche-Submit/Inline-Form */
/* Header-Suche — Trigger + aufklappendes echtes Suchfeld (WP-Suche) */
.popp-suche{position:relative;display:inline-flex;align-items:center}
.popp-suche.is-open .popp-suche-toggle{color:var(--popp-eins)}
.popp-suche.is-open .popp-suche-toggle .popp-meta-icon{filter:brightness(0) saturate(100%) invert(29%) sepia(84%) saturate(560%) hue-rotate(101deg) brightness(96%) contrast(94%)}
.popp-suche-panel{position:absolute;top:calc(100% + 12px);right:0;z-index:120;display:flex;align-items:center;gap:6px;background:var(--popp-weiss);box-shadow:0 16px 26px -8px rgba(0,0,0,.18);padding:8px 10px}
.popp-suche-panel[hidden]{display:none}   /* hidden-Attribut respektieren (schlägt display:flex oben) */
.popp-suche-panel .popp-suche-input{border:0;border-bottom:1px solid var(--popp-zwei-dk1);border-radius:0;background:transparent;font-family:var(--popp-font-base);font-size:15px;line-height:24px;padding:4px 6px;width:auto;min-width:240px;color:var(--popp-schwarz);outline:none}   /* 2 Klassen (0,2,0) schlagen hello-elementor reset.css input[type=search]{border:1px #666;radius:3px;padding:.5/1rem;width:100%} (0,1,1) */
.popp-suche-panel .popp-suche-input:focus{border-bottom-color:var(--popp-eins)}
.popp-suche-input::-webkit-search-cancel-button{-webkit-appearance:none}   /* natives ×-Icon raus (passt nicht zur Unterlinie) */
.popp-suche-submit{display:inline-flex;align-items:center;background:none;border:0;cursor:pointer;padding:4px}
.popp-suche-submit .popp-meta-icon{height:16px}
.popp-suche-close{display:none}   /* Close-X nur im mobilen Overlay-Modus */
/* Mobil: das Dropdown-Panel taugt nicht (Anker im Meta-Bereich, Sticky-Header) →
   Vollbild-Overlay im Stil des Mobilmenüs (popp-mb-overlay). Gleiche Optik: dunkelgrün,
   Close-X oben links, weißes Suchfeld. [hidden] gewinnt weiter (höhere Spezifität). */
@media(max-width:1024px){
  /* Geometrie/Optik = 1:1 popp-mb-overlay: bg .82, Padding 22/20/30, X 22px mit 18px Abstand;
     das Suchfeld ist EIN weißer Vollbreite-Balken wie die Menü-Felder (72px, 28/40/700),
     die Lupe sitzt IM Balken rechts (wie die Menü-Chevrons — kein getrennter Kasten). */
  .popp-suche-panel{position:fixed;inset:0;top:0;right:0;z-index:1000;
    display:grid;grid-template-columns:1fr auto;gap:0;align-content:start;align-items:stretch;
    background:rgba(0,61,31,.82);box-shadow:none;padding:22px 20px 30px;overflow-y:auto}   /* align-items:stretch überschreibt das center der Desktop-Basisregel — sonst schwebt der Lupe-Button klein in der Zeilenmitte statt den Balken zu füllen */
  .popp-suche-close{display:block;grid-column:1/-1;width:22px;height:22px;
    background:url(assets/icon-close.svg) center/contain no-repeat;border:0;cursor:pointer;font-size:0;padding:0;margin:0 0 18px 4px}
  .popp-suche-panel .popp-suche-input{grid-column:1;background:var(--popp-weiss);border:0;border-radius:0;
    padding:16px 0 16px 20px;font-family:var(--popp-font-base);font-size:28px;line-height:40px;font-weight:700;
    color:var(--popp-zwei-dk2);min-width:0;width:100%}
  .popp-suche-panel .popp-suche-input::placeholder{color:var(--popp-zwei-dk1)}
  .popp-suche-submit{grid-column:2;background:var(--popp-weiss);border:0;border-radius:0;padding:0 20px;margin:0}
  .popp-suche-submit .popp-meta-icon{height:26px}
}
/* ===== Sticky-Header (RZ_3): erscheint kompakt-einzeilig, sobald der normale Header komplett
   aus dem Sichtbereich gescrollt ist (Klasse setzt popp-widgets.js/initSticky — EIN Element,
   zwei Zustände: kein DOM-Klon, keine aria-hidden/inert-Verwaltung, keine ID-Dubletten). ===== */
.popp-header--sticky{position:fixed;top:0;left:0;right:0;z-index:100;
  box-shadow:0 3px 0 rgba(0,0,0,.13);
  animation:popp-header-slidein .28s ease-out}                /* „von oben hineinscrollen"; harte Schattenkante (check-04 #6) statt weichem Schatten */
@keyframes popp-header-slidein{from{transform:translateY(-100%)}}
@media (prefers-reduced-motion:reduce){.popp-header--sticky{animation:none}}
@media(min-width:1025px){   /* Kompakt-Layout nur Desktop (mobil ist der Header ohnehin einzeilig) */
  .popp-header--sticky{padding:14px 0}                                        /* Sticky-Balken +15% höher (check-04 #5) */
  .popp-header--sticky .popp-logo img{height:72px}                            /* Sticky-Logo +25% (58→72, check-04 #4 gilt NUR fürs Sticky-Logo) */
  .popp-header--sticky .popp-header-right{flex-direction:row;align-items:center;justify-content:flex-end;gap:48px}
  .popp-header--sticky .popp-hauptnav{order:1}
  .popp-header--sticky .popp-header-meta{order:2;gap:20px}
  .popp-header--sticky .popp-header-meta .popp-meta{font-size:0;gap:0}        /* nur Icons — Textlabel bleibt im Accessible Name */
  .popp-header--sticky .popp-meta-icon{height:17px}
  .popp-header--sticky .popp-hauptmenue-item.is-active>a{padding:6px 20px;margin-block:-6px}   /* Aktiv-Kachel: kompakt statt bis zur Unterkante gezogen */
  .popp-header--sticky .popp-submenue{margin-top:6px}   /* Sticky-Aktiv-Feld ragt nur 6px runter (statt 11px) → Submenü dockt sonst mit 5px Lücke an (check-04 #08 im Sticky-Header) */
}
@media(max-width:1024px){   /* mobil: Logo klein + alles in EINER Zeile → flache Sticky-Leiste */
  .popp-header--sticky{padding:8px 0}
  .popp-header--sticky .popp-logo img{height:48px}
  .popp-header--sticky .popp-header-right{flex-direction:row;align-items:center;justify-content:flex-end;gap:20px}
  .popp-header--sticky .popp-header-meta{flex-wrap:nowrap;gap:14px}
  .popp-header--sticky .popp-header-meta .popp-meta{font-size:0;gap:0}   /* Anmelden/Suche nur Icons */
  .popp-header--sticky .popp-mb-toggle{align-self:center}
}

.popp-mb-toggle{display:none;align-self:flex-end;align-items:center;gap:12px;background:none;border:0;font:inherit;font-size:22px;font-weight:700;cursor:pointer;color:var(--popp-zwei-dk2)}   /* Menü/Icon größer (siehe Entwurf) */
.popp-mb-burger{display:inline-block;width:40px;height:29px;background:url(assets/icon-menue.svg) center/contain no-repeat}   /* Icon größer */

/* ===== 02 · Nav-Dropdown ===== */
.popp-hauptmenue-item{position:relative;list-style:none;font-family:var(--popp-font-base);font-size:20px;display:inline-block}
.popp-hauptmenue-item>a{display:inline-flex;align-items:center;text-decoration:none;color:var(--popp-zwei-dk2);font-weight:600}
.popp-hauptmenue-item:has(.popp-menu-caret.is-open)>a{color:var(--popp-eins)}   /* offenes Top-Level-Label grün (Vorlage) */
/* Aktiver Top-Menüpunkt (= aktuelle Seite) als grün gefüllter Button, weiße Schrift + weißer Pfeil
   (Vorlage: aktive Seite ist im Header grün hinterlegt, z.B. „Dienstleistungen" auf seite-06). */
.popp-hauptmenue-item.is-active>a{background:var(--popp-eins);color:var(--popp-weiss);border-radius:0;padding:6px 20px 11px;margin-top:-6px;margin-bottom:-11px}   /* eckig (Vorlage); Label bleibt auf Menü-Höhe (bündig mit Logo), grüner Block reicht bis zur Header-Unterkante = berührt das Headerbild (Vorlage) */
.popp-hauptmenue-item.is-active.popp-hauptmenue-item>a{color:var(--popp-weiss)}   /* schlägt die offene-Label-grün-Regel */
.popp-hauptmenue-item.is-active .popp-menu-caret{filter:brightness(0) invert(1)}
.popp-submenue{list-style:none;margin:11px 0 0;padding:0 0 8px;background:var(--popp-zwei-h2);box-shadow:0 16px 26px -8px rgba(0,0,0,.18);border-radius:0;min-width:260px}   /* eckig; margin 11px = Panel-Oberkante bündig zur Unterkante des grünen Aktiv-Felds; padding-top:0 → erster Submenüpunkt dockt direkt an, ohne grauen Abstandshalter (check-04 #8) */
.popp-submenue li{margin:0}
.popp-submenue li + li{border-top:1px solid rgba(0,0,0,.20)}   /* Trennstriche kräftiger (Vorlage) */
.popp-submenue a{display:block;padding:10px 16px;text-decoration:none;color:var(--popp-zwei-dk2)}   /* Textfarbe Taupe (sonst Browser-Blau) */
.popp-submenue a[aria-current=page]{background:var(--popp-eins-h3)}   /* aktive Seite = #d6f6e6 POPP Eins h3 */
.popp-submenue a:hover{background:var(--popp-eins-h1);color:var(--popp-weiss)}   /* Hover = POPP Eins h1 (#12b265), Schrift weiß */

/* ===== 03 · Mobile-Menü (Overlay) ===== */
.popp-mb-overlay{background:rgba(0,61,31,.82);padding:22px 20px 30px;width:100%;color:var(--popp-weiss)}
.popp-mb-close{width:22px;height:22px;background:url(assets/icon-close.svg) center/contain no-repeat;border:0;cursor:pointer;font-size:0;padding:0;display:block;margin:0 0 18px 4px}   /* −25% (Entwurf) */
.popp-mb-hauptmenue{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.popp-mb-overlay .popp-akk-item{background:var(--popp-weiss);border-radius:0;overflow:hidden}   /* Felder eckig (Vorlage) */
.popp-mb-overlay .popp-akk-head{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:16px 20px;background:var(--popp-weiss);border:0;cursor:pointer;font-family:var(--popp-font-base);font-size:28px;line-height:40px;font-weight:700;color:var(--popp-zwei-dk2)}   /* = DS popp-mb-hauptmenue (28/40/700) */
.popp-mb-overlay .popp-akk-item.is-open .popp-akk-head{background:var(--popp-eins-h2)}
.popp-mb-submenue{list-style:none;margin:0;padding:4px 0 6px;display:flex;flex-direction:column;gap:0;align-items:stretch;border-top:1px solid rgba(0,0,0,.08);font-size:18px;line-height:22px}   /* 03: Schrift 15→18 (Crop), Abstand+Strich über a-padding/li statt gap */
.popp-mb-submenue li{width:100%}
.popp-mb-submenue li + li{border-top:1.5px solid rgba(0,0,0,.22)}   /* 03: Trennstrich vollbreit + kräftiger (Vorlage) */
.popp-mb-submenue a{display:block;padding:15px 20px;text-decoration:none;color:inherit}   /* 03: Text-Inset + symmetrischer Abstand (Pitch ~30px = Crop); Größe/Farbe aus Atom */
.popp-mb-legal{display:flex;flex-direction:column;gap:8px;margin:24px 0 0}
.popp-mb-legal a{color:var(--popp-zwei-h2);text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-weight:400}   /* Versalien + leichtere Schrift (Entwurf) */

/* ===== 04 · Footer ===== */
.popp-footer{width:100%;background:var(--popp-zwei-dk2);padding:46px 0}
.popp-footer>.popp-container{display:grid;grid-template-columns:3.1fr 1fr 1fr;gap:40px}
.popp-footer-col{min-width:0}
.popp-footer-h{margin:0 0 16px}
.popp-footer-text{margin:0 0 14px}
.popp-footer-text a{color:var(--popp-zwei-h2);text-decoration:none}
.popp-footer-contact{display:flex;flex-wrap:wrap;gap:16px 24px;margin-top:2px}
.popp-footer-contact .popp-footer-text{margin:0}
.popp-footer-col ul.popp-footer-text{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.popp-footer-col ul.popp-footer-text a{display:inline-block;min-width:198px;text-align:center;background:var(--popp-zwei-h1);color:var(--popp-zwei-dk3);border-radius:5px;line-height:1;text-transform:uppercase;letter-spacing:.12em;font-size:14px;font-weight:600;padding:9px 24px}   /* 04: Höhe 32px (line-height 1 + 14 + 2×9); Label-Laufweite .12 */
.popp-footer-social{display:flex;gap:14px}
.popp-footer-social a{display:inline-flex}
.popp-footer-social img{width:40px;height:40px;display:block}

/* ===== 05 · Footer-Schlusszeile ===== */
.popp-footer-letzte-zeile{width:100%;background:var(--popp-schwarz);padding:16px 0}
.popp-footer-letzte-zeile>.popp-container{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.popp-footer-letzte-zeile small{color:var(--popp-zwei-h2);white-space:nowrap;text-transform:none;font-size:14px}   /* Copyright = Satzschrift, 14px wie Metamenü (Vorlage) */
.popp-footer-letzte-zeile nav{display:flex;gap:54px;flex-wrap:wrap;margin-left:auto}   /* 05: Metamenü-Abstand +100%, am Crop verifiziert; Container-gap (138) bleibt 26 */
.popp-footer-letzte-zeile a{color:inherit;text-decoration:none}   /* Größe/Farbe/uppercase aus popp-footer-letzte-zeile-Atom (14/zwei-h2) */

/* ===== 05 · Bildquellen-Panel (Plugin „Bildquellenangaben") ===== */
/* Der Legal-Link mit data-pc_container="toggle" klappt das Panel auf: das Plugin-JS setzt .open und
   füllt die Liste (ul.pc_plugin_image-list) mit den Quellen der aktuellen Seite. Sichtbarkeit steuern
   WIR statt des Plugin-CSS — das lädt in der Editor-Preview nicht. Panel erbt vom Schlusszeilen-Atom
   Versalien/Laufweite → für den Fließtext zurücksetzen. Die 2-Klassen-Selektoren schlagen das Plugin-
   CSS (max. 0,1,1) sicher per Spezifität; zusätzlich laden wir später (Prio 21 vs. 10). */
.popp-footer-quellen{display:none;padding:26px 0 8px;text-transform:none;letter-spacing:normal}
.popp-footer-quellen.open{display:block}
.popp-footer-quellen .popp-footer-h{margin:0 0 14px}
.popp-footer-quellen-liste .pc_plugin_image-list{margin:0 0 18px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px 26px}   /* Plugin-Grid (minmax 390) ist für den Footer zu breit */
.popp-footer-quellen-liste .pc_plugin_image-list li{display:flex;gap:12px;margin:0;align-items:flex-start}
.popp-footer-quellen-liste .pc_plugin_image-list img{width:72px;max-height:54px;height:auto;object-fit:cover;border-radius:var(--popp-radius)}
.popp-footer-quellen-liste .pc_plugin_credits{font-size:14px;line-height:20px;font-weight:300;color:var(--popp-zwei-h2)}
.popp-footer-quellen-liste .pc_plugin_credits strong{font-weight:600}
.popp-footer-quellen-liste .pc_plugin_credits p{margin:2px 0 0}
.popp-footer-quellen-liste .pc_plugin_credits a{word-break:break-all}
.popp-footer-quellen-link{display:inline-block;margin:0 0 18px;text-transform:uppercase;letter-spacing:.08em}


/* ===== 08 · H1 ===== */
.popp-h1{margin:0}

/* ===== 09 · Lockup ===== */
.popp-lockup{margin:0}
.popp-lockup .popp-subline{margin:0 0 2px}
/* H2-Einrückung 36px kommt jetzt aus dem DS-Atom popp-h2 (Styleguide-Spec) */

/* ===== 10 · Text + Bild ===== */
.popp-textbild{display:grid;grid-template-columns:minmax(0,1fr) var(--popp-textbild-bild,40%);gap:50px;align-items:start}   /* Bild ≈2/5 (Entwurf); oben ausgerichtet (Vorlage: iPad oben bündig mit dem Text) */
.popp-textbild:not(:has(.popp-textbild-figur)){grid-template-columns:1fr}   /* Bild optional (f5 leer) → reiner Fließtext volle Breite (Unterseiten-Intro/Abschluss) */
.popp-textbild-text>.popp-lockup{margin:0 0 18px}   /* Kopf = 09-Lockup; Subline/H2-Abstand + Indent erbt von .popp-lockup */
.popp-textbild-text>.popp-ft{margin:0 0 14px}
.popp-textbild-text>.popp-ft strong{font-weight:600}   /* Intro-Begriffe fetten (popp-ft ist 300 → <strong> sonst nur 400) */
.popp-textbild-figur{margin:0}
.popp-textbild-figur img{display:block;width:100%;height:auto;border-radius:0}   /* eckig (Vorlage) */
.popp-textbild-lg .popp-textbild{--popp-textbild-bild:50%}   /* iPad ~+25% größer (Bildspalte 40%→50%) */
.popp-textbild:has(.popp-lockup) .popp-textbild-figur{margin-top:96px !important}   /* Bild oben bündig mit Fließtext (nur Home hat Lockup+Bild) — um Lockup-Höhe (78)+margin (18) runter; !important schlägt Elementor frontend.min .elementor-widget figure{margin:0} (0,4,1) */

/* ===== 11 · Newsletter-Teaser ===== */
/* .popp-teaser trägt jetzt NUR das Grid im popp-container (Inhalt fluchtet mit den anderen
   Sektionen). Das graue Band (BG + weißes Übergangs-Dreieck + vertikaler Abstand) liegt auf
   dem umgebenden Seiten-Container .popp-band-panel (s. „Sektions-Bänder"), damit es Newsletter
   + Features GEMEINSAM trägt — Seiten-Komposition statt Einzel-Komponente. */
.popp-teaser>.popp-container{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.popp-teaser .popp-inline-form-row{background:var(--popp-zwei-h2a)}   /* graue Einfassung #e0dcd9 = POPP Zwei h2a — Kontrast zum Band-BG (Vorlage) */
.popp-teaser .popp-inline-form>.popp-meta{font-weight:300;font-size:18px;line-height:1.4;text-transform:none;letter-spacing:normal;color:var(--popp-zwei-dk2)}   /* „Jetzt kostenfrei testen" = Fließtext (Vorlage) */
.popp-teaser-text>.popp-lockup{margin:0 0 16px}   /* Kopf = 09-Lockup; Subline/H2-Abstand + Indent erbt von .popp-lockup */
.popp-teaser-text>.popp-ft{margin:0 0 20px}
.popp-deko-check{height:1.2em;width:auto;margin-left:.28em;vertical-align:-.22em}   /* Deko-Häkchen nach der Headline; inline → bricht bei schmal sauber um */
.popp-nowrap{white-space:nowrap}   /* letztes Wort + Deko-Häkchen (14) zusammenhalten (sonst bricht das ✓ allein um) */
/* Intro ist <strong>: popp-ft ist font-weight:300, daher würde <strong> (bolder) nur 400 ergeben → explizit fetten */
.popp-teaser-text>.popp-ft strong{font-weight:700}   /* Teasertext fett (Vorlage) */
/* Formular-Leiste (grauer Container + kompakt) ist jetzt generisch bei .popp-inline-form-row → gilt auch für 14 */
.popp-teaser-figur{margin:0}
.popp-teaser-figur img{display:block;width:100%;height:auto}   /* iPad-Original (#f4f3f2-Hintergrund) — nahtlos zum Content-Block (Vorlage) */

/* ===== Seiten-Komposition: Sektions-Abstand + Bänder =====
   Gap zwischen Elementen ist bewusst 0 (Kit) → der vertikale Rhythmus kommt aus diesen
   Klassen am umgebenden Full-Width-Container, NICHT aus den Einzel-Komponenten. */
.popp-section{padding-block:var(--popp-section-pad)}   /* Abstand gestapelter Boxed-Content-Sektionen */
/* Kombinierte Content-Sektion (mehrere Komponenten in EINEM Full-Width-Container, z.B. H1+Text,
   Text+Liste+Text, Lockup+Akkordeon): definierter vertikaler Rhythmus zwischen den Blöcken statt
   Elementor-Default 0 (bündig) oder 2×48px zweier getrennter Sektionen. 2-Klassen-Selektor schlägt
   Elementors e-con-Gap. */
.popp-section.popp-flow{row-gap:28px}
/* Wie .popp-section, aber ohne unteres Padding — für einen full-bleed-Abschluss-Block (z.B. Mission-Band 22),
   der bündig an den Footer stoßen soll; der obere Abstand bleibt erhalten. */
.popp-section-t{padding-top:var(--popp-section-pad)}
/* Seitenüberschrift-Sektion (08): oberer Abstand vom Hero, KEIN unteres Padding — der Abstand zum
   nachfolgenden Content kommt allein aus der H1-margin-bottom und ist damit auf ALLEN Seiten identisch
   (Vorgabe RZ_7 ≈ 26px optisch). Die Folgesektion trägt .popp-flush-top (kein oberes Padding). */
.popp-pagehead{padding-top:var(--popp-section-pad)}
.popp-pagehead .popp-h1{margin-bottom:16px}   /* → ~26px optischer Abstand Überschrift→Content (RZ_7) */
.popp-section.popp-flush-top{padding-top:0}
/* Graues Sektions-Band (#f4f3f2) mit weißem Übergangs-Dreieck oben-mittig. Trägt eine oder
   mehrere Komponenten (Newsletter 11 [+ Feature-Grid 12]) — vormals BG der Komponente .popp-teaser. */
.popp-band-panel{position:relative;background:var(--popp-panel);padding-block:var(--popp-section-pad);gap:var(--popp-section-pad);overflow:hidden}   /* trägt Newsletter + Features gestapelt; gap = Abstand dazwischen (Token) */
.popp-bg-taupe>*+*{margin-top:var(--popp-section-pad)}   /* Abstand zwischen gestapelten Komponenten im Taupe-Band (Lockup 09 ↔ Preis-Karten 23) */
.popp-bg-taupe{overflow:clip visible}   /* x geklippt (Deko darf rechts anschneiden, ohne H-Scroll), y frei — die Pflanze überlappt oben/unten über das Band hinaus */
.popp-band{background:var(--popp-panel);overflow:clip visible}   /* graues Band OHNE Übergangs-Dreieck (RZ: Karussell-Band, Beratungs-Service-Berater); Deko darf rechts anschneiden + vertikal überlappen */
/* Übergangs-PFEIL (weißes Dreieck, RZ_: 156×36 @1400 · RZ_11 mobil: 152×35 @576 → fixes Ornament
   ~160×37, mittig, alle Breakpoints). Explizite width/height + clip-path statt Border-Trick:
   Elementors .e-con::before zwingt dem Pseudo width/height 100% auf — der Border-Trick wurde
   dadurch zum Trapez-Streifen über die volle Bandbreite. */
.popp-band-panel::before{content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);
  width:160px;height:38px;border:0;background:var(--popp-weiss);
  clip-path:polygon(0 0,100% 0,50% 100%)}   /* 2px in die weiße Sektion überlappen: die AA-Kante des clip-path lag sonst als Haarlinie auf dem Panel-Grau (Naht) */

/* ===== 14 · Berater-finden-Block ===== */
.popp-berater{position:relative;overflow:visible}   /* Illu darf über die Widget-Grenze in die Sektion-Taupe bluten */
.popp-berater>*{position:relative;z-index:1}                 /* Inhalt über der Watermark */
/* Deko-Pflanze VOLLSTÄNDIG rendern (contain in Box mit Bild-Ratio 757:900 — nie oben/unten
   beschnitten) und über die Widget-Grenze hinaus überlappen lassen; nur der rechte Rand darf
   am Viewport anschneiden (Entwurf). 3× gestapelt = kräftiger (Wasserzeichen sonst zu blass). */
.e-con.popp-section:has(.popp-berater){z-index:1}   /* Stacking-Lift: die NACHFOLGENDE Sektion (e-con = position:relative + BG) malte sonst in DOM-Reihenfolge über die untere Pflanzen-Überlappung */
/* Footer über die Deko heben (check-04 #12): der <footer>-Wrapper ist transparent + statisch, die
   Berater-Sektion (z-index:1) malte ihre Pflanzen-Deko sonst über die (opaken) Footer-Bänder und den
   NEWSLETTER-Button. z-index:2 → die opaken Footer-Bänder decken die Deko-Überlappung sauber ab. */
[data-elementor-type="footer"]{position:relative;z-index:2}
/* Deko steuerbar über die POPP-14-Widget-Einstellungen: Elementor schreibt --berater-deco-* als
   CSS-Variablen (Media/Slider, siehe Component_Widget register_deco_controls). Die Werte hier sind
   die Fallback-Defaults (= bisheriger Look); das Bild kommt standardmäßig aus der Mediathek. */
.popp-berater::after{content:"";position:absolute;z-index:0;pointer-events:none;
  top:var(--berater-deco-top,-150px);right:var(--berater-deco-right,-20px);
  height:var(--berater-deco-height,968px);aspect-ratio:757/900;
  background:
    var(--berater-deco-image,url(assets/deco-watermark.png)) center/contain no-repeat,
    var(--berater-deco-image,url(assets/deco-watermark.png)) center/contain no-repeat,
    var(--berater-deco-image,url(assets/deco-watermark.png)) center/contain no-repeat;
  filter:contrast(1.15);opacity:var(--berater-deco-opacity,.5)}
.popp-berater>.popp-lockup{margin:0 0 16px}
.popp-berater>.popp-ft{margin:0 0 12px;max-width:1080px}
/* Erstberatung 2-spaltig (RZ_2): LINKS PLZ-Suche + Berater-Karte (18), RECHTS Kontaktformular (26). */
.popp-berater-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;margin-top:24px}
.popp-berater-col>.popp-inline-form{margin:0 0 24px;max-width:560px}
.popp-berater-col>.popp-card-berater{max-width:420px}   /* Karte schmaler als die Spalte (Entwurf) */
/* Berater-Finder (14): Karte + Kontaktformular sind erst nach erfolgreicher PLZ-Suche sichtbar.
   [hidden] muss .popp-card-berater{display:flex} überstimmen → !important. */
.popp-berater [hidden]{display:none!important}
.popp-berater-hinweis{margin:0 0 8px;max-width:560px;padding:12px 16px;background:var(--popp-zwei-h2);border-radius:var(--popp-radius);font-family:var(--popp-font-base);font-size:16px;line-height:1.4;color:var(--popp-zwei-dk2)}
.popp-berater-figur{margin:0;width:100%;max-width:560px}   /* Legacy (Standalone-Fallback) */
.popp-berater-figur img{display:block;width:100%;height:auto;border-radius:0}
/* 14 Platzhalter-Slot: bis ein Berater gefunden ist steht hier das Platzhalter-Foto (fluchtet mit
   dem PLZ-Formular = 560); danach nimmt die Beraterkarte denselben Platz ein. Weicher Übergang:
   Höhe animiert + Fade-in (JS setzt slot.height bzw. .is-fading-in). */
.popp-berater-slot{position:relative;max-width:560px;overflow:hidden;transition:height .35s ease}
.popp-berater-slot>*{transition:opacity .3s ease}
.popp-berater-slot .is-fading-in{opacity:0}
.popp-berater-slot>.popp-berater-figur{max-width:none;margin:0}
.popp-berater-slot>.popp-berater-figur img{border-radius:0}   /* eckig (Vorlage) */
.popp-berater-slot>.popp-card-berater{max-width:none}   /* Karte füllt den Slot (= Platz des Platzhalters), fluchtet mit dem Formular */
@media(max-width:1024px){
  .popp-berater-grid{grid-template-columns:1fr;gap:32px}   /* mobil: Karte über Formular gestapelt */
}

/* ===== 15 · Mängel-Karussell ===== */
.popp-karussell{position:relative}   /* Vorlage: Kopf/Button linksbündig (nicht zentriert) */
.popp-karussell-viewport{position:relative}   /* Pfeile (top:50%) auf die Karten-Mitte beziehen, nicht auf die Sektion inkl. Kopf */
.popp-karussell>.popp-lockup{margin:0 0 24px}
/* Deko-Glühbirne: entkoppeltes Pseudo-Element rechts an der Headline-Box (H2=inline-block → ::after sitzt am
   Text-Ende im Weißraum). Ersetzt das frühere Inline-<img>, das beim Umbruch (mobil 576) in die Zeile darüber ragte. */
.popp-karussell .popp-h2{position:relative;display:inline-block}
.popp-karussell .popp-h2::after{content:"";position:absolute;left:100%;bottom:0;
  height:2.8em;aspect-ratio:364/381;margin-left:.2em;pointer-events:none;   /* ~30% kleiner */
  background:url(assets/deco-bulb.png) center/contain no-repeat}
/* Mobil: Glühbirne deutlich kleiner UND inline hinter dem Text (statt absolut bei left:100%,
   was bei 4em/120px über den Viewport-Rand ragte → horizontaler Overflow). Inline fließt sie mit
   der letzten Zeile und bricht notfalls um, statt die Seite zu verbreitern. */
@media(max-width:1024px){   /* schon ab Tablet inline — sonst „fliegt" die Glühbirne bei left:100% aus dem Bild */
  .popp-karussell .popp-h2{display:block}   /* volle Breite → Icon passt hinter das letzte Wort statt auf eigene Zeile */
  .popp-karussell .popp-h2::after{
    position:static;left:auto;bottom:auto;display:inline-block;
    height:1.5em;width:1.43em;margin-left:.3em;vertical-align:-.3em}
}
/* Karussell: 2 Karten sichtbar, überzählige per Prev/Next scrollen (echtes Karussell, nicht 2×N-Grid).
   Horizontaler Scroll-Snap-Flexbox; Pfeile überhängen in den Seitenrand; Scrollbar versteckt. */
.popp-karussell-track{display:flex;gap:34px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;text-align:left;scrollbar-width:none}
.popp-karussell-track::-webkit-scrollbar{display:none}
.popp-karussell-track>*{flex:0 0 calc(50% - 17px);min-width:0;scroll-snap-align:start}   /* 2 Karten je Ansicht (17 = halber 34px-gap); Grid-Blowout verhindern */
.popp-karussell>.popp-button{display:inline-block;margin:28px 0 0}
.popp-karussell-prev,.popp-karussell-next{width:22px;height:48px;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:contain;cursor:pointer;font-size:0}
.popp-karussell-prev{background-image:url(assets/arrow-left.svg)}
.popp-karussell-next{background-image:url(assets/arrow-right.svg)}
/* Pfeile im Gutter (außerhalb des Contents), aber immer im Browserfenster (check-04 #10):
   Basis −24px (rechte Pfeilkante ~2px außerhalb der Karten). Bei knappem Gutter klemmt max() den
   Pfeil auf 6px vom Fensterrand → nie abgeschnitten. (100% = Viewport-Element = Contentbreite;
   (100% − 100vw)/2 = −Gutter.) Ersetzt die früheren −10px-Tablet/Mobil-Overrides, die halb über die
   Karten ragten. */
.popp-karussell .popp-karussell-prev{position:absolute;left:max(-24px,calc((100% - 100vw)/2 + 6px));top:50%;transform:translateY(-50%)}
.popp-karussell .popp-karussell-next{position:absolute;right:max(-24px,calc((100% - 100vw)/2 + 6px));top:50%;transform:translateY(-50%)}
.popp-karussell-prev[hidden],.popp-karussell-next[hidden]{display:none}   /* Pfeile aus, wenn alle Karten passen (JS setzt [hidden]) — überstimmt die Positions-Regel */
.popp-karussell .popp-card-maengel-figur{flex:0 0 51%}   /* 15: Bild/Body-Split ~51% = Crop (nur Karussell-lokal; Komp 16 behält 60%) */

/* ===== 16 · Mängel-Karte ===== */
.popp-card-maengel{display:flex;min-width:0;background:rgba(244,243,242,.92);border-radius:0;overflow:hidden}   /* eckig (Vorlage); graues Panel, leicht transparent (Überlagerung im Karussell sichtbar) */
.popp-card-maengel-figur{margin:0;flex:0 0 50%}   /* 16: Bild/Body-Split 50% = Crop gemessen (Foto-Kante 294/590); 15-Karussell lokal auf 51% */
.popp-card-maengel-figur img{display:block;width:100%;height:100%;object-fit:cover}
.popp-card-maengel-body{flex:1 1 auto;min-width:0;padding:22px 26px}   /* Text eingerückt, Bild nicht */
.popp-card-maengel-body .popp-h3{margin:0 0 10px}
.popp-card-maengel-body .popp-box{margin:0 0 10px}   /* Box-Text = DS-popp-box (15/24), keine Typo-Sonderregel */

/* ===== 17 · Team-Teaser ===== */
.popp-team{position:relative;width:100%;overflow:hidden}
/* NUR der Box-Container bekommt die Overlay-Positionierung (min-height/flex-center). :has() grenzt
   ihn vom Bildunterschrift-Container ab (check-04 #11: die Caption liegt jetzt ebenfalls in einem
   .popp-container und darf NICHT die 640px-Box-Höhe erben — sonst 640px Leerraum). */
.popp-team>.popp-container:has(.popp-team-box){position:relative;z-index:2;min-height:640px;display:flex;align-items:center}
.popp-team-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 78%}   /* 17: Vollbild-Hintergrund; Bias nach unten hält Hände/Erde (Vorlage) */
/* 17 zwei Bilder: Bild 1 (Blur) + Bild 2 (scharf). STARTSEITE (mit Box): Blur links 40% (Box
   darüber), scharf rechts 60%. ÜBER UNS (ohne Box): EIN Bild (f0) als Vollbild-Band, Bild 2 aus. */
.popp-team--boxed .popp-team-img{position:absolute;top:0;bottom:auto;right:auto;height:100%}
.popp-team--boxed .popp-team-img--blur{left:0;width:40%}   /* Bild 1: fertiges Blur-Bild vom Grafiker (kein CSS-Filter) */
.popp-team--boxed .popp-team-img--main{left:40%;width:60%;object-position:50% 50%}
.popp-team--plain .popp-team-img--main{display:none}
.popp-team--plain .popp-team-img--blur{position:static;width:100%;height:clamp(360px,35vw,540px);object-fit:cover;object-position:50% 22%}   /* Höhe wie Startseite-Hero deckeln; Bias oben = Gesichter */
/* Box im responsiven popp-container (fluchtet mit dem Seiteninhalt wie 06/22 — nicht fix fb-pad) */
/* Vorlage: linke Hälfte des Bildes ist „frosted" (Blur), rechte Hälfte scharf */
.popp-team::before{content:"";position:absolute;top:0;bottom:0;left:0;width:calc(var(--popp-fb-pad) + 480px);z-index:1;pointer-events:none;   /* 17: Blur-Naht hinter der Textbox (@1400 = Box-Region) */
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:rgba(0,0,0,.22)}   /* Frosted-Glass verstärkt + abgedunkelt (Vorlage) */
.popp-team::before{display:none}   /* Frosted-Seam raus: das echte Blur-Bild (Bild 1) ersetzt ihn */
.popp-team-box{position:relative;z-index:2;
  background:var(--popp-weiss);max-width:calc(50% - 18px);padding:32px 34px;border-radius:0;box-shadow:0 14px 44px rgba(0,0,0,.14)}   /* Box = halbe Content-Spalte minus halber Gutter (responsiv statt fix 560); eckig, links, vertikal via flex zentriert */
.popp-team-box>.popp-lockup{margin:0 0 14px}   /* Kopf = 09-Lockup; Subline/H2-Abstand + Indent erbt von .popp-lockup */
.popp-team-box .popp-ft{margin:0 0 20px}
/* Team-Box-Button: DS-Radius 4px (RZ_-Abgleich am 4x-Zoom — die frühere 8px-Rundung war zu stark);
   mehr Binnenabstand via popp-button statt -kompakt (Snippet). */
.popp-team-caption{margin:5px 0 0}   /* 17: Bildunterschrift unter dem Hero-Band (Über uns). Ausrichtung kommt jetzt vom umschließenden .popp-container (wie der Seitenheader 08) — KEIN eigenes padding/max-width (check-04 #11); Abstand Bild↔BU −30% (5px). */

/* ===== 20/21 · Werte-Item + Liste ===== */
.popp-werte-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26px}   /* kein Top-Padding → 1. Headline startet auf selber Höhe wie der linke Textblock; Häkchen ragt via margin-top:-6 darüber (kein Clip, kein overflow) */
.popp-werte-item{display:flex;gap:10px;align-items:flex-start;list-style:none}   /* 20: Häkchen näher an Text (gap 18→10, Crop); margin-top:-6px bleibt */
.popp-werte-check{flex:0 0 auto;width:34px;height:auto;margin-top:-6px}   /* Häkchen ragt über die Headline-Oberkante (Referenz „Wir sind Ihr Partner") */
.popp-werte-body{min-width:0}
.popp-werte-body .popp-h3{margin:0 0 8px}
.popp-werte-body .popp-ft{margin:0}

/* ===== 22 · Mission ===== */
.popp-mission{position:relative;width:100%;background:var(--popp-zwei-h2)}   /* full-bleed Band, kein radius */
.popp-mission-figur{position:absolute;inset:0 0 0 51%;margin:0}   /* rechte Bandhälfte → blutet bis zur rechten Kante (Split ~714 = PDF) */
.popp-mission-figur img{display:block;width:100%;height:100%;object-fit:cover}
.popp-mission>.popp-container{position:relative;display:flex;align-items:center;min-height:300px}   /* Text im popp-container (fluchtet mit Seiteninhalt) */
.popp-mission-text{width:51%;box-sizing:border-box;padding:42px 56px 42px 0}   /* linke Hälfte bis zum Bild-Split (~714 = PDF); rechts Gap zum Bild */
.popp-mission-text>.popp-lockup{margin:0 0 16px}   /* Kopf = 09-Lockup; Subline/H2-Abstand + Indent erbt von .popp-lockup */
.popp-mission-text .popp-ft{margin:0 0 14px}

/* ===== 23 · Preis-Karten ===== */
.popp-preis-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.popp-preis-grid>*{min-width:0}   /* Grid-Blowout-Schutz (konsistent mit Feature-/Karussell-Grid) */
.popp-card-preis{background:var(--popp-zwei-h2);padding:30px 30px 34px;display:flex;flex-direction:column;text-align:center;border-radius:0}   /* Vorlage: bewusst eckig (gegen --popp-radius) */
.popp-card-preis--aktiv{background:var(--popp-eins-h3)}   /* helleres Mint #d6f6e6 (Vorlage) */
.popp-card-preis .popp-h3{margin:0 0 10px;font-size:30px;line-height:38px;color:var(--popp-eins)}   /* Überschrift größer + helleres Brand-Grün (Entwurf) */
.popp-card-preis .popp-euro{margin:0 0 6px}
.popp-card-preis .popp-meta{margin:0 0 14px}
.popp-card-preis .popp-ft{margin:0 0 16px}   /* zentriert (erbt von der Karte) */
.popp-card-preis-trenner{border:0;border-top:1px solid rgba(0,0,0,.16);width:100%;margin:6px 0 16px}
.popp-card-preis .popp-marginalien{margin:0 0 14px}   /* Absatz zentriert (erbt); Checkbox-Zeile bleibt links (label-Regel unten) */
.popp-card-preis .popp-button{align-self:center;margin:auto 0 14px;padding-block:8px}   /* margin-top:auto → Button (samt Consent) nach unten; fluchtet über beide Karten. ~42px via Padding */
.popp-marginalien a{color:var(--popp-zwei-dk2);text-decoration:underline}   /* Consent-Link im Fließtext-Ton (Abnahme 26: war Browser-Blau) */
.popp-card-preis .popp-marginalien a{color:var(--popp-eins-dk1);text-decoration:underline}   /* „Datenschutzerklärung"-Link grün (Preis-Karten) */
.popp-card-preis label.popp-marginalien{display:flex;gap:9px;align-items:flex-start;text-align:left}   /* Checkbox + Text linksbündig (Entwurf) */
.popp-card-preis .popp-marginalien input[type=checkbox]{flex:0 0 auto;width:14px;height:14px;margin:3px 0 0;   /* 1px runter, an der Textzeile ausrichten */
  -webkit-appearance:none;appearance:none;border:1px solid var(--popp-zwei-dk1);border-radius:2px;background:transparent;cursor:pointer}   /* leeres Quadrat wie Vorlage */

/* ===== 24 · Newsletter-Inline-Form (Label oberhalb) ===== */
.popp-inline-form>.popp-meta{display:block;margin:0 0 8px}   /* font-weight kommt aus popp-meta (600) */

/* ===== 26 · Kontaktformular ===== */
.popp-kontaktform{max-width:810px}                              /* — an Vorlagen-Proportion gemessen (Playbook 07): so deckt sich DS-popp-h3 (20px) mit der PDF-H3 */
.popp-kontaktform>.popp-h3{margin:0 0 6px}
.popp-kontaktform>.popp-ft{margin:0 0 20px}
.popp-field{display:block;margin:0 0 6px}                        /* dichter Linien-Pitch ~52px (Vorlage gemessen) */
.popp-field-label{display:block;font-family:var(--popp-font-base);font-size:18px;line-height:1.25;color:var(--popp-zwei-dk1);margin:0}   /* Fließtextgröße + dicht an der Eingabezeile (Entwurf) */
/* Textarea: Label INNEN oben-links (Vorlage), Box mit Platz dafür (padding-top) */
.popp-field--box{position:relative;margin-bottom:14px}
.popp-field--box .popp-field-label{position:absolute;top:13px;left:16px;margin:0;pointer-events:none}
/* Zeilenfeld: Label ALS Platzhalter AUF der Eingabezeile (Vorlage) */
.popp-field--line{position:relative}
.popp-field--line .popp-field-label{position:absolute;top:4px;left:2px;margin:0;pointer-events:none}
.popp-textarea{display:block;width:100%;min-height:170px;border:1px solid var(--popp-zwei-h1);border-radius:var(--popp-radius);padding:40px 14px 12px;font-family:var(--popp-font-base);font-size:16px;color:var(--popp-zwei-dk3);resize:vertical}
.popp-input-line{display:block;width:100%;border-width:0 0 1px !important;border-style:solid !important;border-color:var(--popp-zwei-h1) !important;background:none;padding:4px 2px;line-height:1.2;font-family:var(--popp-font-base);font-size:18px;color:var(--popp-zwei-dk3)}   /* nur Unterlinie (wie Kontaktformular); !important schlägt reset.css input[type=email]{border:1px} (0,1,1) */
.popp-radio-row{border:0;margin:10px 0 18px;padding:0;display:flex;align-items:center;gap:28px;flex-wrap:nowrap}   /* Desktop: „Antwort erbeten per…" in EINER Zeile */
.popp-radio-row .popp-field-label{margin:0;font-size:18px;color:var(--popp-zwei-dk2)}
.popp-radio-row label{display:flex;align-items:center;gap:8px;font-family:var(--popp-font-base);font-size:18px;color:var(--popp-zwei-dk2)}
.popp-kontaktform>.popp-button-kompakt{margin:4px 0 18px}   /* flacher Button = DS popp-button-kompakt (32px) */
.popp-kontaktform .popp-marginalien{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px}
/* Vorlage: Radios UND Consent-Checkbox sind dieselben runden Outline-Kreise (∅ ~20px gemessen),
   kein eckiges Default-Control. Checkbox bleibt das einzige Flex-Item (Text+Link inline im <span>). */
.popp-radio-row input[type=radio],
.popp-kontaktform .popp-marginalien input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:20px;height:20px;border:1px solid var(--popp-zwei-h1);border-radius:50%;background:var(--popp-weiss);cursor:pointer}
.popp-radio-row input[type=radio]:checked,
.popp-kontaktform .popp-marginalien input[type=checkbox]:checked{border-color:var(--popp-eins);
  background:radial-gradient(circle,var(--popp-eins) 0 4px,var(--popp-weiss) 5px)}
.popp-kontaktform .popp-marginalien input[type=checkbox]{margin:1px 0 0}   /* an der ersten Textzeile ausrichten */

/* ===== 27 · Kontakt-Aside ===== */
.popp-kontakt-aside .popp-h3{margin:0 0 8px}
.popp-kontakt-aside .popp-ft{margin:0 0 14px;font-weight:300;font-size:15px;line-height:24px;color:var(--popp-schwarz)}   /* Sidebar-Fließtext = POPP Box (15px) */
.popp-kontakt-aside .popp-ft + .popp-h3{margin-top:24px}
.popp-kontakt-aside a{color:var(--popp-eins);text-decoration:underline}
.popp-kontakt-aside .popp-kontakt-label{display:inline-block;width:84px}   /* feste Label-Spalte → Nummern beginnen bündig (Tab-Stop) */

/* ===== Kontakt-Seite: 2-spaltig — Formular (26) links ~2/3, Aside (27) rechts ~1/3, in EINEM
   Container (Maße wie .popp-container → fluchtet mit der H1 darüber). Sektion trägt beide Widgets. */
.popp-kontakt-2col{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:52px;align-items:start;padding-inline:40px}
/* max-width + Zentrierung mit 2-Klassen-Selektor, sonst überschreibt Elementors .e-con-full{max-width:100%}
   → der 2col-Block fluchtet mit H1/Footer im popp-container statt full-bleed nach links auszubrechen. */
.popp-section.popp-kontakt-2col{max-width:1360px;margin-inline:auto}
.popp-kontakt-2col>*{min-width:0}
.popp-kontakt-2col .popp-container{max-width:none;margin:0;padding:0}   /* 26 (atomarer e-flexbox mit eigenem popp-container) füllt seine Spalte statt sich mittig zu zentrieren */
.popp-kontakt-2col .popp-kontaktform{max-width:none}
@media(max-width:1024px){ .popp-kontakt-2col{grid-template-columns:1fr;gap:32px} }

/* Über-uns: Intro-Text (10) links, Werte-Liste (21) rechts — 2-spaltig, oben bündig (Vorlage RZ_9).
   Wie beim Kontakt-2col: max-width via 2-Klassen-Selektor (schlägt .e-con-full), innere popp-container
   füllen ihre Spalte statt sich zu zentrieren. */
.popp-section.popp-textliste-2col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;max-width:1360px;margin-inline:auto;padding-inline:40px}
.popp-textliste-2col>*{min-width:0}
.popp-textliste-2col .popp-container{max-width:none;margin:0;padding:0}
@media(max-width:1024px){ .popp-section.popp-textliste-2col{grid-template-columns:minmax(0,1fr);gap:32px} }   /* minmax(0,…): Spalte darf unter min-content schrumpfen → kein horizontaler Overflow durch lange Wörter */
/* Mobil: 2col-Sektionen (eigener Container, nicht im Basis-.popp-container) auf denselben 36px-Rand
   wie der übrige Content bringen (Desktop bleibt bei 40px, damit sie mit H1/Footer fluchten). */
@media(max-width:767px){
  .popp-section.popp-kontakt-2col,
  .popp-section.popp-textliste-2col{padding-inline:36px}
}

/* Kontaktformular (26, Elementor-Pro-Form) — Feinschliff auf Vorlage RZ_10:
   1) Radio-Feld „Antwort erbeten per": Label + Optionen (Rückruf/E-Mail) inline auf EINER Zeile.
   2) Reihenfolge: Absenden-Button VOR Einwilligung + „* Pflichtfelder" (Elementor rendert den Submit
      sonst als letztes Feld). Der Fields-Wrapper ist flex → per order umsortieren. */
.popp-kontakt-2col .elementor-field-group-antwort{flex-direction:row;align-items:flex-start;flex-wrap:wrap;column-gap:24px;row-gap:6px;margin-top:25px}   /* Radios bündig zur oberen Textzeile (flex-start) + Abstand +25px */
.popp-kontakt-2col .elementor-field-group-antwort > .elementor-field-label{margin:0;width:auto;flex:0 0 auto}   /* Label inline statt volle Breite (labels-above) */
.popp-kontakt-2col .elementor-field-group-antwort .elementor-field-subgroup{display:flex;flex-flow:row wrap;gap:6px 24px;flex-basis:auto !important}   /* Elementor erzwingt flex-basis:100% (!important) → neben das Label ziehen */
.popp-kontakt-2col .elementor-field-type-submit{order:1;margin-top:25px}   /* +25px vor dem Button */
.popp-kontakt-2col .elementor-field-group-feld9{order:2;margin-top:25px}   /* +25px vor der Einwilligung */
.popp-kontakt-2col .elementor-field-group-html10{order:3;margin-top:25px}   /* „* Pflichtfelder" +25px Abstand nach oben */
/* Einwilligungstext = POPP Marginalien (14/20/400). 3-Klassen-Selektor: das später geladene
   popp-widgets.css setzt Options-Labels auf 18px (.elementor-widget-form .elementor-field-option
   label, 0,2,1) — gleiche Spezifität verlor per Reihenfolge, (0,3,1) gewinnt. */
.popp-kontakt-2col .elementor-field-type-acceptance .elementor-field-label,
.popp-kontakt-2col .elementor-field-type-acceptance .elementor-field-option label{font-weight:400;font-size:14px;line-height:20px;color:var(--popp-zwei-dk2)}
/* Auswahlkreis bündig zur OBEREN Textzeile (nicht über alle Zeilen zentriert): flex-start schlägt
   das align-items:center der widgets-Option-Regel (0,3,0 > 0,2,0); 1px = (20px Zeile − 18px Kreis)/2. */
.popp-kontakt-2col .elementor-field-type-acceptance .elementor-field-option{align-items:flex-start}
/* Einwilligung: rundes Auswahlfeld (Vorlage RZ_10 zeigt Kreis wie bei den Radios, nicht eckig). */
.popp-kontakt-2col .elementor-field-type-acceptance input[type=checkbox]{appearance:none;-webkit-appearance:none;width:15px;height:15px;margin-top:1px;border:1px solid var(--popp-zwei-dk1);border-radius:50%;cursor:pointer;flex:0 0 auto}
.popp-kontakt-2col .elementor-field-type-acceptance input[type=checkbox]:checked{background:var(--popp-eins);border-color:var(--popp-eins);box-shadow:inset 0 0 0 3px var(--popp-weiss)}

/* Floating-Labels — Feldbeschriftung sitzt auf der Linie bzw. IN der Box (wie Entwurf).
   Leer/unfokussiert = Label auf der Linie; fokussiert/befüllt (JS .is-float) = Label wandert hoch + kleiner. */
.popp-kontakt-2col .elementor-field-type-text,
.popp-kontakt-2col .elementor-field-type-email,
.popp-kontakt-2col .elementor-field-type-tel,
.popp-kontakt-2col .elementor-field-type-textarea{position:relative}
.popp-kontakt-2col .elementor-field-type-text > .elementor-field-label,
.popp-kontakt-2col .elementor-field-type-email > .elementor-field-label,
.popp-kontakt-2col .elementor-field-type-tel > .elementor-field-label{
  position:absolute;left:2px;top:18px;margin:0;z-index:1;pointer-events:none;   /* OBEN verankert (Input ≈51px hoch: 20 padT+24 Zeile+4 padB+Border → Label-Bottom = 41 ≈ Linie−10): Elementor hängt Server-Fehlermeldungen als Span in die Gruppe — bottom-verankert rutschte das Label dann auf den Fehlertext */
  font-size:18px;font-weight:400;color:var(--popp-zwei-dk1);
  transform-origin:left bottom;transition:transform .15s ease,color .15s ease}
/* Autofill-Fallback ohne JS-Event (Safari/Chrome-AutoFill): Label hochziehen, wenn der Browser füllt */
.popp-kontakt-2col .elementor-field-type-text:has(input:-webkit-autofill) > .elementor-field-label,
.popp-kontakt-2col .elementor-field-type-email:has(input:-webkit-autofill) > .elementor-field-label,
.popp-kontakt-2col .elementor-field-type-tel:has(input:-webkit-autofill) > .elementor-field-label{transform:translateY(-24px) scale(.72)}
.popp-kontakt-2col .elementor-field-type-text.is-float > .elementor-field-label,
.popp-kontakt-2col .elementor-field-type-email.is-float > .elementor-field-label,
.popp-kontakt-2col .elementor-field-type-tel.is-float > .elementor-field-label{transform:translateY(-24px) scale(.72)}
.popp-kontakt-2col .elementor-field-type-text .elementor-field-textual,
.popp-kontakt-2col .elementor-field-type-email .elementor-field-textual,
.popp-kontakt-2col .elementor-field-type-tel .elementor-field-textual{background:transparent;padding-top:20px}
/* Nachricht (Textarea): Floating-Label wie die Zeilenfelder (check-04 #13) — sitzt IN der Box als
   Platzhalter-Ersatz, wandert bei Fokus/Füllung (JS .is-float) hoch + kleiner und überlagert so NIE
   den getippten Text. padding-top am 3-Klassen-Selektor (0,3,1), sonst gewinnt popp-widgets.css
   (.elementor-widget-form textarea.elementor-field-textual{padding:12px 14px}, 0,2,1, lädt später). */
.popp-kontakt-2col .elementor-field-type-textarea > .elementor-field-label{
  position:absolute;top:14px;left:15px;margin:0;z-index:1;pointer-events:none;
  font-size:18px;font-weight:400;color:var(--popp-zwei-dk1);
  transform-origin:left top;transition:transform .15s ease,color .15s ease}
.popp-kontakt-2col .elementor-field-type-textarea.is-float > .elementor-field-label{transform:translateY(-8px) scale(.72)}
.popp-kontakt-2col .elementor-field-type-textarea textarea.elementor-field-textual{background:transparent;padding-top:34px}

/* ===== 28 · Button (Gruppe) ===== */
/* display/text-decoration/cursor/letter-spacing: jetzt im DS-Button-Atom (custom_css) */
.popp-button-gruppe{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}   /* Button-Gruppe gestapelt mit Abstand */
.popp-button-gruppe>a,.popp-button-gruppe>button{white-space:nowrap}   /* Buttons nie umbrechen (Entwurf: je eine Zeile) */

/* ===== Suchergebnisseite (Theme-Builder-Template, Widget popp-search-results) ===== */
.popp-suchergebnisse{padding-block:64px 96px}
.popp-suchergebnisse .popp-h1{margin:0 0 16px}                              /* wie .popp-pagehead (RZ_7-Abstand) */
.popp-suchmeta{margin:0 0 6px}
.popp-suchform{margin:18px 0 38px;max-width:560px}
.popp-suchliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:28px;max-width:820px}
.popp-suchtreffer .popp-h3{margin:0 0 6px}
.popp-suchtreffer .popp-h3 a{color:var(--popp-eins);text-decoration:none}
.popp-suchtreffer .popp-h3 a:hover,.popp-suchtreffer .popp-h3 a:focus{text-decoration:underline}
.popp-suchtreffer .popp-ft{margin:0}
.popp-suchleer{max-width:640px}
.popp-suchleer .popp-h3{margin:0 0 8px}
.popp-pagination ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:38px 0 0;padding:0}
.popp-pagination a,.popp-pagination span{display:inline-block;min-width:34px;text-align:center;padding:4px 9px;
  font-family:var(--popp-font-base);font-size:15px;color:var(--popp-zwei-dk2);text-decoration:none;
  background:var(--popp-weiss);border:1px solid var(--popp-zwei-h1)}
.popp-pagination a:hover,.popp-pagination a:focus{background:var(--popp-eins-h1);color:var(--popp-weiss);border-color:var(--popp-eins-h1)}
.popp-pagination .current{background:var(--popp-eins);color:var(--popp-weiss);border-color:var(--popp-eins)}

/* ===== Fehlerseiten: 404-Template (verbatim html-Widget) + /fehler (Content-Fixture) ===== */
/* .popp-fehlerseite = Deko-Wasserzeichen (Kartoffelpflanze) rechts, wie .popp-berater::after. */
.popp-fehlerseite{position:relative}
.popp-fehlerseite::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    url(assets/deco-watermark.png) right 40px center/auto 105% no-repeat,
    url(assets/deco-watermark.png) right 40px center/auto 105% no-repeat,
    url(assets/deco-watermark.png) right 40px center/auto 105% no-repeat;   /* 3× gestapelt = kräftiger (wie Berater-Block) */
  filter:contrast(1.15);opacity:.5}   /* Deckkraft −50% (check-04 #01) */
.popp-fehlerseite>.popp-container,.popp-fehlerseite .popp-textbild{position:relative;z-index:1}   /* Inhalt über der Deko */
.popp-fehler404{padding-block:64px 110px}                                    /* Standalone-404 (kein popp-pagehead drumherum) */
.popp-fehler404 .popp-subline{margin:0 0 2px}
.popp-fehler404 .popp-h1{margin:0 0 16px}
.popp-fehler404 .popp-ft{max-width:640px;margin:0 0 14px}
.popp-fehler404 .popp-inline-form{margin:26px 0 22px;max-width:560px}
.popp-fehler404 .popp-marginalien{margin:26px 0 0}
.popp-fehlerseite .popp-textbild .popp-ft a:not(.popp-button-hell){color:var(--popp-eins)}   /* Kontakt-Link grün wie DS-Links */
@media(max-width:767px){
  .popp-suchergebnisse{padding-block:40px 64px}
  .popp-fehler404{padding-block:40px 72px}
  .popp-fehlerseite::after{background-size:auto 70%,auto 70%,auto 70%;opacity:.42}   /* Deko schmaler Viewport: kleiner + Deckkraft −50% (check-04 #01) */
}

/* ===== Legal-Seiten (Impressum · Sitemap · Datenschutz · Barrierefreiheit) ===== */
/* Aufbau wie /fehler: 08-H1 in popp-pagehead + 10-Text (f2, p_class popp-ft) in popp-flush-top —
   nur ohne Deko-Wasserzeichen (sachliche Seiten). Links grün wie DS; Listen (Sitemap) dezent. */
.popp-legalseite .popp-textbild .popp-ft a{color:var(--popp-eins)}
.popp-legalseite .popp-textbild ul{margin:8px 0 18px;padding-left:22px;font-family:var(--popp-font-base);font-weight:300;font-size:18px;line-height:26px;color:var(--popp-zwei-dk2)}
.popp-legalseite .popp-textbild li{margin:0 0 6px}
.popp-legalseite .popp-textbild li::marker{color:var(--popp-eins)}
.popp-legalseite .popp-textbild ul a{color:var(--popp-eins);text-decoration:none}
.popp-legalseite .popp-textbild ul a:hover,.popp-legalseite .popp-textbild ul a:focus{text-decoration:underline}

/* ===== Bildquellen-Seite: DS-Look für die [picture_credits_list]-Gesamtliste ===== */
/* Das Shortcode-Widget liefert .picture-credits-List > ul.pc_plugin_image-list ohne popp-container —
   Content-Spalte hier nachbilden (Werte = .popp-container: fb-max + 40px, mobil 36px). Die 2-Klassen-
   Selektoren übersteuern das Plugin-CSS (Grid minmax 390 / 200px-Bilder) per Spezifität + Ladeordnung. */
.popp-bildquellen .picture-credits-List{max-width:1360px;margin-inline:auto;padding-inline:40px}
.popp-bildquellen .pc_plugin_image-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px 40px}
.popp-bildquellen .pc_plugin_image-list li{display:flex;gap:16px;margin:0;align-items:flex-start}
.popp-bildquellen .pc_plugin_image-list img{width:120px;max-height:90px;height:auto;object-fit:cover;border-radius:var(--popp-radius)}
.popp-bildquellen .pc_plugin_credits{font-family:var(--popp-font-base);font-weight:300;font-size:15px;line-height:24px;color:var(--popp-schwarz)}
.popp-bildquellen .pc_plugin_credits strong{font-weight:600}
.popp-bildquellen .pc_plugin_credits p{margin:2px 0 0}
.popp-bildquellen .pc_plugin_credits a{color:var(--popp-eins);word-break:break-all}
/* Noch keine Nachweise gepflegt → statt leerer Fläche ein Hinweis (verschwindet mit dem ersten Eintrag). */
.popp-bildquellen .pc_plugin_image-list:empty::after{content:"Die Bildquellen-Nachweise werden derzeit zusammengestellt.";grid-column:1/-1;font-family:var(--popp-font-base);font-weight:300;font-size:18px;line-height:26px;color:var(--popp-zwei-dk2)}
@media(max-width:767px){
  .popp-bildquellen .picture-credits-List{padding-inline:36px}   /* mobiler Content-Rand wie .popp-container */
}


/* =========================================================================
   RESPONSIVE — Elementor-Breakpoints: Tablet ≤1024px · Mobile ≤767px
   (Desktop ab 1025px = Basis-Layout ohne Media-Query). Vorschau-iframes 768/360.
   ========================================================================= */

/* ===== Responsive: Header mobil (S. 11) ===== */
@media(max-width:1024px){
  .popp-header>.popp-container{padding-inline:18px;gap:18px}
  .popp-logo img{height:145px}   /* mobil: Logo-Ink ≈130 = Crop (576) —, zu klein */
  .popp-hauptnav{display:none}
  .popp-mb-toggle{display:inline-flex}
  .popp-header-meta{gap:18px;flex-wrap:wrap;justify-content:flex-end}
}
/* Schmale Handys (≤575): Logo weiter verkleinern + Gap enger, sonst schieben Logo (bei 145px ≈298px
   breit) + Meta + Burger die Seite über die Viewport-Breite hinaus (horizontaler Overflow). */
@media(max-width:575px){
  .popp-header>.popp-container{gap:12px}
  .popp-logo img{height:96px}
}
/* Sehr schmale Handys (≤400): der p15-vergrößerte Menü-Button (40×29 + 22px ≈141px min-content)
   sprengt sonst die Header-Zeile (@360: 9px H-Overflow) → eine Stufe zurück, bleibt größer als vor p15. */
@media(max-width:400px){
  .popp-mb-toggle{font-size:19px;gap:10px}
  .popp-mb-burger{width:34px;height:25px}
}

/* ===== Responsive: Hero mobil (S. 11) ===== */
@media(max-width:1024px){
  .popp-hero-img{height:360px}
  .popp-hero>.popp-container{padding-inline:16px;padding-bottom:16px}
  .popp-hero-kachel{align-self:flex-start;max-width:max-content;padding:20px 24px}   /* grüne Box auf Textbreite + Innenabstand (nicht full-width strecken) */
  .popp-hero-kachel .popp-h1-kachel{font-size:32px;line-height:36px}
}

/* ===== Responsive: Footer ===== */
@media(max-width:1024px){
  .popp-footer{padding:38px 0}
  .popp-footer>.popp-container{grid-template-columns:1fr 1fr;gap:30px 36px;padding-inline:24px}
}
@media(max-width:767px){
  .popp-footer>.popp-container{grid-template-columns:1fr;gap:28px;padding-inline:20px}
}

/* ===== Responsive: Footer-Schlusszeile ===== */
@media(max-width:1024px){
  .popp-footer-letzte-zeile>.popp-container{flex-direction:column;align-items:flex-start;gap:14px;padding-inline:24px}
  .popp-footer-letzte-zeile nav{margin-left:0;gap:12px 22px}
  .popp-footer-quellen>.popp-container{padding-inline:24px}   /* fluchtet mit der Legal-Zeile (schlägt den 36px-Mobil-Basis-Container: 0,2,0) */
}

/* ===== Responsive: Text + Bild (10) ===== */
/* Blueprint = Footer/Header: Layout stapeln + Inhalt vom Rand einrücken (padding-inline). */
@media(max-width:1024px){
  .popp-textbild{grid-template-columns:1fr;gap:28px;padding-inline:24px}   /* 2 Spalten -> gestapelt, Rand-Abstand wie Footer */
  .popp-container .popp-textbild .popp-textbild-figur{margin-top:0 !important}      /* gestapelt: kein Fließtext-Versatz. 3 Klassen = Spezifitäts-GLEICHSTAND (0,3,0) mit der :has-Desktop-Regel → spätere Quelle gewinnt (bei !important entscheidet Spezifität VOR Reihenfolge, (0,1,0) reichte nicht); ohne :has, matcht in @media zuverlässig */
}
@media(max-width:767px){
  .popp-textbild{gap:24px;padding-inline:20px}                            /* enger wie Footer @520 */
}

/* ===== Responsive: Newsletter-Teaser (11) ===== */
/* Grid liegt jetzt auf .popp-teaser>.popp-container (Content im popp-container); daher HIER
   den Container stapeln, nicht mehr .popp-teaser. Vertikaler Bandabstand kommt vom .popp-band-panel. */
@media(max-width:1024px){
  .popp-teaser>.popp-container{grid-template-columns:1fr;gap:28px}        /* gestapelt: Text oben, iPad darunter */
}
@media(max-width:767px){
  .popp-teaser>.popp-container{gap:24px}
  .popp-teaser .popp-inline-form-row{flex-direction:column}              /* Feld + Button im grauen Container gestapelt */
}

/* ===== Responsive: Feature-Item (13, einzeln) ===== */
/* Icon|Text bleibt nebeneinander (Icon klein); nur Rand-Inset wie Blueprint. Im Grid (12) kein Extra-Inset. */
@media(max-width:1024px){
  .popp-feature-item{padding-inline:24px}
  .popp-feature-grid .popp-feature-item{padding-inline:0}                 /* Grid regelt Abstände selbst */
}
@media(max-width:767px){
  .popp-feature-item{padding-inline:20px}
  .popp-feature-grid .popp-feature-item{padding-inline:0}
}

/* ===== Responsive: Feature-Grid (12) ===== */
/* Tablet (≤1024): 2 Spalten bleiben (Inhalt eingerückt); Mobile (≤767): 1 Spalte. */
@media(max-width:1024px){
  .popp-feature-grid{padding-inline:24px;column-gap:40px}
}
@media(max-width:767px){
  .popp-feature-grid{grid-template-columns:1fr;gap:28px}                  /* 2×2 -> 1 Spalte */
}
@media(max-width:767px){
  .popp-feature-grid{padding-inline:36px;gap:24px}   /* mobil war zu breit (Content 536 → 504; Design-Rand ~36px) */
}

/* ===== Responsive: Berater-finden-Block (14) ===== */
@media(max-width:1024px){
  .popp-berater{padding-inline:24px}
  .popp-berater-figur{width:100%}                              /* Foto volle Breite statt halb */
}
@media(max-width:767px){
  .popp-berater{padding-inline:20px}
  .popp-berater .popp-inline-form-row{flex-direction:column}   /* Feld + Button gestapelt */
}

/* ===== Responsive: Mängel-Karte (16) ===== */
/* Bild|Text nebeneinander bis 576 (= Mobil-Entwurfsbreite); erst darunter stapeln. */
@media(max-width:575px){
  .popp-card-maengel{flex-direction:column}
  .popp-card-maengel-figur{flex:none}
  .popp-card-maengel-figur img{height:220px}                   /* Vollbreit, Höhe gedeckelt */
}

/* ===== Responsive: Mängel-Karussell (15) ===== */
/* 2 Karten nebeneinander → untereinander; Karten erben das Stapeln aus 16. Pfeile weg im Stack. */
@media(max-width:1024px){
  .popp-karussell{padding-inline:24px}
  .popp-karussell-track{grid-template-columns:none;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-inline:0;scrollbar-width:none}   /* Karussell BEIBEHALTEN; padding-inline:0 → overflow:auto klippt genau an der Kartenkante (kein Peek der nächsten Karte); Seiten-Inset liefert .popp-karussell */
  .popp-karussell-track::-webkit-scrollbar{display:none}
  .popp-karussell-track>*{flex:0 0 100%;scroll-snap-align:start}   /* 15: eine VOLLE Karte sichtbar, kein Anschnitt (snap start statt center → kein Peek) */
  /* Pfeil-Position: geklemmte Basis-Regel (max(), check-04 #10) — kein Mobil-Override mehr. */
}
@media(max-width:767px){
  .popp-karussell{padding-inline:20px}
  .popp-karussell-track{gap:14px;padding-inline:0}
  .popp-karussell-track>*{flex:0 0 100%}
}

/* ===== Responsive: Team-Teaser (17) ===== */
/* Overlay-Box ist breiter als die frosted Hälfte → auf schmal stapeln: Bild-Banner oben, Text-Panel darunter. */
@media(max-width:1024px){
  .popp-team>.popp-container{display:block;min-height:0;max-width:none}
  .popp-team::before{display:none}                              /* kein Blur im Stack */
  .popp-team-box{max-width:none;border-radius:0;box-shadow:none;padding:28px 24px}
  /* Startseite (mit Box): mobil nur das scharfe Bild 2 als Band oben; Blur aus, Box darunter.
     !important, weil die Desktop-:has-Regel denselben Selektor/dieselbe Spezifität nutzt. */
  .popp-team--boxed .popp-team-img--blur{display:none!important}
  .popp-team--boxed .popp-team-img--main{position:static!important;width:100%!important;height:280px!important;left:auto!important}
}
@media(max-width:767px){
  .popp-team-img{height:220px}
  .popp-team-box{padding:24px 20px}
}

/* ===== Responsive: Mission-Block (22) ===== */
/* 2 Spalten (Text | Bild) → gestapelt: Text oben, Bild als Banner darunter. */
@media(max-width:1024px){
  .popp-mission-figur{position:static;margin:0}   /* gestapelt: Bild zurück in den Fluss → Banner unter dem Text */
  .popp-mission-figur img{height:260px}
  .popp-mission>.popp-container{display:block;min-height:0;padding:0}
  .popp-mission-text{width:auto;padding:34px 24px 28px}
}
@media(max-width:767px){
  .popp-mission-figur img{height:200px}
  .popp-mission-text{padding:28px 20px 24px}
}

/* ===== Responsive: Preis-Karten (23) ===== */
/* Tablet (≤1024): 2 Karten nebeneinander (Vergleich); Mobile (≤767): untereinander. */
@media(max-width:1024px){
  .popp-preis-grid{padding-inline:24px;gap:24px}
}
@media(max-width:767px){
  .popp-preis-grid{grid-template-columns:1fr}
}
@media(max-width:767px){
  .popp-preis-grid{padding-inline:20px}
}

/* ===== Responsive: Kontaktformular (26) ===== */
/* Felder sind schon width:100% (stapeln nativ); nur Rand-Inset wie Blueprint, sonst klebt der Inhalt am Viewport. */
@media(max-width:1024px){
  .popp-kontaktform{padding-inline:24px}
}
@media(max-width:767px){
  .popp-kontaktform{padding-inline:20px}
  .popp-radio-row{flex-wrap:wrap;gap:10px 28px}   /* mobil darf die Antwort-Zeile umbrechen */
}

/* ===== 28 · Button — Laufweite ===== */
/* Vorlage: Button-Text hat Buchstaben-Laufweite; DS-Klasse hat keine. (Footer-Buttons nutzen 0.1em.) */
/* letter-spacing: jetzt im DS-Button-Atom */

/* ============ 30 · Mitglieder-Seiten (SWPM) + Klassik-Seiten-Rahmen ============ */
/* Rahmen über .site-main: nur Klassik-Seiten (SWPM, Newsletter-Aktionsseite) haben ihn —
   Elementor-Seiten (elementor_header_footer-Template) NICHT. Grundtypo + Lesebreite. */
.site-main{max-width:820px;margin:0 auto;padding:48px 20px 72px;font-family:var(--popp-font-base);color:var(--popp-zwei-dk3)}
.site-main p{font-size:16px;line-height:1.65;margin:0 0 14px}
.site-main a{color:var(--popp-eins)}
/* Theme-Seitentitel (entry-title) im popp-h1-Look — Eigenschaften gespiegelt, bei DS-Änderung mitziehen */
.site-main .entry-title{font-family:var(--popp-font-base);font-weight:600;font-size:48px;line-height:51px;color:var(--popp-eins);margin:0 0 24px;padding-bottom:.14em}
/* Formular-Kästen im Look des Inline-Form-Containers (grau, eckig) */
.swpm-login-widget-form,.swpm-pw-reset-widget-form,.swpm-registration-widget-form,
.swpm-edit-profile-form{background:var(--popp-zwei-h2);padding:22px;max-width:560px;margin:0 0 18px}
/* Eingaben im .popp-input-Look — SWPM-Markup erlaubt keine eigenen Klassen, daher Eigenschaften
   gespiegelt (bei Änderung am DS-Input mitziehen!) */
.site-main input[type=text],.site-main input[type=password],.site-main input[type=email],
.site-main select,.site-main textarea{width:100%;box-sizing:border-box;
  border:1px solid var(--popp-zwei-h1);border-radius:var(--popp-radius);
  background:var(--popp-weiss);padding:5px 18px;
  font-family:var(--popp-font-base);font-size:16px;color:var(--popp-zwei-dk3)}
.site-main input[type=checkbox]{accent-color:var(--popp-eins)}
.site-main ::placeholder{color:var(--popp-zwei-dk1)}
/* Tabellen-Formulare (Registrierung/Profil, v1) auf gestapeltes Block-Layout */
.swpm-registration-widget-form table,.swpm-edit-profile-form table,
.swpm-registration-widget-form tbody,.swpm-edit-profile-form tbody,
.swpm-registration-widget-form tr,.swpm-edit-profile-form tr,
.swpm-registration-widget-form td,.swpm-edit-profile-form td{display:block;width:100%;border:0;padding:0}
.swpm-registration-widget-form tr,.swpm-edit-profile-form tr{margin:0 0 12px}
.site-main .swpm-label,.swpm-registration-widget-form td:first-child,
.swpm-edit-profile-form td:first-child{font-weight:600;font-size:14px;margin:0 0 4px;display:block}
/* Submit im .popp-button-Look (Eigenschaften gespiegelt aus dem DS-Button-Atom) */
.site-main input[type=submit],.site-main button[type=submit]{font-family:var(--popp-font-base);
  font-weight:600;font-size:14px;line-height:26px;color:var(--popp-weiss);text-transform:uppercase;
  background-color:var(--popp-eins);border-radius:4px;padding:5px 45px;border:0;display:inline-block;
  cursor:pointer;letter-spacing:.13em;width:auto}
/* Meldungen (Login-Hinweis, Fehler) */
.swpm-login-widget-action-msg{margin:0 0 14px;padding:10px 14px;background:var(--popp-eins-h3);font-size:15px}
/* Danke-Seite: Warte-Box solange PayPals IPN aussteht (Spinner + Hinweis, popp-portal-Filter) */
.popp-zahlung-wartet{display:flex;gap:14px;align-items:flex-start;background:var(--popp-eins-h3);padding:16px 18px;max-width:560px}
.popp-zahlung-wartet p{margin:0 0 8px}
.popp-zahlung-wartet p:last-child{margin:0}
.popp-spinner{flex:0 0 auto;width:22px;height:22px;margin-top:2px;border:3px solid var(--popp-eins-h2);border-top-color:var(--popp-eins);border-radius:50%;animation:popp-drehen 1s linear infinite}
@keyframes popp-drehen{to{transform:rotate(360deg)}}
/* Mein-Abonnement-Seite ([popp_abo_uebersicht]) */
.popp-abo-tabelle{width:100%;max-width:560px;border-collapse:collapse;margin:0 0 26px}
.popp-abo-tabelle th,.popp-abo-tabelle td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--popp-zwei-h1);font-size:16px}
.popp-abo-tabelle th{font-weight:600;width:42%;color:var(--popp-zwei-dk2)}
.popp-abo-kuendigen{max-width:560px;background:var(--popp-zwei-h2);padding:18px 20px}
.popp-abo-kuendigen .popp-h2{font-size:24px;line-height:1.2;margin:0 0 10px}
.swpm-login-form-pw-reset-link,.swpm-login-form-register-link{font-size:14px;margin-top:8px}