/* ══════════════════════════════════════════════════════════════
   Krainerdruck Shop — Design-Tokens aus krainerdruck.ch
   Handgeschrieben, kein Framework. Ziel: < 25 KB, Lighthouse 95+.
   ══════════════════════════════════════════════════════════════ */

:root{
  --brand:#D51D43;--brand-2:#FF6C8E;
  --bg:#ffffff;--bg-2:#ffffff;
  --fg:#1b1c1f;--muted:#5b5f6b;
  --card:#ffffff;--card-2:#fff7f9;
  --border:#f0c8d2;
  --ok:#15803d;--ok-bg:#f0fdf4;--ok-br:#86efac;
  --warn:#b45309;--warn-bg:#fffbeb;--warn-br:#fcd34d;
  --fail:#b91c1c;--fail-bg:#fef2f2;--fail-br:#fca5a5;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
     color:var(--fg);background:#fff;display:flex;flex-direction:column;min-height:100vh;line-height:1.55}
main{flex:1}
a{color:var(--brand)}
img{max-width:100%;height:auto}

.container{width:min(1100px,92vw);margin:0 auto;overflow-x:clip}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Header ────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);
       border-bottom:1px solid var(--border);backdrop-filter:saturate(1.1) blur(6px)}
.nav{display:flex;align-items:center;gap:20px;padding:8px 0;position:relative}
.nav a{color:var(--fg);text-decoration:none;font-size:14px;font-weight:700}
.nav a:hover{color:var(--brand)}
.nav .spacer{flex:1}
.nav img{height:40px;width:auto;object-fit:contain}
.burger{display:none;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.6));
        border:1.5px solid var(--border);border-radius:12px;color:var(--brand);cursor:pointer;padding:8px 11px;line-height:0}
@media(max-width:980px){
  .burger{display:flex;align-items:center;justify-content:center;position:absolute;right:12px;top:50%;
          transform:translateY(-50%);z-index:100;padding:10px 14px;border-radius:14px}
}
.mobile-menu{display:none;position:sticky;left:0;right:0;top:0;background:rgba(255,255,255,.98);
             border-top:1px solid var(--border);box-shadow:0 8px 20px rgba(213,29,67,.08);z-index:49}
.mobile-menu .menu-inner{padding:4px 20px 12px}
.mobile-menu a{display:block;padding:12px 0;border-bottom:1px solid var(--border);
               text-decoration:none;color:var(--fg);font-size:17px}
.mobile-menu a:last-child{border-bottom:none}
body.menu-open .mobile-menu{display:block}

/* Hauptnavigation */
.hauptnav{display:flex;align-items:center;gap:20px}
.nav-aktionen{display:flex;align-items:center;gap:10px;margin-left:20px}

/* Aufklappmenü „Wissen" */
.hat-untermenue{position:relative}
.menue-knopf{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0;
       cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;color:var(--fg);line-height:1}
.menue-knopf:hover,.menue-knopf.ist-aktiv{color:var(--brand)}
.menue-knopf svg{transition:transform .2s}
.menue-knopf[aria-expanded=true] svg{transform:rotate(180deg)}
.untermenue{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
       background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 32px rgba(213,29,67,.14);
       padding:8px;min-width:210px;display:none;opacity:0;transition:opacity .16s,transform .16s;z-index:60}
.untermenue::before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px}
.hat-untermenue.offen .untermenue{display:block;opacity:1;transform:translateX(-50%) translateY(0)}
.untermenue a{display:block;padding:9px 13px;border-radius:9px;font-size:14px;font-weight:600;
       color:var(--fg);text-decoration:none;white-space:nowrap}
.untermenue a:hover{background:var(--card-2);color:var(--brand)}

/* Konto und Warenkorb */
.konto-link{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:10px;
       border:1.5px solid var(--border);color:var(--fg)!important;font-size:14px;font-weight:700;
       text-decoration:none;background:#fff}
.konto-link:hover{border-color:var(--brand);color:var(--brand)!important}
.konto-link svg{flex-shrink:0}
.cart-link{position:relative;display:inline-flex;align-items:center;gap:7px;padding:8px 15px;
           border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));
           color:#fff!important;font-weight:700;font-size:14px;text-decoration:none}
.cart-link:hover{opacity:.92;color:#fff!important}
.cart-count{background:rgba(255,255,255,.28);border-radius:999px;padding:1px 7px;font-size:12px;
       min-width:20px;text-align:center}

@media(max-width:980px){
  .hauptnav{display:none}
  .nav-aktionen{position:absolute;right:62px;top:50%;transform:translateY(-50%);margin:0;gap:7px}
  .konto-link span{display:none}
  .konto-link{padding:9px 11px}
  .cart-link{padding:8px 12px}
  .cart-link span:not(.cart-count){display:none}
}

/* Gruppentitel im mobilen Menü */
.mobile-menu .menu-gruppe{display:block;padding:14px 0 6px;font-size:11px;font-weight:700;
       letter-spacing:.1em;text-transform:uppercase;color:var(--brand);border-bottom:none}
.mobile-menu .menu-unter{padding-left:14px}
.mobile-menu .konto-link{display:flex;margin-top:14px;justify-content:center}
.mobile-menu .konto-link span{display:inline}

/* ── Hero & Seitenkopf ─────────────────────────────────────── */
.page-header{background:linear-gradient(135deg,#7a0a20 0%,#D51D43 60%,#e8456a 100%);padding:28px 0 24px}
.page-header .kicker{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
                     color:rgba(255,255,255,.6);margin-bottom:6px}
.page-header h1{font-size:clamp(22px,4vw,32px);font-weight:900;color:#fff;text-transform:uppercase;
                line-height:1.1;margin:0 0 6px}
.page-header p{color:rgba(255,255,255,.7);font-size:14px;margin:0}

.hero-new{background:linear-gradient(135deg,#7a0a20 0%,#D51D43 60%,#e8456a 100%);
          padding:44px 0 36px;position:relative;overflow:hidden}
.hero-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;
           letter-spacing:.07em;text-transform:uppercase;background:rgba(255,255,255,.15);color:#fff;
           border:1px solid rgba(255,255,255,.25)}
.hero-title{font-size:clamp(30px,5vw,44px);font-weight:900;color:#fff;line-height:1.05;
            letter-spacing:-.02em;text-transform:uppercase;margin:14px 0 12px}
.hero-lead{color:rgba(255,255,255,.78);font-size:15px;max-width:520px;line-height:1.55;margin:0 0 22px}
.hero-facts{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px}
.hero-facts span{color:#fff;font-size:13px;font-weight:600}
.btn-white{display:inline-flex;align-items:center;padding:11px 22px;border-radius:10px;background:#fff;
           color:var(--brand);font-weight:800;font-size:14px;text-decoration:none}
.btn-ghost{display:inline-flex;align-items:center;padding:11px 22px;border-radius:10px;
           background:rgba(255,255,255,.15);color:#fff;font-weight:700;font-size:14px;
           text-decoration:none;border:1px solid rgba(255,255,255,.3)}

/* ── Statistik-Leiste ──────────────────────────────────────── */
.stats-strip{background:#fff;border-bottom:1px solid var(--border)}
.stats-strip-inner{display:grid;grid-template-columns:repeat(3,1fr);width:min(1100px,92vw);margin:0 auto}
.stat-cell{padding:16px 8px;text-align:center;display:flex;flex-direction:column;
           justify-content:center;align-items:center;gap:6px}
.stat-cell+.stat-cell{border-left:1px solid var(--border)}
.stat-num{font-size:clamp(18px,3vw,26px);font-weight:900;color:var(--brand);line-height:1.1}
.stat-lbl{font-size:clamp(10px,1.5vw,12px);color:var(--muted);line-height:1.35}

/* ── Sektionen ─────────────────────────────────────────────── */
.section{padding:52px 0;background:#fff}
.section-tinted{padding:52px 0;background:#fff7f9}
.section-dark{background:linear-gradient(135deg,#6a0018 0%,#a81228 55%,#C4203D 100%);padding:52px 0;color:#fff}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark p{color:rgba(255,255,255,.78)}
.section-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
               color:var(--brand);margin-bottom:8px}
.section-dark .section-label{color:rgba(255,255,255,.65)}
h1{font-size:clamp(26px,4vw,40px);margin:0 0 10px;font-weight:800}
h2{font-size:clamp(20px,3vw,28px);margin:0 0 12px;font-weight:800;color:var(--fg)}
h3{font-size:clamp(17px,2vw,20px);margin:0 0 8px;font-weight:700}
p.lead{color:var(--muted);margin:0 0 18px;font-size:15px}

/* ── Karten & Buttons ──────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;
      box-shadow:0 4px 16px rgba(213,29,67,.06)}
.card-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.card-grid-3{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.card-grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.card-grid,.card-grid-3{grid-template-columns:1fr}}
.icon-box{width:36px;height:36px;border-radius:10px;background:#ffe0e7;display:flex;
          align-items:center;justify-content:center;flex-shrink:0}
.badge{display:inline-block;font-size:12px;padding:5px 10px;background:#ffe0e7;
       border:1px solid var(--border);border-radius:999px;color:#9c1736}

.button{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;
        border:1px solid var(--border);color:var(--fg);text-decoration:none;font-weight:700;
        background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.4));cursor:pointer;
        font-family:inherit;font-size:14px}
.button.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;color:#fff}
.button.block{width:100%;justify-content:center}
.button:disabled{opacity:.45;cursor:not-allowed}

/* ── Formulare ─────────────────────────────────────────────── */
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:720px){.row{grid-template-columns:1fr}}
input,select,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);
       background:#fff;color:var(--fg);font-family:inherit;font-size:14px}
input[type=number]{appearance:textfield}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=checkbox],input[type=radio]{width:auto}
label{display:block;font-size:13px;font-weight:600;color:var(--fg);margin-bottom:5px}
.small{font-size:13px;color:var(--muted)}

/* ── FAQ-Akkordeon ─────────────────────────────────────────── */
.faq-new-item{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff;
              transition:box-shadow .2s;margin-bottom:10px}
.faq-new-item.open{box-shadow:0 4px 16px rgba(213,29,67,.1)}
.faq-new-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
           background:#fff;border:none;cursor:pointer;text-align:left;gap:12px;font-family:inherit}
.faq-new-q:hover{background:#fff7f9}
.faq-new-q-text{font-size:15px;font-weight:700;color:var(--fg);line-height:1.3}
.faq-new-icon{width:24px;height:24px;border-radius:50%;background:#ffe0e7;display:flex;align-items:center;
              justify-content:center;flex-shrink:0;font-size:16px;font-weight:700;color:var(--brand);
              transition:transform .25s;line-height:1}
.faq-new-item.open .faq-new-icon{transform:rotate(45deg);
              background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
.faq-new-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-new-item.open .faq-new-a{max-height:900px}
.faq-new-a-inner{padding:0 20px 18px;font-size:14px;color:var(--muted);line-height:1.7;
                 border-top:1px solid var(--border)}
.faq-new-a-inner p{margin-top:12px}

/* ══════════════════════════════════════════════════════════════
   WooCommerce
   ══════════════════════════════════════════════════════════════ */

/* Produktliste — passt sich der Spaltenzahl von WooCommerce an */
.woocommerce ul.products{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:18px;
                         grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none;display:none}
@media(max-width:560px){.woocommerce ul.products{grid-template-columns:1fr}}

/* WooCommerce gibt den Kacheln eine feste Prozentbreite und laesst sie floaten.
   Im Raster fuehrt das zu fingerdünnen Karten — darum hier zurücksetzen. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{width:auto!important;margin:0!important;float:none!important;
       clear:none!important;padding:0}

.woocommerce ul.products li.product{background:#fff;border:1px solid var(--border);border-radius:16px;
       overflow:hidden;box-shadow:0 4px 16px rgba(213,29,67,.06);display:flex;flex-direction:column;
       transition:box-shadow .2s,transform .2s}
.woocommerce ul.products li.product:hover{box-shadow:0 10px 28px rgba(213,29,67,.14);transform:translateY(-2px)}
.woocommerce ul.products li.product a img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;margin:0}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:15px;font-weight:700;
       padding:14px 14px 4px;margin:0;line-height:1.35}
.woocommerce ul.products li.product a{text-decoration:none;color:var(--fg)}
.woocommerce ul.products li.product .price{display:block;padding:0 14px;font-size:18px;
       font-weight:800;color:var(--brand)}
.woocommerce ul.products li.product .kd-qm{padding:2px 14px 0;font-size:12px;color:var(--muted)}
.woocommerce ul.products li.product .button{margin:12px 14px 14px;justify-content:center}

/* Einzelprodukt — zwei Spalten, Bild links, Bestellung rechts */
.woocommerce div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
       gap:40px;align-items:start;padding:32px 0}
@media(max-width:860px){.woocommerce div.product{grid-template-columns:1fr;gap:24px}}
.woocommerce div.product .woocommerce-product-gallery{grid-column:1;margin:0}
.woocommerce div.product .summary{grid-column:2;margin:0}
@media(max-width:860px){
  .woocommerce div.product .woocommerce-product-gallery,
  .woocommerce div.product .summary{grid-column:1}
}
.woocommerce div.product .woocommerce-product-gallery img{border-radius:16px;border:1px solid var(--border);width:100%}
.woocommerce div.product .product_title{font-size:clamp(24px,3.4vw,34px);font-weight:800;margin:0 0 10px;line-height:1.15}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-size:30px;font-weight:900;
       color:var(--brand);margin:0;display:block}
.woocommerce div.product .kd-qm{font-size:13px;color:var(--muted);margin:2px 0 18px}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--muted);
       font-size:15px;margin:0 0 20px}
.woocommerce div.product form.cart{margin:0 0 18px}
.woocommerce div.product form.cart .quantity{display:inline-block;margin-right:10px}
.woocommerce div.product form.cart .quantity input{width:88px;text-align:center}
.woocommerce div.product .single_add_to_cart_button{background:linear-gradient(135deg,var(--brand),var(--brand-2));
       color:#fff;border:none;border-radius:12px;padding:14px 26px;font-weight:800;font-size:15px;
       cursor:pointer;font-family:inherit}
.woocommerce div.product .single_add_to_cart_button:hover{opacity:.92}
.woocommerce div.product .product_meta{font-size:13px;color:var(--muted);margin-top:14px}

/* Beschreibung unterhalb, über die volle Breite */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .up-sells{grid-column:1 / -1;margin-top:20px}
.woocommerce div.product .woocommerce-tabs ul.tabs{list-style:none;padding:0;margin:0 0 18px;
       display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--border)}
.woocommerce div.product .woocommerce-tabs ul.tabs li{margin:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{display:block;padding:10px 16px;
       text-decoration:none;font-weight:700;font-size:14px;color:var(--muted);border-radius:10px 10px 0 0}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--brand);background:var(--card-2)}
.woocommerce div.product .related > h2,.woocommerce div.product .up-sells > h2{margin-bottom:14px}

/* Preisstaffel-Tabelle */
.kd-staffel{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
.kd-staffel th,.kd-staffel td{padding:9px 12px;border-bottom:1px solid var(--border);text-align:left}
.kd-staffel th{font-weight:700;background:var(--card-2);font-size:13px}
.kd-staffel td:last-child,.kd-staffel th:last-child{text-align:right;font-weight:700}

/* Upload-Feld */
.kd-upload{border:2px dashed var(--border);border-radius:14px;padding:22px;text-align:center;
           background:var(--card-2);transition:border-color .2s,background .2s;cursor:pointer}
.kd-upload:hover,.kd-upload.dragover{border-color:var(--brand);background:#ffe8ee}
.kd-upload input[type=file]{display:none}
.kd-upload .kd-upload-icon{font-size:26px;line-height:1;margin-bottom:8px;color:var(--brand)}
.kd-upload .kd-upload-hint{font-size:13px;color:var(--muted);margin-top:6px}
.kd-upload .kd-upload-name{font-weight:700;font-size:14px;margin-top:8px;word-break:break-all}

/* Datencheck-Ampel */
.kd-check{border-radius:12px;padding:14px 16px;margin-top:12px;font-size:14px;line-height:1.6}
.kd-check--ok{background:var(--ok-bg);border:1px solid var(--ok-br);color:var(--ok)}
.kd-check--warn{background:var(--warn-bg);border:1px solid var(--warn-br);color:var(--warn)}
.kd-check--fail{background:var(--fail-bg);border:1px solid var(--fail-br);color:var(--fail)}
.kd-check--pending{background:var(--card-2);border:1px solid var(--border);color:var(--muted)}
.kd-check__title{font-weight:800;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.kd-check__list{margin:8px 0 0;padding-left:18px}
.kd-check__list li{margin-bottom:4px}
.kd-check__confirm{margin-top:12px;padding-top:12px;border-top:1px solid currentColor;
                   display:flex;gap:9px;align-items:flex-start;font-weight:600}
.kd-check__confirm input{margin-top:3px}

/* Warenkorb & Kasse */
.woocommerce table.shop_table{width:100%;border-collapse:collapse;border:1px solid var(--border);
       border-radius:14px;overflow:hidden;font-size:14px;background:#fff;table-layout:fixed}
.woocommerce table.shop_table th{background:var(--card-2);padding:12px;text-align:left;
       font-weight:700;font-size:13px;border-bottom:1px solid var(--border)}
.woocommerce table.shop_table td{padding:14px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.woocommerce table.shop_table img{width:64px;height:64px;object-fit:cover;border-radius:8px}

/* Feste Spaltenbreiten — sonst schiebt die Datencheck-Ampel alles auseinander */
.woocommerce table.cart th.product-remove,
.woocommerce table.cart td.product-remove{width:44px;text-align:center;padding-left:6px;padding-right:6px}
.woocommerce table.cart th.product-thumbnail,
.woocommerce table.cart td.product-thumbnail{width:86px}
.woocommerce table.cart th.product-price,
.woocommerce table.cart td.product-price{width:110px;text-align:right}
.woocommerce table.cart th.product-quantity,
.woocommerce table.cart td.product-quantity{width:120px}
.woocommerce table.cart th.product-subtotal,
.woocommerce table.cart td.product-subtotal{width:130px;text-align:right;font-weight:700}
.woocommerce table.cart td.product-name{word-break:break-word}
.woocommerce table.cart td.product-name > a{font-size:15px}

/* Das Mengenfeld bekommt von WooCommerce ein sichtbares Label */
.woocommerce table.cart td.product-quantity .quantity label,
.woocommerce table.cart td.product-quantity > label{position:absolute;width:1px;height:1px;
       overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.woocommerce table.cart td.product-quantity input.qty{width:76px;text-align:center;padding:9px}

/* Ampel im Warenkorb kompakter als auf der Produktseite */
.woocommerce table.cart .kd-check{margin:10px 0 4px;padding:11px 13px;font-size:13px}
.woocommerce table.cart .kd-check__title{font-size:13px;margin-bottom:4px}
.woocommerce table.cart .kd-check__list{margin-top:6px;padding-left:16px}

@media(max-width:860px){
  .woocommerce table.shop_table{table-layout:auto}
  .woocommerce table.cart th.product-thumbnail,
  .woocommerce table.cart td.product-thumbnail{display:none}
  .woocommerce table.cart th,.woocommerce table.cart td{padding:10px 8px;font-size:13px}
  .woocommerce table.cart th.product-price,.woocommerce table.cart td.product-price,
  .woocommerce table.cart th.product-quantity,.woocommerce table.cart td.product-quantity,
  .woocommerce table.cart th.product-subtotal,.woocommerce table.cart td.product-subtotal{width:auto}
}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-radius:12px;padding:14px 16px;
       margin:16px 0;font-size:14px;list-style:none}
.woocommerce-message{background:var(--ok-bg);border:1px solid var(--ok-br);color:var(--ok)}
.woocommerce-info{background:var(--card-2);border:1px solid var(--border);color:var(--fg)}
.woocommerce-error{background:var(--fail-bg);border:1px solid var(--fail-br);color:var(--fail)}
.woocommerce .cart-collaterals{margin-top:28px}
.woocommerce #payment ul.payment_methods{list-style:none;padding:0;margin:0 0 16px}
.woocommerce #payment ul.payment_methods li{padding:12px;border:1px solid var(--border);
       border-radius:12px;margin-bottom:8px}

/* ── Warenkorb und Kasse (klassische Ansicht) ──────────────── */
.woocommerce .cart-collaterals{margin-top:28px;display:grid;grid-template-columns:1fr;gap:18px}
.woocommerce .cart_totals{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;
       box-shadow:0 4px 16px rgba(213,29,67,.06);max-width:460px;margin-left:auto}
.woocommerce .cart_totals h2{font-size:18px;margin-bottom:14px}
.woocommerce .cart_totals table{border:none;margin:0;display:block}
.woocommerce .cart_totals tbody{display:block}
.woocommerce .cart_totals tr{display:flex;align-items:flex-start;justify-content:space-between;
       gap:16px;padding:11px 0;border-bottom:1px solid var(--border)}
.woocommerce .cart_totals tr:last-child{border-bottom:none}
.woocommerce .cart_totals th{background:transparent;padding:0;font-size:14px;font-weight:600;
       border:none;flex:0 0 auto;white-space:nowrap}
.woocommerce .cart_totals td{padding:0;text-align:right;border:none;flex:1 1 auto}
.woocommerce .cart_totals .order-total{padding-top:14px;margin-top:4px;border-top:2px solid var(--border)}
.woocommerce .cart_totals .order-total th{font-size:16px;font-weight:800}
.woocommerce .cart_totals .order-total td{font-size:22px;font-weight:900;color:var(--brand)}
.woocommerce .cart_totals .tax-rate th,.woocommerce .cart_totals .tax-rate td{font-size:13px;
       color:var(--muted);font-weight:400}
.woocommerce .cart_totals .includes_tax{display:block;font-size:12px;color:var(--muted);font-weight:400}

/* Versandzeile im Warenkorb: Titel oben, Optionen darunter über volle Breite */
.woocommerce .cart_totals tr.shipping{flex-direction:column;gap:10px}
.woocommerce .cart_totals tr.shipping th{margin-bottom:2px}
.woocommerce .cart_totals tr.shipping td{text-align:left;width:100%}
.woocommerce a.checkout-button{display:block;text-align:center;margin-top:14px;
       background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-radius:12px;
       padding:15px 22px;font-weight:800;text-decoration:none;font-size:15px}
.woocommerce table.cart td.product-remove a.remove{color:var(--brand);text-decoration:none;font-size:20px;
       line-height:1;display:inline-block}
.woocommerce table.cart td.actions{padding:14px 12px;background:var(--card-2)}
.woocommerce .coupon input[type=text]{width:auto;display:inline-block;margin-right:8px;max-width:200px}
.woocommerce table.cart .product-thumbnail img{width:64px;height:64px;object-fit:cover;border-radius:10px}
.woocommerce table.cart td.product-name a{font-weight:700;text-decoration:none;color:var(--fg)}
.woocommerce dl.variation{margin:6px 0 0;font-size:13px;color:var(--muted)}
.woocommerce dl.variation dt{font-weight:700;float:left;margin-right:6px;clear:left}
.woocommerce dl.variation dd{margin:0 0 3px}
.woocommerce dl.variation p{margin:0}

/* Kasse */
.woocommerce form.checkout{display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:min-content 1fr;gap:36px;align-items:start}
@media(max-width:900px){.woocommerce form.checkout{grid-template-columns:1fr;gap:24px}}
/* Beide Spalten oben beginnen: die Adressfelder laufen ueber beide Rasterzeilen,
   Ueberschrift und Bestellkasten sitzen rechts direkt uebereinander. Ohne die
   festen Zeilen rutscht der Kasten unter das gesamte Adressformular. */
.woocommerce form.checkout #customer_details{grid-column:1;grid-row:1 / span 2}
.woocommerce form.checkout #order_review_heading{grid-column:2;grid-row:1}
.woocommerce form.checkout #order_review{grid-column:2;grid-row:2;align-self:start}
@media(max-width:900px){
  .woocommerce form.checkout #customer_details,
  .woocommerce form.checkout #order_review_heading,
  .woocommerce form.checkout #order_review{grid-column:1;grid-row:auto}
}
/* Bestelluebersicht in der Kasse: Zeilen als Flex, damit die Versandarten
   die volle Breite des Kastens bekommen statt in einer schmalen Tabellenspalte
   zu kleben. */
.woocommerce #order_review table.shop_table,
.woocommerce #order_review table.shop_table thead,
.woocommerce #order_review table.shop_table tbody,
.woocommerce #order_review table.shop_table tfoot{display:block;width:100%}
.woocommerce #order_review table.shop_table tr{display:flex;justify-content:space-between;
       align-items:baseline;gap:12px;width:100%}
.woocommerce #order_review table.shop_table tr>th{flex:1 1 auto}
.woocommerce #order_review table.shop_table tr>td{flex:0 0 auto;text-align:right}
.woocommerce #order_review table.shop_table tr.woocommerce-shipping-totals{display:block}
.woocommerce #order_review table.shop_table tr.woocommerce-shipping-totals>th{display:block;
       width:auto;flex:none;padding-bottom:6px}
.woocommerce #order_review table.shop_table tr.woocommerce-shipping-totals>td{display:block;
       width:auto;text-align:left}
.woocommerce form.checkout h3{font-size:19px;margin:0 0 14px}
.woocommerce .form-row{margin-bottom:14px}
.woocommerce .form-row label{font-size:13px;font-weight:600;margin-bottom:5px;display:block}
.woocommerce .form-row .required{color:var(--brand);text-decoration:none}
.woocommerce #order_review{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;
       box-shadow:0 4px 16px rgba(213,29,67,.06)}
.woocommerce #place_order{width:100%;background:linear-gradient(135deg,var(--brand),var(--brand-2));
       color:#fff;border:none;border-radius:12px;padding:16px;font-weight:800;font-size:16px;
       cursor:pointer;font-family:inherit;margin-top:12px}
.woocommerce #place_order:hover{opacity:.93}
.woocommerce .select2-container .select2-selection--single{height:44px;border:1px solid var(--border);
       border-radius:12px;padding:6px 8px}

/* ── Versandauswahl ────────────────────────────────────────────
   WooCommerce stellt die Versandarten als gedrängte Radioliste dar.
   Hier werden daraus anklickbare Karten mit klarem Preis. */
.woocommerce ul#shipping_method{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.woocommerce ul#shipping_method li{margin:0;padding:0;text-indent:0}
.woocommerce ul#shipping_method li label{display:flex;align-items:center;justify-content:space-between;
       gap:12px;border:1.5px solid var(--border);border-radius:12px;padding:13px 15px;cursor:pointer;
       font-weight:600;font-size:14px;margin:0;background:#fff;transition:border-color .15s,background .15s}
.woocommerce ul#shipping_method li label:hover{background:var(--card-2)}
.woocommerce ul#shipping_method li input[type=radio]{margin:0 10px 0 0;accent-color:var(--brand);
       width:18px;height:18px;flex-shrink:0}
.woocommerce ul#shipping_method li input[type=radio]:checked + label{border-color:var(--brand);
       background:var(--card-2);box-shadow:0 0 0 1px var(--brand)}
.woocommerce ul#shipping_method li .woocommerce-Price-amount{color:var(--brand);font-weight:800;
       white-space:nowrap}
.woocommerce ul#shipping_method .amount{margin-left:auto}
.woocommerce td[data-title="Versand"],.woocommerce th.shipping{vertical-align:top}
.woocommerce .woocommerce-shipping-destination{font-size:13px;color:var(--muted);margin:10px 0 0}
.woocommerce .shipping-calculator-button{font-size:13px}
/* Hinweis unter der Auswahl */
.kd-versandhinweis{font-size:13px;color:var(--muted);margin:10px 0 0;line-height:1.55}

/* ── Kundenpreise ──────────────────────────────────────────── */
.kd-preis-alt{text-decoration:line-through;color:var(--muted);font-weight:400;font-size:.72em;
       margin-right:6px}
.kd-preis-neu{color:var(--brand);font-weight:900}
.kd-rabatt-marke{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:999px;
       background:var(--brand);color:#fff;font-size:11px;font-weight:800;vertical-align:middle;
       letter-spacing:.02em}
.kd-kundenbanner{background:var(--card-2);border:1px solid var(--border);border-left:3px solid var(--brand);
       border-radius:12px;padding:13px 16px;margin:18px 0 4px;font-size:14px;color:var(--fg)}
.woocommerce ul.products li.product .kd-rabatt-marke{font-size:10px;padding:2px 7px}
.woocommerce ul.products li.product .price{display:block;padding:0 14px;line-height:1.5}

/* Konto */
.woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0 0 24px;display:flex;
       gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:12px}
.woocommerce-MyAccount-navigation li a{display:block;padding:9px 15px;border-radius:10px;
       text-decoration:none;font-weight:700;font-size:14px;color:var(--muted);background:var(--card-2)}
.woocommerce-MyAccount-navigation li.is-active a{background:linear-gradient(135deg,var(--brand),var(--brand-2));
       color:#fff}
.woocommerce-MyAccount-content{font-size:15px}
.woocommerce form.login,.woocommerce form.register{background:#fff;border:1px solid var(--border);
       border-radius:16px;padding:24px;box-shadow:0 4px 16px rgba(213,29,67,.06);max-width:460px}
.woocommerce .u-columns.col2-set{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:760px){.woocommerce .u-columns.col2-set{grid-template-columns:1fr}}
.woocommerce form.login button,.woocommerce form.register button{
       background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:none;
       border-radius:12px;padding:13px 24px;font-weight:800;cursor:pointer;font-family:inherit;font-size:15px}

/* Kontaktformular */
.kd-kontakt{padding:24px;margin:20px 0}
.kd-kontakt p{margin:0 0 14px}
.kd-kontakt .row p{margin-bottom:0}
.kd-kontakt .row{margin-bottom:14px}
.kd-kontakt textarea{resize:vertical;min-height:130px}
.kd-kontakt button{margin-top:4px}

/* Vertrauens-Leiste */
.kd-trust{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;padding:18px 0;
          border-top:1px solid var(--border);border-bottom:1px solid var(--border);
          background:var(--card-2);font-size:13px;color:var(--muted);font-weight:600}
.kd-trust span{display:inline-flex;align-items:center;gap:6px}

/* ── Footer ────────────────────────────────────────────────── */
footer{margin-top:0;padding:0;color:var(--muted);background:#1a0008}
.footer-dark{background:linear-gradient(180deg,#8a0e20 0%,#3d0410 50%,#1a0008 100%);padding:36px 0 0}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media(max-width:720px){.footer-grid{grid-template-columns:1fr;gap:20px}}
.footer-logo{height:36px;margin-bottom:12px;display:block;width:auto}
.footer-name{font-size:14px;font-weight:700;color:#fff;margin-bottom:4px}
.footer-addr{font-size:13px;color:rgba(255,255,255,.55);line-height:1.9;font-style:normal}
address{font-style:normal}
.footer-addr a{color:rgba(255,255,255,.75);text-decoration:none}
.foot-kataloge{border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:16px 20px;
               background:rgba(255,255,255,.06)}
.kicker{font-size:12px;font-weight:700;color:#fff;display:block;margin-bottom:8px}
.footer-links{display:flex;gap:12px;flex-wrap:wrap}
.footer-links a{font-size:12px;color:rgba(255,255,255,.6);text-decoration:underline}
.end{padding:12px 0;background:rgba(0,0,0,.4);width:100%;display:block;margin-top:24px}
.end small,.end a{font-size:11px;color:rgba(255,255,255,.45);text-decoration:none}

/* ── Cookie-Banner ─────────────────────────────────────────── */
.kd-cookie{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:#1a0008;
           border-top:1px solid rgba(255,255,255,.12);padding:18px 20px;display:flex;gap:14px;
           align-items:center;flex-wrap:wrap;transform:translateY(100%);transition:transform .35s ease;
           box-shadow:0 -4px 24px rgba(0,0,0,.3)}
.kd-cookie--visible{transform:translateY(0)}
.kd-cookie__text{flex:1;min-width:220px;font-size:13px;color:rgba(255,255,255,.85);line-height:1.5}
.kd-cookie__text a{color:#FF6C8E;text-decoration:underline}
.kd-cookie__actions{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}
.kd-cookie__btn{padding:9px 18px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;
                border:none;line-height:1;white-space:nowrap;font-family:inherit}
.kd-cookie__btn--accept{background:#D51D43;color:#fff}
.kd-cookie__btn--decline{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25)}
@media(max-width:600px){.kd-cookie{padding:14px 16px}.kd-cookie__actions{width:100%}
                        .kd-cookie__btn{flex:1;text-align:center}}

/* ══════════════════════════════════════════════════════════════
   Einheitliche Typografie für alle Inhaltsseiten
   ══════════════════════════════════════════════════════════════
   Ohne diese Regeln sieht jede Seite anders aus, je nachdem was
   im Editor steht. */

.section .container > h2,
.entry-content h2{margin-top:34px}
.section .container > h3,
.entry-content h3{margin-top:24px}
.entry-content p,.section p{margin:0 0 14px}
.entry-content ul,.entry-content ol,.section ul,.section ol{margin:0 0 16px;padding-left:22px}
.entry-content li,.section li{margin-bottom:6px}
.entry-content a{text-decoration:underline}
.entry-content strong{font-weight:700}
.entry-content blockquote{margin:18px 0;padding:14px 18px;background:var(--card-2);
       border-left:3px solid var(--brand);border-radius:0 12px 12px 0}
.entry-content em{color:var(--muted)}

/* Tabellen in Inhaltsseiten wie die Staffeltabelle behandeln */
.entry-content table,.section table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px;
       background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.entry-content th,.section th{padding:10px 12px;text-align:left;font-weight:700;font-size:13px;
       background:var(--card-2);border-bottom:1px solid var(--border)}
.entry-content td,.section td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.entry-content tr:last-child td,.section tr:last-child td{border-bottom:none}
@media(max-width:640px){
  .entry-content table,.section table{display:block;overflow-x:auto;white-space:nowrap}
}

/* Aufklappbare Bereiche (Preisstufen, Mengenrabatt) */
details{border:1px solid var(--border);border-radius:12px;background:#fff;padding:0;margin:16px 0}
details summary{padding:13px 16px;cursor:pointer;font-weight:700;font-size:14px;list-style:none;
       display:flex;align-items:center;justify-content:space-between;gap:10px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+';font-size:18px;color:var(--brand);font-weight:700;line-height:1}
details[open] summary::after{content:'–'}
details summary:hover{background:var(--card-2)}
details > *:not(summary){padding:0 16px 14px}
details .kd-staffel{width:calc(100% - 32px);margin:0 16px 14px}

/* ── Ladeplatzhalter (verhindert Layout-Shift = besserer CLS) ─ */
.skeleton{position:relative;overflow:hidden;background:#f0e0e5;border-radius:8px}
.skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
       background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);
       animation:kd-shimmer 1.4s infinite}
@keyframes kd-shimmer{to{transform:translateX(100%)}}

/* ══════════════════════════════════════════════════════════════
   KONTO, BESTELLUNG, WARENKORB — Gliederung in Kästchen
   ══════════════════════════════════════════════════════════════
   WooCommerce liefert diese Seiten als lose Folge von Überschriften
   und Tabellen ohne jede Trennung. Hier bekommt jeder Bereich einen
   eigenen Rahmen, damit man auf einen Blick sieht, was zusammengehört.
   ══════════════════════════════════════════════════════════════ */

/* Ein wiederverwendbarer Kasten */
.woocommerce .kd-kasten,
.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-Addresses .woocommerce-Address,
.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-customer-details,
.woocommerce .woocommerce-order-downloads{
	background:#fff;border:1px solid var(--border);border-radius:16px;
	padding:22px;margin-bottom:18px;
	box-shadow:0 4px 16px rgba(213,29,67,.06)}

/* Überschrift im Kasten sitzt bündig und bekommt eine Trennlinie */
.woocommerce .woocommerce-order-details > h2,
.woocommerce .woocommerce-customer-details > h2,
.woocommerce-account .woocommerce-Address > h3,
.woocommerce .woocommerce-order-downloads > h2{
	font-size:17px;margin:0 0 14px;padding-bottom:12px;
	border-bottom:1px solid var(--border)}

/* Tabellen im Kasten brauchen keinen zweiten Rahmen */
.woocommerce .woocommerce-order-details table.shop_table,
.woocommerce .woocommerce-order-downloads table.shop_table{
	border:none;border-radius:0;margin:0}

/* ── Kontoübersicht: Navigation als Kachelreihe ─────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
	list-style:none;padding:0;margin:0 0 22px;
	display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
	display:block;padding:13px 15px;background:#fff;
	border:1px solid var(--border);border-radius:12px;
	text-decoration:none;color:var(--fg);font-weight:600;font-size:14px;
	transition:border-color .15s,box-shadow .15s}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
	border-color:var(--brand);color:var(--brand)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
	border-color:var(--brand);color:var(--brand);
	box-shadow:0 3px 12px rgba(213,29,67,.12)}

/* Adressen nebeneinander */
.woocommerce-account .woocommerce-Addresses{
	display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){
	.woocommerce-account .woocommerce-Addresses{grid-template-columns:1fr}}
.woocommerce-account .woocommerce-Addresses .woocommerce-Address{margin-bottom:0}

/* Bestellhistorie */
.woocommerce-account .woocommerce-orders-table{
	background:#fff;border:1px solid var(--border);border-radius:16px;
	border-collapse:separate;border-spacing:0;overflow:hidden;
	box-shadow:0 4px 16px rgba(213,29,67,.06)}
.woocommerce-account .woocommerce-orders-table th{
	background:var(--card-2);font-size:12px;text-transform:uppercase;
	letter-spacing:.05em;padding:12px 14px}
.woocommerce-account .woocommerce-orders-table td{padding:14px}

/* Der Downloadknopf für die eigene Druckdatei */
.kd-datei-download{margin:8px 0 0}
.kd-datei-download a{
	display:inline-flex;align-items:center;gap:7px;
	padding:7px 13px;border-radius:9px;font-size:13px;font-weight:700;
	border:1.5px solid var(--border);color:var(--fg)!important;text-decoration:none;
	background:#fff}
.kd-datei-download a::before{content:'\2913';font-size:14px;line-height:1;color:var(--brand)}
.kd-datei-download a:hover{border-color:var(--brand);color:var(--brand)!important}

/* ── Passwortstärke ─────────────────────────────────────────────
   WooCommerce blendet hier einen Hinweis ein, der ohne eigene Regeln
   als grellgelber Balken quer über das Formular läuft und die Ecken
   des Feldes überdeckt. */
.woocommerce .woocommerce-password-strength{
	display:block;margin-top:8px;padding:9px 13px;
	border-radius:10px;font-size:13px;font-weight:600;text-align:left;
	border:1px solid transparent;background:var(--card-2);color:var(--muted)}
.woocommerce .woocommerce-password-strength.short,
.woocommerce .woocommerce-password-strength.bad{
	background:var(--fail-bg);border-color:var(--fail-br);color:var(--fail)}
.woocommerce .woocommerce-password-strength.good{
	background:var(--warn-bg);border-color:var(--warn-br);color:var(--warn)}
.woocommerce .woocommerce-password-strength.strong{
	background:var(--ok-bg);border-color:var(--ok-br);color:var(--ok)}
.woocommerce .woocommerce-password-hint{
	display:block;margin-top:7px;font-size:12.5px;color:var(--muted);line-height:1.5}

/* Das Auge zum Einblenden sass halb im Feldrand */
.woocommerce .password-input,
.woocommerce-page .password-input{display:block;position:relative}
.woocommerce .password-input input{padding-right:44px}
.woocommerce .show-password-input{
	position:absolute;right:12px;top:13px;cursor:pointer;
	background:none;border:none;padding:0;line-height:1}

/* ── Warenkorb: Positionen und Summe klarer trennen ────────── */
.woocommerce table.cart{
	background:#fff;border:1px solid var(--border);border-radius:16px;
	border-collapse:separate;border-spacing:0;overflow:hidden;
	box-shadow:0 4px 16px rgba(213,29,67,.06)}
.woocommerce table.cart thead th{
	background:var(--card-2);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.woocommerce table.cart tr.cart_item:last-of-type td{border-bottom:none}
.woocommerce table.cart td.actions{background:var(--card-2);padding:16px 14px}

/* ── Kasse: die Abschnitte auseinanderziehen ────────────────── */
.woocommerce form.checkout #customer_details .col-1,
.woocommerce form.checkout #customer_details .col-2{
	background:#fff;border:1px solid var(--border);border-radius:16px;
	padding:22px;margin-bottom:16px;
	box-shadow:0 4px 16px rgba(213,29,67,.06)}
.woocommerce form.checkout #customer_details h3{
	font-size:17px;margin:0 0 16px;padding-bottom:12px;
	border-bottom:1px solid var(--border)}

/* ══════════════════════════════════════════════════════════════
   Gratis-Artikel
   ══════════════════════════════════════════════════════════════ */

.kd-gratis-preis{
	display:inline-block;padding:3px 12px;border-radius:999px;
	background:var(--ok-bg);border:1px solid var(--ok-br);color:var(--ok);
	font-weight:900;font-size:15px;letter-spacing:.02em;text-transform:uppercase}
.woocommerce div.product .kd-gratis-preis{font-size:20px;padding:5px 16px}

/* Eckband auf der Kachel — sitzt über dem Bild */
.woocommerce ul.products li.product{position:relative}
.kd-gratis-band{
	position:absolute;top:12px;left:12px;z-index:3;
	background:linear-gradient(135deg,#1a7f4b,#25a862);color:#fff;
	padding:5px 13px;border-radius:999px;
	font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
	box-shadow:0 3px 10px rgba(26,127,75,.32)}

.kd-gratis-hinweis{
	background:var(--ok-bg);border:1px solid var(--ok-br);color:var(--ok);
	border-radius:12px;padding:13px 15px;margin:0 0 18px;font-size:14px;line-height:1.55}

/* ══════════════════════════════════════════════════════════════
   Bestätigung der Datencheck-Hinweise
   ══════════════════════════════════════════════════════════════ */

.kd-warnliste{margin:12px 0 4px;padding-left:20px;font-size:13.5px;line-height:1.6}
.kd-warnliste li{margin-bottom:5px}
.kd-warnliste__datei{color:var(--muted);font-weight:400}

.kd-bestaetigung .kd-check__confirm{
	display:flex;gap:11px;align-items:flex-start;
	margin-top:14px;padding-top:13px;border-top:1px solid var(--warn-br);
	font-size:13.5px;line-height:1.55;cursor:pointer}
.kd-bestaetigung .kd-check__confirm input{
	width:19px;height:19px;flex:0 0 auto;margin-top:1px;cursor:pointer;accent-color:var(--brand)}

/* ══════════════════════════════════════════════════════════════
   Warenkorb: Summe neben die Positionen
   ══════════════════════════════════════════════════════════════
   Die Summe stand bisher unter der ganzen Tabelle. Bei drei, vier
   Positionen muss man dafür scrollen, um zu sehen, was es kostet
   und was der Versand macht — genau die Zahl, wegen der man auf
   die Seite geht. Zweispaltig steht sie oben rechts im Blick.
   ══════════════════════════════════════════════════════════════ */

@media(min-width:981px){
	.woocommerce .kd-warenkorb{
		display:grid;grid-template-columns:minmax(0,1fr) 340px;
		gap:24px;align-items:start}
	.woocommerce .kd-warenkorb > form.woocommerce-cart-form{
		grid-column:1;min-width:0;margin:0}
	.woocommerce .kd-warenkorb > .cart-collaterals{
		grid-column:2;margin:0;position:sticky;top:86px}
	.woocommerce .kd-warenkorb .cart_totals{max-width:none;margin-left:0}

	/*
	 * Sicherheitsnetz: Alles, was sonst noch zwischen den beiden Haken
	 * landet — Meldungen, Hinweise anderer Plugins — bekommt die volle
	 * Breite, statt eine der zwei Spalten zu besetzen und den Rest zu
	 * verschieben. Ohne diese Regel haengt das Layout an der Reihenfolge
	 * fremder Hooks, und die kann sich mit jedem Update aendern.
	 */
	.woocommerce .kd-warenkorb > *:not(form.woocommerce-cart-form):not(.cart-collaterals){
		grid-column:1 / -1}
}

/* ── Kopfzeile und Zellen sauber ausrichten ──────────────────
   „Artikel entfernen", Vorschaubild und Produktname standen nicht
   auf einer Linie: das Löschkreuz klebte oben, das Bild war zu
   gross und der Name sass darunter statt daneben. */
.woocommerce table.cart th.product-remove,
.woocommerce table.cart th.product-thumbnail{font-size:0}
.woocommerce table.cart td,
.woocommerce table.cart th{vertical-align:middle}
.woocommerce table.cart td.product-thumbnail{padding:10px 6px}
.woocommerce table.cart td.product-thumbnail img{
	width:56px;height:56px;object-fit:contain;
	background:var(--card-2);border:1px solid var(--border);border-radius:9px;
	padding:4px;display:block}
.woocommerce table.cart td.product-remove{vertical-align:middle}
.woocommerce table.cart td.product-remove a.remove{
	display:flex;align-items:center;justify-content:center;
	width:28px;height:28px;margin:0 auto;
	border-radius:50%;background:var(--card-2);border:1px solid var(--border);
	color:var(--muted)!important;font-size:17px;line-height:1;
	text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.woocommerce table.cart td.product-remove a.remove:hover{
	background:var(--fail-bg);border-color:var(--fail-br);color:var(--fail)!important}
/* Die Ampel darf die Zeilenhöhe bestimmen, ohne die Zellen zu verschieben */
.woocommerce table.cart td.product-name{vertical-align:middle;padding-top:12px;padding-bottom:12px}

/* ══════════════════════════════════════════════════════════════
   Kleinkram
   ══════════════════════════════════════════════════════════════ */

/* Der Seitenkopf schob sich durch das offene Aufklappmenü.
   Beides lag im selben Stapel, der Kopf kam später im Quelltext
   und gewann damit — sichtbar als Strich quer durch „Ratgeber". */
header{z-index:200}
.hat-untermenue.offen{z-index:300}
.untermenue{z-index:300;background:#fff}

/* Produktseite: die letzten Blöcke sassen unterschiedlich weit
   vom Fussbereich weg, je nachdem ob es Zubehör gab. */
.woocommerce div.product{margin-bottom:0;padding-bottom:8px}
.woocommerce div.product .summary > *:last-child{margin-bottom:0}
.woocommerce div.product .kd-staffel{margin-bottom:0}
.woocommerce div.product details:last-child{margin-bottom:0}
.woocommerce-page main .container > .woocommerce{padding-bottom:44px}
.woocommerce .related.products,
.woocommerce .upsells.products{margin-top:44px;padding-top:32px;
	border-top:1px solid var(--border)}

/* ══════════════════════════════════════════════════════════════
   MOBIL
   Die Blöcke weiter oben decken Tablet-Breiten ab. Hier geht es um
   echte Telefone, also 360 bis 430 Punkte Breite.
   ══════════════════════════════════════════════════════════════ */

/* ── Der wichtigste Punkt zuerst ────────────────────────────────
   Safari auf dem iPhone zoomt in die Seite, sobald man ein Feld
   antippt, dessen Schrift kleiner als 16px ist. Der Kunde landet
   dann mitten im Bezahlvorgang in einer vergrösserten Ansicht und
   muss von Hand herauszoomen — ein häufiger Abbruchgrund.
   16px verhindert das, ohne dass die Felder gross wirken. */
@media(max-width:900px){
  input,select,textarea,
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select,
  .select2-container .select2-selection__rendered{font-size:16px}
  .woocommerce table.cart td.product-quantity input.qty{font-size:16px}
}

@media(max-width:640px){

  /* ── Kopfzeile ───────────────────────────────────────────────
     Logo, Konto, Warenkorb und Burger teilen sich rund 360 Punkte.
     Etwas engere Abstände, damit nichts überlappt. */
  .nav img{height:34px}
  .nav-aktionen{right:54px;gap:5px}
  .konto-link{padding:9px 10px}
  .cart-link{padding:9px 11px}
  .burger{right:8px;padding:9px 12px}

  /* Fingerfreundliche Ziele: 44 Punkte sind das übliche Mindestmass */
  .mobile-menu a{padding:14px 0;min-height:44px;display:flex;align-items:center}
  .mobile-menu .menu-gruppe{min-height:0;display:block}

  /* ── Titelbereich ────────────────────────────────────────── */
  .hero-new{padding:32px 0 28px}
  .hero-lead{font-size:15px;margin-bottom:20px}
  .hero-facts{gap:10px 16px;margin-top:16px}
  .page-header{padding:22px 0 20px}

  /* Die beiden Knöpfe im Titelbereich nebeneinander sind zu eng.
     Untereinander über die volle Breite trifft man sicher. */
  .hero-cta{display:flex;flex-direction:column;gap:10px}
  .hero-cta .btn-white,.hero-cta .btn-ghost{justify-content:center;width:100%;padding:13px 18px}

  /* ── Zahlenleiste ────────────────────────────────────────── */
  .stat-cell{padding:13px 5px}

  /* ── Abschnitte etwas zusammenrücken ─────────────────────── */
  .section,.section-tinted,.section-dark{padding:38px 0}

  /* ── Datei-Upload ────────────────────────────────────────── */
  .kd-upload{padding:18px 14px}
  .kd-upload .kd-upload-hint{font-size:12px}

  /* ── Mengenrabatt-Tabelle in Aufklappern ─────────────────── */
  details > *:not(summary){padding:0 12px 12px}
  details .kd-staffel{width:calc(100% - 24px);margin:0 12px 12px}
  .kd-staffel th,.kd-staffel td{padding:8px 9px;font-size:13px}
}

/* ── Warenkorb als Karten statt als Tabelle ────────────────────
   Fünf Spalten passen nicht auf ein Telefon. Statt zu quetschen
   lösen wir die Tabelle auf: jede Position wird eine Karte, und
   die Spaltenüberschrift wandert als Beschriftung vor den Wert.
   WooCommerce schreibt dafür in jede Zelle ein data-title. */
@media(max-width:560px){

  .woocommerce table.cart,
  .woocommerce table.cart tbody,
  .woocommerce table.cart tr,
  .woocommerce table.cart td{display:block;width:auto}

  .woocommerce table.cart thead{display:none}

  .woocommerce table.cart tr.cart_item{
    position:relative;
    border:1px solid var(--border);border-radius:14px;
    padding:14px 44px 14px 14px;margin-bottom:12px;background:#fff;
    box-shadow:0 3px 12px rgba(213,29,67,.05)}

  .woocommerce table.cart tr.cart_item td{
    border:none;padding:5px 0;font-size:14px;
    display:flex;align-items:baseline;justify-content:space-between;gap:14px}

  /* Beschriftung aus der Spaltenüberschrift */
  .woocommerce table.cart tr.cart_item td::before{
    content:attr(data-title);
    font-size:12px;font-weight:600;color:var(--muted);
    flex:0 0 auto;text-transform:none}

  /* Der Produktname steht als Titel oben, ohne Beschriftung */
  .woocommerce table.cart tr.cart_item td.product-name{
    display:block;padding:0 0 8px}
  .woocommerce table.cart tr.cart_item td.product-name::before{content:none}
  .woocommerce table.cart tr.cart_item td.product-name > a{
    font-size:16px;font-weight:700;line-height:1.35}

  /* Das Löschkreuz in die obere rechte Ecke der Karte */
  .woocommerce table.cart tr.cart_item td.product-remove{
    position:absolute;top:10px;right:8px;padding:0;width:auto;
    display:flex;align-items:center;justify-content:center}
  .woocommerce table.cart tr.cart_item td.product-remove::before{content:none}
  .woocommerce table.cart tr.cart_item td.product-remove a.remove{
    width:34px;height:34px;line-height:34px;font-size:20px}

  /* Zwischensumme hervorheben — das ist die Zahl, die zählt */
  .woocommerce table.cart tr.cart_item td.product-subtotal{
    margin-top:6px;padding-top:9px;border-top:1px solid var(--border);font-size:16px}

  /* Die Datencheck-Ampel über die volle Kartenbreite */
  .woocommerce table.cart tr.cart_item td .kd-check{
    display:block;width:100%;margin:10px 0 2px}

  /* Menge: Feld rechts, gut treffbar */
  .woocommerce table.cart tr.cart_item td.product-quantity input.qty{
    width:84px;padding:10px;min-height:44px}

  /* Die Zeile mit Gutschein und „Warenkorb aktualisieren" */
  .woocommerce table.cart tr td.actions{
    padding:4px 0 0;display:block;border:none}
  .woocommerce table.cart tr td.actions::before{content:none}
  .woocommerce .coupon{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
  .woocommerce .coupon input[type=text]{
    max-width:none;width:100%;margin-right:0;min-height:46px}
  .woocommerce .coupon .button,
  .woocommerce table.cart td.actions .button{width:100%;min-height:46px}

  /* Summenkarte über die volle Breite */
  .woocommerce .cart_totals{max-width:none;margin-left:0;padding:18px}
  .woocommerce .cart_totals .order-total td{font-size:20px}

  /* ── Kasse ─────────────────────────────────────────────────── */
  .woocommerce #order_review{padding:16px}
  .woocommerce #payment ul.payment_methods li{padding:14px 12px}
  .woocommerce #place_order{min-height:52px;font-size:17px}

  /* Bestellübersicht in der Kasse ebenfalls entzerren */
  .woocommerce table.shop_table.woocommerce-checkout-review-order-table th,
  .woocommerce table.shop_table.woocommerce-checkout-review-order-table td{
    padding:11px 8px;font-size:14px}

  /* ── Konto ─────────────────────────────────────────────────── */
  .woocommerce-account .woocommerce-MyAccount-navigation ul{
    display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0 0 18px;list-style:none}
  .woocommerce-account .woocommerce-MyAccount-navigation li a{
    display:block;padding:9px 13px;border:1px solid var(--border);border-radius:999px;
    font-size:13px;text-decoration:none;min-height:38px;line-height:20px}

  /* Bestellhistorie: die Tabelle darf seitlich scrollen */
  .woocommerce-account .woocommerce-orders-table{display:block;overflow-x:auto}
}

/* ── Sehr schmale Geräte ───────────────────────────────────────
   iPhone SE und ältere Android-Geräte melden 320 Punkte. */
@media(max-width:360px){
  .container{width:94vw}
  .nav img{height:30px}
  .konto-link{padding:8px}
  .cart-link{padding:8px 9px}
  .stat-cell{padding:11px 3px}
  .hero-title{font-size:27px}
}

/* Versandhinweis beim Gratis-Muster */
.kd-versand-gratis{
	background:var(--ok-bg);border:1px solid var(--ok-br);color:var(--ok);
	border-radius:11px;padding:11px 14px;margin:0 0 14px;
	font-size:13.5px;font-weight:600;line-height:1.5}

/* === Warenkorb-Summe bricht um ===================================
   Die allgemeine Tabellenregel weiter oben setzt auf schmalen Geraeten
   white-space:nowrap, damit Inhaltstabellen seitlich scrollen koennen.
   Fuer Warenkorb und Kasse ist das falsch: "Versand mit der Post
   (B-Post): CHF 8.00" schiebt dort die ganze Seite nach rechts.
   Zudem ist die Summenkarte ein Grid-Element und braucht min-width:0,
   sonst waechst sie auf ihre Mindestinhaltsbreite. */
@media(max-width:640px){
	.woocommerce table.shop_table,
	.woocommerce table.shop_table th,
	.woocommerce table.shop_table td{white-space:normal}
}
.woocommerce .cart-collaterals{grid-template-columns:minmax(0,1fr)}
.woocommerce .cart_totals,
.woocommerce .cart_totals table,
.woocommerce .cart_totals th,
.woocommerce .cart_totals td{min-width:0}
.woocommerce .cart_totals td,
.woocommerce ul#shipping_method li label{overflow-wrap:anywhere}