/* ===========================================================================
   SECTION 9 UND FUSS

   Auf Kundenwunsch entfernt und nur noch in der Versionsgeschichte:
   Section 7 (Werte und Selektion) sowie der Abschluss-CTA "Der naechste
   Schritt ist ein Gespraech" samt seinen Regeln .abschluss*.

   Briefing S.7, S.18, S.19: „Ein kurzer Einstieg in Wissen & Fragen und
   ein kompakter Karriere-Teaser."
   =========================================================================== */

/* ===========================================================================
   UMBAU 18.08.2026 — ANGLEICHUNG AN DIE ERSTEN VIER SECTIONS

   Kundenwunsch: „Die Section soll generell im Stil der ersten vier
   Sections gebaut werden, vor allem ‚So entsteht Vermoegensaufbau' und
   ‚Unsere Leistungen'."

   Uebernommen ist deshalb die Formensprache aus `prinzip.css` (.prinzip /
   .vt__*) und `auswahl.css` (.leist / .lk):
     — mittiger Kopf: goldene Kleinversalienzeile, grosse Ueberschrift in
       der Auszeichnungsschrift, darunter die Unterzeile
     — weisse Karten, grosser Eckenradius, ZWEI Schattenlagen, keine
       Kontur, ein Hauch Verlauf in der Flaeche
     — Symbole als feine Goldkontur in einem hellen, warmen Kreis;
       viewBox 24, stroke-width 1.2, runde Enden — identisch mit .lk__kreis
     — gestaffelter Einlauf ueber das siteweite [data-reveal]

   Aufgegeben ist dafuer die alte Fassung: zwei Spalten Fragen an einer
   Haarlinie mit einem Strich rechts. Sie stammte aus einer frueheren
   Phase und hatte mit dem Rest der Seite nichts mehr gemeinsam.

   KEINE ANTWORTEN, KEIN AUFKLAPPER. Die Antworten gehoeren laut Briefing
   S.3 auf `wissen.html`. Die sechs Karten sind deshalb Verweise, und ihr
   Pfeil zeigt nach RECHTS (weiter), nicht nach unten (aufklappen).
   =========================================================================== */

.schluss {
  /* ===== GOLD ==============================================================
     Zwei Goldtoene, nicht einer — dieselbe Begruendung wie in auswahl.css:
     das Palettengold #A8874F misst nur 3,32:1 auf Weiss und faellt als
     Schrift durch.
       --wt-gold-schrift  Kleinversalien und Text: #86693A, 5,13:1
       --wt-gold-linie    Haarlinien, Pfeile, Symbole: #9A7A3E, 4,02:1
                          (nichttextlich, dort gilt 3:1)
     ====================================================================== */
  --wt-gold-schrift: var(--gold-text);
  --wt-gold-linie:   #9A7A3E;

  /* ===== KARTEN ============================================================
     KEINE Kontur. Der Halt kommt aus zwei Schattenlagen: der enge
     Kontaktschatten macht die Kante, der weite, sehr schwache
     Umgebungsschatten macht die Hoehe. Werte wortgleich mit .leist —
     wenn die Karten auf dem weissen Grund verschwimmen: zuerst den ENGEN
     verstaerken, nie den weiten. */
  --wt-radius: clamp(14px, 1.4vw, 22px);
  --wt-schatten:
      0 2px 5px rgba(16, 41, 73, 0.10),
      0 18px 40px -12px rgba(16, 41, 73, 0.17);
  --wt-schatten-hoch:
      0 4px 10px rgba(16, 41, 73, 0.12),
      0 26px 54px -14px rgba(16, 41, 73, 0.21);
  /* Ein Hauch Verlauf in der Flaeche — kein Farbwert, den man sehen soll.
     Er nimmt der Karte die Gleichmaessigkeit und gibt ihr Volumen. */
  --wt-flaeche: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 58%, #FBFCFE 100%);
  /* Fuellung der Symbolkreise: warm, weil die Symbole darin golden sind. */
  --wt-symbolgrund: #FAF8F4;

  position: relative;
  z-index: 1;
  background: var(--paper);
  /* Unten wieder eigener Abstand: der Abschluss-CTA, der ihn frueher
     mitgebracht hat, ist auf Kundenwunsch entfallen. */
  padding: clamp(3.5rem, 9vh, 7rem) 0 clamp(3.5rem, 9vh, 6rem);
}
.schluss__inner {
  /* 1520 wie `.vt__inner` und `.wahl__inner`. Vorher 1180 — damit stand
     der Abschnitt spuerbar schmaler als alles darueber. */
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------------------------------------------------------------------------
   EINLAUF
   Er laeuft ueber das siteweite Muster: `site.js` setzt `data-seen="true"`,
   sobald ein Element ins Bild kommt, und meldet es danach vom Beobachter ab
   — beim erneuten Hereinscrollen startet also nichts neu.

   ABWEICHUNG vom globalen Muster in leistungen.css, und zwar bewusst:
   dort steht `[data-reveal] { opacity: 0 }` unbedingt. Ohne Javascript
   bliebe der Abschnitt damit unsichtbar. Hier wird der Einlauf erst
   eingeschaltet, wenn `site.js` das Wurzelelement mit `is-ready` markiert
   hat. Ohne Javascript steht alles sofort da.

   Die Staffelung haengt an `--i`. Sie zaehlt die SPALTE innerhalb der
   Reihe, nicht die Karte insgesamt: eine Reihe kommt gemeinsam ins Bild
   und laeuft dann von links nach rechts ein. Deshalb wird `--i` in jedem
   Rasterwechsel weiter unten neu gesetzt.
--------------------------------------------------------------------------- */
/* WARUM DIE UEBERBLENDUNG NUR AM ZUSTAND `data-seen` HAENGT und nicht am
   Element: das Ausgangsbild ist sichtbar, und `is-ready` blendet es aus.
   Stuende die Ueberblendung am Element, liefe genau dieser Schritt auch
   noch als Bewegung — der Abschnitt wuerde beim Laden erst weggeblendet.
   Der Browser liest die Ueberblendung aus dem Zustand NACH der Aenderung;
   deshalb ist sie beim Ausblenden `none` und nur beim Einblenden gesetzt.

   WARUM `translate` UND NICHT `transform`: der Hub beim Ueberfahren der
   Karte laeuft ueber `transform`. Wuerde der Einlauf dieselbe Eigenschaft
   benutzen, muesste eine Zeitangabe beide Bewegungen bedienen — der Hub
   bekaeme die Verzoegerung des Einlaufs mit. `translate` ist eine eigene
   Eigenschaft und wird sauber davor verrechnet. */
.schluss [data-reveal] {
  opacity: 1;
  translate: none;
  /* Das siteweite Muster in leistungen.css verschiebt zusaetzlich ueber
     `transform`. Das muss hier ausdruecklich zurueckgenommen werden,
     sonst laege ueber dem Einlauf noch eine zweite, nie zurueckgesetzte
     Verschiebung. Steht bewusst VOR den Hover-Regeln der Karte: beide
     haben dieselbe Spezifitaet, und dort soll der Hub gewinnen. */
  transform: none;
}
.is-ready .schluss [data-reveal] {
  opacity: 0;
  translate: 0 16px;
  transition: none;
}
.is-ready .schluss [data-reveal][data-seen='true'] {
  opacity: 1;
  translate: none;
  /* 0,85 s / 90 ms -> 0,5 s / 60 ms — P0 01.09.2026. Die Klasse .schluss
     steht auf keiner Seite mehr im Markup; Rueckweg. */
  transition:
    opacity   0.5s var(--ease-soft) calc(var(--i, 0) * 0.06s),
    translate 0.5s var(--ease-soft) calc(var(--i, 0) * 0.06s);
}

/* ---------------------------------------------------------------------------
   1 — Kopf, mittig. Aufbau wie `.vt__zwischen`.
--------------------------------------------------------------------------- */
.wissen__kopf {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}
/* Gesperrtes „ESTERA" in Gold — dieselbe Zeile wie ueber „So entsteht
   Vermoegensaufbau". Als Schrift nur --wt-gold-schrift, nie --gold. */
.wissen__kicker {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(0.82rem, 0.9vw, 0.96rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--wt-gold-schrift);
}
.wissen__h2 {
  margin-top: clamp(0.7rem, 1.6vh, 1.2rem);
  font-size: clamp(1.95rem, 3.6vw, 3.4rem);
  line-height: 1.06;
  color: var(--navy-800);
  text-wrap: balance;
}
/* Unterzeile wie `.vt__unter`: Auszeichnungsschrift, Navy, eine Stufe
   kleiner als dort — die Ueberschrift darueber ist hier laenger und
   deshalb selbst schon kleiner gesetzt. */
.wissen__lead {
  margin: clamp(0.55rem, 1.3vh, 0.95rem) auto 0;
  max-width: 44rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.35vw, 1.45rem);
  line-height: 1.34;
  color: var(--navy-600);
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   2 — Die sechs Fragen als Karten
   Drei Spalten, zwei Reihen. Alle Karten einer Reihe liegen in derselben
   Rasterzeile und werden von `align-items: stretch` (Voreinstellung) auf
   die Hoehe der hoechsten gestreckt — gleiche Hoehe je Reihe ist damit
   konstruiert und nicht geschaetzt. Der Fuss mit Haarlinie und Pfeil sitzt
   ueber `margin-top: auto` immer buendig am unteren Rand.
--------------------------------------------------------------------------- */
.wissen__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.wissen__fragen {
  margin-top: clamp(2.2rem, 5vh, 3.6rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.9rem);
}
.wissen__fragen > :nth-child(3n + 1) { --i: 0; }
.wissen__fragen > :nth-child(3n + 2) { --i: 1; }
.wissen__fragen > :nth-child(3n + 3) { --i: 2; }

.wissen__frage {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Untergrenze der Klickflaeche. Die Karten sind in Wahrheit ein
     Vielfaches davon hoch; der Wert steht als Zusicherung. */
  min-height: 56px;
  padding: clamp(1.35rem, 1.9vw, 2rem) clamp(1.25rem, 1.7vw, 1.85rem)
           clamp(1.1rem, 1.5vw, 1.55rem);
  border-radius: var(--wt-radius);
  background: var(--wt-flaeche);
  box-shadow: var(--wt-schatten);
  color: var(--navy-800);
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
/* Sobald die Karte eingelaufen ist, gilt wieder ihre eigene Ueberblendung —
   sonst wuerde die Regel des Einlaufs oben (hoehere Spezifitaet) den Hub
   beim Ueberfahren verschlucken. Deshalb hier alle vier Eigenschaften. */
.is-ready .schluss .wissen__frage[data-seen='true'] {
  transition:
    opacity    0.5s var(--ease-soft) calc(var(--i, 0) * 0.06s),
    translate  0.5s var(--ease-soft) calc(var(--i, 0) * 0.06s),
    box-shadow 0.5s var(--ease),
    transform  0.5s var(--ease);
}
.wissen__frage:hover,
.wissen__frage:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--wt-schatten-hoch);
}
/* Der Fokusrahmen der Seite ist eine 1-px-Goldlinie direkt am Element.
   Auf einer Karte ohne Kontur braucht er Abstand, sonst klebt er im
   Eckenradius. */
.wissen__frage:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

.wissen__kreis {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(44px, 3.6vw, 58px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--wt-symbolgrund);
  color: var(--wt-gold-linie);
}
.wissen__kreis svg { width: 52%; height: 52%; }

.wissen__text {
  margin-top: clamp(0.85rem, 1.8vh, 1.25rem);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.34vw, 1.46rem);
  line-height: 1.2;
  color: var(--navy-800);
  text-wrap: pretty;
}

/* Haarlinie und Pfeil am Kartenfuss. Der Pfeil zeigt nach RECHTS: die
   Frage fuehrt weiter auf `wissen.html` und klappt nichts auf. */
.wissen__fuss {
  margin-top: auto;
  padding-top: clamp(0.95rem, 2.1vh, 1.4rem);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--wt-gold-linie);
}
.wissen__regel {
  width: clamp(22px, 2.2vw, 36px);
  height: 1px;
  background: currentColor;
  transition: width 0.45s var(--ease-soft);
}
.wissen__frage:hover .wissen__regel,
.wissen__frage:focus-visible .wissen__regel { width: clamp(34px, 3.4vw, 54px); }
.wissen__pfeil {
  flex: 0 0 auto;
  width: clamp(15px, 1.2vw, 19px);
  height: clamp(15px, 1.2vw, 19px);
}
/* Gesperrt (das Ziel gibt es noch nicht): ruhig, aber nicht ausgegraut.
   Schriftfarbe und Symbolfarbe bleiben unveraendert — nur die Bewegung
   faellt weg, damit die Karte nicht mehr wie ein offener Weg wirkt. */
.wissen__frage[aria-disabled='true'] { cursor: default; }
.wissen__frage[aria-disabled='true']:hover {
  transform: none;
  box-shadow: var(--wt-schatten);
}
.wissen__frage[aria-disabled='true']:hover .wissen__regel {
  width: clamp(22px, 2.2vw, 36px);
}

/* ---------------------------------------------------------------------------
   3 — Karriere
   BEWUSST NAVY, nicht die helle Kartensprache. Begruendung: nach sechs
   weissen Karten auf weissem Grund waere ein siebter weisser Kasten nur
   eine groessere Karte und kein Schluss. Navy ist die Leitfarbe des Hauses,
   sie schliesst den Abschnitt und leitet in den navyfarbenen Fuss ueber.
   Damit er als gesetzter Akzent und nicht als Ueberbleibsel wirkt, traegt
   er dieselbe Form wie die Karten: gleicher Eckenradius, zwei Schattenlagen
   (auf dem dunklen Grund entsprechend tiefer), keine Kontur, goldene
   Haarlinie und goldene Zierzeichnung statt des alten Goldrahmens.

   KONTRAST auf #0F2745: Weiss 16,6:1, die Fliesstextfarbe
   rgba(255,255,255,0.82) rund 11:1, der goldene Zierton wird nirgends
   als Schrift verwendet.
--------------------------------------------------------------------------- */
.karriere {
  position: relative;
  overflow: hidden;
  margin-top: clamp(2.6rem, 6vh, 4.6rem);
  padding: clamp(1.9rem, 3.4vw, 3.4rem) clamp(1.6rem, 3vw, 3.4rem);
  border-radius: var(--wt-radius);
  background:
    linear-gradient(150deg, #14315A 0%, #0F2745 46%, #0A192E 100%);
  box-shadow:
      0 2px 6px rgba(10, 25, 46, 0.20),
      0 26px 60px -18px rgba(10, 25, 46, 0.42);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.4rem, 3.4vw, 3.4rem);
  align-items: center;
}
/* Zierzeichnung rechts: dieselbe Idee wie `.wahl__ecke`, nur als reine
   Linie. Rein dekorativ, liegt hinter dem Text (z-index 0 gegen 1) und
   traegt keine Aussage. */
.karriere__zier {
  position: absolute;
  z-index: 0;
  top: -18%;
  right: -6%;
  width: clamp(210px, 26%, 420px);
  aspect-ratio: 1;
  color: rgba(200, 172, 122, 0.30);
  pointer-events: none;
}
.karriere__zier svg { width: 100%; height: 100%; }
.karriere__links,
.karriere__rechts { position: relative; z-index: 1; }

.karriere__regel {
  display: block;
  width: clamp(26px, 2.4vw, 40px);
  height: 1px;
  margin-bottom: clamp(0.8rem, 1.8vh, 1.15rem);
  background: var(--gold);
}
.karriere__titel {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  text-wrap: balance;
}
.karriere__titel em { font-style: italic; color: var(--gold-soft); }
.karriere__satz {
  /* Zeilenlaenge begrenzen: ueber die volle Spaltenbreite waeren es rund
     120 Zeichen je Zeile und damit doppelt so viel wie lesbar ist. */
  max-width: 36rem;
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  text-wrap: pretty;
}
/* Die goldene Haarlinie unter dem Verweis liegt als `text-decoration` an
   der Schrift und nicht als abgesetzter Kasten darunter. Grund: auf
   schmalen Fenstern bricht der Verweis zweizeilig. Ein Kasten haette dann
   nur unter der letzten Zeile gelegen und der Pfeil waere allein am
   rechten Rand haengen geblieben; so laeuft die Linie unter jeder Zeile
   mit und der Pfeil folgt dem letzten Wort. */
.karriere__link {
  display: inline-block;
  margin-top: clamp(1rem, 2.2vh, 1.5rem);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.16vw, 1.16rem);
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}
.karriere__linktext {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.42em;
  text-decoration-color: rgba(200, 172, 122, 0.62);
  transition: text-decoration-color 0.4s var(--ease);
}
.karriere__link .wissen__pfeil {
  display: inline-block;
  vertical-align: -0.18em;
  margin-left: 0.55rem;
  transition: transform 0.45s var(--ease);
}
.karriere__link:hover .karriere__linktext { text-decoration-color: var(--gold-soft); }
.karriere__link:hover .wissen__pfeil { transform: translateX(4px); }
.karriere__link:focus-visible { outline-offset: 4px; }
/* Gesperrt, solange `karriere.html` fehlt. Die Schrift bleibt WEISS —
   ein ausgegrauter Verweis auf dunklem Grund faellt sonst unter 4,5:1.
   Sichtbar wird der Zustand ueber den Zeiger und die stehende Linie. */
.karriere__link[aria-disabled='true'] {
  cursor: default;
  color: #fff;
}
.karriere__link[aria-disabled='true']:hover .karriere__linktext {
  text-decoration-color: rgba(200, 172, 122, 0.62);
}
.karriere__link[aria-disabled='true']:hover .wissen__pfeil {
  transform: none;
}

/* ===========================================================================
   FUSS
   Briefing S.5: „Recht: Impressum, Datenschutz, Cookie-Einstellungen,
   regulatorisch notwendige Erstinformationen und passende Risikohinweise."
   Der Partnerbereich darf laut S.5 im Fuss liegen.
   =========================================================================== */
.fuss {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.7);
  padding: clamp(3rem, 7vh, 5rem) var(--gutter) clamp(1.8rem, 4vh, 2.6rem);
}
.fuss__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}
/* WORTMARKE MITTIG UEBER DER ANKERZEILE — 31.08.2026, Kundenwunsch:
   „Estera Immobilien muss mittig ueber Diskret. Strukturiert.
   Langfristig. stehen."
   Betrifft nur diesen einen Block; die beiden Spalten daneben (Kontakt,
   Rechtliches) bleiben linksbuendig. `align-items: center` statt eines
   `text-align` auf der Wortmarke selbst, weil sie ein Flexelement ist
   und `text-align` sie nicht bewegt haette. */
.fuss__marke {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.fuss__marke .wordmark { align-items: center; }
.fuss__marke .wordmark__name { color: #fff; }
.fuss__marke .wordmark__sub  { color: rgba(255, 255, 255, 0.45); }
.fuss__anker {
  margin-top: clamp(1rem, 2.4vh, 1.5rem);
  font-family: var(--font-display);
  font-size: clamp(0.94rem, 1.04vw, 1.04rem);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
}
.fuss__titel {
  margin-bottom: clamp(0.9rem, 2vh, 1.3rem);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: rgba(200, 172, 122, 0.9);
}
.fuss__liste { display: grid; gap: 0.55rem; }
.fuss__liste a, .fuss__liste span {
  font-size: clamp(0.9rem, 0.98vw, 0.98rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.35s var(--ease);
}
.fuss__liste a:hover { color: #fff; }
.fuss__liste a[aria-disabled='true'] { cursor: default; }

.fuss__unten {
  max-width: 1180px;
  margin: clamp(2.4rem, 6vh, 4rem) auto 0;
  padding-top: clamp(1.2rem, 3vh, 1.8rem);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem clamp(1.2rem, 3vw, 2.4rem);
  justify-content: space-between;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.5);
}
/* Risikohinweis: gehoert sichtbar auf die Seite, aber nicht als Warnblock
   auf die Startseite (Briefing S.17 verbietet „endlose Disclaimer"). */
.fuss__risiko {
  max-width: 1180px;
  margin: clamp(1.2rem, 3vh, 1.8rem) auto 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.42);
}

/* --- Responsive ----------------------------------------------------------- */
/* Drei Karten nebeneinander tragen ab rund 1100 px. Darunter zwei, ab
   700 px eine. `--i` wird jedes Mal neu gesetzt, weil es die SPALTE in der
   Reihe zaehlt und nicht die Karte insgesamt. */
@media (max-width: 1100px) {
  .wissen__fragen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wissen__fragen > :nth-child(odd)  { --i: 0; }
  .wissen__fragen > :nth-child(even) { --i: 1; }
}
@media (max-width: 900px) {
  .karriere { grid-template-columns: 1fr; text-align: left; }
  .fuss__inner { grid-template-columns: 1fr 1fr; }
  .fuss__marke { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .wissen__fragen { grid-template-columns: minmax(0, 1fr); }
  .wissen__fragen > * { --i: 0; }
}
@media (max-width: 560px) {
  .fuss__inner { grid-template-columns: 1fr; }
}

/* --- Ruhige Darstellung --------------------------------------------------- */
/* Kein Einlauf, keine Hubbewegung. Beides steht sofort und vollstaendig. */
@media (prefers-reduced-motion: reduce) {
  .schluss [data-reveal],
  .is-ready .schluss [data-reveal],
  .is-ready .schluss [data-reveal][data-seen='true'],
  .is-ready .schluss .wissen__frage[data-seen='true'] {
    opacity: 1;
    translate: none;
    transform: none;
    transition: none;
  }
  .wissen__frage,
  .wissen__frage:hover,
  .wissen__frage:focus-visible,
  .wissen__regel,
  .karriere__link .wissen__pfeil { transition: none; transform: none; }
}

/* ===========================================================================
   CALL-TO-ACTION zwischen Leistungen und Geschaeftsfuehrern (Briefing 03 C)
   Bewusst schmal gehalten: der Abschnitt sitzt mitten im Lesefluss und soll
   ihn nicht anhalten, sondern nur eine Abzweigung anbieten. Sobald der
   Wortlaut geliefert ist, kommt hier eine Zeile ueber die Schaltflaeche.
   =========================================================================== */
.cta {
  position: relative;
  z-index: 1;
  background: var(--paper);
  /* Oben knapper als unten: der Knopf soll naeher an den Abschnitt darueber
     ruecken. Auf Kundenwunsch. */
  padding: clamp(0.6rem, 1.4vh, 1.2rem) var(--gutter) clamp(2.2rem, 5vh, 3.6rem);
}
.cta__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  /* Die beiden Haarlinien ueber und unter dem Knopf sind auf Kundenwunsch
     entfallen; er steht jetzt frei in der Flaeche.
     Seit die Platzhalterzeile entfallen ist, steht die Schaltflaeche allein
     in der Zeile — dann gehoert sie in die Mitte, nicht an den rechten Rand. */
  /* SPALTE STATT ZEILE — 31.08.2026. Solange der Abschnitt nur aus dem
     Knopf bestand, war eine Zeile richtig. Seit das Wording-Dokument
     Kleinzeile, Ueberschrift, Text und Kleingedrucktes dazustellt, stehen
     fuenf Bausteine untereinander; in einer Zeile stuenden sie nebeneinander
     und der Abschnitt waere unlesbar. Mittig bleibt alles. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Der Knopf im CTA-Block etwas hoeher als der Standardknopf der Seite — er
   steht dort allein und traegt den Abschnitt.

   KNALLGELB, auf Kundenwunsch vom 21.08.2026. Er steht direkt unter dem
   Kasten „Ihre Immobilie als Kapitalanlage".

   Zwischenschritt und warum er verworfen wurde: zuerst stand hier Gold. Der
   Kunde hat ausdruecklich nachgebessert — „Der muss wirklich knallgelb sein.
   Gelb, nicht Gold." Also ein Signalgelb, nicht der warme Estera-Ton.

   SCHRIFTFARBE. Gelb ist eine sehr helle Flaeche: Weiss darauf misst nur
   1.35:1 und ist unbrauchbar. Die Schrift steht deshalb in --navy-900
   #0A192E und misst 13.11:1 — das ist mit grossem Abstand ueber der
   Schwelle von 4.5:1 und zugleich der Ton, der zur uebrigen Seite passt.

   ANMERKUNG ZUR MARKE. Dieses Gelb ist der einzige Signalton auf einer sonst
   in Navy, Gold und Weiss gehaltenen Seite. Es ist bewusst gesetzt und
   ausschliesslich fuer diesen einen Knopf gedacht — der Token darf nirgends
   sonst verwendet werden. */
/* ABGESCHWAECHT am 21.08.2026. Zuerst stand hier das reine Signalgelb
   #FFDD00. Der Kunde: „Das ist doch ein bisschen zu knallig, schwäche das
   Gelb ein bisschen ab. Es soll immer noch aussehen wie Gelb."
   Also Saettigung und Helligkeit je eine Stufe zurueckgenommen und einen
   Hauch waermer gestellt — es bleibt eindeutig Gelb, verliert aber das
   Grelle. Navy darauf misst weiterhin 11.45:1. */
/* AUF SAND GEZOGEN am 24.08.2026. Bis dahin trug dieser Knopf ein eigenes
   Gelb (#F0CE45). Seit der Kunde den Sandton der Referenzseite als
   durchgehende Signalfarbe gesetzt hat, gaebe es zwei konkurrierende warme
   Toene auf derselben Seite — Gelb im Abschluss, Sand im Hero. Zwei
   Signalfarben entwerten einander: keine von beiden heisst dann noch
   „hier entlang". Der Knopf nimmt deshalb denselben Sandton.
   Die Gelb-Token sind entfallen; sie stehen in der Versionsgeschichte. */
/* Nur noch die GROESSE. Farbe, Kante und das Verhalten beim Ueberfahren
   holt sich der Knopf jetzt aus .btn--sand in base.css — dieselbe
   Ausfuehrung wie der Haupt-Knopf im Hero.

   VORHER WAR HIER EIN FEHLER, gefunden beim Nachmessen am 24.08.2026:
   die Regel setzte beim Ueberfahren nur `--btn-bg` um. Die Grundregel
   `.btn:hover` setzt aber `background` DIREKT, und eine direkte Angabe
   schlaegt eine, die erst ueber eine Variable laeuft. Der Knopf wurde
   dadurch beim Ueberfahren navy — mit navyfarbener Schrift darauf.
   Gemessen 1.00:1, also schlicht unsichtbar. Das galt schon fuer die
   gelbe Fassung davor und ist niemandem aufgefallen, weil man den Zustand
   nur sieht, solange die Maus daraufsteht. */
.cta .btn {
  min-height: 3.6rem;
  padding-inline: clamp(1.8rem, 4vw, 2.6rem);
}

/* ===========================================================================
   DER ABSCHLUSS-CTA HAT SEIT DEM 31.08.2026 EINEN TEXT

   Bis dahin stand in .cta__inner allein die Schaltflaeche — der Wortlaut
   fehlte, und der Vermerk im HTML hat ausdruecklich darauf gewartet. Das
   Wording-Dokument liefert ihn in Abschnitt 09.

   KEIN NEUER STIL. Jede der vier Zeilen uebernimmt die Werte des Bausteins,
   der dieselbe Rolle anderswo auf der Seite spielt:
     .cta__eyebrow  <- .abl__eyebrow   (Kleinzeile ueber einer Ueberschrift)
     .cta__h2       <- .abl__titel     (Abschnittsueberschrift)
     .cta__text     <- .abl__sub       (Unterzeile)
     .cta__micro    <- .wi__hinweis    (Kleingedrucktes unter einem Knopf)
   Die Werte stehen hier ausgeschrieben statt als Verweis, weil die
   Abschnitte eigene Farbraeume haben und ein @extend in CSS nicht existiert.
   =========================================================================== */
.cta__eyebrow {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(0.74rem, 0.94vw, 0.92rem);
  letter-spacing: 0.30em;
  text-indent: 0.30em;               /* Sperrung hinter dem letzten Zeichen */
  text-transform: uppercase;
  color: var(--gold-text, #86693A);
}
.cta__h2 {
  margin: clamp(1.05rem, 1.8vw, 1.75rem) 0 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.93vw, 2.82rem);
  line-height: 1.1;
  letter-spacing: -0.004em;
  color: var(--navy-800);
  text-wrap: balance;
}
/* „kein Kauf" und „Klarheit" — 01.09.2026, Optimierungsbriefing, Abschnitt
   08: „deutlich groesser, farbig oder in unterschiedlichen Schriftschnitten
   hervorheben." Alle drei Mittel, aber jedes massvoll: 1,18-fach groesser,
   Schnitt 500 statt 300, --gold-text. Aufrecht, nicht kursiv — <em> ist
   hier die Betonung im Sinn, nicht die Schraeglage; Cormorant kursiv laese
   sich in einer Ueberschrift dieser Groesse wie ein Zitat.
   FARBE: --gold-text #86693A misst 5,13:1 auf Weiss; bei 33 px und 500
   gilt ohnehin die 3:1-Schwelle fuer grosse Schrift. Der Sand des Knopfes
   darunter (1,94:1) kommt als Schrift nicht in Frage.
   `line-height: 1` am <em>, damit die groessere Zeile den Zeilenabstand
   der Ueberschrift nicht aufsprengt. */
.cta__stark {
  font-style: normal;
  font-weight: 500;
  font-size: 1.18em;
  line-height: 1;
  color: var(--gold-text, #86693A);
  /* „kein Kauf" bleibt zusammen: bei 1440 brach die Zeile genau zwischen
     den beiden Woertern, und die Hervorhebung zerfiel in zwei Haelften. */
  white-space: nowrap;
}
.cta__text {
  max-width: 52rem;
  margin: clamp(0.9rem, 1.7vw, 1.5rem) auto clamp(1.6rem, 3vw, 2.4rem);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.12vw, 1.12rem);
  line-height: 1.55;
  color: var(--ink-mute);
  text-wrap: pretty;
}
.cta__micro {
  margin: clamp(0.9rem, 1.9vh, 1.4rem) 0 0;
  font-family: var(--font-ui);
  font-size: clamp(0.78rem, 0.86vw, 0.86rem);
  line-height: 1.6;
  color: var(--ink-mute);
}

/* ===========================================================================
   ABSCHLUSS-CTA ZWEISPALTIG — 31.08.2026

   Kundenwunsch: „Der Text auf der linken Seite der Section, auf der rechten
   Seite ein Bild." Der Abschnitt stand bis dahin mittig in einer Spalte;
   die Regeln dafuer stehen unveraendert darueber und gelten weiter, sobald
   die Spalten unter 900 px wieder untereinander stehen.

   Das Raster liegt an .cta__inner. Der Text bekommt die groessere Haelfte —
   er traegt Ueberschrift, Absatz, Knopf und Kleinzeile, das Bild nur sich
   selbst. Mittig ausgerichtet, damit das Bild neben dem Textblock steht und
   nicht daneben haengt.
   =========================================================================== */
@media (min-width: 900px) {
  .cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
    column-gap: clamp(2rem, 4.5vw, 4.5rem);
    align-items: center;
    text-align: left;
  }
  /* Mittig war richtig, solange alles untereinander stand. Neben einem Bild
     liest sich linksbuendiger Satz besser, und der Knopf steht dann unter
     dem Textanfang statt in der Luft. */
  .cta__wort { text-align: left; }
  .cta__text { margin-inline: 0; }
}

.cta__bild {
  margin: 0;
  /* Dasselbe Passepartout wie beim Bildfenster im Ablauf: ein schmaler
     heller Rand, damit das Bild auf dem Papiergrund nicht ausfranst. */
  border-radius: var(--radius-img, 14px);
  overflow: hidden;
  background: var(--navy-800);
}
.cta__bild picture,
.cta__bild img {
  display: block;
  width: 100%;
}
/* KEIN `height: 100%` — 31.08.2026 sofort nach dem Einbau korrigiert.
   Im Raster hatte die Figur eine Zeilenhoehe, untereinander nicht: dort
   loeste sich die Prozenthoehe in nichts auf, und das Bild stand bei 899
   und 390 px mit 0 x 0 auf der Seite. Die Hoehe kommt jetzt ueberall aus
   dem Seitenverhaeltnis am Bild selbst. */
.cta__bild img {
  /* `height: auto` ist NICHT verzichtbar: das <img> traegt die Masse als
     Attribute (1536 x 1024), und die schlagen als benutzte Hoehe durch —
     `aspect-ratio` kommt gegen eine gesetzte Hoehe nicht an. Ohne diese
     Zeile stand das Bild an jeder Breite 1024 px hoch. */
  height: auto;
  /* Ausschnitt statt Verzerrung: das Seitenverhaeltnis der Spalte weicht je
     nach Fensterbreite vom Dateiformat 3:2 ab. */
  object-fit: cover;
  aspect-ratio: 3 / 2;
}
@media (max-width: 899px) {
  /* Untereinander: das Bild sitzt unter dem Text und braucht Abstand nach
     oben, den es im Raster nicht brauchte.

     `align-self: stretch` ist der Grund, warum es ueberhaupt zu sehen ist.
     .cta__inner ist unterhalb 900 px eine Flexspalte mit `align-items:
     center`; darin schrumpft die Figur auf ihren Inhalt, und ein Bild mit
     `width: 100%` von einer geschrumpften Huelle ist genau 0 px breit.
     Gemessen: 0 x 0 bei 899 und bei 390. */
  .cta__bild {
    align-self: stretch;
    width: 100%;
    margin-top: clamp(1.6rem, 4vw, 2.6rem);
  }
}

/* ===========================================================================
   FUSSZEILE: LESBARKEIT UND TREFFERFLAECHEN — 01.09.2026

   Optimierungsbriefing, Abschnitt 19: „Textgrößen … vergrößern. Lesbarkeit
   hat Vorrang vor extrem filigraner Boutique-Optik." und „Mobile: … keine
   Mini-Schriften". Der Pruefer hat auf allen Seiten dieselben drei Befunde
   gemessen: Haftungstext 12,8 px in Weiss 42 % = 4,04:1, Etiketten
   „KONTAKT / RECHTLICHES" 11,5 px, die sechs Fusslinks 14,4 px und nur 22 px
   hoch im 30-px-Raster — unter den 44 px, die ein Daumen braucht.

   Die Regeln stehen hier am Ende, weil sie die oben stehenden bewusst
   ueberschreiben: so bleibt oben die Herkunft der alten Werte lesbar.
   =========================================================================== */
.fuss__titel { font-size: 0.8rem; }                       /* 11,5 -> 12,8 px */
.fuss__liste a, .fuss__liste span {
  font-size: 1rem;                                          /* 14,4 -> 16 px */
  color: rgba(255, 255, 255, 0.8);                          /* 8,4:1 auf Navy */
}
.fuss__risiko {
  font-size: 0.9375rem;                                     /* 12,8 -> 15 px */
  color: rgba(255, 255, 255, 0.64);                         /* 4,04 -> 6,4:1 */
}
.fuss__unten span { font-size: 0.9375rem; }                 /* 13,4 -> 15 px */

/* Auf dem Telefon werden die Links zu Trefferflaechen: 44 px Hoehe ueber
   Innenabstand statt ueber Zeilenabstand, damit der Text nicht auseinander-
   ruecken muss; das Raster der Liste wird dafuer enger, damit die Spalte
   nicht laenger wird als noetig. */
@media (max-width: 899px) {
  .fuss__liste { gap: 0; }
  .fuss__liste a, .fuss__liste span {
    display: block;
    padding-block: 0.55rem;                                 /* 24 + 2*8,8 = 41,6 -> mit Zeile 44 */
    min-height: 44px;
    box-sizing: border-box;
  }
}

/* MOBIL, 01.09.2026 — Briefing 19 „Buttons volle Breite": der Knopf im
   Zwischen-CTA stand bei 250 px in einer 342-px-Spalte. */
@media (max-width: 899px) {
  .cta .btn { width: 100%; }
  .cta__inner { align-items: stretch; }
  .cta__inner > * { text-align: center; }
}


/* ===========================================================================
   DER FUSS STEHT AUF DEM TELEFON DURCHGEHEND MITTIG — 09.09.2026

   Kundenwunsch woertlich: „Im Fusszeilenbereich soll Kontakt und Rechtliches
   alles auch mittig sein und nicht linksbuendig. Das musst du ueberall im
   Fuss so umsetzen."

   „UEBERALL IM FUSS" IST WOERTLICH GENOMMEN. Betroffen sind nicht nur die
   zwei genannten Spalten, sondern jeder Baustein, der links stand —
   nachgezaehlt und GEMESSEN bei 390 px auf karriere.html:

     .fuss__titel      „KONTAKT" / „RECHTLICHES"     text-align: start
     .fuss__liste a    fuenf Verweise, je 44 px hoch text-align: start
     .fuss__risiko     vier Zeilen Haftungstext      text-align: start
     .fuss__unten      Flexzeile, space-between      text-align: start
     .fuss__unten span „© 2026 Estera GmbH"          Mitte bei x 86,3
     .fuss__marke      Wortmarke + Ankerzeile        stand schon mittig

   Die Wortmarke und „Diskret. Strukturiert. Langfristig." sind seit dem
   31.08.2026 mittig (Kundenwunsch von damals, .fuss__marke) und bleiben es;
   sie standen als einziger Block schon so da, und genau daran war zu sehen,
   dass der Rest daneben abfiel.

   ES GILT FUER ALLE NEUN SEITEN. schluss.css traegt die Fusszeile fuer das
   ganze Projekt; die neun HTML-Dateien binden sie ein und keine bringt
   einen eigenen Fussstil mit (nachgesehen). Am Markup ist nichts zu
   aendern — die Ausrichtung ist vollstaendig eine Sache der CSS.

   DIE GRENZE IST 767 px UND NICHT 899. Der Fuss hat weiter oben in dieser
   Datei schon einen Mobilblock bei 899 px (die 44-px-Trefferflaechen der
   Verweise). Der bleibt, wie er ist; die Mittigkeit setzt erst unter
   768 px an, weil der Auftrag ausdruecklich und wiederholt die mobile
   Ansicht meint und der Desktop unangetastet zu bleiben hat.

   OFFEN GESAGT, weil es beim Nachmessen auffaellt: zwischen 561 und 767 px
   steht .fuss__inner noch ZWEISPALTIG (die Umstellung auf eine Spalte
   greift erst bei 560 px). Dort stehen „Kontakt" und „Rechtliches"
   nebeneinander und ihr Satz ist jetzt in beiden Spalten mittig. Das ist
   hingenommen und nicht uebersehen: es sind zwei Spalten mit je zwei bis
   vier kurzen Verweisen, keine Textspalten, in denen eine gerade linke
   Kante das Lesen traegt. Auf den Geraetebreiten, um die es geht — 360,
   390, 430 px — ist der Fuss ohnehin einspaltig. Wer die Zweispalte
   ausnehmen will, setzt diesen Block auf `max-width: 560px`.

   ZWEI EINZELHEITEN, die ein blosses `text-align: center` nicht erledigt:

   1) .fuss__titel traegt `letter-spacing: 0.28em` und dazu
      `text-indent: 0.28em`. Der Einzug ist der Ausgleich fuer die
      Sperrung, die HINTER dem letzten Buchstaben noch einmal auftraegt —
      bei linksbuendigem Satz gehoert er nach vorn. Bei mittigem Satz
      verteilt sich die ueberschuessige Sperrung auf beide Seiten, der
      Einzug schoebe das Wort dann um 0,28em = 3,6 px nach rechts.
      Er wird deshalb auf 0 gesetzt und der Ausgleich ueber
      `margin-right: -0.28em` gefuehrt, der die Randbox um genau die
      nachlaufende Sperrung kuerzt. GEMESSEN danach: Wortmitte 195,0 px
      = Behaeltermitte.

   2) .fuss__unten ist eine Flexzeile mit `justify-content: space-between`.
      Sie traegt seit dem 01.09.2026 nur noch EIN Kind („© 2026 Estera
      GmbH"), und `space-between` schiebt ein einzelnes Kind an die linke
      Kante — GEMESSEN Mitte bei 86,3 statt 195 px. `center` an der Achse
      ist der Fix; `text-align: center` allein haette daran nichts
      geaendert, weil das Kind ein Flexelement ist. Dasselbe Muster steht
      schon in base.css bei `.menu__foot` unter 620 px.
   =========================================================================== */
@media (max-width: 767px) {
  .fuss__titel {
    text-align: center;
    /* Sperrungsausgleich, siehe Rechnung oben. */
    text-indent: 0;
    margin-right: -0.28em;
  }
  .fuss__liste a,
  .fuss__liste span,
  .fuss__risiko {
    text-align: center;
  }
  .fuss__unten {
    justify-content: center;
    text-align: center;
  }
}