/* ==========================================================================
   BitLabelz Shop — Ergaenzungsschicht
   ...
   ========================================================================== */

/* Ohne border-box zaehlt Polsterung zur Breite dazu. legacy.css setzt es
   nicht, weil Bootstrap 3 das frueher mitbrachte. Fehlt es, laufen
   Textbalken und Eingabefelder ueber ihre Karte hinaus. */
*, *::before, *::after { box-sizing: border-box; }

/* ==========================================================================
   BitLabelz Shop — Ergaenzungsschicht
   --------------------------------------------------------------------------
   legacy.css ist das Original aus dem Bitcases-Shop und wird VORHER
   geladen. Diese Datei ergaenzt nur, was es dort noch nicht gab:
   Rastergitter ohne Bootstrap, Kopf und Navigation, Brotkrumen,
   Kategoriewerkzeuge, Artikelseite, Blaettern und Fuss.

   Regel fuer alles Weitere: erst in legacy.css nachsehen, ob es die
   Klasse schon gibt, und sie benutzen. Nur was fehlt, kommt hierher.
   ========================================================================== */

/* ── Bootstrap-Ersatz ──────────────────────────────────────────────────────
   Das alte CSS setzt .container und .row voraus, die aus Bootstrap 3 kamen.
   Statt 140 KB Bootstrap mitzuschleppen, die paar Zeilen selbst. */

.container {
    width: 100%;
    max-width: 1176px;     /* derselbe Wert wie in legacy.css */
    margin-inline: auto;
    padding-inline: 15px;
}

/* Vier Kacheln je Reihe. Dadurch werden sie groesser und die Titel
   brauchen weniger Zeilen. */
.row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px 20px;
}
@media (max-width: 1000px) { .row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; } }
.row > .item { min-width: 0; }

/* Ein einzelner Artikel darf die Kachelhoehe nicht sprengen */
.item > a { display: block; color: inherit; text-decoration: none; }

/* ── Kachel: Ergaenzungen zum Original ─────────────────────────────────── */

/* Im alten Shop lagen alle Boxbilder als quadratische Montage vor.
   Labels sind quer, deshalb hier objektgerecht statt formatfuellend. */
.review-item .review-cover {
    background-size: contain !important;
    background-position: center !important;
    background-color: #ececf0;
}
.review-item[data-typ="bulky"] .review-cover { background-size: 92% !important; }

/* Fehlt ein Bild, bleibt die Flaeche ruhig statt leer zu wirken */
.review-cover.ohne-bild::after {
    content: "kein Bild";
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: #9a9aa4;
    font-size: 11px;
    letter-spacing: 1px;
}

/* Lagerhinweis unter dem Namen */
.review-text { position: relative; }
.lagerband {
    position: absolute; left: 0; right: 0; bottom: -1px;
    font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
    padding: 2px 0;
}
.lagerband.wenig { background: #fec837; color: #2a1f00; }
.lagerband.weg   { background: #7a1f2c; color: #ffe3e7; }


/* ── Kopf ──────────────────────────────────────────────────────────────── */

.kopf {
    position: sticky; top: 0; z-index: 50;
    background: #131313;
    border-bottom: 2px solid #000;
}
.kopf-zeile { display: flex; align-items: center; gap: 20px; padding-block: 12px; }

.marke img { height: 40px; width: auto; display: block; }

.suche { flex: 1; max-width: 480px; position: relative; }
.suche input {
    width: 100%;
    padding: 10px 40px 10px 15px;
    background: #1f1f1f;
    border: 2px solid #2f2f2f;
    border-radius: 4px;
    color: #e4e4e2;
    font-family: 'JOYSTIX', monospace;
    font-size: 11px;
}
.suche input::placeholder { color: #6b6b72; }
.suche input:focus { outline: 0; border-color: #39fa93; }
.suche button {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border: 0; border-radius: 3px;
    background: #39fa93; color: #06331d; cursor: pointer;
    display: grid; place-items: center;
}

.kopf-aktionen { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.kopf-knopf {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px;
    border: 2px solid #2f2f2f; border-radius: 4px;
    background: #1f1f1f;
    font-family: 'JOYSTIX', monospace; font-size: 10px;
    color: #cfcfd4; white-space: nowrap;
}
.kopf-knopf:hover { border-color: #4a4a52; color: #fff; }

.sprachwahl { display: flex; gap: 2px; }
.sprachwahl a {
    padding: 7px 9px; border-radius: 3px;
    font-family: 'JOYSTIX', monospace; font-size: 10px;
    color: #6b6b72; text-transform: uppercase;
}
.sprachwahl a.aktiv { background: #1f1f1f; color: #fff; }

/* Hauptnavigation, Optik wie das alte Kopfmenue */
/* Kein overflow auf der Leiste: das wuerde die Aufklappmenues abschneiden,
   weil overflow-x auch overflow-y erzwingt. Auf schmalen Geraeten bricht die
   Leiste stattdessen um, damit jeder Punkt sichtbar und antippbar bleibt. */
.hauptnav { background: #171717; border-top: 1px solid #000; }
.hauptnav ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.hauptnav li { position: relative; }
.hauptnav > .container > ul > li > a {
    display: block; padding: 12px 16px;
    font-family: 'JOYSTIX', monospace; font-size: 11px;
    color: #a9a9b2; white-space: nowrap;
    border-bottom: 3px solid transparent;
}
.hauptnav a:hover { color: #fff; }
.hauptnav li.aktiv > a { color: #fff; border-bottom-color: #39fa93; }

@media (max-width: 820px) {
    .hauptnav > .container > ul { flex-wrap: wrap; justify-content: center; }
    .hauptnav > .container > ul > li { flex: 0 0 auto; }
    .hauptnav > .container > ul > li > a { padding: 11px 13px; font-size: 10px; }
    /* Aufklappmenues brauchen Hover, auf dem Touchscreen fuehrt der
       Hauptpunkt direkt in die Kategorie. */
    .hauptnav .untermenue { display: none !important; }
}
@media (max-width: 400px) {
    .hauptnav > .container > ul > li > a { padding: 10px 9px; font-size: 9px; gap: 4px; }
}

.untermenue {
    position: absolute; top: 100%; left: 0; min-width: 240px;
    background: #1b1b1b; border: 2px solid #2f2f2f; border-radius: 4px;
    padding: 5px; display: none; flex-direction: column; z-index: 60;
    box-shadow: 0 8px 24px rgba(0,0,0,.6);
}
.hauptnav li:hover > .untermenue { display: flex; }
.untermenue a {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 9px 11px; border-radius: 3px;
    font-family: 'JOYSTIX', monospace; font-size: 10px; color: #a9a9b2;
}
.untermenue a:hover { background: #262626; color: #fff; }
.untermenue .zahl { color: #5f5f66; }

/* Der Regenbogenstrich aus dem alten Shop */
.neonstrich {
    height: 3px; border: 0; margin: 0;
    background: linear-gradient(to right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
}

/* ── Brotkrumen ────────────────────────────────────────────────────────── */

.brotkrumen {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 16px 0; font-size: 11px;
    font-family: 'JOYSTIX', monospace; color: #6b6b72;
}
.brotkrumen a { color: #a9a9b2; }
.brotkrumen a:hover { color: #fff; }

/* ── Kategorieseite ────────────────────────────────────────────────────── */

.kat-kopf { padding: 12px 0 6px; }
.kat-kopf h1 { font-size: 28px; margin-bottom: 14px; }
.kat-text { color: #a9a9b2; max-width: 80ch; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 1.7; }
.kat-text p { margin: 0 0 1em; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    background: #1f1f1f; border: 2px solid #2f2f2f; border-radius: 4px;
    font-family: 'JOYSTIX', monospace; font-size: 10px; color: #a9a9b2;
}
.chip:hover { border-color: #39fa93; color: #fff; }
.chip .zahl { color: #5f5f66; }

.werkzeugleiste {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
    padding: 14px 0; margin-bottom: 22px;
    border-block: 2px solid #232323;
    font-family: 'JOYSTIX', monospace; font-size: 10px; color: #a9a9b2;
}
.werkzeugleiste select {
    background: #1f1f1f; border: 2px solid #2f2f2f; border-radius: 4px;
    color: #e4e4e2; padding: 7px 10px;
    font-family: 'JOYSTIX', monospace; font-size: 10px; cursor: pointer;
}

/* ── Blaettern ─────────────────────────────────────────────────────────── */

.blaettern { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 34px 0 6px; }
.blaettern a, .blaettern span {
    padding: 9px 15px; border: 2px solid #2f2f2f; border-radius: 4px;
    background: #1f1f1f; color: #a9a9b2;
    font-family: 'JOYSTIX', monospace; font-size: 10px;
}
.blaettern a:hover { border-color: #39fa93; color: #fff; }
.blaettern .lage { border-color: transparent; background: none; color: #5f5f66; }
.blaettern .aus { opacity: .3; pointer-events: none; }

/* ── Artikelseite ──────────────────────────────────────────────────────── */

.artikel-raster {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px; padding: 10px 0 30px;
}
.galerie-gross {
    background: #ececf0; border: 3px solid #2a2a33; border-radius: 6px;
    aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
}
.galerie-gross img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.galerie-klein { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.galerie-klein button {
    width: 64px; height: 64px; padding: 4px; cursor: pointer;
    background: #ececf0; border: 2px solid #2a2a33; border-radius: 4px; overflow: hidden;
}
.galerie-klein button.aktiv { border-color: #39fa93; }
.galerie-klein img { width: 100%; height: 100%; object-fit: contain; }

.artikel-kopf h1 { font-size: 22px; line-height: 1.5; margin-bottom: 10px; }
.artikel-meta { font-family: 'JOYSTIX', monospace; font-size: 10px; color: #6b6b72; margin-bottom: 16px; }

.preisblock {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    padding: 16px 0; margin-bottom: 18px;
    border-block: 2px solid #232323;
}
.preisblock .preis { font-size: 30px; color: #39fa93; text-shadow: 2px 2px 0 #000; }
.preis-alt { color: #6b6b72; text-decoration: line-through; font-size: 15px; }
.preis-hinweis { font-family: 'Open Sans', sans-serif; font-size: 11px; color: #6b6b72; }

.optionsgruppe { margin-bottom: 18px; border: 0; padding: 0; }
.optionsgruppe > label { display: block; font-size: 11px; color: #a9a9b2; margin-bottom: 8px; }
.optionsgruppe .hinweis { font-family: 'Open Sans', sans-serif; font-size: 12px; color: #6b6b72; margin: 0 0 8px; }
.optionen { display: flex; flex-direction: column; gap: 7px; }
.option {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 13px;
    background: #1f1f1f; border: 2px solid #2f2f2f; border-radius: 4px;
    font-size: 11px; cursor: pointer;
}
.option:hover { border-color: #4a4a52; }
.option:has(input:checked) { border-color: #39fa93; background: #17241d; }
.option input { accent-color: #39fa93; width: 16px; height: 16px; }
.option .aufpreis { margin-left: auto; color: #a9a9b2; }
.option .aufpreis.frei { color: #39fa93; }

.kaufzeile { display: flex; gap: 11px; margin: 22px 0 14px; }
.mengenwahl { display: flex; align-items: center; background: #1f1f1f; border: 2px solid #2f2f2f; border-radius: 4px; }
.mengenwahl button { width: 38px; background: none; border: 0; color: #a9a9b2; font-size: 17px; cursor: pointer; }
.mengenwahl button:hover { color: #fff; }
.mengenwahl input {
    width: 48px; text-align: center; background: none; border: 0; color: #e4e4e2;
    font-family: 'JOYSTIX', monospace; font-size: 12px; -moz-appearance: textfield;
}
.mengenwahl input::-webkit-outer-spin-button, .mengenwahl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.knopf {
    flex: 1; padding: 14px 24px; border: 0; border-radius: 4px; cursor: pointer;
    background: #39fa93; color: #06331d;
    font-family: 'JOYSTIX', monospace; font-size: 12px;
    border-bottom: 3px solid #1fa55e;
    text-shadow: 1px 1px 0 rgba(255,255,255,.25);
}
.knopf:hover { background: #4affa0; }
.knopf:active { transform: translateY(2px); border-bottom-width: 1px; }
.knopf[disabled] { background: #2f2f2f; color: #6b6b72; border-bottom-color: #1f1f1f; cursor: not-allowed; text-shadow: none; }

.versandhinweis {
    display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
    font-family: 'JOYSTIX', monospace; font-size: 9px; color: #6b6b72;
    padding: 10px 0;
}
.versandhinweis .da    { color: #39fa93; }
.versandhinweis .wenig { color: #fec837; }
.versandhinweis .weg   { color: #ff5c7a; }

.beschreibung { padding: 20px 0 10px; }
.beschreibung h2 { font-size: 18px; margin-bottom: 14px; }
.beschreibung-text { color: #a9a9b2; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 1.75; max-width: 82ch; }
.beschreibung-text p { margin: 0 0 1em; }
.beschreibung-text img { max-width: 100%; border-radius: 4px; margin: 1em 0; }

.schlagwoerter { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.schlagwort {
    padding: 5px 10px; background: #1f1f1f; border: 1px solid #2f2f2f;
    border-radius: 3px; font-family: 'JOYSTIX', monospace; font-size: 9px; color: #6b6b72;
}
.schlagwort:hover { color: #fff; border-color: #4a4a52; }

/* ── Hinweise, Fehler ──────────────────────────────────────────────────── */

.leer, .fehlerseite { text-align: center; padding: 70px 20px; color: #a9a9b2; }
.fehlerseite .code {
    font-size: 54px; margin-bottom: 12px;
    background: linear-gradient(to right, #b827fc, #2c90fc, #b8fd33, #fec837, #fd1892);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Fuss ──────────────────────────────────────────────────────────────── */

.fuss { border-top: 2px solid #000; background: #171717; margin-top: 40px; padding: 38px 0 24px; }
.fuss-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; }
.fuss h3 { font-size: 11px; color: #6b6b72; margin-bottom: 12px; letter-spacing: 1px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.fuss a, .fuss p { color: #a9a9b2; font-family: 'Open Sans', sans-serif; font-size: 13px; }
.fuss a:hover { color: #fff; }
.fuss .fuss-sozial { margin-top: 12px; }

/* Newsletter in der Fusszeile: Text links, Feld und Knopf rechts; am Handy untereinander */
.fuss-newsletter {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 8px 28px; align-items: center;
    margin-top: 30px; padding: 20px 22px; background: #1f1f24; border: 2px solid #2c2c33; border-radius: 4px;
}
.fuss-newsletter h3 { margin: 0 0 6px; color: #39fa93; }
.fuss .fuss-nl-text p { margin: 0; color: #c4c4cc; }
.fuss-nl-form { display: flex; gap: 8px; min-width: 0; }
.fuss-nl-form input[type=email] {
    flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px;
    background: #121215; color: #eee; border: 2px solid #3a3a44; border-radius: 4px;
    font-family: 'Open Sans', sans-serif; font-size: 14px;
}
.fuss-nl-form input[type=email]:focus { outline: none; border-color: #39fa93; }
.fuss-nl-form .knopf { flex: 0 0 auto; padding: 0 16px; height: 44px; font-size: 11px; color: #06331d; }
.kschritt .kleinhinweis a { color: #39fa93; }
.fuss .fuss-nl-hinweis { grid-column: 2; margin: 0; font-size: 11.5px; color: #7c7c86; }
.fuss .fuss-nl-hinweis a { font-size: 11.5px; color: #9a9aa4; text-decoration: underline; }
.fuss .kontakt-topf { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) {
    .fuss-newsletter { grid-template-columns: 1fr; padding: 16px; }
    .fuss .fuss-nl-hinweis { grid-column: 1; }
}

/* Zahlarten in der Fusszeile */
.fuss-zahlung { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 30px; padding-top: 20px; border-top: 1px solid #26262c; }
.fuss .fuss-zahlung-titel { font-family: 'JOYSTIX', monospace; font-size: 11px; color: #6b6b72; letter-spacing: 1px; text-transform: uppercase; }
.fuss-zahlung-symbole { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fuss-zahlung-symbole img { display: block; width: 38px; height: 24px; }
.fuss .fuss-zahlung-vorkasse { font-family: 'Open Sans', sans-serif; font-size: 12px; color: #8a8a94; border: 1px solid #3a3a44; border-radius: 3px; padding: 3px 7px; line-height: 16px; }

.fuss-unten {
    margin-top: 28px; padding-top: 18px; border-top: 1px solid #232323;
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
    font-family: 'JOYSTIX', monospace; font-size: 9px; color: #5f5f66;
}

/* ── Schwebender Warenkorb ─────────────────────────────────────────────── */

.korb-schwebend {
    position: fixed; right: 16px; bottom: 16px; z-index: 80;
    width: 56px; height: 56px; display: grid; place-items: center;
    background: #1f1f1f; border: 3px solid #2f2f2f; border-radius: 6px;
    color: #e4e4e2; box-shadow: 0 6px 18px rgba(0,0,0,.6);
}
.korb-schwebend:hover { border-color: #39fa93; }
.korb-schwebend .anzahl {
    position: absolute; top: -8px; right: -8px;
    min-width: 21px; height: 21px; display: grid; place-items: center;
    background: #e8384f; color: #fff; border-radius: 999px;
    font-family: 'JOYSTIX', monospace; font-size: 9px;
}

/* ── Schmale Bildschirme ───────────────────────────────────────────────── */

@media (max-width: 900px) {
    .artikel-raster { grid-template-columns: 1fr; gap: 26px; }
    .spad { padding-block: 48px; }
}
@media (max-width: 720px) {
    .kopf-zeile { flex-wrap: wrap; gap: 10px; }
    .suche { order: 3; flex-basis: 100%; max-width: none; }

    .kaufzeile { flex-wrap: wrap; }
    .knopf { flex-basis: 100%; }
    .korb-schwebend { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Startseite: Ergaenzungen zum Original ─────────────────────────────── */

/* Der Aufmacher nutzt .hero-section, .scanlines und .slidertitle aus
   legacy.css. Hier nur, was dort fehlte. */
.hero-section ul { list-style: none; margin: 0; padding: 0; }
/* Pixel-Hintergruende beim Vergroessern scharf halten statt weichzeichnen */
.jpg, .jpgsmall, .hero-section .jpg, [style*="img/bg/"], [style*="img/slider/"] { image-rendering: pixelated; }
/* Wechselnde Hintergruende: zweite Ebene blendet ueber die erste */
.hero-section #jpg { position: relative; }
.hero-section .jpg-naechstes { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity 1.5s ease; pointer-events: none; }
.hero-section .jpg-naechstes.sichtbar { opacity: 1; }
.slidertitle h1 {
    font-size: 30px; margin: 0 0 8px; text-transform: uppercase;
    /* legacy.css setzt 19px Zeilenhoehe: bricht der Titel um, ueberlagern
       sich die Zeilen. */
    line-height: 1.2;
}
@media (max-width: 760px) { .slidertitle h1 { font-size: 22px; } }
.slidertitle h2 {
    font-size: 12px; margin: 0; color: #cfcfd4;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.slidertitle h2 i, .section-title h2 i { color: #e8384f; font-style: normal; }

.section-title { text-align: center; margin-bottom: 26px; }
.section-title h2 { text-transform: uppercase; letter-spacing: 3px; }

.konsolenwahl { background: #171717; border-block: 2px solid #000; }
.konsolenreihe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.konsole {
    width: 78px; height: 70px;
    display: grid; place-items: center; gap: 4px;
    background: #1f1f1f; border: 2px solid #2f2f2f; border-radius: 4px;
    padding: 8px 4px 6px;
}
.konsole:hover { border-color: #e8384f; background: #262626; }
.konsole img { height: 28px; width: auto; image-rendering: pixelated; }
.konsole span { font-family: 'JOYSTIX', monospace; font-size: 9px; color: #a9a9b2; }
.konsole:hover span { color: #fff; }

.merkmale {
    display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
    margin: 22px 0 0; font-family: 'JOYSTIX', monospace; font-size: 9px; color: #6b6b72;
}
.merkmale b { color: #39fa93; font-weight: normal; }

/* Abschnitt mit Pixelhintergrund, wie die Stadtszene im alten Shop */
.stoebern { background-size: cover; background-position: center; position: relative; }
.stoebern::before { content: ""; position: absolute; inset: 0; background: rgba(12,12,14,.55); }
.stoebern > * { position: relative; z-index: 1; }
.kategoriekasten {
    max-width: 700px; margin-inline: auto;
    background: rgba(18,18,18,.92);
    border: 3px solid #4a4a52; border-radius: 4px;
    padding: 24px 26px 20px;
    box-shadow: 0 0 0 4px rgba(0,0,0,.6);
}
/* Kategorie-Knoepfe: am Computer mittig in einer Reihe, am Handy gleich
   breit im 2er-Raster, Anzahl unter dem Namen */
.katchips { justify-content: center; }
@media (max-width: 600px) {
    .kategoriekasten { padding: 20px 14px 16px; }
    .katchips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .katchips .chip {
        flex-direction: column; justify-content: center; gap: 4px;
        padding: 10px 6px; text-align: center; line-height: 1.3;
        overflow-wrap: anywhere;
    }
}

.alle-ansehen {
    display: block; text-align: center; margin-top: 26px;
    font-family: 'JOYSTIX', monospace; font-size: 11px; color: #a9a9b2;
}
.alle-ansehen:hover { color: #39fa93; }

/* ── Animierte Sprites im Menue ────────────────────────────────────────── */
/* Wie .main-menu img im Original: kleine GIFs vor der Beschriftung.
   image-rendering: pixelated haelt sie scharf, wenn der Browser
   hochskaliert. */

.hauptnav a img,
.kopf-knopf img {
    height: 20px; width: auto;
    vertical-align: sub;
    margin-right: 5px;
    image-rendering: pixelated;
    display: inline-block;
}
.hauptnav > .container > ul > li > a { display: flex; align-items: center; gap: 6px; }
.hauptnav a img { margin-right: 0; }
.kopf-knopf img { margin-right: 0; height: 18px; }
.untermenue a img { height: 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   Korrekturen
   ══════════════════════════════════════════════════════════════════════════ */

/* Zwei Bildlaufleisten.
   legacy.css setzt html UND body auf height:100% mit overflow-x:hidden.
   Dadurch entsteht ein zweiter Scrollbereich im body. Die Hoehe darf der
   Inhalt bestimmen, und das Querscrollen unterbindet html. */
html { overflow-x: hidden; }
/* Platz fuer den Scrollbalken immer freihalten: die Seite springt nicht
   mehr zur Seite, wenn er erscheint oder verschwindet (kurze Seiten,
   offene Schublade). Wo der Balken ueber dem Inhalt liegt (Handy, Mac mit
   ausgeblendeten Balken), aendert das nichts. */
html { scrollbar-gutter: stable; }
html, body { height: auto; min-height: 100%; overflow-y: visible; }
body { overflow-x: visible; }

/* Unterstrichene Links. Kommt aus dem Browser-Standard, legacy.css hat
   es nur an einzelnen Stellen abgeschaltet. */
a { text-decoration: none; }
a:hover, a:focus { text-decoration: none; }
.beschreibung-text a, .kat-text a { text-decoration: underline; }

/* ── Kacheln: gleiche Hoehe fuer alle ──────────────────────────────────── */

.row { align-items: stretch; }
.item { display: flex; }
.item > a { display: flex; flex-direction: column; width: 100%; }

/* Bildflaeche immer gleich hoch, egal ob Label quer oder Box hochkant */
.review-item .review-cover { height: 210px; }

/* Der Namensbalken bleibt bei 72px wie im Original. Zu lange Titel
   werden gekuerzt, damit keine Kachel aus der Reihe faellt. */
.review-text { height: 72px; margin-bottom: 0; }
.review-text h5 {
    font-size: 11px;
    line-height: 1.5;
    padding: 0 8px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ── Werbebanner: siehe banner.css (Pflege in der Verwaltung unter Banner) ── */

/* ── Laufband, wie modules/newsticker.php ──────────────────────────────── */
/* Die Klassen kommen aus legacy.css. Die Bewegung lief dort ueber
   jQuery.marquee, hier uebernimmt das eine CSS-Animation. */

.news-ticker-contant {
    display: inline-flex;
    gap: 35px;
    white-space: nowrap;
    padding-left: 100%;
    animation: laufband 26s linear infinite;
}
.news-ticker:hover .news-ticker-contant { animation-play-state: paused; }
@keyframes laufband {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}
.news-ticker-contant .nt-item { font-size: 12px; }

/* ── Konsolen-Slider ───────────────────────────────────────────────────── */
/* .slider, .slick-slide, .slick-current und .desc kommen aus legacy.css.
   Hier nur die Anordnung, die dort Slick uebernommen hatte. */

.slider { display: flex; align-items: center; justify-content: center; }

.slider-spur {
    position: relative;
    flex: 1;
    height: 260px;
    display: flex; align-items: center; justify-content: center;
}

.slick-slide {
    position: absolute;
    left: 50%;
    transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s, filter .45s;
    /* --abstand: 0 ist die Mitte, -1 und 1 die Nachbarn */
    transform: translateX(calc(-50% + var(--abstand, 0) * 240px))
               scale(calc(1 - 0.32 * max(var(--abstand, 0), -1 * var(--abstand, 0))));
    opacity: .38;
    filter: brightness(.45) saturate(.5);
    cursor: pointer;
}
.slick-slide.slick-current {
    opacity: 1;
    filter: none;
    cursor: pointer;
}
.slick-slide a { display: block; text-align: center; }

.startconsole {
    width: 150px; height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.65));
    margin-inline: auto;
}
.slick-current .startconsole { width: 170px; }

.slick-slide .desc { margin-top: 12px; }
.slick-slide .desc h2 { font-size: 20px; color: #fff; text-shadow: 2px 2px 0 #000; margin: 0; }
.slick-slide .desc p {
    margin: 5px 0 0; font-size: 10px; color: #b8fd33;
    text-shadow: 1px 1px 0 #000;
}

.slider-pfeil {
    background: none; border: 0; padding: 0; cursor: pointer;
    flex: 0 0 auto; z-index: 20;
}
.slider-pfeil img { width: 50px; height: auto; transition: transform .15s, filter .15s; }
.slider-pfeil:hover img { transform: scale(.9); filter: contrast(1.2); }

.slider-kuerzel {
    position: absolute; left: 50%; bottom: -46px;
    transform: translateX(-50%);
    display: flex; gap: 5px; z-index: 20;
}
.slider-kuerzel button {
    padding: 4px 9px;
    background: #2a2a33; border: 0; border-radius: 3px;
    color: #cfcfd4; cursor: pointer;
    font-family: 'JOYSTIX', monospace; font-size: 10px;
}
.slider-kuerzel button:hover { background: #3a3a46; color: #fff; }
.slider-kuerzel button.aktiv { background: #40abf5; color: #fff; }

@media (max-width: 760px) {
    .slider-spur { height: 210px; }
    .slick-slide { transform: translateX(calc(-50% + var(--abstand, 0) * 150px))
                              scale(calc(1 - 0.38 * max(var(--abstand,0), -1 * var(--abstand,0)))); }
    .startconsole { width: 100px; }
    .slick-current .startconsole { width: 118px; }
    .slider-pfeil img { width: 36px; }
    .slick-slide .desc h2 { font-size: 14px; }
}

/* ── Konsolenseite ─────────────────────────────────────────────────────── */

.konsolen-kopf {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    padding: 26px 0 8px;
}
.konsolen-kopf img { width: 96px; height: auto; image-rendering: pixelated; }
.konsolen-kopf h1 { margin: 0 0 6px; font-size: 26px; }
.konsolen-kopf p { margin: 0; font-family: 'JOYSTIX', monospace; font-size: 10px; color: #6b6b72; }

.konsolen-gruppe { padding-bottom: 34px; }
.konsolen-gruppe .gruppenkopf {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; padding: 16px 0 14px; border-bottom: 2px solid #232323; margin-bottom: 20px;
}
.konsolen-gruppe h2 { margin: 0; font-size: 17px; }
.konsolen-gruppe + .konsolen-gruppe { margin-top: 26px; }

/* "Alle ansehen" und "Weitere laden": deutlich als Knoepfe, oben im
   Gruppenkopf und noch einmal unter den Kacheln. */
.alle-knopf {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border: 2px solid #39fa93; border-radius: 4px;
    background: transparent; color: #39fa93;
    font-family: 'JOYSTIX', monospace; font-size: 11px; white-space: nowrap;
}
.alle-knopf:hover { background: #39fa93; color: #06331d; }
.alle-knopf.klein { padding: 8px 13px; font-size: 10px; }
.mehr-leiste {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 12px; padding: 30px 0 6px;
}
.mehr-stand { flex-basis: 100%; margin: 0; text-align: center; color: #6f6f78; font-family: 'JOYSTIX', monospace; font-size: 9px; }
.mehr-laden {
    padding: 13px 26px; border: 2px solid #39fa93; border-radius: 4px;
    background: #39fa93; color: #06331d; cursor: pointer;
    font-family: 'JOYSTIX', monospace; font-size: 11px;
}
.mehr-laden:hover { background: #5dffab; border-color: #5dffab; }
.mehr-laden:disabled { opacity: .6; cursor: progress; }
.mehr-laden[hidden] { display: none; }
@media (max-width: 480px) {
    .mehr-leiste > .mehr-laden, .mehr-leiste > .alle-knopf { flex: 1 1 100%; justify-content: center; text-align: center; }
    .konsolen-gruppe .gruppenkopf { align-items: center; }
    .konsolen-gruppe .gruppenkopf .alle-knopf.klein { padding: 7px 10px; font-size: 9px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Kachel, zweite Fassung
   Das Bild bleibt vollstaendig sichtbar, der Preis sitzt darunter.
   Ueberschreibt bewusst Teile von legacy.css.
   ══════════════════════════════════════════════════════════════════════════ */

.review-item {
    position: relative;
    background: #fff;
    border-top-left-radius: 14px;
    overflow: hidden;
    margin-bottom: 0;   /* legacy.css setzt auf Tablets 63px, das riss eine Luecke zwischen Bild und Titel */
}

/* Die verbindliche Fassung des Kachelbildes steht weiter unten im
   Abschnitt "Kachelbild: randlos". */
.review-item .review-cover {
    background-image: none !important;
    border-top-left-radius: 14px;   /* nur links oben, wie die Karte */
    overflow: hidden;
    transition: none;
}
.review-item .review-cover:hover { filter: none; }

.review-cover.ohne-bild::after {
    content: "kein Bild";
    color: #b4b4bc; font-size: 11px; letter-spacing: 1px;
}

/* Konsolensymbol: kleiner als im Original und in der abgerundeten Ecke */
.boxconsole {
    position: absolute !important;
    top: 6px !important; left: 6px !important;
    width: 26px !important; height: 26px;
    padding: 2px;
    background: rgba(24,24,28,.9);
    border: 1px solid #d4d4dc;
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
}

/* Oben rechts: unten laeuft der schwarze Artikelnummern-Balken der
   Montage durchs Bild, dort verdeckt die Fahne den Code. Oben links
   sitzt bereits das Konsolensymbol. */
.review-item .fahne {
    position: absolute; right: 5px; top: 5px; z-index: 3;
    padding: 2px 5px; border-radius: 3px;
    font-family: 'JOYSTIX', monospace; font-size: 7.5px; line-height: 1.3;
    letter-spacing: .04em; text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
    opacity: .94;
}
.fahne-weg   { background: #7a1f2c; color: #ffe3e7; }
.fahne-wenig { background: #fec837; color: #2a1f00; }

/* Textbalken: Titel oben, Preis darunter. Nichts ueberlappt. */
.review-text {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    height: auto !important;
    min-height: 74px;
    background: #1b1b20;
    border-top: 2px solid #000;
    padding: 9px 10px 11px;
    text-align: center;
}
.review-text h5 {
    display: block !important;
    margin: 0;
    font-family: 'JOYSTIX', monospace;
    font-size: 10px; line-height: 1.6;
    color: #e4e4e2;
    overflow: hidden;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box !important;
}

/* Preis: jetzt im Textbalken statt ueber dem Bild */
.review-text span.boxprice {
    position: static;
    display: block;
    background: none;
    border: 0;
    padding: 0;
    font-family: 'JOYSTIX', monospace;
    font-size: 13px;
    color: #39fa93;
    text-shadow: 1px 1px 0 #000;
    border-radius: 0;
}
.review-text span.boxprice i { font-size: 9px; color: #7ad3a3; }
.review-text span.boxprice s { color: #6b6b72; font-size: 10px; margin-right: 5px; }

/* Der Regenbogen als Abschlusskante, wie auf den Presta-Karten */
.item > a { position: relative; }
.item > a::after {
    content: "";
    display: block; height: 3px;
    background: linear-gradient(to right, #b827fc, #2c90fc, #b8fd33, #fec837, #fd1892);
    opacity: 0; transition: opacity .16s;
}
.item > a:hover::after { opacity: 1; }

/* ── Scanlines abschalten ──────────────────────────────────────────────── */
/* Der laufende Streifen und das Rastermuster aus legacy.css legten sich
   mit z-index 2147483649 ueber alles. Die Regenbogenkante unten bleibt. */

.scanlines::before,
.scanlines::after { display: none !important; content: none !important; }

/* ── Navigation: Hover- und Fokuszustaende ─────────────────────────────── */

.hauptnav > .container > ul > li > a {
    position: relative;
    transition: color .15s, background .15s, border-color .15s;
}
.hauptnav > .container > ul > li > a::before {
    content: "";
    position: absolute; inset: 4px 6px;
    border-radius: 4px;
    background: #ffffff;
    opacity: 0;
    transition: opacity .15s;
    z-index: -1;
}
.hauptnav > .container > ul > li > a:hover::before { opacity: .06; }
.hauptnav > .container > ul > li > a:hover {
    color: #fff;
    border-bottom-color: #39fa93;
}
.hauptnav a img { transition: transform .15s; }
.hauptnav > .container > ul > li > a:hover img { transform: scale(1.18); }

/* Tastaturbedienung sichtbar machen */
.hauptnav a:focus-visible,
.kopf-knopf:focus-visible,
.chip:focus-visible,
.item > a:focus-visible {
    outline: 2px solid #39fa93;
    outline-offset: 2px;
    border-radius: 3px;
}

.kopf-knopf { transition: border-color .15s, background .15s, color .15s; }
.kopf-knopf:hover { background: #262626; border-color: #39fa93; color: #fff; }
.kopf-knopf img { transition: transform .15s; }
.kopf-knopf:hover img { transform: scale(1.15); }

.sprachwahl a { transition: background .15s, color .15s; }
.sprachwahl a:hover { background: #262626; color: #fff; }

/* ── Fuss: Kontrast ────────────────────────────────────────────────────── */
/* legacy.css faerbt Absaetze dunkel. Auf dem dunklen Fuss war das
   schwarz auf dunkelgrau und praktisch unlesbar. */

.fuss, .fuss * { color: #a9a9b2; }
.fuss h3 { color: #6f6f78; }
.fuss a { color: #b9b9c2; }
.fuss a:hover { color: #fff; }
.fuss p { color: #9a9aa4; }
.fuss-unten, .fuss-unten * { color: #74747e; }

/* ── Umschalter auf der Konsolenseite ──────────────────────────────────── */

.konsolen-kopf { justify-content: space-between; }
.konsolen-kopf .links { display: flex; align-items: center; gap: 22px; }

.sortimentswahl { display: flex; flex-wrap: wrap; gap: 6px; }
.sortimentswahl a {
    padding: 9px 16px;
    background: #1f1f1f;
    border: 2px solid #2f2f2f;
    border-radius: 4px;
    font-family: 'JOYSTIX', monospace; font-size: 10px;
    color: #a9a9b2;
    transition: background .15s, border-color .15s, color .15s;
}
.sortimentswahl a:hover { background: #262626; color: #fff; border-color: #4a4a52; }
.sortimentswahl a.aktiv { background: #39fa93; border-color: #39fa93; color: #06331d; }
.sortimentswahl .zahl { opacity: .65; margin-left: 6px; }

@media (max-width: 680px) {
    .konsolen-kopf { flex-direction: column; align-items: flex-start; gap: 16px; }
    .sortimentswahl { width: 100%; }
    .sortimentswahl a { flex: 1; text-align: center; }
}

/* ── Sofortsuche in der Kategorie ──────────────────────────────────────── */

.werkzeugleiste { gap: 14px; }
.katsuche { position: relative; flex: 1 1 240px; max-width: 320px; margin-left: auto; }
.katsuche input {
    width: 100%;
    padding: 8px 34px 8px 12px;
    background: #1f1f1f;
    border: 2px solid #2f2f2f;
    border-radius: 4px;
    color: #e4e4e2;
    font-family: 'JOYSTIX', monospace; font-size: 10px;
}
.katsuche input::placeholder { color: #5f5f66; }
.katsuche input:focus { outline: 0; border-color: #39fa93; }
.katsuche button {
    position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; border: 0; border-radius: 3px;
    background: none; color: #a9a9b2; cursor: pointer;
    display: grid; place-items: center;
}
.katsuche button:hover { color: #39fa93; }

#katgitter[aria-busy="true"] { opacity: .45; transition: opacity .15s; }

@media (max-width: 680px) {
    .werkzeugleiste { flex-direction: column; align-items: stretch; }
    .katsuche { max-width: none; margin-left: 0; }
    .sortierung { justify-content: space-between; }
}

/* ── Versandkosten auf der Artikelseite ────────────────────────────────── */

.preisblock { flex-wrap: wrap; }
.versandlink {
    background: none; border: 0; padding: 0;
    color: #39fa93;
    font: inherit; font-size: inherit;
    text-decoration: underline; text-underline-offset: 2px;
    cursor: pointer;
}
.versandlink:hover { color: #6bffb0; }

.versandtabelle {
    margin: -6px 0 20px;
    background: #1b1b20;
    border: 2px solid #2f2f2f;
    border-radius: 4px;
    padding: 14px 16px;
}
.versandtabelle table { width: 100%; border-collapse: collapse; }
.versandtabelle caption {
    text-align: left; padding-bottom: 10px;
    font-family: 'JOYSTIX', monospace; font-size: 10px; color: #a9a9b2;
}
.versandtabelle th, .versandtabelle td {
    padding: 7px 0;
    font-family: 'Open Sans', sans-serif; font-size: 13px;
    border-bottom: 1px solid #262630;
    text-align: left; font-weight: normal; color: #b9b9c2;
}
.versandtabelle td { text-align: right; color: #e4e4e2; }
.versandtabelle tr:last-child th, .versandtabelle tr:last-child td { border-bottom: 0; }
.versandtabelle tr.frei th, .versandtabelle tr.frei td { color: #39fa93; }
.versandtabelle .nicht { color: #ff8095; }
.versandtabelle .hinweis {
    margin: 10px 0 0; font-family: 'Open Sans', sans-serif;
    font-size: 11px; color: #74747e;
}

.versandhinweis .trenner { color: #3a3a46; }

/* ── Galerie: Bild immer vollstaendig ──────────────────────────────────── */

.galerie-gross { aspect-ratio: auto; min-height: 330px; padding: 14px; }
.galerie-gross img { padding: 0; max-height: 460px; }
.galerie-klein button { background: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   Kachelbild: randlos
   --------------------------------------------------------------------------
   Die Vorschaubilder haben je nach Sortiment ein anderes Verhaeltnis: die
   Label-Montage ist 5:4, ein Boxfoto 3:2. Ein festes Verhaeltnis an der
   Kachel wuerde also entweder Weiss an den Seiten stehen lassen oder das
   Motiv beschneiden. Beides faellt auf, weil die Montage oben und unten
   einen schwarzen Balken hat, der bis an den Rand laeuft.

   Deshalb: die Breite gibt die Kachel vor, die Hoehe kommt vom Bild. Das
   Motiv sitzt randlos, nichts wird gestaucht, nichts abgeschnitten. Die
   Vorschaubilder werden beim Import genau so erzeugt.
   ═══════════════════════════════════════════════════════════════════════════ */

.review-item .review-cover {
    height: auto;
    /* 5:4 ist das Format der Label-Montage. Die Kacheln sind damit
       ueberall gleich hoch, auch wenn Labels und Boxen gemischt sind. */
    aspect-ratio: 5 / 4;
    padding: 0;
    display: block;
    background: #fff !important;
}
.review-item .review-cover img {
    width: 100%;
    height: 100%;
    max-width: none; max-height: none;
    /* Labels sind bereits 5:4, dort wird nichts beschnitten. Boxfotos
       sind 3:2 und werden auf die Hoehe gezogen; weggeschnitten wird
       nur der weisse Rand links und rechts. */
    object-fit: cover;
    display: block;
    /* Kein Zoom beim Darueberfahren, stattdessen mehr Farbe,
       wie es legacy.css im alten Shop gemacht hat. */
    transform: none !important;
    transition: filter .25s ease;
}
.review-item:hover .review-cover img {
    filter: saturate(1.75) contrast(1.04);
}

/* Fehlt das Bild, braucht die Flaeche eine Hoehe, sonst faellt sie zusammen */
.review-cover.ohne-bild { aspect-ratio: 3 / 2; }

.review-cover.ohne-bild {
    display: grid !important;
    place-items: center;
}

/* Fehlt die Bilddatei, zeigt der Browser sonst das kaputte Symbol samt
   Alternativtext. Stattdessen ein ruhiger Platzhalter. */
.review-cover img[data-fehlt] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Artikelseite: Beschreibung und "Passt dazu"
   ══════════════════════════════════════════════════════════════════════════ */

/* Bunter Trenner ueber die volle Breite, wie die Kante im Kopf */
.trenner-breit {
    margin: 46px 0 40px;
    height: 3px;
    border: 0;
    border-radius: 2px;
    opacity: .85;
}

.beschreibung { padding: 0 0 8px; }
.beschreibung h2 {
    font-size: 19px;
    letter-spacing: 2px;
    margin-bottom: 20px;
}
.beschreibung-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.85;
    color: #b9b9c2;
    max-width: 74ch;
}
.beschreibung-text p { margin: 0 0 1.25em; }
.beschreibung-text strong { color: #e4e4e2; font-weight: 600; }
.beschreibung-text ul,
.beschreibung-text ol { margin: 0 0 1.25em 1.2em; padding: 0; }
.beschreibung-text li { margin-bottom: .4em; }

/* Handgeschriebener Teil steht vorn und hebt sich leicht ab */
.eigener-text {
    border-left: 3px solid #39fa93;
    padding-left: 18px;
    margin-bottom: 1.6em;
    color: #c6c6cf;
}
.eigener-text p:last-child { margin-bottom: 0; }

/* ── Produktdaten als Kacheln ──────────────────────────────────────────── */

.produktdaten {
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}
.produktdaten li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: #1b1b20;
    border: 2px solid #26262e;
    border-radius: 6px;
}
.produktdaten svg {
    width: 26px; height: 26px;
    flex: 0 0 auto;
    color: #39fa93;
    margin-top: 2px;
}
.produktdaten strong {
    display: block;
    font-family: 'JOYSTIX', monospace;
    font-size: 12px;
    color: #e4e4e2;
    margin-bottom: 4px;
}
.produktdaten span {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color: #8a8a94;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 3px;
}
.produktdaten em {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 12.5px;
    font-style: normal;
    color: #74747e;
    line-height: 1.5;
}

/* ── "Passt dazu" ──────────────────────────────────────────────────────── */

.passt-dazu { padding-bottom: 20px; }
.passt-dazu .section-title { margin-bottom: 28px; }
.passt-dazu .section-title h2 { font-size: 20px; letter-spacing: 3px; }

@media (max-width: 680px) {
    .trenner-breit { margin: 34px 0 30px; }
    .produktdaten { grid-template-columns: 1fr; gap: 10px; }
    .beschreibung-text { font-size: 14px; line-height: 1.75; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Optionen
   Kontrast korrigiert: die Beschriftungen waren dunkel auf dunkelgrau,
   weil legacy.css Formularelemente fuer helle Flaechen faerbt.
   ══════════════════════════════════════════════════════════════════════════ */

.optionsgruppe {
    border: 0; padding: 0; margin: 0 0 22px;
}
.optionsgruppe legend {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 0; margin-bottom: 8px;
    font-family: 'JOYSTIX', monospace; font-size: 11px;
    letter-spacing: .08em; text-transform: uppercase;
    color: #cfcfd4;
}
.optionsgruppe legend .mehrfach {
    font-family: 'Open Sans', sans-serif;
    font-size: 11px; letter-spacing: 0; text-transform: none;
    color: #74747e;
    border: 1px solid #33333d; border-radius: 3px;
    padding: 2px 7px;
}
.optionsgruppe .hinweis {
    margin: 0 0 10px;
    font-family: 'Open Sans', sans-serif; font-size: 12.5px;
    color: #8a8a94; line-height: 1.55;
}

.optionen { display: flex; flex-direction: column; gap: 8px; }

.option {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 15px;
    background: #1b1b20;
    border: 2px solid #2b2b34;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.option:hover { background: #22222a; border-color: #3d3d48; }
.option:has(input:checked) { border-color: #39fa93; background: #14251c; }
.option input { accent-color: #39fa93; width: 17px; height: 17px; flex: 0 0 auto; margin: 0; }

.option .bezeichnung {
    font-family: 'JOYSTIX', monospace; font-size: 11px;
    letter-spacing: .04em; text-transform: uppercase;
    color: #dcdce2;
    line-height: 1.5;
}
.option:has(input:checked) .bezeichnung { color: #fff; }

.option .aufpreis {
    margin-left: auto;
    font-family: 'JOYSTIX', monospace; font-size: 11px;
    color: #cfcfd4; white-space: nowrap;
}
.option .aufpreis.frei { color: #74747e; }

/* Eingabefeld, das an einer Auswahl haengt */
.optionseingabe {
    position: relative;
    margin: 10px 0 0 30px;
    padding: 14px 16px;
    background: #14251c;
    border: 2px solid #2a6a49;
    border-radius: 5px;
}
.optionseingabe label {
    display: block; margin-bottom: 7px;
    font-family: 'Open Sans', sans-serif; font-size: 12px;
    color: #9ad9b8;
}
.optionseingabe input {
    width: 100%;
    padding: 10px 62px 10px 12px;
    background: #0f1a14;
    border: 2px solid #2a6a49;
    border-radius: 4px;
    color: #e4e4e2;
    font-family: 'JOYSTIX', monospace; font-size: 14px;
    letter-spacing: .18em;
}
.optionseingabe input:focus { outline: 0; border-color: #39fa93; }
.optionseingabe input::placeholder { color: #4a6b58; letter-spacing: .08em; }
.optionseingabe .zaehler {
    position: absolute; right: 26px; bottom: 26px;
    font-family: 'JOYSTIX', monospace; font-size: 10px; color: #4a6b58;
}

@media (max-width: 680px) {
    .option { padding: 12px; gap: 10px; }
    .option .bezeichnung { font-size: 10px; }
    .option .aufpreis { font-size: 10px; }
    .optionseingabe { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Warenkorb
   --------------------------------------------------------------------------
   Die Schublade liegt auf jeder Seite im Markup und faehrt von rechts
   herein. Auf schmalen Geraeten nimmt sie die volle Breite, sonst 400px.
   ══════════════════════════════════════════════════════════════════════════ */

/* Zahl am Korbsymbol */
.korb-schwebend .anzahl.leer,
.kopf-korb .zahl.leer { display: none; }

.kopf-korb { position: relative; }
.kopf-korb .zahl {
    position: absolute; top: -6px; right: -6px;
    min-width: 18px; height: 18px; padding: 0 4px;
    display: grid; place-items: center;
    background: #e8384f; color: #fff; border-radius: 999px;
    font-family: 'JOYSTIX', monospace; font-size: 8px;
}

/* ── Schublade ─────────────────────────────────────────────────────────── */

.korbschublade { position: fixed; inset: 0; z-index: 120; }
.schublade-schatten {
    position: absolute; inset: 0;
    background: rgba(6,6,9,.68);
    opacity: 0; transition: opacity .2s ease;
}
.korbschublade.auf .schublade-schatten { opacity: 1; }

.schublade-blatt {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(400px, 100%);
    display: flex; flex-direction: column;
    background: #141418;
    border-left: 3px solid #2a2a33;
    box-shadow: -12px 0 40px rgba(0,0,0,.6);
    transform: translateX(100%);
    transition: transform .22s ease;
}
.korbschublade.auf .schublade-blatt { transform: translateX(0); }

.schublade-blatt > header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px 18px;
    border-bottom: 2px solid #26262e;
}
.schublade-blatt h2 {
    margin: 0; display: flex; align-items: center; gap: 9px;
    font-family: 'JOYSTIX', monospace; font-size: 13px;
    letter-spacing: 2px; color: #e4e4e2;
}
.schublade-blatt h2 .zahl {
    min-width: 20px; height: 20px; padding: 0 5px;
    display: grid; place-items: center;
    background: #39fa93; color: #06331d; border-radius: 999px;
    font-size: 8px;
}
.schublade-blatt h2 .zahl.leer { display: none; }
.schublade-blatt .zu {
    width: 32px; height: 32px; flex: 0 0 auto;
    background: none; border: 2px solid #2f2f38; border-radius: 4px;
    color: #a9a9b2; font-size: 20px; line-height: 1; cursor: pointer;
}
.schublade-blatt .zu:hover { border-color: #39fa93; color: #fff; }

.schublade-inhalt { flex: 1 1 auto; overflow-y: auto; padding: 8px 0; }
.schublade-leer {
    padding: 40px 22px; text-align: center;
    font-family: 'Open Sans', sans-serif; font-size: 14px; color: #8a8a94;
}

.schublade-zeile {
    display: grid; grid-template-columns: 62px 1fr auto;
    gap: 12px; align-items: start;
    padding: 12px 18px;
    border-bottom: 1px solid #202028;
}
.schublade-zeile.warnung { background: rgba(232,56,79,.08); }
.schublade-zeile .bild {
    width: 62px; aspect-ratio: 5 / 4;
    background: #fff; border-radius: 4px; overflow: hidden; display: block;
}
.schublade-zeile .bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.schublade-zeile .name {
    display: block;
    font-family: 'JOYSTIX', monospace; font-size: 9.5px; line-height: 1.6;
    color: #e4e4e2; text-decoration: none;
}
.schublade-zeile .name:hover { color: #39fa93; }
.schublade-zeile .opt {
    list-style: none; margin: 6px 0 0; padding: 0;
    font-family: 'Open Sans', sans-serif; font-size: 11.5px; color: #8a8a94;
}
.schublade-zeile .opt strong { color: #cfcfd4; }
.schublade-zeile .opt em { font-style: normal; color: #39fa93; }
.schublade-zeile .preis {
    font-family: 'JOYSTIX', monospace; font-size: 11px; color: #39fa93;
    white-space: nowrap;
}

.schublade-zeile .menge { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.schublade-zeile .menge button {
    width: 24px; height: 24px;
    background: #1f1f24; border: 2px solid #2f2f38; border-radius: 3px;
    color: #cfcfd4; cursor: pointer; line-height: 1;
}
.schublade-zeile .menge button:hover { border-color: #39fa93; color: #fff; }
.schublade-zeile .menge span {
    min-width: 22px; text-align: center;
    font-family: 'JOYSTIX', monospace; font-size: 10px; color: #e4e4e2;
}
.schublade-zeile .menge .weg { margin-left: auto; border-color: #3a2129; color: #d08a96; }
.schublade-zeile .menge .weg:hover { border-color: #e8384f; color: #fff; }

.schublade-blatt > footer {
    flex: 0 0 auto; padding: 16px 18px 20px;
    border-top: 2px solid #26262e; background: #17171c;
}
.schublade-blatt > footer .zeile {
    display: flex; justify-content: space-between; gap: 14px;
    font-family: 'Open Sans', sans-serif; font-size: 13px; color: #a9a9b2;
    margin-bottom: 6px;
}
.schublade-blatt > footer .gesamt {
    font-family: 'JOYSTIX', monospace; font-size: 12px; color: #e4e4e2;
    padding-top: 9px; margin-top: 4px; border-top: 1px solid #2a2a33;
}
.schublade-blatt > footer .hinweis {
    margin: 8px 0 0;
    font-family: 'Open Sans', sans-serif; font-size: 11.5px; color: #8a8a94;
}
/* .knopf ist fuer <button> in einer Flex-Zeile gedacht und bleibt als
   <a> sonst inline: Breite und Abstand greifen dann nicht. */
.schublade-blatt > footer .knopf {
    display: block; width: 100%; margin-top: 14px; text-align: center;
    text-decoration: none; box-sizing: border-box;
}

body.korb-offen { overflow: hidden; }
/* Offene Ebene (Menue, Warenkorb, Optionen): Seite dahinter steht still.
   Auf html, weil dort gescrollt wird; overscroll verhindert, dass das
   Wischen in der Ebene am Ende auf die Seite durchschlaegt. */
html.gesperrt, html.gesperrt body { overflow: hidden !important; overscroll-behavior: none; }
.mm-schatten, .schublade-schatten, .of-schatten { touch-action: none; }
.schublade-inhalt, .of-blatt, .mobilmenue nav, .mobilmenue .mm-blatt { overscroll-behavior: contain; }

/* ── Warenkorbseite ────────────────────────────────────────────────────── */

.korbseite { padding-bottom: 40px; }
.korbseite .section-title h1 {
    font-family: 'JOYSTIX', monospace; font-size: 20px; letter-spacing: 3px;
}

.korb-raster {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px; align-items: start;
}

.korb-zeile {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto auto 34px;
    gap: 16px; align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #22222a;
}
.korb-zeile.warnung { background: rgba(232,56,79,.07); }
.korb-bild {
    width: 96px; aspect-ratio: 5 / 4;
    background: #fff; border-radius: 5px; overflow: hidden; display: block;
}
.korb-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.korb-name {
    font-family: 'JOYSTIX', monospace; font-size: 11px; line-height: 1.7;
    color: #e4e4e2; text-decoration: none;
}
.korb-name:hover { color: #39fa93; }
.korb-optionen {
    list-style: none; margin: 8px 0 0; padding: 0;
    font-family: 'Open Sans', sans-serif; font-size: 12.5px; color: #8a8a94;
}
.korb-optionen strong { color: #cfcfd4; }
.korb-optionen em { font-style: normal; color: #39fa93; }
.korb-warnung {
    margin: 8px 0 0;
    font-family: 'Open Sans', sans-serif; font-size: 12px; color: #f08a97;
}

.korb-menge { display: flex; align-items: center; gap: 7px; }
.korb-menge button {
    width: 28px; height: 28px;
    background: #1f1f24; border: 2px solid #2f2f38; border-radius: 3px;
    color: #cfcfd4; cursor: pointer; line-height: 1;
}
.korb-menge button:hover { border-color: #39fa93; color: #fff; }
.korb-menge span {
    min-width: 26px; text-align: center;
    font-family: 'JOYSTIX', monospace; font-size: 11px; color: #e4e4e2;
}

.korb-preis { text-align: right; }
.korb-preis strong {
    display: block;
    font-family: 'JOYSTIX', monospace; font-size: 13px; color: #39fa93;
}
.korb-preis span {
    display: block; margin-top: 4px;
    font-family: 'Open Sans', sans-serif; font-size: 12px; color: #74747e;
}

.korb-weg button {
    width: 30px; height: 30px;
    background: none; border: 2px solid #2f2f38; border-radius: 3px;
    color: #8a8a94; font-size: 17px; line-height: 1; cursor: pointer;
}
.korb-weg button:hover { border-color: #e8384f; color: #fff; }

.korb-leeren { margin-top: 16px; }
.korb-leeren button {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: 'Open Sans', sans-serif; font-size: 12.5px; color: #74747e;
    text-decoration: underline;
}
.korb-leeren button:hover { color: #f08a97; }

.korb-summe {
    position: sticky; top: 16px;
    background: #17171c; border: 2px solid #26262e; border-radius: 6px;
    padding: 20px 18px;
}
.korb-summe .knopf {
    display: block; width: 100%; margin-top: 18px; text-align: center;
    text-decoration: none; box-sizing: border-box;
}
.korb-summe .weiter {
    display: block; text-align: center; margin-top: 12px;
    font-family: 'Open Sans', sans-serif; font-size: 12.5px; color: #8a8a94;
}

.summenblock dl {
    display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; margin: 0;
    font-family: 'Open Sans', sans-serif; font-size: 13.5px; color: #a9a9b2;
}
.summenblock dd { margin: 0; text-align: right; }
.summenblock .gesamt {
    font-family: 'JOYSTIX', monospace; font-size: 12px; color: #e4e4e2;
    padding-top: 11px; margin-top: 3px; border-top: 1px solid #2a2a33;
}
.summenblock .hinweis {
    margin: 10px 0 0;
    font-family: 'Open Sans', sans-serif; font-size: 11.5px; color: #74747e;
}

.versandbalken { margin-bottom: 18px; }
.versandbalken .spur {
    height: 7px; border-radius: 999px; background: #22222a; overflow: hidden;
}
.versandbalken .spur span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #40abf5, #39fa93);
    transition: width .3s ease;
}
.versandbalken p {
    margin: 8px 0 0;
    font-family: 'Open Sans', sans-serif; font-size: 12px; color: #8a8a94;
}
.versandbalken.erreicht .spur span { background: #39fa93; }
.versandbalken.erreicht p { color: #39fa93; }

.korb-leer {
    text-align: center; padding: 60px 20px 70px;
    font-family: 'Open Sans', sans-serif; color: #8a8a94;
}
.korb-leer svg { width: 54px; height: 54px; color: #33333d; margin-bottom: 18px; }
.korb-leer .gross {
    font-family: 'JOYSTIX', monospace; font-size: 13px; color: #cfcfd4;
    letter-spacing: 1px; margin-bottom: 10px;
}
.korb-leer .knopf { display: inline-block; margin-top: 22px; text-decoration: none; }

.kaufmeldung {
    margin: 12px 0 0;
    font-family: 'Open Sans', sans-serif; font-size: 13px; color: #f08a97;
}
.knopf.laedt { opacity: .6; cursor: progress; }

@media (max-width: 860px) {
    .korb-raster { grid-template-columns: 1fr; gap: 24px; }
    .korb-summe { position: static; }
}
@media (max-width: 620px) {
    .korb-zeile {
        grid-template-columns: 74px minmax(0, 1fr) 34px;
        grid-template-areas: "bild text weg" "bild menge preis";
        gap: 10px 12px;
    }
    .korb-bild  { width: 74px; grid-area: bild; align-self: start; }
    .korb-text  { grid-area: text; }
    .korb-menge { grid-area: menge; }
    .korb-preis { grid-area: preis; text-align: right; }
    .korb-weg   { grid-area: weg; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Schnellkauf an der Artikelkachel
   --------------------------------------------------------------------------
   Das Plus sitzt unten rechts im Bild. Dort liegt bei keiner Montage etwas
   Wichtiges: oben laeuft der BitLabelz-Balken, unten links die
   Artikelnummer, oben rechts die Lagerfahne.

   Das Formular liegt als unsichtbare Flaeche ueber dem Bild und hat
   dasselbe Seitenverhaeltnis wie dieses. Damit braucht die Position keine
   geratenen Pixelwerte und haelt auch, wenn der Titel unten drei Zeilen
   lang wird. Klicks gehen durch die Flaeche hindurch, nur der Knopf selbst
   faengt sie ab.

   Mit Maus erscheint es beim Darueberfahren, auf dem Touchscreen steht es
   dauerhaft da: dort gibt es kein Hover, und ein unsichtbarer Knopf ist
   kein Knopf.
   ═══════════════════════════════════════════════════════════════════════════ */

.item { position: relative; }

.schnellkauf {
    position: absolute;
    top: 0; left: 0; right: 0;
    aspect-ratio: 5 / 4;          /* deckungsgleich mit dem Kachelbild */
    margin: 0;
    padding: 0 9px 9px 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
    z-index: 4;
}
.schnellkauf button {
    pointer-events: auto;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    padding: 0;
    background: rgba(18,18,22,.9);
    border: 2px solid #39fa93;
    border-radius: 5px;
    color: #39fa93;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,.45);
    transition: background .15s, color .15s, transform .15s;
}
.schnellkauf svg { width: 19px; height: 19px; }
.schnellkauf button:hover,
.schnellkauf button:focus-visible {
    background: #39fa93;
    color: #06331d;
    transform: scale(1.08);
}
.schnellkauf button:active { transform: scale(.96); }

/* Kurze Rueckmeldung, damit klar ist, dass der Klick angekommen ist */
.schnellkauf button.fertig {
    background: #39fa93; color: #06331d; border-color: #39fa93;
}
.schnellkauf button.laedt { opacity: .65; cursor: progress; }

@media (hover: hover) and (pointer: fine) {
    .schnellkauf button {
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .16s ease, transform .16s ease,
                    background .15s, color .15s;
    }
    .item:hover .schnellkauf button,
    .schnellkauf button:focus-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 760px) {
    .schnellkauf { padding: 0 7px 7px 0; }
    .schnellkauf button { width: 32px; height: 32px; }
    .schnellkauf svg { width: 17px; height: 17px; }
}

/* ── Flug zum Korb ─────────────────────────────────────────────────────── */

/* Die Kopie des Artikelbildes, die nach dem Schnellkauf zum Korbsymbol
   unten rechts fliegt. Liegt ueber allem, faengt aber keine Klicks. */
.korb-flug {
    position: fixed;
    z-index: 200;
    pointer-events: none;
    will-change: transform;
}
.korb-flug-koerper {
    width: 100%; height: 100%;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    border: 2px solid #39fa93;
    box-shadow: 0 6px 20px rgba(0,0,0,.5), 0 0 0 4px rgba(57,250,147,.16);
    will-change: transform, opacity;
}
.korb-flug-koerper img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Kein Bild zur Hand: dann fliegt ein Plus */
.korb-flug-koerper.ohne-bild {
    background: #141418;
    display: grid; place-items: center;
}
.korb-flug-koerper.ohne-bild::after {
    content: "+";
    font-family: 'JOYSTIX', monospace;
    font-size: 26px;
    color: #39fa93;
}

/* Der Stups, wenn die Kopie ankommt */
.korb-schwebend.huepft,
.kopf-korb.huepft { animation: korb-huepft .5s cubic-bezier(.34,1.56,.64,1); }

@keyframes korb-huepft {
      0% { transform: scale(1); }
     35% { transform: scale(1.22); }
     60% { transform: scale(.94); }
    100% { transform: scale(1); }
}

.korb-schwebend.huepft { border-color: #39fa93; }

@media (prefers-reduced-motion: reduce) {
    .korb-schwebend.huepft,
    .kopf-korb.huepft { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Optionsfenster am Schnellkauf
   --------------------------------------------------------------------------
   Hat ein Artikel Optionen, waehlt das Plus nichts blind aus, sondern
   zeigt genau die Felder der Artikelseite.

   Ab 640px ein mittiges Fenster, darunter ein Blatt, das von unten
   hereinfaehrt: auf dem Handy ist der untere Rand mit dem Daumen
   erreichbar, die Bildschirmmitte nicht. Der Kaufknopf bleibt in beiden
   Faellen unten stehen, auch wenn die Liste der Optionen scrollt.
   ══════════════════════════════════════════════════════════════════════════ */

.optionsfenster {
    position: fixed; inset: 0; z-index: 140;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}

/* WICHTIG: display:flex oben schlaegt sonst das hidden-Attribut. Die
   Ebene laege dann unsichtbar ueber der ganzen Seite und schluckte jeden
   Klick und jede Beruehrung. */
.optionsfenster[hidden],
.korbschublade[hidden] { display: none !important; }
.of-schatten {
    position: absolute; inset: 0;
    background: rgba(6,6,9,.7);
    opacity: 0; transition: opacity .2s ease;
}
.optionsfenster.auf .of-schatten { opacity: 1; }

.of-blatt {
    position: relative;
    width: min(520px, 100%);
    max-height: min(86vh, 760px);
    display: flex; flex-direction: column;
    background: #141418;
    border: 3px solid #2a2a33;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(0,0,0,.65);
    opacity: 0;
    transform: translateY(14px) scale(.98);
    transition: opacity .2s ease, transform .2s ease;
}
.optionsfenster.auf .of-blatt { opacity: 1; transform: none; }

.of-blatt > header {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 18px;
    border-bottom: 2px solid #26262e;
}
.of-blatt h2 {
    margin: 0;
    font-family: 'JOYSTIX', monospace; font-size: 12px;
    letter-spacing: 2px; color: #e4e4e2;
}
.of-blatt .zu {
    width: 32px; height: 32px; flex: 0 0 auto;
    background: none; border: 2px solid #2f2f38; border-radius: 4px;
    color: #a9a9b2; font-size: 20px; line-height: 1; cursor: pointer;
}
.of-blatt .zu:hover { border-color: #39fa93; color: #fff; }

.of-inhalt { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.optionsfenster-form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }

.of-laedt {
    padding: 40px 20px; text-align: center;
    font-family: 'Open Sans', sans-serif; font-size: 13.5px; color: #8a8a94;
}

/* Kopf mit Bild und Namen */
.of-kopf {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid #22222a;
}
.of-bild {
    width: 74px; flex: 0 0 auto;
    aspect-ratio: 5 / 4;
    background: #fff; border-radius: 5px; overflow: hidden;
}
.of-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.of-titel { min-width: 0; }
.of-titel a {
    display: block;
    font-family: 'JOYSTIX', monospace; font-size: 10.5px; line-height: 1.6;
    color: #e4e4e2; text-decoration: none;
}
.of-titel a:hover { color: #39fa93; }
.of-grundpreis {
    display: block; margin-top: 6px;
    font-family: 'Open Sans', sans-serif; font-size: 12.5px; color: #8a8a94;
}

/* Die Optionen selbst scrollen, alles andere bleibt stehen */
.of-felder {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 18px 6px;
    -webkit-overflow-scrolling: touch;
}
.of-felder .optionsgruppe { margin-bottom: 18px; }
.of-felder .optionsgruppe:last-child { margin-bottom: 4px; }

.of-fuss {
    flex: 0 0 auto;
    padding: 14px 18px 18px;
    border-top: 2px solid #26262e;
    background: #17171c;
}
.of-zeile {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 13px;
}
.of-summe { text-align: right; }
.of-summe span {
    display: block;
    font-family: 'Open Sans', sans-serif; font-size: 11.5px; color: #8a8a94;
}
.of-summe strong {
    display: block; margin-top: 3px;
    font-family: 'JOYSTIX', monospace; font-size: 15px; color: #39fa93;
}
.of-kaufen { width: 100%; box-sizing: border-box; }
.of-meldung {
    margin: 11px 0 0;
    font-family: 'Open Sans', sans-serif; font-size: 12.5px; color: #f08a97;
}

/* Das Plus als Link, wenn der Artikel Optionen hat: sieht aus wie der
   Knopf daneben, damit die Kachelreihe ruhig bleibt. */
.schnellkauf > a {
    pointer-events: auto;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: rgba(18,18,22,.9);
    border: 2px solid #39fa93;
    border-radius: 5px;
    color: #39fa93;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0,0,0,.45);
    transition: background .15s, color .15s, transform .15s;
}
.schnellkauf > a:hover,
.schnellkauf > a:focus-visible { background: #39fa93; color: #06331d; transform: scale(1.08); }
.schnellkauf > a:active { transform: scale(.96); }

@media (hover: hover) and (pointer: fine) {
    .schnellkauf > a {
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .16s ease, transform .16s ease,
                    background .15s, color .15s;
    }
    .item:hover .schnellkauf > a,
    .schnellkauf > a:focus-visible { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
    .schnellkauf > a { width: 32px; height: 32px; }
}

/* Auf dem Handy als Blatt von unten */
@media (max-width: 639px) {
    .optionsfenster { align-items: flex-end; padding: 0; }
    .of-blatt {
        width: 100%;
        max-height: 88vh;
        border-width: 3px 0 0;
        border-radius: 10px 10px 0 0;
        transform: translateY(100%);
    }
    .optionsfenster.auf .of-blatt { transform: translateY(0); }
    .of-felder { padding: 14px 15px 6px; }
    .of-kopf, .of-blatt > header { padding-left: 15px; padding-right: 15px; }
    .of-fuss { padding: 13px 15px calc(16px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
    .of-blatt, .of-schatten { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Unterkategorien als Kacheln
   --------------------------------------------------------------------------
   Symbol, kurzer Name, Anzahl. Am Handy drei nebeneinander, sonst vier.
   Vorher standen sie als lange Knopfliste untereinander und schoben die
   Artikel weit nach unten.
   ══════════════════════════════════════════════════════════════════════════ */

.unterkat {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 6px 0 26px;
}
.unterkat a {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 7px;
    padding: 12px 6px 10px;
    background: #18181d;
    border: 2px solid #26262e;
    border-bottom-width: 4px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    transition: border-color .15s, background .15s, transform .15s;
}
.unterkat a:hover,
.unterkat a:focus-visible {
    border-color: #39fa93;
    background: #1c231f;
    transform: translateY(-2px);
}
.unterkat img { width: 44px; height: 44px; image-rendering: pixelated; }
.unterkat .uk-name {
    font-family: 'JOYSTIX', monospace; font-size: 9.5px; line-height: 1.45;
    color: #e4e4e2; letter-spacing: .5px;
    /* lange Namen brechen um statt die Kachel zu sprengen */
    overflow-wrap: anywhere;
}
.unterkat .uk-zahl {
    font-family: 'Open Sans', sans-serif; font-size: 11px; color: #7f7f89;
}

@media (max-width: 600px) {
    .unterkat { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .unterkat a { padding: 10px 4px 8px; }
    .unterkat img { width: 38px; height: 38px; }
    .unterkat .uk-name { font-size: 8.5px; }
}

/* Sofortsuche in der Kategorie: in der senkrechten Werkzeugleiste am Handy
   wurde flex-basis 240px zur HOEHE. Das Feld war 240px hoch, die Lupe
   sass mittig darin, weit unter dem Eingabefeld. */
@media (max-width: 680px) {
    .werkzeugleiste .katsuche { flex: 0 0 auto; }
}


/* ── Meldungen nach Weiterleitungen ───────────────────────────────────── */
.meldungen { padding-top: 16px; }
.meldung {
    margin: 0 0 10px; padding: 12px 16px; border-radius: 6px;
    font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 1.5;
    background: #1d2a22; border: 2px solid #2d5a3f; color: #cfeedd;
}
.meldung-fehler  { background: #2a1a1e; border-color: #6a2a36; color: #ffd6dc; }
.meldung-hinweis { background: #2a261a; border-color: #6a5a2a; color: #fff0c8; }

.schublade-link {
    display: block; text-align: center; margin-top: 10px;
    font-family: 'Open Sans', sans-serif; font-size: 12.5px; color: #8a8a94;
}

/* ══════════════════════════════════════════════════════════════════════════
   Kopf am Handy
   --------------------------------------------------------------------------
   Vorher stapelte sich am Handy alles: Logo, Sprache, Anmelden, Warenkorb,
   Suchfeld, zwei Zeilen Navigation. Rund 300px, die beim Scrollen kleben
   blieben und fast die halbe Seite verdeckten.

   Jetzt eine Leiste von 56px: Menue, Logo, Suche, Konto, Warenkorb. Die
   Navigation faehrt von links herein, das Suchfeld klappt bei Bedarf
   unter der Leiste auf. Ab 821px bleibt alles wie auf dem Desktop.
   ══════════════════════════════════════════════════════════════════════════ */

.menue-knopf, .such-knopf, .mobilmenue { display: none; }
.mobilmenue[hidden] { display: none !important; }

@media (max-width: 820px) {
    .kopf-zeile {
        flex-wrap: wrap;
        gap: 4px;
        padding-block: 6px;
        min-height: 56px;
    }
    .marke { margin-right: auto; }
    .marke img { height: 30px; }

    /* Menue-Knopf: drei Pixelbalken */
    .menue-knopf {
        display: grid; align-content: center; gap: 4px;
        width: 44px; height: 44px; padding: 0 11px;
        background: none; border: 0; cursor: pointer;
    }
    .menue-knopf span {
        display: block; height: 3px; background: #e4e4e2; border-radius: 1px;
    }
    .menue-knopf:active span { background: #39fa93; }

    .kopf-aktionen { gap: 2px; margin-left: 0; }

    .such-knopf {
        display: grid; place-items: center;
        width: 44px; height: 44px;
        background: none; border: 0; color: #e4e4e2; cursor: pointer;
    }
    .such-knopf[aria-expanded="true"] { color: #39fa93; }

    /* Konto und Warenkorb nur als Symbol, Fingergroesse 44px */
    .kopf-knopf {
        width: 44px; height: 44px; padding: 0;
        justify-content: center;
        background: none; border: 0;
    }
    .kopf-knopf .kk-text { display: none; }
    .kopf-knopf img { height: 22px; }
    .kopf-korb .zahl { top: 2px; right: 0; }

    .sprachwahl { display: none; }

    /* Suchfeld: zu, bis jemand auf die Lupe tippt */
    .suche {
        display: none;
        order: 10; flex: 0 0 100%; max-width: none;
        padding: 4px 0 8px;
    }
    .kopf.suche-offen .suche { display: block; }
    .suche input { font-size: 16px; padding-block: 11px; }   /* kein Zoom am iPhone */
    .suche button { right: 4px; }

    /* Die Leiste mit den Kategorien gibt es am Handy nur im Menue */
    .hauptnav { display: none; }

    /* Der schwebende Warenkorb unten rechts ist am Handy doppelt: der Korb
       steht oben in der Leiste, und unten verdeckte er Preise und Knoepfe. */
    .korb-schwebend { display: none; }

    /* ── Das Menue ─────────────────────────────────────────────────── */
    .mobilmenue { display: block; position: fixed; inset: 0; z-index: 130; }
    .mm-schatten {
        position: absolute; inset: 0; background: rgba(6,6,9,.7);
        opacity: 0; transition: opacity .2s ease;
    }
    .mm-blatt {
        position: absolute; top: 0; left: 0; bottom: 0;
        width: min(330px, 88vw);
        display: flex; flex-direction: column;
        background: #141418;
        border-right: 3px solid #2a2a33;
        box-shadow: 12px 0 40px rgba(0,0,0,.6);
        transform: translateX(-100%);
        transition: transform .22s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mobilmenue.auf .mm-schatten { opacity: 1; }
    .mobilmenue.auf .mm-blatt { transform: translateX(0); }

    .mm-kopf {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 14px; border-bottom: 2px solid #26262e;
    }
    .mm-kopf img { height: 28px; width: auto; }
    .mm-kopf .zu {
        width: 40px; height: 40px;
        background: none; border: 2px solid #2f2f38; border-radius: 4px;
        color: #a9a9b2; font-size: 22px; line-height: 1; cursor: pointer;
    }

    .mm-liste { list-style: none; margin: 0; padding: 8px 0; }
    .mm-liste > li { border-bottom: 1px solid #1f1f26; }
    .mm-punkt {
        display: flex; align-items: center; gap: 12px;
        padding: 15px 18px;
        font-family: 'JOYSTIX', monospace; font-size: 12px; letter-spacing: 1px;
        color: #e4e4e2; text-decoration: none;
        cursor: pointer; list-style: none;
    }
    .mm-punkt::-webkit-details-marker { display: none; }
    .mm-punkt img { height: 24px; width: auto; image-rendering: pixelated; flex: 0 0 auto; }
    summary.mm-punkt::after {
        content: "+"; margin-left: auto;
        font-size: 16px; color: #6b6b75; transition: transform .15s;
    }
    details[open] > summary.mm-punkt::after { content: "\2212"; color: #39fa93; }
    details[open] > summary.mm-punkt { color: #39fa93; }

    .mm-unter { padding: 0 0 10px; background: #111115; }
    .mm-unter a {
        display: flex; justify-content: space-between; gap: 12px;
        padding: 12px 18px 12px 54px;
        font-family: 'Open Sans', sans-serif; font-size: 15px;
        color: #cfcfd6; text-decoration: none;
    }
    .mm-unter a:first-child { color: #39fa93; }
    .mm-unter .zahl { color: #6b6b75; font-size: 13px; }
    .mm-unter a.aktiv { color: #fff; background: #1c231f; box-shadow: inset 3px 0 0 #39fa93; }

    .mm-fuss {
        margin-top: auto;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 16px 18px 22px;
        border-top: 2px solid #26262e;
    }
    .mm-konto {
        display: flex; align-items: center; gap: 10px;
        font-family: 'JOYSTIX', monospace; font-size: 11px; color: #e4e4e2; text-decoration: none;
    }
    .mm-konto img { height: 22px; image-rendering: pixelated; }
    .mm-sprache { display: flex; gap: 4px; }
    .mm-sprache a {
        padding: 8px 11px; border-radius: 4px;
        font-family: 'JOYSTIX', monospace; font-size: 10px; color: #6b6b72; text-decoration: none;
        border: 2px solid transparent;
    }
    .mm-sprache a.aktiv { color: #fff; border-color: #39fa93; }
}

@media (max-width: 380px) {
    .marke img { height: 26px; }
    .menue-knopf, .such-knopf, .kopf-knopf { width: 40px; }
}

/* ── Galerie: Bilderspur zum Wischen ───────────────────────────────────────
   Alle Bilder liegen nebeneinander, scroll-snap rastet auf jedem ein. Am
   Handy wischt man nativ (inklusive Schwung), mit der Maus schalten Pfeile
   und Vorschaubilder. Der Rahmen bleibt .galerie-gross. */

.galerie-gross { position: relative; display: block; }
.galerie-spur {
    display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    height: 100%; outline: none;
}
.galerie-spur::-webkit-scrollbar { display: none; }
.galerie-spur:focus-visible { box-shadow: 0 0 0 2px #39fa93; border-radius: 4px; }
.galerie-bild {
    flex: 0 0 100%; min-width: 0;
    display: flex; align-items: center; justify-content: center;
    scroll-snap-align: center; scroll-snap-stop: always;
}
.galerie-bild img {
    width: 100%; height: auto; max-height: 460px; object-fit: contain;
    -webkit-user-drag: none; user-select: none;
}

.galerie-pfeil {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    border: 2px solid #2a2a33; background: rgba(21, 21, 27, .82); color: #fff;
    font: 700 26px/1 'Open Sans', sans-serif; padding: 0 0 3px;
    cursor: pointer; opacity: 0; transition: opacity .15s, background .15s;
}
.galerie-pfeil.zurueck { left: 10px; }
.galerie-pfeil.weiter  { right: 10px; }
.galerie-gross:hover .galerie-pfeil, .galerie-pfeil:focus-visible { opacity: 1; }
.galerie-pfeil:hover { background: #39fa93; color: #15151b; border-color: #39fa93; }

.galerie-zaehler {
    position: absolute; right: 10px; bottom: 10px;
    background: rgba(21, 21, 27, .78); color: #fff; border-radius: 10px;
    padding: 3px 9px; font: 600 11px/1.4 'Open Sans', sans-serif;
    pointer-events: none;
}

/* Touch-Geraete: keine Pfeile, man wischt. Zaehler zeigt, dass es mehr gibt. */
@media (hover: none) {
    .galerie-pfeil { display: none; }
}
@media (max-width: 820px) {
    .galerie-gross { min-height: 0; padding: 8px 0; }
    .galerie-bild img { max-height: 70vw; }
    .galerie-klein { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .galerie-klein::-webkit-scrollbar { display: none; }
    .galerie-klein button { flex: 0 0 56px; width: 56px; height: 56px; }
}
/* Rasterspalten duerfen schmaler werden als ihr Inhalt, sonst drueckt die
   Bilderspur die Seite am Handy auf die Summe aller Bildbreiten. */
.artikel-raster > * { min-width: 0; }

/* ── Statische Seiten (Impressum, AGB, Widerruf, Versand) ────────────────
   Die Texte kommen aus Presta: Paragraphen als h2, sonst schlichte Absaetze. */
.seitentext { max-width: 76ch; padding-bottom: 40px; }
.seitentext h2 {
    font-size: 15px; line-height: 1.5; letter-spacing: 1px; color: #39fa93;
    margin: 32px 0 10px; text-transform: none;
}
.seitentext h2:first-child { margin-top: 6px; }
.seitentext p { margin: 0 0 14px; }
.seitentext strong { color: #fff; }
.seitentext a { color: #40abf5; word-break: break-word; }
.seitentext h3 { font-size: 15px; line-height: 1.5; font-weight: 700; color: #fff; margin: 22px 0 8px; text-transform: none; letter-spacing: 0; }
.seitentext ul { margin: 0 0 14px; padding-left: 20px; }
.seitentext li { margin: 0 0 8px; }
@media (max-width: 820px) {
    .seitentext h2 { font-size: 13px; margin-top: 26px; }
    .seitentext h3 { font-size: 14px; }
}

/* Menue am Handy: Kopf und Fuss (Anmelden, DE/EN) stehen fest, nur die
   Kategorien dazwischen scrollen. Sonst schieben aufgeklappte Kategorien
   die Sprachwahl aus dem Bild. */
@media (max-width: 820px) {
    .mm-blatt { overflow: hidden; }
    .mm-kopf, .mm-fuss { flex: 0 0 auto; }
    .mm-liste {
        flex: 1 1 auto; min-height: 0;
        overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    }
    .mm-fuss {
        margin-top: 0; background: #141418;
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -10px 18px rgba(0, 0, 0, .35);
    }
}

/* ── Widerrufsbutton (§ 356a BGB) ─────────────────────────────────────────
   Muss sich von den uebrigen Fusslinks deutlich abheben. */
.fuss a.widerrufslink { color: #fec837; font-weight: 700; }
.fuss a.widerrufslink:hover, .fuss a.widerrufslink:focus-visible { color: #fff; text-decoration: underline; }
.widerruf-umfang { border: 0; padding: 0; margin: 18px 0 6px; }
.widerruf-umfang legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.widerruf-knopf { width: 100%; }
.widerruf-ok { max-width: 640px; margin: 10px 0 40px; }
.widerruf-ok .knopf { margin-top: 14px; }
.widerrufen .kschritt > p:not(.kleinhinweis):not(.kasse-meldung) {
    font: 400 15px/1.6 'Open Sans', sans-serif; color: #d8d8e0; margin: 0 0 6px;
}
.widerrufen .kschritt > .kleinhinweis { margin-bottom: 18px; }
.widerruf-umfang legend { font-size: 12px; letter-spacing: 1px; }
.widerrufen .kasse-uebersicht .kleinhinweis { font-size: 13px; line-height: 1.6; }
.widerruf-ok p { margin: 0 0 8px; }
.widerruf-ok .kleinhinweis { display: block; margin-bottom: 16px; }
.widerruf-ok .knopf { display: inline-block; margin-top: 4px; }

/* ── Rabattcode ───────────────────────────────────────────────────────── */
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rabattfeld { margin: 12px 0 4px; font-family: 'Open Sans', sans-serif; font-size: 14px; }
.rabatt-offen summary { cursor: pointer; color: #40abf5; list-style: none; padding: 6px 0; }
.rabatt-offen summary::-webkit-details-marker { display: none; }
.rabatt-offen summary::before { content: "+ "; color: #39fa93; }
.rabatt-offen[open] summary::before { content: "\2212  "; }
.rabatt-form { display: flex; gap: 8px; margin-top: 6px; }
.rabatt-form input {
    flex: 1 1 auto; min-width: 0; font-size: 16px; text-transform: uppercase; letter-spacing: 1px;
    background: #0f0f13; color: #fff; border: 2px solid #2a2a33; border-radius: 4px; padding: 8px 10px;
}
.rabatt-form input:focus { border-color: #39fa93; outline: none; }
.rabatt-form .knopf { flex: 0 0 auto; }
.rabatt-aktiv {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    border: 2px dashed #39fa93; border-radius: 4px; padding: 8px 10px;
}
.rabatt-aktiv.ungueltig { border-color: #fec837; }
.rabatt-aktiv form { margin-left: auto; }
.rabatt-code { font-family: 'Courier New', monospace; font-weight: 700; color: #39fa93; letter-spacing: 1px; }
.rabatt-aktiv.ungueltig .rabatt-code { color: #fec837; }
.rabatt-grund { flex: 1 1 100%; order: 3; color: #b9b9c4; font-size: 13px; }
dt.rabatt, dd.rabatt, .zeile.rabatt span { color: #39fa93; }
.schublade .hinweis.warnung, [data-korb-fuss] .hinweis.warnung { color: #fec837; }
/* Einloesen-Knopf nicht auf volle Breite ziehen wie "Zur Kasse" */
.rabatt-form .knopf, .korb-summe .rabatt-form .knopf {
    width: auto; flex: 0 0 auto; margin: 0; padding: 10px 16px; font-size: 12px;
}
.rabatt-form input { width: auto; flex: 1 1 auto; min-width: 0; }
.rabattfeld { max-width: 100%; }

/* Fixes 22.09. (Handy-Screenshots von Sven)
   1. Ueberschrift "Was moechtest du widerrufen?" war schwarz: legend erbt
      die Textfarbe nicht aus legacy.css.
   2. Kasse: aufgeklapptes Rabattfeld machte die rechte Spalte breiter als
      den Bildschirm. Rasterspalten duerfen schmaler werden als ihr Inhalt,
      das Eingabefeld hat keine Mindestbreite mehr. */
.widerruf-umfang legend { color: #cfcfd4; }
.kasse-raster > * { min-width: 0; }
.rabatt-form { width: 100%; max-width: 100%; }
.rabatt-form input { width: 0; }

/* ── Kundenkonto ─────────────────────────────────────────────────────────
   Baut auf kasse.css auf (kschritt, kfeld, knopf). */
.konto .kschritt h2 { font-size: 13px; letter-spacing: 1px; margin: 0 0 14px; }
.konto-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.konto-raster > *, .konto-spalte > * { min-width: 0; }
.konto-spalte { display: grid; gap: 24px; }
.konto-schmal { max-width: 560px; }
.konto-text { font: 400 15px/1.6 'Open Sans', sans-serif; color: #d8d8e0; margin: 0 0 14px; font-style: normal; }
.konto-link { display: inline-block; margin-top: 12px; font-family: 'Open Sans', sans-serif; font-size: 14px; color: #40abf5; }
.konto-link a { color: #40abf5; }
.konto-abstand { margin-top: 28px !important; }
.konto-knopf { display: block; width: 100%; margin-top: 16px; text-align: center; text-decoration: none; box-sizing: border-box; }
.knopf-rand { background: transparent !important; color: #39fa93 !important; border: 2px solid #39fa93; box-shadow: none; }
.knopf-rand:hover { background: #39fa93 !important; color: #15151b !important; }
.konto-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 6px 0 14px; }
.konto-kopf h1 { font-size: 22px; margin: 0; overflow-wrap: anywhere; }
.konto-reiter {
    display: flex; gap: 6px; margin: 0 0 22px; overflow-x: auto; scrollbar-width: none;
    border-bottom: 2px solid #26262e;
}
.konto-reiter::-webkit-scrollbar { display: none; }
.konto-reiter a {
    flex: 0 0 auto; padding: 10px 14px; text-decoration: none; color: #b9b9c4;
    font-family: 'Open Sans', sans-serif; font-size: 14px; border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.konto-reiter a.aktiv { color: #fff; border-bottom-color: #39fa93; font-weight: 700; }
.konto-bestellungen { list-style: none; margin: 0; padding: 0; }
.konto-bestellungen li + li { border-top: 1px solid #26262e; }
.konto-bestellungen a {
    display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 2px;
    text-decoration: none; color: #d8d8e0; font-family: 'Open Sans', sans-serif; font-size: 14px;
}
.konto-bestellungen a:hover { background: #1c1c22; }
.kb-nr { font-family: 'Courier New', monospace; font-weight: 700; color: #fff; }
.kb-datum { color: #8a8a94; text-align: right; }
.kb-summe { text-align: right; color: #39fa93; font-weight: 700; }
.kb-stand {
    justify-self: start; align-self: center; font-size: 12px; padding: 2px 8px; border-radius: 10px;
    background: #26262e; color: #d8d8e0; font-family: 'Open Sans', sans-serif;
}
.kb-stand.stand-shipped, .kb-stand.stand-paid { background: #163726; color: #39fa93; }
.kb-stand.stand-awaitingTransfer, .kb-stand.stand-pending, .kb-stand.stand-review { background: #3a3114; color: #fec837; }
.kb-stand.stand-cancelled, .kb-stand.stand-refunded { background: #3a1624; color: #ff8095; }
.konto-bestellkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 6px; }
.konto-bestellkopf h2 { font-size: 16px; margin: 0; }
.konto-bestellkopf .mono, .konto .mono { font-family: 'Courier New', monospace; }
.konto .best-teil h2 + address { margin-bottom: 18px; }
.konto-adressen { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.konto-adresse { position: relative; }
.konto-adresse.standard { border-color: #39fa93; }
.konto-marke {
    display: inline-block; margin-bottom: 10px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    color: #39fa93; font-family: 'Open Sans', sans-serif; font-weight: 700;
}
.konto-aktionen { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-family: 'Open Sans', sans-serif; font-size: 14px; }
.konto-aktionen a { color: #40abf5; }
.konto-aktionen form { margin: 0; }
.textknopf.gefahr { color: #ff8095; }
.konto-neu {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 120px;
    text-decoration: none; color: #39fa93; border-style: dashed !important;
    font-family: 'Open Sans', sans-serif; font-size: 15px;
}
.konto-neu span { font-size: 26px; line-height: 1; }
@media (max-width: 820px) {
    .konto-raster { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .konto-kopf h1 { font-size: 17px; }
}
/* legacy.css macht ul in Abschnitten zu inline-block */
.konto-bestellungen { display: block; width: 100%; }
.konto-bestellungen li { display: block; }
.konto-bestellungen + .konto-link { display: inline-block; }
.konto .kleinhinweis a { color: #40abf5; }
.konto .kp-bild:empty, .konto .kp-bild:not(:has(img)) { background: #1c1c22; }
/* Konto-Reiter: auf dem Handy alle vier sichtbar statt abgeschnitten */
@media (max-width: 480px) {
    .konto-reiter { gap: 0; }
    .konto-reiter a { flex: 1 1 auto; text-align: center; padding: 10px 6px; font-size: 13px; }
}

/* ── Kontakt ──────────────────────────────────────────────────────────── */
.kontakt .kschritt > p:not(.kleinhinweis):not(.kasse-meldung),
.kontakt .kasse-rechts .kschritt p:not(.kleinhinweis) {
    font: 400 15px/1.6 'Open Sans', sans-serif; color: #d8d8e0; margin: 0 0 10px;
}
.kontakt .kschritt .seitentext { margin-bottom: 14px; }
.kontakt .kschritt > .kleinhinweis { margin: 10px 0 14px; }
.kontakt .kasse-rechts a { color: #40abf5; word-break: break-all; }
.kontakt .best-box { max-width: 640px; margin: 10px 0 40px; }
.kontakt .best-box .knopf { display: inline-block; margin-top: 10px; }
.kontakt textarea { width: 100%; min-height: 150px; font: inherit; font-size: 16px; }

/* Lieferzeit unter dem Preis (Pflichtangabe vor der Bestellung) */
.preisblock .lieferzeit { flex-basis: 100%; font-family: 'Open Sans', sans-serif; font-size: 12px; color: #a9a9b2; }
.preisblock .lieferzeit .leise { color: #6b6b72; }

/* Mit Google anmelden */
.google-knopf { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; box-sizing: border-box; margin: 12px 0 0; padding: 11px 16px; border: 1px solid #c8c8c8; border-radius: 4px; background: #fff; color: #1f1f1f; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 600; text-align: center; text-decoration: none; }
.google-knopf img { flex: none; width: 18px; height: 18px; }
.google-knopf:hover, .google-knopf:focus-visible { background: #f5f5f5; border-color: #9a9a9a; color: #1f1f1f; }
.google-oder { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #8a8a8a; }
.google-oder::before, .google-oder::after { content: ''; flex: 1; border-top: 1px solid #e2e2e2; }

/* ── Merkliste: Herz auf Kachel und Artikelseite ───────────────────────── */
.item { position: relative; }
.pixelherz { display: block; fill: currentColor; }
.merkform { margin: 0; }
.merkform.kachel { position: absolute; top: 8px; right: 8px; z-index: 5; }
.merkherz {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0; border: 2px solid #3a3a44; border-radius: 5px; cursor: pointer;
    background: rgba(18, 18, 22, .82); color: #6f6f7d; transition: color .15s, border-color .15s, transform .15s;
}
.merkherz.kachel { width: 34px; height: 34px; }
.merkherz:hover, .merkherz:focus-visible { color: #ff6b86; border-color: #ff6b86; }
.merkherz.an { color: #ff6b86; border-color: #ff6b86; }
.merkherz.klopft { animation: herzklopfen .35s ease; }
@keyframes herzklopfen { 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.merkherz.seite { height: 48px; padding: 0 14px; font-family: 'JOYSTIX', monospace; font-size: 10px; text-transform: uppercase; white-space: nowrap; }
.kaufzeile .merkherz.seite { flex: 0 0 auto; }
@media (max-width: 480px) {
    .merkherz.kachel { width: 30px; height: 30px; }
    .merkform.kachel { top: 6px; right: 6px; }
    .merkherz.seite span { display: none; }
    .merkherz.seite { width: 48px; padding: 0; }
}
.kopf-merk { position: relative; color: #ff6b86; padding: 8px 10px; }
.kopf-merk .zahl.leer { display: none; }
.merk-leer { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 16px; text-align: center; color: #9d9dab; }
.merk-leer .pixelherz { color: #ff6b86; }
.merk-leer p { max-width: 460px; margin: 0; }
.merk-hinweis { margin: 22px 0 40px; font-size: 13px; color: #8a8a96; text-align: center; }
.kopf-merk .zahl {
    position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
    display: grid; place-items: center; background: #ff6b86; color: #fff; border-radius: 999px;
    font-family: 'JOYSTIX', monospace; font-size: 8px;
}
@media (max-width: 600px) { .kopf-merk .zahl { top: 2px; right: 0; } }
@media (max-width: 440px) { .kopf-merk { display: none; } }
.mm-merk { display: flex; align-items: center; gap: 8px; color: #ff6b86; font-family: 'JOYSTIX', monospace; font-size: 11px; text-transform: uppercase; padding: 10px 0; }
.mm-merk span { color: #fff; background: #ff6b86; border-radius: 999px; padding: 1px 7px; font-size: 9px; }
.mm-merk span.leer { display: none; }
.mm-fuss { flex-wrap: wrap; }
.mm-merk { flex-basis: 100%; order: -1; padding: 0 0 4px; }

/* Lieferzeit je Zone in der Versandtabelle der Artikelseite */
.versandtabelle td.lz { padding-left: 14px; text-align: right; white-space: nowrap; color: #8a8a94; font-size: .9em; }
@media (max-width: 420px) { .versandtabelle td.lz { font-size: .8em; padding-left: 8px; } }

/* Titel mit Herzen: eine Zeile, kopf.js passt die Groesse an */
.einzeilig.passend { white-space: nowrap; }

/* Hinweis in der Schublade, z. B. Menge auf den Bestand gekuerzt */
.schublade-hinweis { margin: 12px 18px 4px; padding: 10px 12px; border: 1px solid #e8b04a; border-radius: 8px; background: rgba(232,176,74,.12); color: #f3d9a4; font-size: 14px; }

/* Pixel-Sterne (partials/sterne.php) */
.pxsterne { position: relative; display: inline-block; vertical-align: middle; line-height: 0; white-space: nowrap; }
.pxsterne-leer, .pxsterne-voll { display: inline-flex; gap: 2px; }
.pxsterne-voll { position: absolute; left: 0; top: 0; overflow: hidden; }
.pxstern { flex: none; width: var(--pxs, 18px); height: var(--pxs, 18px); }
.pxstern.pxs-leer { fill: #4a4a54; }
.pxstern.pxs-voll { fill: #fec837; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.45)); }

/* Bewertungen auf der Artikelseite */
.bw-kurz { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: #c4c4cc; font-family: 'Open Sans', sans-serif; font-size: 13px; text-decoration: none; }
.bw-kurz:hover span { color: #fff; text-decoration: underline; }
.bewertungen { margin: 10px 0 30px; }
.bewertungen h2 .bw-anzahl { color: #7c7c86; }
.bw-uebersicht { display: grid; grid-template-columns: auto minmax(0, 320px); gap: 16px 36px; align-items: center; margin: 14px 0 22px; }
.bw-schnitt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.bw-schnitt strong { font-family: 'JOYSTIX', monospace; font-size: 34px; color: #fff; line-height: 1; }
.bw-schnitt > span:last-child { font-family: 'Open Sans', sans-serif; font-size: 13px; color: #a9a9b2; }
.bw-verteilung { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.bw-verteilung li { display: grid; grid-template-columns: 14px minmax(0, 1fr) 28px; gap: 8px; align-items: center; font-family: 'JOYSTIX', monospace; font-size: 10px; color: #a9a9b2; }
.bw-balken { height: 8px; background: #26262c; border-radius: 1px; overflow: hidden; }
.bw-balken span { display: block; height: 100%; background: #fec837; }
.bw-n { text-align: right; }
.bw-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bw-eintrag { padding: 14px 16px; background: #1b1b20; border: 2px solid #2c2c33; border-radius: 4px; }
.bw-eintragkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 8px; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #a9a9b2; }
.bw-wer { color: #fff; font-weight: 700; }
.bw-kauf { color: #39fa93; font-size: 12px; }
.bw-kauf::before { content: "\2713  "; }
.bw-text { margin: 0 0 8px; font-family: 'Open Sans', sans-serif; font-size: 14.5px; line-height: 1.55; color: #e4e4e8; overflow-wrap: anywhere; }
.bw-foto { display: inline-block; margin-top: 2px; }
.bw-foto img { display: block; width: 120px; height: auto; border-radius: 3px; border: 2px solid #2c2c33; }
.bw-antwort { margin-top: 10px; padding: 10px 12px; border-left: 3px solid #39fa93; background: #15151a; font-family: 'Open Sans', sans-serif; font-size: 13.5px; color: #c4c4cc; }
.bw-antwort strong { color: #39fa93; }
.bw-leer { font-family: 'Open Sans', sans-serif; color: #a9a9b2; }
.bw-pruefung { margin: 14px 0 0; font-family: 'Open Sans', sans-serif; font-size: 12px; color: #7c7c86; }
@media (max-width: 600px) { .bw-uebersicht { grid-template-columns: 1fr; } }

/* Bewerten (Bogen) */
.bewerten .bw-kopf p { font-family: 'Open Sans', sans-serif; color: #c4c4cc; max-width: 720px; }
.bw-bogen { max-width: 720px; }
.bw-artikel.fehler { border-color: #ff5a6e; }
.bw-artikelkopf { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.bw-artikelkopf img { width: 84px; height: 84px; object-fit: contain; background: #111; border-radius: 3px; flex: none; }
.bw-artikelkopf .bw-name { font-size: 12px; line-height: 1.5; margin: 0 0 6px; }
.bw-stand { display: inline-block; font-family: 'Open Sans', sans-serif; font-size: 12px; padding: 2px 8px; border-radius: 10px; background: #2c2c33; color: #c4c4cc; }
.bw-stand.bw-frei { background: #14331f; color: #39fa93; }
.bw-stand.bw-neu { background: #3a3014; color: #fec837; }
.sternwahl { border: 0; padding: 0; margin: 0 0 14px; }
.sternwahl legend { font-family: 'Open Sans', sans-serif; font-size: 13px; color: #a9a9b2; margin-bottom: 6px; padding: 0; }
.sternwahl-reihe { display: inline-flex; flex-direction: row-reverse; gap: 4px; vertical-align: middle; }
.sternwahl-reihe input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sternwahl-reihe label { cursor: pointer; line-height: 0; padding: 2px; border-radius: 3px; }
.sternwahl-reihe svg { fill: #3a3a44; transition: transform .1s; }
.sternwahl-reihe input:checked ~ label svg,
.sternwahl-reihe label:hover svg, .sternwahl-reihe label:hover ~ label svg { fill: #fec837; }
.sternwahl-reihe:hover input:checked ~ label svg { fill: #3a3a44; }
.sternwahl-reihe:hover label:hover svg, .sternwahl-reihe:hover label:hover ~ label svg { fill: #fec837; }
.sternwahl-reihe label:hover svg { transform: scale(1.12); }
.sternwahl-reihe input:focus-visible + label { outline: 2px solid #39fa93; }
.sternwahl-text { display: inline-block; margin-left: 10px; font-family: 'JOYSTIX', monospace; font-size: 11px; color: #fec837; vertical-align: middle; }
.bw-zaehler { text-align: right; margin-top: 2px; }
.bw-fotoalt { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.bw-fotoalt img { border-radius: 3px; }
.bw-foto input[type=file] { color: #c4c4cc; font-family: 'Open Sans', sans-serif; font-size: 13px; max-width: 100%; }
.bw-codefeld { font-family: ui-monospace, Consolas, monospace !important; font-size: 20px !important; letter-spacing: 3px; text-transform: uppercase; }
.bw-einladung { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 12px 0 18px; }
.bw-einladung p { margin: 0; flex: 1 1 260px; }
.bw-einladung .knopf { flex: 0 0 auto; }