/* Vertrauen-Bausteine A und D (Auftrag 23.10.2026; Vorlage referenz/public/muster.html und shop.css).
   A: Vorteilsleiste unter dem Menü (server/vorteile.mjs), D: Vorteile im Preiskasten (server/artikel-vorteile.mjs), im
   Warenkorb und im kleinen Warenkorb (public/shop/korb-vorteile.mjs). Farben und Maße aus kopf.css (--k-*).
   Regeln aus 9.8: Orange als Schrift nur auf Nachtblau; hier Orange nur als Fläche und Zeichen in der dunklen Abstufung
   #b4541b (3,8:1 auf dem Balkengrund, 4,7:1 auf #fff7f1). Tippziele mindestens 44 px, sichtbarer Fokus. Keine Inline-Stile:
   der Balken ist ein <progress>. */

/* ---------- A: Vorteilsleiste ---------- */
.t-vorteile{position:relative;background:#fff;border-bottom:1px solid var(--k-linie,#dde3ea);color:var(--k-tinte,#142a4c);font-family:Manrope,Arial,sans-serif}
.t-vorteile-innen{max-width:var(--k-breite,1760px);margin:0 auto;padding:0 var(--k-rand,64px)}
.t-vorteile-liste{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}
.t-vorteile-liste>li{min-width:0;margin:0;border-left:1px solid var(--k-linie,#dde3ea)}
.t-vorteile-liste>li:first-child{border-left:0}
a.t-vorteil{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 16px 10px 22px;color:inherit;text-decoration:none}
.t-vorteile-liste>li:first-child>a.t-vorteil{padding-left:0}
a.t-vorteil:hover strong{text-decoration:underline;text-decoration-color:var(--k-orange,#f2884b);text-decoration-thickness:2px;text-underline-offset:4px}
a.t-vorteil:focus-visible{outline:2px solid var(--k-blau,#154e8a);outline-offset:-3px}
.t-vorteil-zeichen{flex:none;width:26px;height:26px;color:var(--k-blau,#154e8a)}
.t-vorteil-text{display:flex;flex-direction:column;min-width:0}
.t-vorteil-text strong{font:800 14.5px/1.25 Manrope,Arial,sans-serif;letter-spacing:-.005em}
.t-vorteil-klein{margin-top:2px;color:var(--k-leise,#5a6678);font:500 12.5px/1.3 Manrope,Arial,sans-serif}

/* Tablet: zwei Spalten, alles sichtbar, kein Wischen nötig. */
@media (max-width:1099px){
  .t-vorteile-liste{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto}
  .t-vorteile-liste>li{border-left:0}
  .t-vorteile-liste>li:nth-child(even){border-left:1px solid var(--k-linie,#dde3ea)}
  .t-vorteile-liste>li:nth-child(n+3){border-top:1px solid var(--k-linie,#dde3ea)}
  .t-vorteile-liste>li:nth-child(odd)>a.t-vorteil{padding-left:0}
  a.t-vorteil{min-height:56px;padding:8px 14px 8px 18px}
}
/* Handy: eine Zeile zum seitlichen Wischen. Nur die Liste scrollt, die Seite nicht (overflow in der Leiste). Der nächste
   Punkt ist am rechten Rand angeschnitten und läuft in einen weißen Verlauf aus; so ist erkennbar, dass es weitergeht. */
@media (max-width:700px){
  .t-vorteile-innen{padding:0}
  .t-vorteile-liste{display:flex;gap:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--k-rand,16px);padding:0 var(--k-rand,16px);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  /* Tastaturfokus muss vollständig ins Bild scrollen; Snap-Punkte dürfen die automatische Fokusbewegung nicht zurückziehen. */
  .t-vorteile-liste:focus-within{scroll-snap-type:none;scroll-behavior:auto}
  .t-vorteile-liste::-webkit-scrollbar{display:none}
  .t-vorteile-liste>li,.t-vorteile-liste>li:nth-child(even),.t-vorteile-liste>li:nth-child(n+3){flex:0 0 auto;border-top:0;border-left:1px solid var(--k-linie,#dde3ea);scroll-snap-align:start}
  .t-vorteile-liste>li:first-child{border-left:0}
  .t-vorteile-liste>li>a.t-vorteil,.t-vorteile-liste>li:nth-child(odd)>a.t-vorteil{min-height:56px;padding:8px 18px 8px 14px}
  .t-vorteile-liste>li:first-child>a.t-vorteil{padding-left:0}
  .t-vorteile::after{content:"";position:absolute;top:0;right:0;bottom:0;width:32px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 85%);pointer-events:none}
  .t-vorteil-zeichen{width:22px;height:22px}
  .t-vorteil-text strong{font-size:13.5px;white-space:nowrap}
  .t-vorteil-klein{font-size:12px;white-space:nowrap}
}

/* ---------- D: Preiskasten der Produktseite ---------- */
.p1-vorteile{display:grid;gap:12px;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--k-linie,#dde3ea);list-style:none}
.p1-vorteile li{display:flex;gap:11px;align-items:flex-start;margin:0;font:600 15px/1.4 Manrope,Arial,sans-serif;color:var(--k-tinte,#142a4c)}
.p1-vorteile .t-vorteil-zeichen{width:20px;height:20px;margin-top:1px;color:var(--k-blau,#154e8a)}
.p1-vorteil-text{display:flex;flex-direction:column;min-width:0}
.p1-vorteil-text strong{font-weight:700}
.p1-vorteil-klein{color:var(--k-leise,#5a6678);font-weight:500;font-size:13px;line-height:1.45}
a.p1-vorteil-tel{display:inline-block;padding:12px 0;margin:-12px 0;color:var(--k-blau,#154e8a);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
a.p1-vorteil-tel:focus-visible{outline:2px solid var(--k-blau,#154e8a);outline-offset:2px}

/* ---------- D: Warenkorb ---------- */
.wk-fortschritt{margin:0 0 16px;padding:16px 20px;background:#fff7f1;border:1px solid #f6c9ad;color:var(--k-tinte,#142a4c)}
.wk-fortschritt-text{display:flex;gap:10px;align-items:center;margin:0;font:700 15px/1.4 Manrope,Arial,sans-serif}
.wk-fortschritt-zeichen{flex:none;width:20px;height:20px;color:#b4541b}
.wk-fortschritt-klein{margin:8px 0 0;color:#7a4a2c;font:500 13px/1.45 Manrope,Arial,sans-serif}
.wk-fortschritt-geschafft{background:#eef7f1;border-color:#b9dcc5}
.wk-fortschritt-geschafft .wk-fortschritt-zeichen{color:#1d6b3a}
.wk-fortschritt-geschafft .wk-fortschritt-klein{color:#2c4a37}
/* Balken im Warenkorb und im kleinen Warenkorb. Je Browser eine eigene Regel: ein unbekanntes Pseudoelement würde sonst
   die ganze Regel ungültig machen. */
.wk-fortschritt-balken,.t-kv-balken{display:block;width:100%;height:8px;margin:12px 0 0;border:0;border-radius:0;background:#f3dccd;color:#b4541b;-webkit-appearance:none;appearance:none;overflow:hidden}
.wk-fortschritt-balken::-webkit-progress-bar{background:#f3dccd}
.t-kv-balken::-webkit-progress-bar{background:#f3dccd}
.wk-fortschritt-balken::-webkit-progress-value{background:#b4541b}
.t-kv-balken::-webkit-progress-value{background:#b4541b}
.wk-fortschritt-balken::-moz-progress-bar{background:#b4541b}
.t-kv-balken::-moz-progress-bar{background:#b4541b}
.wk-fortschritt-geschafft .wk-fortschritt-balken,.t-kv-fortschritt-geschafft .t-kv-balken{background:#cfe6d7;color:#1d6b3a}
.wk-fortschritt-geschafft .wk-fortschritt-balken::-webkit-progress-bar{background:#cfe6d7}
.t-kv-fortschritt-geschafft .t-kv-balken::-webkit-progress-bar{background:#cfe6d7}
.wk-fortschritt-geschafft .wk-fortschritt-balken::-webkit-progress-value{background:#1d6b3a}
.t-kv-fortschritt-geschafft .t-kv-balken::-webkit-progress-value{background:#1d6b3a}
.wk-fortschritt-geschafft .wk-fortschritt-balken::-moz-progress-bar{background:#1d6b3a}
.t-kv-fortschritt-geschafft .t-kv-balken::-moz-progress-bar{background:#1d6b3a}

.wk-vorteil-summe{display:grid;gap:8px;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--k-linie,#dde3ea);font:500 15px/1.4 Manrope,Arial,sans-serif}
.wk-vorteil-summe>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.wk-vorteil-summe dt{color:var(--k-leise,#5a6678)}
.wk-vorteil-summe dd{margin:0;text-align:right;font-weight:700;white-space:nowrap;color:var(--k-tinte,#142a4c)}
.wk-vorteil-summe .wk-rabatt dt,.wk-vorteil-summe .wk-rabatt dd{color:#1d6b3a}
.wk-vorteil-summe .wk-gesamt{padding-top:10px;border-top:1px solid var(--k-linie,#dde3ea);font-size:18px;font-weight:800}
.wk-vorteil-summe .wk-gesamt dt,.wk-vorteil-summe .wk-gesamt dd{color:var(--k-tinte,#142a4c);font-weight:800}
.wk-vorteil-hinweis{padding:10px 14px;background:#e4e9f0;border-left:3px solid var(--k-tinte,#142a4c);color:var(--k-tinte,#142a4c)}

/* ---------- D: kleiner Warenkorb ---------- */
.t-korb-vorschau .t-kv-fortschritt{margin-top:10px;padding:10px 12px;background:#fff7f1;border:1px solid #f6c9ad}
.t-korb-vorschau .t-kv-fortschritt-geschafft{background:#eef7f1;border-color:#b9dcc5}
.t-korb-vorschau .t-kv-fortschritt-text{margin:0;font:700 13px/1.35 Manrope,Arial,sans-serif;color:var(--k-tinte,#142a4c)}
.t-korb-vorschau .t-kv-balken{height:6px;margin-top:8px}
.t-korb-vorschau .t-kv-vorkasse{color:#1d6b3a;font-weight:600}

@media (prefers-reduced-motion:reduce){.t-vorteile-liste{scroll-behavior:auto}}