/* Städteseiten: Ergänzungen zu den Bausteinen der Privatumzug-Seite (seiten.css) */

/* Vergleich: ohne Vorbereitung gegen mit John & Martin, je Stadt eigene Zeilen */
.st-vg { padding-block: clamp(72px, 9vw, 120px); }
.st-vg__titel { max-width: 820px; }
.st-vg__tabelle { margin-top: clamp(36px, 4vw, 52px); border-radius: 24px; overflow: hidden; background: var(--karte); box-shadow: 0 0 0 1px var(--linie); }
.st-vg table { width: 100%; border-collapse: collapse; }
.st-vg th, .st-vg td { padding: 20px 24px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.st-vg tbody tr:last-child > * { border-bottom: 0; }
.st-vg thead th { font: 600 15px var(--sans); color: var(--titel); }
.st-vg thead .st-vg__wir { background: var(--tief); color: #fff; }
.st-vg tbody th { width: 24%; font-weight: 600; color: var(--titel); }
.st-vg td { color: var(--text-2); }
.st-vg td .i { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; color: #9aa3b2; }
.st-vg td.st-vg__wir { background: color-mix(in srgb, var(--tief) 5%, var(--karte)); color: var(--titel); font-weight: 600; }
.st-vg td.st-vg__wir .i { padding: 3px; border-radius: 50%; background: var(--gold); color: #fff; }
.st-vg__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 36px; }
@media (max-width: 960px) {
  .st-vg thead { display: none; }
  .st-vg tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--linie); }
  .st-vg tbody tr:last-child { border-bottom: 0; }
  .st-vg th, .st-vg td { display: block; width: auto !important; border: 0 !important; padding: 6px 20px; }
  .st-vg__aktion .knopf { width: 100%; justify-content: center; }
}

/* Schutz: Foto links, Liste mit Haken rechts, Versicherung am Ende */
.st-sz { padding-block: clamp(72px, 9vw, 120px); background: var(--lp-warm, #f7f3ec); }
.st-sz__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.st-sz__foto { aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; }
.st-sz__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-sz__text { margin-top: 20px; max-width: 34em; font-size: 18px; line-height: 1.7; color: var(--text-2); }
.st-sz__liste { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.st-sz__liste li { display: flex; gap: 14px; padding-block: 16px; border-bottom: 1px solid var(--linie); }
.st-sz__liste li > .i { flex: none; width: 24px; height: 24px; padding: 5px; margin-top: 2px; border-radius: 50%; background: var(--gold); color: #fff; }
.st-sz__liste b { font: 400 21px/1.25 var(--serif); color: var(--titel); }
.st-sz__liste p { margin-top: 4px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.st-sz__vers { display: flex; gap: 12px; align-items: flex-start; margin-top: 26px; padding: 16px 18px; border-radius: 14px; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); font-size: 15.5px; line-height: 1.55; color: var(--titel); }
.st-sz__vers .i { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--akzent-text); }
@media (max-width: 960px) { .st-sz__in { grid-template-columns: 1fr; } .st-sz__foto { aspect-ratio: 4 / 3; } }
.st-vg__text { max-width: 760px; margin-top: 20px; }
.st-vg__text p { font-size: 18px; line-height: 1.7; color: var(--text-2); }
.st-vg__text p + p { margin-top: 14px; }

/* Sorgen gegen Lösung (Heidelberg): grau „Das erleben viele“, dunkelblau „Bei John & Martin“ */
.st-sl { padding-block: clamp(72px, 9vw, 120px); }
.st-sl ul { list-style: none; margin: 0; padding: 0; }
.st-sl__kopf { max-width: 860px; }
.st-sl__kopf p { margin-top: 20px; max-width: 34em; font-size: 18px; line-height: 1.7; color: var(--text-2); }
.st-sl__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(36px, 4vw, 52px); }
.st-sl__paar > div { padding: clamp(28px, 3.4vw, 44px); border-radius: 24px; }
.st-sl__ohne { background: var(--flaeche); } .st-sl__mit { background: var(--tief); }
.st-sl__k { margin-bottom: 18px; font: 600 14px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.st-sl__mit .st-sl__k { color: var(--gold-hell); }
.st-sl li { display: flex; gap: 14px; padding-block: 16px; border-top: 1px solid var(--linie); }
.st-sl__mit li { border-top-color: rgba(255, 255, 255, .14); }
.st-sl li > .i { flex: none; width: 22px; height: 22px; margin-top: 3px; }
.st-sl__ohne li > .i { color: #9aa3b2; }
.st-sl__mit li > .i { padding: 4px; border-radius: 50%; background: var(--gold); color: #fff; }
.st-sl b { display: block; font: 400 20px/1.25 var(--serif); }
.st-sl__ohne b { color: var(--text); } .st-sl__mit b { color: #fff; }
.st-sl li span { display: block; margin-top: 4px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.st-sl__mit li span { color: rgba(255, 255, 255, .78); }
.st-sl__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: clamp(32px, 4vw, 48px); padding: 24px 28px; border-radius: 20px; background: var(--flaeche); }
.st-sl__zitat { font: italic 400 22px/1.4 var(--serif); color: var(--titel); }
.st-sl__zitat span { display: block; margin-top: 6px; font: 400 14px var(--sans); color: var(--text-2); }
.st-sl__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
@media (max-width: 960px) { .st-sl__paar { grid-template-columns: 1fr; } .st-sl__aktion .knopf { width: 100%; justify-content: center; } }

/* Versprechen der Gründer (Mannheim): Text links, Karte mit vier Zusagen rechts */
.st-vs { padding-block: clamp(72px, 9vw, 120px); }
.st-vs ul { list-style: none; margin: 0; padding: 0; }
.st-vs__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.st-vs__text { margin-top: 20px; max-width: 34em; font-size: 18px; line-height: 1.7; color: var(--text-2); }
.st-vs__beweis { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; font-weight: 600; color: var(--text); text-decoration: none; }
.st-vs__beweis .i { width: 18px; height: 18px; color: var(--gold); }
.st-vs__beweis b { color: var(--titel); font-size: 17px; }
.st-vs__karte { padding: clamp(28px, 3.4vw, 44px); border-radius: 24px; background: var(--karte); box-shadow: 0 0 0 1px var(--linie), 0 40px 80px -56px rgba(11, 26, 58, .5); }
.st-vs__k { padding-bottom: 14px; border-bottom: 1px solid var(--linie); font: 400 26px var(--serif); color: var(--titel); }
.st-vs__karte li { display: flex; gap: 14px; padding-block: 14px; border-bottom: 1px solid var(--linie); }
.st-vs__karte li > .i { flex: none; width: 24px; height: 24px; padding: 5px; margin-top: 2px; border-radius: 50%; background: var(--gold); color: #fff; }
.st-vs__karte b { display: block; font-size: 18px; color: var(--titel); }
.st-vs__karte li span { display: block; margin-top: 2px; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.st-vs__gf { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.st-vs__fotos { display: flex; flex: none; }
.st-vs__fotos img { width: 52px; height: 52px; border-radius: 50%; outline: 3px solid var(--karte); }
.st-vs__fotos img + img { margin-left: -12px; }
.st-vs__gf b { display: block; font: 600 16px var(--sans); color: var(--titel); }
.st-vs__gf span { font-size: 14px; color: var(--text-2); }
.st-vs__knopf { width: 100%; margin-top: 22px; justify-content: center; }
@media (max-width: 960px) { .st-vs__in { grid-template-columns: 1fr; } }