/* Relaunch-Feinschliff - relaunch-skin.css
 *
 * Gebunden an die body-Klasse .dm-relaunch, nicht an eine Seiten-ID:
 * so greifen die Regeln in allen WPML-Sprachen und nirgendwo sonst.
 *
 * Die eigentlichen Gestaltungswerte (Buttons, Farben, Abstaende, Icon-Boxen)
 * stehen in den Elementor-Einstellungen der Seite selbst und sind dort im
 * Editor aenderbar. Hier bleibt nur, was sich in Elementor nicht sauber
 * einstellen laesst: Kartenoptik der Feature-Kacheln und der Produktliste.
 */

.dm-relaunch {
    --dm-gruen: #9dc043;
    --dm-gruen-button: #5c7d1f;
    --dm-tinte: #17201a;
    --dm-linie: #e3e7dd;
    --dm-radius: 16px;
}

/* Feature-Kacheln als Karten (Elementor-Icon-Box kann keinen Kartenrahmen
   mit gleicher Hoehe ueber die Reihe) */
/* Gleiche Kartenhoehe ueber die Reihe.
   height: 100% auf dem Wrapper allein reicht nicht: Elementor stapelt
   Spalte > widget-wrap > widget > container > wrapper, und jede Ebene muss
   die Hoehe durchreichen, sonst richtet sich die Karte nur nach ihrem
   eigenen Text. Deshalb die ganze Kette auf Flex mit stretch. */
.dm-relaunch .elementor-widget-icon-box,
.dm-relaunch .elementor-widget-icon-box > .elementor-widget-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dm-relaunch .elementor-column:has(.elementor-widget-icon-box) > .elementor-widget-wrap {
    align-content: stretch;
}

.dm-relaunch .elementor-widget-icon-box .elementor-icon-box-wrapper {
    background: #fff;
    border: 1px solid var(--dm-linie);
    border-radius: var(--dm-radius);
    padding: 26px 24px;
    height: 100%;
    flex: 1 1 auto;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dm-relaunch .elementor-widget-icon-box:hover .elementor-icon-box-wrapper {
    border-color: var(--dm-gruen);
    box-shadow: 0 12px 30px rgba(23, 32, 26, 0.1);
    transform: translateY(-3px);
}

.dm-relaunch .elementor-icon-box-icon .elementor-icon {
    background: #eaf3d8;
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
}

/* Produktkacheln am Seitenende auf denselben Kartenstil */
.dm-relaunch ul.products li.product {
    background: #fff;
    border: 1px solid var(--dm-linie);
    border-radius: var(--dm-radius);
    padding: 18px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dm-relaunch ul.products li.product:hover {
    border-color: var(--dm-gruen);
    box-shadow: 0 12px 30px rgba(23, 32, 26, 0.1);
    transform: translateY(-3px);
}

.dm-relaunch ul.products li.product .price {
    color: var(--dm-tinte);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Bilder mit gleichem Radius wie die Karten */
.dm-relaunch .elementor-widget-image img { border-radius: var(--dm-radius); }

@media (max-width: 768px) {
    .dm-relaunch { overflow-x: hidden; }
    .dm-relaunch .elementor-widget-icon-box .elementor-icon-box-wrapper { padding: 20px 18px; }
}

/* Brotkrumen auf der Startseite ausblenden: Die Seite IST der Einstieg,
   der Pfad "Zuhause / Startseite Relaunch" kostet nur Platz oberhalb des
   Videos und ist auf dem Handy besonders teuer. */
.dm-relaunch .woocommerce-breadcrumb,
.dm-relaunch .shoptimizer-breadcrumb,
.dm-relaunch nav.woocommerce-breadcrumb {
    display: none;
}

/* Textbloecke auf der hellgruenen Flaeche.
   Die sitewide Linkfarbe (dunkelgruen) kommt auf #9dc043 nur auf Kontrast
   2,4 und ist damit kaum zu sehen. Elementor hat im Text-Editor keinen
   Regler fuer Linkfarben, deshalb haengt die Regel an der CSS-Klasse
   dm-auf-gruen, die im Widget selbst gesetzt ist. */
.dm-relaunch .dm-auf-gruen a {
    color: #17201a;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    font-weight: 600;
}

.dm-relaunch .dm-auf-gruen a:hover,
.dm-relaunch .dm-auf-gruen a:focus-visible {
    color: #3d2f00;
    text-decoration-color: currentColor;
}