/* ============================================================
   Wir machen Vermieter: Website
   Design-System (aus dem WMV-Funnel: Clash Display + Satoshi,
   Navy #032141 · Gelb #ffcc01, helle Cards)
   ============================================================ */
/* Schriften selbst gehostet (kein Fremd-CDN: DSGVO + kein Render-Blocking durch @import) */
@font-face { font-family: "Clash Display"; src: url("/assets/fonts/clash-display-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("/assets/fonts/clash-display-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("/assets/fonts/clash-display-600.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-700.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }

:root {
  --bg:        #ffffff;
  --bg-2:      #f5f7fa;
  --surface:   #eef2f7;
  --surface-2: #e2e9f2;
  --ink:       #07213f;
  --ink-soft:  #3a4a60;
  --muted:     #7c8aa0;
  --line:      #e1e8f1;
  --dark:      #032141;
  --dark-2:    #06294f;
  --on-dark:   #eef3f9;
  --on-dark-mut:#9fb1c8;
  --line-dark: #143a63;
  --accent:      #ffcc01;
  --accent-deep: #c7960a;
  --accent-soft: rgba(255,204,1,0.16);
  --accent-on:   #032141;
  --font-head: "Clash Display", system-ui, sans-serif;
  --font-body: "Satoshi", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --maxw: 1320px;
  --kopf-abstand: clamp(30px, 4.4vw, 56px);   /* Sektionskopf zu Inhalt, ueberall gleich */
  /* Abstandsskala. Jede Flaeche und jedes Raster nimmt einen dieser Werte,
     es gibt keine Zwischengroessen mehr. */
  --pad-s:  clamp(20px, 2.4vw, 28px);
  --pad-m:  clamp(24px, 3.2vw, 40px);
  --pad-l:  clamp(28px, 4.2vw, 60px);
  --gap-1:  clamp(10px, 1.4vw, 16px);
  --gap-2:  clamp(16px, 2.2vw, 26px);
  --gap-3:  clamp(20px, 3vw, 34px);
  --gap-4:  clamp(28px, 4.4vw, 60px);
  --gap-5:  clamp(36px, 5.4vw, 80px);
  --sektion-pad: clamp(56px, 9vw, 116px);   /* Aussenmass jeder Sektion */
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 4px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; color-scheme: light; }

/* Tastatur-Sprunglink */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--dark); color: var(--on-dark);
  padding: 10px 16px; border-radius: var(--radius);
  font-family: var(--font-body); font-size: .95rem; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus-visible { top: 12px; }
main:focus { outline: none; }

/* Touch: kein 300ms-Delay, kein grauer Tap-Blitz */
a, button, summary, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: rgba(3,33,65,.12); }
body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
/* Bilder mit aspect-ratio brauchen height:auto, sonst gewinnt das height-Attribut. */
[style*="aspect-ratio"], .voices-media img, .ablauf-media img, .founder-photo { height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: #fff; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
/* Vier Stufen, deutliche Spruenge dazwischen. Jede Ueberschrift auf der Seite
   sitzt auf einer dieser Stufen, es gibt keine Zwischengroessen. */
.h-display { font-size: clamp(2.7rem, 6.2vw, 4.8rem); letter-spacing: -0.02em; }
.h-1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: -0.018em; }
.h-2 { font-size: clamp(1.45rem, 2.6vw, 2rem); }
.h-3 { font-size: clamp(1.12rem, 1.7vw, 1.3rem); }
p { margin: 0; }
/* Der Vorspann steht klar ueber dem Fliesstext, sonst liegt alles auf einer Ebene. */
.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.34rem);
  color: var(--ink-soft);
  line-height: 1.5;
  text-wrap: pretty;
  max-width: 62ch;
}

/* Dritte Stufe, ueberall derselbe Wert: --h3. */
:root { --h3: clamp(1.12rem, 1.7vw, 1.3rem); }
.muted { color: var(--muted); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.8em;
  font-family: var(--font-mono);
  font-size: 0.72rem; color: var(--muted);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); display: inline-block; flex: none;
}
.eyebrow.on-dark { color: var(--on-dark-mut); }

/* ---------- Layout ---------- */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section-pad { padding-block: var(--sektion-pad); }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.band-soft { background: var(--bg-2); }
.band-dark { background: var(--dark); color: var(--on-dark); }
.band-dark .lead { color: var(--on-dark-mut); }
.section-head { max-width: 720px; display: grid; gap: 14px; margin-bottom: var(--kopf-abstand); }
.section-head.center { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  padding: 14px 28px; border-radius: 999px;
  background: var(--accent); color: var(--accent-on);
  border: 1px solid transparent; cursor: pointer;
  box-shadow: 0 6px 18px -10px rgba(199,150,10,.75);
  transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { background: #ffd633; box-shadow: 0 10px 24px -12px rgba(199,150,10,.85); }
.btn:active { transform: scale(.98); }
.btn--dark { background: var(--dark); color: #fff; box-shadow: 0 6px 18px -10px rgba(3,33,65,.7); }
.btn--dark:hover { background: var(--dark-2); }
.btn--ghost {
  background: transparent; color: inherit;
  border-color: var(--surface-2);
  box-shadow: none;
}
.btn--ghost:hover { background: transparent; border-color: var(--accent-deep); color: var(--accent-deep); box-shadow: none; }
.on-light .btn--ghost, .btn--ghost.on-light { border-color: var(--surface-2); }
.on-light .btn--ghost:hover, .btn--ghost.on-light:hover { color: var(--accent-deep); border-color: var(--accent-deep); }
.btn--sm { padding: 11px 22px; font-size: 0.94rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  /* Helle Leiste von Anfang an: der Hero ist ein dunkles Bild, das darunter
     durchlaeuft. Die Lesbarkeit haengt damit an CSS, nicht an JavaScript. */
  background: color-mix(in srgb, #fff 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}
@supports not (backdrop-filter: blur(2px)) { .site-header { background: #fff; } }
/* Nur noch Feinschliff beim Scrollen: Kante und Schatten */
.site-header.scrolled {
  background: color-mix(in srgb, #fff 94%, transparent);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 34px -24px rgba(3,33,65,.55);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 16px; position: relative; z-index: 1; }
.nav--center {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; height: 82px; gap: 24px;
}
/* Nur ab Desktop zentrieren: justify-self wirkt sonst auch auf das
   fixierte Mobilmenue und schrumpft es, statt es auszublenden. */
@media (min-width: 981px) { .nav--center .nav-links { justify-self: center; } }
@media (max-width: 980px) { .nav--center { display: flex; } }
.brand { display: flex; align-items: center; }
.brand img { height: 46px; width: auto; display: block; }
.brand .logo-light { display: none; }
.nav-links { display: flex; align-items: center; gap: var(--gap-3); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-weight: 700; font-size: 0.98rem; color: var(--ink);
  position: relative; padding-block: 6px;
  transition: color .2s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--accent); transition: width .25s ease;
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; }
.nav-cta { flex: none; }
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  color: var(--ink); padding: 8px;
}
.nav-toggle svg { width: 26px; height: 26px; display: block; }

@media (max-width: 860px) {
  .nav-links {
    position: fixed; inset: 0; z-index: 50;
    flex-direction: column; justify-content: center; gap: 30px;
    background: var(--dark); color: var(--on-dark);
    transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.7,.3,1);
  }
  .nav-links.open { transform: none; }
  .nav-links a { color: var(--on-dark) !important; font-size: 1.35rem; font-family: var(--font-head); }
  .nav-toggle { display: block; position: relative; z-index: 55; }
  .nav-cta { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(ellipse 70% 60% at 85% 10%, rgba(255,204,1,.13) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 10% 95%, rgba(255,204,1,.07) 0%, transparent 65%),
    var(--dark);
  color: var(--on-dark);
  padding-top: clamp(120px, 16vw, 180px);
  padding-bottom: clamp(64px, 10vw, 130px);
  position: relative;
  overflow: hidden;
}
.hero .lead { color: var(--on-dark-mut); max-width: 620px; }
.hero-grid { display: grid; gap: var(--gap-3); }
.hero .btn-row { margin-top: 10px; }
.hero-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px; background: var(--line-dark);
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  overflow: hidden; margin-top: clamp(28px, 4vw, 46px); max-width: 760px;
}
.hero-stats .stat { background: var(--dark-2); padding: 20px 22px; display: grid; gap: 4px; }
.stat .num { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--accent); }
.stat .lbl { font-size: 0.85rem; color: var(--on-dark-mut); }

/* Sub-Hero (Unterseiten) */
.page-hero {
  background:
    radial-gradient(ellipse 70% 70% at 88% 0%, rgba(255,204,1,.12) 0%, transparent 60%),
    var(--dark);
  color: var(--on-dark);
  padding-top: clamp(110px, 14vw, 156px);
  padding-bottom: clamp(44px, 7vw, 84px);
}
.page-hero .lead { color: var(--on-dark-mut); max-width: 640px; }
.breadcrumb {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-dark-mut); margin-bottom: 18px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.breadcrumb a:hover { color: var(--accent); }

/* ---------- Cards / Grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap-2); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--gap-2); }
@media (max-width: 960px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--pad-m);
  display: grid; gap: 12px; align-content: start;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(3,33,65,.35); border-color: var(--surface-2); }
.card .icon {
  width: 46px; height: 46px; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent-deep);
  display: grid; place-items: center;
}
.card .icon svg { width: 24px; height: 24px; }
.card h3 { font-size: var(--h3); }
.card p { color: var(--ink-soft); font-size: 0.98rem; }
.card .more { font-weight: 700; color: var(--accent-deep); font-size: 0.95rem; display: inline-flex; align-items: center; gap: 6px; }
.band-dark .card { background: var(--dark-2); border-color: var(--line-dark); }
.band-dark .card p { color: var(--on-dark-mut); }
.band-dark .card h3 { color: var(--on-dark); }

/* Feature-Liste (Checks) */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); }
.checklist li::before {
  content: "✓"; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--accent-on);
  font-size: 0.8rem; font-weight: 900;
  display: grid; place-items: center; margin-top: 3px;
}
.band-dark .checklist li { color: var(--on-dark-mut); }

/* ---------- Split-Sektionen ---------- */
/* Bildspalte auf volle Zeilenhoehe: gleich hoch wie die Textspalte daneben */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-4); align-items: stretch; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split .media { min-height: clamp(240px, 55vw, 340px); } }
.split .media {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  height: 100%; min-height: clamp(300px, 30vw, 460px);
}
.split .media img, .split .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.split .content { display: grid; gap: 16px; align-content: center; }

/* ---------- Prozess-Schritte ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap-2); counter-reset: step; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--pad-m); display: grid; gap: 10px; align-content: start;
}
.step .no {
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-deep);
  letter-spacing: .12em;
}
.step h3 { font-size: var(--h3); }
.step p { color: var(--ink-soft); font-size: 0.97rem; }

/* ---------- Testimonials ---------- */
/* Kundenstimmen: eine grosse Bildflaeche traegt die Sektion, die Zitate stehen
   frei daneben. Kein Kartenrahmen, getrennt wird ueber Abstand und Haarlinie. */
.voices {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-4); align-items: center;
}
@media (max-width: 900px) { .voices { grid-template-columns: 1fr; } }
.voices-media { border-radius: var(--radius); overflow: hidden; }
.voices-media img { width: 100%; height: auto; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.voices-text { display: grid; gap: var(--gap-3); }
.voices-text .h-1 { margin: 0; }
.quote { display: grid; gap: 14px; }
.quote + .quote { border-top: 1px solid var(--line); padding-top: var(--pad-m); }
.quote blockquote {
  margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--ink); line-height: 1.55; text-wrap: pretty;
}
.quote .who { display: grid; gap: 2px; }
.quote .avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--dark); color: var(--accent);
  font-family: var(--font-head); font-weight: 600;
  display: grid; place-items: center;
}
.quote .who b { display: block; font-size: 0.98rem; }
.quote .who span { font-size: 0.85rem; color: var(--ink-soft); }

/* "So arbeiten wir": Ueberschrift und ein Bild teilen sich den Sektionskopf. */
/* "So arbeiten wir": Ueberschrift links, ein flaches Bild rechts. Flach, damit
   links kein Loch entsteht. */
/* Der Kopf von "So arbeiten wir" hatte ein Bild daneben. Zusammen mit dem
   Bildband darueber und dem Bild beim Ablauf darunter waren das drei Bilder
   in Folge, und links unter der Ueberschrift klaffte ein Loch. Bild raus, die
   Datei wmv-kalkulation-tisch.webp bleibt fuer spaeter im Repo liegen. */

/* ---------- FAQ ---------- */
/* Volle Breite: Ueberschrift links (bleibt stehen), Fragen rechts ueber die
   restliche Breite. Kein zentrierter 820px-Block mehr. */
.faq-wide { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--gap-5); align-items: start; }
@media (max-width: 900px) { .faq-wide { grid-template-columns: 1fr; gap: 28px; } }
.faq-wide .faq-head { position: sticky; top: 110px; display: grid; gap: 14px; }
@media (max-width: 900px) { .faq-wide .faq-head { position: static; } }
.faq-wide .faq-head .lead { margin: 0; }

.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details {
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 0;
}
.faq details[open] { background: var(--bg-2); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: var(--pad-s) clamp(4px, 1.4vw, 20px);
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  transition: background-color .2s ease;
}
.faq summary:hover { background: var(--bg-2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-deep);
  display: grid; place-items: center; font-weight: 700; font-size: 1.1rem;
  transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  color: var(--ink-soft); margin: 0;
  padding: 0 clamp(4px, 1.4vw, 20px) clamp(22px, 2.4vw, 28px);
  max-width: 68ch;
}

/* ---------- CTA-Band ---------- */
.cta-band { text-align: center; }
.cta-band .inner { max-width: 680px; margin-inline: auto; display: grid; gap: 20px; justify-items: center; }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap-2); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--pad-m); display: grid; gap: 10px; align-content: start;
  text-align: center; justify-items: center;
}
.contact-card .icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-deep);
  display: grid; place-items: center;
}
.contact-card .icon svg { width: 24px; height: 24px; }
.contact-card a.big { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; }
.contact-card a.big:hover { color: var(--accent-deep); }

/* ---------- Footer ---------- */
/* ============================================================
   Footer: helle Flaeche, vier Spalten, Guide-Anmeldung
   ============================================================ */
.site-footer { background: var(--bg-2); color: var(--ink-soft); font-size: 0.97rem; }
.footer-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.75fr) minmax(0, 0.95fr) minmax(0, 1.6fr);
  gap: var(--gap-4);
  padding-block: clamp(52px, 6.5vw, 88px);
  align-items: start;
}
@media (max-width: 1020px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 44px 40px; } }
@media (max-width: 620px)  { .footer-cols { grid-template-columns: 1fr; gap: 38px; } }

.fcol { display: grid; gap: 18px; align-content: start; }
.fcol--brand { gap: 20px; }
.fcol--brand img { height: 34px; width: auto; }
.fcol--brand p { margin: 0; max-width: 34ch; color: var(--ink-soft); line-height: 1.65; }

.fcol-head {
  margin: 0; color: var(--ink);
  font-family: var(--font-head); font-weight: 600; font-size: 1.02rem;
  letter-spacing: 0; text-transform: none;
}
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fcol li.plain { color: var(--ink-soft); }
.fcol a {
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .18s ease;
}
.fcol a:hover { color: var(--accent-deep); }
.fcol .ext { font-size: .82em; color: var(--muted); transition: transform .18s ease, color .18s ease; }
.fcol a:hover .ext { color: var(--accent-deep); transform: translate(2px, -2px); }


/* Fusszeile. Diese vier Regeln sind beim Aufraeumen des alten Cookie- und
   Guide-CSS versehentlich mit entfernt worden und hier wiederhergestellt. */
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  justify-content: space-between; align-items: center;
  font-size: 0.88rem; color: var(--ink-soft);
}
.footer-bottom .sep { opacity: .5; padding-inline: 4px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
.footer-legal a, .footer-legal .linklike { color: var(--ink-soft); text-decoration: none; }
.footer-legal a:hover, .footer-legal .linklike:hover { color: var(--accent-deep); }
/* Der Cookie-Knopf ist ein <button>, damit er per Tastatur bedienbar ist,
   sieht aber ueberall aus wie die Links daneben. Gilt auch auf den Rechtsseiten,
   die einen eigenen schlichten Fuss haben. */
.linklike { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--ink-soft); }
.linklike:hover { color: var(--accent-deep); }
.linklike:focus-visible { outline: 3px solid var(--dark); outline-offset: 3px; }

/* Nur fuer Screenreader sichtbar */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Legal-Seiten ---------- */
.legal { max-width: 780px; margin-inline: auto; display: grid; gap: 8px; }
.legal h2 { font-size: 1.3rem; margin-top: 28px; }
.legal h3 { font-size: 1.05rem; margin-top: 18px; }
.legal p, .legal li { color: var(--ink-soft); font-size: 0.98rem; }

/* --- Mockup-Collage (Sektion "Jedes Objekt vollstaendig aufbereitet") --- */
/* Platz fuer die ueberstehenden Kacheln, damit nichts am Rand abgeschnitten wird. */
.shots { position: relative; min-height: clamp(470px, 42vw, 620px); padding-block: clamp(30px, 3.4vw, 46px); }
.shots::before {
  content: ""; position: absolute; inset: 4% -8% 2% 6%;
  background: linear-gradient(160deg, rgba(3,33,65,.05) 0%, rgba(255,204,1,.09) 100%);
  border-radius: 28px;
}
.shots .browser {
  position: absolute; right: 0; top: clamp(26px, 3vw, 40px);
  width: min(88%, 540px);
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 40px 90px -40px rgba(3,33,65,.45), 0 18px 44px -30px rgba(3,33,65,.35);
  transform: rotate(2.5deg);
  overflow: hidden;
}
.shots .browser .bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fbfcfe;
}
.shots .browser .bar i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface-2); display: inline-block;
}
.shots .browser .bar .url {
  margin-left: 10px; flex: 1;
  background: var(--bg-2); border-radius: 6px;
  font-family: var(--font-mono); font-size: .68rem; color: var(--muted);
  padding: 4px 10px;
}
.shots .browser img { width: 100%; height: clamp(190px, 19vw, 270px); object-fit: cover; object-position: center 65%; }
.shots .browser .row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; border-top: 1px solid var(--line);
}
.shots .browser .cell { padding: 12px 14px; border-right: 1px solid var(--line); }
.shots .browser .cell:last-child { border-right: none; }
.shots .browser .cell b { display: block; font-family: var(--font-head); font-size: 1.02rem; }
.shots .browser .cell small { color: var(--muted); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; }
.shots .browser .cell .pos { color: #178a4c; }

.shots .phone {
  position: absolute; left: 0; top: 27%; z-index: 2;
  width: clamp(190px, 18vw, 240px);
  background: #fff; border: 1px solid var(--line); border-radius: 26px;
  box-shadow: 0 46px 90px -38px rgba(3,33,65,.55), 0 20px 40px -28px rgba(3,33,65,.4);
  transform: rotate(-3.5deg);
  padding: 14px 14px 18px;
  display: grid; gap: 12px;
}
.shots .phone .notch {
  width: 86px; height: 18px; border-radius: 9px;
  background: var(--bg-2); margin: 0 auto;
}
.shots .phone .hello { font-size: .82rem; font-weight: 700; }
.shots .phone .kpi {
  background: var(--dark); color: #fff; border-radius: 12px;
  padding: 12px 14px; display: grid; gap: 2px;
}
.shots .phone .kpi small { color: var(--on-dark-mut); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; }
.shots .phone .kpi b { font-family: var(--font-head); font-size: 1.25rem; color: var(--accent); }
.shots .phone .mini {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.shots .phone .mini div {
  background: var(--bg-2); border-radius: 10px; padding: 9px 10px;
}
.shots .phone .mini small { display: block; color: var(--muted); font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; }
.shots .phone .mini b { font-family: var(--font-head); font-size: .92rem; }
.shots .phone .mini .pos { color: #178a4c; }
.shots .phone .list { display: grid; gap: 8px; }
.shots .phone .list .obj {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px;
}
.shots .phone .list .obj img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; }
.shots .phone .list .obj b { display: block; font-size: .72rem; line-height: 1.2; }
.shots .phone .list .obj small { color: var(--muted); font-size: .62rem; }
.shots .chip {
  position: absolute; z-index: 3;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 16px;
  box-shadow: 0 24px 50px -26px rgba(3,33,65,.5);
  display: flex; align-items: center; gap: 10px;
  font-size: .82rem; font-weight: 700;
}
.shots .chip .ic {
  width: 30px; height: 30px; border-radius: var(--radius); flex: none;
  background: var(--accent); color: var(--accent-on);
  display: grid; place-items: center;
}
.shots .chip .ic svg { width: 17px; height: 17px; }
.shots .chip--tr { top: 0; right: 2%; transform: rotate(2deg); }
.shots .chip--bl { bottom: 0; right: 6%; transform: rotate(-2deg); }
@media (max-width: 980px) {
  .shots { min-height: 420px; margin-top: 8px; }
}

/* --- Presse-/Logo-Leiste ---
   Aktuell auf keiner Seite eingesetzt. Bleibt stehen, weil die Leiste sofort
   nutzbar ist, sobald echte Partner- oder Presselogos vorliegen. --- */
.press { border-block: 1px solid var(--line); background: #fff; }
.press .inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--gap-4);
  padding-block: 22px;
}
.press .name {
  font-family: var(--font-head); font-weight: 600; font-size: 1.02rem;
  color: var(--muted); opacity: .8; white-space: nowrap;
  filter: grayscale(1);
}
.press .label {
  width: 100%; text-align: center;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
  margin-top: 14px;
}

/* --- Beispiel-Konzept --- */
/* Zwischenkopf ueber der Beispielrechnung, seit die Rechnung in der Sektion
   "Jedes Objekt vollstaendig aufbereitet" sitzt. */
/* Zwischenband in der Seitenmitte: Strassenzug im Ruecken, darueber eine
   Frage, die Antwort und der Einstieg. Traegt eine Aussage, ist keine Deko. */
.bildband {
  position: relative; isolation: isolate;
  background-image: url("/assets/img/wmv-strassenzug.webp");
  background-size: cover; background-position: center 62%;
}
.bildband::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(3,20,40,.94) 0%, rgba(3,20,40,.86) 46%, rgba(3,20,40,.62) 78%, rgba(3,20,40,.5) 100%);
}
.bildband-inner { display: grid; gap: 20px; justify-items: start; max-width: 46rem; }
.bildband .lead { color: var(--on-dark); max-width: 52ch; }

/* Ablauf-Block: Zwischenkopf links, Bild rechts. */
.ablauf-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--gap-4); align-items: center;
  margin-bottom: clamp(30px, 4vw, 48px);
}
@media (max-width: 860px) { .ablauf-head { grid-template-columns: 1fr; gap: 22px; } }
.ablauf-head .block-lead { margin: 0; }
.ablauf-media { margin: 0; border-radius: var(--radius); overflow: hidden; }
.ablauf-media img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9; object-fit: cover; object-position: center 45%;
}
.numlist + .ablauf-head { margin-top: clamp(48px, 6vw, 84px); }

/* Zwischenkopf innerhalb einer Sektion. Eine Stufe unter der Sektions-H2,
   trennt zwei Bloecke ohne dafuer eine eigene Sektion zu brauchen. */
.block-lead {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.45rem, 2.6vw, 2rem); letter-spacing: -.01em;
  margin: 0 0 clamp(20px, 2.6vw, 32px);
}
.numlist + .block-lead { margin-top: clamp(48px, 6vw, 84px); }

.calc-lead {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: -.01em;
  margin: clamp(44px, 5vw, 76px) 0 clamp(18px, 2vw, 26px);
}
.calc-card {
  background: var(--dark); color: var(--on-dark);
  border-radius: var(--radius); overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
}
@media (max-width: 860px) { .calc-card { grid-template-columns: 1fr; } }
.calc-card .side { padding: var(--pad-m); display: grid; gap: 14px; align-content: start; }
.calc-card .side.light { background: var(--dark-2); }
.calc-card h3 { color: var(--on-dark); font-size: var(--h3); }
.calc-card table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.calc-card td { padding: 9px 0; border-bottom: 1px solid var(--line-dark); color: var(--on-dark-mut); }
.calc-card td:last-child { text-align: right; color: var(--on-dark); font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-card tr.total td { border-bottom: none; color: var(--accent); font-family: var(--font-head); font-size: 1.05rem; }
/* Die Checkliste steht auf dunklem Grund, also braucht sie die helle Textfarbe.
   Vorher erbte sie --ink-soft und war praktisch unlesbar. */
.calc-card .checklist li { color: var(--on-dark); }
/* Mietrendite-Rechner: links Eingabe, rechts Ergebnis. Dunkle Flaeche wie die
   frueher statische Tabelle, damit die Sektion ihren Anker behaelt. */
.calc-form { display: grid; gap: 12px; align-content: center; }
.calc-intro { color: var(--on-dark-mut); font-size: .95rem; line-height: 1.5; margin-bottom: 6px; max-width: 44ch; }
.calc-label { font-size: .88rem; font-weight: 600; color: var(--on-dark); }
.calc-input { position: relative; display: block; }
.calc-input input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  padding: 14px 44px 14px 16px;
  font-family: var(--font-head); font-weight: 600; font-size: 1.15rem;
  color: var(--on-dark); font-variant-numeric: tabular-nums;
  transition: border-color .18s ease, background-color .18s ease;
}
.calc-input input:hover { background: rgba(255,255,255,.11); }
.calc-input input:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
  border-color: var(--accent); background: rgba(255,255,255,.13);
}
.calc-unit {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem;
  color: var(--on-dark-mut); pointer-events: none;
}
.calc-fehler { color: var(--accent); font-size: .88rem; min-height: 1.2em; }

.calc-ergebnis { display: grid; gap: 20px; align-content: center; }
.calc-zahl { display: grid; gap: 2px; }
.calc-zahl .wert {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(2.6rem, 5.4vw, 4rem); line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.calc-zahl .lbl { color: var(--on-dark); font-size: .95rem; font-weight: 500; }
.calc-tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.calc-tabelle td { padding: 9px 0; border-bottom: 1px solid var(--line-dark); color: var(--on-dark-mut); }
.calc-tabelle td:last-child { text-align: right; color: var(--on-dark); font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-tabelle tr:last-child td { border-bottom: none; }

.calc-note { font-size: .82rem; color: var(--ink-soft); margin-top: 12px; }


/* Kennzahlen-Zeile im Browser-Mockup: rueckt neben das Phone, mobil nicht mehr */
.shots .row--offset { grid-template-columns: 1fr 1fr; padding-left: clamp(150px, 15vw, 230px); }
@media (max-width: 620px) { .shots .row--offset { padding-left: 0; } }

/* Sektion mit der Collage: Text links, Collage rechts, etwas breiter */
.split--wide { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; }
.split--wide .media { min-height: 0; border: 0; overflow: visible; }
@media (max-width: 900px) { .split--wide { grid-template-columns: 1fr; } }
.split--wide .content { display: grid; gap: 18px; }
.fact-list--tight { gap: 4px; }
.split--wide .shots { min-height: clamp(400px, 40vw, 560px); }


/* ============================================================
   Beispielobjekte: Kartenraster
   ============================================================ */
.objects-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 12px 28px;
}
.more-link {
  font-family: var(--font-head); font-weight: 600; font-size: .98rem;
  color: var(--ink); display: inline-flex; align-items: center; gap: 8px;
  transition: color .18s ease;
}
.more-link span { transition: transform .18s ease; }
.more-link:hover { color: var(--accent-deep); }
.more-link:hover span { transform: translateX(3px); }
.objects-intro { margin-top: 12px; max-width: 62ch; }

.object-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-2);
  margin-top: clamp(28px, 4vw, 44px);
}
@media (max-width: 980px) { .object-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .object-grid { grid-template-columns: 1fr; } }

.object-card {
  display: grid; grid-template-rows: auto 1fr; gap: 0;
}
.object-card .shot { border-radius: var(--radius); }
.object-card .shot { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.object-card .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.object-card:hover .shot img { transform: scale(1.04); }
.object-card .tag {
  position: absolute; top: 12px; left: 12px;
  background: var(--accent); color: var(--accent-on);
  font-family: var(--font-head); font-weight: 600; font-size: .78rem;
  padding: 6px 12px; border-radius: 999px;
  box-shadow: 0 6px 16px -10px rgba(3,33,65,.6);
}
/* Die Rendite ist die Zahl, auf die Kapitalanleger zuerst schauen.
   Gerechnet aus Kaufpreis und Kaltmiete, die darueber stehen. */
.object-card .yield {
  display: inline-flex; align-items: center; align-self: start;
  font-family: var(--font-head); font-weight: 600; font-size: .9rem;
  color: var(--accent-on); background: var(--accent);
  padding: 5px 11px; border-radius: 999px; margin-top: 2px;
}

.object-card .body { padding: clamp(14px, 1.4vw, 20px) 0 0; display: grid; gap: 7px; align-content: start; }
.object-card h3 { font-size: var(--h3); color: var(--ink); }
.object-card .where { font-size: .9rem; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.object-card .where span { color: var(--accent-deep); font-size: .7em; }
.object-card .figures {
  margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
}
.object-card .price {
  font-family: var(--font-head); font-weight: 600; font-size: 1.22rem;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.object-card .rent { font-size: .88rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }


/* ============================================================
   Gruender-Sektion (Vorbild: helle Karte, Rahmen mit Foto,
   Portraet ueberlappt den Rahmen)
   ============================================================ */
/* Kein Kasten mehr: Text und Foto stehen frei nebeneinander. */
.founder-panel {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-4); align-items: center;
}
@media (max-width: 940px) { .founder-panel { grid-template-columns: 1fr; gap: 34px; } }

.founder-text { display: grid; gap: 18px; align-content: center; }
.founder-text h2 { max-width: 17ch; font-weight: 400; }
.founder-text h2 strong { font-weight: 600; }
.founder-text .lead { max-width: 50ch; }

.founder-more > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  font-size: .95rem; color: var(--muted); padding: 2px 0;
}
.founder-more > summary::-webkit-details-marker { display: none; }
.founder-more > summary::after {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .22s ease;
}
.founder-more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.founder-more > summary:hover { color: var(--accent-deep); }
.founder-more p { margin-top: 10px; color: var(--ink-soft); max-width: 58ch; }

.founder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 4px; }
.callbox { display: inline-flex; align-items: center; gap: 12px; }
.callbox .ic {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--accent-soft); color: var(--accent-deep);
  display: grid; place-items: center;
}
.callbox .ic svg { width: 19px; height: 19px; }
.callbox small { display: block; font-size: .76rem; color: var(--muted); line-height: 1.3; letter-spacing: .02em; }
.callbox b { font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; color: var(--ink); }
.callbox:hover b { color: var(--accent-deep); }

/* Rahmen in Hausform mit Objektfoto, Portraet legt sich darueber */
.founder-visual { position: relative; display: block; min-height: 0; }
.founder-photo {
  width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius);
}
.founder-caption { display: grid; gap: 2px; margin-top: 14px; }
.founder-caption b { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--ink); }
.founder-caption span { font-size: .88rem; color: var(--ink-soft); }

/* Platzhalter, solange kein freigestelltes Foto vorliegt */
/* Markierter Slot, solange kein freigestelltes Foto von Florian Heuer vorliegt. */
.founder-visual .portrait-empty {
  position: absolute; right: 16px; bottom: 16px; width: min(40%, 168px); aspect-ratio: 2 / 3;
  display: grid; place-content: center; gap: 6px; text-align: center;
  border: 2px dashed var(--surface-2); border-radius: var(--radius);
  background: color-mix(in srgb, #fff 88%, transparent);
  color: var(--ink-soft); padding: 14px;
}
.founder-visual .portrait-empty span { font-family: var(--font-head); font-weight: 600; font-size: 1.3rem; color: var(--surface-2); }
.founder-visual .portrait-empty p { font-size: .8rem; line-height: 1.4; }
/* So sieht es mit echtem Foto aus. Diese Regel wird gebraucht, sobald das
   freigestellte Portraet von Florian Heuer da ist: .portrait-empty raus,
   <img class="portrait-real"> rein. */
.founder-visual .portrait-real { position: absolute; right: 2%; bottom: 0; width: min(72%, 320px); height: auto; }

@media (max-width: 520px) {
  .founder-visual .portrait-empty { width: 130px; right: 10px; bottom: 10px; }
}

/* ============================================================
   Gruender-Sektion
   ============================================================ */
/* Eine Sektion, zwei Teile: oben Guide mit Formular, darunter die
   Gruender-Karte, die wie im Vorbild leicht unter den oberen Teil rutscht */
/* Gruender-Sektion. Der negative Abstand stammte vom Guide, der darueber lag,
   und ist mit dem Guide entfallen. */
.guide-founder { padding-block: var(--sektion-pad); overflow: hidden; }
.guide-founder .founder-panel { position: relative; z-index: 2; }

/* ---------- Scroll-Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}


/* Kachelreihe direkt unter dem Hero-Bild */
/* Die Kachelreihe liegt als eigene Flaeche halb ueber der Hero-Kante. Das
   bricht die harte Kante und bindet Hero und erste Sektion zusammen. Muster
   aus dem Wettbewerb, hier ohne Suchmaske, weil WMV keine Objektsuche hat. */
.hero-facts {
  list-style: none; padding: var(--pad-m);
  margin: clamp(-92px, -7vw, -54px) auto 0;
  position: relative; z-index: 3;
  width: min(100%, 1180px);
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: 0 34px 70px -46px rgba(3,33,65,.55), 0 4px 16px -10px rgba(3,33,65,.25);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-2);
}
@media (max-width: 1000px) { .hero-facts { margin-top: clamp(-40px, -4vw, -24px); } }
@media (max-width: 560px)  { .hero-facts { margin-top: 20px; box-shadow: none; padding-inline: 0; } }
@media (max-width: 1000px) { .hero-facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .hero-facts { grid-template-columns: 1fr; } }
.hero-facts li {
  padding: 0 clamp(14px, 1.6vw, 22px) 0 0;
  display: grid; gap: 9px; align-content: start;
}
@media (min-width: 1001px) { .hero-facts li + li { border-left: 1px solid var(--line); padding-left: clamp(20px, 2.2vw, 32px); } }
@media (max-width: 560px) { .hero-facts li { padding-right: 0; } .hero-facts li + li { padding-top: 20px; border-top: 1px solid var(--line); } }
.hero-facts .ic {
  width: 26px; height: 26px; margin-bottom: 4px;
  color: var(--accent-deep);
  display: grid; place-items: start;
}
.hero-facts .ic svg { width: 26px; height: 26px; }
/* Zwei Zeilen Platz fuer den Titel, damit die Beschreibungen aller vier
   Kacheln auf derselben Hoehe beginnen. */
.hero-facts b {
  font-family: var(--font-head); font-weight: 600; font-size: var(--h3); color: var(--ink);
  display: block; line-height: 1.25;
}
@media (min-width: 1001px) { .hero-facts b { min-height: 2.5em; } }
.hero-facts p { font-size: .92rem; color: var(--ink-soft); line-height: 1.5; }

/* ============================================================
   Hero: grosses Bild mit Text darueber
   ============================================================ */
.hero-shot { padding-top: 96px; padding-bottom: 0; }
.hero-frame {
  position: relative; isolation: isolate;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: clamp(430px, 58vw, 640px);
  display: grid;
  background: var(--surface);
  box-shadow: 0 40px 90px -60px rgba(3,33,65,.65);
}
.hero-frame img {
  grid-area: 1 / 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 50%;
}
/* Abdunklung fuer die Lesbarkeit, links stark, rechts offen */
.hero-frame::after {
  content: ""; grid-area: 1 / 1; z-index: 1;
  background:
    linear-gradient(100deg, rgba(3,20,40,.92) 0%, rgba(3,20,40,.80) 40%, rgba(3,20,40,.34) 64%, rgba(3,20,40,.06) 82%),
    linear-gradient(to top, rgba(3,20,40,.42), rgba(3,20,40,0) 46%);
}
.hero-copy {
  grid-area: 1 / 1; z-index: 2;
  align-self: center;
  display: grid; gap: var(--gap-2); justify-items: start;
  padding: var(--pad-l);
  max-width: 40rem;
  color: var(--on-dark);
}
.hero-copy h1 {
  font-size: clamp(1.85rem, 3.1vw, 2.85rem);
  line-height: 1.14; color: #fff;
  max-width: 15ch; text-wrap: initial;
}
.hero-copy .lead { color: var(--on-dark); max-width: 46ch; }
.hero-copy .marker {
  background: linear-gradient(104deg, rgba(255,204,1,0) 0%, rgba(255,204,1,.9) 3%, rgba(255,214,60,.9) 97%, rgba(255,204,1,0) 100%);
  color: var(--accent-on);
  padding: 0 .12em; border-radius: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hero-copy .btn--ghost { border-color: rgba(238,243,249,.85); color: #fff; }
.hero-copy .btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 760px) {
  .hero-shot { padding-top: 84px; }
  .hero-frame { min-height: 0; }
  .hero-frame img { min-height: 520px; }
  .hero-copy { padding: 26px 22px 30px; }
  .hero-copy .btn-row { width: 100%; }
  .hero-copy .btn { width: 100%; }
}

/* ============================================================
   Vorteile (6 Karten) · Vergleich · 5-Schritte-Ablauf
   ============================================================ */
.benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap-2); }
@media (max-width: 960px) { .benefit-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .benefit-grid { grid-template-columns: 1fr; } }

/* Vergleich: Auf eigene Faust vs. mit WMV */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-2); align-items: stretch; }
@media (max-width: 860px) { .compare { grid-template-columns: 1fr; } }
.compare .col {
  border-radius: var(--radius); padding: var(--pad-m);
  display: grid; gap: 18px; align-content: start;
}
.compare .col.plain { padding-left: 0; }
.compare .col.brand { background: var(--dark); color: var(--on-dark); position: relative; overflow: hidden; }
.compare .col.brand::after {
  content: ""; position: absolute; top: -40%; right: -25%;
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,204,1,.16) 0%, transparent 70%);
}
.compare .col h3 { font-size: var(--h3); }
.compare .col.brand h3 { color: var(--on-dark); }
.compare .tag {
  justify-self: start; font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.compare .plain .tag { background: var(--bg-2); color: var(--muted); }
.compare .brand .tag { background: var(--accent); color: var(--accent-on); font-weight: 700; }
.compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.compare li { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; }
.compare .plain li { color: var(--ink-soft); }
.compare .brand li { color: var(--on-dark-mut); position: relative; z-index: 1; }
.compare li::before {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  font-size: .72rem; font-weight: 900;
  display: grid; place-items: center; margin-top: 3px;
}
.compare .plain li::before { content: "✕"; background: var(--surface); color: var(--muted); }
.compare .brand li::before { content: "✓"; background: var(--accent); color: var(--accent-on); }

/* 5-Schritte-Ablauf */
/* Ablauf als Zeitstrahl statt als Kartenreihe: die Position auf der Linie zeigt
   die Reihenfolge, deshalb braucht kein Schritt eine Ziffer. Fuenf Spalten, also
   nie eine leere Zelle. */
.steps--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  counter-reset: none;
  gap: var(--gap-3);
}
.steps--5 .step {
  background: none; border: 0; border-radius: 0; padding: 0;
  position: relative; padding-top: 30px; gap: 8px;
}
/* Linie zwischen den Punkten, an den Enden offen */
.steps--5 .step::before {
  content: ""; position: absolute; top: 6px; left: 0; right: calc(-1 * clamp(18px, 2.4vw, 32px));
  height: 1px; background: var(--line);
}
.steps--5 .step:last-child::before { display: none; }
.steps--5 .step::after {
  content: ""; position: absolute; top: 0; left: 0;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--bg);
}
.steps--5 .step h3 { font-size: var(--h3); }
.steps--5 .step p { color: var(--ink-soft); font-size: .93rem; }

/* Schmal: derselbe Strahl, nur senkrecht */
@media (max-width: 900px) {
  .steps--5 { grid-template-columns: 1fr; gap: 0; }
  .steps--5 .step {
    padding: 0 0 clamp(22px, 5vw, 32px) 30px;
  }
  .steps--5 .step::before {
    top: 6px; bottom: 0; left: 6px; right: auto;
    width: 1px; height: auto;
  }
  .steps--5 .step:last-child::before { display: none; }
  .steps--5 .step::after { top: 0; left: 0; }
}

/* Zahlen-Band (dunkel) */
/* Zahlenband. Aktuell auf keiner Seite eingebunden: die Sektion ist am
   04.09.2026 raus, bis die Zahlen belegt sind. Markup in docs/bausteine/. */
.stats-section { padding-block: var(--sektion-pad); }
/* Fassade zur blauen Stunde hinter dem Zahlenband. Das Bild ist bewusst sehr
   dunkel belichtet, der Navy-Schleier darueber haelt den Text auf AA-Kontrast. */
.stats-section.has-bild {
  position: relative; isolation: isolate;
  background-image: url("/assets/img/wmv-fassade-abend.webp");
  background-size: cover; background-position: center 62%;
}
.stats-section.has-bild::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(3,33,65,.88) 0%, rgba(3,33,65,.94) 100%);
}
.stats-section.has-bild .container { position: relative; }
/* Ueberschrift und Erklaerung gestapelt, nicht als Split-Header nebeneinander. */
.stats-head {
  display: grid; gap: 14px;
  margin-bottom: var(--kopf-abstand);
}
.stats-head .lead { color: var(--on-dark-mut); max-width: 58ch; }

.stats-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px; margin-top: clamp(22px, 2.6vw, 34px);
  padding-top: var(--pad-s);
  border-top: 1px solid var(--line-dark);
}
.stats-foot p { color: var(--on-dark-mut); max-width: 62ch; }
@media (max-width: 560px) { .stats-foot .btn { width: 100%; } }

.stats-band { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap-2); }
@media (max-width: 720px) { .stats-band { grid-template-columns: 1fr; } }
.stats-band .stat {
  padding: 0 clamp(18px, 2vw, 28px) 0 0; display: grid; gap: 4px; text-align: left;
  align-content: start;
}
@media (min-width: 721px) { .stats-band .stat + .stat { border-left: 1px solid var(--line-dark); padding-left: clamp(24px, 2.6vw, 40px); } }
.stats-band .num {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.05;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.stats-band .lbl { color: var(--on-dark); font-size: .98rem; font-weight: 500; }
.stats-band .note {
  margin-top: 10px;
  color: var(--on-dark-mut); font-size: .89rem; line-height: 1.5;
}

/* Cookie-Consent liegt vollstaendig in /consent.js (TN-Standard).
   Das alte Agency-Banner samt schwebendem Knopf wurde am 04.09.2026 entfernt. */

/* ============================================================
   Effekt-Schicht: Marquee, Tilt, Stagger, Video
   ============================================================ */
/* Presse-Marquee: endlos laufend, pausiert bei Hover */
.press .inner.marquee { flex-wrap: nowrap; justify-content: flex-start; overflow: hidden; gap: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.press .track { display: flex; align-items: center; gap: var(--gap-4); padding-right: clamp(28px, 5vw, 64px); flex: none; animation: pressScroll 32s linear infinite; }
.press .inner.marquee:hover .track { animation-play-state: paused; }
@keyframes pressScroll { to { transform: translateX(-100%); } }

/* Stagger: Karten in Grids nacheinander einblenden */
.grid-3 .reveal, .grid-2 .reveal, .benefit-grid .reveal, .steps .reveal, .quote-grid .reveal { transition-delay: calc(var(--stagger, 0) * 90ms); }

/* Sanftes Schweben für Hero-Chips */
@media (prefers-reduced-motion: no-preference) {
  .shots .chip--tr { animation: floatChip 5.5s ease-in-out infinite; }
  .shots .chip--bl { animation: floatChip 6.5s ease-in-out .8s infinite; }
  @keyframes floatChip { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
  .shots { perspective: 1200px; }
  .shots .browser, .shots .phone { will-change: transform; transition: transform .35s ease; }
}

/* Video-Karten */
.media video, .shots .browser video { width: 100%; height: 100%; object-fit: cover; display: block; }
.shots .browser video { height: clamp(190px, 19vw, 270px); object-position: center 65%; }

/* Bild-Hover in Split-Sektionen */
/* Die Zoom-Bilder in Split-Sektionen brauchen den Beschnitt, die Mockup-Collage
   in .split--wide darf dagegen ueberstehen. Sonst wird sie an den Raendern
   abgeschnitten. */
.split:not(.split--wide) .media { overflow: hidden; }
.split .media img { transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.split .media:hover img { transform: scale(1.04); }

/* Fokus-Sichtbarkeit */
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   Editorial-Layouts: Nummernliste, Faktenliste, Guide-Strip
   ============================================================ */
/* Prinzipien: Ueberschrift links, Erklaerung rechts. Trennlinie nur ZWISCHEN
   den Eintraegen, nicht oben und unten an jeder Zeile. */
.numlist { display: grid; gap: 0; }
.numlist .item {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--gap-4);
  padding-block: clamp(26px, 3.4vw, 44px);
  align-items: start;
}
.numlist .item + .item { border-top: 1px solid var(--line); }
@media (max-width: 760px) { .numlist .item { grid-template-columns: 1fr; gap: 10px; } }
.numlist h3 { font-size: clamp(1.45rem, 2.6vw, 2rem); margin-bottom: 0; text-wrap: balance; }
.numlist p { color: var(--ink-soft); max-width: 62ch; }

/* Aktuelles Projekt: Text und Luftbild oben, darunter die Objektkarten. */
.project-head { margin-bottom: clamp(34px, 4.5vw, 62px); align-items: center; }
.project-head .media { min-height: clamp(240px, 26vw, 380px); }

.fact-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-3) clamp(22px, 3vw, 44px); }
@media (max-width: 640px) { .fact-list { grid-template-columns: 1fr; } }
.fact-list .fact { border-left: 3px solid var(--accent); padding-left: 16px; }
.fact-list b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; }
.fact-list p { color: var(--ink-soft); font-size: .95rem; }