/* ==========================================================
   Fahrradshop24 – Versandseite "Versand & Kosten"
   ----------------------------------------------------------
   Gehört zu page-templates/versand-info.php und wird ausschließlich
   auf Seiten mit dieser Vorlage geladen (is_page_template()-Check
   beim Enqueue in inc/versand-info.php).

   Nutzt die Design-Tokens aus frontend.css (:root) – jeweils MIT
   Fallback-Wert, weil frontend.css hier inline/optimiert ausgeliefert
   wird und einzelne Blöcke im Browser fehlen können. Aus demselben
   Grund bringt die Seite ihren Button selbst mit, statt sich auf die
   globalen ".btn/.btn-primary" zu verlassen.

   Alles unter ".fs24-versand" gescoped, damit keine bestehende Regel
   getroffen wird. Die Inhaltsbreite kommt aus der global genutzten
   ".container"-Klasse – dieselbe Flucht wie Shop-/Kategorieseiten.
   ========================================================== */

.fs24-versand {
  padding: 34px 0 84px;
  background: #fff;
  color: var(--ink, #111315);
}

.fs24-versand *,
.fs24-versand *::before,
.fs24-versand *::after {
  box-sizing: border-box;
}

/* ==========================================================
   Kopfbereich – flach gehalten, kein Hero-Bild.
   ========================================================== */

.fs24-versand__head {
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line, rgba(17, 19, 21, .12));
}

.fs24-versand__kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  padding: 7px 15px 7px 12px;
  border: 1px solid var(--line, rgba(17, 19, 21, .12));
  border-radius: 999px;
  background: var(--metal-0, #f7f7f6);
  color: var(--ink, #111315);
  font-size: .82rem;
  font-weight: 640;
  letter-spacing: .01em;
}

/* Das Symbol trägt den orangen Akzent, der Text bleibt ruhig. */
.fs24-versand__kicker .icon {
  width: 19px;
  height: 19px;
  stroke: var(--accent, #d24614);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Farbe ausdrücklich setzen: Blocksy färbt Überschriften global über
   eine eigene h1/h2-Regel ein (dunkles Marineblau), die die Vererbung
   vom Container schlägt. Dieselbe Notwendigkeit wie in shop.css
   (".fs24-shop__title") und payment-info.css. */
.fs24-versand__title {
  margin: 0 0 12px;
  color: var(--ink, #111315);
  font-size: clamp(1.9rem, 1.25rem + 2vw, 2.75rem);
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.fs24-versand__subtitle {
  max-width: 62ch;
  margin: 0 0 18px;
  color: #3d4348;
  font-size: clamp(1.02rem, .97rem + .25vw, 1.15rem);
  font-weight: 560;
  line-height: 1.5;
}

.fs24-versand__lead {
  max-width: 78ch;
  margin: 0;
  color: var(--muted, #656b70);
  font-size: .97rem;
  line-height: 1.7;
}

/* ==========================================================
   Abschnitte
   ========================================================== */

.fs24-versand__section {
  margin-top: clamp(38px, 4vw, 56px);
}

.fs24-versand__heading {
  margin: 0 0 18px;
  color: var(--ink, #111315);
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: -.01em;
}

/* ==========================================================
   1) Versandkostentabelle
   ----------------------------------------------------------
   Desktop: klassische Tabelle. Die Preisspalten stehen rechts-
   bündig, damit die Beträge untereinander lesbar bleiben.
   ========================================================== */

.fs24-versand__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line, rgba(17, 19, 21, .12));
  border-radius: 16px;
  background: #fff;
}

.fs24-versand__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.fs24-versand__table th,
.fs24-versand__table td {
  padding: 13px 18px;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}

.fs24-versand__table thead th {
  background: var(--metal-1, #f1f2f2);
  color: var(--ink, #111315);
  font-size: .82rem;
  font-weight: 660;
  letter-spacing: .01em;
}

/* Erste Spalte ist die Zonenbezeichnung, keine Zahl. */
.fs24-versand__table th:first-child,
.fs24-versand__table tbody th {
  text-align: left;
  font-weight: 660;
}

/* Die Zonenzelle trägt zusätzlich den Hinweis, wie sich mehrere
   Artikel in dieser Zone auswirken (kommt aus der Betriebsart der
   Versandart, siehe fs24_shipping_combination_text()). Das ist ein
   ganzer Satz und darf deshalb – anders als die Beträge rechts –
   umbrechen; sonst würde die Tabelle unnötig breit. */
.fs24-versand__table tbody th {
  white-space: normal;
  vertical-align: top;
  padding-top: 15px;
}

.fs24-versand__zone-name {
  display: block;
}

.fs24-versand__zone-note {
  display: block;
  max-width: 42ch;
  margin-top: 4px;
  color: var(--muted, #656b70);
  font-size: .78rem;
  font-weight: 560;
  line-height: 1.45;
}

.fs24-versand__table tbody tr + tr th,
.fs24-versand__table tbody tr + tr td {
  border-top: 1px solid var(--line, rgba(17, 19, 21, .12));
}

.fs24-versand__table tbody tr:nth-child(even) th,
.fs24-versand__table tbody tr:nth-child(even) td {
  background: var(--metal-0, #f7f7f6);
}

.fs24-versand__table tbody td {
  color: #2b2f32;
  font-variant-numeric: tabular-nums;
}

.fs24-versand__footnote {
  margin: 14px 0 0;
  padding-left: 11px;
  border-left: 3px solid var(--accent, #d24614);
  color: var(--muted, #656b70);
  font-size: .84rem;
  font-weight: 560;
  line-height: 1.55;
}

/* ==========================================================
   2) Zonenkarten
   ========================================================== */

.fs24-versand__zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs24-versand__zone {
  padding: 20px 22px;
  border: 1px solid var(--line, rgba(17, 19, 21, .12));
  border-radius: 16px;
  background: var(--metal-0, #f7f7f6);
}

/* ----------------------------------------------------------
   Umrisskarte des Lieferlandes.

   Karte über dem Titel, nicht daneben: In einer Grid-Spalte von
   240px bliebe dem Text neben einer Grafik nur gut die Hälfte,
   und schon "Lieferung an alle Postleitzahlen …" bräuchte vier
   Zeilen. Über dem Titel behält der Text die volle Kartenbreite,
   und die Grafik bekommt trotzdem genug Größe, um erkennbar zu
   sein.

   Die Grafik selbst kommt aus fs24_versand_country_map() – nur
   Umriss und Akzentpunkt. Die Farben stehen bewusst hier und
   nicht im SVG, damit sie mit dem übrigen Frontend mitwandern.
   ---------------------------------------------------------- */

.fs24-versand__zone-figure {
  display: block;
  width: 100%;
  margin-bottom: 14px;
}

.fs24-versand__zone-body {
  min-width: 0;
}

/* Feste Höhe, gedeckelte Breite: Jede viewBox umschließt genau ihren
   Umriss, ohne den Deckel wäre das flache Österreich fast doppelt so
   breit wie das hochformatige Deutschland und damit optisch viel
   größer. Greift der Deckel, skaliert das SVG durch das voreingestellte
   preserveAspectRatio von selbst herunter – verzerrt wird nie. */
.fs24-versand__zone-map {
  display: block;
  width: auto;
  height: 72px;
  max-width: 108px;
  overflow: visible;
}

.fs24-versand__zone-map path {
  fill: rgba(17, 19, 21, .05);
  stroke: var(--ink, #111315);
  stroke-width: 2.6;
  stroke-linejoin: round;
}

.fs24-versand__zone-map circle {
  fill: var(--accent, #d24614);
}

.fs24-versand__zone-title {
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line, rgba(17, 19, 21, .12));
  color: var(--ink, #111315);
  font-size: .95rem;
  font-weight: 720;
  letter-spacing: .01em;
}

.fs24-versand__zone-text {
  margin: 0;
  color: var(--muted, #656b70);
  font-size: .9rem;
  line-height: 1.65;
}

/* ==========================================================
   3) Versandarten
   ========================================================== */

.fs24-versand__methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs24-versand__method {
  padding: 24px;
  border: 1px solid var(--line, rgba(17, 19, 21, .12));
  border-radius: 16px;
  background: var(--metal-0, #f7f7f6);
}

.fs24-versand__method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line, rgba(17, 19, 21, .12));
}

.fs24-versand__method-icon .icon {
  width: 21px;
  height: 21px;
  stroke: var(--accent, #d24614);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fs24-versand__method-title {
  margin: 0 0 8px;
  color: var(--ink, #111315);
  font-size: 1.02rem;
  font-weight: 720;
  line-height: 1.25;
}

.fs24-versand__method-text {
  margin: 0;
  color: var(--muted, #656b70);
  font-size: .92rem;
  line-height: 1.65;
}

/* ==========================================================
   4) Versandpartner
   ========================================================== */

.fs24-versand__partner {
  max-width: 82ch;
  margin: 0;
  color: #3d4348;
  font-size: .97rem;
  line-height: 1.7;
}

/* ==========================================================
   5) Hinweis Sondergebiete
   ========================================================== */

.fs24-versand__notice {
  display: flex;
  gap: 16px;
  margin-top: clamp(38px, 4vw, 56px);
  padding: 22px 24px;
  border: 1px solid var(--line, rgba(17, 19, 21, .12));
  border-left: 3px solid var(--accent, #d24614);
  border-radius: 14px;
  background: var(--metal-0, #f7f7f6);
}

.fs24-versand__notice-icon {
  flex: 0 0 auto;
  margin-top: 2px;
}

.fs24-versand__notice-icon .icon {
  width: 22px;
  height: 22px;
  stroke: var(--accent, #d24614);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fs24-versand__notice-title {
  margin: 0 0 6px;
  color: var(--ink, #111315);
  font-size: 1rem;
  font-weight: 720;
  line-height: 1.3;
}

.fs24-versand__notice-body p {
  max-width: 82ch;
  margin: 0;
  color: var(--muted, #656b70);
  font-size: .92rem;
  line-height: 1.65;
}

/* ==========================================================
   6) Abschlussbereich
   ========================================================== */

.fs24-versand__cta {
  margin-top: clamp(38px, 4vw, 56px);
  padding: clamp(28px, 3.5vw, 40px);
  border-radius: 20px;
  background: var(--metal-1, #f1f2f2);
  text-align: center;
}

.fs24-versand__cta-title {
  margin: 0 0 10px;
  color: var(--ink, #111315);
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
  font-weight: 720;
  line-height: 1.2;
}

.fs24-versand__cta-text {
  max-width: 58ch;
  margin: 0 auto 22px;
  color: var(--muted, #656b70);
  font-size: .97rem;
  line-height: 1.65;
}

/* Eigener Button statt der globalen ".btn"-Regeln, siehe Dateikopf. */
.fs24-versand__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--fs24-btn-radius, 10px);
  background: var(--accent, #d24614);
  color: #fff;
  font-size: .96rem;
  font-weight: 720;
  text-decoration: none;
  transition: background .2s ease;
}

/* Weiße Schrift in jedem Zustand, im Hover nur dunkleres Orange –
   einheitlich für alle orangen Primary-Buttons (Auftrag 2026-09-02). */
.fs24-versand__cta-btn:hover,
.fs24-versand__cta-btn:focus-visible {
  background: var(--accent-dark, #b93800);
  color: #fff;
}

/* ==========================================================
   Mobil
   ----------------------------------------------------------
   Unterhalb von 860px wird jede Tabellenzeile zu einer Karte:
   Zonenname als Kartenkopf, darunter je eine Zeile
   "Spaltenüberschrift – Betrag". Die Überschrift kommt aus dem
   data-label des <td> (gesetzt in page-templates/versand-info.php),
   der <thead> wird ausgeblendet. Die ARIA-Rollen stehen im Markup
   explizit, weil display:block die impliziten Tabellenrollen
   entfernt.
   ========================================================== */

@media (max-width: 860px) {
  .fs24-versand__table-wrap {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .fs24-versand__table,
  .fs24-versand__table tbody,
  .fs24-versand__table tr,
  .fs24-versand__table th,
  .fs24-versand__table td {
    display: block;
  }

  .fs24-versand__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .fs24-versand__table tr {
    margin-bottom: 12px;
    border: 1px solid var(--line, rgba(17, 19, 21, .12));
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
  }

  .fs24-versand__table tr:last-child {
    margin-bottom: 0;
  }

  .fs24-versand__table tbody th {
    padding: 12px 16px;
    background: var(--metal-1, #f1f2f2);
    font-size: .95rem;
    white-space: normal;
  }

  .fs24-versand__table tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    background: #fff;
    font-size: .92rem;
    white-space: normal;
  }

  .fs24-versand__table tbody tr + tr th,
  .fs24-versand__table tbody tr + tr td {
    border-top: 0;
  }

  .fs24-versand__table tbody td + td {
    border-top: 1px solid var(--line, rgba(17, 19, 21, .12));
  }

  .fs24-versand__table tbody tr:nth-child(even) th {
    background: var(--metal-1, #f1f2f2);
  }

  .fs24-versand__table tbody tr:nth-child(even) td {
    background: #fff;
  }

  .fs24-versand__table tbody td::before {
    content: attr(data-label);
    color: var(--muted, #656b70);
    font-size: .85rem;
    font-weight: 560;
    text-align: left;
  }
}

@media (max-width: 680px) {
  .fs24-versand {
    padding: 24px 0 60px;
  }

  .fs24-versand__notice {
    padding: 18px 18px 18px 16px;
  }

  .fs24-versand__method,
  .fs24-versand__zone {
    padding: 18px 18px;
  }
}