/* =========================================================
   Share2Camp Konfigurator – custom.css
   Version 5.1
   Alle eigenen Klassen beginnen mit s2c-
   ========================================================= */


/* =========================================================
   00 Farben
   Nur hier Farben ändern
   ========================================================= */

:root {

    /* Share2Camp */
    --s2c-primary: #00ACEE;
    --s2c-primary-hover: #101010;
    --s2c-primary-light: rgba(247, 167, 7, 0.06);

    --s2c-dark: #101010;
    --s2c-dark-light: #4a4a4a;

    --s2c-text: #222222;
    --s2c-text-light: #666666;
    --s2c-caption: #777777;

    --s2c-negative: #c62828;

    --s2c-white: #ffffff;
    --s2c-background: #f7f8fa;
    --s2c-card: #ffffff;
    --s2c-border: #dddddd;

    /* Apto.ONE */
    --main-font-1: 'Montserrat', sans-serif;

    --primary-lighter: #ffe2a3;
    --primary: var(--s2c-primary);
    --primary-darker: #b97800;
    --primary-dark: var(--s2c-dark);

    --color-primary: var(--s2c-primary);
    --color-primary-hover: var(--s2c-primary-hover);
    --color-accent: var(--s2c-dark);
    --color-accent-contrast: var(--s2c-white);

    --color-details: #f2f2f2;
    --color-warn: var(--s2c-negative);
    --color-title: var(--s2c-text);
    --color-text: var(--s2c-text-light);
    --color-info-text: var(--s2c-caption);

    --color-optic-lines: var(--s2c-primary);
    --color-optic-lines-popup-light: #ffe2a3;
    --color-optic-lines-popup: var(--s2c-primary);

    --color-optic-lines-popup-warning-light: #fbf3c7;
    --color-optic-lines-popup-warning: #f4e070;
    --color-optic-lines-popup-error-light: #f2c6c3;
    --color-optic-lines-popup-error: var(--s2c-negative);

    --color-completed: #79ba92;
    --color-background: var(--s2c-background);
    --color-background-card: var(--s2c-card);
    --color-background-card-hover: #f4f4f4;
    --color-background-header: var(--s2c-white);
    --color-background-footer: #e7e6eb;
    --color-background-sidebar: var(--s2c-white);
    --color-background-completed: #e5f6ee;
    --color-background-image: #e9e9eb;

    --color-border-outline: var(--s2c-dark-light);
    --color-border-dimensions: #707070;
    --color-border-selected: var(--s2c-dark);
    --color-border-input: #d6d6d6;
    --color-border: var(--s2c-border);
    --color-ripple-control: #898989;
}


/* =========================================================
   01 Apto.ONE Farbvariablen
   Variablen direkt am Konfigurator bereitstellen
   ========================================================= */

#shop-template-apto {

    --main-font-1: 'Montserrat', sans-serif;

    --primary-lighter: #ffe2a3;
    --primary: var(--s2c-primary);
    --primary-darker: #b97800;
    --primary-dark: var(--s2c-dark);

    --color-primary: var(--s2c-primary);
    --color-primary-hover: var(--s2c-primary-hover);
    --color-accent: var(--s2c-dark);
    --color-accent-contrast: var(--s2c-white);

    --color-details: #f2f2f2;
    --color-warn: var(--s2c-negative);
    --color-title: var(--s2c-text);
    --color-text: var(--s2c-text-light);
    --color-info-text: var(--s2c-caption);

    --color-optic-lines: var(--s2c-primary);
    --color-optic-lines-popup-light: #ffe2a3;
    --color-optic-lines-popup: var(--s2c-primary);

    --color-optic-lines-popup-warning-light: #fbf3c7;
    --color-optic-lines-popup-warning: #f4e070;
    --color-optic-lines-popup-error-light: #f2c6c3;
    --color-optic-lines-popup-error: var(--s2c-negative);

    --color-completed: #79ba92;
    --color-background: var(--s2c-background);
    --color-background-card: var(--s2c-card);
    --color-background-card-hover: #f4f4f4;
    --color-background-header: var(--s2c-white);
    --color-background-footer: #e7e6eb;
    --color-background-sidebar: var(--s2c-white);
    --color-background-completed: #e5f6ee;
    --color-background-image: #e9e9eb;

    --color-border-outline: var(--s2c-dark-light);
    --color-border-dimensions: #707070;
    --color-border-selected: var(--s2c-dark);
    --color-border-input: #d6d6d6;
    --color-border: var(--s2c-border);
    --color-ripple-control: #898989;
}





/* ==========================================================
   Share2Camp / BRAVIA Hamburg
   Einleitungselement über die Klasse .s2c-intro
   ----------------------------------------------------------
   Nur Apto-Hinweiselemente, deren Beschreibung einen
   Container mit der Klasse .s2c-intro enthält, werden
   ohne Kasten als Einleitung dargestellt.

   Normale Hinweise und Optionsfelder bleiben unverändert.
   ========================================================== */


/* Gesamtes Apto-Einleitungselement */
.hint-element-step-by-step:has(.s2c-intro) {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;

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

    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* Pseudoelemente sicher entfernen */
.hint-element-step-by-step:has(.s2c-intro)::before,
.hint-element-step-by-step:has(.s2c-intro)::after {
    display: none !important;
    content: none !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* Übergeordnete Apto-Container */
apto-hint-element:has(.s2c-intro),
.element:has(.s2c-intro) {
    width: 100% !important;

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

    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    box-shadow: none !important;
}


/* Auswahlkreis und Statussymbol ausblenden */
.hint-element-step-by-step:has(.s2c-intro) .circle {
    display: none !important;
}


/* Leeren Bildbereich ausblenden */
.hint-element-step-by-step:has(.s2c-intro) .picture {
    display: none !important;
}


/* Leeren Auswahlbutton ausblenden */
.hint-element-step-by-step:has(.s2c-intro) .apply-button {
    display: none !important;
}


/* Preise ausblenden */
.hint-element-step-by-step:has(.s2c-intro) .price,
.hint-element-step-by-step:has(.s2c-intro) .element-price,
.hint-element-step-by-step:has(.s2c-intro) .s2c-price {
    display: none !important;
}


/* Apto-Überschriftsbereich */
.hint-element-step-by-step:has(.s2c-intro) .header {
    display: block !important;
    width: 100% !important;

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

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* Apto-Titel */
.hint-element-step-by-step:has(.s2c-intro) .header .title,
.hint-element-step-by-step:has(.s2c-intro) .header h4 {
    width: 100% !important;

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

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


.hint-element-step-by-step:has(.s2c-intro) .header h4 {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #4b4b4b !important;
}


/* Beschreibung */
.hint-element-step-by-step:has(.s2c-intro) .description {
    display: block !important;
    width: 100% !important;
    max-width: none !important;

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

    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* Eigentliche Einleitung */
.hint-element-step-by-step:has(.s2c-intro) .s2c-intro {
    display: block !important;
    width: 100% !important;
    max-width: none !important;

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

    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* Normale Absätze */
.hint-element-step-by-step:has(.s2c-intro) .s2c-intro p {
    margin: 0 0 12px 0 !important;

    font-size: 1rem !important;
    line-height: 1.55 !important;
    color: #555 !important;
}


/* Letzter Absatz */
.hint-element-step-by-step:has(.s2c-intro) .s2c-intro p:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================
   Aufzählung innerhalb der Einleitung
   ----------------------------------------------------------
   Bei einem Zeilenumbruch beginnen die Folgezeilen bündig
   hinter dem Aufzählungspunkt.
   ========================================================== */

.hint-element-step-by-step:has(.s2c-intro) .s2c-list {
    margin: 8px 0 16px 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


.hint-element-step-by-step:has(.s2c-intro) .s2c-list li {
    position: relative !important;

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

    font-size: 1rem !important;
    line-height: 1.55 !important;
    color: #555 !important;
}


/* Eigener Aufzählungspunkt */
.hint-element-step-by-step:has(.s2c-intro) .s2c-list li::before {
    content: "•" !important;

    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
}


/* Letzter Listenpunkt ohne Zusatzabstand */
.hint-element-step-by-step:has(.s2c-intro) .s2c-list li:last-child {
    margin-bottom: 0 !important;
}




/* =========================================================
   02 Apto.ONE – leeren Bildbereich entfernen
   ========================================================= */

/* Leerer Bildcontainer wird vollständig ausgeblendet */
apto-default-element .picture:empty,
apto-hint-element .picture:empty {
    display: none !important;
}


/* =========================================================
   03 Elemente ohne Bild über die volle Breite darstellen
   ========================================================= */

apto-default-element .default-element-step-by-step:has(.picture:empty) .header,
apto-default-element .default-element-step-by-step:has(.picture:empty) .description,
apto-default-element .default-element-step-by-step:has(.picture:empty) .apply-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}


/* Bei Elementen mit Auswahlkreis etwas Platz links lassen */
apto-default-element .default-element-step-by-step.with-circle:has(.picture:empty) .header,
apto-default-element .default-element-step-by-step.with-circle:has(.picture:empty) .description {
    padding-left: 36px !important;
}


/* Auch Hinweis- und Inklusivfelder ohne Bild */
apto-hint-element .hint-element-step-by-step:has(.picture:empty) .header,
apto-hint-element .hint-element-step-by-step:has(.picture:empty) .description,
apto-hint-element .hint-element-step-by-step:has(.picture:empty) .apply-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}


/* =========================================================
   04 BRAVIA Dekor-Galerie
   Gemeinsames CSS für alle Dekore
   ========================================================= */

.s2c-dekor {
    width: 100%;
    margin-bottom: 35px;
}

.s2c-gallery {
    display: flex;
    gap: 16px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    margin-bottom: 18px;
    padding-bottom: 10px;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
    scrollbar-color: #999999 #eeeeee;
}

.s2c-gallery img {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;

    display: block;

    border-radius: 8px;

    object-fit: cover;
    aspect-ratio: 16 / 9;

    scroll-snap-align: start;

    background: #f3f3f3;
}

.s2c-gallery::-webkit-scrollbar {
    height: 8px;
}

.s2c-gallery::-webkit-scrollbar-track {
    background: #eeeeee;
}

.s2c-gallery::-webkit-scrollbar-thumb {
    background: #999999;
    border-radius: 8px;
}


/* =========================================================
   05 Apto.ONE Overrides
   ========================================================= */

#shop-template-apto {
    --color-primary: var(--s2c-primary);
    --color-optic-lines: var(--s2c-primary);
    --color-optic-lines-popup: var(--s2c-primary);

    --color-accent: var(--s2c-dark);
    --color-accent-contrast: var(--s2c-white);
}

#shop-template-apto button.mat-flat-button.mat-primary:hover:not(.mat-button-disabled) {
    background-color: var(--s2c-dark);
}

#shop-template-apto button.mat-flat-button.mat-accent:hover:not(.mat-button-disabled) {
    background-color: var(--s2c-primary);
}

#shop-template-apto apto-header .logo img {
    max-width: 70%;
    margin: 0 auto;
}


/* =========================================================
   06 Sidebar
   ========================================================= */

.list.sbs {
    position: sticky;
    top: 20px;
}

/* =========================================================
   06a Stückzahlauswahl ausblenden
   Im BRAVIA-Konfigurator ist die Menge fest auf 1 Stück
   eingestellt und kann nicht verändert werden.
   ========================================================= */

apto-sidebar-summary-price apto-quantity-input-editable{
    display:none !important;
}


/* =========================================================
   07 Basis Option
   ========================================================= */

.s2c-option {
    display: block;
    width: 100%;
    padding: 8px;
    border-radius: 10px;
    box-sizing: border-box;
    transition:
        background-color 0.20s ease,
        color 0.20s ease,
        transform 0.20s ease;
}


/* =========================================================
   08 Textbereich
   ========================================================= */

.s2c-text {
    width: 100%;
    text-align: left !important;
    box-sizing: border-box;
}

.s2c-text > div {
    display: block;
    width: 100%;
    margin: 0 0 8px 0;
    text-align: left !important;
    box-sizing: border-box;
}

.s2c-text > div:last-child {
    margin-bottom: 0;
}

.s2c-note {
    display: block;
    margin-top: 10px;
    font-size: 0.95em;
    line-height: 1.45;
    text-align: left !important;
    opacity: 0.85;
}


/* =========================================================
   09 Überschriften
   ========================================================= */

.s2c-headline {
    display: block;
    margin: 0 0 10px 0;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.35;
    text-align: left !important;
}

.s2c-subheadline {
    display: block;
    margin: 0 0 10px 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--s2c-dark-light);
    text-align: left !important;
    transition: color 0.20s ease;
}

.s2c-caption {
    display: block;
    margin-top: 8px;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--s2c-caption);
    font-style: italic;
    text-align: left !important;
}


/* =========================================================
   10 Preise
   ========================================================= */

.s2c-price {
    width: 100%;
    margin-top: 12px;
    text-align: right !important;
    font-weight: 700;
    box-sizing: border-box;
    transition:
        color 0.20s ease,
        transform 0.20s ease;
}

.s2c-price strong {
    font-weight: 700;
}

.s2c-price::before {
    content: "○";
    display: inline-block;
    margin-right: 10px;
    color: #999999;
    font-size: 1.05em;
    transition: color 0.20s ease;
}


/* =========================================================
   11 Serienausstattung
   Diese Klasse bleibt unverändert bestehen
   ========================================================= */

.s2c-price-series {
    width: 100%;
    margin-top: 12px;
    text-align: right !important;
    font-weight: 700;
    color: var(--s2c-text-light);
    box-sizing: border-box;
}

.s2c-price-series strong {
    font-weight: 700;
}


/* =========================================================
   12 Minderpreise
   ========================================================= */

.s2c-negative,
.s2c-negative strong {
    color: var(--s2c-negative);
}

.s2c-negative::before {
    color: var(--s2c-negative);
}


/* =========================================================
   13 Hinweise
   ========================================================= */

.s2c-warning {
    display: block;
    margin-top: 10px;
    padding: 8px 10px;
    border-left: 4px solid var(--s2c-primary);
    line-height: 1.45;
    text-align: left !important;
}

.s2c-highlight {
    display: block;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid var(--s2c-primary);
    border-radius: 6px;
    line-height: 1.45;
    text-align: left !important;
}


/* =========================================================
   14 Listen
   ========================================================= */

.s2c-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.s2c-list li {
    margin: 0 0 8px 0;
    padding: 0;
    line-height: 1.45;
}

.s2c-list li:last-child {
    margin-bottom: 0;
}


/* =========================================================
   15 Kompakt
   ========================================================= */

.s2c-compact .s2c-text > div,
.s2c-compact .s2c-list li {
    margin-bottom: 5px;
}

.s2c-compact .s2c-price,
.s2c-compact .s2c-price-series {
    margin-top: 8px;
}


/* =========================================================
   16 Luftig
   ========================================================= */

.s2c-spacious .s2c-text > div,
.s2c-spacious .s2c-list li {
    margin-bottom: 12px;
}

.s2c-spacious .s2c-price,
.s2c-spacious .s2c-price-series {
    margin-top: 16px;
}


/* =========================================================
   17 Desktop Hover
   Nur Geräte mit Maus
   ========================================================= */

@media (hover: hover) {

    .s2c-option:hover {
        background: var(--s2c-primary-light);
        cursor: pointer;
    }

    .s2c-option:hover .s2c-subheadline {
        color: var(--s2c-primary);
    }

    .s2c-option:hover .s2c-price {
        color: var(--s2c-primary);
        transform: scale(1.03);
    }

    .s2c-option:hover .s2c-price::before {
        content: "✓";
        color: var(--s2c-primary);
    }

    .s2c-option:hover .s2c-negative {
        color: var(--s2c-negative) !important;
    }

    .s2c-option:hover .s2c-negative::before {
        content: "✓";
        color: var(--s2c-negative);
    }
}


/* =========================================================
   18 Touchgeräte
   Hover komplett deaktivieren
   ========================================================= */

@media (hover: none) {

    .s2c-option {
        transition: none;
    }

    .s2c-price,
    .s2c-subheadline {
        transition: none;
    }
}


/* =========================================================
   19 Galerie – Mobile
   ========================================================= */

@media (max-width: 700px) {

    .s2c-gallery img {
        aspect-ratio: 4 / 3;
    }
}


/* =========================================================
   20 Allgemein – Mobile
   Nur gezielte Korrekturen für die mobile Ansicht.
   Desktop und Tablet-/Desktop-Layout bleiben unverändert.
   ========================================================= */

@media (max-width: 768px) {

    /* ---------------------------------------------------------
       Mobile Einleitung linksbündig darstellen
       --------------------------------------------------------- */

    .hint-element-step-by-step:has(.s2c-intro),
    .hint-element-step-by-step:has(.s2c-intro) .header,
    .hint-element-step-by-step:has(.s2c-intro) .header .title,
    .hint-element-step-by-step:has(.s2c-intro) .header h4,
    .hint-element-step-by-step:has(.s2c-intro) .description,
    .hint-element-step-by-step:has(.s2c-intro) .s2c-intro,
    .hint-element-step-by-step:has(.s2c-intro) .s2c-intro p,
    .hint-element-step-by-step:has(.s2c-intro) .s2c-list,
    .hint-element-step-by-step:has(.s2c-intro) .s2c-list li {
        text-align: left !important;
    }


    /* ---------------------------------------------------------
       Mobile Einleitung über die verfügbare Breite
       --------------------------------------------------------- */

    .hint-element-step-by-step:has(.s2c-intro) {
        width: 100% !important;
        margin: 20px 0 30px 0 !important;
    }

    .hint-element-step-by-step:has(.s2c-intro) .header,
    .hint-element-step-by-step:has(.s2c-intro) .description,
    .hint-element-step-by-step:has(.s2c-intro) .s2c-intro {
        width: 100% !important;
        max-width: none !important;
    }


    /* ---------------------------------------------------------
       Mobile Schriftgrößen der Einleitung
       --------------------------------------------------------- */

    .hint-element-step-by-step:has(.s2c-intro) .header h4 {
        font-size: 1.2rem !important;
        line-height: 1.35 !important;
    }

    .hint-element-step-by-step:has(.s2c-intro) .s2c-intro p,
    .hint-element-step-by-step:has(.s2c-intro) .s2c-list li {
        font-size: 1rem !important;
        line-height: 1.55 !important;
    }


    /* ---------------------------------------------------------
       Mobile Logo
       Nur das erste gerenderte Logo anzeigen.
       Dadurch wird ein doppeltes Logo auf der Produktübersicht
       verhindert.
       --------------------------------------------------------- */

    #shop-template-apto apto-header .logo img {
        width: auto !important;
        height: auto !important;
        max-width: 180px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    #shop-template-apto apto-header .logo img:not(:first-child) {
        display: none !important;
    }


    /* ---------------------------------------------------------
       Bestehende mobile Preis- und Überschriftenregeln
       --------------------------------------------------------- */

    .s2c-price,
    .s2c-price-series {
        margin-top: 10px;
    }

    .s2c-headline {
        font-size: 1em;
    }
}