/* POPP Widgets — widget-spezifische Ergänzungen.
   Grundstyling der popp-*-Klassen kommt aus popp-ds.css (Typo/Farbe) +
   popp-components.css (Layout). Hier nur, was ein Widget zusätzlich braucht
   (z.B. Slider-/Nav-Zustände). Akkordeon benötigt nichts Eigenes. */

/* popp-nav: Dropdown-Verhalten. Das Bundle-CSS stylt .popp-submenue als Panel,
   zeigt aber nur den offenen Zustand — hier das eigentliche Auf-/Zuklappen.
   Öffnen NUR per Klick auf den Überpunkt (JS toggelt .is-open) — KEIN :hover
   (User-Feedback 2026-07-03). Daher auch keine Hover-Brücke mehr nötig. */
.popp-hauptnav .popp-submenue {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	display: none;
}
.popp-hauptnav .popp-hauptmenue-item.is-open > .popp-submenue {
	display: block;
}
.popp-hauptnav .popp-hauptmenue-item > a {
	cursor: pointer;
}

/* popp-nav Mobile-Overlay: default aus; per JS (.is-open) als Fullscreen-Overlay ein.
   Submenü-Akkordeon: geschlossen ausblenden, bei .is-open zeigen. */
.popp-mb-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	overflow-y: auto;
}
.popp-mb-overlay.is-open {
	display: block;
}
.popp-mb-overlay .popp-akk-item > .popp-mb-submenue {
	display: none;
}
.popp-mb-overlay .popp-akk-item.is-open > .popp-mb-submenue {
	display: block;
}
.popp-mb-overlay .popp-akk-item.is-open .popp-akk-chevron {
	transform: scaleY(-1);
}

/* HINWEIS: Die früheren Atomic-Render-Fixes (Footer-Link-Neutralisierung,
   flex-direction:column für Footer-Spalten/Lockup/-text/-box) sind entfallen —
   die statischen Komponenten rendern jetzt verbatim (echtes Block-HTML), gestylt
   allein von popp-ds.css + popp-components.css. Nur Widget-/Form-CSS bleibt hier. */

/* Body/Content margin/padding-frei: die Theme-Header/Footer-Locations + der Inhalt
   sollen ohne Verschiebung ganz links/full-bleed sitzen (Theme-Builder-Kontext). */
body { margin: 0; padding: 0; }
.elementor-location-header, .elementor-location-footer { margin: 0; padding: 0; }

/* Footer-Location: die beiden Full-Bleed-Bänder (popp-c04 + popp-c05) müssen direkt
   aneinanderstoßen. Elementors Default-Widget-Abstand (margin-bottom:20px zwischen
   Widgets) zeigt sonst einen Streifen Seiten-Hintergrund zwischen Footer und Schlusszeile. */
.elementor-location-header .elementor-widget,
.elementor-location-footer .elementor-widget { margin-block: 0; }

/* Theme-Base im verbatim-Snippet-Content (klassisches html-Widget) neutralisieren,
   damit ungesetzte Eigenschaften wie im gegen die Design-JPGs verifizierten Bundle
   (render_check-Baseline) auf Browser-Default fallen — unabhängig vom aktiven Theme.
   Die popp-Klassen setzen ihre Typo selbst; hier nur die Vererbung auf klassenlose
   Knoten (z. B. popp-meta ohne eigene line-height). Scope = nur das html-Widget,
   die Custom-Widgets (Nav/Slider/Form) bleiben unberührt. */
.elementor-widget-html,
[class*="elementor-widget-popp-"] { line-height: normal; color: #000; }
.elementor-widget-html img,
[class*="elementor-widget-popp-"] img { max-width: none; }

/* Bild-Höhen: Elementors `.elementor img{height:auto}` + reset `img{height:auto}` (Spez.
   0,1,1 bzw. 0,0,1) überstimmen die Bundle-Regeln, die die Klasse DIREKT aufs <img> setzen
   (nur 0,1,0) → Icons/Cover-Bilder fallen auf die (große) Eigenhöhe. Mit img-Qualifizierer
   (0,1,1) gleichziehen; popp-widgets.css lädt zuletzt → gewinnt. Die .parent-img-Selektoren
   (popp-logo/-footer-social/-mission/-maengel) sind bereits 0,1,1 und greifen bereits.
   Werte + Breakpoints = popp-components.css (dort maßgeblich). */
img.popp-meta-icon { height: 15px; }
img.popp-feature-icon { height: 64px; }
img.popp-akk-thumb { height: 64px; }
img.popp-deko-bulb { height: 2em; }
img.popp-deko-check { height: 1.2em; }   /* Inline-Häkchen in Teaser (11) + Berater-Block (14) */
img.popp-hero-img { height: 100%; }
img.popp-team-img { height: 100%; }
@media (max-width: 1024px) {
	img.popp-hero-img { height: 360px; }
	img.popp-team-img { height: 280px; }
}
@media (max-width: 767px) {
	img.popp-team-img { height: 220px; }
}

/* Weitere Base-Leaks (gleiches Muster: Elementor/UA-Basis überstimmt Bundle-Regeln mit
   Klasse direkt am Element, 0,1,0). Mit Tag-Qualifizierer (0,1,1) + Ladeordnung schlagen.
   Werte = popp-components.css. */
/* Slider-Pfeile: nacktes <button> ohne DS-Klasse → UA-Button-Padding bläht die 22px-Box auf
   (rendert ~32px, Pfeile rücken in den Seitenrand/über die Kartenkante). Padding neutralisieren. */
button.popp-karussell-prev,
button.popp-karussell-next { width: 22px; padding: 0; }
/* Preis-Karten-Trenner: .elementor hr{margin:0} (0,1,1) frisst die 6/16px-Luft des <hr>. */
hr.popp-card-preis-trenner { margin: 6px 0 16px; }
/* Akkordeon-Body: klassenlose <p> in .popp-box. Das Bundle verlässt sich auf den UA-<p>-Abstand
   (1em oben/unten); hello-elementor setzt margin:0 0 14.4px → Absätze 16px zu eng. UA-Wert zurück. */
.popp-akk-body .popp-box > p { margin: 1em 0; }
/* hello-elementor reset.css setzt `button:hover/:focus` + `[type=button/submit]:hover/:focus`
   auf `background:#cc3366` (Pink/Rot) + `color:#fff` — das globale Rot darf NICHT auf popp-<button>
   durchschlagen (Slider-Pfeile, Form-Submits, Nav-Toggles). Jede Variante behält ihr Aussehen. */
.popp-karussell-prev:hover, .popp-karussell-prev:focus,
.popp-karussell-next:hover, .popp-karussell-next:focus,
.popp-mb-toggle:hover, .popp-mb-toggle:focus,
.popp-mb-close:hover, .popp-mb-close:focus,
.popp-suche-toggle:hover, .popp-suche-toggle:focus,
.popp-suche-submit:hover, .popp-suche-submit:focus { background-color: transparent; color: inherit; }
/* DS-Hover der grünen Buttons: Hintergrund „POPP Eins h1", Schrift bleibt weiß (Vorgabe).
   a.-Qualifier nötig: hello-elementors a:hover färbte die Link-Buttons sonst dunkelblau (#336). */
button.popp-button:hover, button.popp-button:focus, a.popp-button:hover, a.popp-button:focus,
button.popp-button-kompakt:hover, button.popp-button-kompakt:focus,
a.popp-button-kompakt:hover, a.popp-button-kompakt:focus { background-color: var(--popp-eins-h1); color: var(--popp-weiss); }
button.popp-button-hell:hover, button.popp-button-hell:focus,
a.popp-button-hell:hover, a.popp-button-hell:focus { background-color: var(--popp-zwei-h1); color: var(--popp-zwei-dk3); }

/* Verbatim-Formular-Controls (14 Kontaktformular): Theme-/Elementor-Basis auf <input>/<textarea>
   (0,1,1) überstimmt die Bundle-Klassen (0,1,0) → Zeilen-Inputs bekommen 8px statt 4px Padding
   (9px zu hoch). Mit Tag-Qualifizierer (0,1,1) + Ladeordnung zurückholen. Werte = popp-components.css. */
input.popp-input-line { padding: 4px 2px; }
textarea.popp-textarea { padding: 40px 14px 12px; }

/* ===== Elementor-Pro-Formulare im POPP-Look (Phase C2) ===== */
.elementor-widget-form .elementor-field-group {
	margin-bottom: 8px;
}
.elementor-widget-form .elementor-field-label {
	font-family: var(--popp-font-base);
	font-size: 18px;
	line-height: 1.25;
	font-weight: 400;
	color: var(--popp-zwei-dk1);
	margin: 0 0 2px;
	padding: 0;
}
/* Text/Mail/Tel-Inputs = Linien-Style (nur unten Rand, transparent) */
.elementor-widget-form input.elementor-field-textual {
	border: 0;
	border-bottom: 1px solid var(--popp-zwei-h1);
	background: none;
	border-radius: 0;
	box-shadow: none;
	padding: 4px 2px;
	font-family: var(--popp-font-base);
	font-size: 18px;
	color: var(--popp-zwei-dk3);
}
/* Textarea = Box */
.elementor-widget-form textarea.elementor-field-textual {
	border: 1px solid var(--popp-zwei-h1);
	border-radius: var(--popp-radius);
	background: none;
	min-height: 170px;
	padding: 12px 14px;
	box-shadow: none;
	font-family: var(--popp-font-base);
	font-size: 16px;
	color: var(--popp-zwei-dk3);
}
.elementor-widget-form .elementor-field-textual:focus {
	border-color: var(--popp-eins);
	outline: 0;
}
/* Submit = popp-button-kompakt (POPP-Grün, uppercase, kompakt/inline) */
.elementor-widget-form .elementor-field-type-submit {
	display: block;
}
.elementor-widget-form .elementor-button {
	display: inline-block;
	width: auto !important;
	font-family: var(--popp-font-base);
	font-weight: 600;
	font-size: 14px;
	line-height: 26px;
	color: var(--popp-weiss) !important;
	text-transform: uppercase;
	letter-spacing: .31em;
	background-color: var(--popp-eins) !important;
	border: 0;
	border-radius: 4px;
	padding: 5px 45px;   /* wie DS popp-button-kompakt: line-height 26 + 2×5 = 36px (Commit 0aacd1e) */
	min-height: 0;
}
.elementor-widget-form .elementor-button:hover {
	background-color: var(--popp-eins-dk1) !important;
}
/* Radio-Gruppe: Label oben, Optionen darunter in EINER Reihe (Subgroup = flex-row). */
.elementor-widget-form .elementor-field-subgroup {
	display: flex;
	flex-direction: row !important;
	gap: 10px 28px;
	flex-wrap: wrap;
	align-items: center;
}
.elementor-widget-form .elementor-field-option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.elementor-widget-form .elementor-field-option label,
.elementor-widget-form .elementor-field-subgroup label {
	font-family: var(--popp-font-base);
	font-size: 18px;
	color: var(--popp-zwei-dk2);
	margin: 0;
}
/* Custom Radios/Checkboxen (POPP): Kreis/Quadrat, grün bei checked */
.elementor-widget-form input[type="radio"],
.elementor-widget-form input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	flex: 0 0 auto !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px;
	margin: 0;
	border: 1px solid var(--popp-zwei-h1) !important;
	background: none;
	cursor: pointer;
}
.elementor-widget-form input[type="radio"] {
	border-radius: 50% !important;
}
.elementor-widget-form input[type="checkbox"]:checked,
.elementor-widget-form input[type="radio"]:checked {
	border-color: var(--popp-eins);
	background: var(--popp-eins);
	box-shadow: inset 0 0 0 3px var(--popp-weiss);
}
/* Links im Formular (z.B. Datenschutzerklärung) = POPP-Grün, unterstrichen */
.elementor-widget-form a {
	color: var(--popp-eins-dk1);
	text-decoration: underline;
}
.elementor-widget-form .elementor-field-type-html {
	margin-bottom: 10px;
}

/* Inline-Form (24/25/11/14): Label oben, Feld + Button in einer Reihe */
.popp-inline-form .elementor-form-fields-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
	max-width: 560px;
}
.popp-inline-form .elementor-field-type-html {
	flex: 1 1 100%;
	margin: 0 0 4px;
}
.popp-inline-form .elementor-field-group:not(.elementor-field-type-submit):not(.elementor-field-type-html) {
	flex: 1 1 auto;
	width: auto !important;
	margin: 0;
}
.popp-inline-form .elementor-field-type-submit {
	flex: 0 0 auto;
	width: auto !important;
	margin: 0;
}