/* =========================================================
   WÄSCHEHAUS NO. 45
   COMPLETE CUSTOM CSS
   VANTAGE + SITEORIGIN
   CUSTOM HEADER + FINETUNING
   HORIZONTALE NAVIGATION
   OHNE STICKY
   OHNE GOOGLE FONTS
========================================================= */


/* =========================================================
   ZENTRALE DESIGN-VARIABLEN

   Diese Werte steuern die wichtigsten Farben und Maße.
   Änderungen wirken auf alle Bereiche, die die Variable nutzen.
========================================================= */

:root {
    --wh45-color-petrol: #285c63;
    --wh45-color-rose: #d79aa0;
    --wh45-color-rose-button: #d89aa0;
    --wh45-color-rose-hover: #c4858c;
    --wh45-color-rose-dark: #bd7e87;
    --wh45-color-rose-light: #f5e9ea;
    --wh45-color-background: #fcf8f7;
    --wh45-color-heading: #3d2d2d;
    --wh45-color-text: #4b3d3d;
    --wh45-color-text-soft: #5f5555;
    --wh45-color-white: #ffffff;
    --wh45-color-footer: #eeeeee;
    --wh45-color-icon: #ed7703;
    --wh45-content-width: 1200px;
    --wh45-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --wh45-font-serif: Georgia, "Times New Roman", serif;
}


/* =========================================================
   GLOBAL
========================================================= */

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    font-family: var(--wh45-font-sans);

    font-size: 17px;
    line-height: 1.8;
    color: var(--wh45-color-text);
    background: var(--wh45-color-background);
}

p {
    margin-bottom: 20px;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--wh45-font-serif);

    color: var(--wh45-color-heading);
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0;
}

h1 {
    font-size: 68px;
    margin-bottom: 25px;
}

h2 {
    font-size: 48px;
    margin-bottom: 25px;
}

h3 {
    font-size: 30px;
    margin-bottom: 20px;
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}


/* =========================================================
   VANTAGE STANDARD HEADER AUSBLENDEN
========================================================= */

#masthead,
.main-navigation,
#topbar,
#header-sidebar,
.site-header,
header.site-header {
    display: none !important;
}

/* Seitentitel entfernen */

article.page .entry-header,
.entry-header,
.page-header {
    display: none !important;
}

/* Abstände entfernen */

#main,
.site-main,
.site-content,
#primary,
#content,
#page-wrapper,
#page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.layout-full #main {
    padding-top: 0 !important;
}

body.layout-full {
    padding-top: 0 !important;
}


/* =========================================================
   CONTAINER
========================================================= */

.site-content {
    max-width: var(--wh45-content-width);
    margin: 0 auto;
}


/* =========================================================
   CUSTOM HEADER
========================================================= */

/*
   Erste SiteOrigin Row:
   Row Class = custom-header
*/

.custom-header {
    width: 100%;
    background: rgba(255,255,255,0.96);
    padding: 12px 30px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}


/* =========================================================
   HEADER FEINTUNING
========================================================= */

/* Logo größer */

.custom-header img {
    max-height: 90px;
    width: auto;
    display: block;
}

.custom-header .so-widget-image img {
    max-width: 220px !important;
    max-height: none !important;
}

/* Header vertikal mittig */

.custom-header .panel-grid-cell {
    display: flex;
    align-items: center;
}

/* Logo links */

.custom-header .panel-grid-cell:first-child {
    justify-content: flex-start;
}

/* Navigation mittig */

.custom-header .panel-grid-cell:nth-child(2) {
    justify-content: center;
}

/* Button rechts */

.custom-header .panel-grid-cell:last-child {
    justify-content: flex-end;
}


/* =========================================================
   HORIZONTALE NAVIGATION
========================================================= */

.custom-header .widget_nav_menu ul,
.custom-header .menu {
    list-style: none !important;

    margin: 0;
    padding: 0;

    display: flex !important;
    flex-direction: row !important;

    justify-content: center;
    align-items: center;

    gap: 28px;
}

.custom-header .widget_nav_menu li,
.custom-header .menu li {
    list-style: none !important;
    display: inline-block !important;

    margin: 0;
    padding: 0;
}

.custom-header .widget_nav_menu li::before,
.custom-header .menu li::before {
    display: none !important;
    content: none !important;
}

.custom-header .widget_nav_menu a,
.custom-header .menu a {
    color: var(--wh45-color-heading);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
		font-size: 11px !important;
		line-height: 1.25 !important;
		letter-spacing: 1px !important;
		white-space: nowrap !important;
}



.custom-header .widget_nav_menu a:hover,
.custom-header .menu a:hover {
    color: var(--wh45-color-rose);
}


/* =========================================================
   HEADER BUTTON
========================================================= */

/* Normalzustand */
.custom-header a.header-btn,
.custom-header a.header-btn:link,
.custom-header a.header-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto !important;
    padding: 12px 22px;

    background: var(--wh45-color-rose);
    color: var(--wh45-color-petrol) !important;
    -webkit-text-fill-color: var(--wh45-color-petrol) !important;

    border-radius: 3px;

    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none !important;
}

/* Mouse-over, Tastaturfokus und Klick */
.custom-header a.header-btn:hover,
.custom-header a.header-btn:focus,
.custom-header a.header-btn:active {
    background: var(--wh45-color-rose-hover);
    color: var(--wh45-color-white) !important;
    -webkit-text-fill-color: var(--wh45-color-white) !important;
    text-decoration: none !important;
}


/* =========================================================
   CUSTOM HEADER – TABLET UND SMARTPHONE

   Gültig bis 1180px:
   - Logo zentriert
   - Navigation direkt darunter
   - gleiche Navigationsschrift wie auf Desktop
   - Servicebereich ausgeblendet
   - kein Burger-Menü
========================================================= */

.mobile-menu-toggle {
    display: none !important;
}


/* =========================================================
   TABLET UND SMARTPHONE BIS 1180PX
========================================================= */

@media (max-width: 1180px) {

    /*
     * Funktioniert unabhängig davon, ob die Klasse
     * custom-header auf der SiteOrigin-Row oder auf dem
     * Row-Style-Wrapper liegt.
     */
    .custom-header,
    .panel-grid.custom-header,
    .panel-row-style.custom-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100vw !important;
        max-width: none !important;

        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;

        padding: 14px 20px 12px !important;

        background: var(--wh45-color-white) !important;

        text-align: center !important;
        box-sizing: border-box;
    }


    /*
     * Falls SiteOrigin innerhalb der Row einen zusätzlichen
     * Grid- oder Row-Style-Wrapper erzeugt.
     */
    .custom-header > .panel-grid,
    .custom-header > .panel-row-style {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }


    /* Alle Header-Spalten vollständig untereinander */
    .custom-header > .panel-grid-cell,
    .custom-header .panel-grid-cell {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;

        float: none !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: center !important;
        box-sizing: border-box;
    }


    /* =====================================================
       LOGO
    ===================================================== */

    .custom-header .panel-grid-cell:first-child {
        margin-bottom: 7px !important;
    }

    .custom-header img,
    .custom-header .so-widget-image img {
        display: block !important;

        width: auto !important;
        height: auto !important;

        max-width: 220px !important;
        max-height: 70px !important;

        margin: 0 auto !important;
    }


    /* =====================================================
       NAVIGATION
    ===================================================== */

    .custom-header .widget_nav_menu {
        width: 100% !important;

        margin: 0 auto !important;
        padding: 0 !important;

        text-align: center !important;
    }

    .custom-header .widget_nav_menu ul,
    .custom-header .menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 3px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    .custom-header .widget_nav_menu li,
    .custom-header .menu li {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        line-height: 1.1 !important;
        list-style: none !important;
    }

    .custom-header .widget_nav_menu a,
    .custom-header .menu a {
        display: block !important;

        padding: 2px 0 !important;

        color: var(--wh45-color-heading) !important;

        font-size: 10px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        letter-spacing: 1px !important;

        text-align: center !important;
        text-decoration: none !important;
        text-transform: uppercase;
        white-space: nowrap !important;
    }

    .custom-header .widget_nav_menu a:hover,
    .custom-header .menu a:hover {
        color: var(--wh45-color-rose) !important;
    }



    /* =====================================================
       DRITTE SPALTE AUSBLENDEN
    ===================================================== */

    .custom-header .panel-grid-cell:nth-child(3),
    .custom-header .header-service-info,
    .custom-header .header-btn,
    .header-service-info,
    .header-btn {
        display: none !important;
    }
}


/* =========================================================
   KLEINE SMARTPHONES BIS 480PX
========================================================= */

@media (max-width: 480px) {

    .custom-header,
    .panel-grid.custom-header,
    .panel-row-style.custom-header {
        padding: 12px 14px 10px !important;
    }

    .custom-header .panel-grid-cell:first-child {
        margin-bottom: 6px !important;
    }

    .custom-header img,
    .custom-header .so-widget-image img {
        max-width: 180px !important;
        max-height: 58px !important;
    }

    .custom-header .widget_nav_menu ul,
    .custom-header .menu {
        gap: 2px !important;
    }
}


/* =========================================================
   CUSTOM HEADER – KOMPAKTER SERVICEBEREICH

   SiteOrigin:
   Spalte 3
   Editor-Widget-Klasse: header-service-info

   Sichtbar:
   Desktop ab 1181px

   Ausgeblendet:
   Tablet und Smartphone bis 1180px
========================================================= */


/* =========================================================
   WIDGET UND SITEORIGIN-WRAPPER BEREINIGEN
========================================================= */

.header-service-info,
.header-service-info > *,
.header-service-info .panel-widget-style,
.header-service-info .so-widget-sow-editor,
.header-service-info .siteorigin-widget-tinymce,
.header-service-info .textwidget {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

    box-sizing: border-box;
}


/* Keine zusätzlichen SiteOrigin-Abstände */

.custom-header .panel-grid-cell:last-child .so-panel,
.custom-header .header-service-info {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* =========================================================
   SERVICE-INHALT
========================================================= */

.header-service-content {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    width: max-content;
    max-width: 100%;

    min-height: 0;
    height: auto;

    margin: 0 0 0 auto;
    padding: 0 0 0 17px;

    text-align: left;

    box-sizing: border-box;
}


/* Feine senkrechte Trennlinie */

.header-service-content::before {
    content: "";

    position: absolute;

    top: 1px;
    bottom: 1px;
    left: 0;

    width: 1px;

    background: rgba(40, 92, 99, 0.18);
}


/* =========================================================
   BESCHRIFTUNG „ÖFFNUNGSZEITEN“
========================================================= */

.header-service-label {
    margin: 0 0 8px !important;
    padding: 0 !important;

    color: var(--wh45-color-rose-dark) !important;
    -webkit-text-fill-color: var(--wh45-color-rose-dark) !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 10px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 1.7px;

    text-transform: uppercase;
    white-space: nowrap;
}


/* =========================================================
   ÖFFNUNGSZEITEN
========================================================= */

.header-service-hours {
    display: flex;
    flex-direction: column;

    gap: 2px;

    margin: 0 0 7px;
    padding: 0;

    color: var(--wh45-color-petrol);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 10px;
    line-height: 0.5;
    font-weight: 500;
    letter-spacing: 0.1px;
}


.header-service-hours span {
    display: block;

    margin: 0;
    padding: 0;

    white-space: nowrap;
}


/* =========================================================
   TERMINLINK
========================================================= */

.header-service-link,
.header-service-link:link,
.header-service-link:visited {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    gap: 2px;

    margin: 0;
    padding: 0 0 1px;

    color: var(--wh45-color-petrol) !important;
    -webkit-text-fill-color: var(--wh45-color-petrol) !important;

    border-bottom: 1px solid rgba(40, 92, 99, 0.28);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 8.5px;
    line-height: 0.8;
    font-weight: 700;
    letter-spacing: 0.65px;

    text-decoration: none !important;
    text-transform: uppercase;

    transition:
        color 0.22s ease,
        border-color 0.22s ease;
}


/* =========================================================
   TELEFONHÖRER – MONOCHROME SILHOUETTE
========================================================= */

.header-service-link::after {
    content: "";

    display: inline-block;
    flex: 0 0 auto;

    width: 12px;
    height: 12px;

    margin: 0;
    padding: 0;

    background-color: currentColor;

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    transform: translateY(0);

    transition: transform 0.22s ease;
}


/* =========================================================
   HOVER UND FOKUS
========================================================= */

.header-service-link:hover,
.header-service-link:focus,
.header-service-link:active {
    color: var(--wh45-color-rose-dark) !important;
    -webkit-text-fill-color: var(--wh45-color-rose-dark) !important;

    border-bottom-color: var(--wh45-color-rose-dark);

    text-decoration: none !important;
}


@media (hover: hover) {

    .header-service-link:hover::after {
        transform: translateX(2px);
    }
}


.header-service-link:focus-visible {
    outline: 2px solid rgba(40, 92, 99, 0.4);
    outline-offset: 3px;
}


/* =========================================================
   DESKTOP-AUSRICHTUNG DER DRITTEN SPALTE
========================================================= */

@media (min-width: 1181px) {

    .custom-header > .panel-grid-cell:last-child,
    .custom-header .panel-grid-cell:last-child {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        min-height: 0 !important;
    }
}


/* =========================================================
   TABLET UND SMARTPHONE AUSBLENDEN
========================================================= */

@media (max-width: 1180px) {

    .header-service-info {
        display: none !important;
    }
}


/* =========================================================
   HERO SECTION
========================================================= */

.hero-row {
    background: #f8f3f1;
    padding-top: 120px;
    padding-bottom: 120px;
}

.hero-row h1 {
    max-width: 550px;
}

.hero-row p {
    font-size: 20px;
    max-width: 500px;
    margin-bottom: 40px;
}

/* =========================================================
   HERO TEXT (Row 2 - Spalte 1)
========================================================= */

.hero-content{
    max-width:560px;
    padding:40px 20px;
}

/* kleine Überschrift */

.hero-content .subtitle{
    display:block;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:3px;

    color:#c08b92;

    font-weight:600;

    margin-bottom:18px;
}

/* Hauptüberschrift */

.hero-content h1{

    font-family: var(--wh45-font-serif);

    font-size:68px;

    line-height:1.05;

    font-weight:600;

    color:var(--wh45-color-heading);

    margin:0 0 28px;
}

/* Hervorgehobene Zeile */

.hero-content h1 span{

    display:block;

    color:var(--wh45-color-rose);
}

/* Beschreibung */

.hero-content p{

    font-size:21px;

    line-height:1.8;

    color:#5c5050;

    margin-bottom:15px;

    max-width:520px;
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    width: 100%;
    margin-top: 15px;
}

/* Gemeinsame Grundform beider Hero-Buttons */
.hero-row .hero-buttons a.primary-btn,
.hero-row .hero-buttons a.secondary-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 1;
    min-height: 54px;

    padding: 0 28px !important;

    border-radius: 4px;
    box-sizing: border-box;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

/* Hauptbutton – Normalzustand */
.hero-row .hero-buttons a.primary-btn,
.hero-row .hero-buttons a.primary-btn:link,
.hero-row .hero-buttons a.primary-btn:visited {
    background: var(--wh45-color-rose-button) !important;
    color: var(--wh45-color-petrol) !important;
    -webkit-text-fill-color: var(--wh45-color-petrol) !important;

    border: 2px solid var(--wh45-color-rose-button) !important;
}

/* Hauptbutton – Hover */
.hero-row .hero-buttons a.primary-btn:hover,
.hero-row .hero-buttons a.primary-btn:focus,
.hero-row .hero-buttons a.primary-btn:active {
    background: var(--wh45-color-rose-hover) !important;
    color: var(--wh45-color-white) !important;
    -webkit-text-fill-color: var(--wh45-color-white) !important;

    border-color: var(--wh45-color-rose-hover) !important;
}

/* Zweitbutton – Normalzustand */
.hero-row .hero-buttons a.secondary-btn,
.hero-row .hero-buttons a.secondary-btn:link,
.hero-row .hero-buttons a.secondary-btn:visited {
    background: var(--wh45-color-white) !important;
    color: #4b3b3b !important;
    -webkit-text-fill-color: #4b3b3b !important;

    border: 2px solid var(--wh45-color-rose-button) !important;
}

/* Zweitbutton – Hover */
.hero-row .hero-buttons a.secondary-btn:hover,
.hero-row .hero-buttons a.secondary-btn:focus,
.hero-row .hero-buttons a.secondary-btn:active {
    background: var(--wh45-color-rose-button) !important;
    color: var(--wh45-color-white) !important;
    -webkit-text-fill-color: var(--wh45-color-white) !important;

    border-color: var(--wh45-color-rose-button) !important;
}

/* =========================================================
   HERO IMAGE
========================================================= */

.hero-image{

    min-height:700px;

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

    border-radius:10px;
}
/* =========================================================
   HERO – TABLET UND SMARTPHONE
   Bild ausblenden, Textspalte auf volle Breite setzen
========================================================= */

@media (max-width: 768px) {

    .hero-row {
        padding: 28px 0 !important;
        text-align: center;
    }

    .hero-row > .panel-grid,
    .hero-row .panel-grid {
        display: block !important;
        width: 100% !important;
    }

    .hero-row .panel-grid-cell:first-child {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        box-sizing: border-box;
    }

    .hero-row .panel-grid-cell:nth-child(2),
    .hero-image {
        display: none !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: 680px !important;
        margin: 0 auto !important;
        padding: 22px 20px !important;
        text-align: center !important;
        box-sizing: border-box;
    }

    .hero-content .subtitle {
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }

    .hero-content h1 {
        width: 100%;
        max-width: 620px;
        margin-right: auto !important;
        margin-bottom: 26px;
        margin-left: auto !important;
        font-size: clamp(42px, 10vw, 64px);
        line-height: 1.08;
        text-align: center !important;
    }

    .hero-content p {
        width: 100%;
        max-width: 620px;
        margin-right: auto !important;
        margin-bottom: 0;
        margin-left: auto !important;
        font-size: 18px;
        line-height: 1.7;
        text-align: center !important;
    }

    .hero-row .hero-buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 560px !important;
        margin: 18px auto 0 !important;
        gap: 8px !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .hero-row .hero-buttons > p {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    .hero-row .hero-buttons br {
        display: none !important;
    }

    .hero-row .hero-buttons a.primary-btn,
    .hero-row .hero-buttons a.secondary-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
}


/* =========================================================
   HERO – KLEINE SMARTPHONES
========================================================= */

@media (max-width: 480px) {

    .hero-row {
        padding: 22px 0 !important;
    }

    .hero-content {
        padding: 18px 16px !important;
    }
}


/* ==========================================================
   MARKENBEREICH / LOGO-GRID
========================================================== */

.brand-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    width: 100%;
}

.brand-item {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 130px;
    padding: 6px 8px;

    background: var(--wh45-color-white);
    border: 1px solid #e9e3df;
    border-radius: 12px;

    overflow: hidden;
    box-sizing: border-box;

    transition: all 0.35s ease;
}

.brand-item img {
    display: block;

    width: auto;
    height: auto;

    max-width: 96%;
    max-height: 90px;

    object-fit: contain;

    transition: transform 0.35s ease;
}

/* Hover nur auf Geräten mit Maus */

@media (hover: hover) {

    .brand-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0,0,0,0.08);
        border-color: #d9d0cb;
    }

    .brand-item:hover img {
        transform: scale(1.06);
    }
}

/* Tablet: weiterhin 3 Spalten */

@media (max-width: 1024px) {

    .brand-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .brand-item {
        height: 78px;
        padding: 10px 14px;
    }

    .brand-item img {
        max-width: 90%;
        max-height: 48px;
    }
}

/* Smartphone: 1 Spalte */

@media (max-width: 600px) {

    .brand-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .brand-item {
        height: 72px;
        padding: 12px 18px;
    }

    .brand-item img {
        max-width: 85%;
        max-height: 38px;
    }
}
/* ==========================================================
   MARKENLOGOS – DESKTOP
========================================================== */

@media (min-width: 1025px) {

    .brand-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    .brand-item {
        height: 95px;
        padding: 6px 8px;
    }

    .brand-item img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain;
    }
}



/* =========================================================
   BUTTONS
========================================================= */

.primary-btn,
.hero-btn,
.service-btn,
.white-btn {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}

.primary-btn,
.hero-btn,
.service-btn {
    background: var(--wh45-color-rose);
    color: var(--wh45-color-white);
}

.primary-btn:hover,
.hero-btn:hover,
.service-btn:hover {
    background: var(--wh45-color-rose-hover);
    color: var(--wh45-color-white);
}

.secondary-btn {
    display: inline-block;
    padding: 16px 32px;
    border: 1px solid var(--wh45-color-rose);
    color: var(--wh45-color-rose);
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.secondary-btn:hover {
    background: var(--wh45-color-rose);
    color: var(--wh45-color-white);
}

.white-btn {
    background: var(--wh45-color-white);
    color: var(--wh45-color-rose);
}

.white-btn:hover {
    background: #f4f4f4;
}


/* =========================================================
   STARTSEITE – USP-BEREICH

   Row Class:
   usp-row

   Bild-Widget-Klasse:
   usp-icon

   Desktop und Tablet:
   - drei Spalten

   Smartphone:
   - kompakt untereinander
========================================================= */


/* =========================================================
   USP-ROW – GRUNDLAYOUT
========================================================= */

.usp-row,
.panel-grid.usp-row,
.panel-row-style.usp-row {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: start !important;

    gap: 34px;

    width: 100% !important;

    margin: 0 !important;
    padding: 58px 30px !important;

    background: var(--wh45-color-white) !important;

    box-sizing: border-box;
}


/* =========================================================
   SITEORIGIN-SPALTEN ZURÜCKSETZEN
========================================================= */

.usp-row > .panel-grid-cell,
.usp-row .panel-grid-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    text-align: center !important;

    box-sizing: border-box;
}


/* =========================================================
   SITEORIGIN-WIDGETABSTÄNDE ENTFERNEN
========================================================= */

.usp-row .so-panel,
.usp-row .widget,
.usp-row .panel-widget-style,
.usp-row .so-widget-sow-editor,
.usp-row .siteorigin-widget-tinymce,
.usp-row .textwidget {
    width: 100% !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    box-sizing: border-box;
}


/* =========================================================
   ICON-WIDGET
========================================================= */

.usp-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    margin: 0 auto 16px !important;
    padding: 0 !important;
}


/* Runder orangefarbener Hintergrund */

.usp-icon .sow-image-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 82px !important;
    height: 82px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background: var(--wh45-color-icon);

    border-radius: 50%;

    overflow: hidden;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.08);

    box-sizing: border-box;
}


/* Falls das Bild verlinkt ist */

.usp-icon .sow-image-container > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Transparentes Piktogramm */

.usp-icon .sow-image-container img {
    display: block !important;

    width: 52px !important;
    height: 52px !important;

    max-width: 52px !important;
    max-height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain;
    object-position: center;

    background: transparent !important;

    border-radius: 0 !important;

    box-sizing: border-box;
}


/* =========================================================
   USP-ÜBERSCHRIFTEN
========================================================= */

.usp-row h2,
.usp-row h3,
.usp-row h4 {
    width: 100%;

    margin: 0 0 11px !important;
    padding: 0 !important;

    color: var(--wh45-color-petrol);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 19px;
    line-height: 1.25;
    font-weight: 500;

    text-align: center;
    text-wrap: balance;
}


/* =========================================================
   USP-BESCHREIBUNGEN
========================================================= */

.usp-row p {
    width: 100%;
    max-width: 34ch;

    margin: 0 auto !important;
    padding: 0 !important;

    color: #666666;

    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;

    text-align: center;

    hyphens: none;
    -webkit-hyphens: none;

    word-break: normal;
    overflow-wrap: normal;
}


/* =========================================================
   HOVER NUR AUF GERÄTEN MIT MAUS
========================================================= */

@media (hover: hover) {

    .usp-icon .sow-image-container {
        transition:
            transform 0.25s ease,
            box-shadow 0.25s ease;
    }

    .usp-icon .sow-image-container:hover {
        transform: translateY(-3px);

        box-shadow:
            0 8px 20px
            rgba(0, 0, 0, 0.12);
    }
}


/* =========================================================
   TABLET
   601 BIS 1024 PIXEL

   Drei kompakte Spalten bleiben erhalten
========================================================= */

@media (min-width: 601px) and (max-width: 1024px) {

    .usp-row,
    .panel-grid.usp-row,
    .panel-row-style.usp-row {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 22px;

        padding: 42px 24px !important;
    }


    .usp-row > .panel-grid-cell,
    .usp-row .panel-grid-cell {
        margin: 0 !important;
        padding: 0 4px !important;
    }


    .usp-icon {
        margin-bottom: 14px !important;
    }


    .usp-icon .sow-image-container {
        width: 72px !important;
        height: 72px !important;
    }


    .usp-icon .sow-image-container img {
        width: 45px !important;
        height: 45px !important;

        max-width: 45px !important;
        max-height: 45px !important;
    }


    .usp-row h2,
    .usp-row h3,
    .usp-row h4 {
        margin-bottom: 9px !important;

        font-size: 17px;
        line-height: 1.28;
    }


    .usp-row p {
        max-width: 27ch;

        font-size: 14px;
        line-height: 1.5;
    }
}


/* =========================================================
   SMARTPHONE
   BIS 600 PIXEL

   Kompakt untereinander
========================================================= */

@media (max-width: 600px) {

    .usp-row,
    .panel-grid.usp-row,
    .panel-row-style.usp-row {
        display: block !important;

        padding: 34px 18px 38px !important;
    }


    .usp-row > .panel-grid-cell,
    .usp-row .panel-grid-cell {
        display: flex !important;

        width: 100% !important;

        margin: 0 0 42px !important;
        padding: 0 !important;
    }


    /*
     * Beim letzten Vorteil kein zusätzlicher Leerraum.
     */
    .usp-row > .panel-grid-cell:last-child,
    .usp-row .panel-grid-cell:last-child {
        margin-bottom: 0 !important;
    }


    .usp-icon {
        margin-bottom: 14px !important;
    }


    .usp-icon .sow-image-container {
        width: 70px !important;
        height: 70px !important;
    }


    .usp-icon .sow-image-container img {
        width: 43px !important;
        height: 43px !important;

        max-width: 43px !important;
        max-height: 43px !important;
    }


    .usp-row h2,
    .usp-row h3,
    .usp-row h4 {
        max-width: 290px;

        margin: 0 auto 10px !important;

        font-size: 18px;
        line-height: 1.28;
    }


    .usp-row p {
        max-width: 30ch;

        font-size: 14.5px;
        line-height: 1.52;
    }
}


/* =========================================================
   KLEINE SMARTPHONES
   BIS 480 PIXEL
========================================================= */

@media (max-width: 480px) {

    .usp-row,
    .panel-grid.usp-row,
    .panel-row-style.usp-row {
        padding:
            30px
            15px
            34px !important;
    }


    .usp-row > .panel-grid-cell,
    .usp-row .panel-grid-cell {
        margin-bottom: 38px !important;
    }
}


/* =========================================================
   USP-BEREICH – HINTERGRUND BÜNDIG ZUR HERO-ROW

   Verbreitert nur den weißen Hintergrund.
   Inhalt, Spalten und Abstände bleiben unverändert.
========================================================= */

.usp-row,
.panel-grid.usp-row,
.panel-row-style.usp-row {
    --usp-background-extension: 20px;

    position: relative !important;
    z-index: 0;

    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    overflow: visible !important;
    isolation: isolate;

    box-sizing: border-box;
}


.usp-row::before,
.panel-grid.usp-row::before,
.panel-row-style.usp-row::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: 0;
    bottom: 0;

    left: calc(-1 * var(--usp-background-extension));
    right: calc(-1 * var(--usp-background-extension));

    background: var(--wh45-color-white);

    pointer-events: none;
}


.usp-row > *,
.panel-grid.usp-row > *,
.panel-row-style.usp-row > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   INFO-ROW
   Desktop: drei gleich breite Spalten
   Spalte 1 und 3 wachsen automatisch gleich hoch
========================================================= */

.info-row {
    /*
     * Abstand der Überschrift vom oberen Rand der rosa Karte.
     * Kleinerer Wert = Überschrift weiter oben.
     */
    --quote-padding-top: 18px;
}


/* =========================================================
   SPALTE 1 – WEISSE INFO-KARTE
========================================================= */

.info-row .info-box {
    width: 100%;
    height: 100%;

    padding: 40px;

    background: var(--wh45-color-white);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);

    box-sizing: border-box;
    overflow: visible;
}


/* =========================================================
   SPALTE 3 – ROSA ZITATKARTE
========================================================= */

.info-row .quote-box {
    width: 100%;
    height: 100%;

    /* oben | rechts | unten | links */
    padding: var(--quote-padding-top) 40px 30px;

    background: var(--wh45-color-rose-light);
    border-radius: 6px;

    box-sizing: border-box;
    overflow: visible;
}


/* Überschrift in Spalte 3 */
.info-row .quote-box h2,
.info-row .quote-box h3 {
    margin: 0 0 28px !important;

    font-size: 36px;
    line-height: 1.08;
}


/* Text in Spalte 3 */
.info-row .quote-box p {
    margin-top: 0;
    margin-bottom: 16px;

    line-height: 1.65;
}

.info-row .quote-box p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   INFO-ROW – RESPONSIVE AUSRICHTUNG
   Ursprüngliche Spaltenbreiten bleiben erhalten
========================================================= */


/* =========================================================
   DESKTOP UND TABLET QUER
   Spalte 1 und 3 automatisch gleich hoch
========================================================= */

@media (min-width: 781px) {

    /*
     * SiteOrigin bestimmt weiterhin die ursprünglichen
     * Spaltenbreiten. Es werden keine 33,33 % erzwungen.
     */
    .info-row,
    .panel-grid.info-row,
    .panel-row-style.info-row {
        display: flex !important;
        align-items: stretch !important;
    }

    /*
     * Vorhandene SiteOrigin-Breiten nicht verändern.
     * Nur die Höhe der Spalten wird gestreckt.
     */
    .info-row > .panel-grid-cell,
    .info-row .panel-grid-cell {
        align-self: stretch !important;
        box-sizing: border-box;
    }


    /* =====================================================
       SPALTE 1 UND 3 – GLEICHE KARTENHÖHE
    ===================================================== */

    .info-row .panel-grid-cell:nth-child(1),
    .info-row .panel-grid-cell:nth-child(3) {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Äußerer SiteOrigin-Widget-Wrapper */
    .info-row .panel-grid-cell:nth-child(1) > .so-panel,
    .info-row .panel-grid-cell:nth-child(3) > .so-panel,
    .info-row .panel-grid-cell:nth-child(1) > .widget,
    .info-row .panel-grid-cell:nth-child(3) > .widget {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;

        width: 100% !important;
        height: 100% !important;

        box-sizing: border-box;
    }

    /* SiteOrigin-Style-Wrapper */
    .info-row .panel-grid-cell:nth-child(1) .panel-widget-style,
    .info-row .panel-grid-cell:nth-child(3) .panel-widget-style {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;

        width: 100% !important;
        height: 100% !important;

        box-sizing: border-box;
    }

    /* Editor-Wrapper */
    .info-row .panel-grid-cell:nth-child(1) .so-widget-sow-editor,
    .info-row .panel-grid-cell:nth-child(3) .so-widget-sow-editor,
    .info-row .panel-grid-cell:nth-child(1) .siteorigin-widget-tinymce,
    .info-row .panel-grid-cell:nth-child(3) .siteorigin-widget-tinymce,
    .info-row .panel-grid-cell:nth-child(1) .textwidget,
    .info-row .panel-grid-cell:nth-child(3) .textwidget {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;

        width: 100% !important;
        height: 100% !important;

        box-sizing: border-box;
    }

    /* Weiße und rosa Karte füllen dieselbe Zeilenhöhe */
    .info-row .panel-grid-cell:nth-child(1) .info-box,
    .info-row .panel-grid-cell:nth-child(3) .quote-box {
        flex: 1 1 auto !important;
        align-self: stretch !important;

        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;
        max-height: none !important;

        box-sizing: border-box;
        overflow: visible !important;
    }


    /* =====================================================
       SPALTE 2 – MARKEN HORIZONTAL ZENTRIEREN
    ===================================================== */

    .info-row .panel-grid-cell:nth-child(2) {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .info-row .panel-grid-cell:nth-child(2) > .so-panel,
    .info-row .panel-grid-cell:nth-child(2) > .widget,
    .info-row .panel-grid-cell:nth-child(2) .panel-widget-style,
    .info-row .panel-grid-cell:nth-child(2) .brand-grid {
        width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        box-sizing: border-box;
    }
}


/* =========================================================
   INFO-ROW – RESPONSIVE KORREKTUR

   781 bis 1150px:
   - ursprüngliche SiteOrigin-Spaltenbreiten bleiben erhalten
   - weiße und rosa Karte werden gleich hoch
   - dritte Spalte wird nicht verschoben

   601 bis 780px:
   - Markenüberschrift steht bündig über dem Logo-Raster
========================================================= */


/* =========================================================
   SCHMALER DESKTOP / TABLET QUER
   781 BIS 1150 PIXEL
========================================================= */

@media (min-width: 781px) and (max-width: 1150px) {

    /*
     * Die bestehenden SiteOrigin-Spaltenbreiten bleiben
     * unverändert. Es wird nur die Höhe gestreckt.
     */
    .info-row,
    .panel-grid.info-row,
    .panel-row-style.info-row {
        display: flex !important;
        align-items: stretch !important;
    }


    /* Alle drei Spalten auf dieselbe Row-Höhe strecken */
    .info-row > .panel-grid-cell,
    .info-row .panel-grid-cell {
        align-self: stretch !important;

        height: auto !important;
        min-height: 0 !important;

        margin-bottom: 0 !important;

        box-sizing: border-box;
    }


    /* =====================================================
       SPALTE 1 UND 3
       Weiße und rosa Karte gleich hoch
    ===================================================== */

    .info-row .panel-grid-cell:nth-child(1),
    .info-row .panel-grid-cell:nth-child(3) {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }


    /* Äußerer SiteOrigin-Widget-Wrapper */
    .info-row .panel-grid-cell:nth-child(1) > .so-panel,
    .info-row .panel-grid-cell:nth-child(3) > .so-panel,
    .info-row .panel-grid-cell:nth-child(1) > .widget,
    .info-row .panel-grid-cell:nth-child(3) > .widget {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;

        width: 100% !important;
        height: 100% !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        box-sizing: border-box;
    }


    /* SiteOrigin-Style-Wrapper */
    .info-row .panel-grid-cell:nth-child(1) .panel-widget-style,
    .info-row .panel-grid-cell:nth-child(3) .panel-widget-style {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;

        width: 100% !important;
        height: 100% !important;

        box-sizing: border-box;
    }


    /* Editor- und Text-Wrapper */
    .info-row .panel-grid-cell:nth-child(1) .so-widget-sow-editor,
    .info-row .panel-grid-cell:nth-child(3) .so-widget-sow-editor,
    .info-row .panel-grid-cell:nth-child(1) .siteorigin-widget-tinymce,
    .info-row .panel-grid-cell:nth-child(3) .siteorigin-widget-tinymce,
    .info-row .panel-grid-cell:nth-child(1) .textwidget,
    .info-row .panel-grid-cell:nth-child(3) .textwidget {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;

        width: 100% !important;
        height: 100% !important;

        box-sizing: border-box;
    }


    /* Eigentliche Karten */
    .info-row .panel-grid-cell:nth-child(1) .info-box,
    .info-row .panel-grid-cell:nth-child(3) .quote-box {
        flex: 1 1 auto !important;
        align-self: stretch !important;

        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;
        max-height: none !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        box-sizing: border-box;
    }


    /* Rosa Karte bei schmaleren Desktopbreiten kompakter */
    .info-row .quote-box {
        padding:
            var(--quote-padding-top)
            32px
            28px !important;
    }


    .info-row .quote-box h2,
    .info-row .quote-box h3 {
        font-size: 33px;
    }


    /* =====================================================
       MARKENSPALTE
    ===================================================== */

    .info-row .panel-grid-cell:nth-child(2) {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }


    .info-row .panel-grid-cell:nth-child(2) > .so-panel,
    .info-row .panel-grid-cell:nth-child(2) > .widget,
    .info-row .panel-grid-cell:nth-child(2) .panel-widget-style,
    .info-row .panel-grid-cell:nth-child(2) .brand-grid {
        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box;
    }


    .info-row .brand-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 16px;
    }


    .info-row .brand-item {
        height: 95px;
        padding: 8px 12px;
    }


    .info-row .brand-item img {
        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        object-fit: contain;
    }
}


/* =========================================================
   TABLET HOCHKANT
   601 BIS 780 PIXEL

   Markenüberschrift und Logo-Raster erhalten dieselbe
   Breite und dieselbe linke Kante.
========================================================= */

@media (min-width: 601px) and (max-width: 780px) {

    /* Weiße und rosa Karte sauber zentrieren */
    .info-row .info-box,
    .info-row .quote-box {
        width: 100% !important;
        max-width: 620px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Markenüberschrift bündig zum Logo-Raster */
    .info-row .panel-grid-cell:nth-child(2) h2,
    .info-row .panel-grid-cell:nth-child(2) h3 {
        display: block;

        width: 100% !important;
        max-width: 620px !important;

        margin:
            0
            auto
            18px !important;

        padding: 0 !important;

        text-align: left !important;

        box-sizing: border-box;
    }


    /* Logo-Raster mit derselben Breite */
    .info-row .panel-grid-cell:nth-child(2) .brand-grid {
        width: 100% !important;
        max-width: 620px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .info-row .brand-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 16px;
    }


    .info-row .brand-item {
        height: 95px;
        padding: 8px 12px;
    }


    .info-row .brand-item img {
        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        object-fit: contain;
    }
}


/* =========================================================
   SMARTPHONE / GESTAPELTE DARSTELLUNG
========================================================= */

@media (max-width: 780px) {

    .info-row,
    .panel-grid.info-row,
    .panel-row-style.info-row {
        display: block !important;
    }

    .info-row .panel-grid-cell {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 30px !important;

        float: none !important;
        box-sizing: border-box;
    }

    .info-row .panel-grid-cell:last-child {
        margin-bottom: 0 !important;
    }

    .info-row .info-box,
    .info-row .quote-box {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }

    /* Ursprüngliche mobile Gestaltung der weißen Karte */
    .info-row .info-box {
        padding: 30px 26px !important;
    }

    .info-row .quote-box {
        padding: 22px 26px 26px !important;
    }

    .info-row .quote-box h2,
    .info-row .quote-box h3 {
        margin-bottom: 22px !important;
        font-size: 31px;
    }

    .info-row .panel-grid-cell:nth-child(2) .brand-grid {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* =========================================================
   GRÖSSENTABELLE – URSPRÜNGLICHES DESIGN SICHERN
========================================================= */

.info-row .size-table {
    display: table !important;

    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
}

.info-row .size-table tbody {
    display: table-row-group !important;
}

.info-row .size-table tr {
    display: table-row !important;
}

.info-row .size-table td {
    display: table-cell !important;

    padding: 14px 0 !important;

    border-bottom: 1px solid var(--wh45-color-footer) !important;

    vertical-align: middle !important;
    box-sizing: border-box;
}

/* Erste Tabellenspalte */
.info-row .size-table td:first-child {
    padding-right: 12px !important;
    text-align: left;
}

/* Zweite Tabellenspalte */
.info-row .size-table td:last-child {
    text-align: left;
    white-space: nowrap;
}


/* =========================================================
   STARTSEITE – TESTIMONIALS

   Überschriften-Row:
   testimonial-heading-row

   Überschrift:
   testimonial-heading

   Bewertungs-Row:
   testimonial-row

   Einzelne Karte:
   testimonial-box

   Darstellung:
   ab 901px: 4 Spalten
   601–900px: 2 Spalten
   bis 600px: 1 Spalte
========================================================= */


/* =========================================================
   ÜBERSCHRIFTENBEREICH
========================================================= */

.testimonial-heading-row {
    position: relative;
    z-index: 0;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 14px 0 8px !important;

    background: transparent !important;

    overflow: visible !important;
    box-sizing: border-box;
}


/*
 * Hintergrund seitlich bis an dieselben Kanten wie die
 * Bewertungs-Row erweitern.
 */


/* Inhalt über dem Hintergrund halten */
.testimonial-heading-row > *,
.testimonial-heading-row .panel-grid-cell,
.testimonial-heading-row .panel-widget-style,
.testimonial-heading-row .widget,
.testimonial-heading-row .textwidget {
    position: relative;
    z-index: 1;
}


/* SiteOrigin-Abstände entfernen */
.testimonial-heading-row .panel-grid-cell,
.testimonial-heading-row .panel-widget-style,
.testimonial-heading-row .widget,
.testimonial-heading-row .textwidget {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    background: transparent !important;
}


/* Überschrift */
.testimonial-heading {
    width: 100%;

    margin: 0 !important;
    padding: 0 20px !important;

    color: var(--wh45-color-petrol);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 30px;
    line-height: 1.2;
    font-weight: 500;

    text-align: center;

    background: transparent !important;
    box-sizing: border-box;
}


/* =========================================================
   BEWERTUNGS-ROW – GRUNDLAYOUT
========================================================= */

.testimonial-row,
.panel-grid.testimonial-row,
.panel-row-style.testimonial-row {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    align-items: stretch !important;

    gap: 28px;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    /*
     * oben | seitlich | unten
     */
    padding: 8px 12px 40px !important;

    background: var(--wh45-color-background) !important;

    box-sizing: border-box;
}


/* =========================================================
   SITEORIGIN-SPALTEN
========================================================= */

.testimonial-row > .panel-grid-cell,
.testimonial-row .panel-grid-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: auto !important;
    max-width: none !important;

    min-width: 0 !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box;
}


/* =========================================================
   SITEORIGIN-WRAPPER AUF VOLLE HÖHE
========================================================= */

.testimonial-row .panel-grid-cell > .so-panel,
.testimonial-row .panel-grid-cell > .widget,
.testimonial-row .panel-widget-style,
.testimonial-row .so-widget-sow-editor,
.testimonial-row .siteorigin-widget-tinymce,
.testimonial-row .textwidget {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    box-sizing: border-box;
}


/* =========================================================
   EINZELNE BEWERTUNGSKARTE
========================================================= */

.testimonial-box {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: center !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 26px 24px !important;

    background: var(--wh45-color-white);

    border-radius: 6px;

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, 0.04);

    text-align: center;

    box-sizing: border-box;
}


/* =========================================================
   STERNE
========================================================= */

.testimonial-box .stars,
.testimonial-row .stars {
    margin: 0 0 18px !important;
    padding: 0 !important;

    color: var(--wh45-color-rose);

    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;

    text-align: center;
}


/* =========================================================
   BEWERTUNGSTEXT
========================================================= */

.testimonial-box p {
    width: 100%;

    margin: 0 0 18px !important;
    padding: 0 !important;

    color: #666666;

    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;

    text-align: center;

    hyphens: none;
    -webkit-hyphens: none;

    word-break: normal;
    overflow-wrap: normal;
}


/*
 * Die letzte Textzeile ist die Herkunfts-/Autorzeile.
 * Sie sitzt bei Desktopkarten immer unten.
 */
.testimonial-box p:last-child {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-top: 16px !important;

    font-weight: 700;
}


/* =========================================================
   SCHMALER DESKTOP
   901 BIS 1100 PIXEL
========================================================= */

@media (min-width: 901px) and (max-width: 1100px) {

    .testimonial-row,
    .panel-grid.testimonial-row,
    .panel-row-style.testimonial-row {
        gap: 20px;

        padding-right: 14px !important;
        padding-bottom: 34px !important;
        padding-left: 14px !important;
    }


    .testimonial-box {
        padding: 24px 20px !important;
    }


    .testimonial-box p {
        font-size: 13.5px;
        line-height: 1.52;
    }
}


/* =========================================================
   TABLET
   601 BIS 900 PIXEL

   Zwei Karten nebeneinander statt einer langen Einzelspalte.
========================================================= */

@media (min-width: 601px) and (max-width: 900px) {

    .testimonial-heading {
        font-size: 27px;
    }


    .testimonial-row,
    .panel-grid.testimonial-row,
    .panel-row-style.testimonial-row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;

        padding:
            8px
            16px
            32px !important;
    }


    .testimonial-box {
        padding: 24px 22px !important;
    }


    .testimonial-box p {
        font-size: 14px;
        line-height: 1.55;
    }
}


/* =========================================================
   SMARTPHONE
   BIS 600 PIXEL
========================================================= */

@media (max-width: 600px) {

    .testimonial-heading-row {
        padding: 12px 0 7px !important;
    }



    .testimonial-heading {
        padding: 0 15px !important;

        font-size: 23px;
        line-height: 1.18;
    }


    .testimonial-row,
    .panel-grid.testimonial-row,
    .panel-row-style.testimonial-row {
        display: grid !important;

        grid-template-columns: 1fr;

        gap: 14px;

        padding:
            6px
            0
            26px !important;
    }


    .testimonial-row > .panel-grid-cell,
    .testimonial-row .panel-grid-cell {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .testimonial-box {
        height: auto !important;
        min-height: 0 !important;

        padding: 24px 20px !important;
    }


    .testimonial-box .stars,
    .testimonial-row .stars {
        margin-bottom: 17px !important;
    }


    .testimonial-box p {
        max-width: 32ch;

        margin-right: auto !important;
        margin-left: auto !important;

        font-size: 14px;
        line-height: 1.55;
    }


    .testimonial-box p:last-child {
        margin-top: 0 !important;
        padding-top: 12px !important;
    }
}


/* =========================================================
   KLEINE SMARTPHONES
   BIS 480 PIXEL
========================================================= */

@media (max-width: 480px) {

    .testimonial-heading {
        font-size: 22px;
    }


    .testimonial-row,
    .panel-grid.testimonial-row,
    .panel-row-style.testimonial-row {
        gap: 12px;

        padding-bottom: 24px !important;
    }


    .testimonial-box {
        padding: 22px 18px !important;
    }
}


/* =========================================================
   TESTIMONIALS – HINTERGRUNDBREITE KORRIGIEREN

   Ziel:
   - gleiche Außenbreite wie die Info-Row davor
   - Kartenpositionen bleiben unverändert
   - Raster und responsive Spalten bleiben unverändert
========================================================= */

.testimonial-heading-row,
.testimonial-row,
.panel-grid.testimonial-row,
.panel-row-style.testimonial-row {
    /*
     * Gleicht das globale SiteOrigin-Zellenpadding
     * von 15px auf beiden Seiten optisch aus.
     */
    --testimonial-background-edge: 15px;

    background: var(--wh45-color-background) !important;

    /*
     * Zwei seitliche Flächen verbreitern nur den Hintergrund.
     * Die tatsächliche Row-Breite wird nicht verändert.
     */
    box-shadow:
        calc(-1 * var(--testimonial-background-edge))
        0
        0
        var(--wh45-color-background),

        var(--testimonial-background-edge)
        0
        0
        var(--wh45-color-background) !important;

    overflow: visible !important;
}


/* Alten Pseudo-Hintergrund vollständig deaktivieren */

.testimonial-heading-row::before {
    content: none !important;
    display: none !important;
}


/* =========================================================
   STARTSEITE – SERVICE-ROW

   Row Class:
   service-row

   Textcontainer:
   service-content

   Buttoncontainer:
   service-button-wrap

   Button:
   service-btn

   Darstellung:
   ab 781px: 3 Spalten
   bis 780px: untereinander
========================================================= */


/* =========================================================
   SERVICE-ROW – GRUNDEINSTELLUNGEN
========================================================= */

.service-row,
.panel-grid.service-row,
.panel-row-style.service-row {
    width: 100% !important;

    margin: 0 !important;
    padding: 25px 0 !important;

    background: transparent !important;

    box-sizing: border-box;
}


/* =========================================================
   SERVICE-SPALTEN
========================================================= */

.service-row > .panel-grid-cell,
.service-row .panel-grid-cell {
    min-width: 0;

    box-sizing: border-box;
}


/* Widget-Abstände innerhalb der Servicekarten entfernen */
.service-row .panel-grid-cell > .so-panel,
.service-row .panel-grid-cell > .widget {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* =========================================================
   SERVICE-BILDER
========================================================= */

.service-row .sow-image-container,
.service-row .so-widget-image {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


.service-row .sow-image-container a {
    display: block;

    width: 100%;
}


.service-row .sow-image-container img,
.service-row .so-widget-image img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 2 / 1;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover;
    object-position: center;

    border-radius: 6px 6px 0 0 !important;

    box-sizing: border-box;
}


/* =========================================================
   WEISSE TEXTKARTE
========================================================= */

.service-box,
.service-content {
    width: 100%;

    background: var(--wh45-color-white);

    box-sizing: border-box;
}


.service-content {
    display: flex;
    flex-direction: column;

    padding: 24px 35px 30px;

    border-radius: 0 0 6px 6px;

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, 0.05);

    text-align: left;
}


/* =========================================================
   ÜBERSCHRIFT
========================================================= */

.service-content h2,
.service-content h3 {
    width: 100%;

    margin: 0 0 14px !important;
    padding: 0 !important;

    color: var(--wh45-color-petrol);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;
    line-height: 1.25;
    font-weight: 500;

    text-align: left;
}


/* =========================================================
   LISTE
========================================================= */

.service-content ul {
    width: 100%;

    margin: 0 !important;
    padding: 0 0 0 20px !important;

    color: #666666;

    box-sizing: border-box;
}


.service-content li {
    margin: 0 0 8px;
    padding-left: 2px;

    color: #666666;

    font-size: 14px;
    line-height: 1.5;

    text-align: left;
}


.service-content li:last-child {
    margin-bottom: 0;
}


/* =========================================================
   BUTTONCONTAINER
========================================================= */

.service-content .service-button-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    /*
     * Der Container wird auf Desktop nach unten gedrückt.
     * Dadurch stehen alle Buttons auf derselben Höhe.
     */
    margin: auto 0 0 !important;
    padding: 22px 0 0 !important;

    line-height: 1 !important;
    text-align: center !important;

    box-sizing: border-box;
}


/* =========================================================
   SERVICE-BUTTON
========================================================= */

.service-row .service-button-wrap a.service-btn,
.service-row .service-button-wrap a.service-btn:link,
.service-row .service-button-wrap a.service-btn:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 220px !important;
    max-width: 100% !important;

    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    background: var(--wh45-color-rose) !important;

    color: var(--wh45-color-petrol) !important;
    -webkit-text-fill-color: var(--wh45-color-petrol) !important;

    border: 0 !important;
    border-radius: 4px !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;

    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;

    white-space: nowrap;

    box-sizing: border-box !important;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.service-row .service-button-wrap a.service-btn:hover,
.service-row .service-button-wrap a.service-btn:focus,
.service-row .service-button-wrap a.service-btn:active {
    background: var(--wh45-color-rose-hover) !important;

    color: var(--wh45-color-white) !important;
    -webkit-text-fill-color: var(--wh45-color-white) !important;

    text-decoration: none !important;
}


@media (hover: hover) {

    .service-row .service-button-wrap a.service-btn:hover {
        transform: translateY(-2px);
    }
}


/* =========================================================
   DESKTOP UND TABLET QUER
   AB 781 PIXEL
========================================================= */

@media (min-width: 781px) {

    .service-row,
    .panel-grid.service-row,
    .panel-row-style.service-row {
        display: flex !important;
        align-items: stretch !important;
    }


    .service-row > .panel-grid-cell,
    .service-row .panel-grid-cell {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        height: auto !important;

        margin-bottom: 0 !important;
    }


    /*
     * Das letzte Widget enthält die weiße Textkarte.
     * Es füllt die verbleibende Spaltenhöhe.
     */
    .service-row .panel-grid-cell > .so-panel:last-child,
    .service-row .panel-grid-cell > .widget:last-child {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;

        width: 100% !important;
    }


    .service-row .panel-grid-cell > .so-panel:last-child
    .panel-widget-style,
    .service-row .panel-grid-cell > .widget:last-child
    .panel-widget-style,
    .service-row .panel-grid-cell > .so-panel:last-child
    .so-widget-sow-editor,
    .service-row .panel-grid-cell > .so-panel:last-child
    .siteorigin-widget-tinymce,
    .service-row .panel-grid-cell > .so-panel:last-child
    .textwidget {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;

        width: 100% !important;
        height: 100% !important;

        box-sizing: border-box;
    }


    .service-row .service-content {
        flex: 1 1 auto !important;

        height: 100% !important;
    }
}


/* =========================================================
   781 BIS 1024 PIXEL
========================================================= */

@media (min-width: 781px) and (max-width: 1024px) {

    .service-row,
    .panel-grid.service-row,
    .panel-row-style.service-row {
        padding: 25px 0 40px !important;
    }


    .service-content {
        padding: 22px 26px 28px;
    }


    .service-content h2,
    .service-content h3 {
        font-size: 21px;
    }


    .service-row .service-button-wrap a.service-btn,
    .service-row .service-button-wrap a.service-btn:link,
    .service-row .service-button-wrap a.service-btn:visited {
        width: 210px !important;

        font-size: 11.5px !important;
    }
}


/* =========================================================
   TABLET HOCHKANT UND SMARTPHONE
   BIS 780 PIXEL
========================================================= */

@media (max-width: 780px) {

    .service-row,
    .panel-grid.service-row,
    .panel-row-style.service-row {
        display: block !important;

        padding: 25px 0 32px !important;
    }


    .service-row > .panel-grid-cell,
    .service-row .panel-grid-cell {
        display: block !important;

        width: 100% !important;
        max-width: 720px !important;

        margin:
            0
            auto
            28px !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        float: none !important;

        box-sizing: border-box;
    }


    .service-row > .panel-grid-cell:last-child,
    .service-row .panel-grid-cell:last-child {
        margin-bottom: 0 !important;
    }


    .service-content {
        height: auto !important;

        padding: 22px 30px 30px;
    }


    .service-content h2,
    .service-content h3 {
        margin-bottom: 12px !important;

        font-size: 21px;
    }


    .service-content .service-button-wrap {
        margin-top: 0 !important;
        padding-top: 22px !important;
    }


    .service-row .service-button-wrap a.service-btn,
    .service-row .service-button-wrap a.service-btn:link,
    .service-row .service-button-wrap a.service-btn:visited {
        width: 220px !important;
    }
}


/* =========================================================
   SMARTPHONE
   BIS 600 PIXEL
========================================================= */

@media (max-width: 600px) {

    .service-row,
    .panel-grid.service-row,
    .panel-row-style.service-row {
        padding: 22px 0 30px !important;
    }


    .service-row > .panel-grid-cell,
    .service-row .panel-grid-cell {
        margin-bottom: 24px !important;
    }


    .service-content {
        padding: 20px 28px 30px;
    }


    .service-content h2,
    .service-content h3 {
        font-size: 21px;
    }


    .service-content li {
        margin-bottom: 8px;

        font-size: 14px;
    }


    .service-content .service-button-wrap {
        padding-top: 20px !important;
    }


    .service-row .service-button-wrap a.service-btn,
    .service-row .service-button-wrap a.service-btn:link,
    .service-row .service-button-wrap a.service-btn:visited {
        width: 210px !important;

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        font-size: 12px !important;
    }
}


/* =========================================================
   KLEINE SMARTPHONES
   BIS 480 PIXEL
========================================================= */

@media (max-width: 480px) {

    .service-content {
        padding:
            19px
            24px
            28px;
    }


    .service-row > .panel-grid-cell,
    .service-row .panel-grid-cell {
        margin-bottom: 22px !important;
    }
}


/* =========================================================
   STARTSEITE – CTA MIT GOOGLE MAPS

   Row Class:
   cta-row

   Textklassen:
   cta-text
   cta-location

   Ziel:
   - Überschrift deutlich weiter oben
   - kompaktere, gleichmäßige Abstände
   - Hintergrundbreite bleibt unverändert
   - Google Maps schließt unten sauber ab
========================================================= */


/* =========================================================
   CTA-ROW – GRUNDDESIGN
========================================================= */

.cta-row,
.panel-grid.cta-row,
.panel-row-style.cta-row {
    --cta-padding-top: 30px;
    --cta-padding-inline: 15px;
    --cta-padding-bottom: 10px;
    --cta-radius: 14px;

    position: relative;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding:
        var(--cta-padding-top)
        var(--cta-padding-inline)
        var(--cta-padding-bottom) !important;

    background-color: var(--wh45-color-rose) !important;

    background-image:
        radial-gradient(
            circle at 16% 12%,
            rgba(255, 255, 255, 0.20) 0%,
            rgba(255, 255, 255, 0) 36%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0) 34%
        ),
        linear-gradient(
            135deg,
            #c9858d 0%,
            #dc9da3 48%,
            #c77d87 100%
        ) !important;

    border-radius:
        var(--cta-radius)
        var(--cta-radius)
        0
        0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(90, 45, 50, 0.08);

    color: #3f3031;

    text-align: center;

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================================
   SITEORIGIN-ZELLE BEREINIGEN
========================================================= */

.cta-row > .panel-grid-cell,
.cta-row .panel-grid-cell {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box;
}


/* =========================================================
   SITEORIGIN-WIDGETABSTÄNDE ENTFERNEN

   Damit entstehen oberhalb der Überschrift keine zusätzlichen
   Abstände durch einzelne Editor- oder Karten-Widgets.
========================================================= */

.cta-row .so-panel,
.cta-row .widget,
.cta-row .panel-widget-style,
.cta-row .so-widget-sow-editor,
.cta-row .siteorigin-widget-tinymce,
.cta-row .textwidget {
    width: 100% !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    box-sizing: border-box;
}


/* Leere Editor-Absätze nicht anzeigen */

.cta-row p:empty {
    display: none !important;
}


/* =========================================================
   CTA-ÜBERSCHRIFT
========================================================= */

.cta-row h2 {
    width: 100%;
    max-width: 900px;

    margin:
        0
        auto
        18px !important;

    padding: 0 !important;

    color: var(--wh45-color-white) !important;
    -webkit-text-fill-color: var(--wh45-color-white) !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(42px, 4.8vw, 56px);
    line-height: 1.08;
    font-weight: 500;

    text-align: center;
    text-wrap: balance;
}


/* =========================================================
   CTA-FLIESSTEXT
========================================================= */

.cta-row .cta-text {
    width: 100%;
    max-width: 720px;

    margin:
        0
        auto
        26px !important;

    padding: 0 !important;

    color: #3f3031 !important;
    -webkit-text-fill-color: #3f3031 !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 17px;
    line-height: 1.58;
    font-weight: 400;

    text-align: center;

    hyphens: none !important;
    -webkit-hyphens: none !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
}


/* =========================================================
   STANDORTZEILE
========================================================= */

.cta-row .cta-location {
    width: 100%;
    max-width: 900px;

    margin:
        0
        auto
        12px !important;

    padding: 0 !important;

    color: #005f68 !important;
    -webkit-text-fill-color: #005f68 !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;
    line-height: 1.45;
    font-weight: 700;

    text-align: center;
}


/* =========================================================
   GOOGLE-MAPS-WIDGET
========================================================= */

.cta-row .widget:last-child,
.cta-row .so-panel:last-child,
.cta-row .panel-widget-style:last-child,
.cta-row .textwidget:last-child,
.cta-row .textwidget > p:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


.cta-row iframe {
    display: block;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0;

    vertical-align: top;
}


/* =========================================================
   TABLET
   601 BIS 1024 PIXEL
========================================================= */

@media (min-width: 601px) and (max-width: 1024px) {

    .cta-row,
    .panel-grid.cta-row,
    .panel-row-style.cta-row {
        --cta-padding-top: 26px;
        --cta-padding-inline: 20px;
        --cta-padding-bottom: 10px;
        --cta-radius: 12px;
    }


    .cta-row h2 {
        margin-bottom: 17px !important;

        font-size: clamp(38px, 5vw, 48px);
        line-height: 1.08;
    }


    .cta-row .cta-text {
        max-width: 680px;

        margin-bottom: 24px !important;

        font-size: 16.5px;
        line-height: 1.56;
    }


    .cta-row .cta-location {
        max-width: 720px;

        margin-bottom: 12px !important;

        font-size: 14px;
    }
}


/* =========================================================
   SMARTPHONE
   BIS 600 PIXEL
========================================================= */

@media (max-width: 600px) {

    .cta-row,
    .panel-grid.cta-row,
    .panel-row-style.cta-row {
        --cta-padding-top: 22px;
        --cta-padding-inline: 14px;
        --cta-padding-bottom: 10px;
        --cta-radius: 10px;
    }


    .cta-row h2 {
        max-width: 330px;

        margin-bottom: 14px !important;

        font-size: 34px;
        line-height: 1.12;
    }


    .cta-row .cta-text {
        max-width: 31ch;

        margin-bottom: 20px !important;

        font-size: 16px;
        line-height: 1.58;
    }


    .cta-row .cta-location {
        max-width: 31ch;

        margin-bottom: 11px !important;

        font-size: 13.5px;
        line-height: 1.45;
    }
}


/* =========================================================
   KLEINE SMARTPHONES
   BIS 480 PIXEL
========================================================= */

@media (max-width: 480px) {

    .cta-row,
    .panel-grid.cta-row,
    .panel-row-style.cta-row {
        --cta-padding-top: 20px;
        --cta-padding-inline: 12px;
    }


    .cta-row h2 {
        max-width: 300px;

        font-size: 32px;
    }


    .cta-row .cta-text {
        max-width: 29ch;

        font-size: 15.5px;
        line-height: 1.56;
    }


    .cta-row .cta-location {
        max-width: 29ch;

        font-size: 13px;
    }
}


/* =========================================================
   GALLERY
========================================================= */

.gallery-row {
    background: var(--wh45-color-white);
    padding: 80px 0;
}

.gallery-row img {
    border-radius: 6px;
}


/* =========================================================
   CONTACT
========================================================= */

.contact-row {
    background: #f7f4f3;
    padding: 100px 0;
}

.contact-row h3 {
    margin-bottom: 20px;
}
/* =========================================================
   EIGENER SITEORIGIN-FOOTER
   Gleiche maximale Breite wie die oberen Rows
========================================================= */

/* Vantage-Standardfooter ausblenden */
#colophon,
.site-footer {
    display: none !important;
}

/*
 * Die Footer-Row wird unabhängig von ihrem eventuell
 * schmaleren SiteOrigin-Elterncontainer auf 1200px gebracht.
 */
.custom-footer-row,
.panel-grid.custom-footer-row,
.panel-row-style.custom-footer-row {
    position: relative;

    width: calc(100vw - 30px) !important;
    max-width: var(--wh45-content-width) !important;

    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 50% !important;

    transform: translateX(-50%);

    padding: 30px 34px 26px !important;

    background: var(--wh45-color-footer) !important;
    box-sizing: border-box;
}

/* Eventuelle innere SiteOrigin-Row zurücksetzen */
.custom-footer-row > .panel-row-style,
.custom-footer-row .panel-row-style {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    box-sizing: border-box;
}

/* Globale 15px-Zellenabstände für den Footer überschreiben */
.custom-footer-row .panel-grid-cell {
    margin: 0 !important;
    padding: 0 15px !important;
    box-sizing: border-box;
}

/* Erste und letzte Spalte außen bündig */
.custom-footer-row .panel-grid-cell:first-child {
    padding-left: 0 !important;
}

.custom-footer-row .panel-grid-cell:last-child {
    padding-right: 0 !important;
}

/* Widget-Abstände entfernen */
.custom-footer-row .widget,
.custom-footer-row .panel-widget-style,
.custom-footer-row .textwidget {
    margin-bottom: 0 !important;
}

/* Footer-Überschriften kleiner */
.custom-footer-row h2,
.custom-footer-row h3,
.custom-footer-row h4 {
    margin: 0 0 10px !important;

    color: var(--wh45-color-petrol);
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
}

/* Footer-Texte */
.custom-footer-row p,
.custom-footer-row li,
.custom-footer-row a {
    margin-top: 0;

    color: #666666;
    font-size: 14px;
    line-height: 1.55;
}

/* Listen */
.custom-footer-row ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* =========================================================
   EIGENER FOOTER – TABLET
========================================================= */

@media (min-width: 601px) and (max-width: 1024px) {

    .custom-footer-row,
    .panel-grid.custom-footer-row,
    .panel-row-style.custom-footer-row {
        width: calc(100vw - 24px) !important;
        padding: 28px 26px 24px !important;
    }

    .custom-footer-row h2,
    .custom-footer-row h3,
    .custom-footer-row h4 {
        font-size: 18px !important;
    }
}


/* =========================================================
   EIGENER FOOTER – SMARTPHONE
========================================================= */

@media (max-width: 600px) {

    .custom-footer-row,
    .panel-grid.custom-footer-row,
    .panel-row-style.custom-footer-row {
        width: calc(100vw - 20px) !important;
        padding: 25px 20px 22px !important;
    }

    .custom-footer-row .panel-grid-cell {
        padding: 0 !important;
    }

    .custom-footer-row h2,
    .custom-footer-row h3,
    .custom-footer-row h4 {
        font-size: 18px !important;
    }
}
/* =========================================================
   FOOTER – MOBILE ABSTÄNDE ZWISCHEN DEN BEREICHEN
========================================================= */

@media (max-width: 600px) {

    /* Abstand nach jedem Footer-Bereich */
    .custom-footer-row .panel-grid-cell {
        margin: 0 0 26px !important;
        padding: 0 !important;
    }

    /* Beim letzten Bereich keinen zusätzlichen Abstand */
    .custom-footer-row .panel-grid-cell:last-child {
        margin-bottom: 0 !important;
    }

    /* Abstand unter den Überschriften */
    .custom-footer-row h2,
    .custom-footer-row h3,
    .custom-footer-row h4 {
        margin: 0 0 10px !important;
    }
}
/* =========================================================
   FOOTER – SCHMALER TABLET-BEREICH
   Einzug beim Stapeln der Spalten entfernen
========================================================= */

@media (min-width: 601px) and (max-width: 780px) {

    .custom-footer-row .panel-grid-cell {
        width: 100% !important;
        max-width: 100% !important;

        float: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 28px !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        text-align: left !important;
        box-sizing: border-box;
    }

    /* SiteOrigin-Abstand zwischen aufeinanderfolgenden Spalten entfernen */
    .custom-footer-row .panel-grid-cell + .panel-grid-cell {
        margin-left: 0 !important;
    }

    /* Letzte Spalte ohne zusätzlichen unteren Abstand */
    .custom-footer-row .panel-grid-cell:last-child {
        margin-bottom: 0 !important;
    }
}
/* =========================================================
   SITEORIGIN SPACING
========================================================= */

.panel-grid {
    margin-bottom: 0 !important;
}

.panel-grid-cell {
    padding: 15px;
}


/* =========================================================
   IMAGES
========================================================= */

img {
    max-width: 100%;
    height: auto;
}

.so-widget-image img {
    border-radius: 6px;
}


/* =========================================================
   GLOBALE RESPONSIVE TYPOGRAFIE

   Bereichsspezifische Abstände werden ausschließlich in den
   jeweiligen Komponenten geregelt. Dadurch beeinflussen diese
   Fallbacks keine SiteOrigin-Rows oder Speziallayouts.
========================================================= */

@media (max-width: 1024px) {

    h1 {
        font-size: 54px;
    }

    h2 {
        font-size: 40px;
    }
}

@media (max-width: 768px) {

    body {
        font-size: 16px;
    }

    h1 {
        font-size: 42px;
    }

    h2 {
        font-size: 34px;
    }

    h3 {
        font-size: 26px;
    }
}

@media (max-width: 480px) {

    h1 {
        font-size: 34px;
    }

    h2 {
        font-size: 30px;
    }

    h3 {
        font-size: 24px;
    }
}



/* =========================================================
   ÜBER-UNS-SEITE – KOMPAKTER INTRO-HERO

   Row Class:
   about-intro-row

   Linkes Editor-Widget:
   about-intro-copy

   Rechtes Bild-Widget:
   about-intro-media

   Desktop:
   - exakt 220px hoch
   - Headline vollständig sichtbar
   - Bild mit 10px Innenabstand rundum
   - keine separaten Widget-Hintergründe

   Bis 900px:
   - Text und Bild untereinander
   - Headline vollständig zentriert
========================================================= */


/* =========================================================
   DESKTOP-GRUNDLAYOUT
========================================================= */

.about-intro-row {
    --about-intro-height: 220px;
    --about-intro-radius: 14px;

    display: grid !important;

    /* Text 40 %, Bild 60 % */
    grid-template-columns:
        minmax(320px, 40%)
        minmax(0, 60%);

    align-items: stretch !important;

    width: 100% !important;
    max-width: var(--wh45-content-width) !important;

    height: var(--about-intro-height) !important;
    min-height: var(--about-intro-height) !important;
    max-height: var(--about-intro-height) !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background-color: var(--wh45-color-rose-light) !important;

    background-image:
        radial-gradient(
            circle at 12% 8%,
            rgba(255, 255, 255, 0.74) 0%,
            rgba(255, 255, 255, 0) 38%
        ),
        radial-gradient(
            circle at 90% 88%,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0) 34%
        ),
        linear-gradient(
            135deg,
            #fbf7f5 0%,
            var(--wh45-color-rose-light) 52%,
            #f0dfe1 100%
        ) !important;

    /* Oben gerade, unten abgerundet */
    border-radius:
        0
        0
        var(--about-intro-radius)
        var(--about-intro-radius) !important;

    overflow: hidden;
    box-sizing: border-box;
}


/* =========================================================
   SITEORIGIN-SPALTEN ZURÜCKSETZEN
========================================================= */

.about-intro-row > .panel-grid-cell,
.about-intro-row .panel-grid-cell {
    min-width: 0 !important;

    width: auto !important;
    max-width: none !important;
    height: 100% !important;

    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;

    float: none !important;
    box-sizing: border-box;
}


/* =========================================================
   LINKE TEXTSPALTE
========================================================= */

.about-intro-row .panel-grid-cell:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    height: 100% !important;

    /* oben | rechts | unten | links */
    padding: 12px 18px 12px 24px !important;

    overflow: visible !important;
    box-sizing: border-box;
}


/* Editor-Widget vollständig neutralisieren */
.about-intro-copy,
.about-intro-copy > *,
.about-intro-copy .panel-widget-style,
.about-intro-copy .so-widget-sow-editor,
.about-intro-copy .siteorigin-widget-tinymce,
.about-intro-copy .textwidget {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

    overflow: visible !important;
    box-sizing: border-box;
}


/* Innerer Textcontainer */
.about-intro-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 390px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    overflow: visible !important;

    box-sizing: border-box;
}


/* =========================================================
   KICKER
========================================================= */

.about-intro-kicker {
    margin: 0 0 7px !important;
    padding: 0 !important;

    color: var(--wh45-color-rose-dark);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 700;
    letter-spacing: 2.5px !important;

    text-align: left !important;
    text-transform: uppercase;
}


/* =========================================================
   HEADLINE
   Alle drei Zeilen passen sicher in 220px
========================================================= */

.about-intro-content h1.about-intro-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    width: 100% !important;
    max-width: 390px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--wh45-color-petrol) !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: clamp(33px, 3vw, 40px) !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em;

    text-align: left !important;

    overflow: visible !important;
}


/* Eventuelle vom Editor eingefügte Umbrüche entfernen */
.about-intro-content h1.about-intro-title br {
    display: none !important;
}


/* Einzelne Titelzeilen */
.about-intro-content h1.about-intro-title > span {
    display: block !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: inherit !important;
    font-size: inherit !important;
    line-height: 1.08 !important;
    font-weight: inherit !important;
    letter-spacing: inherit;

    white-space: nowrap !important;

    text-align: left !important;
    overflow: visible !important;
}


/* Abstand zwischen „Über das“ und „Wäschehaus“ */
.about-intro-content
h1.about-intro-title
> span:nth-child(2) {
    margin-top: 8px !important;
}


/* Rosa Abschlusszeile */
.about-intro-content
h1.about-intro-title
> .about-intro-accent {
    margin-top: 3px !important;

    color: var(--wh45-color-rose) !important;
}


/* =========================================================
   RECHTE BILDSPALTE
   Gleichmäßige 10px rund um das Bild
========================================================= */

.about-intro-row .panel-grid-cell:nth-child(2) {
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;

    width: 100% !important;
    height: 100% !important;

    padding: 10px !important;

    overflow: hidden !important;
    box-sizing: border-box;
}


/* Sämtliche SiteOrigin-Bildwrapper füllen die Fläche */
.about-intro-row .panel-grid-cell:nth-child(2) > *,
.about-intro-media,
.about-intro-media > *,
.about-intro-media .panel-widget-style,
.about-intro-media .so-widget-sow-image,
.about-intro-media .sow-image-container,
.about-intro-media .sow-image-container > a {
    display: flex !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

    overflow: hidden !important;
    box-sizing: border-box;
}


/* Bild füllt die komplette verfügbare Fläche */
.about-intro-row .panel-grid-cell:nth-child(2) img,
.about-intro-media img,
.about-intro-media .sow-image-container img {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 8px !important;

    box-sizing: border-box;
}


/* =========================================================
   TABLET UND SMARTPHONE
   Früher Umbruch verhindert gequetschte Zwischenansichten
========================================================= */

@media (max-width: 900px) {

    .about-intro-row {
        display: grid !important;
        grid-template-columns: 1fr;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        gap: 18px;

        padding: 22px 16px 16px !important;

        overflow: hidden !important;
        box-sizing: border-box;
    }


    /* Beide Spalten volle Breite */
    .about-intro-row .panel-grid-cell:first-child,
    .about-intro-row .panel-grid-cell:nth-child(2) {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }


    /* Text und Wrapper vollständig zentrieren */
    .about-intro-copy,
    .about-intro-copy > *,
    .about-intro-copy .panel-widget-style,
    .about-intro-copy .so-widget-sow-editor,
    .about-intro-copy .siteorigin-widget-tinymce,
    .about-intro-copy .textwidget,
    .about-intro-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 auto !important;
        padding: 0 !important;

        text-align: center !important;

        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;

        overflow: visible !important;
    }


    /* Kicker zentriert */
    .about-intro-kicker {
        width: 100% !important;

        margin: 0 0 8px !important;

        text-align: center !important;
    }


    /* Headline zentriert */
    .about-intro-content h1.about-intro-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 620px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        font-size: clamp(32px, 7vw, 42px) !important;
        line-height: 1 !important;

        text-align: center !important;

        overflow: visible !important;
    }


    .about-intro-content h1.about-intro-title > span {
        display: block !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: inherit !important;
        line-height: 1 !important;

        white-space: nowrap !important;

        text-align: center !important;
        overflow: visible !important;
    }


    .about-intro-content
    h1.about-intro-title
    > span:nth-child(2) {
        margin-top: 8px !important;
    }


    .about-intro-content
    h1.about-intro-title
    > .about-intro-accent {
        margin-top: 5px !important;

        color: var(--wh45-color-rose) !important;
    }


    /* Bildbereich */
    .about-intro-row .panel-grid-cell:nth-child(2) {
        height: clamp(175px, 40vw, 250px) !important;
        padding: 0 !important;

        overflow: hidden !important;
    }


    .about-intro-row .panel-grid-cell:nth-child(2) > *,
    .about-intro-media,
    .about-intro-media > *,
    .about-intro-media .panel-widget-style,
    .about-intro-media .so-widget-sow-image,
    .about-intro-media .sow-image-container,
    .about-intro-media .sow-image-container > a {
        width: 100% !important;
        height: 100% !important;

        overflow: hidden !important;
    }


    .about-intro-row .panel-grid-cell:nth-child(2) img,
    .about-intro-media img,
    .about-intro-media .sow-image-container img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center !important;
    }
}


/* =========================================================
   KLEINE SMARTPHONES
========================================================= */

@media (max-width: 480px) {

    .about-intro-row {
        gap: 16px;
        padding: 20px 13px 13px !important;
    }


    .about-intro-content h1.about-intro-title {
        font-size: clamp(29px, 9vw, 36px) !important;
    }


    .about-intro-content
    h1.about-intro-title
    > span:nth-child(2) {
        margin-top: 7px !important;
    }


    .about-intro-content
    h1.about-intro-title
    > .about-intro-accent {
        margin-top: 5px !important;
    }
}


/* =========================================================
   ÜBER-UNS-SEITE – STORY UND GALERIE

   SiteOrigin:
   Row ID:        unsere-geschichte
   Row Class:     about-story-row

   Linkes Widget:
   about-story-copy

   Rechtes Widget:
   about-story-gallery
========================================================= */


/* =========================================================
   STORY-ROW – DESKTOP
========================================================= */

.about-story-row {
    /* Abstand zur vorherigen Intro-Row */
    --about-story-distance: 35px;

    --about-story-gap: 48px;
    --about-story-padding-y: 68px;
    --about-story-padding-x: 42px;
    --about-story-gallery-height: 500px;

    display: grid !important;

    /*
     * Die Textspalte erhält mehr Breite als zuvor.
     * Dadurch wird der Fließtext ruhiger und weniger flatterig.
     */
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    align-items: start !important;
    gap: var(--about-story-gap);

    width: 100% !important;
    max-width: var(--wh45-content-width) !important;

    margin:
        var(--about-story-distance)
        auto
        0 !important;

    padding:
        var(--about-story-padding-y)
        var(--about-story-padding-x) !important;

    background: var(--wh45-color-background);

    border-radius: 10px 10px 0 0;

    box-sizing: border-box;
}


/* =========================================================
   SITEORIGIN-SPALTEN BEREINIGEN
========================================================= */

.about-story-row > .panel-grid-cell,
.about-story-row .panel-grid-cell {
    min-width: 0 !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    box-sizing: border-box;
}


/* =========================================================
   LINKE TEXTSPALTE
========================================================= */

.about-story-copy,
.about-story-copy > *,
.about-story-copy .panel-widget-style,
.about-story-copy .so-widget-sow-editor,
.about-story-copy .siteorigin-widget-tinymce,
.about-story-copy .textwidget {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

    box-sizing: border-box;
}


/* Innerer Inhaltsbereich */
.about-story-content {
    position: relative;

    width: 100%;
    max-width: 650px;

    margin: 0;
    padding: 0 0 0 24px;

    box-sizing: border-box;
}


/* Dezente vertikale Akzentlinie */
.about-story-content::before {
    content: "";

    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;

    width: 3px;

    background:
        linear-gradient(
            to bottom,
            var(--wh45-color-rose) 0%,
            rgba(215, 154, 160, 0.20) 100%
        );

    border-radius: 3px;
}


/* Kleine Einleitungszeile */
.about-story-kicker {
    margin: 0 0 17px !important;

    color: #675c5c !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 2.8px;

    text-transform: uppercase;
}


/* Überschrift */
.about-story-content h2 {
    max-width: 500px;

    margin: 0 0 28px !important;

    color: var(--wh45-color-petrol);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(36px, 3.5vw, 47px);
    line-height: 1.08;
    font-weight: 500;

    /*
     * Ausgewogenere Zeilenaufteilung in modernen Browsern.
     */
    text-wrap: balance;
}


/* =========================================================
   ÜBER-UNS-SEITE – RUHIGER TEXTUMBRUCH

   Entspricht dem Verhalten der BH-Beratungsseite:
   - keine automatische Silbentrennung
   - keine Worttrennung mitten im Wort
   - etwas breitere, ruhigere Textzeilen
========================================================= */


/* Allgemeine Absätze */

.about-story-content p {
    width: 100%;
    max-width: 60ch;

    margin-top: 0;
    margin-bottom: 22px;

    color: var(--wh45-color-text-soft);

    font-size: 16px;
    line-height: 1.72;
    font-weight: 400;

    hyphens: none !important;
    -webkit-hyphens: none !important;

    word-break: normal !important;
    overflow-wrap: normal !important;

    text-wrap: pretty;
}


/* Hervorgehobener erster Absatz */

.about-story-content .about-story-intro {
    width: 100%;
    max-width: 58ch;

    margin-bottom: 28px;

    color: var(--wh45-color-text);

    font-size: 17px;
    line-height: 1.7;
    font-weight: 500;

    hyphens: none !important;
    -webkit-hyphens: none !important;

    word-break: normal !important;
    overflow-wrap: normal !important;

    text-wrap: pretty;
}


/* Kleine optische Trennung nach dem Einleitungsabsatz */

.about-story-content
.about-story-intro + p {
    padding-top: 2px;
}


/* Letzter Absatz ohne zusätzlichen Abstand */

.about-story-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   RECHTE GALERIESPALTE
========================================================= */

.about-story-gallery,
.about-story-gallery > *,
.about-story-gallery .panel-widget-style,
.about-story-gallery .so-widget-sow-editor,
.about-story-gallery .siteorigin-widget-tinymce,
.about-story-gallery .textwidget {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

    box-sizing: border-box;
}


/* Asymmetrisches Galerieraster */
.about-gallery-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.32fr)
        minmax(0, 0.68fr);

    grid-template-rows:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    width: 100%;
    height: var(--about-story-gallery-height);

    filter:
        drop-shadow(
            0 14px 28px
            rgba(75, 61, 61, 0.08)
        );

    box-sizing: border-box;
}


/* Einzelne Bildflächen */
.about-gallery-item {
    position: relative;

    min-width: 0;
    min-height: 0;

    margin: 0;

    overflow: hidden;

    background: var(--wh45-color-footer);
    border-radius: 10px;

    box-sizing: border-box;
}


/* Hauptbild über zwei Zeilen */
.about-gallery-main {
    grid-row: 1 / 3;
}


/* Bilder */
.about-gallery-item img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    object-fit: cover;
    object-position: center;

    border-radius: 0 !important;

    transition: transform 0.45s ease;

    box-sizing: border-box;
}


/* Dezenter Mouse-over-Effekt */
@media (hover: hover) {

    .about-gallery-item:hover img {
        transform: scale(1.035);
    }
}


/* =========================================================
   TABLET
   Text und Galerie untereinander
========================================================= */

@media (max-width: 1024px) {

    .about-story-row {
        --about-story-distance: 36px;

        --about-story-gap: 42px;
        --about-story-padding-y: 54px;
        --about-story-padding-x: 32px;
        --about-story-gallery-height: 440px;

        grid-template-columns: 1fr;
    }


    .about-story-content {
        max-width: 760px;

        margin-right: auto;
        margin-left: auto;
    }


    .about-story-content h2 {
        max-width: 680px;

        font-size: clamp(33px, 5vw, 43px);
    }


    .about-story-content p {
        max-width: 65ch;
    }


    .about-story-gallery {
        width: 100% !important;
        max-width: 820px;

        margin-right: auto !important;
        margin-left: auto !important;
    }
}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 600px) {

    .about-story-row {
        --about-story-distance: 26px;

        --about-story-gap: 32px;
        --about-story-padding-y: 40px;
        --about-story-padding-x: 18px;

        border-radius: 8px 8px 0 0;
    }


    .about-story-content {
        max-width: 100%;
        padding-left: 18px;
    }


    .about-story-kicker {
        margin-bottom: 14px !important;

        font-size: 11px !important;
        letter-spacing: 2.3px;
    }


    .about-story-content h2 {
        margin-bottom: 23px !important;

        font-size: 30px;
        line-height: 1.13;

        text-wrap: pretty;
    }


    .about-story-content p {
        max-width: none;

        margin-bottom: 19px;

        font-size: 15px;
        line-height: 1.7;
    }


    .about-story-content .about-story-intro {
        margin-bottom: 24px;

        font-size: 16px;
        line-height: 1.67;
    }


    /* Galerie mobil untereinander */
    .about-gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;

        gap: 12px;

        height: auto;

        filter:
            drop-shadow(
                0 10px 20px
                rgba(75, 61, 61, 0.07)
            );
    }


    .about-gallery-main {
        grid-row: auto;
        aspect-ratio: 16 / 10;
    }


    .about-gallery-item {
        aspect-ratio: 4 / 3;
        border-radius: 8px;
    }
}


/* =========================================================
   KLEINE SMARTPHONES
========================================================= */

@media (max-width: 480px) {

    .about-story-row {
        --about-story-distance: 22px;
        --about-story-padding-y: 34px;
        --about-story-padding-x: 14px;
    }


    .about-story-content h2 {
        font-size: 27px;
    }
}


/* =========================================================
   BH-BERATUNGSSEITE – TEXT UND HOCHFORMATBILD

   SiteOrigin:
   Row ID:        bh-beratung
   Row Class:     bh-story-row

   Linkes Editor-Widget:
   bh-story-copy

   Rechtes Image-Widget:
   bh-story-media

   Desktop:
   - Text links
   - Hochformatbild rechts
   - Bild füllt die komplette Spaltenhöhe
   - ruhige, natürliche Textumbrüche

   Tablet und Smartphone:
   - Text zuerst
   - Bild darunter
========================================================= */


/* =========================================================
   BH-STORY – GRUNDLAYOUT / DESKTOP
========================================================= */

.bh-story-row {
    /* Abstand zur vorherigen Row */
    --bh-story-distance: 28px;

    /* Innenabstände und Spaltenabstand */
    --bh-story-gap: 46px;
    --bh-story-padding-y: 64px;
    --bh-story-padding-x: 42px;

    --bh-story-radius: 10px;

    display: grid !important;

    /*
     * Text erhält mehr Breite als das Hochformatbild.
     * Dadurch entstehen ruhigere Fließtextzeilen.
     */
    grid-template-columns:
        minmax(0, 1.32fr)
        minmax(300px, 0.68fr);

    align-items: stretch !important;
    gap: var(--bh-story-gap);

    width: 100% !important;
    max-width: var(--wh45-content-width) !important;

    margin:
        var(--bh-story-distance)
        auto
        0 !important;

    padding:
        var(--bh-story-padding-y)
        var(--bh-story-padding-x) !important;

    background: var(--wh45-color-background);

    border-radius:
        var(--bh-story-radius)
        var(--bh-story-radius)
        0
        0;

    box-sizing: border-box;
}


/* =========================================================
   SITEORIGIN-SPALTEN ZURÜCKSETZEN
========================================================= */

.bh-story-row > .panel-grid-cell,
.bh-story-row .panel-grid-cell {
    min-width: 0 !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box;
}


/* =========================================================
   LINKE TEXTSPALTE
========================================================= */

.bh-story-row .panel-grid-cell:first-child {
    display: flex !important;
    align-items: flex-start !important;

    min-width: 0 !important;
}


/* Editor-Widget und SiteOrigin-Innenwrapper neutralisieren */
.bh-story-copy,
.bh-story-copy > *,
.bh-story-copy .panel-widget-style,
.bh-story-copy .so-widget-sow-editor,
.bh-story-copy .siteorigin-widget-tinymce,
.bh-story-copy .textwidget {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

    box-sizing: border-box;
}


/* =========================================================
   INNERER TEXTCONTAINER
========================================================= */

.bh-story-content {
    position: relative;

    width: 100%;
    max-width: 650px;

    margin: 0;
    padding: 0 0 0 24px;

    box-sizing: border-box;
}


/* Dezente rosa Akzentlinie */
.bh-story-content::before {
    content: "";

    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;

    width: 3px;

    background:
        linear-gradient(
            to bottom,
            var(--wh45-color-rose) 0%,
            rgba(215, 154, 160, 0.18) 100%
        );

    border-radius: 3px;
}


/* =========================================================
   KICKER
========================================================= */

.bh-story-kicker {
    margin: 0 0 17px !important;
    padding: 0 !important;

    color: #675c5c !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 2.8px;

    text-transform: uppercase;
}


/* =========================================================
   ÜBERSCHRIFT
========================================================= */

.bh-story-content h2 {
    width: 100%;
    max-width: 590px;

    margin: 0 0 28px !important;

    color: var(--wh45-color-petrol);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(36px, 3.4vw, 47px);
    line-height: 1.09;
    font-weight: 500;

    text-wrap: balance;
}


/* =========================================================
   FLIESSTEXT
========================================================= */

.bh-story-content p {
    width: 100%;
    max-width: 60ch;

    margin-top: 0;
    margin-bottom: 22px;

    color: var(--wh45-color-text-soft);

    font-size: 16px;
    line-height: 1.72;
    font-weight: 400;

    /*
     * Keine automatischen Worttrennungen wie
     * „be-gleitet“ oder „Pro-portionen“.
     */
    hyphens: none !important;
    -webkit-hyphens: none !important;

    word-break: normal !important;
    overflow-wrap: normal !important;

    text-wrap: pretty;
}


/* Hervorgehobener erster Absatz */
.bh-story-content .bh-story-intro {
    max-width: 58ch;

    margin-bottom: 28px;

    color: var(--wh45-color-text);

    font-size: 17px;
    line-height: 1.7;
    font-weight: 500;
}


/* Letzter Absatz ohne zusätzlichen unteren Abstand */
.bh-story-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   RECHTE SPALTE – HOCHFORMATBILD
========================================================= */

.bh-story-row .panel-grid-cell:nth-child(2) {
    display: flex !important;
    align-items: stretch !important;
    align-self: stretch !important;

    min-width: 0 !important;

    overflow: hidden;
}


/*
 * Sämtliche SiteOrigin-Bildwrapper auf die vollständige
 * Höhe der rechten Spalte strecken.
 */
.bh-story-media,
.bh-story-media > *,
.bh-story-media .panel-widget-style,
.bh-story-media .so-widget-sow-image,
.bh-story-media .sow-image-container,
.bh-story-media .sow-image-container > a {
    display: flex !important;
    flex: 1 1 auto !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 560px !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

    overflow: hidden;

    box-sizing: border-box;
}


/* Eigentliches Bild */
.bh-story-media img,
.bh-story-media .sow-image-container img {
    display: block !important;
    flex: 1 1 auto !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 560px !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 10px !important;

    box-shadow:
        0 14px 30px
        rgba(75, 61, 61, 0.09);

    box-sizing: border-box;
}


/* =========================================================
   TABLET QUER
   901 BIS 1024 PIXEL
========================================================= */

@media (min-width: 901px) and (max-width: 1024px) {

    .bh-story-row {
        --bh-story-distance: 24px;
        --bh-story-gap: 32px;
        --bh-story-padding-y: 52px;
        --bh-story-padding-x: 30px;

        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(280px, 0.8fr);
    }


    .bh-story-content {
        max-width: 600px;
    }


    .bh-story-content h2 {
        max-width: 550px;

        font-size: clamp(33px, 4.5vw, 42px);
    }


    .bh-story-content p {
        max-width: 58ch;

        font-size: 15.5px;
        line-height: 1.7;
    }


    .bh-story-media,
    .bh-story-media > *,
    .bh-story-media .panel-widget-style,
    .bh-story-media .so-widget-sow-image,
    .bh-story-media .sow-image-container,
    .bh-story-media .sow-image-container > a,
    .bh-story-media img,
    .bh-story-media .sow-image-container img {
        min-height: 520px !important;
    }
}


/* =========================================================
   TABLET HOCHKANT UND KLEINERE GERÄTE
   Text und Bild untereinander
========================================================= */

@media (max-width: 900px) {

    .bh-story-row {
        --bh-story-distance: 22px;
        --bh-story-gap: 38px;
        --bh-story-padding-y: 50px;
        --bh-story-padding-x: 28px;

        display: grid !important;
        grid-template-columns: 1fr;

        align-items: stretch !important;
    }


    .bh-story-content {
        max-width: 760px;

        margin-right: auto;
        margin-left: auto;
    }


    .bh-story-content h2 {
        max-width: 680px;

        font-size: clamp(33px, 5vw, 43px);
    }


    .bh-story-content p,
    .bh-story-content .bh-story-intro {
        max-width: 65ch;
    }


    /*
     * Hochformatbild unterhalb des Textes zentrieren.
     */
    .bh-story-row .panel-grid-cell:nth-child(2) {
        width: 100% !important;
        max-width: 520px !important;

        margin-right: auto !important;
        margin-left: auto !important;
    }


    .bh-story-media,
    .bh-story-media > *,
    .bh-story-media .panel-widget-style,
    .bh-story-media .so-widget-sow-image,
    .bh-story-media .sow-image-container,
    .bh-story-media .sow-image-container > a {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
    }


    .bh-story-media img,
    .bh-story-media .sow-image-container img {
        width: 100% !important;
        height: auto !important;

        min-height: 0 !important;

        aspect-ratio: 4 / 5;

        object-fit: cover !important;
        object-position: center !important;
    }
}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 600px) {

    .bh-story-row {
        --bh-story-distance: 18px;
        --bh-story-gap: 30px;
        --bh-story-padding-y: 40px;
        --bh-story-padding-x: 18px;

        border-radius: 8px 8px 0 0;
    }


    .bh-story-content {
        max-width: 100%;
        padding-left: 18px;
    }


    .bh-story-kicker {
        margin-bottom: 14px !important;

        font-size: 11px !important;
        letter-spacing: 2.3px;
    }


    .bh-story-content h2 {
        margin-bottom: 23px !important;

        font-size: 30px;
        line-height: 1.13;

        text-wrap: pretty;
    }


    .bh-story-content p {
        max-width: none;

        margin-bottom: 20px;

        font-size: 15px;
        line-height: 1.68;
    }


    .bh-story-content .bh-story-intro {
        max-width: none;

        margin-bottom: 25px;

        font-size: 16px;
        line-height: 1.67;
    }


    .bh-story-row .panel-grid-cell:nth-child(2) {
        max-width: 440px !important;
    }
}


/* =========================================================
   KLEINE SMARTPHONES
========================================================= */

@media (max-width: 480px) {

    .bh-story-row {
        --bh-story-distance: 16px;
        --bh-story-padding-y: 34px;
        --bh-story-padding-x: 14px;
    }


    .bh-story-content h2 {
        font-size: 27px;
    }
}


/* =========================================================
   KOLLEKTIONEN-SEITE – INTRO FINAL

   SiteOrigin:
   Row ID:        kollektionen-intro
   Row Class:     collections-intro-row
   Editor-Klasse: collections-intro-copy

   Inhalt:
   - Kicker
   - H1
   - kurzer Einleitungstext
   - keine Buttons
========================================================= */


/* =========================================================
   INTRO-ROW – DESKTOP
========================================================= */

.collections-intro-row {
    --collections-intro-height: 220px;
    --collections-intro-padding-y: 30px;
    --collections-intro-padding-x: 42px;
    --collections-intro-radius: 14px;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: var(--wh45-content-width) !important;

    min-height: var(--collections-intro-height);

    margin: 0 auto !important;

    padding:
        var(--collections-intro-padding-y)
        var(--collections-intro-padding-x) !important;

    background-color: var(--wh45-color-rose-light) !important;

    background-image:
        radial-gradient(
            circle at 12% 8%,
            rgba(255, 255, 255, 0.76) 0%,
            rgba(255, 255, 255, 0) 38%
        ),
        radial-gradient(
            circle at 90% 88%,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0) 34%
        ),
        linear-gradient(
            135deg,
            #fbf7f5 0%,
            var(--wh45-color-rose-light) 52%,
            #f0dfe1 100%
        ) !important;

    border-radius:
        0
        0
        var(--collections-intro-radius)
        var(--collections-intro-radius) !important;

    overflow: hidden;
    box-sizing: border-box;
}


/* =========================================================
   SITEORIGIN-ZELLE BEREINIGEN
========================================================= */

.collections-intro-row > .panel-grid-cell,
.collections-intro-row .panel-grid-cell {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    box-sizing: border-box;
}


/* =========================================================
   EDITOR-WIDGET UND INNERE WRAPPER
========================================================= */

.collections-intro-copy,
.collections-intro-copy > *,
.collections-intro-copy .panel-widget-style,
.collections-intro-copy .so-widget-sow-editor,
.collections-intro-copy .siteorigin-widget-tinymce,
.collections-intro-copy .textwidget {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

    box-sizing: border-box;
}


/* =========================================================
   INNERER INHALTSBEREICH
========================================================= */

.collections-intro-content {
    width: 100%;
    max-width: 900px;

    margin: 0 auto;
    padding: 0;

    text-align: center;

    box-sizing: border-box;
}


/* =========================================================
   KICKER
========================================================= */

.collections-intro-kicker {
    margin: 0 0 11px !important;
    padding: 0 !important;

    color: var(--wh45-color-rose-dark);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 2.8px;

    text-align: center;
    text-transform: uppercase;
}


/* =========================================================
   HAUPTÜBERSCHRIFT
========================================================= */

.collections-intro-content h1 {
    margin: 0 0 15px !important;
    padding: 0 !important;

    color: var(--wh45-color-petrol);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.05;
    font-weight: 500;

    text-align: center;
    text-wrap: balance;
}


/* =========================================================
   EINLEITUNGSTEXT
   Bewusst schmaler für ruhigere Zeilen
========================================================= */

.collections-intro-lead {
    width: 100%;
    max-width: 56ch;

    margin: 0 auto !important;
    padding: 0 !important;

    color: var(--wh45-color-text-soft);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.62;
    font-weight: 400;

    text-align: center;
    text-wrap: balance;

    hyphens: none !important;
    -webkit-hyphens: none !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
}


/* =========================================================
   TABLET
   601 BIS 1024 PIXEL
========================================================= */

@media (min-width: 601px) and (max-width: 1024px) {

    .collections-intro-row {
        --collections-intro-height: auto;
        --collections-intro-padding-y: 28px;
        --collections-intro-padding-x: 30px;
        --collections-intro-radius: 12px;
    }

    .collections-intro-content {
        max-width: 780px;
    }

    .collections-intro-content h1 {
        margin-bottom: 14px !important;

        font-size: clamp(36px, 5vw, 48px);
    }

    .collections-intro-lead {
        max-width: 52ch;

        font-size: 15.5px;
        line-height: 1.62;
    }
}


/* =========================================================
   SMARTPHONE
   BIS 600 PIXEL
========================================================= */

@media (max-width: 600px) {

    .collections-intro-row {
        --collections-intro-height: auto;
        --collections-intro-padding-y: 26px;
        --collections-intro-padding-x: 18px;
        --collections-intro-radius: 10px;
    }

    .collections-intro-content {
        max-width: 100%;
    }

    .collections-intro-kicker {
        margin-bottom: 10px !important;

        font-size: 10px;
        line-height: 1.2;
        letter-spacing: 2.2px;
    }

    .collections-intro-content h1 {
        margin-bottom: 13px !important;

        font-size: 34px;
        line-height: 1.08;
    }

    .collections-intro-lead {
        max-width: 34ch;

        font-size: 15px;
        line-height: 1.62;
    }
}


/* =========================================================
   KLEINE SMARTPHONES
   BIS 480 PIXEL
========================================================= */

@media (max-width: 480px) {

    .collections-intro-row {
        --collections-intro-padding-y: 23px;
        --collections-intro-padding-x: 14px;
    }

    .collections-intro-content h1 {
        font-size: 30px;
    }

    .collections-intro-lead {
        max-width: 31ch;

        font-size: 14.5px;
        line-height: 1.6;
    }
}


/* =========================================================
   KOLLEKTIONEN-SEITE – SAISON-GALERIE

   Frühling/Sommer:
   Row ID:    fruehling-sommer
   Row Class: season-gallery-row season-spring-summer

   Herbst/Winter:
   Row ID:    herbst-winter
   Row Class: season-gallery-row season-autumn-winter is-reversed

   Editor-Widget:
   season-gallery-widget
========================================================= */


/* =========================================================
   SAISON-ROW – GRUNDDESIGN
========================================================= */

.season-gallery-row {
    --season-distance: 28px;
    --season-padding-y: 58px;
    --season-padding-x: 42px;
    --season-gallery-gap: 14px;
    --season-gallery-height: 620px;
    --season-radius: 10px;

    width: 100% !important;
    max-width: var(--wh45-content-width) !important;

    margin:
        var(--season-distance)
        auto
        0 !important;

    padding:
        var(--season-padding-y)
        var(--season-padding-x) !important;

    background: var(--wh45-color-background);

    border-radius:
        var(--season-radius)
        var(--season-radius)
        0
        0;

    box-sizing: border-box;
}


/* Herbst/Winter erhält eine etwas kühlere Hintergrundnuance */
.season-autumn-winter {
    background: #f4f3f2;
}


/* =========================================================
   SITEORIGIN-ZELLE UND EDITOR BEREINIGEN
========================================================= */

.season-gallery-row > .panel-grid-cell,
.season-gallery-row .panel-grid-cell {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box;
}


.season-gallery-widget,
.season-gallery-widget > *,
.season-gallery-widget .panel-widget-style,
.season-gallery-widget .so-widget-sow-editor,
.season-gallery-widget .siteorigin-widget-tinymce,
.season-gallery-widget .textwidget {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

    box-sizing: border-box;
}


/* =========================================================
   INNERER SAISON-INHALT
========================================================= */

.season-gallery-content {
    width: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   SAISON-KOPFBEREICH
========================================================= */

.season-gallery-header {
    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(320px, 1.2fr);

    align-items: end;

    gap: 42px;

    width: 100%;

    margin: 0 0 34px;
    padding: 0;
}


.season-gallery-heading {
    min-width: 0;
}


/* Kleine Saisonangabe */
.season-gallery-kicker {
    margin: 0 0 10px !important;
    padding: 0 !important;

    color: var(--wh45-color-rose-dark);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 2.8px;

    text-transform: uppercase;
}


/* Saisonüberschrift */
.season-gallery-header h2 {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--wh45-color-petrol);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.05;
    font-weight: 500;

    text-wrap: balance;
}


/* Saisonbeschreibung */
.season-gallery-intro {
    width: 100%;
    max-width: 54ch;

    margin: 0 0 4px auto !important;
    padding: 0 !important;

    color: var(--wh45-color-text-soft);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.68;
    font-weight: 400;

    hyphens: none;
    -webkit-hyphens: none;

    word-break: normal;
    overflow-wrap: normal;
    text-wrap: pretty;
}


/* =========================================================
   EDITORIALE GALERIE – DESKTOP
========================================================= */

.season-gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    grid-template-rows:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(150px, 0.8fr);

    gap: var(--season-gallery-gap);

    width: 100%;
    height: var(--season-gallery-height);

    box-sizing: border-box;
}


/* Großes Hauptmotiv */
.season-gallery-main {
    grid-column: 1 / 8;
    grid-row: 1 / 3;
}


/* Zwei kleinere Motive rechts */
.season-gallery-side-top {
    grid-column: 8 / 13;
    grid-row: 1;
}


.season-gallery-side-bottom {
    grid-column: 8 / 13;
    grid-row: 2;
}


/* Zwei horizontale Motive unten */
.season-gallery-wide-left {
    grid-column: 1 / 7;
    grid-row: 3;
}


.season-gallery-wide-right {
    grid-column: 7 / 13;
    grid-row: 3;
}


/* Herbst-/Winter-Galerie spiegeln */
.season-gallery-row.is-reversed .season-gallery-main {
    grid-column: 6 / 13;
}


.season-gallery-row.is-reversed .season-gallery-side-top,
.season-gallery-row.is-reversed .season-gallery-side-bottom {
    grid-column: 1 / 6;
}


/* =========================================================
   EINZELNE BILDFLÄCHEN
========================================================= */

.season-gallery-item {
    position: relative;

    min-width: 0;
    min-height: 0;

    margin: 0;

    overflow: hidden;

    background: var(--wh45-color-footer);

    border-radius: 9px;

    box-shadow:
        0 10px 24px
        rgba(75, 61, 61, 0.07);

    box-sizing: border-box;
}


.season-gallery-item img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover;
    object-position: center;

    border-radius: 0 !important;

    transition:
        transform 0.5s ease,
        filter 0.5s ease;

    box-sizing: border-box;
}


/* Verlauf für lesbare Markenangaben */
.season-gallery-item::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 42%;

    background:
        linear-gradient(
            to top,
            rgba(33, 28, 28, 0.56) 0%,
            rgba(33, 28, 28, 0) 100%
        );

    pointer-events: none;
}


/* =========================================================
   BILDBESCHRIFTUNGEN
========================================================= */

.season-gallery-item figcaption {
    position: absolute;
    z-index: 2;

    right: 18px;
    bottom: 15px;
    left: 18px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 12px;

    color: var(--wh45-color-white);
}


.season-gallery-item figcaption span {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.season-gallery-item figcaption small {
    font-size: 11px;
    line-height: 1.2;
    font-weight: 400;
}


/* =========================================================
   HOVER NUR AUF GERÄTEN MIT MAUS
========================================================= */

@media (hover: hover) {

    .season-gallery-item:hover img {
        transform: scale(1.035);
        filter: saturate(1.04);
    }
}


/* =========================================================
   TABLET
   Kopfbereich untereinander, Galerie bleibt zweispaltig
========================================================= */

@media (max-width: 1024px) {

    .season-gallery-row {
        --season-distance: 24px;
        --season-padding-y: 50px;
        --season-padding-x: 30px;
        --season-gallery-height: 570px;
    }


    .season-gallery-header {
        grid-template-columns: 1fr;

        /*
         * Abstand zwischen Überschrift und Beschreibung.
         */
        gap: 14px;

        margin-bottom: 28px;
    }


    .season-gallery-intro {
        max-width: 62ch;

        margin-left: 0 !important;
    }


    .season-gallery-header h2 {
        font-size: clamp(35px, 5vw, 47px);
    }
}


/* =========================================================
   SCHMALERE TABLETS
========================================================= */

@media (max-width: 760px) {

    .season-gallery-row {
        --season-distance: 20px;
        --season-padding-y: 42px;
        --season-padding-x: 20px;
        --season-gallery-gap: 12px;
        --season-gallery-height: auto;
    }


    .season-gallery-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows: none;

        height: auto;
    }


    .season-gallery-main,
    .season-gallery-row.is-reversed .season-gallery-main {
        grid-column: 1 / 3;
        grid-row: auto;

        aspect-ratio: 16 / 10;
    }


    .season-gallery-side-top,
    .season-gallery-side-bottom,
    .season-gallery-row.is-reversed .season-gallery-side-top,
    .season-gallery-row.is-reversed .season-gallery-side-bottom {
        grid-column: auto;
        grid-row: auto;

        aspect-ratio: 4 / 5;
    }


    .season-gallery-wide-left,
    .season-gallery-wide-right {
        grid-column: auto;
        grid-row: auto;

        aspect-ratio: 4 / 3;
    }
}


/* =========================================================
   SMARTPHONE
   Alle Bilder untereinander
========================================================= */

@media (max-width: 560px) {

    .season-gallery-row {
        --season-distance: 18px;
        --season-padding-y: 36px;
        --season-padding-x: 15px;
        --season-gallery-gap: 11px;

        border-radius: 8px 8px 0 0;
    }


    .season-gallery-header {
        /*
         * Vorher 14px.
         * Mobil jetzt um 5px auf 9px reduziert.
         */
        gap: 9px;

        /*
         * Abstand vom Beschreibungstext zur Galerie
         * bleibt unverändert.
         */
        margin-bottom: 24px;
    }


    .season-gallery-kicker {
        font-size: 10px;
        letter-spacing: 2.2px;
    }


    .season-gallery-header h2 {
        font-size: 32px;
        line-height: 1.08;
    }


    .season-gallery-intro {
        max-width: none;

        font-size: 15px;
        line-height: 1.62;
    }


    .season-gallery-grid {
        grid-template-columns: 1fr;
    }


    .season-gallery-main,
    .season-gallery-side-top,
    .season-gallery-side-bottom,
    .season-gallery-wide-left,
    .season-gallery-wide-right,
    .season-gallery-row.is-reversed .season-gallery-main,
    .season-gallery-row.is-reversed .season-gallery-side-top,
    .season-gallery-row.is-reversed .season-gallery-side-bottom {
        grid-column: auto;
        grid-row: auto;

        aspect-ratio: 4 / 3;
    }


    .season-gallery-main,
    .season-gallery-row.is-reversed .season-gallery-main {
        aspect-ratio: 16 / 10;
    }


    .season-gallery-item figcaption {
        right: 14px;
        bottom: 12px;
        left: 14px;
    }
}


/* =========================================================
   KLEINE SMARTPHONES
========================================================= */

@media (max-width: 480px) {

    .season-gallery-row {
        --season-padding-y: 32px;
        --season-padding-x: 13px;
    }


    .season-gallery-header h2 {
        font-size: 29px;
    }
}


/* =========================================================
   KOLLEKTIONEN – LETZTE FEINABSTIMMUNGEN

   1. Saisonüberschrift auf Desktop einzeilig
   2. Bessere Lesbarkeit der Bildbeschriftungen
   3. Individuelle Steuerung des Bildausschnitts
========================================================= */


/* =========================================================
   1. SAISONÜBERSCHRIFT AUF DESKTOP EINZEILIG
========================================================= */

@media (min-width: 1025px) {

    .season-gallery-header {
        grid-template-columns:
            minmax(420px, 0.95fr)
            minmax(360px, 1.05fr);

        gap: 48px;
    }

    .season-gallery-header h2 {
        white-space: nowrap;
    }
}


/* =========================================================
   2. BILDBESCHRIFTUNGEN ALS DEZENTE LABELS

   Das Label bleibt auch auf hellen oder unruhigen
   Herstellerbildern gut lesbar.
========================================================= */

.season-gallery-item figcaption {
    align-items: center;
}


/* Markenbezeichnung */

.season-gallery-item figcaption span {
    display: inline-flex;
    align-items: center;

    padding: 5px 9px;

    background: rgba(32, 28, 28, 0.58);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 3px;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.10);

    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);

    color: var(--wh45-color-white);
}


/* Saisonangabe beim Hauptbild */

.season-gallery-item figcaption small {
    display: inline-flex;
    align-items: center;

    padding: 4px 7px;

    background: rgba(32, 28, 28, 0.48);

    border-radius: 3px;

    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);

    color: var(--wh45-color-white);
}


/* Auf Smartphones etwas kompakter */

@media (max-width: 560px) {

    .season-gallery-item figcaption span {
        padding: 4px 7px;

        font-size: 11px;
        letter-spacing: 1px;
    }

    .season-gallery-item figcaption small {
        padding: 3px 6px;

        font-size: 10px;
    }
}


/* =========================================================
   3. BILDAUSSCHNITT INDIVIDUELL STEUERN

   Die jeweilige Klasse wird am -Element ergänzt.
========================================================= */

.season-gallery-item img {
    object-position:
        var(--season-image-position, center center);
}


/* Motiv weiter oben zeigen */

.season-gallery-item.image-focus-top {
    --season-image-position: center top;
}


/* Motiv weiter unten zeigen */

.season-gallery-item.image-focus-bottom {
    --season-image-position: center bottom;
}


/* Motiv weiter links zeigen */

.season-gallery-item.image-focus-left {
    --season-image-position: left center;
}


/* Motiv weiter rechts zeigen */

.season-gallery-item.image-focus-right {
    --season-image-position: right center;
}


/* Kombinationen */

.season-gallery-item.image-focus-top-left {
    --season-image-position: left top;
}

.season-gallery-item.image-focus-top-right {
    --season-image-position: right top;
}

.season-gallery-item.image-focus-bottom-left {
    --season-image-position: left bottom;
}

.season-gallery-item.image-focus-bottom-right {
    --season-image-position: right bottom;
}


/* =========================================================
   KOLLEKTIONEN-SEITE – KOMPAKTER CTA-BLOCK

   SiteOrigin:
   Row ID:        kollektionen-kontakt
   Row Class:     collections-cta-row
   Editor-Klasse: collections-cta-widget

   Position:
   Direkt unter der Herbst-/Winter-Galerie
   und unmittelbar vor dem Footer
========================================================= */


/* =========================================================
   CTA-ROW – DESKTOP
========================================================= */

.collections-cta-row {
    /* Abstand zur vorherigen Saison-Galerie */
    --collections-cta-distance: 24px;

    --collections-cta-padding-y: 38px;
    --collections-cta-padding-x: 42px;
    --collections-cta-radius: 14px;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: var(--wh45-content-width) !important;

    margin:
        var(--collections-cta-distance)
        auto
        0 !important;

    padding:
        var(--collections-cta-padding-y)
        var(--collections-cta-padding-x) !important;

    /*
     * Sanfter Rosé-Verlauf mit dezenten Lichtflächen.
     */
    background-color: var(--wh45-color-rose) !important;

    background-image:
        radial-gradient(
            circle at 15% 12%,
            rgba(255, 255, 255, 0.24) 0%,
            rgba(255, 255, 255, 0) 36%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0) 34%
        ),
        linear-gradient(
            135deg,
            #d08b93 0%,
            #dda1a6 50%,
            #c98089 100%
        ) !important;

    /*
     * Da direkt danach der Footer folgt:
     * oben rund, unten gerade.
     */
    border-radius:
        var(--collections-cta-radius)
        var(--collections-cta-radius)
        0
        0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(90, 45, 50, 0.08);

    overflow: hidden;
    box-sizing: border-box;
}


/* =========================================================
   SITEORIGIN-ZELLE BEREINIGEN
========================================================= */

.collections-cta-row > .panel-grid-cell,
.collections-cta-row .panel-grid-cell {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    box-sizing: border-box;
}


/* =========================================================
   EDITOR-WIDGET UND INNERE WRAPPER
========================================================= */

.collections-cta-widget,
.collections-cta-widget > *,
.collections-cta-widget .panel-widget-style,
.collections-cta-widget .so-widget-sow-editor,
.collections-cta-widget .siteorigin-widget-tinymce,
.collections-cta-widget .textwidget {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

    box-sizing: border-box;
}


/* =========================================================
   INNERER CTA-INHALT
========================================================= */

.collections-cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    max-width: 820px;

    margin: 0 auto;
    padding: 0;

    text-align: center;
    box-sizing: border-box;
}


/* =========================================================
   KICKER
========================================================= */

.collections-cta-kicker {
    margin: 0 0 10px !important;
    padding: 0 !important;

    color: #5b4143;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 2.8px;

    text-align: center;
    text-transform: uppercase;
}


/* =========================================================
   CTA-ÜBERSCHRIFT
========================================================= */

.collections-cta-content h2 {
    max-width: 760px;

    margin: 0 0 14px !important;
    padding: 0 !important;

    color: var(--wh45-color-petrol);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(34px, 3.8vw, 48px);
    line-height: 1.08;
    font-weight: 500;

    text-align: center;
    text-wrap: balance;
}


/* =========================================================
   CTA-TEXT
========================================================= */

.collections-cta-text {
    width: 100%;
    max-width: 58ch;

    margin: 0 auto 22px !important;
    padding: 0 !important;

    color: #3f3031;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.65;
    font-weight: 400;

    text-align: center;
    text-wrap: pretty;

    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-break: normal !important;
}


/* =========================================================
   CTA-BUTTON
========================================================= */

.collections-cta-button,
.collections-cta-button:link,
.collections-cta-button:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 210px;
    min-height: 44px;

    margin: 0 !important;
    padding: 0 22px !important;

    background: rgba(255, 255, 255, 0.88);
    color: var(--wh45-color-petrol) !important;
    -webkit-text-fill-color: var(--wh45-color-petrol) !important;

    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 4px;

    box-sizing: border-box;

    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 1px;

    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


/* Hover, Fokus und Klick */
.collections-cta-button:hover,
.collections-cta-button:focus,
.collections-cta-button:active {
    background: var(--wh45-color-petrol);

    color: var(--wh45-color-white) !important;
    -webkit-text-fill-color: var(--wh45-color-white) !important;

    border-color: var(--wh45-color-petrol);

    text-decoration: none !important;
}


/* Leichte Bewegung nur auf Geräten mit Maus */
@media (hover: hover) {

    .collections-cta-button:hover {
        transform: translateY(-2px);
    }
}


/* Sichtbarer Tastaturfokus */
.collections-cta-button:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.68);
    outline-offset: 3px;
}


/* =========================================================
   TABLET
   601 BIS 1024 PIXEL
========================================================= */

@media (min-width: 601px) and (max-width: 1024px) {

    .collections-cta-row {
        --collections-cta-distance: 22px;
        --collections-cta-padding-y: 34px;
        --collections-cta-padding-x: 30px;
        --collections-cta-radius: 12px;
    }

    .collections-cta-content {
        max-width: 740px;
    }

    .collections-cta-content h2 {
        font-size: clamp(32px, 4.8vw, 42px);
    }

    .collections-cta-text {
        max-width: 54ch;

        font-size: 15.5px;
        line-height: 1.62;
    }
}


/* =========================================================
   SMARTPHONE
   BIS 600 PIXEL
========================================================= */

@media (max-width: 600px) {

    .collections-cta-row {
        --collections-cta-distance: 18px;
        --collections-cta-padding-y: 30px;
        --collections-cta-padding-x: 18px;
        --collections-cta-radius: 10px;
    }

    .collections-cta-kicker {
        margin-bottom: 9px !important;

        font-size: 10px;
        letter-spacing: 2.2px;
    }

    .collections-cta-content h2 {
        margin-bottom: 13px !important;

        font-size: 30px;
        line-height: 1.1;
    }

    .collections-cta-text {
        max-width: 34ch;

        margin-bottom: 20px !important;

        font-size: 15px;
        line-height: 1.6;
    }

    .collections-cta-button,
    .collections-cta-button:link,
    .collections-cta-button:visited {
        width: 100%;
        max-width: 280px;

        min-height: 44px;
    }
}


/* =========================================================
   KLEINE SMARTPHONES
   BIS 480 PIXEL
========================================================= */

@media (max-width: 480px) {

    .collections-cta-row {
        --collections-cta-padding-y: 27px;
        --collections-cta-padding-x: 14px;
    }

    .collections-cta-content h2 {
        font-size: 27px;
    }

    .collections-cta-text {
        max-width: 31ch;

        font-size: 14.5px;
        line-height: 1.58;
    }
}

/* =========================================================
   STARTSEITE – CTA-FARBDESIGN

   SiteOrigin Row Class:
   home-cta-row

   Ändert nur:
   - Hintergrund
   - Textfarben
   - Linkfarben
   - keine Abstände oder Größen
========================================================= */


/* =========================================================
   CTA-HINTERGRUND
   Gleicher Rosé-Verlauf wie beim Collections-CTA
========================================================= */

.home-cta-row {
    background-color: var(--wh45-color-rose) !important;

    background-image:
        radial-gradient(
            circle at 15% 12%,
            rgba(255, 255, 255, 0.24) 0%,
            rgba(255, 255, 255, 0) 36%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0) 34%
        ),
        linear-gradient(
            135deg,
            #d08b93 0%,
            #dda1a6 50%,
            #c98089 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(90, 45, 50, 0.08);

    overflow: hidden;
}


/* =========================================================
   SITEORIGIN-HINTERGRÜNDE TRANSPARENT HALTEN
========================================================= */

.home-cta-row > .panel-grid-cell,
.home-cta-row .panel-grid-cell,
.home-cta-row .panel-widget-style,
.home-cta-row .so-widget-sow-editor,
.home-cta-row .siteorigin-widget-tinymce,
.home-cta-row .textwidget {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}


/* =========================================================
   ÜBERSCHRIFT
========================================================= */

.home-cta-row h1,
.home-cta-row h2,
.home-cta-row h3 {
    color: var(--wh45-color-white) !important;
    -webkit-text-fill-color: var(--wh45-color-white) !important;

    text-shadow: none !important;
}


/* =========================================================
   FLIESSTEXT
========================================================= */

.home-cta-row p,
.home-cta-row li {
    color: #3f3031 !important;
    -webkit-text-fill-color: #3f3031 !important;

    text-shadow: none !important;
}


/* =========================================================
   HERVORHEBUNGEN UND CTA-LINK
========================================================= */

.home-cta-row strong,
.home-cta-row b {
    color: var(--wh45-color-petrol) !important;
    -webkit-text-fill-color: var(--wh45-color-petrol) !important;
}


.home-cta-row a,
.home-cta-row a:link,
.home-cta-row a:visited {
    color: var(--wh45-color-petrol) !important;
    -webkit-text-fill-color: var(--wh45-color-petrol) !important;

    font-weight: 700;
    text-decoration: none !important;

    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}


.home-cta-row a:hover,
.home-cta-row a:focus,
.home-cta-row a:active {
    color: var(--wh45-color-white) !important;
    -webkit-text-fill-color: var(--wh45-color-white) !important;

    text-decoration: none !important;
}


/* =========================================================
   TASTATURFOKUS
========================================================= */

.home-cta-row a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.82);
    outline-offset: 4px;
}