/* NEXINSTALL – Stylesheet für die Shop-Seiten */
@import url('/assets/seite.css');

main.shop { max-width: 1140px; }

/* Brotkrumen */
.krumen { font-size: 13px; color: #66748e; margin-bottom: 14px; }
.krumen a { color: #66748e; text-decoration: none; }
.krumen a:hover { color: var(--blue2); text-decoration: underline; }
.krumen span { margin: 0 6px; opacity: .5; }

.seitenkopf { margin-bottom: 26px; }
.seitenkopf p.lead { font-size: 17px; color: #3d4759; max-width: 62ch; }

.seitenkopf { margin-bottom: 26px; }
.seitenkopf p.lead { font-size: 17px; color: #3d4759; max-width: 62ch; }

/* Kategorie-Kacheln */
.kats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 22px 0 34px; }
.kat { display: block; background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px; text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s; }
.kat:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -28px rgba(10,30,80,.45); }
.kat b { display: block; font-family: var(--fd); font-size: 17px; color: var(--deep); margin-bottom: 4px; }
.kat span { font-size: 13.5px; color: #66748e; }

/* Produktseite */
.pdp { display: grid; gap: 30px; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 780px) { .pdp { grid-template-columns: 1fr; gap: 22px; } }

.galerie img.gross { width: 100%; border-radius: 16px; border: 1px solid var(--line); background: #eef3fb; }
.mini { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mini img { width: 66px; height: 50px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line);
  cursor: pointer; background: #eef3fb; transition: border-color .15s; }
.mini img:hover, .mini img.aktiv { border-color: var(--blue); }

.preisblock { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.preis { font-family: var(--fd); font-weight: 700; font-size: 30px; color: var(--deep); line-height: 1.1; }
.preis .einheit { font-size: 17px; font-weight: 500; color: #55627a; }
.grund { font-size: 13.5px; color: #55627a; margin-top: 4px; }
.steuer { font-size: 13px; color: #7b899e; margin-top: 2px; }
.fakten { list-style: none; margin: 16px 0 0; padding: 0; font-size: 14px; }
.fakten li { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px solid #eef1f6; }
.fakten li:last-child { border-bottom: 0; }
.fakten b { min-width: 116px; color: #55627a; font-weight: 500; }

.knopf { display: inline-block; margin-top: 16px; background: var(--blue); color: #fff; border: 0;
  font-family: var(--fb); font-size: 15px; font-weight: 600; padding: 13px 24px; border-radius: 11px;
  cursor: pointer; text-decoration: none; transition: background .18s; }
.knopf:hover { background: var(--blue2); color: #fff; }
.knopf.zweit { background: transparent; color: var(--blue2); border: 1px solid var(--line); }
.knopf.zweit:hover { background: var(--ice); }

table.technik { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
table.technik td { padding: 8px 10px 8px 0; border-bottom: 1px solid #eef1f6; vertical-align: top; }
table.technik td:first-child { color: #55627a; width: 40%; }

/* Anfrageformular */
.formular { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin-top: 34px; }
.formular h2 { margin-top: 0; }
.felder { display: grid; gap: 13px; grid-template-columns: 1fr 1fr; margin-top: 14px; }
@media (max-width: 620px) { .felder { grid-template-columns: 1fr; } }
.feld { display: flex; flex-direction: column; gap: 5px; }
.feld.voll { grid-column: 1 / -1; }
.feld label { font-size: 13px; font-weight: 500; color: #46536b; }
.feld input, .feld textarea, .feld select {
  font: inherit; font-size: 15px; padding: 11px 13px; border: 1px solid #cdd6e3; border-radius: 10px;
  background: #fbfcfe; color: var(--ink); width: 100%; }
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.feld textarea { min-height: 96px; resize: vertical; }
.hinw { font-size: 12.5px; color: #7b899e; }
.zustimmung { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: #46536b; grid-column: 1 / -1; }
.zustimmung input { width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto; }
.meldung { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 14px; display: none; }
.meldung.ok { display: block; background: #dcefdf; color: #1c5b2b; }
.meldung.fehler { display: block; background: #f7e2dd; color: #8d2f12; }

.weiter { margin-top: 40px; }
.weiter h2 { margin-bottom: 12px; }
/* ===================================================================
   Kopfzeile: Menü links, Logo mittig, Warenkorb rechts
   =================================================================== */
.kopf { position: sticky; top: 0; z-index: 30; background: rgba(243,247,254,.92);
  backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 var(--line); }
.kopf .in { max-width: 1140px; margin: 0 auto; padding: 10px clamp(12px,3vw,28px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.kopf .links-block { display: flex; align-items: center; gap: 6px; justify-self: start; }
.kopf .rechts-block { display: flex; align-items: center; gap: 8px; justify-self: end; }
.kopf .logo-img { height: 40px; width: auto; display: block; }
@media (max-width: 700px) { .kopf .logo-img { height: 32px; } }

.burger { display: none; width: 42px; height: 42px; border: 0; background: none; cursor: pointer;
  border-radius: 10px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; }
.burger:hover { background: var(--ice); }
.burger span { display: block; width: 19px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu { display: flex; align-items: center; gap: 2px; }
.menu a { font-size: 14px; font-weight: 500; color: #3d4759; text-decoration: none;
  padding: 8px 11px; border-radius: 9px; white-space: nowrap; }
.menu a:hover { background: var(--ice); color: var(--blue2); }
.menu a.aktiv { color: var(--blue2); background: var(--ice); }

.korb { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--line); background: var(--white);
  border-radius: 12px; cursor: pointer; color: var(--ink); }
.korb:hover { border-color: var(--blue); color: var(--blue2); }
.korb svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.korb .cnt { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 10px; background: #f08b1d; color: #fff;
  font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.tel-knopf { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 15px;
  border-radius: 12px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 600;
  text-decoration: none; white-space: nowrap; }
.tel-knopf:hover { background: var(--blue2); color: #fff; }
.tel-knopf svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

@media (max-width: 860px) {
  .burger { display: flex; }
  .menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: stretch; gap: 0; background: var(--white); border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 40px -30px rgba(10,30,80,.5); padding: 8px; display: none; }
  .menu.offen { display: flex; }
  .menu a { padding: 13px 14px; font-size: 15.5px; }
  .tel-knopf span { display: none; }
  .tel-knopf { padding: 0; width: 44px; justify-content: center; }
}

/* ===================================================================
   Warenkorb
   =================================================================== */
.korb-hinweis { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--deep); color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 14.5px;
  box-shadow: 0 20px 44px -22px rgba(10,30,80,.7); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 60; max-width: 90vw; text-align: center; }
.korb-hinweis.an { opacity: 1; transform: translate(-50%, 0); }

.korb-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(10,20,40,.55);
  backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px; overflow-y: auto; }
.korb-fenster { position: relative; background: var(--paper); border-radius: 20px;
  width: 100%; max-width: 700px; padding: 26px clamp(18px,3vw,32px) 30px;
  box-shadow: 0 40px 90px -40px rgba(10,30,80,.75); }
.korb-zu { position: absolute; top: 12px; right: 14px; width: 38px; height: 38px; border: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px; font-size: 22px;
  line-height: 1; cursor: pointer; color: #55627a; }
.korb-zu:hover { color: var(--ink); border-color: var(--blue); }
.korb-fenster h2 { margin: 0 0 16px; font-size: clamp(20px,3vw,25px); }
.korb-fenster h3 { margin: 0 0 4px; font-size: 17px; }
.korb-leer { color: #55627a; margin-bottom: 16px; }

.korb-liste { display: flex; flex-direction: column; gap: 2px; }
.korb-zeile { display: grid; grid-template-columns: 64px 1fr auto auto auto; gap: 12px;
  align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.korb-zeile img, .korb-kein-bild { width: 64px; height: 48px; object-fit: cover;
  border-radius: 8px; background: #e6eefc; }
.korb-text { min-width: 0; }
.korb-text a { display: block; font-weight: 600; font-size: 14.5px; color: var(--ink);
  text-decoration: none; line-height: 1.3; }
.korb-text a:hover { color: var(--blue2); text-decoration: underline; }
.korb-text span { display: block; font-size: 12px; color: #6c7a92; margin-top: 2px; }
.korb-menge { display: flex; align-items: center; gap: 2px; }
.korb-menge button { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--white);
  border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; color: #46536b; }
.korb-menge button:hover { border-color: var(--blue); color: var(--blue2); }
.korb-menge input { width: 48px; height: 30px; text-align: center; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-size: 14px; background: var(--white); }
.korb-summe { font-weight: 700; font-size: 14.5px; min-width: 78px; text-align: right; }
.korb-weg { width: 30px; height: 30px; border: 0; background: none; font-size: 20px; line-height: 1;
  color: #9fadc2; cursor: pointer; border-radius: 8px; }
.korb-weg:hover { color: #b3411b; background: #f7e2dd; }
@media (max-width: 560px) {
  .korb-zeile { grid-template-columns: 52px 1fr auto; grid-template-areas: "b t w" "b m s"; row-gap: 6px; }
  .korb-zeile img, .korb-kein-bild { grid-area: b; width: 52px; height: 40px; }
  .korb-text { grid-area: t; } .korb-menge { grid-area: m; } .korb-summe { grid-area: s; }
  .korb-weg { grid-area: w; }
}

.korb-uebergabe { margin-top: 18px; }
.korb-uebergabe > span { display: block; font-size: 13px; color: #55627a; margin-bottom: 7px; }
.korb-wahl { display: flex; gap: 8px; flex-wrap: wrap; }
.korb-wahl button { flex: 1; min-width: 150px; padding: 11px 14px; border: 1px solid var(--line);
  background: var(--white); border-radius: 11px; font: inherit; font-size: 14px; cursor: pointer; color: #46536b; }
.korb-wahl button.aktiv { border-color: var(--blue); background: var(--ice); color: var(--blue2); font-weight: 600; }
.korb-wahl button[disabled] { opacity: .5; cursor: not-allowed; }

.korb-summen { margin-top: 18px; background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px; font-size: 14.5px; }
.korb-summen > div { display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding: 4px 0; flex-wrap: wrap; }
.korb-summen .gesamt { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px;
  font-family: var(--fd); font-size: 19px; font-weight: 700; color: var(--deep); }
.korb-frei { flex-basis: 100%; font-style: normal; font-size: 12.5px; color: #a06212; }
.korb-steuer { margin: 8px 0 0; font-size: 12.5px; color: #7b899e; }

.korb-form { margin-top: 22px; }
.korb-form .hinw { font-size: 12.5px; color: #7b899e; margin-bottom: 4px; }



/* ===================================================================
   Shop-Stile, identisch zur Startseite
   =================================================================== */
/* ===================================================================
   NEXINSTALL SHOP — rein additiv. Nutzt die bestehenden Design-Tokens
   (--blue, --deep, --ink, --paper, --line, --sun, --fd, --fb).
   =================================================================== */

/* ---------- Kopfbereich / Toolbar ---------- */
.shop-sec .sec-lead{margin-bottom:6px}
.shop-note{display:flex;align-items:flex-start;gap:12px;margin-top:26px;padding:15px 19px;
  background:rgba(255,206,77,.13);border:1px solid rgba(255,206,77,.5);border-radius:16px;
  font-size:14.5px;color:#4a3b12;max-width:62ch}
.shop-note svg{width:20px;height:20px;flex:0 0 auto;stroke:#a8791a;fill:none;stroke-width:2;margin-top:1px}
.shop-note b{color:#3a2d09}
.shop-tools{margin-top:40px;display:flex;flex-direction:column;gap:16px}
.shop-cats{display:flex;gap:9px;flex-wrap:wrap}
.shop-chip{font-family:var(--fb);font-size:13.5px;font-weight:600;color:#46546d;cursor:pointer;
  background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:100px;padding:9px 18px;
  backdrop-filter:blur(8px);transition:transform .2s,background .25s,color .25s,border-color .25s,box-shadow .25s;white-space:nowrap}
.shop-chip:hover{transform:translateY(-2px);background:#fff;color:var(--deep)}
.shop-chip.on{background:linear-gradient(180deg,var(--blue),var(--blue2));color:#fff;border-color:transparent;
  box-shadow:0 12px 26px -10px rgba(31,107,255,.75)}
.shop-chip .n{opacity:.55;font-weight:500;margin-left:5px;font-size:12px}
.shop-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.shop-search{position:relative;flex:1 1 260px;min-width:200px}
.shop-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;
  stroke:#8494ad;fill:none;stroke-width:2;pointer-events:none}
.shop-search input{width:100%;font-family:var(--fb);font-size:14.5px;color:var(--ink);
  background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:100px;padding:13px 18px 13px 42px;
  backdrop-filter:blur(8px);transition:border-color .25s,box-shadow .25s,background .25s}
.shop-search input:focus{outline:0;background:#fff;border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,107,255,.13)}
.shop-select{font-family:var(--fb);font-size:14px;font-weight:500;color:#37445c;cursor:pointer;
  background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:100px;padding:13px 40px 13px 18px;
  backdrop-filter:blur(8px);appearance:none;-webkit-appearance:none;transition:border-color .25s,box-shadow .25s;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238494ad' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:15px}
.shop-select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,107,255,.13)}
.shop-toggle{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;color:#37445c;cursor:pointer;
  background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:100px;padding:12px 18px;user-select:none;
  transition:border-color .25s,color .25s,background .25s}
.shop-toggle:hover{background:#fff}
.shop-toggle input{width:16px;height:16px;accent-color:var(--blue);cursor:pointer;margin:0}
.shop-toggle.on{border-color:var(--blue);color:var(--deep);background:#fff}
.shop-count{font-size:13.5px;color:#7183a0;margin-left:auto;white-space:nowrap}
/* ---------- Produkt-Grid ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.shop-empty{grid-column:1/-1;text-align:center;padding:70px 20px;color:#7183a0}
.shop-empty svg{width:46px;height:46px;stroke:#b3c1d8;fill:none;stroke-width:1.6;margin:0 auto 16px}
.shop-empty b{display:block;font-family:var(--fd);font-size:19px;color:var(--ink);margin-bottom:7px}
.pcard{display:flex;flex-direction:column;background:linear-gradient(180deg,#fff,#fbfdff);
  border:1px solid var(--line);border-radius:22px;overflow:hidden;position:relative;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .4s}
.pcard::after{content:"";position:absolute;inset:0;border-radius:22px;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(31,107,255,.4),transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask-composite:exclude;opacity:0;transition:opacity .4s}
.pcard:hover{transform:translateY(-9px);box-shadow:var(--shadow);border-color:transparent}
.pcard:hover::after{opacity:1}
.pcard.out{opacity:.72}
.pcard-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#eef3fb;cursor:pointer}
.pcard-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .65s cubic-bezier(.22,1,.36,1)}
.pcard:hover .pcard-media img{transform:scale(1.055)}
.pcard-badges{position:absolute;top:12px;left:12px;right:12px;z-index:2;display:flex;gap:7px;flex-wrap:wrap}
.pbadge{font-family:var(--fb);font-size:11.5px;font-weight:700;letter-spacing:.02em;border-radius:100px;
  padding:5px 11px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3)}
.pbadge.sale{background:linear-gradient(135deg,#ff5c5c,#e01f1f);color:#fff;border-color:transparent;
  box-shadow:0 8px 20px -8px rgba(224,31,31,.7)}
.pbadge.new{background:linear-gradient(135deg,var(--sun),#f0a91c);color:#3a2d09;border-color:transparent;
  box-shadow:0 8px 20px -8px rgba(240,169,28,.7)}
.pbadge.soldout{background:rgba(10,20,36,.78);color:#fff}
.pcard-shot{position:absolute;bottom:12px;left:12px;z-index:2;display:flex;gap:6px}
.ptag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:#fff;
  background:rgba(10,20,36,.55);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);
  border-radius:100px;padding:5px 11px}
.ptag svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4}
.pcard-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.pcard-cat{font-family:var(--fd);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);margin-bottom:9px}
.pcard-body h3{font-family:var(--fd);font-size:19.5px;line-height:1.2;letter-spacing:-.015em;color:var(--ink);margin-bottom:9px}
.pcard-desc{font-size:14.3px;color:#46546d;line-height:1.6;flex:1}
.pcard-stock{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;margin-top:15px}
.pcard-stock .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.pcard-stock.ok{color:#1a8a4d}
.pcard-stock.ok .dot{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.pcard-stock.low{color:#b06a00}
.pcard-stock.low .dot{background:var(--sun);box-shadow:0 0 0 3px rgba(255,206,77,.28)}
.pcard-stock.no{color:#8494ad}
.pcard-stock.no .dot{background:#94a3b8}
.pcard-price{margin-top:16px;display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.pprice{font-family:var(--fd);font-weight:700;font-size:27px;letter-spacing:-.02em;color:var(--ink)}
.pprice-old{font-size:16px;color:#94a3b8;text-decoration:line-through}
.pprice-save{font-size:12px;font-weight:700;color:#e01f1f;background:rgba(224,31,31,.1);
  border-radius:100px;padding:3px 9px}
.pprice-vat{width:100%;font-size:12px;color:#8494ad;margin-top:-2px}
.pprice-unit{font-family:var(--fb);font-size:15px;font-weight:600;color:#8494ad;letter-spacing:0}
.pcard-acts{margin-top:19px;display:flex;gap:9px}
.pbtn{font-family:var(--fb);font-weight:600;font-size:14.2px;border-radius:100px;padding:12px 20px;cursor:pointer;
  border:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:1;text-decoration:none;
  position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,background .25s,color .25s}
.pbtn::before{content:"";position:absolute;top:0;bottom:0;left:-85%;width:55%;transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);pointer-events:none;transition:left .65s ease}
.pbtn:hover::before{left:135%}
.pbtn:active{transform:scale(.965)}
.pbtn-primary{background:linear-gradient(180deg,var(--blue),var(--blue2));color:#fff;
  box-shadow:0 12px 28px -10px rgba(31,107,255,.75)}
.pbtn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -10px rgba(31,107,255,.9)}
.pbtn-ghost{background:rgba(255,255,255,.8);color:var(--deep);border:1px solid var(--line)}
.pbtn-ghost:hover{transform:translateY(-2px);background:#fff;border-color:rgba(31,107,255,.4)}
.pbtn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none}
.pbtn[disabled]::before{display:none}
.pbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;flex:0 0 auto}
/* Reveal für dynamisch erzeugte Karten (eigener Observer, stört den bestehenden nicht) */
.shop-reveal{opacity:0;transform:translateY(34px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.shop-reveal.in{opacity:1;transform:none}
/* ---------- Modal-Grundgerüst (Detail / Anfrage / Warenkorb) ---------- */
.shop-overlay{position:fixed;inset:0;z-index:320;display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,3vw,26px);background:rgba(6,14,28,.66);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);animation:shopFade .28s ease}
.shop-overlay[hidden]{display:none}
.shop-modal{position:relative;background:var(--paper);color:#22304a;width:100%;max-height:90vh;overflow:auto;
  border-radius:24px;box-shadow:0 44px 110px -34px rgba(6,14,28,.75);
  animation:shopIn .42s cubic-bezier(.16,1,.3,1);overscroll-behavior:contain}
.shop-modal.wide{max-width:1000px}
.shop-modal.slim{max-width:560px}
.shop-close{position:absolute;top:14px;right:15px;z-index:6;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(10,30,80,.14);background:rgba(255,255,255,.94);color:#22304a;font-size:23px;line-height:1;
  cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(8px);
  transition:background .2s,transform .3s}
.shop-close:hover{background:#eef3fb;transform:rotate(90deg)}
/* === Produktfenster: freie Sicht =================================== */
.shop-overlay{z-index:9999}
.shop-close{top:14px;right:14px;width:46px;height:46px;font-size:26px;
  background:#fff;border-color:rgba(10,30,80,.22);box-shadow:0 8px 22px -8px rgba(6,14,28,.5)}
@media (max-width:700px){
  .shop-overlay{padding:10px 8px}
  .shop-modal{max-height:95vh}
  .shop-close{top:10px;right:10px;width:42px;height:42px}
}
html.nx-cursor a,html.nx-cursor button,html.nx-cursor label,html.nx-cursor summary,
html.nx-cursor select,html.nx-cursor [role="button"],html.nx-cursor .pcard,
html.nx-cursor .pcard-media,html.nx-cursor .pd-thumb,html.nx-cursor .chip,
html.nx-cursor .pbtn,html.nx-cursor .shop-close,html.nx-cursor .shop-toggle,
html.nx-cursor .cart-fab{cursor:pointer !important}
@media (prefers-reduced-motion:reduce){.shop-modal,.shop-overlay{animation:none}}
.pd-price .pprice{font-size:35px}
.pd-acts .pbtn{flex:1 1 160px}
.frm-acts .pbtn{flex:1 1 150px;padding:14px 22px}
@media(max-width:1024px){
  .shop-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .shop-grid{grid-template-columns:1fr;gap:16px}
  .frm-grid{grid-template-columns:1fr}
  .shop-count{margin-left:0;width:100%}
  .shop-search{flex:1 1 100%}
  .shop-select{flex:1 1 auto}
  .shop-modal{max-height:94vh;border-radius:20px}
  .pd-info{padding:24px 20px 28px}
  .cart-fab{width:54px;height:54px}
  .cart-fab svg{width:22px;height:22px}
  .pcard-acts{flex-direction:column}
  .cart-list{max-height:38vh}
}
@media (prefers-reduced-motion:reduce){
  .shop-reveal{opacity:1!important;transform:none!important}
  .pcard:hover .pcard-media img{transform:none}
  .cart-fab.bump{animation:none}
  .pay-card:hover{transform:none}
}
/* ---------- Sendevorgang & Fehlermeldung ---------- */
.pbtn.is-busy,.rf-btn.is-busy{pointer-events:none;opacity:.75}
.pbtn.is-busy::after,.rf-btn.is-busy::after{content:"";width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:nxSpin .7s linear infinite;margin-left:2px}
/* ---------- Steuerhinweis ---------- */
.shop-tax{margin-top:26px;display:flex;gap:11px;align-items:flex-start;
  font-size:13.4px;color:#5b6b86;line-height:1.65;max-width:80ch}
.shop-tax svg{width:17px;height:17px;flex:0 0 auto;stroke:var(--blue);fill:none;stroke-width:2;margin-top:2px}
.shop-tax b{color:var(--ink);font-weight:600}
/* ---------- Zahlungsarten ---------- */
.pay{margin-top:clamp(46px,6vw,72px);border-top:1px solid var(--line);padding-top:clamp(32px,4vw,46px)}
.pay-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.pay-head h3{font-family:var(--fd);font-weight:700;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;color:var(--ink)}
.pay-head span{font-size:14px;color:#7183a0}
.pay-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pay-card{display:flex;gap:16px;background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid var(--line);
  border-radius:20px;padding:24px 24px;position:relative;overflow:hidden;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .4s}
.pay-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(31,107,255,.35)}
.pay-ico{width:50px;height:50px;flex:0 0 auto;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue),var(--deep));box-shadow:0 12px 26px -10px rgba(31,107,255,.75)}
.pay-ico svg{width:25px;height:25px;stroke:#fff;fill:none;stroke-width:1.8}
.pay-card h4{font-family:var(--fd);font-size:17.5px;letter-spacing:-.01em;color:var(--ink);margin-bottom:7px;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pay-card p{font-size:14.2px;color:#46546d;line-height:1.6}
.pay-tag{font-family:var(--fb);font-size:11px;font-weight:700;letter-spacing:.03em;border-radius:100px;padding:4px 10px;
  background:rgba(34,197,94,.14);color:#12924a;white-space:nowrap}
.pay-tag.b{background:rgba(31,107,255,.12);color:var(--blue2)}
.pay-note{margin-top:20px;font-size:13.2px;color:#7183a0;line-height:1.65;max-width:78ch}
@media(max-width:760px){ .pay-grid{grid-template-columns:1fr;gap:14px} }
/* --- Anpassungen für die eigenständigen Shop-Seiten --------------------- */
.shop-grid { margin-top: 22px; }
@media (max-width: 1000px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .shop-grid { grid-template-columns: 1fr; } }
.shop-tools { margin-top: 10px; }
.pcard-media { cursor: default; }
.pcard-media a { display: block; height: 100%; }
.pcard h3 a { color: inherit; text-decoration: none; }
.pcard h3 a:hover { color: var(--blue2); }
.gruppen-titel { font-family: var(--fd); font-size: 17px; font-weight: 600; color: var(--deep);
  margin: 34px 0 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line); grid-column: 1 / -1; }
.gruppen-titel:first-of-type { margin-top: 12px; }
.leer-treffer { grid-column: 1 / -1; padding: 34px 20px; text-align: center; color: #66748e;
  background: rgba(255,255,255,.8); border: 1px solid var(--line); border-radius: 20px; }
.kats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 24px 0 30px; }
.kat { display: block; background: rgba(255,255,255,.85); border: 1px solid var(--line); border-radius: 20px;
  padding: 20px 22px; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.kat:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -30px rgba(10,30,80,.5); }
.kat b { display: block; font-family: var(--fd); font-size: 18px; color: var(--deep); margin-bottom: 5px; }
.kat span { font-size: 14px; color: #66748e; }

[hidden] { display: none !important; }

/* Hinweis auf den Dachblech-Rechner (Produktseiten) */
.rechner-tipp{margin-top:14px;padding:12px 14px;background:#eef4ff;border:1px solid rgba(31,107,255,.22);
  border-radius:11px;font-size:13.5px;line-height:1.55;color:#3d4759}
.rechner-tipp a{font-weight:600}