/* ==========================================================================
   IMMOTEUFEL – Website 2.0 · Prototyp Startseite (Phase 1)
   Eigenständige Umsetzung nach den Layout-PDFs vom 09.08.2026.
   Farbwelt laut Vorgabe: Schwarz, Weiß, Rot. KEIN Gold
   (goldgelb ausschließlich für die Google-Bewertungssterne).
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-standard-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben */
  --rot:        #e1001a;
  --rot-tief:   #b80015;
  --rot-hell:   #ff2d44;
  /* ⚠️ Nur für KLEINE rote Schrift auf hellem Grund. Das reine Markenrot
     erreicht auf der grauen Abschnittsfläche nur 4,15:1 – gefordert sind
     4,5:1 (WCAG AA). Dieser Ton liegt bei 4,89:1 auf Grau und 5,87:1 auf
     Weiß und ist vom Markenrot kaum zu unterscheiden. Flächen, Knöpfe,
     Linien und das Logo behalten --rot. */
  --rot-schrift: #cc0018;

  --schwarz:    #121214;   /* dunkle Sektionen */
  --schwarz-2:  #1c1c20;   /* dunkle Karten */
  --schwarz-3:  #2a2a30;   /* Linien auf dunkel */

  --weiss:      #ffffff;
  --papier:     #f7f6f4;   /* helle Karten auf weißem Grund */
  --papier-2:   #efeeea;   /* vertiefte Fläche */
  /* ⚠️ Erik, 13.08. (Mail R, Punkt 12): „Hintergründe konsequenter wechseln
     (hell → schwarz → hell/grau → schwarz)". Am 14.08. nachgemessen: Weiß
     (#ffffff) und die bisherige graue Abschnittsfläche (#f7f6f4) lagen nur
     9,3 Stufen auseinander – 19 von 58 Nahtstellen waren dadurch mit bloßem
     Auge NICHT zu sehen. Die Abschnittsfläche ist deshalb ein eigener,
     kräftigerer Ton (22 Stufen Abstand). Die Karten behalten ihr helles
     Papier – sonst verschwänden sie auf der grauen Fläche. */
  --flaeche-grau: #edeae4;  /* graue Abschnittsfläche */

  --text:       #17171a;
  --text-2:     #5b5b63;
  --text-inv:   #f4f4f2;
  --text-inv-2: #a9a9b0;
  --linie:      #e3e1dd;

  --stern:      #f5b301;   /* NUR Google-Bewertungssterne */

  /* Typo & Maße */
  --font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --breite: 1280px;
  --pad-x: clamp(1.25rem, 4vw, 3rem);
  --sec-y: clamp(4rem, 8vw, 7.5rem);
  --radius: 14px;
  --radius-s: 10px;

  /* Bewegung: kurz und hochwertig (Vorgabe 150–250 ms, ease-out) */
  --t-schnell: 150ms;
  --t-normal:  200ms;
  --t-ruhig:   250ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Für die Scroll-Einblendungen: startet sanfter und läuft weiter aus als --ease,
     damit die längeren Wege (Erik, 13.08.) nicht gehetzt wirken. */
  --ease-weich: cubic-bezier(0.16, 1, 0.3, 1);

  --header-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* ⚠️ Hier lag ein Fehler: `overflow-x: hidden` macht den Body zum Scroll-Container –
     der Browser setzt die andere Achse dann stillschweigend auf `auto`. Damit hört die
     Kopfzeile auf zu kleben: sie bleibt kurz stehen und scrollt dann weg.
     `clip` schneidet genauso ab, erzeugt aber KEINEN Scroll-Container. */
  overflow-x: hidden;            /* Rückfall für sehr alte Browser */
}
@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* Sichtbarer Fokus für Tastaturbedienung */
:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 3px;
  border-radius: 4px;
}
.dunkel :focus-visible { outline-color: #fff; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 300;
  background: var(--rot); color: #fff; padding: .8rem 1.2rem;
  border-radius: 0 0 var(--radius-s) var(--radius-s); font-weight: 700;
  transition: top var(--t-normal) var(--ease);
}
.skip-link:focus { top: 0; }

/* ---------- Grundbausteine ---------- */
.wrap { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--pad-x); }

.sec { padding-block: var(--sec-y); }
.sec--papier { background: var(--flaeche-grau); }
.sec--weiss  { background: var(--weiss); }
.dunkel { background: var(--schwarz); color: var(--text-inv); }
.dunkel .lead, .dunkel p { color: var(--text-inv-2); }

/* Auf dunklem Grund ist das kräftige Rot zu dunkel (gemessen 3,76:1). Dort deshalb
   das hellere Rot – damit liegt der Kicker über dem Grenzwert. */
.dunkel .kicker, .sec--referenzen .kicker, .hero .kicker { color: var(--rot-hell); }
.kicker {
  display: block;
  font-size: .75rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rot-schrift); margin-bottom: .9rem;
}

h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; line-height: 1.08; color: inherit; }
h2 { font-size: clamp(1.9rem, 4vw, 3.15rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.25; letter-spacing: -.01em; }

.lead {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  color: var(--text-2);
  max-width: 62ch;
  margin-top: 1.1rem;
}

.sec-kopf { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-size: .95rem; font-weight: 700; letter-spacing: .005em;
  padding: 1rem 1.7rem; border-radius: 999px;
  transition: background var(--t-normal) var(--ease),
              color var(--t-normal) var(--ease),
              border-color var(--t-normal) var(--ease),
              transform var(--t-normal) var(--ease),
              box-shadow var(--t-normal) var(--ease);
  will-change: transform;
}
.btn .pfeil { transition: transform var(--t-normal) var(--ease); }
.btn:hover .pfeil { transform: translateX(4px); }

.btn--rot { background: var(--rot); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.btn--rot:hover { background: var(--rot-tief); transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(225,0,26,.55); }
.btn--rot:active { transform: translateY(0); }

.btn--linie { border: 1.5px solid var(--text); color: var(--text); }
.btn--linie:hover { background: var(--text); color: #fff; transform: translateY(-2px); }

.btn--linie-hell { border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
.btn--linie-hell:hover { background: #fff; color: var(--text); border-color: #fff; transform: translateY(-2px); }

.btn--weiss { background: #fff; color: var(--text); }
.btn--weiss:hover { background: var(--papier-2); transform: translateY(-2px); }

.btn--klein { padding: .72rem 1.25rem; font-size: .875rem; }

.txtlink {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: .95rem; color: var(--rot);
  transition: gap var(--t-normal) var(--ease), color var(--t-normal) var(--ease);
  /* Klickfläche auf 44 px bringen, ohne die Optik zu verändern */
  padding-block: .625rem; margin-block: -.625rem;
}
.txtlink .pfeil { transition: transform var(--t-normal) var(--ease); }
.txtlink:hover { color: var(--rot-tief); }
.txtlink:hover .pfeil { transform: translateX(5px); }
.dunkel .txtlink { color: var(--rot-hell); }

/* ==========================================================================
   Kopfzeile
   ========================================================================== */
.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--t-ruhig) var(--ease), border-color var(--t-ruhig) var(--ease);
}
.kopf.ist-gescrollt { box-shadow: 0 1px 24px -8px rgba(0,0,0,.22); border-bottom-color: var(--linie); }

/* ⚠️ Drei Spalten, keine Reihe. Die Außenspalten teilen sich den freien Platz
   zu gleichen Teilen (1fr each), dadurch sitzt die Mittelspalte – das Menü –
   in der ECHTEN Mitte der Leiste. Egal wie breit der Knopf rechts gerade ist:
   Er heißt je Seite anders und ist zwischen 127 und 205 px breit (gemessen).
   Mit einer Reihe (flex) schieben sich alle Breiten gegenseitig; genau daran
   sind zwei frühere Versuche gescheitert. Peter am 19.08.2026. */
.kopf-inner {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 1.5rem;
  min-height: var(--header-h);
}
.kopf-inner > .marke       { justify-self: start; }
.kopf-inner > .nav         { justify-self: center; }
.kopf-inner > .kopf-rechts { justify-self: end; display: flex; align-items: center; gap: 1.5rem; }
.marke { display: flex; align-items: center; flex: 0 0 auto; }
/* ⚠️ Erik, 14.08.2026: „Entferne auf der ganzen Seite immer unseren Slogan
   Immobilien clever verkaufen. Es soll nur Immoteufel dastehen."
   Der Slogan steckt IN der Logo-Grafik. Die Grafik wird NICHT verändert –
   beim Übergabeprotokoll haben zwei Versuche, die SVG-Zeichenfläche zu
   beschneiden, Buchstaben und die Flamme mit abgeschnitten. Stattdessen wird
   nur der sichtbare Ausschnitt begrenzt: die Wortmarke sind die oberen 53,85
   von 83,05 Einheiten. Höhe = Breite / (358,12 / 53,85) = Breite × 0,15036.  */
.marke img {
  width: 168px; height: 25.3px;          /* 168 × 0,15036 */
  object-fit: cover; object-position: top center;
}

/* ⚠️ KEIN margin-left:auto am Menü. Sonst wird es nach rechts gedrückt und
   seine Position hängt an der Breite des Knopfes, der je Seite anders heißt
   (205 / 189 / 127 px gemessen). Das Menü sprang dadurch um bis zu 78 px –
   Peter am 19.08.2026. Das Abstandhalten übernimmt jetzt die Telefonnummer:
   Menü sitzt fest neben dem Logo, Telefon und Knopf rücken nach rechts. */
.nav { display: flex; align-items: center; gap: clamp(.6rem, 1.5vw, 1.5rem); }

.nav a {
  position: relative; font-size: .95rem; font-weight: 600; padding: .45rem .15rem;
  transition: color var(--t-normal) var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--rot); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-normal) var(--ease);
}
.nav a:hover { color: var(--rot); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--rot); }

.kopf-tel {
  font-weight: 700; font-size: .95rem; white-space: nowrap;
  transition: color var(--t-normal) var(--ease);
}
.kopf-tel:hover { color: var(--rot); }

.burger {
  display: none; width: 46px; height: 46px; border-radius: var(--radius-s);
  align-items: center; justify-content: center; margin-left: auto;
  transition: background var(--t-normal) var(--ease);
}
.burger:hover { background: var(--papier-2); }
.burger span {
  display: block; position: relative; width: 22px; height: 2px; background: var(--text);
  transition: background var(--t-schnell) var(--ease);
}
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: var(--text);
  transition: transform var(--t-normal) var(--ease), top var(--t-normal) var(--ease);
}
.burger span::before { top: -7px; }
.burger span::after  { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Mobilmenü */
.mobilnav {
  position: fixed; inset: var(--header-h) 0 0; z-index: 99;
  background: var(--weiss); padding: 1.5rem var(--pad-x) 3rem;
  overflow-y: auto; display: none; flex-direction: column; gap: .25rem;
}
.mobilnav.ist-offen { display: flex; animation: einblenden var(--t-ruhig) var(--ease) both; }
.mobilnav a {
  font-size: 1.2rem; font-weight: 700; padding: .95rem .25rem;
  border-bottom: 1px solid var(--linie);
}
.mobilnav .mobil-aktionen { display: grid; gap: .75rem; margin-top: 1.5rem; }
.mobilnav .mobil-aktionen .btn { width: 100%; }
@keyframes einblenden { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; background: var(--schwarz); color: var(--text-inv);
  overflow: hidden; isolation: isolate;
}
.hero-bild {
  position: absolute; inset: 0; z-index: -2;
}
/* Teamfoto: rechte Bildhälfte zeigen, damit links Platz für die Überschrift bleibt */
.hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
/* Weicher Verlauf: links dunkel genug für weiße Schrift, ab der Mitte schnell
   aufklarend, damit das Team erkennbar bleibt. Die Lesbarkeit sichert
   zusätzlich der Textschatten – nicht eine flächige Abdunklung. */
.hero-schleier {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* Erik, 12.08.: Die Kopfbilder wirkten zu dunkel. Der Schleier ist deshalb
       spürbar leichter – die weiße Schrift bleibt durch den Textschatten und
       den immer noch kräftigen linken Rand lesbar. */
    linear-gradient(100deg,
      rgba(18,18,20,.88) 0%,
      rgba(18,18,20,.84) 40%,
      rgba(18,18,20,.74) 58%,
      rgba(18,18,20,.48) 70%,
      rgba(18,18,20,.18) 82%,
      rgba(18,18,20,.06) 90%,
      rgba(18,18,20,.18) 100%),
    linear-gradient(180deg, rgba(18,18,20,.40) 0%, transparent 22%, rgba(18,18,20,.36) 100%);
}
/* ⚠️ KOPFBEREICH AUF HOHEN BILDSCHIRMEN – Peter, 17.08.2026:
   „An meinem PC mit 4K-Monitor sieht man diesen weissen Rand, der da eigentlich
   nicht hingehört. Am Mac habe ich den nicht."

   Gemessen und bestätigt: Der Kopfbereich war mit `min(78vh, 760px)` bei
   760 px gedeckelt – auf JEDEM Bildschirm gleich hoch.
       MacBook 14"  982 px hoch -> Kopf endet bei 905, das beige Kennzahlen-Band
                                   füllt den Rest. Sieht richtig aus, aber nur
                                   durch Zufall: 78 % von 982 sind fast genau 760.
       4K bei 150 % 1440 px hoch -> Band endet bei 1157, darunter 280 px weiß.
       4K ungeskal. 2160 px hoch -> darunter über 1000 px weiß.

   Die Obergrenze ist deshalb angehoben, die Untergrenze neu gesetzt. Bei 982 px
   Fensterhöhe kommt weiterhin genau derselbe Wert heraus wie vorher (766 px) –
   Eriks abgenommene Ansicht auf dem Mac ändert sich also NICHT.
   Nicht wieder auf einen festen Deckel zurückdrehen. */
.hero-inner { padding-block: clamp(3.5rem, 9vw, 7rem); min-height: clamp(520px, 78vh, 1180px); display: flex; flex-direction: column; justify-content: center; }
.hero .kicker { color: #fff; opacity: .88; text-shadow: 0 1px 12px rgba(0,0,0,.75); }
/* ⚠️ Die Regel .hero .kicker--rot ist am 16.08.2026 entfallen: Erik wollte den
   Kicker im Kopfbild der Referenzseite doch wieder weiß. Der gemessene Wert steht
   hier, falls es noch einmal gedreht wird: Auf dem dortigen Kopfbild (RGB 35,35,37)
   erreicht --rot nur 3,15:1 und --rot-hell 4,27:1 – beide unter den 4,5:1, die für
   Text dieser Größe gefordert sind. #ff4858 erreichte 4,72:1. */
.hero h1 {
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  max-width: 17ch; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.4);
}
.hero-text {
  margin-top: 1.4rem; max-width: 46ch; color: rgba(248,248,246,.94);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  text-shadow: 0 1px 14px rgba(0,0,0,.7);
}
.hero-aktionen { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.hero-zusatz { margin-top: 1.5rem; }
.hero-zusatz .txtlink { color: #fff; }
.hero-zusatz .txtlink:hover { color: var(--rot-hell); }
.hero-hinweis {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  font-size: .78rem; color: rgba(244,244,242,.55); max-width: 60ch;
}

/* ==========================================================================
   Kennzahlen
   ========================================================================== */
.zahlen { background: var(--flaeche-grau); border-bottom: 1px solid var(--linie); }
.zahlen-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.zahl { padding-inline: clamp(1rem, 2.5vw, 2rem); }
.zahl + .zahl { border-left: 1px solid var(--linie); }
.zahl:first-child { padding-left: 0; }
.zahl-wert {
  font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.zahl-titel { margin-top: .7rem; font-weight: 700; font-size: .95rem; color: var(--rot-schrift); }
.zahl-sub { margin-top: .2rem; font-size: .9rem; color: var(--text-2); }
.zahl-stern { color: var(--stern); }

/* ==========================================================================
   Wege-Karten („Wie können wir Ihnen helfen?")
   ========================================================================== */
.wege { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.weg {
  display: flex; flex-direction: column;
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.75rem 1.5rem 1.5rem;
  transition: transform var(--t-ruhig) var(--ease),
              box-shadow var(--t-ruhig) var(--ease),
              border-color var(--t-ruhig) var(--ease);
}
.weg:hover, .weg:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.4);
  border-color: rgba(225,0,26,.35);
}
.weg-nr {
  width: 44px; height: 44px; border-radius: 50%; background: var(--rot); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: .9rem;
  margin-bottom: 1.4rem;
  transition: transform var(--t-ruhig) var(--ease);
}
.weg:hover .weg-nr { transform: scale(1.08); }

/* Aus dem Menü gezielt angesteuerte Karte kurz hervorheben – sonst ist nicht
   erkennbar, welche der vier nebeneinanderstehenden Karten gemeint war. */
.weg:target { border-color: var(--rot); }
.weg:target .weg-nr { transform: scale(1.08); }
@media (prefers-reduced-motion: no-preference) {
  .weg:target { animation: kartePuls 1.5s ease-out 2; }
}
@keyframes kartePuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225,0,26,.5); }
  50%      { box-shadow: 0 0 0 10px rgba(225,0,26,0); }
}
.weg p { font-size: .95rem; color: var(--text-2); margin-top: .8rem; flex: 1 1 auto; }
.weg .txtlink { margin-top: 1.5rem; align-self: flex-start; }
.weg .txtlink::after { content: ''; position: absolute; inset: 0; }
.weg { position: relative; }
.weg .txtlink { position: static; }

/* ==========================================================================
   Imagefilm
   ========================================================================== */
.film-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.film-buehne {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: #000; aspect-ratio: 16 / 10;
}
.film-buehne img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease), filter var(--t-ruhig) var(--ease); }
.film-buehne:hover img { transform: scale(1.03); filter: brightness(.86); }
.film-badge {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  background: rgba(0,0,0,.72); color: #fff; font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: .5rem .85rem; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.film-play {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
}
.film-play-kreis {
  width: clamp(64px, 8vw, 88px); aspect-ratio: 1; border-radius: 50%;
  background: var(--rot); display: grid; place-items: center;
  box-shadow: 0 12px 34px -10px rgba(225,0,26,.7);
  transition: transform var(--t-ruhig) var(--ease), background var(--t-ruhig) var(--ease);
}
.film-play:hover .film-play-kreis, .film-play:focus-visible .film-play-kreis { transform: scale(1.09); background: var(--rot-tief); }
.film-play svg { width: 30%; fill: #fff; margin-left: 8%; }
.film-info .kicker { color: var(--rot-hell); }
.film-info h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.film-fuss { margin-top: 1.2rem; font-size: .8rem; color: var(--text-inv-2); }

/* ===================== Imagefilm als Bildband (Erik, 12.08.) =====================
   Der Teaser läuft von selbst über die volle Breite. Die wechselnden Aufteilungen
   sind Teil des Films, nicht des Layouts. */
.filmband {
  position: relative; overflow: clip; background: var(--schwarz);
  display: grid; place-items: end start;
}
.filmband-video {
  grid-area: 1 / 1; width: 100%; height: min(78dvh, 640px);
  object-fit: cover; display: block; filter: saturate(.94);
  /* ⚠️ `filter` eröffnet einen Stapelkontext. Ohne die z-index-Angaben an
     Schleier und Text malt der Browser das Video ÜBER die Überschrift –
     sie war dadurch komplett unsichtbar (gefunden 12.08.2026). */
  position: relative; z-index: 0;
}
.filmband-schleier {
  grid-area: 1 / 1; width: 100%; height: 100%;
  position: relative; z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,12,.30) 0%, rgba(10,10,12,.05) 38%,
                                      rgba(10,10,12,.62) 78%, rgba(10,10,12,.86) 100%);
}
.filmband-text {
  grid-area: 1 / 1; align-self: end;
  position: relative; z-index: 2;
  width: 100%; max-width: var(--breite); margin-inline: auto;   /* bündig mit .wrap */
  padding-inline: var(--pad-x); padding-bottom: clamp(2rem, 5vw, 3.5rem);
  color: #fff;
}
.filmband-text .kicker { color: var(--rot-hell); }
.filmband-text h2 { color: #fff; max-width: 18ch; font-size: clamp(1.9rem, 4vw, 3.2rem); }
.filmband-text p { margin-top: .9rem; color: rgba(242,242,240,.86); max-width: 52ch; }

/* Abspielknopf mittig über dem Band */
.filmband .film-play {
  grid-area: 1 / 1; place-self: center;
  display: grid; justify-items: center; gap: .75rem;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.film-play-label {
  display: grid; gap: .15rem; text-align: center; color: #fff;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}
.film-play-label em { font-style: normal; font-weight: 600; letter-spacing: .06em; opacity: .8; }

/* Vollbild-Fenster */
.film-kino {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(8,8,10,.94); display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.film-kino[hidden] { display: none; }
.film-kino-buehne { width: min(1200px, 100%); }
.film-kino-buehne video { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.film-kino-zu {
  position: absolute; top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem);
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff;
  display: grid; place-items: center;
}
.film-kino-zu:hover { background: var(--rot); border-color: var(--rot); }
.film-kino-zu svg { width: 22px; height: 22px; }

@media (max-width: 780px) {
  .filmband-video { height: min(70dvh, 460px); }
  .filmband-text p { display: none; }        /* auf dem Telefon zählt die Überschrift */
}
/* Wer Bewegung reduziert haben will, bekommt das Standbild. */
@media (prefers-reduced-motion: reduce) {
  .filmband-video { display: none; }
  .filmband { background: var(--schwarz) center/cover no-repeat; }
}

/* ==========================================================================
   Vorher/Nachher-Vergleich
   ========================================================================== */
.praesentation-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

.vergleich {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 11; background: var(--papier-2);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.vergleich img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vergleich-nachher { clip-path: inset(0 0 0 var(--pos, 50%)); }
/* Erik, 12.08.: Ab jetzt liegen ECHTE Vorher-Aufnahmen vor. Die künstliche
   Graufärbung des Vorher-Bildes muss deshalb weg – sonst verfälscht sie den
   Vergleich und macht das Nachher-Bild besser, als es ist. */
.vergleich--breit { aspect-ratio: 16 / 9; }   /* für das virtuelle Staging */
.vergleich-marke {
  position: absolute; top: 1rem; z-index: 3;
  font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: .48rem .85rem; border-radius: 999px;
}
.vergleich-marke.ist-vorher  { left: 1rem; background: rgba(0,0,0,.75); color: #fff; }
.vergleich-marke.ist-nachher { right: 1rem; background: var(--rot); color: #fff; }
/* ⚠️ Erik hat am 14.08. ein iPhone-Foto geschickt, auf dem sich die beiden
   Marken überlappen: bei 393 px Breite passen zwei lange Wörter nicht
   nebeneinander. Kürzere Texte allein reichen als Absicherung nicht – wer
   später einen längeren Text einsetzt, hätte denselben Fehler. Deshalb ab
   hier zusätzlich: jede Marke darf höchstens 42 % der Bildbreite belegen und
   wird notfalls umbrochen statt über die andere zu laufen.               */
@media (max-width: 700px) {
  .vergleich-marke {
    max-width: 42%; font-size: .62rem; padding: .38rem .6rem;
    letter-spacing: .06em; line-height: 1.25; text-align: center;
  }
  .vergleich-marke.ist-vorher  { left: .6rem; }
  .vergleich-marke.ist-nachher { right: .6rem; }
}
.vergleich-trenner {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; z-index: 4;
  background: #fff; transform: translateX(-50%); pointer-events: none;
  box-shadow: 0 0 14px rgba(0,0,0,.4);
}
.vergleich-griff {
  position: absolute; top: 50%; left: var(--pos, 50%); z-index: 5;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%; background: var(--rot); color: #fff;
  display: grid; place-items: center; cursor: ew-resize;
  box-shadow: 0 8px 26px -8px rgba(0,0,0,.6);
  transition: transform var(--t-normal) var(--ease), background var(--t-normal) var(--ease);
}
.vergleich-griff:hover, .vergleich-griff:focus-visible { transform: translate(-50%,-50%) scale(1.09); background: var(--rot-tief); }
.vergleich-griff svg { width: 22px; fill: #fff; }
.vergleich-hinweis {
  position: absolute; left: 50%; bottom: 1rem; z-index: 3; transform: translateX(-50%);
  background: rgba(0,0,0,.75); color: #fff; backdrop-filter: blur(6px);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .55rem 1.1rem; border-radius: 999px; white-space: nowrap;
  transition: opacity var(--t-ruhig) var(--ease);
}
.vergleich.ist-benutzt .vergleich-hinweis { opacity: 0; }

/* Barrierefreie Alternative zum Ziehen (Handout 6.1) – bewusst IM Bild,
   damit darunter kein Platz verloren geht und beide Blöcke gleich hoch bleiben. */
.vergleich-schalter {
  position: absolute; left: 50%; bottom: 1rem; z-index: 6;
  transform: translateX(-50%);
  display: flex; gap: .5rem; white-space: nowrap;
}
.vergleich-schalter .btn {
  background: rgba(18,18,20,.72); border: 1px solid rgba(255,255,255,.32); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: .6rem 1.05rem; font-size: .8rem;
  min-height: 44px;   /* Touch-Fläche laut Vorgabe */
}
.vergleich-schalter .btn:hover { background: #fff; color: var(--text); border-color: #fff; transform: translateY(-2px); }
/* Dauerhaft sichtbar – nicht erst bei Mausberührung (Handout: nichts nur per Hover). */

.vorteile { list-style: none; display: grid; gap: 1.05rem; margin-top: 1.75rem; }
.vorteile li { display: flex; align-items: flex-start; gap: .9rem; font-size: 1rem; }
.haken {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--rot);
  display: grid; place-items: center; margin-top: .1rem;
}
.haken svg { width: 13px; fill: #fff; }
.praesentation-fuss { margin-top: clamp(1.75rem, 3vw, 2.5rem); font-size: .85rem; color: var(--text-2); }

/* ---------- 3D-Rundgang (Platzhalter, lädt erst nach Klick) ---------- */
/* Gleiches Raster und gleiche Bildgröße wie der Vergleich darüber:
   Die beiden Textspalten stehen dadurch bündig untereinander. */
.rundgang {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center; margin-top: clamp(2.5rem, 5vw, 4rem);
}
.rundgang-bild { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/11; background: var(--papier-2); }
.rundgang-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease), filter var(--t-ruhig) var(--ease); }
.rundgang:hover .rundgang-bild img { transform: scale(1.04); filter: brightness(.92); }
.rundgang-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(18,18,20,.72); backdrop-filter: blur(6px);
  color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: .02em;
  display: grid; place-items: center; border: 2px solid rgba(255,255,255,.85);
  transition: transform var(--t-ruhig) var(--ease), background var(--t-ruhig) var(--ease);
}
.rundgang:hover .rundgang-badge { transform: translate(-50%,-50%) scale(1.08); background: var(--rot); border-color: var(--rot); }
.rundgang-info h3 { margin-top: .35rem; font-size: clamp(1.2rem, 2vw, 1.55rem); }
.rundgang-info p { margin-top: .85rem; font-size: .97rem; color: var(--text-2); max-width: 52ch; }
.rundgang-info .btn { margin-top: 1.5rem; }
.rundgang-fuss { margin-top: .9rem; font-size: .78rem; color: var(--text-2); }

/* ---------- Referenzen (bereits vermittelt) ---------- */
.referenzen-block { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2.25rem, 4vw, 3rem); border-top: 1px solid var(--linie); }
.referenzen-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; margin-bottom: 1.75rem; }
.referenzen-kopf h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.referenzen-kopf p { font-size: .95rem; color: var(--text-2); }
.referenzen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.referenz {
  border-radius: var(--radius); overflow: hidden; background: var(--weiss);
  border: 1px solid var(--linie);
  transition: transform var(--t-ruhig) var(--ease), box-shadow var(--t-ruhig) var(--ease);
}
.referenz:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -22px rgba(0,0,0,.4); }
.referenz-bild { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--papier-2); }
.referenz-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.referenz:hover .referenz-bild img { transform: scale(1.04); }
.referenz-badge {
  position: absolute; left: .75rem; top: .75rem;
  background: var(--schwarz); color: #fff; font-size: .66rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: .38rem .7rem; border-radius: 999px;
}
.referenz-body { padding: .95rem 1.1rem 1.1rem; }
.referenz-ort { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rot); }
.referenz-titel { margin-top: .3rem; font-weight: 700; font-size: 1rem; }
.referenzen-fuss { margin-top: 1.25rem; font-size: .8rem; color: var(--text-2); }

/* ==========================================================================
   Verkaufsweg (6 Schritte)
   ========================================================================== */
.weg6 { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); }
.weg6-linie {
  position: absolute; top: 27px; left: 6%; right: 6%; height: 1px;
  background: var(--schwarz-3); z-index: 0;
}
.weg6-linie::after {
  content: ''; position: absolute; inset: 0; background: var(--rot);
  transform: scaleX(var(--fort, 0)); transform-origin: left;
  transition: transform 900ms var(--ease);
}
.weg6-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.schritt { text-align: center; }
.schritt-nr {
  width: 54px; height: 54px; margin: 0 auto; border-radius: 50%;
  border: 2px solid var(--rot); background: var(--schwarz);
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; color: #fff;
  transition: background var(--t-ruhig) var(--ease), transform var(--t-ruhig) var(--ease), color var(--t-ruhig) var(--ease);
}
.schritt:hover .schritt-nr { background: var(--rot); transform: scale(1.09); }
.schritt-titel { margin-top: 1.1rem; font-weight: 700; font-size: .95rem; color: #fff; }
.schritt-sub { margin-top: .15rem; font-size: .875rem; color: var(--text-inv-2); }
.weg6-aktion { display: flex; justify-content: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Helle Fassung. Erik, 13.08. (Mail R, Punkt 12): „keine zwei dunklen Bereiche
   direkt hintereinander". Der schwarze Weg stieß auf der Startseite direkt an
   den schwarzen Wertanalyse-Block und auf „Verkaufen"/„Vermieten" direkt an das
   dunkle Kopfbild. Er steht jetzt auf heller Fläche – die roten Nummernkreise
   und die rote Fortschrittslinie bleiben das tragende Element. */
.weg6--hell .weg6-linie { background: var(--linie); }
.weg6--hell .schritt-nr { background: #fff; color: var(--text); }
.weg6--hell .schritt:hover .schritt-nr { background: var(--rot); color: #fff; }
.weg6--hell .schritt-titel { color: var(--text); }
.weg6--hell .schritt-sub { color: var(--text-2); }

/* ==========================================================================
   Wertanalyse (roter Block mit diagonalem Übergang)
   ========================================================================== */
.wert { position: relative; background: var(--schwarz); color: #fff; overflow: hidden; }
.wert::before {
  content: ''; position: absolute; inset: 0; background: var(--rot);
  clip-path: polygon(0 0, 62% 0, 46% 100%, 0 100%);
  z-index: 0;
}
.wert-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr .8fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: var(--sec-y); }
.wert-pille {
  display: inline-block; background: #fff; color: var(--text);
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: .6rem 1.2rem; border-radius: 999px; margin-bottom: 1.5rem;
}
.wert h2 { color: #fff; max-width: 14ch; }
.wert-text { margin-top: 1.2rem; max-width: 48ch; color: rgba(255,255,255,.9); }
.wert-aktionen { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.wert .btn--weiss { color: var(--rot-tief); font-weight: 800; }

.wert-karte {
  background: var(--schwarz-2); border: 1px solid var(--schwarz-3);
  border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.4rem);
}
.wert-karte h3 { font-size: 1.3rem; color: #fff; }
.wert-optionen { list-style: none; display: grid; gap: 1.6rem; margin-top: 1.8rem; }
.wert-optionen li { display: flex; gap: 1rem; align-items: flex-start; }
.wert-nr {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .9rem;
  transition: background var(--t-normal) var(--ease), color var(--t-normal) var(--ease),
              box-shadow var(--t-normal) var(--ease);
}
/* Erik, 13.08. (Mail N, Punkt 3): Der rote Kreis soll beim Überfahren mit der Maus
   um die 1 ODER die 2 erscheinen – vorher lag er fest nur auf der 1. */
.wert-optionen li { transition: background var(--t-normal) var(--ease); }
.wert-optionen li:hover .wert-nr {
  background: var(--rot); color: #fff;
  box-shadow: 0 0 0 4px rgba(225,0,26,.18);
}
/* Erik, 13.08. (Mail N): Der rote Kreis soll beim Überfahren erscheinen – um die 1
   UND um die 2. Vorher lag er fest auf der 1, dort war deshalb gar kein Wechsel zu
   sehen. Jetzt starten beide neutral und werden beim Überfahren rot. */
.wert-nr.ist-1, .wert-nr.ist-2 { background: #3a3a42; color: #fff; }
.wert-optionen li > span:last-child { display: block; }
.wert-opt-titel { display: block; font-weight: 700; color: #fff; }
.wert-opt-sub { display: block; font-size: .9rem; color: var(--text-inv-2); margin-top: .15rem; }

/* ==========================================================================
   Objektkarten
   ========================================================================== */
.objekte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.objekt {
  position: relative; display: flex; flex-direction: column;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden;
  transition: transform var(--t-ruhig) var(--ease), box-shadow var(--t-ruhig) var(--ease);
}
.objekt:hover, .objekt:focus-within { transform: translateY(-6px); box-shadow: 0 20px 44px -24px rgba(0,0,0,.45); }
/* Die ganze Kachel reagiert auf den Klick, nicht nur die Überschrift –
   sonst tippt man auf Bild oder „Immobilie ansehen“ und es passiert nichts. */
.objekt[data-demo] { cursor: pointer; }
/* Ohne diese Zeile bleibt eine ausgefilterte Kachel stehen: die Klassenregel
   `.objekt { display: flex }` schlägt die Browservorgabe für [hidden]. */
.objekt[hidden] { display: none; }
.objekte-mehr[hidden] { display: none; }
/* Meldung, wenn ein Filter nichts übrig lässt – ohne sie wirkt die Seite kaputt. */
.keine-treffer {
  margin-top: 2rem; padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); color: var(--text-2); text-align: center;
}
.keine-treffer .txtlink { display: inline-block; margin-top: .5rem; }
.objekt-bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--papier-2); }
.objekt-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.objekt:hover .objekt-bild img { transform: scale(1.04); }   /* Vorgabe: 2–4 % */
.objekt-body { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.objekt-ort { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rot); }
.objekt h3 { margin-top: .55rem; font-size: 1.15rem; }
.objekt-fuss {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--linie);
}
.objekt-daten { font-size: .875rem; color: var(--text-2); }
.objekt-preis { font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
/* Objekttitel: bis zur echten Detailseite eine Schaltfläche, sieht aus wie Text */
.objekt-link { font: inherit; text-align: left; color: inherit; }
.objekt a::after, .objekt .objekt-link::after { content: ''; position: absolute; inset: 0; }
.objekte-aktionen { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: clamp(2.25rem, 4vw, 3rem); }

/* ==========================================================================
   Team
   ========================================================================== */
.team-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.team-bild { border-radius: var(--radius); overflow: hidden; }
.team-bild img { width: 100%; transition: transform 500ms var(--ease); }
.team-bild:hover img { transform: scale(1.02); }
.team-karte {
  background: var(--schwarz-2); border: 1px solid var(--schwarz-3);
  border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.6rem);
}
.team-karte h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); color: #fff; }
.team-karte p { margin-top: 1.1rem; }
.team-karte .btn { margin-top: 1.9rem; }

/* ==========================================================================
   Bewertungen
   ========================================================================== */
.bewertung-meta { font-size: 1rem; color: var(--text-2); margin-bottom: 2rem; }
.bewertung-meta strong { color: var(--text); font-weight: 800; }
.bewertungen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.bewertung {
  position: relative; background: var(--papier); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.6rem 1.6rem 1.5rem;
  display: flex; flex-direction: column;
  transition: transform var(--t-ruhig) var(--ease), box-shadow var(--t-ruhig) var(--ease);
}
.bewertung:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -22px rgba(0,0,0,.4); }
.bewertung-kopf { display: flex; align-items: center; justify-content: space-between; }
.sterne { color: var(--stern); letter-spacing: .16em; font-size: 1rem; }
.g-marke { font-weight: 800; color: var(--rot); font-size: 1.05rem; line-height: 1; }
.bewertung-text { display: flex; gap: .8rem; margin-top: 1.1rem; flex: 1 1 auto; }
.bewertung-text .anfuehrung { color: var(--rot); font-size: 1.6rem; line-height: .9; font-weight: 800; flex: 0 0 auto; }
.bewertung-text p { font-size: .95rem; color: var(--text); }
.bewertung-name { margin-top: 1.6rem; font-weight: 700; font-size: .9rem; color: var(--text-2); }
.bewertungen-aktion { display: flex; justify-content: center; margin-top: clamp(2.25rem, 4vw, 3rem); }

/* ==========================================================================
   Wissen
   ========================================================================== */
.wissen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.beitrag {
  position: relative; display: flex; flex-direction: column;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden;
  transition: transform var(--t-ruhig) var(--ease), box-shadow var(--t-ruhig) var(--ease);
}
.beitrag:hover, .beitrag:focus-within { transform: translateY(-6px); box-shadow: 0 20px 44px -24px rgba(0,0,0,.45); }
/* ⚠️ EIN Rahmen für ALLE Beitragskacheln – Erik, 17.08.2026: „eine einheitliche
   Bildgröße beziehungsweise ein festes Seitenverhältnis, damit die Übersicht
   ruhig, hochwertig und professionell wirkt". 3:2 statt vorher 16:9, weil die
   Bilder sehr unterschiedlich sind: acht der vorhandenen sind hochkant (0,80),
   drei sogar 0,56. Im 16:9-Rahmen wurde davon das meiste weggeschnitten.
   ⚠️ Diese Höhe NICHT je Seite überschreiben – sonst ist die Einheitlichkeit
      wieder dahin, und genau die war der Auftrag. */
.beitrag-bild { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--papier-2); }
.beitrag-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }

/* Passt ein Bild nicht zum Rahmen (Hochformat, Panorama, quadratische
   Social-Grafik mit Text), wird es VOLLSTÄNDIG gezeigt statt beschnitten –
   auf einer unscharf vergrößerten Kopie seiner selbst. Der Rahmen bleibt
   gleich groß, nichts fehlt, und es sieht nicht nach grauem Balken aus.
   Die Klasse setzt site.js beim Laden, gemessen am echten Seitenverhältnis.
   ⚠️ Damit passt AUTOMATISCH jedes künftige Bild ins Raster – eigene
      Beiträge, IVD-Grafiken, alles. Niemand muss etwas zuschneiden. */
.beitrag-bild.ist-ganz::before {
  content: ""; position: absolute; inset: -8%;
  background-image: var(--unterlage); background-size: cover; background-position: center;
  filter: blur(22px) saturate(1.15) brightness(.82);
  transform: scale(1.06);
}
.beitrag-bild.ist-ganz img {
  position: relative; z-index: 1;
  object-fit: contain;
  /* ⚠️ Kein Schatten am Bild selbst: Social-Grafiken haben oft schon einen
     eigenen Rahmen, dann sähe es doppelt aus. */
}
.beitrag:hover .beitrag-bild img { transform: scale(1.04); }
.beitrag-badge {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .45rem .8rem; border-radius: 999px;
  background: rgba(0,0,0,.78); color: #fff; backdrop-filter: blur(6px);
}
.beitrag-badge.ist-aktuell { background: var(--rot); }
.beitrag-body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.beitrag h3 { font-size: 1.08rem; }
/* Erik, 17.08.2026, Punkt 8: Auf seiner alten Seite steht das Datum ÜBER der
   Überschrift, klein und zurückhaltend. Nachgebaut, aber in unserer Typografie.
   ⚠️ Nur da, wo ein Datum vorliegt – der handübertragene Altbestand hat keins,
      und eine leere Zeile würde die Kacheln unterschiedlich hoch machen. */
.beitrag-datum {
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: .35rem;
}

/* Ein Wert, den Erik irgendwo eintragen muss – Weiterleitungsadresse, Kennung,
   Prüftoken. Bisher stand so etwas in einem nackten <code> ohne jede Regel.
   ⚠️ Genau an solchen Werten sind heute vier Anläufe gescheitert. Deshalb: klar
      abgesetzter Kasten, umbrechend statt abgeschnitten, ganze Zeile breit.
   Nur im geschützten Bereich sichtbar, deshalb bewusst schlicht. */
.kopierfeld {
  display: block; padding: .85rem 1rem; margin: .6rem 0;
  background: var(--flaeche-grau); border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .92rem; line-height: 1.5; color: var(--text);
  word-break: break-all; user-select: all;
}
/* Erik, 15.08.2026 (IMG_0501): „gleiche Höhe wie links und rechts" – die drei
   Kacheln auf der Startseite standen unterschiedlich hoch, weil der Verweis
   direkt unter dem Text hing und die Texte verschieden lang sind. Mit auto
   oben wandert der Verweis in allen drei Kacheln auf dieselbe Grundlinie.
   ⚠️ Nachgesehen auf dem iPad Pro 12,9 (1366 px), dort war es am deutlichsten. */
.beitrag .txtlink { margin-top: auto; padding-top: 1.8rem; align-self: flex-start; }
.beitrag a.txtlink::after,
.beitrag button.txtlink::after { content: ''; position: absolute; inset: 0; }
.wissen-aktion { display: flex; justify-content: center; margin-top: clamp(2.25rem, 4vw, 3rem); }

/* ==========================================================================
   Kontakt
   ========================================================================== */
.kontakt-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(1.75rem, 3vw, 2.5rem); align-items: stretch; }
.kontakt-karte {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: clamp(1.75rem, 3vw, 2.4rem);
}
.kontakt-karte h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.kontakt-liste { list-style: none; display: grid; gap: 1rem; margin-top: 1.6rem; }
.kontakt-liste li { display: flex; align-items: center; gap: .9rem; font-size: 1rem; }
.kontakt-punkt { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--rot); display: grid; place-items: center; }
.kontakt-punkt svg { width: 11px; fill: #fff; }
.kontakt-liste a { transition: color var(--t-normal) var(--ease); }
.kontakt-liste a:hover { color: var(--rot); }
.kontakt-aktionen { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; }
.kontakt-fuss { margin-top: 1.1rem; font-size: .78rem; color: var(--text-2); }

.karte-platz {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--papier-2); border: 1px solid var(--linie); min-height: 340px;
}
/* Echtes Kartenbild statt des früheren Strichmusters (Erik, 12.08.). */
.karte-platz { margin: 0; }
.karte-platz img { display: block; width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.karte-route { position: absolute; right: 1.1rem; top: 1.1rem; }
.karte-hinweis {
  position: absolute; left: 1.1rem; bottom: 1.1rem; right: 1.1rem;
  font-size: .76rem; color: var(--text-2); background: rgba(255,255,255,.9);
  padding: .6rem .8rem; border-radius: var(--radius-s); backdrop-filter: blur(4px);
}
.kontakt-note { margin-top: 1.5rem; font-size: .82rem; color: var(--text-2); }

/* ==========================================================================
   Fußzeile
   ========================================================================== */
.fuss { background: var(--schwarz); color: var(--text-inv); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.fuss-oben { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 2rem; }
.fuss-marke img {
  width: 190px; height: 28.6px;          /* 190 × 0,15036 – siehe .marke img */
  object-fit: cover; object-position: top center;
}
.fuss-claim { margin-top: .9rem; font-size: .9rem; color: var(--text-inv-2); max-width: 30ch; }
.fuss-sp h4 { font-size: .95rem; font-weight: 800; color: #fff; margin-bottom: 1rem; }
.fuss-sp ul { list-style: none; display: grid; gap: .55rem; }
.fuss-sp a,
.fuss-link { font-size: .9rem; color: var(--text-inv-2); transition: color var(--t-normal) var(--ease); }
.fuss-sp a:hover, .fuss-link:hover { color: #fff; }
/* Footer-Platzhalter: sieht aus wie ein Link, ist aber eine Schaltfläche */
.fuss-link { font-family: inherit; text-align: left; padding: 0; }
/* Footer-Links: Klickfläche vergrößern, Abstände bleiben optisch gleich */
.fuss-sp a, .fuss-sp .fuss-link,
.fuss-recht-links a, .fuss-recht-links .fuss-link,
.fuss-social a { display: inline-block; padding-block: .5rem; margin-block: -.5rem; }
.fuss-recht-links .fuss-link { font-size: .9rem; font-weight: 600; color: var(--text-inv); }
.fuss-recht-links .fuss-link:hover { color: var(--rot-hell); }

.fuss-trenner { height: 1px; background: var(--schwarz-3); margin-block: clamp(2rem, 4vw, 3rem); }

.fuss-mitte { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.fuss-social { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.fuss-social a { font-size: .9rem; color: var(--text-inv-2); transition: color var(--t-normal) var(--ease); }
.fuss-social a:hover { color: #fff; }
/* Reiner Trenner (aria-hidden), aber bei 2,14:1 kaum zu sehen. */
.fuss-social .punkt { color: #6f6f7a; }
.fuss-domain { font-size: .9rem; color: var(--text-inv-2); }

.fuss-recht { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
/* ⚠️ --rot ist das Rot für HELLEN Grund. Auf dem schwarzen Fuß gemessene
   3,76:1 – unter der AA-Grenze. --rot-hell bringt 5,09:1, wie bei den
   anderen Kickern auf dunklem Grund auch.                                  */
.fuss-recht-titel { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rot-hell); }
.fuss-recht-links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .9rem; font-weight: 600; }
.fuss-recht-links a { transition: color var(--t-normal) var(--ease); }
.fuss-recht-links a:hover { color: var(--rot-hell); }
.fuss-recht .btn { margin-left: auto; }
/* #6c6c76 ergab auf dem Fuß 3,60:1. #8c8c96 bringt 5,62:1 und bleibt
   trotzdem deutlich zurückgenommen.                                        */
.fuss-copy { margin-top: clamp(2rem, 4vw, 3rem); font-size: .8rem; color: #8c8c96; }

/* ==========================================================================
   Prototyp-Hinweis + KI-Assistent
   ========================================================================== */
.proto-band {
  background: var(--schwarz-2); color: var(--text-inv-2);
  font-size: .8rem; text-align: center; padding: .6rem 1rem;
  border-bottom: 1px solid var(--schwarz-3);
}
.proto-band strong { color: #fff; }
/* Deutlich sichtbarer Knopf statt Textlink – macht nach dem Seitenaufbau
   dreimal auf sich aufmerksam und ist danach ruhig. */
.proto-link {
  display: inline-block; margin-left: 1rem;
  background: var(--rot); color: #fff; font-weight: 800;
  font-size: .78rem; letter-spacing: .02em;
  padding: .42rem 1rem; border-radius: 999px; white-space: nowrap;
  animation: protoPuls 1.5s ease-in-out 1.4s 3;
  transition: background var(--t-normal) var(--ease), transform var(--t-normal) var(--ease);
}
.proto-link:hover { background: #fff; color: var(--schwarz); transform: translateY(-1px); }
.proto-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes protoPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225,0,26,.75); }
  50%      { box-shadow: 0 0 0 7px rgba(225,0,26,0); }
}
@media (prefers-reduced-motion: reduce) { .proto-link { animation: none; } }
@media (max-width: 700px) {
  .proto-link { display: inline-block; margin: .5rem 0 0; white-space: normal; }
}

.assi-knopf {
  position: fixed; right: clamp(1rem, 2.5vw, 1.75rem); bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 90; display: flex; align-items: center; gap: .6rem;
  background: var(--rot); color: #fff; font-weight: 700; font-size: .9rem;
  padding: .9rem 1.3rem; border-radius: 999px;
  box-shadow: 0 12px 30px -10px rgba(225,0,26,.65);
  transition: transform var(--t-normal) var(--ease), background var(--t-normal) var(--ease);
}
.assi-knopf:hover { transform: translateY(-2px); background: var(--rot-tief); }
.assi-knopf svg { width: 19px; fill: #fff; }

.assi {
  position: fixed; right: clamp(1rem, 2.5vw, 1.75rem); bottom: calc(clamp(1rem, 2.5vw, 1.75rem) + 62px);
  z-index: 95; width: min(430px, calc(100vw - 2rem));
  max-height: calc(100vh - 100px);
  max-height: min(720px, calc(100dvh - 100px));
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: 0 26px 60px -20px rgba(0,0,0,.45);
  display: none; overflow: hidden; flex-direction: column;
}
.assi.ist-offen { display: flex; animation: assiRein var(--t-ruhig) var(--ease) both; }
@keyframes assiRein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.assi-kopf { background: var(--schwarz); color: #fff; padding: 1rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.assi-kopf strong { font-size: .98rem; }
.assi-kopf .assi-kennung { display: block; font-size: .72rem; color: var(--text-inv-2); font-weight: 500; margin-top: .15rem; }
.assi-zu { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; transition: background var(--t-normal) var(--ease); }
.assi-zu:hover { background: rgba(255,255,255,.15); }
.assi-zu svg { width: 13px; fill: #fff; }
.assi-body { padding: 1.1rem 1.2rem 1.2rem; overflow-y: auto; overscroll-behavior: contain; }
.assi-hinweis { font-size: .82rem; color: var(--text-2); background: var(--papier); border-left: 3px solid var(--rot); padding: .75rem .9rem; border-radius: var(--radius-s); }
.assi-vorschlag-titel { margin-top: 1rem; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.assi-fragen { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: .55rem; }
.assi-frage {
  text-align: left; font-size: .8rem; line-height: 1.35; border: 1px solid var(--linie); border-radius: var(--radius-s);
  padding: .62rem .7rem; transition: border-color var(--t-normal) var(--ease), background var(--t-normal) var(--ease), color var(--t-normal) var(--ease);
}
.assi-frage:hover { border-color: var(--rot); background: var(--papier); }
.assi-frage:focus-visible, .assi-senden:focus-visible, .assi-antwort-link:focus-visible, .assi-eingabe:focus-visible, .assi-zustimmung input:focus-visible { outline: 3px solid rgba(225,0,26,.24); outline-offset: 2px; }
.assi-antwort { margin-top: .9rem; font-size: .86rem; color: var(--text); background: var(--papier); border-left: 3px solid var(--rot); padding: .8rem .85rem; border-radius: var(--radius-s); display: none; }
.assi-antwort.ist-da { display: block; animation: einblenden var(--t-normal) var(--ease) both; }
.assi-antwort.ist-fehler { border-left-color: #8a5a00; background: #fff8e8; }
.assi-antwort-text { margin: 0; line-height: 1.55; }
.assi-antwort-link { display: inline-flex; align-items: center; margin-top: .55rem; color: var(--rot); font-weight: 750; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.assi-antwort-link::after { content: '→'; margin-left: .35rem; text-decoration: none; }
.assi-form { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--linie); }
.assi-label { display: block; margin-bottom: .45rem; font-size: .82rem; font-weight: 750; color: var(--text); }
.assi-eingabe { display: block; width: 100%; min-height: 66px; max-height: 140px; resize: vertical; border: 1px solid var(--linie); border-radius: var(--radius-s); background: #fff; color: var(--text); font: inherit; font-size: .86rem; line-height: 1.45; padding: .7rem .75rem; }
.assi-eingabe:focus { border-color: var(--rot); }
.assi-eingabe:disabled { background: var(--papier); opacity: .72; }
.assi-zustimmung { display: grid; grid-template-columns: 17px 1fr; align-items: start; gap: .5rem; margin-top: .65rem; color: var(--text-2); font-size: .7rem; line-height: 1.38; cursor: pointer; }
.assi-zustimmung input { width: 16px; height: 16px; margin: .1rem 0 0; accent-color: var(--rot); }
.assi-zustimmung a { color: var(--rot); text-decoration: underline; text-underline-offset: 2px; }
.assi-form-zeile { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .7rem; }
.assi-status { min-height: 1em; color: var(--text-2); font-size: .7rem; }
.assi-senden { flex: 0 0 auto; border-radius: 999px; background: var(--rot); color: #fff; padding: .62rem .9rem; font-size: .78rem; font-weight: 800; transition: background var(--t-normal) var(--ease), opacity var(--t-normal) var(--ease); }
.assi-senden:hover { background: var(--rot-tief); }
.assi-senden:disabled { cursor: wait; opacity: .65; }
.assi-fuss { font-size: .68rem; line-height: 1.4; color: var(--text-2); margin-top: .85rem; }

/* ==========================================================================
   Eröffnung des Hero („erster Eindruck")
   Ablauf: Foto sofort vollständig sichtbar → Abdunklung fährt von links ein
   → Text erscheint zeilenweise → Buttons. Nach ~1,2 s ist alles da.
   Ohne JS oder bei „Bewegung reduzieren" ist sofort alles sichtbar.
   Nur opacity/transform/clip-path animiert → kein Layoutsprung (CLS).
   ========================================================================== */
.hero h1 .zeile { display: block; }

.hero-auftritt .auf-schleier {
  clip-path: inset(0 100% 0 0);
  animation: schleierRein 620ms cubic-bezier(0.33, 1, 0.68, 1) 220ms forwards;
}
@keyframes schleierRein {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.hero-auftritt .auf {
  opacity: 0;
  transform: translateX(-22px);
  animation: textRein 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes textRein {
  to { opacity: 1; transform: none; }
}
.hero-auftritt .auf-1 { animation-delay: 380ms; }
.hero-auftritt .auf-2 { animation-delay: 460ms; }
.hero-auftritt .auf-3 { animation-delay: 545ms; }
.hero-auftritt .auf-4 { animation-delay: 655ms; }
.hero-auftritt .auf-5 { animation-delay: 750ms; }
.hero-auftritt .auf-6 { animation-delay: 830ms; }
.hero-auftritt .auf-7 { animation-delay: 900ms; }

/* Kopfzeile: Leiste blendet ein, danach erscheinen Logo, Menüpunkte,
   Telefonnummer und Aktion nacheinander von links nach rechts. */
.leiste-auftritt .auf-kopf {
  animation: kopfRein 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes kopfRein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.leiste-auftritt .kopf-inner > *,
.leiste-auftritt .nav > a {
  opacity: 0;
  transform: translateY(-9px);
  animation: kopfTeilRein 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Die Navigation selbst nicht doppelt animieren – nur ihre Punkte */
.leiste-auftritt .kopf-inner > .nav { opacity: 1; transform: none; animation: none; }
@keyframes kopfTeilRein {
  to { opacity: 1; transform: none; }
}

.leiste-auftritt .kopf-inner > .marke   { animation-delay:  90ms; }
.leiste-auftritt .nav > a:nth-child(1)  { animation-delay: 170ms; }
.leiste-auftritt .nav > a:nth-child(2)  { animation-delay: 225ms; }
.leiste-auftritt .nav > a:nth-child(3)  { animation-delay: 280ms; }
.leiste-auftritt .nav > a:nth-child(4)  { animation-delay: 335ms; }
.leiste-auftritt .nav > a:nth-child(5)  { animation-delay: 390ms; }
.leiste-auftritt .nav > a:nth-child(6)  { animation-delay: 445ms; }
/* Telefonnummer, Knopf und Burger stecken jetzt in .kopf-rechts – die Hülle
   blendet als Ganzes ein, statt jedes Teil einzeln. */
.leiste-auftritt .kopf-inner > .kopf-rechts { animation-delay: 505ms; }

/* ==========================================================================
   Scroll-Animationen
   ========================================================================== */
/* Erik, 13.08. (Mail Q): dezente Scroll-Effekte wie auf ivd.net – Texte leicht von
   unten, Bilder von der Seite, Kacheln nacheinander, Knöpfe zuletzt. Bewusst OHNE
   Zusatzbibliothek: reines CSS plus der vorhandene IntersectionObserver. Das kostet
   keine zusätzliche Ladezeit, und wer „Bewegung reduzieren" eingestellt hat, sieht
   alles sofort (siehe Regel am Ende dieses Blocks). */
/* ⚠️ Erik, 13.08. abends (Mail R, Punkt 11): „Bei den Scroll-Effekten konnte ich bisher
   kaum etwas wahrnehmen … momentan sind mir die Effekte noch zu dezent bzw. teilweise
   gar nicht aufgefallen." Deshalb deutlich kräftiger: längerer Weg (22 → 48 px), längere
   Dauer (560 → 820 ms) und größere Abstände zwischen den Kacheln (90 → 150 ms). Die
   Kurve bleibt weich, damit es nicht hüpft. */
.reveal { opacity: 0; transform: translateY(48px); }
.reveal.ist-sichtbar {
  opacity: 1; transform: none;
  transition: opacity 820ms var(--ease-weich), transform 820ms var(--ease-weich);
}
.reveal-d1.ist-sichtbar { transition-delay: 150ms; }
.reveal-d2.ist-sichtbar { transition-delay: 300ms; }
.reveal-d3.ist-sichtbar { transition-delay: 450ms; }
.reveal-d4.ist-sichtbar { transition-delay: 600ms; }
.reveal-d5.ist-sichtbar { transition-delay: 750ms; }

/* Bilder kommen sichtbar von der Seite herein statt von unten. */
.reveal--links  { transform: translateX(-72px); }
.reveal--rechts { transform: translateX(72px); }
.reveal--links.ist-sichtbar, .reveal--rechts.ist-sichtbar { transform: none; }

/* Knöpfe erscheinen als letztes Element eines Abschnitts. */
.reveal--knopf { transform: translateY(26px); }
.reveal--knopf.ist-sichtbar { transition-delay: 520ms; }

/* Größere Grafiken gehen weiter und ruhiger. */
.reveal--ruhig { transform: translateY(60px) scale(.95); }
.reveal--ruhig.ist-sichtbar {
  transform: none;
  transition: opacity 1200ms var(--ease-weich), transform 1200ms var(--ease-weich);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--links, .reveal--rechts, .reveal--knopf, .reveal--ruhig {
    opacity: 1; transform: none; transition: none;
  }
}

/* ==========================================================================
   Responsive – geprüft bei 1440 / 1024 / 768 / 390 px
   ========================================================================== */
@media (max-width: 1180px) {
  .fuss-oben { grid-template-columns: 1fr 1fr 1fr; gap: 2.5rem 2rem; }
  .fuss-marke { grid-column: 1 / -1; }
}

/* ⚠️ DIE TELEFONNUMMER PASST NICHT MEHR IN DIE KOPFLEISTE – das ist Rechnen,
   nicht Geschmack. Gemessen am 19.08.2026 im Browser:

      Leiste innen   1184 px      Menü        575 px
      Logo            168 px      Knopf       205 px (ohne Umbruch)
      Telefonnummer   121 px      Abstände   2 × 24 px

   Für ein WIRKLICH mittiges Menü müssen beide Außenspalten gleich breit sein,
   also je (1184 − 575 − 48) / 2 = 280 px. Rechts stünden aber
   121 + 24 + 205 = 350 px. Die 70 px zu viel muss sich das Raster irgendwo
   holen – und es holt sie beim Knopf: der brach auf DREI Zeilen um und wurde
   68 statt 45 px hoch. Peter am 19.08.2026: „den Button nicht dicker und
   fetter machen."

   Von den drei Wünschen – Menü mittig, Knopf rechts in Originalgröße,
   Telefonnummer sichtbar – sind bei 1184 px nur zwei gleichzeitig möglich.
   Die Nummer weicht: sie steht auf JEDER Seite im Kontaktblock (samt Knopf
   „Anrufen") und in der Fußzeile, geht also nicht verloren.

   ⚠️ Zwei Klassen im Selektor, nicht eine. Weiter unten (Zeile ~2140) steht
      `.kopf-tel { display: inline-block }` ohne Medienabfrage; bei gleicher
      Gewichtung gewinnt die spätere Regel, und die Nummer bliebe sichtbar. */
.kopf-rechts .kopf-tel { display: none; }

/* ⚠️ Der Knopf darf NIE umbrechen. Er ist der einzige Teil der Leiste, dessen
   Breite sich je Seite ändert (127–205 px); bricht er um, wächst die Leiste
   in die Höhe und der Knopf wirkt klobig. */
.kopf-rechts .btn { white-space: nowrap; }

/* ⚠️ Schmale Spanne 1025–1100 px: Hier reicht selbst ohne Telefonnummer der
   Platz nicht. Gemessen bei 1040 px: Außenspalte 179 px, breitester Knopf
   („Kostenfreie Wertanalyse") 205 px → das Menü rutschte um 24 px. Die
   fehlenden Pixel kommen aus dem Außenrand und dem Spaltenabstand der
   Leiste, nicht aus dem Knopf. Unter 1025 px greift ohnehin das Klappmenü. */
@media (max-width: 1100px) {
  .kopf-inner { gap: 1rem; padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 1024px) {
  :root { --header-h: 76px; }
  /* Mobil gibt es nur Logo und Menüknopf. Das zweispaltige Raster verhindert,
     dass .kopf-rechts nach dem Ausblenden der Navigation in deren mittlere
     Desktop-Spalte nachrückt. */
  .kopf-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .kopf-inner > .marke { grid-column: 1; }
  .kopf-inner > .kopf-rechts { grid-column: 2; }
  .nav, .kopf-tel, .kopf .btn { display: none; }
  .burger { display: flex; }
  .wege { grid-template-columns: repeat(2, 1fr); }
  .film-grid, .praesentation-grid, .team-grid, .kontakt-grid, .wert-inner { grid-template-columns: 1fr; }
  .wert::before { clip-path: polygon(0 0, 100% 0, 100% 62%, 0 78%); }
  .weg6-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1rem; }
  .weg6-linie { display: none; }
  .objekte, .bewertungen, .wissen, .referenzen { grid-template-columns: repeat(2, 1fr); }
  .rundgang { grid-template-columns: 1fr; }
  .hero-inner { min-height: 0; }
  .hero-bild img { object-position: 68% center; }
}

@media (max-width: 768px) {
  .zahlen-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; }
  .zahl { padding-inline: 1rem; }
  .zahl:nth-child(odd) { padding-left: 0; }
  .zahl:nth-child(odd) { border-left: 0; }
  .objekte, .bewertungen, .wissen, .referenzen { grid-template-columns: 1fr; }
  .team-bild img { aspect-ratio: 16/10; object-fit: cover; }
  .fuss-oben { grid-template-columns: 1fr 1fr; }
  .fuss-recht .btn { margin-left: 0; width: 100%; }
  .fuss-mitte { flex-direction: column; align-items: flex-start; gap: .75rem; }
}

@media (max-width: 560px) {
  .wege { grid-template-columns: 1fr; }
  .weg6-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-aktionen .btn, .wert-aktionen .btn, .kontakt-aktionen .btn { width: 100%; }
  .objekte-aktionen .btn, .bewertungen-aktion .btn, .wissen-aktion .btn, .weg6-aktion .btn { width: 100%; }
  .hero-bild img { object-position: 62% center; }
  .assi-knopf span { display: none; }
  .assi-knopf { padding: 1rem; }
  .assi { right: .5rem; bottom: 4.9rem; width: calc(100vw - 1rem); max-height: calc(100vh - 5.5rem); max-height: calc(100dvh - 5.5rem); }
  .assi-body { padding: .95rem; }
  .assi-fragen { gap: .38rem; }
  .assi-frage { font-size: .76rem; padding: .55rem .6rem; }
  .fuss-oben { grid-template-columns: 1fr; }
}

/* Bewegung reduzieren – Inhalte bleiben vollständig verfügbar */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .weg6-linie::after { transform: scaleX(1); }
  /* Eröffnung überspringen – Inhalte sofort und vollständig sichtbar
     (greift auch, wenn die Einstellung erst nach dem Laden geändert wird) */
  .hero-auftritt .auf,
  .leiste-auftritt .auf-kopf,
  .leiste-auftritt .kopf-inner > *,
  .leiste-auftritt .nav > a { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-auftritt .auf-schleier { clip-path: none !important; animation: none !important; }
}

/* ==========================================================================
   Kategorieseiten – gemeinsame Bausteine
   ========================================================================== */
/* ⚠️ Diese Regel greift praktisch NIE – nachgemessen am 17.08.2026.
   Sie setzt eine Mindesthöhe auf den ÄUSSEREN Kasten, die tatsächliche Höhe
   bestimmt aber das innere .hero-inner (min-height clamp, siehe oben). Das
   Innere ist immer höher. Auf allen geprüften Größen sind die Kopfbereiche der
   Kategorieseiten deshalb exakt so hoch wie der auf der Startseite – 851 px auf
   dem MacBook, 1265 px auf 4K. Das war auch vorher schon so.
   Die Regel bleibt als Untergrenze für den Fall stehen, dass der Inhalt einmal
   kleiner wird. Wer die Kategorieseiten flacher haben will, muss .hero-inner
   anfassen, nicht diese Zeile. */
.hero--kat { min-height: clamp(420px, 62vh, 900px); }
/* Kategorie-Überschriften sind länger als die der Startseite – mehr Zeilenbreite,
   damit sie wie in Eriks Layout zweizeilig bleiben statt in vier Zeilen zu brechen. */
.hero--kat h1 { max-width: 24ch; }
.hero--kat .hero-inner { padding-block: clamp(4rem, 9vw, 6.5rem); }
.pfeil-ab { display: inline-block; transition: transform var(--t-normal) var(--ease); }
.btn:hover .pfeil-ab { transform: translateY(3px); }

/* Info-Kasten im Hero */
.hero-kasten {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 30rem; padding: 1.25rem 1.5rem;
  background: rgba(18,18,20,.66); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-kasten-titel { font-weight: 800; color: #fff; font-size: 1.05rem; }
.hero-kasten-liste { list-style: none; margin-top: .8rem; display: grid; gap: .55rem; }
.hero-kasten-liste li { display: flex; gap: .65rem; align-items: flex-start; font-size: .92rem; color: rgba(244,244,242,.9); }

/* Filterleiste */
.filter {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}
.filter-titel {
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rot); margin-bottom: 1rem;
}
.filter-reihe { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: .85rem; align-items: end; }
.filter-feld { display: grid; gap: .35rem; min-width: 0; }
.filter-feld > span {
  font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-2);
}
.filter-feld select, .filter-feld input {
  font: inherit; font-size: .92rem; color: var(--text); background: var(--weiss);
  border: 1px solid var(--linie); border-radius: 9px; padding: .7rem .85rem; width: 100%;
  min-height: 44px; appearance: none; padding-right: 2.1rem;
}
.filter-feld { position: relative; }
.filter-feld::after {
  content: ""; position: absolute; right: .8rem; bottom: 1.15rem; width: 9px; height: 9px;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2);
  transform: rotate(45deg) translateY(-2px); pointer-events: none;
}
.filter-feld select:disabled, .filter-feld input:disabled { opacity: 1; cursor: default; }
.filter-fuss {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  align-items: center; margin-top: 1.1rem; font-size: .84rem; color: var(--text-2);
}
.filter-fuss .txtlink { font-size: .84rem; }

/* Ergebniszeile */
.liste-kopf {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between; margin-bottom: 1.75rem;
}
.liste-anzahl {
  font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-2);
}
.filter-feld--klein select { min-width: 15rem; }
.objekte--drei { grid-template-columns: repeat(3, 1fr); }
/* ⚠️ Diese Pille hatte nie eine Grundregel – nur die zwei Hintergrundfarben
   darunter. Ohne position/padding/color saß sie als gewöhnlicher Fließtext im
   Bild und erbte die fast schwarze Schriftfarbe: auf Schwarz gemessene 1,05:1,
   also unsichtbar. Sie ist das Gegenstück zu .objekt-status oben rechts und
   bekommt hier dieselbe Behandlung, nur links.                                */
.objekt-badge {
  position: absolute; left: .8rem; top: .8rem; z-index: 2;
  color: #fff; font-size: .66rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 999px;
}
.objekt-badge--kaufen { background: var(--schwarz); }
.objekt-badge--mieten { background: var(--rot); }
.objekt-status {
  position: absolute; right: .8rem; top: .8rem; z-index: 2;
  background: var(--weiss); color: var(--text); font-size: .66rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 999px;
}
.objekt-ort { font-size: .85rem; color: var(--text-2); margin-top: .4rem; }
.objekt-eck {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--linie);
}
.objekt-eck dt { font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-2); }
.objekt-eck dd { font-size: .95rem; font-weight: 600; margin-top: .15rem; }
.objekt-fuss .objekt-daten {
  display: grid; gap: .1rem; font-size: .62rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-2);
}
.objekt-fuss .objekt-preis { color: var(--rot); font-size: 1.12rem; letter-spacing: normal; text-transform: none; }
.objekt-mehr { font-size: .85rem; }
.objekte-mehr { margin-top: clamp(2rem, 4vw, 2.75rem); text-align: center; }

/* Suchwunsch */
.such-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.such-text h2 { margin-top: .5rem; }
.vorteile { list-style: none; margin-top: 1.75rem; display: grid; gap: .8rem; }
.vorteile li { display: flex; gap: .8rem; align-items: flex-start; color: var(--text-inv); font-size: .97rem; }
.such-kasten {
  margin-top: 2rem; padding: 1.3rem 1.5rem; border-radius: var(--radius);
  background: var(--schwarz-2); border: 1px solid var(--schwarz-3);
}
.such-kasten-titel { margin-top: .5rem; font-weight: 800; color: #fff; font-size: 1.05rem; line-height: 1.3; }
.such-kasten-sub { margin-top: .4rem; font-size: .88rem; color: var(--text-inv-2); }
/* Erik, IMG_0470: „Bitte die 2 Button nebeneinander machen → sind zu lang."
   Erik, IMG_0485 (Nachtrag): „Button beide kleiner machen, sind zu lang."
   Deshalb nicht mehr über die ganze Spaltenbreite, sondern nur so breit wie nötig –
   die Zeile bleibt links ausgerichtet. */
.such-kontakt {
  margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .7rem;
}
/* Bei großen Breiten ist die linke Spalte nur rund 476 px breit – nebeneinander
   passen die Knöpfe nur, wenn Beschriftung und Wert untereinander stehen. */
.such-kontakt .kontakt-knopf {
  flex: 1 1 0; min-width: 0;
  flex-direction: column; align-items: flex-start; gap: .3rem;
}
.such-kontakt .kontakt-wert { font-size: .88rem; }
@media (max-width: 700px) { .such-kontakt .kontakt-knopf { flex: 1 1 100%; } }
.kontakt-knopf {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .95rem 1.3rem; border-radius: 10px; font-weight: 700; font-size: .95rem;
  background: var(--schwarz-2); color: var(--text-inv); border: 1px solid var(--schwarz-3);
  transition: background var(--t-normal) var(--ease), transform var(--t-normal) var(--ease);
}
.kontakt-knopf:hover { background: #26262d; transform: translateY(-2px); }
.kontakt-knopf--rot { background: var(--rot); border-color: var(--rot); color: #fff; }
.kontakt-knopf--rot:hover { background: var(--rot-tief); }
.kontakt-wert { font-weight: 600; opacity: .92; white-space: nowrap; }

/* Formularkarte */
/* ================= Suchwunsch als EIN Block (Erik, 16.08.2026) =================
   Vorher waren es zwei Abschnitte nebeneinander, die sich inhaltlich
   wiederholten. Jetzt eine Einheit, einspaltig, links ausgerichtet – nach
   Eriks Orientierungsbild.
   ⚠️ Der Block liegt auf .dunkel. Die Farben kommen von dort; hier wird nur
      die Anordnung gesetzt, damit ein Wechsel des Grundtons nichts zerlegt. */
.sw-kopfteil { max-width: 62rem; }
.sw-kopfteil h2 { margin-bottom: .9rem; }
.sw-kopfteil .lead { max-width: 58ch; }
.sw-kopfteil .vorteile { margin-top: 1.5rem; }

/* Der Knopf ist ein <summary>. Der Marker (Dreieck) muss in BEIDEN Schreibweisen
   weg – Safari kennt nur ::-webkit-details-marker. */
.sw-klapp { margin-top: 1.8rem; }
.sw-klapp > summary { display: inline-flex; cursor: pointer; list-style: none; }
.sw-klapp > summary::-webkit-details-marker { display: none; }
.sw-klapp > summary::marker { content: ""; }
.sw-rahmen { margin-top: 1.4rem; max-width: 46rem; }

/* Trennlinie und die drei Schritte nebeneinander */
.sw-ablauf {
  margin-top: 2.4rem; padding-top: 1.8rem;
  border-top: 1px solid rgba(255,255,255,.16);
}
.sw-schritte {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
.sw-schritte li {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  text-align: center; font-size: .95rem; padding: 0 .8rem;
  border-left: 1px solid rgba(255,255,255,.14);
}
.sw-schritte li:first-child { border-left: 0; }
.sw-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--rot); color: #fff; font-weight: 800; font-size: .9rem;
}
@media (max-width: 700px) {
  .sw-schritte { grid-template-columns: 1fr; gap: 1.1rem; }
  .sw-schritte li { border-left: 0; align-items: flex-start; text-align: left;
                    flex-direction: row; padding: 0; }
}

/* Der Rahmen um das onOffice-Formular. Die Optik IM Rahmen laesst sich nicht
   beeinflussen (fremde Herkunft) – der Rahmen selbst schon. Weisse Flaeche,
   dieselbe Rundung wie die uebrigen Karten, damit es nicht wie ein Fremdkoerper
   in der Seite steht. */
.oo-rahmen {
  position: relative;
  margin-top: 1.1rem;
  border: 1px solid var(--linie);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  min-height: 320px;
}
/* Nachgemessen: onOffice braucht rund 7 Sekunden, bis das Formular steht.
   Solange schaute man auf eine leere weisse Flaeche und hielt sie fuer einen
   Fehler. Dieser Hinweis liegt DAHINTER und verschwindet von selbst, sobald der
   Rahmen darueber gezeichnet ist – ohne eine Zeile JavaScript. */
.oo-rahmen::before {
  content: "Das Formular wird geladen …";
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2); font-size: .95rem;
}
/* ⚠️ KEIN background auf dem iframe. Genau daran ist der Ladehinweis beim ersten
   Versuch gescheitert: Ein weisser Hintergrund am iframe-ELEMENT wird gemalt, sobald
   das Element im Baum steht – nicht erst, wenn onOffice geantwortet hat. Damit lag
   waehrend der ganzen Ladezeit eine weisse Flaeche ueber dem Hinweis, und der war nie
   zu sehen. Ohne background ist der Rahmen durchsichtig, bis die fremde Seite ihren
   eigenen Hintergrund zeichnet. */
.oo-rahmen iframe { position: relative; z-index: 1; display: block; width: 100%; border: 0; }

.such-formular {
  background: var(--weiss); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.6);
}
.such-formular h3 { margin-top: .4rem; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.formular-sub { margin-top: .4rem; font-size: .9rem; color: var(--text-2); }
.formular { margin-top: 1.5rem; display: grid; gap: 1rem; }
/* Erik, IMG_0471: „Button zu lang, einkürzen". Das Entfernen von .btn--voll allein
   genügte nicht – als Rasterelement wird der Knopf sonst auf die volle Spaltenbreite
   gedehnt. justify-self holt ihn auf seine natürliche Breite zurück. */
.formular > .btn { justify-self: start; }
@media (max-width: 560px) { .formular > .btn { justify-self: stretch; } }
.feld { display: grid; gap: .35rem; min-width: 0; }
.feld > span {
  font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-2);
}
.feld input, .feld textarea, .feld select {
  font: inherit; font-size: .95rem; color: var(--text); background: var(--weiss);
  border: 1px solid var(--linie); border-radius: 9px; padding: .75rem .9rem; width: 100%;
  min-height: 44px; transition: border-color var(--t-normal) var(--ease), box-shadow var(--t-normal) var(--ease);
}
.feld textarea { resize: vertical; min-height: 5.5rem; }
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px rgba(225,0,26,.14);
}
.feld input:disabled, .feld textarea:disabled, .feld select:disabled { background: var(--papier-2); opacity: 1; }
.feld-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }
.feld--breit { grid-column: span 2; }
.feld-gruppe-titel {
  margin-top: .5rem; font-size: .66rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-2);
}
.feld-check { display: flex; gap: .7rem; align-items: flex-start; font-size: .85rem; color: var(--text-2); }
.feld-check input { width: 18px; height: 18px; margin-top: .15rem; flex: none; accent-color: var(--rot); }
.btn--voll { width: 100%; justify-content: center; }
.formular-fuss { font-size: .8rem; color: var(--text-2); text-align: center; }

/* ===== Anfrageformular, Runde AI (Eriks IMG_0490) ===================== */

/* „Datenschutzerklärung" im Einwilligungstext: sieht aus wie ein Link, ist
   aber ein Knopf – solange es die Seite noch nicht gibt, öffnet er denselben
   Hinweis wie der Eintrag im Seitenfuß. */
.text-knopf {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--rot); text-decoration: underline; text-underline-offset: 2px;
}
.text-knopf:hover { color: var(--rot-tief); }
.text-knopf:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; border-radius: 2px; }

/* Einwilligungshaken: eigenes Kästchen statt Systemvorgabe. Große Klickfläche,
   sichtbarer Rahmen, roter Haken. Der Text steht daneben, nicht darunter. */
.formular-fuss:has(.einwilligung) {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; text-align: left;
}
.einwilligung {
  display: inline-flex; align-items: center; gap: .65rem; cursor: pointer;
  padding: .55rem .85rem .55rem .6rem; border: 1px solid var(--linie);
  border-radius: 999px; background: #fff; transition: border-color var(--t-schnell) var(--ease);
}
.einwilligung:hover { border-color: var(--rot); }
/* ⚠️ Das echte Kästchen bleibt bedienbar und für Screenreader da – es wird nur
   unsichtbar gemacht, NICHT mit display:none entfernt (das nähme es aus der
   Tastaturbedienung und aus der Pflichtfeldprüfung). */
.einwilligung input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.einwilligung-kaestchen {
  flex: none; width: 22px; height: 22px; border: 2px solid #b9b9c0; border-radius: 6px;
  background: #fff; display: grid; place-items: center;
  transition: background var(--t-schnell) var(--ease), border-color var(--t-schnell) var(--ease);
}
.einwilligung-kaestchen::after {
  content: ""; width: 11px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) scale(.4); opacity: 0;
  transition: opacity var(--t-schnell) var(--ease), transform var(--t-schnell) var(--ease);
}
.einwilligung input:checked + .einwilligung-kaestchen { background: var(--rot); border-color: var(--rot); }
.einwilligung input:checked + .einwilligung-kaestchen::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.einwilligung input:focus-visible + .einwilligung-kaestchen { outline: 2px solid var(--rot); outline-offset: 3px; }
.einwilligung-text { font-size: .9rem; font-weight: 600; color: var(--text); }

.ablauf-kasten { margin-top: 1.75rem; padding: 1.25rem 1.4rem; background: var(--papier-2); border-radius: var(--radius-s); }
.ablauf-liste { list-style: none; margin-top: .9rem; display: grid; gap: .8rem; }
.ablauf-liste li { display: flex; gap: .8rem; align-items: center; font-weight: 600; font-size: .95rem; }
.ablauf-nr {
  width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--rot); color: #fff;
  display: grid; place-items: center; font-size: .82rem; font-weight: 800;
}
.konzept-hinweis { margin-top: clamp(2rem, 4vw, 3rem); font-size: .8rem; color: var(--text-inv-2); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 1100px) {
  .filter-reihe { grid-template-columns: repeat(3, 1fr); }
  .filter-reihe .btn { grid-column: span 3; justify-content: center; }
  .such-grid { grid-template-columns: 1fr; }
  .objekte--drei { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .filter-reihe { grid-template-columns: 1fr; }
  .filter-reihe .btn { grid-column: span 1; }
  .objekte--drei { grid-template-columns: 1fr; }
  .feld--breit { grid-column: span 1; }
  .kontakt-knopf { flex-direction: column; align-items: flex-start; gap: .3rem; }
}

/* ==========================================================================
   Kategorieseite „Verkaufen“
   ========================================================================== */

/* Zwei Aktions-Kacheln im Hero */
.hero-kacheln { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: clamp(1.5rem, 3.5vw, 2.25rem); }
.hero-kachel {
  display: grid; gap: .15rem; padding: .7rem 1.15rem; border-radius: var(--radius-s);
  background: rgba(18,18,20,.72); border: 1px solid rgba(255,255,255,.2); color: var(--text-inv);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform var(--t-normal) var(--ease), background var(--t-normal) var(--ease);
  min-width: 15rem;
}
.hero-kachel:hover { transform: translateY(-3px); background: rgba(18,18,20,.86); }
.hero-kachel--rot { background: var(--rot); border-color: var(--rot); color: #fff; }
.hero-kachel--rot:hover { background: var(--rot-tief); border-color: var(--rot-tief); }
.hero-kachel-kicker {
  font-size: .58rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; opacity: .9;
  line-height: 1.3;
}
.hero-kachel-titel { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.hero-kachel-fuss { font-size: .72rem; font-weight: 700; opacity: .9; line-height: 1.3; }

/* Zweispaltiger Abschnittskopf */
.zwei-spalten { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.zwei-spalten h2 { margin-top: .5rem; }
.zwei-spalten-text { padding-top: .4rem; }

/* Schwerpunkte 01 / 02 / 03 */
.schwerpunkt-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.schwerpunkt-grid--gedreht { grid-template-columns: .95fr 1.05fr; }
.schwerpunkt-nr {
  display: block; font-size: .8rem; font-weight: 800; letter-spacing: .1em; color: var(--rot);
}
.schwerpunkt-text h3 { margin-top: .5rem; font-size: clamp(1.6rem, 3vw, 2.25rem); letter-spacing: -.02em; }
.schwerpunkt-text > p { margin-top: 1rem; color: var(--text-2); max-width: 46ch; }
.dunkel .schwerpunkt-text > p { color: var(--text-inv-2); }
.betont { margin-top: 1.25rem; font-weight: 700; color: var(--text); }
.hinweis-kasten {
  margin-top: 1.75rem; padding: 1.1rem 1.3rem; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--radius-s);
}
.hinweis-kasten p { margin-top: .4rem; font-weight: 700; font-size: .95rem; line-height: 1.4; }
.vergleich-legende {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: .8rem; font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
}
/* ⚠️ Sehr kleine Schrift (10,9 px) – da reicht das Marken-Rot nicht: auf Weiß
   gemessene 3,35:1. --rot-schrift ist genau dafür da und bringt 4,98:1.       */
.vergleich-legende .rot { color: var(--rot-schrift); }
.konzept-hinweis--hell { color: var(--text-2); }

/* 3D-Rundgang mit Hotspots */
.rundgang-buehne {
  position: relative; margin-top: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/8;
}
.rundgang-buehne > img { width: 100%; height: 100%; object-fit: cover; }
.rundgang-punkt { position: absolute; display: grid; justify-items: center; gap: .4rem; }
.rundgang-plus {
  width: 34px; height: 34px; border-radius: 50%; background: var(--rot); color: #fff;
  display: grid; place-items: center; font-size: 1.25rem; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 0 rgba(225,0,26,.55);
}
@media (prefers-reduced-motion: no-preference) {
  .rundgang-plus { animation: punktPuls 2.4s ease-out infinite; }
  @keyframes punktPuls {
    0%   { box-shadow: 0 0 0 0 rgba(225,0,26,.55); }
    70%  { box-shadow: 0 0 0 14px rgba(225,0,26,0); }
    100% { box-shadow: 0 0 0 0 rgba(225,0,26,0); }
  }
}
.rundgang-marke {
  background: var(--schwarz); color: #fff; font-size: .66rem; font-weight: 700;
  padding: .25rem .6rem; border-radius: 6px; white-space: nowrap;
}
.rundgang-punkt--1 { left: 16%; top: 42%; }
.rundgang-punkt--2 { left: 74%; top: 38%; }
.rundgang-punkt--3 { left: 48%; top: 62%; }
.rundgang-start {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; gap: .2rem; justify-items: center;
  background: var(--rot); color: #fff; border-radius: var(--radius-s);
  padding: 1rem 2.25rem; min-height: 44px;
  transition: background var(--t-normal) var(--ease), transform var(--t-normal) var(--ease);
}
.rundgang-start:hover { background: var(--rot-tief); transform: translate(-50%, -50%) scale(1.04); }
.rundgang-start-zahl { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.rundgang-start-text { font-size: .82rem; font-weight: 700; }

/* Leistungen */
.leistungen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.leistung {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  transition: transform var(--t-ruhig) var(--ease), box-shadow var(--t-ruhig) var(--ease);
}
.leistung:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -26px rgba(0,0,0,.4); }
.leistung h3 { margin-top: .9rem; font-size: 1.05rem; }
.leistung p { margin-top: .5rem; font-size: .92rem; color: var(--text-2); }

/* ---------- Immobilie finden: Vorteile für Interessenten (Erik, 14.08.) ----------
   Vier Kacheln statt drei. Im Dreierraster stünde die vierte allein in einer
   zweiten Reihe – genau das 3+1, das Erik beim Teamraster schon gestört hat.  */
.leistungen--vier { grid-template-columns: repeat(4, 1fr); }

/* Der Finanzierungshinweis. Erik: „optisch etwas hervorheben, aber nicht als
   großen separaten Werbeblock". Deshalb: kein eigener Abschnitt, sondern eine
   abgesetzte Fläche im selben Raster – Papierton statt Weiß, damit sie sich vom
   Abschnitt abhebt, ohne ihn zu dominieren.                                   */
.finanztipp {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
  background: var(--flaeche-grau); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.1rem);
}
.finanztipp-marke {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rot-schrift);
}
.finanztipp h3 { margin-top: .45rem; font-size: clamp(1.1rem, 2vw, 1.35rem); }
.finanztipp p { margin-top: .55rem; font-size: .94rem; color: var(--text-2); max-width: 62ch; }
/* Erik, 14.08. 14:47: hier soll exakt die Partnerkarte von „Über uns" stehen.
   Die bringt ihre eigene dunkle Fläche und ihre eigenen Textfarben mit –
   deshalb hier NUR die Breite regeln und KEINE Farben. Alles andere kommt aus
   .partner-karte, damit beide Stellen garantiert gleich aussehen.             */
.finanztipp .partner-karte { min-width: 288px; max-width: 340px; }

@media (max-width: 1000px) {
  .zwei-spalten, .schwerpunkt-grid, .schwerpunkt-grid--gedreht { grid-template-columns: 1fr; }
  .schwerpunkt-grid--gedreht .schwerpunkt-text { order: 2; }
  .leistungen { grid-template-columns: repeat(2, 1fr); }
  .leistungen--vier { grid-template-columns: repeat(2, 1fr); }
  /* Die Visitenkarte rutscht unter den Text, sonst wird sie zu schmal. */
  .finanztipp { grid-template-columns: 1fr; }
  .rundgang-buehne { aspect-ratio: 16/10; }
}
@media (max-width: 700px) {
  .leistungen, .leistungen--vier { grid-template-columns: 1fr; }
  .finanztipp .partner-karte { min-width: 0; max-width: none; }
  .hero-kacheln { flex-direction: column; }
  .hero-kachel { min-width: 0; }
  .rundgang-start { padding: .8rem 1.4rem; }
  .rundgang-start-zahl { font-size: 1.1rem; }
  .rundgang-punkt--3 { display: none; }
}

/* ==========================================================================
   Vermieten – Portale / Partnerkarten
   ========================================================================== */
.portale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); }
.portal {
  background: var(--schwarz-2); border: 1px solid var(--schwarz-3); border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  transition: transform var(--t-ruhig) var(--ease), border-color var(--t-ruhig) var(--ease);
}
.portal:hover { transform: translateY(-4px); border-color: var(--rot); }
.portal h3 { font-size: 1.02rem; color: #fff; }
.portal p { margin-top: .5rem; font-size: .9rem; color: var(--text-inv-2); }

/* ==========================================================================
   Wissen
   ========================================================================== */
.hero--kompakt { min-height: 52vh; }
.themen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.thema {
  padding: .65rem 1.2rem; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center;
  background: rgba(18,18,20,.6); border: 1px solid rgba(255,255,255,.28); color: var(--text-inv);
  font-weight: 700; font-size: .88rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background var(--t-normal) var(--ease), transform var(--t-normal) var(--ease);
}
.thema:hover { background: var(--rot); border-color: var(--rot); color: #fff; transform: translateY(-2px); }
/* Erik, 15.08.2026 (IMG_0497): „roten Button dauerhaft so einblenden".
   Sein Bildschirmfoto stammt vom iPad – dort gibt es kein Hover, der rote Knopf war
   also der angetippte Zustand. Damit dauerhaft ein roter Knopf zu sehen ist UND er
   etwas aussagt, markiert er jetzt den Abschnitt, in dem man gerade liest.
   Beim Seitenaufruf ist das der erste („Häufige Fragen") – genau Eriks Bild. */
.thema.ist-hier {
  background: var(--rot); border-color: var(--rot); color: #fff;
}
.thema.ist-hier:hover { transform: none; }

/* Keine obere Trennlinie: Die erste Gruppenüberschrift „Für Kaufinteressenten“
   beginnt den FAQ-Bereich bereits mit ihrer eigenen roten Unterstreichung. */
.faq { max-width: 60rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.faq-punkt { border-bottom: 1px solid var(--linie); }
.faq-punkt summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.02rem; min-height: 44px;
  transition: color var(--t-normal) var(--ease);
}
.faq-punkt summary::-webkit-details-marker { display: none; }
.faq-punkt summary:hover { color: var(--rot); }
.faq-punkt summary:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; border-radius: 4px; }
.faq-zeichen { position: relative; width: 16px; height: 16px; flex: none; }
.faq-zeichen::before, .faq-zeichen::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--rot);
  transform: translate(-50%, -50%); transition: transform var(--t-ruhig) var(--ease);
}
.faq-zeichen::before { width: 16px; height: 2px; }
.faq-zeichen::after  { width: 2px; height: 16px; }
.faq-punkt[open] .faq-zeichen::after { transform: translate(-50%, -50%) scaleY(0); }
/* Sanftes Auf- und Zuklappen: die Antwort wächst über die Grid-Zeilenhöhe,
   das lässt sich – anders als height:auto – flüssig animieren. */
.faq-antwort {
  display: grid; grid-template-rows: 0fr; max-width: 62ch;
  transition: grid-template-rows 320ms var(--ease), opacity 260ms var(--ease);
  opacity: 0;
}
.faq-antwort > p { overflow: hidden; color: var(--text-2); font-size: .97rem; }
.faq-punkt.ist-offen .faq-antwort { grid-template-rows: 1fr; opacity: 1; }
.faq-punkt.ist-offen .faq-antwort > p { padding-bottom: 1.3rem; }
@media (prefers-reduced-motion: reduce) { .faq-antwort { transition: none; } }
.faq-fuss { margin-top: 1.5rem; font-size: .8rem; color: var(--text-2); }

.ratgeber { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.ratgeber-karte {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--t-ruhig) var(--ease), box-shadow var(--t-ruhig) var(--ease);
}
.ratgeber-karte:hover { transform: translateY(-5px); box-shadow: 0 20px 44px -28px rgba(0,0,0,.45); }
.ratgeber-bild { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--papier-2); }
.ratgeber-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.ratgeber-karte:hover .ratgeber-bild img { transform: scale(1.04); }
.ratgeber-kat {
  position: absolute; left: .8rem; top: .8rem; background: var(--schwarz); color: #fff;
  font-size: .64rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: .3rem .65rem; border-radius: 6px;
}
.ratgeber-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.ratgeber-body h3 { font-size: 1rem; line-height: 1.35; }
.ratgeber-meta { margin-top: .45rem; font-size: .8rem; color: var(--text-2); }
.ratgeber-body .txtlink { margin-top: auto; padding-top: 1rem; align-self: flex-start; }

/* Die Zahl der Kacheln hat sich in dieser Woche dreimal geändert (6 → 4 → 6 → 5).
   Deshalb kein festes Spaltenraster mehr, sondern umbrechende Reihen mit zentrierter
   letzter Zeile: So entsteht bei JEDER Anzahl ein ausgewogenes Bild statt eines Lochs
   am Zeilenende. */
/* Erik, 15.08.2026 (IMG_0498): Skizze eines 2×2-Blocks, „4 Kacheln so anordnen".
   Vorher war es ein zentrierter Flex-Umbruch – bei vier Karten ergab das 3 + 1,
   also eine einsame Karte in der zweiten Zeile. Jetzt ein festes Raster mit zwei
   Spalten, begrenzt in der Breite, damit der Block als Viererblock zu erkennen ist. */
.markt {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 820px; margin-inline: auto;
}
.markt-karte { max-width: none; }
.markt-karte { background: var(--schwarz-2); border: 1px solid var(--schwarz-3); border-radius: var(--radius); padding: 1.5rem; }
.markt-karte h3 { font-size: .95rem; color: var(--text-inv-2); font-weight: 600; }
.markt-wert { margin-top: .6rem; font-size: clamp(1.25rem, 2.1vw, 1.7rem); font-weight: 800; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.markt-einheit { margin-top: .2rem; font-size: .78rem; color: var(--text-inv-2); }

/* Marktdaten (Erik, 12.08.): echte IVD-Werte, deshalb mehr Zeilen je Karte */
.markt-art    { margin-top: .15rem; font-size: .74rem; font-weight: 800; letter-spacing: .1em;
                text-transform: uppercase; color: var(--rot-hell); }
.markt-mittel { margin-top: .55rem; padding-top: .55rem; border-top: 1px solid rgba(255,255,255,.14);
                font-size: .8rem; color: var(--text-inv-2); }
.markt-fakten {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
}
.markt-fakten > div {
  display: grid; gap: .2rem; padding: 1.1rem 1.25rem;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
}
.markt-fakt-wert  { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: #fff; line-height: 1; }
.markt-fakt-titel { font-size: .8rem; font-weight: 700; color: #fff; }
.markt-fakt-sub   { font-size: .78rem; color: var(--text-inv-2); }
/* Nur noch eine Social-Karte (Erik, 13.08.): volle Breite statt halber Spalte. */
.social-grid--einzeln { grid-template-columns: 1fr; }

/* ===================== Band zum Blättern (Erik, 13.08.) =====================
   Beiträge und Videos stehen nebeneinander statt untereinander; die Pfeile
   schieben jeweils um eine Kartenbreite weiter. Ohne JavaScript bleibt es ein
   normal wischbarer Bereich – die Pfeile sind nur eine Zugabe. */
.band { position: relative; margin-top: clamp(2rem, 4vw, 3rem); }
.band-spur {
  display: grid; grid-auto-flow: column;
  /* Feste Spaltenbreite: mit minmax(0, …) schrumpfen die Karten, statt zu überlaufen. */
  grid-auto-columns: calc((100% - 2 * 1.25rem) / 3);
  gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; padding-bottom: .25rem;
}
.band-spur::-webkit-scrollbar { display: none; }
.band-teil { scroll-snap-align: start; }
/* Erik, 13.08. (Mail L, Punkt 1): Runde, klar erkennbare Knöpfe, deutlich über den
   Rand der Kacheln gesetzt. Der aktive Pfeil rot mit weißem Symbol. Der gesperrte
   Pfeil zurückhaltend, aber NICHT so blass wie zuvor — er soll weiterhin als
   Slider-Navigation lesbar bleiben. Auf dem iPad gibt es kein Hover, deshalb muss
   der Ruhezustand schon nach Knopf aussehen. */
.band-pfeil {
  position: absolute; top: 38%; transform: translateY(-50%);
  width: 54px; height: 54px; border-radius: 50%; cursor: pointer; z-index: 5;
  background: var(--rot); border: 2px solid #fff; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px -4px rgba(225,0,26,.55), 0 2px 8px rgba(0,0,0,.25);
  transition: background var(--t-normal) var(--ease), transform var(--t-normal) var(--ease),
              border-color var(--t-normal) var(--ease), color var(--t-normal) var(--ease);
}
.band-pfeil:hover { background: #b40015; transform: translateY(-50%) scale(1.08); }
.band-pfeil:active { transform: translateY(-50%) scale(.96); }
/* Gesperrt: weiß mit grauem Rand und grauem Pfeil – ruhig, aber eindeutig ein Knopf.
   Kein opacity-Verblassen mehr (das war Eriks Kritik). */
.band-pfeil[disabled] {
  cursor: default; background: #fff; border-color: var(--linie);
  color: var(--text-2); box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.band-pfeil[disabled]:hover { background: #fff; transform: translateY(-50%); }
.band-pfeil svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.6; }
.band-pfeil--links  { left: -30px; }
.band-pfeil--rechts { right: -30px; }

/* Fortschrittsanzeige unter den Kacheln (Erik, Mail L Punkt 2): der sichtbare
   Ausschnitt rot, die übrigen Positionen grau. Bewusst zurückhaltend. */
.band-punkte {
  display: flex; justify-content: center; gap: .4rem;
  margin-top: 1.5rem; list-style: none; padding: 0;
}
/* ⚠️ Der sichtbare Balken bleibt 4 px schlank – so wollte Erik es. Die
   TREFFERFLÄCHE ist es aber nicht: Gemessen am 16.08.2026 waren die Balken
   26x4 bzw. 40x4, und 4 px trifft auf dem Telefon niemand zuverlässig.
   Gelöst über einen unsichtbaren Streifen ober- und unterhalb (::after), der
   die Fläche auf 24 px Höhe bringt, ohne das Aussehen zu ändern.
   Nicht durch echtes padding ersetzen – das würde den Balken dick machen. */
.band-punkt {
  width: 26px; height: 4px; border-radius: 999px; border: 0; padding: 0;
  background: var(--linie); cursor: pointer;
  position: relative;
  transition: background var(--t-normal) var(--ease), width var(--t-normal) var(--ease);
}
.band-punkt::after {
  content: ''; position: absolute;
  left: 0; right: 0; top: -10px; bottom: -10px;
}
.band-punkt:hover { background: var(--text-2); }
.band-punkt[aria-current="true"] { background: var(--rot); width: 40px; }
.dunkel .band-punkt { background: rgba(255,255,255,.22); }
.dunkel .band-punkt[aria-current="true"] { background: var(--rot); }
.band-punkte[hidden] { display: none; }

@media (max-width: 1100px) {
  .band-spur { grid-auto-columns: calc((100% - 1.25rem) / 2); }
  /* Auf schmalen Ansichten sitzen die Pfeile im Bild – dort brauchen sie
     zusätzlich einen weißen Ring, damit sie sich vom Foto abheben. */
  .band-pfeil--links  { left: 6px; }
  .band-pfeil--rechts { right: 6px; }
  .band-pfeil { box-shadow: 0 6px 20px -4px rgba(225,0,26,.55), 0 0 0 4px rgba(255,255,255,.65); }
  .band-pfeil[disabled] { box-shadow: 0 2px 10px rgba(0,0,0,.12), 0 0 0 4px rgba(255,255,255,.65); }
}
@media (max-width: 700px) { .band-spur { grid-auto-columns: 86%; } }
/* ===== Video im Büro-Monitor (Erik, 13.08., Mail R Punkt 10) =====
   Die Fläche liegt genau auf dem schwarzen Bildschirm im Foto: 29 % von links,
   23 % von oben, 42,5 % breit, 43,8 % hoch (am Bild ausgemessen). */
.buero-rahmen { position: relative; display: block; }
.buero-rahmen .buero-bild { display: block; width: 100%; height: auto; }
.monitor-flaeche {
  position: absolute; left: 29%; top: 23%; width: 42.5%; height: 43.8%;
  border: 0; padding: 0; background: #000; cursor: pointer; overflow: hidden;
  display: grid; place-items: center; color: #fff;
}
.monitor-flaeche iframe, .monitor-flaeche video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover;
}
.monitor-hinweis { display: grid; justify-items: center; gap: .4rem; padding: .5rem; text-align: center; }
.monitor-play {
  width: clamp(34px, 4vw, 52px); aspect-ratio: 1; border-radius: 50%;
  background: var(--rot); display: grid; place-items: center;
  transition: transform var(--t-normal) var(--ease);
}
.monitor-play svg { width: 45%; fill: #fff; }
.monitor-flaeche:hover .monitor-play { transform: scale(1.1); }
.monitor-text  { font-size: clamp(.7rem, 1.2vw, .95rem); font-weight: 700; }
.monitor-klein { font-size: clamp(.55rem, .8vw, .72rem); color: rgba(255,255,255,.62); max-width: 26ch; line-height: 1.35; }
@media (max-width: 560px) { .monitor-klein { display: none; } }

/* ===== Anklickbare Kacheln und Beitragsseite (Erik, 13.08., Mail R) =====
   Die ganze Kachel ist ein Verweis; damit bleibt die Klickfläche groß und der
   Aufbau der Karte unverändert. */
.beitrag-ziel { display: flex; flex-direction: column; height: 100%; color: inherit; }
.beitrag-ziel:hover .beitrag-bild img { transform: scale(1.04); }
.beitrag-ziel:hover h3 { color: var(--rot); }
.beitrag-ziel .txtlink { margin-top: auto; padding-top: .8rem; }

.beitrag-kopf { background: var(--schwarz); color: var(--text-inv); padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 4vw, 3rem); }
.beitrag-kopf h1 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.1; margin-top: .6rem; }
.beitrag-kopf .lead { margin-top: 1.1rem; color: var(--text-inv-2); max-width: 62ch; }
.beitrag-meta { margin-top: 1rem; font-size: .82rem; color: var(--text-inv-2); }
.beitrag-weg { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rot-hell); }
.beitrag-weg a { color: inherit; }
.beitrag-bahn { max-width: 820px; }
.beitrag-grossbild { margin: clamp(-2.5rem, -4vw, -1.5rem) auto 0; border-radius: var(--radius); overflow: hidden; position: relative; z-index: 2; }
.beitrag-grossbild img { width: 100%; height: auto; display: block; }
.beitrag-inhalt h2 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin: 2.2rem 0 .7rem; }
.beitrag-inhalt p  { margin-bottom: 1rem; line-height: 1.75; }
.beitrag-inhalt ul { margin: 0 0 1.2rem 1.1rem; }
.beitrag-inhalt li { margin-bottom: .45rem; line-height: 1.7; }
.beitrag-aktion {
  margin-top: 2.5rem; padding: clamp(1.35rem, 4vw, 2rem);
  background: var(--papier); border-left: 5px solid var(--rot); border-radius: var(--radius);
}
.beitrag-inhalt .beitrag-aktion h2 { margin: .35rem 0 .65rem; }
.beitrag-aktion .btn { margin-top: .5rem; }
.beitrag-quellen { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.beitrag-inhalt .beitrag-quellen h2 { margin: 0 0 .8rem; font-size: 1.1rem; }
.beitrag-quellen ul { margin-bottom: 0; }
.beitrag-quellen a { color: var(--rot-schrift); text-decoration: underline; text-underline-offset: 3px; }
.beitrag-quellen a:hover { color: var(--rot-tief); }
.beitrag-weiter { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.beitrag-weiter-teil {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.1rem 1.3rem; color: inherit;
  transition: border-color var(--t-normal) var(--ease), transform var(--t-normal) var(--ease);
}
.beitrag-weiter-teil:hover { border-color: var(--rot); transform: translateY(-2px); }
.beitrag-weiter-teil--rechts { text-align: right; }
.beitrag-weiter-titel { display: block; font-weight: 700; margin-top: .3rem; }
@media (max-width: 700px) { .beitrag-weiter { grid-template-columns: 1fr; } }

/* Der Text der Blogbeiträge wird gekürzt, damit die Karten gleich hoch bleiben. */
.beitrag-text {
  margin-top: .6rem; font-size: .9rem; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* Zwischenüberschriften in den häufigen Fragen (Erik, 13.08.) */
.faq-gruppe {
  margin-top: clamp(2rem, 4vw, 2.8rem); padding-bottom: .6rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rot); border-bottom: 2px solid var(--rot);
}
.faq-gruppe:first-child { margin-top: 0; }

/* ⚠️ --text-inv-2 ist die HELLE Nebenschrift für dunkle Abschnitte. Auf
   wissen.php stimmt das (dunkler Marktdaten-Block), auf referenzen.php steht
   dieselbe Klasse aber in einem weißen Abschnitt – dort gemessene 2,34:1.
   Deshalb hell nur noch ausdrücklich innerhalb von .dunkel.                   */
.markt-quelle {
  margin-top: clamp(1.5rem, 3vw, 2rem); font-size: .8rem; color: var(--text-2); max-width: 78ch;
}
.dunkel .markt-quelle { color: var(--text-inv-2); }
@media (max-width: 780px) {
  .markt-fakten { grid-template-columns: 1fr; }
  /* Am Telefon passen zwei Preiskarten nebeneinander nicht mehr lesbar. */
  .markt { grid-template-columns: 1fr; }
}

.social-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.social-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 1.8rem); }
.social-kopf { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rot); }
.social-karte > p { margin-top: .6rem; color: var(--text-2); font-size: .95rem; }
.social-platzhalter {
  margin: 1.25rem 0; padding: 2rem 1.25rem; text-align: center;
  background: var(--papier-2); border: 1px dashed var(--linie); border-radius: var(--radius-s);
}
.social-platzhalter p { font-size: .88rem; color: var(--text-2); margin-bottom: 1rem; }

/* ==========================================================================
   Über uns
   ========================================================================== */
.werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.wert-karte-klein {
  background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.75rem 1.6rem;
  transition: transform var(--t-ruhig) var(--ease), box-shadow var(--t-ruhig) var(--ease);
}
.wert-karte-klein:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -26px rgba(0,0,0,.35); }
.wert-nr-gross { font-size: 1.6rem; font-weight: 800; color: var(--rot); letter-spacing: -.02em; }
.wert-karte-klein h3 { margin-top: .7rem; font-size: 1.12rem; }
.wert-karte-klein p { margin-top: .6rem; font-size: .94rem; color: var(--text-2); }

/* Team (Erik, 12.08.): Fünf Karten als 4+1 wirkten unausgewogen – Amy klebte
   darunter. Jetzt: der Inhaber breit oben, darunter zwei Reihen zu zweit.
   Die Karten liegen dafür quer (Bild links, Text rechts), so wie Erik es von
   seiner bisherigen Website kennt. */
.personen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.person { display: grid; grid-template-columns: 38% 1fr; align-items: stretch; }
.person--breit { grid-column: 1 / -1; grid-template-columns: clamp(200px, 22%, 280px) 1fr; }
.person {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
  transition: transform var(--t-ruhig) var(--ease), box-shadow var(--t-ruhig) var(--ease);
}
.person:hover { transform: translateY(-5px); box-shadow: 0 20px 44px -28px rgba(0,0,0,.45); }
/* Querformat-Karte: die Bildspalte füllt die Zeilenhöhe. Ein festes Seitenverhältnis
   erzwingt hier eine Breite, die über die Spalte hinausläuft – genau dadurch lagen
   bei 768 px Telefonnummer und Gesicht übereinander. */
.person-bild { overflow: hidden; background: var(--papier-2); height: 100%; }
.person--breit .person-bild { min-height: 0; }
.person-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 400ms var(--ease); }
.person:hover .person-bild img { transform: scale(1.04); }
.person-body { padding: 1.2rem 1.35rem 1.45rem; display: flex; flex-direction: column; }
.person--breit .person-body { padding: clamp(1.4rem, 3vw, 2.2rem); justify-content: center; }
.person--breit .person-body h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.person--breit .person-text { font-size: .95rem; max-width: 60ch; }
.person-body h3 { font-size: 1.08rem; }
.person-rolle { margin-top: .2rem; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rot); }
.person-text { margin-top: .7rem; font-size: .9rem; color: var(--text-2); }
.person-kontakt { margin-top: auto; padding-top: .9rem; font-size: .88rem; }
/* Leerer Platzhalter bei den selbstständigen Partnern (Erik, 13.08.): hält den
   unteren Abstand, damit alle Teamkarten gleich aufgebaut bleiben. */
.person-kontakt--leer { padding-top: 0; min-height: .9rem; }
.person-kontakt a { color: var(--text); font-weight: 600; }
.person-kontakt a:hover { color: var(--rot); }

/* .amy entfallen – Amy sitzt seit 12.08. als fünfte Karte im Team-Raster. */
.personen-hinweis { margin-top: 1.5rem; font-size: .8rem; color: var(--text-2); }
@media (max-width: 900px) {
  .personen { grid-template-columns: 1fr; }
  .person, .person--breit { grid-template-columns: 40% 1fr; }
}
@media (max-width: 560px) {
  .person, .person--breit { grid-template-columns: 1fr; }   /* Bild über den Text */
  /* ⚠️ Erik, 14.08. mit iPhone-Foto: „bei der mobilen Variante zeigt es bei
     meinem iPhone 15Pro nur teile unserer Gesichter bei Über uns an."
     Nachgemessen bei 393 px: das feste 4:3-Format zeigte von den Hochformat-
     Porträts nur 49,9 % der Bildhöhe – also die obere Hälfte, das Kinn fiel weg.
     Gestapelt braucht es kein festes Seitenverhältnis: jedes Bild bringt sein
     eigenes mit. Die Porträts stehen dann hoch, Amys Querformat bleibt quer.  */
  .person-bild, .person--breit .person-bild { aspect-ratio: auto; height: auto; }
  .person-bild img { height: auto; }
}

.qualifikation-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.vorteile--hell li { color: var(--text); }
.siegel { display: flex; gap: 2rem; align-items: center; justify-content: center; flex-wrap: wrap; }
/* Erik, 15.08.2026: drei Auszeichnungen „optisch einheitlich".
   ⚠️ Vorher wurden alle drei auf dieselbe BREITE gezwungen. Bei drei
      verschiedenen Seitenverhältnissen ergibt das drei verschiedene Höhen –
      und die schmalen Siegel werden dabei am stärksten hochgezogen, also
      unscharf (gemessen 1,25x und 1,54x statt der nötigen 1,8x).
      Logos richtet man an der HÖHE aus. */
.siegel img { height: clamp(96px, 12vw, 132px); width: auto; max-width: 30%; }
.buero-bild { width: 100%; border-radius: var(--radius); aspect-ratio: 10/7; object-fit: cover; }

@media (max-width: 1100px) {
  .portale, .ratgeber, .markt { grid-template-columns: repeat(2, 1fr); }
  .werte { grid-template-columns: 1fr; }
  .social-grid { grid-template-columns: 1fr; }
  /* Erik, 15.08.2026 (IMG_0505): Handschrift „Hochkantformat iPad Pro 12.9 –
     hier hin schieben“, mit einem Bogen von den drei Siegeln nach oben neben
     die Aufzählung.
     Ursache: .qualifikation-grid brach hier zusammen mit .social-grid schon bei
     1100 px auf eine Spalte um. Das iPad Pro 12,9" ist im Hochformat 1024 px
     breit – die Siegel landeten also darunter statt daneben.
     ⚠️ Der Umbruch steht jetzt tiefer (siehe eigene Regel weiter unten). Wer ihn
        wieder anhebt, schiebt die Siegel auf dem iPad erneut nach unten. */
}
@media (max-width: 860px) {
  /* Erst hier wird es für zwei Spalten wirklich zu eng: die drei Siegel
     brauchen nebeneinander rund 280 px, die rechte Spalte hat bei 860 px
     noch etwa 320 px. Nachgemessen bei 1024 px (iPad Pro 12,9" hochkant)
     und bei 768 px. */
  .qualifikation-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .portale, .ratgeber, .markt { grid-template-columns: 1fr; }
}

/* Touch-Flächen ab 44 px – gilt auf allen Breiten, nicht nur mobil:
   Tablets im Querformat (1024 px) werden ebenfalls mit dem Finger bedient.
   padding + negatives margin vergrößern die Fläche, ohne die Optik zu ändern. */
.fuss-sp ul { gap: 1.4rem; }
.fuss-sp a, .fuss-sp .fuss-link,
.fuss-recht-links a, .fuss-recht-links .fuss-link,
.fuss-social a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; }
.fuss-recht-links { gap: 1.4rem 1.25rem; }
.fuss-social { gap: 1.25rem; }
.nav a { padding-block: .8rem; margin-block: -.8rem; }
.kopf-tel { padding-block: .8rem; margin-block: -.8rem; display: inline-block; }

/* ==========================================================================
   Helle Karten in dunklen Abschnitten
   .dunkel vererbt helle Schrift – in weißen Karten wäre das Weiß auf Weiß.
   Deshalb dort die normale Textfarbe wiederherstellen.
   ========================================================================== */
.dunkel .such-formular,
.dunkel .such-formular h3,
.dunkel .ablauf-kasten { color: var(--text); }
/* ⚠️ Heller Kasten IM dunklen Abschnitt: der Kicker bekäme von `.dunkel .kicker`
   das helle Rot und von `.kicker` das Marken-Rot – auf dem hellen Grund
   gemessene 4,29:1. --rot-schrift ist genau für kleine rote Schrift auf hellem
   Grund da und bringt hier 5,54:1.                                            */
/* ⚠️ Der Kasten liegt IM .such-formular, und `.dunkel .such-formular .kicker`
   (weiter unten, Zeile ~1839) hat dieselbe Gewichtung und gewinnt dadurch über
   die Reihenfolge. Deshalb hier eine Klasse mehr, sonst greift die Regel nicht.
   Genau das ist mir beim ersten Versuch passiert.                             */
.dunkel .such-formular .ablauf-kasten .kicker { color: var(--rot-schrift); }
.dunkel .such-formular p,
.dunkel .such-formular .formular-sub,
.dunkel .such-formular .formular-fuss { color: var(--text-2); }
.dunkel .such-formular .feld > span,
.dunkel .such-formular .feld-gruppe-titel,
.dunkel .such-formular .feld-check { color: var(--text-2); }
.dunkel .ablauf-liste li { color: var(--text); }
.dunkel .such-formular .kicker { color: var(--rot); }

/* ===================== Online-Wertanalyse (IWA Lead) ===================== */
/* Der Anbieter liefert ein iframe mit fester Breite (802 px). Der Rahmen zentriert
   es, gibt ihm eine Karte im Seitenstil und lässt es auf schmalen Geräten mitgehen. */
.iwa-rahmen {
  margin-top: clamp(2rem, 4vw, 3rem);
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.4);
  padding: clamp(1rem, 2.5vw, 1.8rem);
  overflow-x: auto;
}
.iwa-rahmen #iwa-widget { margin: 0 auto; max-width: 100%; }
.iwa-rahmen iframe { border: 0; max-width: 100%; display: block; margin: 0 auto; }
.iwa-hinweis { text-align: center; color: var(--text-2); }
.iwa-fuss {
  margin-top: 1rem;
  font-size: .86rem;
  color: var(--text-2);
  text-align: center;
  max-width: 68ch;
  margin-inline: auto;
}

/* ===================== YouTube-Videos ===================== */
.yt-grid {
  display: grid;
  /* min(280px, 100%) statt 280px: sonst bleibt die Spalte auf schmalen Geräten
     280 px breit und schiebt die ganze Seite zur Seite. */
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
}
.yt-karte {
  min-width: 0;          /* Rasterfelder schrumpfen sonst nicht unter ihren Inhalt */
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.yt-bild {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}
.yt-bild img {
  width: 100%; height: 100%; max-width: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.yt-karte:hover .yt-bild img { transform: scale(1.04); }
.yt-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,.18);
  transition: background .25s ease;
}
.yt-karte:hover .yt-play { background: rgba(0,0,0,.32); }
.yt-play span {
  width: 62px; height: 44px;
  border-radius: 12px;
  background: var(--rot);
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.yt-play span::before {
  content: "";
  width: 0; height: 0;
  border-left: 15px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 3px;
}
.yt-text { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.yt-titel { font-weight: 700; line-height: 1.35; }
.yt-datum { font-size: .84rem; color: var(--text-2); }
.yt-hinweis {
  font-size: .84rem;
  color: var(--text-2);
  margin-top: 1.2rem;
  text-align: center;
}

/* Ein Profil, dessen Adresse noch fehlt: sieht aus wie die anderen Punkte,
   erklärt beim Klick aber, was noch gebraucht wird. */
.fuss-offen {
  font: inherit;
  font-size: .9rem;
  color: var(--text-inv-2);
  background: none;
  border: 0;
  padding: .5rem 0;
  margin-block: -.5rem;
  cursor: pointer;
  border-bottom: 1px dashed #4a4a54;
  transition: color var(--t-normal) var(--ease), border-color var(--t-normal) var(--ease);
}
.fuss-offen:hover { color: #fff; border-bottom-color: var(--rot); }

/* Der Assistenten-Knopf liegt fest über der Seite. Auf schmalen Geräten stand er
   am Seitenende auf der Zeile mit dem Copyright-Hinweis – deshalb hier unten Luft. */
@media (max-width: 700px) {
  .fuss { padding-bottom: 5.5rem; }
}

/* ===================== Zugangsdaten-Formular (nur für Erik) ===================== */
.zug-form {
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: grid;
  gap: 1.35rem;
}
.zug-feld { display: grid; gap: .45rem; }
.zug-feld label { font-weight: 700; font-size: .95rem; }
.zug-feld input,
.zug-feld textarea {
  font: inherit;
  font-size: 1rem;
  padding: .8rem .9rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  background: var(--papier);
  color: var(--text);
  width: 100%;
  transition: border-color var(--t-normal) var(--ease), background var(--t-normal) var(--ease);
}
.zug-feld input:focus,
.zug-feld textarea:focus {
  outline: 2px solid var(--rot);
  outline-offset: 1px;
  background: #fff;
  border-color: var(--rot);
}
.zug-feld textarea { resize: vertical; min-height: 5.5rem; }
.zug-schon {
  font-size: .84rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.zug-aktion { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: .4rem; }
.zug-stand { font-size: .86rem; color: var(--text-2); }
.zug-meldung {
  margin-top: 1.5rem;
  padding: .95rem 1.1rem;
  border-radius: var(--radius-s);
  font-weight: 600;
}

/* Fehlerhinweis direkt am Feld, seit dem Formularversand vom 18.08.2026.
   ⚠️ Nicht nur rot einfärben: Wer Rot und Grün nicht unterscheidet, sieht sonst
      gar nichts. Deshalb steht ein Klartextsatz da, und das Feld daneben bleibt
      lesbar. Der Satz sagt außerdem, WAS zu tun ist, nicht nur dass etwas fehlt. */
.feld-fehler {
  display: block; margin-top: .35rem;
  font-size: .84rem; font-weight: 600; line-height: 1.4;
  color: var(--rot);
}
.zug-gut      { background: #e8f5ea; color: #16612a; border: 1px solid #b9dfc2; }
.zug-schlecht { background: #fdeaec; color: #9b0016; border: 1px solid #f3c2c8; }

/* ===================== Facebook verbinden ===================== */
.fb-vorher {
  margin-top: 1.8rem;
  background: #fff;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--rot);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}
.fb-vorher h3 { font-size: 1.05rem; margin-bottom: .7rem; }
.fb-vorher p { color: var(--text-2); margin-bottom: .7rem; }
.fb-vorher p:last-child { margin-bottom: 0; }
.fb-adresse {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92rem;
  background: var(--papier-2);
  border-radius: var(--radius-s);
  padding: .7rem .85rem;
  word-break: break-all;
  color: var(--text) !important;
  user-select: all;
}
.fb-probe { list-style: none; display: grid; gap: .8rem; margin-top: 1rem; }
.fb-probe li {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  padding: .9rem 1rem;
  font-size: .95rem;
}
.fb-datum { display: block; font-size: .82rem; color: var(--text-2); margin-bottom: .2rem; }

/* Läuft der Rundgang, braucht er eine echte Höhe – das Element <ogulo-tour>
   bringt keine eigene mit (genau das ist der Unterschied zwischen den beiden
   Code-Varianten, die Ogulo anbietet). Nach oben begrenzt, damit der Rundgang
   auf großen Bildschirmen nicht ins Riesenhafte wächst. */
.ogulo-laeuft {
  position: relative;
  background: #111;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: min(72vh, 640px);
  aspect-ratio: auto;
}
.ogulo-laeuft ogulo-tour { display: block; width: 100%; height: min(72vh, 640px); }
.ogulo-laeuft iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Rundgang direkt auf der Seite (Seite „Verkaufen") – wie auf immoteufel.de.
   <ogulo-tour> bringt keine eigene Höhe mit; ohne diese Angabe fällt der
   Rundgang zu einem Strich zusammen. Nach oben begrenzt, damit er auf großen
   Bildschirmen nicht ins Riesenhafte wächst. */
/* Textblock über dem Rundgang auf der Startseite (Erik, 12.08.) */
.rundgang-kopf { margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 62ch; }
.rundgang-kopf h3 { margin-top: .5rem; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
/* ⚠️ Hier stand --text-inv-2 (helle Schrift für DUNKLE Flächen). Der Block
   kommt aber nur EINMAL vor – auf der Startseite, auf heller Fläche.
   Gemessen: 1,95:1, praktisch unlesbar. (Gefunden am 14.08. beim Nachmessen;
   „Verkaufen" nutzt für den Rundgang eine andere Struktur.)
   Die .dunkel-Fassung steht als Vorsorge da, falls der Block später einmal
   in einem dunklen Abschnitt landet. */
.rundgang-kopf p { margin-top: .8rem; color: var(--text-2); }
.dunkel .rundgang-kopf p { color: var(--text-inv-2); }

.rundgang-direkt {
  position: relative;
  isolation: isolate;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius);
  overflow: hidden;
  background: #111;
  height: min(80vh, 680px);
}
.rundgang-vorschau {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #111;
  pointer-events: none;
  transition: opacity 280ms var(--ease);
}
.rundgang-vorschau::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(10,10,12,.63), rgba(10,10,12,.28));
}
.rundgang-vorschau img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.13) translate3d(-3.5%, 0, 0);
  animation: rundgang-schwenk 12s ease-in-out infinite alternate;
  animation-play-state: paused;
  will-change: transform;
}
.rundgang-direkt.vorschau-laeuft .rundgang-vorschau img {
  animation-play-state: running;
}
.rundgang-direkt.ist-geladen .rundgang-vorschau {
  opacity: 0;
}
@keyframes rundgang-schwenk {
  from { transform: scale(1.13) translate3d(-3.5%, 0, 0); }
  to   { transform: scale(1.13) translate3d(3.5%, 0, 0); }
}
.rundgang-direkt .dienst-sperre {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.rundgang-direkt .sperre-inhalt {
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--radius);
  background: rgba(15,15,17,.78);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}
.rundgang-direkt .sperre-marke { color: var(--rot-hell); }
.rundgang-direkt .sperre-titel { color: var(--text-inv); }
.rundgang-direkt .sperre-text { color: var(--text-inv-2); }
.rundgang-direkt .sperre-knoepfe .btn--linie {
  border-color: rgba(255,255,255,.6);
  color: #fff;
}
.rundgang-direkt ogulo-tour { display: block; width: 100%; height: 100%; }
.rundgang-direkt iframe {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #111;
}
@media (max-width: 700px) {
  .rundgang-direkt { height: min(70vh, 480px); }
}
@media (prefers-reduced-motion: reduce) {
  .rundgang-vorschau img { animation: none; transform: scale(1.04); }
}

/* Knopf unter den Referenzen („Weitere Referenzen ansehen") */
.referenzen-aktion { margin-top: clamp(1.5rem, 3vw, 2.2rem); text-align: center; }

/* ===== Referenzen als eigener dunkler Abschnitt (Erik, 13.08., Mail O) =====
   Aktuelle Angebote bleiben hell, die Referenzen setzen sich dunkel davon ab.
   Die Karten bleiben hell und heben sich dadurch ab. */
.sec--referenzen { position: relative; overflow: hidden; }
.sec--referenzen .referenz { background: var(--weiss); border-color: rgba(255,255,255,.12); }
.sec--referenzen .referenz-titel { color: var(--text); }

/* Dezentes Hauszeichen oben rechts. Es liegt hinter dem Inhalt, ist nie anklickbar
   und geht beim Erscheinen leicht mit – mehr nicht. */
.ref-zeichen {
  position: absolute; top: clamp(1rem, 3vw, 2.5rem); right: clamp(-1rem, 1vw, 2rem);
  width: clamp(150px, 20vw, 280px); color: var(--rot);
  opacity: 0; pointer-events: none; z-index: 0;
}
.ref-zeichen svg { width: 100%; height: auto; display: block; }
.ref-zeichen.ist-sichtbar {
  opacity: .13; transform: none;
  transition: opacity 1100ms var(--ease), transform 1100ms var(--ease);
}
.sec--referenzen .wrap { position: relative; z-index: 1; }
@media (max-width: 700px) { .ref-zeichen { display: none; } }

/* Eckdaten auf der Referenzseite */
.referenz-eck { margin-top: .35rem; font-size: .82rem; color: var(--text-2); }
/* ⚠️ Die Referenzkarten sind WEISS, stehen aber in einem .dunkel-Abschnitt.
   Beide Zeilen sind <p>, und `.dunkel p` (0,0,1,1) schlägt `.referenz-titel`
   bzw. `.referenz-eck` (0,0,1,0) – dadurch stand heller Text auf weißer Karte,
   gemessene 2,34:1. Mit .referenz davor gewinnt die Karte.
   Gefunden am 14.08. beim Durchmessen aller sieben Seiten.                    */
.referenz .referenz-titel { color: var(--text); }
.referenz .referenz-eck   { color: var(--text-2); }
.referenzen--seite { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .referenzen--seite { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .referenzen--seite { grid-template-columns: 1fr; } }
.zahlen-grid--drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .zahlen-grid--drei { grid-template-columns: 1fr; } }

/* Wunsch 9: Der Referenzen-Bereich soll sich deutlich von den aktuellen
   Angeboten abheben – abgesetzte Fläche mit rotem Kopf statt bloßer Trennlinie. */
.referenzen-block {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  background: var(--papier-2);
  border-radius: var(--radius);
  border-top: 4px solid var(--rot);
}
/* ⚠️ Auf der neuen grauen Abschnittsfläche wäre --papier-2 nur noch 4 von 255
   Stufen entfernt – der Kasten „hebt sich ab" dann nur noch über die rote
   Oberkante, nicht mehr über die Fläche. Dort deshalb weiß (22 Stufen).
   Auf weißen Abschnitten bleibt es beim vertieften Ton (18 Stufen).
   Gefunden am 14.08. beim Nachmessen der neuen Fläche. */
.sec--papier .referenzen-block { background: var(--weiss); }
.referenzen-kopf h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.referenzen-kopf h3::before {
  content: "Referenzen";
  display: block;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rot); margin-bottom: .45rem;
}

/* Pflichtangabe zur Echtheit von Bewertungen (§ 5b Abs. 3 UWG) – bewusst
   unaufdringlich, aber lesbar. Kein Prototyp-Hinweis, sondern dauerhaft nötig. */
.bewertung-echtheit {
  margin-top: .6rem;
  font-size: .84rem;
  color: var(--text-2);
  max-width: 78ch;
}

/* Erklärkasten (z. B. Energieausweis) in dunklen Abschnitten.
   ⚠️ In .dunkel erbt Text die helle Farbe – hier bewusst gesetzt, damit
   nicht wieder heller Text auf hellem Grund entsteht. */
.energie-kasten {
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--schwarz-2);
  border: 1px solid var(--schwarz-3);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.8vw, 2rem);
}
.energie-kasten p { margin-top: .6rem; color: var(--text-inv-2); }
@media (min-width: 981px) {
  .energie-kasten p { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
}
.energie-kasten strong { color: #fff; }

/* Wunsch 39: Der Hinweiskasten ist jetzt ein anklickbarer Weg zum Formular. */
.such-kasten--knopf {
  display: block;
  cursor: pointer;
  transition: border-color var(--t-normal) var(--ease),
              background var(--t-normal) var(--ease),
              transform var(--t-normal) var(--ease);
}
.such-kasten--knopf:hover,
.such-kasten--knopf:focus-visible {
  border-color: var(--rot);
  background: #24242a;
  transform: translateY(-2px);
}
.such-kasten--knopf .such-kasten-titel { display: block; margin-top: .5rem; }
.such-kasten--knopf .such-kasten-sub   { display: block; }

/* ===================== Kooperationspartner (Über uns) ===================== */
/* Liegt in einem dunklen Abschnitt – Farben deshalb ausdrücklich setzen,
   damit kein Text die Hintergrundfarbe erbt. */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.partner-karte {
  background: var(--schwarz-2);
  border: 1px solid var(--schwarz-3);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 2.2vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  transition: border-color var(--t-normal) var(--ease), transform var(--t-normal) var(--ease);
}
.partner-karte:hover { border-color: var(--rot); transform: translateY(-2px); }
/* ⚠️ Die Partnerkarten stehen auf DUNKLEM Grund – hier gilt --rot-hell.
   Mit --rot waren es gemessene 3,41:1, unter der AA-Grenze.                   */
.partner-bereich {
  font-size: .72rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rot-hell);
}
.partner-karte h3 { font-size: 1.08rem; color: #fff; line-height: 1.3; }
.partner-karte address { font-style: normal; font-size: .9rem; color: var(--text-inv-2); }
.partner-karte p { color: var(--text-inv-2); font-size: .92rem; }
.partner-kontakt { display: grid; gap: .3rem; margin-top: .7rem; }
.partner-kontakt a {
  font-size: .9rem; color: var(--text-inv);
  padding-block: .2rem;
  transition: color var(--t-normal) var(--ease);
}
.partner-kontakt a:hover { color: var(--rot-hell); }
.partner-karte--offen { border-style: dashed; }

@media (max-width: 1100px) { .partner-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .partner-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Schutz gegen fremde Skripte
   --------------------------------------------------------------------------
   Das Wertanalyse-Plugin (immobilienwertanalyse.de) schiebt nach dem Laden ein
   eigenes Stylesheet nach, das `body { position: absolute }` setzt. Folge: Der
   Body ist nur noch bildschirmhoch, die Kopfzeile klebt nur innerhalb davon –
   sie bleibt kurz stehen und scrollt dann weg. Genau dieser Fehler wurde am
   12.08.2026 auf „Verkaufen" gemeldet und nachgemessen.

   Deshalb hier ausdrücklich festgehalten, was gelten muss. `!important` ist an
   dieser Stelle richtig: Es wehrt eine fremde Regel ab, die unser Layout zerstört.
   ========================================================================== */
html, body {
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  /* Ogulo legt dem Body zusätzlich eine Breite an. Sie rechnet die Scrollleiste
     mit, das html-Element aber nicht – daraus entstehen genau die ~15 px, um die
     sich die Seite auf „Start" und „Verkaufen" seitwärts schieben ließ. */
  width: auto !important;
  max-width: 100% !important;
}
/* clip statt hidden: verhindert das seitliche Scrollen, macht das html-Element
   aber nicht zum Scrollbehälter – die klebende Kopfzeile bleibt dadurch heil. */
html { overflow-x: clip; }
body { overflow-y: visible !important; }

/* Die Kopfzeile muss über allem bleiben, auch über nachgeladenen Widgets. */
.kopf { position: sticky !important; top: 0 !important; z-index: 100 !important; }

/* Die fünf Filterfelder waren exakt gleich breit – dadurch wurde der längste
   Eintrag („Chemnitz + Umgebung") abgeschnitten. Jetzt bekommen die Felder mit
   längeren Einträgen etwas mehr Raum, und die Auswahl selbst etwas mehr Platz
   zum Pfeil hin. */
@media (min-width: 1101px) {
  .filter-reihe { grid-template-columns: 1fr 1.1fr 1.2fr 0.95fr 0.95fr auto; }
}
.filter-feld select { font-size: .89rem; padding-right: 1.9rem; text-overflow: ellipsis; }

/* ==========================================================================
   Objektseite – das vollständige Exposé (Erik, 14.08.2026)
   „Wenn ich dann auf ein Objekt auf meiner Webseite drücke, dann muss sich ja
    das gesamte Exposé öffnen."
   Bewusst mit den vorhandenen Bausteinen gebaut (.sec, .kicker, .haken,
   .such-grid), damit die Objektseite wie der Rest der Website wirkt.
   ========================================================================== */
.objekt-kopf { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.objekt-zurueck { margin-bottom: 1.4rem; font-size: .9rem; }
.objekt-ort-gross { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.objekt-marke {
  display: inline-block; background: var(--schwarz); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px;
}

/* Eckdaten als Band unter der Überschrift */
.objekt-eckband {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; margin-top: clamp(1.8rem, 4vw, 2.6rem);
  background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden;
}
.objekt-eckband > div { background: var(--weiss); padding: 1.1rem 1.3rem; }
.objekt-eckband dt {
  font-size: .68rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-2);
}
.objekt-eckband dd { margin: .3rem 0 0; font-size: 1.25rem; font-weight: 700; }

/* Galerie: erstes Bild groß, danach ein ruhiges Raster */
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.galerie-bild {
  display: block; padding: 0; border: 0; background: var(--papier-2); cursor: zoom-in;
  border-radius: var(--radius-s); overflow: hidden; aspect-ratio: 3 / 2;
}
.galerie-bild--gross { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.galerie-bild img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 500ms var(--ease); }
.galerie-bild:hover img { transform: scale(1.04); }
.galerie-fuss { margin-top: 1rem; font-size: .85rem; color: var(--text-2); }

/* Vollbild beim Anklicken. Hängt an document.body – siehe site.js. */
.galerie-voll {
  position: fixed; inset: 0; z-index: 2000; background: rgba(10,10,12,.94);
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem);
}
.galerie-voll img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-s); }
/* Schliesskreuz, Pfeile und Zaehler im Vollbild */
.galerie-voll button {
  position: absolute; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
  display: grid; place-items: center; line-height: 1;
  transition: background var(--t-normal) var(--ease);
}
.galerie-voll button:hover { background: var(--rot); }
.galerie-zu { top: 1.2rem; right: 1.2rem; width: 44px; height: 44px; font-size: 1.4rem; }
/* Erik, 14.08.: mit Pfeilen durch die grossen Bilder blaettern. */
.galerie-pfeil { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 2rem; }
.galerie-pfeil--links  { left: 1.2rem; }
.galerie-pfeil--rechts { right: 1.2rem; }
.galerie-zaehler {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: .85rem; font-weight: 600;
  background: rgba(0,0,0,.55); padding: .35rem .9rem; border-radius: 999px;
}
@media (max-width: 700px) {
  /* Auf dem Telefon wird gewischt – die Pfeile duerfen das Bild nicht verdecken. */
  .galerie-pfeil { width: 44px; height: 44px; font-size: 1.5rem; }
  .galerie-pfeil--links  { left: .5rem; }
  .galerie-pfeil--rechts { right: .5rem; }
}

/* Text links, Kästen rechts */
.objekt-inhalt { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.objekt-text h2 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin-top: 2.2rem; }
.objekt-text h2:first-child { margin-top: 0; }
.objekt-text p { margin-top: .9rem; color: var(--text-2); }
.objekt-seite { display: grid; gap: 1.1rem; }
.objekt-kasten {
  background: var(--flaeche-grau); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.3rem 1.5rem;
}
.objekt-kasten h3 { font-size: 1rem; }
.objekt-merkmale { list-style: none; display: grid; gap: .6rem; margin-top: .9rem; font-size: .92rem; }
.objekt-merkmale li { display: flex; align-items: flex-start; gap: .7rem; }
.objekt-merkmale .haken { width: 20px; height: 20px; }
.objekt-merkmale .haken svg { width: 11px; }
.objekt-liste { margin-top: .9rem; display: grid; gap: .55rem; }
.objekt-liste > div { display: flex; justify-content: space-between; gap: 1rem;
  font-size: .9rem; padding-bottom: .55rem; border-bottom: 1px solid var(--linie); }
.objekt-liste > div:last-child { border-bottom: 0; padding-bottom: 0; }
.objekt-liste dt { color: var(--text-2); }
.objekt-liste dd { margin: 0; font-weight: 600; text-align: right; }

/* Energieklasse als farbiges Schild – A+ grün bis H rot, wie im Ausweis */
.energie-klasse { margin-top: 1rem; display: grid; place-items: center;
  height: 60px; border-radius: var(--radius-s); color: #fff; }
.energie-klasse span { font-size: 1.7rem; font-weight: 800; letter-spacing: .02em; }
.energie-klasse--a { background: #0e8039; }  /* 5,04:1 auf Weiss – war #0f8a3d mit 4,45:1 */
/* ⚠️ Weiss auf diesen Gruentoenen ist grenzwertig. B war bei 3,01:1 –
   knapp ueber der Grenze fuer grosse Schrift, aber zu knapp fuer ein
   Schild, das man lesen koennen muss. Dunkler: 4,02:1.               */
.energie-klasse--b { background: #407c10; }  /* 5,11:1 – war #4a8f12 mit nur 4,02:1 */
/* ⚠️ C hatte mit weisser Schrift gemessene 2,08:1 – unlesbar. Wie bei D
   dunkle Schrift auf dem hellen Gruen: 6,92:1.                        */
.energie-klasse--c { background: #9ac21d; color: #2a2a2a; }
.energie-klasse--d { background: #d8cc1a; color: #2a2a2a; }
.energie-klasse--e { background: #efa312; color: #2a2a2a; }
.energie-klasse--f { background: #e87d20; color: #2a2a2a; }  /* dunkle Schrift wie C/D/E: 5,05:1 – weisse Schrift schaffte nur 3,15:1 */
.energie-klasse--g { background: #d3411c; }
.energie-klasse--h { background: #b3141b; }

/* Fällt ein Vorschaubild aus, bleibt die Kachel trotzdem in Form. */
.objekt-ohne-bild { width: 100%; aspect-ratio: 16 / 10; background: var(--papier-2); }

@media (max-width: 1000px) {
  .objekt-inhalt { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .galerie-bild--gross { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; }
  .objekt-eckband { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Objektseite: Ausweichweg statt gleichrangiger Kontaktknöpfe ==========
   Erik, 15.08.2026: Anruf und E-Mail sollen nicht mehr mit dem Formular
   konkurrieren. Sie stehen jetzt als ein leiser Satz darunter. */
.such-ausweich {
  margin-top: 1.6rem; font-size: .92rem; color: var(--text-inv-2);
  padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.16);
}
.such-ausweich a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.such-ausweich a:hover { color: var(--rot-hell); }

/* ===== Seitennavigation der Referenzübersicht ==============================
   Erik, 15.08.2026: „Unterhalb der Referenzübersicht befindet sich eine
   Seitennavigation mit den entsprechenden Seitenzahlen." Wie auf immoteufel.de.
   Mindestgröße 44 px, damit man sie am Telefon sicher trifft. */
.blaettern {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .4rem; margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.blaettern-zahl, .blaettern-pfeil {
  min-width: 44px; min-height: 44px; padding: 0 .6rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--linie); border-radius: 10px; background: #fff;
  font-weight: 700; font-size: .95rem; color: var(--text);
  transition: background var(--t-schnell) var(--ease), border-color var(--t-schnell) var(--ease), color var(--t-schnell) var(--ease);
}
.blaettern-zahl:hover, .blaettern-pfeil:hover { border-color: var(--rot); color: var(--rot); }
/* Die aktuelle Seite ist rot ausgefüllt – 4,98:1 auf Weiß, also lesbar. */
.blaettern-zahl.ist-hier { background: var(--rot); border-color: var(--rot); color: #fff; }
.blaettern-zahl.ist-hier:hover { color: #fff; }
/* ⚠️ Der abgeschaltete Pfeil ist ein <span>, kein Link – sonst führt „zurück"
   auf Seite 1 ins Leere. Er bleibt sichtbar, damit die Leiste nicht springt. */
.blaettern-pfeil.ist-aus { opacity: .32; }
.blaettern-pfeil.ist-aus:hover { border-color: var(--linie); color: var(--text); }
.blaettern-luecke { padding: 0 .35rem; color: var(--text-2); }
.blaettern-zahl:focus-visible, .blaettern-pfeil:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }

/* ===== Rückweg von der Objektseite ========================================
   Erik, 15.08.2026: unter dem Anfragebereich ein gut sichtbarer roter Knopf
   zurück zu allen Angeboten – „sich aber nicht mit dem eigentlichen Button
   […] beißt". Deshalb rot UMRANDET statt rot gefüllt: der gefüllte rote Knopf
   im Formular bleibt die Hauptsache. */
.zurueck-band {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.8rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(255,255,255,.16);
  display: flex; justify-content: center;
}
.btn--rot-linie {
  background: transparent; color: #fff;
  border: 2px solid var(--rot);
  transition: background var(--t-normal) var(--ease), color var(--t-normal) var(--ease);
}
.btn--rot-linie:hover { background: var(--rot); color: #fff; }
.btn--rot-linie:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 620px) { .zurueck-band .btn { width: 100%; justify-content: center; } }

/* Gelber Stern vor der Google-Bewertung (Erik, 15.08.2026, IMG_0504). */
.google-stern { color: #f5b301; margin-right: .3rem; font-size: .82em; line-height: 1; }

/* ============================================================================
   Einwilligung: Banner, Einstellungen, Sperrflaechen      (Erik, 16.08.2026)
   ----------------------------------------------------------------------------
   ⚠️ Der Banner sitzt UNTEN und laesst die Seite frei. Kein Schleier ueber
      allem, kein Scroll-Riegel: Wer nicht entscheiden will, soll trotzdem
      lesen koennen. Er bekommt dann eben keine fremden Inhalte.

   ⚠️ „Nur notwendige" und „Alle akzeptieren" sind bewusst GLEICH gross und
      gleich auffaellig. Ein optisch schwaecheres Ablehnen macht die
      Einwilligung unwirksam. Nicht „aufhuebschen".
   ========================================================================== */

.ew-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  /* ⚠️ Die Stapelhöhen im Projekt: .kopf steht auf 100 (mit !important), der
     KI-Assistent auf 90/95, die Bild-Großansicht auf 2000. Banner und Dialog
     müssen ÜBER der Kopfleiste liegen – sonst deckt die weiße Kopfleiste den
     oberen Rand des Dialogs ab und die Überschrift samt Schließen-Kreuz ist
     nicht mehr zu sehen. Genau das war am 16.08.2026 im Bildschirmfoto zu
     sehen (der dunkle Schleier hörte an der Kopfleiste auf).
     Unter 2000 bleiben, damit die Bild-Großansicht weiterhin obenauf liegt. */
  z-index: 1100;
  background: var(--schwarz);
  color: var(--text-inv);
  border-top: 3px solid var(--rot);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .35);
  padding: clamp(1.1rem, 3vw, 1.7rem) var(--pad-x);
}
.ew-banner[hidden] { display: none; }

.ew-banner-innen {
  max-width: var(--breite);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
}
.ew-banner-text h2 { font-size: clamp(1.05rem, 2.2vw, 1.4rem); margin: .15rem 0 .5rem; }
.ew-banner-text p  { font-size: .92rem; line-height: 1.55; color: var(--text-inv-2); max-width: 82ch; }
.ew-banner-text p b { color: #fff; }

.ew-banner-knoepfe {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  align-items: stretch;
  min-width: 15rem;
}
/* Auf dunklem Grund braucht der Linien-Knopf helle Kanten. */
.ew-banner .btn--linie { border-color: rgba(255, 255, 255, .55); color: #fff; }
.ew-banner .btn--linie:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

.ew-mehr {
  background: none; border: 0; padding: .2rem;
  font: inherit; font-size: .85rem;
  color: var(--text-inv-2);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.ew-mehr:hover { color: #fff; }

@media (max-width: 860px) {
  .ew-banner-innen { grid-template-columns: 1fr; }
  .ew-banner-knoepfe { min-width: 0; }
  /* ⚠️ Auf dem Telefon ist der Banner sonst hoeher als der halbe Bildschirm. */
  .ew-banner { max-height: 72vh; overflow-y: auto; }
}

/* ------------------------------- Einstellungen --------------------------- */
.ew-dialog {
  position: fixed; inset: 0; z-index: 1200;   /* über der Kopfleiste, siehe oben */
  background: rgba(10, 10, 12, .62);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(.75rem, 3vw, 2rem);
}
.ew-dialog[hidden] { display: none; }
html.dialog-offen { overflow: hidden; }

.ew-dialog-innen {
  background: var(--weiss);
  border-radius: 16px;
  width: min(46rem, 100%);
  max-height: min(86vh, 52rem);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.ew-dialog-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.1rem, 3vw, 1.8rem) .8rem;
  border-bottom: 1px solid var(--linie);
}
.ew-dialog-kopf h2 { font-size: clamp(1.15rem, 2.6vw, 1.55rem); margin-top: .15rem; }
.ew-x {
  background: none; border: 0; font-size: 1.9rem; line-height: 1;
  color: var(--text-2); cursor: pointer; padding: 0 .2rem;
}
.ew-x:hover { color: var(--rot); }

.ew-einleitung, .ew-stand {
  padding-inline: clamp(1.1rem, 3vw, 1.8rem);
  font-size: .9rem; line-height: 1.55; color: var(--text-2);
}
.ew-einleitung { margin-top: 1rem; }
.ew-stand { margin-top: .6rem; font-weight: 600; color: var(--text); }

.ew-liste {
  overflow-y: auto;
  padding: 1rem clamp(1.1rem, 3vw, 1.8rem);
  display: grid; gap: .7rem;
  /* ⚠️ min-height: 0 IST PFLICHT, nicht Kosmetik.
     Ein Flex-Kind schrumpft von sich aus NICHT unter die Höhe seines Inhalts
     (min-height steht auf auto). Ohne diese Zeile wächst die Liste über den
     Dialog hinaus, overflow-y greift nie – und weil der Dialog mittig sitzt
     und aussen overflow:hidden hat, wird oben die Überschrift „Was darf
     geladen werden?" samt Schließen-Kreuz abgeschnitten. Am 16.08.2026 im
     Bildschirmfoto gesehen. Nicht entfernen. */
  min-height: 0;
}
.ew-zeile {
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: .9rem 1rem;
  background: var(--papier);
}
.ew-kopf { display: flex; align-items: center; gap: .7rem; cursor: pointer; }
.ew-kopf input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.ew-schalter {
  flex: 0 0 auto; width: 44px; height: 26px; border-radius: 13px;
  background: #c9c6c0; position: relative; transition: background .18s ease;
}
.ew-schalter::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .18s ease;
}
.ew-kopf input:checked + .ew-schalter { background: var(--rot); }
.ew-kopf input:checked + .ew-schalter::after { transform: translateX(18px); }
.ew-kopf input:disabled + .ew-schalter { background: #9aa08f; opacity: .75; cursor: not-allowed; }
.ew-kopf input:focus-visible + .ew-schalter { outline: 2px solid var(--rot); outline-offset: 3px; }
.ew-name { font-weight: 700; font-size: 1rem; }

.ew-text { font-size: .88rem; color: var(--text-2); margin: .5rem 0 .55rem; }
.ew-daten {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: .18rem .8rem; font-size: .82rem; margin: 0;
}
.ew-daten dt { color: var(--text-2); }
.ew-daten dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

.ew-dialog-fuss {
  border-top: 1px solid var(--linie);
  padding: clamp(.9rem, 2.5vw, 1.2rem) clamp(1.1rem, 3vw, 1.8rem);
  display: grid; gap: .8rem;
  background: var(--weiss);
}
.ew-dialog-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.ew-dialog-knoepfe #ew-sichern { margin-inline-start: auto; }

.ew-widerruf {
  background: none; border: 0; padding: 0; font: inherit; text-align: left;
  font-size: .85rem; color: var(--rot-schrift); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.ew-widerruf:hover { color: var(--rot-tief); }
.ew-widerruf-hinweis { display: block; color: var(--text-2); text-decoration: none; font-size: .78rem; }

@media (max-width: 560px) {
  .ew-dialog-knoepfe #ew-sichern { margin-inline-start: 0; width: 100%; }
}

/* ------------------------------- Sperrflaechen --------------------------- */
/* Steht an der Stelle, an der sonst der fremde Inhalt waere. Sie muss die
   Hoehe halbwegs halten, damit die Seite beim Freigeben nicht springt. */
.dienst-sperre {
  display: grid; place-items: center;
  min-height: 20rem;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  background: var(--papier);
  border: 1px dashed var(--linie);
  border-radius: 14px;
  text-align: center;
}
.dienst-sperre[hidden] { display: none; }
.dunkel .dienst-sperre, .sec--referenzen .dienst-sperre {
  background: var(--schwarz-2); border-color: var(--schwarz-3);
}
.sperre-inhalt { max-width: 46ch; }
.sperre-marke {
  display: inline-block; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--rot-schrift); margin-bottom: .5rem;
}
.dunkel .sperre-marke, .sec--referenzen .sperre-marke { color: var(--rot-hell); }
.sperre-titel { font-size: 1.15rem; margin-bottom: .5rem; }
.dunkel .sperre-titel, .sec--referenzen .sperre-titel { color: var(--text-inv); }
.sperre-text { font-size: .9rem; line-height: 1.55; color: var(--text-2); margin-bottom: 1rem; }
.dunkel .sperre-text, .sec--referenzen .sperre-text { color: var(--text-inv-2); }
.sperre-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.dunkel .sperre-knoepfe .btn--linie, .sec--referenzen .sperre-knoepfe .btn--linie {
  border-color: rgba(255, 255, 255, .5); color: #fff;
}

/* ============================================================================
   Rechtstexte: Impressum, Datenschutz, Barrierefreiheit, Dienste-Übersicht
   ----------------------------------------------------------------------------
   Lange Fließtexte brauchen eine eigene, ruhige Spalte. Die Inhaltsbreite der
   übrigen Seiten (1280 px) wäre hier unlesbar – ab etwa 80 Zeichen je Zeile
   verliert das Auge beim Zeilenwechsel den Anschluss.
   ========================================================================== */
.recht { padding-block: clamp(2rem, 5vw, 3.4rem) clamp(3rem, 7vw, 5rem); }
.recht-spalte { max-width: 72ch; }
.recht-spalte h2 {
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  margin-top: clamp(2rem, 4vw, 2.8rem); margin-bottom: .7rem;
  padding-top: clamp(1.2rem, 2.5vw, 1.8rem); border-top: 1px solid var(--linie);
}
.recht-spalte h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.4rem; }
.recht-spalte h3 { font-size: 1.02rem; margin-top: 1.5rem; margin-bottom: .4rem; }

/* Die 18 Abschnittsüberschriften der Datenschutzerklärung stehen in ERIKS
   Großbuchstaben (Mail vom 17.08.2026). Sein Wortlaut wird nicht angetastet –
   aber Versalien in voller h2-Größe schreien. Deshalb hier eine Spur kleiner,
   dafür ausgesperrt: so liest es sich als Abschnittsmarke, nicht als Anschrei.
   ⚠️ NICHT über text-transform lösen. Der Text SOLL im Quelltext großgeschrieben
      stehen, damit Kopieren genau Eriks Fassung ergibt.
   ⚠️ Eigene Klasse statt :has(.recht-nr): :has() kennt erst Firefox 121, und
      ohne Treffer stünde die Seite in voller h2-Größe in Versalien da. */
.recht-spalte h2.recht-abschnitt {
  font-size: clamp(1rem, 1.9vw, 1.16rem);
  letter-spacing: .045em;
  line-height: 1.35;
}
/* Die Nummer kam in Eriks HTML aus einer <ol>. Sie muss mitgeführt werden,
   sonst laufen seine Querverweise („siehe Ziffer 6") ins Leere. */
.recht-nr { color: var(--rot-schrift); margin-right: .45em; font-variant-numeric: tabular-nums; }
.recht-spalte p, .recht-spalte li { line-height: 1.65; }
.recht-spalte p { margin-bottom: .9rem; }
.recht-spalte ul, .recht-spalte ol { margin: 0 0 1rem 1.1rem; }
.recht-spalte li { margin-bottom: .35rem; }
/* ⚠️ :not(.btn) IST PFLICHT. Ohne den Ausschluss gewinnt diese Regel gegen
   .btn--rot (zwei Bausteine schlagen einen), und der rote Knopf bekommt rote
   Schrift auf rotem Grund – gemessen rgb(204,0,24) auf rgb(225,0,26), also
   praktisch unsichtbar. Im Bildschirmfoto vom 16.08.2026 war der Knopf „Zur
   Datenschutzerklärung" eine leere rote Pille. Nicht vereinfachen. */
.recht-spalte a:not(.btn) { color: var(--rot-schrift); text-underline-offset: 3px; }
.recht-adresse { font-style: normal; line-height: 1.65; margin-bottom: 1rem; }

/* Der Kasten für „das muss ein Anwalt noch ansehen“. Bewusst auffällig:
   Er darf nicht übersehen werden, solange die Seite nicht geprüft ist. */
.recht-warnung {
  border: 1px solid var(--rot);
  border-left-width: 4px;
  border-radius: 12px;
  background: #fff5f5;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.6rem;
}
.recht-warnung p { margin-bottom: .5rem; }
.recht-warnung p:last-child { margin-bottom: 0; }
.recht-warnung strong { color: var(--rot-tief); }

/* Offene Punkte innerhalb eines Rechtstextes – kleiner als die Warnung oben. */
.recht-luecke {
  border-left: 3px solid var(--rot);
  background: var(--papier);
  padding: .8rem 1rem; border-radius: 0 10px 10px 0;
  margin: .2rem 0 1.2rem; font-size: .92rem;
}
.recht-luecke b { color: var(--rot-schrift); }

/* --------------------------- Dienste-Übersicht --------------------------- */
/* ⚠️ Die Tabelle hat fünf Spalten und wird auf dem Telefon NICHT gequetscht,
   sondern zu Karten umgebaut. Eine fünfspaltige Tabelle auf 390 px ist
   unlesbar, egal wie klein man die Schrift macht. */
.dienste-tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.dienste-tabelle th, .dienste-tabelle td {
  text-align: left; vertical-align: top;
  padding: .75rem .8rem; border-bottom: 1px solid var(--linie);
}
.dienste-tabelle thead th {
  background: var(--schwarz); color: var(--text-inv);
  font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
  position: sticky; top: var(--header-h, 64px); z-index: 1;
}
.dienste-tabelle tbody tr:nth-child(even) { background: var(--papier); }
.dienste-tabelle .d-name { font-weight: 700; }
.dienste-tabelle .d-wirt { font-size: .82rem; color: var(--text-2); overflow-wrap: anywhere; }
.dienste-umschlag { overflow-x: auto; margin-block: 1.4rem; }

.ja-nein { display: inline-block; font-weight: 700; white-space: nowrap; }
.ja-nein--ja   { color: var(--rot-schrift); }
.ja-nein--nein { color: #1f7a3d; }

@media (max-width: 860px) {
  .dienste-tabelle thead { display: none; }
  .dienste-tabelle, .dienste-tabelle tbody, .dienste-tabelle tr, .dienste-tabelle td { display: block; width: 100%; }
  .dienste-tabelle tr {
    border: 1px solid var(--linie); border-radius: 12px;
    margin-bottom: .9rem; padding: .3rem .2rem; background: var(--weiss);
  }
  .dienste-tabelle tbody tr:nth-child(even) { background: var(--papier); }
  .dienste-tabelle td { border-bottom: 0; padding: .4rem .9rem; }
  .dienste-tabelle td::before {
    content: attr(data-spalte);
    display: block; font-size: .72rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-2); margin-bottom: .1rem;
  }
  .dienste-tabelle td.d-name-zelle::before { content: none; }
  .dienste-tabelle .d-name { font-size: 1.05rem; }
}

/* ============================================================================
   AT3 · Gerätedurchgang 16.08.2026 — vier gemessene Nachbesserungen
   ----------------------------------------------------------------------------
   Alle 15 Seiten auf sechs Breiten geprüft (390 / 430 / 768 / 1024 / 1366 /
   1440). Ergebnis vorweg: KEIN einziger seitlicher Überlauf – das ist der
   häufigste Mobilfehler und der war sauber. Vier andere Dinge waren es nicht.
   ========================================================================== */

/* 1 · Der Menü-Knopf behält eine zuverlässige Trefferfläche von 46 × 46 px.
   Seine rechte Position wird im mobilen zweispaltigen Raster oben festgelegt. */
.burger { flex: 0 0 46px; }

@media (max-width: 480px) {
  .kopf-inner { gap: 10px; }
}

/* 2 · „Einzeln auswählen" im Einwilligungs-Banner war 28 px hoch.
   Der Knopf ist von heute, also mein eigener. Ein 28 px hoher Treffer ist auf
   dem Telefon zu wenig – vor allem bei einem Knopf, den man BRAUCHT, um
   überhaupt einzeln entscheiden zu können. Das Polster vergrößert die
   Trefferfläche, ohne die Schrift größer zu machen. */
.ew-mehr { padding: .7rem .4rem; min-height: 44px; }

/* 3 · Die Kicker-Zeile auf den Kopf-Kacheln stand auf .58rem = 9,3 px.
   Großbuchstaben mit Sperrung wirken zwar größer als ihre Punktzahl, aber
   9,3 px sind auch dafür zu wenig – gemessen auf „Kostenfreie Wertanalyse"
   und „Persönlich sprechen", also ausgerechnet den beiden Kacheln, die zum
   Handeln auffordern. Auf schmalen Geräten angehoben; ab Tablet bleibt die
   feine Optik. */
@media (max-width: 900px) {
  .hero-kachel-kicker { font-size: .7rem; letter-spacing: .11em; }
}

/* 4 · Die Marken „Vorher" und „Nachher" am Schieberegler lagen bei 9,9 px.
   Sie sitzen auf einem Foto und müssen im Vorbeigehen lesbar sein. */
@media (max-width: 900px) {
  .vergleich-marke { font-size: .68rem; }
}

/* Das Schloss bei „Notwendig – immer aktiv" (Erik, 16.08.2026).
   ⚠️ Ersetzt bewusst den Schalter: Ein grauer Schalter sieht aus, als könne man
   ihn umlegen. Ein Schloss sagt sofort, dass hier nichts zu entscheiden ist.
   Gleiche Grundfläche wie .ew-schalter, damit die Zeilen bündig bleiben. */
.ew-schloss {
  flex: 0 0 auto; width: 44px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px; background: var(--papier-2);
  border: 1px solid var(--linie); font-size: .8rem; line-height: 1;
}

/* ============================================================================
   Kategorieseiten: der erste Bildschirm gehört dem Kopfbereich
   ----------------------------------------------------------------------------
   Peter, 17.08.2026: „Wenn ich auf Verkaufen klicke, auf Vermieten klicke,
   Immobilien finden klicke … dann kann ich bei mir am PC das Foto sehen und
   darunter aber immer noch ein Stück weit Text. Am Mac kann ich das nicht
   sehen. Es soll sich ja auf das konzentrieren, was in der Mitte steht, und
   nicht unten so ein abgeschnittener Text."

   Nachgemessen auf fünf Kategorieseiten, vier Fensterhöhen – der Befund war
   exakt so:
       MacBook 14"  982 px  -> unter dem Kopfbereich 131 px reine Fläche, nichts
       MacBook 16" 1117 px  -> 161 px, immer noch nichts
       PC          1267 px  -> 194 px, darin „In 6 Schritten sicher zum
                               Verkauf." ANGESCHNITTEN
       4K bei 150 % 1440 px -> 232 px, Überschrift plus angeschnittener Fließtext

   Auf dem Mac ging es nur deshalb auf, weil dort zufällig genau so viel Platz
   blieb, dass nur Hintergrundfarbe zu sehen war.

   Die Lösung ist nicht „etwas mehr Höhe", sondern die richtige Größe: Der
   Kopfbereich füllt genau das Fenster minus Kopfzeile. Damit endet er auf JEDER
   Bildschirmhöhe exakt an der Falzkante – man sieht das Bild und die Aussage in
   der Mitte, und nichts halb Abgeschnittenes darunter.

   ⚠️ NUR ab 1025 px Breite. Darunter gilt die Regel `.hero-inner { min-height: 0 }`
      aus dem Block @media (max-width: 1024px) – auf Telefon und Tablet soll der
      Kopfbereich mitwachsen und nicht bildschirmfüllend sein. Diese Regel hier
      hat eine höhere Gewichtung und würde sie sonst überstimmen.

   ⚠️ svh statt vh: Auf Telefonen zählt vh die Fläche OHNE die Browserleisten
      mit, svh mit. Die vh-Zeile bleibt als Rückfall für ältere Browser darüber
      stehen – nicht löschen.

   ⚠️ Die Untergrenze 520 px verhindert, dass der Kopfbereich auf einem sehr
      flachen Fenster (etwa Notebook im Querformat mit geöffneten Werkzeugen)
      zusammenfällt und Überschrift plus Knöpfe übereinanderrutschen.
   ========================================================================== */
@media (min-width: 1025px) {
  .hero--kat .hero-inner { min-height: max(520px, calc(100vh  - var(--header-h))); }
  .hero--kat .hero-inner { min-height: max(520px, calc(100svh - var(--header-h))); }
}

/* ============================================================================
   Suche kompakt (Weg 2) · Peter, 17.08.2026
   ----------------------------------------------------------------------------
   „Man gibt oben etwas ein, muss jedes Mal runterscrollen. […] Das Schöne ist,
   dass er innerhalb eines Feldes scrollen kann, ohne dass man die gesamte
   Webseite damit scrollen muss. Damit bleibt man ein Stück weit ruhiger."

   Zwei Dinge zusammen:
     1. Die Filterleiste klebt über der Ergebnisfläche und bleibt stehen.
     2. Die Treffer rollen in einem EIGENEN Feld – die Seite bleibt ruhig.

   ⚠️ ALLES HIER HÄNGT AN .suche-kompakt. Diese Klasse setzt
      immobilien-finden.php nur, wenn SUCHE_KOMPAKT in _konfig.php auf true
      steht. Auf false → keine dieser Regeln greift, die Seite ist exakt wie
      vorher. Nichts hier muss zurückgebaut werden.

   ⚠️ Das Rollfeld gibt es NUR ab 1025 px Breite. Auf Telefon und Tablet ist ein
      Rollfeld im Rollfeld eine Zumutung: Man weiß nie, was gerade scrollt, und
      der Daumen bleibt an der falschen Kante hängen. Dort läuft die Liste
      deshalb normal weiter – die klebende Leiste bringt auch allein schon den
      Hauptnutzen.
   ========================================================================== */

/* Die Leiste. Klebt unterhalb der Kopfzeile, deshalb top: var(--header-h). */
.suche-kompakt .filter--kleb {
  position: sticky; top: var(--header-h); z-index: 4;
  background: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--radius-s);
  padding: .85rem 1rem .7rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 6px 18px -14px rgba(18,18,20,.5);
}
.suche-kompakt .filter--kleb .filter-reihe { margin-bottom: .55rem; }
.suche-kompakt .filter--kleb .filter-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* Die mitzählende Trefferzahl in der Leiste – man sieht beim Ändern sofort,
   wie viele übrig bleiben, ohne den Blick nach unten zu nehmen. */
.filter-treffer {
  font-size: .78rem; font-weight: 700; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.filter-treffer b { color: var(--text); }

@media (min-width: 1025px) {
  /* Das Rollfeld. Höhe so, dass zwei Reihen Kacheln ganz und die dritte
     angeschnitten zu sehen sind – das lädt zum Weiterrollen ein, statt so
     auszusehen, als wäre die Liste zu Ende. */
  .suche-kompakt .such-feld {
    max-height: min(62vh, 660px);
    overflow-y: auto;
    overscroll-behavior: contain;   /* nicht auf die Seite durchrutschen */
    padding-right: .45rem;
    /* Der obere und untere Rand laufen sanft aus, damit man sieht,
       dass da noch etwas kommt. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px,
                        #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 14px,
                        #000 calc(100% - 22px), transparent 100%);
  }
  /* Ein schmaler, ruhiger Rollbalken statt des klobigen Systembalkens. */
  .suche-kompakt .such-feld::-webkit-scrollbar { width: 8px; }
  .suche-kompakt .such-feld::-webkit-scrollbar-track { background: transparent; }
  .suche-kompakt .such-feld::-webkit-scrollbar-thumb {
    background: #c9c5bd; border-radius: 999px;
  }
  .suche-kompakt .such-feld::-webkit-scrollbar-thumb:hover { background: #a9a49b; }
  .suche-kompakt .such-feld { scrollbar-width: thin; scrollbar-color: #c9c5bd transparent; }

  /* ⚠️ Der Aufblend-Effekt beim Scrollen (.reveal) darf im Rollfeld NICHT
     greifen: Er reagiert auf das Fenster, nicht auf das Feld. Kacheln weiter
     unten blieben sonst dauerhaft unsichtbar, weil sie aus Sicht des Fensters
     nie „in den Blick kommen". Genau so ein Fehler fällt beim Hinsehen nicht
     auf, weil oben ja alles da ist. */
  .suche-kompakt .such-feld .reveal {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* Abstände im Suchblock straffen (Peter, 17.08.2026: „Die Abstände sind ja riesig").
   Gemessen vorher: 112 px Polster oben am Abschnitt, dazu 60 px zwischen
   Überschrift und Filterleiste – zusammen fast ein halber Bildschirm, bevor der
   erste Filter auftaucht. Überschrift, Filter und Treffer sind EIN Vorgang und
   sollen auch so aussehen. Unten bleibt das normale Polster, weil dort der
   nächste Abschnitt anschließt. */
.suche-kompakt { padding-top: clamp(2.2rem, 4vw, 3.2rem); }
.suche-kompakt .sec-kopf { margin-bottom: clamp(1rem, 2vw, 1.4rem); }
.suche-kompakt .sec-kopf .lead { margin-bottom: 0; }
.suche-kompakt .liste-kopf { margin-top: 1rem; }

/* ==========================================================================
   KI-KENNZEICHNUNG DIREKT AM INHALT
   Erik, 17.08.2026: realistisch wirkende KI-Bilder, virtuell möblierte
   Immobilienbilder und Videos mit KI-Szenen bekommen den Hinweis unmittelbar
   am Inhalt. Erzeugt wird die Marke von ki_marke() in _kopf.php – EINE Quelle.

   ⚠️ Erik ausdrücklich: „Ein störendes Wasserzeichen mitten im Bild ist dafür
      nicht notwendig." Deshalb eine ruhige Marke an der unteren Kante, nicht
      quer über dem Motiv.
   ⚠️ NICHT nach rechts unten legen: Dort sitzt fest der Knopf „Fragen?
      KI-Assistent". Die beiden hätten sich auf dem ersten Bildschirm jeder
      Seite überlagert. Links unten ist frei.
   ========================================================================== */
.ki-marke {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 3;
  display: inline-block; max-width: calc(100% - 2rem);
  font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  line-height: 1.25; color: #fff;
  background: rgba(0, 0, 0, .58);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  padding: .34rem .68rem; border-radius: 999px;
  /* Ohne diesen Rand verschwindet die Marke auf einem dunklen Motiv fast ganz. */
  border: 1px solid rgba(255, 255, 255, .22);
  pointer-events: none;
}

/* Im Kopfbereich etwas weiter nach innen, damit sie nicht am Rand klebt. */
/* ⚠️ NICHT .hero-bild .ki-marke: dieser Container steht auf z-index -2 und
   bildet einen eigenen Stapelkontext – der abdunkelnde Schleier (-1) liegt
   darüber. Gemessen: weiße Schrift kam nur auf 41 von 255 an, Kontrast 1,3:1.
   Die Marke ist deshalb GESCHWISTER von Bild und Schleier. */
.hero > .ki-marke { left: clamp(1rem, 4vw, 2.4rem); bottom: clamp(1rem, 2.4vw, 1.8rem); }

/* Unter einem Bild statt darin – für Stellen, an denen darunter Platz ist. */
.ki-marke--unter {
  position: static; display: block; max-width: none;
  color: var(--text-3); background: none; border: 0; backdrop-filter: none;
  padding: .5rem 0 0; font-weight: 600; letter-spacing: .02em;
}

/* Auf dem Telefon ist der Platz knapp: eine Spur kleiner, aber nie kleiner als
   10,5 px – darunter wird es unleserlich (gemessen am 16.08.2026). */
@media (max-width: 560px) {
  .ki-marke { font-size: .66rem; padding: .3rem .58rem; }
}