/* RAUM.SIEBEN — Firmenwebseite (03.11.2026), Feinschliff mit Bewegung und Bildern 04.11.2026 (Kopf C)
   :root unten = Spiegel von kunden/raum-sieben/brand/tokens.css (CI 2022). Änderungen dort zuerst.
   Marke: CI-Manual 2022 (Drive „RAUM.SIEBEN Immobilien GmbH") — Montserrat,
   Leinrot #C57D59, Matt #F9F9F9, Neutralschwarz #1E1E1E.
   Feedback 22.10.: clean & dezent, übersichtlich für ältere Leser, kurz, mit Akzentfarbe.
   Leinrot hat auf Matt nur 3:1 → nur für große Zahlen, Linien und große Schrift, nie Fließtext. */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --matt: #F9F9F9;
  --flaeche: #F0EEEB;
  --schwarz: #1E1E1E;
  --grau: #5E5B57;
  --linie: #DAD6D0;
  --leinrot: #C57D59;
  --leinrot-tief: #9E5A3A;
  --grau-hell: #BDB9B3; /* nur Linien/Ringe, nie Text */
  --karte: #FFFFFF;     /* Formularfelder und Antwortflächen */
  --fehler: #A3321E;    /* Fehlertext am Feld (6,4:1 auf Matt) */
  --schleier: rgba(30, 30, 30, .45); /* nur hinter dem Cookie-Dialog */
  --rand: clamp(16px, 5vw, 64px);
  --max: 1240px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--matt);
  color: var(--schwarz);
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (min-width: 900px) { body { font-size: 19px; } }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
.huelle { max-width: var(--max); margin: 0 auto; padding: 0 var(--rand); }

/* ---------- Überschriften: CI-Muster „HOCHWERTIGE / IMMOBILIENFOTOS" ---------- */
.titel {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.04;
  font-size: clamp(26px, 4.6vw, 58px);
  text-wrap: balance;
}
.titel > b { display: block; font-weight: 700; }
.titel > span { display: block; font-weight: 300; }
.titel--gross { font-size: clamp(28px, 3.9vw, 58px); }
.ueber {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 24px;
  font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--leinrot-tief);
}
.ueber::before { content: ""; width: 36px; height: 2px; background: var(--leinrot); flex: none; }
.titel + .lead, .titel + .telefon + .lead { margin-top: 24px; }
.lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.6; color: var(--grau); max-width: 34em; }

/* ---------- Bewegungs-Kurven (04.11.: „fettes Update" — ruhig, präzise, nie verspielt) ---------- */
:root {
  --sanft: cubic-bezier(.22, .61, .36, 1);   /* Auslaufen */
  --vorhang: cubic-bezier(.77, 0, .18, 1);    /* Bild-Enthüllung */
  --hell-auf-dunkel: #B9B4AD;                 /* Nebentext auf Schwarz (8,9:1) */
  --linie-dunkel: #3A3836;                    /* Haarlinie auf Schwarz */
}

/* ---------- Knöpfe ---------- */
.knopf {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px;
  border: 1.5px solid var(--schwarz); border-radius: 2px;
  font: 600 16px/1 "Montserrat", sans-serif; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; transition: color .45s var(--sanft), border-color .45s var(--sanft);
}
/* Füllung fährt von links ein — statt hartem Farbwechsel */
.knopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: right; transition: transform .55s var(--vorhang);
}
.knopf:hover::before { transform: scaleX(1); transform-origin: left; }
.knopf--voll { background: var(--schwarz); color: var(--matt); }
.knopf--voll::before { background: #3A3836; }
.knopf--linie { background: transparent; color: var(--schwarz); }
.knopf--linie::before { background: var(--schwarz); }
.knopf--linie:hover { color: var(--matt); }
.knopf--hell { background: var(--matt); color: var(--schwarz); border-color: var(--matt); }
.knopf--hell::before { background: var(--flaeche); }
.knopf--hell-linie { background: transparent; color: var(--matt); border-color: var(--matt); }
.knopf--hell-linie::before { background: var(--matt); }
.knopf--hell-linie:hover { color: var(--schwarz); }
.knopf svg { width: 18px; height: 18px; flex: none; }
.knopf--pfeil svg { width: 20px; height: 20px; transition: transform .45s var(--sanft); }
.knopf--pfeil:hover svg { transform: translateX(4px); }
:focus-visible { outline: 2px solid var(--leinrot); outline-offset: 3px; }

/* Symbol-Vorrat (WhatsApp, Pfeil) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Lese-Fortschritt: 2-px-Linie in Leinrot ganz oben ---------- */
.fortschritt { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 40; pointer-events: none; }
.fortschritt span { display: block; height: 100%; background: var(--leinrot); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: var(--matt);
  border-bottom: 1px solid transparent; transition: border-color .3s, transform .5s var(--sanft);
}
.kopf.ist-gescrollt { border-bottom-color: var(--linie); }
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; transition: height .4s var(--sanft); }
.kopf .marke img { width: min(176px, 44vw); height: auto; transition: width .4s var(--sanft); }
.kopf nav { display: none; gap: 32px; }
.kopf nav a { position: relative; white-space: nowrap; font-size: 15px; font-weight: 500; text-decoration: none; letter-spacing: .04em; }
.kopf nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1.5px; background: var(--leinrot);
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--vorhang);
}
.kopf nav a:hover::after, .kopf nav a.ist-hier::after { transform: scaleX(1); transform-origin: left; }
.kopf .knopf { min-height: 46px; padding: 0 16px; font-size: 14px; }
@media (min-width: 1000px) {
  .kopf .huelle { height: 92px; }
  .kopf .marke img { width: 210px; }
  .kopf nav { display: flex; gap: clamp(18px, 2.2vw, 32px); }
  .kopf.ist-gescrollt .huelle { height: 72px; }
  .kopf.ist-gescrollt .marke img { width: 176px; }
}

/* ---------- Hero C: Text links auf Matt, Loft-Foto rechts bis an den Rand (Nikita 04.11.) ----------
   Nie Schleier/Verlauf über dem Foto — Lesbarkeit kommt aus der Fläche. */
.hero { position: relative; overflow-x: clip; }
.hero-foto { position: relative; height: 52svh; min-height: 280px; max-height: 480px; overflow: hidden; background: var(--flaeche); }
.hero-foto picture { height: 100%; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.hero > .huelle { padding-top: 36px; padding-bottom: clamp(64px, 8vw, 104px); }
.hero-rest .lead { margin-top: 20px; }
.hero-wahl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; max-width: 560px; }
.hero-wahl .knopf { width: 100%; padding: 0 18px; white-space: nowrap; font-size: 15px; letter-spacing: .03em; justify-content: space-between; gap: 12px; }
@media (min-width: 560px) and (max-width: 979px) { .hero-wahl { grid-template-columns: 1fr 1fr; } }
.hero-wa { margin: 18px 0 0; font-size: 16px; color: var(--grau); }
.hero-wa a, .unterstrich {
  color: var(--schwarz); font-weight: 600; text-decoration: none;
  background: linear-gradient(var(--leinrot), var(--leinrot)) 0 100% / 100% 1.5px no-repeat;
  transition: background-size .45s var(--vorhang), color .3s;
}
.hero-wa a:hover { color: var(--leinrot-tief); background-size: 0 1.5px; background-position: 100% 100%; }

/* Zwei Gesichter im Kopf: klein und ruhig (Christina nicht als großes Kopf-Foto, Alexander 03.11.) */
/* Bewertungs-Zeile statt Gesichter (Alexander 05.11.: Team neutral; Bewertungen laut jacasa, Stand 04.11.2026) */
.bewertung { display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linie); text-decoration: none; min-height: 44px; }
.bewertung-note { font-size: 34px; font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sterne { display: inline-flex; color: var(--schwarz); }
.sterne svg { width: 88px; height: 16px; }
.bewertung-text { display: grid; font-size: 15px; line-height: 1.4; }
.bewertung-text b { font-weight: 600; }
.bewertung-text small { font-size: 14px; color: var(--grau); }
.bewertung-text span { color: var(--grau); text-decoration: underline; text-decoration-color: var(--leinrot); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.bewertung:hover .bewertung-text span { color: var(--schwarz); }
@media (max-width: 420px) { .bewertung { flex-wrap: wrap; gap: 8px 12px; } .bewertung-text { flex-basis: 100%; } }

/* Überschrift steigt Zeile für Zeile aus einer Kante */
.titel .zeile { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.titel .zeile > span { display: block; }
.titel b .zeile > span { font-weight: 700; }
.titel .duenn { display: block; font-weight: 300; }


@media (min-width: 980px) {
  .hero { min-height: calc(100svh - 92px); display: flex; align-items: center; }
  .hero-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 50vw; height: auto; max-height: none; }
  .hero-foto img { object-position: 30% 50%; }
  .hero > .huelle { width: 100%; padding-top: 48px; padding-bottom: 72px; }
  .hero-text { max-width: calc(50% - 56px); }
}

/* ---------- Anspruch: drei Worte aus dem CI ---------- */
.werte { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: clamp(40px, 6vw, 72px) 0; }
.werte-zeile {
  margin: 0; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; gap: 24px; white-space: nowrap;
  font-size: clamp(30px, 4.9vw, 72px); font-weight: 300; line-height: 1.05; letter-spacing: -.02em; text-transform: lowercase;
}
.werte-zeile .wort:nth-child(2) { font-weight: 600; }
.werte-zeile i { font-style: normal; color: var(--leinrot); }
@media (max-width: 600px) { .werte-zeile { flex-direction: column; gap: 4px; font-size: clamp(36px, 11vw, 44px); } }

/* ---------- Wertermittlung: dunkle Box als Einstieg (Alexander 05.11., Vorbild jacasa) ---------- */
.wert { padding: clamp(40px, 6vw, 72px) 0; }
.wert-box { position: relative; overflow: hidden; background: var(--schwarz); color: var(--matt); padding: clamp(28px, 5vw, 64px); }
.wert-kopf { position: relative; max-width: 36em; }
.wert-box h2 { margin: 0; font-size: clamp(26px, 3vw, 40px); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.wert-kopf p { margin: 14px 0 0; color: var(--hell-auf-dunkel); font-size: 17px; line-height: 1.6; }
.wert-kacheln { position: relative; list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 640px; }
.wert-kacheln a {
  display: grid; justify-items: center; align-content: center; gap: 12px; aspect-ratio: 1 / .86;
  background: var(--matt); color: var(--schwarz); text-decoration: none; border-bottom: 2px solid transparent;
  font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  transition: transform .45s var(--sanft), border-color .45s var(--sanft), background .45s var(--sanft);
}
.wert-kacheln svg { width: 52px; height: 52px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--sanft); }
.wert-kacheln a:hover { transform: translateY(-4px); border-bottom-color: var(--leinrot); }
.wert-kacheln a:hover svg { transform: scale(1.06); }
.wert-kacheln a:focus-visible { outline-color: var(--leinrot); outline-offset: 4px; }
.wert-haus { position: absolute; right: clamp(32px, 6vw, 88px); bottom: 0; width: clamp(150px, 17vw, 236px); height: auto; pointer-events: none; transform: translateY(2px); }
.wert-haus path { fill: none; stroke: var(--leinrot); stroke-width: 1.1; stroke-linejoin: round; opacity: .9; stroke-dasharray: 700; stroke-dashoffset: 0; }
@media (max-width: 979px) { .wert-haus { display: none; } }
@media (min-width: 760px) {
  .wert-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 700px; }
  .wert-kacheln a { aspect-ratio: 1 / 1; }
}

/* ---------- Bilder: Vorhang öffnet sich, Foto gleitet nach (Parallax per site.js) ---------- */
.bild { margin: 0; position: relative; }
.bild picture { overflow: hidden; background: var(--flaeche); }
.bild img { width: 100%; will-change: transform; }

/* ---------- Verkaufen: Bild + Text + Weg in vier Schritten ---------- */
.verkaufen-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.bild--hoch picture { aspect-ratio: 4 / 5; }
.bild--hoch img { position: relative; top: -6%; height: 112%; object-fit: cover; }
.verkaufen-text .lead { margin-bottom: 0; }
.verkaufen-text > .knopf { margin-top: 40px; }
.weg { list-style: none; margin: 40px 0 40px; padding: 0; display: grid; gap: 0; position: relative; }
.weg li {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 16px; align-items: baseline;
  padding: 18px 0; border-top: 1px solid var(--linie);
}
.weg li:last-child { border-bottom: 1px solid var(--linie); }
.weg-nr { grid-row: span 2; font-size: 14px; font-weight: 600; letter-spacing: .1em; color: var(--leinrot-tief); font-variant-numeric: tabular-nums; }
.weg b { font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.weg li > span:last-child { color: var(--grau); font-size: 17px; }
@media (min-width: 980px) {
  .verkaufen-raster { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(64px, 8vw, 120px); align-items: center; }
  .bild--hoch picture { aspect-ratio: 4 / 5.2; }
}

/* ---------- Kaufen + Aktuelle Angebote (immowelt) ---------- */
.kaufen { background: var(--flaeche); }
.kaufen-kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.kaufen-kopf .lead { margin-bottom: 28px; }
@media (min-width: 980px) {
  .kaufen-kopf { grid-template-columns: 1fr 1fr; gap: 96px; align-items: end; }
}
.angebote { margin-top: clamp(48px, 6vw, 80px); background: var(--matt); border-top: 2px solid var(--leinrot); }
.angebote-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding: 28px 28px 0; }
.angebote h3 { margin: 0; font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.angebote-quelle { font-size: 14px; color: var(--grau); letter-spacing: .04em; }
.angebote-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px 32px; padding: 24px 28px 0; }
.angebot { display: flex; flex-direction: column; min-width: 0; text-decoration: none; }
.angebot-bild { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--flaeche); border-radius: 2px; }
.angebot-ort { margin-top: 14px; font-size: 14px; color: var(--grau); overflow-wrap: anywhere; }
.angebot-titel { margin: 4px 0 10px; font-size: 17px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; text-wrap: balance; }
.angebot:hover .angebot-titel { color: var(--leinrot-tief); }
.angebot-preis { margin-top: auto; font-weight: 700; }
.angebot-fakten { font-size: 15px; color: var(--grau); }
.angebote-fuss { padding: 32px 28px 40px; }
@media (min-width: 640px) { .angebote-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.angebote-leer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px; }
.angebote-satz { color: var(--grau); max-width: 40em; }
.angebote-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 4px; }
.angebote-hinweis { margin: 16px 0 0; font-size: 14px; color: var(--grau); }
.angebote-hinweis a { color: var(--schwarz); }
.angebote[data-zustand="da"] .angebote-leer { display: none; }
.angebote:not([data-zustand="da"]) .angebote-quelle { display: none; }
.haus-linie { width: 64px; height: auto; }
.haus-linie path { fill: none; stroke: var(--leinrot); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 700; stroke-dashoffset: 0; }
@media (min-width: 980px) {
  .angebote-kopf { padding: 40px 44px 0; }
  .angebote-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 32px 44px 0; }
  .angebote-fuss { padding: 40px 44px 44px; }
  .angebote-leer { grid-template-columns: 88px minmax(0, 1fr); gap: 40px; padding: 32px 44px 44px; align-items: start; }
  .haus-linie { width: 80px; }
}
.pfeil { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--leinrot); }
.pfeil::after { content: "→"; margin-left: 8px; transition: transform .45s var(--sanft); }
.pfeil:hover { color: var(--leinrot-tief); }
.pfeil:hover::after { transform: translateX(4px); }

/* ---------- Band: ein Raum, randlos ---------- */
.band { position: relative; margin: 0; height: clamp(320px, 78svh, 860px); overflow: hidden; background: var(--flaeche); }
.band picture { height: 100%; }
.band img { position: relative; top: -9%; width: 100%; height: 118%; object-fit: cover; object-position: 50% 60%; will-change: transform; }

/* ---------- Sieben Leistungen: Zähler läuft mit ---------- */
.abschnitt { padding: clamp(80px, 10vw, 148px) 0; }
.sieben .huelle { display: grid; grid-template-columns: minmax(0, 1fr); gap: 52px; }
.sieben-kopf .lead { margin-top: 24px; }
.zaehler { display: none; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 16px;
  padding: 24px 0; border-top: 1px solid var(--linie); position: relative;
}
.liste li:last-child { border-bottom: 1px solid var(--linie); }
.liste li::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--leinrot);
  transform: scaleX(0); transform-origin: left; transition: transform .9s var(--vorhang);
}
.liste li.ist-aktiv::before { transform: scaleX(1); }
.liste h3 { hyphens: auto; overflow-wrap: break-word; margin: 0; font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; line-height: 1.3; }
.liste p { margin: 0; color: var(--grau); }
/* Sieben Räume (Alexander 05.11.): RAUM. in Schwarz, Zahlwort in Leinrot — Schreibweise des Firmennamens */
.raeume li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.liste .raum { grid-row: auto; margin: 0 0 4px; color: var(--schwarz); font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; line-height: 1.1; letter-spacing: .01em; }
.liste .raum i { font-style: normal; color: var(--leinrot); }
.raeume h3 { font-size: 16px; letter-spacing: .12em; color: var(--schwarz); }
@media (min-width: 980px) {
  .sieben .huelle { grid-template-columns: .9fr 1.1fr; gap: 88px; align-items: start; }
  .sieben-kopf { position: sticky; top: 132px; }
  .liste li { padding: 36px 0; transition: opacity .5s var(--sanft); }
  html.js .liste.laeuft li:not(.ist-aktiv) { opacity: .7; }
  .zaehler { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-top: 56px; }
  .zaehler-zahl { font-size: clamp(120px, 12vw, 176px); line-height: .8; font-weight: 200; color: var(--leinrot); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
  .zaehler-von { font-size: 22px; font-weight: 300; color: var(--grau); }
  .zaehler-bahn { flex-basis: 100%; height: 2px; background: var(--linie); margin-top: 24px; max-width: 320px; }
  .zaehler-bahn span { display: block; height: 100%; background: var(--leinrot); transform: scaleX(var(--z, .142)); transform-origin: left; transition: transform .7s var(--vorhang); }
}

/* ---------- Team ---------- */
.team { background: var(--flaeche); }
.team-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.team-kopf { max-width: 760px; }
.gebiet { margin: 0; display: grid; gap: 0; align-self: end; }
.gebiet div { padding: 18px 0; border-top: 1px solid var(--linie); }
.gebiet div:last-child { border-bottom: 1px solid var(--linie); }
.gebiet dt { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--leinrot-tief); }
.gebiet dd { margin: 4px 0 0; font-size: 20px; font-weight: 600; }
@media (min-width: 980px) { .team-raster { grid-template-columns: 1.3fr .7fr; gap: 96px; align-items: end; } }

/* Zahlen-Leiste: Ziffer groß und dünn, Plus in Leinrot wie die Punkte im Leitsatz */
.zahlen { margin: clamp(56px, 7vw, 88px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--linie); }
.zahlen div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: 28px 16px 28px 0; border-bottom: 1px solid var(--linie); }
.zahlen dd { margin: 0; font-size: clamp(44px, 5.4vw, 76px); font-weight: 300; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zahlen dd i { font-style: normal; color: var(--leinrot); margin-left: .04em; }
.zahlen dt { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--grau); }
.zahlen-quelle { margin: 20px 0 0; max-width: 52em; font-size: 14px; line-height: 1.6; color: var(--grau); }
.zahlen-quelle a { color: var(--schwarz); }
.zahlen-stern { position: relative; top: -.62em; width: .4em; height: .4em; margin-left: .12em; vertical-align: baseline; color: var(--leinrot); }
@media (min-width: 900px) {
  .zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--linie); }
  .zahlen div { border-bottom: 0; padding: 36px 24px; border-left: 1px solid var(--linie); }
  .zahlen div:first-child { border-left: 0; padding-left: 0; }
}

/* ---------- Kontakt: dunkle Schlussbühne, Bild spiegelt den Kopf ---------- */
.kontakt { position: relative; background: var(--schwarz); color: var(--matt); overflow-x: clip; }
.kontakt .ueber { color: var(--leinrot); }
.kontakt .lead { color: var(--hell-auf-dunkel); }
.kontakt-foto { position: relative; height: 46svh; min-height: 260px; max-height: 440px; overflow: hidden; }
.kontakt-foto picture { height: 100%; }
.kontakt-foto img { width: 100%; height: 100%; object-fit: cover; }
.kontakt > .huelle { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(80px, 10vw, 148px); }
.kontakt-wege { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 36px; max-width: 400px; }
.kontakt-wege .knopf { width: 100%; white-space: nowrap; }
.kontakt-tel { margin-top: 28px; font-size: 16px; color: var(--hell-auf-dunkel); }
.kontakt-tel a { color: var(--matt); font-weight: 600; text-decoration: none; white-space: nowrap; border-bottom: 1.5px solid var(--leinrot); }
.kontakt-tel a:hover { color: var(--leinrot); }
.kontakt :focus-visible { outline-color: var(--matt); }
@media (min-width: 980px) {
  .kontakt { min-height: 88svh; display: flex; align-items: center; }
  .kontakt-foto { position: absolute; top: 0; left: 0; bottom: 0; width: 46vw; height: auto; max-height: none; }
  .kontakt > .huelle { width: 100%; display: flex; justify-content: flex-end; }
  .kontakt-text { width: calc(54% - 32px); max-width: 640px; }
}

/* ---------- Bewegung: nur wenn erlaubt, und nie bei Prüf-Renders (html.ruhig) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.ruhig) .auf { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--sanft), transform 1.1s var(--sanft); }
  html.js:not(.ruhig) .auf.ist-da { opacity: 1; transform: none; }
  html.js:not(.ruhig) .weg li.auf:nth-child(2), html.js:not(.ruhig) .zahlen .auf:nth-child(2) { transition-delay: .1s; }
  html.js:not(.ruhig) .zahlen .auf:nth-child(3) { transition-delay: .2s; }
  html.js:not(.ruhig) .zahlen .auf:nth-child(4) { transition-delay: .3s; }
  html.js:not(.ruhig) .wert-box .wert-haus path { stroke-dashoffset: 700; transition: stroke-dashoffset 2.4s var(--sanft) .4s; }
  html.js:not(.ruhig) .wert-box.ist-da .wert-haus path { stroke-dashoffset: 0; }
  html.js:not(.ruhig) .weg li.auf:nth-child(3) { transition-delay: .2s; }
  html.js:not(.ruhig) .weg li.auf:nth-child(4) { transition-delay: .3s; }
  html.js:not(.ruhig) .werte .wort { transform: translateY(40%); }
  html.js:not(.ruhig) .werte .wort:nth-child(2) { transition-delay: .12s; }
  html.js:not(.ruhig) .werte .wort:nth-child(3) { transition-delay: .24s; }

  /* Vorhang: Bild öffnet sich von unten nach oben */
  html.js:not(.ruhig) .enthuellen { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--vorhang); }
  html.js:not(.ruhig) .enthuellen.ist-da { clip-path: inset(0 0 0 0); }
  html.js:not(.ruhig) .kontakt-foto.enthuellen img { transform: scale(1.18); transition: transform 2.2s var(--sanft); }
  html.js:not(.ruhig) .kontakt-foto.enthuellen.ist-da img { transform: scale(1); }

  /* Haus-Linie zeichnet sich, wenn die Angebote ins Bild kommen */
  html.js:not(.ruhig) .angebote .haus-linie path { stroke-dashoffset: 700; transition: stroke-dashoffset 2s var(--sanft) .3s; }
  html.js:not(.ruhig) .angebote.ist-da .haus-linie path { stroke-dashoffset: 0; }

  /* Auftritt des Kopfs beim Laden */
  html.js:not(.ruhig) .start .hero-foto { animation: vorhang-links 1.5s var(--vorhang) .1s both; }
  html.js:not(.ruhig) .start .hero-foto img { animation: ankommen 2.6s var(--sanft) .1s both; }
  html.js:not(.ruhig) .start .hero-ueber { animation: einblenden .9s var(--sanft) .2s both; }
  html.js:not(.ruhig) .start .hero-ueber::before { animation: linie 1s var(--vorhang) .35s both; }
  html.js:not(.ruhig) .start .titel .zeile > span { animation: aufsteigen 1.1s var(--sanft) both; }
  html.js:not(.ruhig) .start .titel .zeile:nth-child(1) > span { animation-delay: .35s; }
  html.js:not(.ruhig) .start .titel b .zeile:nth-child(2) > span { animation-delay: .45s; }
  html.js:not(.ruhig) .start .titel .duenn .zeile:nth-child(1) > span { animation-delay: .58s; }
  html.js:not(.ruhig) .start .titel .duenn .zeile:nth-child(2) > span { animation-delay: .68s; }
  html.js:not(.ruhig) .start .hero-rest { animation: einblenden-hoch 1.1s var(--sanft) .9s both; }
  html.js:not(.ruhig) .start .kopf { animation: einblenden .8s var(--sanft) both; }
}
@keyframes vorhang-links { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 979px) { @keyframes vorhang-links { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } }
@keyframes ankommen { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes aufsteigen { from { transform: translateY(105%); } to { transform: none; } }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes einblenden-hoch { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-ueber::before { transform-origin: left; }
.hero-ueber { letter-spacing: .1em; gap: 12px; }
.hero-ueber::before { width: 24px; }
@media (max-width: 420px) { .hero-ueber::before { display: none; } }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--linie); padding: 40px 0 48px; font-size: 15px; color: var(--grau); }
.fuss .huelle { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.fuss img { width: 160px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--schwarz); }

/* ---------- Rechtsseiten ---------- */
.recht { padding: clamp(48px, 7vw, 96px) 0 96px; }
.recht .huelle { max-width: 760px; }
.recht h1 { font-size: clamp(32px, 5vw, 52px); text-transform: uppercase; font-weight: 700; line-height: 1.05; margin: 0 0 32px; }
.recht h2 { font-size: 18px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin: 44px 0 8px; }
.recht p, .recht li { color: var(--schwarz); }
.recht dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.recht dt { font-weight: 600; }
.recht dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .recht dl { grid-template-columns: 1fr; } .recht dd { margin-bottom: 8px; } }
.zurueck { display: inline-block; margin-bottom: 28px; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--grau); }

.fuss-zeile { margin: 0; }
.stand { margin-top: 44px; color: var(--grau); }



/* ---------- WhatsApp-Knöpfe + ein mitfahrender Knopf am Handy ---------- */
.knopf--wa svg { width: 20px; height: 20px; flex: none; }
.kopf .knopf--wa span { display: none; }
@media (min-width: 420px) { .kopf .knopf--wa span { display: inline; } }
.mitfahrend {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30;
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px;
  background: var(--schwarz); color: var(--matt); border-radius: 2px;
  font: 600 16px/1 "Montserrat", sans-serif; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  transform: translateY(140%); visibility: hidden; transition: transform .3s ease, visibility 0s .3s;
}
.mitfahrend svg { width: 20px; height: 20px; }
.mitfahrend.ist-da { transform: none; visibility: visible; transition: transform .3s ease; }
@media (min-width: 980px) { .mitfahrend { display: none; } }
/* Handy: mitfahrender Knopf unten ersetzt den WhatsApp-Knopf oben (Hausregel: nie zwei mitfahrend) */
@media (max-width: 979px) { body.mitfahrend-an .kopf .knopf--wa { visibility: hidden; } .fuss { padding-bottom: 104px; } }

/* ---------- Cookie-Frage (zustimmung.js): Dialog, zwei gleiche Knöpfe ---------- */
.rs-schleier { position: fixed; inset: 0; z-index: 90; background: var(--schleier); }
.rs-zustimmung { position: fixed; inset: 0; z-index: 91; display: grid; place-items: center; padding: 16px; }
.rs-zustimmung-karte { width: 100%; max-width: 520px; background: var(--matt); padding: 32px; border-top: 2px solid var(--leinrot); outline: none; }
.rs-zustimmung-karte h2 { margin: 0 0 12px; font-size: 22px; font-weight: 700; line-height: 1.25; }
.rs-zustimmung-karte p { font-size: 16px; color: var(--grau); }
.rs-zustimmung-karte a { color: var(--schwarz); }
.rs-zustimmung-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
@media (max-width: 420px) { .rs-zustimmung-knoepfe { grid-template-columns: 1fr; } }
.rs-zustimmung-knoepfe button {
  min-height: 52px; padding: 0 12px; background: var(--schwarz); color: var(--matt); border: 0; border-radius: 2px; cursor: pointer;
  font: 600 15px/1 "Montserrat", sans-serif; letter-spacing: .04em; text-transform: uppercase;
}
.zustimmung-offen { overflow: hidden; }
.cookie-einstellungen { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; }

/* Tippziele ≥ 44 px (ui-gate) für Menü und Fußzeile */
.kopf nav a, .fuss nav a, .fuss .cookie-einstellungen { display: inline-flex; align-items: center; min-height: 44px; }
.recht dd a { display: inline-block; min-height: 24px; max-width: 100%; overflow-wrap: anywhere; }
.recht p, .recht dd, .recht dt, .recht li { overflow-wrap: anywhere; min-width: 0; }
.recht h1, .recht h2 { hyphens: auto; overflow-wrap: break-word; }

/* ---------- Angebote: Startseite zeigt drei (nie 2 + 1), Knopf führt zur Unterseite /angebote/ ---------- */
.angebote[data-zeige] .angebote-liste, .angebote-seite .angebote .angebote-liste { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .angebote[data-zeige] .angebote-liste, .angebote-seite .angebote .angebote-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; } }
.angebote-fuss .knopf { width: 100%; }
@media (min-width: 560px) { .angebote-fuss .knopf { width: auto; } }
.angebote-meldung {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; max-width: 520px; margin: 0 auto;
  padding: 14px 18px; background: var(--schwarz); color: var(--matt); border-radius: 2px; font-size: 15px; line-height: 1.45;
  transform: translateY(160%); visibility: hidden; transition: transform .3s ease, visibility 0s .3s;
}
.angebote-meldung.ist-da { transform: none; visibility: visible; transition: transform .3s ease; }

/* ---------- Unterseite /angebote/ (eigener Link zum Verschicken) ---------- */
.angebote-seite .seite-kopf { padding: clamp(48px, 8vw, 104px) 0 clamp(36px, 5vw, 64px); }
.angebote-seite .seite-kopf .lead { margin: 0; }
.angebote-seite h1.titel { font-size: clamp(40px, 6vw, 76px); }
.seite-zahl { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 0; color: var(--grau); font-size: 16px; }
.seite-zahl b { font-size: clamp(56px, 7vw, 88px); line-height: 1; font-weight: 300; color: var(--leinrot); font-variant-numeric: tabular-nums; }
.angebote-seite .angebote { margin: 0; background: none; }
.angebote-seite .angebote-liste { padding: 40px 0 0; }
.angebote-seite .angebote-fuss { padding: 40px 0 clamp(64px, 8vw, 112px); }
.angebote-seite .angebote-leer { padding: 40px 0 clamp(64px, 8vw, 112px); }
.angebote-seite .angebot-titel { font-size: 18px; }
.angebote-seite .kaufen-kopf { align-items: end; }
@media (min-width: 980px) { .angebote-seite .angebote .angebote-liste { padding-top: 56px; gap: 48px 32px; } }