/* ==========================================================================
   Schwarzwald Immobilien — components.css
   Buttons · Auszeichnungen · Karten · Schritte · Profile · Bewertungen
   Instagram · Formular · Karte · Objekte · Rechtstexte
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.65rem;
  border-radius: 100px;
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .15s var(--ease),
              box-shadow .22s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn--primary {
  background: var(--forest);
  color: var(--ivory);
  box-shadow: 0 1px 2px rgba(13, 26, 20, .14);
}
.btn--primary:hover { background: var(--forest-lt); box-shadow: var(--shadow-2); }

.btn--gold {
  background: var(--gold);
  color: var(--night);
}
.btn--gold:hover { background: var(--gold-lt); box-shadow: var(--shadow-2); }

.btn--light { background: var(--ivory); color: var(--ink); }
.btn--light:hover { background: var(--white); box-shadow: var(--shadow-2); }

.btn--ghost { border-color: currentColor; opacity: .85; }
.btn--ghost:hover { opacity: 1; background: rgba(255, 255, 255, .1); }

.section:not(.section--dark):not(.section--forest) .btn--ghost,
.sticky-cta .btn--ghost {
  border-color: var(--stone);
  color: var(--ink);
}
.section:not(.section--dark):not(.section--forest) .btn--ghost:hover,
.sticky-cta .btn--ghost:hover {
  background: var(--forest);
  color: var(--ivory);
  border-color: var(--forest);
}

.btn--ig { background: var(--ig-gradient); color: #fff; }
.btn--ig:hover { box-shadow: var(--shadow-2); filter: brightness(1.06); }

.btn--wa { background: #25d366; color: #05301a; }
.btn--wa:hover { background: #3ae07a; box-shadow: var(--shadow-2); }

.btn--sm { padding: .62rem 1.15rem; font-size: var(--fs-xs); }
.btn--wide { width: 100%; }

/* Auf Touch-Geräten mindestens 44 px hoch — darunter wird das Treffen mühsam.
   Gilt für alle Schaltflächen, auch die kleinen im Kopfbereich. */
@media (hover: none), (max-width: 899px) {
  .btn { min-height: 48px; }
  .btn--sm { min-height: 44px; padding-inline: 1.1rem; }
}

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--forest);
  transition: gap .22s var(--ease);
}
.link-arrow::after { content: "→"; }
.link-arrow:hover { gap: .65rem; }
.section--dark .link-arrow { color: var(--gold-lt); }

/* --- Auszeichnungen (eigene Sektion nach dem Hero) ---------------------- */

.awards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.6rem, .4rem + .9vw, 1rem);
}
@media (min-width: 720px) { .awards { grid-template-columns: repeat(4, 1fr); } }

.award-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
  padding: clamp(1.1rem, .9rem + 1vw, 1.6rem) .75rem;
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: var(--r-md);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
              border-color .3s var(--ease);
}
.award-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--gold) 35%, var(--stone));
}
/* Feiner Gold-Schimmer, der beim Reveal einmal durchzieht */
.award-card::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(193, 154, 75, .18), transparent);
  transform: skewX(-18deg);
}
.award-card.is-visible::after { animation: awardShine 1.1s var(--ease-out) .25s 1; }
@keyframes awardShine { from { left: -60%; } to { left: 130%; } }

.award-medal {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
  background: linear-gradient(150deg, #f7efdd, #efe1c2);
  box-shadow: inset 0 0 0 1px rgba(193, 154, 75, .35);
}
.award-medal--db { color: var(--db-blue); background: #eef0fb; box-shadow: inset 0 0 0 1px rgba(0, 24, 168, .2); }
.award-title { font-size: var(--fs-sm); font-weight: 700; letter-spacing: -0.01em; }
.award-sub { font-size: var(--fs-2xs); color: var(--ink-50); }

@media (prefers-reduced-motion: reduce) { .award-card::after { display: none; } }

/* --- Merkmal (Warum wir) -------------------------------------------------
   Vier Gründe, also ein Raster aus zwei Spalten. Mit dem allgemeinen
   auto-fit-Grid ergaben sich bei 1180 px drei Spalten und die vierte Karte
   stand allein in einer zweiten Reihe, mit zwei Dritteln Leerraum daneben.

   Die Symbole stehen ohne farbige Kachel neben der Überschrift. Gefüllte
   Icon-Quadrate über jeder Zeile sind das häufigste Baukasten-Merkmal
   überhaupt; eine feine Trennlinie ordnet ruhiger und wirkt redaktioneller.
------------------------------------------------------------------------- */

.features {
  display: grid;
  gap: clamp(1.75rem, 1rem + 2.5vw, 2.75rem) clamp(2rem, 1rem + 3vw, 4rem);
}
@media (min-width: 700px) { .features { grid-template-columns: 1fr 1fr; } }

.feature {
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: .9rem;
  row-gap: .5rem;
  border-top: 1px solid var(--stone);
  padding-top: 1.4rem;
}
.section--dark .feature { border-top-color: var(--on-dark-line); }

.feature-icon {
  grid-area: 1 / 1;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  color: var(--forest);
  margin: 0;
  flex: none;
}
.section--dark .feature-icon { color: var(--moss); }
.feature h3 { grid-area: 1 / 2; margin: 0; align-self: center; }
.feature p {
  grid-area: 2 / 2;
  color: var(--ink-70);
  font-size: var(--fs-sm);
  max-width: 42ch;
}
.section--dark .feature p { color: var(--on-dark); }

/* --- Ablauf in drei Schritten -------------------------------------------- */

.steps {
  display: grid;
  gap: clamp(1.75rem, 1rem + 2.5vw, 2.5rem);
  counter-reset: step;
}
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step { position: relative; padding-left: 4rem; }
@media (min-width: 820px) { .step { padding-left: 0; padding-top: 4.25rem; } }

.step-num {
  position: absolute;
  left: 0; top: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--forest);
  color: var(--ivory);
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  z-index: 1;
}
.section--linen .step-num { box-shadow: 0 0 0 6px var(--linen); }

/* Verbindungslinie */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 46px;
  bottom: -1.75rem;
  width: 1px;
  background: var(--stone);
}
@media (min-width: 820px) {
  .step:not(:last-child)::before {
    left: 46px; right: -2.5rem;
    top: 23px; bottom: auto;
    width: auto; height: 1px;
  }
}

.step h3 { margin-bottom: .55rem; }
.step p { color: var(--ink-70); font-size: var(--fs-sm); max-width: 38ch; }

/* --- Profilkarten Dennis & Christian ------------------------------------- */

.profiles {
  display: grid;
  gap: clamp(1.25rem, .8rem + 1.6vw, 2rem);
}
@media (min-width: 720px)  { .profiles { grid-template-columns: 1fr 1fr; } }
/* Drei Spalten ab 1000 px: bei sechs Personen zwei volle Reihen. */
@media (min-width: 1000px) { .profiles { grid-template-columns: repeat(3, 1fr); } }

.profile {
  background: rgba(250, 248, 244, .05);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--ease-out), border-color .3s var(--ease);
}
.profile:hover { transform: translateY(-3px); border-color: rgba(193, 154, 75, .45); }

/* 2:3 statt 4:5: im engeren Format liessen Joshuas und Darius' Vorlagen keinen
   lockereren Ausschnitt zu — ihr Bild ist nur 853 px breit und war bei 4:5
   bis auf vier Pixel ausgereizt. Das hoehere Format gibt Schultern und
   Umgebung Raum, ohne die gemeinsame Flucht aufzugeben. */
.profile-media {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--forest);
}
/* Die Vorlagen sind bereits im Verhältnis 2:3 zugeschnitten, hier wird also
   nichts mehr beschnitten. */
.profile-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.profile-body { padding: clamp(1.25rem, 1rem + .8vw, 1.75rem); display: flex; flex-direction: column; flex: 1; }
.profile-role {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .4rem;
}
.profile-name { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: .6rem; }
.profile-text { font-size: var(--fs-sm); color: var(--on-dark); margin-bottom: .9rem; }

/* Bewertung der einzelnen Person. Bewusst ein Link auf das Quellprofil:
   eine Sternezahl ohne nachprüfbare Quelle ist eine Behauptung. */
.profile-bewertung {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem .6rem;
  margin-bottom: 1.1rem;
  min-height: 44px;                /* Touch-Ziel */
  font-size: var(--fs-xs);
  color: var(--on-dark-dim);
  transition: color .2s var(--ease);
}
.profile-bewertung .stars { margin-bottom: 0; }
.profile-bewertung .stars svg { width: 13px; height: 13px; }
.profile-bewertung strong { color: var(--gold-lt); font-weight: 700; font-size: var(--fs-sm); }
.profile-bewertung:hover { color: var(--on-dark); }
.profile-bewertung:hover .profile-bewertung-text { text-decoration: underline; }

.profile-links {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--on-dark-line);
  display: grid;
  gap: .45rem;
  font-size: var(--fs-sm);
}
.profile-links a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;              /* Touch-Ziel für Telefon und E-Mail */
  color: var(--on-dark);
  transition: color .2s var(--ease);
  word-break: break-word;
}
.profile-links a:hover { color: var(--gold-lt); }
.profile-links svg { flex: none; opacity: .55; }

/* --- Bewertungen --------------------------------------------------------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 150px), 1fr));
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
}
.stat { text-align: center; }
.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: .75rem;
  /* Grün wie die Bildmarke und wie die Zahl darunter, nicht golden: Gold ist
     auf dieser Seite die Farbe der Schaltflächen. */
  background: rgba(20, 67, 47, .10);
  color: var(--forest);
}
.section--dark .stat-icon,
.section--forest .stat-icon {
  background: rgba(250, 248, 244, .09);
  color: var(--moss);
}
.stat-value {
  display: block;
  font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--forest);
  font-variant-numeric: tabular-nums;
}
.section--dark .stat-value { color: var(--gold-lt); }
.stat-label {
  margin-top: .6rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.section--dark .stat-label { color: var(--on-dark-dim); }
.stat-note { margin-top: .25rem; font-size: var(--fs-xs); color: var(--ink-60); }

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.1rem, .8rem + 1.2vw, 1.75rem);
}

.quote {
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: var(--r-md);
  padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  display: flex;
  flex-direction: column;
}
.section--dark .quote {
  background: rgba(250, 248, 244, .05);
  border-color: var(--on-dark-line);
}

/* Die Sterne tragen Bedeutung, also brauchen sie mindestens 3:1 gegen den
   Untergrund. Das helle Gold erreicht nur 2,2:1. */
.stars { display: flex; gap: 2px; color: var(--gold-mark); margin-bottom: .9rem; }
.stars svg { width: 15px; height: 15px; }
.section--dark .stars { color: var(--gold-lt); }

/* Seit die Bewertungen beider Makler gemischt stehen, muss an jeder Karte
   stehen, wem sie gilt — sonst liest sich alles als eine Person. */
.quote-wer {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: .5rem;
  padding: .16rem .55rem;
  border-radius: 999px;
  background: var(--linen);
  color: var(--gold-ink);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.section--dark .quote-wer { background: rgba(250, 248, 244, .1); color: var(--gold-lt); }

.quote-title { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.015em; margin-bottom: .55rem; }
.quote-text { font-size: var(--fs-sm); line-height: 1.68; color: var(--ink-70); }
.section--dark .quote-text { color: var(--on-dark); }

.quote-meta {
  margin-top: auto;
  padding-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .6rem;
  font-size: var(--fs-xs);
  color: var(--ink-60);
}
.quote-meta strong { color: var(--ink-70); font-weight: 600; }
.section--dark .quote-meta { color: var(--on-dark-dim); }
.section--dark .quote-meta strong { color: var(--on-dark); }

/* --- Reichweite / Instagram ----------------------------------------------
   Bewusst kein eingebettetes Profil: ein Instagram-Embed lädt Skripte und
   setzt Cookies von Meta, damit wären Einwilligung und Banner fällig und die
   ganze Cookie-Freiheit der Seite dahin. Stattdessen eigene Zahlen, ein
   Handy mit einem unserer Motive und ein Link zum Kanal.
------------------------------------------------------------------------- */

.community {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .community { grid-template-columns: minmax(0, 1fr) minmax(0, .5fr); }
}

/* Zwei Kacheln, also auch auf dem Handy zwei Spalten. Mit auto-fit standen
   sie dort untereinander und kosteten 140 Pixel Höhe, obwohl „40.000+" auch
   in der halben Breite Platz hat. */
.channels {
  display: grid;
  gap: .8rem;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}
@media (max-width: 399px) {
  .channel { padding: 1rem; }
  .channel-count { font-size: 1.65rem; }
}

.channel {
  display: grid;
  gap: .1rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--r-md);
  border: 1px solid var(--stone);
  background: var(--white);
  transition: transform .3s var(--ease-out), border-color .25s var(--ease);
}
.section--dark .channel {
  background: rgba(250, 248, 244, .05);
  border-color: var(--on-dark-line);
}
a.channel:hover { transform: translateY(-3px); border-color: rgba(193, 154, 75, .5); }

.channel-icon { color: var(--gold-ink); margin-bottom: .55rem; }
.section--dark .channel-icon { color: var(--gold-lt); }

.channel-count {
  font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--forest);
}
.section--dark .channel-count { color: var(--gold-lt); }

.channel-label {
  margin-top: .55rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.section--dark .channel-label { color: var(--on-dark); }

.channel-handle { font-size: var(--fs-xs); color: var(--ink-50); }
.section--dark .channel-handle { color: var(--on-dark-dim); }

.channel-themes {
  margin-top: 1.3rem;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink-50);
}
.section--dark .channel-themes { color: var(--on-dark-dim); }

/* Der Instagram-Knopf hatte hier einen eigenen Abstand nach oben, aus der
   Zeit, als er allein unter dem Text stand. Seit er mit der Bewertungs-
   schaltfläche in .community-aktionen liegt, schob ihn dieser Abstand um
   32 px nach unten: die Flexzeile wurde dadurch 88 px hoch und der
   Gold-Knopf streckte sich auf diese Höhe — beide wirkten unterschiedlich
   groß. Den Abstand setzt jetzt allein der Container. */

/* iPhone mit dem echten Profil, räumlich gestellt.

   Das Gerät ist in CSS gebaut, nicht als Mockup-Grafik: es bleibt bei jeder
   Größe scharf, kostet keinen Ladevorgang und lässt sich drehen. Die Maße
   folgen dem iPhone 16 Pro, gerechnet aus Displaypunkten: Displayseiten
   402 zu 874 (Verhältnis 0,46), Eckenradius 14 Prozent der Gehäusebreite,
   Dynamic Island 125 zu 36 Punkte, Statusleiste 53 Punkte hoch.

   Deshalb hat auch das Profilbild genau dieses Verhältnis, und oben ist
   darin ein weißer Streifen frei: dort liegt die Statusleiste, die hier in
   CSS entsteht und damit scharf bleibt.

   Die Perspektive sitzt am Container. Die Grundneigung ist bewusst flach
   (9 Grad), damit der Bildschirminhalt lesbar bleibt. Zeigt die Maus auf
   den Bereich, folgt das Gerät dem Zeiger (main.js, gedämpft); auf
   Touch-Geräten bleibt es bei der Grundneigung. Bewegt werden nur transform
   und opacity, nie Layout-Werte. */
.community-media {
  display: flex;
  justify-content: center;
  perspective: 1600px;
  perspective-origin: 50% 42%;
}

.phone {
  --neigung-y: -9deg;
  --neigung-x: 3deg;
  --rahmen: 5px;
  position: relative;
  width: 100%;
  max-width: 300px;
  padding: var(--rahmen);
  border-radius: 43px;
  /* Gebürstetes Titan: mehrere Lichtbänder über der Kante. Ein einfacher
     Zweifarbverlauf sieht aus wie Kunststoff. */
  background: linear-gradient(118deg,
    #7c7c83 0%, #2f2f36 9%, #62626b 21%, #26262c 34%,
    #4a4a53 50%, #23232a 66%, #5c5c66 80%, #2c2c33 91%, #7c7c83 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .45),
    0 44px 74px -32px rgba(0, 0, 0, .85),
    inset 0 0 0 1px rgba(255, 255, 255, .22);
  transform-style: preserve-3d;
  transform: rotateY(var(--neigung-y)) rotateX(var(--neigung-x));
  will-change: transform;
}

/* Auftritt beim Hereinscrollen: kommt aus einer stärkeren Drehung in die
   Grundhaltung. Ohne fill-mode, damit danach wieder die Variablen greifen
   und die Mausbewegung übernehmen kann. */
.community-media.is-visible .phone { animation: handyAuftritt 1.4s var(--ease-out); }
@keyframes handyAuftritt {
  from { transform: rotateY(-34deg) rotateX(11deg) translateY(26px) scale(.93); }
  to   { transform: rotateY(-9deg)  rotateX(3deg)  translateY(0)    scale(1); }
}

/* Seitentasten. Sie sitzen mit translateZ hinter der Vorderkante, damit sie
   bei der Drehung wie Teile des Gehäuses mitwandern und nicht wie
   aufgeklebte Striche wirken. Links Aktionstaste und Lautstärke, rechts
   die Seitentaste — die Anordnung des Geräts. */
.phone-taste {
  position: absolute;
  width: 3px;
  border-radius: 3px;
  /* Hell genug, um sich vom dunklen Abschnitt abzusetzen: bei 2 px in
     Gehäusefarbe war die Taste vor dem Tannengrün nicht zu erkennen. */
  background: linear-gradient(180deg, #8a8a93, #45454e);
  transform: translateZ(-4px);
}
.phone-taste--aktion { left: -2px; top: 21%;   height: 5%; }
.phone-taste--lauter { left: -2px; top: 29%;   height: 8%; }
.phone-taste--leiser { left: -2px; top: 38.5%; height: 8%; }
.phone-taste--seite  { right: -2px; top: 27%;  height: 12%; }

.phone-screen {
  position: relative;
  /* Gehäuseradius minus Rahmenbreite, sonst läuft die Ecke nicht parallel */
  border-radius: 38px;
  overflow: hidden;
  background: #fff;
  transform: translateZ(1px);
}
.phone-screen img { width: 100%; height: auto; display: block; }

/* Auf dem Handy kleiner: mit dem schlanken iPhone-Verhältnis wäre das Gerät
   bei 300 px Breite über 640 px hoch und würde den Abschnitt aufblähen —
   das Gegenteil dessen, was die Wisch-Reihen erreichen. Der Eckenradius
   muss mitgehen, sonst wirkt das Gehäuse zu rund. */
@media (max-width: 699px) {
  .phone { max-width: 242px; border-radius: 35px; }
  .phone-screen { border-radius: 30px; }
  .phone-island { top: 6px; }
  .phone-strich { bottom: 5px; height: 3.5px; }
}

/* --- Statusleiste, Dynamic Island, Home-Indikator ------------------------
   Die Breiten sind Anteile der Displaybreite und skalieren damit mit. Für
   die Höhen geht das nicht über Prozent: height und top beziehen sich bei
   einem absolut gesetzten Element auf die HÖHE des Elternelements, und die
   ist hier mehr als das Doppelte der Breite. Deshalb kommen die Höhen aus
   aspect-ratio, und die wenigen kleinen Abstände stehen in Pixeln — bei
   290 px Displaybreite passend, darunter unmerklich zu groß.
------------------------------------------------------------------------- */

.phone-status {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  aspect-ratio: 393 / 53;            /* Statusleiste ist 53 Punkte hoch */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 7.4%;
  box-sizing: border-box;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #000;
  pointer-events: none;
}
@media (max-width: 359px) { .phone-status { font-size: 10px; } }

.phone-symbole { display: flex; align-items: center; gap: 4px; }
.phone-symbole svg { display: block; }

.phone-island {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 31.8%;                      /* 125 von 393 Displaypunkten */
  aspect-ratio: 125 / 36;
  transform: translateX(-50%);
  border-radius: 100px;
  background: #000;
}
/* Kameraglas rechts in der Insel */
.phone-island::after {
  content: "";
  position: absolute;
  right: 7%;
  top: 50%;
  width: 26%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #35485c 0%, #101820 55%, #04070a 100%);
}

.phone-strich {
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 35.6%;                      /* 140 von 393 Displaypunkten */
  height: 4px;
  transform: translateX(-50%);
  border-radius: 100px;
  background: rgba(0, 0, 0, .34);
}

/* Lichtreflex auf dem Glas. Wandert mit der Neigung, sonst wirkt die
   Drehung wie ein gekipptes Bild und nicht wie ein Gerät.

   Der Streifen ist absichtlich deutlich größer als das Display, damit er
   beim Wandern nicht am Rand ausläuft. Beschnitten wird er vom
   overflow: hidden des Bildschirms — er erzeugt also keinen Überlauf,
   auch wenn eine Messung der Bounding-Box das nahelegt. */
.phone-glanz {
  position: absolute;
  inset: -20% -60%;
  pointer-events: none;
  background: linear-gradient(104deg,
    transparent 38%,
    rgba(255, 255, 255, .34) 46%,
    rgba(255, 255, 255, .1) 51%,
    transparent 60%);
  transform: translateX(var(--glanz, 0%));
}

@media (prefers-reduced-motion: reduce) {
  .phone { transform: none; }
  .community-media.is-visible .phone { animation: none; }
  .phone-glanz { display: none; }
}

/* --- Formular ------------------------------------------------------------ */

.lead-form {
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
  box-shadow: var(--shadow-2);
}

/* Spamfalle: aus dem Sichtfeld geschoben statt display:none. Manche Bots
   überspringen Felder, die als versteckt ausgezeichnet sind — genau die
   sollen hier aber hineintappen. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-progress {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.6rem;
}
.form-bar {
  flex: 1;
  height: 3px;
  border-radius: 100px;
  background: var(--stone);
  overflow: hidden;
}
/* Der Balken wird skaliert, nicht in der Breite verändert — eine Breite zu
   animieren löst in jedem Bild eine neue Layoutberechnung aus. */
.form-bar i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(.3333);
  transform-origin: left center;
  background: var(--forest);
  border-radius: 100px;
  transition: transform .45s var(--ease-out);
}
.form-count {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-60);
  font-variant-numeric: tabular-nums;
}

.form-step { display: none; border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.form-step.is-active { display: block; animation: stepIn .35s var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.form-step h3 { margin-bottom: .4rem; }
.form-step > p { font-size: var(--fs-sm); color: var(--ink-50); margin-bottom: 1.4rem; }

.field { margin-bottom: 1.05rem; }
.field-row {
  display: grid;
  gap: 1.05rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

.label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: .4rem;
}
.label .req { color: var(--gold-ink); }

.input, .select, .textarea {
  width: 100%;
  padding: .85rem 1rem;
  min-height: 48px;                 /* bequemes Touch-Ziel */
  border: 1px solid var(--stone);
  border-radius: var(--r-sm);
  background: var(--ivory);
  /* MINDESTENS 16px — Safari auf dem iPhone zoomt sonst beim Antippen
     automatisch in das Feld hinein und die Seite verspringt. */
  font-size: 1rem;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              box-shadow .2s var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--forest);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(20, 67, 47, .1);
}
.textarea { min-height: 110px; resize: vertical; }

/* Auswahlfeld mit eigenem Pfeil */
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236d7a70' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.input[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: #b3392b;
  box-shadow: 0 0 0 3px rgba(179, 57, 43, .1);
}
.field-error {
  display: none;
  margin-top: .35rem;
  font-size: var(--fs-xs);
  color: #b3392b;
}
.field-error.is-shown { display: block; }

.hint { margin-top: .4rem; font-size: var(--fs-xs); color: var(--ink-60); }

/* Objektart-Kacheln */
.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(50% - .35rem, 130px), 1fr));
  gap: .65rem;
}
.choice { position: relative; }
.choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.15rem .6rem;
  border: 1px solid var(--stone);
  border-radius: var(--r-md);
  background: var(--ivory);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: center;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              box-shadow .2s var(--ease);
}
.choice svg { color: var(--ink-50); transition: color .2s var(--ease); }
.choice input:hover + span { border-color: var(--ink-50); }
.choice input:checked + span {
  border-color: var(--forest);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--forest);
}
.choice input:checked + span svg { color: var(--forest); }
.choice input:focus-visible + span { outline: 2px solid var(--forest); outline-offset: 2px; }

/* Checkbox */
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: start;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-50);
}
/* Das Kästchen war mit 13 px gerendert und damit auf dem Handy kaum zu
   treffen. Die ganze Zeile ist ohnehin klickbar, das Feld selbst darf aber
   nicht wie ein Fleck aussehen. */
.check input {
  margin-top: 2px;
  width: 22px; height: 22px;
  accent-color: var(--forest);
  flex: none;
}
.check { padding-block: .2rem; }
.check a { text-decoration: underline; text-underline-offset: 2px; }

.form-nav { display: flex; gap: .6rem; margin-top: 1.5rem; flex-wrap: wrap; }
.form-nav .btn { flex: 1 1 auto; min-width: 130px; }

/* Ladezustand des Absende-Buttons */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--ivory);
  animation: btnspin .7s linear infinite;
}
@keyframes btnspin { to { transform: rotate(360deg); } }

/* Statuszeile (Fehler beim Versand) */
.form-status {
  margin-top: 1rem;
  padding: .8rem 1rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: 1.5;
  background: #fbe9e7;
  border: 1px solid #f0b7ae;
  color: #8a2b1e;
}
.form-status a { color: inherit; text-decoration: underline; font-weight: 600; }

/* Dieselbe Zeile trägt in Browsern ohne <dialog> die Erfolgsmeldung. Rot
   wäre dort das falsche Signal. */
.form-status--ok {
  background: #e8f3ec;
  border-color: #a8cfb8;
  color: #14432f;
}

/* --- Ergebnis-Schirm der Sofortbewertung -------------------------------- */

.form-result {
  text-align: center;
  padding-block: .5rem 1rem;
  animation: stepIn .4s var(--ease-out);
}
.result-eyebrow {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: .5rem;
}
.result-range {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .3rem .6rem;
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--forest);
  font-variant-numeric: tabular-nums;
}
.result-range .result-dash { color: var(--ink-50); font-weight: 400; }
.result-range--text { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2rem); }
.result-sub {
  margin-top: .55rem;
  font-size: var(--fs-sm);
  color: var(--ink-50);
}

/* Die Zahlen laufen beim Erscheinen hoch (siehe form.js). Ein kurzes
   Aufziehen begleitet das, ohne die Zeile zu verschieben. */
.form-result .result-range { animation: ergebnisAuf .55s var(--ease-out) both; }
@keyframes ergebnisAuf {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}
.result-note {
  margin: 1.4rem 0;
  padding: 1rem 1.15rem;
  border-radius: var(--r-sm);
  background: var(--linen);
  border: 1px solid var(--stone);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-70);
  text-align: left;
}
.result-note strong { display: block; margin-bottom: .25rem; color: var(--ink); }
.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
}
.result-actions .btn { flex: 1 1 auto; min-width: 150px; }

/* --- Bestätigung nach dem Absenden ---------------------------------------
   Der Interessent sieht direkt nach dem Absenden seine Preisspanne. Ohne
   eigene Rückmeldung blieb offen, ob die Anfrage auch wirklich rausging —
   diese Bestätigung schließt die Lücke und wird weggeklickt, danach steht
   die Spanne wieder frei.
------------------------------------------------------------------------ */

.gesendet {
  width: min(30rem, calc(100vw - 2.5rem));
  padding: 0;
  border: none;
  border-radius: var(--r-lg);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(10, 20, 16, .3);
}
.gesendet::backdrop {
  background: rgba(10, 20, 16, .62);
}
.gesendet[open] { animation: gesendetAuf .32s var(--ease-out); }
@keyframes gesendetAuf {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.gesendet-innen {
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  text-align: center;
}

.gesendet-haken {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: rgba(20, 67, 47, .1);
  color: var(--forest);
}
/* Der Haken zeichnet sich einmal nach — die Bewegung sagt „erledigt“
   deutlicher als ein statisches Symbol. */
.gesendet[open] .gesendet-haken svg path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: hakenZieht .45s var(--ease-out) .12s forwards;
}
@keyframes hakenZieht { to { stroke-dashoffset: 0; } }

.gesendet-titel {
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: .6rem;
}
.gesendet-text {
  font-size: var(--fs-sm);
  color: var(--ink-70);
  margin-bottom: 1.5rem;
}
.gesendet-text strong { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .contact-person { transition: none; }
  .contact-person:hover { transform: none; }
  .gesendet[open] { animation: none; }
  .gesendet[open] .gesendet-haken svg path { animation: none; stroke-dashoffset: 0; }
}

/* --- Kontakt & Karte ----------------------------------------------------- */

.contact-lines { display: grid; gap: 1.25rem; }
.contact-line { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
/* Der Kontakt-Abschnitt steht auf Dunkelgrün. Alle Farben hier sind für
   dunklen Grund gewählt. */
.contact-line svg { color: var(--gold); margin-top: 3px; flex: none; }
.contact-line dt {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  margin-bottom: .2rem;
}
.contact-line dd { margin: 0; }
.contact-line dd a:hover { color: var(--gold-lt); }

/* Ansprechpartner mit rundem Foto und goldenem Ring */
.contact-people-label {
  margin-top: 1.9rem;
  margin-bottom: .9rem;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}
.contact-people {
  display: grid;
  gap: .8rem;
}
@media (min-width: 520px) { .contact-people { grid-template-columns: 1fr 1fr; } }

/* Schnellkontakt-Icons — vier gleich große Buttons */
.contact-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  max-width: 340px;
}
.contact-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: .7rem .25rem;
  border-radius: var(--r-md);
  background: rgba(250, 248, 244, .06);
  border: 1px solid var(--on-dark-line);
  color: var(--ivory);
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-align: center;
  transition: transform .2s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), color .25s var(--ease);
}
.contact-icon svg { flex: none; transition: color .25s var(--ease), stroke .25s var(--ease); }

/* Symbole in ihrer eigenen Farbe. Die Beschriftung darunter bleibt hell —
   sie trägt die Bedeutung, das Symbol ist die Wiedererkennung.
   Instagram bringt seinen Verlauf im SVG mit, die übrigen erben über
   currentColor. */
.contact-icon--wa   svg { color: #25d366; }
.contact-icon--tel  svg { color: var(--moss); }
.contact-icon--gold svg { color: var(--gold-lt); }

.contact-icon:hover { transform: translateY(-3px); }
.contact-icon--ig:hover   { background: var(--ig-gradient); border-color: transparent; color: #fff; }
.contact-icon--wa:hover   { background: #25d366; border-color: transparent; color: #05301a; }
.contact-icon--tel:hover  { background: var(--forest-lt); border-color: transparent; color: var(--ivory); }
.contact-icon--gold:hover { background: var(--gold); border-color: transparent; color: var(--night); }

/* Beim Hover wird die Fläche zur Markenfarbe — dann muss das Symbol die
   Gegenfarbe annehmen, sonst verschwindet es auf sich selbst. */
.contact-icon--ig:hover   svg { stroke: #fff; }
.contact-icon--ig:hover   svg circle[fill] { fill: #fff; }
.contact-icon--wa:hover   svg { color: #05301a; }
.contact-icon--tel:hover  svg { color: var(--ivory); }
.contact-icon--gold:hover svg { color: var(--night); }

/* --- Personenseiten ------------------------------------------------------
   Portrait links, Text rechts. Unter 820 px steht das Bild über dem Text und
   wird nicht breiter als 300 px — ein formatfüllendes Porträt würde auf dem
   Handy den halben Bildschirm einnehmen, bevor der erste Satz kommt.
-------------------------------------------------------------------------- */

.person-kopf {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
@media (min-width: 820px) {
  .person-kopf { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
}
.person-bild {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

/* --- Leitsatz ------------------------------------------------------------
   Herausgestellter Satz unter einer Abschnittsüberschrift. Das Anführungs-
   zeichen ist reine Zier und steht deshalb im ::before, nicht im Text — im
   Markup würde es der Screenreader mitlesen.
-------------------------------------------------------------------------- */

.leitsatz {
  position: relative;
  margin: 1.35rem 0 0;
  padding-left: clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem);
}
.leitsatz::before {
  content: "\201E";               /* deutsches öffnendes Anführungszeichen */
  position: absolute;
  left: 0;
  /* Das „ sitzt auf der Grundlinie, nicht an der Oberkante. Bei dieser
     Schriftgröße rutscht es dadurch neben die dritte Textzeile. Der negative
     Wert zieht es auf die Höhe der ersten Zeile; em bezieht sich hier auf die
     eigene Schriftgröße und skaliert deshalb mit. */
  top: -.45em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 2rem + 4.4vw, 5.2rem);
  line-height: 1;
  color: var(--gold);
  opacity: .5;
  pointer-events: none;
}
.leitsatz blockquote {
  margin: 0;
  font-size: clamp(1.14rem, .98rem + .78vw, 1.62rem);
  line-height: 1.44;
  letter-spacing: -0.011em;
  text-wrap: pretty;
}
/* em trägt hier keine Betonung im Wortsinn, sondern hebt das Wort farblich
   heraus — kursiv wäre in diesem Schriftschnitt zu unruhig. */
.leitsatz em { font-style: normal; color: var(--moss); }
.section:not(.section--dark):not(.section--forest) .leitsatz em { color: var(--gold-ink); }

/* Sechs Ansprechpartner statt zwei: die Karte tritt bewusst zurück. Keine
   Goldkante mehr — sechsmal derselbe Akzent nebeneinander erschlägt den
   Abschnitt. Was bleibt, ist eine ruhige Fläche mit Rundbild, Name, Funktion
   und den Nummern in einer Zeile. */
.contact-person {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .8rem .95rem;
  border-radius: var(--r-md);
  background: rgba(250, 248, 244, .05);
  border: 1px solid var(--on-dark-line);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.contact-person:hover {
  background: rgba(250, 248, 244, .09);
  border-color: rgba(193, 154, 75, .45);
}

.contact-avatar {
  width: 48px; height: 48px;
  flex: none;
  border-radius: 50%;
  padding: 2.5px;
  /* goldene Umrandung — dieselbe Farbe wie der Bewertungs-Button */
  background: var(--gold);
}
/* Quadratischer Kopfausschnitt, deshalb ohne Verschiebung mittig */
.contact-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  border: 2px solid var(--night);
  background: var(--forest);
}
.contact-person-info { min-width: 0; flex: 1; }
.contact-person-name { font-size: .98rem; font-weight: 650; letter-spacing: -0.015em; }
.contact-person-role {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 2px;
}
/* Untereinander, aber eng: In der schmalen Spalte des Kontaktbereichs passen
   drei Angaben nie in eine Zeile. Nebeneinander gesetzt bricht sie ohnehin um,
   und die Trennzeichen stünden dann am Zeilenanfang. */
.contact-person-links {
  display: grid;
  margin-top: .3rem;
}
.contact-person-links a {
  /* Nicht kleiner: Rufnummern und Adressen werden abgelesen und abgetippt. */
  font-size: var(--fs-xs);
  color: var(--on-dark-dim);
  transition: color .2s var(--ease);
  word-break: break-word;
  padding-block: .28rem;      /* auf 24 px Trefffläche, WCAG 2.5.8 */
}
.contact-person-links a:hover { color: var(--gold-lt); }

.map-card {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--on-dark-line);
  background: rgba(250, 248, 244, .05);
}
.map-visual {
  /* Auf dem Handy flacher: das Foto ist Beiwerk, der Weg zur Route nicht. */
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: rgba(250, 248, 244, .04);
}
.map-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;   /* das Schild oben rechts bleibt im Bild */
  display: block;
}
/* Verlauf unten, damit die Adress-Plakette lesbar auf dem Foto sitzt */
.map-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 18, 14, .74), rgba(9, 18, 14, 0) 52%);
  pointer-events: none;
}
@media (min-width: 700px) { .map-visual { aspect-ratio: 16 / 10; } }

.map-pin {
  position: absolute;
  left: .9rem;
  bottom: .8rem;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .55rem;
  text-align: left;
  padding: .5rem .8rem;
  border-radius: 10px;
  background: rgba(9, 18, 14, .68);
  border: 1px solid var(--on-dark-line);
  backdrop-filter: blur(4px);
  /* Die Plakette liegt immer auf dem abgedunkelten Foto, unabhängig davon, ob
     der Abschnitt hell oder dunkel ist. Sie muss ihre helle Schrift deshalb
     selbst setzen — sonst erbt sie auf hellem Grund die dunkle Textfarbe und
     steht dunkel auf dunkel. */
  color: var(--ivory);
}
.map-pin-dot {
  flex: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--night);
  box-shadow: 0 0 0 2px var(--gold);
}
.map-foot {
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.25rem;
  align-items: center;
  justify-content: space-between;
}

/* --- Hinweisbox ---------------------------------------------------------- */

/* Kein farbiger Streifen an der linken Kante: der Akzent kommt über das
   Symbol, der Kasten ist rundum gleich gerahmt.

   Zweispaltig wird der Kasten nur, wenn er wirklich ein Symbol enthält. Die
   Freigabe-Hinweise in Impressum und Datenschutz haben keins; dort würden
   sonst die einzelnen Inline-Elemente zu Rasterzellen. Fehlt :has() im
   Browser, bleibt der Kasten einspaltig und damit trotzdem lesbar. */
.notice {
  background: var(--linen);
  border: 1px solid var(--stone);
  border-radius: var(--r-sm);
  padding: .95rem 1.15rem;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-70);
}
.notice:has(> svg) {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
}
.notice > svg { color: var(--gold-ink); margin-top: 2px; flex: none; }
.section--dark .notice {
  background: rgba(250, 248, 244, .06);
  border-color: var(--on-dark-line);
  color: var(--on-dark);
}
.section--dark .notice svg { color: var(--gold-lt); }
.notice strong { color: var(--ink); }
.section--dark .notice strong { color: var(--ivory); }
.notice a { color: inherit; }

/* Warnvariante für die Freigabe-Hinweise in Impressum und Datenschutz */
.notice--warnung {
  background: #fdf1ef;
  border-color: #e6b3aa;
  color: #6d2c22;
}
.notice--warnung svg { color: #b3392b; }
.notice--warnung strong { color: #8a2b1e; }
.mb-xl { margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3rem); }

/* Das Regelwerk für Objektkarten, Filter, Badges und Energieklassen ist mit
   den Unterseiten nach _quellen/_archiv/ gewandert. Falls die Objektliste
   zurückkommt, steht es dort in immobilien.html samt properties.js. */

/* --- Fragen (Akkordeon) --------------------------------------------------
   Mit <details> und <summary> gebaut: funktioniert ohne JavaScript, ist
   tastaturbedienbar und wird von Screenreadern als aufklappbarer Bereich
   angekündigt. Animiert wird nur das Zeichen, nicht die Höhe.
------------------------------------------------------------------------- */

.faq { display: grid; }

.faq-item { border-top: 1px solid var(--stone); }
.faq-item:last-child { border-bottom: 1px solid var(--stone); }

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 0;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1rem, .95rem + .35vw, 1.12rem);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.4;
  color: var(--ink);
  transition: color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:hover { color: var(--forest); }

/* Plus, das beim Öffnen zum Kreuz kippt. Eine Drehung um 90 Grad würde man
   bei einem Plus nicht sehen, 45 Grad macht daraus ein sichtbares Schließen. */
.faq-item summary::after {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: .3rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  color: var(--forest);
  transition: transform .3s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { color: var(--forest); }

.faq-antwort { padding: 0 0 1.35rem; max-width: 62ch; }
.faq-antwort p { font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-70); }
.faq-item[open] .faq-antwort { animation: faqAuf .32s var(--ease-out) both; }
@keyframes faqAuf {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.check-list { display: grid; gap: .75rem; }
.check-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
  font-size: var(--fs-sm);
}
.check-list svg { color: var(--forest); margin-top: 4px; flex: none; }
.section--dark .check-list svg { color: var(--moss); }
.check-list span { color: var(--ink-70); }
.section--dark .check-list span { color: var(--on-dark); }

/* --- Wisch-Reihen (nur Handy) --------------------------------------------
   Auf dem Handy standen Gründe, Schritte, Profile und Bewertungen als
   langer Stapel untereinander; die Seite war damit über 7000 Pixel hoch und
   das Formular weit weg. Unter 700 Pixeln werden dieselben Karten deshalb
   zu einer waagerechten Reihe, durch die man wischt.

   Der einheitliche Umbruchpunkt ist Absicht: die vier Komponenten haben
   eigene Punkte (620 bis 820), vier verschiedene Schwellen wären hier nur
   schwer zu pflegen.

   Die Reihe bricht bewusst aus dem Innenabstand des .wrap aus. Dadurch ist
   die nächste Karte am Bildschirmrand angeschnitten — ohne diesen Anschnitt
   sieht die Reihe wie eine einzelne Karte aus und niemand wischt.
------------------------------------------------------------------------- */

@media (max-width: 699px) {
  .wischbar {
    display: flex;
    flex-wrap: nowrap;
    gap: .85rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    /* Ohne diese Zeile rastet die erste Karte am äußeren Rand ein und das
       linke Padding verschwindet — die Karte klebt dann am Displayrand. */
    scroll-padding-inline: var(--gutter);
    padding-bottom: .35rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .wischbar::-webkit-scrollbar { display: none; }

  .wischbar > * {
    flex: 0 0 min(78%, 290px);
    scroll-snap-align: start;
    /* min-width: 0 verhindert, dass langer Text die Karte aufzieht */
    min-width: 0;
  }

  /* Die Reihe selbst wird angetippt und gewischt — ein Anheben der Karte
     beim Berühren wirkt dort wie ein Verrutschen. */
  .wischbar > .award-card:hover,
  .wischbar > .profile:hover,
  .wischbar > .channel:hover { transform: none; }

  /* Gründe: ohne Trennlinie über der Überschrift, die Karte grenzt sich
     schon durch ihren eigenen Rahmen ab. */
  .features.wischbar > .feature {
    border-top: 0;
    padding: 1.15rem 1.25rem 1.3rem;
    border-radius: var(--r-md);
    border: 1px solid var(--stone);
    background: var(--white);
    align-content: start;
  }
  .section--dark .features.wischbar > .feature {
    border-color: var(--on-dark-line);
    background: rgba(250, 248, 244, .05);
  }
  .features.wischbar > .feature p { max-width: none; }

  /* Schritte: Nummer über den Text, Verbindungslinie waagerecht — wie in
     der Desktop-Fassung ab 820 Pixeln. */
  .steps.wischbar > .step { padding-left: 0; padding-top: 3.6rem; }
  .steps.wischbar > .step:not(:last-child)::before {
    left: 46px; right: -.85rem;
    top: 23px; bottom: auto;
    width: auto; height: 1px;
  }
  .steps.wischbar > .step p { max-width: none; }

  /* Profile: Das Foto stand hier früher im Quadrat, damit die Reihe nicht
     höher wird als der Stapel davor. Das war ein Fehlgriff.

     Aus dem 2:3-Bild schnitt das Quadrat 340 von 1020 px weg. Übrig blieben
     680 px für einen Kopf, der 644 px hoch ist — er füllte 90 % der Fläche
     und stieß oben wie unten fast an den Rand. Rechnerisch war nichts
     abgeschnitten, auf dem Gerät sah es genau danach aus.

     Jetzt gilt auch hier 2:3 wie überall sonst. Der Kopf nimmt damit 63 %
     der Höhe ein und hat ringsum Luft. Die Karte wird dadurch höher — das
     ist der Preis, und er ist es wert. */
  .profiles.wischbar > .profile { flex-basis: min(82%, 300px); }
}

/* Punkte unter der Reihe. Erzeugt werden sie von main.js, und nur dann,
   wenn die Reihe wirklich waagerecht scrollt. Ohne Skript fehlen sie, die
   Reihe selbst funktioniert aber trotzdem. */
.wisch-punkte {
  display: none;
  justify-content: center;
  gap: .45rem;
  margin-top: 1.1rem;
}
.wisch-punkte.is-aktiv { display: flex; }

.wisch-punkt {
  /* Sichtbar sind 8 px, die Trefffläche ist 24 px hoch und breit — sonst
     wäre der Punkt nach WCAG 2.5.8 zu klein. */
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.wisch-punkt::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-30);
  transition: background .25s var(--ease), transform .25s var(--ease-out);
}
.wisch-punkt[aria-current="true"]::before { background: var(--forest); transform: scale(1.25); }
.section--dark .wisch-punkt::before { background: rgba(250, 248, 244, .3); }
.section--dark .wisch-punkt[aria-current="true"]::before { background: var(--gold-lt); }

/* --- Split --------------------------------------------------------------- */

.split { display: grid; gap: clamp(2rem, 1.2rem + 3.5vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  /* Die linke Spalte ist hier deutlich kürzer als das Formular; zentriert
     würde sie in der Mitte schweben. */
  .split--wide-right { grid-template-columns: .9fr 1.1fr; align-items: start; }
}

/* Auf dem Handy zuerst das Formular, danach die Zusicherungen. Die Einwände
   sind im Abschnitt „Fragen vorab" unmittelbar davor schon behandelt; hier
   zählt, dass das erste Feld sofort erreichbar ist. */
@media (max-width: 899px) {
  .split--wide-right > :last-child { order: -1; }
  .split--wide-right { gap: 2rem; }
}

/* --- Weg zum Ziel --------------------------------------------------------
   Zwischen Reichweite und Formular lagen vier lange Abschnitte, in denen es
   keinen Weg zur Bewertung gab. Wer dort überzeugt war, musste selbst
   zurückscrollen. Diese Zeile schließt jeden Abschnitt mit der einen
   Handlung ab, um die es auf der Seite geht.

   Kein Kasten und keine Fläche: die Zeile soll den Abschnitt abschließen,
   nicht mit ihm konkurrieren.
------------------------------------------------------------------------- */

.cta-zeile {
  margin-top: clamp(2.25rem, 1.4rem + 2.6vw, 3.25rem);
  padding-top: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  border-top: 1px solid var(--stone);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  text-align: center;
}
.section--dark .cta-zeile { border-top-color: var(--on-dark-line); }

@media (min-width: 640px) {
  .cta-zeile {
    flex-direction: row-reverse;   /* Schaltfläche rechts, Satz links */
    justify-content: center;
    gap: clamp(1.25rem, .6rem + 1.8vw, 2.25rem);
    text-align: left;
  }
}

.cta-zeile p {
  font-size: var(--fs-sm);
  color: var(--ink-60);
  max-width: 34ch;
}
.section--dark .cta-zeile p { color: var(--on-dark); }
.cta-zeile .btn { flex: none; }
@media (max-width: 639px) { .cta-zeile .btn { width: 100%; } }

/* Zwei Wege im Reichweite-Abschnitt: die Bewertung ist das Seitenziel, der
   Instagram-Link öffnet in einem neuen Tab und führt deshalb nicht weg. */
.community-aktionen {
  display: flex;
  flex-wrap: wrap;
  /* Ohne align-items streckt sich die kürzere Schaltfläche auf die Höhe der
     Zeile, sobald eine der beiden aus irgendeinem Grund höher ausfällt. */
  align-items: center;
  gap: .7rem;
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2rem);
}
.community-aktionen .btn { flex: 1 1 auto; }
@media (min-width: 480px) { .community-aktionen .btn { flex: 0 0 auto; } }

/* Kurze Zeile unter den Schaltflächen im Hero: sagt, was nach dem Klick
   passiert. Das ist die häufigste unausgesprochene Frage an der Stelle. */
.cta-fuss {
  margin-top: .95rem;
  font-size: var(--fs-xs);
  color: var(--on-dark-dim);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.cta-fuss svg { flex: none; color: var(--moss); }


/* --- Rechtstexte --------------------------------------------------------- */

.legal { max-width: 74ch; }
.legal h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin-top: 2.75rem; margin-bottom: .9rem; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.02rem; font-weight: 650; margin-top: 1.9rem; margin-bottom: .5rem; }
.legal p, .legal li { font-size: var(--fs-sm); color: var(--ink-70); }
.legal p + p { margin-top: .9rem; }
.legal ul:not([class]) { padding-left: 1.2rem; margin: .9rem 0; }
.legal ul:not([class]) li { margin-bottom: .45rem; }
.legal address { font-style: normal; margin: .9rem 0; }
.legal a { color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: var(--ink); }