/* ============================================================
   EDEL ENTRÜMPELUNG — unterseite.css
   ------------------------------------------------------------
   Gemeinsame Bausteine für alle Unterseiten im neuen Design:
   Ortsseiten, Leistungsseiten Ansbach, Kostenbeispiele,
   Umzugstipps, Wie es funktioniert, Impressum, Datenschutz.

   Farben, Schrift, Buttons (.nd-btn), Abschnitte (.nd-abschnitt,
   .nd-hell, .nd-weiss), Titel (.nd-titel) und der Fussbereich
   kommen aus startseite.css. Hier stehen nur die Unterseiten-
   Bausteine mit dem Präfix "us-".
   ============================================================ */

/* startseite.css setzt overflow-x: hidden; das verhindert position: sticky.
   clip schneidet ebenfalls ab, blockiert sticky aber nicht. */
.hp.us { overflow-x: clip; }

/* ---------- Kleine Überschrift ---------- */
.us .us-eyebrow,
.us .nd-kopf-mittig .us-eyebrow {
  margin: 0 0 0.8rem;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.15em; line-height: 1.4;
  text-transform: uppercase; color: var(--hp-accent-ink);
}
.us .us-eyebrow.us-eyebrow--hell { color: var(--hp-accent); }

/* index.css zentriert h2 mobil und setzt Linkfarben global */
.us main h2, .us main h3 { text-align: left; }
.us .nd-kopf-mittig h2 { text-align: center; }

/* ---------- Häkchen-Liste ---------- */
.us-haken { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.us-haken li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.96rem; line-height: 1.45; color: var(--hp-ink); }
.us-haken li > i:first-child {
  flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 0.05rem;
  border-radius: 50%; background: rgba(255,106,0,0.14); color: var(--hp-accent-ink); font-size: 0.66rem;
}
.us-haken--hell li { color: var(--hp-dark-text); }
/* Mehrzeilige Punkte bleiben linksbuendig, auch wenn der umgebende Text mobil zentriert ist */
.us-haken li, .us-hinweis { text-align: left; }
.us-haken--hell li > i:first-child { background: rgba(255,106,0,0.18); color: var(--hp-accent); }

.us-btn-rand { border-color: var(--hp-rule-2); color: var(--hp-ink); background: var(--hp-white); }
.us-btn-rand:hover { background: var(--hp-ink); border-color: var(--hp-ink); color: var(--hp-paper); }
.us-btn-rand i { font-size: 0.8em; }

/* Gemeinsames Symbol im Kreis */
.us-karte-icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 50%; background: var(--hp-dark); color: var(--hp-accent); font-size: 1.15rem;
}

/* ============================================================
   HERO — dunkel, Brotkrümel, Text | Karte "Auf einen Blick"
   ============================================================ */
.us-hero {
  background: var(--hp-night); color: var(--hp-dark-text);
  padding: calc(90px + clamp(2rem, 5vw, 3.5rem)) 0 clamp(3rem, 6vw, 4.5rem);
  border-bottom: 3px solid var(--hp-accent);
}
.us-hero-raster {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.us-hero--schlicht { padding-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.us-hero--schlicht .us-hero-raster { grid-template-columns: minmax(0, 1fr); }

.us-krumen {
  list-style: none; margin: 0 0 1.4rem; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.55rem;
  font-size: 0.84rem; color: var(--hp-dark-text3);
}
.us-krumen li { display: inline-flex; align-items: center; gap: 0.55rem; }
.us-krumen li + li::before { content: "›"; color: var(--hp-dark-text3); }
.us-krumen a { color: var(--hp-dark-text2); text-decoration: none; }
.us-krumen a:hover { color: var(--hp-accent); }
.us-krumen a:focus-visible { outline: 3px solid var(--hp-accent); outline-offset: 2px; }
.us-krumen [aria-current] { color: var(--hp-dark-text); font-weight: 600; }

.us-hero h1 {
  margin: 0; font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.05;
  letter-spacing: -0.03em; font-weight: 800; color: #ffffff; text-wrap: balance;
}
.us-hero-sub {
  margin: 1.1rem 0 0; max-width: 40rem;
  font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.7; color: var(--hp-dark-text2);
}
.us-hero-aktionen { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: clamp(1.6rem, 3vw, 2.2rem); }

.us-hero-karte {
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  background: var(--hp-dark); border: 1px solid var(--hp-dark-rule); border-radius: 12px;
  box-shadow: 0 22px 44px -26px rgba(0,0,0,0.65);
}
.us-hero-karte-titel {
  margin: 0 0 1rem; display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--hp-dark-text);
}
.us-hero-karte-titel i { color: var(--hp-accent); }
.us-hero-tel {
  display: flex; align-items: center; gap: 0.9rem; margin-top: 1.3rem; padding-top: 1.2rem;
  border-top: 1px solid var(--hp-dark-rule); color: var(--hp-dark-text); text-decoration: none;
}
.us-hero-tel-icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--hp-accent); color: #1f1206;
}
.us-hero-tel small { display: block; font-size: 0.78rem; color: var(--hp-dark-text3); }
.us-hero-tel strong { display: block; font-size: 1.08rem; color: var(--hp-dark-text); }
.us-hero-tel:hover strong { color: var(--hp-accent); }
.us-hero-tel:focus-visible { outline: 3px solid var(--hp-accent); outline-offset: 3px; }

/* ============================================================
   AUF EINEN BLICK — helle Leiste (Ratgeberseiten)
   ============================================================ */
.us-leiste-abschnitt { background: var(--hp-paper); padding: clamp(2rem, 4vw, 2.8rem) 0 0; }
.us-leiste {
  list-style: none; padding: 0; margin-top: 0; margin-bottom: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.2rem);
}
.us-leiste li {
  display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.2rem;
  background: var(--hp-white); border: 1px solid var(--hp-rule); border-radius: var(--nd-r); box-shadow: var(--nd-shadow);
}
.us-leiste-icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--hp-dark); color: var(--hp-accent); font-size: 1rem;
}
.us-leiste strong { display: block; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--hp-ink); }
.us-leiste-text { display: block; margin-top: 0.15rem; font-size: 0.88rem; line-height: 1.45; color: var(--hp-ink-2); }

/* ============================================================
   EINLEITUNG — Text | dunkle Karte "Das ist enthalten"
   ============================================================ */
.us-intro-raster {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.us .us-badge {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.1rem;
  padding: 0.45rem 0.9rem; border-radius: 999px;
  background: var(--hp-dark); color: var(--hp-dark-text); font-size: 0.82rem; font-weight: 700;
}
.us-badge i { color: var(--hp-accent); }
.us-intro-text > p:not(.us-badge) { margin: 1rem 0 0; max-width: 64ch; font-size: 1.02rem; line-height: 1.75; color: var(--hp-ink-2); }
.us-intro-text strong { color: var(--hp-ink); }
.us-intro-text a:not(.nd-btn) { color: var(--hp-accent-ink); font-weight: 600; }
.us-intro-text .nd-btn { margin-top: 1.7rem; }

.us-enthalten {
  position: sticky; top: calc(90px + 1.5rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--hp-dark); color: var(--hp-dark-text);
  border-radius: var(--nd-r); box-shadow: var(--nd-shadow);
}
.us .us-enthalten h3 {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0 0 1.1rem; font-size: 1.08rem; font-weight: 700; color: var(--hp-dark-text);
}
.us-enthalten h3::before { content: ""; flex: 0 0 auto; width: 22px; height: 3px; border-radius: 2px; background: var(--hp-accent); }
.us-enthalten .us-haken li { color: var(--hp-dark-text); }
.us-enthalten .us-haken li > i:first-child { background: rgba(255,106,0,0.18); color: var(--hp-accent); }
.us-hinweis {
  display: flex; align-items: flex-start; gap: 0.7rem; margin: 1.4rem 0 0; padding: 0.9rem 1rem;
  border-radius: var(--nd-r-sm); background: rgba(250,247,241,0.06); border: 1px solid var(--hp-dark-rule);
  font-size: 0.9rem; line-height: 1.5; color: var(--hp-dark-text2);
}
.us-hinweis i { flex: 0 0 auto; margin-top: 0.2rem; color: var(--hp-accent); }

/* ============================================================
   ABLAUF — vier nummerierte Karten mit Verbindungsstrich
   ============================================================ */
.us-schritte {
  --us-luecke: clamp(0.9rem, 1.6vw, 1.3rem);
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--us-luecke);
}
.us-schritte li {
  position: relative; padding: 1.6rem 1.4rem 1.5rem;
  background: var(--hp-white); border: 1px solid var(--hp-rule); border-radius: var(--nd-r); box-shadow: var(--nd-shadow);
}
.nd-weiss .us-schritte li { background: var(--hp-paper); }
.us-schritte li:not(:last-child)::after {
  content: ""; position: absolute; top: calc(1.6rem + 21px); right: calc(-1 * var(--us-luecke));
  width: var(--us-luecke); height: 2px; background: var(--hp-accent);
}
.us-schritt-nr {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1rem;
  border-radius: 12px; background: var(--hp-accent); color: #1f1206; font-size: 1.1rem; font-weight: 800;
}
.us .us-schritte h3 { margin: 0; font-size: 1.06rem; font-weight: 700; line-height: 1.3; color: var(--hp-ink); }
.us-schritte p { margin: 0.5rem 0 0; font-size: 0.93rem; line-height: 1.6; color: var(--hp-ink-2); }

/* ============================================================
   KARTEN — Info-Karten und verlinkte Karten
   ============================================================ */
.us-karten {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.4rem);
}
.us-karten--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.us-karte {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: 1.7rem 1.5rem 1.6rem;
  background: var(--hp-white); border: 1px solid var(--hp-rule); border-radius: var(--nd-r); box-shadow: var(--nd-shadow);
}
.nd-weiss .us-karte { background: var(--hp-paper); }
.us-karte .us-karte-icon { margin-bottom: 1rem; }
.us-karte strong { font-size: 1.08rem; font-weight: 700; line-height: 1.35; color: var(--hp-ink); }
.us-karte strong a { color: inherit; text-decoration: none; }
.us-karte-text { margin-top: 0.45rem; font-size: 0.94rem; line-height: 1.6; color: var(--hp-ink-2); }
.us .us-karte.us-karte--akzent { background: var(--hp-dark); border-color: var(--hp-dark); }
.us-karte--akzent .us-karte-icon { background: var(--hp-accent); color: #1f1206; }
.us-karte--akzent strong { color: var(--hp-dark-text); }
.us-karte--akzent .us-karte-text { color: var(--hp-dark-text2); }

/* Ganze Karte klickbar, Link bleibt der Titel */
.us-karte--link { padding-right: 3rem; transition: transform 0.18s ease, border-color 0.18s ease; }
.us-karte--link strong a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.us-karte--link:hover { transform: translateY(-3px); border-color: var(--hp-accent); }
.us .us-karte.us-karte--akzent.us-karte--link:hover { border-color: var(--hp-accent); }
.us-karte--link:focus-within { outline: 3px solid var(--hp-accent); outline-offset: 3px; }
.us-karte--link strong a:focus-visible { outline: none; }
.us-karte-pfeil { position: absolute; right: 1.3rem; top: 1.95rem; font-size: 0.9rem; color: var(--hp-accent-ink); }
.us-karte--akzent .us-karte-pfeil { color: var(--hp-accent); }
.us-mehr-link { margin: clamp(1.8rem, 3.5vw, 2.4rem) 0 0; text-align: center; }
/* Karte ueber die ganze Zeile, wenn sie sonst allein in der letzten Reihe stuende */
.us-karten > .us-karte--breit { grid-column: 1 / -1; }

/* ============================================================
   FRAGEN — Kopf links (mitlaufend) | Akkordeon rechts
   ============================================================ */
.us-faq-raster {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.us-faq-kopf { position: sticky; top: calc(90px + 1.5rem); }
.us-faq-kopf > p:not(.us-eyebrow) { margin: 1rem 0 0; font-size: 1rem; line-height: 1.65; color: var(--hp-ink-2); }
.us-faq-kopf .nd-btn { margin-top: 1.5rem; }
.us-fragen { display: grid; gap: 0.75rem; }
.us-frage {
  background: var(--hp-white); border: 1px solid var(--hp-rule); border-radius: var(--nd-r);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nd-weiss .us-frage { background: var(--hp-paper); }
.us .us-frage[open] { background: var(--hp-white); border-color: rgba(255,106,0,0.45); box-shadow: var(--nd-shadow); }
.us-frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; cursor: pointer; list-style: none;
  font-size: 1.02rem; font-weight: 700; line-height: 1.4; color: var(--hp-ink);
}
.us-frage summary::-webkit-details-marker { display: none; }
.us-frage summary:focus-visible { outline: 3px solid var(--hp-accent); outline-offset: 3px; border-radius: var(--nd-r); }
.us-plus { position: relative; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--hp-dark); }
.us-plus::before,
.us-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 1px;
  background: var(--hp-accent); transform: translate(-50%, -50%); transition: transform 0.2s ease;
}
.us-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.us-frage[open] .us-plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.us-antwort { padding: 0 1.25rem 1.25rem; }
.us-antwort p { margin: 0; max-width: 70ch; font-size: 0.98rem; line-height: 1.72; color: var(--hp-ink-2); }
.us-antwort a { color: var(--hp-accent-ink); font-weight: 600; }
.us-antwort strong { color: var(--hp-ink); }

/* ============================================================
   KONTAKT — dunkles Band
   ============================================================ */
.us-cta { background: var(--hp-dark); color: var(--hp-dark-text); padding: clamp(3.2rem, 6.5vw, 5rem) 0; }
.us-cta-raster {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.us-cta-text { padding-left: clamp(1rem, 2vw, 1.6rem); border-left: 3px solid var(--hp-accent); }
.us-cta-text > p { margin: 1rem 0 0; max-width: 58ch; font-size: 1.02rem; line-height: 1.7; color: var(--hp-dark-text2); }
.us-cta-text .us-haken { margin-top: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.6rem 1.4rem; }
.us-cta-aktionen {
  display: flex; flex-direction: column; gap: 0.75rem; padding: clamp(1.4rem, 3vw, 2rem);
  background: rgba(250,247,241,0.04); border: 1px solid var(--hp-dark-rule); border-radius: var(--nd-r);
}
.us-cta-note { margin: 0.2rem 0 0; text-align: center; font-size: 0.85rem; color: var(--hp-dark-text3); }

/* ============================================================
   KOSTENBEISPIELE — Preiskarten, Hinweis, Faktoren
   ============================================================ */
.us-preise {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.4rem);
}
.us-preis-karte {
  display: flex; flex-direction: column; padding: 1.6rem 1.5rem;
  background: var(--hp-white); border: 1px solid var(--hp-rule); border-radius: var(--nd-r); box-shadow: var(--nd-shadow);
}
.us-preis-kopf { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; }
.us-preis-kopf .us-karte-icon { width: 48px; height: 48px; font-size: 1.05rem; }
.us .us-preis-kopf h3 { margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: var(--hp-ink); }
.us-preis-karte .us-haken { flex: 1; gap: 0.55rem; }
.us-preis-karte .us-haken li { font-size: 0.93rem; }
.us .us-preis {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.3rem 1rem;
  margin: 1.3rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--hp-rule);
}
.us-preis-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hp-ink-3); }
.us-preis-wert { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; color: var(--hp-ink); white-space: nowrap; }
.us .us-preis-karte--akzent { background: var(--hp-dark); border-color: var(--hp-dark); }
.us .us-preis-karte--akzent h3 { color: var(--hp-dark-text); }
.us-preis-karte--akzent .us-karte-icon { background: var(--hp-accent); color: #1f1206; }
.us-preis-karte--akzent .us-haken li { color: var(--hp-dark-text); }
.us-preis-karte--akzent .us-haken li > i:first-child { background: rgba(255,106,0,0.18); color: var(--hp-accent); }
.us .us-preis-karte--akzent .us-preis { border-top-color: var(--hp-dark-rule); }
.us-preis-karte--akzent .us-preis-label { color: var(--hp-dark-text3); }
.us-preis-karte--akzent .us-preis-wert { color: var(--hp-accent); }

.us-notiz {
  display: flex; align-items: flex-start; gap: 0.9rem;
  max-width: 60rem; margin: clamp(1.6rem, 3vw, 2.2rem) auto 0; padding: 1.1rem 1.3rem;
  background: var(--hp-sand); border-left: 4px solid var(--hp-accent); border-radius: var(--nd-r-sm);
}
.us-notiz i { flex: 0 0 auto; margin-top: 0.25rem; color: var(--hp-accent-ink); }
.us-notiz p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--hp-ink-2); }

.us-faktoren {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.4rem);
}
.us-faktor {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-content: start;
  padding: 1.4rem; background: var(--hp-paper); border: 1px solid var(--hp-rule); border-radius: var(--nd-r);
}
.nd-hell .us-faktor { background: var(--hp-white); }
.us-faktor .us-karte-icon { grid-row: span 2; width: 46px; height: 46px; font-size: 1rem; }
.us .us-faktor h3 { margin: 0; align-self: end; font-size: 1.02rem; font-weight: 700; line-height: 1.3; color: var(--hp-ink); }
.us-faktor p { margin: 0.35rem 0 0; font-size: 0.92rem; line-height: 1.6; color: var(--hp-ink-2); }
/* Unvollstaendige letzte Reihe mittig: das Raster wird fein unterteilt,
   jede Karte belegt zwei Teilspalten, die Reste ruecken in die Mitte.
   Doppelte Klasse, damit die Spaltenregeln im RESPONSIV-Teil weiter unten nicht greifen. */
@media (min-width: 1200px) {
  .us-faktoren.us-faktoren--zentriert { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .us-faktoren--zentriert > .us-faktor { grid-column: span 2; }
  .us-faktoren--zentriert > .us-faktor:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
  .us-faktoren--zentriert > .us-faktor:last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
}
@media (min-width: 640px) and (max-width: 1199px) {
  .us-faktoren.us-faktoren--zentriert { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .us-faktoren--zentriert > .us-faktor { grid-column: span 2; }
  .us-faktoren--zentriert > .us-faktor:last-child:nth-child(odd) { grid-column: 2 / span 2; }
}

/* ============================================================
   UMZUGSTIPPS — Tipp-Karten, Text | Checkliste
   ============================================================ */
.us-tipps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.4rem);
}
.us-tipp {
  padding: 1.7rem 1.5rem 1.6rem;
  background: var(--hp-white); border: 1px solid var(--hp-rule); border-radius: var(--nd-r); box-shadow: var(--nd-shadow);
}
.nd-weiss .us-tipp { background: var(--hp-paper); }
.us-tipp-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.us-tipp-nr { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--hp-accent-ink); }
.us .us-tipp h3 { margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: var(--hp-ink); }
.us-tipp p { margin: 0.55rem 0 0; font-size: 0.94rem; line-height: 1.65; color: var(--hp-ink-2); }

.us-split {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.us-split-text > p:not(.us-eyebrow) { margin: 1rem 0 0; max-width: 62ch; font-size: 1.02rem; line-height: 1.72; color: var(--hp-ink-2); }
.us-split-text .nd-btn { margin-top: 1.7rem; }
.us-checkliste {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--hp-dark); color: var(--hp-dark-text); border-radius: var(--nd-r); box-shadow: var(--nd-shadow);
}
.us .us-checkliste-titel { margin: 0 0 1.1rem; font-size: 1.02rem; font-weight: 700; line-height: 1.4; color: var(--hp-dark-text); }

/* ============================================================
   WIE ES FUNKTIONIERT — senkrechte Zeitleiste
   ============================================================ */
.us-zeitleiste { list-style: none; margin: 0 auto; padding: 0; max-width: 56rem; display: grid; gap: 1.2rem; }
.us-zeit { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 1.2rem; }
.us-zeit-nr {
  position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px;
  border-radius: 50%; background: var(--hp-dark); color: var(--hp-accent); font-size: 1.4rem; font-weight: 800;
}
.us-zeit:not(:last-child)::before {
  content: ""; position: absolute; left: 31px; top: 64px; bottom: -1.2rem; width: 2px; background: var(--hp-rule-2);
}
.us-zeit-karte {
  padding: 1.4rem 1.5rem;
  background: var(--hp-white); border: 1px solid var(--hp-rule); border-radius: var(--nd-r); box-shadow: var(--nd-shadow);
}
.nd-weiss .us-zeit-karte { background: var(--hp-paper); }
.us-zeit-kopf { display: flex; align-items: center; gap: 0.7rem; }
.us-zeit-kopf i { color: var(--hp-accent-ink); font-size: 1.1rem; }
.us .us-zeit-kopf h3 { margin: 0; font-size: 1.12rem; font-weight: 700; line-height: 1.3; color: var(--hp-ink); }
.us-zeit-karte > p:not(.us-zeit-notiz) { margin: 0.6rem 0 0; font-size: 0.96rem; line-height: 1.7; color: var(--hp-ink-2); }
.us .us-zeit-notiz {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0; padding: 0.45rem 0.85rem;
  border-radius: 999px; background: var(--hp-dark); color: var(--hp-dark-text); font-size: 0.85rem; font-weight: 600;
}
.us-zeit-notiz i { color: var(--hp-accent); }

/* ============================================================
   RECHTLICHES — Karten, Datenschutz mit Inhaltsverzeichnis
   ============================================================ */
.us-recht-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.4rem); }
.us-recht-karte {
  padding: 1.6rem 1.5rem;
  background: var(--hp-white); border: 1px solid var(--hp-rule); border-radius: var(--nd-r); box-shadow: var(--nd-shadow);
}
.us-recht-karte--breit { grid-column: 1 / -1; }
.us-recht-kopf { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.9rem; }
.us-recht-kopf .us-karte-icon { width: 44px; height: 44px; font-size: 0.95rem; }
.us .us-recht-kopf h2 { margin: 0; font-size: 1.12rem; line-height: 1.3; font-weight: 700; text-align: left; color: var(--hp-ink); }
.us-recht-karte p { margin: 0; font-size: 0.98rem; line-height: 1.75; color: var(--hp-ink-2); }
.us-recht-karte p + p { margin-top: 0.8rem; }
.us-recht-karte a { color: var(--hp-accent-ink); font-weight: 600; overflow-wrap: anywhere; }
.us-recht-karte strong { color: var(--hp-ink); }
.us .us-stand { margin: 1.6rem 0 0; font-size: 0.85rem; color: var(--hp-ink-3); }

.us-ds-raster { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.us-toc {
  position: sticky; top: calc(90px + 1.5rem);
  padding: 1.3rem; background: var(--hp-white); border: 1px solid var(--hp-rule); border-radius: var(--nd-r);
}
.us .us-toc-titel {
  margin: 0 0 0.8rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--hp-ink-3);
}
.us-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.us-toc a {
  display: block; padding: 0.5rem 0.7rem; border-radius: var(--nd-r-sm);
  font-size: 0.92rem; font-weight: 600; line-height: 1.35; color: var(--hp-ink); text-decoration: none;
}
.us-toc a:hover { background: var(--hp-paper); color: var(--hp-accent-ink); }
.us-toc a:focus-visible { outline: 3px solid var(--hp-accent); outline-offset: 2px; }
.us-ds-bloecke { display: grid; gap: clamp(1rem, 1.8vw, 1.3rem); }
.us-ds-bloecke .us-recht-karte { scroll-margin-top: calc(90px + 1.5rem); }

/* ============================================================
   RESPONSIV
   ============================================================ */
@media (max-width: 1199px) {
  .us-karten--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .us-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .us-schritte li:nth-child(2)::after { display: none; }
  .us-preise, .us-tipps, .us-faktoren { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .us-leiste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 999px) {
  .us-hero-raster, .us-intro-raster, .us-faq-raster, .us-cta-raster, .us-split, .us-ds-raster { grid-template-columns: minmax(0, 1fr); }
  .us-hero-karte { max-width: 520px; }
  .us-enthalten, .us-faq-kopf, .us-toc { position: static; }
  .us-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .us-ds-bloecke .us-recht-karte { scroll-margin-top: calc(70px + 1rem); }
}

@media (max-width: 639px) {
  .us-hero h1 { font-size: clamp(1.85rem, 8.4vw, 2.4rem); hyphens: auto; -webkit-hyphens: auto; }
  .us-hero-aktionen { flex-direction: column; }
  .us-hero-aktionen .nd-btn { width: 100%; }
  .us-karten, .us-karten--4, .us-schritte, .us-preise, .us-tipps, .us-faktoren, .us-leiste, .us-recht-raster { grid-template-columns: minmax(0, 1fr); }
  .us-schritte li::after { display: none; }
  .us-intro-text .nd-btn, .us-split-text .nd-btn { width: 100%; }
  .us-zeit { grid-template-columns: 48px minmax(0, 1fr); gap: 0.9rem; }
  .us-zeit-nr { width: 48px; height: 48px; font-size: 1.1rem; }
  .us-zeit:not(:last-child)::before { left: 23px; top: 48px; }
  .us-frage summary { padding: 1rem; font-size: 0.98rem; }
  .us-antwort { padding: 0 1rem 1.1rem; }
  .us-cta-text { padding-left: 1rem; }
}