@import url("../schriften/schriften.css");

/* =========================================================================
   Astra Advisory — Ankaufsseite
   -------------------------------------------------------------------------
   Ziel: professionell und finanziell solide wirken, ohne wie ein
   Investmenthaus auszusehen. Daraus folgen die Entscheide:

   HELL statt dunkel. Dunkle Flächen mit Gold sind die Formel der
   Privatbanken; sie wirken exklusiv, also distanziert. Helle, warme
   Flächen wirken offen.

   WEICHE ECKEN statt scharfer Kanten. Runde Formen werden nachweislich
   als freundlicher wahrgenommen, spitze als abweisend. Radius 8px.

   HUMANISTISCHE SCHRIFT statt kontrastreicher Serife. Literata und
   Source Sans 3 sind auf Lesbarkeit gezeichnet, nicht auf Eleganz.

   EINE Akzentfarbe: ein gedecktes Grün. Gold und Dunkelblau sind die
   Farben von Privatbanken und Beteiligungsgesellschaften. Grün liest als
   Boden, Bestand und Ruhe — solide, ohne nach Kapitalanlage zu klingen.

   Grosszügige Zeilenabstände, kurze Zeilen, echte Fotos, ein Gesicht.
   ========================================================================= */

:root {
  --titel-schrift: "Literata", Georgia, "Times New Roman", serif;
  --text-schrift:  "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --marke-schrift: "Literata", Georgia, serif;

  --papier:   #FAF8F5;
  --karte:    #FFFFFF;
  --warm:     #F2EDE5;
  --tinte:    #1B1E24;
  --tinte2:   #454A52;
  --grau:     #62686F;
  --linie:    #E4DFD7;
  --fein:     #EFEBE4;
  --akzent:      #37674F;   /* gedecktes Grün: Boden, Bestand, Ruhe */
  --akzent-tief: #2A5240;   /* dunkler, damit Text darauf lesbar bleibt */
  --akzent-hell: #E8EFEA;
  --akzent-dunkel: #23453A;   /* Druckzustand von Knöpfen */
  --akzent-licht: #4C8A6B;    /* aufleuchtendes Grün beim Zeigen */
  --warnung:  #9C3B2E;
  --warnung-flaeche: #F6EAE6;

  --radius: 8px;
  --radius-gross: 12px;

  --rand:  clamp(20px, 5vw, 68px);
  --breit: 1180px;
  --schmal: 720px;
  --kopf:  66px;
  --daumen: 0px;
}

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

html { -webkit-text-size-adjust: 100%; overflow-x: clip; background: var(--papier); }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--text-schrift);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

[id] { scroll-margin-top: calc(var(--kopf) + 20px); }
::selection { background: var(--akzent); color: #FFFFFF; }
:focus-visible { outline: 2px solid var(--akzent-tief); outline-offset: 3px; }

a { color: inherit; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
b, strong { font-weight: 600; }

/* ---------- Masse ------------------------------------------------------- */

.mass { max-width: var(--breit); margin-inline: auto; padding-inline: var(--rand); }
.schmal { max-width: var(--schmal); }

.abschnitt { padding-block: clamp(56px, 7vw, 96px); }
.abschnitt-eng { padding-block: clamp(38px, 5vw, 64px); }
.strich { border-top: 1px solid var(--linie); }
.warmflaeche { background: var(--warm); }

/* ---------- Schrift ----------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--titel-schrift);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.012em;
}
h1 { font-size: clamp(33px, 4.4vw, 54px); line-height: 1.12; }
h2 { font-size: clamp(26px, 2.9vw, 36px); line-height: 1.18; margin-bottom: 14px; }
h3 { font-size: 20px; line-height: 1.3; margin-bottom: 6px; letter-spacing: -0.006em; }

.vorlauf { font-size: clamp(19px, 1.5vw, 21px); line-height: 1.6; color: var(--tinte2); max-width: 52ch; }
.klein { font-size: 16px; line-height: 1.55; color: var(--tinte2); }
.grau { color: var(--grau); }

.etikett, .kapitael {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--akzent-tief);
  margin: 0;
}
.etikett-grau, .kapitael-grau { color: var(--grau); }

.zahl {
  font-family: var(--titel-schrift);
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.018em;
  display: block;
}

.luecke {
  font-size: 0.86em;
  color: var(--warnung);
  background: var(--warnung-flaeche);
  border-radius: 4px;
  padding: 1px 7px;
  white-space: nowrap;
}

.textlink, .klein a, .hinweis-recht a, .fuss-liste a, .spalte a {
  color: var(--akzent-tief);
  text-decoration-color: rgba(42, 82, 64, 0.4);
  text-underline-offset: 3px;
}
.textlink:hover, .klein a:hover, .fuss-liste a:hover { text-decoration-color: var(--akzent-tief); }

/* ---------- Kopf -------------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 30;
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.kopf-inhalt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: var(--kopf);
}

/* Das Zeichen: das Haus mit dem einen grünen Fenster, weitergeführt aus
   dem Astra-Zeichen. Ein Fenster leuchtet, jemand ist zu Hause. */
/* Zeichen und Wortmarke stehen auf einer Linie: Die Unterkante des Hauses
   sitzt auf der Grundlinie der Schrift. Das Haus endet im Zeichen 4.2px
   über dem unteren Rand, deshalb der Versatz nach unten. */
.marke { display: flex; align-items: baseline; gap: 5px; text-decoration: none; color: var(--tinte); }
.marke-zeichen { width: 24px; height: 24px; flex: none; display: block; position: relative; top: 4.2px; margin-right: -3px; }
.marke-zeichen .haus { fill: var(--tinte); }
.marke-zeichen .fenster { fill: var(--papier); }
.marke-zeichen .fenster-gruen { fill: var(--akzent); }
.marke-wort {
  font-family: var(--marke-schrift);
  font-size: 24px; font-weight: 600; line-height: 1;
  letter-spacing: -0.015em; white-space: nowrap;
}
.marke-wort i { color: var(--akzent); font-style: normal; padding: 0 1px; }
.marke-zusatz {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--grau);
}
@media (max-width: 480px) { .marke-zusatz { display: none; } }

.navi { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px); }
.navlink { font-size: 17px; color: var(--tinte2); text-decoration: none; }
.navlink:hover { color: var(--akzent-tief); }
.navlink[aria-current="page"] { color: var(--tinte); font-weight: 600; }

@media (max-width: 800px) { .navi .navlink:not(.navlink-haupt) { display: none; } }

.knopf {
  display: inline-block;
  font-family: var(--text-schrift);
  font-size: 17px; font-weight: 600;
  text-decoration: none;
  background: var(--akzent-tief);
  color: #FFFFFF;
  border: 1px solid var(--akzent-tief);
  border-radius: var(--radius);
  padding: 12px 22px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.knopf:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.knopf[disabled] { background: var(--grau); border-color: var(--grau); cursor: not-allowed; }
.knopf-leer { background: transparent; color: var(--tinte); border-color: var(--linie); }
.knopf-leer:hover { background: var(--warm); border-color: var(--akzent); }
.knopf-schmal { padding: 8px 15px; font-size: 16px; }

/* ---------- Bilder ------------------------------------------------------ */

.bild {
  position: relative; display: block; margin: 0;
  background: var(--warm);
  border-radius: var(--radius-gross);
  overflow: hidden;
}
.bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bild-hoch { aspect-ratio: 4 / 5; }
.bild-quer { aspect-ratio: 16 / 9; }

.bild-fehlt { display: none; }
.bild[data-fehlt="ja"] { border: 1px solid var(--linie); }
.bild[data-fehlt="ja"] .bild-fehlt {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px;
  position: absolute; inset: 0; padding: clamp(16px, 2vw, 24px);
  background: var(--warm);
}
/* Solange kein Foto vorliegt, steht ein ruhiges Monogramm — kein roter
   Baustellenhinweis auf der Live-Seite. Foto ablegen ersetzt es. */
.monogramm {
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--akzent-tief);
  color: #FFFFFF;
  font-family: var(--titel-schrift);
  font-size: 38px;
}
.bildunterschrift { font-size: 16px; color: var(--tinte2); margin: 10px 0 0; }

/* ---------- Der Film trägt die Seite ------------------------------------ */
/* Randloses Video, am Scroll gescrubbt. Im Bild liegt genau EINE halb-
   transparente Blase mit der Kernaussage; sie verblasst, sobald der Flug
   beginnt, und kommt beim Zurückscrollen wieder. Sonst liegt nichts auf
   dem Bild. */

.hero-bahn { position: relative; height: 440vh; }

.hero-buehne {
  position: sticky;
  top: var(--kopf);
  height: calc(100svh - var(--kopf) - var(--daumen));
  min-height: 440px;
  overflow: hidden;
  background: var(--warm);
}

.hero-medium { position: absolute; inset: 0; overflow: hidden; }
.hero-medium video, .hero-medium canvas, .hero-medium img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hero-medium img { transform-origin: 50% 55%; will-change: transform; }

/* Erst sichtbar, wenn das Skript entschieden hat, dass wirklich nur das
   Schema läuft — sonst blitzt das Abzeichen beim Laden kurz auf. */
.platzhalter-marke { display: none; }
.hero-bahn[data-modus] canvas + .platzhalter-marke { display: block; }
.platzhalter-marke {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  background: var(--warnung-flaeche); color: var(--warnung);
  border-radius: 4px; font-size: 14px; padding: 4px 10px;
}

.hero-blase {
  position: absolute;
  left: clamp(20px, 4vw, 64px);
  bottom: clamp(28px, 6vh, 72px);
  z-index: 3;
  max-width: min(480px, calc(100% - 2 * clamp(20px, 4vw, 64px)));
  background: rgba(250, 248, 245, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(228, 223, 215, 0.7);
  border-radius: var(--radius-gross);
  padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.8vw, 34px);
  will-change: opacity, transform;
}
.hero-blase h1 { font-size: clamp(27px, 2.9vw, 40px); line-height: 1.12; }
.hero-blase p { color: var(--tinte2); margin: 8px 0 0; font-size: 17px; max-width: 40ch; }

.hero-hinweis {
  position: absolute;
  right: clamp(20px, 4vw, 64px);
  bottom: clamp(28px, 6vh, 72px);
  z-index: 3;
  font-size: 15px;
  color: var(--tinte2);
  background: rgba(250, 248, 245, 0.82);
  backdrop-filter: blur(10px);
  border-radius: 100px;
  padding: 5px 13px;
  margin: 0;
  transition: opacity 300ms ease;
}

.hero-ueberspringen {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  top: 18px;
  z-index: 4;
  font-size: 15px;
  text-decoration: none;
  color: var(--tinte2);
  background: rgba(250, 248, 245, 0.85);
  border: 1px solid var(--linie);
  border-radius: 100px;
  padding: 7px 15px;
}
.hero-ueberspringen:hover { color: var(--tinte); border-color: var(--grau); }

@media (max-width: 900px) {
  .hero-bahn { height: 380vh; }
  .hero-blase h1 { font-size: 24px; }
  .hero-blase p { font-size: 16px; }
  .hero-hinweis { display: none; }
}

.hero-bahn[data-modus="ruhig"] { height: auto; }
.hero-bahn[data-modus="ruhig"] .hero-buehne { position: static; height: 62svh; min-height: 380px; }
.hero-bahn[data-modus="ruhig"] .hero-blase { opacity: 1 !important; }
.hero-bahn[data-modus="ruhig"] .hero-hinweis,
.hero-bahn[data-modus="ruhig"] .hero-ueberspringen { display: none; }

/* ---------- Ankaufskarten ----------------------------------------------- */

.kauf-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.kauf-karte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 26px);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.kauf-karte:hover, .kauf-karte:focus-visible {
  transform: translateY(-3px);
  border-color: var(--akzent);
  box-shadow: 0 14px 30px -20px rgba(27, 30, 36, 0.35);
}
.kauf-karte:active { transform: translateY(-1px); }
.kauf-karte h3 { font-size: 20px; margin: 0; }
.kauf-karte .klein { margin: 0; }
.kauf-ikone { width: 44px; height: 44px; }
.kauf-ikone .ik   { fill: var(--tinte); }
.kauf-ikone .ik-f { fill: var(--papier); }
.kauf-ikone .ik-g { fill: var(--akzent); transition: fill 160ms ease; }
.kauf-karte:hover .ik-g { fill: var(--akzent-licht); }
@media (prefers-reduced-motion: reduce) { .kauf-karte:hover { transform: none; } }

/* ---------- Vorher und nachher ------------------------------------------ */

.vergleich {
  --pos: 50%;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-gross);
  overflow: hidden;
  background: var(--warm);
  border: 1px solid var(--linie);
  touch-action: pan-y;
}
.vergleich img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  user-select: none; -webkit-user-drag: none;
}
/* Die obere Aufnahme wird an der Kante beschnitten. */
.vergleich .v-vorher { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.v-griff {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 44px;
  margin-left: -22px;
  cursor: ew-resize;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
}
.v-griff::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 21px;
  width: 2px; background: var(--papier);
}
.v-griff::after {
  content: "";
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--papier);
  border: 1px solid var(--linie);
}
.v-griff:focus-visible { outline: 2px solid var(--akzent-tief); outline-offset: 2px; }

.v-marke {
  position: absolute;
  top: 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinte);
  background: rgba(250, 248, 245, 0.9);
  border-radius: 100px;
  padding: 4px 12px;
  pointer-events: none;
}
.v-marke-links  { left: 14px; }
.v-marke-rechts { right: 14px; }

.vergleich[data-fehlt="ja"] { border-style: dashed; }
.vergleich[data-fehlt="ja"] .v-griff,
.vergleich[data-fehlt="ja"] .v-marke { display: none; }
.v-fehlt {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: 6px; padding: clamp(16px, 2vw, 24px);
}
.vergleich[data-fehlt="ja"] .v-fehlt { display: flex; }

/* ---------- Karten und Listen ------------------------------------------- */

.reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(20px, 3vw, 34px); }

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: clamp(22px, 2.6vw, 30px);
}
.karte h3 { margin-bottom: 8px; }
.karte p { color: var(--tinte2); margin: 0; font-size: 17px; }

.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: 13px 0; border-bottom: 1px solid var(--fein); }
.liste li:last-child { border-bottom: none; }
.liste .was { display: block; color: var(--grau); font-size: 16px; }

/* Ablauf */
.ablauf-bahn { position: relative; }
.ablauf-schiene { position: absolute; left: 11px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--fein); }
.ablauf-schiene i { position: absolute; inset: 0 0 auto 0; height: 0; border-radius: 2px; background: var(--akzent); display: block; }
.ablauf-schritte { list-style: none; margin: 0; padding: 0; }
.ablauf-schritt { position: relative; padding: 0 0 clamp(26px, 3.4vw, 42px) 44px; }
.ablauf-schritt:last-child { padding-bottom: 0; }
.ablauf-schritt::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--papier); border: 2px solid var(--linie);
  transition: background 200ms ease, border-color 200ms ease;
}
.ablauf-schritt[data-erreicht="ja"]::before { background: var(--akzent); border-color: var(--akzent); }
.schritt-nr { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grau); display: block; margin-bottom: 2px; }
.ablauf-schritt[data-erreicht="ja"] .schritt-nr { color: var(--akzent-tief); }
.ablauf-schritt p { color: var(--tinte2); max-width: 54ch; }
.ablauf-frist { display: inline-block; margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--akzent-tief); }

/* ---------- Person ------------------------------------------------------ */

.person {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
@media (max-width: 720px) { .person { grid-template-columns: minmax(0, 340px); } }

/* ---------- Rechner und Formular ---------------------------------------- */

.schaetzer {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  overflow: hidden;
}
.schaetzer-kopf {
  padding: 22px clamp(20px, 2.6vw, 30px);
  border-bottom: 1px solid var(--linie);
  background: var(--warm);
  display: flex; flex-wrap: wrap; gap: 6px 24px;
  align-items: baseline; justify-content: space-between;
}
.schaetzer-kopf .titel-m { font-family: var(--titel-schrift); font-size: 22px; font-weight: 500; line-height: 1.2; margin: 4px 0 0; }

.feld-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px 26px; padding: clamp(22px, 2.6vw, 30px); }
.feld { display: flex; flex-direction: column; gap: 7px; }
.feld > label, .feld > .feld-titel { font-size: 15px; font-weight: 600; color: var(--tinte2); }
.feld-breit { grid-column: 1 / -1; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  font-family: var(--text-schrift);
  font-size: 17px;
  color: var(--tinte);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 11px 13px;
  width: 100%;
  appearance: none;
}
input:hover, select:hover, textarea:hover { border-color: var(--grau); }
select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tinte2) 50%),
    linear-gradient(135deg, var(--tinte2) 50%, transparent 50%);
  background-position: right 15px center, right 10px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
textarea { min-height: 116px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--akzent-tief); outline-offset: 1px; border-color: var(--akzent-tief); }
input::placeholder, textarea::placeholder { color: var(--grau); }

.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl label {
  font-size: 16px;
  border: 1px solid var(--linie);
  border-radius: 100px;
  padding: 9px 17px;
  cursor: pointer;
  color: var(--tinte2);
  background: var(--karte);
  transition: border-color 130ms ease, color 130ms ease, background 130ms ease;
}
.wahl input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wahl label:hover { border-color: var(--akzent); color: var(--tinte); }
.wahl label[data-gewaehlt="ja"] { background: var(--akzent-tief); border-color: var(--akzent-tief); color: #FFFFFF; }
.wahl label:focus-within { outline: 2px solid var(--akzent-tief); outline-offset: 2px; }

.schaetzer-fuss {
  padding: clamp(20px, 2.6vw, 26px) clamp(20px, 2.6vw, 30px);
  border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: 14px 24px;
  align-items: center; justify-content: space-between;
}
.hinweis-recht { font-size: 16px; line-height: 1.5; color: var(--grau); max-width: 56ch; margin: 0; }

.rechnen { padding: clamp(24px, 3vw, 38px) clamp(20px, 2.6vw, 30px); display: none; }
.rechnen[data-an="ja"] { display: block; }
.rechnen-zeilen { list-style: none; margin: 0 0 20px; padding: 0; }
.rechnen-zeilen li {
  display: flex; gap: 11px; align-items: baseline;
  font-size: 17px; padding: 6px 0; color: var(--grau);
  opacity: 0.4; transition: opacity 220ms ease, color 220ms ease;
}
.rechnen-zeilen li[data-fertig="ja"] { opacity: 1; color: var(--tinte2); }
.rechnen-zeilen li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--linie); }
.rechnen-zeilen li[data-fertig="ja"]::before { background: var(--akzent); }
.rechnen-balken { height: 3px; border-radius: 2px; background: var(--fein); }
.rechnen-balken i { display: block; height: 3px; border-radius: 2px; width: 0; background: var(--akzent); }

.ergebnis { display: none; padding: clamp(24px, 3vw, 36px) clamp(20px, 2.6vw, 30px); }
.ergebnis[data-an="ja"] { display: block; }
.ergebnis-spanne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 12px 0 6px; }
.ergebnis-spanne .zahl { font-size: clamp(30px, 4vw, 48px); }
.ergebnis-spanne .bis { font-size: 17px; color: var(--grau); }
.ergebnis-mittel { font-size: 16px; color: var(--grau); margin: 0 0 20px; line-height: 1.5; }
.ergebnis-mittel b { color: var(--tinte); font-weight: 600; }

.warnband {
  background: var(--warnung-flaeche);
  border: 1px solid rgba(156, 59, 46, 0.3);
  border-radius: var(--radius);
  color: var(--warnung);
  padding: 14px 18px; margin-bottom: 22px;
}
.warnband p { font-size: 16px; line-height: 1.5; margin: 0; }
.warnband p + p { margin-top: 5px; }
.warnband .etikett, .warnband .kapitael { color: var(--warnung); margin-bottom: 4px; }

.trenner-in-karte { border: none; border-top: 1px solid var(--linie); margin: 24px 0; }

.meldung {
  display: none;
  background: var(--warnung-flaeche);
  border: 1px solid rgba(156, 59, 46, 0.3);
  border-radius: var(--radius);
  padding: 13px 17px; margin-top: 18px;
  font-size: 16px; color: var(--warnung);
}
.meldung[data-an="ja"] { display: block; }
.meldung p { margin: 0; }
.meldung .etikett, .meldung .kapitael { color: var(--warnung); margin-bottom: 3px; }

/* Eine angekommene Anfrage ist eine gute Nachricht — grün, nicht rot. */
.meldung[data-ton="gut"] {
  background: #EDF3EE;
  border-color: rgba(55, 103, 79, 0.35);
  color: var(--akzent-tief);
}
.meldung[data-ton="gut"] .etikett, .meldung[data-ton="gut"] .kapitael { color: var(--akzent); }
.pflichtfehler { border-color: var(--warnung) !important; }

.titel-m { font-family: var(--titel-schrift); font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0 0 8px; }

/* ---------- Fuss -------------------------------------------------------- */

.fuss { border-top: 1px solid var(--linie); background: var(--warm); padding-block: 44px 30px; margin-top: clamp(50px, 7vw, 90px); }
.fuss-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px clamp(26px, 4vw, 56px); }
.fuss-liste { list-style: none; padding: 0; margin: 0; }
.fuss-liste li { margin-bottom: 2px; }
.fuss-liste a { display: inline-block; padding: 5px 0; font-size: 16px; color: var(--tinte2); text-decoration: none; }
.fuss-liste a:hover { color: var(--akzent-tief); }
.fuss-schluss {
  margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: 15px; color: var(--grau);
}

/* ---------- Daumenleiste ------------------------------------------------ */

.daumenleiste {
  position: fixed; inset: auto 0 0 0; z-index: 40; display: none;
  background: var(--karte); border-top: 1px solid var(--linie);
  padding: 8px 10px; gap: 8px;
}
.daumenleiste a {
  flex: 1; text-align: center; padding: 12px 8px;
  font-size: 16px; font-weight: 600; text-decoration: none;
  color: var(--tinte); border: 1px solid var(--linie); border-radius: var(--radius);
}
.daumenleiste a + a { background: var(--akzent-tief); border-color: var(--akzent-tief); color: #FFFFFF; }

@media (max-width: 800px) {
  :root { --daumen: 62px; }
  .daumenleiste { display: flex; }
  body { padding-bottom: var(--daumen); }
  .kopf .navlink-haupt { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Kleinvieh, das zählt ---------------------------------------- */

/* iPhones ohne Home-Taste: die Leiste respektiert die Wischzone. */
.daumenleiste { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }

/* Abschnitte unterhalb des Films erst rendern, wenn sie in die Nähe
   kommen. Spart Arbeit beim ersten Aufbau der Seite. */
main > .abschnitt:nth-of-type(n+3) {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}

@media print {
  .kopf, .fuss, .daumenleiste, .hero-bahn, .hero-ueberspringen,
  .knopf, .v-griff { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .abschnitt, .abschnitt-eng { padding-block: 14pt; }
  a { text-decoration: none; }
}

/* ---------- Ergänzungen Oktober 2026 ------------------------------------ */

/* Der längste Menüpunkt darf den Kopf nicht umbrechen. */
.navlink, .navlink-haupt { white-space: nowrap; }

/* Fünf Karten: oben drei, unten zwei, statt vier und einer verwaisten. */
@media (min-width: 900px) {
  .reihe-fuenf { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .reihe-fuenf > .karte { grid-column: span 2; }
  .reihe-fuenf > .karte:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 560px) and (max-width: 899px) {
  .reihe-fuenf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reihe-fuenf > .karte:last-child { grid-column: 1 / -1; }
}

/* Ankaufsprofil: Eckdaten als Zeilen mit Linien, keine Kacheln. */
.eckdaten { margin: 26px 0 0; max-width: 860px; border-top: 1px solid var(--linie); }
.eckdaten > div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 4px 28px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linie);
}
.eckdaten dt {
  font-size: 14px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--akzent-tief);
  padding-top: 4px;
}
.eckdaten dd { margin: 0; font-size: 18px; color: var(--tinte); }
@media (max-width: 620px) {
  .eckdaten > div { grid-template-columns: minmax(0, 1fr); }
  .eckdaten dt { padding-top: 0; }
}

/* Drei Punkte nebeneinander, auf schmalen Geräten untereinander. */
.punkte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3.4vw, 44px);
  margin-top: 28px;
}
.punkt { border-top: 2px solid var(--akzent); padding-top: 16px; }
.punkt p { color: var(--tinte2); margin: 0; max-width: 38ch; }
@media (max-width: 760px) { .punkte { grid-template-columns: minmax(0, 1fr); } }

/* Häufige Fragen: details/summary, ohne Skript bedienbar. */
.fragen { margin-top: 24px; max-width: 820px; border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 17px 2px;
  font-family: var(--titel-schrift);
  font-size: 19px; line-height: 1.35;
  color: var(--tinte);
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: "+";
  flex: none;
  font-family: var(--text-schrift);
  font-size: 24px; line-height: 1;
  color: var(--akzent-tief);
}
.fragen details[open] summary::after { content: "\2212"; }
.fragen summary:hover { color: var(--akzent-tief); }
.fragen details p { color: var(--tinte2); margin: 0; padding: 0 2px 20px; max-width: 64ch; }

/* Hinweis unter dem Rechner: ruhig, ohne Fläche, Linie links. */
.rechenhinweis {
  max-width: 640px;
  margin-top: 28px;
  padding-left: 18px;
  border-left: 1px solid var(--linie);
  font-size: 15px; line-height: 1.6;
  color: var(--grau);
}
.rechenhinweis p { margin: 0 0 10px; }
.rechenhinweis p:last-child { margin-bottom: 0; }
.rechenhinweis .rechenhinweis-titel {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 8px;
}

/* Formular: Hinweis unter einem Feld, Anhänge. */
.feld-hinweis { font-size: 15px; line-height: 1.45; color: var(--grau); margin: 0; }
.feld .wahlfrei { font-weight: 400; color: var(--grau); }
input[type="file"] {
  font-family: var(--text-schrift);
  font-size: 16px; color: var(--tinte2);
  width: 100%;
  border: 1px dashed var(--linie);
  border-radius: var(--radius);
  padding: 11px 13px;
  background: var(--papier);
}
input[type="file"]::file-selector-button {
  font-family: var(--text-schrift);
  font-size: 16px; font-weight: 600;
  color: var(--tinte);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 7px 13px; margin-right: 12px;
  cursor: pointer;
}
.anhang-liste { list-style: none; margin: 0; padding: 0; }
.anhang-liste li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 13px; margin-bottom: 8px;
  border: 1px solid var(--linie); border-radius: var(--radius);
  font-size: 16px;
}
.anhang-liste .anhang-name { overflow-wrap: anywhere; }
.anhang-liste .anhang-groesse { color: var(--grau); white-space: nowrap; }
.anhang-liste button {
  flex: none;
  font-family: var(--text-schrift); font-size: 15px;
  color: var(--akzent-tief);
  background: none; border: none; padding: 4px 2px;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.anhang-fehler { font-size: 15px; line-height: 1.45; color: var(--warnung); margin: 0; }

/* Objektarten im Ankaufsprofil */
.eckdaten-liste { list-style: none; margin: 0; padding: 0; }
.eckdaten-liste li { padding: 2px 0; }
.fokus {
  display: inline-block; margin-left: 8px; vertical-align: 2px;
  font-size: 13px; font-weight: 600; line-height: 1.5;
  color: var(--akzent-tief);
  border: 1px solid var(--akzent); border-radius: 4px; padding: 0 7px;
}

/* Erstes Bild des Rundgangs als Hintergrund der Bühne, damit beim Laden
   kein Platzhalter aufblitzt. Film und Bildfolge legen sich deckungsgleich
   darüber. */
.hero-medium { background: var(--warm) url("../medien/hero.jpg") center / cover no-repeat; }
@media (max-width: 700px) {
  .hero-medium { background-image: url("../medien/rundgang/bild-000.jpg"); }
}

/* Zeilenumbruch: kein einzelnes Wort allein auf der letzten Zeile. */
p, dd, li, summary, figcaption, label { text-wrap: pretty; }
.hero-blase p { text-wrap: balance; }

/* ---------- Schmale Geräte ---------------------------------------------- */
@media (max-width: 700px) {
  .abschnitt { padding-block: 46px; }
  .abschnitt-eng { padding-block: 36px; }
  .reihe { gap: 14px; }
}
@media (max-width: 560px) {
  /* Ankaufskarten: Zeichen links, Text rechts. Sechs Karten brauchen so
     gut ein Drittel weniger Höhe. */
  .kauf-karte {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 16px; row-gap: 4px;
    align-items: start;
    padding: 18px;
  }
  .kauf-ikone { width: 40px; height: 40px; grid-row: 1 / span 2; }
  .kauf-karte h3 { font-size: 19px; }
  .kauf-karte h3, .kauf-karte .klein { grid-column: 2; }
}

/* Sechs Ankaufskarten: drei und drei statt vier und zwei. */
@media (min-width: 900px) { .kauf-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 561px) and (max-width: 899px) { .kauf-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Ausrichtung --------------------------------------------------- */
/* Schmale Textspalten beginnen an derselben linken Kante wie Kopf, Fuss und
   alle übrigen Abschnitte. Vorher klebten sie auf breiten Bildschirmen am
   linken Fensterrand, während der Rest mittig stand. */
.mass.schmal { max-width: var(--breit); margin-inline: auto !important; }
.mass.schmal > * { max-width: 640px; }

/* Das Haus im Zeichen beginnt 5.4px innerhalb seiner Fläche. Der Versatz
   stellt seine linke Kante bündig auf die Textkante darunter. */
.marke-zeichen { margin-left: -5.4px; }

/* Die Leiste unten: beide Beschriftungen bleiben auch auf sehr schmalen
   Telefonen einzeilig. */
.daumenleiste a { white-space: nowrap; padding-inline: 6px; }
@media (max-width: 350px) { .daumenleiste a { font-size: 15px; } }