/*******************************************
                   FONTS
*******************************************/

/* dm-sans-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-500 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    src: url('assets/fonts/dm-sans-v17-latin-500.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-600 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 600;
    src: url('assets/fonts/dm-sans-v17-latin-600.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-700 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    src: url('assets/fonts/dm-sans-v17-latin-700.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*******************************************
                   ROOT
*******************************************/

:root {
    --primary-font: 'DM Sans', sans-serif;
    --primary-color: rgba(93, 90, 136, 1);
    --primary-color-light: rgba(151, 149, 181, 1);
}

/*******************************************
                   BODY
*******************************************/

body {
    font-family: var(--primary-font);
    color: var(--primary-color);
}

/*******************************************
           PRE-DEFINED CLASSES
*******************************************/

h2{
    font-size: 24px;
    font-weight: 700;
}

p{
    font-size: 18px;
    color: var(--primary-color-light);
}

.btn{
    width: 100%;
    max-width: 334px;
    border: 1.33px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 18px;
    line-height: 1;
    background: transparent;
    border-radius: 40px;
    padding: 23px;

    &:hover{
        background: var(--primary-color) !important;
        color: #fff;
        border-color: var(--primary-color) !important;
    }
}

.btn-filter{
    width: auto;
    max-width: 334px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 16px;
    line-height: 1;
    background: transparent;
    border-radius: 30px;
    padding: 18px 24px;

    &:hover{
        background: var(--primary-color);
        color: #fff;
    }

    &.active{
        background: var(--primary-color);
        color: #fff;
    }
}

.btn-add-block{
    width: 100%;
    max-width: 334px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 16px;
    line-height: 1;
    background: transparent;
    border-radius: 30px;
    padding: 18px 24px;
    text-transform: uppercase;

    &:hover{
        background: var(--primary-color);
        color: #fff;
    }
}

.btn-picker, .btn-download{
    width: 100%;
    max-width: 200px;
    border: 1px solid rgba(212, 210, 227, 1);
    color: var(--primary-color);
    font-size: 18px;
    line-height: 1;
    background: transparent;
    border-radius: 30px;
    padding: 6.5px 11.5px;
    box-shadow: 4px 4px 60px var(--Number) rgba(242, 241, 250, 1);
    color: rgba(93, 90, 136, 1);

    &:hover{
        background: rgba(212, 210, 227, 1) !important;
        color: rgba(93, 90, 136, 1) !important;
        border: 1px solid rgba(212, 210, 227, 1) !important;
    }
}

.btn-download{
    max-width: 210px;
}

.viewport-toggle {
    display: flex;
    width: fit-content;
    border: 1px solid rgba(212, 210, 227, 1);
    border-radius: 30px;
    padding: 4px;
    gap: 4px;
}

.viewport-btn {
    border: none;
    background: transparent;
    color: rgba(93, 90, 136, 1);
    font-size: 14px;
    line-height: 1;
    padding: 6px 16px;
    border-radius: 20px;
    transition: background 0.2s ease, color 0.2s ease;

    &.active {
        background: var(--primary-color);
        color: #fff;
    }

    &:not(.active):hover {
        background: rgba(212, 210, 227, 1);
    }
}

.btn-finish-website{
    width: 100%;
    max-width: 220px;
    border: 1px solid rgba(212, 210, 227, 1);
    color: var(--primary-color);
    font-size: 18px;
    line-height: 1;
    background: transparent;
    border-radius: 30px;
    padding: 9.5px 11.5px;
    box-shadow: 4px 4px 60px var(--Number) rgba(242, 241, 250, 1);
    color: rgba(93, 90, 136, 1);
    display: flex;
    justify-content: center;

    &:hover{
        background: rgba(212, 210, 227, 1);
        color: rgba(93, 90, 136, 1);
    }
}

.color-wrap-selection-block .color-wrap-selection{
    width: 50%;
}

.color-wrap-selection-block .download-font-preview {
    width: 50%;
}

.btn-finish-website:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #ccc;
}

.btn-finish-website.enabled {
    opacity: 1;
    cursor: pointer;
    background-color: #111;
}

.copy-btn{
    width: 100%;
    max-width: 200px;
    border: 1px solid rgba(212, 210, 227, 1);
    color: var(--primary-color);
    font-size: 18px;
    line-height: 1;
    background: transparent;
    border-radius: 30px;
    padding: 9.5px 11.5px;
    box-shadow: 4px 4px 60px var(--Number) rgba(242, 241, 250, 1);
    color: rgba(93, 90, 136, 1);
    display: flex;
    justify-content: center;

    &:hover{
        background: rgba(212, 210, 227, 1);
        color: rgba(93, 90, 136, 1);
    }
}

.image-button {
    padding: 10px !important;
    background: transparent !important;
    border: 1px solid var(--primary-color);
    height: 100%;
    transition: all 0.25s ease;
    width: 100%;

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

    &:hover {
        background: var(--primary-color-light) !important;
    }
}


#copyUrlBtn:hover{
    color: #fff !important;
}
/*******************************************
                MAIN SECTION
*******************************************/

.main-section {
    width: 100%;
    min-height: 100svh;
    height: auto;
    padding-top: 40px;
    padding-bottom: 40px;
}

.special-title{
    font-size: 20px;
}

.special-text{
    font-size: 16px;
}

#finishModal .modal-content{
    border: none !important;
    border-radius: 18px;

    & .btn{
        max-width: 152px;
    }
}

#finishModal .modal-content h4{
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
}

.card-box-choose {
    position: relative;
    padding: 24px 24px 130px 24px;
    border: 1px solid rgba(212, 210, 227, 1);
    border-radius: 24px;
    height: 100%;

    & .img-box {
        box-shadow: 0px 0px 16.17px 0px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        overflow: hidden;

        & img {
            width: 100%;
            height: auto;
            object-fit: cover;
            aspect-ratio: 1.55/1;
        }
    }

    & .btn{
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 48px);
    }
}

.filter-box{
    gap: 20px;
}

.template-section{
    padding-top: 50px;
    padding-bottom: 50px;
    background: rgba(242, 241, 250, 1);
    height: 100svh;

    & .change-button{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        box-shadow: 4px 4px 60px var(--Number) rgba(242, 241, 250, 1);
        border: 1px solid rgba(212, 210, 227, 1);
        border-radius: 23px;
        padding: 6.5px 11.5px;
        background: transparent;
        color: rgba(93, 90, 136, 1);

        &:hover{
            background: rgba(212, 210, 227, 1);
        }

        img{
            width: 18px !important;
            height: 18px !important;
            object-fit: contain;
        }
    }

    & .change-color{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        box-shadow: 4px 4px 60px var(--Number) rgba(242, 241, 250, 1);
        border: 1px solid rgba(212, 210, 227, 1);
        border-radius: 23px;
        padding: 6.5px 11.5px;
        background: transparent;
        color: rgba(93, 90, 136, 1);

        &:hover{
            background: rgba(212, 210, 227, 1);
        }

        img{
            width: 18px !important;
            height: 18px !important;
            object-fit: contain;
        }
    }

    & .font-text{
        font-size: 22px;
        color: #000;
    }

    & .btn-box-color-font{
        gap: 10px;
    }

    & .show-color-font{
        display: none;

        & .color-box{
            width: 100%;
            height: 40px;
            max-width: 209px;
        }
    }

    & .remove-font{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        box-shadow: 4px 4px 60px var(--Number) rgba(242, 241, 250, 1);
        border: 1px solid rgba(212, 210, 227, 1);
        border-radius: 23px;
        padding: 6.5px 11.5px;
        background: transparent;
        color: rgba(93, 90, 136, 1);

        &:hover{
            background: rgba(212, 210, 227, 1);
        }

        img{
            width: 18px !important;
            height: 18px !important;
            object-fit: contain;
        }
    }

    & .preview-block{
        height: calc(100svh - 100px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    & .remove-button{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        box-shadow: 4px 4px 60px var(--Number) rgba(242, 241, 250, 1);
        border: 1px solid rgba(212, 210, 227, 1);
        border-radius: 23px;
        padding: 6.5px 11.5px;
        background: transparent;
        color: rgba(93, 90, 136, 1);

        &:hover{
            background: rgba(212, 210, 227, 1);
        }

        img{
            width: 18px !important;
            height: 18px !important;
            object-fit: contain;
        }
    }

    & .section-wrap{
        display: flex;
        justify-content: space-betweenje ;
        align-items: center;
        gap: 20px;

        & .section-wrap-preview{
            width: 58%;
            overflow: hidden;
            background: #fff;
            pointer-events: none;
            /* .btn-box (the Ändern/Entfernen pair) is a fixed ~88px tall -
               taller than some blocks' own scaled preview (footer is
               often under 60px). Without this, centering the shorter
               preview inside a row this much taller leaves equal blank
               gaps above AND below it, making the block look detached/
               floating from the sections stacked above and below it.
               Matching min-height keeps the row's own height (and this
               box's white background) the same either way - any left-over
               space then only ever shows up below the real content,
               blending into the page's own white background instead of
               visibly framing it. */
            min-height: 88px;
        }

        & .btn-box{
            width: 38%;
        }
    }

    & .chrome-preview{
        width: 58%;
        overflow: hidden;
        background: #fff;
        pointer-events: none;
    }

    & .section-wrap > img{
        width: 60%;
        height: auto;
        overflow: hidden;
        background: #fff;
        pointer-events: none;
        object-fit: cover;
    }

    & .btn-box{
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    & .preview-selection{
        height: calc(100svh - 100px);
        overflow-y: auto;
        overflow-x: hidden;
    }
}

.preview-placeholder{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    border: 1px dashed rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 13px;
    text-align: center;
    padding: 10px;
}

.catalog-type-heading{
    text-align: start;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 15px;
    margin-top: 10px;
}

.catalog-back-row{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 4px;
}

.catalog-back-btn{
    border: none;
    background: transparent;
    color: rgba(93, 90, 136, 1);
    font-weight: 600;
    font-size: 14px;
    padding: 0;
    white-space: nowrap;
}

.catalog-back-row .catalog-type-heading{
    margin-top: 0;
}

/* Masonry-style packing (Bootstrap's own masonry example approach: split
   items round-robin into a fixed number of independent flex columns,
   rather than a row/col grid) - cards vary a lot in height depending on
   which section fragment they preview, so a normal 2-up row/col grid left
   a ragged gap under every shorter card before the next row could start.
   CSS multi-column (`columns:`) was tried first, but Chrome's column-
   balancing is unreliable with few/tall items (two very tall cards both
   landed in the first column instead of one per column) - round-robin
   into two real flex containers (assignment done in JS, see
   appendMasonryItem() in main-func.js) packs deterministically instead. */
.catalog-row{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.catalog-tracks{
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.catalog-track{
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Back-row heading, custom color picker, font cards etc. - content that
   should span the full width instead of living inside one of the two
   masonry tracks. */
.catalog-full{
    width: 100%;
}

.catalog-card{
    display: block;
    width: 100%;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    color: #000;
    cursor: pointer;
    transition: border-color 0.2s ease;
    text-align: start;
    -webkit-appearance: none;
    appearance: none;
}

.catalog-card:hover{
    border-color: var(--primary-color);
}

.catalog-card-preview{
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    position: relative;
    background: #fff;
}

.catalog-card-label{
    padding: 8px 12px;
    font-size: 13px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    color: inherit;
}

/* Normalize the native color-picker swatch across browsers - Safari
   renders type="color" as a rounded/pill-shaped control with inner
   padding by default, unlike Chrome's flat rectangle. */
input[type="color"]{
    -webkit-appearance: none;
    appearance: none;
    border-radius: 4px;
    padding: 0;
}

input[type="color"]::-webkit-color-swatch-wrapper{
    padding: 0;
    border-radius: 4px;
}

input[type="color"]::-webkit-color-swatch{
    border: none;
    border-radius: 4px;
}

input[type="color"]::-moz-color-swatch{
    border: none;
    border-radius: 4px;
}

.font-preview-box{
    padding: 24px 20px;
    text-align: start;
}

.font-preview-heading{
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #000;
}

.font-preview-text{
    font-size: 16px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.65);
}

/* template4: custom 3-input colour picker (primary/secondary/third), used
   instead of the single-hex picker since template4's palettes are fixed
   triplets rather than one colour + derived shades. */
.custom-color-input-item input[type="color"]{
    width: 64px;
    height: 44px;
    cursor: pointer;
}

.custom-color-input-item label{
    font-size: 13px;
    color: rgba(0, 0, 0, 0.65);
}

.section-wrap.active-block  .change-button {
    background: rgba(212, 210, 227, 1);
}
/*******************************************
                RESPONSIVE
*******************************************/

@media only screen and (min-width: 992px) {
    /* main section */
    .main-section {
        padding-top: 150px;
    }

    #finishModal .modal-dialog{
        max-width: 948px;
    }

    #finishModal .modal-content{
        padding: 80px 130px !important;
    }

    #finishModal .modal-content h4{
        margin-bottom: 30px;
        font-size: 36px;
    }
}

@media only screen and (min-width: 1400px) {
    /* Pre-defined classes */
    .container{
        max-width: 1238px;
    }

    .container-fluid{
        max-width: 1398px;
    }
}

#sectionModal .modal-close-row{
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px 0;
}

@media only screen and (max-width: 767.98px) {
    /* Shrink the change/remove buttons so the actual section preview gets
       more of the row's width on narrow screens. */
    .template-section .section-wrap{
        gap: 12px;
    }

    .template-section .section-wrap .btn-box{
        width: 23%;
    }

    .template-section .section-wrap .section-wrap-preview{
        width: 70%;
    }

    /* Header preview isn't wrapped in .section-wrap (no change/remove
       buttons next to it), so it needs its own matching override here -
       otherwise it stays at the desktop 58% width while every section
       below it switches to 70%, making it visibly narrower/misaligned. */
    .template-section .chrome-preview{
        width: 70%;
    }

    .template-section .change-button,
    .template-section .remove-button{
        gap: 4px;
        padding: 4px 6px;
        border-radius: 14px;
        font-size: 11px;
        white-space: nowrap;

        img{
            width: 12px !important;
            height: 12px !important;
        }
    }

    .btn-add-block{
        width: fit-content;
        display: block;
        font-size: 14px;
        padding: 13px 18px;
    }

    /* Mobile sizing for the two action pills lives further down, right after
       their base rule — a media query adds no specificity, so it has to come
       after .config-bar-right ... to win. */

    .template-section .change-color,
    .template-section .remove-font{
        gap: 6px;
        padding: 5px 9px;
        font-size: 13px;

        img{
            width: 14px !important;
            height: 14px !important;
        }
    }
}

/*******************************************
    CONFIGURATOR UX REDESIGN (v7.2)
    - full-width work area + sticky action bar
    - catalog = fixed slide-in side panel (desktop)
    - "Vorschau" button
*******************************************/

/* Page scrolls normally now; the action bar sticks. */
.template-section{
    height: auto;
    min-height: 100svh;
    position: relative;
}

/* Full-width, centered working area (was a scrolled half-column). */
.template-section .preview-block{
    height: auto;
    overflow: visible;
    max-width: 860px;
    margin: 0 auto;
}
/* One source of truth for "how wide is the working preview".
   .chrome-preview is 58% of the 860px work area (70% under 768px), so the
   readout cards above it use the same value and stay flush with its edges.
   If .chrome-preview's width ever changes, change it HERE too. */
.template-section{
    --readout-w: 58%;
}

.template-section .show-color-font{
    max-width: 860px;
    margin: 0 auto 20px;
}

/* .design-header had no rule of its own — the gap below it was just the
   paragraph's default Bootstrap margin. Take it over explicitly so the
   spacing above the preview is controlled in one place. */
.template-section .design-header{
    margin-bottom: 26px;
}
.template-section .design-header p:last-child{
    margin-bottom: 0;
}

/* ---- Readout cards: chosen colour + chosen font ----
   Two white cards side by side. Overrides the older flat bar
   (.template-section .show-color-font .color-box) by being later + equal specificity. */
.show-color-font .readout-row{
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 24px;
    width: var(--readout-w, 100%);
}
/* No card background — the readout sits straight on the page. Padding is 0 so
   the swatch lines up flush with the left edge of .chrome-preview below it. */
.show-color-font .readout-card{
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 0;
    min-width: 190px;
    background: transparent;
    padding: 0;
}
.show-color-font .readout-card .color-box{
    width: 52px;
    height: 52px;
    max-width: none;
    border-radius: 14px;
    flex: 0 0 auto;
}
.show-color-font .readout-label{
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--primary-color-light);
}
.show-color-font .color-hex{
    font-size: 20px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--primary-color);
}
.show-color-font .readout-card .font-text{
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary-color);
}

/* Match .chrome-preview's 70% below 768px, then go full width on small
   phones where the two cards stack. */
@media only screen and (max-width: 767.98px){
    .template-section{
        --readout-w: 70%;
    }
}
@media only screen and (max-width: 575.98px){
    /* --readout-w deliberately stays at the 70% set above, so the cards keep
       lining up with .chrome-preview instead of running edge to edge.
       The px floor stops them collapsing on very small phones. */
    .show-color-font .readout-row{
        min-width: 260px;
        max-width: 100%;
    }
    .show-color-font .readout-card{
        min-width: 100%;
    }
}

/* Sticky action bar. */
.config-bar{
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: rgba(242, 241, 250, 1);
    padding: 12px 0 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(212, 210, 227, 0.6);
}
.config-bar-left,
.config-bar-right{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Make the Desktop/Mobile toggle the same height as the Farbe/Schrift pills. */
.config-bar .viewport-toggle,
.config-bar .change-color,
.config-bar .remove-font{
    min-height: 42px;
    align-items: center;
}
/* ...and let the Desktop/Mobile buttons fill that height so the active/hover
   pill matches the outer outline (only a small even gap around it). */
.config-bar .viewport-toggle{
    align-items: stretch;
}
.config-bar .viewport-btn{
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-preview{
    border: 1px solid rgba(212, 210, 227, 1);
    color: rgba(93, 90, 136, 1);
    background: transparent;
    border-radius: 30px;
    padding: 9.5px 18px;
    font-size: 18px;
    line-height: 1;
    box-shadow: 4px 4px 60px rgba(242, 241, 250, 1);

    &:hover{
        background: var(--primary-color);
        color: #fff;
        border-color: var(--primary-color);
    }
}

/* Always reserve the scrollbar. Switching Desktop/Mobile changes the page
   height, so the scrollbar used to appear/disappear and the ~15px width change
   was enough to re-wrap the config bar — the bar looked different per mode. */
html{
    overflow-y: scroll;
}

/* Keep "Vorschau" and "Website fertigstellen" on ONE line.
   .btn-finish-website carries a legacy width:100%/max-width:220px from the old
   single-column layout; as a flex item that forces a wrap next to any sibling.
   Both also get the same pill box as the Farbe/Schrift buttons on the left
   (min-height 42px), otherwise all three end up slightly different heights. */
.config-bar-right{
    flex-wrap: nowrap;
}
.config-bar-right .btn-preview,
.config-bar-right .btn-finish-website{
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 18px;
    font-size: 18px;
    line-height: 1;
}
/* Narrower text below 768px, but min-height stays 42px so every pill in the
   bar — Desktop/Mobile, Farbe, Schrift, Vorschau, fertigstellen — is one height. */
@media only screen and (max-width: 767.98px){
    .config-bar-right .btn-preview,
    .config-bar-right .btn-finish-website{
        font-size: 15px;
        padding: 7px 12px;
    }
}

/* ---- Catalog as a fixed slide-in side panel (desktop) ---- */
.template-section .preview-selection{
    position: fixed;
    top: 0;
    right: 0;
    height: 100svh;
    width: min(560px, 94vw);
    background: #fff;
    box-shadow: -10px 0 50px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1050;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 24px 40px;
}
body.catalog-open .template-section .preview-selection{
    transform: none;
}

.catalog-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1049;
}
body.catalog-open .catalog-backdrop{
    opacity: 1;
    visibility: visible;
}

.catalog-panel-header{
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.catalog-panel-title{
    font-weight: 700;
    text-transform: uppercase;
    font-size: 15px;
}
.catalog-close{
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: var(--primary-color);
    cursor: pointer;
    padding: 0 4px;
}

/* On mobile the catalog is moved into #sectionModal, so the fixed side panel
   must not exist / intercept anything. */
@media only screen and (max-width: 991.98px){
    .template-section .preview-selection{
        position: static;
        transform: none;
        width: auto;
        height: auto;
        box-shadow: none;
        padding: 0;
        overflow: visible;
    }
    .catalog-backdrop{
        display: none;
    }
}


/* =========================================================================
   BUTTONS — one spec for the whole configurator (design ref 2026-07-29).
   White by default, filled with the site colour on hover, bold label,
   softer radius + drop shadow.

   Geometry (padding / min-height / font-size) is deliberately NOT set here —
   every button keeps its own size, this rule only changes appearance.

   The Desktop/Mobile toggle is excluded on purpose: it keeps its existing
   active-pill behaviour and only takes the new radius and font weight.
   ========================================================================= */
.template-section .change-color,
.template-section .remove-font,
.template-section .change-button,
.template-section .remove-button,
.template-section .btn-preview,
.template-section .btn-finish-website,
.template-section .btn-add-block{
    background: #fff;
    color: var(--primary-color);
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(93, 90, 136, 0.16);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.template-section .change-color:hover,
.template-section .remove-font:hover,
.template-section .change-button:hover,
.template-section .remove-button:hover,
.template-section .btn-preview:hover,
.template-section .btn-add-block:hover,
.template-section .btn-finish-website:not(:disabled):hover{
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 6px 18px rgba(93, 90, 136, 0.28);
}

/* The pill icons are dark artwork, so they would vanish on the filled hover. */
.template-section .change-color:hover img,
.template-section .remove-font:hover img,
.template-section .change-button:hover img,
.template-section .remove-button:hover img{
    filter: brightness(0) invert(1);
}

/* Disabled "Website fertigstellen" — muted instead of the old grey + 0.5
   opacity, which looked muddy against the lavender page. */
.template-section .btn-finish-website:disabled{
    background: rgba(212, 210, 227, 0.5);
    color: rgba(93, 90, 136, 0.5);
    box-shadow: none;
    opacity: 1;
}

/* Desktop/Mobile toggle: same white card + shadow as every other button, with
   the active segment as the filled pill. The old outlined/transparent container
   was the only control still showing the page background through it.
   Inactive hover stays a soft tint on purpose — filling it would read as active. */
/* The container was 42px like every other button, but its 4px padding + 1px
   border left the active segment only 32px tall — so the filled pill read as a
   different size than the Farbe/Schrift pills beside it. Padding, border and
   gap are dropped so each segment is the full 42px. */
/* Container back to 42px so the switcher is exactly as tall as the other
   buttons. A 3px inset then leaves the pill at 36px, and the font drops to 15px
   so it doesn't look cramped in the shorter pill. Outer radius 15px = 12px pill
   radius + the 3px inset, so the corners stay concentric. */
.config-bar .viewport-toggle{
    min-height: 42px;
    padding: 3px;
    gap: 0;
    border: 0;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(93, 90, 136, 0.16);
}
.config-bar .viewport-btn{
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    padding: 5px 16px;
}
/* No hover fill on the inactive segment — the tinted box read like a second
   selected state next to the filled pill. */
.config-bar .viewport-btn:not(.active):hover{
    background: transparent;
}
@media only screen and (max-width: 767.98px){
    .config-bar .viewport-btn{
        font-size: 13px;
        padding: 5px 12px;
    }
}