/* Vertrauen-Bausteine 05, 06, 07, 22, 23 und 25 (Auftrag vom 24.10.2026; Vorlage vertrauen-varianten-2026-10-22,
   bausteine.css k-tabelle, k-kasten, k-faq, k-schritte). Produktseite: "Versand und Abholung" im Preiskasten und
   "Häufige Fragen" unter der Beschreibung (server/versand-info.mjs, server/artikel-faq.mjs). Warenkorb und Kasse:
   Selbst abholen unter dem Balken und "So läuft deine Bestellung" (public/shop/korb-vorteile.mjs).
   Farben aus kopf.css (--k-*). Orange nie als Schrift auf Hell, nur als Strich. Tippziele mindestens 44 px, sichtbarer
   Fokus, keine Inline-Stile. Großbuchstaben nur in Texten ohne ß. */

.vb-zeichen{flex:none;width:20px;height:20px;color:var(--k-blau,#154e8a)}
.vb-plus{flex:none;width:20px;height:20px;margin-left:auto;color:var(--k-blau,#154e8a);transition:transform .15s ease}
details[open]>summary .vb-plus{transform:rotate(45deg)}

/* ---------- 05, 06, 07, 25: Versand und Abholung im Preiskasten ---------- */
.vb-versand{margin:18px 0 0;border-top:1px solid var(--k-linie,#dde3ea);color:var(--k-tinte,#142a4c);font-family:Manrope,Arial,sans-serif}
.vb-versand>summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 0 0;cursor:pointer;list-style:none;font:700 15px/1.35 Manrope,Arial,sans-serif}
.vb-versand>summary::-webkit-details-marker{display:none}
.vb-versand>summary:hover .vb-versand-titel{text-decoration:underline;text-underline-offset:3px}
.vb-versand>summary:focus-visible,.vb-faq summary:focus-visible{outline:2px solid var(--k-blau,#154e8a);outline-offset:2px}
.vb-versand-inhalt{display:grid;gap:14px;padding:10px 0 2px}
.vb-tabelle{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--k-linie,#dde3ea);font:500 14px/1.4 Manrope,Arial,sans-serif;color:var(--k-tinte,#142a4c)}
.vb-tabelle caption{padding:0 0 6px;text-align:left;font:700 14px/1.35 Manrope,Arial,sans-serif;color:var(--k-tinte,#142a4c)}
.vb-tabelle th,.vb-tabelle td{padding:9px 10px;border-bottom:1px solid var(--k-linie,#dde3ea);text-align:left;vertical-align:top}
.vb-tabelle thead th{background:var(--k-flaeche,#eef1f5);font:800 11px/1.3 Manrope,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--k-leise,#5a6678)}
.vb-tabelle tbody th{font-weight:700;overflow-wrap:break-word}
.vb-tabelle td{font-weight:700;white-space:nowrap;text-align:right}
.vb-tabelle td[colspan]{white-space:normal}
.vb-tabelle .vb-mit-zusatz>*{border-bottom:0;padding-bottom:2px}
.vb-tabelle .vb-zusatz td{padding-top:0;text-align:left;font-weight:500;font-size:13px;line-height:1.45;color:var(--k-leise,#5a6678)}
.vb-tabelle .vb-zusatz span{display:block}
.vb-tabelle thead th:not(:first-child){text-align:right}
.vb-tabelle tbody tr:last-child>*{border-bottom:0}
.vb-laender{margin:0;font:500 13px/1.5 Manrope,Arial,sans-serif;color:var(--k-leise,#5a6678)}
.vb-laender strong{color:var(--k-tinte,#142a4c)}
.vb-versichert{display:flex;gap:10px;align-items:flex-start;margin:0;padding:10px 12px;background:var(--k-flaeche,#eef1f5);border-left:3px solid var(--k-blau,#154e8a);font:600 14px/1.45 Manrope,Arial,sans-serif;color:var(--k-tinte,#142a4c)}
.vb-versand-mehr,.vb-faq-mehr{margin:0}
.vb-versand-mehr a,.vb-faq-mehr a{display:inline-flex;align-items:center;min-height:44px;color:var(--k-blau,#154e8a);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.vb-versand-mehr a:focus-visible,.vb-faq-mehr a:focus-visible{outline:2px solid var(--k-blau,#154e8a);outline-offset:2px}
@media (max-width:420px){
  .vb-tabelle th,.vb-tabelle td{padding:8px 7px}
  .vb-tabelle thead th{letter-spacing:.04em}
  .vb-tabelle{font-size:13.5px}
}

/* ---------- 22: Häufige Fragen unter der Beschreibung ---------- */
.vb-faq{margin-top:64px;padding-top:40px;border-top:1px solid var(--t-line,#cfd7e1);color:var(--k-tinte,#142a4c)}
.vb-faq h2{margin:0 0 18px;font-size:28px}
.vb-fragen{max-width:860px;background:#fff;border:1px solid var(--k-linie,#dde3ea)}
.vb-fragen details{border-bottom:1px solid var(--k-linie,#dde3ea)}
.vb-fragen details:last-child{border-bottom:0}
.vb-fragen summary{display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 18px;cursor:pointer;list-style:none;font:700 16px/1.4 Manrope,Arial,sans-serif}
.vb-fragen summary::-webkit-details-marker{display:none}
.vb-fragen summary:hover>span{text-decoration:underline;text-underline-offset:3px}
.vb-antwort{padding:0 18px 16px}
.vb-antwort p{margin:0 0 8px;max-width:68ch;font:500 15px/1.6 Manrope,Arial,sans-serif;color:#2c3d5a}
.vb-antwort p:last-child{margin-bottom:0}
.vb-faq-mehr{margin-top:10px}
@media (max-width:860px){.vb-faq{margin-top:44px;padding-top:32px}.vb-faq h2{font-size:24px}}
@media (max-width:420px){.vb-fragen summary{padding:10px 14px;font-size:15px}.vb-antwort{padding:0 14px 14px}}

/* ---------- 06: Selbst abholen im Warenkorb, unter dem Balken ---------- */
.vb-abholen{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;padding:14px 18px;background:#fff;border:1px solid var(--k-linie,#dde3ea);border-left:4px solid var(--k-blau,#154e8a);color:var(--k-tinte,#142a4c)}
.vb-abholen p{display:grid;gap:3px;margin:0;font:500 13.5px/1.45 Manrope,Arial,sans-serif;color:var(--k-leise,#5a6678)}
.vb-abholen strong{font:700 15px/1.4 Manrope,Arial,sans-serif;color:var(--k-tinte,#142a4c)}

/* ---------- 23: So läuft deine Bestellung, Warenkorb und Kasse ---------- */
.vb-ablauf{container-type:inline-size;min-width:0;color:var(--k-tinte,#142a4c)}
.kasse-form .vb-ablauf{margin-top:36px}
.vb-ablauf h2{margin:0 0 14px;font-size:20px}
.vb-ablauf-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0;padding:0;list-style:none}
.vb-ablauf-liste li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;margin:0;padding:14px 16px;background:#fff;border:1px solid var(--k-linie,#dde3ea);border-top:3px solid var(--k-orange,#f2884b)}
.vb-ablauf-zeichen{width:44px;height:44px;padding:10px;background:var(--k-flaeche,#eef1f5);color:var(--k-blau,#154e8a)}
.vb-ablauf-liste p{display:grid;gap:4px;margin:0}
.vb-ablauf-liste strong{display:flex;gap:8px;align-items:baseline;font:800 15.5px/1.3 Manrope,Arial,sans-serif}
.vb-ablauf-nr{color:var(--k-blau,#154e8a)}
.vb-ablauf-liste p>span{font:500 13.5px/1.5 Manrope,Arial,sans-serif;color:var(--k-leise,#5a6678)}
/* Zwei Spalten, sobald Platz ist; vier wären im Warenkorb zu schmal für "Auftragsbestätigung". */
@container (min-width:520px){.vb-ablauf-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Im Warenkorb links unter den Positionen, die Zusammenfassung rechts bleibt stehen; die Anfrage rückt darunter. */
@media (min-width:901px){
  .wk>.vb-ablauf{grid-column:1;grid-row:2}
  .wk>.vb-ablauf~.wk-anfrage{grid-row:3}
}
@media (prefers-reduced-motion:reduce){.vb-plus{transition:none}}