/* ============================================================
   LIVÉRA Property Care — Komponenten
   Atmosphäre · Intro-Sequenz · Kopf · Buttons · Kacheln · Fuß · Nach oben
   ============================================================ */

/* ============================================================
   1 · ATMOSPHÄRE
   Der geblurrte Doppelring, der Rauch und das Bühnenlicht aus
   dem Countdown. Liegt hinter allem, reagiert auf nichts.
   ============================================================ */

.atmo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Ladekreis und Rauchbänder sind seit dem Meeting vom 04.09.2026
   entfernt („komplett rausnehmen"). Geblieben sind Glow und Vignette —
   ohne sie wäre die Bühne eine tote Fläche. */

/* --- Bühnenlicht: Glow, Vignette, Bodenverlauf --- */
.atmo-glow {
  position: absolute;
  left: 50%; top: 42%;
  width: min(90vw, 900px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    var(--akzent-a08) 0%,
    rgba(228, 188, 116, 0.04) 35%,
    transparent 65%);
}

/* Die Vignette stammt aus dem Countdown, wo sie eine einzelne, mittig
   stehende Komposition gerahmt hat. Auf einer scrollenden Seite mit
   Abschnitten hat sie bei 30 % Startpunkt und 0,72 Deckkraft jeden
   Aufhellungsversuch der Bühne wieder aufgefressen — an den Rändern
   kam von #191A17 nur noch #111 an. Sie beginnt jetzt später und
   endet schwächer: Rahmen ja, Verdunklung nein. */
.atmo-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 52%, var(--vignette) 100%);
}

/* Inhalt liegt immer über der Atmosphäre. */
.seite { position: relative; z-index: 1; }

/* --- Sektionslicht -----------------------------------------------
   Die Atmosphäre oben liegt fix hinter der ganzen Seite. Einzelne
   Abschnitte brauchen darüber hinaus eigenes Licht: sonst fällt ein
   dunkler Abschnitt hinter einem hellen Akt auf die blanke Bühne
   zurück und wirkt wie ein Loch.

   Der Schein ist eine sehr weite, sehr langsam atmende Wäsche. Man
   sieht keine Bewegung — man merkt nur, dass die Fläche nicht tot
   ist. Die Position steht über --lx/--ly, damit jeder Abschnitt sein
   Licht dorthin legen kann, wo sein Schwerpunkt liegt.
   ------------------------------------------------------------------ */

.hat-licht {
  position: relative;
  overflow: hidden;
}

.sektion-licht {
  --lx: 74%;  --ly: 38%;
  --lx2: 10%; --ly2: 86%;

  position: absolute;
  inset: -18% -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(44% 50% at var(--lx)  var(--ly),  var(--licht-salbei) 0%, transparent 70%),
    radial-gradient(40% 46% at var(--lx2) var(--ly2), var(--licht-gold)   0%, transparent 72%),
    radial-gradient(88% 72% at 55% 46%,               var(--licht-weit)   0%, transparent 76%);
  animation: sektion-atem 22s ease-in-out infinite;
}

/* Wohin der Schwerpunkt fällt. Jeder Abschnitt legt sein Licht
   dorthin, wo sein Inhalt sitzt — sonst leuchtet die Fläche und nicht
   die Sache. */
.sektion-licht--kopf  { --lx: 22%; --ly: 16%; --lx2: 88%; --ly2: 74%; }
.sektion-licht--mitte { --lx: 50%; --ly: 52%; --lx2: 12%; --ly2: 14%; }
.sektion-licht--tief  { --lx: 78%; --ly: 74%; --lx2: 14%; --ly2: 24%; }

@keyframes sektion-atem {
  0%, 100% { opacity: 0.7; transform: scale(1)    translate3d(0, 0, 0); }
  50%      { opacity: 1;   transform: scale(1.08) translate3d(-1.6%, 1.4%, 0); }
}

/* Weicher Übergang statt Naht (Meeting 04.09.2026: „Section-Übergänge
   smoother"). Oben läuft ein breiter, sehr schwacher Schatten in den
   Abschnitt hinein — die Kante zwischen zwei Bühnen verschwimmt, ohne
   dass eine Linie den Wechsel markiert. */
.hat-licht::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: clamp(120px, 14vh, 200px);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--saum-schatten) 0%, transparent 100%);
}

/* Der Inhalt liegt über dem Schein. */
.hat-licht > .huelle { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .sektion-licht { animation: none; }
}

/* ============================================================
   2 · INTRO-SEQUENZ
   Das Logo steht groß in der Mitte und fährt dann an seinen
   Platz oben links. Alles andere blendet danach ein.
   Es bewegt sich genau ein Objekt.
   ============================================================ */

/* Zustand während der Sequenz — wird per Inline-Script vor dem
   ersten Frame gesetzt, damit nichts aufblitzt. */
.ist-intro, .ist-intro body { overflow: hidden; }

/* Der Kopf bekommt einen z-index und damit einen eigenen Stapel-
   kontext. Damit das Logo trotzdem über dem Vorhang liegt, wird
   der ganze Kopf angehoben — und für die Dauer der Sequenz
   unsichtbar gemacht, bis auf die Marke. */
.ist-intro .kopf {
  z-index: 95;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* `.seite` steht hier bewusst NICHT mehr dabei.

   Der Vorhang ist eine deckende, fest positionierte Flaeche auf
   z-index 90 — er verdeckt die Seite ohnehin vollstaendig. Sie
   zusaetzlich auf Deckkraft 0 zu setzen war visuell folgenlos, kostete
   aber das Wichtigste, was eine Seite messbar hat: Chrome zaehlt
   durchsichtige Elemente nicht als groesstes Element, also begann der
   LCP erst NACH der Sequenz und dem anschliessenden Einblenden.
   Gemessen auf Handy/Fast 3G/CPU 4x: 5,8 s statt 1,7 s. Das ist der
   Unterschied zwischen "schlecht" und "gut" in den Core Web Vitals,
   auf jeder Seite, bei jedem Aufruf.

   Jetzt wird die Seite HINTER dem Vorhang aufgebaut. Die Sequenz
   laeuft unveraendert weiter, gleiche Zeiten, gleiche Kurven — nur
   liegt am Ende schon alles da, statt danach noch einmal einzublenden.
   Der Vorhang loest sich auf und gibt die fertige Seite frei; das
   doppelte Aufblenden entfaellt.

   Kopf und Fuss bleiben verborgen: sie liegen ueber dem Vorhang und
   wuerden sonst waehrend der Fahrt der Marke mitlaufen. */
.ist-intro .kopf-nav,
.ist-intro .kopf-werkzeuge,
.ist-intro .fuss { opacity: 0; }

.intro-fertig .kopf-nav,
.intro-fertig .kopf-werkzeuge,
.intro-fertig .fuss {
  opacity: 1;
  transition: opacity var(--dauer-blende) ease;
}

/* Während der Sequenz liegt die Atmosphäre über dem Vorhang —
   erst dadurch stehen Doppelring und Rauch hinter der Marke, so wie
   auf der Countdown-Seite. */
.ist-intro .atmo { z-index: 91; }

/* Der Vorhang: dunkle Fläche mit der Atmosphäre darauf.
   Er erscheint ausschließlich, wenn die Sequenz auch läuft — ohne
   JavaScript wird `ist-intro` nie gesetzt und der Vorhang bleibt
   aus, statt die Seite schwarz zuzudecken. */
.intro { display: none; }

.ist-intro .intro {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--buehne);
  background-image: var(--buehne-verlauf);
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 0.9s ease, visibility 0.9s;
}

/* Kopf, Fußleiste und Vorhang stehen im hellen Modus DUNKEL (30.09.2026,
   Meeting 29.09.; vorher 28./29.09. Waldgrün). Sie tragen dieselben
   Tokens wie der dunkle Modus — so sieht jede der drei Flächen aus wie
   dort, und das helle Logo (seiten.css, „Logo-Varianten“) steht immer
   auf dunklem Grund. Der Kopf ist voll deckend: mit dem 82-%-Wert des
   dunklen Modus schiene die Creme durch und er stünde grau.
   Falle: Das Logo, das im Vorhang fährt, IST das des Kopfes. Der Kopf
   bleibt deshalb schon während der Sequenz dunkel (unten), sonst stünde
   das helle Logo beim Auflösen des Vorhangs kurz auf Creme. */
:root[data-thema="hell"] .kopf,
:root[data-thema="hell"] .fuss,
:root[data-thema="hell"] .intro {
  color-scheme: dark;
  --buehne:         var(--p-nacht);
  --buehne-verlauf: linear-gradient(180deg,
                      var(--p-nacht-licht)  0%,
                      var(--p-nacht)       46%,
                      var(--p-nacht-tief) 100%);
  --buehne-2:       var(--p-nacht-band);
  --buehne-3:       var(--p-nacht-karte);
  --buehne-kopf:    var(--p-nacht);

  --text:           rgba(255, 255, 255, 0.94);
  --text-2:         rgba(255, 255, 255, 0.78);
  --text-3:         rgba(255, 255, 255, 0.56);
  --text-invers:    var(--p-schwarz);

  --akzent:         var(--p-salbei);
  --akzent-leise:   var(--p-salbei-mittel);
  --akzent-flaeche:      var(--p-salbei);
  --akzent-flaeche-text: var(--p-schwarz);
  --cta-flaeche:    transparent;
  --cta-text:       var(--p-gold);
  --gold:           var(--p-gold);

  --linie:          rgba(255, 255, 255, 0.12);
  --linie-fein:     rgba(255, 255, 255, 0.07);
  --linie-akzent:   rgba(174, 191, 169, 0.35);
  --flaeche:        rgba(255, 255, 255, 0.022);
  --flaeche-hover:  rgba(255, 255, 255, 0.05);
  --flaeche-licht:  linear-gradient(180deg,
                      rgba(255, 255, 255, 0.033) 0%,
                      rgba(255, 255, 255, 0) 100%);
  --kantenlicht:    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --akzent-a08:     rgba(174, 191, 169, 0.08);
  --akzent-a12:     rgba(174, 191, 169, 0.12);
  --akzent-a22:     rgba(174, 191, 169, 0.22);
  --gold-a22:       rgba(228, 188, 116, 0.22);
  --gold-a28:       rgba(228, 188, 116, 0.28);
  color: var(--text);
}

:root.ist-intro[data-thema="hell"] .kopf { background: var(--buehne-kopf); }

.intro[hidden] { display: none; }

.intro.ist-weg {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Der Dreiklang unter dem Logo. */
.intro-claim {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 0);
  margin-top: clamp(90px, 15vw, 150px);
  font-family: var(--schrift-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  color: var(--text-2);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.intro-claim.ist-da { opacity: 1; }

/* Das Logo selbst sitzt im Kopf und wird nur transformiert.
   Es wird nie dupliziert — deshalb gibt es keinen Sprung am Ende. */
.ist-intro .kopf-marke {
  position: relative;
  z-index: 95;
}

.kopf-marke-bild {
  transition: none;
  will-change: transform;
}

.ist-intro .kopf-marke-bild { opacity: 0; }

.intro-schritt-auf .kopf-marke-bild {
  opacity: 1;
  transition: opacity 0.6s ease;
}

.intro-schritt-fahrt .kopf-marke-bild {
  opacity: 1;
  transform: none !important;
  transition: transform var(--dauer-lang) var(--kurve), opacity 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .ist-intro .kopf-nav,
  .ist-intro .kopf-werkzeuge,
  .ist-intro .fuss { opacity: 1; }
  .ist-intro .kopf-marke-bild { opacity: 1; transform: none !important; }
  .ist-intro body { overflow: auto; }
}

/* ============================================================
   3 · KOPF
   „Navbar präsenter" — höherer Balken, eigene Fläche, klare
   Kante nach unten.
   ============================================================ */

.kopf {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  background: var(--buehne-kopf);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--linie-fein);
  transition: height var(--dauer) var(--kurve),
              background-color var(--dauer) var(--kurve-sanft),
              border-color var(--dauer) var(--kurve-sanft);
}

/* Beim Scrollen rückt der Balken enger zusammen und wird dichter. */
.kopf.ist-gescrollt {
  height: var(--kopf-hoehe-klein);
  background: var(--buehne);
  border-bottom-color: var(--linie);
}

/* Drei Spuren: Marke ganz links, Werkzeuge ganz rechts, Navigation
   in der Mitte. Die beiden Aussenspalten sind gleich breit (1fr),
   deshalb steht die Navigation echt mittig — und weil das Raster
   Platz reserviert statt zu ueberlagern, weicht sie bei engen
   Breiten aus, statt unter die Marke zu rutschen. */
.kopf-innen {
  width: 100%;
  max-width: var(--breite-kopf);
  margin-inline: auto;
  padding-inline: var(--rand-kopf);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* Alle vier Stellgroessen des Kopfes — Abstand, Wortmarke,
     Menueabstand, Sperrung — fahren auf derselben Strecke
     (1000 bis rund 1450 px) auf, damit beim Ziehen des Fensters
     nichts springt. */
  gap: clamp(1.25rem, calc(3.9vw - 19px), var(--raum-4));
}

.kopf-marke {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 44px;   /* Fingerkuppe, nicht Logohöhe */
}

/* Die Wortmarke ist das Ziel der Intro-Sequenz und muss dort tragen.
   96 px ist zugleich die Größe, ab der die originalgetreue Rahmen-
   linie von selbst sichtbar bleibt — darunter fällt sie unter einen
   Bildschirmpixel und verschwindet im Anti-Aliasing. Im eingeklappten
   Kopf bleibt sie deshalb mit 88 px nah an dieser Grenze. */
.kopf-marke-bild {
  height: clamp(76px, calc(4.5vw + 31px), 96px);
  width: auto;
  transition: height var(--dauer) var(--kurve);
}
.kopf.ist-gescrollt .kopf-marke-bild { height: clamp(70px, calc(4vw + 30px), 88px); }

/* Navigation */
.kopf-marke     { justify-self: start; }
.kopf-nav       { justify-self: center; }
.kopf-werkzeuge { justify-self: end; }

/* Der zweite CTA sitzt im Klappmenü und ist auf breiten
   Bildschirmen überflüssig — dort steht er in den Werkzeugen. */
.kopf-nav > .btn { display: none; }

.nav-liste {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, calc(3.9vw - 25px), 2.4rem);
}

.nav-liste > li { position: relative; }

.nav-punkt {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  /* Ein Menuepunkt ist eine Marke, kein Fliesstext: er bricht nie um.
     Wird es eng, ruecken stattdessen die Abstaende zusammen. */
  white-space: nowrap;
  /* 44 px Mindesthöhe für die Fingerkuppe — die Unterstreichung sitzt
     trotzdem eng an der Schrift, weil sie über ::after positioniert ist. */
  min-height: 44px;
  padding: 0.4rem 0;
  font-size: var(--t-label);
  font-weight: 400;
  /* 0.25em sind auf der vollen Menuezeile weit ueber 100 px — die
     Sperrung faehrt deshalb mit zurueck, statt umzubrechen. In px
     gerechnet, weil em die Schriftgroesse noch einmal mitfuehrt. */
  letter-spacing: clamp(1.5px, calc(0.34vw - 1.9px), 3px);
  text-transform: uppercase;
  color: var(--text-2);
  position: relative;
  transition: color var(--dauer-kurz) var(--kurve-sanft);
}

.nav-punkt::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 1px;
  background: var(--akzent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dauer) var(--kurve);
}

.nav-punkt:hover,
.nav-punkt:focus-visible { color: var(--text); }

.nav-punkt:hover::after,
.nav-punkt:focus-visible::after,
.nav-gruppe[data-offen="ja"] .nav-punkt::after,
.nav-punkt[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* Offene Klappe = aktiver Punkt: der Kopf zeigt weiter, wo man steht. */
.nav-gruppe[data-offen="ja"] .nav-punkt { color: var(--text); }

.nav-punkt[aria-current="page"] { color: var(--akzent); }

/* Die Wortmarke ist ein Bild und wuerde sich sonst stauchen lassen,
   sobald die Zeile eng wird — sie schrumpft nur ueber die Hoehe. */
.kopf-marke-bild { flex-shrink: 0; }

.nav-pfeil {
  width: 9px; height: 9px;
  transition: transform var(--dauer-kurz) var(--kurve-sanft);
}
.nav-gruppe[data-offen="ja"] .nav-pfeil { transform: rotate(180deg); color: var(--akzent); }

/* Aufklapp-Menü der Kompetenzfelder
   Die Klappe liegt nicht in der Seite, sie schwebt davor — deshalb hier
   weiche Ecken statt der Marken-Fase. Sie fährt aus der Oberkante heraus
   auf: leicht gestaucht, leicht angehoben, mit der Loader-Kurve. */
.nav-klappe {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  min-width: 340px;
  padding: 0.5rem;
  background: var(--buehne-3);
  border: 1px solid var(--linie);
  border-radius: var(--kante-tafel);
  box-shadow: var(--schatten);
  opacity: 0;
  visibility: hidden;
  transform-origin: top center;
  transform: translateX(-50%) translateY(-14px) scale(0.94);
  transition: opacity var(--dauer-kurz) var(--kurve-sanft),
              transform var(--dauer) var(--kurve),
              visibility var(--dauer-kurz);
}

/* Unsichtbare Brücke über den Spalt zum Menüpunkt: ohne sie fällt der
   Zeiger auf dem Weg nach unten aus der Gruppe und die Klappe schnappt zu. */
.nav-klappe::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -14px; height: 14px;
}

/* Kantenlicht auf der Oberseite — die Tafel bekommt eine Lichtkante,
   wie sie eine erhobene Fläche unter dem Kopfbalken hätte. */
.nav-klappe::after {
  content: "";
  position: absolute;
  left: 14%; right: 14%; top: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--linie-akzent), transparent);
}

/* Milchglas, wo der Browser es kann: die Tafel nimmt die Seite
   dahinter auf, statt sie zuzudecken. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-klappe {
    background: color-mix(in srgb, var(--buehne-3) 97%, transparent);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    backdrop-filter: blur(28px) saturate(1.4);
  }
}

.nav-gruppe[data-offen="ja"] .nav-klappe {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

.nav-klappe-punkt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  border-radius: var(--kante-zeile);
  color: var(--text-2);
  transition: background-color var(--dauer-kurz) var(--kurve-sanft),
              color var(--dauer-kurz) var(--kurve-sanft),
              transform var(--dauer-kurz) var(--kurve);
}

/* Der Akzentstrich wächst aus der Mitte — dieselbe Geste wie die
   Unterstreichung in der Hauptnavigation, nur hochkant. */
.nav-klappe-punkt::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 58%;
  border-radius: 2px;
  background: var(--akzent);
  transform: translateY(-50%) scaleY(0);
  transition: transform var(--dauer-kurz) var(--kurve);
}

.nav-klappe-punkt:hover,
.nav-klappe-punkt:focus-visible {
  background: var(--flaeche-hover);
  color: var(--text);
  transform: translateX(4px);
}
.nav-klappe-punkt:hover::before,
.nav-klappe-punkt:focus-visible::before { transform: translateY(-50%) scaleY(1); }

.nav-klappe-punkt .icon {
  color: var(--akzent);
  flex-shrink: 0;
  transition: transform var(--dauer) var(--kurve);
}
.nav-klappe-punkt:hover .icon,
.nav-klappe-punkt:focus-visible .icon { transform: scale(1.12); }

/* Die Zeilen kommen versetzt nach — die Tafel ist zuerst da, der
   Inhalt sortiert sich hinein. `backwards` hält den Startzustand
   während der Verzögerung; beim Schließen fällt alles zusammen
   mit der Tafel weg, statt vorher zu flackern. */
@keyframes nav-klappe-zeile-ein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-gruppe[data-offen="ja"] .nav-klappe-punkt {
  animation: nav-klappe-zeile-ein var(--dauer) var(--kurve) backwards;
}
.nav-gruppe[data-offen="ja"] .nav-klappe-punkt:nth-child(1) { animation-delay: 0.05s; }
.nav-gruppe[data-offen="ja"] .nav-klappe-punkt:nth-child(2) { animation-delay: 0.09s; }
.nav-gruppe[data-offen="ja"] .nav-klappe-punkt:nth-child(3) { animation-delay: 0.13s; }
.nav-gruppe[data-offen="ja"] .nav-klappe-punkt:nth-child(4) { animation-delay: 0.17s; }
.nav-gruppe[data-offen="ja"] .nav-klappe-punkt:nth-child(5) { animation-delay: 0.21s; }
.nav-gruppe[data-offen="ja"] .nav-klappe-punkt:nth-child(6) { animation-delay: 0.25s; }
.nav-gruppe[data-offen="ja"] .nav-klappe-punkt:nth-child(7) { animation-delay: 0.29s; }
.nav-gruppe[data-offen="ja"] .nav-klappe-punkt:nth-child(8) { animation-delay: 0.33s; }

/* Der Versatz ist Zierde, keine Information: wer Bewegung abbestellt
   hat, bekommt alle Zeilen sofort. */
@media (prefers-reduced-motion: reduce) {
  .nav-gruppe[data-offen="ja"] .nav-klappe-punkt { animation-delay: 0s !important; }
  .nav-klappe-punkt:hover,
  .nav-klappe-punkt:focus-visible { transform: none; }
}

.nav-klappe-titel {
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.kopf-werkzeuge {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex-shrink: 0;
}

/* Umschalter hell / dunkel */
.thema-schalter {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: var(--kante);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--dauer-kurz) var(--kurve-sanft),
              color var(--dauer-kurz) var(--kurve-sanft),
              background-color var(--dauer-kurz) var(--kurve-sanft);
}
.thema-schalter:hover { border-color: var(--akzent); color: var(--akzent); }
.thema-schalter .icon-mond  { display: none; }
:root[data-thema="hell"] .thema-schalter .icon-mond  { display: block; }
:root[data-thema="hell"] .thema-schalter .icon-sonne { display: none; }

/* Menüknopf für schmale Bildschirme.
   Die drei Striche liegen absolut übereinander — nur so treffen sie
   sich beim Öffnen exakt in der Mitte zum Kreuz. */
.menue-knopf {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: var(--kante);
  color: var(--text);
  cursor: pointer;
}

.menue-strich {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 1px;
  margin-left: -8.5px;
  background: currentColor;
  transition: transform var(--dauer-kurz) var(--kurve-sanft),
              opacity var(--dauer-kurz) var(--kurve-sanft);
}

.menue-strich:nth-child(1) { transform: translateY(-6px); }
.menue-strich:nth-child(2) { transform: translateY(0); }
.menue-strich:nth-child(3) { transform: translateY(6px); }

.menue-knopf[aria-expanded="true"] .menue-strich:nth-child(1) { transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-strich:nth-child(2) { opacity: 0; }
.menue-knopf[aria-expanded="true"] .menue-strich:nth-child(3) { transform: rotate(-45deg); }

@media (max-width: 1000px) {
  .menue-knopf { display: block; }

  :root { --kopf-hoehe: 104px; --kopf-hoehe-klein: 86px; }
  .kopf-marke-bild { height: 76px; }
  .kopf.ist-gescrollt .kopf-marke-bild { height: 72px; }

  /* backdrop-filter macht den Kopf zum Bezugsrahmen für alles,
     was darin `position: fixed` ist — das Klappmenü bekäme dadurch
     die Höhe des Kopfes und damit gar keine. Auf schmalen
     Bildschirmen also lieber eine deckende Fläche als Weichzeichner. */
  .kopf {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--buehne);
  }

  /* Das Klappmenue ist hier `position: fixed` und faellt aus dem
     Raster — Marke und Werkzeuge teilen sich die Zeile allein. */
  .kopf-innen { display: flex; }

  /* Im Klappmenue steht jeder Punkt auf eigener Zeile und hat die
     volle Breite — dort darf „IMMOBILIENKOMPASS" auf 320 px wieder
     umbrechen, statt ueber den Rand zu laufen. */
  .kopf-nav .nav-punkt { white-space: normal; }
  .kopf-werkzeuge { margin-left: auto; }

  .kopf-nav {
    position: fixed;
    inset: var(--kopf-hoehe) 0 0 0;
    height: calc(100dvh - var(--kopf-hoehe));
    max-height: calc(100dvh - var(--kopf-hoehe));
    /* Das `justify-self: center` aus dem Kopfraster gilt auch fuer
       diese feste Flaeche und wuerde sie auf Inhaltsbreite schrumpfen
       und mittig setzen — hier soll sie den Schirm fuellen. */
    justify-self: stretch;
    margin: 0;
    background: var(--buehne);
    padding: var(--raum-4) var(--rand) calc(var(--raum-5) + env(safe-area-inset-bottom, 20px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dauer) var(--kurve-sanft),
                transform var(--dauer) var(--kurve),
                visibility var(--dauer);
  }
  .kopf-nav[data-offen="ja"] { opacity: 1; visibility: visible; transform: none; }

  .nav-liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-liste > li { border-bottom: 1px solid var(--linie-fein); }

  .nav-punkt {
    width: 100%;
    justify-content: space-between;
    min-height: 56px;
    padding: var(--raum-3) 0;
    font-size: 1rem;
    letter-spacing: 0.12em;
  }
  .nav-punkt::after { display: none; }

  .nav-pfeil { width: 15px; height: 15px; color: var(--akzent); }

  /* Schmal wird die Tafel zur Schublade: sie fährt in der Liste auf,
     statt vor ihr zu schweben — kein Sprung, kein hartes Ein-/Ausblenden. */
  .nav-klappe {
    position: static;
    display: block;
    transform: none;
    min-width: 0;
    /* `inherit` statt `visible`: das Klappmenue blendet sich ueber
       `visibility` aus — eine fest sichtbare Klappe wuerde sonst als
       Geist ueber der Seite stehenbleiben. */
    visibility: inherit;
    opacity: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: hidden;
    max-height: 0;
    padding: 0 0 0 clamp(0.25rem, 1.5vw, var(--raum-2));
    transition: max-height var(--dauer) var(--kurve),
                opacity var(--dauer-kurz) var(--kurve-sanft),
                padding-bottom var(--dauer) var(--kurve);
  }
  .nav-klappe::before,
  .nav-klappe::after { display: none; }

  .nav-klappe-punkt {
    min-height: 48px;
    padding: 0.65rem 0.5rem;
    min-width: 0;
  }

  .nav-gruppe[data-offen="ja"] .nav-klappe {
    max-height: 35rem;
    opacity: 1;
    visibility: inherit;
    padding-bottom: var(--raum-3);
    transform: none;
  }

  .kopf-nav > .btn {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: var(--raum-4);
  }
}

/* Abstandhalter unter dem festen Kopf */
.kopf-luecke { height: var(--kopf-hoehe); }

/* ============================================================
   4 · BUTTONS
   Der goldene Button ist der Primär-CTA. Genau einer pro
   Bildschirm — der Effekt lebt von seiner Seltenheit.
   ============================================================ */

/* Seit dem Meeting vom 04.09.2026 sind Ruhe- und Hover-Fassung
   vertauscht: der Button steht jetzt gefüllt (Salbei, dunkle Schrift)
   und wird beim Überfahren zur goldenen Umriss-Fassung mit Lichtstreifen
   — vorher war es umgekehrt. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  padding: 0.95rem clamp(1.2rem, 3.5vw, 2.75rem);
  border: 1px solid var(--akzent);
  border-radius: var(--kante);
  background: var(--akzent);
  color: var(--text-invers);
  font-size: clamp(0.75rem, 1.8vw, 0.8125rem);
  font-weight: 400;
  letter-spacing: clamp(0.12em, 0.4vw, var(--sperr-mittel));
  text-transform: uppercase;
  text-align: center;
  line-height: 1.35;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
  transition: background-color var(--dauer) var(--kurve-sanft),
              color var(--dauer) var(--kurve-sanft),
              border-color var(--dauer) var(--kurve-sanft),
              box-shadow var(--dauer) var(--kurve-sanft);
}

.btn:hover,
.btn:focus-visible {
  background: transparent;
  border-color: var(--akzent);
  color: var(--akzent);
}

/* --- Der Primär-Button --- */
.btn--primaer {
  animation: btn-puls 4s ease-in-out infinite;
}

/* Der Lichtstreifen steht fast die Hälfte der Zeit außerhalb des
   Buttons — dadurch blitzt er auf, statt zu rotieren. */
.btn--primaer::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.34) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: btn-glanz 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes btn-glanz {
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

@keyframes btn-puls {
  0%, 100% { box-shadow: 0 0 0 rgba(174, 191, 169, 0); }
  50%      { box-shadow: 0 0 22px var(--akzent-a22); }
}

/* Hover: die frühere Ruhe-Fassung — Goldverlauf von unten, Salbei-Schrift. */
.btn--primaer:hover,
.btn--primaer:focus-visible {
  animation-play-state: paused;
  background: linear-gradient(180deg, rgba(228, 188, 116, 0.02) 0%, var(--gold-a22) 100%);
  border-color: var(--akzent);
  color: var(--akzent);
  box-shadow: 0 0 22px var(--gold-a28), inset 0 0 10px rgba(228, 188, 116, 0.08);
}

/* Ohne Portaladresse ist dies ein Status, keine vorgetäuschte Aktion. */
.btn.portal-status,
.btn.portal-status:hover {
  cursor: default;
  animation: none;
  background: transparent;
  /* Gestrichelt: ein Platzhalter, kein Knopf. */
  border-style: dashed;
  border-color: var(--linie);
  color: var(--text-2);
  box-shadow: none;
  user-select: none;
}
.btn.portal-status::before { display: none; }

/* Auf heller Bühne ist der Primär-CTA salbeigefüllt statt golden.
   Gold gehört auf Schwarz — auf Weiß wird daraus ein Lehmton, und
   der Lichtstreifen ist ohnehin unsichtbar. */
:root[data-thema="hell"] .btn--primaer {
  background: var(--cta-flaeche);
  border-color: var(--cta-flaeche);
  color: var(--cta-text);
  animation: none;
}

:root[data-thema="hell"] .btn--primaer::before { display: none; }

/* In einem umgedrehten Akt (dort ist die Bühne wieder dunkel) gilt
   die Fassung der dunklen Bühne: gefüllt in Salbei, mit Lichtstreifen. */
:root[data-thema="hell"] .akt-invers .btn--primaer {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--text-invers);
  animation: btn-puls 4s ease-in-out infinite;
}
:root[data-thema="hell"] .akt-invers .btn--primaer::before { display: block; }

/* Hover auf heller Bühne: die Füllung weicht dem Umriss. */
:root[data-thema="hell"] .btn--primaer:hover,
:root[data-thema="hell"] .btn--primaer:focus-visible {
  background: transparent;
  border-color: var(--akzent);
  color: var(--akzent);
  box-shadow: none;
}
:root[data-thema="hell"] .btn.portal-status,
:root[data-thema="hell"] .btn.portal-status:hover {
  background: transparent;
  border-color: var(--linie);
  color: var(--text-2);
}

/* --- Nebenformen --- */
.btn--geist {
  background: transparent;
  border-color: var(--linie);
  color: var(--text-2);
}
.btn--geist:hover,
.btn--geist:focus-visible {
  background: var(--flaeche-hover);
  border-color: var(--akzent);
  color: var(--text);
}

.btn--voll { width: 100%; }
.btn--klein { padding: 0.7rem 1.4rem; font-size: 0.75rem; border-radius: var(--kante-fein); }

@media (max-width: 1000px) {
  .kopf-werkzeuge .btn--primaer { display: none; }
}

.btn-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
  align-items: center;
}

@media (max-width: 520px) {
  .btn-reihe {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .btn-reihe .btn {
    width: 100%;
  }
}

/* ============================================================
   5 · ICONS
   „Icons verwenden und nicht so schlicht": ein eigenes Linien-
   Icon je Kompetenzfeld, das überall identisch wiederkehrt.
   ============================================================ */

.icon {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: square;
  stroke-linejoin: miter;
  flex-shrink: 0;
}

.icon--gross { width: 44px; height: 44px; stroke-width: 1; }

/* Das gerahmte Zeichen: der eckige Rahmen aus dem Logo als Anker über
   einem Kompass-Schritt oder einer Karte. Er steht neben der grossen
   Ziffer, nicht statt ihrer — die Ziffer sagt „wo bin ich", das Zeichen
   sagt „worum geht es". */
.kompass-marke-rahmen {
  display: inline-grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  flex-shrink: 0;
  border: 1px solid var(--linie-akzent);
  color: var(--akzent);
}

.kompass-schritt-icon { width: 1.6rem; height: 1.6rem; stroke-width: 1; }

/* ============================================================
   6 · KACHELN
   ============================================================ */

.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--flaeche);
  background-image: var(--flaeche-licht);
  box-shadow: var(--kantenlicht);
  border: 1px solid var(--linie-fein);
  overflow: hidden;

  /* Achtung: Diese Kurzschreibweise ersetzt die aus `.blende`
     vollstaendig. Eintritt UND Hover muessen deshalb hier stehen —
     sonst blendet die Kachel nicht ein, sie springt.

     Der Hover hebt ueber `translate`, nicht ueber `transform`: so
     bleibt `transform` allein dem Eintritt samt Staffel-Einsatz
     vorbehalten und der Hover antwortet sofort. */
  transition: border-color var(--dauer) var(--kurve-sanft),
              background-color var(--dauer) var(--kurve-sanft),
              box-shadow var(--dauer) var(--kurve-sanft),
              translate var(--dauer) var(--kurve),
              opacity var(--dauer-blende) var(--kurve-sanft) var(--kachel-einsatz, 0ms),
              transform var(--dauer-lang) var(--kurve) var(--kachel-einsatz, 0ms);
}

/* Der Name ist bewusst auf die Kachel bezogen: benutzerdefinierte
   Eigenschaften vererben, und der schlichte Name ist auf der
   Manifestseite bereits fuer die Waage vergeben. Ein generischer
   Name trifft sich frueher oder spaeter selbst. */
.kachel.blende--staffel { --kachel-einsatz: calc(var(--i, 0) * 70ms); }

/* Das Bild führt. Es sitzt randlos oben und zoomt beim Überfahren
   sehr leicht — mehr Bewegung braucht eine Kachel nicht. */
.kachel-bild {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--buehne-2);
}

.kachel-bild img {
  width: 100%;
  /* Vorher 4/3. Im Hochformat-nahen Kachelbild stand das ganze Haus —
     mit Traufe, Sockel und dem Fassadenrhythmus über alle Etagen.
     Genau dort sitzen bei diesen Motiven die Ungereimtheiten. Das
     21:9-Band zeigt nur noch Material, Licht und Fensterrhythmus und
     behauptet damit nichts mehr über ein konkretes Gebäude.
     Welcher Streifen es wird, steht je Feld in inhalt.FELDER
     (`bildfokus`) und kommt hier als --fokus an. */
  aspect-ratio: 21 / 9;
  object-fit: cover;
  /* Vorher 0.88 — zusammen mit dem Abschluss darunter blieb von den
     Nachtaufnahmen zu wenig übrig, und die Reihe las sich als graue
     Fläche mit Text. Das Bild ist der Grund, warum die Kachel steht. */
  opacity: 0.96;
  /* Beim Eintritt zieht sich das Bild ganz leicht zusammen (1,07 → 1,01):
     ruhige Bewegung, die erst beim Einblenden der Kachel anläuft. */
  transform: scale(1.07);
  transition: transform 1.6s var(--kurve) var(--kachel-einsatz, 0ms), opacity var(--dauer) var(--kurve-sanft);
}
.kachel.ist-da .kachel-bild img,
.kein-js .kachel-bild img { transform: scale(1.01); }

/* Der Verlauf lässt das Foto in die Karte auslaufen. Auf dunkler
   Bühne trägt er; auf heller bleicht er die untere Bildhälfte aus,
   deshalb dort deutlich kürzer und schwächer. */
.kachel-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--buehne) 0%, transparent 60%);
  opacity: 0.5;
}

/* Der Abschluss läuft in die KARTE aus, nicht in die Bühne — auf Sand
   sind das zwei verschiedene Töne, und die Karte ist die hellere. */
:root[data-thema="hell"] .kachel-bild::after {
  background: linear-gradient(to top, var(--flaeche) 0%, transparent 28%);
  opacity: 0.45;
}

:root[data-thema="hell"] .kachel-bild img { opacity: 1; }

.kachel-inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  padding: var(--raum-4);
  flex: 1;
}

/* Das Icon steht über dem Titel, nicht daneben. Neben dem Titel bliebe
   für „Sondereigentumsmanagement" zu wenig Zeile, und der Umbruch
   landete mitten im Wort. */
.kachel-kopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--raum-2);
  min-width: 0;
}

/* Der offene Rahmen aus dem Logo: eine Ecke, die sich beim Hover schließt. */
.kachel::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 46px; height: 46px;
  border-top: 1px solid var(--linie-akzent);
  border-right: 1px solid var(--linie-akzent);
  opacity: 0;
  transform: translate(8px, -8px);
  transition: opacity var(--dauer) var(--kurve-sanft),
              transform var(--dauer) var(--kurve);
  z-index: 2;
}

.kachel:hover,
.kachel:focus-within {
  border-color: var(--linie-akzent);
  background-color: var(--flaeche-hover);
  translate: 0 -3px;
  box-shadow: var(--kantenlicht), 0 18px 44px -12px var(--akzent-a22);
}
.kachel:hover::after,
.kachel:focus-within::after { opacity: 1; transform: none; }
.kachel:hover .kachel-bild img,
.kachel:focus-within .kachel-bild img { transform: scale(1.05); opacity: 1; }

.kachel-icon { color: var(--akzent); width: 30px; height: 30px; }

/* Auf heller Bühne sind die Karten weiß — ohne eine Andeutung von
   Höhe schwämmen sie im Band. Sehr flach gehalten. */
:root[data-thema="hell"] .kachel,
:root[data-thema="hell"] .verwandt-karte {
  box-shadow: 0 1px 2px rgba(20, 21, 16, 0.04), 0 10px 28px rgba(20, 21, 16, 0.05);
}

:root[data-thema="hell"] .kachel:hover,
:root[data-thema="hell"] .verwandt-karte:hover {
  box-shadow: 0 2px 4px rgba(20, 21, 16, 0.05), 0 18px 40px rgba(20, 21, 16, 0.09);
}

.kachel-titel {
  min-width: 0;
  font-size: var(--t-h3);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
  hyphens: auto;
}

.kachel-claim {
  font-family: var(--schrift-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--akzent);
}

.kachel-text { color: var(--text-2); font-size: 0.98rem; }

.kachel-fuss { margin-top: auto; padding-top: var(--raum-3); }

/* Die ganze Kachel ist klickbar, ohne den Link zu verstecken. */
.kachel-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* ============================================================
   7 · FUSS
   Der Fuß ist kein Abstellraum. Er trägt dieselbe Bühne wie der
   Loader: eine Lichtkante oben, ein sehr schwacher Salbei-Schein
   dahinter, und genau eine Bewegung — der Strich, der zum Link
   läuft. Alles andere steht still.
   ============================================================ */

.fuss {
  position: relative;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  background: var(--buehne-2);
  padding-block: clamp(3rem, 5.5vw, 4.5rem) var(--raum-3);
}

/* Die Kante oben ist kein Rahmen, sondern ein Lichtsaum: an den
   Rändern nicht vorhanden, zur Mitte hin salbeifarben. */
.fuss-saum {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--linie-fein) 15%,
    var(--linie-akzent) 50%,
    var(--linie-fein) 85%,
    transparent 100%);
}

/* Der Schein liegt hinter der Wortmarke und atmet — dieselbe
   Größenordnung wie der Rauch im Loader: unter 10 % wirksame
   Deckkraft. Man soll ihn spüren, nicht sehen. */
.fuss-schein {
  position: absolute;
  left: -8%;
  bottom: -45%;
  width: min(820px, 78%);
  aspect-ratio: 2 / 1;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse at center,
    var(--akzent-a12) 0%, transparent 68%);
  filter: blur(60px);
  animation: fuss-atmen 38s ease-in-out infinite;
}

@keyframes fuss-atmen {
  0%, 100% { transform: translate3d(0, 0, 0)    scale(1);    opacity: 0.75; }
  50%      { transform: translate3d(4%, -3%, 0) scale(1.12); opacity: 1;    }
}

/* Im hellen Modus steht die Fußleiste dunkel (Tokens: gemeinsamer Block
   beim Intro-Vorhang, 30.09.2026). Der Farbwechsel zur hellen Seite ist
   selbst die Kante, der Lichtsaum oben fällt deshalb weg. */
:root[data-thema="hell"] .fuss-saum { opacity: 0; }

/* ---- Raster ---------------------------------------------------
   Das Loch rechts unten kam nicht von der Spaltenzahl, sondern von
   den 44 px Mindesthöhe je Zeile: sechs Kompetenzfelder wurden so
   264 px hoch, die Kontaktspalte nur 176 px. Mit ruhigen 30er
   Zeilen (siehe unten) stehen alle vier Blöcke innerhalb von rund
   40 px gleich hoch — das Raster schließt von selbst bündig ab. */
.fuss-raster {
  display: grid;
  gap: var(--raum-4) var(--raum-5);
  grid-template-columns: 1fr;
}

/* Zwei Spalten schon ab 560 px — der Fuss ist sonst auf dem Handy
   ein Kilometer Leerlauf. */
@media (min-width: 560px) {
  .fuss-raster { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  /* Die Markenspalte darf nie schmaler werden als ihr Dreiklang —
     „Verwalten · Erhalten · Steigern" steht auf dem Desktop in einer
     Zeile (Meeting 04.09.2026). */
  .fuss-raster { grid-template-columns: minmax(max-content, 1.35fr) 1.15fr 0.8fr 0.95fr; }
  .fuss-claim { flex-wrap: nowrap; white-space: nowrap; }
}

/* ---- Markenspalte --------------------------------------------- */

.fuss-marke-bild {
  height: 84px;
  width: auto;
  margin-bottom: var(--raum-2);
}

/* Der Dreiklang, nicht der Satz: drei Worte, dazwischen ein
   goldener Punkt. Gold ist im Fuß das einzige Detail — mehr
   verträgt die Marke nicht. */
.fuss-claim {
  font-family: var(--schrift-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.3;
  color: var(--akzent);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15em 0.7em;
  margin-bottom: var(--raum-2);
}

/* Das Trennzeichen ist kein Satzzeichen, sondern der Rahmen aus dem
   Logo auf 4 px heruntergebrochen — das einzige Gold im Fuss. */
.fuss-punkt {
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  background: var(--gold);
}

.fuss-ort {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--t-klein);
  color: var(--text-3);
}

.fuss-ort-icon { opacity: 0.85; }

/* ---- Spaltentitel und Listen ---------------------------------- */

.fuss-titel {
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: var(--sperr-mittel);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--raum-2);
}

.fuss-liste { display: grid; gap: 2px; }

.fuss-liste a {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding-block: 5px;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.35;
  transition: color var(--dauer-kurz) var(--kurve-sanft),
              transform var(--dauer-kurz) var(--kurve);
}

/* Die eine Bewegung im Fuß: ein Strich läuft von links auf den
   Link zu und schiebt ihn dabei um seine eigene Länge weiter.
   Nur transform — kein Layoutsprung, keine Nachbarn betroffen. */
.fuss-strich {
  position: absolute;
  left: -15px;
  top: 50%;
  width: 11px;
  height: 1px;
  background: var(--akzent);
  opacity: 0;
  transform: scaleX(0.15);
  transform-origin: left center;
  transition: opacity var(--dauer-kurz) var(--kurve-sanft),
              transform var(--dauer-kurz) var(--kurve);
}

.fuss-liste a:hover,
.fuss-liste a:focus-visible {
  color: var(--akzent);
  transform: translateX(15px);
}

.fuss-liste a:hover .fuss-strich,
.fuss-liste a:focus-visible .fuss-strich {
  opacity: 1;
  transform: scaleX(1);
}

/* ---- Kontakt: Telefon und Mail sind Handlungen, keine Fußnoten - */

.fuss-draht {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding-block: 7px;
  color: var(--text);
  font-size: 1.02rem;
  transition: color var(--dauer-kurz) var(--kurve-sanft);
}

.fuss-draht-icon {
  width: 1.05em;
  height: 1.05em;
  color: var(--akzent);
  transition: transform var(--dauer-kurz) var(--kurve);
}

.fuss-draht-wert {
  border-bottom: 1px solid transparent;
  transition: border-color var(--dauer-kurz) var(--kurve-sanft);
}

.fuss-draht:hover,
.fuss-draht:focus-visible { color: var(--akzent); }

.fuss-draht:hover .fuss-draht-wert,
.fuss-draht:focus-visible .fuss-draht-wert { border-bottom-color: currentColor; }

.fuss-draht:hover .fuss-draht-icon { transform: scale(1.12); }

.fuss-sozial {
  display: flex;
  gap: var(--raum-1);
  margin-top: var(--raum-2);
}

.fuss-sozial a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--linie);
  border-radius: var(--kante-fein);
  color: var(--text-2);
  transition: color var(--dauer-kurz) var(--kurve-sanft),
              border-color var(--dauer-kurz) var(--kurve-sanft),
              background-color var(--dauer-kurz) var(--kurve-sanft);
}

.fuss-sozial a:hover,
.fuss-sozial a:focus-visible {
  color: var(--akzent);
  border-color: var(--linie-akzent);
  background: var(--akzent-a08);
}

/* ---- Schlusszeile --------------------------------------------- */

.fuss-schluss {
  margin-top: var(--raum-4);
  padding-top: var(--raum-2);
  border-top: 1px solid var(--linie-fein);
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1) var(--raum-4);
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-klein);
  color: var(--text-3);
  /* Rechts Platz für den festen WhatsApp-Knopf (56 px + Rand, 30.09.2026):
     am Seitenende läge er sonst auf „Impressum · Datenschutz“. */
  padding-right: calc(56px + 1.75rem);
}

.fuss-recht {
  display: flex;
  gap: var(--raum-3);
}

.fuss-recht a {
  display: inline-flex;
  align-items: center;
  padding-block: 4px;
  color: var(--text-3);
  transition: color var(--dauer-kurz) var(--kurve-sanft);
}

.fuss-recht a:hover,
.fuss-recht a:focus-visible { color: var(--akzent); }

/* ---- Powered by: Verlauf aus dem Sawora-Auftritt --------------- */
.fuss-powered a {
  font-weight: 600;
  background: linear-gradient(to right, #3B82F6, #4F46E5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity var(--dauer-kurz) var(--kurve-sanft);
}

.fuss-powered a:hover,
.fuss-powered a:focus-visible { opacity: 0.8; }

/* ---- Powered by mittig (wie bei allen Kunden-Websites, 08.10.2026) ----
   Breit: Raster 1fr auto 1fr über die volle Zeile (Mitte exakt), der Platz für den
   WhatsApp-Knopf sitzt dann als Rand rechts an der Rechtsnavigation.
   Schmaler: eigene, über die volle Zeile zentrierte letzte Zeile. */
@media (min-width: 1000px) {
  .fuss-schluss { display: grid; grid-template-columns: 1fr auto 1fr; padding-right: 0; }
  .fuss-schluss > nav { justify-self: end; margin-right: calc(56px + 1.75rem); }
}
@media (max-width: 999px) {
  .fuss-powered { order: 3; flex: 0 0 calc(100% + 56px + 1.75rem); margin-right: calc(-56px - 1.75rem); text-align: center; }
}

/* ---- Touch: auf kleinen Geräten zählen die 44 px wieder -------- */

@media (max-width: 719px) {
  .fuss-liste a,
  .fuss-recht a { min-height: 44px; }
  .fuss-draht   { min-height: 46px; }
  .fuss-schluss { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .fuss-schein { animation: none; }
  .fuss-liste a:hover,
  .fuss-liste a:focus-visible { transform: none; }
  .fuss-draht:hover .fuss-draht-icon { transform: none; }
}


/* ============================================================
   Motive — Stimmungsbild statt Objektfoto

   Die Gebäudebilder sind keine Aufnahmen betreuter Objekte. Als
   ganzes Haus gezeigt geben sie sich als solche aus und halten der
   Prüfung nicht stand. Zwei Griffe nehmen ihnen diesen Anspruch:

   1. AUSSCHNITT — `--fokus` je Bild, gesetzt in inhalt.FELDER. Die
      fehleranfälligen Zonen (Dachkante, Bodenanschluss, durchgehende
      Fassade) liegen außerhalb des Rahmens.
   2. TON — kräftig entsättigt, sonst nichts.

      Der erste Versuch legte die Motive über sepia() + hue-rotate()
      auf den Markenton. Das Ergebnis war khakigelb: es las sich
      nicht als Gestaltung, sondern als verunglückter Weißabgleich —
      also nach schlechtem Foto statt nach Absicht. Reine
      Entsättigung trägt besser. Die verbleibenden 32 % Farbe halten
      genau so viel warmes Fensterlicht, dass es mit dem Gold der
      Seite zusammengeht, statt gegen das Salbei zu arbeiten.

      Zusammengehalten werden die sechs Motive nicht durch einen
      aufgezwungenen Farbton, sondern dadurch, dass alle DIESELBE
      Behandlung tragen. Das reicht als Serie.

   Das Porträt von Vanessa bekommt NICHTS davon ab. Es ist das
   einzige echte Bild der Seite und bleibt scharf, farbig und ganz —
   das ist die Aussage.
   ============================================================ */

.bild--motiv {
  object-position: var(--fokus, 50% 50%);
  /* Seit dem Meeting vom 04.09.2026 sind die Motive Tageslichtfotos
     („heller, freundlicher"). Die frühere starke Entfärbung (0,32)
     hätte sie wieder grau gemacht — die Farbe bleibt jetzt weitgehend
     stehen, nur leicht auf die Salbei-Bühne abgestimmt. */
  filter: saturate(0.82) contrast(1.02) brightness(1.02);
}

/* Auf Sand darf das Bild ganz es selbst sein. */
:root[data-thema="hell"] .bild--motiv {
  filter: saturate(0.9) contrast(1.02) brightness(1);
}

/* Korn. Der eigentliche Grund dafür: die Motive sind an den
   Putz- und Betonflächen unnatürlich glatt — dort steht schlicht
   kein Bildrauschen, wo eine Kamera welches hätte. Das Korn füllt
   genau diese Leere und nimmt der Fläche das Gerenderte. */
.motiv { position: relative; }

.motiv::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.26;
  mix-blend-mode: overlay;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E");
}

:root[data-thema="hell"] .motiv::before { opacity: 0.28; }

/* Korn ist Dekor. Wer Bewegung reduziert, will meist auch weniger
   Rauschen auf der Fläche — und auf sehr feinen Displays kostet es
   ohnehin nur Füllrate. */
@media (prefers-reduced-motion: reduce) {
  .motiv::before { opacity: 0.22; }
}


/* ============================================================
   Referenzen

   Solange `bausteine.REFERENZEN_DEMO` steht, sind das Platzhalter.
   Sie werden bewusst NICHT so gestaltet, dass sie echt aussehen:
   gestrichelte Kante, Platzhalter-Chip, Hinweiszeile darunter.
   Wer die Seite zeigt, soll auf den ersten Blick sehen, dass hier
   Aufbau und nicht Inhalt zu beurteilen ist.
   ============================================================ */

.referenzen-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--raum-3);
}

@media (max-width: 1000px) { .referenzen-raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .referenzen-raster { grid-template-columns: 1fr; } }

.referenz {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
  margin: 0;
  padding: var(--raum-4) var(--raum-3) var(--raum-3);
  background-color: var(--flaeche);
  background-image: var(--flaeche-licht);
  border: 1px solid var(--linie-fein);
  box-shadow: var(--kantenlicht);
}

/* Das Anführungszeichen als Marke, nicht als Satzzeichen: groß,
   aus dem Textfluss genommen, in der Serif der Zitate. */
/* Das hohe Zeichen (U+201C), nicht das deutsche tiefe. Es ist Dekor
   und aria-hidden, also zaehlt nur, wo es sitzt: das tiefe „ haengt
   an der Grundlinie und landete damit mitten im ersten Wort. */
.referenz-marke {
  position: absolute;
  top: calc(var(--raum-2) * -0.35);
  left: calc(var(--raum-3) - 0.55rem);
  font-family: var(--schrift-serif);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--akzent);
  opacity: 0.28;
  pointer-events: none;
}

.referenz-zitat { margin: 0; }

.referenz-zitat p {
  margin: 0;
  font-family: var(--schrift-serif);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--text-2);
}

.referenz-fuss {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: auto;
  padding-top: var(--raum-2);
  border-top: 1px solid var(--linie-fein);
}

.referenz-name {
  font-size: var(--t-klein);
  letter-spacing: var(--sperr-eng);
  text-transform: uppercase;
  color: var(--text);
}

.referenz-rolle { font-size: var(--t-klein); color: var(--text-3); }

.referenz-objekt {
  font-size: var(--t-label);
  letter-spacing: var(--sperr-mittel);
  text-transform: uppercase;
  color: var(--akzent-leise);
}

/* --- Der Platzhalter-Zustand --- */

.referenz--demo {
  border-style: dashed;
  border-color: var(--linie-akzent);
}

.referenz--demo::after {
  content: "Platzhalter";
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.3rem 0.6rem;
  font-size: var(--t-label);
  letter-spacing: var(--sperr-mittel);
  text-transform: uppercase;
  color: var(--akzent-flaeche-text);
  background: var(--akzent-flaeche);
  opacity: 0.85;
}

.referenzen-hinweis {
  margin-top: var(--raum-3);
  color: var(--text-3);
  font-style: italic;
}


/* Fußleiste: Gründungsjahr neben dem Copyright. Der Punkt dazwischen
   ist ein eigenes Element, damit er auf schmalen Geräten mit dem
   Umbruch verschwindet statt am Zeilenanfang zu stehen. */
.fuss-punkt { margin: 0 0.5em; opacity: 0.5; }
.fuss-jahr { white-space: nowrap; }

@media (max-width: 560px) {
  .fuss-punkt { display: none; }
  .fuss-jahr { display: block; margin-top: 0.35rem; }
}

/* ============================================================
   8 · NACH OBEN
   Der Knopf „Zum Seitenanfang" unten links — das Gegenstück zur
   Versionspille unten rechts, aus demselben Material: Kartenfläche,
   feine Linie, runde Form. Er erscheint erst, wenn der Kopf eine
   Bildschirmhöhe hinter einem liegt, und steigt dabei kurz auf;
   der Pfeil selbst steht still. Beim Überfahren füllt er sich in
   Salbei — Gold bleibt dem Primär-Button vorbehalten.
   ============================================================ */

.nach-oben {
  position: fixed;
  /* Links und unten derselbe Abstand: der Knopf sitzt in der Ecke,
     nicht am Seitenrand. Respektiert iOS Safe Area Insets. */
  left: max(1.25rem, env(safe-area-inset-left, 1.25rem));
  bottom: max(1.25rem, env(safe-area-inset-bottom, 1.25rem));
  z-index: 79;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--buehne-3);
  color: var(--akzent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dauer) var(--kurve-sanft),
              transform var(--dauer) var(--kurve),
              visibility 0s linear var(--dauer),
              background-color var(--dauer-kurz) var(--kurve-sanft),
              color var(--dauer-kurz) var(--kurve-sanft),
              border-color var(--dauer-kurz) var(--kurve-sanft);
}

.nach-oben.ist-da {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.nach-oben:hover,
.nach-oben:focus-visible {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--text-invers);
}

.nach-oben-icon {
  width: 1.15rem;
  height: 1.15rem;
  stroke-width: 1.25;
}

/* Während der Intro-Sequenz bleibt er weg — auch wenn der Browser
   die alte Scrollposition wiederherstellt. */
.ist-intro .nach-oben { opacity: 0; visibility: hidden; }

@media (max-width: 600px) {
  .nach-oben {
    left: max(0.75rem, env(safe-area-inset-left, 0.75rem));
    bottom: max(0.75rem, env(safe-area-inset-bottom, 0.75rem));
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nach-oben { transform: none; transition: none; }
}

/* ============================================================
   WHATSAPP (Meeting 29.09.2026)
   Fester Knopf unten rechts, Gegenstück zu „Nach oben" links. Er steht
   in beiden Modi auf einem dunklen Kreis (wie Kopf und Fußleiste) und
   trägt das WhatsApp-Grün nur im Zeichen selbst: erkennbar, aber ruhiger
   als ein knallgrüner Knopf auf Creme. Zeichen auf dem Kreis: 9,4:1.
   Der Dialog (native <dialog>) zeigt den QR-Code auf weißer Fläche —
   ein Scanner braucht hellen Grund, in beiden Modi.
   ============================================================ */

.wa-knopf {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right, 1.25rem));
  bottom: max(1.25rem, env(safe-area-inset-bottom, 1.25rem));
  z-index: 79;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--p-nacht);
  color: #25D366;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
  cursor: pointer;
  transition: border-color var(--dauer-kurz) var(--kurve-sanft),
              box-shadow var(--dauer-kurz) var(--kurve-sanft),
              opacity var(--dauer-kurz) var(--kurve-sanft);
}
.wa-knopf:hover,
.wa-knopf:focus-visible {
  border-color: #25D366;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32), 0 0 0 4px rgba(37, 211, 102, 0.18);
}
.wa-knopf:focus-visible { outline: 2px solid #25D366; outline-offset: 4px; }
.wa-zeichen { width: 28px; height: 28px; fill: currentColor; }

/* Solange der Versionsschalter (unten rechts, nur bis zum Live-Gang)
   steht, rückt der Knopf darüber — sonst läge er auf der Pille. */
body:has(.vs) .wa-knopf {
  bottom: calc(max(1.25rem, env(safe-area-inset-bottom, 1.25rem)) + 4rem);
}

/* Die Intro-Sequenz läuft ohne Knopf, wie bei „Nach oben". */
.ist-intro .wa-knopf { opacity: 0; visibility: hidden; }

@media (max-width: 720px) {
  .wa-knopf {
    right: max(0.75rem, env(safe-area-inset-right, 0.75rem));
    bottom: max(0.75rem, env(safe-area-inset-bottom, 0.75rem));
  }
}

.wa-dialog {
  width: min(92vw, 23rem);
  max-height: 92dvh;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--linie);
  border-radius: var(--kante-tafel);
  background: var(--buehne-3);
  color: var(--text);
  box-shadow: var(--schatten);
}
.wa-dialog::backdrop { background: rgba(8, 9, 8, 0.55); }
.wa-dialog[open] { animation: wa-ein 0.22s var(--kurve-sanft); }
@keyframes wa-ein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.wa-karte {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding: 2.25rem 1.75rem 1.75rem;
  text-align: center;
}
.wa-titel { margin: 0; }
.wa-text { margin: 0; max-width: 28ch; color: var(--text-2); }
.wa-qr {
  display: block;
  width: min(232px, 62vw);
  height: auto;
  aspect-ratio: 1;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.wa-los { width: 100%; }
.wa-hinweis { margin: 0; max-width: 32ch; }

.wa-zu {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dauer-kurz) var(--kurve-sanft),
              color var(--dauer-kurz) var(--kurve-sanft);
}
.wa-zu:hover,
.wa-zu:focus-visible { border-color: var(--akzent); color: var(--akzent); }

@media (prefers-reduced-motion: reduce) {
  .wa-knopf { transition: none; }
  .wa-dialog[open] { animation: none; }
}