/* Pro Tier — Komponenten-Overrides (ECOTHERM)

   ⚠ Der Kernel laedt aus dem Tier-Ordner NUR drei Dateien: card.css,
   header.css, variables.css. Eine eigene teaser.css (wie in _vorlage)
   wuerde nicht eingebunden — deshalb sammeln sich hier alle Overrides
   ausserhalb von Kopfbereich und Tokens. */

/* Abschluss-CTA: heller Grauton statt --color-primary. Das Band steht meist
   direkt vor dem Footer (Nachtblau) — zwei dunkle Flaechen uebereinander
   liessen die Seite unten zulaufen. Text/Titel kommen vom Kernel in Weiss
   und muessen deshalb mit. */
.contact-cta {
  background: var(--color-band-deep);
  color: var(--color-text);
}

.contact-cta h2,
.contact-cta p,
.contact-cta header span {
  color: inherit;
}

/* Floating Info-Button (const info_button = true) — Standard-Orange.
   Icon dunkel statt weiss: auf #FFA500 haette Weiss nur 1,97:1, das Icon
   ist als Grafik auf 3:1 verpflichtet und als Bedeutungstraeger strenger
   zu sehen. Dunkel bringt 6,00:1.
   Die Flaeche sitzt auf dem <button>, nicht auf dem #info-button-Wrapper. */
#info-button button {
  background: var(--color-cta);
  color: var(--color-complement-ink);
  border-color: var(--color-cta);
  transition: background var(--transition), border-color var(--transition);
}

#info-button button:hover,
#info-button button:focus-visible {
  background: var(--color-night);
  border-color: var(--color-night);
  color: hsl(0 0% 100%);   /* Hover ist Nachtblau — Icon zurueck auf Weiss */
}

/* ─── Teaser-Bildbehandlung: Duotone ───────────────────────────────────────
   Bild entfaerbt (--teaser-grayscale), darueber eine Farbebene im Blend-Modus
   `color`. Der uebertraegt nur Farbton + Saettigung und laesst die Helligkeit
   des Motivs unangetastet — der Kontrast des weissen Textes bleibt damit
   exakt wie bei Schwarz-Weiss.
   Regler: --teaser-tint-color (Farbe) und --teaser-tint-opacity (Staerke,
   0 = reines SW · 0.55 = aktuell · 1 = volles Duotone).

   ⚠ Die Farbebene liegt auf .bg::before. .bg::after traegt den Kernel-Scrim
   und darf nicht ueberschrieben werden. */

:root {
  --teaser-grayscale:     1;
  --teaser-tint-contrast: 1.08;
  /* Auf die warme Familie gezogen (#FFA500). mix-blend-mode:
     `color` uebertraegt nur Farbton + Saettigung — die Helligkeit kommt vom
     Motiv. Der L-Wert ist hier also wirkungslos und nur der Lesbarkeit
     halber gesetzt; wirksam sind allein Hue und Saettigung. */
  --teaser-tint-color:    #FFA500;             /* wie complement */
  --teaser-tint-opacity:  .25;
}

#teaser-slider .bg img {
  filter:
    grayscale(var(--teaser-grayscale))
    /*contrast(var(--teaser-tint-contrast));*/
}

#teaser-slider .bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /*background-color: var(--teaser-tint-color);*/
  mix-blend-mode: color;
  /*opacity: var(--teaser-tint-opacity);*/
}

/* Kompakte Baender: flacher Ausschnitt, Text liegt dichter ueberm Motiv. */
#teaser-slider.teaser-compact .bg img {
  --teaser-tint-contrast: 1.04;
}

/* ─── About: Bild links beginnen ──────────────────────────────────────────
   Der Kernel legt die Segmente ab 79,5rem als Zigzag an und dreht jede
   ZWEITE Reihe:
     .about-row:nth-child(2n) > .about-text { grid-column: 2 }
     .about-row:nth-child(2n) > figure      { grid-area: 1 / 1 }
   Reihe 1 hat damit das Bild rechts. Hier ist das Muster um eine Position
   versetzt — Bild links, Text rechts; bei mehreren Segmenten wechselt es
   danach weiter wie gehabt.
   ⚠ Nur ab 79,5rem: darunter ist .about-row eine Flex-Spalte, „links" gibt
   es dort nicht. Gestapelt bleibt der Text oben.
   ⚠ Parität nach dem Upload prüfen: die Regel zählt .about-row-Geschwister.
   Sollte der Kernel im nummerierten Modell einen Kopfblock als weiteres Kind
   ausgeben, kippt die Zählung — dann 2n und 2n+1 tauschen. */
@media (min-width: 79.5rem) {
  .about-row:nth-child(2n) > .about-text { grid-column: auto; }
  .about-row:nth-child(2n) > figure      { grid-area: auto; }

  .about-row:nth-child(2n + 1) > .about-text { grid-column: 2; }
  .about-row:nth-child(2n + 1) > figure      { grid-area: 1 / 1; }
}

/* ─── Bildpaar im CMS-Block ───────────────────────────────────────────────
   Markup: <figure class="cms-duo"> mit zwei <img>. Nebeneinander ab 45rem,
   darunter gestapelt. Grid statt Flex, damit beide Spalten exakt gleich
   breit bleiben — die Motive sind quadratisch und liefen sonst je nach
   Dateigroesse minimal auseinander. */
.cms-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-block: var(--space-6) 0;
  margin-inline: 0;
}

@media (min-width: 45rem) {
  .cms-duo {
    grid-template-columns: 1fr 1fr;
  }
}

.cms-duo > figure {
  margin: 0;
}

.cms-duo img {
  display: block;
  width: 100%;
  height: auto;
  /* Radius nur oben — Bild und Legendenband bilden eine Flaeche. */
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Legende als abgesetztes Band unter dem Bild. Kein margin-top: das Band
   sitzt buendig am Bild und liest sich dadurch als dessen Beschriftung,
   nicht als eigener Textblock. --color-band ist derselbe Grauton wie das
   Abschluss-CTA, nur eine Stufe heller. */
.cms-duo figcaption {
  padding: var(--space-3) var(--space-4);
  background: var(--color-band);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* ─── Weiter-Button auf den Objekt-Cards ──────────────────────────────────
   Kernel-Default: gefuellter Kreis in --color-primary mit weissem Pfeil.
   Hier stattdessen ein Quadrat mit weicher Flaeche und Kontur — ruhiger im
   Kartenraster und aus denselben Tokens wie Baender und Rahmen.

   ⚠ Der Selektor MUSS dreiteilig sein: der Kernel setzt
   `.property-feature .feature-body .feature-more` (0,3,0). Mit zwei Klassen
   verliert die Regel, obwohl card.css spaeter geladen wird.

   Die Flaeche liegt auf --color-band-deep (90 %), die Karte auf
   --color-bg-alt (97 %) — dadurch hebt sich der Button ab, ohne als
   Farbflaeche aufzufallen. Der Pfeil traegt die Erkennbarkeit
   (Nachtblau auf hell = 12,4:1), die Kontur verstaerkt sie nur. */
.property-feature .feature-body .feature-more {
  border-radius: var(--radius-lg);
  background: var(--color-band-deep);
  border: 0.0625rem solid var(--color-border-dark);
  color: var(--color-primary);
}

/* Hover/Fokus drehen die Flaeche um: aus Kontur wird Fuellung. */
.property-feature .feature-body .feature-more:hover,
.property-feature .feature-body .feature-more:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-complement-ink);
}

/* ─── Status-Badge auf den Objekten: Grossbuchstabe am Anfang ─────────────
   Der Vermarktungsstatus kommt aus den Daten und steht dort klein
   ("reserviert"). Der Kernel setzt auf dem <mark> kein text-transform, und
   von oben erbt auch keins — die Schreibweise haengt also allein am
   Datenbankwert. Statt jeden Datensatz zu korrigieren, hebt die Darstellung
   den ersten Buchstaben.

   Drei Kontexte, weil der Kernel das Badge dreimal getrennt setzt:
   Listing-Karte (.property-card), Feature-Card (.property-feature) und
   Detail-Galerie (#property > .gallery).

   ::first-letter statt text-transform: capitalize — capitalize wuerde JEDES
   Wort anheben ("Unter Vorbehalt"); gefragt ist nur der Satzanfang.

   Dass ::first-letter hier greift, haengt am Kernel-Layout: das <mark> ist
   position:absolute und damit automatisch ein Block — auf einem reinen
   Inline-Element waere das Pseudoelement wirkungslos. Sollte der Kernel das
   Badge je in den Textfluss zurueckholen, ist stattdessen
   `text-transform: capitalize` auf denselben Selektoren der Weg. */
.property-card .card-img > mark::first-letter,
.property-feature .feature-img > mark::first-letter,
#property > .gallery > mark::first-letter {
  text-transform: uppercase;
}

/* ─── Complement als Akzent statt Flaeche ─────────────────────────────────
   Der Kernel fuellt .btn.complement flaechig mit --color-complement und
   setzt weisse Schrift darauf. Mit dem Standard-Orange waeren das 2,9:1 —
   unlesbar. Hier deshalb als Outline-Button: weisse Flaeche, orangene
   Kontur, dunkle Schrift. Erst der Hover fuellt orange, dann traegt die
   Flaeche die dunkle Schrift mit 6,67:1.

   Selektoren 1:1 vom Kernel (live geprueft 09.09.2026) — vgl. die
   feature-more-Warnung weiter oben zur Spezifitaet. */
.btn.complement {
  background: transparent;
  border-color: var(--color-complement-deko);   /* 3,70:1 auf Weiss */
  color: var(--color-complement-ink);           /* 11,85:1 auf Weiss */
}

.btn.complement:hover,
.btn.complement:focus-visible {
  background: var(--color-complement-hover);
  border-color: var(--color-complement-hover);
  color: var(--color-complement-ink);           /* 6,67:1 auf der Fuellung */
}

/* Widerrufs-Button im Footer: gefuellt statt Outline.
   ⚠ Der Footer steht auf --color-bg-dark (Nachtblau). Ein Outline-Button
     mit --color-complement-ink waere dort dunkelbraun auf dunkelblau —
     1,24:1, praktisch unsichtbar. Die Outline-Variante der Kontakt-Buttons
     funktioniert nur, weil die auf WEISS stehen.
   Deshalb hier gefuellt als Ruhezustand (6,00:1), Hover eine Stufe heller
   (6,67:1). */
#footer .withdrawal-footer {
  background: var(--color-complement);
  border-color: var(--color-complement);
  color: var(--color-complement-ink);
}

#footer .withdrawal-footer:hover,
#footer .withdrawal-footer:focus-visible {
  background: var(--color-complement-hover);
  border-color: var(--color-complement-hover);
  color: var(--color-complement-ink);
}

/* Status-Badge bleibt gefuellt — es ist klein und sitzt auf Fotos, dort
   traegt die Farbflaeche die Erkennbarkeit. Nur die Schrift dreht auf
   dunkel (6,00:1); weiss waere hier 1,97:1. */
.property-card .card-img > mark,
.property-feature .feature-img > mark,
#property > .gallery > mark {
  color: var(--color-complement-ink);
}

/* ─── Complement als Schrift auf hellem Grund ─────────────────────────────
   Zahlenwerte in Finanz- und AfA-Rechner. Umgekehrte Rolle: hier muss der
   Ton dunkel sein, sonst steht orange auf weiss (1,97:1). */
.finance-calc-rate-value,
.finance-calc-net strong,
.finance-calc-slider-head output,
.afa-chart li:hover .afa-bar-value,
.afa-calc #afa-sum {
  color: var(--color-complement-text);          /* 5,62:1 */
}

/* Balken und Regler sind Grafik (WCAG 1.4.11, 3:1). */
.afa-chart .afa-bar {
  background: var(--color-complement-deko);
}

.finance-calc-slider input[type="range"] {
  accent-color: var(--color-complement-deko);
}