/* v1.12.0: Fonts self-gehostet (DSGVO) statt fonts.googleapis.com */
@import url('fonts.css');

/* =================================================================
   DSF Bedruckung v1.1 - Inline Card + Side Drawer
   All selectors are scoped to .dsf-b-* to avoid CSS leakage.
   ================================================================= */

/* ---------- Inline Card on product page (v1.2.8: edged, green CTA) ---------- */
.dsf-b-card {
    position: relative;
    margin: 1rem 0 1.15rem;
    padding: .85rem 1rem;
    border: 1px solid #d9dde3;
    border-radius: 0;
    background: #fafbfc;
    display: flex;
    align-items: center;
    gap: .85rem;
}

.dsf-b-card__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 0;
    background: #4763a3;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.dsf-b-card__icon:hover {
    background: #3b5489;
}

.dsf-b-card__body {
    flex: 1;
    min-width: 0;
}

.dsf-b-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
}

.dsf-b-card__sub {
    margin: .15rem 0 0;
    font-size: .87rem;
    color: #5b6574;
    line-height: 1.35;
}

.dsf-b-card__cta {
    flex-shrink: 0;
    border: 0;
    background: #66a834;
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 0;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.dsf-b-card__cta:hover {
    background: #53882a;
}

.dsf-b-card.is-configured {
    border-color: #b9c6d8;
    background: #fff;
    box-shadow: 0 4px 12px rgba(17, 24, 39, .05);
}

.dsf-b-card.is-configured .dsf-b-card__cta {
    background: #66a834;
    color: #fff;
    border: 0;
}

.dsf-b-card.is-configured .dsf-b-card__cta:hover {
    background: #53882a;
}

/* v1.10.30: Aufpreis-Pill in der Card. Default versteckt; nur sichtbar wenn
   die Card im is-configured-Zustand ist (committed personalization). */
.dsf-b-card__pill {
    display: none;
    flex-shrink: 0;
    background: #66a834;
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    line-height: 1.2;
    align-self: center;
    -webkit-tap-highlight-color: transparent;
}

.dsf-b-card.is-configured .dsf-b-card__pill {
    display: inline-flex;
    align-items: center;
}

@media (max-width: 575px) {
    .dsf-b-card {
        flex-wrap: wrap;
        padding: .8rem;
    }
    .dsf-b-card__cta {
        width: 100%;
        margin-top: .55rem;
    }
    /* On mobile the pill sits next to the body text. CTA still wraps below. */
    .dsf-b-card.is-configured .dsf-b-card__pill {
        margin-left: auto;
    }
}

/* ---------- Drawer Overlay ---------- */
.dsf-b-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    background: rgba(15, 23, 42, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.dsf-b-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* ---------- Drawer ---------- */
.dsf-b-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(480px, 100vw);
    z-index: 2147483647;
    background: #fff;
    box-shadow: -8px 0 32px rgba(15, 23, 42, .15);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dsf-b-drawer.is-open {
    transform: translateX(0);
}

.dsf-b-drawer__head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #edf0f4;
}

.dsf-b-drawer__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
}

.dsf-b-drawer__close {
    border: 0;
    background: transparent;
    padding: .35rem;
    cursor: pointer;
    color: #5b6574;
    font-size: 1.25rem;
    line-height: 1;
    border-radius: 0;
    transition: background-color .15s ease;
}

.dsf-b-drawer__close:hover {
    background: #f3f6f9;
}

.dsf-b-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

.dsf-b-drawer__foot {
    flex-shrink: 0;
    padding: 1rem 1.1rem 1.1rem;
    border-top: 1px solid #d1d5db;
    background: #f4f5f7;
    /* v1.10.48: Subtle upward shadow to lift the footer off the body
       content - signals "this section is sticky / separate" without
       hard visual break. */
    box-shadow: 0 -2px 6px -2px rgba(17, 24, 39, .08), 0 -1px 0 0 rgba(255,255,255,.6) inset;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

/* Legacy total (kept for back-compat with code paths that still write it) */
.dsf-b-drawer__total {
    display: none;
}

/* v1.10.29: Price breakdown rows in the sticky footer */
.dsf-b-drawer__breakdown {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.dsf-b-drawer__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .92rem;
    color: #5b6574;
}

.dsf-b-drawer__row--total {
    font-weight: 700;
    color: #111827;
    font-size: 1.05rem;
    padding-top: .35rem;
    border-top: 1px solid #e3e6eb;
    margin-top: .15rem;
}

/* v1.10.29: Two-button footer - Save (secondary) + Submit (primary) */
/* v1.10.35: position:relative as anchor for the reason overlay. */
.dsf-b-drawer__buttons {
    display: flex;
    gap: .55rem;
    position: relative;
}

.dsf-b-drawer__save,
.dsf-b-drawer__submit {
    flex: 1;
    border: 0;
    padding: .9rem 1rem;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    box-sizing: border-box;
    min-height: 48px;
}

.dsf-b-drawer__save {
    background: #fff;
    color: #1f2937;
    border: 1px solid #d1d5db;
}

.dsf-b-drawer__save:hover:not(.is-disabled) {
    background: #f4f5f7;
    border-color: #9ca3af;
}

.dsf-b-drawer__save.is-disabled {
    background: #f4f5f7;
    color: #9ca3af;
    border-color: #e3e6eb;
    cursor: pointer; /* still clickable - shows hint */
}

.dsf-b-drawer__submit {
    background: #66a834;
    color: #fff;
}

.dsf-b-drawer__submit:hover:not(.is-disabled) {
    background: #53882a;
}

.dsf-b-drawer__submit.is-disabled {
    background: #d1d5db;
    cursor: pointer; /* still clickable - shows hint */
}

/* v1.10.31: Reason text under buttons - explains why they're disabled.
   v1.10.35: Reason ist jetzt ein Overlay AUF den Buttons - sitzt da wo der
   User gerade geklickt hat, ergibt einen direkten Bezug. Erscheint nur beim
   Klick (über JS-getriggerte showReason()), versteckt sich nach 3s automatisch.
   pointer-events: none damit Klicks durchkommen sobald der Banner ausgefadet
   ist. */
.dsf-b-drawer__reason {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .4rem .65rem;
    background: #fef3c7;
    border-left: 3px solid #b91c1c;
    color: #7c2d12;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    box-sizing: border-box;
    z-index: 2;
}

.dsf-b-drawer__reason::before {
    content: '!';
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #b91c1c;
    color: #fff;
    font-weight: 700;
    font-size: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dsf-b-drawer__reason--shown {
    opacity: 1;
}

/* v1.10.39: Pulse animation triggered when user clicks a disabled button.
   Used on Consent box / first input row depending on what's missing. */
@keyframes dsfBPulse {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, .55); }
    70%  { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);  }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);    }
}
.dsf-b-pulse {
    animation: dsfBPulse 1.4s ease-out;
}

/* v1.10.39: Scroll-Indikator - floatender Pfeil-Button im unteren Bereich
   des Drawer-Bodies. Sagt dem User dass es weiter unten Inhalt gibt (Mobile
   Pain-Point: Vorschaubild füllt Initial-Viewport, Felder sind below the
   fold).
   - Default unsichtbar (opacity 0, pointer-events none)
   - .is-visible blendet ihn ein
   - Klick scrollt eine Bildschirmlänge runter
   - Bounce-Animation ladet zum Klicken ein
   - Position absolut zum Drawer-Container, sitzt fix oberhalb des Footer-
     Sticky-Blocks dank "bottom" relativ zum Drawer-Bottom (= Footer-Top
     plus dynamic offset). JS misst die Footer-Höhe und setzt --foot-h. */
.dsf-b-scrollhint {
    position: absolute;
    bottom: calc(var(--dsf-b-foot-h, 140px) + 14px);
    right: 14px;
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: #4763a3;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(17, 24, 39, .25);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, background-color .15s ease;
}

/* v1.10.49: Scroll-Hinweis erscheint überall wenn der Body scrollbar ist und
   der User noch ganz oben steht - auf Desktop wie Mobile. Wenn alles auf
   einen Blick passt (nicht-scrollbar), wird er via JS unsichtbar gehalten.
   Kein viewport-basiertes display:none nötig. */

.dsf-b-scrollhint.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    animation: dsfBScrollHintBounce 1.6s ease-in-out infinite;
}

.dsf-b-scrollhint:hover {
    background: #3b5489;
}

.dsf-b-scrollhint__arrow {
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 700;
}

@keyframes dsfBScrollHintBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* v1.10.29: Stack buttons on very narrow viewports so each is a comfortable
   tap target. 380px ≈ small phones in portrait. */
@media (max-width: 380px) {
    .dsf-b-drawer__buttons {
        flex-direction: column;
    }
}

/* ---------- Drawer Body Components ---------- */
/* v1.2.20: Einwilligungs-Box (Checkbox + Text vereint) */
/* v1.10.31: Wieder im Body am Ende der scrollbaren Section.
   Margin-bottom für Abstand zum Footer, normale Größe wieder. */
.dsf-b-consent {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0 0 .5rem;
    padding: .7rem .85rem;
    background: #f7f8fa;
    border: 1px solid #e3e6eb;
    border-left: 1px solid #e3e6eb;
    box-shadow: inset 3px 0 0 0 #f59e0b;
    cursor: pointer;
}

.dsf-b-consent__input {
    flex: 0 0 auto;
    margin: .15rem 0 0 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #66a834;
}

.dsf-b-consent__body {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.dsf-b-consent__head {
    font-weight: 600;
    color: #1f2937;
    font-size: .92rem;
    line-height: 1.25;
}

.dsf-b-consent__text {
    color: #5b6574;
    font-size: .82rem;
    line-height: 1.4;
}

.dsf-b-consent:has(.dsf-b-consent__input:checked) {
    box-shadow: inset 3px 0 0 0 #66a834;
    background: #f4faf0;
}

.dsf-b-hint {
    margin: 0 0 1rem;
    padding: .7rem .85rem;
    background: #fef9e7;
    border-left: 3px solid #f59e0b;
    border-radius: 0;
    font-size: .85rem;
    line-height: 1.45;
    color: #78350f;
}

.dsf-b-section {
    margin-bottom: 1.15rem;
}

.dsf-b-section__label {
    display: block;
    margin-bottom: .45rem;
    font-size: .85rem;
    font-weight: 700;
    color: #344254;
}

/* Option pills (when multiple SKUs) */
.dsf-b-pills {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.dsf-b-pill {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #d9dde3;
    background: #fff;
    border-radius: 0;
    padding: .65rem .85rem;
    font-size: .9rem;
    cursor: pointer;
    transition: all .15s ease;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
}

.dsf-b-pill__label {
    font-weight: 600;
    color: #1f2937;
}

.dsf-b-pill__price {
    font-size: .8rem;
    color: #5b6574;
}

.dsf-b-pill:hover {
    border-color: #1f2937;
}

.dsf-b-pill.is-active {
    border-color: #1f2937;
    background: #1f2937;
    color: #fff;
}

.dsf-b-pill.is-active .dsf-b-pill__label,
.dsf-b-pill.is-active .dsf-b-pill__price {
    color: #fff;
}

/* Item editor (one block per piece) */
.dsf-b-items {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.dsf-b-item {
    border: 1px solid #d9dde3;
    border-radius: 0;
    padding: .85rem;
    background: #fff;
}

.dsf-b-item__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .65rem;
}

.dsf-b-item__num {
    font-size: .9rem;
    font-weight: 700;
    color: #1f2937;
}

.dsf-b-item__skip {
    font-size: .82rem;
    color: #5b6574;
    cursor: pointer;
    user-select: none;
}

.dsf-b-item__skip input {
    margin-right: .35rem;
    vertical-align: middle;
}

.dsf-b-item__fields {
    display: grid;
    gap: .6rem;
    grid-template-columns: 2fr 1fr;
}

.dsf-b-item.is-skipped .dsf-b-item__fields {
    opacity: .4;
    pointer-events: none;
}

.dsf-b-field {
    display: flex;
    flex-direction: column;
}

.dsf-b-field label {
    font-size: .78rem;
    color: #5b6574;
    margin-bottom: .25rem;
    font-weight: 500;
}

.dsf-b-field input {
    border: 1px solid #d9dde3;
    border-radius: 0;
    padding: .55rem .7rem;
    font-size: .92rem;
    color: #1f2937;
    background: #fff;
    transition: border-color .15s ease;
    min-height: 40px;
}

.dsf-b-field input:focus {
    outline: 0;
    border-color: #1f2937;
    box-shadow: 0 0 0 3px rgba(31, 41, 55, .12);
}

/* Live Preview */
.dsf-b-preview {
    margin: 0 0 1.15rem;
    padding: 1rem;
    background: #f3f6f9;
    border-radius: 0;
    text-align: center;
}

.dsf-b-preview__stage {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    /* v1.5.11: padding ensures backdrop color is visible around the image
       even when the image has a solid white background */
    padding: 12px;
    box-sizing: border-box;
    text-align: center;
    transition: background-color .25s ease;
}

.dsf-b-preview__img {
    display: block;
    max-width: 100%;
    max-height: 240px;
    margin: 0 auto;
    /* v1.5.11: blend mode to let the trikot mockup darken/take on the
       backdrop color where the mockup has white pixels. Multiply means:
       white pixels in the image become transparent (revealing backdrop),
       black/dark pixels stay black. Works perfectly for line-art trikot
       mockups. Falls back gracefully on browsers without support. */
    mix-blend-mode: multiply;
}

.dsf-b-preview__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    font-family: 'Arial Black', Impact, sans-serif;
    color: #1f2937;
}

.dsf-b-preview__name {
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dsf-b-preview__num {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.dsf-b-preview__pager {
    display: flex;
    justify-content: center;
    gap: .35rem;
    margin-top: .65rem;
}

.dsf-b-preview__dot {
    width: 8px;
    height: 8px;
    border-radius: 0;
    background: #d1d5db;
    cursor: pointer;
    transition: background-color .15s ease;
}

.dsf-b-preview__dot.is-active {
    background: #1f2937;
}

/* Mobile: drawer fullscreen */
@media (max-width: 575px) {
    .dsf-b-drawer {
        width: 100vw;
    }
    .dsf-b-drawer__body {
        padding: 1rem;
    }
    .dsf-b-item__fields {
        grid-template-columns: 1fr;
    }
    /* v1.10.39: Vorschaubild auf kleineren Geräten kompakter, damit das
       erste Eingabefeld noch ohne Scrollen sichtbar ist. Eingangs-
       Bedruckungs-Drawer auf z.B. iPhone SE: vorher Bild + Padding ~330px,
       Felder waren below the fold. Jetzt max ~38vh inklusive Padding. */
    .dsf-b-preview {
        padding: .6rem;
        margin-bottom: .85rem;
    }
    .dsf-b-preview__stage {
        padding: 6px;
    }
    .dsf-b-preview__img {
        max-height: 35vh;
    }
}

/* ---------- Locked state when variation not selected ---------- */
.dsf-b-card--locked {
    opacity: .65;
    background: #f5f6f8;
}

.dsf-b-card--locked .dsf-b-card__cta {
    background: #9ca3af;
    cursor: not-allowed;
}

.dsf-b-card--locked .dsf-b-card__cta:hover {
    background: #9ca3af;
}

/* ---------- Multi-area editor in drawer ---------- */
.dsf-b-areas {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.dsf-b-area {
    border: 1px solid #d9dde3;
    border-radius: 0;
    padding: .75rem .85rem;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease;
}

.dsf-b-area.is-active {
    border-color: #1f2937;
    background: #fafbfc;
}

.dsf-b-area__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-bottom: 0;
}
/* v1.7.6: Head sits centered in the box when inactive (no margin).
   When active, the field's own margin-top creates the gap. */

.dsf-b-area__toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    flex: 1;
    margin: 0;
    user-select: none;
}

.dsf-b-area__toggle input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.dsf-b-area__name {
    font-size: .92rem;
    font-weight: 600;
    color: #1f2937;
}

.dsf-b-area__price {
    font-size: .82rem;
    font-weight: 600;
    color: #5b6574;
    white-space: nowrap;
}

.dsf-b-area.is-active .dsf-b-area__price {
    color: #66a834;
}

.dsf-b-area__fields {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: .55rem;
    transition: opacity .15s ease;
}

.dsf-b-area:not(.is-active) .dsf-b-area__fields {
    opacity: .55;
}

.dsf-b-preview__caption {
    margin-top: .55rem;
    font-size: .82rem;
    color: #5b6574;
    text-align: center;
}

@media (max-width: 575px) {
    .dsf-b-area__fields {
        grid-template-columns: 1fr;
    }
}

/* ---------- Cart page personalization block ---------- */
.dsf-b-cart-personalization {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid #edf0f4;
    font-size: .9rem;
}

.dsf-b-cart-personalization__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    cursor: pointer;
    user-select: none;
    padding: .35rem 0;
    color: #1f2937;
    font-weight: 600;
}

.dsf-b-cart-personalization__head::after {
    content: '\25BE';
    font-size: .85em;
    transition: transform .2s ease;
}

.dsf-b-cart-personalization.is-collapsed .dsf-b-cart-personalization__head::after {
    transform: rotate(-90deg);
}

.dsf-b-cart-personalization__body {
    margin-top: .5rem;
}

.dsf-b-cart-personalization.is-collapsed .dsf-b-cart-personalization__body {
    display: none;
}

.dsf-b-cart-personalization__item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: .45rem 0;
    border-bottom: 1px dashed #edf0f4;
    gap: 1rem;
}

.dsf-b-cart-personalization__item:last-child {
    border-bottom: 0;
}

.dsf-b-cart-personalization__label {
    color: #5b6574;
    font-size: .85rem;
    flex-shrink: 0;
}

.dsf-b-cart-personalization__value {
    color: #1f2937;
    font-weight: 500;
    text-align: right;
    flex: 1;
}

.dsf-b-cart-personalization__price {
    color: #1f2937;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- v1.2.1: single-field area layout ---------- */
/* v1.7.5: Eingabefeld ist KOMPLETT versteckt wenn Toggle aus.
   Animation per max-height transition - simpler und robuster
   als grid-rows. Field ist visibility:hidden + max-height:0
   wenn Toggle off, slidet beim Aktivieren auf normale Höhe. */
.dsf-b-area__field {
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    transition: max-height .25s ease, margin-top .25s ease, opacity .2s ease;
}

.dsf-b-area.is-active .dsf-b-area__field {
    max-height: 80px;
    margin-top: .55rem;
    opacity: 1;
}

.dsf-b-area__field input {
    width: 100%;
    border: 1px solid #d9dde3;
    border-radius: 0;
    padding: .55rem .7rem;
    font-size: .92rem;
    color: #1f2937;
    background: #fff;
    transition: border-color .15s ease;
    min-height: 40px;
    box-sizing: border-box;
}

/* v1.10.20: iOS Safari/Chrome zoom in on input focus when font-size is
   below 16px. Pin to 16px on touch viewports so the page doesn't jump
   around when users tap into the personalization fields on phones.
   Desktop layouts keep the smaller (visually denser) size. */
@media (max-width: 768px) {
    .dsf-b-area__field input,
    .dsf-b-fontpicker__select {
        font-size: 16px;
    }
}

.dsf-b-area__field input:focus {
    outline: 0;
    border-color: #1f2937;
    box-shadow: 0 0 0 3px rgba(31, 41, 55, .12);
}

/* ---------- Single value preview ---------- */
.dsf-b-preview__value {
    font-size: 1.4rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1;
}

.dsf-b-preview__value.is-number {
    font-size: 2.2rem;
}

.dsf-b-preview__pager {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin-top: .55rem;
}

.dsf-b-preview__dot {
    width: 9px;
    height: 9px;
    border-radius: 0;
    background: #d1d5db;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.dsf-b-preview__dot:hover {
    background: #9ca3af;
}

.dsf-b-preview__dot.is-active {
    background: #1f2937;
    transform: scale(1.2);
}

/* ---------- v1.2.5: hide print article cart rows ---------- */
.dsf-b-cart-row-hidden {
    display: none !important;
}

/* v1.2.8 - surcharge hint inside personalization block (replaces old price-detail) */
.dsf-b-cart-personalization__surcharge {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
    font-size: 0.85rem;
    color: #4b5563;
}
.dsf-b-cart-personalization__surcharge strong {
    color: #111827;
    font-weight: 600;
}

/* v1.2.9 - multi-group personalization (multiple Bedruckungen on same consolidated cart position) */
.dsf-b-cart-personalization__group {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e5e7eb;
}
.dsf-b-cart-personalization__group:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.dsf-b-cart-personalization__group-title {
    font-weight: 600;
    color: #4b5563;
    font-size: 0.85rem;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* v1.2.10 - quantity prefix in personalization items */
.dsf-b-cart-personalization__qty {
    display: inline-block;
    min-width: 26px;
    color: #6b7280;
    font-weight: 600;
    margin-right: 6px;
}

/* v1.2.21 - hide configurator gear icon for our Konfig-Vater positions
   Match any element with .configurepos (not just <a>) - safer */
.dsf-b-konfig-vater .configurepos,
.dsf-b-konfig-vater a.configurepos,
.dsf-b-konfig-vater button.configurepos {
    display: none !important;
}

/* ========================================================================
   v1.2.20: "Deine Bedruckung" expandable block in cart
   ======================================================================== */

.dsf-b-cart-perso {
    margin-top: .85rem;
    border: 1px solid #e3e6eb;
    background: #f7f8fa;
}

.dsf-b-cart-perso__toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .65rem .85rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: #1f2937;
}

.dsf-b-cart-perso__toggle:focus {
    outline: 2px solid #66a834;
    outline-offset: -2px;
}

.dsf-b-cart-perso__title {
    flex: 1;
    font-weight: 600;
    font-size: .95rem;
}

.dsf-b-cart-perso__sum {
    margin-right: .65rem;
    color: #66a834;
    font-weight: 700;
    font-size: .92rem;
    white-space: nowrap;
}

.dsf-b-cart-perso__chev {
    display: inline-block;
    transition: transform .15s ease;
    color: #5b6574;
    font-size: 1rem;
}

.dsf-b-cart-perso:not(.is-open) .dsf-b-cart-perso__chev {
    transform: rotate(-90deg);
}

.dsf-b-cart-perso__body {
    padding: 0 .85rem .8rem;
    border-top: 1px solid #e8ebef;
}

.dsf-b-cart-perso:not(.is-open) .dsf-b-cart-perso__body {
    display: none;
}

.dsf-b-cart-perso__item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: .75rem;
    align-items: baseline;
    padding: .5rem 0;
    border-bottom: 1px solid #edf0f4;
    font-size: .87rem;
}

.dsf-b-cart-perso__item:last-child {
    border-bottom: 0;
}

.dsf-b-cart-perso__label {
    color: #5b6574;
    font-weight: 500;
}

.dsf-b-cart-perso__value {
    color: #1f2937;
    font-weight: 600;
    word-break: break-word;
}

.dsf-b-cart-perso__price {
    color: #5b6574;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .dsf-b-cart-perso__item {
        grid-template-columns: 1fr auto;
    }
    .dsf-b-cart-perso__value {
        grid-column: 1 / 2;
    }
    .dsf-b-cart-perso__price {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        align-self: center;
    }
}

/* v1.2.21 - extra fallback: hide any link/button with href containing 'a=' and 'ek=' inside our Vater rows */
.dsf-b-konfig-vater a[href*="ek="][href*="a="] {
    display: none !important;
}

/* Also hide configurator-like icons (Bootstrap glyphicons / FontAwesome cog) inside our Vater rows */
.dsf-b-konfig-vater .glyphicon-cog,
.dsf-b-konfig-vater .fa-cog,
.dsf-b-konfig-vater .fa-gear,
.dsf-b-konfig-vater [class*="fa-cog"],
.dsf-b-konfig-vater [class*="-gear"] {
    display: none !important;
}

/* v1.2.21 - hide JTL's "Deine Bedruckung" eigenschaft-table within OUR vater rows.
   That table was created by v1.2.16's WarenkorbPosEigenschaftArr injection.
   It's stale data from corrupted sessions. NOVA's bullet list under the row
   is the proper rendering for konfig-set children. */
.dsf-b-konfig-vater .product-config-summary,
.dsf-b-konfig-vater .product-attribute-summary,
.dsf-b-konfig-vater table.config-table,
.dsf-b-konfig-vater table[class*="eigenschaft"] {
    display: none !important;
}

/* ========================================================================
   v1.2.22: Cart enhancements (badge, hinweis-banner, collapsible details)
   ======================================================================== */

/* Aufpreis-Badge as a list item at the bottom of cart-items-product-data */
.dsf-b-aufpreis-badge-wrap {
    margin-top: .25rem;
    list-style: none !important;
    padding-left: 0 !important;
}

.dsf-b-aufpreis-badge-wrap::before {
    content: none !important;
}

.dsf-b-aufpreis-badge {
    display: inline-block;
    padding: .2rem .55rem;
    background: #66a834;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
    vertical-align: middle;
    white-space: nowrap;
}

/* Rechtshinweis-Banner oberhalb Wunschliste/Entfernen */
.dsf-b-cart-hinweis {
    margin: .55rem 0 .15rem;
    padding: .7rem .85rem;
    background: #fef9e7;
    border: 1px solid #fde68a;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    font-size: .82rem;
    line-height: 1.45;
    color: #5b4500;
}

.dsf-b-cart-hinweis strong {
    color: #1f2937;
}

/* v1.10.61: Bedruckungsdetails-Box - kompletter Visual-Refresh.
   - Header mit Icon + Titel links, grüne Aufpreis-Pille rechts
   - Body mit feinem Card-Look, harmonische Abstände
   - Footer mit grünem Akzent für Gesamt-Aufpreis */
.dsf-b-cart-details {
    margin-top: .35rem;
    border: 1px solid #d9dde3;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}

.dsf-b-cart-details > .dsf-b-cart-details__summary {
    padding: .75rem 1rem;
    font-size: .9rem;
    color: #1f2937;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: linear-gradient(to bottom, #fafbfc 0%, #f3f5f8 100%);
    border-bottom: 1px solid #e3e6eb;
    transition: background .15s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.dsf-b-cart-details > .dsf-b-cart-details__summary:hover {
    background: linear-gradient(to bottom, #f3f5f8 0%, #eaeef3 100%);
}

.dsf-b-cart-details > .dsf-b-cart-details__summary::-webkit-details-marker {
    display: none;
}

.dsf-b-cart-details__title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.dsf-b-cart-details__icon {
    font-size: 1.05em;
    opacity: .75;
}

.dsf-b-cart-details__sum {
    display: none; /* v1.10.62: nicht mehr verwendet */
}

.dsf-b-cart-details > .dsf-b-cart-details__summary::after {
    content: '▾';
    color: #5b6574;
    transition: transform .15s ease;
    margin-left: .35rem;
    font-size: .85em;
    flex: 0 0 auto;
}

.dsf-b-cart-details:not([open]) > .dsf-b-cart-details__summary::after {
    transform: rotate(-90deg);
}

.dsf-b-cart-details[open] > .dsf-b-cart-details__summary {
    border-bottom: 1px solid #e8ebef;
}

.dsf-b-cart-details__body {
    padding: .35rem 1rem .55rem;
    background: #fff;
}

/* v1.10.62: Item-Layout: Text links (mit grünem Bullet vorne, fettem Wert
   nach dem ":"), Preis rechts in grün. */
.dsf-b-cart-details__body ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dsf-b-cart-li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0;
    padding: .55rem .15rem .55rem 1.4rem;
    font-size: .86rem;
    line-height: 1.45;
    color: #1f2937;
    border-bottom: 1px solid #f0f1f4;
    position: relative;
}
.dsf-b-cart-li:last-child {
    border-bottom: 0;
}
.dsf-b-cart-li::before {
    content: '';
    position: absolute;
    left: .35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #66a834;
    opacity: .55;
}

.dsf-b-cart-li__main {
    flex: 1;
    min-width: 0;
}

.dsf-b-cart-li__val {
    color: #1f2937;
    font-weight: 700;
}

.dsf-b-cart-li__price {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: .2rem .65rem;
    background: #66a834;
    color: #fff;
    font-weight: 600;
    font-size: .82rem;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.4;
}

/* Meta-Items (Schriftart, Farbe) - dezent abgesetzt unten, kein Bullet,
   kein flex layout (Preis-Spalte gibt's hier nicht) */
.dsf-b-cart-details__body li.dsf-b-cart-meta {
    display: block;
    padding-left: .15rem;
    color: #5b6574;
    font-size: .82rem;
}
.dsf-b-cart-details__body li.dsf-b-cart-meta::before {
    display: none;
}
.dsf-b-cart-details__body li.dsf-b-cart-meta:first-of-type {
    margin-top: .35rem;
    padding-top: .6rem;
    border-top: 1px dashed #d1d5db;
}

/* v1.10.61: Footer mit Gesamt-Aufpreis als grüner Akzent */
.dsf-b-cart-details__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .7rem 1rem;
    background: linear-gradient(to top, #f0f9e8 0%, #f7faf3 100%);
    border-top: 1px solid #d9e8c6;
    font-size: .88rem;
}

.dsf-b-cart-details__footer-label {
    color: #2d4a16;
    font-weight: 600;
}

.dsf-b-cart-details__footer-value {
    color: #2d6b0e;
    font-weight: 700;
    font-size: .95rem;
}

/* ========================================================================
   v1.2.25: Cart enhancements - layout improvements
   ======================================================================== */

/* The dsf-b-cart-perso-block wraps details + hinweis together */
.dsf-b-cart-perso-block {
    margin-top: .55rem;
}

/* Hinweis sits directly below the details block, full-width */
.dsf-b-cart-perso-block .dsf-b-cart-hinweis {
    margin: .35rem 0 0;
}

/* Details block: bigger, more breathing room - bedruckung lines should not wrap */
.dsf-b-cart-perso-block .dsf-b-cart-details {
    width: 100%;
}

.dsf-b-cart-perso-block .dsf-b-cart-details__body {
    padding: .65rem 1rem .85rem;
}

.dsf-b-cart-perso-block .dsf-b-cart-details__body ul {
    padding-left: 1rem;
    margin: 0;
}

.dsf-b-cart-perso-block .dsf-b-cart-details__body li {
    margin-bottom: .35rem;
    font-size: .87rem;
    white-space: normal; /* allow wrap if really needed but should fit on most cases */
    line-height: 1.4;
}

.dsf-b-cart-perso-block .dsf-b-cart-details__body li:last-child {
    margin-bottom: 0;
}

/* Make the right-side image cell stay floated left when row goes full-width */
.dsf-b-konfig-vater {
    align-items: flex-start;
}

/* ========================================================================
   v1.2.28: Confirm-Dialog für "Änderungen verwerfen?"
   ======================================================================== */

.dsf-b-confirm {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}

.dsf-b-confirm.is-open {
    opacity: 1;
    pointer-events: auto;
}

.dsf-b-confirm__panel {
    background: #fff;
    width: calc(100% - 2rem);
    max-width: 360px;
    padding: 1.25rem 1.25rem 1rem;
    transform: translateY(-8px);
    transition: transform .15s ease;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.dsf-b-confirm.is-open .dsf-b-confirm__panel {
    transform: translateY(0);
}

.dsf-b-confirm__title {
    margin: 0 0 .55rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
}

.dsf-b-confirm__text {
    margin: 0 0 1.1rem;
    font-size: .9rem;
    line-height: 1.45;
    color: #5b6574;
}

.dsf-b-confirm__actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.dsf-b-confirm__keep,
.dsf-b-confirm__discard {
    border: 0;
    padding: .75rem 1rem;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.dsf-b-confirm__keep {
    background: #66a834;
    color: #fff;
}

.dsf-b-confirm__keep:hover {
    background: #53882a;
}

.dsf-b-confirm__discard {
    background: transparent;
    color: #5b6574;
    border: 1px solid #d1d5db;
}

.dsf-b-confirm__discard:hover {
    background: #f7f8fa;
    color: #1f2937;
}

/* v1.7.0: Plausi-variant - "Trotzdem übernehmen" is the destructive choice
   (customer overrides our warning), so it gets the muted style; "Korrigieren"
   becomes the recommended primary action. */
.dsf-b-confirm--plausi .dsf-b-confirm__keep {
    background: #66a834;
    color: #fff;
}
.dsf-b-confirm--plausi .dsf-b-confirm__discard {
    background: transparent;
    color: #b45309;
    border: 1px solid #d97706;
}
.dsf-b-confirm--plausi .dsf-b-confirm__discard:hover {
    background: #fef3c7;
    color: #78350f;
}
.dsf-b-confirm--plausi .dsf-b-confirm__title::before {
    content: "⚠ ";
    color: #d97706;
}

/* ========================================================================
   v1.3.2: Setup-Hinweis-Box (zusätzlicher Info-Hinweis oben im Drawer)
   ======================================================================== */

.dsf-b-setup-hint {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: 0 0 .85rem;
    padding: .7rem .85rem;
    background: #eef6ff;
    border-left: 3px solid #2c7be5;
    color: #1f2937;
    font-size: .87rem;
    line-height: 1.45;
}

.dsf-b-setup-hint__icon {
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    background: #2c7be5;
    color: #fff;
    font-weight: 700;
    font-size: .75rem;
    border-radius: 50%;
    font-family: Georgia, serif;
    font-style: italic;
}

.dsf-b-setup-hint__text {
    flex: 1;
}

/* ========================================================================
   v1.4.6: Image-Tabs (Vorderseite/Rückseite-Switcher unter Bild)
   ======================================================================== */

.dsf-b-preview__imgtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin: 8px 0 4px;
}

.dsf-b-preview__imgtab {
    appearance: none;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    padding: 6px 14px;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0;
    line-height: 1.2;
    transition: background .15s, border-color .15s, color .15s;
    font-family: inherit;
}

.dsf-b-preview__imgtab:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.dsf-b-preview__imgtab.is-active {
    background: #66a834;
    border-color: #66a834;
    color: #fff;
}

.dsf-b-preview__imgtab.is-active:hover {
    background: #5fa722;
    border-color: #5fa722;
}

/* ========================================================================
   v1.4.8: Live-Text-Overlay auf Vorschau-Bild
   Default-Schrift: Bebas Neue (Google Fonts CDN, im HTML eingebunden)
   ======================================================================== */

.dsf-b-preview__stage {
    position: relative;
    /* stage muss relativ sein damit overlays absolut darin sitzen */
}

.dsf-b-overlay-text {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
    font-weight: 400;
    color: #000;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
    /* Subtle drop-shadow for visibility on light backgrounds */
    text-shadow: 0 1px 2px rgba(255,255,255,.6);
    /* fontSize wird per JS auto-gefittet */
}

.dsf-b-overlay-text.is-empty {
    display: none;
}

/* v1.7.1: Ghost placeholder shown when toggle active but field empty.
   Helps the customer see WHERE the print will go on the trikot before
   they start typing. Dimmed + italic so it's clearly a placeholder. */
.dsf-b-overlay-text.is-placeholder {
    color: #9ca3af !important;
    font-style: italic;
    text-shadow: 0 1px 2px rgba(255,255,255,.85);
    opacity: .85;
}

/* ========================================================================
   v1.4.9: Hide overlapping floating widgets while drawer is open.
   Trusted Shops, chat bubbles etc. love z-index: 2147483647 too.
   We hide them fully so the drawer is the only floating element.
   ======================================================================== */

body.dsf-b-drawer-open #trustbadge-container,
body.dsf-b-drawer-open #trustcard-container,
body.dsf-b-drawer-open .trustbadge,
body.dsf-b-drawer-open #trusted-shops-trustbadge,
body.dsf-b-drawer-open #ts-product-stickers-container,
body.dsf-b-drawer-open [id^="trustbadge"],
body.dsf-b-drawer-open [id^="trustcard"],
body.dsf-b-drawer-open [class^="trustbadge"] {
    display: none !important;
    visibility: hidden !important;
}

/* ========================================================================
   v1.5.1: Font-picker dropdown im Drawer (Stage 3.4b)
   ======================================================================== */

.dsf-b-fontpicker {
    margin: 14px 0 6px;
    padding: 12px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dsf-b-fontpicker__label {
    font-size: .85rem;
    font-weight: 600;
    color: #374151;
    flex: 0 0 auto;
}

.dsf-b-fontpicker__select {
    flex: 1 1 auto;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 0;
    background: #fff;
    font-size: .95rem;
    cursor: pointer;
    transition: border-color .15s;
}

.dsf-b-fontpicker__select:hover,
.dsf-b-fontpicker__select:focus {
    border-color: #66a834;
    outline: none;
}

/* v1.5.1: Update Bebas Neue @import to load all 4 Google Fonts at once.
   Self-hosted/system fonts dont need imports. */

/* ========================================================================
   v1.5.2: Cart "Bedruckungsdetails" - Schriftart/Farbe-Anzeige
   v1.10.56: Margin/Border-Top weg - die Items haben jetzt selbst ein
   sauberes Padding und einen Separator als Border-Bottom.
   ======================================================================== */

.dsf-b-cart-meta {
    margin-top: 0;
    padding-top: .5rem;
    border-top: 0;
}

.dsf-b-cart-meta__label {
    font-weight: 500;
    color: #6b7280;
}

.dsf-b-cart-meta__value {
    font-weight: 600;
    color: #111827;
}

.dsf-b-cart-meta__swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1px solid #d1d5db;
    vertical-align: middle;
    margin: 0 .2em;
}

/* ========================================================================
   v1.5.4: Color-picker im Drawer (Stage 3.4c)
   ======================================================================== */

.dsf-b-colorpicker {
    margin: 6px 0 6px;
    padding: 12px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.dsf-b-colorpicker__label {
    font-size: .85rem;
    font-weight: 600;
    color: #374151;
    flex: 0 0 auto;
}

.dsf-b-colorpicker__swatches {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.dsf-b-colorpicker__swatch {
    width: 32px;
    height: 32px;
    border-radius: 0;
    border: 2px solid #d1d5db;
    cursor: pointer;
    padding: 0;
    transition: transform .12s, border-color .12s, box-shadow .12s;
}

.dsf-b-colorpicker__swatch:hover {
    transform: scale(1.1);
    border-color: #9ca3af;
}

.dsf-b-colorpicker__swatch.is-active {
    border-color: #66a834;
    box-shadow: 0 0 0 3px rgba(108,186,39,.25);
}

.dsf-b-colorpicker__name {
    font-size: .85rem;
    color: #6b7280;
    margin-left: 4px;
}

/* Cart meta swatch */
.dsf-b-cart-meta__swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 0;
    border: 1px solid #d1d5db;
    vertical-align: middle;
    margin-right: 2px;
}

/* ========================================================================
   v1.6.1 (Stage 3.5b): Template-Mode Hinweis-Banner unter dem Mockup
   ======================================================================== */

/* v1.7.2: Template hint - jetzt oben im Drawer-Body direkt unter dem
   Setup-Hint platziert. Margins angepasst damit es konsistent mit
   den anderen Hint-Boxes aussieht. */
.dsf-b-template-hint {
    margin: 0 0 .85rem;
    padding: 10px 14px;
    background: #fef3c7;
    border-left: 3px solid #d97706;
    color: #78350f;
    font-size: .85rem;
    line-height: 1.4;
}

/* v1.6.2: Pulse-Animation für ungespeicherten Save-Button */
@keyframes dsf-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, .4); }
    50%      { box-shadow: 0 0 0 8px rgba(217, 119, 6, 0); }
}

/* ========================================================================
   v1.6.8 / v1.7.1: Inline-Validierung für leere aktivierte Felder.
   Variants: --type-number shows "Nummer" wording, --type-text/mixed shows "Text".
   Row classes are added by JS based on entry.fieldType.
   ======================================================================== */
.dsf-b-area--empty-error {
    border: 2px solid #dc2626 !important;
    background: rgba(220, 38, 38, .04);
}
.dsf-b-area--empty-error input[data-field="value"] {
    border-color: #dc2626;
    background: #fff;
}
.dsf-b-area--empty-error::after {
    /* Default (text/mixed) wording */
    content: "⚠ Bitte gewünschten Text eingeben oder Druckbereich deaktivieren";
    display: block;
    color: #dc2626;
    font-size: .82em;
    margin-top: 6px;
    padding: 0 12px 8px;
    line-height: 1.3;
}
/* v1.7.1: Number-fields get "Nummer" wording */
.dsf-b-area--type-number.dsf-b-area--empty-error::after {
    content: "⚠ Bitte gewünschte Nummer eingeben oder Druckbereich deaktivieren";
}

/* ========================================================================
   v1.7.0: Plausi-Modal Variante (Warnung, gelber Akzent statt rotem)
   ======================================================================== */
.dsf-b-confirm--plausi .dsf-b-confirm__panel {
    border-top: 4px solid #d97706;
}
.dsf-b-confirm--plausi .dsf-b-confirm__title {
    color: #78350f;
}
.dsf-b-confirm--plausi .dsf-b-confirm__title::before {
    content: "⚠ ";
}
.dsf-b-confirm--plausi .dsf-b-confirm__discard {
    background: #d97706;
    border-color: #d97706;
    color: #fff;
}
.dsf-b-confirm--plausi .dsf-b-confirm__discard:hover {
    background: #b45309;
    color: #fff;
}

/* ========================================================================
   v1.8.0: Image upload (Wappen / Logo) UI
   ======================================================================== */

.dsf-b-area__or {
    text-align: center;
    color: #9ca3af;
    font-size: .8em;
    margin: .35rem 0;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.dsf-b-upload {
    margin-top: .35rem;
}

.dsf-b-upload__btn {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px dashed #9ca3af;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
    font-size: .9rem;
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
    border-radius: 0;
}

.dsf-b-upload__btn:hover {
    border-color: #66a834;
    background: #f0f9eb;
    color: #1f2937;
}

.dsf-b-upload__btn small {
    display: block;
    margin-top: 2px;
    color: #9ca3af;
    font-size: .75em;
}

.dsf-b-upload__icon {
    font-size: 1.1em;
}

.dsf-b-upload__preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .55rem;
    background: #f9fafb;
    border: 1px solid #d1d5db;
}

.dsf-b-upload__thumb {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #d1d5db;
    flex-shrink: 0;
}

.dsf-b-upload__name {
    flex: 1;
    font-size: .85rem;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dsf-b-upload__remove {
    background: none;
    border: 0;
    color: #dc2626;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0 6px;
    line-height: 1;
}

.dsf-b-upload__remove:hover {
    color: #991b1b;
}

.dsf-b-upload__error {
    margin-top: 6px;
    color: #dc2626;
    font-size: .8rem;
}

/* Image as overlay on the mockup */
.dsf-b-overlay-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.dsf-b-overlay-text.is-image {
    background: transparent;
    border: 0;
    padding: 0;
}

/* v1.9.6: Section headers grouping fields by preview image
   ("Vorderseite" / "Rückseite" / etc.). Only inserted when the setup
   has 2+ images with entries.
   v1.9.7: Aligned flush left with .dsf-b-section__label (no left padding)
   and dropped the bottom border to match the parent label's visual weight. */
/* v1.9.7: Aligned flush left with .dsf-b-section__label (no left padding)
   and dropped the bottom border to match the parent label's visual weight.
   v1.10.55: Mehr Luft oben, damit Gruppen-Headers (VORDERSEITE / RÜCKSEITE)
   nicht zu sehr an der vorherigen Row kleben - macht die Section-Struktur
   visuell klarer. */
.dsf-b-area-group {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    padding: .9rem 0 .4rem;
    margin: 0;
}
.dsf-b-area-group:first-child {
    padding-top: 0;
}

/* v1.10.0: Mode-Pills - User picks Text/Number/Image for ambiguous fields.
   v1.10.1: Pills only visible when the area's toggle is on. Same animation
   pattern as .dsf-b-area__field for consistency. */
.dsf-b-modes {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    transition: max-height .25s ease, margin-top .25s ease, opacity .2s ease;
}
.dsf-b-area.is-active .dsf-b-modes {
    max-height: 50px;
    margin-top: .55rem;
    opacity: 1;
}
.dsf-b-mode {
    flex: 1 1 auto;
    min-height: 36px;
    padding: .35rem .85rem;
    background: #fff;
    border: 1px solid #d9dde3;
    border-radius: 4px;
    color: #4b5563;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.dsf-b-mode:hover {
    border-color: #9ca3af;
    color: #1f2937;
}
.dsf-b-mode.is-active {
    background: #66a834;
    border-color: #5ca322;
    color: #fff;
}
.dsf-b-mode.is-active:hover {
    background: #5ca322;
}

/* Hint when no mode is picked yet */
.dsf-b-area__pickhint {
    color: #6b7280;
    font-size: .8rem;
    font-style: italic;
    padding: .5rem .15rem .25rem;
}

/* ============================================================
   v1.10.47: Spieler-Preset Wahlboard + Modus-Switcher
   ============================================================ */

.dsf-b-preset {
    margin: 0 0 1rem;
}

/* ----- Mode 'unset': Big Wahlboard ----- */
.dsf-b-preset--wahlboard {
    padding: 1.1rem 1rem 1.2rem;
    background: #f7f8fa;
    border: 1px solid #e3e6eb;
    border-left: 3px solid #4763a3;
}

.dsf-b-preset__intro {
    text-align: center;
    margin-bottom: 1rem;
}

.dsf-b-preset__title {
    margin: 0 0 .25rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
}

.dsf-b-preset__hint {
    margin: 0;
    font-size: .85rem;
    color: #6b7280;
}

.dsf-b-preset__choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}

.dsf-b-preset__btn {
    /* v1.11.37: Variante A - Icon oben, Text zentriert darunter.
       Symmetrische Optik, Text bricht natuerlich um (kein <br> mehr noetig). */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 1.1rem 1rem;
    background: #fff;
    border: 2px solid #e3e6eb;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
    border-radius: 0;
    min-height: 120px;
}

.dsf-b-preset__btn:hover {
    border-color: #4763a3;
    background: #f4f7fb;
    transform: translateY(-1px);
}

.dsf-b-preset__btn:active {
    transform: translateY(0);
}

.dsf-b-preset__btn--team:hover { border-color: #4763a3; }
.dsf-b-preset__btn--wish:hover { border-color: #66a834; }

.dsf-b-preset__btn-icon {
    font-size: 1.75rem;
    line-height: 1;
    flex: 0 0 auto;
}

.dsf-b-preset__btn-text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    align-items: center;
}

.dsf-b-preset__btn-text strong {
    font-size: .95rem;
    color: #1f2937;
    line-height: 1.25;
    font-weight: 600;
}

.dsf-b-preset__btn-sub {
    font-size: .78rem;
    color: #6b7280;
    font-weight: normal;
}

/* ----- Mode 'team' / 'wish': Compact bar above areas ----- */
.dsf-b-preset--compact {
    padding: .55rem .75rem .65rem;
    background: #f7f8fa;
    border: 1px solid #e3e6eb;
    border-left: 3px solid #4763a3;
}

.dsf-b-preset__active--wish {
    /* v1.11.38: Border-Farbe der Wish-Switch-Box auf Blau gesetzt
       (Konsistenz mit TeamGate-Switch-Box). War vorher gruen. */
    border-left-color: #4763a3;
}

/* v1.11.38: Wish-Switch CTA - Icon links, Button rechts.
   Optik analog zu .dsf-b-teamgate--alt. */
.dsf-b-preset__wish-row {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .45rem 0;
}

.dsf-b-preset__wish-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex: 0 0 auto;
}

.dsf-b-preset__wish-btn {
    background: transparent;
    border: 1px solid #d1d5db;
    color: #4763a3;
    cursor: pointer;
    padding: .5rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    border-radius: 0;
    flex: 1;
    text-align: left;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.dsf-b-preset__wish-btn:hover {
    background: #4763a3;
    border-color: #4763a3;
    color: #fff;
}

.dsf-b-preset__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
    flex-wrap: wrap;
}

.dsf-b-preset__lbl {
    font-size: .85rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.dsf-b-preset__switch {
    background: transparent;
    border: 0;
    color: #4763a3;
    font-size: .8rem;
    cursor: pointer;
    padding: .25rem .5rem;
    text-decoration: underline;
    font-weight: 500;
}

.dsf-b-preset__switch:hover {
    color: #3b5489;
    text-decoration: none;
}

.dsf-b-preset__select-row {
    display: flex;
    gap: .4rem;
    align-items: stretch;
}

.dsf-b-preset__select {
    flex: 1;
    padding: .55rem .65rem;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #1f2937;
    font-size: .95rem;
    border-radius: 0;
    box-sizing: border-box;
}

@media (max-width: 575px) {
    .dsf-b-preset__select { font-size: 16px; /* iOS no-zoom */ }
}

.dsf-b-preset__select:focus {
    outline: none;
    border-color: #4763a3;
    box-shadow: 0 0 0 2px rgba(71,99,163,.18);
}

.dsf-b-preset__clear {
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid #d1d5db;
    color: #6b7280;
    cursor: pointer;
    padding: 0 .8rem;
    font-size: 1.1rem;
    line-height: 1;
    border-radius: 0;
}

.dsf-b-preset__clear:hover {
    background: #fee2e2;
    border-color: #b91c1c;
    color: #b91c1c;
}

/* Mobile: stack the wahlboard buttons */
@media (max-width: 480px) {
    .dsf-b-preset__choices {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   v1.10.48: Team-Gate-Card - zeigt sich im team-Modus solange kein
   Spieler ausgewählt ist. Verhindert dass User parallel eigene Werte
   in die Druckbereiche tippen kann, was den Preset-Sinn untergraben würde.
   ============================================================ */

.dsf-b-teamgate {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    background: #f7f8fa;
    border: 1px solid #e3e6eb;
    border-left: 3px solid #4763a3;
    margin: 0 0 1rem;
}

.dsf-b-teamgate__icon {
    font-size: 1.6rem;
    line-height: 1;
    flex: 0 0 auto;
    margin-top: .15rem;
}

.dsf-b-teamgate__body {
    flex: 1;
}

.dsf-b-teamgate__title {
    margin: 0 0 .3rem;
    font-size: .95rem;
    font-weight: 700;
    color: #1f2937;
}

.dsf-b-teamgate__text {
    margin: 0 0 .65rem;
    font-size: .85rem;
    color: #5b6574;
    line-height: 1.4;
}

.dsf-b-teamgate__switch {
    background: transparent;
    border: 1px solid #d1d5db;
    color: #4763a3;
    cursor: pointer;
    padding: .35rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    border-radius: 0;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

/* v1.11.37: --alt = zweite blaue Box mit dem Switch-CTA.
   Items vertikal zentriert (statt flex-start), Button als Hauptelement
   prominent statt klein. */
.dsf-b-teamgate--alt {
    align-items: center;
    margin-top: -.25rem; /* etwas naeher an die obere Box ruecken */
}

.dsf-b-teamgate--alt .dsf-b-teamgate__icon {
    margin-top: 0;
}

.dsf-b-teamgate--alt .dsf-b-teamgate__body {
    display: flex;
    align-items: center;
}

.dsf-b-teamgate--alt .dsf-b-teamgate__switch {
    padding: .5rem 1rem;
    font-size: .9rem;
    width: 100%;
    text-align: left;
}

.dsf-b-teamgate__switch:hover {
    background: #4763a3;
    border-color: #4763a3;
    color: #fff;
}

/* v1.11.34: Separater Switch-Block unter der TeamGate-Card mit dem
   CTA "Lieber eigene Druckdaten eintippen". Vom Erklaer-Text optisch
   abgesetzt damit klar wird dass der Klick ein anderer Pfad ist. */
.dsf-b-teamgate-switch {
    display: flex;
    justify-content: center;
    margin: .5rem 0 1rem;
}

.dsf-b-teamgate-switch__btn {
    background: transparent;
    border: 1px solid #d1d5db;
    color: #4763a3;
    cursor: pointer;
    padding: .5rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    border-radius: 0;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.dsf-b-teamgate-switch__btn:hover {
    background: #4763a3;
    border-color: #4763a3;
    color: #fff;
}

/* v1.10.49: Gesperrte Inputs im Spieler-Preset-Modus.
   Werte aus dem ausgewählten Spieler sind nicht editierbar, der User kann
   nur noch über den Toggle entscheiden welche Position bedruckt wird. */
.dsf-b-area__input--locked {
    background: #f4f5f7 !important;
    color: #5b6574 !important;
    cursor: not-allowed;
    border-color: #d1d5db !important;
}
.dsf-b-area__input--locked:focus {
    outline: none;
    box-shadow: none;
}

/* v1.10.54: Im gesperrten Team-Preset-Modus wird das Eingabefeld komplett
   ausgeblendet - es bringt keinen Mehrwert (User kann nichts ändern) und
   spart vertikalen Platz. Toggle/Label/Preis bleiben sichtbar.
   Image-Felder werden NIE versteckt (Bild-Upload muss möglich bleiben).
   v1.10.55: Spacing harmonisiert - die Row im is-active+field-hidden State
   bekommt dasselbe Padding wie eine inaktive Row, sodass die Reihen visuell
   gleich hoch wirken. Plus mode-pills werden hier auch ausgeblendet (im
   Team-Modus gibt's eh nichts auszuwählen). */
.dsf-b-area--field-hidden .dsf-b-area__field {
    display: none !important;
}
.dsf-b-area--field-hidden .dsf-b-modes {
    display: none !important;
}
.dsf-b-area--field-hidden.dsf-b-area {
    padding: .65rem .85rem;
}
.dsf-b-area--field-hidden.is-active {
    padding: .65rem .85rem;
}
.dsf-b-area--field-hidden .dsf-b-area__head {
    margin-bottom: 0;
}
/* v1.10.55: Dezenter aktiver Border-Style bei kompakten Toggle-Rows -
   die kräftige dunkle Border (.dsf-b-area.is-active) wäre proportional
   zu viel auf einer 1-Zeilen-Row. Stattdessen der pastell-königsblaue
   Preset-Akzent. */
.dsf-b-area--field-hidden.is-active {
    border-color: #4763a3;
    background: #fafbfc;
}

/* v1.10.56: Wert in Klammern hinter dem Label im gesperrten Preset-Modus.
   Bewusst NICHT fett (Label-Style = bold), dezent grau, etwas kleiner. */
.dsf-b-area__name-val {
    font-weight: normal;
    color: #6b7280;
    font-size: .88em;
    margin-left: .25em;
}