/* ═══════════════════════════════════════════════════════════
   SR CAPITAL GROUP

   Struktur nach der Referenz, die der Kunde gebracht hat:
   Vollbild-Hero → Dienstleistungs-Karten → Gründe → Ablauf in
   Schritten → Über uns → Social Proof → CTA-Band.

   Optik bleibt SR: warmes Papier statt Weiss, Tinte statt
   Schwarz, Gold als einziger Akzent, Newsreader + Inter.
   Kanten sind fast scharf (4px) – das hält die Seite ruhig,
   während die Struktur jetzt der gewohnten Lesart folgt.

   Vantis Group · 2026
   ═══════════════════════════════════════════════════════════ */

/* Die Schriften kommen NICHT per @import, sondern als eigener
   <link> im Kopf jeder Seite - vor diesem hier.

   Ein @import darf der Browser erst absenden, wenn er diese Datei
   schon hat und liest. Damit standen drei Anfragen hintereinander:
   HTML holt style.css, style.css holt fonts.css, fonts.css holt die
   woff2-Dateien. Unter 4G gemessen begann fonts.css erst nach
   1952 ms und die Schriften waren nach 3706 ms da - obwohl style.css
   bereits nach 1186 ms fertig war. Die Wartezeit war reine Kette,
   kein Datenvolumen.

   Als zweiter <link> laufen beide Dateien gleichzeitig los.

   Seite ergänzt? Dann gehören zwei Zeilen in den Kopf, fonts.css
   zuerst. Fehlt sie, fällt die Seite still auf Georgia und die
   Systemschrift zurück - das sieht man erst beim Hinsehen. */

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

:root {
  /* ── Papier (Grund) ───────────────────────────── */
  --papier:      #FAF7F1;   /* warmes Elfenbein */
  --papier-tief: #F1EDE4;   /* abgesetzte Bänder */
  --papier-tief-rgb: 241, 237, 228;  /* dieselbe Farbe, für rgba() im Seitenkopf */
  --papier-warm: #EBE4D6;   /* Hover, Rahmen-Füllung */
  --karte:       #FFFDF9;   /* Karten stehen einen Hauch heller als der Grund */

  /* ── Tinte (Text und dunkle Bänder) ───────────── */
  --tinte:       #14181F;
  --tinte-2:     #1D232D;
  --tinte-weich: #5B6472;
  --linie:       #DED7C8;
  --linie-dunkel:#2A313D;

  /* ── Akzente ──────────────────────────────────── */
  --gold:        #C8A96A;   /* auf dunklem Grund */
  --gold-tief:   #8C6D33;   /* auf hellem Grund – lesbar */
  --terra:       #B25742;
  --terra-tief:  #96412F;   /* Fehlertext auf Papier – terra selbst liegt mit 4.53 zu knapp an der Norm */

  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --rand:   clamp(1.25rem, 5vw, 5.5rem);
  --breite:    1240px;
  --kopfbreite: 1440px;
  --r:      4px;
  --schatten:      0 1px 2px rgba(20,24,31,.04), 0 8px 24px rgba(20,24,31,.05);
  --schatten-hoch: 0 2px 4px rgba(20,24,31,.05), 0 16px 40px rgba(20,24,31,.09);
  --kopfhoehe: 72px;
}

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopfhoehe) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  font-family: var(--body);
  font-weight: 400;
  font-size: var(--grundschrift, 16.5px);
  line-height: 1.72;
  color: var(--tinte);
  background: var(--papier);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas, iframe { display: block; max-width: 100%; }

/* <picture> ist nur eine Huelle um das <img> und darf im Layout nicht
   mitzaehlen: in .person und .vorstellung ist das <img> ein Grid-Kind,
   und mit einer sichtbaren Huelle dazwischen griffe width: 100% auf die
   Huelle statt auf die Spalte. display: contents nimmt sie aus dem
   Kastenbaum, das Bild bleibt direktes Kind - damit gelten alle
   bestehenden img-Regeln unveraendert weiter.

   Die zweite Zeile ist dabei nicht optional. Chrome gibt <source>
   keinen display: none; das faellt normalerweise nicht auf, weil das
   Element leer ist. Sobald picture aber aus dem Kastenbaum faellt,
   wird <source> selbst zum Grid-Kind, blockifiziert und belegt die
   erste Spalte - das Portraet landete dadurch in der Textspalte und
   war 241 statt 146 Pixel breit. */
picture { display: contents; }
picture > source { display: none; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--tinte); }

/* ── Typografie ───────────────────────────────────────────── */
/* Lange deutsche Komposita («Datenschutzerklärung», «Liegenschaftsverwaltung») passen
   auf schmalen Bildschirmen nicht in eine Zeile und sprengen sonst das Layout.
   Silbentrennung braucht das lang-Attribut am html-Element (steht dort). */
h1, h2, h3 {
  font-family: var(--display); font-weight: 500; line-height: 1.13; letter-spacing: -.012em;
  overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;
}
h1 { font-size: clamp(2.35rem, 5.6vw, 4.2rem); }
h2 { font-size: clamp(1.85rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 500; }
em { font-style: italic; color: var(--gold-tief); }

p { color: var(--tinte-weich); }
strong { font-weight: 600; color: var(--tinte); }

/* Gesperrte Kleinschrift – das typografische Erkennungsmerkmal */
.marke {
  font-family: var(--body); font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-tief);
}
.marke--still { color: var(--tinte-weich); font-weight: 500; }

.anriss { font-size: 1.07rem; color: var(--tinte-weich); max-width: 58ch; }
.anriss strong { color: var(--tinte); font-weight: 500; }

/* ── Raster ───────────────────────────────────────────────── */
.bahn { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.feld { padding: clamp(4rem, 11vh, 7.5rem) 0; }
.feld--eng { padding: clamp(2.5rem, 6vh, 4rem) 0; }

.feld--sand   { background: var(--papier-tief); }
.feld--dunkel { background: var(--tinte); color: var(--papier); }

/* Abschnittskopf – zentriert, wie in der Referenz */
.kopfzeile { max-width: 44rem; margin: 0 auto clamp(2.5rem, 6vw, 4rem); text-align: center; }
.kopfzeile .marke { display: block; margin-bottom: 1rem; }
.kopfzeile p { margin-top: 1rem; font-size: 1.05rem; }
.kopfzeile--links { margin-left: 0; text-align: left; }

.strich { border: 0; border-top: 1px solid var(--linie); }

/* ── Umkehrung im dunklen Band ────────────────────────────── */
.feld--dunkel h1, .feld--dunkel h2, .feld--dunkel h3 { color: var(--papier); }
.feld--dunkel p, .feld--dunkel .anriss { color: #A4ADBB; }
.feld--dunkel .anriss strong, .feld--dunkel strong { color: var(--papier); }
.feld--dunkel em { color: var(--gold); }
.feld--dunkel .marke { color: var(--gold); }
.feld--dunkel .marke--still { color: #7C8698; }
.feld--dunkel .strich { border-color: var(--linie-dunkel); }
.feld--dunkel .pfeil { color: var(--papier); border-bottom-color: var(--gold); }
.feld--dunkel .pfeil::after { color: var(--gold); }
.feld--dunkel .pfeil:hover { color: var(--gold); }
.feld--dunkel .pfeil--still { border-bottom-color: var(--linie-dunkel); }
.feld--dunkel .rauten li { color: #A4ADBB; }
.feld--dunkel .daten dt { color: #7C8698; }
.feld--dunkel .daten dd { color: var(--papier); }

/* ═══ KOPFZEILE ════════════════════════════════════════════ */

/* Der Platzhalter, den js/includes.js gegen die echte Kopfzeile
   tauscht. Er muss deren Hoehe schon vorher belegen.

   Ohne diese Regel war er null Pixel hoch, und beim Einsetzen rutschte
   die gesamte Seite um 73 Pixel nach unten. Gemessen ergab das einen
   Layoutsprung (CLS) von 0.086 bis 0.104 - objekte.html lag damit ueber
   Googles Grenzwert von 0.1. Fuer den Besucher heisst das: er tippt auf
   einen Link, und im selben Moment schiebt sich alles weg.

   Die 1px sind der untere Rand der Kopfzeile, der zur Hoehe dazukommt. */
#kopf-slot { height: calc(var(--kopfhoehe) + 1px); }
.kopf {
  position: sticky; top: 0; z-index: 900;
  background: rgba(250, 247, 241, .92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen {
  max-width: var(--kopfbreite); margin: 0 auto; padding: 0 var(--rand);
  height: var(--kopfhoehe); display: flex; align-items: center; gap: 1.4rem;
}
.kopf__marke { margin-right: auto; }
.kopf__marke img { height: 26px; width: auto; }

.kopf__nav { display: none; align-items: center; gap: clamp(.7rem, 1.15vw, 1.3rem); list-style: none; }
.kopf__nav a {
  font-size: .67rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase;
  color: var(--tinte-weich); padding-bottom: 3px; border-bottom: 1px solid transparent;
  white-space: nowrap; transition: color .2s, border-color .2s;
}
.kopf__nav a:hover { color: var(--tinte); }
.kopf__nav a[aria-current] { color: var(--tinte); border-bottom-color: var(--gold-tief); }

/* Zwei Klassen, damit .knopf (steht weiter unten) das Ausblenden nicht kippt. */
.kopf .kopf__tat { display: none; padding: .8rem 1.35rem; font-size: .69rem; letter-spacing: .13em; }

.brenner { background: none; border: 0; cursor: pointer; padding: 10px 0; display: flex; flex-direction: column; gap: 5px; margin-left: auto; }
.brenner span { width: 26px; height: 1.5px; background: var(--tinte); transition: transform .25s, opacity .25s; }
.brenner[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.brenner[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.brenner[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.klapp {
  position: fixed; inset: var(--kopfhoehe) 0 auto 0; z-index: 890;
  max-height: calc(100vh - var(--kopfhoehe)); overflow-y: auto;
  background: var(--papier); border-bottom: 1px solid var(--linie);
  padding: .5rem var(--rand) 2rem;
  transform: translateY(-115%); transition: transform .32s ease; visibility: hidden;
}
.klapp[data-offen] { transform: translateY(0); visibility: visible; }
.klapp a {
  display: block; padding: .85rem 0; border-bottom: 1px solid var(--linie);
  font-family: var(--display); font-size: 1.3rem; color: var(--tinte);
}
.klapp .knopf { display: inline-block; margin-top: 1.5rem; border-bottom: 0; font-family: var(--body); font-size: .74rem; }
/* Der Direkt-Block schliesst das Menü ab: Trennlinie und mehr Luft nach
   oben, damit die beiden Nummern nicht wie ein weiterer Menüpunkt unter
   dem goldenen Knopf hängen. */
.klapp .marke {
  display: block; margin-top: 2.4rem; padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
}
.klapp a:last-child { border-bottom: 0; }

/* Acht Menüpunkte + Telefonnummer + Knopf brauchen diese Breite. Darunter Brenner. */
@media (min-width: 1200px) {
  .kopf__nav { display: flex; }
  .kopf .kopf__tat { display: inline-flex; }
  .brenner, .klapp { display: none; }
}


/* ═══ HERO ═════════════════════════════════════════════════ */
.hero { position: relative; background: var(--tinte); overflow: hidden; }
.hero__bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* Der Verlauf sorgt dafür, dass der Text auf jedem Bild lesbar bleibt –
   auch wenn das Foto später gegen ein helleres getauscht wird. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(12,16,22,.86) 0%, rgba(12,16,22,.62) 46%, rgba(12,16,22,.30) 100%),
    linear-gradient(to top, rgba(12,16,22,.72) 0%, rgba(12,16,22,0) 55%);
}
.hero__innen {
  position: relative; z-index: 2;
  max-width: var(--breite); margin: 0 auto; padding: clamp(4.5rem, 14vh, 8rem) var(--rand);
  min-height: clamp(480px, 78vh, 720px); display: flex; flex-direction: column; justify-content: center;
}
.hero .marke { color: var(--gold); }
.hero h1 { color: var(--papier); max-width: 15ch; margin-top: 1.1rem; }
/* Das Goldwort laeuft im Satz mit, es steht nicht auf eigener Zeile. */
.hero h1 em { color: var(--gold); }
.hero__satz { color: #CFD5DE; font-size: clamp(1rem, 1.7vw, 1.16rem); max-width: 46ch; margin-top: 1.4rem; }
.hero__wege { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }

/* Kennzahlen unter dem Hero-Text */
.hero__fakten {
  display: flex; flex-wrap: wrap; gap: 1.6rem 3rem;
  margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: 1.8rem;
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero__fakten div { min-width: 0; }
.hero__fakten b { display: block; font-family: var(--display); font-weight: 500; font-size: 1.45rem; color: var(--papier); }
.hero__fakten span { font-size: .68rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: #98A2B1; }

/* ── Seitenkopf der Unterseiten ───────────────────────────── */
/* Seit dem 06.09.2026 liegt hinter dem Kopf ein Foto, auf
   Kundenwunsch. Drei Schichten, damit daraus Atmosphaere wird
   und nicht ein Foto mit Text darauf:

     1. das Bild, weich gezeichnet und entsaettigt
     2. ein Papier-Verlauf von links, wo die Schrift steht
     3. ein Auslauf nach unten in den Seitengrund

   Die Schrift bleibt Tinte auf Papier, dort wo sie steht ist das
   Bild fast ganz weggeblendet. Welches Bild eine Seite zeigt,
   steht in --kopfbild; die Modifikatoren weiter unten setzen es um.
   isolation: isolate haelt die beiden Schichten unter dem Text,
   ohne dass sie unter den eigenen Grund des Kopfes rutschen. */
/* Die Mindesthoehe ist der Grund, warum der Kopf auf allen zwoelf Seiten
   gleich gross wirkt. Ohne sie richtet sich die Hoehe nach der Textmenge,
   und die schwankte am 08.09.2026 zwischen 290 px (Impressum, eine Zeile,
   kein Anriss) und 599 px (Hypothek, langer Anriss) – beim Durchklicken
   springt der Inhalt darunter jedes Mal.

   Mindesthoehe, nicht feste Hoehe: bei 320 px Breite oder bei einer
   groesseren Schriftvorgabe des Nutzers waere eine feste Hoehe ein
   abgeschnittener Text. Der Inhalt liegt darum mittig und darf nach unten
   wachsen, wenn er muss. Damit er das im Betrieb nicht tut, sind die
   Anrisse auf zwei Zeilen gehalten. */
.seitenkopf {
  --kopfbild: url('../assets/kopf-kontakt-800.jpg');
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: 26rem;
  padding: clamp(3rem, 7vh, 4rem) 0;
  border-bottom: 1px solid var(--linie); background: var(--papier-tief);
}

/* Schicht 1: das Foto. Entsaettigt und warm getont, weil ein volles
   Farbfoto kalt gegen das Elfenbein steht. So liest es sich als
   Struktur des Papiers und nicht als zweites Bild. */
.seitenkopf::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--kopfbild);
  background-size: cover; background-position: center 45%;
  filter: grayscale(.30) sepia(.10) contrast(1.30) brightness(.92);
  opacity: .90;
}

/* Schicht 2 und 3: Papier von links her ueber das Bild, dazu ein
   Auslauf nach unten. Ohne den zweiten Verlauf endet das Band an
   der Trennlinie hart, und der Kopf steht wie ein Fremdkoerper
   ueber dem ersten Abschnitt.

   Der Knick liegt bei 47 % und nicht mehr bei 64 %, und danach faellt
   das Papier steil ab. Moeglich wird das nur, weil die Textspalte
   zugleich schmaler wurde (h1 14ch, Anriss 40ch): das Papier darf
   genau dort aufreissen, wo keine Schrift mehr steht. Wer den Knick
   nach links zieht, ohne die Spalte zu verengen, verliert sofort den
   Kontrast – gemessen 3.76 und 3.28 gegen die Norm 4.5. */
.seitenkopf::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      rgb(var(--papier-tief-rgb)) 0%,
      rgba(var(--papier-tief-rgb), .972) 47%,
      rgba(var(--papier-tief-rgb), .88) 61%,
      rgba(var(--papier-tief-rgb), .30) 83%,
      rgba(var(--papier-tief-rgb), 0) 100%),
    linear-gradient(to bottom,
      rgba(var(--papier-tief-rgb), .38) 0%,
      rgba(var(--papier-tief-rgb), 0) 42%,
      rgba(var(--papier-tief-rgb), .60) 100%);
}

/* Am Handy steht die Schrift ueber der ganzen Breite, ein Verlauf
   von links traegt sie dort nicht. Waagrecht ist nichts zu holen: die
   Zeilen laufen von 5 % bis 94 %. Senkrecht schon – oben liegen rund
   13 % und unten rund 12 % des Bandes leer. Darum kein flaechiges
   Aufhellen mehr, sondern ein Fenster: dicht durch das Schriftband,
   offen an den beiden Raendern. Das macht das Bild sichtbarer und
   den Text zugleich lesbarer als die flaechige Fassung. */
@media (max-width: 720px) {
  .seitenkopf::before { opacity: .50; }
  .seitenkopf::after {
    background:
      linear-gradient(to bottom,
        rgba(var(--papier-tief-rgb), .66) 0%,
        rgba(var(--papier-tief-rgb), .918) 15%,
        rgba(var(--papier-tief-rgb), .918) 85%,
        rgba(var(--papier-tief-rgb), .64) 100%);
  }
}

/* Erst die kleinen Fassungen, danach die grossen in der
   Medienabfrage. Die Reihenfolge ist Pflicht: eine Medienabfrage
   erhoeht die Spezifitaet nicht. Stuenden die 800er Zeilen weiter
   unten, wuerden sie den Desktop-Block ueberstimmen, und jeder
   grosse Schirm bekaeme das kleine, unscharfe Bild. Genau so war
   es am 06.09.2026 zuerst gebaut und in der Messung aufgefallen. */
.seitenkopf--bewertung        { --kopfbild: url('../assets/kopf-bewertung-800.jpg'); }
.seitenkopf--datenschutz      { --kopfbild: url('../assets/kopf-datenschutz-800.jpg'); }
.seitenkopf--dienstleistungen { --kopfbild: url('../assets/kopf-dienstleistungen-800.jpg'); }
.seitenkopf--hypothek         { --kopfbild: url('../assets/kopf-hypothek-800.jpg'); }
.seitenkopf--impressum        { --kopfbild: url('../assets/kopf-impressum-800.jpg'); }
.seitenkopf--investoren       { --kopfbild: url('../assets/kopf-investoren-800.jpg'); }
.seitenkopf--kontakt          { --kopfbild: url('../assets/kopf-kontakt-800.jpg'); }
.seitenkopf--objekte          { --kopfbild: url('../assets/kopf-objekte-800.jpg'); }
.seitenkopf--referenzen       { --kopfbild: url('../assets/kopf-referenzen-800.jpg'); }
.seitenkopf--tippgeber        { --kopfbild: url('../assets/kopf-tippgeber-800.jpg'); }
.seitenkopf--ueber-uns        { --kopfbild: url('../assets/kopf-ueber-uns-800.jpg'); }
.seitenkopf--verwaltung       { --kopfbild: url('../assets/kopf-verwaltung-800.jpg'); }

/* Ab 721 px die grosse Fassung. Darunter bleibt es bei der 800er
   Datei: sie wiegt ein Drittel, und hinter dem Schleier ist der
   Unterschied nicht zu sehen. */
@media (min-width: 721px) {
  .seitenkopf { min-height: 31rem; }
  .seitenkopf                     { --kopfbild: url('../assets/kopf-kontakt.jpg'); }
  .seitenkopf--bewertung        { --kopfbild: url('../assets/kopf-bewertung.jpg'); }
  .seitenkopf--datenschutz      { --kopfbild: url('../assets/kopf-datenschutz.jpg'); }
  .seitenkopf--dienstleistungen { --kopfbild: url('../assets/kopf-dienstleistungen.jpg'); }
  .seitenkopf--hypothek         { --kopfbild: url('../assets/kopf-hypothek.jpg'); }
  .seitenkopf--impressum        { --kopfbild: url('../assets/kopf-impressum.jpg'); }
  .seitenkopf--investoren       { --kopfbild: url('../assets/kopf-investoren.jpg'); }
  .seitenkopf--kontakt          { --kopfbild: url('../assets/kopf-kontakt.jpg'); }
  .seitenkopf--objekte          { --kopfbild: url('../assets/kopf-objekte.jpg'); }
  .seitenkopf--referenzen       { --kopfbild: url('../assets/kopf-referenzen.jpg'); }
  .seitenkopf--tippgeber        { --kopfbild: url('../assets/kopf-tippgeber.jpg'); }
  .seitenkopf--ueber-uns        { --kopfbild: url('../assets/kopf-ueber-uns.jpg'); }
  .seitenkopf--verwaltung       { --kopfbild: url('../assets/kopf-verwaltung.jpg'); }
}

/* Wer Bewegungsarmut eingestellt hat, bekommt trotzdem das Bild -
   es bewegt sich nichts. Wer aber Kontrast erhoeht braucht, bekommt
   den ruhigen Grund von frueher zurueck. */
@media (prefers-contrast: more) {
  .seitenkopf::before, .seitenkopf::after { display: none; }
}

.seitenkopf .bahn { position: relative; z-index: 1; width: 100%; }

/* Nur die Hypothek-Seite hat Knoepfe im Kopf. Sie duerfen ihn nicht
   sprengen: enger angesetzt als im Hero, und am Handy bleiben sie
   nebeneinander statt gestapelt und ueber die volle Breite – gestapelt
   waere der Kopf dort 110 px hoeher als jeder andere. */
.seitenkopf .hero__wege { margin-top: 1.5rem; }
@media (max-width: 720px) {
  .seitenkopf .hero__wege { flex-direction: row; flex-wrap: nowrap; gap: .5rem; }
  .seitenkopf .hero__wege .knopf {
    width: auto; flex: 1 1 0; min-width: 0; text-align: center;
    padding-left: .7rem; padding-right: .7rem; font-size: .8rem;
    line-height: 1.25;
  }
}

/* Die schmale Spalte ist keine Typografie-Laune, sie ist die
   Voraussetzung fuer das sichtbare Bild oben. Wer sie wieder
   verbreitert, muss den Verlauf zurueckdrehen. Einzelne lange Woerter
   im h1 brauchen dann ein &shy; im HTML, sonst bricht der Browser
   mitten im Wort ab. */
.seitenkopf h1 { max-width: 14ch; }
.seitenkopf .anriss { max-width: 40ch; }
.seitenkopf .marke { display: block; margin-bottom: .9rem; }
.seitenkopf .anriss { margin-top: 1.3rem; }

/* ═══ KNÖPFE ═══════════════════════════════════════════════ */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--body); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; text-align: center;
  background: var(--tinte); color: var(--papier); border: 1px solid var(--tinte);
  padding: 1.05rem 2.2rem; border-radius: var(--r); cursor: pointer;
  justify-self: start; transition: background .2s, color .2s, border-color .2s;
}
.knopf:hover { background: transparent; color: var(--tinte); }

.knopf--gold { background: var(--gold); border-color: var(--gold); color: var(--tinte); }
.knopf--gold:hover { background: transparent; color: var(--gold); border-color: var(--gold); }

/* Auf Bild und dunklem Grund */
.knopf--klar { background: transparent; border-color: rgba(255,255,255,.45); color: var(--papier); }
.knopf--klar:hover { background: var(--papier); border-color: var(--papier); color: var(--tinte); }

.feld--dunkel .knopf { background: var(--gold); color: var(--tinte); border-color: var(--gold); }
.feld--dunkel .knopf:hover { background: transparent; color: var(--gold); }

.pfeil {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinte); padding-bottom: .5rem; border-bottom: 1px solid var(--gold-tief);
  transition: gap .22s, color .22s, border-color .22s;
}
.pfeil::after { content: '→'; color: var(--gold-tief); transition: transform .22s; }
.pfeil:hover { color: var(--gold-tief); }
.pfeil:hover::after { transform: translateX(4px); }
.pfeil--still { border-bottom-color: var(--linie); }
.pfeil--still:hover { border-bottom-color: var(--gold-tief); }

/* ═══ KARTEN – Dienstleistungen ════════════════════════════ */
.karten { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 720px) { .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .karten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.karte {
  display: flex; flex-direction: column; gap: .75rem; min-width: 0;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r);
  padding: clamp(1.7rem, 3.2vw, 2.4rem);
  box-shadow: var(--schatten);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
a.karte:hover, .karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); border-color: var(--papier-warm); }
.karte__nr {
  font-family: var(--display); font-size: 1rem; color: var(--gold-tief);
  padding-bottom: .9rem; border-bottom: 1px solid var(--linie); margin-bottom: .3rem;
}
.karte h3 { color: var(--tinte); }
.karte p { font-size: .95rem; flex: 1; overflow-wrap: break-word; }
.karte .pfeil { align-self: flex-start; margin-top: .7rem; }

.feld--dunkel .karte { background: var(--tinte-2); border-color: var(--linie-dunkel); box-shadow: none; }
.feld--dunkel .karte:hover { border-color: #3A4353; }
.feld--dunkel .karte h3 { color: var(--papier); }
.feld--dunkel .karte p { color: #A4ADBB; }
.feld--dunkel .karte__nr { color: var(--gold); border-bottom-color: var(--linie-dunkel); }

/* ═══ GRÜNDE – ohne Kasten, nur Goldlinie ══════════════════ */
.gruende { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; }
/* Vier Gruende stehen als 2x2 ruhiger als vier schmale Spalten nebeneinander. */
@media (min-width: 720px) { .gruende { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .gruende--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grund { min-width: 0; padding-top: 1.4rem; border-top: 2px solid var(--gold-tief); }
.grund h3 { color: var(--tinte); margin-bottom: .6rem; }
.grund p { font-size: .95rem; }
.feld--dunkel .grund { border-top-color: var(--gold); }
.feld--dunkel .grund h3 { color: var(--papier); }

/* ═══ ABLAUF – nummerierte Schritte ════════════════════════ */
.schritte { display: grid; gap: 0; grid-template-columns: 1fr; }
.schritt { position: relative; padding: 0 0 2.2rem 3.6rem; min-width: 0; }
.schritt:last-child { padding-bottom: 0; }
/* Senkrechte Linie zwischen den Nummern */
.schritt::before {
  content: ''; position: absolute; left: 17px; top: 36px; bottom: 0; width: 1px; background: var(--linie);
}
.schritt:last-child::before { display: none; }
.schritt__nr {
  position: absolute; left: 0; top: 0;
  width: 35px; height: 35px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-size: .95rem; color: var(--gold-tief);
  background: var(--papier); border: 1px solid var(--linie);
}
.feld--sand .schritt__nr { background: var(--papier-tief); }
.schritt h3 { font-size: 1.15rem; color: var(--tinte); margin-bottom: .35rem; }
.schritt p { font-size: .93rem; }

@media (min-width: 940px) {
  .schritte { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
  .schritt { padding: 3.4rem 0 0; }
  .schritt::before { left: 35px; right: -1.5rem; top: 17px; bottom: auto; width: auto; height: 1px; }
  .schritt:last-child { padding-bottom: 0; }
  .schritt__nr { top: 0; }
}
.feld--dunkel .schritt::before { background: var(--linie-dunkel); }
.feld--dunkel .schritt__nr { background: var(--tinte); border-color: var(--linie-dunkel); color: var(--gold); }
.feld--dunkel .schritt h3 { color: var(--papier); }


/* Ein Ablauf und sein Knopf gehoeren zusammen – der Knopf steht mittig
   unter den Schritten, nicht am linken Rand wie sonst. */
.ablauf__weg { text-align: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.ablauf__weg .knopf { justify-self: center; }

/* Sprungmarken: die Kopfzeile klebt oben und wuerde den Abschnittsanfang
   sonst verdecken. */
.feld[id], .band[id] { scroll-margin-top: 5.5rem; }

/* Steht die Kopfzeile allein im Feld, braucht sie unten keinen Abstand –
   sonst addiert sich ihr Rand auf die Feldpolsterung. */
.feld--eng .kopfzeile:only-child { margin-bottom: 0; }

/* ═══ DIENSTLEISTUNG – alles zu einer Leistung in EINEM Feld ═══════
   Die Kundenreferenz (eicheimmobilien.ch) zeigt jede Dienstleistung
   zweimal: oben als Karte mit Beschreibungstext, weiter unten nochmals
   mit demselben Text, dazu erst Merkmale und Prozess. Auf Wunsch des
   Kunden ist das hier zusammengefuehrt – Titel, Untertitel, Text,
   Merkmale, Prozess und Knopf bilden ein einziges Feld. Getrennt wird
   ueber den Grund (Papier / Sand / Dunkel), nicht ueber Wiederholung. */
.dienst__kopf { max-width: 60rem; }
.dienst__kopf .marke { display: block; margin-bottom: .9rem; }
.dienst__kopf .anriss { margin-top: 1.3rem; }

/* Der Untertitel ist die Kurzfassung der Leistung – im Display-Schnitt,
   damit er zur Ueberschrift gehoert und nicht zum Fliesstext. */
.unterzeile {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.05rem, 2.1vw, 1.3rem); color: var(--gold-tief);
  margin-top: .55rem;
}
.feld--dunkel .unterzeile { color: var(--gold); }

/* Merkmale – vom Kunden «Tags» genannt. In der Referenz gruene Pillen mit
   Haken-Icon; hier duenner Goldrand ohne Icon, damit sie zur Papier-Optik
   passen statt zur Referenz. */
.merkmale { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.9rem; }
.merkmale li {
  font-size: .82rem; color: var(--tinte-weich);
  border: 1px solid var(--linie); border-radius: 999px;
  padding: .52rem 1.05rem; background: var(--karte);
}
.feld--dunkel .merkmale li { border-color: var(--linie-dunkel); background: var(--tinte-2); color: #A4ADBB; }

/* Der Prozess haengt am selben Feld – die Linie zeigt, dass er dazugehoert.
   Ein eigener Abschnitt wuerde die Leistung wieder auseinanderreissen. */
.ablauf {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--linie);
}
.feld--dunkel .ablauf { border-top-color: var(--linie-dunkel); }
.ablauf__kopf { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.ablauf__kopf h3 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); color: var(--tinte); }
.ablauf__kopf p { margin-top: .5rem; }
.feld--dunkel .ablauf__kopf h3 { color: var(--papier); }

/* Die Schritte sind hier einzeilig – sie brauchen keine Kreise wie auf der
   Bewertungsseite. Zwei Spalten, spaltenweise gefuellt: bei acht Schritten
   liest man 1–4 links und 5–8 rechts, nicht im Zickzack. */
.prozess { list-style: none; counter-reset: prozess; }
@media (min-width: 780px) { .prozess { columns: 2; column-gap: clamp(2.2rem, 4vw, 3.5rem); } }
.prozess li {
  counter-increment: prozess; break-inside: avoid;
  display: flex; gap: 1rem; align-items: baseline;
  padding: .9rem 0; border-bottom: 1px solid var(--linie);
  font-size: .97rem; color: var(--tinte-weich);
}
.prozess li::before {
  content: counter(prozess, decimal-leading-zero);
  font-family: var(--display); font-size: .92rem; color: var(--gold-tief);
  flex-shrink: 0; width: 1.9rem;
}
.feld--dunkel .prozess li { border-bottom-color: var(--linie-dunkel); color: #A4ADBB; }
.feld--dunkel .prozess li::before { color: var(--gold); }

/* ═══ ÜBER-UNS-BLOCK auf der Startseite ════════════════════ */
.vorstellung { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .vorstellung { grid-template-columns: 1.1fr 1fr; } }
.vorstellung__bild { position: relative; }
.vorstellung__bild img {
  width: 100%; max-width: 460px; aspect-ratio: 4 / 5; height: auto;
  object-fit: cover; object-position: center 15%;
  border: 1px solid var(--linie); border-radius: var(--r);
}
@media (min-width: 900px) { .vorstellung__bild img { max-width: none; } }

/* ═══ SOCIAL PROOF ═════════════════════════════════════════ */
.stimmen { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 780px) { .stimmen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .stimmen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stimme {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r);
  padding: clamp(1.6rem, 3vw, 2.1rem); display: flex; flex-direction: column; gap: 1rem; min-width: 0;
}
.stimme p { font-size: .95rem; flex: 1; }
.stimme footer { display: flex; align-items: center; gap: .8rem; }
.stimme__kuerzel {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--papier-warm);
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: var(--gold-tief);
}
.stimme__wer b { display: block; font-weight: 600; font-size: .9rem; color: var(--tinte); }
.stimme__wer span { font-size: .76rem; color: var(--tinte-weich); }

/* Partner- und Plattform-Logos */
.partner {
  display: grid; gap: 1px; background: var(--linie);
  border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .partner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .partner { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.partner > * {
  background: var(--karte); min-height: 92px; display: grid; place-items: center;
  padding: 1.2rem; min-width: 0;
}
.partner img { max-height: 34px; width: auto; opacity: .75; transition: opacity .2s; }
.partner a:hover img { opacity: 1; }

/* ═══ GERÜST – Abschnitte, die noch Inhalt brauchen ════════ */
/* Bewusst als ruhige, gestaltete Fläche und nicht als Fehler.
   Sichtbar genug, dass der Kunde weiss, was noch fehlt. */
.geruest {
  border: 1px dashed var(--linie); border-radius: var(--r);
  background: repeating-linear-gradient(-45deg, transparent, transparent 9px, rgba(140,109,51,.035) 9px, rgba(140,109,51,.035) 18px);
  padding: clamp(2.4rem, 6vw, 4rem) clamp(1.4rem, 4vw, 3rem);
  text-align: center;
}
.geruest .marke { display: block; margin-bottom: .9rem; }
.geruest h3 { color: var(--tinte); margin-bottom: .7rem; }
.geruest p { font-size: .95rem; max-width: 52ch; margin: 0 auto; }
.geruest .pfeil { margin-top: 1.4rem; }
.feld--dunkel .geruest { border-color: var(--linie-dunkel); background: rgba(200,169,106,.04); }
.feld--dunkel .geruest h3 { color: var(--papier); }

/* ═══ CTA-BAND ═════════════════════════════════════════════ */
.band { background: var(--tinte); color: var(--papier); padding: clamp(3.5rem, 9vh, 6rem) 0; }
.band__innen { max-width: 46rem; margin: 0 auto; text-align: center; }
.band .marke { display: block; color: var(--gold); margin-bottom: 1rem; }
.band h2 { color: var(--papier); }
.band p { color: #A4ADBB; margin-top: 1rem; font-size: 1.05rem; }
.band__wege { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2.2rem; }
.band__wege .knopf { justify-self: center; }

/* ═══ EINGEBETTETES TOOL ═══════════════════════════════════ */
.tool { border: 1px solid var(--linie); border-radius: var(--r); background: var(--papier); margin-bottom: 2.5rem; overflow: hidden; }
.tool__kopf {
  padding: 1.4rem clamp(1.3rem, 3vw, 2rem); border-bottom: 1px solid var(--linie);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; flex-wrap: wrap;
}
.tool__kopf h2 { font-size: clamp(1.45rem, 2.8vw, 1.95rem); }
.tool__kopf p { font-size: .89rem; margin-top: .3rem; }
.rahmen { width: 100%; border: 0; display: block; min-height: 460px; background: var(--papier); }
/* Auf dem Handy sind die kurzen Schritte des Tools (Erfolgsschirm,
   Danke-Text) deutlich niedriger als 460 px. Die Untergrenze stand
   dort als leere weisse Fläche unter dem Inhalt. Gleicher Wert wie
   mindestHoehe() in js/embed.js. */
@media (max-width: 639px) {
  .rahmen { min-height: 300px; }
}

/* Die Tools des Kunden sind dunkel gestaltet – deshalb stehen sie in
   dunklen Bändern. So bleibt seine Gestaltung unangetastet. */
.feld--dunkel .tool { border-color: var(--linie-dunkel); background: var(--tinte-2); }
.feld--dunkel .tool__kopf { border-bottom-color: var(--linie-dunkel); }
.feld--dunkel .tool__kopf h2 { color: var(--papier); }
.feld--dunkel .tool__kopf p { color: #A4ADBB; }
.feld--dunkel .rahmen { background: #0C111A; }

/* ═══ ZITAT ════════════════════════════════════════════════ */
.zitat { border-left: 2px solid var(--gold-tief); padding: .3rem 0 .3rem 1.6rem; margin: 2.2rem 0 0; }
.zitat p { font-family: var(--display); font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-style: italic; color: var(--tinte); line-height: 1.36; }
.zitat footer { margin-top: .8rem; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-weich); }
.feld--dunkel .zitat { border-left-color: var(--gold); }
.feld--dunkel .zitat p { color: var(--papier); }
.feld--dunkel .zitat footer { color: #7C8698; }

/* ═══ PERSONEN ═════════════════════════════════════════════ */
.leute { display: grid; gap: clamp(2rem, 4.5vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 780px) { .leute { grid-template-columns: 1fr 1fr; } }

/* Das Porträt stand bis 04.09.2026 über dem Namen und lief dabei über
   die ganze Kartenbreite: auf einem Laptop waren das zwei Gesichter in
   halber Lebensgrösse, und mehr Bild als Inhalt. Jetzt steht es als
   schmale Spalte neben dem Text. Die Karte liest sich damit in einer
   Zeile, Name und Nummer stehen auf Augenhöhe mit dem Kopf.
   Hochformat 4:5 bleibt, mit fester Höhe fiel der Kopf aus dem
   Ausschnitt. */
.person { display: grid; gap: clamp(1.1rem, 2.6vw, 1.6rem); grid-template-columns: minmax(0, 108px) minmax(0, 1fr); align-items: start; }
.person__text { min-width: 0; }
.person img {
  width: 100%; aspect-ratio: 4 / 5; height: auto;
  object-fit: cover; object-position: center 12%;
  border: 1px solid var(--linie); border-radius: var(--r);
}
@media (min-width: 520px) { .person { grid-template-columns: minmax(0, 132px) minmax(0, 1fr); } }
@media (min-width: 780px) { .person { grid-template-columns: minmax(0, 118px) minmax(0, 1fr); } }
@media (min-width: 1040px) { .person { grid-template-columns: minmax(0, 146px) minmax(0, 1fr); } }
.person h3 { font-size: clamp(1.2rem, 2.2vw, 1.42rem); font-weight: 500; letter-spacing: -.01em; }
.person__rolle { margin: .3rem 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linie); }
/* Telefon und Mail untereinander statt mit Mittepunkt in einer Zeile:
   auf dem Handy brach die Zeile sonst mitten in der Adresse um. */
.person__ruf { margin-top: 1.2rem; font-size: .9rem; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.person__ruf a { color: var(--tinte); border-bottom: 1px solid var(--linie); overflow-wrap: anywhere; }
.person__ruf a:hover { border-bottom-color: var(--gold-tief); }

/* ═══ BILDSTREIFEN ═════════════════════════════════════════ */
.streifen img { width: 100%; height: clamp(220px, 42vw, 460px); object-fit: cover; border: 1px solid var(--linie); border-radius: var(--r); }
.streifen figcaption { margin-top: .75rem; font-size: .78rem; color: var(--tinte-weich); }

/* ═══ AUSSAGE-BAND ═════════════════════════════════════════ */
/* Die Marken-Tafel mit beiden Porträts stand hier zweimal zur
   Diskussion. Zuletzt am 04.09.2026: sie füllte auf der Über-uns-Seite
   fast einen ganzen Bildschirm mit zwei überlebensgrossen Gesichtern.
   Der Kunde will die kleine Fassung, also stehen die Porträts wieder
   in den Gründerkarten und hier bleibt der Satz auf dunklem Grund.
   Als Bilddatei für LinkedIn und Offerten liegt die grosse Tafel
   weiterhin unter assets/team-tafel.jpg. */
.aussage {
  background: var(--tinte); border-radius: var(--r);
  padding: clamp(2.2rem, 6vw, 4rem) clamp(1.8rem, 5vw, 3.6rem);
  display: grid; gap: clamp(1.7rem, 4vw, 3.6rem); grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .aussage { grid-template-columns: 1.2fr 1fr; align-items: end; }
}
.aussage__links img { height: clamp(38px, 5.4vw, 54px); width: auto; margin-bottom: clamp(1.5rem, 4vw, 2.4rem); }
.aussage h2 {
  color: var(--papier); font-size: clamp(1.55rem, 4.4vw, 2.6rem);
  line-height: 1.12; letter-spacing: -.015em; text-wrap: balance;
}
.aussage h2 em { color: var(--gold); display: block; font-style: normal; }
.aussage .strich { border-color: var(--gold); width: 54px; margin-bottom: clamp(1.2rem, 3vw, 1.7rem); }
.aussage p { color: #A4ADBB; font-size: .95rem; line-height: 1.8; max-width: 36ch; }
.aussage .marke { display: block; margin-top: clamp(1.4rem, 3.5vw, 2.2rem); color: #7C8698; }

/* ═══ DATENZEILEN ══════════════════════════════════════════ */
.daten { display: grid; gap: 1.7rem 2rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.daten dt { font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tinte-weich); margin-bottom: .45rem; }
.daten dd { font-size: .97rem; color: var(--tinte); }
.daten dd a:hover { color: var(--gold-tief); }

/* ═══ FORMULAR ═════════════════════════════════════════════ */
.form { display: grid; gap: 1.3rem; }
.form__paar { display: grid; gap: 1.3rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .form__paar { grid-template-columns: 1fr 1fr; } }
.feldchen { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.feldchen label { font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tinte-weich); }
.feldchen input, .feldchen select, .feldchen textarea {
  font-family: var(--body); font-size: .97rem; color: var(--tinte);
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r);
  padding: .85rem 1rem; width: 100%; transition: border-color .2s, box-shadow .2s;
}
.feldchen input::placeholder, .feldchen textarea::placeholder { color: #A39B8B; }
.feldchen input:focus, .feldchen select:focus, .feldchen textarea:focus {
  outline: none; border-color: var(--gold-tief); box-shadow: 0 0 0 3px rgba(140,109,51,.11);
}
.feldchen textarea { resize: vertical; min-height: 128px; }
.haken { display: flex; gap: .75rem; align-items: flex-start; font-size: .85rem; color: var(--tinte-weich); }
.haken input { width: 16px; height: 16px; margin-top: .35rem; flex-shrink: 0; accent-color: var(--gold-tief); }
.haken a { color: var(--tinte); border-bottom: 1px solid var(--gold-tief); }
.fussnote { font-size: .78rem; color: #8B8577; }

/* Feldfehler – gesetzt von js/formular.js.
   Die Meldung steht unter dem Feld und bleibt stehen, bis die
   Eingabe stimmt. Farbe allein trägt die Information nicht: der
   Rahmen wird dicker und die Meldung ist Text. Wer Rot nicht
   unterscheiden kann, sieht trotzdem, welches Feld gemeint ist. */
.feld-fehler {
  margin: 0; font-size: .82rem; line-height: 1.45; color: var(--terra-tief);
}
.feldchen.ist-fehler input,
.feldchen.ist-fehler select,
.feldchen.ist-fehler textarea {
  border-color: var(--terra-tief);
  box-shadow: 0 0 0 3px rgba(150, 65, 47, .10);
}
.haken.ist-fehler { color: var(--terra-tief); }
.haken.ist-fehler input { outline: 2px solid var(--terra-tief); outline-offset: 2px; }
/* Im Häkchen-Block liegt die Meldung neben dem Kästchen; damit sie
   unter dem Text steht und nicht daneben, bricht die Zeile um.
   Der Text daneben braucht dafür flex: 1 1 0 – ohne das rechnet der
   Browser mit seiner vollen intrinsischen Breite, findet keinen Platz
   neben dem Kästchen und schiebt ihn ebenfalls in die nächste Zeile. */
.haken.ist-fehler { flex-wrap: wrap; }
.haken.ist-fehler > span { flex: 1 1 0; min-width: 0; }
.haken .feld-fehler { flex-basis: 100%; margin-left: calc(16px + .75rem); }

.feld--dunkel .feld-fehler { color: #E0947F; }
.feld--dunkel .feldchen.ist-fehler input,
.feld--dunkel .feldchen.ist-fehler select,
.feld--dunkel .feldchen.ist-fehler textarea { border-color: #E0947F; }

/* Gesperrter Absendeknopf während des Sendens */
.knopf[disabled] { opacity: .55; cursor: default; }
.knopf[disabled]:hover { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.knopf--gold[disabled]:hover { background: var(--gold); color: var(--tinte); border-color: var(--gold); }

.feld--dunkel .feldchen label { color: #7C8698; }
.feld--dunkel .feldchen input, .feld--dunkel .feldchen select, .feld--dunkel .feldchen textarea {
  background: var(--tinte-2); border-color: var(--linie-dunkel); color: var(--papier);
}
.feld--dunkel .feldchen input::placeholder, .feld--dunkel .feldchen textarea::placeholder { color: #5D6675; }
.feld--dunkel .feldchen input:focus, .feld--dunkel .feldchen select:focus, .feld--dunkel .feldchen textarea:focus {
  border-color: var(--gold); box-shadow: none;
}
.feld--dunkel .haken { color: #A4ADBB; }
.feld--dunkel .haken a { color: var(--papier); border-bottom-color: var(--gold); }
.feld--dunkel .haken input { accent-color: var(--gold); }
.feld--dunkel .fussnote { color: #6E7788; }

/* ═══ LEERER ZUSTAND ═══════════════════════════════════════ */
.leer { border: 1px solid var(--linie); border-radius: var(--r); background: var(--papier-tief); padding: clamp(2.5rem, 7vw, 4rem) clamp(1.4rem, 4vw, 2.8rem); }
.leer h2 { margin-bottom: .9rem; }
.feld--sand .leer { background: var(--papier); }

/* ═══ AUFZÄHLUNG MIT RAUTE ═════════════════════════════════ */
.rauten { list-style: none; display: grid; gap: .85rem; }
.rauten li { display: flex; gap: .85rem; align-items: flex-start; font-size: .96rem; color: var(--tinte-weich); }
.rauten li::before { content: ''; flex-shrink: 0; width: 5px; height: 5px; margin-top: .68rem; background: var(--gold-tief); transform: rotate(45deg); }
/* Achtung beim Schreiben: Der Listentext muss ein einziges Element sein.
   Ein <strong> mitten im Listenpunkt wird zu einem eigenen Flex-Kind –
   dann stehen Auszeichnung und Resttext nebeneinander statt im Fluss und
   sprengen auf schmalen Bildschirmen die Spalte. Deshalb den ganzen
   Punkt in ein <span> fassen, sobald er Auszeichnungen enthaelt. */
.rauten li > span { min-width: 0; overflow-wrap: break-word; }
.feld--dunkel .rauten li::before { background: var(--gold); }

/* ═══ FUSS ═════════════════════════════════════════════════ */
.fuss { background: var(--tinte); color: #A4ADBB; }
.fuss a { transition: color .2s; }
.fuss a:hover { color: var(--papier); }

/* Marktbrief – eigenes Band über dem Fuss.
   Es sitzt auf der etwas helleren Tinte-2 und trägt oben eine
   Goldlinie: der Fuss beginnt damit mit einer Handlung, nicht
   mit einer Linkliste. */
.brief-band {
  background: var(--tinte-2);
  border-top: 1px solid rgba(200, 169, 106, .45);
  border-bottom: 1px solid var(--linie-dunkel);
  padding: clamp(2.2rem, 5vw, 3.2rem) 0;
}
.brief-band__inhalt {
  display: grid; gap: 1.8rem; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .brief-band__inhalt { grid-template-columns: 1.35fr 1fr; gap: 3.5rem; }
}
.fuss .brief-band .marke { color: var(--gold); display: block; margin-bottom: .7rem; }
.fuss .brief-band h2 {
  /* .fuss h2 macht aus Überschriften gesperrte Versalien in Gold –
     das ist die Spaltenbeschriftung des Fusses. Hier steht ein Satz,
     kein Spaltenkopf: Auszeichnung zurücknehmen. */
  font-family: var(--display); text-transform: none; letter-spacing: -.01em;
  border-bottom: 0; padding-bottom: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 500;
  color: var(--papier); line-height: 1.25; margin-bottom: .55rem;
  max-width: 26ch; text-wrap: balance;
}
.fuss .brief-band p { color: #8791A1; font-size: .92rem; max-width: 46ch; }

.brief { display: flex; gap: .5rem; margin: 0; flex-wrap: wrap; }
.brief input {
  flex: 1 1 180px; min-width: 0;
  font-family: var(--body); font-size: .92rem; color: var(--papier);
  background: var(--tinte); border: 1px solid var(--linie-dunkel); border-radius: var(--r);
  padding: .95rem 1.1rem; transition: border-color .2s, box-shadow .2s;
}
.brief input::placeholder { color: #5D6675; }
.brief input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 169, 106, .14);
}
.brief button {
  font-family: var(--body); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  background: var(--gold); color: var(--tinte); border: 1px solid var(--gold); border-radius: var(--r);
  padding: .95rem 1.7rem; cursor: pointer; transition: background .2s, color .2s;
}
.brief button:hover { background: transparent; color: var(--gold); }

/* Spalten: Marke, Seiten, Kontakt.
   Vorher waren es vier – die vierte war der Newsletter, der dort
   zu wenig Platz hatte. Drei Spalten atmen und lassen den Text
   unter dem Logo in einer lesbaren Zeilenlänge stehen. */
.fuss__raster {
  display: grid; gap: 2.6rem; grid-template-columns: 1fr;
  padding: clamp(2.6rem, 6vh, 4rem) 0 0;
}
@media (min-width: 700px) { .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .fuss__raster { grid-template-columns: 1.45fr 1.35fr 1.1fr; gap: 3.4rem; } }
.fuss__raster > div { min-width: 0; }
.fuss img { height: 32px; width: auto; margin-bottom: 1.2rem; }
.fuss p { color: #8791A1; font-size: .93rem; line-height: 1.75; max-width: 38ch; }
.fuss h2 {
  font-family: var(--body); font-size: .66rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1.15rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--linie-dunkel);
}
.fuss ul { list-style: none; display: grid; gap: .15rem; font-size: .92rem; }
.fuss li { padding: .2rem 0; overflow-wrap: break-word; }

/* Seitenliste: zweispaltig, sonst steht im Fuss eine Spalte, die
   doppelt so hoch ist wie die beiden daneben. Ein Goldstrich wandert
   beim Überfahren mit. */
/* Spaltenweise gefüllt, nicht zeilenweise: eine Seitenliste liest
   man von oben nach unten. Bei zeilenweiser Füllung stünde neben
   «Home» der zweite Menüpunkt statt der fünfte. */
.fuss__liste {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column; column-gap: 1.4rem;
}
@media (max-width: 460px) {
  .fuss__liste { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}
.fuss__liste a { position: relative; padding-left: 0; transition: color .2s, padding-left .2s; }
.fuss__liste a::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 0; height: 1px; background: var(--gold);
  transition: width .22s; transform: translateY(-50%);
}
@media (hover: hover) {
  .fuss__liste a:hover { padding-left: 1.1rem; }
  .fuss__liste a:hover::before { width: .7rem; }
}

.fuss__adresse {
  font-style: normal; font-size: .92rem; line-height: 1.85;
  color: #8791A1; margin-bottom: 1.1rem;
}
/* Telefon und Mail sind die zwei Wege, die vom Fuss aus genutzt
   werden – sie stehen darum in Papierweiss, nicht im Grau der Liste. */
.fuss__ruf {
  display: block; font-size: .97rem; color: var(--papier);
  padding: .18rem 0; overflow-wrap: anywhere;
}
.fuss__ruf:hover { color: var(--gold); }
/* LinkedIn steht als Symbol im Fuss. Ein Icon ohne Rahmen sieht auf
   dunklem Grund nach Dekoration aus und wird nicht angeklickt, darum
   der quadratische Rahmen: er macht daraus sichtbar eine Schaltflaeche. */
/* Der Abstand nach oben sitzt am Behaelter, nicht an den Icons –
   sonst schiebt jedes weitere Icon die Reihe erneut nach unten,
   sobald sie auf dem Handy umbricht. */
.fuss__sozialen { display: flex; gap: .5rem; margin-top: 1.1rem; }
.fuss__sozial {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: #8791A1; border: 1px solid var(--linie-dunkel); border-radius: var(--r);
  transition: color .2s, border-color .2s, background-color .2s;
}
.fuss__sozial svg { display: block; }
.fuss__sozial:hover { color: var(--tinte); background: var(--gold); border-color: var(--gold); }

.fuss__schluss {
  margin-top: clamp(2.6rem, 5vh, 3.4rem); padding: 1.4rem 0 1.8rem;
  border-top: 1px solid var(--linie-dunkel);
  display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; justify-content: space-between;
  font-size: .76rem; color: #6E7788;
}
.fuss__recht { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
/* Der Widerruf der Cookie-Zustimmung ist ein <button>, kein Link – er
   fuehrt nirgendwohin, sondern oeffnet das Banner erneut. Damit er in
   der Zeile nicht auffaellt, werden die Browser-Knopfstile abgeraeumt. */
.fuss__wahl {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  transition: color .2s;
}
.fuss__wahl:hover { color: var(--papier); }

/* ═══ RECHTSTEXTE ══════════════════════════════════════════ */
.recht { max-width: 74ch; }
.recht h2 { font-size: clamp(1.3rem, 2.5vw, 1.65rem); margin: 2.6rem 0 .8rem; }
.recht h3 { font-size: 1.08rem; margin: 1.7rem 0 .55rem; }
.recht p, .recht li { font-size: .96rem; margin-bottom: .7rem; color: var(--tinte-weich); }
.recht ul { padding-left: 1.3rem; }
.recht a { color: var(--tinte); border-bottom: 1px solid var(--gold-tief); }

/* ═══ HILFSKLASSEN ═════════════════════════════════════════ */
.nur-lesen { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.nur-lesen input { width: 1px; }
.mt-s { margin-top: 1rem } .mt-m { margin-top: 2rem } .mt-l { margin-top: 3rem }
.hinweis { border-left: 2px solid var(--gold-tief); background: rgba(140,109,51,.07); padding: 1rem 1.3rem; font-size: .88rem; color: var(--tinte-weich); }
.hinweis strong { color: var(--tinte); }
.feld--dunkel .hinweis { border-left-color: var(--gold); background: rgba(200,169,106,.08); color: #A4ADBB; }
.feld--dunkel .hinweis strong { color: var(--papier); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ═══ TIPPZIELE auf Touch und schmalen Fenstern ════════════ */
/* Ein Fingertipp braucht rund 40px Höhe. Die Links selbst müssen
   diese Höhe haben – Polsterung am Listenpunkt genügt nicht, weil
   angetippt wird, was der Link umfasst. */
@media (hover: none), (max-width: 1200px) {
  .fuss ul a,
  .daten dd a,
  .person__ruf a,
  .fuss__recht a,
  .fuss__wahl,
  .fuss__schluss a {
    display: inline-block; padding: .5rem 0;
  }
  .fuss__ruf { padding: .55rem 0; }
  .fuss__sozial { width: 44px; height: 44px; }
  .fuss li { padding: 0; }
  .pfeil { padding-top: .45rem; padding-bottom: .6rem; }
  .kopf__marke { display: flex; align-items: center; padding: .6rem 0; }
  .haken a { display: inline-block; padding: .25rem 0; }
}

/* ═══ ÜBERGANG ═════════════════════════════════════════════ */
/* Diese Bauteile gehören zur alten Editorial-Struktur. Sie bleiben
   nur so lange stehen, bis die letzten Seiten auf den neuen Aufbau
   umgestellt sind – danach ersatzlos löschen. Betroffen sind aktuell:
   ueber-uns.html, investoren.html, objekte.html, tools.html. */
.marginal { display: grid; gap: 1.3rem; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .marginal { grid-template-columns: 150px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
  .marginal__rand { padding-top: .5rem; }
}
.marginal__rand p { font-size: .82rem; margin-top: .65rem; line-height: 1.55; }

.zeilen { border-top: 1px solid var(--linie); }
.zeile {
  display: grid; gap: .45rem 2rem; grid-template-columns: 1fr;
  padding: clamp(1.8rem, 4vh, 2.8rem) 0; border-bottom: 1px solid var(--linie);
}
@media (min-width: 780px) {
  .zeile { grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1.25fr) auto; align-items: baseline; gap: 2.4rem; }
}
.zeile__nr { font-family: var(--display); font-size: 1.05rem; color: var(--gold-tief); }
.zeile__titel { font-family: var(--display); font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 500; color: var(--tinte); }
.zeile__text { font-size: .95rem; color: var(--tinte-weich); }
.zeile__mehr { white-space: nowrap; }
.feld--dunkel .zeilen, .feld--dunkel .zeile { border-color: var(--linie-dunkel); }
.feld--dunkel .zeile__nr { color: var(--gold); }
.feld--dunkel .zeile__titel { color: var(--papier); }
.feld--dunkel .zeile__text { color: #A4ADBB; }

.bank { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
@media (min-width: 860px) { .bank { grid-template-columns: repeat(3, 1fr); } }
.bank__stueck {
  background: var(--papier); padding: clamp(1.8rem, 3.5vw, 2.4rem);
  display: flex; flex-direction: column; gap: .8rem;
  min-width: 0; overflow-wrap: break-word;
}
.bank__nr { font-family: var(--display); font-size: .95rem; color: var(--gold-tief); }
.bank__stueck p { font-size: .93rem; flex: 1; }
.bank__stueck .pfeil { align-self: flex-start; margin-top: .5rem; }
.feld--dunkel .bank { background: var(--linie-dunkel); border-color: var(--linie-dunkel); }
.feld--dunkel .bank__stueck { background: var(--tinte-2); }
.feld--dunkel .bank__nr { color: var(--gold); }

.auftakt { padding: clamp(4rem, 13vh, 9rem) 0 clamp(2.5rem, 7vh, 4.5rem); }
.auftakt__meta { display: flex; flex-wrap: wrap; gap: .45rem 2.2rem; align-items: center; }
.auftakt__meta span { color: var(--tinte-weich); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.auftakt h1 { margin-top: 1.8rem; max-width: 16ch; }
.auftakt .anriss { margin-top: 1.6rem; }
.auftakt__wege { display: flex; flex-wrap: wrap; gap: 1.4rem 2.6rem; margin-top: 2.4rem; }

/* Auf schmalen Bildschirmen stehen die Hero-Knoepfe untereinander –
   unterschiedlich breite Knoepfe wirken dort unruhig. */
@media (max-width: 479px) {
  .hero__wege, .band__wege { flex-direction: column; align-items: stretch; }
  .hero__wege .knopf, .band__wege .knopf { width: 100%; }
}

/* ═══ BILDBAND ═════════════════════════════════════════════ */
/* Vollbreiter Bildstreifen mit Bildunterschrift im dunklen Verlauf.
   Steht dort, wo bei der Referenz Partnerlogos und Rezensionen waren. */
.bildband { position: relative; width: 100%; overflow: hidden; background: var(--tinte); }
/* Das Band waechst in der Hoehe mit der Breite mit, statt bei 460 px
   stehen zu bleiben. Vorher schnitt es auf einem 1920er Schirm 68 % der
   Bildhoehe weg - das liest sich nicht als Ausschnitt, sondern als
   Hineinzoomen, und genau so wurde es am 06.09.2026 gemeldet.
   Am Handy ist das Verhaeltnis gleich dem der Bilder (4:3), dort wird
   gar nichts mehr abgeschnitten. */
.bildband img {
  width: 100%;
  /* height: auto ist Pflicht: die Angabe height="1200" im HTML wirkt als
     CSS-Hoehe und wuerde aspect-ratio aushebeln. */
  height: auto;
  aspect-ratio: 5 / 2;
  max-height: min(76vh, 860px);
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
@media (max-width: 720px) {
  .bildband img { aspect-ratio: 4 / 3; max-height: none; }
}
/* Der Verlauf muss den Satz auf JEDEM Foto tragen. Auf dem Handy steht
   er seit dem 06.09.2026 oft vor hellem Beton oder Himmel, weil das Band
   dort das ganze Bild zeigt. Darum laenger, dunkler und zusaetzlich ein
   Schattensaum an der Schrift - der wirkt auch dort, wo der Verlauf
   schon ausgelaufen ist. */
.bildband figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(4rem, 16vw, 6rem) var(--rand) clamp(1.4rem, 3vw, 2.2rem);
  background: linear-gradient(to top,
    rgba(12,16,22,.94) 0%, rgba(12,16,22,.86) 30%,
    rgba(12,16,22,.60) 62%, rgba(12,16,22,0) 100%);
}
.bildband figcaption .marke,
.bildband figcaption p { text-shadow: 0 1px 3px rgba(12,16,22,.55); }
/* Ein Wrapper haelt Label und Satz am selben linken Rand wie der uebrige Inhalt.
   Ohne ihn zentriert die max-width des Absatzes ihn gegen das Label. */
.bildband__text { max-width: var(--breite); margin: 0 auto; }
.bildband .marke { display: block; color: var(--gold); margin-bottom: .4rem; }
.bildband p { color: var(--papier); font-size: clamp(.95rem, 1.7vw, 1.12rem); max-width: 46ch; }

/* ═══ ÜBER-UNS-BILD IM QUERFORMAT ══════════════════════════ */
/* Das Gruppenfoto ist 4:3 – im Hochformat-Ausschnitt der Einzelportraets
   wuerden beide Koepfe angeschnitten. */
.vorstellung__bild--quer img { aspect-ratio: 4 / 3; max-width: none; }
.vorstellung__bild figcaption {
  margin-top: .8rem; font-size: .78rem; color: var(--tinte-weich);
}
@media (min-width: 900px) { .vorstellung__bild--quer { padding-top: .6rem; } }

/* Objektbild neben wenig Text (Bewirtschaftung). Ohne Deckel wird das
   Hochformat so hoch, dass die Textspalte daneben halb leer aussieht. */
@media (min-width: 900px) {
  .vorstellung__bild--knapp img { max-width: 400px; margin-left: auto; }
}

/* ═══ REGELN – Kennzahl mit Erklaerung ═════════════════════ */
/* Fuer die Hypothekenseite: die drei Zahlen, an denen eine
   Finanzierung haengt. Die Zahl steht vorn, weil sie das ist,
   was haengen bleibt – der Text erklaert sie, die Fusszeile
   sagt, was das konkret bedeutet. */
.regeln { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .regeln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.regel { border-top: 1px solid var(--gold-tief); padding-top: 1.4rem; min-width: 0; display: flex; flex-direction: column; }
.regel__zahl {
  font-family: var(--display); font-weight: 500; line-height: 1;
  font-size: clamp(2.4rem, 6vw, 3.3rem); color: var(--gold-tief); letter-spacing: -.02em;
}
.regel__zahl small { font-size: .42em; letter-spacing: 0; margin-left: .12em; }
.regel h3 { margin-top: .75rem; font-size: clamp(1.1rem, 2.2vw, 1.25rem); color: var(--tinte); }
.regel p { font-size: .95rem; margin-top: .6rem; flex: 1; }
.regel__fuss {
  font-size: .82rem; color: #9A9184; margin-top: 1rem;
  padding-top: .85rem; border-top: 1px solid var(--linie); flex: none;
}
.feld--dunkel .regel { border-top-color: var(--gold); }
.feld--dunkel .regel__zahl { color: var(--gold); }
.feld--dunkel .regel h3 { color: var(--papier); }
.feld--dunkel .regel__fuss { color: #6E7788; border-top-color: var(--linie-dunkel); }

/* ═══ MODELLVERGLEICH – Zusatz zu .bank ════════════════════ */
/* Die Zeile steht unten buendig, damit die drei Modelle
   nebeneinander auf derselben Hoehe vergleichbar sind. */
.bank__wenn {
  flex: none; margin-top: auto; padding-top: .95rem;
  border-top: 1px solid var(--linie); font-size: .86rem; color: var(--tinte-weich);
}
.bank__wenn b { display: block; color: var(--tinte); font-weight: 500; margin-bottom: .1rem; }
.feld--dunkel .bank__wenn { border-top-color: var(--linie-dunkel); color: #8791A1; }
.feld--dunkel .bank__wenn b { color: var(--papier); }

/* ═══ FRAGEN – Akkordeon ═══════════════════════════════════ */
/* Bewusst <details>: klappt ohne JavaScript, ist von Haus aus
   bedienbar mit Tastatur und wird von der Suche gelesen. */
.fragen { max-width: 52rem; margin: 0 auto; border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage > summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1.25rem 2.6rem 1.25rem 0;
  font-family: var(--display); font-weight: 500; line-height: 1.35;
  font-size: clamp(1.05rem, 2.1vw, 1.25rem); color: var(--tinte);
  transition: color .2s;
}
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary::after {
  content: '+'; position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  font-family: var(--body); font-size: 1.35rem; font-weight: 300; color: var(--gold-tief);
}
.frage[open] > summary::after { content: '–'; }
.frage > summary:hover { color: var(--gold-tief); }
.frage > summary:focus-visible { outline: 2px solid var(--gold-tief); outline-offset: 3px; }
.frage__text { padding: 0 2.6rem 1.6rem 0; font-size: .96rem; color: var(--tinte-weich); max-width: 62ch; }
.frage__text p + p { margin-top: .8rem; }
.feld--dunkel .fragen, .feld--dunkel .frage { border-color: var(--linie-dunkel); }
.feld--dunkel .frage > summary { color: var(--papier); }
.feld--dunkel .frage > summary::after { color: var(--gold); }
.feld--dunkel .frage__text { color: #A4ADBB; }

/* ═══ TOOL OHNE EIGENE OPTIK ═══════════════════════════════ */
/* Der Hypothekenrechner ist von Vantis gebaut und bereits im
   Papier-Design der Website – anders als die drei Tools des
   Kunden, die dunkel sind. Er braucht deshalb keinen dunklen
   Rahmen, sondern steht als helle Karte auf dem Sandband. */
.tool--eigen { box-shadow: var(--schatten); }
.tool--eigen .rahmen { background: var(--papier); min-height: 620px; }
@media (max-width: 639px) {
  .tool--eigen .rahmen { min-height: 300px; }
}

/* ═══ STAND – ehrliche Leerstelle statt Baustellen-Optik ═══ */
/* Für Abschnitte, in denen heute nichts steht und das eine Aussage ist
   (Objektliste). Bewusst nicht .geruest: dessen gestricheltes Raster
   heisst «hier fehlt noch Inhalt» – das ist ein Hinweis an den Kunden,
   nicht an einen Besucher. Hier soll es aussehen wie eine Absicht. */
.stand {
  max-width: 46rem; margin: 0 auto; text-align: center;
  background: var(--karte); border: 1px solid var(--linie);
  border-top: 2px solid var(--gold-tief); border-radius: var(--r);
  padding: clamp(2.2rem, 5vw, 3.2rem) clamp(1.4rem, 4vw, 3rem);
  box-shadow: var(--schatten);
}
.stand .marke { display: block; margin-bottom: 1rem; }
.stand h2 { font-size: clamp(1.35rem, 2.7vw, 1.75rem); margin-bottom: .8rem; }
.stand p { font-size: .96rem; max-width: 52ch; margin: 0 auto; }
.stand p + p { margin-top: .75rem; }
.stand .pfeil { margin-top: 1.6rem; }

/* ═══ GROSSE BILDSCHIRME ═══════════════════════════════════ */
/* Vorher begann das Mitwachsen erst bei 1900px. Genau darunter
   liegt aber der verbreitetste Buerobildschirm: auf 1920px stand
   ein 1240px breiter Inhalt in der Mitte, links und rechts je
   340px Leere, und die Schrift blieb so gross wie auf dem Laptop.
   Der Inhalt sah dadurch auf dem groesseren Geraet kleiner aus,
   nicht groesser.

   Deshalb waechst ab 1500px beides zugleich und stufenlos:
   die Satzbreite ueber --breite, die Schrift ueber die
   Wurzelgroesse. Alles andere steht in rem und clamp und folgt
   von selbst. Nach oben ist gedeckelt, sonst laufen die Zeilen
   auf einem 4K-Schirm zu lang zum Lesen.

   1500px: 16.5px Schrift, 1240px Satzbreite
   1920px: ~19px Schrift,  ~1500px Satzbreite
   2560px: 21px Schrift,   1760px Satzbreite (Deckel) */
@media (min-width: 1500px) {
  html { font-size: clamp(16px, 0.47vw + 8.95px, 20px); }
  :root {
    --grundschrift: clamp(16.5px, 0.53vw + 8.55px, 21px);
    --breite:     clamp(1240px, 78vw, 1760px);
    --kopfbreite: clamp(1440px, 86vw, 1980px);
    --kopfhoehe: 80px;
  }
}
@media (min-width: 1900px) { :root { --kopfhoehe: 88px; } }

/* ═══ PRÄMIE – ein Betrag, gross gesetzt ═══════════════════ */
/* Die Kundenreferenz nennt hier einen Prozentsatz und muss ihn
   anschliessend an einem Rechenbeispiel vorführen. Ein fester Betrag
   braucht keine Rechnung – deshalb steht er allein und ohne Beiwerk.
   «CHF» und die Zahl sind getrennt gesetzt: als eine Zeile wäre der
   Block auf 320px breiter als die Spalte. */
.praemie { display: grid; gap: clamp(1.8rem, 4vw, 2.8rem); grid-template-columns: 1fr; }
@media (min-width: 880px) {
  .praemie { grid-template-columns: auto minmax(0, 1fr); gap: clamp(3rem, 7vw, 5.5rem); align-items: center; }
}
.praemie__betrag { min-width: 0; }
.praemie__betrag .marke { display: block; margin-bottom: 1rem; }
.praemie__betrag b {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: clamp(3.4rem, 12vw, 6.2rem); line-height: .95; letter-spacing: -.025em;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.praemie__betrag i {
  display: block; font-style: normal; font-family: var(--body);
  font-size: .8rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .35rem;
}
.praemie__text { min-width: 0; }
.praemie__text .anriss { max-width: 46ch; }

/* ═══ COOKIE-ZUSTIMMUNG ════════════════════════════════════
   Das Banner sitzt unten fest und schiebt den Inhalt nicht weg.
   Beide Knöpfe haben dieselbe Grösse und dasselbe Gewicht – ein
   Banner, bei dem «Ablehnen» kleiner oder blasser ist als
   «Einverstanden», gilt als nicht freiwillige Einwilligung.
   Gesteuert wird es von js/zustimmung.js. */
.zustimmung {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--papier);
  border-top: 1px solid var(--linie);
  box-shadow: 0 -18px 44px rgba(20, 24, 31, .13);
  animation: zustimmung-auf .32s ease-out both;
}
@keyframes zustimmung-auf { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .zustimmung { animation: none; } }

.zustimmung__innen {
  width: 100%; max-width: var(--breite); margin: 0 auto;
  padding: clamp(1.3rem, 3vw, 1.8rem) var(--rand);
  display: grid; gap: 1.2rem; align-items: center;
}
@media (min-width: 860px) {
  .zustimmung__innen { grid-template-columns: minmax(0, 1fr) auto; gap: 2.4rem; }
}

.zustimmung__text { min-width: 0; }
.zustimmung__text strong {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem); line-height: 1.3;
  color: var(--tinte); margin-bottom: .5rem;
}
.zustimmung__text p {
  margin: 0; max-width: 68ch;
  font-size: .88rem; line-height: 1.6; color: var(--tinte-weich);
}
.zustimmung__text a { color: var(--tinte); text-decoration: underline; text-underline-offset: .18em; }

/* Auf schmalen Schirmen liegen die Knöpfe nebeneinander und teilen
   sich die Breite – gleich breit heisst hier auch gleich wichtig. */
.zustimmung__wege { display: flex; gap: .7rem; }
.zustimmung__wege .knopf {
  flex: 1 1 0; min-width: 0; padding-left: 1.2rem; padding-right: 1.2rem;
}
@media (min-width: 860px) {
  .zustimmung__wege .knopf { flex: 0 0 auto; padding-left: 2rem; padding-right: 2rem; }
}

@media print { .zustimmung { display: none; } }

/* ═══ BEWEGUNG BEIM SCROLLEN ═══════════════════════════════
   Gehoert zu js/bewegung.js. Alle Regeln haengen an .bewegt am
   <html>, und diese Klasse setzt ausschliesslich das Skript.

   Damit gilt: kein JavaScript, kein Versteck. Faellt die Datei aus,
   wird sie blockiert oder hat der Besucher "Bewegung reduzieren"
   eingestellt, greift hier gar nichts und die Seite steht
   vollstaendig da. Ein Einblende-Effekt, der im Fehlerfall Inhalt
   verschluckt, ist keine Gestaltung, sondern ein Ausfall.

   Bewusst nur zwei Eigenschaften: opacity und transform. Beide
   rechnet die Grafikkarte, beide loesen kein neues Layout aus. Ein
   animiertes margin oder height an derselben Stelle wuerde bei
   jedem Bild die ganze Seite neu vermessen. */

.bewegt .auf {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
              transform .55s cubic-bezier(.22, .61, .36, 1);
  /* Sagt dem Browser vorab, was sich aendert. Er legt das Element
     dann auf eine eigene Ebene und muss beim Einblenden nicht neu
     zeichnen. Nach dem Einblenden wieder zurueckgenommen (siehe
     .da), sonst haelt jede Seite dutzende Ebenen im Speicher. */
  will-change: opacity, transform;
}

.bewegt .auf.da {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Stand das Element beim Laden schon im Bild, wird es ohne
   Uebergang gezeigt. Sonst waere die Einblendung des Hero das
   groesste Element der Seite - und damit die LCP-Zeit, die wir
   gerade muehsam auf 300 ms gebracht haben. */
.bewegt .auf.sofort {
  transition: none;
}

/* Die Kopfzeile ist oben unauffaellig und bekommt beim Scrollen
   eine Kante. Die Linie ist immer da, aber oben durchsichtig -
   so springt beim Umschalten nichts, weil sich die Hoehe des
   Elements nicht aendert. */
.kopf { transition: background-color .3s, box-shadow .3s, border-color .3s; }
.kopf--gescrollt {
  background: rgba(250, 247, 241, .96);
  box-shadow: 0 1px 18px rgba(20, 28, 42, .07);
}

/* Der Systemschalter hat das letzte Wort. Steht er auf "reduzieren",
   setzt js/bewegung.js die Klasse .bewegt gar nicht erst - diese
   Regel ist die zweite Sicherung fuer den Fall, dass jemand die
   Einstellung bei offener Seite umlegt. */
@media (prefers-reduced-motion: reduce) {
  .bewegt .auf { opacity: 1; transform: none; transition: none; }
  .kopf { transition: none; }
}

/* ── Der Empfang und die Seitenkoepfe: das Bild kommt zur Ruhe ──
   Das Foto faengt leicht zu gross an und laeuft langsam auf seine
   Ruhelage zu. Neun Sekunden auf der Startseite, sieben auf den
   Unterseiten - der Seitenkopf ist flacher, ueber neun Sekunden
   loeste sich die Bewegung dort in nichts auf. Alles darunter
   liest sich als Effekt; so merkt man es kaum und empfindet die
   Seite nur als ruhiger.

   Erlaubt ist ausschliesslich transform. Kein Einblenden, keine
   Deckkraft unter 1, und zwar aus einem gemessenen Grund:

   Ein erster Entwurf hat zusaetzlich die Schrift im Empfang und im
   Seitenkopf gestaffelt eingeblendet (Marke, Titel, Anriss, Knopf
   nacheinander, 0.75 s, 90 ms Versatz). Das sah gut aus und war
   trotzdem falsch. Die Ueberschrift ist auf jeder Seite das
   LCP-Element - der groesste Inhalt im ersten Bild, und genau der
   Wert, an dem Google die gefuehlte Ladezeit misst. Solange sie
   durchsichtig ist, zaehlt sie nicht als gemalt. Gemessen im
   direkten Vergleich, 4G gedrosselt, CPU 4x, Zwischenspeicher je
   geleert:

       Seite                  ohne     nur Massstab   nur Schrift
       index.html             1104 ms      1120 ms       2424 ms
       dienstleistungen.html   828 ms       828 ms       2056 ms
       kontakt.html            808 ms       812 ms       2000 ms

   Der Massstab kostet nichts, die Schrift kostet 1.2 bis 1.3
   Sekunden. Bei einem Grenzwert von 2500 ms haette der Empfang
   allein fast das ganze Budget aufgebraucht - fuer eine Bewegung,
   die niemand vermisst.

   Merksatz fuer spaeter: was im ersten Bild steht, wird nicht
   eingeblendet. Bewegung faengt unterhalb des Falzes an. Genau das
   macht auch js/bewegung.js, wenn es sichtbare Stuecke sofort auf
   .da setzt. */
.hero__bild         { animation: heroRuhe 9s cubic-bezier(.16, .68, .32, 1) both; }
.seitenkopf::before { animation: heroRuhe 7s cubic-bezier(.16, .68, .32, 1) both; }

@keyframes heroRuhe {
  from { transform: scale(1.045); }
  to   { transform: scale(1); }
}

/* ── Bildbaender: das Foto setzt sich hinter dem Text ──────────
   Das Band selbst wird ueber .auf eingeblendet wie jeder andere
   Abschnitt. Zusaetzlich laeuft das Foto darin von 1.05 auf 1 -
   langsamer als die Einblendung und mit eigener Kurve. Dadurch
   entsteht Tiefe: die Schrift steht still, das Bild dahinter kommt
   nach. Unbedenklich, weil die Baender immer unterhalb des Falzes
   liegen und weil auch hier nur transform bewegt wird. */
.bewegt .bildband img         { transform: scale(1.05); transition: transform 1.6s cubic-bezier(.16, .68, .32, 1); }
.bewegt .bildband.da img      { transform: none; }
.bewegt .bildband.sofort img  { transition: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__bild, .seitenkopf::before { animation: none; }
  .bewegt .bildband img,
  .bewegt .bildband.da img { transform: none; transition: none; }
}