/* ======================================
   Mobile Styles (bis 860px Breite)
   ====================================== */

:root {
  --pad: 18px;
}

html, body {
  overflow-x: hidden;
}

.wrap {
  padding: var(--pad);
}

/* ---------- Header & Navigation ---------- */
.head-grid {
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 16px 0;
}

.brand {
  font-size: 22px;
}

.nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.nav a {
  font-size: 15px;
}

/* ---------- Buttons ---------- */
.cta {
  width: 100%;
  text-align: center;
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 10px;
}

.cta.secondary {
  width: auto;
}

/* ---------- Hero Section ---------- */
.hero {
  grid-template-columns: 1fr !important;
  padding: 18px;
  gap: 14px;
}

.hero h1 {
  font-size: 28px;
}

.hero-art {
  min-height: 180px;
}

/* ---------- Grids & Cards ---------- */
.grid {
  grid-template-columns: 1fr !important;
  gap: 12px;
}

.card {
  padding: 16px;
}

/* ---------- USP Section ---------- */
.usps .item {
  align-items: flex-start;
}

.usps img {
  width: 38px;
  height: 38px;
}

/* ---------- Preise & Pakete ---------- */
.two-col {
  grid-template-columns: 1fr !important;
  gap: 12px;
}

#plz {
  width: 100%;
}

.zones button.cta {
  width: 100%;
}

#plz-result {
  font-size: 14px;
}

/* Tabellen scrollbar bei kleinen Bildschirmen */
.zones table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-spacing: 0;
}

/* ---------- Ablauf ---------- */
.steps .item {
  gap: 10px;
}

.steps .num {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 14px;
}

/* ---------- Hinweise ---------- */
.notice {
  font-size: 14px;
}

/* ---------- Social Banner ---------- */
.social-banner {
  padding: 12px;
}

.social-row {
  gap: 10px;
}

/* ---------- Footer ---------- */
footer {
  padding: 20px 0;
  font-size: 14px;
}

/* ---------- Prozess-Seite ---------- */
main.wrap h1 {
  font-size: 26px;
}

.img-grid {
  grid-template-columns: 1fr !important;
  gap: 12px;
}

figure img {
  height: 220px;
}

.card {
  margin: 14px 0;
}

header .nav a {
  margin-left: 10px;
}

/* ---------- Rücklink-Button auf Prozessseite ---------- */
.card .cta.secondary {
  width: 100%;
  text-align: center;
}

/* ---------- Impressum / Datenschutz ---------- */
#impressum, #datenschutz {
  margin-top: 20px;
}

#impressum p, #datenschutz p {
  font-size: 15px;
  line-height: 1.5;
}