/* =========================================================================
   365 GRUNDBESITZ — Komponenten
   Reihenfolge entspricht dem Seitenaufbau (§36).
   ========================================================================= */

/* ============================ 01 HEADER (§7) ============================= */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.header.is-scrolled {
  background: rgba(251, 249, 246, 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom-color: var(--c-line);
  box-shadow: 0 1px 14px rgba(22, 24, 26, 0.05);
}

.header__inner {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  height: 84px;
  transition: height 0.25s var(--ease);
}
.header.is-scrolled .header__inner { height: 66px; }

.header__logo { flex: none; display: block; line-height: 0; }
.header__logo img {
  height: 66px; width: auto;
  transition: height 0.25s var(--ease);
}
.header.is-scrolled .header__logo img { height: 54px; }

.header__nav { margin-left: auto; }
.header__nav ul { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.header__nav a {
  display: block;
  font-size: 1rem; font-weight: 500;
  text-decoration: none; color: var(--c-ink-2);
  padding-block: 0.5rem;
  position: relative;
  transition: color 0.16s var(--ease);
}
.header__nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.15rem;
  height: 1.5px; background: var(--c-orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.header__nav a:hover { color: var(--c-ink); }
.header__nav a:hover::after,
.header__nav a[aria-current='page']::after { transform: scaleX(1); }
.header__nav a[aria-current='page'] { color: var(--c-ink); }

.header__actions { display: flex; align-items: center; gap: 0.65rem; flex: none; }

.header__tel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--c-line); border-radius: 50%;
  color: var(--c-ink-2);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.header__tel:hover { border-color: var(--c-orange); color: var(--c-orange-cta); }
.header__tel svg { width: 17px; height: 17px; }

.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--c-line); border-radius: var(--radius);
}
.burger span {
  display: block; position: relative;
  width: 18px; height: 1.5px; background: var(--c-ink);
  transition: background-color 0.14s var(--ease);
}
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0;
  width: 18px; height: 1.5px; background: var(--c-ink);
  transition: transform 0.24s var(--ease), top 0.18s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.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); }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--c-line);
  background: var(--c-paper);
  padding: 0.5rem var(--gutter) 1.75rem;
}
.mobile-nav.is-open { display: block; }
/* :not(.btn) ist entscheidend: Ohne den Ausschluss überschreiben
   display:block und padding:0.95rem 0 die Knopfform — der Text klebte
   dann am linken Rand und lief aus dem Knopf heraus. */
.mobile-nav a:not(.btn) {
  display: block;
  padding: 0.95rem 0;
  font-size: 1.0625rem; font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--c-line-soft);
}
.mobile-nav .btn { margin-top: 1.25rem; }

@media (max-width: 1023px) {
  .header__nav { display: none; }
  .burger { display: flex; }
  .header__actions { margin-left: auto; }
  .header__actions .btn--primary { display: none; }
  .header__inner { height: 70px; }
  .header.is-scrolled .header__inner { height: 62px; }
  .header__logo img { height: 54px; }
  .header.is-scrolled .header__logo img { height: 48px; }
}
@media (max-width: 379px) {
  .header__tel { display: none; }
}

/* ======================= 02a VIDEO-HERO (Header) ========================
   Übernimmt das Prinzip der alten Website: vollflächiges Hintergrundvideo,
   darüber ein oranger Radialverlauf von links, Text weiß auf der linken
   Seite. Höhe bewusst unter 100vh, damit sichtbar bleibt, dass es
   weitergeht.                                                             */
.vhero {
  position: relative;
  min-height: min(86vh, 760px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--c-dark);
  isolation: isolate;
}
.vhero__media {
  position: absolute; inset: 0;
  z-index: -2;
}
.vhero__media video,
.vhero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Orangeverlauf + Abdunklung für Textkontrast (weiß erreicht links > 7:1) */
.vhero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(18,19,20,0.34) 0%, rgba(18,19,20,0.26) 45%, rgba(18,19,20,0.52) 100%),
    radial-gradient(118% 112% at -6% 50%,
      rgba(196,56,0,0.95) 0%,
      rgba(206,60,0,0.86) 34%,
      rgba(24,26,28,0.42) 70%,
      rgba(24,26,28,0.16) 100%);
}
/* Weicher Übergang in die folgende Sektion */
.vhero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 90px; z-index: -1;
  background: linear-gradient(180deg, rgba(251,249,246,0) 0%, var(--c-paper) 100%);
}

.vhero__inner { position: relative; z-index: 1; width: 100%; padding-block: clamp(4rem, 3rem + 6vw, 7rem); }
.vhero__body { max-width: 40rem; color: #fff; }

.vhero__eyebrow {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  margin: 0 0 1.35rem;
}
.vhero__eyebrow::before { content: ''; flex: none; width: 26px; height: 2px; background: #fff; }

.vhero h1 {
  font-family: var(--f-display);
  font-size: clamp(2.1rem, 0.85rem + 3vw, 3.2rem);
  line-height: 1.1; letter-spacing: -0.018em;
  color: #fff;
  margin-bottom: 1.4rem;
}
.vhero__text {
  font-size: var(--t-lead); line-height: 1.6;
  color: rgba(255,255,255,0.95);
  max-width: 34rem;
}
.vhero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem clamp(1.25rem, 3vw, 2rem);
  margin-top: 2.25rem;
}
.vhero .btn--light { background: #fff; color: var(--c-ink); }
.vhero .btn--light:hover { background: var(--c-paper-2); }
.vhero .link-cta { color: #fff; border-color: rgba(255,255,255,0.55); }
.vhero .link-cta:hover { color: #fff; border-color: #fff; }

/* Tonlos-Hinweis + Steuerung: WCAG verlangt eine Pausemöglichkeit für
   bewegte Inhalte, die länger als 5 Sekunden laufen. */
.vhero__videobtn {
  position: absolute; right: clamp(1rem, 3vw, 2.25rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 2;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid rgba(255,255,255,0.45); border-radius: 100px;
  color: #fff; font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(0,0,0,0.28); backdrop-filter: blur(6px);
}
.vhero__videobtn:hover { border-color: #fff; background: rgba(0,0,0,0.45); }
.vhero__videobtn svg { width: 13px; height: 13px; }

@media (max-width: 899px) {
  .vhero { min-height: 0; }
  .vhero__inner { padding-block: clamp(3.5rem, 2rem + 8vw, 5.5rem) clamp(4.5rem, 3rem + 8vw, 6rem); }
  .vhero__body { max-width: none; }
  .vhero__overlay {
    background:
      linear-gradient(180deg, rgba(18,19,20,0.42) 0%, rgba(18,19,20,0.34) 40%, rgba(18,19,20,0.62) 100%),
      radial-gradient(150% 90% at 10% 40%,
        rgba(196,56,0,0.95) 0%, rgba(206,60,0,0.84) 42%, rgba(24,26,28,0.5) 78%, rgba(24,26,28,0.3) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vhero__media video { display: none; }
  .vhero__videobtn { display: none; }
}

/* ============================== 02 HERO (§8) ============================= */
.hero {
  position: relative;
  padding-block: clamp(2.75rem, 1.4rem + 4.4vw, 5.5rem) 0;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: clamp(2.25rem, 1rem + 4vw, 4.5rem);
  align-items: end;
}
.hero__body { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 5rem); }

/* Die Überschrift ist ein h2 (das echte h1 steht im Video-Hero darüber) —
   die Regel zielte noch auf .hero h1 und griff nie, deshalb fehlte hier
   der Abstand zum Fließtext darunter. */
.hero .display { margin-bottom: 1.6rem; }
.hero .display .ln { display: block; }
.hero .display .ln--2 { color: var(--c-ink); }

.hero__text { margin-bottom: 1.1rem; max-width: 46ch; }
.hero__text--2 { color: var(--c-ink-3); font-size: var(--t-body); max-width: 46ch; }

.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem clamp(1.25rem, 3vw, 2.25rem);
  margin-top: 2.25rem;
}

.hero__figure {
  position: relative;
  margin-inline: calc(var(--gutter) * -1) 0;
}
.hero__figure img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
/* Orange Grundlinie — kleiner Marker, kein Farbfeld */
.hero__figure::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px; background: var(--c-orange);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.hero__caption {
  position: absolute; left: 0; bottom: 1.5rem;
  background: rgba(251, 249, 246, 0.93);
  backdrop-filter: blur(6px);
  padding: 0.7rem 1.1rem;
  border-left: 3px solid var(--c-orange);
  font-size: 0.875rem; line-height: 1.45;
}
.hero__caption strong { display: block; font-weight: 600; font-size: 0.9375rem; }
.hero__caption span { color: var(--c-ink-3); }

/* Typo-Größe ist so gewählt, dass die H1 auf großen Screens zweizeilig
   bleibt: „365 Tage." / „Eine Ansprechpartnerin." */
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .hero__figure { margin-inline: 0; }
  .hero__figure img { max-height: min(74vh, 640px); }
}
/* An genau dieser Schwelle schrumpft die Textspalte auf einmal (Zweispalter
   beginnt), waehrend --t-display fuer die volle einspaltige Breite skaliert
   war — „Eine Ansprechpartnerin." brach dadurch zwischen 900 und rund
   1049px erneut mitten im Wort um. In dieser Lücke eine eigene, zur
   schmaleren Spalte passende Groesse. */
@media (min-width: 900px) and (max-width: 1049.98px) {
  .hero .display { font-size: clamp(2.3rem, 1.2rem + 2vw, 2.55rem); }
}
@media (max-width: 899px) {
  .hero__figure { max-width: 420px; margin-inline: 0; }
  .hero__body { padding-bottom: 2rem; }
}

/* --- Mobiler CTA-Balken (§7: primärer CTA muss erreichbar bleiben) ------
   Erscheint erst nach dem Hero und verschwindet wieder, sobald der
   Conversion-Bereich sichtbar ist – kein Dauer-Overlay. */
.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  gap: 0.6rem; align-items: center;
  padding: 0.65rem var(--gutter) calc(0.65rem + env(safe-area-inset-bottom));
  background: rgba(251, 249, 246, 0.96);
  backdrop-filter: saturate(1.4) blur(10px);
  border-top: 1px solid var(--c-line);
  transform: translateY(105%);
  transition: transform 0.28s var(--ease);
}
.cta-bar.is-visible { transform: none; }
/* Solange die Leiste eingeblendet ist, unten Platz freihalten — sonst legt
   sie sich über den Abschluss-Knopf der jeweiligen Seite. */
body:has(.cta-bar.is-visible) { padding-bottom: 84px; }
.cta-bar .btn { flex: 1; }
.cta-bar__tel {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  color: var(--c-ink);
}
.cta-bar__tel svg { width: 19px; height: 19px; }
@media (max-width: 1023px) { .cta-bar { display: flex; } }

/* ==================== 03 GOOGLE TRUST / MARQUEE (§9) ==================== */
.trust {
  background: var(--c-white);
  border-block: 1px solid var(--c-line);
  padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  overflow: hidden;
}
.trust__grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  /* Score | Trennlinie | Laufband */
  .trust__grid { grid-template-columns: auto auto minmax(0, 1fr); }
}

.trust__score { display: flex; align-items: center; gap: 1rem; }
.trust__score-num {
  font-family: var(--f-display);
  font-size: 2.6rem; line-height: 1;
  color: var(--c-ink);
}
.trust__score-meta { font-size: 0.9375rem; line-height: 1.5; color: var(--c-ink-3); }
.trust__score-meta .stars { margin-bottom: 3px; }
.trust__score-meta a { color: var(--c-ink-2); display: inline-block; padding-block: 0.3rem; }
.trust__score-meta strong { color: var(--c-ink); font-weight: 600; }

.trust__divider { display: none; }
@media (min-width: 900px) {
  .trust__divider { display: block; width: 1px; align-self: stretch; background: var(--c-line); }
}

/* --- Marquee ------------------------------------------------------------ */
.marquee {
  position: relative;
  min-width: 0;
  /* Weiche Kanten statt harter Abschnitt */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee__viewport { overflow: hidden; }
.marquee__track {
  display: flex; gap: 0.75rem;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 90s) linear infinite;
}
.marquee.is-paused .marquee__track { animation-play-state: paused; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Zu wenige echte Bewertungen -> ruhige, statische Reihe statt Laufband.
   Die Karten füllen die Zeile, damit die Sektion nicht halbleer wirkt. */
.marquee--static .marquee__viewport { overflow-x: auto; scrollbar-width: thin; }
.marquee--static .marquee__track { animation: none; width: 100%; }
.marquee--static { -webkit-mask-image: none; mask-image: none; }
/* Nur bei sehr wenigen Bewertungen die Zeile auffüllen. Ab vier Karten
   behalten sie ihre Breite und die Reihe wird seitlich scrollbar — sonst
   werden sie zu schmalen Streifen gequetscht. */
@media (min-width: 700px) {
  .marquee--static[data-wenige] .review-card { flex: 1 1 0; width: auto; min-width: 0; }
}
.marquee--static:not([data-wenige]) .marquee__track { width: max-content; }

@media (prefers-reduced-motion: reduce) {
  .marquee__viewport { overflow-x: auto; }
  .marquee__track { animation: none !important; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__pause { display: none !important; }
}

.review-card {
  flex: none;
  width: min(310px, 74vw);
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius);
  padding: 1.05rem 1.2rem;
  font-size: 0.9375rem; line-height: 1.55;
}
.review-card__text { color: var(--c-ink-2); margin: 0.5rem 0 0.6rem; }
.review-card__meta {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: var(--t-micro); color: var(--c-ink-3);
}
.review-card__meta strong { color: var(--c-ink); font-weight: 600; }
.review-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--c-line); }

.marquee__pause {
  position: absolute; right: 0; top: -2.35rem;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--t-micro); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--c-ink-3);
}
.marquee__pause:hover { color: var(--c-ink); }

/* Google-„G" */
.g-mark { width: 14px; height: 14px; flex: none; }

/* ========================= 04 PERSONENMARKE (§10) ======================= */
.person__grid {
  display: grid; gap: clamp(2.25rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
@media (min-width: 940px) {
  .person__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
  /* Seitenverhältnis des Bildes selbst (3:4) — so erscheint es vollständig,
     genau wie im Hero der Startseite, statt oben und unten beschnitten. */
  .person__figure { aspect-ratio: 1024 / 1365; }
  .person__figure img { height: 100%; object-fit: cover; }
}
.person__figure {
  background: var(--c-paper-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.person__figure::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 64px; height: 3px; background: var(--c-orange);
}
.person__figure img { width: 100%; }

.person__id {
  margin-top: 2.25rem; padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
}
.person__id-name { font-family: var(--f-serif); font-size: 1.6rem; line-height: 1.2; }
.person__id-role { font-size: var(--t-small); color: var(--c-ink-3); margin-top: 0.25rem; }

.facts {
  display: grid; gap: 1px;
  background: var(--c-line);
  margin-top: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);
  border-block: 1px solid var(--c-line);
}
.facts li { background: var(--c-paper); padding: 1.5rem 0; }
.section--white .facts li { background: var(--c-white); }
.facts__title {
  display: flex; align-items: baseline; gap: 0.7rem;
  font-size: 1.0625rem; font-weight: 600;
}
.facts__title .idx {
  font-family: var(--f-serif); font-size: 0.9rem;
  color: var(--c-orange); flex: none;
}
.facts__desc { color: var(--c-ink-3); font-size: var(--t-small); margin-top: 0.2rem; padding-left: 1.55rem; }

@media (min-width: 760px) {
  .facts { grid-template-columns: repeat(3, 1fr); gap: 1px; }
  .facts li { padding: 1.75rem clamp(1.25rem, 2.4vw, 2.25rem); }
  .facts li:first-child { padding-left: 0; }
}

/* ====================== 05 EIGENTÜMERSTIMMEN (§11) ======================
   Durchblätterbar statt zwei feste Karten: alle Bewertungen mit deutschem
   Original sind erreichbar, ohne die Sektion endlos lang zu machen.       */
.section-head { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.section-head--center { text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head__note {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-top: 1.1rem;
  font-size: var(--t-small); color: var(--c-ink-3);
}
.section-head__note strong { color: var(--c-ink); font-weight: 600; }

/* ---------------------- Bewertungsband (§11) ---------------------------
   Die Karten von vorher, jetzt als endlos nach links laufendes Band.
   Beide Ränder blenden aus, damit der Abschnitt begrenzt wirkt statt
   angeschnitten. Bei reduzierter Bewegung wird daraus ein Band zum
   Wischen — ohne Eigenbewegung. */
.tstm-quelle {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.tstm-quelle strong { color: var(--c-ink); font-weight: 600; }
.tstm-quelle:hover { border-bottom-color: var(--c-orange); }

.tstm-band {
  --tstm-gap: clamp(1rem, 0.5rem + 1.6vw, 1.75rem);
  position: relative;
  /* Aus dem Raster ausbrechen: das Band soll die volle Breite nutzen,
     die Kopfzeile darüber bleibt im Container. */
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gutter), calc(50vw - var(--container) / 2));
}
.tstm-band__viewport {
  overflow: hidden;
  margin-inline: calc(-1 * max(var(--gutter), calc(50vw - var(--container) / 2)));
  padding-inline: max(var(--gutter), calc(50vw - var(--container) / 2));
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.tstm-band__track {
  display: flex; align-items: stretch;
  gap: var(--tstm-gap);
  width: max-content;
  animation: tstm-lauf var(--tstm-dauer, 180s) linear infinite;
  will-change: transform;
}
/* Die Liste steckt doppelt im Band. Um eine Länge plus einen Abstand
   verschieben — dann sitzt die Kopie exakt auf der Ausgangsposition. */
@keyframes tstm-lauf {
  to { transform: translate3d(calc(-50% - var(--tstm-gap) / 2), 0, 0); }
}
.tstm-band:hover .tstm-band__track,
.tstm-band:focus-within .tstm-band__track,
.tstm-band[data-pause='1'] .tstm-band__track { animation-play-state: paused; }

/* Anhalten — klein und hell, oben rechts über dem Band. */
.tstm-stop {
  position: absolute; top: calc(-1 * clamp(2.75rem, 2rem + 2vw, 3.5rem)); right: var(--gutter);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--c-line);
  background: var(--c-white); color: var(--c-ink-3);
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
@media (min-width: 1400px) { .tstm-stop { right: max(var(--gutter), calc(50vw - var(--container) / 2)); } }
.tstm-stop:hover { color: var(--c-orange-cta); border-color: var(--c-orange); }
.tstm-stop svg { width: 15px; height: 15px; fill: currentColor; }

/* Die Karte — unverändert wie zuvor, nur mit fester Bandbreite. */
.tstm {
  flex: 0 0 clamp(17.5rem, 80vw, 27.5rem);
  display: flex; flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
}
.section--white .tstm { background: var(--c-paper); }

.tstm__context {
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.085em; text-transform: uppercase; line-height: 1.5;
  color: var(--c-ink-3);
  padding-bottom: 1.1rem; margin-bottom: 1.35rem;
  border-bottom: 1px solid var(--c-line);
  min-height: 3.6em;
}
.tstm__context .ort { color: var(--c-orange-cta); }
/* Die Texte sind unterschiedlich lang. Auf 9 Zeilen begrenzen, damit die
   Karten im Band gleich hoch bleiben; vollständig steht alles bei Google. */
.tstm__quote {
  font-family: var(--f-serif);
  font-size: clamp(1.09rem, 1rem + 0.42vw, 1.32rem);
  line-height: 1.5;
  color: var(--c-ink);
  flex: 1;
  display: -webkit-box; -webkit-line-clamp: 11; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Schmale Karten brauchen mehr Zeilen für denselben Text. */
@media (max-width: 719.98px) { .tstm__quote { -webkit-line-clamp: 14; } }
.tstm__foot {
  margin-top: 1.75rem; padding-top: 1.1rem;
  border-top: 1px solid var(--c-line-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.tstm__name { font-weight: 600; font-size: var(--t-small); }
.tstm__name span { display: block; font-weight: 400; font-size: var(--t-micro); color: var(--c-ink-3); }
.tstm__src { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--t-micro); color: var(--c-ink-3); }

/* Auf dem Telefon kein Laufband, sondern ein Wischkarussell.
   Ein durchlaufendes Band hat keine Halteposition: Bleibt es stehen —
   durch Antippen, Fokus oder die Pause-Taste — stehen zwei halbe Karten
   im Bild und nichts davon ist lesbar. Mit Snap-Punkten liegt immer
   genau eine Bewertung im Ausschnitt. */
@media (max-width: 760px) {
  .tstm-band__track {
    animation: none;
    width: auto;
    scroll-snap-type: none;
  }
  .tstm-band__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: none; mask-image: none;
  }
  .tstm-band__viewport::-webkit-scrollbar { display: none; }
  .tstm { flex-basis: 86vw; scroll-snap-align: center; }
  .tstm--dup { display: none; }        /* Kopien braucht nur das Laufband */
  .tstm-stop { display: none; }        /* nichts läuft, nichts anzuhalten */
}

@media (prefers-reduced-motion: reduce) {
  .tstm-band__track { animation: none; }
  .tstm-band__viewport {
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-mask-image: none; mask-image: none;
  }
  .tstm { scroll-snap-align: start; }
  .tstm--dup { display: none; }
  .tstm-stop { display: none; }
}

/* ==================== 06 EIGENTÜMERVIDEOS (§12) ========================
   Rendert nur mit echtem Material aus data/videos.js.
   Die Aufnahmen sind Hochformat (Social-Cut) — das Layout ist darauf
   ausgelegt, statt sie in ein 16:9-Fenster zu zwingen.                   */
.videos[hidden] { display: none; }
.videos__grid { display: grid; gap: clamp(2.25rem, 1rem + 4vw, 4rem); align-items: center; }
@media (min-width: 940px) { .videos__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); } }

.video-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.video-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--c-dark); aspect-ratio: 9 / 16;
  max-width: 420px;
}
.video-card img,
.video-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card img { opacity: 0.92; transition: opacity 0.3s var(--ease), transform 1s var(--ease); }
.video-card:hover img { opacity: 1; transform: scale(1.02); }

.video-card__play {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 0.9rem; padding: 1.35rem;
  color: #fff; text-align: left;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.72) 100%);
}
.video-card__icon {
  align-self: flex-start;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-orange); color: #fff;
  margin-bottom: auto; margin-top: 1.35rem;
  transition: transform 0.22s var(--ease);
}
.video-card__icon svg { width: 20px; height: 20px; margin-left: 2px; }
.video-card__play:hover .video-card__icon { transform: scale(1.07); }
.video-card__label { font-size: var(--t-small); line-height: 1.45; color: rgba(255,255,255,0.86); }
.video-card__label b { display: block; font-weight: 600; color: #fff; margin-bottom: 0.15rem; }
.video-note {
  margin-top: 1.1rem; font-size: var(--t-micro); color: var(--c-ink-3);
  display: flex; align-items: center; gap: 0.5rem;
}
.section--dark .video-note { color: rgba(255,255,255,0.6); }

/* ====================== 07 VERKAUFSERFOLGE (§13) ======================= */
.ref-grid {
  display: grid; gap: clamp(1.25rem, 0.6rem + 1.8vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
/* Karten füllen die Rasterzelle vollständig aus, damit Bild, Textblock und
   der Link am Fuß über alle Karten hinweg auf einer Linie liegen — auch bei
   unterschiedlich langen Titeln. */
.ref {
  display: flex; flex-direction: column;
  height: 100%;
  text-decoration: none;
}
.ref__text { flex: 1 1 auto; }
.ref__media {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  background: var(--c-paper-2);
}
.ref__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.ref:hover .ref__media img { transform: scale(1.035); }
.ref__status {
  position: absolute; left: 0.9rem; top: 0.9rem;
  font-size: 0.78rem;
  /* abgeleitetes Orange: Weiß auf #FF4D01 erreicht nur 3,33:1 */
  background: var(--c-orange-cta);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.36rem 0.68rem;
  border-radius: 2px;
}
.ref__meta {
  margin-top: 1.15rem;
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.085em; text-transform: uppercase; line-height: 1.5;
  color: var(--c-ink-3);
}
.ref__title {
  font-family: var(--f-serif);
  font-size: 1.4rem; line-height: 1.24;
  margin-top: 0.4rem;
}
.ref__text { color: var(--c-ink-3); font-size: var(--t-small); margin-top: 0.6rem; }

/* Solange erst ein oder zwei Verkaufsreferenzen gepflegt sind, sollen die
   Karten nicht über die volle Breite gezogen werden. */
.ref-grid[data-anzahl="1"] { grid-template-columns: minmax(0, 380px); }
.ref-grid[data-anzahl="2"] { grid-template-columns: repeat(2, minmax(0, 380px)); }
@media (max-width: 719px) {
  .ref-grid[data-anzahl="1"],
  .ref-grid[data-anzahl="2"] { grid-template-columns: minmax(0, 1fr); }
}

.section-foot { margin-top: clamp(2.25rem, 1.4rem + 2.4vw, 3.5rem); }
.section-foot--center { text-align: center; }

/* ==================== 08 VERKAUFSSTRATEGIE (§15) ======================= */
.steps { counter-reset: step; }
.step {
  display: grid;
  gap: 0.35rem 1.75rem;
  padding-block: clamp(1.5rem, 1rem + 1.4vw, 2.1rem);
  border-top: 1px solid var(--c-line);
  align-items: baseline;
}
.step:last-child { border-bottom: 1px solid var(--c-line); }
.step__num {
  font-family: var(--f-serif);
  font-size: 1.1rem;
  color: var(--c-orange);
  letter-spacing: 0.02em;
}
.step__title { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; }
.step__text {
  color: var(--c-ink-3); font-size: var(--t-small); max-width: 62ch;
  overflow-wrap: break-word; hyphens: auto;
}

@media (min-width: 800px) {
  .step { grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr); }
  .step__text { grid-column: 3; }
}
/* Steht die Liste in der zweispaltigen Anordnung, ist für eine dritte
   Spalte kein Platz — sonst quetscht sich der Text auf gut 100 Pixel. */
@media (min-width: 800px) {
  /* Hier stehen Wörter statt Ziffern in der ersten Spalte — sie brauchen Platz. */
  .why__grid .step { grid-template-columns: minmax(6rem, auto) minmax(0, 1fr); }
  .why__grid .step__title,
  .why__grid .step__text { grid-column: 2; }
}
@media (max-width: 799px) {
  .step { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .step__num { grid-row: 1; }
  .step__title { grid-column: 2; }
  .step__text { grid-column: 2; }
  .step__benefit { grid-column: 2; }
  /* In der Zeitleiste stehen Wörter statt Ziffern („Grundsatz"). Bei fester
     Spaltenbreite von 2.75rem schob sich der Titel darüber. */
  .why__grid .step { grid-template-columns: 1fr; gap: 0.15rem; }
  .why__grid .step__num { grid-column: 1; }
  .why__grid .step__title,
  .why__grid .step__text { grid-column: 1; }
}

/* „Für Sie bedeutet das" — übersetzt jede Leistung in Entlastung.
   Für Eigentümer 55+ ist der Aufwand die größere Sorge als der Preis.  */
.step__benefit {
  display: flex; gap: 0.6rem;
  margin-top: 0.7rem;
  font-size: var(--t-small);
  color: var(--c-ink);
  max-width: 62ch;
}
.step__benefit::before {
  content: ''; flex: none;
  width: 3px; align-self: stretch;
  background: var(--c-orange);
  border-radius: 2px;
}
/* Ohne min-width: 0 kollabiert der Textknoten in schmalen Grid-Spalten
   auf ein Wort pro Zeile. */
.step__benefit > span { flex: 1 1 auto; min-width: 0; }
.step__benefit b { font-weight: 600; }
@media (min-width: 800px) { .step__benefit { grid-column: 3; } }

/* --------------------- Diskrete Vermarktung ---------------------------- */
.discreet__grid { display: grid; gap: clamp(2.25rem, 1rem + 4vw, 4rem); align-items: center; }
@media (min-width: 940px) { .discreet__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); } }

.pullquote {
  margin: 0;
  border-left: 3px solid var(--c-orange);
  padding: 0.4rem 0 0.4rem clamp(1.25rem, 2.5vw, 2rem);
}
.pullquote blockquote {
  margin: 0;
  font-family: var(--f-serif);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  line-height: 1.48;
  color: var(--c-ink);
}
.pullquote figcaption {
  margin-top: 1.1rem;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: var(--t-micro); color: var(--c-ink-3);
}
.pullquote figcaption strong { color: var(--c-ink); font-weight: 600; }

/* Editorial-Bruch innerhalb des Prozesses (§16) */
/* margin-inline: 0 hebt den Browser-Standardrand von <figure> auf — sonst
   steht das Bild 40px schmaler als der Text darüber. */
.editorial-break { margin-block: clamp(3rem, 2rem + 3vw, 5rem) 0; margin-inline: 0; }
.editorial-break figure { margin: 0; }
.editorial-break img,
.editorial-break video { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 16/9; object-fit: cover; display: block; }
.editorial-break__media { position: relative; }
.editorial-break__badge {
  position: absolute; left: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.8rem; border-radius: 100px;
  background: rgba(0,0,0,0.42); backdrop-filter: blur(6px);
  color: #fff; font-size: var(--t-micro); letter-spacing: 0.05em; text-transform: uppercase;
}
.editorial-break__badge svg { width: 12px; height: 12px; }
.editorial-break figcaption {
  margin-top: 0.9rem; font-size: 0.9375rem; color: var(--c-ink-3);
  display: flex; align-items: flex-start; gap: 0.7rem;
}
.editorial-break figcaption::before {
  content: ''; width: 20px; height: 2px; margin-top: 0.72em;
  background: var(--c-orange); flex: none;
}

/* ------------------ Einzelne Eigentümerstimme (Über uns) ---------------
   Ruhig gesetzt, mittig, ohne Kartenrahmen. Steht an der Stelle, an der
   der Leser gerade abwägt, ob er dieser Person glaubt. Nicht zu
   verwechseln mit .pullquote weiter oben (Startseite, linksbündig). */
.stimme { text-align: center; max-width: 46ch; margin-inline: auto; }
.stimme blockquote {
  font-family: var(--f-serif);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  line-height: 1.45; color: var(--c-ink); margin: 0;
}
.stimme__wer {
  margin-top: 1.5rem; font-size: var(--t-small); color: var(--c-ink-3);
  display: flex; align-items: center; justify-content: center; gap: 0.55rem; flex-wrap: wrap;
}
.stimme__wer b { color: var(--c-ink); font-weight: 600; }
.stimme__wer .stars svg { width: 14px; height: 14px; }
.stimme__wer .g-mark { width: 13px; height: 13px; }

/* ================== 09 BETREUUNG / SCARCITY (§19) ====================== */
.why__grid { display: grid; gap: clamp(2.25rem, 1rem + 4vw, 4.5rem); align-items: start; }
@media (min-width: 940px) { .why__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }

.principles { display: grid; }
.principle { padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,0.14); }
.principle__title { display: flex; align-items: baseline; gap: 0.7rem; font-size: 1.0625rem; font-weight: 600; }
.principle__title .idx { color: var(--c-orange); font-family: var(--f-serif); font-size: 0.9rem; flex: none; }
.principle__text { color: rgba(255,255,255,0.62); font-size: var(--t-small); margin-top: 0.25rem; padding-left: 1.55rem; }
@media (min-width: 620px) {
  .principles { grid-template-columns: repeat(2, 1fr); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .principle { padding: 1.75rem 0; }
}

/* ============================ 10 FAQ (§22) ============================= */
.faq { border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__q {
  display: flex; align-items: flex-start; gap: 1.25rem;
  width: 100%; text-align: left;
  padding: clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem) 0;
  font-size: clamp(1.02rem, 0.96rem + 0.34vw, 1.2rem);
  font-weight: 600; line-height: 1.4;
  color: var(--c-ink);
  transition: color 0.16s var(--ease);
}
.faq__q:hover { color: var(--c-orange-cta); }
.faq__icon {
  flex: none; margin-left: auto; position: relative;
  width: 16px; height: 16px; margin-top: 5px;
}
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: currentColor;
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded='true'] .faq__icon::after { transform: rotate(0deg); opacity: 0; }
.faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s var(--ease);
}
.faq__a[data-open='true'] { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  color: var(--c-ink-2); font-size: var(--t-body);
  max-width: 68ch; padding-bottom: 1.6rem;
}

/* ====================== 11 CONVERSION / FORM (§23-25) ================== */
/* align-items: stretch (Standard) statt start: Beide Spalten sind gleich
   hoch und enden bündig. Der Überschuss links verteilt sich auf die
   Abstände der drei Schritte, statt als Loch unten stehen zu bleiben. */
.convert__grid { display: grid; gap: clamp(2.25rem, 1rem + 4vw, 4rem);
  margin-top: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); }
.convert__spalte { display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 980px) { .convert__grid { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); } }

/* Ablauf in drei Schritten. Beantwortet die Frage „Was passiert, wenn ich
   auf Senden drücke?" bevor sie zum Abbruchgrund wird.
   Alles bündig an der linken Textkante: keine eingerückte Zweitspalte,
   damit Überschrift, Vorspann, Schritte und Kontakt eine Flucht bilden. */
/* Steht die Liste als erstes Element in der Spalte, muss ihre obere
   Linie mit der Oberkante der Formularkarte fluchten. */
.ablauf { display: grid; flex: 1 1 auto; align-content: space-between; }
.ablauf li { padding-block: 1.15rem; border-top: 1px solid var(--c-line); }
.ablauf li:last-child { border-bottom: 1px solid var(--c-line); }
.ablauf__title { font-weight: 600; font-size: var(--t-body); line-height: 1.4; }
/* Die Ziffer läuft im Textfluss mit, statt eine eigene Spalte aufzumachen —
   sonst steht der Beschreibungstext 34 px neben allem anderen. */
.ablauf__num {
  font-family: var(--f-serif); font-size: 0.95rem; color: var(--c-orange-cta);
  margin-right: 0.6rem;
}
.ablauf__num::after { content: '·'; margin-left: 0.6rem; color: var(--c-line); }
.ablauf__text {
  color: var(--c-ink-3); font-size: var(--t-small);
  margin-top: 0.25rem; max-width: 46ch;
}

/* Gesicht neben dem Formular: Wer sieht, bei wem die Angaben landen,
   sendet eher ab. Als eigener Kasten, damit Bild und Text erkennbar
   zusammengehören und die Spalte nicht in lose Teile zerfällt. */
.ansprech {
  flex: none;
  margin-top: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ansprech__kopf {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 0.8rem + 0.8vw, 1.35rem);
  align-items: center;
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
}
.ansprech__bild {
  width: 104px; height: 139px; flex: none;
  border-radius: var(--radius); object-fit: cover; display: block;
}
.ansprech__name { font-weight: 600; font-size: var(--t-body); line-height: 1.3; }
.ansprech__rolle { font-size: var(--t-small); color: var(--c-ink-3); margin-top: 0.1rem; }
.ansprech__satz { font-size: var(--t-small); color: var(--c-ink-3); margin-top: 0.7rem; }

.kanaele {
  display: flex; flex-wrap: wrap; gap: 0.2rem clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
  padding: 0.75rem clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
}
.kanaele a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--t-small); font-weight: 600; color: var(--c-ink);
  text-decoration: none; padding-block: 0.45rem;
  transition: color 0.16s var(--ease);
}
.kanaele a:hover { color: var(--c-orange-cta); }
.kanaele a svg { width: 16px; height: 16px; flex: none; color: var(--c-ink-3); }
.kanaele a:hover svg { color: var(--c-orange-cta); }

/* --- Multi-Step-Formular ------------------------------------------------ */
/* Eine Karte für beides: Formular oben, Rückruf als ruhiger Fuß darunter.
   Zwei getrennte Kästen lesen sich als zwei konkurrierende Angebote und
   lassen die rechte Spalte zerfallen. */
.formkarte {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex: 1 1 auto;
  display: flex; flex-direction: column;
}
/* Das Formular nimmt die freie Höhe, der Rückruf bleibt am Kartenfuß. */
.lead-form { flex: 1 1 auto; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.callback--fuss { flex: none; }

.lf__progress { margin-bottom: 1.75rem; }
.lf__progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--t-micro); letter-spacing: 0.075em; text-transform: uppercase;
  color: var(--c-ink-3); margin-bottom: 0.6rem;
}
.lf__progress-bar { height: 2px; background: var(--c-line); position: relative; overflow: hidden; }
.lf__progress-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--c-orange);
  width: 25%;
  transition: width 0.4s var(--ease);
}

.lf__sublegend {
  font-size: var(--t-small); font-weight: 600;
  color: var(--c-ink-2); margin-bottom: 0.75rem;
}
.lf__step { display: none; }
.lf__step.is-active { display: block; }
.lf__legend {
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem);
  line-height: 1.2; margin-bottom: 1.5rem;
  padding: 0; border: 0;
}

.choice-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
/* In der breiten Karte höchstens drei Spalten: bei fünf trennt „Eigentums-
   wohnung" mitten im Wort. */
@media (min-width: 1000px) { .choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Vier schmale Felder in einer Reihe nutzen die Breite besser als zwei sehr
   lange Eingabefelder. */
@media (min-width: 1000px) { .field-grid--2 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.choice {
  position: relative;
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 58px;
  padding: 0.9rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--t-small); font-weight: 500;
  line-height: 1.3; hyphens: auto;
  transition: border-color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.choice:hover { border-color: var(--c-ink-3); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__mark {
  flex: none; width: 18px; height: 18px;
  border: 1.5px solid var(--c-line); border-radius: 50%;
  position: relative;
  transition: border-color 0.16s var(--ease);
}
.choice__mark::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--c-orange);
  transform: scale(0); transition: transform 0.18s var(--ease);
}
.choice input:checked ~ .choice__mark { border-color: var(--c-orange); }
.choice input:checked ~ .choice__mark::after { transform: scale(1); }
.choice:has(input:checked) { border-color: var(--c-orange); background: var(--c-orange-tint); }
.choice:has(input:focus-visible) { outline: 2px solid var(--c-orange-cta); outline-offset: 2px; }

.field-grid { display: grid; gap: 0.9rem; }
@media (min-width: 560px) { .field-grid--2 { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.9375rem; font-weight: 600; color: var(--c-ink-2); }
.field label .opt { font-weight: 400; color: var(--c-ink-3); }
.field input, .field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  min-height: 48px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  font-size: 1rem;
  transition: border-color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.field input:hover, .field textarea:hover { border-color: var(--c-ink-3); }
.field input:focus { background: var(--c-white); }
.field textarea { min-height: 96px; resize: vertical; }
.field[data-invalid='true'] input,
.field[data-invalid='true'] textarea { border-color: #b3261e; background: #fdf4f3; }
.field__error { font-size: 0.9375rem; color: #a81f18; min-height: 0; }
.field__error:empty { display: none; }

.consent {
  display: flex; gap: 0.75rem; align-items: flex-start;
  font-size: 0.9375rem; line-height: 1.55; color: var(--c-ink-2);
  margin-top: 1.1rem;
}
.consent input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--c-orange-cta); }
.consent a { color: var(--c-ink); }

.lf__nav { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.75rem; flex-wrap: wrap; }
.lf__back {
  font-size: var(--t-small); font-weight: 600; color: var(--c-ink-3);
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 0;
}
.lf__back:hover { color: var(--c-ink); }
.lf__trust {
  margin-top: 1.1rem;
  font-size: 0.9375rem; color: var(--c-ink-3);
  display: flex; align-items: center; gap: 0.5rem;
}
.lf__trust svg { width: 15px; height: 15px; flex: none; color: var(--c-orange); }

.lf__message {
  border-radius: var(--radius);
  padding: 1.35rem 1.45rem;
  font-size: var(--t-small); line-height: 1.6;
}
.lf__message[hidden] { display: none; }
.lf__message--ok    { background: var(--c-orange-tint); border: 1px solid #f6d0bd; }
.lf__message--error { background: #fdf4f3; border: 1px solid #f1cfcc; color: #7a1c15; }
.lf__message strong { display: block; margin-bottom: 0.25rem; font-weight: 600; }

/* ------------------- Kurzweg: Rückruf statt Formular -------------------
   Für Eigentümer, denen ein vierstufiges Formular zu umständlich ist.
   Zwei Pflichtfelder, sonst nichts.                                      */
.callback {
  margin-top: 1.25rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2rem);
}
/* Zweite Möglichkeit, nicht zweites Angebot: Das Formular bleibt der
   Hauptweg, der Anruf sitzt als ruhiger Fuß in derselben Karte. */
.callback--fuss {
  margin: 0;
  background: var(--c-paper);
  border: 0; border-top: 1px solid var(--c-line);
  border-radius: 0;
  padding: clamp(1.35rem, 1.1rem + 1vw, 1.9rem) clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.callback--fuss .callback__text { max-width: 52ch; margin-bottom: 1rem; }
.callback--fuss .callback__actions { margin-top: 0; }
.callback__title {
  font-family: var(--f-serif);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  line-height: 1.3;
}
.callback__text {
  margin-top: 0.6rem;
  font-size: var(--t-small); line-height: 1.6; color: var(--c-ink-2);
  max-width: 46ch;
}
.callback__actions {
  margin-top: 1.35rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center;
}
.callback__tel {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 1.0625rem; font-weight: 600; text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 1px solid var(--c-line);
}
.callback__tel:hover { border-color: var(--c-orange); color: var(--c-orange-cta); }
.callback__tel svg { width: 18px; height: 18px; color: var(--c-orange); }

.callback__form { margin-top: 1.35rem; }
.callback__form[hidden] { display: none; }
.callback__row { display: grid; gap: 0.9rem; }
@media (min-width: 560px) { .callback__row { grid-template-columns: 1fr 1fr; } }
.callback__toggle { font-size: var(--t-small); font-weight: 600; color: var(--c-ink); text-decoration: underline; text-underline-offset: 4px; }
.callback__toggle:hover { color: var(--c-orange-cta); }

/* ============================ 12 FOOTER (§28) ========================== */
.footer { background: var(--c-dark); color: rgba(255,255,255,0.72); padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2rem; }
.footer a { text-decoration: none; }
.footer .btn--outline { color: #fff; border-color: rgba(255,255,255,0.45); }
.footer .btn--outline:hover { background: #fff; color: var(--c-ink); border-color: #fff; }
.footer__grid {
  display: grid; gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.footer__brand { grid-column: span 2; }
@media (max-width: 599px) { .footer__brand { grid-column: span 1; } }
/* Ab Desktop feste Spalten: Marke, zwei schmale Linklisten, rechts der
   Kontaktblock. Der braucht mehr Breite als eine Navigationsspalte. */
@media (min-width: 1000px) {
  .footer__grid { grid-template-columns: 1.35fr 0.85fr 1.05fr 1.75fr; align-items: start; }
  .footer__brand { grid-column: auto; }
}

/* Kontakt als eigener Block statt zweier Linkspalten: Anschrift und
   Rufnummern haben andere Zeilenlängen als Navigationslisten. */
.footer__kontakt {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
}
.footer__person strong { display: block; color: #fff; font-weight: 600; font-size: var(--t-small); }
.footer__person span {
  display: block; margin-top: 0.15rem;
  font-size: var(--t-micro); color: rgba(255, 255, 255, 0.55);
}
.footer__kanaele {
  display: grid; gap: 0.15rem;
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
/* Einspaltig: Rufnummern und Mailadresse werden sonst abgeschnitten. */
.footer__kanaele li { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.footer__kanaele svg { width: 15px; height: 15px; flex: none; color: var(--c-orange); }
.footer__kanaele a { font-size: var(--t-small); padding-block: 0.4rem; }
.footer__kanaele span { font-size: var(--t-micro); color: rgba(255, 255, 255, 0.45); flex: none; }
.footer__adresse {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: var(--t-micro); color: rgba(255, 255, 255, 0.55); font-style: normal;
  white-space: nowrap;
}
/* Auf schmalen Bildschirmen reicht --t-micro nicht ganz für eine Zeile —
   „44135 Dortmund" rutscht sonst allein nach unten. */
@media (max-width: 400px) {
  .footer__adresse { font-size: 0.75rem; }
}
.footer__logo img { height: 78px; width: auto; }
.footer__tagline { margin-top: 1.1rem; font-size: var(--t-small); max-width: 30ch; }
.footer__col-title {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: #fff; margin-bottom: 1.1rem;
}
/* Touch-Ziele: mindestens 24 px hoch (WCAG 2.5.8) */
.footer__list li + li { margin-top: 0.2rem; }
.footer__list a {
  display: inline-block;
  font-size: var(--t-small);
  padding-block: 0.32rem;
  transition: color 0.16s var(--ease);
}
.footer__list a:hover { color: var(--c-orange); }

.footer__claim {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem 2rem;
}
.footer__claim-text {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2.1rem);
  color: #fff; line-height: 1.2;
}
.footer__legal {
  margin-top: 2rem; padding-top: 1.35rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  font-size: 0.875rem; color: rgba(255,255,255,0.62);
}
.footer__legal a:hover { color: #fff; }

/* ======================= Typografischer Trenner (§21) ================== */
.divider-type {
  text-align: center;
  padding-block: clamp(4rem, 2.5rem + 5vw, 8rem);
}
.divider-type p {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem);
  line-height: 1.22; letter-spacing: -0.015em;
  max-width: 20ch; margin-inline: auto;
}
.divider-type .accent { color: var(--c-orange); }

/* ============================ Unterseiten ============================== */
.page-head { padding-block: clamp(3rem, 2rem + 3vw, 5.5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.page-head h1 { font-family: var(--f-display); font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.018em; }
.page-head .lead { margin-top: 1.1rem; max-width: 58ch; }

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.filter {
  padding: 0.55rem 1rem; min-height: 40px;
  border: 1px solid var(--c-line); border-radius: 100px;
  font-size: 0.9375rem; font-weight: 500; color: var(--c-ink-2);
  transition: all 0.16s var(--ease);
}
.filter:hover { border-color: var(--c-ink-3); }
.filter[aria-pressed='true'] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

.obj-grid {
  display: grid; gap: clamp(1.5rem, 0.8rem + 2vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
/* Drei je Reihe statt vier — größere Bilder, ruhigeres Raster. */
@media (min-width: 900px) { .obj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Objektlisten: gleichmäßige Kartenhöhen trotz sehr unterschiedlich langer
   Originaltitel und -beschreibungen */
/* Feste Zeilenhöhen je Block: so beginnen Titel, Beschreibung und Link auf
   allen Karten auf derselben Höhe. */
.ref-grid .ref__meta,
.obj-grid .ref__meta {
  font-size: 0.875rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 3em;
}
.ref-grid .ref__title,
.obj-grid .ref__title {
  font-size: clamp(1.16rem, 1.02rem + 0.5vw, 1.42rem); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em;
}
.ref-grid .ref__text,
.obj-grid .ref__text {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 4.95em;
}
/* Ohne Beschreibung endet die Karte mit dem Titel — die feste Mindesthöhe
   des Titels hält die Karten trotzdem auf einer Linie. */
.ref:not(:has(.ref__text)) .ref__title { margin-bottom: 0; }
.obj__price { min-height: 1.6em; }
.obj__price { font-size: var(--t-small); font-weight: 600; margin-top: 0.5rem; }
.obj-empty { padding: 3rem 0; color: var(--c-ink-3); }

.legal { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.legal h2 { font-family: var(--f-display); font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); margin-top: 2.5rem; margin-bottom: 0.75rem; }
.legal h3 { font-size: 1.0625rem; font-weight: 600; margin-top: 1.75rem; margin-bottom: 0.4rem; }
.legal p, .legal li { color: var(--c-ink-2); font-size: var(--t-small); line-height: 1.7; }
/* Lange URLs und Mailadressen sprengen sonst schmale Bildschirme. */
.legal a { overflow-wrap: anywhere; }
.legal p + p { margin-top: 0.85rem; }
.legal a { color: var(--c-ink); }
.legal ul { list-style: disc; padding-left: 1.25rem; margin-top: 0.5rem; }
.legal ul li { margin-top: 0.3rem; }

/* ==================== Objekt-Detailansicht (Dialog) ====================
   Aufbau wie eine Exposé-Seite: großes Bild oben über die volle Breite,
   darunter Titel und Eckdaten, dann Text links und eine kompakte
   Datenspalte rechts, die mitläuft.                                      */
.ref { position: relative; }

.obj__open {
  margin-top: auto;           /* immer am unteren Kartenrand */
  padding-top: 0.9rem;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--t-small); font-weight: 600; color: var(--c-ink);
  padding-block: 0.4rem;
  border-bottom: 1px solid var(--c-line);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), gap 0.18s var(--ease);
}
.obj__open::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg); }
/* Referenzkarten sind nicht anklickbar — ohne Knopf auch kein Zoom auf das
   Bild, sonst verspricht die Karte eine Interaktion, die es nicht gibt. */
.ref:not(:has(.obj__open)):hover .ref__media img { transform: none; }
.obj__open:hover { color: var(--c-orange-cta); border-color: var(--c-orange); gap: 0.75rem; }
.obj__open svg { width: 14px; height: 14px; }
.obj__open:focus-visible { outline: none; }
.ref:has(.obj__open:focus-visible) { outline: 2px solid var(--c-orange-cta); outline-offset: 6px; border-radius: var(--radius-lg); }

/* ---- Objekt-Detailseite (immobilie.html) -------------------------------
   Eigene Seite statt Popup: kein Fenster-im-Fenster, echte Zurück-Taste,
   teilbarer Link. Der Inhalt liegt im normalen Seitenfluss. */
.objseite { padding-block: clamp(1.25rem, 1rem + 1vw, 2rem) clamp(2.5rem, 2rem + 2vw, 4rem); }
.objseite__zurueck {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--t-small); font-weight: 600; color: var(--c-ink);
  text-decoration: none; padding-block: 0.5rem;
  margin-bottom: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  border-bottom: 1px solid var(--c-line);
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.objseite__zurueck:hover { color: var(--c-orange-cta); border-color: var(--c-orange); }
.objseite__zurueck svg { width: 15px; height: 15px; }
.obj-laden { color: var(--c-ink-3); padding-block: 4rem; }
.objside__hint { font-size: var(--t-micro); color: var(--c-ink-3); margin-top: 1.1rem; }

.terminform { margin-top: 0; }
.terminform .field-grid + .field-grid { margin-top: 0.9rem; }
.terminform .consent { margin-top: 1.25rem; }
.terminform .btn { margin-top: 1.5rem; }
@media (max-width: 559px) { .terminform .btn { width: 100%; } }

/* ---- Galerie: helles Feld, Bild über die volle Dialogbreite ------------
   Feste Höhe statt aspect-ratio: mit einer Höhenbegrenzung würde
   aspect-ratio die Breite mitschrumpfen — dadurch entstand rechts neben dem
   Bild eine leere Fläche.                                                */
.objgal { position: relative; background: var(--c-paper-2);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; }
.objgal__main {
  position: relative;
  width: 100%;
  height: clamp(280px, 52vh, 580px);
  overflow: hidden;
  background: var(--c-paper-2);
}
/* contain statt cover: die Aufnahmen sind 3:2, das Fenster ist breiter.
   Mit cover würde oben und unten rund ein Drittel wegfallen — die Objekte
   wirkten langgezogen. Der helle Rand ist gewollt. */
.objgal__main img {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  animation: objgal-fade 0.35s var(--ease);
}
@keyframes objgal-fade { from { opacity: 0.35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .objgal__main img { animation: none; } }

.objgal__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; box-shadow: 0 2px 12px rgba(22,24,26,0.14);
  border: 1px solid var(--c-line); color: var(--c-ink);
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.objgal__nav:hover { border-color: var(--c-ink-3); transform: translateY(-50%) scale(1.06); }
.objgal__nav svg { width: 17px; height: 17px; }
.objgal__nav--prev { left: 1rem; }
.objgal__nav--next { right: 1rem; }

.objgal__tags {
  position: absolute; left: 1.1rem; top: 1.1rem;
  display: flex; flex-wrap: wrap; gap: 0.45rem;
}
.objgal__tag {
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.36rem 0.68rem; border-radius: 2px;
  background: var(--c-orange-cta); color: #fff;
}
.objgal__tag--neutral { background: #fff; color: var(--c-ink); border: 1px solid var(--c-line); }
.objgal__count {
  position: absolute; right: 1.1rem; bottom: 1.1rem;
  background: #fff; color: var(--c-ink-2);
  font-size: var(--t-micro); padding: 0.3rem 0.7rem; border-radius: 100px;
  border: 1px solid var(--c-line); box-shadow: 0 1px 6px rgba(22,24,26,0.08);
}
.objgal__thumbs {
  display: flex; gap: 0.4rem;
  padding: 0.6rem clamp(0.6rem, 1.4vw, 1rem);
  overflow-x: auto; scrollbar-width: thin;
  background: var(--c-paper-2);
  border-bottom: 1px solid var(--c-line);
}
.objgal__thumbs button {
  flex: none; width: 104px; aspect-ratio: 16/10;
  overflow: hidden; border-radius: 2px;
  opacity: 0.62; outline: 1px solid transparent;
  transition: opacity 0.18s var(--ease), outline-color 0.18s var(--ease);
}
.objgal__thumbs button[aria-current='true'] { opacity: 1; outline-color: var(--c-orange); }
.objgal__thumbs button:hover { opacity: 0.9; }
.objgal__thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Objektseite auf dem Telefon --------------------------------------
   Die Aufnahmen sind 3:2 bis 4:3. In einem hohen Feld entstehen dadurch
   oben und unten breite leere Bänder — das Seitenverhältnis mitführen. */
@media (max-width: 760px) {
  .objgal__main { height: auto; aspect-ratio: 4 / 3; }
  .objgal__nav { width: 38px; height: 38px; }
  .objgal__nav svg { width: 14px; height: 14px; }
  .objgal__nav--prev { left: 0.5rem; }
  .objgal__nav--next { right: 0.5rem; }
  .objgal__tags { left: 0.75rem; top: 0.75rem; }
  .objgal__count { right: 0.75rem; bottom: 0.75rem; }
  .objgal__thumbs { padding: 0.5rem 0.75rem; }
  .objgal__thumbs button { width: 76px; }
}

/* ---- Inhaltsbereich ---------------------------------------------------- */
.objhead { margin-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }

.objhead {
  padding-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  border-bottom: 1px solid var(--c-line);
  display: grid; gap: 1.5rem;
}
/* Ab Tablet steht der Aufruf rechts neben Titel und Preis — der Platz dort
   ist ohnehin leer, und der Knopf ist ohne Scrollen sichtbar. */
@media (min-width: 760px) {
  .objhead { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; }
}
.objhead__aktion { display: flex; }
@media (min-width: 760px) { .objhead__aktion { justify-content: flex-end; } }
.objhead__aktion .btn { white-space: nowrap; }
.objhead__meta {
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-ink-3);
}
.objhead__title {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.5rem);
  line-height: 1.15; letter-spacing: -0.015em;
  margin: 0.55rem 0 0; max-width: 24ch;
}
.objhead__price {
  margin-top: 1rem;
  font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem);
  font-weight: 600;
}
.objhead__price span { font-size: var(--t-small); font-weight: 400; color: var(--c-ink-3); }

.objgrid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); padding-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
@media (min-width: 900px) { .objgrid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }

/* Beschreibung und Lage klar trennen: eigene Überschriftenzeile mit
   orangefarbenem Strich und eine Trennlinie zwischen den Blöcken. */
.objtext section + section {
  margin-top: clamp(2rem, 1.4rem + 1.6vw, 3rem);
  padding-top: clamp(2rem, 1.4rem + 1.6vw, 3rem);
  border-top: 1px solid var(--c-line);
}
.objtext h4 {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--c-ink-2);
  margin: 0 0 1.1rem;
}
.objtext h4::before {
  content: ''; flex: none; width: 26px; height: 2px; background: var(--c-orange);
}
.objtext h4 + p { margin-top: 0; }
.objtext p { font-size: var(--t-small); line-height: 1.75; color: var(--c-ink-2); max-width: 62ch; }
.objtext p + p { margin-top: 0.9em; }
/* Erster Absatz jedes Blocks etwas kräftiger — führt ins Thema ein */
.objtext section > p:first-of-type { color: var(--c-ink); }

/* Rechte Spalte: Eckdaten, Aktion, Kontakt */
.objside { align-self: start; }
@media (min-width: 900px) { .objside { position: sticky; top: clamp(1.6rem, 1.1rem + 2.2vw, 3rem); } }

.objcard {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.objcard__title {
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--c-ink-3);
  margin-bottom: 1rem;
}
.objfacts { display: grid; gap: 0; }
.objfacts > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.objfacts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.objfacts dt { font-size: var(--t-small); color: var(--c-ink-3); }
.objfacts dd { margin: 0; font-weight: 600; font-size: var(--t-small); text-align: right; }

.objaction { margin-top: 1.25rem; }
.objaction .btn { width: 100%; }
.objaction__person {
  margin-top: 1.35rem; padding-top: 1.25rem;
  border-top: 1px solid var(--c-line);
  display: flex; align-items: center; gap: 0.9rem;
}
.objaction__person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 20%; flex: none; }
.objaction__person b { display: block; font-size: var(--t-small); }
.objaction__person span { font-size: var(--t-micro); color: var(--c-ink-3); }
.objcontact { margin-top: 1rem; display: grid; gap: 0.15rem; }
.objcontact a {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--t-small); text-decoration: none; padding-block: 0.35rem;
}
.objcontact a:hover { color: var(--c-orange-cta); }
.objcontact svg { width: 16px; height: 16px; color: var(--c-orange); flex: none; }
.objside__hint { margin-top: 1.1rem; font-size: var(--t-micro); color: var(--c-ink-3); line-height: 1.55; }

html:has(dialog[open]) { overflow: hidden; }


/* ================= Besichtigungsanfrage (eigener Dialog) ================
   Kurzes Formular direkt am Objekt. Bewusst wenige Pflichtfelder — wer eine
   Besichtigung will, soll nicht erst einen Fragebogen ausfüllen.          */