/* ══════════════════════════════════════════════════════════════
   WRAP REBELLEN — Shop
   Baut auf den Variablen aus main.css auf. Wird nur auf Shop-,
   Produkt-, Warenkorb- und Kassenseiten geladen.
   ══════════════════════════════════════════════════════════════ */

.sec-shop{padding-top:clamp(96px,7vw,116px);padding-bottom:clamp(48px,6vw,90px)}
.wrap-shop{max-width:1780px}
.woo-page{padding-block:0}

/* ── Brotkrumen ─────────────────────────────────────────── */
.bc{font-family:var(--ft);font-size:.76rem;letter-spacing:.06em;color:#6d6c69;
  margin:0 0 14px;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.bc a{color:#6d6c69;text-decoration:none;border-bottom:1px solid transparent}
.bc a:hover{color:var(--gold-ink);border-bottom-color:currentColor}
.bc-sep{opacity:.45}
.bc-prod{margin-bottom:18px}

/* ── Kopf der Kategorie ─────────────────────────────────── */
.shop-kopf{margin:0 0 30px;max-width:78ch}
.shop-kopf .xl{margin:0 0 10px}
.shop-anz{font-family:var(--ft);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 14px}
.shop-intro{color:#4a4a4f;font-size:1.02rem;line-height:1.72}
.shop-intro p{margin:0 0 12px}
.shop-intro p:last-child{margin-bottom:0}

.kat-kacheln{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.kat-kacheln a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--ft);font-weight:600;font-size:.85rem;color:var(--ink);
  padding:10px 15px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);transition:.22s var(--ease)}
.kat-kacheln a:hover{border-color:var(--gold);transform:translateY(-2px)}
.kat-kacheln i{font-style:normal;font-size:.7rem;color:#8f8e89;
  background:var(--paper-2);padding:2px 7px;border-radius:99px}

/* ── Sortierleiste ──────────────────────────────────────── */
.shop-leiste{display:flex;align-items:center;justify-content:flex-end;gap:14px;
  padding:0 0 16px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.woocommerce-ordering select{font-family:var(--ft);font-size:.85rem;padding:9px 34px 9px 13px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink);
  appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0e10' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:14px}
.woocommerce-ordering select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ── Produktraster ──────────────────────────────────────── */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.2vw,16px);margin:0;padding:0;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{margin:0;width:auto;float:none;padding:0}

/* Paginierung */
.woocommerce-pagination{margin-top:38px}
.woocommerce-pagination ul{display:flex;gap:7px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.woocommerce-pagination a,.woocommerce-pagination span{display:grid;place-items:center;
  min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--ft);font-weight:600;font-size:.88rem;text-decoration:none;color:var(--ink)}
.woocommerce-pagination a:hover{border-color:var(--gold);color:var(--gold-ink)}
.woocommerce-pagination .current{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── Produktseite ───────────────────────────────────────── */
.single-product div.product{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:start}
.single-product .woocommerce-product-gallery{grid-column:1;align-self:start}
.single-product .summary{grid-column:2;margin:0}
.single-product .woocommerce-tabs,
.single-product .related,
.single-product .up-sells{grid-column:1/-1;margin-top:clamp(40px,6vw,80px)}

.woocommerce-product-gallery__wrapper{margin:0}
.woocommerce-product-gallery img{border-radius:var(--r)}
/* Vorschaubilder: zwei nebeneinander, der Rest liegt im Slider.
   Acht Miniaturen als Raster darunter waren schlicht zu viel – man sieht
   dann das Produkt nicht mehr, sondern eine Kontaktbogenwand. */
.wr-thumbs{position:relative;margin-top:12px}
.flex-control-thumbs{display:flex;gap:10px;margin:0;padding:0;list-style:none;
  overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  scrollbar-width:none}
.flex-control-thumbs::-webkit-scrollbar{display:none}
.flex-control-thumbs li{margin:0;flex:0 0 calc(50% - 5px);scroll-snap-align:start}
.flex-control-thumbs img{display:block;width:100%;border-radius:var(--r);
  cursor:pointer;opacity:.62;transition:opacity .2s,outline-color .2s}
.flex-control-thumbs img.flex-active,.flex-control-thumbs img:hover{opacity:1;
  outline:2px solid var(--gold);outline-offset:1px}

.summary .product_title{font-family:var(--fd);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:.98;letter-spacing:-.03em;margin:0 0 14px}
.summary .price{font-family:var(--fd);font-weight:800;font-size:1.9rem;color:var(--ink);
  display:block;margin:0 0 6px;line-height:1.1}
.summary .price del{opacity:.42;font-size:1.15rem;margin-right:9px;font-weight:600}
.summary .price ins{text-decoration:none;color:#c8102e}
.summary .woocommerce-product-details__short-description{color:#4a4a4f;font-size:1.03rem;
  line-height:1.7;margin:14px 0 20px}
.wc-gzd-additional-info,.wc-gzd-additional-info-loop{font-size:.79rem;color:#75757a;margin:2px 0}

/* Variantenauswahl */
.variations{width:100%;border:0;margin:0 0 16px}
.variations tr{display:block;margin-bottom:13px}
.variations th,.variations td{display:block;padding:0;text-align:left;border:0}
.variations th label{font-family:var(--ft);font-weight:600;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:#6d6c69;margin-bottom:6px;display:block}
.variations select{width:100%;min-height:52px;padding:13px 40px 13px 15px;font-size:1rem;
  font-family:var(--fb);border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0e10' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.variations select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.reset_variations{font-family:var(--ft);font-size:.78rem;color:#8f8e89}
.woocommerce-variation-price{margin-bottom:12px}
.woocommerce-variation-price .price{font-size:1.6rem}

/* Menge und Kaufen */
form.cart{display:flex;flex-wrap:wrap;gap:11px;align-items:stretch;margin:0 0 4px}
form.cart .quantity{display:flex}
form.cart .qty{width:82px;min-height:58px;text-align:center;font-size:1.05rem;font-weight:600;
  border:1px solid var(--line);border-radius:var(--r);font-family:var(--fb)}
form.cart .single_add_to_cart_button{flex:1;min-width:200px;min-height:56px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  border:0;border-radius:6px;font-family:var(--ft);font-weight:700;font-size:.98rem;
  letter-spacing:.02em;color:#fff;background:var(--ink);transition:.22s var(--ease)}
form.cart .single_add_to_cart_button:hover{background:#2a2a32;transform:translateY(-1px)}
form.cart .single_add_to_cart_button:disabled{opacity:.45;cursor:not-allowed;transform:none}
form.cart .single_add_to_cart_button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* Vertrauenszeile */
/* Eine Zeile, kein Kasten: Lieferzeit und Versandkosten sind Pflicht,
   aber sie sollen den Gratis-Sticker-Banner darunter nicht erschlagen. */
.pv{margin:16px 0 0;padding:13px 0 0;border-top:1px solid var(--line);
  font-family:var(--ft);font-size:.85rem;color:#6d6c69;line-height:1.5;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:7px}
.pv .pv-zeit{color:var(--ink);font-weight:600}
.pv .pv-tr{color:#c9c7c1}
.pv a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.pv a:hover{color:var(--ink)}

/* Größentabelle */
.groessen{margin-top:16px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.groessen summary{cursor:pointer;list-style:none;padding:13px 16px;display:flex;align-items:center;gap:10px;
  font-family:var(--ft);font-weight:600;font-size:.86rem;background:var(--paper-2)}
.groessen summary::-webkit-details-marker{display:none}
.groessen summary svg{width:18px;height:18px;color:var(--gold-ink)}
.groessen summary::after{content:"+";margin-left:auto;font-size:1.15rem;line-height:1;color:#8f8e89}
.groessen[open] summary::after{content:"–"}
.groessen-i{padding:16px}
.groessen table{width:100%;border-collapse:collapse;font-size:.9rem}
.groessen th,.groessen td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line)}
.groessen th{font-family:var(--ft);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#6d6c69}
.groessen tbody tr:last-child td{border-bottom:0}
.groessen .mut{font-size:.82rem;color:#75757a;margin:12px 0 0;line-height:1.6}

/* Reiter */
.woocommerce-tabs ul.tabs{list-style:none;display:flex;gap:4px;margin:0 0 24px;padding:0 0 1px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.woocommerce-tabs ul.tabs li{margin:0}
.woocommerce-tabs ul.tabs a{display:block;padding:13px 20px;text-decoration:none;
  font-family:var(--fd);font-weight:800;font-size:.92rem;text-transform:uppercase;
  letter-spacing:.03em;color:#75757a;border-bottom:2px solid transparent;margin-bottom:-1px}
.woocommerce-tabs ul.tabs li.active a{color:var(--ink);border-bottom-color:var(--gold)}
.woocommerce-Tabs-panel{max-width:76ch;font-size:1.02rem;line-height:1.75;color:#3a3a3f}
.woocommerce-Tabs-panel h2{font-family:var(--fd);font-weight:800;text-transform:uppercase;
  font-size:1.4rem;margin:26px 0 12px}
.woocommerce-Tabs-panel h2:first-child{margin-top:0}
.woocommerce-Tabs-panel h3{font-family:var(--fd);font-weight:800;font-size:1.1rem;margin:22px 0 8px}
.woocommerce-Tabs-panel ul{padding-left:20px}

.related>h2,.up-sells>h2,.cross-sells>h2{font-family:var(--fd);font-weight:900;
  text-transform:uppercase;font-size:clamp(1.3rem,2.4vw,2rem);letter-spacing:-.02em;margin:0 0 22px}

/* Mitlaufender Kaufen-Button */
.kauf-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  align-items:center;gap:13px;padding:11px 14px;background:rgba(14,14,16,.97);
  backdrop-filter:blur(9px);border-top:1px solid rgba(255,255,255,.1)}
.kauf-bar-p{color:#fff;font-family:var(--fd);font-weight:800;font-size:1.1rem;white-space:nowrap}
.kauf-bar-p del{opacity:.5;font-size:.85rem}
.kauf-bar-p ins{text-decoration:none}
.kauf-bar .btn{flex:1;min-height:50px}

/* ── Warenkorb ──────────────────────────────────────────── */
.vk-frei{display:flex;align-items:center;flex-wrap:wrap;gap:11px;padding:15px 18px;margin:0 0 24px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);
  font-family:var(--ft);font-weight:600;font-size:.92rem}
.vk-frei svg{width:21px;height:21px;color:var(--gold-ink);flex:0 0 21px}
.vk-frei.erreicht{background:#eef7f0;border-color:#cfe6d6}
.vk-frei.erreicht svg{color:#2f6b4f}
.vk-balken{flex:1 0 100%;height:6px;background:var(--paper-3);border-radius:99px;overflow:hidden}
.vk-balken i{display:block;height:100%;background:var(--ink);transition:width .4s var(--ease)}

.woocommerce table.shop_table{width:100%;border-collapse:collapse;border:0}
.woocommerce table.shop_table th{font-family:var(--ft);font-size:.74rem;letter-spacing:.11em;
  text-transform:uppercase;color:#6d6c69;text-align:left;padding:0 12px 12px;border-bottom:1px solid var(--line)}
.woocommerce table.shop_table td{padding:16px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.woocommerce table.shop_table img{width:72px;height:72px;object-fit:cover;border-radius:var(--r)}
.product-name a{color:var(--ink);text-decoration:none;font-weight:600}
.product-name a:hover{color:var(--gold-ink)}
.woocommerce .quantity input.qty{width:74px;min-height:46px;text-align:center;
  border:1px solid var(--line);border-radius:var(--r)}
.woocommerce a.remove{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  color:#c8102e;text-decoration:none;font-size:1.1rem;line-height:1}
.woocommerce a.remove:hover{background:#c8102e;color:#fff}

.cart_totals h2,.cross-sells h2{font-family:var(--fd);font-weight:900;text-transform:uppercase;
  font-size:1.35rem;margin:0 0 16px}
.cart_totals{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.cart_totals .order-total .amount{font-family:var(--fd);font-weight:900;font-size:1.5rem}
.wc-proceed-to-checkout{margin-top:18px}
.wc-proceed-to-checkout .checkout-button{display:flex;align-items:center;justify-content:center;
  min-height:60px;border-radius:var(--r);font-family:var(--fd);font-weight:900;font-size:1.05rem;
  letter-spacing:.02em;text-decoration:none;color:#fff;background:var(--ink);
  transition:.22s var(--ease)}
.wc-proceed-to-checkout .checkout-button:hover{background:#2a2a32;transform:translateY(-1px)}

/* ── Kasse ──────────────────────────────────────────────── */
.woocommerce-checkout h3{font-family:var(--fd);font-weight:900;text-transform:uppercase;
  font-size:1.25rem;margin:0 0 18px}
.woocommerce form .form-row{display:flex;flex-direction:column;margin:0 0 15px;padding:0}
.woocommerce form .form-row label{font-family:var(--ft);font-weight:600;font-size:.78rem;
  letter-spacing:.09em;text-transform:uppercase;color:#6d6c69;margin-bottom:6px}
.woocommerce form .form-row .required{color:#c8102e;text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single{width:100%;min-height:52px;padding:13px 15px;
  font-size:1rem;font-family:var(--fb);border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--ink)}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus{outline:3px solid var(--gold);outline-offset:1px;
  border-color:var(--gold)}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:26px;padding:0}
.select2-container--default .select2-selection--single .select2-selection__arrow{top:13px;right:10px}

#order_review{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.woocommerce-checkout #payment{background:transparent;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{list-style:none;margin:0 0 18px;padding:0;border:0}
.woocommerce-checkout #payment ul.payment_methods li{padding:14px 16px;margin:0 0 9px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked){border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold)}
.woocommerce-checkout #payment div.payment_box{background:var(--paper-2);border-radius:var(--r);
  padding:13px 15px;margin-top:11px;font-size:.9rem;color:#4a4a4f}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce-checkout #payment .place-order{padding:0;margin-top:16px}
#place_order{width:100%;min-height:60px;border:0;border-radius:6px;cursor:pointer;
  font-family:var(--ft);font-weight:700;font-size:1.02rem;letter-spacing:.02em;
  color:#fff;background:var(--ink);transition:.22s var(--ease)}
#place_order:hover{background:#2a2a32;transform:translateY(-1px)}

/* Germanized: Pflichtangaben lesbar halten */
.wc-gzd-checkbox-placeholder,.woocommerce-terms-and-conditions-wrapper{font-size:.88rem;line-height:1.6}
.legal-terms-checkbox-text a{color:var(--gold-ink)}

/* ── Meldungen ──────────────────────────────────────────── */
.woocommerce-message,.woocommerce-info,.woocommerce-error{display:flex;align-items:center;
  flex-wrap:wrap;gap:12px;padding:15px 18px;margin:0 0 22px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--paper-2);list-style:none;font-size:.95rem}
.woocommerce-message{border-color:#cfe6d6;background:#eef7f0}
.woocommerce-error{border-color:#f0cdd2;background:#fdf1f3;color:#8a1425}
.woocommerce-message .button,.woocommerce-info .button{margin-left:auto;
  font-family:var(--ft);font-weight:600;font-size:.84rem;padding:9px 16px;text-decoration:none;
  border:1px solid var(--ink);border-radius:var(--r);color:var(--ink)}
.woocommerce-message .button:hover{background:var(--ink);color:#fff}

/* ── Schmale Bildschirme ────────────────────────────────── */
@media (max-width:860px){
  .single-product div.product{grid-template-columns:1fr}
  .single-product .woocommerce-product-gallery{position:static;grid-column:1}
  .single-product .summary{grid-column:1}
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr)}
  .kauf-bar{display:flex}
  /* Das hidden-Attribut verliert gegen eine Klasse mit display – genau
     deshalb stand die Kaufleiste auch auf der Platzhalterseite, obwohl das
     Skript sie längst versteckt hatte. */
  .kauf-bar[hidden]{display:none}
  body.single-product{padding-bottom:76px}
  .flex-control-thumbs li{flex:0 0 calc(50% - 5px)}
}
@media (max-width:520px){
  .shop-leiste{justify-content:stretch}
  .woocommerce-ordering,.woocommerce-ordering select{width:100%}
  form.cart .single_add_to_cart_button{min-width:0}
  .woocommerce table.shop_table img{width:56px;height:56px}
}

/* ══════════════════════════════════════════════════════════════
   Korrekturen aus der ersten Sichtung
   ══════════════════════════════════════════════════════════════ */

/* ── Hochformat statt Quadrat ───────────────────────────── */
/* Die Produktfotos liegen im Verhältnis 2:3 vor. Ein quadratischer
   Zuschnitt schneidet Köpfe und Schuhe ab. */
.prod-img{aspect-ratio:2/3!important}
.woocommerce-product-gallery__image img{aspect-ratio:2/3;object-fit:cover;width:100%}

/* ── Gold raus ──────────────────────────────────────────── */
/* Im Shop zählt Ruhe: Die Buttons stehen neben PayPal und Google Pay,
   und ein Goldverlauf daneben wirkt wie ein Fremdkörper. Gold bleibt
   der Landingpage vorbehalten. */
.shop-anz{color:#6d6c69}
.bc a:hover{color:var(--ink)}
.kat-kacheln a:hover{border-color:var(--ink)}
.flex-control-thumbs img.flex-active,.flex-control-thumbs img:hover{outline-color:var(--ink)}
.woocommerce-pagination a:hover{border-color:var(--ink);color:var(--ink)}
.woocommerce-tabs ul.tabs li.active a{border-bottom-color:var(--ink)}
.groessen summary svg{color:var(--ink)}
.vk-frei svg{color:var(--ink)}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked){
  border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.variations select:focus-visible,.woocommerce-ordering select:focus-visible,
form.cart .single_add_to_cart_button:focus-visible{outline-color:var(--ink)}
.kauf-bar .btn{background:#fff;background-image:none;color:var(--ink);
  font-family:var(--ft);font-weight:700;font-size:.95rem;text-transform:none;letter-spacing:.02em}
.kauf-bar .btn:hover{background:#eee}

/* ── Sternebewertung ────────────────────────────────────── */
/* WooCommerce liefert die Sterne über sein eigenes Stylesheet, das wir
   abgeschaltet haben. Ohne Ersatz stehen dort nur Textlinks. */
.star-rating{position:relative;display:inline-block;width:5.6em;height:1.25em;
  overflow:hidden;font-size:1rem;line-height:1.25;letter-spacing:.08em;font-family:var(--fb)}
.star-rating::before{content:"★★★★★";position:absolute;inset:0;color:#d6d3cb}
.star-rating span{position:absolute;inset:0;overflow:hidden;text-indent:-999em;padding-top:1.5em}
.star-rating span::before{content:"★★★★★";position:absolute;left:0;top:0;
  text-indent:0;color:#e0a92e}
.woocommerce-product-rating{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.woocommerce-review-link{font-size:.85rem;color:#6d6c69;text-decoration:none}
.woocommerce-review-link:hover{color:var(--ink);text-decoration:underline}

/* Sterne im Bewertungsformular: klickbar statt als Linkliste */
/* WooCommerce packt die fünf Sterne in ein zusätzliches <span>. Ohne Regel
   dafür bleibt nur das span ein Flex-Element – die Sterne darin standen
   deshalb untereinander. */
#respond p.stars{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 14px}
#respond p.stars > span{display:flex;align-items:center;gap:4px}
#respond p.stars a{display:inline-block}
#respond p.stars a{position:relative;width:1.6em;height:1.6em;text-indent:-999em;
  display:block;text-decoration:none;box-shadow:none}
#respond p.stars a::before{content:"★";position:absolute;inset:0;text-indent:0;
  font-size:1.6em;line-height:1;color:#d6d3cb;transition:color .15s}
#respond p.stars a:hover::before,
#respond p.stars:hover a:hover ~ a::before{color:#d6d3cb}
#respond p.stars a:hover::before{color:#e0a92e}
#respond p.stars:has(a:hover) a::before{color:#e0a92e}
#respond p.stars:has(a:hover) a:hover ~ a::before{color:#d6d3cb}
#respond p.stars.selected a.active::before,
#respond p.stars.selected a:not(.active)::before{color:#e0a92e}
#respond p.stars.selected a.active ~ a::before{color:#d6d3cb}
.comment-form-rating label{font-family:var(--ft);font-weight:600;font-size:.78rem;
  letter-spacing:.09em;text-transform:uppercase;color:#6d6c69;display:block;margin-bottom:8px}

.commentlist{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:18px}
.commentlist .comment_container{display:flex;gap:14px;padding:18px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2)}
.commentlist img.avatar{width:44px;height:44px;border-radius:50%;flex:0 0 44px}
.comment-text p.meta{font-size:.82rem;color:#75757a;margin:0 0 6px}
#review_form_wrapper{max-width:62ch}
#respond textarea{min-height:130px;width:100%;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--r);font-family:var(--fb);font-size:1rem}
#respond .submit{min-height:52px;padding:0 28px;border:0;border-radius:6px;cursor:pointer;
  background:var(--ink);color:#fff;font-family:var(--ft);font-weight:700;font-size:.95rem}
#respond .submit:hover{background:#2a2a32}

/* ── Weniger Bezahl-Buttons auf der Produktseite ────────── */
/* Warenkorb und PayPal reichen. Jeder weitere Express-Button ist eine
   zusätzliche Entscheidung an der Stelle, an der der Kunde eigentlich
   nur „kaufen" denken soll. Dauerhaft gehören die Übrigen in den
   Einstellungen der jeweiligen Zahlungsart abgeschaltet. */
.single-product #wc-stripe-express-checkout-element,
.single-product .wcpay-express-checkout-wrapper,
.single-product #wcpay-express-checkout-element,
.single-product .wc-block-components-express-payment,
.single-product .amazon-pay-button-container,
.single-product #pay_with_amazon,
.single-product .wc-apa-button-separator{display:none!important}
.single-product .ppc-button-wrapper{margin-top:10px}
.single-product .ppcp-messages,.single-product .ppcp-messages-container{margin:8px 0 0}

/* ── Reiter und Abstände ────────────────────────────────── */
.single-product .woocommerce-tabs{clear:both}
.woocommerce-Tabs-panel>h2:first-child{position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.product_meta{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.84rem;color:#75757a;display:grid;gap:5px}
.product_meta>span{display:block}
.product_meta a{color:#4a4a4f}

/* ── Shop-Werkzeuge im Header ───────────────────────────── */
/* Im Shop ersetzt diese Gruppe den Angebots-Button. */
.nav-shoptools{display:flex;align-items:center;gap:8px}
.shopsuche{position:relative;display:flex;align-items:center}
.shopsuche svg{position:absolute;left:11px;width:16px;height:16px;color:#8f8e89;pointer-events:none}
.shopsuche input[type=search]{width:210px;min-height:40px;padding:9px 12px 9px 34px;
  border:1px solid var(--line);border-radius:6px;background:var(--paper);
  color:var(--ink);font-family:var(--fb);font-size:.88rem}
.shopsuche input::placeholder{color:#9a9994}
.shopsuche input:focus{outline:2px solid var(--ink);outline-offset:1px}

.nav-konto,.nav-shoptools .cart-link{display:inline-flex;align-items:center;gap:7px;
  text-decoration:none;color:var(--ink);font-family:var(--ft);font-weight:600;font-size:.84rem;
  padding:9px 12px;border-radius:6px;transition:.18s;white-space:nowrap}
.nav-konto:hover,.nav-shoptools .cart-link:hover{background:var(--paper-2)}
.nav-konto svg,.nav-shoptools .cart-link svg{width:19px;height:19px}
.nav-shoptools .cart-link{background:var(--ink);color:#fff}
.nav-shoptools .cart-link:hover{background:#2a2a32}
.nav-shoptools .cart-link i{font-style:normal;min-width:19px;height:19px;display:grid;
  place-items:center;background:#fff;color:var(--ink);border-radius:99px;
  font-size:.68rem;font-weight:700;padding:0 5px}

/* Startseiten-Link im Shop-Menü */
.nav-home{display:inline-flex;align-items:center;gap:7px}
.nav-home svg{width:17px;height:17px}
body.im-shop .nav-l>a[aria-current]{color:var(--ink)}
body.im-shop .nav-l>a[aria-current]::after{transform:scaleX(1)}

@media (max-width:1200px){
  .shopsuche input[type=search]{width:150px}
  .nav-konto span{display:none}
}
@media (max-width:980px){
  .nav-shoptools{width:100%;justify-content:space-between;margin-top:14px}
  .shopsuche{flex:1}
  .shopsuche input[type=search]{width:100%}
  .nav-konto span{display:inline}
}

.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}

/* ── Infobausteine ──────────────────────────────────────── */
.infoblocks{display:grid;gap:9px;max-width:76ch}
.infoblock{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.infoblock summary{cursor:pointer;list-style:none;padding:14px 17px;
  font-family:var(--ft);font-weight:600;font-size:.92rem;background:var(--paper-2);
  display:flex;align-items:center;gap:10px}
.infoblock summary::-webkit-details-marker{display:none}
.infoblock summary::after{content:"+";margin-left:auto;font-size:1.2rem;line-height:1;color:#8f8e89}
.infoblock[open] summary::after{content:"–"}
.infoblock-i{padding:18px}
.infoblock-i>*:first-child{margin-top:0}
.infoblock-i>*:last-child{margin-bottom:0}
.infoblock table{width:100%;border-collapse:collapse;font-size:.92rem;margin:12px 0}
.infoblock th,.infoblock td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--line)}
.infoblock th{font-family:var(--ft);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:#6d6c69}
.infoblock td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}
.infoblock h1,.infoblock h2{font-family:var(--fd);font-weight:800;text-transform:uppercase;
  font-size:1.2rem;margin:20px 0 10px}
.infoblock h3{font-family:var(--fd);font-weight:800;font-size:1.02rem;margin:18px 0 8px}
.infoblock ul,.infoblock ol{padding-left:20px}
.infoblock li{margin-bottom:6px}

/* ── Themen-Filter ──────────────────────────────────────── */
.themenfilter{display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px 14px;
  padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.tf-label{font-family:var(--ft);font-weight:600;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:#6d6c69;padding-top:9px}
.tf-liste{display:flex;flex-wrap:wrap;gap:7px;flex:1;min-width:0}
.tf-chip{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:var(--ft);font-weight:600;font-size:.82rem;color:var(--ink);
  padding:8px 13px;border:1px solid var(--line);border-radius:99px;
  background:var(--paper);transition:.18s var(--ease);white-space:nowrap}
.tf-chip:hover{border-color:var(--ink)}
.tf-chip.aktiv{background:var(--ink);color:#fff;border-color:var(--ink)}
.tf-chip i{font-style:normal;font-size:.7rem;opacity:.6}
.tf-chip.aktiv i{opacity:.75}
.tf-reset{font-family:var(--ft);font-size:.78rem;color:#8f8e89;text-decoration:underline;
  padding-top:9px;white-space:nowrap}
.tf-reset:hover{color:var(--ink)}

/* ── Zweites Bild beim Überfahren ───────────────────────── */
.prod-img-2{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .35s var(--ease)}
.prod:hover .prod-img-2{opacity:1}
@media (hover:none){.prod-img-2{display:none}}

/* ── Rabatt-Abzeichen ───────────────────────────────────── */
/* align-self ist der entscheidende Teil: .summary ist ein Flex-Container,
   und ein inline-block-Kind wird darin auf volle Breite gedehnt. Genau
   deshalb stand unter der Überschrift ein roter Balken über die ganze
   Spalte statt einer kleinen Plakette. */
.rabatt-badge{display:inline-block;align-self:flex-start;width:fit-content;
  background:#c8102e;color:#fff;
  font-family:var(--ft);font-weight:700;font-size:.78rem;letter-spacing:.06em;
  padding:5px 11px;border-radius:99px;margin-bottom:12px}
.single-product .rabatt-badge{margin:0 0 10px}

/* ── Mengenwahl mit Plus und Minus ──────────────────────── */
.quantity{display:inline-flex;align-items:stretch;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:var(--paper)}
.quantity input.qty{border:0!important;width:56px!important;text-align:center;
  -moz-appearance:textfield;background:transparent}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-btn{border:0;background:transparent;cursor:pointer;width:42px;
  font-size:1.15rem;line-height:1;color:var(--ink);transition:background .15s}
.qty-btn:hover{background:var(--paper-2)}
.qty-btn:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
form.cart .quantity{min-height:56px}

/* ── Zuletzt angesehen ──────────────────────────────────── */
.zuletzt{grid-column:1/-1;margin-top:clamp(40px,6vw,72px)}
.zuletzt h2{font-family:var(--fd);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.2rem,2.2vw,1.8rem);letter-spacing:-.02em;margin:0 0 20px}
.zuletzt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px)}
@media (max-width:860px){.zuletzt-grid{grid-template-columns:repeat(2,1fr)}}

/* ── Kundenkonto ────────────────────────────────────────── */
.konto-kopf{margin:0 0 22px}
.konto-hallo{font-family:var(--fd);font-weight:800;text-transform:uppercase;
  font-size:1.4rem;margin:0}

.konto-letzte{display:grid;grid-template-columns:auto auto 1fr auto auto;
  align-items:center;gap:8px 16px;text-decoration:none;color:var(--ink);
  padding:16px 20px;margin:0 0 22px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--paper-2);transition:.2s var(--ease)}
.konto-letzte:hover{border-color:var(--ink)}
.kl-label{font-family:var(--ft);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:#6d6c69;grid-column:1/-1}
.kl-nr{font-family:var(--fd);font-weight:800;font-size:1.05rem}
.kl-status{font-family:var(--ft);font-weight:600;font-size:.75rem;
  padding:3px 10px;border-radius:99px;background:var(--paper-3);color:#4a4a4f}
.kl-status.status-completed{background:#e4f2e8;color:#2f6b4f}
.kl-status.status-processing{background:#fdf1e3;color:#8a5a1c}
.kl-status.status-cancelled,.kl-status.status-failed{background:#fdecef;color:#8a1425}
.kl-datum{font-size:.85rem;color:#75757a}
.kl-summe{font-family:var(--fd);font-weight:800;font-size:1.05rem}

.konto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:12px}
.konto-k{display:flex;align-items:flex-start;gap:14px;text-decoration:none;
  padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--ink);transition:.2s var(--ease)}
.konto-k:hover{border-color:var(--ink);transform:translateY(-2px)}
.konto-k svg{width:26px;height:26px;flex:0 0 26px;margin-top:2px;color:var(--ink)}
.kk-t b{display:block;font-family:var(--ft);font-weight:700;font-size:.98rem;margin-bottom:4px}
.kk-t i{font-style:normal;font-size:.85rem;color:#6d6c69;line-height:1.5}

.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.woocommerce-MyAccount-navigation a{display:block;padding:11px 14px;text-decoration:none;
  color:#4a4a4f;font-family:var(--ft);font-weight:600;font-size:.88rem;border-radius:var(--r)}
.woocommerce-MyAccount-navigation a:hover{background:var(--paper-2);color:var(--ink)}
.woocommerce-MyAccount-navigation .is-active a{background:var(--ink);color:#fff}
.woocommerce-account .woocommerce{display:grid;grid-template-columns:260px minmax(0,1fr);
  gap:clamp(24px,3vw,48px);align-items:start}
@media (max-width:820px){
  .woocommerce-account .woocommerce{grid-template-columns:1fr}
  .konto-letzte{grid-template-columns:1fr auto}
}

/* ══════════════════════════════════════════════════════════════
   WooCommerce-Grundlayout entschärfen
   woocommerce-layout.css baut Konto, Produktseite und Spaltensätze
   noch mit float und Prozentbreiten. In unserem Raster bleibt die
   Prozentbreite wirksam: Die Kontospalte schrumpft auf 68 %, die
   Produktgalerie auf 48 %, und Überschriften landen übereinander.
   Hier werden genau diese Regeln neutralisiert – der Rest der Datei
   (Formularzeilen, Warenkorb) bleibt nützlich.
   ══════════════════════════════════════════════════════════════ */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce #content div.product div.images,
.woocommerce #content div.product div.summary,
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2{float:none;width:auto;max-width:none}

.woocommerce .col2-set,.woocommerce-page .col2-set{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(18px,2.2vw,36px);width:auto}
.woocommerce .col2-set::before,.woocommerce .col2-set::after{display:none}

.single-product .summary{max-width:740px}
.woocommerce-product-gallery__image img{width:100%}

/* ── Adressen im Konto ──────────────────────────────────── */
.woocommerce-Address{border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;background:var(--paper)}
.woocommerce-Address-title{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;margin:0 0 12px}
.woocommerce-Address-title h2,.woocommerce-Address-title h3{font-family:var(--fd);font-weight:800;
  text-transform:uppercase;font-size:1.02rem;letter-spacing:.01em;margin:0;line-height:1.2}
.woocommerce-Address-title a{font-family:var(--ft);font-size:.82rem;font-weight:600;
  color:var(--gold-ink);text-decoration:none;white-space:nowrap}
.woocommerce-Address address{font-style:normal;margin:0;line-height:1.75;color:#4a4a4f;font-size:.95rem}
.woocommerce-MyAccount-content > p:first-child{color:#6d6c69;margin:0 0 20px}

/* ── Größentabelle auf der Produktseite ─────────────────── */
.ib-groesse{margin:14px 0 0;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.ib-groesse > summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:14px 18px;font-family:var(--ft);font-weight:600;font-size:.92rem;color:var(--ink)}
.ib-groesse > summary::-webkit-details-marker{display:none}
.ib-groesse > summary svg{width:19px;height:19px;flex:0 0 19px;color:var(--gold-ink)}
.ib-groesse > summary::after{content:"+";margin-left:auto;font-size:1.15rem;color:#8f8e89;line-height:1}
.ib-groesse[open] > summary::after{content:"–"}
.ib-groesse .infoblock-i{padding:0 18px 18px;overflow-x:auto}
.ib-groesse table{width:100%;border-collapse:collapse;font-size:.86rem}
.ib-groesse th,.ib-groesse td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.ib-groesse th{background:var(--paper-2);font-family:var(--ft);font-weight:700}

/* ── Eigenständige Infoseiten ───────────────────────────── */
.info-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;
  list-style:none;margin:0;padding:0}
.info-liste a{display:block;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--ink);text-decoration:none;font-family:var(--ft);
  font-weight:600;font-size:.95rem;transition:.2s var(--ease)}
.info-liste a:hover{border-color:var(--ink);transform:translateY(-2px)}

.tf-hinweis{font-family:var(--ft);font-size:.85rem;color:#8a5a1c;background:#fdf5e8;
  border:1px dashed #e3c58f;border-radius:var(--r);padding:11px 15px;margin:0 0 18px}
.tf-hinweis a{color:var(--gold-ink);font-weight:600}

/* ══════════════════════════════════════════════════════════════
   Produktseite nach Shopify-Vorbild
   ══════════════════════════════════════════════════════════════ */

/* ── Varianten als Kacheln ──────────────────────────────── */
.vargeheim{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.varkacheln{display:flex;flex-wrap:wrap;gap:7px}
.varkachel{position:relative;min-width:52px;min-height:44px;padding:10px 15px;cursor:pointer;
  font-family:var(--ft);font-weight:600;font-size:.9rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  transition:.16s var(--ease)}
.varkachel:hover{border-color:var(--ink)}
.varkachel.aktiv{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.varkachel:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* Nicht kombinierbar: sichtbar lassen, aber durchgestrichen – so sieht man,
   dass es die Größe gibt, nur nicht in dieser Farbe. */
.varkachel.weg{color:#b4b3ae;cursor:not-allowed;background:var(--paper-2)}
.varkachel.weg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top left,transparent calc(50% - 1px),#cfcec9 50%,transparent calc(50% + 1px))}
.variations th label{display:flex;align-items:baseline;gap:8px}
.varwert{font-weight:400;text-transform:none;letter-spacing:0;font-size:.88rem;color:var(--ink)}

/* ── Zwischensumme ──────────────────────────────────────── */
.zwsumme{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  width:100%;margin:0 0 14px;padding:12px 0 0;border-top:1px solid var(--line);
  font-family:var(--ft);font-size:.86rem;color:#6d6c69}
.zwsumme b{font-family:var(--fd);font-weight:800;font-size:1.35rem;color:var(--ink)}

/* ── Kaufbereich ────────────────────────────────────────── */
form.cart .btn-kasse{flex:1 0 100%;order:9;min-height:54px;margin-top:2px;cursor:pointer;
  border:0;border-radius:6px;font-family:var(--ft);font-weight:700;font-size:.98rem;
  letter-spacing:.02em;color:#fff;background:#c8102e;transition:.22s var(--ease)}
form.cart .btn-kasse:hover{background:#a60d26;transform:translateY(-1px)}
form.cart .btn-kasse:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.rundknopf{display:grid;place-items:center;width:56px;min-height:56px;cursor:pointer;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink);transition:.2s var(--ease)}
.rundknopf:hover{border-color:var(--ink)}
.rundknopf:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.rundknopf svg{width:21px;height:21px}
.merken.an{color:#c8102e;border-color:#c8102e}
.merken.an svg{fill:currentColor}
.teilen{position:relative}
.teilen.kopiert::after{content:"Link kopiert";position:absolute;bottom:calc(100% + 8px);right:0;
  white-space:nowrap;background:var(--ink);color:#fff;font-family:var(--ft);font-size:.75rem;
  padding:6px 10px;border-radius:var(--r)}

.knappheit{font-family:var(--ft);font-size:.86rem;font-weight:600;color:#8a5a1c;
  margin:12px 0 0;display:flex;align-items:center;gap:8px}
.knappheit::before{content:"";width:8px;height:8px;border-radius:99px;background:#e0a13c;
  box-shadow:0 0 0 4px rgba(224,161,60,.22)}

.prod-banner{margin:18px 0 0}
.prod-banner img{width:100%;height:auto;border-radius:var(--r)}

@media (max-width:520px){
  .rundknopf{width:52px;min-height:52px}
  form.cart .single_add_to_cart_button{min-width:0;flex:1 1 auto}
}

/* ── Filterleiste mit mehreren Gruppen ──────────────────── */
.filterleiste{display:grid;gap:10px;margin:0 0 22px;padding:0 0 18px;
  border-bottom:1px solid var(--line)}
.fg-zeile{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.fg-zeile .tf-label{flex:0 0 72px;font-family:var(--ft);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:#8f8e89}
.filterleiste .tf-liste{display:flex;flex-wrap:wrap;gap:7px;flex:1}
.filterleiste .tf-reset{justify-self:start;font-family:var(--ft);font-size:.8rem;
  color:var(--gold-ink);text-decoration:none;border-bottom:1px solid currentColor}
@media (max-width:640px){.fg-zeile .tf-label{flex-basis:100%}}

/* Ab dieser Breite passen vier Karten, ohne dass die Bilder plakatgroß werden. */
@media (min-width:1500px){
  .woocommerce ul.products{grid-template-columns:repeat(4,1fr)}
  .zuletzt-grid{grid-template-columns:repeat(4,1fr)}
}

/* ══════════════════════════════════════════════════════════════
   SHOP-STARTSEITE
   Aufbau nach dem alten Shopify-Shop: erst ein ganzseitiger
   Auftritt, dann ausgesuchte Produkte, dann die volle Liste.
   ══════════════════════════════════════════════════════════════ */

.shop-front .sec-shop{padding-top:0;padding-bottom:0}
.shop-front .wrap-shop{max-width:1780px}

/* Die Sektionen stehen direkt in <main> und haben damit von Haus aus
   Fensterbreite – ohne negative Ränder, ohne 100vw, ohne Clip-Kontext. */
.shopsec{position:relative}
.shopsec .wrap-shop{margin-inline:auto}

.ss-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin:0 0 clamp(22px,2.6vw,38px)}
.ss-alle{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--ft);font-weight:600;font-size:.84rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);padding-bottom:3px;
  border-bottom:1px solid var(--gold)}
.ss-alle svg{width:16px;height:16px;transition:transform .22s var(--ease)}
.ss-alle:hover{color:var(--gold-ink)}
.ss-alle:hover svg{transform:translateX(4px)}
.ss-kicker{font-family:var(--ft);font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);margin:0 0 8px}
.ss-h{font-family:var(--fd);font-weight:800;letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(1.6rem,3vw,2.5rem);color:var(--ink);margin:0}

/* ── Hero: die Marke statt eines Fotos ──────────────────── */
/*
   Bewusst genügsam gebaut. Auf einem 4K-Schirm ist diese Fläche knapp
   3800 × 1100 physische Pixel groß. Vollflächige Verläufe, halbdurchsichtige
   Ebenen und eine Dauerschleife darüber haben Chrome dort das Zeichnen
   komplett aufgeben lassen – die Fläche blieb weiß. Deshalb: Volltonfarbe,
   ein gekacheltes Muster mit fester Kachelgröße, keine Deckkraft-Ebenen,
   keine Endlosanimation.
*/
.ss-hero{position:relative;background:#0c0c0e;
  min-height:min(72vh,620px);display:grid;align-items:center;
  /* minmax(0,1fr) statt 1fr: Sonst bestimmt der breiteste unumbrechbare
     Inhalt – die wischbare Schlagwortzeile – die Spaltenbreite, und der
     ganze Hero wird auf dem Handy dreimal so breit wie der Bildschirm. */
  grid-template-columns:minmax(0,1fr);
  /* Die Katze ragt bewusst über den rechten Rand hinaus. Bisher hing es an
     overflow-x:hidden am Körper, dass daraus keine Querscrollerei wurde –
     hier abgeschnitten ist es eine Eigenschaft des Heros statt eines
     Nebeneffekts weiter oben. */
  overflow:hidden;
  padding:clamp(130px,11vw,180px) var(--pad) clamp(64px,7vw,96px)}

/* Diagonalraster als kleine, wiederholbare Kachel: Der Browser malt sie
   einmal und stempelt sie, statt einen Verlauf über die volle Breite zu
   berechnen. */
.ss-hero-raster{position:absolute;inset:0;
  background-image:linear-gradient(115deg,
    rgba(227,186,104,.05) 0 1px,transparent 1px 14px);
  background-size:30px 30px}

.ss-hero-cat{position:absolute;right:-4%;top:50%;
  width:min(64vh,520px);aspect-ratio:295.78/293.33;
  background-repeat:no-repeat;background-size:contain;background-position:center;
  transform:translateY(-52%) rotate(-7deg)}

.ss-hero-in{position:relative;z-index:1;width:100%;max-width:1780px;margin-inline:auto}
.ss-hero-kicker{display:flex;align-items:center;gap:11px;margin:0 0 18px;
  font-family:var(--ft);font-weight:600;font-size:.74rem;letter-spacing:.24em;
  text-transform:uppercase;color:#e3ba68}
.ss-hero-kicker i{width:38px;height:1px;background:currentColor;display:block}
.ss-hero-marke{font-family:var(--fd);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.4rem,6.4vw,5.4rem);line-height:.9;letter-spacing:-.035em;
  color:#fff;margin:0 0 14px;max-width:15ch}
.ss-hero-h{font-family:var(--fd);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.05rem,2vw,1.6rem);line-height:1.16;margin:0 0 10px;max-width:24ch;
  color:#e3ba68}
.ss-hero-sub{font-family:var(--ft);font-weight:500;font-size:clamp(.82rem,1.1vw,.94rem);
  letter-spacing:.1em;text-transform:uppercase;color:#a9a8a3;margin:0 0 clamp(24px,3vw,34px)}

.ss-hero-akt{display:flex;align-items:center;gap:clamp(18px,2.4vw,32px);flex-wrap:wrap}
.ss-hero-zahl{display:flex;align-items:baseline;gap:8px;font-family:var(--ft);
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#8f8e89}
.ss-hero-zahl b{font-family:var(--fd);font-weight:900;font-size:1.5rem;color:#fff;letter-spacing:-.02em}

.ss-btn-gold{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  font-family:var(--ft);font-weight:700;font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;
  color:#221503;background-image:var(--metal);padding:17px 32px;border-radius:2px;
  transition:background-position .24s var(--ease)}
.ss-btn-gold svg{width:18px;height:18px;transition:transform .24s var(--ease)}
.ss-btn-gold:hover svg{transform:translateX(4px)}
.ss-btn-gold:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Leistungszeile unter dem Hero – ruhig statt laufend. */
.ss-laufband{border-top:1px solid rgba(255,255,255,.09);background:#08080a;padding:15px var(--pad);min-width:0}
.ss-lb-spur{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;
  max-width:1780px;margin-inline:auto}
.ss-lb-spur span{font-family:var(--fd);font-weight:800;text-transform:uppercase;
  font-size:.8rem;letter-spacing:.12em;color:#cfcec9}
.ss-lb-spur i{width:5px;height:5px;border-radius:99px;background:#b67a2d;flex:0 0 5px}
.ss-lb-spur i:last-child{display:none}

@media (max-width:820px){
  .ss-hero{min-height:0;padding-bottom:56px}
  .ss-hero-cat{right:-22%;width:min(52vh,340px)}
  .ss-hero-marke{max-width:none}
}

/* ── Produktreihen ──────────────────────────────────────── */
/* Abwechselnde Grundtöne gliedern die Seite, ohne Trennlinien zu brauchen. */
.ss-reihe{padding:clamp(48px,6vw,86px) 0;background:var(--paper)}
.ss-reihe.ist-wechsel{background:var(--paper-2)}
.ss-reihe .wrap-shop{margin-inline:auto}
ul.products.ss-produkte{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){ul.products.ss-produkte{grid-template-columns:repeat(2,1fr)}}

/* Randlose Karten – wie in der Vorlage. Kein Kasten, kein Rahmen:
   Das Produktfoto trägt die Fläche, der Text tritt zurück. */
.woo-page ul.products li.product .prod,
ul.products.ss-produkte li.product .prod{background:none;border:0;border-radius:0}
ul.products li.product .prod:hover{transform:none;box-shadow:none;border-color:transparent}
ul.products li.product .prod-img{background:#f4f3ef;border-radius:var(--r)}
ul.products li.product .prod-b{padding:14px 6px 4px;text-align:center;align-items:center;gap:5px}
/* Ohne `.woo-page`: Die Reihen der Shop-Startseite hängen vor dem
   Container und wären sonst nicht erfasst – dort standen die Titel weiß
   auf Creme und waren schlicht unsichtbar. */
ul.products li.product .prod-b h3{font-family:var(--ft);font-weight:600;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);line-height:1.4}
ul.products li.product .prod-p{font-family:var(--ft);font-weight:700;font-size:.94rem;
  color:var(--ink);margin-top:2px}
ul.products li.product .prod-p ins{color:#c8102e;text-decoration:none}
ul.products li.product .prod-p del{color:#9b9a95;font-weight:400}
/* „Ab 3,05 €“ statt „3,05 € – 7,35 €“ */
.preis-ab{font-weight:400;color:#75736e;margin-right:3px}

/* ── Blickfang ──────────────────────────────────────────── */
.ss-cta{padding:clamp(48px,6vw,86px) 0;background:var(--paper)}
.ss-cta-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.ss-cta-bild img{width:100%;height:auto;border-radius:var(--r);display:block}
.ss-cta-txt p{color:#4a4a4f;font-size:1.02rem;line-height:1.72;margin:14px 0 26px;max-width:52ch}
@media (max-width:860px){.ss-cta-in{grid-template-columns:1fr}}

.ss-btn-ink{display:inline-block;text-decoration:none;font-family:var(--ft);font-weight:700;
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--ink);
  padding:15px 26px;border-radius:2px;transition:.22s var(--ease)}
.ss-btn-ink:hover{background:#2a2a32;transform:translateY(-2px)}
.ss-btn-ink:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ── Aktionsband ────────────────────────────────────────── */
.ss-banner img{width:100%;height:auto;display:block}

/* ── Blog ───────────────────────────────────────────────── */
.ss-blog{padding:clamp(48px,6vw,86px) 0;background:var(--paper-2)}
.ss-blog-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);
  gap:clamp(28px,4vw,60px)}
.ss-blog-kopf p{color:#4a4a4f;font-size:.98rem;line-height:1.7;margin:12px 0 22px}
.ss-blog-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px)}
.ss-post img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);
  margin-bottom:13px}
.ss-post h3{font-family:var(--fd);font-weight:800;font-size:1.02rem;line-height:1.25;margin:0 0 6px}
.ss-post h3 a{color:var(--ink);text-decoration:none}
.ss-post h3 a:hover{color:var(--gold-ink)}
.ss-post time{display:block;font-family:var(--ft);font-size:.76rem;color:#8f8e89;margin-bottom:9px}
.ss-post p{font-size:.9rem;line-height:1.65;color:#4a4a4f;margin:0 0 11px}
.ss-mehr{font-family:var(--ft);font-weight:600;font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--gold)}
.ss-mehr:hover{color:var(--gold-ink)}
@media (max-width:980px){
  .ss-blog-in{grid-template-columns:1fr}
  .ss-blog-liste{grid-template-columns:1fr}
}

/* ── Übergang zur vollständigen Liste ───────────────────── */
.ss-listenkopf{padding-top:clamp(48px,6vw,86px)}
.ss-listenkopf .shop-anz{margin-bottom:6px}

/* ══════════════════════════════════════════════════════════════
   Filterspalte
   ══════════════════════════════════════════════════════════════ */
.shop-2sp{display:grid;grid-template-columns:248px minmax(0,1fr);
  gap:clamp(24px,2.6vw,44px);align-items:start}
.shop-liste{min-width:0}

.shopfilter{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow-y:auto;
  overscroll-behavior:contain;padding-right:6px}
.shopfilter.leer{display:none}
.shopfilter::-webkit-scrollbar{width:5px}
.shopfilter::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}

.ss-kopfzeile{display:flex;align-items:center;justify-content:space-between;
  padding:0 0 12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.ss-titel{display:inline-flex;align-items:center;gap:9px;font-family:var(--fd);font-weight:800;
  text-transform:uppercase;font-size:.86rem;letter-spacing:.1em;color:var(--ink)}
.ss-titel i{font-style:normal;display:grid;place-items:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:99px;background:var(--ink);color:#fff;font-family:var(--ft);
  font-size:.7rem;font-weight:700}
.ss-zu{display:none;background:none;border:0;font-size:1.5rem;line-height:1;cursor:pointer;
  color:var(--ink);padding:0 4px}

.ss-gesetzt{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.ss-weg{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:var(--ft);font-size:.78rem;font-weight:600;color:#fff;background:var(--ink);
  padding:6px 10px;border-radius:99px}
.ss-weg span{opacity:.6;font-size:.95rem;line-height:1}
.ss-weg:hover span{opacity:1}
.ss-alleweg{font-family:var(--ft);font-size:.76rem;color:var(--gold-ink);text-decoration:none;
  align-self:center;border-bottom:1px solid currentColor}

.ss-gruppe{border-bottom:1px solid var(--line);padding:0 0 12px;margin-bottom:14px}
.ss-gruppe:last-child{border-bottom:0}
.ss-gruppe>summary{display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;list-style:none;padding:6px 0;font-family:var(--ft);font-weight:700;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:#6d6c69}
.ss-gruppe>summary::-webkit-details-marker{display:none}
.ss-gruppe>summary::after{content:"";width:8px;height:8px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .2s var(--ease)}
.ss-gruppe[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}

.ss-werte{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:1px}
.ss-wert{display:flex;align-items:center;gap:10px;text-decoration:none;padding:7px 8px;
  margin-inline:-8px;border-radius:var(--r);font-family:var(--fb);font-size:.9rem;
  color:#4a4a4f;transition:.15s var(--ease)}
.ss-wert:hover{background:var(--paper-2);color:var(--ink)}
.ss-wert .ss-name{flex:1;min-width:0}
.ss-n{font-family:var(--ft);font-size:.74rem;color:#a3a29d;font-variant-numeric:tabular-nums}
.ss-wert.an{color:var(--ink);font-weight:600}

.ss-haken{flex:0 0 17px;width:17px;height:17px;border:1.5px solid var(--line);
  border-radius:3px;background:var(--paper);position:relative;transition:.15s var(--ease)}
.ss-wert:hover .ss-haken{border-color:#a3a29d}
.ss-wert.an .ss-haken{background:var(--ink);border-color:var(--ink)}
.ss-wert.an .ss-haken::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(42deg)}

/* Farben als Punkte – schneller erfassbar als Wörter. */
.ss-punkt{flex:0 0 17px;width:17px;height:17px;border-radius:99px;background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);transition:.15s var(--ease)}
.ss-wert.an .ss-punkt{box-shadow:inset 0 0 0 1px rgba(0,0,0,.16),0 0 0 2px var(--paper),0 0 0 4px var(--ink)}

/* Knopf, der die Spalte auf schmalen Bildschirmen hervorholt. */
.ss-auf{display:none;align-items:center;gap:9px;margin-right:auto;cursor:pointer;
  font-family:var(--ft);font-weight:600;font-size:.86rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:9px 15px}
.ss-auf svg{width:17px;height:17px}
.ss-auf i{font-style:normal;display:grid;place-items:center;min-width:19px;height:19px;
  padding:0 5px;border-radius:99px;background:var(--ink);color:#fff;font-size:.7rem;font-weight:700}

@media (max-width:1080px){
  .shop-2sp{grid-template-columns:1fr}
  .ss-auf{display:inline-flex}
  .ss-zu{display:block}
  .shopfilter{position:fixed;inset:0 auto 0 0;z-index:120;width:min(88vw,330px);
    max-height:none;background:var(--paper);padding:20px 22px;
    box-shadow:0 0 60px rgba(0,0,0,.28);transform:translateX(-102%);
    transition:transform .3s var(--ease);top:0}
  body.filter-offen .shopfilter{transform:none}
  body.filter-offen{overflow:hidden}
  body.filter-offen::after{content:"";position:fixed;inset:0;z-index:110;
    background:rgba(12,12,14,.5)}
}

/* ── Kategorie-Einstiege ────────────────────────────────── */
.ss-kats{padding:clamp(40px,5vw,70px) 0 0;background:var(--paper)}
.ss-kat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(10px,1.2vw,16px)}
.ss-kat{position:relative;display:block;overflow:hidden;border-radius:var(--r);
  aspect-ratio:3/2;text-decoration:none;background:#17171a;isolation:isolate}
.ss-kat img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease)}
.ss-kat:hover img{transform:scale(1.05)}
.ss-kat-leer{position:absolute;inset:0;
  background-image:linear-gradient(115deg,rgba(227,186,104,.09) 0 1px,transparent 1px 13px);
  background-size:26px 26px}
.ss-kat::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,10,.86) 0%,rgba(8,8,10,.15) 52%,transparent 72%)}
.ss-kat-t{position:absolute;left:20px;right:20px;bottom:17px;z-index:1;display:block}
.ss-kat-t b{display:block;font-family:var(--fd);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.05rem,1.7vw,1.4rem);letter-spacing:-.01em;color:#fff;line-height:1.1}
.ss-kat-t i{font-style:normal;font-family:var(--ft);font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:#b9b8b3}
.ss-kat:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ══════════════════════════════════════════════════════════════
   Warenkorb und Kasse über die volle Breite
   Auch hier lag noch woocommerce-layout.css dazwischen: Sie stellt
   die Artikelliste auf 68 % und die Summe auf 30 % – Prozentwerte,
   die in unserem Raster nochmals von der Spaltenbreite abgehen.
   ══════════════════════════════════════════════════════════════ */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,400px);
  gap:clamp(26px,3vw,56px);align-items:start}
.woocommerce-cart .woocommerce > form.woocommerce-cart-form,
.woocommerce-checkout .woocommerce > form.checkout{grid-column:1;width:auto;float:none}
.woocommerce-cart .cart-collaterals,
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading{grid-column:2;width:auto;float:none}
.woocommerce .cart-collaterals .cart_totals{width:auto;float:none}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper{grid-column:1/-1}

/* Die Summe bleibt beim Scrollen stehen – bei langen Warenkörben
   sonst ein Weg nach oben für jeden Blick auf den Betrag. */
.woocommerce-cart .cart-collaterals{position:sticky;top:96px}

.woocommerce-cart table.shop_table td.product-name{width:52%}
.woocommerce-cart table.shop_table td.product-price,
.woocommerce-cart table.shop_table td.product-subtotal{text-align:right;white-space:nowrap}

@media (max-width:1000px){
  .woocommerce-cart .woocommerce,
  .woocommerce-checkout .woocommerce{grid-template-columns:1fr}
  .woocommerce-cart .cart-collaterals,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #order_review_heading{grid-column:1}
  .woocommerce-cart .cart-collaterals{position:static}
}

/* ══════════════════════════════════════════════════════════════
   Produktseite: Reihenfolge
   Die Reihenfolge kommt aus WooCommerce-Prioritäten und aus dem
   PayPal-Plugin – beide lassen sich nicht frei mischen. Über eine
   Flex-Spalte mit order steht sie hier an einer Stelle und bleibt
   auch bei einem Plugin-Update erhalten.
   ══════════════════════════════════════════════════════════════ */
.single-product .summary{display:flex;flex-direction:column}
.single-product .summary > *{order:20}
.single-product .summary > .product_title{order:1}
.single-product .summary > .rabatt-badge{order:2}
.single-product .summary > .price,
.single-product .summary > .woocommerce-product-rating{order:3}
.single-product .summary > .prod-aktionen{order:4}
.single-product .summary > .wc-gzd-additional-info,
.single-product .summary > .woocommerce-product-details__short-description{order:5}
.single-product .summary > form.cart{order:6}
/* Der PayPal-Knopf rutscht direkt unter die beiden Kaufknöpfe. */
.single-product .summary > .ppc-button-wrapper,
.single-product .summary > .ppcp-messages,
.single-product .summary > [id^="ppc-button"],
.single-product .summary > .wc-stripe-product-checkout-container,
.single-product .summary > .wcpay-payment-request-wrapper{order:7}
.single-product .summary > .knappheit{order:8}
/* Alles ab hier steht weiter unten noch einmal – dort wird die
   Reihenfolge für Banner, Ratenhinweise und Infozeile festgelegt. */

/* Nur der gelbe Knopf. Die weiteren Zahlwege stehen an der Kasse –
   auf der Produktseite kosten sie nur Aufmerksamkeit. */
.single-product .ppc-button-wrapper [data-funding-source="sepa"],
.single-product .ppc-button-wrapper [data-funding-source="card"],
.single-product .ppc-button-wrapper [data-funding-source="sofort"],
.single-product .ppc-button-wrapper [data-funding-source="giropay"],
.single-product .ppc-button-wrapper [data-funding-source="eps"],
.single-product .ppc-button-wrapper [data-funding-source="bancontact"]{display:none!important}

/* Merken und Teilen unter dem Preis */
.prod-aktionen{display:flex;gap:9px;margin:2px 0 18px}
.prod-aktionen .rundknopf{width:auto;min-height:42px;padding:0 15px;gap:9px;
  display:inline-flex;align-items:center;font-family:var(--ft);font-weight:600;font-size:.84rem}
.prod-aktionen .rundknopf span{line-height:1}

/* ══════════════════════════════════════════════════════════════
   Wunschzettel
   ══════════════════════════════════════════════════════════════ */
li.product{position:relative}
.kachel-merken{position:absolute;top:10px;right:10px;z-index:3;display:grid;place-items:center;
  width:38px;height:38px;cursor:pointer;border:1px solid var(--line);border-radius:99px;
  background:rgba(255,255,255,.92);color:#6d6c69;transition:.18s var(--ease)}
.kachel-merken svg{width:18px;height:18px}
.kachel-merken:hover{color:var(--ink);border-color:var(--ink);transform:scale(1.06)}
.kachel-merken.an{color:#c8102e;border-color:#c8102e}
.kachel-merken.an svg{fill:currentColor}
.kachel-merken:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.nav-wunsch{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;
  border-radius:var(--r);color:var(--ink);text-decoration:none;transition:.2s var(--ease)}
.nav-wunsch:hover{background:var(--paper-2)}
.nav-wunsch svg{width:20px;height:20px}
.wz-zahl{position:absolute;top:4px;right:2px;min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;border-radius:99px;background:#c8102e;color:#fff;
  font-family:var(--ft);font-style:normal;font-size:.66rem;font-weight:700}

.wz-laedt{color:#8f8e89;font-family:var(--ft);font-size:.9rem}
.wz-leer{max-width:46ch;padding:40px 0}
.wz-leer h2{font-family:var(--fd);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.3rem,2.4vw,1.9rem);margin:0 0 10px}
.wz-leer p{color:#4a4a4f;line-height:1.7;margin:0 0 22px}
ul.products.wz-liste{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.2vw,16px);list-style:none;margin:0;padding:0}
@media (max-width:1000px){ul.products.wz-liste{grid-template-columns:repeat(2,1fr)}}
.wz-k{position:relative}
.wz-liste .prod{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.wz-liste .prod-img{display:block;position:relative;aspect-ratio:2/3;overflow:hidden;
  border-radius:var(--r);background:#f4f3ef}
.wz-liste .prod-img img{width:100%;height:100%;object-fit:cover}
.wz-liste .prod-b{display:block;padding:14px 6px 4px;text-align:center}
.wz-liste .prod-b h3{font-family:var(--ft);font-weight:600;font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.4;margin:0 0 5px}
.wz-liste .prod-p{font-family:var(--ft);font-weight:600;font-size:.92rem;color:#c8102e}

/* ── Themenkacheln über der Kategorieliste ──────────────── */
.themenkacheln{margin:0 0 clamp(28px,3vw,44px);padding:0 0 clamp(26px,3vw,40px);
  border-bottom:1px solid var(--line)}
.tk-h{font-family:var(--fd);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.05rem,1.8vw,1.35rem);letter-spacing:-.01em;margin:0 0 16px}
.tk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(9px,1vw,14px)}
@media (min-width:1500px){.tk-grid{grid-template-columns:repeat(8,1fr)}}
@media (max-width:820px){.tk-grid{grid-template-columns:repeat(2,1fr)}}
.tk{position:relative;display:block;overflow:hidden;border-radius:var(--r);
  aspect-ratio:1/1;text-decoration:none;background:#17171a;isolation:isolate}
.tk img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.tk:hover img{transform:scale(1.06)}
.tk-leer{position:absolute;inset:0;
  background-image:linear-gradient(115deg,rgba(227,186,104,.1) 0 1px,transparent 1px 12px);
  background-size:24px 24px}
.tk::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,10,.88) 0%,rgba(8,8,10,.2) 55%,transparent 78%)}
.tk-t{position:absolute;left:13px;right:13px;bottom:11px;z-index:1;display:block}
.tk-t b{display:block;font-family:var(--fd);font-weight:800;text-transform:uppercase;
  font-size:.86rem;line-height:1.15;color:#fff}
.tk-t i{font-style:normal;font-family:var(--ft);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:#b9b8b3}
.tk:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.kasse-rueckgabe{font-family:var(--ft);font-size:.84rem;color:#6d6c69;margin:0 0 14px;
  padding:11px 14px;background:var(--paper-2);border-radius:var(--r)}
.kasse-rueckgabe a{color:var(--gold-ink);font-weight:600}

/* Mengenvorteil auf der Produktseite */
.staffel-tipp{display:flex;align-items:flex-start;gap:9px;font-family:var(--ft);font-size:.86rem;
  color:#2f6b4f;background:#eef6f1;border-radius:var(--r);padding:11px 14px;margin:14px 0 0;
  line-height:1.5}
.staffel-tipp::before{content:"×2";flex:0 0 auto;font-weight:800;font-family:var(--fd);
  background:#2f6b4f;color:#fff;border-radius:99px;padding:1px 8px;font-size:.76rem;
  line-height:1.5}

.versandfrei{font-family:var(--ft);font-size:.88rem;font-weight:600;color:#8a5a1c;
  background:#fdf4e6;border-radius:var(--r);padding:11px 15px;margin:0 0 16px}
.versandfrei.erreicht{color:#2f6b4f;background:#eef6f1}

/* ══════════════════════════════════════════════════════════════
   Block-Warenkorb und Block-Kasse
   WooCommerce liefert Warenkorb und Kasse inzwischen als Blöcke
   aus – mit völlig anderen Klassennamen als der alte Shortcode.
   Die Regeln weiter oben greifen dort nicht, deshalb hier dasselbe
   noch einmal für die Blockfassung.
   ══════════════════════════════════════════════════════════════ */
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout{max-width:none;width:100%}

.wc-block-components-sidebar-layout{display:flex;align-items:flex-start;
  gap:clamp(26px,3vw,56px);max-width:none;width:100%}

.wc-block-components-sidebar-layout .wc-block-components-main{
  flex:1 1 auto;min-width:0;width:auto;max-width:none;padding-right:0}

.wc-block-components-sidebar-layout .wc-block-components-sidebar{
  flex:0 0 clamp(320px,26vw,400px);width:auto;max-width:none;padding-left:0;
  position:sticky;top:96px}

/* Tabelle im Blockwarenkorb */
.wc-block-cart-items{width:100%}
.wc-block-cart-items__header{font-family:var(--ft);font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;color:#6d6c69}
.wc-block-cart-item__image img{border-radius:var(--r)}
.wc-block-components-product-name{font-family:var(--ft);font-weight:600;color:var(--ink);
  text-decoration:none}
.wc-block-components-product-name:hover{color:var(--gold-ink)}
.wc-block-components-totals-item__value{font-variant-numeric:tabular-nums}

/* Die Summe rechts als abgesetzter Block */
.wc-block-components-sidebar .wc-block-components-totals-wrapper{
  background:var(--paper-2);border-radius:var(--r);padding:18px 20px;border:0}
.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title{font-family:var(--fd);font-weight:800;
  text-transform:uppercase;font-size:.86rem;letter-spacing:.1em;color:var(--ink)}

@media (max-width:1000px){
  .wc-block-components-sidebar-layout{flex-direction:column}
  .wc-block-components-sidebar-layout .wc-block-components-sidebar{
    flex:1 1 auto;width:100%;position:static}
}

/* ══════════════════════════════════════════════════════════════
   Kategorieseiten: Vorteile, Gratisbeigabe, Abschluss
   ══════════════════════════════════════════════════════════════ */

/* Einleitung – ein Absatz, der die Kategorie einordnet. */
.kb-intro{max-width:78ch;margin:-6px auto 26px}
.kb-intro p{margin:0;color:#4c4b48;font-size:1.01rem;line-height:1.62}

/* Vorteilszeile */
.kb-usp{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:1px;
  grid-template-columns:repeat(4,1fr);background:var(--line,#e6e3dc);
  border:1px solid var(--line,#e6e3dc);border-radius:var(--r)}
.kb-usp li{display:flex;align-items:center;gap:12px;background:#fff;
  padding:16px 18px}
.kb-usp li:first-child{border-radius:var(--r) 0 0 var(--r)}
.kb-usp li:last-child{border-radius:0 var(--r) var(--r) 0}
.kb-usp svg{width:24px;height:24px;flex:0 0 24px;color:var(--gold-ink,#8a5f22)}
.kb-usp span{display:flex;flex-direction:column;min-width:0;line-height:1.28}
.kb-usp b{font-family:var(--ft);font-weight:700;font-size:.9rem;color:var(--ink)}
.kb-usp i{font-style:normal;font-size:.78rem;color:#75736e;margin-top:2px}
@media (max-width:1000px){
  .kb-usp{grid-template-columns:repeat(2,1fr)}
  .kb-usp li{border-radius:0!important}
}
@media (max-width:520px){
  .kb-usp{grid-template-columns:1fr}
  .kb-usp li{padding:13px 15px}
  .kb-usp i{display:none}
}

/* Bestsellerreihe über dem Raster */
.kb-beliebt{margin:0 0 40px;padding:0 0 34px;border-bottom:1px solid var(--line,#e6e3dc)}
.kb-kopf{margin:0 0 18px}
.kb-beliebt .ss-produkte{margin:0}

/* Gratis-Wrap-Cat */
.kb-gratis{position:relative;overflow:hidden;background:#0c0c0e;color:#f6f5f2;
  margin:44px 0}
.kb-gratis::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 130% at 12% 50%,rgba(227,186,104,.22),transparent 65%)}
.kb-g-cat{position:absolute;right:-70px;top:50%;transform:translateY(-50%) rotate(-9deg);
  width:340px;height:340px;background-repeat:no-repeat;background-size:contain;
  background-position:center;opacity:.09;pointer-events:none}
.kb-g-in{position:relative;z-index:2;display:flex;align-items:center;
  gap:clamp(20px,4vw,54px);padding:clamp(30px,4.5vw,54px) var(--pad)}
.kb-g-txt{flex:1 1 auto;min-width:0}
.kb-g-kicker{margin:0 0 10px;font-family:var(--ft);font-size:.78rem;letter-spacing:.13em;
  text-transform:uppercase;color:#e3ba68}
.kb-g-h{margin:0 0 12px;font-family:var(--fd);font-weight:900;line-height:.98;
  text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(2rem,4.6vw,3.5rem);color:#fff}
.kb-g-h em{font-style:normal;color:#e3ba68}
.kb-g-sub{margin:0;max-width:56ch;color:#c6c4bd;font-size:1rem;line-height:1.6}
.kb-g-siegel{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;width:clamp(130px,14vw,168px);aspect-ratio:1;
  border-radius:50%;background:#e3ba68;color:#0c0c0e;text-align:center;
  transform:rotate(-8deg);padding:12px;
  box-shadow:0 18px 46px -18px rgba(227,186,104,.75)}
.kb-g-siegel b{font-family:var(--fd);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.2rem,2.1vw,1.62rem);line-height:1;letter-spacing:-.01em}
.kb-g-siegel i{font-style:normal;font-size:.63rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:700;line-height:1.2}
@media (max-width:760px){
  .kb-g-in{flex-direction:column;align-items:flex-start;gap:22px}
  .kb-g-siegel{align-self:flex-end;margin-top:-10px}
  .kb-g-cat{width:230px;height:230px;right:-58px}
}

/* Eigene Grafik statt gebautem Block */
.kb-gratisbild{margin:44px 0;line-height:0}
.kb-gratisbild img{width:100%;height:auto;display:block}

/* Abschluss unter dem Raster */
.kb-schluss{margin:52px 0 0;padding:38px 0 0;border-top:1px solid var(--line,#e6e3dc)}
.kb-s-in{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,44px);flex-wrap:wrap;background:var(--paper-2,#f5f3ee);
  border-radius:var(--r);padding:clamp(24px,3.2vw,38px)}
.kb-s-in p{margin:8px 0 0;max-width:58ch;color:#5a5854;line-height:1.6}
.kb-s-akt{display:flex;gap:11px;flex-wrap:wrap}

/* ══════════════════════════════════════════════════════════════
   Warenkorb, Kasse und Konto: die Breite freigeben
   Diese drei laufen nicht über die WooCommerce-Hooks, sondern als
   ganz normale Seiten durch page.php. Dort steckt der Inhalt in
   .entry – und .entry hat 78ch Leseweite, was für einen Blogtext
   richtig ist und für eine Warenkorbtabelle mit Summenspalte falsch.
   811 px für eine Seite, die 1780 hätte: Genau daran lag es, nicht
   an den Blockklassen.
   ══════════════════════════════════════════════════════════════ */
.woocommerce-cart .wrap,
.woocommerce-checkout .wrap,
.woocommerce-account .wrap{max-width:1780px}

.woocommerce-cart .entry,
.woocommerce-checkout .entry,
.woocommerce-account .entry{max-width:none;font-size:1rem}

/* Konto: Menü links, Inhalt rechts, beide mit fester Rolle */
.woocommerce-account .woocommerce{display:grid;
  grid-template-columns:clamp(220px,17vw,290px) minmax(0,1fr);
  gap:clamp(26px,3vw,54px);align-items:start}
.woocommerce-account .woocommerce-MyAccount-navigation{position:sticky;top:96px}
.woocommerce-account .woocommerce-MyAccount-content{min-width:0;max-width:none}

@media (max-width:900px){
  .woocommerce-account .woocommerce{grid-template-columns:1fr}
  .woocommerce-account .woocommerce-MyAccount-navigation{position:static}
}

/* Warenkorb: Liste links, Kaufbox rechts – ab 1000 px nebeneinander */
.woocommerce-cart .wc-block-components-sidebar-layout,
.woocommerce-checkout .wc-block-components-sidebar-layout{flex-wrap:nowrap}

@media (max-width:1000px){
  .woocommerce-cart .wc-block-components-sidebar-layout,
  .woocommerce-checkout .wc-block-components-sidebar-layout{flex-wrap:wrap}
}

/* Die Kaufbox als eigener Block, nicht als loser Textstapel */
.wc-block-components-sidebar .wc-block-components-totals-wrapper{
  background:var(--paper-2);border-radius:var(--r);padding:18px 20px;border:0}
.wc-block-components-sidebar .wc-block-cart__totals-title{margin-bottom:10px}
.wc-block-cart__submit-container .wc-block-cart__submit-button{width:100%;
  font-family:var(--ft);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.wc-block-components-express-payment{margin-top:14px}
.wc-block-components-express-payment__title-container{margin:14px 0 10px}


/* ══════════════════════════════════════════════════════════════
   Bezahlknöpfe: eine Breite, ein Stapel
   PayPal, Apple Pay und Google Pay bringen jeweils ihre eigene
   Breite mit – nebeneinander sah das aus, als wäre die Seite
   kaputt. Und SEPA doppelt sich mit PayPal, das kann weg.
   ══════════════════════════════════════════════════════════════ */
.wc-block-components-express-payment,
.wc-block-components-express-payment__event-buttons,
.woocommerce .ppcp-button-container,
#ppc-button-minicart,
.ppcp-button-apm{width:100%;max-width:none;box-sizing:border-box}

.wc-block-components-express-payment__event-buttons > li,
.woocommerce .ppcp-button-container > div{width:100%!important;max-width:none!important}

.single-product .ppcp-button-container,
.single-product .wc-block-components-express-payment{margin-top:12px}

/* SEPA-Lastschrift ausblenden: PayPal deckt das ab, zwei Wege zum selben
   Ziel verwirren mehr als sie nützen. Sauberer wäre die Abschaltung im
   PayPal-Plugin unter „Alternative Zahlungsmethoden“ – bis dahin hier. */
.ppcp-button-apm[data-funding-source="sepa"],
.ppcp-button-apm.ppcp-button-sepa,
li[id*="sepa"],
.wc-block-components-express-payment__event-buttons li:has([id*="sepa"]){display:none!important}


/* ══════════════════════════════════════════════════════════════
   Kaufzeile: Menge, Warenkorb, Merken, Teilen – eine Reihe
   Merken und Teilen standen einzeln unter dem Preis und sahen dort
   wie zwei vergessene Knöpfe aus. In der Kaufzeile bilden sie mit
   Menge und Warenkorb eine Einheit, und auf dem Handy findet der
   Daumen alles an einer Stelle.
   ══════════════════════════════════════════════════════════════ */
form.cart .prod-aktionen{display:flex;gap:9px;flex:0 0 auto;order:5;margin:0}
form.cart .prod-aktionen .rundknopf{width:56px;height:56px;min-height:56px;padding:0;
  border-radius:var(--r);border:1px solid var(--line);background:#fff;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .2s,color .2s,transform .15s}
form.cart .prod-aktionen .rundknopf span{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
form.cart .prod-aktionen .rundknopf svg{width:21px;height:21px}
form.cart .prod-aktionen .rundknopf:hover{border-color:var(--ink);transform:translateY(-1px)}
form.cart .prod-aktionen .merken[aria-pressed="true"]{border-color:#c8102e;color:#c8102e}
form.cart .prod-aktionen .merken[aria-pressed="true"] svg{fill:#c8102e}

/* Der Warenkorbknopf darf schrumpfen, damit die beiden Symbole Platz haben */
form.cart .single_add_to_cart_button{flex:1 1 180px;min-width:150px}

@media (max-width:520px){
  form.cart .prod-aktionen{order:4}
  form.cart .prod-aktionen .rundknopf{width:52px;height:52px;min-height:52px}
  form.cart .single_add_to_cart_button{flex:1 1 120px;min-width:110px}
}

/* Hinweis, wenn das Widerrufsrecht entfällt */
.widerruf-warn{flex:1 0 100%;order:2;margin:0 0 12px;font-size:.86rem;line-height:1.55;
  color:#7a4a10;background:#fdf4e6;border-left:3px solid #e0a13c;
  border-radius:var(--r);padding:11px 14px}

/* Ausgeschlossener Widerruf in der Vertrauenszeile nicht grün einfärben */

/* ══════════════════════════════════════════════════════════════
   Staffelhinweis in der Kaufzeile
   ══════════════════════════════════════════════════════════════ */
/* Sitzt jetzt unter dem Preis. Das ×2 kommt aus ::before – vorher stand
   es zusätzlich im Markup und die Kachel trug es doppelt. */
.staffel-tipp{order:4;align-self:flex-start;margin:10px 0 0;padding:8px 12px;
  font-size:.82rem;background:#eef6f1}

/* ══════════════════════════════════════════════════════════════
   Reihenfolge in der Produktspalte
   order kennt nur Ganzzahlen – „order:7.1" hat der Browser still
   verworfen, deshalb stand der Klarna-Hinweis weiterhin ganz unten
   hinter den Schlagwörtern. Jetzt eine durchgehende Zählung.
   ══════════════════════════════════════════════════════════════ */
.single-product .summary > .prod-banner{order:7}
.single-product .summary > .ppcp-messages,
.single-product .summary > .ppc-button-wrapper{order:8}
/* Klarna kommt von WooPayments und landet als nackte .StripeElement
   im Markup – direkt neben den PayPal-Hinweis, nicht ans Seitenende. */
.single-product .summary > .StripeElement,
.single-product .summary > .wc-block-components-bnpl,
.single-product .summary > .wcpay-bnpl-message,
.single-product .summary > .wcpay-product-details-container,
.single-product .summary > [class*="klarna"],
.single-product .summary > .wc-stripe-bnpl-message{order:9;margin-top:-2px}
.single-product .summary > .pv{order:10}
.single-product .summary > .infoblock{order:11}
.single-product .summary > .product_meta{order:12}
/* Zugabe im Warenkorb */
.wr-gratis-name b{font-family:var(--ft);font-size:.74rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:#2f6b4f;
  background:#eef6f1;border-radius:99px;padding:2px 8px;margin-left:6px}

/* Beide Ratenhinweise klein und ruhig – sie sind Fußnote, nicht Angebot. */
.single-product .summary .ppcp-messages,
.single-product .summary .StripeElement,
.single-product .summary [class*="klarna"]{font-size:.82rem}

/* Beide Hinweise klein und ruhig – sie sind Fußnote, nicht Angebot. */
.single-product .summary .ppcp-messages,
.single-product .summary [class*="klarna"]{font-size:.82rem}

/* ══════════════════════════════════════════════════════════════
   Wunschzettel: kleinere Kacheln
   Wer sich zwanzig Motive weglegt, will sie überblicken und nicht
   scrollen. Vier Spalten waren zu groß, jetzt sechs bis acht.
   ══════════════════════════════════════════════════════════════ */
ul.products.wz-liste{display:grid;list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:clamp(12px,1.4vw,20px)}
/* Das hidden-Attribut verliert sonst gegen display:grid – derselbe Stolper-
   stein wie damals bei der Kaufleiste. */
ul.products.wz-liste[hidden]{display:none}
.wz-liste .prod-img{aspect-ratio:1/1}
.wz-liste .prod-b{padding:9px 4px 2px}
.wz-liste .prod-b h3{font-size:.76rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wz-liste .prod-p{font-size:.82rem}
.wz-var{display:block;font-family:var(--ft);font-size:.72rem;color:#75736e;margin-top:2px}
.wz-liste .kachel-merken{width:30px;height:30px}
.wz-liste .kachel-merken svg{width:15px;height:15px}
@media (max-width:520px){
  ul.products.wz-liste{grid-template-columns:repeat(2,1fr)}
}

/* Abschlusskachel: gleiche Größe wie die Motive, aber sichtbar keine Ware. */
.wz-mehr .prod{display:grid;place-items:center;align-content:center;gap:8px;
  min-height:100%;aspect-ratio:1/1.22;border:1px dashed var(--line);
  border-radius:var(--r);color:#75736e;text-decoration:none;
  transition:border-color .2s var(--ease),color .2s var(--ease)}
.wz-mehr .prod:hover{border-color:var(--ink);color:var(--ink)}
.wz-mehr-i{font-family:var(--fd);font-weight:900;font-size:1.7rem;line-height:1}
.wz-mehr-t{font-family:var(--ft);font-size:.8rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em}

/* ══════════════════════════════════════════════════════════════
   Bestellbestätigung
   Die Standardausgabe von WooCommerce ist eine nackte Liste. Wer
   gerade Geld ausgegeben hat, soll etwas sehen, das nach Abschluss
   aussieht – nicht nach Datenbankauszug.
   ══════════════════════════════════════════════════════════════ */
.woocommerce-order{max-width:900px}
.woocommerce-thankyou-order-received{font-family:var(--fd);font-weight:900;
  text-transform:uppercase;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.1;
  margin:0 0 8px;color:var(--ink)}
ul.woocommerce-order-overview{list-style:none;margin:26px 0 34px;padding:0;
  display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
ul.woocommerce-order-overview li{background:var(--paper);padding:14px 16px;
  border:0!important;font-family:var(--ft);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:#8a8883;display:flex;flex-direction:column;gap:5px}
ul.woocommerce-order-overview li strong{font-family:var(--fd);font-weight:800;
  font-size:1.02rem;letter-spacing:0;text-transform:none;color:var(--ink)}

.woocommerce-order h2{font-family:var(--fd);font-weight:900;text-transform:uppercase;
  font-size:1.1rem;letter-spacing:.02em;margin:34px 0 14px}
.woocommerce-order table.shop_table{width:100%;border-collapse:collapse;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.woocommerce-order table.shop_table th{background:var(--paper-2);text-align:left;
  font-family:var(--ft);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:#6d6c69;padding:11px 15px;font-weight:700}
.woocommerce-order table.shop_table td{padding:13px 15px;border-top:1px solid var(--line);
  vertical-align:top}
.woocommerce-order table.shop_table tfoot th,
.woocommerce-order table.shop_table tfoot td{background:var(--paper-2);font-weight:700}
.woocommerce-order table.shop_table tfoot tr:last-child th,
.woocommerce-order table.shop_table tfoot tr:last-child td{font-size:1.05rem;color:var(--ink)}
.woocommerce-order .woocommerce-column__title{font-size:1rem}
.woocommerce-order address{font-style:normal;line-height:1.7;color:#4a4a4f;
  background:var(--paper-2);border-radius:var(--r);padding:16px 18px;border:0}
.woocommerce-columns--addresses{display:grid;gap:clamp(16px,2.4vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:10px}
.woocommerce-columns--addresses .woocommerce-column{width:auto;float:none}

/* ══════════════════════════════════════════════════════════════
   Widerrufsformular und Fußknopf
   ══════════════════════════════════════════════════════════════ */
/* Widerrufsknopf: klein, aber sichtbar abgesetzt.
   Im Footer steht er bei den Serviceverweisen – als Knopf mit Rahmen, weil
   § 356a „hervorgehoben platziert" verlangt und ein weiterer Textlink das
   nicht ist. In der Bestellung steht er dunkel auf hellem Grund. */
/* Grundstil von .wid-fknopf steht in main.css – der Fußbereich erscheint
   auf jeder Seite, shop.css lädt nur im Shop. */

.wid-bestellung{margin:26px 0 0;padding:18px 20px;border-radius:var(--r);
  background:var(--paper-2);border:1px solid var(--line)}
.wid-bestellung .wid-fknopf{margin-top:0;border-color:var(--ink);color:var(--ink)}
.wid-bestellung .wid-fknopf:hover{background:var(--ink);color:#fff}
.wid-bestellung p{margin:11px 0 0;font-size:.84rem;color:#5a5854;line-height:1.55}

/* Der Wunschzettel läuft als normale Seite durch page.php – dort gilt die
   Leseweite von .entry. Für ein Kachelraster ist das zu schmal. */
.page .entry .wz{max-width:none}
body.im-shop .wrap{max-width:1780px}
body.im-shop .entry{max-width:none}

/* ══════════════════════════════════════════════════════════════
   Steuerhinweis auf der Produktseite
   Der Satz „Kein Mehrwertsteuerausweis, da Kleinunternehmer" steht
   an jedem Preis und sagt dem Käufer nichts, was ihn interessiert –
   der Endpreis ist ja derselbe. Im Warenkorb, an der Kasse und auf
   der Rechnung bleibt er stehen, dort gehört er hin.
   Der Versandkostenhinweis daneben bleibt ebenfalls: Der ist nach
   der Preisangabenverordnung Pflicht.
   ══════════════════════════════════════════════════════════════ */
.single-product .summary .wc-gzd-additional-info.tax-info,
.single-product .summary .tax-info,
.single-product .summary .wc-gzd-additional-info-tax{display:none}

/* Bleibt der Versandhinweis allein übrig, darf er nicht wie ein Rest
   aussehen – also eigene, ruhige Zeile. */
.single-product .summary .wc-gzd-additional-info{font-size:.82rem;color:#75736e;
  margin:0 0 10px}

/* ══════════════════════════════════════════════════════════════
   Kaufzeile wie im alten Shop
   Zwischensumme eigene Zeile, darunter Menge + Warenkorb + die
   beiden Symbolknöpfe nebeneinander, darunter der Kassenknopf über
   die volle Breite. Vorher rutschte jedes Element auf eine eigene
   Zeile, weil nur der Warenkorbknopf eine Flex-Angabe hatte.
   ══════════════════════════════════════════════════════════════ */
/* Bei Variantenprodukten liegen Menge und Knöpfe nicht direkt im
   Formular, sondern zwei Ebenen tiefer in .single_variation_wrap >
   .woocommerce-variation-add-to-cart. Beide hatten keine Regel: Der
   Wrapper war damit ein Flex-Element ohne Breitenangabe und schrumpfte
   auf 214 px zusammen – deshalb stand darin alles untereinander,
   egal wie breit die Spalte war. Genau das war der Fehler. */
form.cart > table.variations,
form.cart > .single_variation_wrap{flex:1 0 100%;width:100%;min-width:0}
form.cart .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;
  gap:11px;align-items:stretch;width:100%}
form.cart .woocommerce-variation{flex:1 0 100%}

form.cart .zwsumme{flex:1 0 100%;order:0;margin:0 0 10px}
form.cart .quantity{flex:0 0 auto;order:1;margin:0}
form.cart .single_add_to_cart_button{flex:1 1 160px;min-width:140px;order:2}
form.cart .prod-aktionen{flex:0 0 auto;order:3}
form.cart .btn-kasse{flex:1 0 100%;order:4;margin-top:10px}

@media (max-width:420px){
  /* Ganz schmal darf der Warenkorbknopf auf eine eigene Zeile –
     drei Elemente nebeneinander werden sonst alle zu klein zum Treffen. */
  form.cart .single_add_to_cart_button{flex:1 0 100%;order:2}
  form.cart .prod-aktionen{order:3}
}

/* ══════════════════════════════════════════════════════════════
   Weg damit
   ══════════════════════════════════════════════════════════════ */
/* Die Lupe über dem ersten Produktbild. Sie öffnet dieselbe Ansicht
   wie ein Klick aufs Bild und sieht auf kleinen Bildern aus wie ein
   Fehler im Layout. */
.woocommerce-product-gallery__trigger{display:none!important}

/* Kleinunternehmerhinweis: gehört auf Rechnung und Kasse, nicht neben
   jeden Preis. Der Versandkostenverweis daneben zeigte ohnehin ins Leere
   (in Germanized ist keine Versandkostenseite hinterlegt) – unsere eigene
   Zeile darüber verlinkt die richtige Seite und erfüllt § 6 PAngV. */
.single-product .summary > .legal-price-info{display:none}

/* Germanized zeigt die Lieferzeit ein zweites Mal, statisch und ohne
   Bezug zur gewählten Größe. Unsere Zeile kann das besser. */
.single-product .summary > .delivery-time-info{display:none}

/* SEPA: das Plugin rendert den Knopf je nach Version mit anderer
   Klasse. Deshalb breit gefasst – lieber eine Zeile zu viel. */
.single-product [data-funding-source="sepa"],
.single-product .ppcp-button-apm-sepa,
.single-product .ppcp-button-sepa,
.single-product li[id*="sepa" i],
.single-product div[id*="sepa" i]:not([id*="separator" i]){display:none!important}

/* ══════════════════════════════════════════════════════════════
   Die Zugabe im Warenkorb
   Eine Zeile mit 0,00 € sieht ohne Erklärung nach Buchungsfehler
   aus. Also darf sie einmal kurz auftreten – und danach als
   Geschenk erkennbar bleiben.
   ══════════════════════════════════════════════════════════════ */

/* Menge und Papierkorb weg: Entfernen legt sie ohnehin sofort wieder
   hinein, Menge ändern geht nicht. Zwei Bedienelemente ohne Wirkung
   sind schlimmer als keine. */
.wr-geschenk-zeile .wc-block-components-quantity-selector,
.wr-geschenk-zeile .wc-block-cart-item__remove-link,
.wr-geschenk-zeile .product-remove,
.wr-geschenk-zeile .quantity{display:none!important}

.wr-geschenk-zeile{position:relative}
.wr-geschenk-zeile .wc-block-components-product-name::after,
.wr-geschenk-zeile .product-name > a::after{content:"Geschenk";
  display:inline-block;margin-left:8px;vertical-align:middle;
  font-family:var(--ft);font-size:.66rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:#231704;background-image:var(--metal);
  border-radius:99px;padding:3px 9px}

/* Kurzes Aufleuchten, wenn die Einblendung durch ist. */
@keyframes wr-frisch{
  0%{background:rgba(227,186,104,.34)}
  100%{background:transparent}
}
.wr-geschenk-zeile.frisch{animation:wr-frisch 1.6s ease-out}

/* ── Die Einblendung ─────────────────────────────────────────── */
.wr-gesch{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:rgba(12,12,14,.55);opacity:0;transition:opacity .3s ease;
  pointer-events:none;backdrop-filter:blur(2px)}
.wr-gesch.laeuft{opacity:1}
.wr-gesch.weg{opacity:0}

.wr-gesch-buehne{display:grid;justify-items:center;gap:18px;transform:scale(.9);
  transition:transform .35s cubic-bezier(.2,1.4,.4,1)}
.wr-gesch.laeuft .wr-gesch-buehne{transform:scale(1)}

.wr-gesch-box{position:relative;width:150px;height:150px}

/* Korpus und Deckel sind bewusst gebaut und kein Bild: Das lädt nichts
   nach und passt sich der Markenfarbe an. */
.wr-gesch-korpus{position:absolute;left:15px;bottom:0;width:120px;height:88px;
  border-radius:8px;background:#141416;
  box-shadow:0 22px 44px -18px rgba(0,0,0,.8)}
.wr-gesch-band{position:absolute;left:68px;bottom:0;width:14px;height:88px;
  background-image:var(--metal);border-radius:2px}
.wr-gesch-deckel{position:absolute;left:5px;bottom:80px;width:140px;height:30px;
  border-radius:7px;background:#1f1f22;border-bottom:4px solid var(--gold,#e3ba68);
  transform-origin:50% 100%}

.wr-gesch-ware{position:absolute;left:50%;bottom:34px;width:86px;height:86px;
  object-fit:contain;transform:translate(-50%,10px) scale(.2);opacity:0;
  border-radius:10px;background:#fff;padding:5px;
  box-shadow:0 0 0 3px rgba(227,186,104,.9),0 18px 40px -12px rgba(227,186,104,.7)}

.wr-gesch-text{margin:0;display:grid;justify-items:center;gap:3px;text-align:center;
  opacity:0;transform:translateY(8px);transition:opacity .3s ease .9s,transform .3s ease .9s}
.wr-gesch-text b{font-family:var(--fd);font-weight:900;text-transform:uppercase;
  letter-spacing:.04em;font-size:1.3rem;color:var(--gold,#e3ba68)}
.wr-gesch-text span{font-family:var(--ft);font-size:.9rem;color:#f0eee9}
.wr-gesch.laeuft .wr-gesch-text{opacity:1;transform:none}

/* Erst zweimal wackeln, dann springt der Deckel weg. */
@keyframes wr-wackeln{
  0%,100%{transform:rotate(0) translateY(0)}
  15%{transform:rotate(-7deg) translateY(-6px)}
  30%{transform:rotate(6deg) translateY(0)}
  45%{transform:rotate(-5deg) translateY(-4px)}
  60%{transform:rotate(4deg) translateY(0)}
}
@keyframes wr-deckel{
  0%{transform:translateY(0) rotate(0)}
  100%{transform:translateY(-96px) rotate(-24deg)}
}
@keyframes wr-raus{
  0%{transform:translate(-50%,10px) scale(.2);opacity:0}
  60%{transform:translate(-50%,-58px) scale(1.12);opacity:1}
  100%{transform:translate(-50%,-42px) scale(1);opacity:1}
}
.wr-gesch.laeuft .wr-gesch-box{animation:wr-wackeln .75s ease-in-out .15s}
.wr-gesch.laeuft .wr-gesch-deckel{animation:wr-deckel .5s cubic-bezier(.3,-.4,.4,1) .85s forwards}
.wr-gesch.laeuft .wr-gesch-ware{animation:wr-raus .7s cubic-bezier(.2,1.3,.4,1) .95s forwards}

/* Konfetti: acht Schnipsel, die aus der Schachtel fliegen. */
.wr-gesch-schnipsel{position:absolute;left:50%;bottom:78px;width:9px;height:14px;
  border-radius:2px;opacity:0;background:var(--gold,#e3ba68)}
.wr-gesch-schnipsel:nth-child(even){background:#fff}
.wr-gesch-schnipsel.s3,.wr-gesch-schnipsel.s7{background:#c8102e}
@keyframes wr-flug{
  0%{opacity:1;transform:translate(-50%,0) rotate(0) scale(.7)}
  100%{opacity:0;transform:translate(calc(-50% + var(--x)),var(--y)) rotate(var(--r)) scale(1)}
}
.wr-gesch.laeuft .wr-gesch-schnipsel{animation:wr-flug .95s ease-out .9s forwards}
.wr-gesch-schnipsel.s1{--x:-96px;--y:-92px;--r:-140deg}
.wr-gesch-schnipsel.s2{--x:-58px;--y:-128px;--r:90deg}
.wr-gesch-schnipsel.s3{--x:-20px;--y:-146px;--r:220deg}
.wr-gesch-schnipsel.s4{--x:22px;--y:-138px;--r:-70deg}
.wr-gesch-schnipsel.s5{--x:62px;--y:-118px;--r:160deg}
.wr-gesch-schnipsel.s6{--x:100px;--y:-84px;--r:-200deg}
.wr-gesch-schnipsel.s7{--x:-118px;--y:-46px;--r:120deg}
.wr-gesch-schnipsel.s8{--x:118px;--y:-40px;--r:-110deg}

@media (prefers-reduced-motion: reduce){
  .wr-gesch{display:none!important}
  .wr-geschenk-zeile.frisch{animation:none}
}


/* Pfeile am Vorschaustreifen. Erscheinen nur, wenn es wirklich mehr zu
   sehen gibt – ein Pfeil ins Nichts ist schlimmer als kein Pfeil. */
.wr-thumb-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;background:var(--ink);color:#fff;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.5);transition:transform .18s,opacity .18s}
.wr-thumb-pfeil:hover{transform:translateY(-50%) scale(1.08)}
.wr-thumb-pfeil svg{width:16px;height:16px}
.wr-thumb-pfeil.links{left:-10px}
.wr-thumb-pfeil.rechts{right:-10px}
.wr-thumb-pfeil[hidden]{display:none}
.wr-thumb-pfeil:focus-visible{outline:3px solid var(--gold);outline-offset:2px}


/* ══════════════════════════════════════════════════════════════
   Kundenstimmen
   Die Standardausgabe ist eine Kommentarliste aus dem Blog. Wer
   vor einem Kauf steht, liest aber keine Kommentare – er sucht
   ein Urteil. Also: Bewertung groß, Name klein, Text lesbar.
   ══════════════════════════════════════════════════════════════ */
#reviews{max-width:820px}
#reviews h2, #reviews #reply-title{font-family:var(--fd);font-weight:900;
  text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.2rem,2.4vw,1.6rem);
  margin:0 0 6px;color:var(--ink)}
.woocommerce-Reviews .woocommerce-noreviews{font-family:var(--ft);color:#75736e;
  margin:0 0 26px}

/* Vorhandene Bewertungen */
#reviews ol.commentlist{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:14px}
#reviews ol.commentlist li{margin:0}
#reviews .comment_container{display:grid;grid-template-columns:44px 1fr;gap:14px;
  padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper)}
#reviews .comment_container img.avatar{width:44px;height:44px;border-radius:50%;
  margin:0;float:none}
#reviews .comment-text{margin:0;border:0;padding:0}
#reviews .woocommerce-review__author{font-family:var(--fd);font-weight:800;
  text-transform:uppercase;font-size:.95rem;letter-spacing:.01em;color:var(--ink)}
#reviews .woocommerce-review__published-date{font-family:var(--ft);font-size:.78rem;
  color:#8c8a84;display:block;margin-top:1px}
#reviews .comment-text .star-rating{margin:8px 0 10px;font-size:.95rem;color:#e0a92e}
#reviews .description p{margin:0 0 8px;line-height:1.65}
#reviews .description p:last-child{margin-bottom:0}
/* „Verifizierter Käufer" verdient mehr als Kleingedrucktes. */
#reviews .woocommerce-review__verified{display:inline-block;margin-left:8px;
  font-family:var(--ft);font-size:.66rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#2f6b4f;background:#eef6f1;
  border-radius:99px;padding:3px 9px;font-style:normal}

/* Das Formular */
#review_form_wrapper{border-top:1px solid var(--line);padding-top:26px}
#reviews .comment-form{display:grid;gap:14px;max-width:62ch}
#reviews .comment-form p{margin:0}
#reviews .comment-form label{display:block;font-family:var(--ft);font-weight:600;
  font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:#6d6c69;
  margin-bottom:6px}
#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"],
#reviews .comment-form textarea{width:100%;font-family:var(--ft);font-size:.95rem;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;color:var(--ink);transition:border-color .18s}
#reviews .comment-form textarea{min-height:130px;resize:vertical;line-height:1.6}
#reviews .comment-form input:focus,
#reviews .comment-form textarea:focus{outline:none;border-color:var(--ink)}
#reviews .comment-form .submit{justify-self:start;min-height:52px;padding:0 30px;
  border:0;border-radius:6px;cursor:pointer;background:var(--ink);color:#fff;
  font-family:var(--ft);font-weight:700;font-size:.9rem;letter-spacing:.06em;
  text-transform:uppercase;transition:transform .16s,background .18s}
#reviews .comment-form .submit:hover{transform:translateY(-1px);background:#000}
#reviews .comment-form .comment-form-cookies-consent{display:flex;align-items:flex-start;
  gap:9px;font-size:.85rem;color:#6d6c69}
#reviews .comment-form .comment-form-cookies-consent label{text-transform:none;
  letter-spacing:0;font-weight:400;font-size:.85rem;margin:0}

@media (max-width:520px){
  #reviews .comment_container{grid-template-columns:1fr}
  #reviews .comment_container img.avatar{display:none}
}

/* ══════════════════════════════════════════════════════════════
   Bestseller-Reihe auf der Startseite
   ══════════════════════════════════════════════════════════════
   Dieselbe Reihe wie auf den Kategorieseiten, dort trennt sie eine
   Linie vom Sortiment darunter. Auf der Startseite steht sie in einer
   eigenen Sektion – Linie und Abstand kommen dort vom Abschnitt selbst
   und wären hier doppelt. */
.wr-beliebt .kb-beliebt{margin:0;padding:0;border-bottom:0}

/* ══════════════════════════════════════════════════════════════
   Shop-Startseite auf dem Handy
   ══════════════════════════════════════════════════════════════
   Auf dem Schreibtisch funktionierte der Hero: Katze rechts angeschnitten,
   Markenname groß, Text links daneben. Auf dem Handy rutschte die Katze
   unter die Überschrift – weiße Silhouette unter weißer Schrift, damit war
   die wichtigste Zeile der Seite unlesbar. Dazu kamen fünf Zeilen
   Schlagwortliste und ein Markenname, der den gleichen Namen wiederholt,
   der zwei Zentimeter darüber schon im Kopfbereich steht.

   Der Umbau ist deshalb keine Kosmetik, sondern eine andere Rangfolge:
   Was der Laden verkauft, steht groß. Wie er heißt, steht im Logo. Und
   die vier Kaufargumente kommen sofort danach, nicht erst nach dem
   dritten Wischen.
   ══════════════════════════════════════════════════════════════ */

/* Vorteilszeile direkt unter dem Hero. */
.ss-usp{background:var(--paper);padding:clamp(22px,3.4vw,34px) 0 0}
.ss-usp .kb-usp{margin-bottom:0}

@media (max-width:1000px){
  .ss-usp .kb-usp{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  /* Zwei Spalten statt einer: Vier gestapelte Zeilen schoben die Produkte
     um eine halbe Bildschirmhöhe nach unten. Die Unterzeile entfällt, die
     Überschrift allein trägt die Aussage. */
  .ss-usp .kb-usp{grid-template-columns:repeat(2,1fr)}
  .ss-usp .kb-usp li{padding:12px 12px;gap:9px;align-items:flex-start}
  .ss-usp .kb-usp svg{width:19px;height:19px;flex:0 0 19px;margin-top:1px}
  .ss-usp .kb-usp b{font-size:.78rem;line-height:1.25}
  .ss-usp .kb-usp i{display:none}
}

@media (max-width:820px){
  /* Die Katze bleibt – aber als Wasserzeichen unten rechts, weit weg von
     der Schrift und mit so wenig Deckkraft, dass sie nichts mehr frisst. */
  .ss-hero-cat{right:-26%;top:auto;bottom:-8%;
    width:min(46vh,270px);opacity:.16;transform:rotate(-7deg)}

  .ss-hero{min-height:0;padding-top:clamp(104px,25vw,136px);padding-bottom:34px}

  /* Der Markenname steht im Kopfbereich schon einmal. Hier ist der Platz
     für die Aussage, nicht für die Wiederholung. */
  .ss-hero-marke{display:none}

  .ss-hero-kicker{margin-bottom:12px;font-size:.68rem;letter-spacing:.2em}
  .ss-hero-kicker i{width:26px}

  .ss-hero-h{font-size:clamp(1.65rem,7.6vw,2.3rem);line-height:1.04;
    letter-spacing:-.02em;color:#fff;max-width:16ch;margin-bottom:12px}
  .ss-hero-sub{font-size:.8rem;letter-spacing:.06em;color:#e3ba68;
    margin-bottom:24px;max-width:30ch}

  .ss-hero-akt{flex-direction:column;align-items:stretch;gap:14px}
  .ss-hero-akt .ss-btn-gold{justify-content:center;padding:16px 22px;min-height:54px;font-size:.9rem}
  .ss-hero-zahl{justify-content:center}

  /* Schlagwortliste: eine wischbare Zeile statt fünf umgebrochener. */
  .ss-lb-spur{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    gap:14px;min-width:0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ss-lb-spur::-webkit-scrollbar{display:none}
  /* Weicher Auslauf rechts: zeigt, dass die Zeile weitergeht. */
  .ss-laufband{position:relative}
  .ss-laufband::after{content:"";position:absolute;top:0;bottom:0;right:0;width:42px;
    pointer-events:none;background:linear-gradient(270deg,#08080a,rgba(8,8,10,0))}
  .ss-lb-spur span{white-space:nowrap;font-size:.72rem;letter-spacing:.1em}
  .ss-lb-spur i{display:block}
  .ss-laufband{padding:12px var(--pad)}
}

@media (max-width:760px){
  /* Zwei Einstiege nebeneinander statt einer breiten Kachel: Mehr Auswahl
     im Blick, und das Hochformat lässt die Kategoriebilder atmen. */
  .ss-kat-grid{grid-template-columns:repeat(2,1fr);gap:9px}
  .ss-kat{aspect-ratio:4/5}
  .ss-kat:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:16/9}
  .ss-kat::after{background:linear-gradient(to top,
    rgba(8,8,10,.92) 0%,rgba(8,8,10,.35) 55%,rgba(8,8,10,.05) 80%)}
  .ss-kat-t{left:13px;right:13px;bottom:12px}
  .ss-kat-t b{font-size:1rem}
  .ss-kat-t i{font-size:.7rem}
}