/* ------------------------------------------------------------------
   smart DSGVO — Entwurf Firmenseite
   Farben aus dem Logo entnommen: Gold-Verlauf #FDD35A → #FDA703,
   Schrift-Dunkel #232323, Weiß.
   Bewusst ohne Framework, ohne CDN, ohne Google Fonts:
   keine externen Verbindungen = keine Einwilligung nötig.
   ------------------------------------------------------------------ */

:root {
  --gold-100: #fef6e0;
  --gold-200: #fde8ac;
  --gold-400: #fdd35a;
  --gold-500: #fcb61e;
  --gold-600: #fda703;
  --gold-700: #d98a00;
  --ink: #232323;
  --ink-700: #3d3d3d;
  --ink-500: #6b6b6b;
  --ink-300: #9a9a9a;
  --line: #e6e4e0;
  --bg: #ffffff;
  --bg-soft: #faf9f7;
  --bg-dark: #1a1a1a;
  --radius: 14px;
  --maxw: 1140px;
  --shadow: 0 1px 2px rgba(35,35,35,.04), 0 8px 24px rgba(35,35,35,.06);
  --shadow-lg: 0 2px 4px rgba(35,35,35,.05), 0 18px 48px rgba(35,35,35,.10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-700);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.18; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.55rem, 2.9vw, 2.15rem); }
h3 { font-size: 1.16rem; }
p { margin: 0 0 1.1em; }
a { color: var(--ink); text-decoration-color: var(--gold-500); text-underline-offset: 3px; }
a:hover { color: var(--gold-700); }
strong { color: var(--ink); font-weight: 650; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

/* ---------- Kopfzeile ---------- */
.topbar {
  background: var(--bg-dark); color: #d9d7d3; font-size: .83rem;
  padding: 7px 0;
}
.topbar .wrap { display: flex; gap: 22px; align-items: center; justify-content: flex-end; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { color: var(--gold-400); }
.topbar .left { margin-right: auto; color: #a8a5a0; }

header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.93); backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
header.site .wrap { display: flex; align-items: center; gap: 28px; min-height: 78px; }
.logo img { height: 38px; width: auto; }
nav.main { margin-left: auto; display: flex; gap: 26px; align-items: center; }
.kopf-cta { flex: none; }
/* Die Schaltfläche in der Navigation ist ausgenommen — sonst überschreibt
   diese Regel ihr seitliches Polster und sie wirkt gequetscht. */
nav.main a:not(.btn) {
  text-decoration: none; color: var(--ink-700); font-size: .95rem; font-weight: 500;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
nav.main a:not(.btn):hover { color: var(--ink); border-bottom-color: var(--gold-500); }
nav.main a:not(.btn).active { color: var(--ink); border-bottom-color: var(--gold-500); }
nav.main .btn { margin-left: 6px; }
nav.main a, .btn { white-space: nowrap; }


/* ---------- Kopfzeile auf schmaleren Bildschirmen ----------
   Unter 900 px passt die Navigation nicht mehr neben das Logo. Sie rutscht
   dann in eine zweite Zeile, statt zu verschwinden oder die Beschriftungen
   mitten im Wort zu trennen. Ohne Skript. */
@media (max-width: 1100px) {
  nav.main { gap: 18px; }
  nav.main a:not(.btn) { font-size: .9rem; }
}

@media (max-width: 900px) {
  header.site .wrap {
    flex-wrap: wrap; gap: 0; min-height: 0;
    padding-top: 12px; padding-bottom: 2px;
  }
  .logo { order: 1; }
  .kopf-cta { order: 2; margin-left: auto; }
  nav.main {
    order: 3; flex-basis: 100%; margin-left: 0; gap: 18px;
    overflow-x: auto; padding: 10px 0 8px; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  nav.main::-webkit-scrollbar { display: none; }
  nav.main a:not(.btn) { padding-bottom: 4px; }
  /* weicher Auslauf am rechten Rand: zeigt an, dass sich die Zeile schieben lässt */
  nav.main { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
             mask-image: linear-gradient(90deg, #000 86%, transparent); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 13px 24px; border-radius: 10px; font-weight: 600;
  font-size: .97rem; text-decoration: none; border: 1.5px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--ink); box-shadow: 0 4px 14px rgba(253,167,3,.32);
}
.btn-gold:hover { color: var(--ink); box-shadow: 0 7px 20px rgba(253,167,3,.42); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { color: #fff; background: #000; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--gold-500); color: var(--ink); }
.btn-sm { padding: 9px 17px; font-size: .9rem; }

/* ---------- Abschnitte ---------- */
section { padding: 74px 0; }
section.soft { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
section.tight { padding: 52px 0; }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gold-700); margin-bottom: 10px;
}
.lead { font-size: 1.14rem; color: var(--ink-500); }

/* ---------- Hero ---------- */
.hero { padding: 86px 0 74px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; top: -220px; right: -180px; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(253,211,90,.30), rgba(253,211,90,0) 68%);
  pointer-events: none;
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: .45em; }
.hero .lead { font-size: 1.22rem; max-width: 33em; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero-note { margin-top: 22px; font-size: .9rem; color: var(--ink-300); }

.card-portrait {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg);
  background: linear-gradient(160deg, var(--gold-100), #fff);
  padding: 26px 26px 0; text-align: center;
}
.card-portrait img { border-radius: 10px; margin: 0 auto; }
.card-portrait .cap { padding: 18px 4px 24px; }
.card-portrait .cap b { display: block; color: var(--ink); font-size: 1.03rem; }
.card-portrait .cap span { font-size: .88rem; color: var(--ink-500); }

/* ---------- Vertrauensleiste ---------- */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-soft); padding: 22px 0; }
.trust .wrap { display: grid; grid-template-columns: repeat(4, auto); gap: 14px 30px; justify-content: space-between; }
.trust .item { display: flex; gap: 10px; align-items: center; font-size: .89rem; color: var(--ink-700); }
.trust .item svg { flex: none; }

/* ---------- Raster / Karten ---------- */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.card h3 { margin-bottom: .35em; }
.card p { font-size: .96rem; color: var(--ink-500); }
.card .more { margin-top: auto; padding-top: 14px; font-weight: 600; font-size: .93rem; color: var(--gold-700); text-decoration: none; }
.card .more:hover { text-decoration: underline; }
.card .ico {
  width: 46px; height: 46px; border-radius: 11px; margin-bottom: 16px;
  background: linear-gradient(140deg, var(--gold-400), var(--gold-600));
  display: flex; align-items: center; justify-content: center;
}
.card.flat { box-shadow: none; background: transparent; border: none; padding: 0; }

/* ---------- Ablauf ---------- */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.step { position: relative; padding-top: 52px; }
.step::before {
  counter-increment: s; content: counter(s);
  position: absolute; top: 0; left: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .95rem;
}
.step::after {
  content: ""; position: absolute; top: 19px; left: 46px; right: -26px; height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
}
.step:last-child::after { display: none; }
.step h3 { font-size: 1.02rem; }
.step p { font-size: .93rem; color: var(--ink-500); margin: 0; }

/* ---------- Liste mit Haken ---------- */
ul.checks { list-style: none; padding: 0; margin: 0 0 1.2em; }
ul.checks li { position: relative; padding-left: 32px; margin-bottom: 11px; }
ul.checks li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 6px;
  background: linear-gradient(140deg, var(--gold-400), var(--gold-600));
}
ul.checks li::after {
  content: ""; position: absolute; left: 6px; top: 10px; width: 8px; height: 4px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}

/* ---------- Umzugs-/Hinweisband ---------- */
.band {
  background: linear-gradient(135deg, var(--gold-100), var(--gold-200));
  border-radius: var(--radius); padding: 34px 38px;
  display: flex; gap: 32px; align-items: center; flex-wrap: wrap;
}
.band .txt { flex: 1 1 420px; }
.band h3 { margin-bottom: .3em; }
.band p { margin: 0; color: var(--ink-700); font-size: .98rem; }

/* ---------- dunkler Abschnitt ---------- */
.dark { background: var(--bg-dark); color: #c9c7c3; }
.dark h2, .dark h3 { color: #fff; }
.dark .lead { color: #a8a5a0; }
.dark .card { background: #242424; border-color: #333; box-shadow: none; }
.dark .card p { color: #a8a5a0; }

/* ---------- Kontaktformular ---------- */
.form { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.form .full { grid-column: 1 / -1; }
label { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
input, textarea, select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 9px;
  font: inherit; font-size: .96rem; background: #fff; color: var(--ink);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(253,211,90,.35); }
.hint { font-size: .82rem; color: var(--ink-300); }

/* ---------- Fußzeile ---------- */
footer.site { background: var(--bg-dark); color: #9a978f; padding: 56px 0 28px; font-size: .92rem; }
footer.site .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
footer.site h4 { color: #fff; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }
footer.site a { color: #c9c7c3; text-decoration: none; display: block; margin-bottom: 8px; }
footer.site a:hover { color: var(--gold-400); }
footer.site .logo-f img { height: 34px; margin-bottom: 16px; }
footer.site .legal { border-top: 1px solid #2e2e2e; margin-top: 38px; padding-top: 20px; display: flex; gap: 20px; flex-wrap: wrap; font-size: .85rem; }
footer.site .legal a { display: inline; margin: 0; }
footer.site .legal .sp { margin-left: auto; }

/* ---------- Platzhalter-Markierung (nur im Entwurf) ---------- */
.ph {
  background: repeating-linear-gradient(135deg, #fff8e6 0 10px, #fef1cd 10px 20px);
  border: 1.5px dashed var(--gold-600); border-radius: 8px; padding: 2px 8px;
  color: var(--ink-700); font-size: .92em;
}
.ph-block {
  background: #fff8e6; border: 1.5px dashed var(--gold-600); border-radius: var(--radius);
  padding: 18px 22px; color: var(--ink-700); font-size: .93rem;
}
.ph-block b { color: var(--gold-700); }

/* ---------- 404 / Alternativseite ---------- */
.gone { padding: 68px 0 40px; }
.gone .badge {
  display: inline-flex; align-items: center; gap: 8px; background: var(--gold-100);
  border: 1px solid var(--gold-200); color: var(--ink); border-radius: 999px;
  padding: 7px 16px; font-size: .85rem; font-weight: 600; margin-bottom: 20px;
}
.gone h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }

/* ---------- klein ---------- */
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .grid-3, .grid-4, .steps, .form { grid-template-columns: 1fr 1fr; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  .step::after { display: none; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4, .steps, .form { grid-template-columns: 1fr; }
  section { padding: 54px 0; }
}

/* ---------- Artikeltext (Ratgeber) ---------- */
.artikel h2 { font-size: 1.45rem; margin: 2em 0 .5em; }
.artikel h3 { font-size: 1.15rem; margin: 1.8em 0 .4em; }
.artikel h4 { font-size: 1.02rem; margin: 1.6em 0 .4em; }
.artikel p { margin: 0 0 1.1em; }
.artikel ul, .artikel ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.artikel li { margin-bottom: .5em; }
.artikel img { border-radius: 10px; margin: 1.4em 0; height: auto; }
.artikel a { color: var(--gold-700); }
.artikel strong { color: var(--ink); }
.artikel .videolink {
  background: var(--gold-100); border: 1px solid var(--gold-200);
  border-radius: 10px; padding: 14px 18px; margin: 1.4em 0;
}
.artikel .videolink a { font-weight: 600; text-decoration: none; }
.artikel .videolink a:hover { text-decoration: underline; }
.artikel hr { border: none; border-top: 1px solid var(--line); margin: 2em 0; }
.card .eyebrow { display: block; }

/* ---------- selbst gehostete Videos ---------- */
.artikel figure.video { margin: 1.6em 0; }
.artikel figure.video video {
  width: 100%; height: auto; border-radius: 12px; background: #000;
  box-shadow: var(--shadow);
}

/* ---------- Paketübersicht ---------- */
.pakete .paket { position: relative; }
.pakete .paket h3 { margin-bottom: .15em; }
.paket-zusatz { font-size: .86rem; color: var(--ink-300); margin: 0 0 16px; }
ul.leistungen { list-style: none; padding: 0; margin: 0 0 18px; }
ul.leistungen li {
  position: relative; padding-left: 28px; margin-bottom: 9px;
  font-size: .94rem; color: var(--ink-700);
}
ul.leistungen li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 17px; height: 17px;
  border-radius: 5px; background: linear-gradient(140deg, var(--gold-400), var(--gold-600));
}
ul.leistungen li::after {
  content: ""; position: absolute; left: 5px; top: 10px; width: 7px; height: 3.5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
ul.leistungen li.nein { color: var(--ink-300); }
ul.leistungen li.nein::before { background: #e8e6e2; }
ul.leistungen li.nein::after {
  left: 5px; top: 9px; width: 7px; height: 7px; border: none; transform: none;
  background: linear-gradient(to bottom right, transparent 44%, #b4b0aa 44%, #b4b0aa 56%, transparent 56%);
}
.artikel h4 { font-size: 1.05rem; margin: 1.6em 0 .4em; }

/* ---------- Korrekturen für schmale Bildschirme ----------
   Die obere Leiste erzwang bisher eine Mindestbreite von rund 500 px,
   dadurch lief die ganze Seite auf dem Telefon über den Rand hinaus. */
.topbar .wrap { flex-wrap: wrap; gap: 6px 18px; justify-content: center; }
.topbar .left { margin-right: auto; }

@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  .wrap { padding: 0 18px; }
  .topbar { font-size: .78rem; }
  .topbar .wrap { justify-content: space-between; }
  .topbar .left { display: none; }
  header.site .wrap { min-height: 64px; }
  .logo img { height: 32px; }
  .hero { padding: 44px 0 36px; }
  .hero .lead, .lead { font-size: 1.04rem; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { flex: 1 1 100%; text-align: center; }
  .band { padding: 24px 22px; gap: 18px; }
  .band .btn { width: 100%; text-align: center; }
  .card { padding: 22px 20px; }
  .artikel img, .artikel figure.video video { border-radius: 8px; }
  footer.site .cols { grid-template-columns: 1fr; gap: 26px; }
  footer.site .legal { flex-direction: column; gap: 8px; }
  footer.site .legal .sp { margin-left: 0; }
  table { display: block; overflow-x: auto; }
}

/* Lange Wörter und Adressen dürfen umbrechen statt den Rand zu sprengen */
h1, h2, h3, h4, p, li, td, th { overflow-wrap: anywhere; }
.artikel a { word-break: break-word; }