/* Versand und Lieferung – Kadence-Fassung
   Grundlage: eingefrorener Rechtsseiten-Master.
   Alle Regeln sind unter .versand-kadence gekapselt.
*/

.versand-kadence {
  --vs-brand: #2E4396;
  --vs-brand-dark: #22326F;
  --vs-brand-light: #E8ECF7;
  --vs-ink: #1F2937;
  --vs-body: #4A5568;
  --vs-muted: #6B7280;
  --vs-line: #E5E7EB;
  --vs-bg: #FFFFFF;
  --vs-bg-soft: #EBEBEB;
  --vs-radius: 14px;
  --vs-shadow: 0 4px 18px rgba(31,41,55,.10);

  color: var(--vs-body);
}

.versand-kadence,
.versand-kadence * { box-sizing: border-box; }

.versand-kadence .wrap {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

.versand-kadence .section { padding: 72px 0; }

/* Kopf */
.versand-kadence .vs-head {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--vs-bg-soft);
  padding: 0 0 40px;
}

.versand-kadence .vs-head .crumbs {
  padding-top: 18px;
  color: var(--vs-muted);
  font-size: 14px;
}

.versand-kadence .vs-head .crumbs a {
  color: var(--vs-brand);
  text-decoration: none;
  margin-right: 5px;
}

.versand-kadence .vs-head .crumbs span { margin: 0 5px; }

.versand-kadence .vs-head h1 {color: var(--vs-ink);
}

.versand-kadence .vs-head .vs-sub {
  margin: 0;
  color: var(--vs-muted);
  max-width: 80ch;
}

/* Layout */
.versand-kadence .vs-body {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
}

/* Sidebar */
.versand-kadence .vs-card {
  position: sticky;
  top: 155px;
  background: var(--vs-bg);
  border: 1px solid var(--vs-line);
  border-top: 4px solid var(--vs-brand);
  border-radius: var(--vs-radius);
  box-shadow: var(--vs-shadow);
  padding: 8px 30px 26px;
  max-height: calc(100vh - 185px);
  overflow-y: auto;
}

.versand-kadence .vs-row {
  padding: 20px 0;
  border-bottom: 1px solid var(--vs-line);
}

.versand-kadence .vs-row:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}

.versand-kadence .vs-row .label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vs-brand);
  margin-bottom: 8px;
}

.versand-kadence .vs-row .value {
  margin: 0;
  color: var(--vs-ink);
  font-size: 16px;
  line-height: 1.7;
}

.versand-kadence .vs-row .value strong { font-weight: 700; }

.versand-kadence .vs-row .note {
  display: block;
  color: var(--vs-muted);
  font-size: 14px;
  margin-top: 4px;
}

.versand-kadence .vs-row .stand {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Inhaltsverzeichnis */
.versand-kadence .vs-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: vstoc;
}

.versand-kadence .vs-toc li {
  border-bottom: 1px solid var(--vs-line);
}

.versand-kadence .vs-toc li:last-child { border-bottom: 0; }

.versand-kadence .vs-toc a {
  display: block;
  padding: 8px 0;
  font-size: 15px;
  color: var(--vs-body);
  text-decoration: none;
}

.versand-kadence .vs-toc a::before {
  counter-increment: vstoc;
  content: counter(vstoc) ".";
  display: inline-block;
  width: 24px;
  color: var(--vs-brand);
  font-weight: 700;
}

.versand-kadence .vs-toc a:hover { color: var(--vs-brand); }

/* Inhalt */
.versand-kadence .vs-text { max-width: 76ch; }

.versand-kadence .vs-text h2 {  margin: 0 0 12px;
  padding-top: 4px;
  scroll-margin-top: 150px;
  color: var(--vs-ink);
}

.versand-kadence .vs-text section + section {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--vs-line);
}

.versand-kadence .vs-text p { margin: 0 0 14px; }
.versand-kadence .vs-text p:last-child { margin-bottom: 0; }

.versand-kadence .vs-text a { color: var(--vs-brand); }
.versand-kadence .vs-text a:hover { text-decoration: underline; }

.versand-kadence .vs-quote {
  background: var(--vs-brand-light);
  border-radius: 10px;
  padding: 18px 22px;
  color: var(--vs-ink);
  font-size: 16.5px;
}

/* Checkliste */
.versand-kadence .vs-checks {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.versand-kadence .vs-checks li {
  position: relative;
  padding: 5px 0 5px 28px;
}

.versand-kadence .vs-checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 5px;
  color: var(--vs-brand);
  font-weight: 700;
}

/* Tabellen */
.versand-kadence .vs-tabelle {
  overflow-x: auto;
  margin: 4px 0 18px;
}

.versand-kadence .vs-tabelle table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  min-width: 560px;
}

.versand-kadence .vs-tabelle th,
.versand-kadence .vs-tabelle td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--vs-line);
}

.versand-kadence .vs-tabelle thead th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vs-brand);
  border-bottom: 2px solid var(--vs-line);
  white-space: nowrap;
}

.versand-kadence .vs-tabelle tbody tr:last-child td { border-bottom: 0; }

.versand-kadence .vs-tabelle td:not(:first-child) {
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .versand-kadence .vs-body {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .versand-kadence .vs-card {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .versand-kadence .vs-text { max-width: none; }
}

@media (max-width: 720px) {
  .versand-kadence .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .versand-kadence .section { padding: 48px 0; }

  .versand-kadence .vs-card {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ==========================================================
   RECHTSSEITEN-MASTER – Versand und Lieferung
   Einheitlich mit Impressum / Datenschutz / AGB / Widerruf /
   Zahlungsweisen.
   Standardtypografie wird vom Theme bzw. Page-Typography-
   Plugin gesteuert. Sonderbausteine bleiben seitenspezifisch.
   ========================================================== */

/* Breadcrumbs */
.versand-kadence .vs-head .crumbs {
  padding-top: 18px;
  color: var(--vs-muted);
  font-size: 14px;
}
.versand-kadence .vs-head .crumbs a {
  color: var(--vs-brand);
  text-decoration: none;
  margin-right: 5px;
}
.versand-kadence .vs-head .crumbs span {
  margin: 0 5px;
}

/* Desktop-Grid */
.versand-kadence .vs-body {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

/* Sidebar */
.versand-kadence .vs-card {
  position: sticky;
  top: 155px;
  background: var(--vs-bg);
  border: 1px solid var(--vs-line);
  border-top: 4px solid var(--vs-brand);
  border-radius: var(--vs-radius);
  box-shadow: var(--vs-shadow);
  padding: 8px 30px 26px;
  max-height: calc(100vh - 185px);
  overflow-y: auto;
}
.versand-kadence .vs-row {
  padding: 20px 0;
  border-bottom: 1px solid var(--vs-line);
}
.versand-kadence .vs-row:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}
.versand-kadence .vs-card a,
.versand-kadence .vs-card a:visited {
  text-decoration: none !important;
}
.versand-kadence .vs-card a:hover,
.versand-kadence .vs-card a:focus-visible {
  text-decoration: underline !important;
}

/* Content-Section */
.versand-kadence .section {
  padding-top: 72px;
  padding-bottom: 72px;
}

/* Tablet / schmaler Desktop */
@media (max-width: 1180px) {
  .versand-kadence .section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .versand-kadence .section > .wrap {
    width: 100% !important;
    max-width: 1240px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .versand-kadence .vs-body,
  .versand-kadence .vs-card,
  .versand-kadence .vs-text {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .versand-kadence .vs-body {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .versand-kadence .vs-card {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }

  .versand-kadence .vs-text {
    max-width: none;
  }
}

/* Zwischenbreite */
@media (min-width: 1025px) and (max-width: 1180px) {
  .versand-kadence .section {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* Mobil */
@media (max-width: 720px) {
  .versand-kadence .section {
    padding: 36px 20px !important;
  }

  .versand-kadence .vs-card {
    padding-left: 20px;
    padding-right: 20px;
  }
}



/* V2 – Theme/Page-Typography-Master
   Für H1, H2, normalen Fließtext und die Kopf-Unterzeile werden hier
   absichtlich KEINE font-family/font-size/font-weight/line-height-Werte gesetzt.
   Diese Werte kommen ausschließlich aus Theme bzw. Page-Typography-Plugin.
*/

/* ==========================================================
   V3 – Abgleich Versand-DEV
   Werte nach Vergleich mit der DEV-Darstellung:
   - Trennlinie und Abstand zwischen Einstiegskasten und Abschnitt 1
   - Checklisten-Icons als grüne 20px-Kreise
   - Trennlinien und größere vertikale Abstände innerhalb der Checkliste
   ========================================================== */

/* DEV: nach dem blauen Einstiegskasten zuerst Abstand + Trennlinie,
   danach Abstand bis zur ersten H2. */
.versand-kadence .vs-quote + section {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--vs-line);
}

/* DEV-Checkliste */
.versand-kadence .vs-checks {
  margin-top: 10px;
}

.versand-kadence .vs-checks li {
  position: relative;
  padding: 12px 0 12px 38px;
  border-bottom: 1px solid var(--vs-line);
}

.versand-kadence .vs-checks li:last-child {
  border-bottom: 0;
}

.versand-kadence .vs-checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2F8F4E;
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}




/* ==========================================================
   RECHTSSEITEN-MASTER – wie bestätigtes Impressum
   Typografie: Theme / Seitentypografie-Tool.
   Abstand gilt identisch auf Desktop, Tablet und Mobile.
   ========================================================== */
.versand-kadence .vs-head h1 {
  margin: 18px 0 12px !important;
}

.versand-kadence .vs-head .vs-sub {
  margin-top: 0 !important;
}