/* =========================================================================
   BANSEMER IMMOBILIEN – Stylesheet
   -------------------------------------------------------------------------
   Gestaltungsidee: Die aufsteigende rote Linie der Bildmarke ist das
   durchgehende Motiv – als Akzentkante, als Trenner, als Hintergrundgrafik.
   Dazu eine warme Neutralpalette, klare Ebenen (schwebende Karten) und ein
   kräftiger typografischer Kontrast.

   Keine externen Ressourcen: keine Webfonts, keine CDNs, keine Tracker.
   Alle Farbwerte stehen im Block :root – dort lässt sich das Erscheinungs-
   bild der gesamten Website an einer Stelle ändern.
   ========================================================================= */

/* --- 1. Design-Tokens ---------------------------------------------------- */
:root {
  /* Markenfarben */
  --rot:          #e3001b;
  --rot-hell:     #ff3049;
  --rot-dunkel:   #b30015;
  --rot-tief:     #8d0011;

  /* Neutrale – bewusst leicht warm/grünlich abgestimmt auf das Steingrau
     der Wortmarke, damit die Seite nicht kalt und technisch wirkt. */
  --tinte:        #17191a;
  --anthrazit:    #3c3c3b;
  --anthrazit-90: #2c2c2b;
  --stein:        #8b9490;
  --stein-hell:   #dfe2e0;
  --linie:        #e6e8e6;
  --hell:         #f4f5f2;
  --sand:         #fbfaf8;
  --weiss:        #ffffff;
  --text:         #2c2c2b;
  --text-leise:   #666d6a;

  /* Flächen auf dunklem Grund */
  --dunkel-text:  #d7dad8;
  --dunkel-leise: #a4aba8;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;

  --breite:     1220px;
  --breite-eng: 780px;

  --radius:    18px;
  --radius-s:  10px;
  --radius-xs: 6px;

  /* Gestaffelte Schatten – erzeugen die Ebenenwirkung */
  --schatten-s: 0 1px 2px rgba(23, 25, 26, .05),
                0 2px 6px rgba(23, 25, 26, .04);
  --schatten:   0 1px 2px rgba(23, 25, 26, .05),
                0 8px 24px rgba(23, 25, 26, .07);
  --schatten-l: 0 2px 4px rgba(23, 25, 26, .06),
                0 18px 48px rgba(23, 25, 26, .13);
  --schatten-xl:0 4px 8px rgba(23, 25, 26, .07),
                0 32px 72px rgba(23, 25, 26, .18);
  --schatten-rot: 0 6px 18px rgba(227, 0, 27, .26);

  --sektion-y: clamp(4.5rem, 9vw, 8rem);
  --tempo:  .25s cubic-bezier(.4, 0, .2, 1);
  --tempo-l:.45s cubic-bezier(.22, 1, .36, 1);

  --header-h: 84px;
}

/* --- 2. Reset / Grundlagen ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.68;
  color: var(--text);
  background: var(--weiss);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--anthrazit-90);
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.25rem + 4vw, 4.15rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.3vw, 2.85rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.42rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

strong { color: var(--anthrazit-90); font-weight: 700; }

a { color: var(--rot-dunkel); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rot); }

ul { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

::selection { background: var(--rot); color: var(--weiss); }

:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- 3. Layout-Bausteine ------------------------------------------------- */
.wrap {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
}

.sektion {
  position: relative;
  padding-block: var(--sektion-y);
}
.sektion--hell   { background: var(--hell); }
.sektion--sand   { background: var(--sand); }
.sektion--dunkel { background: var(--anthrazit-90); color: var(--dunkel-text); }
.sektion--dunkel h2, .sektion--dunkel h3 { color: var(--weiss); }

/* Feiner Linienraster als Hintergrundtextur – ersetzt die frühere leere
   Fläche und gibt hellen Abschnitten Struktur, ohne vom Text abzulenken. */
.sektion--raster::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(139, 148, 144, .10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(139, 148, 144, .10) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 40%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 65% at 50% 40%, #000 20%, transparent 78%);
}
.sektion--raster > .wrap { position: relative; z-index: 1; }

.sektion-kopf {
  max-width: var(--breite-eng);
  margin-bottom: clamp(2.75rem, 5vw, 4rem);
}
.sektion-kopf--mitte { margin-inline: auto; text-align: center; }

/* Eyebrow: kleines Label mit dem Linienmotiv der Bildmarke */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rot);
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, transparent, var(--rot));
}
.sektion-kopf--mitte .eyebrow::after {
  content: "";
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to left, transparent, var(--rot));
}
.sektion--dunkel .eyebrow { color: var(--rot-hell); }
.sektion--dunkel .eyebrow::before { background: linear-gradient(to right, transparent, var(--rot-hell)); }
.sektion--dunkel .eyebrow::after  { background: linear-gradient(to left,  transparent, var(--rot-hell)); }

.lead {
  font-size: clamp(1.08rem, 1rem + .4vw, 1.24rem);
  line-height: 1.6;
  color: var(--text-leise);
}
.sektion--dunkel .lead { color: var(--dunkel-leise); }

/* --- 4. Buttons ---------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.85rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 650;
  font-size: .98rem;
  line-height: 1.2;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  transition: background var(--tempo), color var(--tempo),
              border-color var(--tempo), transform var(--tempo),
              box-shadow var(--tempo);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { transition: transform var(--tempo); }
.btn:hover svg { transform: translate(2px, -2px); }

.btn--primaer {
  background: linear-gradient(135deg, var(--rot-hell) 0%, var(--rot) 45%, var(--rot-dunkel) 100%);
  border-color: transparent;
  color: var(--weiss);
  box-shadow: var(--schatten-rot);
}
.btn--primaer:hover {
  color: var(--weiss);
  box-shadow: 0 10px 30px rgba(227, 0, 27, .38);
}

.btn--sekundaer {
  background: var(--weiss);
  border-color: var(--stein-hell);
  color: var(--anthrazit-90);
  box-shadow: var(--schatten-s);
}
.btn--sekundaer:hover {
  background: var(--anthrazit-90);
  border-color: var(--anthrazit-90);
  color: var(--weiss);
}

.btn--hell {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .45);
  color: var(--weiss);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.btn--hell:hover { background: var(--weiss); border-color: var(--weiss); color: var(--anthrazit-90); }

.btn--weiss {
  background: var(--weiss);
  border-color: var(--weiss);
  color: var(--rot-dunkel);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .18);
}
.btn--weiss:hover { background: var(--sand); border-color: var(--sand); color: var(--rot-tief); }

.btn-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  align-items: center;
}

/* --- 5. Skip-Link -------------------------------------------------------- */
.skip {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  padding: .8rem 1.5rem;
  background: var(--rot);
  color: var(--weiss);
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--tempo);
}
.skip:focus { top: 0; color: var(--weiss); }

/* --- 6. Header / Navigation --------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--tempo), box-shadow var(--tempo), background var(--tempo);
}
.header.ist-gescrollt {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--linie);
  box-shadow: 0 6px 24px rgba(23, 25, 26, .07);
}
/* Feiner roter Faden unter dem Kopf – Aufgriff des Markenstrichs */
.header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(to right, var(--rot) 0%, var(--rot-hell) 30%, transparent 70%);
  opacity: 0;
  transition: opacity var(--tempo);
}
.header.ist-gescrollt::after { opacity: .9; }

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.marke { display: flex; align-items: center; margin-right: auto; }
/* Waagerechte Wort-/Bildmarke (assets/logo-horizontal.png, 1561 x 298).
   Das gestapelte Original ist rund 2:1 hoch und lässt den Schriftzug in
   einem Seitenkopf zwangsläufig winzig werden; die liegende Fassung bringt
   bei gleicher Kopfhöhe einen etwa dreimal so großen Namenszug. */
.marke img {
  height: 54px;
  width: auto;
  transition: height var(--tempo);
}
.header.ist-gescrollt .marke img { height: 46px; }

.nav { display: flex; align-items: center; gap: 1.7rem; }

.nav__liste {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__liste li { margin: 0; }

.nav__link {
  position: relative;
  padding: .4rem 0;
  color: var(--anthrazit-90);
  font-weight: 550;
  font-size: .96rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--tempo);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tempo);
}
.nav__link:hover, .nav__link[aria-current="true"] { color: var(--rot); }
.nav__link:hover::after, .nav__link[aria-current="true"]::after { transform: scaleX(1); }

.nav__tel {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .68rem 1.35rem;
  border: 2px solid var(--rot);
  border-radius: 999px;
  color: var(--rot);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--tempo), color var(--tempo), box-shadow var(--tempo);
}
.nav__tel:hover {
  background: var(--rot);
  color: var(--weiss);
  box-shadow: var(--schatten-rot);
}

/* Anruf-Knopf im Seitenkopf – Gegenstück zu .nav__tel für schmale Displays.
   Auf der Startseite liegt die Nummer dort im eingeklappten Burger-Menü, auf
   den Rechtstext-Seiten wird sie ganz ausgeblendet (siehe unten). Der Anruf
   ist der wichtigste Weg zu uns und darf nie hinter einem Tap liegen.
   Ab 900 px ausgeblendet, weil .nav__tel die Aufgabe wieder übernimmt. */
.kopf-tel {
  display: none;
  align-items: center;
  gap: .5rem;
  flex: none;
  min-height: 48px;
  padding-inline: 1rem;
  border: 2px solid var(--rot);
  border-radius: 999px;
  background: var(--weiss);
  color: var(--rot);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--schatten-s);
  transition: background var(--tempo), color var(--tempo);
}
.kopf-tel:hover, .kopf-tel:active {
  background: var(--rot);
  color: var(--weiss);
}
.kopf-tel svg { flex: none; }

.burger {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  background: var(--weiss);
  box-shadow: var(--schatten-s);
  cursor: pointer;
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  margin: 5px auto;
  background: var(--anthrazit-90);
  transition: transform var(--tempo), opacity var(--tempo);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- 7. Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(600px, 88vh, 860px);
  /* unten Platz für die überlappende Faktenleiste */
  padding-block: clamp(4.5rem, 10vw, 7.5rem) clamp(8rem, 14vw, 11rem);
  /* Fallback-Verlauf: greift, solange assets/hero.jpg nicht vorhanden ist */
  background:
    radial-gradient(ellipse 70% 90% at 85% 15%, rgba(227, 0, 27, .30) 0%, transparent 62%),
    radial-gradient(ellipse 90% 70% at 10% 90%, rgba(139, 148, 144, .30) 0%, transparent 60%),
    linear-gradient(160deg, #43494a 0%, #2c2c2b 48%, #17191a 100%);
  background-size: cover;
  background-position: center;
  color: var(--weiss);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Das Motiv ist quadratisch, der Hero ein breites Band – rund 47 % der
     Bildhöhe fallen weg. Die Häuserreihe sitzt zwischen 34 % und 86 % der
     Bildhöhe; mit 72 % wandert das sichtbare Fenster genau darauf. Bei
     center (Voreinstellung) würden die Häuser unten abgeschnitten. */
  object-position: center 72%;
  z-index: 0;
  /* Leichte Entsättigung: das Foto bleibt Kulisse, das Rot der Marke
     bleibt die einzige kräftige Farbe im Bildausschnitt. */
  filter: grayscale(.3) contrast(1.04);
}
.hero__schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(102deg, rgba(20, 22, 22, .94) 0%, rgba(23, 25, 26, .80) 46%, rgba(23, 25, 26, .46) 100%),
    linear-gradient(to top, rgba(23, 25, 26, .88) 0%, transparent 45%);
}

/* Grafisches Motiv: die aufsteigende Linie mit den drei Häusern der
   Bildmarke, stark abgeschwächt als Hintergrundzeichnung. */
.hero__deko {
  position: absolute;
  z-index: 1;
  right: -6%;
  bottom: 4%;
  width: min(62%, 780px);
  pointer-events: none;
  color: var(--weiss);
}
/* Sobald ein echtes Hero-Foto vorhanden ist, entfällt die Zeichnung – sonst
   stehen zwei Häusermotive übereinander. Fehlt assets/hero.jpg, entfernt
   sich <img class="hero__bg"> selbst und die Zeichnung erscheint wieder. */
.hero:has(.hero__bg) .hero__deko { display: none; }
.hero__deko svg { width: 100%; height: auto; display: block; }
.hero__deko .deko-linie {
  stroke: var(--rot);
  opacity: .55;
}
.hero__deko .deko-haus {
  stroke: currentColor;
  opacity: .13;
}

.hero .wrap { position: relative; z-index: 2; }
.hero__inhalt { max-width: 42rem; }

/* Firmenname als Vorzeile über der Überschrift – sorgt dafür, dass beim
   ersten Blick auf die Seite klar ist, um wen es geht. */
.hero__marke {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1.1rem;
  font-size: clamp(1rem, .88rem + .55vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--weiss);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.hero__marke::before {
  content: "";
  flex: none;
  width: clamp(28px, 4vw, 46px);
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--rot), var(--rot-hell));
}

.hero h1 { color: var(--weiss); margin-bottom: .45em; }
.hero h1 .akzent {
  color: var(--rot-hell);
  /* Feine Unterstreichung im Duktus des Markenstrichs – bewusst dünn und
     nach rechts auslaufend, damit sie über zwei Zeilen nicht wie ein Link wirkt. */
  background-image: linear-gradient(to right, rgba(227, 0, 27, .85), rgba(255, 48, 73, .25));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 97%;
  padding-bottom: .05em;
}

.hero__text {
  margin-bottom: 2.4rem;
  font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .86);
  max-width: 34rem;
}

.hero__marker {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.6rem;
  padding: .5rem 1.1rem .5rem .85rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.hero__marker .punkt {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rot-hell);
}
.hero__marker .punkt::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--rot-hell);
  opacity: .6;
  animation: puls 2.8s ease-out infinite;
}
@keyframes puls {
  0%   { transform: scale(.7); opacity: .7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Kleine Vertrauenszeile unter den Buttons */
.hero__belege {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .88rem;
  color: rgba(255, 255, 255, .72);
}
.hero__belege li {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
}
.hero__belege svg { width: 16px; height: 16px; flex: none; color: var(--rot-hell); }

/* --- 8. Vertrauensleiste (schwebt über dem Hero) ------------------------- */
.fakten-halter {
  position: relative;
  z-index: 3;
  margin-top: clamp(-6.5rem, -9vw, -4.5rem);
}
/* Trennlinien entstehen durch einen 1px breiten Spalt, durch den die
   Hintergrundfarbe der Leiste scheint. Das funktioniert in jeder Anordnung
   automatisch – auch waagerecht, sobald die Kacheln in zwei Reihen umbrechen. */
.fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-xl);
}
.fakt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.8rem, 3.5vw, 2.5rem) 1.5rem;
  background: var(--weiss);
  text-align: center;
}

/* Gemeinsame Mindesthöhe für die Wertzeile: Damit stehen die Bildunterzeilen
   aller Kacheln auf einer Linie, auch wenn statt einer Zahl ein Logo steht. */
.fakt__zahl, .fakt__partner {
  min-height: calc(clamp(1.75rem, 1.3rem + 1.7vw, 2.45rem) * 1.05);
}

.fakt__zahl {
  display: block;
  font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.45rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--anthrazit-90);
  overflow-wrap: anywhere;
}
.fakt__zahl .einheit { color: var(--rot); }

/* Partnerkachel: Logo statt Kennzahl. Die Datei liegt nur in 200 × 48 px vor,
   deshalb wird sie bewusst schmaler dargestellt, damit sie scharf bleibt. */
.fakt__partner {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--tempo), transform var(--tempo);
}
.fakt__partner img {
  width: 152px;
  max-width: 100%;
  height: auto;
}
a.fakt__partner:hover { opacity: .75; transform: translateY(-2px); }

.fakt__text {
  margin-top: .6rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--text-leise);
}

/* --- 9. Karten / Raster -------------------------------------------------- */
.raster {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.4rem);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
  transition: transform var(--tempo), box-shadow var(--tempo), border-color var(--tempo);
}
/* Aufsteigende Akzentkante am oberen Rand – erscheint beim Überfahren */
.karte::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(to right, var(--rot), var(--rot-hell));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tempo-l);
}
.karte:hover {
  transform: translateY(-5px);
  border-color: rgba(227, 0, 27, .22);
  box-shadow: var(--schatten-l);
}
.karte:hover::before { transform: scaleX(1); }

.karte__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 1.4rem;
  border-radius: 16px;
  background: linear-gradient(140deg, rgba(227, 0, 27, .12), rgba(227, 0, 27, .04));
  box-shadow: inset 0 0 0 1px rgba(227, 0, 27, .12);
  color: var(--rot);
  transition: transform var(--tempo), background var(--tempo);
}
.karte:hover .karte__icon {
  transform: translateY(-2px);
  background: linear-gradient(140deg, rgba(227, 0, 27, .18), rgba(227, 0, 27, .07));
}
.karte__icon svg { width: 27px; height: 27px; }

.karte h3 { margin-bottom: .5rem; }

.liste-haken {
  margin: 1.1rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--linie);
  list-style: none;
  font-size: .95rem;
}
.liste-haken li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .6rem;
  line-height: 1.55;
  color: var(--text-leise);
}
.liste-haken li:last-child { margin-bottom: 0; }
.liste-haken li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .46em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--rot);
}
.liste-haken li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(.46em + 4px);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--rot);
}
.sektion--dunkel .liste-haken { border-top-color: rgba(255, 255, 255, .12); }
.sektion--dunkel .liste-haken li { color: var(--dunkel-leise); }

/* --- 10. Wertgutachten-Block -------------------------------------------- */
.sektion--dunkel {
  overflow: hidden;
}
/* Diagonale Aufhellung, damit die dunkle Fläche nicht tot wirkt */
.sektion--dunkel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 88% 12%, rgba(227, 0, 27, .20) 0%, transparent 65%),
    radial-gradient(ellipse 60% 60% at 5% 95%, rgba(139, 148, 144, .16) 0%, transparent 60%);
}
.sektion--dunkel > .wrap { position: relative; z-index: 1; }

.gutachten {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
.verfahren {
  display: grid;
  gap: 1rem;
}
.verfahren__item {
  display: flex;
  gap: 1.2rem;
  padding: 1.45rem 1.6rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-left: 3px solid var(--rot);
  border-radius: var(--radius-s);
  transition: background var(--tempo), transform var(--tempo);
}
.verfahren__item:hover {
  background: rgba(255, 255, 255, .09);
  transform: translateX(4px);
}
.verfahren__nr {
  flex: none;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--rot-hell);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.verfahren__item h3 { margin-bottom: .3rem; font-size: 1.06rem; }
.verfahren__item p { font-size: .93rem; line-height: 1.6; color: var(--dunkel-leise); }

.anlaesse {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.6rem;
  padding: 0;
  list-style: none;
}
.anlaesse li {
  margin: 0;
  padding: .45rem 1rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  font-size: .88rem;
  color: var(--dunkel-text);
  transition: background var(--tempo), border-color var(--tempo);
}
.anlaesse li:hover { background: rgba(227, 0, 27, .18); border-color: rgba(227, 0, 27, .5); }

/* Grundfarbe fuer helle Flaechen; auf dunklem Grund wird sie aufgehellt.
   Dasselbe Muster wie bei .lead weiter oben. Stand bis zum 13.08.2026 fest
   auf --dunkel-leise (#a4aba8) – das ergab auf hellem Grund ein
   Kontrastverhaeltnis von 2,3:1 und war damit kaum lesbar. Aufgefallen beim
   Erweitern der FAQ; betroffen war ausserdem der Hinweis in
   wertermittlung.html. */
.hinweis-leise {
  font-size: .86rem;
  line-height: 1.6;
  color: var(--text-leise);
  margin-top: .8rem;
}
.sektion--dunkel .hinweis-leise { color: var(--dunkel-leise); }

/* --- 11. Ablauf ---------------------------------------------------------- */
.ablauf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.2rem);
  counter-reset: schritt;
}
.schritt {
  position: relative;
  counter-increment: schritt;
  padding-top: 4.2rem;
}
.schritt::before {
  content: counter(schritt, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rot-hell), var(--rot-dunkel));
  box-shadow: 0 0 0 5px rgba(227, 0, 27, .10), var(--schatten-rot);
  color: var(--weiss);
  font-size: .98rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.schritt::after {
  content: "";
  position: absolute;
  top: 26px;
  left: 68px;
  right: -1.5rem;
  height: 2px;
  background: repeating-linear-gradient(to right,
              rgba(139, 148, 144, .55) 0 5px, transparent 5px 12px);
}
.schritt:last-child::after { display: none; }
.schritt h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.schritt p { font-size: .95rem; line-height: 1.6; color: var(--text-leise); }

/* --- 12. Objekte -------------------------------------------------------- */
.objekte {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(2rem, 4.5vw, 3.5rem);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-l);
  overflow: hidden;
}
.objekte::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--rot), var(--rot-tief));
}
.objekte__hinweis {
  margin-top: 1.5rem;
  padding: 1.1rem 1.35rem;
  border-left: 3px solid var(--rot);
  background: var(--hell);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--text-leise);
}
.partner {
  margin-bottom: 1.4rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  background: linear-gradient(160deg, var(--sand), var(--hell));
}
.partner__logo {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
}
.partner__text {
  margin: 1rem 0 0;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--text-leise);
}
/* Der Verweis ins Quinzz-Maklerprofil, ergänzt am 20.08.2026. Bewusst kein
   Knopf: Er tritt neben „Suchauftrag aufgeben“ auf, und zwei gleich laute
   Knöpfe nebeneinander stellen die Frage, welcher der richtige ist. Der
   Suchauftrag ist der richtige – dieser Verweis ist das Angebot daneben. */
.partner__mehr {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--rot);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
/* Die Zeile ist 26 Bildpunkte hoch – am Telefon gemessen und für einen Finger
   zu wenig; als Richtwert gelten 44. Statt den Verweis auseinanderzuziehen und
   die Unterstreichung vom Text abzurücken, vergrößert eine unsichtbare Fläche
   den Bereich, der auf einen Fingertipp anspricht. Aussehen unverändert. */
.partner__mehr::after {
  content: "";
  position: absolute;
  inset: -9px -6px;
}
.partner__mehr:hover,
.partner__mehr:focus-visible { border-bottom-color: currentColor; }

/* --- 12a. Objektkacheln --------------------------------------------------
   Übernommen aus dem Gestaltungsentwurf entwurf-objekte.html am 18.08.2026,
   als der Objektimport fertig war. Den Entwurf gibt es seit dem 20.08.2026
   nicht mehr – er zeigte erfundene Objekte mit Preisen und lag versehentlich
   auf dem Server. Der Entwurf hatte die Werte bereits aus dieser Datei geholt;
   hier stehen sie jetzt an ihrem endgültigen Platz, nur in der ausführlichen
   Schreibweise dieser Datei statt der gedrängten des Entwurfs.

   Abschnitt 12 darüber gehört zum umgebenden Text des Objekte-Abschnitts
   (Netzwerkkasten, Hinweis). Beides steht nebeneinander: Die Kacheln zeigen,
   was online ist, der Text daneben, was es außerdem gibt.
   ------------------------------------------------------------------------- */
.objektraster {
  display: grid;
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.objekt {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
  transition: transform var(--tempo), box-shadow var(--tempo);
}
.objekt:hover { transform: translateY(-4px); box-shadow: var(--schatten-l); }
.objekt__bild {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--stein-hell);
  overflow: hidden;
}
.objekt__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.objekt:hover .objekt__bild img { transform: scale(1.04); }

.marker {
  position: absolute;
  top: .9rem;
  left: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.marker--neu { background: var(--rot); color: #fff; box-shadow: var(--schatten-rot); }
.marker--reserviert { background: rgba(23, 25, 26, .82); color: #fff; }
.marker--verkauft,
.marker--vermietet { background: rgba(23, 25, 26, .72); color: #fff; }

.objekt__inhalt {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
}
.objekt__ort {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rot);
  margin-bottom: .5rem;
}
.objekt__titel {
  font-size: 1.18rem;
  line-height: 1.3;
  margin: 0 0 .9rem;
  letter-spacing: -.01em;
}
.eckdaten {
  display: flex;
  gap: 1.4rem;
  padding: .9rem 0;
  margin-bottom: .9rem;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.eckdaten div { display: flex; flex-direction: column; }
.eckdaten dt {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.eckdaten dd { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--tinte); }

.preis {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.preis__zahl {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--tinte);
}
.preis__zusatz { font-size: .8rem; color: var(--text-leise); }

/* Pflichtangaben nach § 87 GEG. Neun Klassen, nicht sechs – das GEG kennt
   A+ bis H. Die Schriftfarbe ist gemessen: Weiß erreicht auf den hellen
   Bändern nur 1,65:1 (C) bis 3,83:1 (A), nötig sind 4,5:1 bei dieser Größe.
   Auf A bis E steht die Schrift deshalb dunkel, auf A+, F, G und H weiß. */
.energie {
  margin-top: 1rem;
  padding: .85rem 1rem;
  background: var(--hell);
  border-radius: var(--radius-s);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--text-leise);
}
.energie strong { color: var(--text); font-weight: 700; }
.energie__zeile { display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
.klasse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 .45rem;
  border-radius: var(--radius-xs);
  font-size: .82rem;
  font-weight: 800;
  color: #fff;
}
.klasse--ap { background: #00703c; }
.klasse--a  { background: #1a9641; }
.klasse--b  { background: #5fbb5a; }
.klasse--c  { background: #a6d96a; }
.klasse--d  { background: #fdae61; }
.klasse--e  { background: #f46d43; }
.klasse--f  { background: #d7191c; }
.klasse--g  { background: #a5111a; }
.klasse--h  { background: #6e0b10; }
.klasse--a, .klasse--b, .klasse--c, .klasse--d, .klasse--e { color: var(--tinte); }

.objekt__fuss { margin-top: 1.1rem; display: flex; gap: .6rem; }
.objekt__fuss .btn { flex: 1; justify-content: center; padding: .7rem 1rem; font-size: .88rem; }

/* Referenzen: schmaleres Raster, entsättigte Bilder, kein Anheben beim
   Überfahren, keine Schaltflächen. Sie belegen Vertrauen, ohne mit dem
   aktuellen Angebot um Aufmerksamkeit zu konkurrieren. */
.objektraster--referenz { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.objekt--referenz { box-shadow: var(--schatten-s); }
.objekt--referenz:hover { transform: none; box-shadow: var(--schatten); }
.objekt--referenz .objekt__bild { aspect-ratio: 3 / 2; }
.objekt--referenz .objekt__bild img { filter: saturate(.75); }
.objekt--referenz:hover .objekt__bild img { transform: none; }
.objekt--referenz .objekt__inhalt { padding: 1.2rem; }
.objekt--referenz .objekt__titel { font-size: 1.02rem; }
.objekt--referenz .eckdaten { border-bottom: none; padding-bottom: 0; margin-bottom: .6rem; }
.referenz__dauer { margin: 0; font-size: .85rem; color: var(--text-leise); }
.referenz__dauer strong { color: var(--tinte); }

/* Nur für den eigenständigen Abschnitt aus objekte_abschnitt(); die
   Startseite hat ihren eigenen Hinweiskasten (.objekte__hinweis). */
.hinweis {
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--rot);
  border-radius: var(--radius-s);
  box-shadow: var(--schatten-s);
}
.hinweis p { margin: 0; font-size: .95rem; color: var(--text-leise); }
.hinweis strong { color: var(--text); }

/* --- 12b. Detailseite eines Objekts --------------------------------------
   Gebaut am 19.08.2026 zu objekt.php. Sie nimmt die Bausteine der Kachel wieder
   auf – Preis, Eckdaten, Energiezeile –, damit Übersicht und Detailseite als
   dieselbe Seite erkennbar bleiben.

   Die Galerie kommt ohne Skript aus: ein großes Bild, darunter ein Raster aus
   Verweisen auf die Bilddateien. Kein Karussell, keine fremde Bibliothek.
   ------------------------------------------------------------------------- */
.detail {
  max-width: var(--breite-eng);
  margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.detail__kopf { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.detail__kopf .zurueck { margin-bottom: 1.25rem; display: inline-block; }
.detail__kopf .objekt__ort { margin-bottom: .35rem; }
.detail__kopf h1 {
  margin: 0;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  line-height: 1.25;
}

.galerie { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.galerie__gross {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
}
.galerie__gross img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.galerie__raster {
  margin-top: .75rem;
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.galerie__klein {
  display: block;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--stein-hell);
}
.galerie__klein img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--tempo);
}
.galerie__klein:hover img { transform: scale(1.05); }

/* Preis und Eckdaten stehen nebeneinander, nicht untereinander: Beides
   zusammen ist die Antwort auf "was kostet es und wie groß ist es". */
.detail__zahlen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--sand);
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
}
.detail__zahlen .preis { margin: 0; border: 0; padding: 0; }
.detail__zahlen .eckdaten { margin: 0; border: 0; padding: 0; gap: 1.5rem; }

.objekt__abschnitt { margin-top: clamp(2rem, 4vw, 3rem); }
.objekt__abschnitt h2 {
  margin: 0 0 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linie);
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
}
.objekt__abschnitt p { color: #4a4f4d; }
.objekt__liste { margin: 0 0 1rem; padding-left: 1.2rem; color: #4a4f4d; }
.objekt__liste li { margin-bottom: .35rem; }

.merkmale { margin: 0; display: grid; gap: .85rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.merkmale div { display: flex; flex-direction: column; }
.merkmale dt {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-leise);
}
.merkmale dd { margin: 0; font-weight: 700; color: var(--tinte); }

.grundrisse { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grundriss { margin: 0; }
.grundriss img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
}
.grundriss figcaption {
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--text-leise);
}

/* Der Energiekasten steht auf der Detailseite frei, nicht am Fuß einer
   Kachel – deshalb bekommt er hier den Rahmen, den die Kachel ihm gibt. */
.objekt__abschnitt .energie {
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--sand);
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
}

.objekt__kontakt .btn-reihe { margin-top: 1.25rem; }

.detail__fuss {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
}

/* Das Kachelbild führt zur Detailseite. */
.objekt__bildlink { display: block; height: 100%; }

/* --- Die Bildansicht ("Lupe") --------------------------------------------
   Sie wird vom Skript erzeugt und liegt über der ganzen Seite. Ohne Skript
   entsteht sie nie – dann öffnet der Verweis das Bild wie gewohnt im
   Browserfenster.
   ------------------------------------------------------------------------- */
.lupe-offen { overflow: hidden; }   /* Seite darunter nicht mitscrollen */

.lupe {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: clamp(.75rem, 3vw, 2rem);
  background: rgba(23, 25, 26, .93);
}
.lupe[hidden] { display: none; }

.lupe__rahmen {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.lupe__bild {
  max-width: 100%;
  /* Platz für die Bildunterschrift lassen, sonst schiebt sie das Bild
     auf schmalen Geräten aus dem Sichtfeld. */
  max-height: calc(100vh - 7rem);
  object-fit: contain;
  border-radius: var(--radius-s);
  background: var(--tinte);
}
.lupe__text {
  margin: 0;
  color: var(--dunkel-text);
  font-size: .9rem;
  text-align: center;
}
.lupe__text[hidden] { display: none; }

.lupe__knopf {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--weiss);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--tempo);
}
.lupe__knopf:hover { background: rgba(255, 255, 255, .25); }
.lupe__knopf[hidden] { display: none; }

/* Der Schließen-Knopf sitzt oben rechts, nicht in der Reihe mit den Pfeilen –
   dort sucht ihn niemand. */
.lupe__schliessen {
  position: absolute;
  top: clamp(.75rem, 3vw, 1.5rem);
  right: clamp(.75rem, 3vw, 1.5rem);
  font-size: 1.6rem;
}

/* Auf dem Handy nehmen die Pfeile neben dem Bild zu viel Breite weg. Sie
   wandern deshalb nach unten, statt zu verschwinden: Gewischt wird zwar
   ohnehin, aber niemand kann ahnen, dass es geht, wenn nichts darauf
   hindeutet. */
@media (max-width: 600px) {
  .lupe { flex-wrap: wrap; }
  .lupe__vor, .lupe__zurueck {
    position: absolute;
    bottom: clamp(.75rem, 3vw, 1.5rem);
    width: 52px;
    height: 52px;
  }
  .lupe__zurueck { left: clamp(.75rem, 6vw, 2rem); }
  .lupe__vor { right: clamp(.75rem, 6vw, 2rem); }
  .lupe__bild { max-height: calc(100vh - 10rem); }
}

/* --- 13. Bewertungs-CTA -------------------------------------------------- */
.cta {
  position: relative;
  padding-block: clamp(3.75rem, 7vw, 6rem);
  background:
    radial-gradient(ellipse 60% 100% at 15% 10%, rgba(255, 255, 255, .16) 0%, transparent 60%),
    linear-gradient(115deg, var(--rot) 0%, #c10018 55%, var(--rot-tief) 100%);
  color: var(--weiss);
  overflow: hidden;
}
/* Aufsteigende Linie als grafisches Zitat der Bildmarke */
.cta::before {
  content: "";
  position: absolute;
  left: -5%;
  bottom: 12%;
  width: 110%;
  height: 3px;
  background: rgba(255, 255, 255, .18);
  transform: rotate(-8deg);
}
.cta::after {
  content: "";
  position: absolute;
  right: -140px;
  top: -140px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
}
.cta .wrap { position: relative; z-index: 1; }
.cta h2 { color: var(--weiss); }
.cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}
.cta p { color: rgba(255, 255, 255, .92); font-size: 1.08rem; }

/* --- 14. Team ------------------------------------------------------------ */
.team {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.person {
  position: relative;
  display: flex;
  gap: 1.6rem;
  align-items: center;
  /* Begrenzt die Karte, damit sie bei nur einer Person nicht über die
     gesamte Seitenbreite läuft und die Zeilen lesbar lang bleiben. */
  max-width: 46rem;
  padding: 1.9rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
}
.person::before {
  content: "";
  position: absolute;
  left: -60px; top: -60px;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 0, 27, .07), transparent 70%);
  pointer-events: none;
}
.person > * { position: relative; }
.person__bild {
  flex: none;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--weiss);
  box-shadow: 0 0 0 2px var(--stein-hell), var(--schatten);
}
.person__name { margin: 0 0 .2rem; font-size: 1.28rem; }
.person__rolle {
  margin: 0 0 .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rot);
}
.person__text { font-size: .94rem; line-height: 1.6; color: var(--text-leise); }

.netzwerk {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.netzwerk li {
  margin: 0;
  padding: .5rem 1.1rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--weiss);
  box-shadow: var(--schatten-s);
  font-size: .88rem;
  color: var(--text-leise);
  transition: border-color var(--tempo), color var(--tempo), transform var(--tempo);
}
.netzwerk li:hover {
  border-color: rgba(227, 0, 27, .35);
  color: var(--anthrazit-90);
  transform: translateY(-2px);
}

/* --- 15. Kundenstimmen --------------------------------------------------- */
/* Mehrspaltiger Satz statt Raster: Bewertungen sind unterschiedlich lang, und
   in einem Raster zwingt die längste Karte allen anderen ihre Höhe auf. Im
   Spaltensatz behält jede Karte ihre natürliche Höhe, der Browser gleicht die
   Spaltenlängen selbst aus. Eine einzelne Stimme bleibt zentriert. */
.stimmen-wand {
  max-width: 62rem;
  margin-inline: auto;
  column-gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (min-width: 760px) {
  .stimmen-wand { column-count: 2; }
}
.stimmen-wand .stimme {
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

/* Bewertungsmerkmale, wie sie die Bewertenden selbst vergeben haben */
.stimme__aspekte {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
}
.stimme__aspekte li {
  margin: 0;
  padding: .25rem .7rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--hell);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-leise);
}

.stimme__sterne {
  display: flex;
  gap: .18rem;
  margin-bottom: 1rem;
  color: #f5a623;
}
.stimme__sterne .stern { width: 19px; height: 19px; }

.stimmen-herkunft {
  max-width: 46rem;
  margin: 2rem auto 0;
  text-align: center;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-leise);
}

.stimme {
  position: relative;
  margin: 0;
  padding: 1.9rem 2rem 2rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
  transition: transform var(--tempo), box-shadow var(--tempo);
}
.stimme:hover { transform: translateY(-4px); box-shadow: var(--schatten-l); }
/* Anführungszeichen als Wasserzeichen oben rechts – links sitzen die Sterne.
   z-index 0 hier und 1 auf dem Inhalt sorgt dafür, dass das Zeichen hinter
   dem Text liegt und die Buchstaben nicht anschmutzt. */
.stimme::before {
  content: "\201E";
  position: absolute;
  z-index: 0;
  top: .2rem;
  right: 1.5rem;
  font-size: 4.6rem;
  line-height: 1;
  font-weight: 700;
  color: rgba(227, 0, 27, .13);
  pointer-events: none;
}
.stimme > * { position: relative; z-index: 1; }

.stimme blockquote {
  margin: 0 0 1.3rem;
  font-size: 1.02rem;
  line-height: 1.65;
}
/* Karten ohne Sternezeile: Der Text beginnt sonst direkt neben dem
   Wasserzeichen – hier etwas Luft schaffen. */
.stimme > blockquote:first-child { padding-top: 1.5rem; }
.stimme figcaption {
  padding-top: 1.1rem;
  border-top: 1px solid var(--linie);
  font-size: .88rem;
  color: var(--text-leise);
}
.stimme figcaption strong { display: block; color: var(--anthrazit-90); }

/* Quellenlink auf die Originalbewertung – belegt die Echtheit unmittelbar.
   Reiner Textlink: Es wird nichts von Google nachgeladen, solange niemand
   klickt. Die Consent-Banner-Freiheit der Seite bleibt damit erhalten. */
.stimme__quelle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--text-leise);
  text-decoration: none;
  border-bottom: 1px solid var(--stein-hell);
  transition: color var(--tempo), border-color var(--tempo);
}
.stimme__quelle svg { width: 11px; height: 11px; flex: none; }
.stimme__quelle:hover {
  color: var(--rot);
  border-bottom-color: var(--rot);
}

.redaktionshinweis {
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--stein);
  border-radius: var(--radius-s);
  background: var(--weiss);
  font-size: .88rem;
  color: var(--text-leise);
}

/* --- 16. FAQ ------------------------------------------------------------- */
.faq { max-width: var(--breite-eng); margin-inline: auto; }
.faq details {
  margin-bottom: .85rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  box-shadow: var(--schatten-s);
  overflow: hidden;
  transition: border-color var(--tempo), box-shadow var(--tempo);
}
.faq details[open] {
  border-color: rgba(227, 0, 27, .3);
  box-shadow: var(--schatten);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-weight: 650;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
  color: var(--anthrazit-90);
  transition: color var(--tempo);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    linear-gradient(var(--rot), var(--rot)) center / 11px 2px no-repeat,
    linear-gradient(var(--rot), var(--rot)) center / 2px 11px no-repeat,
    rgba(227, 0, 27, .09);
  transition: transform var(--tempo), background-color var(--tempo);
}
.faq details[open] summary::after {
  transform: rotate(135deg);
  background:
    linear-gradient(#fff, #fff) center / 11px 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 11px no-repeat,
    var(--rot);
}
.faq summary:hover { color: var(--rot); }
.faq__antwort {
  padding: 0 1.5rem 1.5rem;
  font-size: .97rem;
  line-height: 1.7;
  color: var(--text-leise);
}
.faq__antwort ul { padding-left: 1.2em; }

/* --- 17. Kontakt --------------------------------------------------------- */
.kontakt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.kontakt-liste { margin: 0 0 1.75rem; padding: 0; list-style: none; }
.kontakt-liste li {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-bottom: 1.35rem;
}
.kontakt-liste svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: .55rem;
  color: var(--rot);
}
.kontakt-liste .label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: .1rem;
}
.kontakt-liste a, .kontakt-liste .wert {
  font-size: 1.06rem;
  font-weight: 650;
  line-height: 1.45;
  color: var(--anthrazit-90);
  text-decoration: none;
  transition: color var(--tempo);
}
.kontakt-liste a:hover { color: var(--rot); }

.karte-link {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--linie);
  box-shadow: var(--schatten);
  text-decoration: none;
  transition: box-shadow var(--tempo), transform var(--tempo);
}
.karte-link:hover { transform: translateY(-3px); box-shadow: var(--schatten-l); }
.karte-link svg { display: block; width: 100%; height: auto; }
.karte-link__hinweis {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .8rem 1.1rem;
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border-top: 1px solid var(--linie);
  font-size: .85rem;
  font-weight: 650;
  color: var(--anthrazit-90);
  transition: color var(--tempo);
}
.karte-link:hover .karte-link__hinweis { color: var(--rot); }

/* Formular */
.formular {
  position: relative;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-l);
  overflow: hidden;
}
.formular::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(to right, var(--rot), var(--rot-hell) 60%, rgba(227, 0, 27, .25));
}
.formular h3 { margin-bottom: 1.4rem; }

.feld { margin-bottom: 1.15rem; }
.feld-paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.15rem;
}

/* Das Eckdaten-Raster im Wertermittlungs-Assistenten hält je nach Objektart
   bis zu fünf Felder statt zwei. Zwei Unterschiede zum normalen Feldpaar:

   1. minmax(240px) statt 190px. Bei 190px passten in die 670 px breite Spalte
      drei Felder – aus dem gewohnten Zweiersatz („Wohnfläche | Grundstück“,
      „Zimmer | Baujahr“) wurde 3 + 1, mit dem Baujahr allein in der zweiten
      Zeile. Mit 240px bleiben es zwei Spalten wie überall sonst im Formular.
   2. Der Abstand nach unten sitzt am Raster, nicht an den Feldern. Sonst
      addierten sich bei mehr als einer Zeile Rasterlücke und Feldabstand zu
      37px, während zwischen allen anderen Feldern 18px stehen. */
.feld-paar--eckdaten {
  /* min(240px, 100%) statt schlicht 240px: Auf einem 320px schmalen Gerät ist
     die Spalte nur noch rund 230px breit – ein starres Mindestmaß liefe dann
     seitlich aus dem Formular heraus. */
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  margin-bottom: 1.15rem;
}
.feld-paar--eckdaten > .feld { margin-bottom: 0; }
.feld label {
  display: block;
  margin-bottom: .45rem;
  font-size: .86rem;
  font-weight: 650;
  color: var(--anthrazit-90);
}
.feld .pflicht { color: var(--rot); }

.feld input, .feld select, .feld textarea {
  width: 100%;
  padding: .85rem 1.05rem;
  border: 1px solid var(--stein-hell);
  border-radius: var(--radius-s);
  background: var(--sand);
  font: inherit;
  font-size: .97rem;
  color: var(--text);
  transition: border-color var(--tempo), box-shadow var(--tempo), background var(--tempo);
}
.feld select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--rot) 50%),
    linear-gradient(135deg, var(--rot) 50%, transparent 50%);
  background-position: right 1.15rem center, right .85rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  background-color: var(--sand);
}
.feld textarea { min-height: 138px; resize: vertical; line-height: 1.6; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--stein); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none;
  background: var(--weiss);
  border-color: var(--rot);
  box-shadow: 0 0 0 3px rgba(227, 0, 27, .13);
}
.feld input:user-invalid, .feld textarea:user-invalid { border-color: var(--rot); }

.feld--check {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  background: var(--hell);
  border-radius: var(--radius-s);
}
.feld--check input {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: .2rem;
  accent-color: var(--rot);
}
.feld--check label {
  margin: 0;
  font-size: .86rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-leise);
}

.honigtopf {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.formular__fuss {
  margin-top: 1.25rem;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--text-leise);
}
.formular__status {
  margin-top: 1rem;
  padding: .95rem 1.15rem;
  border-radius: var(--radius-s);
  background: var(--hell);
  border-left: 3px solid var(--rot);
  font-size: .9rem;
  line-height: 1.6;
}
.formular__status[hidden] { display: none; }

/* Rückmeldung nach dem Absenden. Ohne Zustandsklasse (also während des
   Sendens) bleibt es beim neutralen roten Markenstrich von oben.
   Die Farbe ist nie der einzige Träger der Aussage – der Text sagt in beiden
   Fällen klar, was passiert ist. Das ist Bedingung für Barrierefreiheit und
   hilft zugleich allen, die Rot und Grün schlecht unterscheiden. */
.formular__status.ist-erfolg {
  border-left-color: #2e7d4f;
  background: #eef6f1;
  color: #1d5636;
}
.formular__status.ist-fehler {
  border-left-color: var(--rot);
  background: #fdeeef;
  color: #8c1220;
}

/* Vom Server beanstandete Felder. :user-invalid oben deckt nur ab, was der
   Browser selbst prüfen kann; aria-invalid setzt script.js nach der Antwort
   von kontakt.php und meldet es zugleich an Screenreader. */
.feld [aria-invalid="true"] {
  border-color: var(--rot);
  background: #fdeeef;
}

/* --- 17a. Wertermittlungs-Assistent --------------------------------------
   Gehört zu wertermittlung.html und baut auf den Formularregeln oben auf –
   deshalb steht der Block hier und nicht am Dateiende. Neu ist allein die
   Schrittsteuerung und die Kachelauswahl; Felder, Knöpfe und Rückmeldungen
   kommen unverändert vom Kontaktformular.

   WICHTIG ZU [hidden]: Der Browser blendet damit normalerweise selbst aus.
   Sobald hier aber eine eigene display-Regel gilt – .btn ist inline-flex,
   ein fieldset ist block –, schlägt die die eingebaute Regel. Ohne die
   ausdrücklichen [hidden]-Zeilen weiter unten stünden alle fünf Schritte
   und alle drei Knöpfe gleichzeitig da.
   ------------------------------------------------------------------------- */
.assistent-halter {
  max-width: 760px;
  margin-inline: auto;
}
/* Auf den Rechtstext-Seiten steht der Zurück-Link allein in einer Zeile, hier
   folgt ihm die Rubrik „Wertermittlung“. Als inline-flex stellten sich beide
   nebeneinander und wirkten wie eine einzige, zerrissene Zeile – deshalb hier
   umgestellt auf eine eigene Zeile in Inhaltsbreite. */
.sektion-kopf .zurueck {
  display: flex;
  width: fit-content;
  margin-bottom: 1.2rem;
}

/* Fortschrittsanzeige */
.assistent__fortschritt {
  display: flex;
  gap: .25rem;
  margin: 0 0 2.2rem;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}
.assistent__fortschritt[hidden] { display: none; }

.assistent__fortschritt li {
  position: relative;
  flex: 1;
  padding-top: 2.4rem;
  text-align: center;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--stein);
  counter-increment: schritt;
}
/* Verbindungslinie zum vorigen Punkt. Sitzt auf halber Höhe der Zahlenkreise. */
.assistent__fortschritt li::before {
  content: "";
  position: absolute;
  top: .82rem;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--stein-hell);
}
.assistent__fortschritt li:first-child::before { display: none; }

.assistent__fortschritt li::after {
  content: counter(schritt);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 2px solid var(--stein-hell);
  border-radius: 50%;
  background: var(--weiss);
  font-size: .78rem;
  font-weight: 700;
  color: var(--stein);
  transition: background var(--tempo), border-color var(--tempo), color var(--tempo);
}

.assistent__fortschritt .ist-fertig { color: var(--text-leise); }
.assistent__fortschritt .ist-fertig::after {
  content: "\2713";
  background: var(--rot);
  border-color: var(--rot);
  color: var(--weiss);
}
.assistent__fortschritt .ist-fertig::before,
.assistent__fortschritt .ist-aktiv::before { background: var(--rot); }

.assistent__fortschritt .ist-aktiv { color: var(--rot-dunkel); }
.assistent__fortschritt .ist-aktiv::after {
  border-color: var(--rot);
  color: var(--rot);
  box-shadow: 0 0 0 4px rgba(227, 0, 27, .12);
}

/* Ein Schritt */
.schritt-block {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
  /* Ohne min-width richtet sich ein fieldset nach seinem breitesten Inhalt
     und sprengt auf schmalen Displays das Raster. */
  min-width: 0;
}
.schritt-block[hidden] { display: none; }

.schritt-block legend {
  display: block;
  width: 100%;
  margin-bottom: .55rem;
  padding: 0;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--tinte);
}
.schritt-block__zahl {
  display: block;
  margin-bottom: .4rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rot);
}
.schritt-block__hilfe {
  margin: 0 0 1.4rem;
  font-size: .89rem;
  line-height: 1.65;
  color: var(--text-leise);
}

/* Beschriftung über einer Auswahlgruppe. Kein <label>, weil ein label immer
   genau ein Feld benennt – hier sind es mehrere. Die Zuordnung übernimmt
   aria-labelledby im Quelltext. */
.feld__gruppenlabel {
  display: block;
  margin-bottom: .55rem;
  font-size: .86rem;
  font-weight: 650;
  color: var(--anthrazit-90);
}

/* Kachelauswahl statt Radioknöpfen */
/* 120 px als kleinste Spaltenbreite ist gemessen, nicht geschätzt: Auf einem
   375 px breiten Display bleiben im Formular rund 277 px übrig. Bei 140 px
   passte nur eine Kachel je Zeile, und vier gestapelte Kacheln schoben den
   „Weiter“-Knopf aus dem Bild. Mit 120 px stehen dort zwei nebeneinander. */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .8rem;
}
.kacheln--schmal { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

.kachel {
  position: relative;
  display: block;
  cursor: pointer;
}
/* Der Radioknopf bleibt im Dokument stehen – nur unsichtbar. Entfernt man ihn
   mit display:none, ist er für die Tastatur nicht mehr erreichbar und
   Screenreader lesen die Auswahl nicht mehr vor. */
.kachel input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.kachel__inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  height: 100%;
  padding: 1.15rem .85rem;
  border: 1px solid var(--stein-hell);
  border-radius: var(--radius-s);
  background: var(--sand);
  text-align: center;
  transition: border-color var(--tempo), background var(--tempo),
              box-shadow var(--tempo), transform var(--tempo);
}
.kacheln--schmal .kachel__inhalt { padding: .9rem .8rem; }

.kachel__inhalt svg { width: 30px; height: 30px; color: var(--stein); transition: color var(--tempo); }
.kachel__titel {
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--anthrazit-90);
}

.kachel:hover .kachel__inhalt {
  border-color: var(--stein);
  background: var(--weiss);
  transform: translateY(-2px);
}
.kachel input:checked + .kachel__inhalt {
  border-color: var(--rot);
  background: var(--weiss);
  box-shadow: 0 0 0 3px rgba(227, 0, 27, .13);
}
.kachel input:checked + .kachel__inhalt svg { color: var(--rot); }
/* Sichtbarer Fokus, obwohl das Feld selbst unsichtbar ist – sonst wüsste
   niemand, wo er sich beim Blättern mit der Tastatur gerade befindet. */
.kachel input:focus-visible + .kachel__inhalt {
  outline: 2px solid var(--rot);
  outline-offset: 2px;
}

/* Knopfleiste. Legt wertermittlung.js an; ohne Skript gibt es sie nicht. */
.assistent__leiste {
  display: flex;
  gap: .8rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
}
.assistent__leiste .btn { flex: 1; }
.assistent__leiste .btn[hidden] { display: none; }

/* Bestätigung, die nach erfolgreichem Absenden an die Stelle des Formulars
   tritt. Grüner Rand statt rotem – dieselbe Logik wie bei .ist-erfolg: Die
   Farbe unterstützt die Aussage, trägt sie aber nicht allein. */
.assistent__fertig {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid var(--linie);
  border-top: 4px solid #2e7d4f;
  border-radius: var(--radius);
  background: var(--weiss);
  box-shadow: var(--schatten-l);
  outline: none;
}
.assistent__fertig h2 {
  margin-bottom: .8rem;
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
}
.assistent__fertig p {
  line-height: 1.7;
  color: var(--text-leise);
}
.assistent__fertig p + p { margin-top: .9rem; }

/* Auf schmalen Displays passen fünf Beschriftungen nicht nebeneinander.
   Die Zahlenkreise bleiben, der Text verschwindet nur optisch – im
   Quelltext steht er weiter und wird vorgelesen. */
@media (max-width: 560px) {
  .assistent__fortschritt li { padding-top: 2rem; font-size: 0; }
  .assistent__fortschritt li::after { font-size: .78rem; }
}

/* --- 18. Footer ---------------------------------------------------------- */
.footer {
  position: relative;
  padding-block: clamp(3.5rem, 5vw, 4.5rem) 2rem;
  background: var(--tinte);
  color: var(--dunkel-leise);
  font-size: .93rem;
  overflow: hidden;
}
/* Aufsteigende Linie am oberen Rand */
.footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(to right, var(--rot) 0%, var(--rot-hell) 22%, rgba(227, 0, 27, .18) 55%, transparent 85%);
}
.footer .wrap { position: relative; z-index: 1; }

.footer__oben {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2.5rem;
  padding-bottom: 2.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer h3 {
  margin-bottom: 1.1rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--weiss);
}
.footer__logo {
  height: 60px;
  width: auto;
  margin-bottom: 1.2rem;
  filter: brightness(0) invert(1);
  opacity: .95;
}
.footer__claim {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stein);
}
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer li { margin-bottom: .6rem; line-height: 1.5; }
.footer a { color: var(--dunkel-text); text-decoration: none; transition: color var(--tempo); }
.footer a:hover { color: var(--weiss); text-decoration: underline; text-underline-offset: 4px; }

.footer__unten {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.75rem;
  font-size: .86rem;
  color: var(--stein);
}
.footer__rechtslinks {
  display: flex;
  flex-wrap: wrap;
  gap: 1.35rem;
}

.sozial {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: .4rem;
  padding: .55rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--tempo), border-color var(--tempo);
}
.sozial:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); text-decoration: none; }
.sozial svg { width: 17px; height: 17px; }

/* --- 19. Zurück-nach-oben ----------------------------------------------- */
.nach-oben {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: var(--weiss);
  color: var(--rot);
  box-shadow: var(--schatten-l);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--tempo), transform var(--tempo),
              visibility var(--tempo), background var(--tempo), color var(--tempo);
}
.nach-oben.ist-sichtbar { opacity: 1; visibility: visible; transform: none; }
.nach-oben:hover { background: var(--rot); color: var(--weiss); border-color: var(--rot); }
.nach-oben svg { width: 20px; height: 20px; }

/* --- 20. Rechtstext-Seiten ---------------------------------------------- */
.rechtstext {
  max-width: var(--breite-eng);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.rechtstext h1 { font-size: clamp(1.95rem, 1.4rem + 2vw, 2.9rem); }
.rechtstext h2 {
  margin-top: 2.75rem;
  padding-top: 1.85rem;
  border-top: 1px solid var(--linie);
  font-size: clamp(1.28rem, 1.1rem + .7vw, 1.6rem);
}
.rechtstext h3 { margin-top: 1.9rem; font-size: 1.08rem; }
.rechtstext p, .rechtstext li { color: #4a4f4d; }

.datenblock {
  margin: 0 0 1.5rem;
  padding: 1.6rem 1.8rem;
  background: var(--hell);
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
}
.datenblock dt {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.datenblock dd {
  margin: .2rem 0 1.1rem;
  font-size: 1rem;
  color: var(--anthrazit-90);
}
.datenblock dd:last-child { margin-bottom: 0; }

.pruefen {
  display: block;
  margin: .35rem 0;
  padding: .8rem 1.05rem;
  border-left: 3px solid var(--rot);
  background: rgba(227, 0, 27, .055);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--rot-dunkel);
}
.pruefen strong { color: var(--rot-dunkel); }

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 2rem;
  font-weight: 650;
  text-decoration: none;
}
.zurueck:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- 21. Scroll-Reveal --------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.22, 1, .36, 1);
}
.reveal.sichtbar { opacity: 1; transform: none; }

/* --- 22. Breakpoints ----------------------------------------------------- */
@media (min-width: 760px) {
  .gutachten  { grid-template-columns: 1fr 1.05fr; }
  .kontakt    { grid-template-columns: .85fr 1.15fr; }
  .objekte    { grid-template-columns: 1.15fr .85fr; }
  .cta__inner { grid-template-columns: 1.35fr auto; gap: 3rem; }
}

@media (max-width: 900px) {
  .burger { display: block; }
  .kopf-tel { display: inline-flex; }

  /* Der Kopf trägt jetzt Logo + Anruf + Burger nebeneinander. Damit auf sehr
     schmalen Geräten nichts überläuft, darf die Marke als Letztes schrumpfen. */
  .header__inner { gap: 1rem; }
  .marke { min-width: 0; }
  .marke img { max-width: 100%; object-fit: contain; object-position: left center; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    display: block;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: 1.5rem 1.25rem 2rem;
    background: var(--weiss);
    border-bottom: 1px solid var(--linie);
    box-shadow: 0 18px 40px rgba(23, 25, 26, .16);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tempo), transform var(--tempo), visibility var(--tempo);
  }
  .nav.ist-offen { opacity: 1; visibility: visible; transform: none; }

  .nav__liste { display: block; }
  .nav__liste li { border-bottom: 1px solid var(--linie); }
  .nav__link { display: block; padding: 1rem .25rem; font-size: 1.05rem; }
  .nav__link::after { display: none; }
  .nav__tel { display: flex; justify-content: center; margin-top: 1.35rem; }

  .schritt::after { display: none; }
  .schritt { padding-top: 3.8rem; }
  .marke img, .header.ist-gescrollt .marke img { height: 40px; }

  .hero__deko { right: -18%; bottom: 8%; width: 85%; opacity: .75; }

  /* Rechtstext-Seiten haben keinen Burger-Button: dort bleibt die kurze
     Navigation immer sichtbar statt in das mobile Panel zu wandern. */
  .header--schlicht .nav {
    position: static;
    display: flex;
    max-height: none;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    overflow: visible;
  }
  .header--schlicht .nav__liste { display: flex; gap: 1.1rem; }
  .header--schlicht .nav__liste li { border-bottom: 0; }
  .header--schlicht .nav__link { display: inline; padding: .35rem 0; font-size: .92rem; }
  .header--schlicht .nav__link::after { display: block; }
  .header--schlicht .nav__tel { display: none; }
}

/* Vier Kacheln würden bei mittleren Breiten sonst als 3 + 1 umbrechen und eine
   einzelne Kachel allein in die zweite Reihe stellen. Erzwungenes 2 × 2. */
@media (min-width: 621px) and (max-width: 1000px) {
  .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .fakten-halter { margin-top: clamp(-5rem, -12vw, -3rem); }
  .fakten { grid-template-columns: minmax(0, 1fr); }
}

/* Ab hier reicht die Kopfbreite nicht mehr für Logo, ausgeschriebene Nummer
   und Burger. Der Knopf wird auf den Hörer reduziert – 48 x 48 px, also
   weiterhin eine bequem treffbare Fläche. */
@media (max-width: 560px) {
  .kopf-tel { padding-inline: 0; width: 48px; justify-content: center; }
  .kopf-tel__nr { display: none; }

  /* Rechtstext-Seiten: Dort teilen sich Wortmarke, Anruf-Knopf und zwei
     Navigationspunkte eine sehr schmale Zeile; die Marke würde sonst auf
     unleserliche Größe zusammenfallen. Der Punkt „Startseite" entfällt hier –
     das Logo führt ohnehin dorthin und im Text steht zusätzlich der Link
     „Zurück zur Startseite". Übrig bleibt der Verweis auf die jeweils
     andere Rechtstext-Seite, der sonst nirgends erreichbar wäre. */
  .header--schlicht .nav__liste li:first-child { display: none; }
  .header--schlicht .nav__liste { gap: .8rem; }
  .header--schlicht .nav__link { font-size: .86rem; }
}

@media (max-width: 480px) {
  .header__inner { gap: .7rem; }
  .marke img, .header.ist-gescrollt .marke img { height: 34px; }

  .person { flex-direction: column; text-align: center; align-items: center; }
  .btn { width: 100%; }
  .btn-reihe { flex-direction: column; align-items: stretch; }
  .footer__unten { flex-direction: column; align-items: flex-start; }
  .hero__deko { display: none; }
  .stimme::before { font-size: 4rem; }
  /* Enge Displays: Sperrung zurücknehmen, damit der Name einzeilig bleibt */
  .hero__marke { letter-spacing: .12em; gap: .65rem; }
}

/* --- 23. Bewegungsreduktion & Druck ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn:hover, .karte:hover, .stimme:hover, .karte-link:hover,
  .netzwerk li:hover, .verfahren__item:hover { transform: none; }
}

@media print {
  .header, .burger, .cta, .hero__bg, .hero__schleier, .hero__deko,
  .formular, .karte-link, .nach-oben { display: none !important; }
  body { color: #000; font-size: 11pt; background: #fff; }
  .hero { min-height: auto; padding-block: 1.5rem; background: none; color: #000; }
  .hero h1, .hero__text, .hero h1 .akzent { color: #000; background: none; }
  .hero__marke { color: #000; text-shadow: none; }
  .hero__marker, .hero__belege { display: none; }
  .fakten-halter { margin-top: 0; }
  .fakten { box-shadow: none; border: 1px solid #999; }
  .sektion { padding-block: 1.5rem; break-inside: avoid; }
  .sektion--dunkel { background: none; color: #000; }
  .sektion--dunkel h2, .sektion--dunkel h3 { color: #000; }
  .sektion--dunkel::before, .sektion--raster::before { display: none; }
  .karte, .person, .stimme, .objekte, .verfahren__item {
    box-shadow: none; border: 1px solid #999; break-inside: avoid;
  }
  .footer { background: none; color: #000; }
  .footer__logo { filter: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .reveal { opacity: 1; transform: none; }
}