/*
 * Elementor-Anpassungen für das PoloProfi-Design.
 *
 * Grundsatz: Das Aussehen der Sektionen steht in tokens.css/shared.css/
 * theme.css (gemeinsame Quelle mit dem Shopware-Theme). Hier steht nur das,
 * was Elementor selbst mitbringt und im Weg wäre:
 *   1. Container neutralisieren, die ein PP-Sektions-Widget tragen
 *   2. Elementor-Standardwidgets auf die Markenoptik mappen
 *   3. Markup, das es nur in den Widgets gibt (Hero-Bild, Fließtext)
 */

/* --- 1. Container ------------------------------------------------------- */

/* Die Sektions-Widgets bringen Breite (.pp-content erbt 72rem) und Abstände
   (.pp-sec, .pp-band) selbst mit. Ein Elementor-Container darf deshalb weder
   einrücken noch die Breite zusätzlich begrenzen — sonst stimmen Kanten und
   Rhythmus nicht mehr mit dem Shopware-Theme überein. */
.e-con:has(> .e-con-inner > [class*="elementor-widget-pp-"]),
.e-con:has(> [class*="elementor-widget-pp-"]) {
    --container-max-width: 100%;
    --container-default-padding-top: 0;
    --container-default-padding-right: 0;
    --container-default-padding-bottom: 0;
    --container-default-padding-left: 0;
    width: 100%;
}

.e-con-inner:has(> [class*="elementor-widget-pp-"]) {
    max-width: 100%;
    padding: 0;
}

[class*="elementor-widget-pp-"] {
    width: 100%;
}

/* Das dunkle Band bricht per 100vw aus der Spalte aus (theme.css). Elementor
   darf davor nichts abschneiden, sonst entsteht ein horizontaler Scrollbalken. */
.elementor-widget-pp-feature-band,
.elementor-widget-pp-feature-band > .elementor-widget-container {
    overflow: visible;
}

/* --- 2. Elementor-Standardwidgets --------------------------------------- */

/* Button: brand look comes from design/shared.css, where
   `.elementor .elementor-button` is grouped with `.pp-btn` (single source —
   no copy of the values here). */

/* Überschriften und Fließtext der Elementor-Widgets erben die Markenwerte */
.elementor .elementor-widget-heading .elementor-heading-title {
    font-family: var(--pp-font-heading);
    font-weight: var(--pp-heading-font-weight);
    line-height: var(--pp-heading-line-height);
    letter-spacing: var(--pp-heading-letter-spacing);
    color: var(--pp-ink);
}
.elementor .elementor-widget-text-editor {
    font-family: var(--pp-font-body);
    color: var(--pp-ink);
}

/* --- 3. Widget-eigenes Markup ------------------------------------------- */

/* Fließtext-Widget: Maßhalten bei der Zeilenlänge wie im übrigen Design */
.pp-text {
    max-width: 44rem;
}
.pp-text p {
    margin: 0 0 1rem;
}
.pp-text p:last-child {
    margin-bottom: 0;
}

/* Hinweiskasten, wenn ein Shopware-Widget im Editor noch leer ist */
.elementor-editor-active .ppsw-fallback {
    margin: 1rem 0;
}