/* ==================================================================
   Shop von datacrossmedia - Design wie das KundenCenter
   Farben und Schrift kommen aus dem gemeinsamen datacrossmedia-Design (dcm.css / dcmdark.css vom CDN, siehe _Layout),
   die Bausteine sind dem KundenCenter nachgebaut (Site.css, Shop-Entwurf).
   Achtung: --color-bg-rgb, --color-bg-2-rgb und --color-shadow-rgb enden mit Komma,
   deshalb rgba(var(--color-shadow-rgb) 0.1) ohne eigenes Komma.
   ================================================================== */

/* Ersatzwerte, falls das CDN nicht erreichbar ist. :where() hat keine Spezifität, die Werte aus dcm.css gewinnen immer. */
:where(:root) {
    --font-family-sans-serif: "Equip W03 Light", sans-serif;
    --font-size-klein: 14px;
    --font-size-normal: 16px;
    --font-size-xl: 20px;
    --color-blau: #7ab8eb;
    --color-blau2: #60aae7;
    --color-rot: #dc3545;
    --color-gruen: #5cb85c;
    --color-gelb: #ebc71b;
    --color-grau: #777777;
    --color-text-normal: #333;
    --color-weis: #fff;
    --color-border: #e0e0e0;
    --color-bg: #fff;
    --color-bg-2: #f2f2f2;
    --color-blau-rgb: 122, 184, 235;
    --color-rot-rgb: 220, 53, 69;
    --color-gruen-rgb: 92, 184, 92;
    --color-gelb-rgb: 235, 199, 27;
    --color-grau-rgb: 119, 119, 119;
    --color-text-normal-rgb: 51, 51, 51;
    --color-bg-rgb: 255,255,255,;
    --color-bg-2-rgb: 242,242,242,;
    --color-shadow-rgb: 0,0,0,;
}

:where(:root[data-theme="dunkel"]) {
    --color-blau: #1da8dd;
    --color-blau2: #337ab7;
    --color-gruen: #28a745;
    --color-grau: #dedede;
    --color-text-normal: #dedede;
    --color-border: #4d4d4d;
    --color-bg: #2a2a2a;
    --color-bg-2: #343434;
    --color-blau-rgb: 29, 168, 221;
    --color-gruen-rgb: 40, 167, 69;
    --color-grau-rgb: 222, 222, 222;
    --color-text-normal-rgb: 222, 222, 222;
    --color-bg-rgb: 42,42,42,;
    --color-bg-2-rgb: 52,52,52,;
    --color-shadow-rgb: 255,255,255,;
}

@media (prefers-color-scheme: dark) {
    :where(:root:not([data-theme])) {
        --color-blau: #1da8dd;
        --color-blau2: #337ab7;
        --color-gruen: #28a745;
        --color-grau: #dedede;
        --color-text-normal: #dedede;
        --color-border: #4d4d4d;
        --color-bg: #2a2a2a;
        --color-bg-2: #343434;
        --color-blau-rgb: 29, 168, 221;
        --color-gruen-rgb: 40, 167, 69;
        --color-grau-rgb: 222, 222, 222;
        --color-text-normal-rgb: 222, 222, 222;
        --color-bg-rgb: 42,42,42,;
        --color-bg-2-rgb: 52,52,52,;
        --color-shadow-rgb: 255,255,255,;
    }
}

/* Eingabefelder, Häkchen und Bildlaufleisten des Browsers passend zur Darstellung */
:root { color-scheme: light; }
:root[data-theme="dunkel"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) { color-scheme: dark; }
}

/* ---------------------------------------------------------------- */
/* Grundlagen                                                       */
/* ---------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
}

/* ---------------------------------------------------------------- */
/* Seitenwechsel: weich überblenden, beim Laden ein Balken oben     */
/* ---------------------------------------------------------------- */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .2s;
}

.shop-ladebalken {
    background: linear-gradient(90deg, rgba(var(--color-blau-rgb), .6), var(--color-blau));
    box-shadow: 0 0 8px rgba(var(--color-blau-rgb), .7);
    height: 3px;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: scaleX(0);
    transform-origin: left;
    width: 100%;
    z-index: 3000;
}

/* Läuft schnell an und wird dann immer langsamer, bis die neue Seite da ist */
.laedt .shop-ladebalken {
    animation: shop-laden 8s cubic-bezier(.1, .7, .3, 1) forwards;
    opacity: 1;
}

/* Inhalt leicht abblenden, damit sichtbar ist, dass etwas passiert */
.laedt .inhalt {
    opacity: .6;
    transition: opacity .3s ease .2s;
}

/* Mitwachsender iFrame: Balken oben im sichtbaren Teil */
.iframe-waechst.sichtbar-bekannt .shop-ladebalken {
    position: absolute;
    top: var(--sichtbar-oben);
}

@keyframes shop-laden {
    0% { transform: scaleX(0); }
    20% { transform: scaleX(.45); }
    100% { transform: scaleX(.92); }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    .laedt .shop-ladebalken {
        animation: none;
        transform: scaleX(.6);
    }
}

/* Wie die Inhaltsfläche des KundenCenters (.kc-main) */
body {
    background: var(--color-bg);
    color: var(--color-text-normal);
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-sans-serif);
    font-size: var(--font-size-klein);
    line-height: 1.5;
    min-height: 100vh;
}

/* Wächst der iFrame mit dem Inhalt (shop.js misst body), keine Mindest- oder feste Höhe, auch falls dcm.css eine setzt;
   sonst wüchse der iFrame nur und schrumpfte nie. Bei fester Höhe (data-hoehe="fest") gilt das nicht */
.iframe-waechst,
.iframe-waechst body {
    height: auto;
    min-height: 0;
}

/* Das geschlossene Warenkorb-Panel liegt im iFrame rechts außerhalb der Seite: kein waagerechter Bildlauf */
html:has(> body.im-iframe) {
    overflow-x: hidden;
}

a {
    color: var(--color-blau);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-normal);
    line-height: 1.3;
}

h2 {
    font-size: 36px;
    font-weight: 600;
    margin: 0 0 8px;
}

/* dcm.css setzt h3-h5 mit !important auf 20-25px */
h5 {
    font-weight: 700;
    margin: 0;
}

.symbol {
    flex: none;
    height: 18px;
    width: 18px;
}

.nur-screenreader {
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ---------------------------------------------------------------- */
/* Inhalt und Fußleiste wie .kc-main und .dcm-footer                */
/* ---------------------------------------------------------------- */
.inhalt {
    flex: 1;
    padding: 24px;
}

.fuss {
    align-items: center;
    backdrop-filter: blur(10px);
    background: rgba(var(--color-blau-rgb), 0.07);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    justify-content: center;
    padding: 14px 20px;
    user-select: none;
}

/* Eingebettet hat die einbettende Seite (z. B. das KundenCenter) ihre eigene Fußleiste */
.im-iframe .fuss {
    display: none;
}

.fuss-link {
    color: var(--color-text-normal);
    position: relative;
    transition: color .25s ease;
}

.fuss > * + *::before {
    color: var(--color-text-normal);
    content: "|";
    padding: 0 6px;
}

.fuss-link:hover {
    color: var(--color-blau);
    text-decoration: none;
}

/* ---------------------------------------------------------------- */
/* Knöpfe wie die DevExtreme-Knöpfe des KundenCenters (.dx-button)  */
/* ---------------------------------------------------------------- */
.knopf {
    align-items: center;
    appearance: none;
    background: var(--color-bg);
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(var(--color-grau-rgb), 0.4);
    color: var(--color-text-normal);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: var(--font-size-klein);
    gap: 6px;
    justify-content: center;
    line-height: 1.2;
    min-height: 32px;
    overflow: hidden;
    padding: 6px 12px;
    position: relative;
    text-decoration: none !important;
    transition: all .3s ease;
    white-space: nowrap;
}

/* Lichtstreifen beim Darüberfahren */
.knopf::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    content: "";
    height: 100%;
    left: -100%;
    position: absolute;
    top: 0;
    transition: left .5s ease;
    width: 100%;
}

.knopf:hover {
    border-color: var(--color-blau);
    box-shadow: 0 2px 10px rgba(var(--color-grau-rgb), 0.4);
    transform: translateY(-2px);
}

.knopf:hover::before {
    left: 100%;
}

.knopf .symbol {
    transition: transform .3s ease;
}

.knopf:hover .symbol {
    color: var(--color-blau);
}

.knopf:focus-visible {
    outline: 2px solid rgba(var(--color-blau-rgb), .6);
    outline-offset: 2px;
}

/* Hauptaktion wie dx-button-default */
.knopf-primaer {
    background: var(--color-blau);
    color: var(--color-weis);
}

.knopf-primaer:hover {
    border-color: transparent;
}

.knopf-primaer:hover .symbol {
    color: inherit;
    transform: translateX(4px);
}

.knopf-breit {
    width: 100%;
}

.knopf-gross {
    font-size: var(--font-size-normal);
    min-height: 40px;
}

/* Textlink-Knopf mit Unterstrich wie in der Navigation des KundenCenters */
.knopf-link {
    background: none;
    border: 0;
    color: var(--color-blau);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-size-klein);
    padding: 0;
    position: relative;
}

.knopf-link::after {
    background: var(--color-blau);
    bottom: -3px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    transition: width .25s ease;
    width: 0;
}

.knopf-link:hover {
    text-decoration: none;
}

.knopf-link:hover::after {
    width: 100%;
}

.knopf-link .symbol {
    height: 16px;
    width: 16px;
}

/* ---------------------------------------------------------------- */
/* Seitenkopf mit Kontakt und Hinweis wie im Shop-Entwurf           */
/* ---------------------------------------------------------------- */
.seiten-kopf {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 30px;
    justify-content: space-between;
    margin: 15px 0 40px;
}

.seiten-kopf > div:first-child {
    flex: 1 1 420px;
}

.kontakt {
    flex: 0 1 auto;
    position: relative;
    text-align: right;
}

/* Unter der Zeile mit "Zurück" (und ggf. den Bestellschritten): Plakette rechts oben auf Höhe dieser Zeile */
@media (min-width: 701px) {
    :is(.shop-navigation, .shop-kopfzeile) + .seiten-kopf .nur-gewerbe {
        bottom: 100%;
        margin-bottom: 22px;
        position: absolute;
        right: 0;
        white-space: nowrap;
    }
}

.kontakt p {
    font-size: var(--font-size-normal);
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
}

/* Plakette wie .kc-Shop-Gewerbe */
.nur-gewerbe {
    background: linear-gradient(rgba(var(--color-rot-rgb), .08), rgba(var(--color-rot-rgb), .08)), var(--color-bg);
    border: 1px solid rgba(var(--color-rot-rgb), .3);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(var(--color-shadow-rgb) 0.12);
    color: var(--color-rot);
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 10px;
    padding: 3px 12px;
}

/* ---------------------------------------------------------------- */
/* Kacheln wie auf der Startseite des KundenCenters (.kc-Kacheln-*) */
/* Farbe über die Statusklassen aus dcm.css: lizensiert, ausgeschieden ... */
/* ---------------------------------------------------------------- */
.kc-Kacheln-Container {
    display: flex;
    flex-wrap: wrap;
    gap: 3vw;
    justify-content: space-evenly;
    margin-bottom: 60px;
}

.kc-Kacheln-Item {
    border-radius: 14px;
    cursor: var(--curs);
    max-width: 100%;
    overflow: visible;
    padding-bottom: 155px;
    position: relative;
    width: 420px;
}

a.kc-Kacheln-Item {
    color: inherit;
    display: block;
    text-decoration: none;
}

/* Kacheln ohne Ziel (noch keine Produktauswahl): kein Hand-Zeiger */
a.kc-Kacheln-Item:not([href]) {
    cursor: default;
}

/* Etikett oben links auf Bildern, Farbe über --tag der Statusklasse */
.kc-Kacheln-Box {
    background-color: rgb(var(--tag));
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--glow2);
    color: var(--color-weis);
    font-size: var(--font-size-klein);
    font-weight: 700;
    left: 0;
    margin: 0 5px;
    overflow: hidden;
    padding: .35rem .7rem;
    position: absolute;
    top: 5px;
    z-index: 3;
}

.kc-Kacheln-Bild {
    background: var(--color-bg);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 14px 34px rgba(var(--color-shadow-rgb) 0.1);
    height: 250px;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.kc-Kacheln-Bild::before {
    background: radial-gradient(120% 85% at 50% 5%, var(--c1) 0%, var(--c2) 55%, var(--c3) 75%, rgba(var(--color-shadow-rgb) 0) 100%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.kc-Kacheln-Bild img {
    display: block;
    height: 95%;
    margin-top: -20px;
    object-fit: contain;
    padding: 35px;
    position: relative;
    width: 100%;
    z-index: 0;
}

/* Glasfläche mit dem Text, klappt beim Darüberfahren auf */
.kc-Kacheln-Text-Container {
    background: transparent;
    border-radius: 18px;
    bottom: 0;
    box-shadow: 0 12px 30px rgba(var(--color-shadow-rgb) 0.1), inset 0 1px 0 rgba(var(--color-bg-2-rgb) .7);
    height: 200px;
    left: 0;
    margin-top: -40px;
    outline: 1px solid rgba(255, 255, 255, 0.28);
    outline-offset: -2px;
    overflow: hidden;
    padding: 18px 20px 60px;
    position: absolute;
    right: 0;
    transform-origin: bottom center;
    transition: height .32s ease, box-shadow .28s ease;
    z-index: 10;
}

.kc-Kacheln-Text-Container::before {
    -webkit-backdrop-filter: blur(16px) saturate(145%);
    backdrop-filter: blur(16px) saturate(145%);
    background: rgba(var(--color-bg-rgb) 0.7);
    content: "";
    inset: 0;
    position: absolute;
    z-index: 0;
}

.kc-Kacheln-Text-Container::after {
    background: radial-gradient(closest-side at 50% 65%, var(--glow1) 0%, var(--glow2) 45%, rgba(0, 0, 0, 0) 75%);
    content: "";
    height: 230px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: -160px;
    transform: translateX(-50%);
    width: 150%;
    z-index: 1;
}

.kc-Kacheln-Text-Container > * {
    position: relative;
    z-index: 2;
}

.kc-Kacheln-Text-Container:hover {
    box-shadow: 0 18px 46px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .7);
    height: 380px;
}

.kc-Kacheln-Container h4 {
    color: var(--color-blau) !important;
    font-size: 20px;
    font-weight: 500;
    margin: 4px 0 10px;
    text-align: center;
}

.kc-Kacheln-Container h5 {
    font-size: var(--font-size-normal) !important;
    font-weight: normal;
    line-height: 1.55;
    margin: 0;
    text-align: center;
}

.kc-Kacheln-Animiert {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(10px);
    transition: max-height .32s ease, opacity .22s ease, transform .32s ease;
}

.kc-Kacheln-Animiert p {
    border-bottom: 1px solid rgba(var(--tag), 0.2);
    font-size: var(--font-size-klein) !important;
    line-height: 1.45;
    margin: 0 0 6px;
    padding: 0 0 6px;
    text-align: center;
}

.kc-Kacheln-Text-Container:hover .kc-Kacheln-Animiert {
    max-height: 280px;
    opacity: 1;
    transform: translateY(0);
}

/* ---------------------------------------------------------------- */
/* Karten (Anmeldung, Fehler, Einrichtung)                          */
/* ---------------------------------------------------------------- */
.karte {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(var(--color-shadow-rgb) 0.1);
    padding: 28px;
    transition: box-shadow .3s ease;
}

.karte:hover {
    box-shadow: 0 18px 36px rgba(var(--color-blau-rgb), 0.2);
}

.karte-schmal {
    margin: 30px auto;
    max-width: 440px;
}

.karte-kopf {
    margin-bottom: 22px;
    text-align: center;
}

/* Rundes Symbol wie in der Infobox des KundenCenters (.kc-Infobox-Item i) */
.karte-symbol {
    align-items: center;
    background: color-mix(in srgb, var(--color-blau) 10%, transparent);
    border-radius: 50%;
    color: var(--color-blau);
    display: inline-flex;
    height: 54px;
    justify-content: center;
    margin-bottom: 12px;
    transition: transform .3s ease, background .3s ease;
    width: 54px;
}

.karte:hover .karte-symbol {
    background: color-mix(in srgb, var(--color-blau) 20%, transparent);
    transform: rotate(-30deg) scale(1.1);
}

.karte-symbol .symbol {
    height: 26px;
    width: 26px;
}

.karte-titel {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 6px;
}

.karte-text {
    color: var(--color-grau);
    margin: 0;
}

.karte-fuss {
    align-items: center;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin-top: 22px;
    padding-top: 16px;
}

.karte-fuss form {
    display: contents;
}

/* Benutzerzeile über dem Passwort */
.konto-zeile {
    align-items: center;
    background: var(--color-bg-2);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    padding: 8px 12px;
}

.konto-zeile span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.konto-zeile > .symbol {
    color: var(--color-blau);
}

/* ---------------------------------------------------------------- */
/* Formulare: Eingabefelder wie dx-textbox (Fluent)                 */
/* ---------------------------------------------------------------- */
.feld {
    margin-bottom: 16px;
}

.feld-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.eingabe {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-bottom-color: rgba(var(--color-text-normal-rgb), .6);
    border-radius: 4px;
    color: var(--color-text-normal);
    font-family: inherit;
    font-size: var(--font-size-klein);
    min-height: 36px;
    padding: 6px 12px;
    transition: border-color .2s ease, box-shadow .2s ease;
    width: 100%;
}

.eingabe::placeholder {
    color: var(--color-grau);
    opacity: .8;
}

.eingabe:hover {
    border-color: rgba(var(--color-text-normal-rgb), .35);
}

.eingabe:focus {
    border-bottom-color: var(--color-blau);
    box-shadow: inset 0 -1px 0 var(--color-blau);
    outline: none;
}

.eingabe.input-validation-error {
    border-bottom-color: var(--color-rot);
    box-shadow: inset 0 -1px 0 var(--color-rot);
}

.eingabe-code {
    font-size: 24px;
    letter-spacing: .4em;
    padding-left: calc(12px + .4em);
    text-align: center;
}

.feld-fehler {
    color: var(--color-rot);
    display: block;
    font-size: 13px;
    margin-top: 4px;
}

.feld-fehler:empty {
    display: none;
}

.haken {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 8px;
    margin: 4px 0 18px;
}

.haken input {
    accent-color: var(--color-blau);
    height: 16px;
    margin: 0;
    width: 16px;
}

/* ---------------------------------------------------------------- */
/* Meldungen wie .kc-Infobox-Container.InBox                        */
/* ---------------------------------------------------------------- */
.meldung {
    align-items: flex-start;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 5px 8px rgba(var(--color-blau-rgb), 0.2);
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    padding: 10px 12px;
}

/* z. B. der Hinweis zur Übergabe der Anmeldung, bis die einbettende Seite sie übernimmt */
.meldung[hidden] {
    display: none;
}

.meldung::before {
    align-self: stretch;
    background: currentColor;
    border-radius: 4px;
    content: "";
    flex: none;
    opacity: .6;
    width: 4px;
}

.meldung ul {
    margin: 0;
    padding-left: 18px;
}

.meldung-fehler {
    background: rgba(var(--color-rot-rgb), .06);
    color: var(--color-rot);
}

.meldung-hinweis {
    background: rgba(var(--color-blau-rgb), .08);
    color: var(--color-text-normal);
}

.meldung-hinweis > .symbol {
    color: var(--color-blau);
}

/* ---------------------------------------------------------------- */
/* Firmenauswahl                                                    */
/* ---------------------------------------------------------------- */
.auswahl-liste {
    display: grid;
    gap: 10px;
}

.auswahl-eintrag {
    align-items: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(var(--color-grau-rgb), 0.25);
    color: var(--color-text-normal);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: var(--font-size-klein);
    gap: 12px;
    padding: 12px 14px;
    text-align: left;
    transition: all .3s ease;
    width: 100%;
}

.auswahl-eintrag:hover {
    border-color: var(--color-blau);
    transform: translateY(-2px);
}

.auswahl-eintrag strong {
    display: block;
}

.auswahl-eintrag small {
    color: var(--color-grau);
}

.auswahl-eintrag .symbol:last-child {
    color: var(--color-blau);
    margin-left: auto;
    transition: transform .3s ease;
}

.auswahl-eintrag:hover .symbol:last-child {
    transform: translateX(4px);
}

/* ---------------------------------------------------------------- */
/* Etiketten wie .kc-Kacheln-Box                                    */
/* ---------------------------------------------------------------- */
.etikett {
    background: rgb(var(--etikett, var(--color-grau-rgb)));
    border-radius: 8px;
    color: var(--color-weis);
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    white-space: nowrap;
}

.etikett-erfolg { --etikett: var(--color-gruen-rgb); }
.etikett-warnung { --etikett: var(--color-gelb-rgb); }
.etikett-neutral { --etikett: var(--color-grau-rgb); }

/* ================================================================== */
/* Produktauswahl, Produktdetails und Warenkorb aus dem Shop-Entwurf  */
/* des KundenCenters (shop-entwurf.css). Farben der Edition kommen    */
/* über die Statusklasse am Rahmen (z. B. .shop-seite.lizensiert).    */
/* ================================================================== */
:root {
    --shop-schatten: 0 12px 30px rgba(var(--color-shadow-rgb) 0.1);
    --shop-schatten-hover: 0 18px 36px rgba(var(--color-blau-rgb), 0.2);
}

.shop-seite {
    color: var(--color-text-normal);
}

/* Zurück zur vorigen Seite */
.shop-navigation {
    align-items: center;
    display: flex;
    margin-bottom: 4px;
}

.shop-zurueck {
    align-items: center;
    background: var(--color-bg);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(var(--color-shadow-rgb) 0.24);
    color: var(--color-text-normal) !important;
    display: inline-flex;
    font-size: var(--font-size-klein);
    gap: 4px;
    height: 32px;
    padding: 0 12px 0 6px;
    text-decoration: none !important;
    transition: box-shadow .2s ease, transform .2s ease;
}

.shop-zurueck:hover {
    box-shadow: 0 3px 8px rgba(var(--color-shadow-rgb) 0.2);
    transform: translateX(-2px);
}

.shop-zurueck .symbol {
    color: var(--color-blau);
}

/* Status-Etikett wie .kc-Kacheln-Box, aber im Textfluss */
.shop-tag {
    background-color: rgb(var(--tag, var(--color-blau-rgb)));
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--glow2, rgba(var(--color-blau-rgb), .3));
    color: var(--color-weis);
    display: inline-block;
    font-size: var(--font-size-klein);
    font-weight: 700;
    padding: .35rem .7rem;
}

.shop-haken-liste {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-haken-liste li {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    line-height: 1.45;
}

.shop-haken-liste .symbol {
    color: rgb(var(--tag, var(--color-blau-rgb)));
    margin-top: 1px;
}

.shop-klein {
    color: var(--color-grau);
    font-size: var(--font-size-klein) !important;
    line-height: 1.5;
}

.shop-zeile {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-top: 12px;
}

/* ---------------------------------------------------------------- */
/* Produktauswahl: Editionen zum Vergleichen                        */
/* ---------------------------------------------------------------- */
.shop-abschnitt-titel {
    font-size: 22px !important;
    font-weight: 600;
    margin: 0 0 18px;
}

/* kompakte Karten mit fester Höchstbreite, linksbündig */
.shop-editionen {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
}

.shop-edition {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    box-shadow: var(--shop-schatten);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}

.shop-edition:hover {
    box-shadow: var(--shop-schatten-hover);
    transform: translateY(-3px);
}

/* Edition passend zur Lizenzart in der Adresse */
.shop-edition.gewaehlt {
    border-color: rgb(var(--tag, var(--color-blau-rgb)));
    box-shadow: 0 0 0 2px rgb(var(--tag, var(--color-blau-rgb))), var(--shop-schatten);
}

.shop-edition.gewaehlt:hover {
    box-shadow: 0 0 0 2px rgb(var(--tag, var(--color-blau-rgb))), var(--shop-schatten-hover);
}

/* Bildfläche mit dem Farbverlauf der Kacheln */
.shop-edition-bild {
    height: 130px;
    overflow: hidden;
    position: relative;
}

.shop-edition-bild::before {
    background: radial-gradient(120% 85% at 50% 5%, var(--c1) 0%, var(--c2) 55%, var(--c3) 75%, rgba(var(--color-shadow-rgb) 0) 100%);
    content: "";
    inset: 0;
    position: absolute;
}

.shop-edition-bild img {
    height: 100%;
    object-fit: contain;
    padding: 18px 24px 6px;
    position: relative;
    width: 100%;
}

.shop-edition-auswahl {
    align-items: center;
    background: var(--color-bg);
    border-radius: 8px;
    bottom: 8px;
    box-shadow: 0 2px 8px var(--glow2, rgba(var(--color-blau-rgb), .3));
    color: rgb(var(--tag, var(--color-blau-rgb)));
    display: inline-flex;
    font-size: var(--font-size-klein);
    font-weight: 700;
    gap: 4px;
    padding: .3rem .6rem;
    position: absolute;
    right: 8px;
    z-index: 3;
}

.shop-edition-auswahl .symbol {
    height: 16px;
    width: 16px;
}

.shop-edition-inhalt {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px 18px 18px;
}

/* Platz für zwei Zeilen, damit Preis und Liste in allen Karten einer Reihe auf gleicher Höhe beginnen */
.shop-edition h4 {
    color: var(--color-blau);
    font-size: 19px !important;
    font-weight: 500;
    line-height: 1.25;
    margin: 0 0 4px;
    min-height: 2.5em;
}

.shop-edition-text {
    color: var(--color-grau);
    font-size: var(--font-size-klein) !important;
    margin: 0 0 12px;
}

.shop-edition-preis {
    align-items: baseline;
    border-bottom: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding: 10px 0;
}

.shop-edition-preis strong {
    font-size: 24px;
    font-weight: 700;
}

.shop-edition-preis span {
    color: var(--color-grau);
}

/* Liste füllt den Platz bis zum Knopf, die Punkte bleiben aber oben zusammen (sonst rücken sie bei kürzerem Titel auseinander) */
.shop-edition .shop-haken-liste {
    align-content: start;
    flex: 1;
    gap: 6px;
    margin-bottom: 16px;
}

.shop-fussnote {
    color: var(--color-grau);
    font-size: var(--font-size-klein) !important;
    margin-top: 30px;
    text-align: center;
}

/* Kategorie-Seiten: Leiste links mit Produkten und Kategorien aus Lisa, rechts die Artikel */
.shop-katalog {
    align-items: start;
    display: grid;
    gap: 36px;
    grid-template-columns: 270px minmax(0, 1fr);
    margin-top: 10px;
}

/* Leiste links als Baum: flache Zeilen mit Pfeil, Symbol und Einrückung; bleibt beim Scrollen stehen und beim Seitenwechsel ruhig */
.shop-baum {
    border-right: 1px solid var(--color-border);
    padding: 4px 14px 12px 0;
    position: sticky;
    top: 16px;
    view-transition-name: shop-baum;
}

.shop-baum ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-baum-liste {
    display: grid;
    gap: 2px;
}

.shop-baum-zeile {
    align-items: center;
    display: flex;
}

/* Pfeil zum Auf- und Zuklappen, dreht sich nach unten */
.shop-baum-pfeil {
    align-items: center;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--color-grau);
    cursor: pointer;
    display: inline-flex;
    flex: none;
    height: 28px;
    justify-content: center;
    padding: 0;
    transition: background .2s ease, color .2s ease;
    width: 28px;
}

.shop-baum-pfeil:hover {
    background: var(--color-bg-2);
    color: var(--color-blau);
}

.shop-baum-pfeil .symbol {
    height: 16px;
    transition: transform .3s ease;
    width: 16px;
}

.shop-baum-knoten.offen > .shop-baum-zeile .shop-baum-pfeil .symbol {
    transform: rotate(90deg);
}

/* Zeile: Symbol, Text, ggf. Anzahl; Darüberfahren grau hinterlegt, Text rückt etwas nach */
.shop-baum-link {
    align-items: center;
    border-radius: 8px;
    color: var(--color-text-normal);
    display: flex;
    flex: 1;
    font-size: var(--font-size-klein);
    gap: 10px;
    min-width: 0;
    padding: 8px 10px;
    position: relative;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.shop-baum-link > :not(.shop-baum-markierung) {
    position: relative;
}

.shop-baum-link .symbol {
    flex: none;
    height: 18px;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
    width: 18px;
}

.shop-baum-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform .25s ease;
    white-space: nowrap;
}

.shop-baum-link:hover {
    background: var(--color-bg-2);
    text-decoration: none;
}

.shop-baum-link:hover .shop-baum-text {
    transform: translateX(3px);
}

.shop-baum-link:hover .symbol {
    transform: scale(1.12);
}

.shop-baum-link:focus-visible,
.shop-baum-pfeil:focus-visible {
    outline: 2px solid rgba(var(--color-blau-rgb), .6);
    outline-offset: 1px;
}

/* Produkt: grünes Paket wie die lizenzierten Kacheln */
.shop-baum-produkt {
    font-weight: 600;
    padding-left: 4px;
}

/* Lange Produktnamen aus WinCRM ("DATANORM-Manager Paula 12") umbrechen statt bis an die Trennlinie zu laufen */
.shop-baum-produkt .shop-baum-text {
    line-height: 1.3;
    overflow: visible;
    white-space: normal;
}

.shop-baum-produkt .symbol {
    color: var(--color-gruen);
}

/* Icon aus WinCRM (Format etwa 5:4) statt des Symbols */
.shop-baum-icon {
    flex: none;
    height: 20px;
    object-fit: contain;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
    width: 24px;
}

.shop-baum-link:hover .shop-baum-icon {
    transform: scale(1.12);
}

/* Kategorien: eingerückt unter dem Produkt, mit Führungslinie; klappen weich auf und zu */
.shop-baum-klappe {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}

.shop-baum-knoten.offen > .shop-baum-klappe {
    grid-template-rows: 1fr;
}

.shop-baum-klappe > ul {
    border-left: 1px solid var(--color-border);
    display: grid;
    gap: 2px;
    margin-left: 14px !important;
    min-height: 0;
    overflow: hidden;
    padding: 2px 0 2px 14px !important;
}

.shop-baum-kategorie .symbol {
    color: var(--color-blau);
}

.shop-baum-anzahl {
    color: var(--color-grau);
    font-size: 12px;
}

/* Aktuelle Kategorie: hinterlegt mit blauer Kante; gleitet beim Seitenwechsel an die neue Stelle */
.shop-baum-markierung {
    background: rgba(var(--color-blau-rgb), .16);
    border-radius: 8px;
    inset: 0;
    position: absolute;
    view-transition-name: shop-baum-aktiv;
}

.shop-baum-markierung::before {
    background: var(--color-blau);
    border-radius: 3px;
    bottom: 8px;
    content: "";
    left: -15px;
    position: absolute;
    top: 8px;
    width: 3px;
}

.shop-baum-kategorie.aktiv {
    color: var(--color-blau);
    font-weight: 700;
}

.shop-baum-kategorie.aktiv:hover {
    background: none;
}

.shop-baum-kategorie.aktiv .shop-baum-anzahl {
    color: var(--color-blau);
}

::view-transition-group(shop-baum-aktiv) {
    animation-duration: .35s;
    animation-timing-function: cubic-bezier(.34, 1.3, .64, 1);
}

/* Weitere Produkte zum schnellen Wechseln */
.shop-baum-trenner {
    border-top: 1px solid var(--color-border);
    color: var(--color-grau);
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    margin: 14px 0 6px;
    padding: 14px 10px 0;
    text-transform: uppercase;
}

.shop-baum-weiteres {
    padding-left: 10px;
}

.shop-baum-weiteres .symbol {
    color: var(--color-grau);
}

.shop-baum-weiteres:hover .symbol {
    color: var(--color-blau);
}

@media (prefers-reduced-motion: reduce) {
    .shop-baum *,
    .shop-baum-klappe {
        transition: none !important;
    }
}

.shop-katalog-gruppe + .shop-katalog-gruppe {
    margin-top: 36px;
}

/* Upgrade-Seite: Produktbild links, rechts Kaufbereich mit Knöpfen wie im bisherigen Shop */
.shop-upgrade-bild {
    align-items: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    box-shadow: var(--shop-schatten);
    display: flex;
    justify-content: center;
    padding: 24px;
}

.shop-upgrade-bild img {
    max-height: 300px;
    max-width: 100%;
    object-fit: contain;
}

.shop-wahl .feld-label {
    margin-bottom: 8px;
}

.shop-wahl-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shop-wahl-knopf {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-normal);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-size-klein);
    min-width: 46px;
    padding: 8px 12px;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.shop-wahl-knopf:hover:not(:disabled) {
    border-color: var(--color-blau);
    color: var(--color-blau);
    transform: translateY(-1px);
}

.shop-wahl-knopf[aria-pressed="true"] {
    background: var(--color-blau);
    border-color: var(--color-blau);
    box-shadow: 0 4px 12px rgba(var(--color-blau-rgb), .4);
    color: #fff;
}

/* Gibt es für die gewählte Version bzw. Edition nicht */
.shop-wahl-knopf:disabled {
    cursor: not-allowed;
    opacity: .4;
}

.shop-wahl-knopf:focus-visible {
    outline: 2px solid rgba(var(--color-blau-rgb), .6);
    outline-offset: 2px;
}

@media (max-width: 800px) {
    .shop-katalog {
        gap: 20px;
        grid-template-columns: minmax(0, 1fr);
    }

    /* Schmal: Leiste über den Artikeln */
    .shop-baum {
        border-bottom: 1px solid var(--color-border);
        border-right: 0;
        padding: 0 0 12px;
        position: static;
    }
}

.shop-editionen-klein {
    grid-template-columns: repeat(auto-fill, minmax(220px, 280px));
}

.shop-modul .shop-edition-bild {
    height: 90px;
}

.shop-modul h4 {
    font-size: 17px !important;
}

.shop-modul .shop-edition-preis {
    margin-bottom: 14px;
}

.shop-modul .knopf {
    margin-top: auto;
}

/* Gleiche Edition mit der anderen Lizenzart */
.shop-andere-lizenz {
    justify-self: start;
}

/* ---------------------------------------------------------------- */
/* Produktdetails: Galerie, Kaufbereich, Beschreibung               */
/* ---------------------------------------------------------------- */
/* Kaufbereich breit genug, dass Auswahl und Warenkorb ohne Scrollen zu sehen sind; das Bild nimmt den Rest */
.shop-detail {
    /* Bild links so hoch wie die Kaufbox rechts */
    align-items: stretch;
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 560px);
}

/* Vorschaubilder links neben dem Hauptbild */
.shop-galerie {
    align-items: stretch;
    display: grid;
    gap: 14px;
    grid-template-columns: 112px minmax(0, 1fr);
    min-width: 0;
}

.shop-galerie .shop-produktbild {
    grid-column: 2;
    grid-row: 1;
}

/* Vorschauleiste mit schmalem Balken in der Editionsfarbe: oben und unten weich ausgeblendet, Bilder rasten ein */
.shop-vorschaubilder {
    display: flex;
    flex-direction: column;
    gap: 10px;
    grid-column: 1;
    grid-row: 1;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    /* so hoch wie das Hauptbild: trägt selbst nichts zur Höhe bei (height 0) und füllt dann die Zeile */
    height: 0;
    min-height: 100%;
    overflow-y: auto;
    padding: 12px 4px;
    scroll-snap-type: y proximity;
    scrollbar-color: rgba(var(--tag, var(--color-blau-rgb)), .55) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.shop-vorschaubild {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    cursor: pointer;
    flex: none;
    opacity: .6;
    padding: 6px;
    scroll-snap-align: center;
    transition: opacity .25s ease, transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    width: 92px;
}

.shop-vorschaubild:hover {
    opacity: 1;
    transform: translateX(2px);
}

.shop-vorschaubild.aktiv {
    border-color: rgb(var(--tag, var(--color-blau-rgb)));
    box-shadow: 0 0 0 2px rgb(var(--tag, var(--color-blau-rgb))), 0 6px 16px var(--glow2, rgba(var(--color-blau-rgb), .25));
    opacity: 1;
}

.shop-vorschaubild img {
    border-radius: 6px;
    display: block;
    height: 58px;
    object-fit: contain;
    width: 100%;
}

/* Bildfläche mit demselben Farbverlauf wie .kc-Kacheln-Bild */
.shop-produktbild {
    background: var(--color-bg);
    border-radius: 14px;
    box-shadow: var(--shop-schatten);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 28px 28px 40px;
    position: relative;
}

.shop-produktbild::before {
    background: radial-gradient(120% 85% at 50% 5%, var(--c1) 0%, var(--c2) 55%, var(--c3) 75%, rgba(var(--color-shadow-rgb) 0) 100%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.shop-produktbild > * {
    position: relative;
}

/* Hauptbild ist ein Knopf: Klick öffnet die Großansicht */
/* füllt die Bildfläche, mindestens 300 px hoch; das Bild passt sich ein */
.shop-hauptbild-knopf {
    background: none;
    border: 0;
    cursor: zoom-in;
    display: block;
    flex: 1;
    min-height: 300px;
    padding: 0;
    position: relative;
    width: 100%;
}

.shop-hauptbild {
    display: block;
    filter: drop-shadow(0 10px 18px rgba(var(--color-shadow-rgb) 0.15));
    height: 100%;
    inset: 0;
    object-fit: contain;
    position: absolute;
    transition: opacity .25s ease, transform .35s ease;
    width: 100%;
}

.shop-hauptbild.blenden {
    opacity: 0;
    transform: scale(.97);
}

.shop-hauptbild-knopf:hover .shop-hauptbild {
    transform: scale(1.02);
}

.shop-hauptbild-lupe {
    align-items: center;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, .7);
    border-radius: 50%;
    bottom: 4px;
    box-shadow: 0 2px 8px rgba(var(--color-shadow-rgb) 0.2);
    color: #333;
    display: flex;
    height: 34px;
    justify-content: center;
    opacity: 0;
    position: absolute;
    right: 4px;
    transition: opacity .25s ease;
    width: 34px;
}

.shop-hauptbild-knopf:hover .shop-hauptbild-lupe,
.shop-hauptbild-knopf:focus-visible .shop-hauptbild-lupe {
    opacity: 1;
}

/* Glas-Pfeile: blenden beim Darüberfahren ein, im Hover in der Editionsfarbe */
.shop-galerie-pfeil {
    align-items: center;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(var(--color-shadow-rgb) 0.18);
    color: #333;
    cursor: pointer;
    display: flex;
    height: 44px;
    justify-content: center;
    opacity: 0;
    position: absolute;
    top: calc(50% - 22px);
    transition: opacity .25s ease, transform .25s ease, background .2s ease, color .2s ease;
    width: 44px;
    z-index: 2;
}

.shop-galerie-pfeil .symbol {
    height: 22px;
    width: 22px;
}

.shop-galerie-pfeil.zurueck {
    left: 14px;
    transform: translateX(-8px);
}

.shop-galerie-pfeil.weiter {
    right: 14px;
    transform: translateX(8px);
}

.shop-produktbild:hover .shop-galerie-pfeil,
.shop-produktbild:focus-within .shop-galerie-pfeil,
.shop-grossansicht .shop-galerie-pfeil {
    opacity: 1;
    transform: none;
}

.shop-galerie-pfeil:hover {
    background: rgb(var(--tag, var(--color-blau-rgb)));
    border-color: rgb(var(--tag, var(--color-blau-rgb)));
    color: #fff;
    transform: scale(1.08) !important;
}

/* Klick: kurz eindrücken */
.shop-galerie-pfeil:active {
    transform: scale(.94) !important;
    transition-duration: .08s;
}

/* Galerie-Knöpfe: Fokusring nur bei Tastaturbedienung */
.shop-galerie button:focus,
.shop-grossansicht button:focus {
    outline: none;
}

.shop-galerie button:focus-visible,
.shop-grossansicht button:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--tag, var(--color-blau-rgb)), .5);
}

/* Touch-Geräte haben kein Hover: Pfeile immer zeigen */
@media (hover: none) {
    .shop-galerie-pfeil {
        opacity: 1;
        transform: none;
    }
}

/* Zähler als Glas-Pille oben rechts */
.shop-galerie-zaehler {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, .7);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(var(--color-shadow-rgb) 0.12);
    color: #333;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 2;
}

/* Fortschrittspunkte unter dem Bild, der aktive Punkt als Pille */
.shop-galerie-punkte {
    bottom: 14px;
    display: flex;
    gap: 6px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}

.shop-galerie-punkt {
    background: rgba(var(--tag, var(--color-blau-rgb)), .3);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    height: 8px;
    padding: 0;
    transition: width .3s ease, background .3s ease;
    width: 8px;
}

.shop-galerie-punkt:hover {
    background: rgba(var(--tag, var(--color-blau-rgb)), .6);
}

.shop-galerie-punkt.aktiv {
    background: rgb(var(--tag, var(--color-blau-rgb)));
    width: 24px;
}

/* Großansicht über der ganzen Seite */
.shop-grossansicht {
    align-items: center;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: rgba(15, 20, 25, .88);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    overflow: hidden;
    position: fixed;
    transition: opacity .2s ease;
    z-index: 2000;
}

.shop-grossansicht.offen {
    opacity: 1;
}

.shop-grossansicht[hidden] {
    display: none;
}

.shop-grossansicht-bild {
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    max-height: 86vh;
    max-width: calc(100vw - 160px);
    object-fit: contain;
    transform: scale(.96);
    transition: transform .25s ease;
}

.shop-grossansicht.offen .shop-grossansicht-bild {
    cursor: zoom-in;
    transform: none;
}

/* Zoom: Bild vergrößert, der Ausschnitt folgt der Maus (transform-origin per Skript) */
.shop-grossansicht.gezoomt .shop-grossansicht-bild {
    border-radius: 0;
    cursor: zoom-out;
    touch-action: none;
    transform: scale(var(--zoom, 2));
    transition: transform .3s ease;
}

.shop-grossansicht.gezoomt .shop-galerie-zaehler {
    opacity: 0;
}

.shop-grossansicht .shop-galerie-pfeil.zurueck {
    left: 24px;
}

.shop-grossansicht .shop-galerie-pfeil.weiter {
    right: 24px;
}

.shop-grossansicht .shop-galerie-zaehler {
    bottom: 24px;
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
}

.shop-grossansicht-schliessen {
    align-items: center;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    height: 44px;
    justify-content: center;
    position: absolute;
    right: 24px;
    top: 24px;
    transition: background .2s ease;
    width: 44px;
    z-index: 3;
}

.shop-grossansicht-schliessen:hover,
.shop-grossansicht-schliessen:focus-visible {
    background: rgba(255, 255, 255, .3);
}

/* Im iFrame wächst die Seite mit: Großansicht als Band auf Höhe der Galerie (Lage per Skript), der Rest abgedunkelt */
.iframe-waechst .shop-grossansicht {
    bottom: auto;
    box-shadow: 0 0 0 200vh rgba(15, 20, 25, .88);
    height: 760px;
    position: absolute;
    top: var(--gross-oben, 0px);
}

.iframe-waechst .shop-grossansicht-bild {
    max-height: 680px;
}

/* Kaufbereich bleibt beim Scrollen sichtbar */
.shop-kaufbox {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    box-shadow: var(--shop-schatten);
    display: grid;
    gap: 14px;
    padding: 24px 26px;
    position: sticky;
    top: 12px;
}

.shop-kaufbox .shop-tag {
    justify-self: start;
}

.shop-kaufbox-preis {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shop-kaufbox-preis strong {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
}

.shop-kaufbox-preis span {
    color: var(--color-grau);
}

.shop-kaufbox-fakten {
    border-bottom: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-kaufbox-fakten li {
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 9px 0;
}

.shop-kaufbox-fakten li:last-child {
    border-bottom: 0;
}

.shop-kaufbox-fakten li span {
    color: var(--color-grau);
}

.shop-kaufbox .shop-verfuegbar,
.shop-kaufbox .shop-klein {
    margin: 0;
}

/* Staffel: Zeile "Benutzer" in den Produktangaben, links mit Hinweis (Aufpreis, Höchstzahl), rechts der Zähler */
.shop-kaufbox-fakten li.shop-fakt-benutzer {
    align-items: center;
}

.shop-staffel-hinweis {
    color: var(--color-grau);
    display: block;
    font-size: 12px;
    margin-top: 2px;
}

/* Menge und Warenkorb-Knopf nebeneinander; reicht der Platz nicht, rutscht der Knopf in die nächste Zeile */
.shop-kaufbox-aktion {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.shop-kaufbox-aktion .shop-menge {
    flex: none;
}

.shop-kaufbox-aktion .knopf-breit {
    flex: 1 1 220px;
    width: auto;
}

.shop-verfuegbar {
    color: var(--color-grau);
    font-size: var(--font-size-klein) !important;
    margin: 20px 0;
}

.shop-verfuegbar::before {
    background: var(--color-gruen);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(var(--color-gruen-rgb), .15);
    content: "";
    display: inline-block;
    height: 10px;
    margin-right: 10px;
    width: 10px;
}

.shop-menge {
    align-items: center;
    display: flex;
    gap: 10px;
}

.shop-menge button {
    align-items: center;
    background: var(--color-bg);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(var(--color-shadow-rgb) 0.24);
    color: var(--color-text-normal);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 20px;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.shop-menge button:hover {
    color: var(--color-blau);
}

.shop-menge button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.shop-menge output {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    min-width: 48px;
    padding: 5px 11px;
    text-align: center;
}

.shop-beschreibung {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: var(--shop-schatten);
    line-height: 1.6;
    margin-top: 36px;
    padding: 28px 32px;
}

.shop-beschreibung-label {
    color: var(--color-blau);
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

/* Nutzen-Überschrift und hervorgehobene Einleitung */
.shop-beschreibung h2 {
    font-size: 24px;
    margin-bottom: 12px;
}

/* Beschreibung aus Lisa (HTML aus dem bisherigen Shop): Listen, Tabellen und Bilder in der Breite der Box */
.shop-beschreibung-text {
    max-width: 900px;
    overflow-wrap: anywhere;
}

.shop-beschreibung-text ul,
.shop-beschreibung-text ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

.shop-beschreibung-text table {
    border-collapse: collapse;
    display: block;
    margin: 0 0 14px;
    overflow-x: auto;
}

.shop-beschreibung-text td,
.shop-beschreibung-text th {
    border: 1px solid var(--color-border);
    padding: 6px 10px;
    vertical-align: top;
}

.shop-beschreibung-text img {
    height: auto;
    max-width: 100%;
}

.shop-beschreibung h3 {
    font-size: 18px !important;
    font-weight: 600;
    margin: 0 0 10px;
    max-width: 900px;
}

.shop-beschreibung p {
    max-width: 900px;
}

.shop-beschreibung-lead {
    font-size: 17px !important;
    line-height: 1.6;
}

.shop-beschreibung .shop-umfang-titel {
    margin: 28px 0 14px;
}

/* vier Gruppen als 2 × 2 */
.shop-umfang {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shop-umfang-gruppe {
    background: var(--color-bg-2);
    border-radius: 14px;
    padding: 18px 20px;
}

.shop-umfang-gruppe h4 {
    color: var(--color-blau);
    font-size: 17px !important;
    font-weight: 600;
    margin: 0 0 12px;
}

.shop-weiterfuehrend {
    align-items: center;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
    padding-top: 20px;
}

.shop-weiterfuehrend > span {
    font-weight: 600;
    margin-right: 4px;
}

.shop-fussnote-links {
    margin: 18px 0 0;
}

/* ---------------------------------------------------------------- */
/* Warenkorb: Panel von rechts (wie im Shop-Entwurf)                */
/* ---------------------------------------------------------------- */
/* Runder Knopf zum Öffnen, unten rechts */
.shop-korb-knopf {
    align-items: center;
    background: var(--color-blau);
    border: 0;
    border-radius: 50%;
    bottom: 24px;
    box-shadow: 0 8px 22px rgba(var(--color-blau-rgb), .45);
    color: var(--color-weis);
    cursor: pointer;
    display: flex;
    height: 60px;
    justify-content: center;
    position: fixed;
    right: 24px;
    transition: transform .2s ease, box-shadow .2s ease;
    width: 60px;
    z-index: 1500;
}

/* Im iFrame wächst die Seite mit, "fixed" läge am Seitenende: unten im sichtbaren Teil, den die einbettende Seite meldet */
.iframe-waechst.sichtbar-bekannt .shop-korb-knopf {
    bottom: auto;
    position: absolute;
    top: calc(var(--sichtbar-oben) + var(--sichtbar-hoehe) - 84px);
}

.shop-korb-knopf:hover {
    box-shadow: 0 10px 26px rgba(var(--color-blau-rgb), .6);
    transform: translateY(-2px);
}

.shop-korb-knopf:focus-visible {
    outline: 3px solid rgba(var(--color-blau-rgb), .45);
    outline-offset: 3px;
}

.shop-korb-knopf .symbol {
    height: 26px;
    width: 26px;
}

/* Anzahl der Artikel am Knopf */
.shop-korb-anzahl {
    background: var(--color-rot);
    border: 2px solid var(--color-bg);
    border-radius: 11px;
    color: var(--color-weis);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    min-width: 22px;
    padding: 0 5px;
    position: absolute;
    right: -2px;
    text-align: center;
    top: -2px;
}

.shop-korb-anzahl[hidden] {
    display: none;
}

/* abgedunkelte Seite hinter dem Panel */
.shop-korb-hintergrund {
    background: rgba(0, 0, 0, .45);
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity .3s ease;
    z-index: 1600;
}

.shop-korb-hintergrund.offen {
    opacity: 1;
    pointer-events: auto;
}

.shop-korb-panel {
    background: var(--color-bg);
    bottom: 0;
    box-shadow: -12px 0 34px rgba(var(--color-shadow-rgb) 0.2);
    color: var(--color-text-normal);
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: transform .3s ease, visibility 0s linear .3s;
    visibility: hidden;
    width: min(400px, 92vw);
    z-index: 1601;
}

.shop-korb-panel.offen {
    transform: translateX(0);
    transition: transform .3s ease;
    visibility: visible;
}

/* Im iFrame wächst die Seite mit: Panel über den sichtbaren Teil legen; meldet die einbettende Seite
   ihn nicht, mit fester Höhe neben dem Auslöser (Lage per Skript) */
.iframe-waechst .shop-korb-panel {
    bottom: auto;
    height: min(720px, 100%);
    position: absolute;
    top: var(--korb-oben, 0px);
}

.iframe-waechst.sichtbar-bekannt .shop-korb-panel {
    height: var(--sichtbar-hoehe);
    top: var(--sichtbar-oben);
}

.shop-korb-weiter {
    align-items: center;
    background: var(--color-bg-2);
    border: 0;
    color: var(--color-grau);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: var(--font-size-klein);
    gap: 6px;
    padding: 16px 20px;
    text-align: left;
    width: 100%;
}

.shop-korb-weiter:hover {
    color: var(--color-blau);
}

.shop-korb-weiter:focus {
    outline: none;
}

.shop-korb-weiter:focus-visible {
    outline: 3px solid rgba(var(--color-blau-rgb), .35);
    outline-offset: -3px;
}

.shop-korb-inhalt {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    padding: 20px;
}

.shop-korb-kopf {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
}

.shop-korb-kopf h2 {
    color: var(--color-blau);
    font-size: 22px;
    margin: 0;
}

.shop-korb-kopf span {
    color: var(--color-grau);
    font-weight: 600;
}

.shop-korb-meldung {
    align-items: center;
    background: rgba(var(--color-gruen-rgb), .12);
    border-radius: 10px;
    color: var(--color-gruen);
    display: flex;
    gap: 10px;
    padding: 10px 14px;
}

.shop-korb-meldung[hidden] {
    display: none;
}

.shop-korb-meldung .symbol {
    background: var(--color-gruen);
    border-radius: 50%;
    color: #fff;
    height: 26px;
    padding: 5px;
    width: 26px;
}

.shop-korb-position {
    border-bottom: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    display: grid;
    gap: 6px 12px;
    grid-template-columns: 72px 1fr 32px;
    padding: 16px 0;
}

.shop-korb-position img {
    background: var(--color-bg-2);
    border-radius: 10px;
    height: 72px;
    object-fit: contain;
    padding: 5px;
    width: 72px;
}

.shop-korb-angaben {
    display: grid;
    gap: 2px;
}

.shop-korb-anzahlzeile {
    align-items: center;
    display: flex;
    grid-column: 1 / -1;
    justify-content: space-between;
    margin-top: 8px;
}

.shop-korb-anzahlzeile > span {
    font-weight: 600;
}

.shop-korb-preis {
    grid-column: 1 / -1;
    text-align: right;
}

.shop-korb-summen .shop-zeile:first-child {
    margin-top: 0;
}

.shop-korb-summen .shop-klein {
    margin: 12px 0 0;
}

.shop-korb-gutschein {
    display: flex;
    gap: 8px;
}

.shop-korb-gutschein .eingabe {
    flex: 1;
    min-width: 0;
}

.knopf:disabled,
.eingabe:disabled {
    cursor: not-allowed;
    opacity: .5;
    transform: none;
}

.shop-korb-hinweis {
    margin: -8px 0 0;
    text-align: center;
}

.shop-korb-leer {
    align-items: center;
    color: var(--color-grau);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px 0;
    text-align: center;
}

.shop-korb-leer .symbol {
    height: 40px;
    opacity: .5;
    width: 40px;
}

.shop-korb-fehler {
    background: rgba(var(--color-rot-rgb), .1);
    border-radius: 10px;
    color: var(--color-rot);
    margin: 12px 20px 0;
    padding: 10px 14px;
}

.shop-korb-fehler[hidden] {
    display: none;
}

.shop-entfernen {
    align-items: center;
    background: var(--color-bg);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(var(--color-shadow-rgb) 0.24);
    color: var(--color-grau);
    cursor: pointer;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.shop-entfernen:hover {
    color: var(--color-rot);
}

@media (max-width: 1250px) {
    /* Galerie und Kaufbereich untereinander, sonst wird das Hauptbild zu schmal */
    .shop-detail {
        grid-template-columns: 1fr;
    }

    .shop-kaufbox {
        max-width: 560px;
        position: static;
    }
}

@media (max-width: 780px) {
    .shop-umfang {
        grid-template-columns: 1fr;
    }

    .shop-hauptbild-knopf {
        min-height: 240px;
    }

    /* auf dem Handy die Vorschaubilder unter dem Hauptbild */
    .shop-galerie {
        grid-template-columns: 1fr;
    }

    .shop-galerie .shop-produktbild {
        grid-column: 1;
    }

    .shop-vorschaubilder {
        flex-direction: row;
        grid-column: 1;
        grid-row: 2;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
        height: auto;
        max-height: none;
        min-height: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 12px;
        scroll-snap-type: x proximity;
    }

    .shop-beschreibung {
        padding: 22px 18px;
    }

    .shop-grossansicht-bild {
        max-width: calc(100vw - 32px);
    }
}

/* ================================================================== */
/* Kasse: Bestellschritte, Zugang und Bestellübersicht aus dem        */
/* Shop-Entwurf des KundenCenters                                     */
/* ================================================================== */
.shop-karte {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: var(--shop-schatten);
    min-width: 0;
    padding: 22px;
}

.shop-karte h3 {
    color: var(--color-blau);
    font-size: 20px !important;
    font-weight: 500;
    margin: 0 0 14px;
}

.shop-grid {
    align-items: start;
    display: grid;
    gap: 30px;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
}

.shop-stapel {
    display: grid;
    gap: 20px;
}

.shop-zeile-stark {
    border-top: 1px solid var(--color-border);
    font-size: 18px;
    font-weight: 700;
    margin-top: 18px;
    padding-top: 16px;
}

/* Pflicht-Häkchen mit Verlaufslinie wie im Entwurf */
/* Häkchen wie die Checkboxen des KundenCenters (Site.css, dcm-CheckBox-Container): 24 px, blauer Rahmen,
   angehakt blau gefüllt mit weißem Haken; Abstand statt Trennlinien */
.shop-check {
    align-items: flex-start;
    cursor: pointer;
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    user-select: none;
}

.shop-check input {
    appearance: none;
    background: var(--color-bg);
    border: 2px solid var(--color-blau);
    border-radius: 6px;
    cursor: pointer;
    flex: none;
    height: 24px;
    margin: 0;
    position: relative;
    transition: all .2s ease;
    width: 24px;
}

/* Haken */
.shop-check input::after {
    border: solid #fff;
    border-width: 0 2px 2px 0;
    content: "";
    height: 12px;
    left: 7px;
    opacity: 0;
    position: absolute;
    top: 3px;
    transform: rotate(45deg);
    transition: opacity .2s ease;
    width: 7px;
}

.shop-check:hover input {
    border-color: var(--color-blau2, var(--color-blau));
    box-shadow: 0 0 0 4px rgba(var(--color-blau-rgb), .15);
}

.shop-check input:checked {
    background: var(--color-blau2, var(--color-blau));
    border-color: var(--color-blau2, var(--color-blau));
}

.shop-check input:checked::after {
    opacity: 1;
}

.shop-check input:focus-visible {
    outline: 3px solid rgba(var(--color-blau-rgb), .35);
    outline-offset: 3px;
}

/* Text auf Höhe der Box */
.shop-check > span {
    line-height: 1.5;
    padding-top: 1px;
}

/* Pflicht-Häkchen fehlt beim Bestellen: Box und Text rot, bis es gesetzt ist */
.shop-check.fehlt input:not(:checked) {
    border-color: var(--color-rot);
    box-shadow: 0 0 0 4px rgba(var(--color-rot-rgb), .15);
}

.shop-check.fehlt:has(input:not(:checked)) > span {
    color: var(--color-rot);
}

/* Zurück-Knopf und Bestellschritte in einer Zeile über dem Seitenkopf */
.shop-kopfzeile {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-bottom: 4px;
}

.shop-kopfzeile .shop-navigation {
    margin-bottom: 0;
}

.shop-schritte ol {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-schritt {
    align-items: center;
    color: var(--color-grau);
    display: flex;
    font-size: var(--font-size-klein);
    gap: 8px;
    min-width: 0;
}

/* kurze Verbindungslinie zum nächsten Schritt */
.shop-schritt::after {
    background: var(--color-border);
    border-radius: 2px;
    content: "";
    flex: none;
    height: 2px;
    margin: 0 10px 0 4px;
    width: 32px;
}

.shop-schritt:last-child::after {
    display: none;
}

.shop-schritt-nr {
    align-items: center;
    background: var(--color-bg);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(var(--color-shadow-rgb) 0.24);
    display: inline-flex;
    flex: 0 0 26px;
    font-size: 13px;
    font-weight: 600;
    height: 26px;
    justify-content: center;
    width: 26px;
}

.shop-schritt-nr .symbol {
    height: 14px;
    width: 14px;
}

/* erledigt: Häkchen, blaue Linie, als Link zurück */
.shop-schritt.erledigt {
    color: var(--color-text-normal);
}

.shop-schritt.erledigt .shop-schritt-nr,
.shop-schritt.aktiv .shop-schritt-nr {
    background: var(--color-blau);
    color: #fff;
}

.shop-schritt.erledigt::after {
    background: var(--color-blau);
}

.shop-schritt > a {
    align-items: center;
    border-radius: 16px;
    color: inherit !important;
    display: inline-flex;
    gap: 8px;
    margin: -3px;
    padding: 3px 12px 3px 3px;
    text-decoration: none !important;
    transition: background .2s ease;
}

.shop-schritt > a:hover {
    background: rgba(var(--color-blau-rgb), .12);
}

.shop-schritt > a:hover .shop-schritt-text {
    text-decoration: underline;
}

/* aktueller Schritt */
.shop-schritt.aktiv {
    color: var(--color-text-normal);
    font-weight: 600;
}

.shop-schritt.aktiv .shop-schritt-nr {
    box-shadow: 0 0 0 3px rgba(var(--color-blau-rgb), .25);
}

/* ---------------------------------------------------------------- */
/* Zugang: Auswahl Bestandskunde (Anmelden) oder Neukunde           */
/* ---------------------------------------------------------------- */
.shop-zugang-rahmen {
    container-type: inline-size;
}

.shop-zugang {
    align-items: stretch;
    display: grid;
    gap: 0 8px;
    grid-template-columns: minmax(0, 400px) auto minmax(0, 400px);
    /* sonst zieht die auto-Spalte für "oder" den ganzen freien Platz an sich */
    justify-content: center;
    margin-top: 10px;
}

.shop-zugang-karte {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    box-shadow: var(--shop-schatten);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.shop-zugang-karte:hover {
    border-color: rgba(var(--tag), .5);
    box-shadow: 0 18px 36px var(--glow2, rgba(var(--color-blau-rgb), .2));
    transform: translateY(-4px);
}

/* Kopf mit dem Farbverlauf der Kacheln und großem Symbol */
.shop-zugang-kopf {
    align-items: center;
    display: flex;
    height: 120px;
    justify-content: center;
    position: relative;
}

.shop-zugang-kopf::before {
    background: radial-gradient(120% 90% at 50% 0%, var(--c1) 0%, var(--c2) 55%, var(--c3) 75%, rgba(var(--color-shadow-rgb) 0) 100%);
    content: "";
    inset: 0;
    position: absolute;
}

.shop-zugang-symbol {
    align-items: center;
    background: linear-gradient(135deg, rgba(var(--tag), .55) 0%, rgb(var(--tag)) 100%);
    border: 4px solid var(--color-bg);
    border-radius: 50%;
    box-shadow: 0 10px 24px var(--glow1, rgba(var(--color-blau-rgb), .4));
    color: #fff;
    display: flex;
    height: 76px;
    justify-content: center;
    position: relative;
    transition: transform .3s ease;
    width: 76px;
}

.shop-zugang-symbol .symbol {
    height: 34px;
    width: 34px;
}

.shop-zugang-karte:hover .shop-zugang-symbol {
    transform: scale(1.06) rotate(-4deg);
}

.shop-zugang-inhalt {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px 22px 22px;
}

.shop-zugang-karte h4 {
    color: rgb(var(--tag));
    font-size: 20px !important;
    font-weight: 600;
    margin: 0 0 6px;
    text-align: center;
}

.shop-zugang-text {
    color: var(--color-grau);
    font-size: var(--font-size-klein) !important;
    margin: 0 0 16px;
    text-align: center;
}

.shop-zugang-karte .shop-haken-liste {
    border-top: 1px solid var(--color-border);
    flex: 1;
    margin-bottom: 20px;
    padding-top: 14px;
}

/* Knopf in der Farbe der Karte */
.shop-zugang-karte .knopf-primaer {
    background: rgb(var(--tag));
    box-shadow: 0 4px 12px var(--glow1, rgba(var(--color-grau-rgb), .4));
}

/* "oder" zwischen den Karten: senkrechte Linie mit runder Plakette */
.shop-zugang-oder {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    width: 56px;
}

.shop-zugang-oder::before {
    background: linear-gradient(to bottom, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent);
    content: "";
    inset: 0 auto 0 50%;
    position: absolute;
    width: 1px;
}

.shop-zugang-oder span {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-grau);
    font-size: 13px;
    height: 40px;
    line-height: 38px;
    position: relative;
    text-align: center;
    width: 40px;
}

/* Hinweise unter den Karten */
.shop-zugang-hinweise {
    color: var(--color-grau);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    justify-content: center;
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}

.shop-zugang-hinweise li {
    align-items: center;
    display: flex;
    gap: 8px;
}

.shop-zugang-hinweise .symbol {
    color: var(--color-gruen);
}

@container (max-width: 700px) {
    .shop-zugang {
        gap: 0;
        grid-template-columns: minmax(0, 480px);
    }

    .shop-zugang-oder {
        height: 56px;
        width: auto;
    }

    .shop-zugang-oder::before {
        background: linear-gradient(to right, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent);
        height: 1px;
        inset: 50% 0 auto 0;
        width: auto;
    }
}

/* ---------------------------------------------------------------- */
/* Bestellübersicht                                                 */
/* ---------------------------------------------------------------- */
/* Ohne eigene Kopfleiste: angemeldetes Konto und Abmelden */
.shop-angemeldet {
    align-items: center;
    color: var(--color-grau);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -20px 0 24px;
}

.shop-angemeldet > .symbol {
    color: var(--color-blau);
}

.shop-angemeldet form {
    display: contents;
}

.shop-bestellpositionen {
    margin-top: 6px;
}

.shop-bestellkopf,
.shop-bestellposition {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 130px 110px 32px;
}

.shop-bestellkopf {
    color: var(--color-grau);
    font-size: var(--font-size-klein);
    margin-top: 10px;
    padding: 10px 22px;
}

.shop-bestellposition {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: var(--shop-schatten);
    margin-bottom: 12px;
    padding: 16px 22px;
}

.shop-bestellprodukt {
    align-items: center;
    display: flex;
    gap: 15px;
}

.shop-bestellprodukt img {
    background: var(--color-bg-2);
    border-radius: 10px;
    flex: none;
    height: 74px;
    object-fit: contain;
    padding: 5px;
    width: 70px;
}

.shop-boxen {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
    margin-top: 24px;
}

.shop-boxen .shop-karte p {
    overflow-wrap: anywhere;
}

.shop-adresse {
    line-height: 1.6;
}

.shop-boxen > .shop-karte.shop-zahlung {
    display: grid;
    gap: 0 14px;
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
}

.shop-zahlung h3 {
    grid-column: 1 / -1;
}

.shop-zahlung label {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    display: block;
    margin-bottom: 12px;
    padding: 12px 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.shop-zahlung label span {
    color: var(--color-grau);
    font-size: var(--font-size-klein);
}

.shop-zahlung label:has(input:checked) {
    border-color: var(--color-blau);
    box-shadow: 0 0 0 3px rgba(var(--color-blau-rgb), .2);
}

.shop-zahlung input {
    accent-color: var(--color-blau);
}

/* Bearbeitungszeit je Zahlungsart: Rechnung nach unserer Freigabe (gelb), PayPal sofort (grün) */
.shop-dauer {
    align-items: center;
    background: rgba(var(--color-gelb-rgb), .18);
    border-radius: 999px;
    display: inline-flex;
    font-size: var(--font-size-klein);
    font-style: normal;
    font-weight: 600;
    gap: 5px;
    margin-left: 6px;
    padding: 2px 10px;
    vertical-align: 1px;
    white-space: nowrap;
}

.shop-dauer .symbol {
    height: 14px;
    width: 14px;
}

.shop-dauer-sofort {
    background: rgba(var(--color-gruen-rgb), .16);
    color: var(--color-gruen);
}

/* PayPal ohne Zugangsdaten: sichtbar, aber nicht wählbar */
.shop-zahlung label:has(input:disabled) {
    cursor: not-allowed;
    opacity: .6;
}

/* PayPal-Knöpfe statt "Zahlungspflichtig bestellen" (shop-paypal.js schaltet um) */
.shop-stapel > .knopf[hidden],
.shop-paypal[hidden] {
    display: none;
}

.shop-paypal {
    display: grid;
    gap: 8px;
}

.shop-paypal .meldung {
    margin-bottom: 0;
}

.shop-paypal > p.shop-klein {
    color: var(--color-grau);
    margin: 0;
    text-align: center;
}

.shop-summe .shop-zeile:first-of-type {
    margin-top: 0;
}

/* Rechnungsadresse und Wichtige Daten: Knopf "ändern" unten, in beiden Boxen auf gleicher Höhe */
.shop-box-mit-knopf {
    display: flex;
    flex-direction: column;
}

.shop-box-mit-knopf > .knopf {
    align-self: flex-start;
    margin-top: auto;
}

.shop-box-mit-knopf > :nth-last-child(2) {
    margin-bottom: 16px;
}

/* ---------------------------------------------------------------- */
/* Dialoge zum Ändern (wie die Popups des KundenCenters)            */
/* ---------------------------------------------------------------- */
.shop-dialog {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(var(--color-shadow-rgb) 0.25);
    color: var(--color-text-normal);
    max-height: calc(100% - 32px);
    max-width: calc(100vw - 32px);
    padding: 0;
    width: 620px;
}

.shop-dialog-schmal {
    width: 520px;
}

.shop-dialog::backdrop {
    background: rgba(0, 0, 0, .35);
}

/* Im mitwachsenden iFrame liegt der Dialog im sichtbaren Teil (bzw. neben dem Knopf), nicht in der Mitte der ganzen Seite */
.iframe-waechst .shop-dialog {
    bottom: auto;
    margin: var(--dialog-oben, 0px) auto 0;
    max-height: min(720px, calc(100% - 32px));
    position: absolute;
}

.iframe-waechst.sichtbar-bekannt .shop-dialog {
    margin-top: calc(var(--sichtbar-oben) + 16px);
    max-height: calc(var(--sichtbar-hoehe) - 32px);
}

/* Kopf und Fuß bleiben stehen, nur der Inhalt scrollt */
.shop-dialog[open] {
    display: flex;
    flex-direction: column;
}

.shop-dialog form {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.shop-dialog-kopf {
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 16px 22px;
}

.shop-dialog-kopf h2 {
    font-size: 20px !important;
    font-weight: 500;
    margin: 0;
}

.shop-dialog-zu {
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--color-grau);
    cursor: pointer;
    display: inline-flex;
    padding: 4px;
}

.shop-dialog-zu:hover {
    background: var(--color-bg-2);
    color: var(--color-text-normal);
}

.shop-dialog-inhalt {
    overflow-y: auto;
    padding: 18px 22px 4px;
}

.shop-dialog-hinweis {
    color: var(--color-grau);
    font-size: var(--font-size-klein);
    margin: 0 0 16px;
}

.shop-dialog-felder {
    display: grid;
    gap: 0 16px;
    grid-template-columns: 1fr 1fr;
}

.shop-feld-breit {
    grid-column: 1 / -1;
}

.feld-hilfe {
    color: var(--color-grau);
    display: block;
    font-size: 13px;
    margin-top: 4px;
}

.shop-dialog-fuss {
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px 22px;
}

@media (max-width: 560px) {
    .shop-dialog-felder {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------- */
/* Bestellung abgeschlossen                                         */
/* ---------------------------------------------------------------- */
.shop-erfolg {
    background: var(--color-bg);
    border-radius: 18px;
    box-shadow: var(--shop-schatten);
    line-height: 1.55;
    margin: 10px auto 0;
    max-width: 900px;
    outline: 1px solid var(--color-border);
    outline-offset: -1px;
    overflow: hidden;
    padding: clamp(30px, 4vw, 54px);
    position: relative;
    text-align: center;
}

/* grüner Lichtschein wie bei den lizenzierten Kacheln */
.shop-erfolg::after {
    background: radial-gradient(closest-side at 50% 65%, rgba(var(--color-gruen-rgb), .4) 0%, rgba(var(--color-gruen-rgb), .2) 45%, rgba(0, 0, 0, 0) 75%);
    content: "";
    height: 260px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: -150px;
    transform: translateX(-50%);
    width: 120%;
}

.shop-erfolg > * {
    position: relative;
    z-index: 1;
}

.shop-erfolg::before {
    align-items: center;
    background: var(--color-gruen);
    border-radius: 50%;
    box-shadow: 0 0 0 9px rgba(var(--color-gruen-rgb), .18);
    color: #fff;
    content: "✓";
    display: flex;
    font-size: 28px;
    font-weight: 700;
    height: 58px;
    justify-content: center;
    margin: 0 auto 26px;
    position: relative;
    width: 58px;
    z-index: 1;
}

.shop-erfolgblock {
    background: var(--color-bg-2);
    border-radius: 12px;
    margin: 30px 0;
    padding: 20px;
}

/* Wann der Kunde loslegen kann: groß und farbig, PayPal grün (sofort), Rechnung gelb (nach der Freigabe) */
.shop-freigabe {
    align-items: flex-start;
    border: 1px solid rgba(var(--color-gelb-rgb), .55);
    background: rgba(var(--color-gelb-rgb), .12);
    display: flex;
    gap: 16px;
    text-align: left;
}

.shop-freigabe.sofort {
    background: rgba(var(--color-gruen-rgb), .1);
    border-color: rgba(var(--color-gruen-rgb), .5);
}

.shop-freigabe > .symbol {
    flex: none;
    height: 34px;
    width: 34px;
}

.shop-freigabe.sofort > .symbol {
    color: var(--color-gruen);
}

.shop-freigabe strong {
    display: block;
    font-size: 1.15em;
    margin-bottom: 4px;
}

.shop-freigabe p {
    margin: 0;
}

.shop-erfolg-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

@media (max-width: 1250px) {
    .shop-grid {
        grid-template-columns: 1fr;
    }

    .shop-grid > aside {
        max-width: 680px;
        width: 100%;
    }

    /* Bestellposition zweizeilig: Produkt oben, Menge/Preis/Entfernen darunter */
    .shop-bestellkopf {
        display: none;
    }

    .shop-bestellposition {
        grid-template-columns: minmax(0, 1fr) auto 32px;
    }

    .shop-bestellprodukt {
        grid-column: 1 / -1;
    }
}

@media (max-width: 780px) {
    .shop-boxen,
    .shop-boxen > .shop-karte.shop-zahlung {
        grid-template-columns: 1fr;
    }

    /* Handy: Schritte als Kreise, Text nur beim aktuellen Schritt */
    .shop-schritt:not(.aktiv) .shop-schritt-text {
        display: none;
    }

    .shop-schritt::after {
        margin: 0 6px 0 2px;
        width: 16px;
    }
}

/* ---------------------------------------------------------------- */
/* Schmale Fenster                                                  */
/* ---------------------------------------------------------------- */
@media (max-width: 640px) {
    .inhalt {
        padding: 16px;
    }

    h2 {
        font-size: 28px;
    }

    .kontakt {
        text-align: left;
    }

    .karte {
        padding: 22px 18px;
    }
}