/* ============================================================
   MEMORO · Editorial, helle Fassung
   ------------------------------------------------------------
   Aufbau und Typografie nach der Origin-Referenz, übersetzt auf
   unsere Marke. Was übernommen wurde:

     · Anzeigenschrift flüstert statt zu schreien. Serife, ein
       Gewicht, sehr groß, Zeilenhöhe 0.9. Ein Wort je Überschrift
       kursiv, das ist die Signatur.
     · Drei Stimmen, sauber getrennt: Serife für Aussagen, Grotesk
       für Bedienung, Mono in Versalien für Marken und Daten.
     · Farbe nur als ganzflächige Kachel, nie als Linie, Rahmen
       oder kleiner Akzent im Text.
     · Höhe entsteht über Farbstufen, nicht über Schatten. In der
       ganzen Datei steht kein box-shadow.
     · Bewegung: 0.2s für Zustände, 2.5s für das Erscheinen.

   Was bewusst anders ist:
     · Helles Theme statt dunkel. Die Stufenfolge ist umgedreht:
       Weiß trägt, die dunkle Fläche ist die Ausnahme.
     · Unsere Farben. Pflaume steht, wo bei Origin Iris steht,
       Orange bleibt die einzige Handlungsfarbe.

   Liegt hinter signal.css und greift nur, wenn am body die
   Klasse `ed` steht. So bleibt jede Seite einzeln umstellbar.
   ============================================================ */

body.ed{
  /* ---- Flächen, von tragend nach selten ---- */
  --f0:#FFFFFF;              /* Leinwand */
  --f1:#FAF7F9;              /* Bandierung, ruhige Abschnitte */
  --f2:#F3ECF0;              /* gehobene Karte */
  --f3:#EADFE6;              /* Zustand darüber */
  --f4:var(--plum-deep);     /* umgekehrt, höchstens zweimal je Seite */

  /* ---- Schrift ---- */
  /* Kleiner als früher: die Grotesk baut deutlich breiter als die
     Serif, mit den alten Graden liefen die Überschriften auf vier
     Zeilen. Die Werte entsprechen jetzt dem Hero der Startseite. */
  --ed-display:clamp(34px,5.2vw,74px);
  --ed-titel:clamp(26px,2.9vw,38px);
  --ed-karte:clamp(22px,2.1vw,29px);

  background:var(--f0);
  color:var(--ink);
}

/* ============================================================
   1 · TYPOGRAFIE
   ============================================================ */

/* Die Anzeigenschrift. Ein Gewicht, sehr groß, enge Zeilen.
   Seit 24.08.2026 dieselbe Schrift wie im Hero der Startseite:
   Geist in Regular, eng gesetzt. Die Seite kommt damit mit zwei
   Schriftfamilien aus — Geist und Geist Mono. Fett wird sie nie,
   das ist der Punkt. */
.ed-display{
  font-family:var(--sans);font-weight:400;font-style:normal;
  font-size:var(--ed-display);
  line-height:1.02;letter-spacing:-.042em;
  color:var(--ink);
  text-wrap:balance;
  margin:0;
}
/* Ein hervorgehobenes Wort in der Zeile. Nicht mehr kursiv und nicht in
   einer zweiten Schrift, sondern in Farbe mit leichtem Verlauf — wie
   „Zukunft gestalten" im Hero. Mehr als eines nimmt der Geste die
   Wirkung, deshalb steht es im Markup und nicht automatisch. */
.ed-display em,.ed-titel em,.ed-kachel h3 em,body.ed h2 em,body.ed h3 em{
  font-style:normal;
  background:linear-gradient(96deg,var(--plum) 8%,var(--plum-lt) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Auf dunklen Flächen trägt Pflaume nicht — dort steht Orange. */
body.ed .ed-invers em,
body.ed .ed-kopfbild--dunkel em,
body.ed .tile--dark em,body.ed .tile--plum em,
body.ed .ed-kachel--pflaume em,
body.ed .band__text p em{
  background:linear-gradient(96deg,#FF8F4D 8%,#FFCBA6 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ed-display--mittig{text-align:center;margin-inline:auto}

.ed-titel{
  font-family:var(--sans);font-weight:400;
  font-size:var(--ed-titel);line-height:1.06;letter-spacing:-.036em;
  color:var(--ink);margin:0;text-wrap:balance;
}

/* Die Marke: Mono, Versalien, weit gesperrt. Bei Origin ist das
   die weiteste Sperrung im System, das übernehmen wir. */
.ed-marke{
  display:inline-block;
  font-family:var(--mono);font-weight:400;
  font-size:11px;line-height:1;letter-spacing:.182em;
  text-transform:uppercase;
  color:var(--plum);
  margin:0 0 var(--spacing-24,24px);
}
.ed-marke--auf-farbe{color:rgba(255,255,255,.72)}

/* Fließtext steht nie in reinem Schwarz. Bei Origin ist das die
   Ash-Regel, bei uns übernimmt --muted dieselbe Rolle. */
.ed-text{
  font-family:var(--sans);font-weight:300;
  font-size:17px;line-height:1.62;color:var(--muted);
  max-width:56ch;margin:0;
}
.ed-text--gross{font-size:19px;line-height:1.58;max-width:52ch}
.ed-text b{font-weight:500;color:var(--ink)}

/* ============================================================
   2 · ABSCHNITTE UND BANDIERUNG
   Der Seitenrhythmus wechselt zwischen Leinwand und ruhigem
   Band. Kein Schatten trennt sie, nur die Farbstufe.
   ============================================================ */
.ed-abschnitt{
  position:relative;
  /* Zweimal enger geworden: erst von 72–140px auf 52–96px, am
     01.09.2026 auf 44–72px. Zwischen zwei Abschnitten stehen immer
     BEIDE Innenabstände, aus 96px werden an der Naht also 192px —
     vom letzten Feld bis zum nächsten Text ein leerer Bildschirm.
     Gemessen wird die Naht, nicht der einzelne Wert. */
  padding:clamp(44px,4.6vw,72px) 0;
  background:var(--f0);
  overflow:clip;
}
/* Der Tisch-Abschnitt trägt dieselben Maße wie sein Gegenstück auf der
   Startseite: oben etwas mehr Luft als unten, beides knapper als der
   Seitenrhythmus. */
.ed-abschnitt--tisch{padding:clamp(58px,6.4vw,90px) 0 clamp(42px,4.6vw,64px)}
.ed-abschnitt--band{background:var(--f1)}
.ed-abschnitt--sand{background:var(--sand)}
.ed-abschnitt > .wrap{position:relative;z-index:2}

.ed-kopf{max-width:820px;margin-bottom:clamp(28px,3.4vw,48px)}
.ed-kopf--mittig{margin-inline:auto;text-align:center}
.ed-kopf--mittig .ed-text{margin-inline:auto}
.ed-kopf .ed-text{margin-top:var(--spacing-24,24px)}

/* ============================================================
   3 · FARBKACHELN
   Origins Kernidee: die Kategorie wird allein über die Fläche
   unterschieden, ohne Symbol, ohne Rahmen, ohne Beschriftung.
   Sechs Töne, alle aus unserer Palette.
   ============================================================ */
.ed-kacheln{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.ed-kacheln--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ed-kacheln--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.ed-kachel{
  position:relative;
  border-radius:30px;
  padding:var(--spacing-32,32px);
  min-height:280px;
  display:flex;flex-direction:column;
  background:var(--f2);
  color:var(--ink);
  transition:background .2s ease,transform .2s ease;
}
.ed-kachel__nr{
  font-family:var(--mono);font-size:11px;letter-spacing:.182em;
  text-transform:uppercase;opacity:.62;margin-bottom:auto;
}
.ed-kachel h3{
  font-family:var(--sans);font-weight:400;
  font-size:var(--ed-karte);line-height:1.08;letter-spacing:-.03em;
  margin:var(--spacing-32,32px) 0 var(--spacing-12,12px);
}
.ed-kachel p{
  font-family:var(--sans);font-weight:300;
  font-size:15.5px;line-height:1.58;margin:0;opacity:.78;
}
/* Nur echte Kachel-Links werden zu Mono-Versalien. Schaltflächen in
   einer Kachel behalten ihre eigene Form, sonst verlieren sie die
   Lesbarkeit und sehen aus wie eine Beschriftung. */
.ed-kachel a:not(.ed-btn){
  margin-top:var(--spacing-20,20px);
  font-family:var(--mono);font-size:11px;letter-spacing:.182em;
  text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
  transition:gap .2s ease;
}
.ed-kachel a:not(.ed-btn):hover{gap:14px}

/* ---- Die Linie, die die drei Lagen verbindet ----
   Ein flacher Bogen über den Kacheln, der sich beim Lesen von links
   nach rechts zeichnet; an jeder Kachelmitte sitzt ein Knoten, der
   anspringt, sobald die Linie ihn erreicht hat. Sichtbar nur, solange
   die drei Kacheln nebeneinander stehen: sobald sie umbrechen, liefe
   die Verbindung quer zum Layout. */
.lagen{position:relative;height:88px;margin-bottom:-10px;pointer-events:none}
.lagen__grafik{display:block;width:100%;height:100%;overflow:visible}
.lagen__spur{fill:none;stroke:var(--line);stroke-width:1.5}
.lagen__zug{
  fill:none;stroke:var(--plum);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:var(--len,0);
  stroke-dashoffset:calc(var(--len,0) * (1 - var(--zug,0)));
}
.lagen__knoten{
  fill:var(--f0);stroke:var(--plum-soft);stroke-width:1.5;
  transition:fill .45s var(--ease-out),stroke .45s var(--ease-out),r .45s var(--ease-out);
}
.lagen__knoten.an{fill:var(--orange);stroke:var(--orange)}
@media(max-width:1080px){.lagen{display:none}}
@media(prefers-reduced-motion:reduce){
  .lagen__zug{stroke-dashoffset:0}
  .lagen__knoten{transition:none}
}

/* Die sechs Töne. Reihenfolge so gewählt, dass nebeneinander
   liegende Kacheln nie denselben Helligkeitssprung machen. */
.ed-kachel--pflaume{background:var(--plum);color:#fff}
.ed-kachel--pflaume-hell{background:var(--plum-lt);color:#fff}
.ed-kachel--altrosa{background:var(--plum-soft);color:var(--plum-deep)}
.ed-kachel--nebel{background:var(--plum-mist);color:var(--plum-deep)}
.ed-kachel--orange{background:var(--orange);color:#fff}
.ed-kachel--sand{background:var(--sand);color:var(--ink)}
.ed-kachel--tief{background:var(--plum-deep);color:#fff}

.ed-kachel--pflaume:hover{background:#7C5069}
.ed-kachel--pflaume-hell:hover{background:#A87694}
.ed-kachel--altrosa:hover{background:#D2B3BF}
.ed-kachel--nebel:hover{background:var(--f3)}
.ed-kachel--orange:hover{background:#FF8A50}
.ed-kachel--sand:hover{background:#F0E7E1}
.ed-kachel--tief:hover{background:#54334A}

/* Auf gefärbter Fläche tragen Text und Marke die Flächenfarbe mit */
.ed-kachel--pflaume p,.ed-kachel--pflaume-hell p,
.ed-kachel--orange p,.ed-kachel--tief p{opacity:.82}

/* Eine Kachel darf über zwei Spalten gehen, dann steht der Text
   nebeneinander statt untereinander. */
.ed-kachel--breit{grid-column:span 2}
@media(min-width:881px){
  .ed-kachel--breit{
    flex-direction:row;align-items:flex-end;gap:var(--spacing-40,40px);
  }
  .ed-kachel--breit .ed-kachel__kopf{flex:1 1 0;min-width:0}
  .ed-kachel--breit .ed-kachel__seite{flex:1 1 0;min-width:0}
  .ed-kachel--breit h3{margin-top:0}
}

/* ============================================================
   4 · UMGEKEHRTE KARTE
   Origins Silberkarte auf Schwarz, hier andersherum: dunkles
   Pflaume auf Weiß. Bricht den Rhythmus, deshalb höchstens
   zweimal je Seite.
   ============================================================ */
.ed-invers{
  border-radius:30px;
  padding:clamp(32px,4.4vw,68px);
  background:var(--f4);
  color:#fff;
}
.ed-invers .ed-titel,.ed-invers .ed-display{color:#fff}
.ed-invers .ed-titel em,.ed-invers .ed-display em{color:var(--plum-soft)}
.ed-invers .ed-text{color:rgba(255,255,255,.76)}
.ed-invers .ed-text b{color:#fff}
.ed-invers .ed-marke{color:rgba(255,255,255,.6)}

/* ============================================================
   5 · ZAHLEN
   Eine Reihe ohne Kästen. Getrennt wird über eine Haarlinie,
   nicht über Flächen, sonst kippt die Seite in Kartenoptik.
   ============================================================ */
.ed-zahlen{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.ed-zahlen > div{
  padding:var(--spacing-32,32px) var(--spacing-24,24px) var(--spacing-24,24px) 0;
  border-right:1px solid var(--line);
}
.ed-zahlen > div:last-child{border-right:0}

/* Derselbe Schein wie auf der Zahlenleiste der Startseite, nur hell:
   ein warmes Licht folgt dem Zeiger, die überfahrene Zahl glimmt nach.
   --gx / --gy setzt signal.js, wie dort auch. */
.ed-zahlen{position:relative;isolation:isolate;
  transition:border-color .45s var(--ease-out)}
/* inset:0, weil die Leiste in ihrer Endfassung overflow:hidden trägt:
   ein Schein außerhalb würde abgeschnitten. */
.ed-zahlen::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%),
             rgba(255,122,56,.2),rgba(255,122,56,.06) 44%,transparent 72%);
  opacity:0;transition:opacity .45s var(--ease-out);
}
.ed-zahlen > div{transition:border-color .45s var(--ease-out)}
.ed-zahlen span{transition:color .4s}
/* Mit body.ed davor, sonst gewinnt die Endfassung der Leiste weiter
   unten im Stylesheet über die zusätzliche Elementstufe. */
@media (hover:hover) and (pointer:fine){
  body.ed .ed-zahlen:hover::before{opacity:1}
  body.ed .ed-zahlen:hover{border-color:rgba(112,72,97,.3);
    box-shadow:0 18px 44px rgba(71,42,59,.12),0 0 34px -10px rgba(255,122,56,.35),
               inset 0 1px 0 rgba(255,255,255,.95)}
  body.ed .ed-zahlen:hover > div{border-right-color:rgba(112,72,97,.26)}
  body.ed .ed-zahlen > div:hover b{color:var(--plum-deep);text-shadow:0 0 26px rgba(255,122,56,.5)}
  body.ed .ed-zahlen > div:hover span{color:var(--plum)}
}

.ed-zahlen b{
  display:block;
  font-family:var(--sans);font-weight:400;
  font-size:clamp(38px,4.6vw,64px);line-height:.9;letter-spacing:-.02em;
  color:var(--ink);
  transition:color .4s,text-shadow .5s var(--ease-out);
}
.ed-zahlen span{
  display:block;margin-top:var(--spacing-12,12px);
  font-family:var(--mono);font-size:11px;letter-spacing:.182em;
  text-transform:uppercase;color:var(--muted);line-height:1.5;
}
.ed-invers .ed-zahlen{border-color:rgba(255,255,255,.16)}
.ed-invers .ed-zahlen > div{border-color:rgba(255,255,255,.16)}
.ed-invers .ed-zahlen b{color:#fff}
.ed-invers .ed-zahlen span{color:rgba(255,255,255,.6)}

/* ============================================================
   6 · SCHALTFLÄCHEN
   Genau eine Handlungsfarbe. Bei Origin ist das Weiß auf
   Schwarz, bei uns bleibt es Orange, das ist die Marke.
   ============================================================ */
.ed-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:16px;font-weight:400;
  padding:14px 22px;border-radius:8px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.ed-btn--voll{background:var(--orange);color:#fff}
.ed-btn--voll:hover{background:var(--orange-deep)}
.ed-btn--linie{background:transparent;border-color:var(--line);color:var(--ink)}
.ed-btn--linie:hover{border-color:var(--plum);color:var(--plum)}
.ed-invers .ed-btn--linie{border-color:rgba(255,255,255,.32);color:#fff}
.ed-invers .ed-btn--linie:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.ed-btn .pf{transition:transform .2s ease}
.ed-btn:hover .pf{transform:translateX(4px)}

.ed-knopfreihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--spacing-32,32px)}

/* ============================================================
   7 · BILDKOPF, HELL
   Origin setzt ein atmosphärisches Foto hinter die Überschrift.
   Hell heißt hier: das Foto wird aufgehellt statt abgedunkelt,
   der Text steht in Tinte darauf. Der Schleier bleibt Pflicht.
   ============================================================ */
/* Der Bildkopf bleibt stehen, die nächste Sektion schwebt darüber.
   Ein haftendes Kind kann sein Elternelement nicht verlassen, deshalb
   haftet die Sektion selbst. Sie ist je nach Seite 640 bis 1430px
   hoch: bei hohen Köpfen rastet sie unterkantenbündig ein, bei
   niedrigen oben. --kopf-h misst signal.js, min() wählt den Fall. */
.ed-kopfbild{
  position:sticky;
  top:min(0px, calc(100vh - var(--kopf-h, 100vh)));top:min(0px, calc(100svh - var(--kopf-h, 100svh)));
  z-index:0;
  padding:calc(var(--nav-h) + clamp(56px,7vw,104px)) 0 clamp(64px,8vw,120px);
  background:var(--f1);
  overflow:clip;
}
.ed-kopfbild__bild{position:absolute;inset:0;z-index:0}
.ed-kopfbild__lage{
  position:absolute;inset:0;display:block;overflow:hidden;
}
.ed-kopfbild__lage img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);will-change:transform;
}
/* Schleier, so leicht wie möglich: das Motiv soll erkennbar bleiben.
   Links trägt er die Überschrift, nach rechts öffnet er sich fast
   ganz. Die Werte sind nach unten geprüft, siehe Kontrastmessung. */
.ed-kopfbild__lage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(96deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.84) 30%,
      rgba(252,250,251,.56) 56%,
      rgba(247,242,245,.28) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.52) 0%,
      rgba(255,255,255,.20) 40%,
      rgba(255,255,255,.62) 100%);
}

/* Die folgende Sektion schwebt über dem stehenden Bild: eigene
   Ebene, gerundete Oberkante, weicher Schatten nach oben. Das ist
   die einzige Stelle, an der dieses System einen Schatten benutzt,
   und zwar als Trennung zweier Ebenen, nicht als Kartenhöhe. */
.ed-kopfbild + .ed-abschnitt,
.ed-kopfbild + .ed-bildband,
.ed-kopfbild + .footer,
.ed-kopfbild + main > .ed-abschnitt:first-child{
  position:relative;z-index:1;
  border-radius:30px 30px 0 0;
  box-shadow:0 -24px 60px rgba(21,12,19,.16);
}
.ed-kopfbild .wrap{position:relative;z-index:2}
/* Im Bildkopf steht der Fließtext eine Stufe dunkler als sonst.
   Der Schleier ist bewusst leicht, damit das Motiv erkennbar
   bleibt; --muted käme darauf nur auf 3,1:1, verlangt sind 4,5.
   Mit --plum-deep sind es 7:1, ohne den Schleier zuzuziehen. */
.ed-kopfbild .ed-text{color:var(--plum-deep)}
.ed-kopfbild .ed-text b{color:var(--ink)}
.ed-kopfbild .ed-marke{color:var(--plum-deep)}
.ed-kopfbild .ed-zahlen span{color:var(--plum-deep)}
.ed-kopfbild .ed-zahlen{border-color:rgba(71,42,59,.28)}
.ed-kopfbild .ed-zahlen > div{border-color:rgba(71,42,59,.28)}
.ed-kopfbild__in{max-width:940px}
.ed-kopfbild .ed-text{margin-top:var(--spacing-32,32px)}

/* ---- Bildkopf mit Landkarte ----
   Eins zu eins die Karte aus „Wer wir sind: Namen und Orte" der
   Startseite: gleiche Projektion, gleiche Punkte, gleicher Kasten mit
   Rundung, Rahmen und Schatten. Ein Unterschied: der Grund des Kastens
   ist Pflaume statt Weiß, damit er auf dem dunklen Kopf sitzt. Beim
   Überfahren steht der Betrieb mit Ort in der Sprechblase.
   Pflaume: die eigenen Häuser. Orange umrandet: die Netzwerkpartner. */
.ed-kopfbild--karte .ed-kopfbild__karte{
  position:absolute;z-index:1;
  /* Am oberen Rand aufgehängt statt in der Sektion zentriert: der Kopf
     ist höher als ein Bildschirm, sonst läge der Süden unter der Falz. */
  right:2%;top:calc(var(--nav-h) + 24px);
  width:min(470px,36%);
  border-radius:26px;padding:26px 26px 30px;
  /* Fläche und Linie stehen weiter unten im Netzwerk-Block. */
}
/* Die Karte füllt den Kasten in der Breite aus und behält ihr
   Seitenverhältnis — vorher war sie nach der Höhe skaliert und stand
   als schmaler Streifen in einer breiten Fläche. */
.ed-kopfbild__karte svg{
  display:block;width:92%;height:auto;margin-inline:auto;overflow:visible;
}

.ed-kopfbild__karte .de-outline{
  /* Eine Spur satter als auf der Startseite: dort liegt die Karte auf
     warmem Papier, hier auf fast Weiß — mit plum-mist verschwände der
     Umriss. */
  fill:#EDE1E8;stroke:var(--plum-soft);stroke-width:1.4;stroke-linejoin:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;
  /* Bewusst langsam: der Umriss soll sich sichtbar zeichnen, nicht
     fertig sein, bevor der Blick unten angekommen ist. Umriss, Bögen
     und Punkte lösen einander ab, zusammen gut sieben Sekunden. */
  animation:edKarteZug 5.4s cubic-bezier(.25,.55,.2,1) .4s forwards;
}
@keyframes edKarteZug{to{stroke-dashoffset:0}}

/* Die Bögen vom Sitz der Gruppe zu den Hauptsitzen zeichnet signal.js. */
.ed-kopfbild__karte .links path{
  fill:none;stroke:var(--plum);stroke-width:1.05;opacity:.5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 2.8s var(--ease-out);
  transition-delay:calc(2.2s + var(--i) * .18s);
}
.ed-kopfbild__karte.in .links path{stroke-dashoffset:0}

/* ---- Bewegung im Kopf ----
   Drei ruhige Schleifen, die erst anlaufen, wenn die Karte gezeichnet
   ist: ein Lichtpunkt wandert über jeden Bogen, die Hauptsitze atmen,
   und die ganze Karte schwebt langsam. Alles über transform und
   Deckkraft, nichts, was das Layout bewegt. */
.ed-kopfbild__karte .links path.puls{
  stroke:var(--orange);stroke-width:1.7;opacity:0;
  stroke-dasharray:.05 .95;stroke-dashoffset:1;
  transition:none;
}
.ed-kopfbild__karte.in .links path.puls{
  animation:edKartePuls 5.4s linear infinite;
  animation-delay:calc(5.6s + var(--i) * .62s);
}
@keyframes edKartePuls{
  0%{stroke-dashoffset:1;opacity:0}
  6%{opacity:.95}
  52%{opacity:.95}
  62%,100%{stroke-dashoffset:0;opacity:0}
}

.ed-kopfbild__karte.in .node.haupt circle.dot{
  animation:edKarteAtem 5.6s ease-in-out infinite;
  animation-delay:calc(4.6s + var(--i) * .18s);
}
@keyframes edKarteAtem{0%,100%{opacity:1}50%{opacity:.66}}

/* Am Sitz der Gruppe steht die Bildmarke. Der Punkt darunter bleibt in
   der Datei stehen — signal.js liest an ihm die Koordinaten ab —, ist
   aber unsichtbar. Das Atmen liegt darum auf der Eule. */
.ed-kopfbild__karte .node[data-hub] circle.dot{opacity:0}
.ed-kopfbild__karte .node__eule{
  pointer-events:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
  transform-box:fill-box;transform-origin:center;
}
.ed-kopfbild__karte .node[data-hub]:hover .node__eule{transform:scale(1.12)}
.ed-kopfbild__karte.in .node[data-hub] .node__eule{
  animation:edKarteSitz 3.8s ease-in-out infinite;
}
@keyframes edKarteSitz{
  0%,100%{filter:drop-shadow(0 0 0 rgba(255,122,56,0))}
  50%{filter:drop-shadow(0 0 9px rgba(255,122,56,.9))}
}
/* Wasserzeichen in der Landesfläche: sehr blass, rein dekorativ. */
.ed-kopfbild__karte .karte__wz{opacity:.035;pointer-events:none}

/* Die Karte selbst schwebt, damit der Kopf nicht stillsteht. Beim
   Überfahren hält sie an: die Sprechblase wird einmal beim Eintreten
   gesetzt und liefe sonst unter dem Punkt weg. */
.ed-kopfbild__karte svg{animation:edKarteSchweben 24s ease-in-out infinite}
.ed-kopfbild__karte:hover svg{animation-play-state:paused}
@keyframes edKarteSchweben{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-11px,0) scale(1.014)}
}

@media(prefers-reduced-motion:reduce){
  .ed-kopfbild__karte svg,
  .ed-kopfbild__karte .node circle.dot,
  .ed-kopfbild__karte .node__eule,
  .nwl__sym,
  .ed-kopfbild__karte .links path.puls{animation:none}
  .ed-kopfbild__karte .links path.puls{display:none}
}

.ed-kopfbild__karte .node{
  cursor:pointer;opacity:0;
  transition:opacity 1.1s var(--ease-out);
  transition-delay:calc(3.6s + var(--i) * .085s);
}
.ed-kopfbild__karte.in .node{opacity:1}
.ed-kopfbild__karte .node circle.dot{transition:r .3s cubic-bezier(.2,.8,.2,1),fill .3s}
.ed-kopfbild__karte .node:hover circle.dot,
.ed-kopfbild__karte .node:focus circle.dot{r:8}
.ed-kopfbild__karte .node.zweig:hover circle.dot,
.ed-kopfbild__karte .node.zweig:focus circle.dot{r:6}
.ed-kopfbild__karte .node:focus{outline:none}
.ed-kopfbild__karte .node.ag circle.dot{fill:var(--plum);stroke:#fff;stroke-width:1.3}
.ed-kopfbild__karte .node.ag.zweig circle.dot{fill:var(--plum-lt);stroke-width:1}
.ed-kopfbild__karte .node.koop circle.dot{fill:#fff;stroke:var(--orange);stroke-width:2}
.ed-kopfbild__karte .node.koop.zweig circle.dot{stroke-width:1.6}
.ed-kopfbild__karte .halo{fill:none;stroke:var(--plum);stroke-width:1.2;opacity:0;transform-origin:center}
.ed-kopfbild__karte.in .node.sitz .halo{animation:edKarteHalo 3.6s ease-out infinite}
@keyframes edKarteHalo{0%{r:5;opacity:.5}75%,100%{r:20;opacity:0}}

/* Sprechblase mit Betrieb und Ort */
.ed-kopfbild__karte .tooltip{
  position:absolute;pointer-events:none;z-index:5;padding:9px 13px;border-radius:12px;
  background:var(--ink);color:#fff;font-size:12.5px;white-space:nowrap;
  opacity:0;transform:translate(-50%,-140%) scale(.94);
  transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.ed-kopfbild__karte .tooltip.show{opacity:1;transform:translate(-50%,-150%) scale(1)}
.ed-kopfbild__karte .tooltip b{font-weight:500}
.ed-kopfbild__karte .tooltip span{
  display:block;font-family:var(--mono,"Geist Mono",monospace);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--plum-soft);margin-top:3px;
}

/* Der Text braucht links freie Fläche, sonst steht er in der Karte. */
.ed-kopfbild--karte .ed-kopfbild__in{max-width:620px;pointer-events:auto}
/* Die Textspalte liegt über der Karte und ist volle Seitenbreite. Damit
   die Punkte rechts überhaupt erreichbar sind, lässt sie Zeigerereignisse
   durch; nur der Textblock selbst fängt sie wieder ab. */
.ed-kopfbild--karte .wrap{pointer-events:none}
@media(max-width:1180px){
  .ed-kopfbild--karte .ed-kopfbild__karte{right:-4%;width:min(420px,40%)}
}
@media(max-width:900px){
  /* Hochkant steht die Karte über dem Text, in voller Breite. Unter den
     Text kann sie nicht: der Kopf haftet, und die nächste Sektion
     schiebt sich über seine Unterkante — dort wäre die Karte verdeckt. */
  .ed-kopfbild--karte{display:flex;flex-direction:column}
  .ed-kopfbild--karte .ed-kopfbild__karte{
    order:0;position:relative;right:auto;top:auto;
    width:calc(100% - 34px);margin:0 auto clamp(30px,5vw,46px);
  }
  .ed-kopfbild--karte .wrap{order:1}
  .ed-kopfbild--karte .ed-kopfbild__in{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .ed-kopfbild__karte .de-outline{stroke-dashoffset:0;animation:none}
  .ed-kopfbild__karte .node{opacity:1;transition:none}
  .ed-kopfbild__karte .halo{animation:none}
}

/* ---- Bildkopf, dunkle Fassung ----
   Die Nachfolge-Seite trägt die Eule als Wasserzeichen im Kopf. Eine
   Linienzeichnung braucht dafür eine dunkle Fläche, sonst ist sie nicht
   zu sehen: das Foto bekommt hier den Pflaumen-Schleier statt des
   hellen, der Text steht in Weiß darauf. ---- */
.ed-kopfbild--dunkel{background:var(--ink);color:#fff}
.ed-kopfbild--dunkel .ed-kopfbild__lage::after{
  background:
    linear-gradient(96deg,
      rgba(21,12,19,.94) 0%,
      rgba(33,18,28,.86) 30%,
      rgba(71,42,59,.5) 62%,
      rgba(21,12,19,.62) 100%),
    linear-gradient(180deg,
      rgba(21,12,19,.58) 0%,
      rgba(21,12,19,.14) 38%,
      rgba(21,12,19,.8) 100%);
}
.ed-kopfbild--dunkel .ed-display{color:#fff}
.ed-kopfbild--dunkel .ed-display em{color:var(--plum-soft)}
.ed-kopfbild--dunkel .ed-text,
.ed-kopfbild--dunkel .ed-text--gross{color:rgba(255,255,255,.78)}
.ed-kopfbild--dunkel .ed-text b{color:#fff}
.ed-kopfbild--dunkel .ed-marke{color:rgba(255,255,255,.62)}
.ed-kopfbild--dunkel .ed-zahlen,
.ed-kopfbild--dunkel .ed-zahlen > div{border-color:rgba(255,255,255,.18)}
.ed-kopfbild--dunkel .ed-zahlen b{color:#fff}
.ed-kopfbild--dunkel .ed-zahlen span{color:rgba(255,255,255,.6)}
.ed-kopfbild--dunkel .ed-btn--linie{border-color:rgba(255,255,255,.34);color:#fff}
.ed-kopfbild--dunkel .ed-btn--linie:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* ---- Auftakt ohne Bildkopf ----
   Die Kontaktseite beginnt ohne Kopfbild. Der erste Abschnitt braucht
   deshalb selbst den Abstand unter der schwebenden Leiste. ---- */
.ed-abschnitt--auftakt{padding-top:calc(var(--nav-h) + clamp(40px,5vw,72px))}

/* ---- Bildkopf als Struktur ----
   Über uns bekommt keinen dritten Bildkopf, sondern die Struktur des
   Hauses als Zeichnung: drei Ringe um die Eule, innen der Vorstand,
   darum der Aufsichtsrat, außen die Betriebe. Die Punktzahl je Ring ist
   die tatsächliche Zahl, die Ringe drehen gegeneinander. ---- */
.ed-kopfbild--struktur{
  background:
    radial-gradient(90% 70% at 82% 20%, rgba(201,167,181,.34), transparent 64%),
    linear-gradient(180deg,#fff 0%,var(--f1) 58%,var(--f2) 100%);
}
/* Foto ganz hinten im Kopf: entsättigt, aufgehellt und mit einem
   Schleier abgedeckt, der nach unten dichter wird. Es soll die Fläche
   füllen und sonst nichts. Der Verlauf oben lässt Platz für die
   Navigation, unten geht das Bild in die Sektionsfarbe über. */
.ed-kopfbild__grund{position:absolute;inset:0;display:block;overflow:hidden;z-index:0}
.ed-kopfbild__grund img{
  width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  opacity:.13;filter:grayscale(.7);
}
/* Zwei Schleier übereinander: der erste nimmt die Fläche nach unten in
   die Sektionsfarbe, der zweite deckt die linke Hälfte ab, auf der die
   Überschrift steht. Gemessen wurde gegen den hellsten Punkt des Fotos. */
.ed-kopfbild__grund::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.42) 30%,
                            rgba(255,255,255,.60) 70%, var(--f2) 100%),
    linear-gradient(96deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.66) 46%,
                           rgba(255,255,255,.18) 82%, rgba(255,255,255,0) 100%);
}
/* Die Zeichnung liegt über dem Foto. */
.ed-kopfbild__struktur{z-index:1}
.ed-kopfbild__struktur{
  position:absolute;right:2%;top:calc(var(--nav-h) + 30px);
  width:min(520px,40%);
}
.st{display:block;width:100%;height:auto;overflow:visible}
.st__ring{
  transform-origin:220px 220px;
  animation:stDreh var(--dauer,60s) linear infinite;
  animation-direction:normal;
}
.st__ring:nth-child(2){animation-direction:reverse}
@keyframes stDreh{to{transform:rotate(360deg)}}
.st__bahn{fill:none;stroke:rgba(112,72,97,.2);stroke-width:1;stroke-dasharray:2 9}
.st__punkt{
  fill:var(--plum);opacity:.9;
  animation:stAtmen 4.2s ease-in-out infinite;
  animation-delay:calc(var(--i) * .16s);
}
.st__ring:nth-child(3) .st__punkt{fill:var(--plum-lt)}
.st__ring:nth-child(4) .st__punkt{fill:var(--plum-soft);opacity:.85}
@keyframes stAtmen{0%,100%{opacity:.55}50%{opacity:1}}
.st__eule{opacity:.9}

.ed-kopfbild--struktur .ed-kopfbild__in{max-width:720px}
@media(max-width:1100px){
  .ed-kopfbild__struktur{right:-8%;width:min(440px,46%);opacity:.8}
}
@media(max-width:820px){
  .ed-kopfbild__struktur{right:-18%;top:auto;bottom:-6%;width:82%;opacity:.3}
  .ed-kopfbild--struktur .ed-kopfbild__in{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .st__ring,.st__punkt{animation:none}
}

/* ---- Bildkopf als Aura ----
   Ohne Foto trägt die Fläche selbst: Tinte als Grund, darüber die drei
   driftenden Pflaumenwolken aus signal.css und ein feines Raster. Die
   Wolken laufen im Screen-Modus, deshalb braucht der Grund die dunkle
   Farbe — auf Weiß bliebe nichts übrig. ---- */
.ed-kopfbild--aura{
  /* Grundfarbe zusätzlich zum Verlauf: die Navigation liest die
     Hintergrundfarbe des Elements unter sich. Ohne sie fiele die
     Messung auf den weißen Body durch und die Wortmarke stünde in
     Pflaume statt in Weiß. */
  background-color:#191019;
  background-image:
    radial-gradient(120% 90% at 78% 18%, rgba(112,72,97,.55), transparent 62%),
    linear-gradient(168deg, #1E1119 0%, var(--ink) 52%, #120A10 100%);
}
.ed-kopfbild--aura .ed-kopfbild__bild{overflow:hidden}
.ed-kopfbild--aura .aura{inset:-30% -12%;opacity:1}
/* Kräftiger und schneller als die ruhige Fassung der Startseite: hier
   trägt die Bewegung den ganzen Kopf, es liegt kein Foto darunter.
   Die Namen a1/a2/a3 kommen aus signal.css, nur die Zeiten sind kürzer. */
.ed-kopfbild--aura .aura i{opacity:.78}
.ed-kopfbild--aura .aura i:nth-child(1){animation-duration:7.5s}
.ed-kopfbild--aura .aura i:nth-child(2){animation-duration:9s}
.ed-kopfbild--aura .aura i:nth-child(3){animation-duration:10.5s}
/* Feines Raster, damit die Fläche nicht leer wirkt */
.ed-kopfbild--aura::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(ellipse 78% 68% at 36% 42%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 78% 68% at 36% 42%,#000,transparent 76%);
}
/* Ohne Foto darf die Eule kräftiger stehen. */
.ed-kopfbild--aura .ed-kopfbild__eule{opacity:.17}

/* Die Eule steht groß am rechten Rand und läuft bewusst ein Stück aus
   dem Bild heraus — sie ist Fläche, kein Bildmotiv, das man ganz sieht. */
.ed-kopfbild__eule{
  position:absolute;z-index:1;pointer-events:none;user-select:none;
  right:-7%;bottom:-16%;width:min(700px,46%);height:auto;
  opacity:.14;
  animation:edTreiben 32s ease-in-out infinite;
}
@keyframes edTreiben{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-24px) rotate(-2.2deg)}
}
@media(max-width:900px){
  .ed-kopfbild__eule{width:82%;right:-24%;bottom:-10%;opacity:.1}
}
@media(prefers-reduced-motion:reduce){.ed-kopfbild__eule{animation:none}}


/* ============================================================
   8 · BILDBAND, HELL
   ============================================================ */
.ed-bildband{
  position:relative;overflow:clip;
  height:clamp(300px,42vh,480px);height:clamp(300px,42svh,480px);
  background:var(--f1);
}
.ed-bildband__bild{position:absolute;inset:-8% 0;will-change:transform}
.ed-bildband__bild img{width:100%;height:100%;object-fit:cover}
.ed-bildband::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Unten dichter: dort steht der Text. Auf dem Abendmotiv der
     Kontaktseite kam er sonst nur auf 3,5:1 gegen Tinte. */
  background:linear-gradient(180deg,
    rgba(255,255,255,.58) 0%,rgba(255,255,255,.26) 34%,
    rgba(255,255,255,.86) 74%,rgba(255,255,255,.96) 100%);
}
.ed-bildband__text{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:clamp(28px,4vw,56px) 0;
}
/* Band ohne Foto: steht der Satz unter einer Sektion, deren Film ohne
   Schleier ausläuft, schnitte ein zweites Bild hart dagegen. Dann trägt
   nur die ruhige Fläche. */
/* Variante „frei": auf dem Bild liegt gar nichts mehr — kein Weißfilter,
   kein Band. Den Satz trägt allein seine Glaskapsel, die mittig auf dem
   Bild steht. Die frühere Fassung „klar" legte einen weißen Verlauf über
   das ganze Motiv; das Foto war dadurch milchig. */
.ed-bildband--frei::after{display:none}
.ed-bildband--frei .ed-bildband__text{
  position:absolute;inset:0;display:grid;place-items:center;
  background:none;padding:clamp(24px,4vw,48px) 0;
}
.ed-bildband--frei .ed-bildband__text .wrap{display:flex;justify-content:center}
/* Die Kapsel: durchsichtiges Glas mit weicher Kante, wie die Navigation.
   Sie trägt den Satz auf jedem Bildausschnitt, hell wie dunkel. */
.ed-bildband__pille{
  margin:0;max-width:min(92vw,34ch);text-align:center;
  padding:clamp(18px,2.4vw,30px) clamp(26px,3.6vw,52px);
  border-radius:999px;
  /* Kein saturate: das Glas nahm sonst den Grünton der Allee an und der
     Satz stand auf einer grünlichen Fläche. Ein leichtes brightness hebt
     das Glas stattdessen ins Helle, damit die Tinte trägt. */
  background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.62);
  backdrop-filter:blur(30px) saturate(108%) brightness(1.08);
  -webkit-backdrop-filter:blur(30px) saturate(108%) brightness(1.08);
  box-shadow:0 24px 60px rgba(26,15,23,.24),inset 0 1px 0 rgba(255,255,255,.7);
}
/* Ohne Glaseffekt (ältere Browser, Sparbetrieb) trägt eine dichte Fläche. */
@supports not (backdrop-filter:blur(1px)){
  .ed-bildband__pille{background:rgba(255,255,255,.9)}
}
html.sparsam .ed-bildband__pille{background:rgba(255,255,255,.9)}
/* Auf schmalen Bildschirmen wird aus der Kapsel eine gerundete Karte:
   als Pille bräuchte der dreizeilige Satz mehr Breite als das Gerät hat. */
@media(max-width:700px){
  .ed-bildband__pille{border-radius:26px;max-width:88vw}
}
.ed-bildband--leer{height:auto;background:var(--f1);padding:clamp(48px,6vw,84px) 0}
.ed-bildband--leer::after{display:none}
.ed-bildband--leer .ed-bildband__text{position:static;padding:0}
.ed-bildband--leer .ed-bildband__text p{max-width:24ch}
/* Variante „satz": weder Bild noch Fläche, der Satz steht mittig. */
.ed-bildband--satz{background:none}
.ed-bildband--satz .ed-bildband__text .wrap{display:flex;justify-content:center}
.ed-bildband--satz .ed-bildband__text p{max-width:34ch;text-align:center}
.ed-bildband__text p{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(24px,3.2vw,44px);line-height:1.08;letter-spacing:-.036em;
  color:var(--ink);max-width:20ch;
}
/* max-width muss hier stehen: die Grundregel .ed-bildband__text p ist
   spezifischer als die Kapsel und hielte sie sonst bei 20ch fest. */
.ed-bildband--frei .ed-bildband__text p{
  font-size:clamp(21px,2.6vw,36px);line-height:1.16;
  max-width:min(92vw,32ch);
}
.ed-bildband__text em{font-style:italic;color:var(--plum)}

/* ============================================================
   9 · LISTE MIT HAARLINIEN
   Für Aufzählungen, die keine Karten sein sollen.
   ============================================================ */
.ed-liste{list-style:none;margin:0;padding:0}
.ed-liste li{
  display:grid;grid-template-columns:64px 1fr;gap:var(--spacing-32,32px);
  padding:var(--spacing-32,32px) 0;
  border-top:1px solid var(--line);
  align-items:start;
}
.ed-liste li:last-child{border-bottom:1px solid var(--line)}
.ed-liste__nr{
  font-family:var(--mono);font-size:11px;letter-spacing:.182em;
  text-transform:uppercase;color:var(--plum);padding-top:6px;
}
.ed-liste h3{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(21px,2.2vw,28px);line-height:1.1;letter-spacing:-.03em;
  margin:0 0 var(--spacing-12,12px);color:var(--ink);
}
.ed-liste p{
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.62;
  color:var(--muted);margin:0;max-width:62ch;
}
.ed-invers .ed-liste li{border-color:rgba(255,255,255,.16)}
.ed-invers .ed-liste h3{color:#fff}
.ed-invers .ed-liste p{color:rgba(255,255,255,.72)}
.ed-invers .ed-liste__nr{color:var(--plum-soft)}

/* ============================================================
   10 · BEWEGUNG
   Zwei Geschwindigkeiten, mehr braucht das System nicht.
   Zustände sind kurz und vorhersehbar, das Erscheinen ruhig.
   Kein Federn, kein Überschwingen.
   Seit 20.08.2026 knapp eine Sekunde statt zweieinhalb: beim
   Scrollen stand der Text sonst zu lange im Halbsichtbaren.
   ============================================================ */
.ed-auf{
  opacity:0;transform:translateY(18px);
  transition:opacity .95s cubic-bezier(.22,.7,.25,1),
             transform .95s cubic-bezier(.22,.7,.25,1);
}
.ed-auf.in{opacity:1;transform:none}
.ed-auf-1{transition-delay:.06s}
.ed-auf-2{transition-delay:.12s}
.ed-auf-3{transition-delay:.18s}
.ed-auf-4{transition-delay:.24s}

/* ============================================================
   10b · PARTNERKARTEN
   Aufbau nach dem Partnerbereich von bestattungsverfuegung.de:
   Bild mit Logokapsel und Jahresschild, darunter Name, Orte, ein
   Satz und die Leistungen. Die zweite Reihe wird angerissen und
   läuft in einen Weichzeichner aus; der Knopf deckt alle auf.
   ============================================================ */
.phaeuser{
  position:relative;overflow:hidden;
  /* Luft für das Anheben beim Überfahren und für die Schatten:
     ohne sie schnitte overflow:hidden beides an den Rändern ab. */
  padding:12px;margin:-12px;
}
.phaeuser__raster{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.phaus{
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  border-radius:26px;overflow:hidden;text-decoration:none;color:inherit;
  background:linear-gradient(168deg,#FFFFFF 0%,#FDFBFC 52%,var(--f2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 1px rgba(112,72,97,.1),
    0 20px 44px -26px rgba(46,30,40,.24);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}
a.phaus:hover{
  transform:translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(112,72,97,.16),
    0 40px 80px -32px rgba(46,30,40,.38);
}

/* ---- Bildkopf ---- */
.phaus__kopf{position:relative;display:block;height:clamp(150px,15vw,186px);overflow:hidden}
.phaus__bild{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);filter:saturate(.9) contrast(1.02);
  transition:transform 1.3s var(--ease-out),filter 1.3s var(--ease-out);
}
a.phaus:hover .phaus__bild{transform:scale(1.1);filter:saturate(1.04) contrast(1.05)}
.phaus__kopf::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,12,19,.06) 0%,rgba(21,12,19,.34) 62%,rgba(21,12,19,.56) 100%);
}
/* Logo in einer hellen Kapsel oben rechts */
.phaus__logo{
  position:absolute;top:13px;right:13px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  padding:8px 12px;border-radius:12px;
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(8px) saturate(150%);-webkit-backdrop-filter:blur(8px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 18px -8px rgba(26,15,23,.4);
}
.phaus__logo img{max-height:32px;max-width:112px;width:auto;height:auto;object-fit:contain;display:block}
/* Jahresschild unten links, dieselbe Glaskapsel wie in der Vorlage */
.phaus__seit{
  position:absolute;left:15px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.17);
  backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,.34);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;
}
.phaus__seit::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--orange);flex:0 0 auto;
}
@supports not (backdrop-filter:blur(1px)){
  .phaus__logo{background:#fff}
  .phaus__seit{background:rgba(21,12,19,.62)}
}

/* ---- Textteil ---- */
.phaus__leib{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.phaus__name{
  display:block;font-family:var(--sans);font-weight:400;
  font-size:22px;line-height:1.12;letter-spacing:-.03em;color:var(--ink);
}
.phaus__ort{
  display:block;margin-top:7px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);line-height:1.5;
}
.phaus__text{
  display:block;margin-top:14px;flex:1;
  font-family:var(--sans);font-weight:300;font-size:14.5px;line-height:1.6;color:var(--muted);
}
.phaus__fuss{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:20px;padding-top:16px;border-top:1px solid rgba(112,72,97,.14);
}
.phaus__marken{display:flex;gap:6px;flex-wrap:wrap}
.phaus__marken i{
  font-style:normal;padding:5px 10px;border-radius:999px;
  background:rgba(112,72,97,.08);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--plum);
}
.phaus__pf{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--plum);transition:gap .3s var(--ease-out),color .3s;
}
a.phaus:hover .phaus__pf{gap:12px;color:var(--orange-deep)}

/* ---- Der Anriss der zweiten Reihe ----
   Vier Lagen mit wachsendem Weichzeichner, jede über eine Maske
   eingeblendet. Ein einzelner Verlauf würde hart abschneiden, so
   geht das Bild wirklich langsam in die Unschärfe über. */
.phaeuser__schleier{
  position:absolute;inset:auto 0 0 0;z-index:4;pointer-events:none;
  /* Die wirkliche Höhe setzt signal.js: sie hängt davon ab, wo in der
     zweiten Reihe die Logokapsel endet. Dieser Wert gilt nur, bis das
     Skript gemessen hat. */
  height:clamp(150px,18vw,220px);
  transition:opacity .6s var(--ease-out);
}
.phaeuser__schleier i{position:absolute;inset:0;display:block}
.phaeuser__schleier i:nth-child(1){
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 30%);
}
.phaeuser__schleier i:nth-child(2){
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(180deg,transparent 22%,#000 56%);
  mask-image:linear-gradient(180deg,transparent 22%,#000 56%);
}
.phaeuser__schleier i:nth-child(3){
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  -webkit-mask-image:linear-gradient(180deg,transparent 46%,#000 82%);
  mask-image:linear-gradient(180deg,transparent 46%,#000 82%);
}
.phaeuser__schleier i:nth-child(4){
  background:linear-gradient(180deg,
    rgba(250,247,249,0) 8%,rgba(250,247,249,.4) 48%,
    rgba(250,247,249,.86) 80%,var(--f1) 100%);
}
/* Ohne Weichzeichner trägt allein der Verlauf */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .phaeuser__schleier i:nth-child(4){
    background:linear-gradient(180deg,rgba(250,247,249,0) 0%,rgba(250,247,249,.9) 62%,var(--f1) 100%);
  }
}
.phaeuser.offen .phaeuser__schleier{opacity:0}

/* Der Knopf gehört zum Raster darüber, nicht zur nächsten Sektion:
   der Abstand ist darum knapp gehalten. */
.phaeuser__fuss{display:flex;justify-content:center;margin:clamp(12px,1.3vw,18px) 0 0}
.phaeuser__fuss .pf{transition:transform .4s var(--ease-out)}
.phaeuser.offen ~ .phaeuser__fuss .pf{transform:rotate(180deg)}

/* Die aufgedeckten Karten kommen gestaffelt, nur Deckkraft und
   Verschiebung, damit nichts das Layout animiert. */
.phaeuser.offen .phaus[data-neu]{animation:phaus-auf .8s var(--ease-out) backwards}
@keyframes phaus-auf{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

@media(max-width:1080px){
  .phaeuser__raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .phaeuser__raster{grid-template-columns:1fr}
  .phaus__leib{padding:20px 20px 22px}
}
@media(prefers-reduced-motion:reduce){
  .phaeuser.offen .phaus[data-neu]{animation:none}
}

/* ============================================================
   10d · EIGENE HÄUSER AUF DER NACHFOLGESEITE
   Ein Feld direkt auf dem Grund der Sektion: Reiter oben, darunter
   das offene Haus, unten die Einladung. Keine Kacheln, keine eigenen
   Flächen, nur Haarlinien. Die Bilder stehen frei wie Abzüge mit
   weißem Rand, immer im eigenen Seitenverhältnis und nie beschnitten.
   Ohne Skript (kein .js-reiter) stehen die Häuser untereinander.
   ============================================================ */
.efall{--haar:rgba(112,72,97,.16);position:relative}

/* ---- Reiter als Navigation ----
   Eine weiße Leiste wie die Hauptnavigation, darin vier gleich breite
   Felder mit Logo-Kapsel. Hinter dem offenen Haus liegt eine lila
   Marke, die signal.js per transform zum gewählten Feld schiebt. Weil
   alle Felder einer Zeile gleich groß sind, bewegt sich nur transform. */
.ereiter,.ereiter__hinweis{display:none}
.js-reiter .ereiter__hinweis{
  display:flex;align-items:center;gap:10px;margin:0 0 12px 4px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--plum);
}
.js-reiter .ereiter__hinweis::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--orange)}
.js-reiter .ereiter{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:6px;
  border-radius:24px;background:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(112,72,97,.1),0 22px 48px -28px rgba(46,30,40,.34);
}
.ereiter__marke{
  position:absolute;left:0;top:0;z-index:0;pointer-events:none;border-radius:18px;
  background:linear-gradient(135deg,#8A5A78 0%,var(--plum) 45%,#4A2B41 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 30px -14px rgba(74,43,65,.7);
  transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .3s;
  will-change:transform;
}
.ereiter__marke.ohne-weg{transition:none}
.ereiter__tab{
  position:relative;z-index:1;
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:14px;row-gap:2px;align-items:center;text-align:left;cursor:pointer;
  min-height:44px;margin:0;padding:10px 16px 10px 10px;border:0;border-radius:18px;
  font:inherit;color:inherit;background:transparent;
  transition:background .3s var(--ease-out);
}
.ereiter__tab:hover:not([aria-selected="true"]){background:var(--f1)}
.ereiter__tab:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.ereiter__nr{display:none}
.ereiter__logo{
  grid-column:1;grid-row:1 / span 2;
  display:flex;align-items:center;justify-content:center;width:96px;height:54px;padding:7px 9px;
  border-radius:13px;background:#fff;box-shadow:0 0 0 1px rgba(112,72,97,.12);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.ereiter__logo img{max-width:100%;max-height:38px;width:auto;height:auto;display:block}
.ereiter__name{
  grid-column:2;grid-row:1;align-self:end;
  font-family:var(--sans);font-weight:500;font-size:15px;line-height:1.2;letter-spacing:-.015em;color:var(--ink);
  transition:color .35s;
}
.ereiter__lage{
  grid-column:2;grid-row:2;align-self:start;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  transition:color .35s;
}
.ereiter__tab:hover .ereiter__logo{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(112,72,97,.16),0 10px 20px -12px rgba(46,30,40,.4)}
.ereiter__tab[aria-selected="true"] .ereiter__name{color:#fff}
.ereiter__tab[aria-selected="true"] .ereiter__lage{color:rgba(255,255,255,.74)}
.ereiter__tab[aria-selected="true"] .ereiter__logo{box-shadow:0 0 0 1px rgba(255,255,255,.4),0 8px 18px -10px rgba(21,12,19,.6)}
/* Ohne Marke (vor dem ersten Messen) trägt der Reiter die Farbe selbst */
.ereiter:not(.hat-marke) .ereiter__tab[aria-selected="true"]{background:var(--plum)}

/* ---- Ein Haus ---- */
.ehaeuser{padding-top:clamp(36px,4.4vw,64px)}
.ehaus{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(32px,4.4vw,72px);align-items:start;
}
/* Links: Bild, darunter Überschrift und Geschichte */
.ehaus__links{display:flex;flex-direction:column;gap:clamp(26px,2.8vw,40px);min-width:0}
.ehaus__text{display:flex;flex-direction:column;gap:18px}
/* Bild und Text nebeneinander, wenn das Bild untereinander höher würde
   als „Seit MEMORO" daneben. Die Bildbreite richtet sich nach dem Format,
   damit beide Spalten ungefähr gleich hoch enden. */
.ehaus--neben .ehaus__links{display:grid;grid-template-columns:minmax(0,var(--bild-b)) minmax(0,1fr);align-items:start}
.ehaus--hoch{--bild-b:clamp(200px,17vw,250px)}
/* Text oben, Bild darunter (Weirether, Tron). Das Bild bleibt schmaler
   als die Spalte, die Bildunterschrift steht rechts daneben, damit die
   Spalte nicht höher wird als „Seit MEMORO". */
.ehaus--textoben .ehaus__text{order:-1}
.ehaus--textoben .ehaus__foto{display:grid;grid-template-columns:minmax(0,var(--bild-b)) minmax(0,1fr);gap:0 24px;align-items:end}
.ehaus--textoben .ehaus__steckbrief{margin-top:0;padding:0 0 12px}
.ehaus--quadrat{--bild-b:clamp(220px,19vw,270px)}
.ehaus--quer{--bild-b:clamp(300px,30vw,420px)}
.ehaus + .ehaus{margin-top:clamp(48px,6vw,88px);padding-top:clamp(48px,6vw,88px);border-top:1px solid var(--haar)}
.ehaeuser--reiter .ehaus + .ehaus{margin-top:0;padding-top:0;border-top:0}
.ehaus[hidden]{display:none}
.ehaus:focus-visible{outline:2px solid var(--orange);outline-offset:8px;border-radius:12px}
.ehaeuser--reiter .ehaus.kommt .ehaus__inhalt{animation:ehaus-auf .65s var(--ease-out) both}
.ehaeuser--reiter .ehaus.kommt .ehaus__foto{animation:ehaus-auf .8s var(--ease-out) both}
@keyframes ehaus-auf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Der Abzug: weißer Rand, weicher Schatten, Bild in voller Größe.
   Er bleibt beim Lesen stehen, solange der Text daneben läuft. */
.ehaus__foto{margin:0}
.ehaus__rahmen{
  position:relative;padding:10px;border-radius:22px;background:#fff;
  box-shadow:0 0 0 1px rgba(112,72,97,.08),0 34px 64px -38px rgba(46,30,40,.42);
}
.ehaus__rahmen > img{width:100%;height:auto;display:block;border-radius:14px}

/* Vorher und nachher: beide Bilder sind exakt 16:9, der Rahmen hat
   dasselbe Format, es wird also nichts abgeschnitten. */
.ehaus__vn{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden}

.ehaus__steckbrief{display:flex;flex-direction:column;gap:5px;margin-top:18px;padding:0 6px}
.ehaus__name{font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:-.01em;color:var(--ink)}
.ehaus__ort{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.ehaus__marken{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.ehaus__marken i{
  font-style:normal;padding:4px 9px;border-radius:999px;border:1px solid var(--haar);
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--plum);
}

/* Rechts: Seit MEMORO, beim Scrollen neben dem Text stehen bleibend */
.ehaus__inhalt{display:flex;flex-direction:column;gap:14px;min-width:0;position:sticky;top:calc(var(--nav-h) + 24px)}
.ehaus__kopf{display:flex;flex-direction:column;gap:14px}
.ehaus__lage{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--plum);
}
.ehaus__lage::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--orange)}
.ehaus__titel{
  margin:0;font-family:var(--sans);font-weight:400;
  font-size:clamp(26px,2.5vw,38px);line-height:1.08;letter-spacing:-.036em;color:var(--ink);text-wrap:balance;
}
.ehaus__lead{margin:0;max-width:62ch;font-family:var(--sans);font-weight:300;font-size:16.5px;line-height:1.7;color:var(--muted)}

/* ---- Seit MEMORO: lila Fläche mit bewegter Aura ----
   Drei weiche Wolken driften im screen-Modus über dunklem Pflaumengrund
   (nur transform). Beim Öffnen eines Hauses zeichnen sich die Linien
   und die Punkte kommen gestaffelt. Die Fläche trägt eine eigene
   background-color, damit die Helligkeitsmessung der Leiste greift. */
.ehaus__neu{
  position:relative;isolation:isolate;overflow:hidden;margin-top:6px;
  padding:clamp(20px,2.2vw,28px) clamp(20px,2.4vw,30px) clamp(12px,1.4vw,18px);
  border-radius:24px;background-color:#4A2B41;
  background-image:linear-gradient(140deg,#5E3A52 0%,#4A2B41 55%,#35202F 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 26px 50px -30px rgba(53,32,47,.65);
}
.ehaus__neu-aura{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ehaus__neu-aura i{
  position:absolute;display:block;border-radius:50%;filter:blur(46px);mix-blend-mode:screen;opacity:.75;
  will-change:transform;
}
.ehaus__neu-aura i:nth-child(1){width:62%;aspect-ratio:1;left:-14%;top:-40%;background:#9C6B87;animation:neu-drift-a 16s ease-in-out infinite alternate}
.ehaus__neu-aura i:nth-child(2){width:48%;aspect-ratio:1;right:-12%;top:10%;background:#C9A7B5;opacity:.42;animation:neu-drift-b 19s ease-in-out infinite alternate}
.ehaus__neu-aura i:nth-child(3){width:40%;aspect-ratio:1;left:30%;bottom:-46%;background:#F0762F;opacity:.28;animation:neu-drift-c 14s ease-in-out infinite alternate}
@keyframes neu-drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(18%,22%,0) scale(1.15)}}
@keyframes neu-drift-b{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-24%,18%,0) scale(.9)}}
@keyframes neu-drift-c{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(-20%,-26%,0) scale(1.12)}}

.ehaus__neu-titel{
  display:flex;align-items:center;gap:10px;margin-bottom:8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#fff;
}
/* Pulsierender Punkt vor dem Titel */
.ehaus__neu-titel i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}
.ehaus__neu-titel i::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(240,118,47,.7);
  animation:neu-puls 2.4s ease-out infinite;
}
@keyframes neu-puls{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}

.ehaus__liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;column-gap:30px;
}
.ehaus__liste li{
  position:relative;
  display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:6px;row-gap:3px;align-content:start;
  padding:15px 0 13px;
}
/* Die Trennlinie ist ein eigenes Element, damit sie sich zeichnen kann */
.ehaus__liste li::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.16);
  transform-origin:left;
}
.ehaus__nr{grid-row:1 / span 2;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#FFB38A;padding-top:3px}
.ehaus__liste b{font-family:var(--sans);font-weight:500;font-size:15px;line-height:1.35;letter-spacing:-.01em;color:#fff}
.ehaus__liste li > span:last-child{font-family:var(--sans);font-weight:300;font-size:14px;line-height:1.55;color:rgba(255,255,255,.76)}

/* Auftritt beim Öffnen: Linie zeichnet sich, Punkt steigt auf */
.ehaus.kommt .ehaus__liste li{animation:neu-auf .7s var(--ease-out) both}
.ehaus.kommt .ehaus__liste li::before{animation:neu-linie .9s var(--ease-out) both}
.ehaus.kommt .ehaus__liste li:nth-child(1),.ehaus.kommt .ehaus__liste li:nth-child(1)::before{animation-delay:.18s}
.ehaus.kommt .ehaus__liste li:nth-child(2),.ehaus.kommt .ehaus__liste li:nth-child(2)::before{animation-delay:.28s}
.ehaus.kommt .ehaus__liste li:nth-child(3),.ehaus.kommt .ehaus__liste li:nth-child(3)::before{animation-delay:.38s}
.ehaus.kommt .ehaus__liste li:nth-child(4),.ehaus.kommt .ehaus__liste li:nth-child(4)::before{animation-delay:.48s}
.ehaus.kommt .ehaus__liste li:nth-child(5),.ehaus.kommt .ehaus__liste li:nth-child(5)::before{animation-delay:.58s}
@keyframes neu-auf{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes neu-linie{from{transform:scaleX(0)}to{transform:scaleX(1)}}

html.sparsam .ehaus__neu-aura i{animation:none;filter:blur(24px);will-change:auto}
html.sparsam .ereiter__marke{will-change:auto}

.ehaus__mehr{border-top:1px solid var(--haar);padding-top:6px}
.ehaus__mehr summary{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--plum);
}
.ehaus__mehr summary::-webkit-details-marker{display:none}
.ehaus__mehr summary::after{
  content:"";width:7px;height:7px;margin-top:-4px;
  border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);
  transition:transform .3s var(--ease-out),margin .3s var(--ease-out);
}
.ehaus__mehr[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.ehaus__mehr summary:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
.ehaus__mehr p{margin:2px 0 8px;max-width:64ch;font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.65;color:var(--muted)}
.ehaus__mehr-in{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:20px;align-items:start;margin:2px 0 8px}
.ehaus__mehr-in img{width:100%;height:auto;display:block;border-radius:12px}
.ehaus__mehr-in p{margin:0}

/* ---- Einladung am Ende des Feldes ---- */
.ehaus__ruf{
  display:flex;align-items:center;justify-content:space-between;gap:18px 40px;flex-wrap:wrap;
  margin-top:clamp(44px,5.4vw,80px);padding-top:clamp(26px,3vw,36px);border-top:1px solid var(--haar);
}
.ehaus__ruf p{margin:0;max-width:62ch;font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;color:var(--muted)}
.ehaus__ruf b{font-weight:500;color:var(--ink)}

/* ---- Vorher und nachher ----
   Beide Bilder liegen deckungsgleich übereinander, das Nachher-Bild
   wird links bis zur Griffposition weggeschnitten. Gezogen wird über
   Zeigerereignisse auf der Fläche (signal.js); der unsichtbare Regler
   bedient Tastatur und Bildschirmleser. touch-action:pan-y lässt das
   senkrechte Scrollen auf dem Handy durch. */
.vn{
  position:absolute;inset:0;display:block;overflow:hidden;
  cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  background:#2a1d26;
}
.vn__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.vn__bild--nachher{clip-path:inset(0 0 0 var(--pos,50%))}
.vn__marke{
  position:absolute;bottom:14px;z-index:2;pointer-events:none;
  padding:6px 12px;border-radius:999px;
  background:rgba(21,12,19,.42);
  backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,.28);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  transition:opacity .3s var(--ease-out);
}
.vn__marke--vorher{left:14px;top:14px;bottom:auto}
.vn__marke--nachher{right:14px}
.vn[data-seite="vorher"] .vn__marke--nachher,
.vn[data-seite="nachher"] .vn__marke--vorher{opacity:0}
.vn__griff{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);z-index:3;width:0;pointer-events:none;
}
.vn__griff::before{
  content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;
  background:rgba(255,255,255,.92);box-shadow:0 0 18px rgba(21,12,19,.35);
}
.vn__griff i{
  position:absolute;top:50%;left:0;width:46px;height:46px;transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(255,255,255,.95);
  box-shadow:0 8px 24px -8px rgba(21,12,19,.55),0 0 0 1px rgba(112,72,97,.14);
  transition:transform .3s var(--ease-out);
}
/* Zwei Pfeile im Griff, gezeichnet aus Rändern */
.vn__griff i::before,.vn__griff i::after{
  content:"";position:absolute;top:50%;width:7px;height:7px;
  border:solid var(--plum);border-width:0 0 2px 2px;
}
.vn__griff i::before{left:12px;transform:translateY(-50%) rotate(45deg)}
.vn__griff i::after{right:12px;transform:translateY(-50%) rotate(-135deg)}
.vn.zieht .vn__griff i{transform:translate(-50%,-50%) scale(1.08)}
.vn__regler{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;
  pointer-events:none;
}
.vn:has(.vn__regler:focus-visible) .vn__griff i{outline:2px solid var(--orange);outline-offset:3px}
@supports not (backdrop-filter:blur(1px)){
  .vn__marke{background:rgba(21,12,19,.72)}
}
html.sparsam .vn__marke{background:rgba(21,12,19,.72)}

@media(max-width:1000px){
  .ehaus{grid-template-columns:1fr}
  .ehaus__inhalt{position:static}
  .ehaus__liste{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
}
@media(max-width:640px){
  .ehaus--neben .ehaus__links{grid-template-columns:1fr}
  .ehaus--hoch .ehaus__foto{max-width:260px}
  .ehaus--textoben .ehaus__foto{grid-template-columns:1fr}
  .ehaus--textoben .ehaus__steckbrief{margin-top:18px;padding:0 6px}
  .ehaus--quadrat .ehaus__rahmen{max-width:320px}
}
@media(max-width:900px){
  .js-reiter .ereiter{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .js-reiter .ereiter{gap:4px;padding:4px;border-radius:20px}
  .ereiter__marke,.ereiter__tab{border-radius:16px}
  .ereiter__tab{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:3px;padding:8px 10px 10px;justify-items:start}
  .ereiter__logo{grid-column:1;grid-row:1;width:100%;height:40px;margin-bottom:6px}
  .ereiter__logo img{max-height:26px}
  .ereiter__name{grid-column:1;grid-row:2;font-size:13.5px}
  .ereiter__lage{grid-column:1;grid-row:3;font-size:8.5px;letter-spacing:.08em}
  .ehaus__neu{border-radius:20px}
  .ehaus__rahmen{padding:7px;border-radius:18px}
  .ehaus__rahmen > img,.ehaus__vn{border-radius:12px}
  .ehaus__inhalt{gap:14px}
  .ehaus__lead{font-size:15.5px}
  .ehaus__mehr-in{grid-template-columns:1fr}
  .ehaus__ruf .ed-btn{width:100%;justify-content:center}
  .vn__marke{font-size:9px;letter-spacing:.12em;padding:5px 10px;bottom:10px}
  .vn__marke--vorher{left:10px;top:10px;bottom:auto}
  .vn__marke--nachher{right:10px}
  .vn__griff i{width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){
  .ehaeuser--reiter .ehaus.kommt .ehaus__inhalt,
  .ehaeuser--reiter .ehaus.kommt .ehaus__foto,
  .ehaus.kommt .ehaus__liste li,.ehaus.kommt .ehaus__liste li::before,
  .ehaus__neu-aura i,.ehaus__neu-titel i::after{animation:none}
  .ereiter__marke{transition:none}
}

/* ============================================================
   10c · ZWISCHENÜBERSCHRIFTEN UND SEKTIONSMARKEN
   Auf der Startseite gliedern „Für wen wir da sind" und „Was für
   uns spricht" ihren Abschnitt als richtige Zwischenüberschrift mit
   orangem Strich (.nf__k--gross). Auf den Unterseiten standen an
   derselben Stelle Kleinstversalien und gingen unter. Diese Fassung
   holt das nach, die Sektionsmarke über einer Überschrift bekommt
   denselben Strich in klein.
   ============================================================ */
.ed-marke--gross{
  display:flex;align-items:center;gap:14px;
  font-family:var(--sans);font-weight:400;
  font-size:clamp(23px,2.7vw,34px);line-height:1.14;letter-spacing:-.02em;
  text-transform:none;color:var(--ink);
  margin:0 0 var(--spacing-32,32px);
}
.ed-marke--gross::before{
  content:"";flex:none;width:26px;height:2px;border-radius:2px;background:var(--orange);
}
.ed-invers .ed-marke--gross,
.ed-kopfbild--dunkel .ed-marke--gross,
.tile--dark .ed-marke--gross,
.tile--plum .ed-marke--gross{color:#fff}

/* Dieselbe Fassung für die Blockmarken, die eigene Klassennamen tragen */
body.ed .grid__k,
body.ed .rat__k{
  display:flex;align-items:center;gap:14px;
  font-family:var(--sans);font-weight:400;
  font-size:clamp(21px,2.4vw,30px);line-height:1.14;letter-spacing:-.02em;
  text-transform:none;color:var(--ink);
  margin:clamp(30px,3.4vw,48px) 0 var(--spacing-12,12px);
}
body.ed .grid__k::before,
body.ed .rat__k::before{
  content:"";flex:none;width:26px;height:2px;border-radius:2px;background:var(--orange);
}

/* Die Sektionsmarke kündigt ein neues Thema an. Als Kleinstversalie ging
   sie neben dem Display unter, deshalb steht sie jetzt in derselben
   Fassung wie die Zwischenüberschriften der Startseite: Lesegröße, ohne
   Versalien, mit dem orangen Strich davor. Karten- und Feldmarken bleiben
   klein, sie werden von diesen Selektoren nicht erfasst. */
.ed-kopf > .ed-marke,
.bento__head .ed-marke,
.splitt__text > .ed-marke{
  display:flex;align-items:center;gap:14px;
  font-family:var(--sans);font-weight:400;
  font-size:clamp(23px,2.7vw,34px);line-height:1.14;letter-spacing:-.02em;
  text-transform:none;color:var(--ink);
  margin:0 0 var(--spacing-16,16px);
}
.ed-kopf > .ed-marke::before,
.bento__head .ed-marke::before,
.splitt__text > .ed-marke::before{
  content:"";flex:none;width:26px;height:2px;border-radius:2px;background:var(--orange);
}
/* Im mittigen Kopf rückt der Strich mit in die Mitte */
.ed-kopf--mittig > .ed-marke{justify-content:center}
.ed-invers .ed-kopf > .ed-marke,
.ed-invers .bento__head .ed-marke,
.ed-kopfbild--dunkel .ed-kopf > .ed-marke{color:#fff}

/* ============================================================
   10d · DREI SITUATIONEN — gleiche Höhe und leichte Raumwirkung
   ============================================================ */
/* Die Überschriften stehen auf einer Höhe: die Nummer bleibt oben,
   die Überschrift bekommt Platz für zwei Zeilen. Vorher schob
   margin-bottom:auto jede Überschrift auf ihre eigene Höhe. */
.ed-kacheln--gleich .ed-kachel__nr{margin-bottom:var(--spacing-24,24px)}
.ed-kacheln--gleich .ed-kachel h3{
  margin:var(--spacing-20,20px) 0 var(--spacing-12,12px);
  min-height:2.16em;
  display:flex;align-items:flex-end;
}
.ed-kacheln--raum{perspective:1200px;perspective-origin:50% 42%}

/* Leichte Raumwirkung: die Fläche kippt dem Zeiger entgegen, höchstens
   gut vier Grad, und hebt sich dabei ein Stück nach vorn. Der Winkel
   kommt als --kx / --ky aus signal.js, der Lichtfleck aus --mx / --my.
   Nur transform und Deckkraft, nichts, was das Layout bewegt. */
.kipp{
  position:relative;
  transform:rotateX(var(--ky,0deg)) rotateY(var(--kx,0deg)) translateZ(var(--kz,0px));
  transform-style:preserve-3d;
  box-shadow:0 2px 4px rgba(46,30,40,.05),0 12px 28px -18px rgba(46,30,40,.22);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),background .35s ease;
  will-change:transform;
}
.kipp:hover{
  --kz:16px;
  box-shadow:0 4px 8px rgba(46,30,40,.07),0 34px 66px -28px rgba(46,30,40,.45);
}
/* Der Lichtfleck macht die Neigung erst sichtbar */
.kipp::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.26),transparent 62%);
  opacity:0;transition:opacity .5s var(--ease-out);
}
.kipp:hover::after{opacity:1}
.kipp > *{position:relative;z-index:1}
@media (hover:none),(prefers-reduced-motion:reduce){
  .kipp{transform:none;transition:box-shadow .3s}
  .kipp::after{display:none}
}

/* ============================================================
   11 · SCHMALE GERÄTE
   ============================================================ */
@media(max-width:1080px){
  .ed-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ed-kacheln--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ed-zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ed-zahlen > div:nth-child(2n){border-right:0}
  .ed-zahlen > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:880px){
  .ed-kachel--breit{grid-column:span 2}
  .ed-liste li{grid-template-columns:1fr;gap:var(--spacing-12,12px)}
  .ed-liste__nr{padding-top:0}
}
@media(max-width:640px){
  .ed-kacheln,.ed-kacheln--2,.ed-kacheln--4{grid-template-columns:1fr}
  .ed-kachel--breit{grid-column:span 1}
  .ed-kachel{min-height:0;padding:var(--spacing-24,24px)}
  .ed-zahlen{grid-template-columns:1fr}
  .ed-zahlen > div{border-right:0;border-bottom:1px solid var(--line)}
  .ed-zahlen > div:last-child{border-bottom:0}
  .ed-knopfreihe .ed-btn{width:100%}
}

/* ============================================================
   12 · WENIGER BEWEGUNG
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .ed-auf{opacity:1;transform:none;transition:none}
  .ed-kopfbild__lage img{transform:scale(1.02)}
  .ed-bildband__bild{transform:none!important}
}

/* ============================================================
   13 · BAUSTEINE, DIE VORHER AUF DUNKEL LAGEN
   Die Zeitachse, der Freitextkasten und die Punktlisten waren
   für dunkle Abschnitte gebaut. Hier ihre helle Fassung. Nur
   Farbe wird getauscht, Maße und Bewegung bleiben.
   ============================================================ */

/* ---- Zeitachse ---- */
body.ed .pfad__spur{stroke:var(--line)}
body.ed .pfad__punkt::before{background:var(--f0);border-color:rgba(112,72,97,.28)}
body.ed .pfad__punkt.an::before{background:var(--orange);border-color:var(--orange)}
body.ed .pfad__nr{color:var(--muted);opacity:.7}
body.ed .pfad__punkt.an .pfad__nr{color:var(--orange);opacity:1}
body.ed .pfad__punkt h3{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(21px,2.2vw,28px);line-height:1.1;letter-spacing:-.03em;
  color:var(--ink);
}
body.ed .pfad__punkt p{color:var(--muted)}
body.ed .pfad__dauer{
  background:transparent;border-color:var(--line);color:var(--muted);
}
body.ed .pfad__punkt.an .pfad__dauer{border-color:var(--orange);color:var(--plum-deep)}

/* ---- Freitextkasten am Ende des Ablaufs ---- */
body.ed .nf__frei{
  border-radius:16px;
  background:var(--f2);border-color:transparent;
}
body.ed .nf__frei p{color:var(--muted)}
body.ed .nf__frei b{color:var(--ink);font-weight:500}

/* ---- Punktliste in einer Farbkachel ---- */
.ed-punkte{
  list-style:none;margin:0;padding:0;
  font-family:var(--sans);font-weight:300;font-size:15.5px;line-height:1.58;
}
.ed-punkte li{
  position:relative;padding-left:20px;margin-bottom:10px;opacity:.82;
}
.ed-punkte li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:1px;background:currentColor;opacity:.6;
}
.ed-punkte li:last-child{margin-bottom:0}
.ed-punkte b{font-weight:500;opacity:1}

/* ---- Raster in der umgekehrten Karte ---- */
/* Trennung über Linien am Element, nicht über eine Lückenfarbe im
   Raster. Bei sieben Einträgen in drei Spalten bliebe sonst eine
   eingefärbte leere Zelle stehen. */
.ed-raster{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:var(--spacing-32,32px);
}
.ed-raster > div{
  padding:var(--spacing-24,24px) var(--spacing-24,24px) var(--spacing-28,28px) 0;
  border-top:1px solid rgba(255,255,255,.16);
}
.ed-raster > div:not(:nth-child(3n+1)){
  padding-left:var(--spacing-24,24px);
  border-left:1px solid rgba(255,255,255,.16);
}
.ed-raster b{
  display:block;font-family:var(--sans);font-weight:400;font-size:16.5px;
  color:#fff;margin-bottom:6px;
}
.ed-raster span{
  display:block;font-family:var(--sans);font-weight:300;font-size:14.5px;
  line-height:1.55;color:rgba(255,255,255,.66);
}
@media(max-width:880px){
  .ed-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ed-raster > div:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .ed-raster > div:not(:nth-child(2n+1)){
    padding-left:var(--spacing-24,24px);border-left:1px solid rgba(255,255,255,.16);
  }
}
@media(max-width:560px){
  .ed-raster{grid-template-columns:1fr}
  .ed-raster > div{padding-left:0!important;border-left:0!important}
}

/* ---- Zusagenliste, helle Fassung ---- */
body.ed .zusage b{
  font-family:var(--sans);font-weight:400;font-size:21px;letter-spacing:-.028em;
}
body.ed .zusage li::before{font-family:var(--mono);letter-spacing:.182em}

/* ---- Häufige Fragen ---- */
body.ed .faq summary{
  font-family:var(--sans);font-weight:400;font-size:17px;
  padding:20px 0;transition:color .2s ease;
}
body.ed .faq details p{font-weight:300}

/* ---- Splitt im Editorial-Ton: flach, größerer Radius ---- */
body.ed .splitt__bild{border-radius:30px;box-shadow:none}
body.ed .splitt__bild{clip-path:inset(0 0 0 0 round 30px)}
body.ed .reveal .splitt__bild,body.ed .splitt__bild.reveal,
body.ed .ed-auf .splitt__bild{clip-path:inset(26% 0 0 0 round 30px);
  transition:clip-path 1.15s cubic-bezier(.22,.7,.25,1)}
body.ed .reveal.in .splitt__bild,body.ed .splitt__bild.reveal.in,
body.ed .ed-auf.in .splitt__bild{clip-path:inset(0 0 0 0 round 30px)}

/* ---- Fußzeile bleibt der einzige dunkle Block, das ist Absicht:
        sie schließt die Seite ab und trägt keinen Inhalt. ---- */

@media(prefers-reduced-motion:reduce){
  body.ed .splitt__bild,
  body.ed .ed-auf .splitt__bild,
  body.ed .ed-auf.in .splitt__bild{clip-path:none;transition:none}
}

/* ---- Laufband, helle Fassung ----
   Auf einer hellen Seite darf der dunkle Streifen nicht stehen
   bleiben: er würde als eigener Abschnitt gelesen. */
body.ed .ticker{
  background:var(--f0);
  border-color:var(--line);
}
body.ed .ticker span{color:var(--muted);letter-spacing:.182em}

/* ---- Kontaktkarten und Glaskarten, flache Fassung ----
   Origin trennt Flächen über Farbstufen, nicht über Schatten. Die
   Glaskarten der Unterseiten bekommen deshalb hier ihre flache Form. */
body.ed .glass,
body.ed .wege3 .weg,
body.ed .tile:not(.tile--dark):not(.tile--plum):not(.tile--orange),
body.ed .beispiel,
body.ed .direktbox,
body.ed .satzkasten{
  box-shadow:none;
  border-radius:30px;
  background:var(--f2);
  border:0;
}
body.ed .glass__glow{display:none}
body.ed .wege3 .weg{padding:var(--spacing-32,32px)}
body.ed .wege3 .weg h3{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(21px,2.2vw,27px);line-height:1.1;letter-spacing:-.03em;
  color:var(--ink);
}
body.ed .wege3 .weg .wer{color:var(--plum);font-size:14.5px}
body.ed .wege3 .weg p.txt{color:var(--muted)}
body.ed .wege3 .weg .mail{color:var(--plum-deep)}
body.ed .tile h3,body.ed .beispiel h3{
  font-family:var(--sans);font-weight:400;letter-spacing:-.03em;
}
body.ed .satzkasten{padding:var(--spacing-32,32px);color:var(--muted)}

/* ---- Unterzeile unter einer Anzeigenüberschrift ---- */
body.ed .ed-kopf > p{
  font-family:var(--sans);font-weight:300;
  font-size:17px;line-height:1.62;color:var(--muted);
  max-width:56ch;margin-top:var(--spacing-24,24px);
}
body.ed .ed-kopf--mittig > p{margin-inline:auto}

/* ---- Der große Satz und die Rollen, helle Fassung ----
   Der Satz wird zur Anzeigenschrift, die Wortwelle bleibt: sie ist
   die einzige Stelle, an der Orange im Text erscheint, und sie
   bewegt sich, ist also kein statischer Farbakzent. */
body.ed .grosssatz{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(28px,4vw,58px);line-height:1.1;letter-spacing:-.04em;
  color:var(--ink);max-width:20ch;
}
/* Im Tisch-Abschnitt trägt der Satz die Maße der Startseite, nicht die
   größere Anzeigenschrift der Unterseiten — sonst wäre der Abschnitt
   dort anderthalbmal so hoch wie sein Gegenstück. */
body.ed .ed-abschnitt--tisch .grosssatz{
  font-size:clamp(24px,3.1vw,42px);line-height:1.24;letter-spacing:-.03em;max-width:24ch;
}
body.ed .satz__note{color:var(--muted);font-weight:300}
body.ed .satz__note b{color:var(--ink);font-weight:500}
body.ed .rollen span{
  border-color:var(--line);background:transparent;color:var(--muted);
  font-family:var(--mono);font-size:11px;letter-spacing:.182em;text-transform:uppercase;
  padding:9px 16px;
}
body.ed .rollen span::before{background:var(--plum-soft)}
body.ed .rollen span:nth-child(-n+3)::before{background:var(--orange)}

/* ---- Zitat: statt dunklem Kasten eine Farbkachel ---- */
body.ed .zitat{
  border-radius:30px;background:var(--plum);
  padding:clamp(32px,4.4vw,60px);
}
body.ed .zitat::before{display:none}
body.ed .zitat p{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(24px,3vw,40px);line-height:1.14;letter-spacing:-.034em;
  max-width:22ch;color:#fff;
}
body.ed .zitat footer{color:rgba(255,255,255,.6);letter-spacing:.182em}

/* ---- Der Nebel hinter den Abschnitten wird auf hell zu laut ----
   mesh und aura sind für dunkle Flächen gebaut. Auf Weiß legen sie
   einen Schleier über den Text, deshalb bleiben sie hier aus. */
body.ed .ed-abschnitt > .mesh,
body.ed .ed-abschnitt > .aura,
body.ed .ed-kopfbild > .mesh{display:none}

/* ---- Farbige Kacheln bleiben farbig ----
   .tile--dark und .tile--plum sind bewusst gefärbt und tragen weiße
   Schrift. Die pauschale Verflachung darf sie nicht aufhellen, sonst
   steht Weiß auf Hellgrau. Sie werden hier zu echten Farbkacheln im
   Sinne der Referenz: volle Fläche, 30px Radius, kein Verlauf. */
body.ed .tile--dark{
  background:var(--plum-deep);color:#fff;border:0;border-radius:30px;box-shadow:none;
}
body.ed .tile--plum{
  background:var(--plum);color:#fff;border:0;border-radius:30px;box-shadow:none;
}
body.ed .tile--dark h3,body.ed .tile--plum h3{color:#fff}
body.ed .tile--dark p{color:rgba(255,255,255,.78)}
body.ed .tile--plum p{color:rgba(255,255,255,.80)}
body.ed .tile--dark .ed-marke,body.ed .tile--plum .ed-marke{color:rgba(255,255,255,.66)}
body.ed .tile--dark a.more,body.ed .tile--plum a.more{color:#fff}
/* Der dekorative Farbschein entfällt: die Fläche trägt die Kachel */
body.ed .tile--dark::before,body.ed .tile--plum::before{display:none}

/* ============================================================
   14 · KONTRAST
   Zwei Regeln der Referenz greifen hier zusammen und lösen ein
   Problem, das die Seite schon vorher hatte:

   „Chromatische Farben nie auf Text unter 18px" und „genau eine
   Handlungsfarbe". Orange auf Weiß kommt bei 11px auf 2,4:1,
   verlangt sind 4,5:1. Orange bleibt deshalb Fläche: Knopf und
   Kachel. Kleine Marken stehen in Pflaume, das trägt 8,8:1.
   ============================================================ */
body.ed .eyebrow,
body.ed .eyebrow--plum,
body.ed .nf__no,
body.ed .rw__n,
body.ed .rolle,
body.ed .preis,
body.ed .kap__no,
body.ed .tl__n{
  color:var(--plum);
}
/* Auf dem dunklen Kopf steht Pflaume auf Pflaume — die Dachzeile war
   dort praktisch unsichtbar. Sie bekommt darum Weiß. */
body.ed .ed-kopfbild--dunkel .eyebrow{color:rgba(255,255,255,.82)}
/* Der Punkt vor der Dachzeile ist das kleinste Signal der Seite: er
   steht im Memoro-Orange und pulst, wie im Hero der Startseite. */
body.ed .eyebrow i{background:var(--orange);box-shadow:0 0 0 0 rgba(255,122,56,.6);animation:pulse 2.4s infinite}
@media(prefers-reduced-motion:reduce){body.ed .eyebrow i{animation:none}}
/* Auf gefärbter Fläche trägt Weiß, dort gilt die Regel nicht */
body.ed .tile--dark .eyebrow,body.ed .tile--plum .eyebrow,
body.ed .tile--dark .nf__no,body.ed .tile--plum .nf__no,
body.ed .ed-invers .eyebrow,body.ed .ed-invers .nf__no,
body.ed .ed-kachel--pflaume .nf__no,body.ed .ed-kachel--pflaume .eyebrow,
body.ed .zitat footer{color:rgba(255,255,255,.72)}
/* Auch auf dunklen Kacheln bleibt der Punkt orange: er ist das Signal,
   nicht die Schrift. */
body.ed .tile--dark .eyebrow i,body.ed .tile--plum .eyebrow i{background:var(--orange)}

/* Die Handlungsfarbe bleibt exakt unser Orange. Damit sie die
   Anforderung trägt, steht die Beschriftung in Tinte statt in
   Weiß: 7,0:1 gegenüber 2,6:1. Die Fläche ändert sich nicht. */
body.ed .ed-btn--voll{color:var(--ink)}
body.ed .ed-btn--voll:hover{background:var(--orange-deep);color:#fff}
body.ed .btn--fill{color:var(--ink)}
body.ed .btn--fill:hover{color:#fff}

/* ============================================================
   15 · SCHRIFTFARBE DORT NACHZIEHEN, WO DIE FLÄCHE HELL WURDE
   Jede Fläche, die aus einem dunklen Abschnitt kommt und hier
   hell wird, braucht auch ihre Schriftfarbe neu. Sonst steht
   Weiß auf Weiß. Vollständige Liste, per Prüfung ermittelt.
   ============================================================ */
body.ed .glass,
body.ed .tcard,
body.ed .nf__lagen .glass{color:var(--ink)}
body.ed .glass p,
body.ed .tcard p,
body.ed .tcard ul li,
body.ed .nf__lagen .glass p{color:var(--muted)}
body.ed .glass h3,
body.ed .tcard h3{color:var(--ink)}
body.ed .tcard ul li::marker{color:var(--plum-soft)}

/* ---- Die vier Wege, allein über die Fläche unterschieden ----
   Kein Foto, keine Animation, keine Aura: dieselbe Origin-Logik wie
   bei den Farbkacheln der Nachfolgeseite. Die Reihenfolge der Töne
   ist so gewählt, dass zwei Nachbarn nie denselben Helligkeitssprung
   machen. Die mittlere Stufe trägt Pflaume, sie ist die, um die es
   meistens geht. */
body.ed .tcard--flaeche{
  border-radius:30px;
  padding:var(--spacing-32,32px);
  border:0;
  box-shadow:none;
  transition:background .35s var(--ease-out),transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
body.ed .tcard--nebel{background:var(--plum-mist);color:var(--plum-deep)}
body.ed .tcard--nebel:hover{background:var(--f3)}
body.ed .tcard--pflaume{background:var(--plum);color:#fff}
body.ed .tcard--pflaume:hover{background:#7C5069}
body.ed .tcard--altrosa{background:var(--plum-soft);color:var(--plum-deep)}
body.ed .tcard--altrosa:hover{background:#D2B3BF}
body.ed .tcard--sand{background:var(--sand);color:var(--ink)}
body.ed .tcard--sand:hover{background:#F0E7E1}

/* ---- Die exklusive Stufe ----
   Schwarze Fläche mit goldener Überschrift, dazu ein feiner goldener
   Rand. Sie steht eine Spur höher und breiter als ihre drei Nachbarn,
   damit man ihr ansieht, dass sie nicht einfach die dritte von vier ist. */
body.ed .tcard--luxus{
  background:linear-gradient(158deg,#17120C 0%,#0B0908 58%,#151009 100%);
  color:#F3E7D2;
  border:1px solid rgba(201,162,39,.34);
  box-shadow:0 30px 70px rgba(12,8,4,.34);
  margin-block:clamp(-18px,-1.4vw,-10px);
  padding:calc(var(--spacing-32,32px) + 8px);
}
body.ed .tcard--luxus:hover{
  background:linear-gradient(158deg,#1D1710 0%,#100C0A 58%,#1B1410 100%);
  border-color:rgba(201,162,39,.55);
}
/* Überschrift und Aufzählung stehen in reinem Weiß — auf der schwarzen
   Fläche ist das der stärkste Kontrast, den es gibt. Gold bleibt der
   Zeile „Auf Anfrage oder Einladung" und den Punkten vorbehalten, sonst
   verliert es seine Wirkung. */
body.ed .tcard--luxus h3{color:#fff}
body.ed .tcard--luxus .nf__no{color:rgba(255,255,255,.6)}
/* Die Zeile unter der Überschrift ist hier keine Preisangabe in
   Versalien, sondern ein Satz — sie darf größer und normal gesetzt sein. */
body.ed .tcard--luxus .preis{
  font-family:var(--sans);font-size:16.5px;font-weight:400;
  letter-spacing:-.01em;text-transform:none;color:#E3C577;
}
body.ed .tcard--luxus p{color:rgba(255,255,255,.76)}
body.ed .tcard--luxus ul li{color:#fff}
body.ed .tcard--luxus ul li::before{background:#C9A227}
body.ed .tcard--luxus .ed-btn--linie{border-color:rgba(201,162,39,.5);color:#F0DDB4;background:transparent}
body.ed .tcard--luxus .ed-btn--linie:hover{border-color:#E3C577;background:rgba(201,162,39,.14)}
/* Ein ruhiger Glanz über der Fläche: ein heller Bogen von links oben,
   dazu ein kühler Schimmer an der unteren rechten Ecke. Beides steht
   still — eine wandernde Reflexion wäre auf einer Preistabelle zu viel.
   Der Glanz liegt unter dem Text (z-index 0 gegen den Inhalt). */
body.ed .tcard--luxus{position:relative;isolation:isolate;overflow:hidden}
body.ed .tcard--luxus::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(152deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 22%,rgba(255,255,255,0) 46%),
    radial-gradient(120% 62% at 78% 108%,rgba(201,162,39,.18),transparent 62%);
}
/* Die Goldkante oben ist die eigentliche Glanzlinie. */
body.ed .tcard--luxus::after{
  content:"";position:absolute;left:12%;right:12%;top:0;height:1px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(235,208,154,.7),transparent);
}

/* Die vier Stufen: drei gleich breit, die dritte eine Spur breiter und
   oben wie unten etwas höher. Mehr Unterschied braucht es nicht — die
   Reihe soll ruhig bleiben und nicht auseinanderfallen. */
/* minmax(0,…) statt 1fr: sonst wächst eine Spalte über ihren Anteil
   hinaus, sobald ihr Inhalt breiter ist — die vier Karten waren dadurch
   328, 279, 318 und 307 px breit statt gleich. */
#wege .tcards--4{
  grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.14fr) minmax(0,1fr);
  align-items:stretch;
}
@media(max-width:1080px){
  #wege .tcards--4{grid-template-columns:minmax(0,1fr)}
  body.ed .tcard--luxus{margin-block:0}
}

/* ---- Auszeichnung auf der meistgewählten Stufe ---- */
/* Die Marke steht in der oberen rechten Ecke der Karte, nicht im Fluss:
   im Fluss schöbe sie die Überschrift nach unten und die vier Karten
   stünden nicht mehr auf einer Linie. */
body.ed .tcard--flaeche{position:relative}
body.ed .tcard__marke{
  position:absolute;top:clamp(20px,2.2vw,26px);right:clamp(20px,2.2vw,26px);z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px 5px 8px;border-radius:999px;
  font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:-.005em;
  white-space:nowrap;
  color:var(--plum-deep);background:#FFD9B8;
  box-shadow:0 6px 16px -6px rgba(26,15,23,.4);
}
body.ed .tcard__marke svg{width:13px;height:13px;flex:none;fill:var(--orange-deep)}
/* Auf der Pflaumenfläche steht die Marke in Sandton mit dunkler Schrift:
   das ist der hellste Punkt der Karte und zieht den Blick genau dorthin. */
body.ed .tcard--pflaume .tcard__marke{background:#FFE2C6;color:#5A3348}
/* Platz für die Marke: die Zeile „WEG 02" endet vor ihr. */
body.ed .tcard--pflaume .nf__no{padding-right:8.6rem}
@media(max-width:1080px){
  body.ed .tcard--pflaume .nf__no{padding-right:0}
}

/* Schriftfarben je Fläche */
body.ed .tcard--flaeche h3{color:inherit}
body.ed .tcard--nebel p,body.ed .tcard--nebel ul li,
body.ed .tcard--altrosa p,body.ed .tcard--altrosa ul li{color:rgba(71,42,59,.82)}
body.ed .tcard--sand p,body.ed .tcard--sand ul li{color:var(--muted)}
body.ed .tcard--pflaume p,body.ed .tcard--pflaume ul li{color:rgba(255,255,255,.84)}
body.ed .tcard--pflaume .nf__no,
body.ed .tcard--pflaume .preis{color:#FFC49E}
body.ed .tcard--pflaume ul li::before{background:#FFC49E}
body.ed .tcard--flaeche ul li::before{background:var(--orange)}
body.ed .tcard--pflaume ul li::before{background:#FFC49E}
body.ed .tcard--flaeche.tcard--luxus ul li::before{background:#C9A227}
/* Der Linienknopf auf Pflaume */
body.ed .tcard--pflaume .ed-btn--linie{border-color:rgba(255,255,255,.44);color:#fff;background:transparent}
body.ed .tcard--pflaume .ed-btn--linie:hover{border-color:#fff;background:rgba(255,255,255,.14)}
body.ed .tcard--flaeche .ed-btn{margin-top:auto}

body.ed .tueren__satz{color:var(--muted)}
body.ed .tueren__satz a{color:var(--plum);text-decoration:underline;text-underline-offset:3px}

body.ed .kontakt__foot{color:var(--muted)}
body.ed .kontakt__foot span{color:var(--muted)}
body.ed .kontakt__foot a{color:var(--plum-deep)}

/* Der Platzhalter für ein fehlendes Porträt: Fläche in Pflaume,
   damit die Initialen darauf tragen. */
body.ed .person__pic--mono{background:var(--plum-mist)}
body.ed .person__pic--mono span{color:var(--plum-deep)}
body.ed .person__pic--mono small{color:var(--muted)}

/* Bildunterschrift im Mosaik: liegt auf dem Foto, bekommt deshalb
   einen hellen Schleier und Tinte statt Weiß auf Weiß. */
body.ed .mo figcaption{
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.94) 46%);
  color:var(--ink);
}
body.ed .mo figcaption b{color:var(--ink)}
body.ed .mo figcaption span{color:var(--muted)}

/* ---- Tippziele: die Partnerliste ----
   Die Ortslinks stehen einzeln und sind eigene Ziele. Sie lagen bei
   knapp 40px, verlangt sind 44. Im Fließtext stehende Links bleiben
   unberührt, dort wäre eine Mindesthöhe ein Loch im Absatz. */
@media(max-width:880px){
  body.ed .orte ul a{
    display:flex;align-items:center;min-height:44px;
  }
}

/* ============================================================
   16 · BILD IM FELD
   Wie auf der Startseite: das Motiv sitzt oben in der Karte,
   randlos bis an die Kante, und blendet nach unten in die
   Kartenfläche aus. Der Ausblendton kommt aus --feld, damit er
   auf hellen wie auf farbigen Kacheln stimmt.
   ============================================================ */
body.ed .tile{--feld:var(--f2)}
body.ed .tile--dark{--feld:var(--plum-deep)}
body.ed .tile--plum{--feld:var(--plum)}

body.ed .tile__bild{
  position:relative;
  /* aus dem Innenabstand der Karte herausziehen, 30px sind es */
  margin:-30px -30px var(--spacing-24,24px);
  height:clamp(146px,17vw,190px);
  overflow:hidden;
  border-radius:30px 30px 0 0;
}
body.ed .tile__bild img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* Der Bildausschnitt steht am Bild selbst: --fokus im style-Attribut der
     Kachel. Die Motive sind Mockups, keine Landschaften — ohne Nachhilfe
     schneidet der Streifen dem Prospekt den Kopf ab. */
  object-position:var(--fokus,50% 50%);
  transform:scale(1.03);
  transition:transform .45s var(--ease-out);
}
body.ed .tile:hover .tile__bild img{transform:scale(1.07)}
/* Grafiken statt Fotos: eine Übersicht mit Beschriftungen verträgt keinen
   Ausschnitt, sie muss vollständig stehen. Darum liegt sie auf ihrem eigenen
   Papierton im Kasten, ohne Verlauf, ohne Tönung und ohne Zoom beim
   Überfahren — beim Diagramm wirkt beides wie ein Fehler. */
body.ed .tile__bild--grafik{background:#F2EFEA}
body.ed .tile__bild--grafik img{
  object-fit:contain;padding:6px;transform:none;filter:none;
}
body.ed .tile:hover .tile__bild--grafik img{transform:none;filter:none}
/* Randlos: der Kasten übernimmt das Seitenverhältnis des Bildes, statt
   das Bild in einen festen Streifen zu setzen. Sonst blieben links und
   rechts helle Ränder, weil der Streifen breiter ist als das Motiv.
   So füllt die Karte den Kopf der Kachel über die ganze Breite. */
body.ed .tile__bild--voll{
  height:auto;aspect-ratio:1440/655;
}
body.ed .tile__bild--voll img{object-fit:cover;padding:0}
body.ed .tile__bild--grafik::after,
body.ed .tile__bild--grafik::before{display:none}
/* Der Übergang in die Karte. Ohne ihn schneidet das Bild hart ab
   und die Karte zerfällt in zwei Hälften. */
body.ed .tile__bild::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--feld) 0%, transparent) 52%,
    color-mix(in srgb, var(--feld) 62%, transparent) 82%,
    var(--feld) 100%);
}
@supports not (color: color-mix(in srgb, red, blue)){
  body.ed .tile__bild::after{
    background:linear-gradient(180deg,rgba(243,236,240,0) 52%,rgba(243,236,240,.7) 82%,var(--f2) 100%);
  }
  body.ed .tile--dark .tile__bild::after{
    background:linear-gradient(180deg,rgba(71,42,59,0) 52%,rgba(71,42,59,.7) 82%,var(--plum-deep) 100%);
  }
  body.ed .tile--plum .tile__bild::after{
    background:linear-gradient(180deg,rgba(112,72,97,0) 52%,rgba(112,72,97,.7) 82%,var(--plum) 100%);
  }
}
/* Die Marke rutscht auf das Bild, wie die Zahl auf der Startseite */
body.ed .tile__bild + .ed-marke,
body.ed .tile__bild + .eyebrow{
  position:relative;z-index:2;
}
@media(max-width:640px){
  body.ed .tile__bild{height:clamp(132px,34vw,168px)}
}

/* ============================================================
   THEMEN · die gehobene Fassung
   Origins flache Flächen bleiben die Grundlage, bekommen aber
   Material: ein Verlauf statt einer Volltonfläche, eine helle
   Innenkante, ein tiefer weicher Schatten und derselbe Lichtstreifen,
   der auch über die Schaltflächen zieht. Die Marke wird zur Kapsel,
   das Bild trägt eine warme Tönung, die beim Überfahren aufklart.
   ============================================================ */
body.ed .grid{gap:18px}

body.ed .tile:not(.tile--dark):not(.tile--plum):not(.tile--orange){
  background:linear-gradient(168deg,#FFFFFF 0%,#FCF9FB 44%,var(--f2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 0 0 1px rgba(112,72,97,.09),
    0 22px 48px -28px rgba(46,30,40,.26);
}
body.ed .tile--dark{
  background:linear-gradient(168deg,#3C2436 0%,var(--plum-deep) 56%,#241521 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 54px -28px rgba(26,15,23,.6);
}
body.ed .tile--plum{
  background:linear-gradient(168deg,#7E5271 0%,var(--plum) 56%,#5B3A4E 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 54px -28px rgba(26,15,23,.5);
}
body.ed .tile{
  position:relative;isolation:isolate;overflow:hidden;
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}
body.ed .tile:hover{transform:translateY(-6px)}
body.ed .tile:not(.tile--dark):not(.tile--plum):not(.tile--orange):hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 0 0 1px rgba(112,72,97,.14),
    0 44px 88px -34px rgba(46,30,40,.38);
}
body.ed .tile--dark:hover,body.ed .tile--plum:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 44px 88px -34px rgba(26,15,23,.7);
}
/* Lichtstreifen, derselbe wie auf den Schaltflächen */
body.ed .tile::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:linear-gradient(104deg,transparent 36%,rgba(255,255,255,.42) 50%,transparent 64%);
  transform:translateX(-115%);opacity:0;
}
@media (hover:hover) and (pointer:fine){
  body.ed .tile:hover::after{animation:ed-tile-glanz 1.1s var(--ease-out) forwards}
}
@keyframes ed-tile-glanz{
  0%{transform:translateX(-115%);opacity:0}
  18%{opacity:1}
  100%{transform:translateX(115%);opacity:0}
}

/* Das Bild bekommt eine warme Tönung, die beim Überfahren aufklart,
   und eine feine Innenkante gegen die Kartenfläche. */
body.ed .tile__bild img{
  filter:saturate(.88) contrast(1.02);
  transition:transform 1.2s var(--ease-out),filter 1.2s var(--ease-out);
}
body.ed .tile:hover .tile__bild img{transform:scale(1.09);filter:saturate(1.04) contrast(1.05)}
body.ed .tile__bild::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(150deg,rgba(112,72,97,.2),rgba(21,12,19,.06) 58%,transparent);
  mix-blend-mode:multiply;
  transition:opacity .9s var(--ease-out);
}
body.ed .tile:hover .tile__bild::before{opacity:.45}

/* Die Marke wird zur Kapsel mit vorangestelltem Punkt */
body.ed .tile > .ed-marke{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 13px 6px 11px;border-radius:999px;
  background:rgba(112,72,97,.09);
  color:var(--plum);
  font-size:10px;letter-spacing:.2em;
}
body.ed .tile > .ed-marke::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--orange);flex:0 0 auto;
}
body.ed .tile--dark > .ed-marke,
body.ed .tile--plum > .ed-marke{background:rgba(255,255,255,.14);color:rgba(255,255,255,.86)}

/* Etwas mehr Luft und eine Haarlinie vor dem Weiterlesen */
body.ed .tile h3{margin-top:var(--spacing-12,12px);letter-spacing:-.028em}
body.ed .tile a.more{
  margin-top:var(--spacing-20,20px);padding-top:var(--spacing-16,16px);
  border-top:1px solid rgba(112,72,97,.14);width:100%;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.182em;text-transform:uppercase;
  transition:gap .3s var(--ease-out),color .3s;
}
body.ed .tile:hover a.more{gap:12px}
body.ed .tile--dark a.more,body.ed .tile--plum a.more{border-top-color:rgba(255,255,255,.2)}

/* ============================================================
   NETZWERK — Kopf kompakt, in hellem Grau
   Der Kopf trägt dieselbe Fläche wie der Kartenkasten; die beiden
   unterscheiden sich nur über die Kastenlinie. Damit alles ohne
   Scrollen im Bild steht, ist er eng gesetzt: wenig Vorlauf oben,
   etwas kleinere Überschrift, breitere Textspalte.
   ============================================================ */
.ed-kopfbild--karte{
  padding-top:calc(var(--nav-h) + clamp(24px,3vw,48px));
  padding-bottom:clamp(40px,5vw,72px);
  /* Grundfarbe zusätzlich zum Verlauf: die Navigation misst die
     Hintergrundfarbe des Elements unter sich, und ein reiner Verlauf
     liefert dort „transparent" — die Leiste träfe die falsche Wahl. */
  /* Oben Pflaume, nach unten ins Weiß: so geht der Kopf ohne Kante in
     die helle Sektion darunter über. Die Grundfarbe steht zusätzlich
     zum Verlauf, weil die Navigation die Hintergrundfarbe misst und
     ein reiner Verlauf dort „transparent" liefert. */
  background-color:#E4D2DE;
  background-image:
    linear-gradient(180deg,
      #D8BFD0 0%,
      #E3D0DD 26%,
      #EFE3EB 52%,
      #F8F3F6 76%,
      #FFFFFF 100%);
}
/* Leichte Bewegung im Kopf: zwei weiche Pflaumenwolken, die langsam
   über die obere Hälfte ziehen. Sie liegen unter allem und laufen aus,
   bevor der Verlauf ins Weiß kippt. */
.ed-kopfbild--karte::before{
  content:"";position:absolute;left:-12%;right:-12%;top:-18%;height:78%;
  z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 52% at 22% 40%, rgba(156,107,135,.42), transparent 70%),
    radial-gradient(32% 46% at 76% 20%, rgba(201,167,181,.5), transparent 72%);
  filter:blur(30px);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
  animation:nwZiehen 26s ease-in-out infinite;
}
@keyframes nwZiehen{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  34%{transform:translate3d(5%,2%,0) scale(1.1)}
  68%{transform:translate3d(-4%,-2%,0) scale(.95)}
}
@media(prefers-reduced-motion:reduce){.ed-kopfbild--karte::before{animation:none}}
.ed-kopfbild--karte .wrap{position:relative;z-index:2}
.ed-kopfbild--karte .ed-kopfbild__karte{z-index:1}

.ed-kopfbild--karte .ed-kopfbild__in{max-width:690px}
.ed-kopfbild--karte .ed-display{font-size:clamp(34px,4.2vw,58px);color:var(--ink)}
.ed-kopfbild--karte .ed-display em{color:var(--plum)}
.ed-kopfbild--karte .ed-text{color:var(--muted)}
.ed-kopfbild--karte .ed-text b{color:var(--ink)}
.ed-kopfbild--karte .ed-marke{color:var(--muted)}
body.ed .ed-kopfbild--karte .eyebrow{color:var(--plum)}
body.ed .ed-kopfbild--karte .eyebrow i{background:var(--orange)}
/* Der Kasten hebt sich über seine Linie ab, die Fläche darin ist nur
   eine Spur heller als der Kopf. */
.ed-kopfbild--karte .ed-kopfbild__karte{
  background:linear-gradient(168deg,#FFFFFF 0%,#FBFAFC 54%,#F4F2F6 100%);
  border:1px solid rgba(112,72,97,.16);
  box-shadow:0 30px 64px rgba(71,42,59,.16), inset 0 1px 0 rgba(255,255,255,.95);
}

/* ---- Die vier Punkte mit Symbol ----
   Ersetzt die Zahlenreihe im Kopf: was der Verbund abgibt, nicht was
   er kostet. Zwei Spalten, damit der Block flach bleibt. */
.nwl{
  list-style:none;margin:clamp(26px,3vw,36px) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:14px clamp(20px,2.4vw,32px);
}
.nwl__item{display:flex;gap:13px;align-items:flex-start}
.nwl__sym{
  flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  color:var(--plum);background:rgba(255,255,255,.8);
  border:1px solid rgba(71,42,59,.1);
  box-shadow:0 6px 16px rgba(71,42,59,.08);
}
.nwl__sym svg{width:19px;height:19px}
/* Die vier Symbole leuchten der Reihe nach auf und beginnen dann von
   vorn. Ein Durchlauf dauert 7,2 s, jedes Symbol ist 1,8 s später dran —
   so läuft das Licht einmal durch die Liste, ohne dass zwei zugleich
   an sind. Bewegt wird nur Schatten und Verschiebung, nichts im Fluss. */
.nwl__sym{animation:nwlPuls 7.2s ease-in-out infinite}
.nwl__item:nth-child(2) .nwl__sym{animation-delay:1.8s}
.nwl__item:nth-child(3) .nwl__sym{animation-delay:3.6s}
.nwl__item:nth-child(4) .nwl__sym{animation-delay:5.4s}
@keyframes nwlPuls{
  0%,22%,100%{
    box-shadow:0 6px 16px rgba(71,42,59,.08);
    border-color:rgba(71,42,59,.1);color:var(--plum);transform:translateY(0)}
  7%{
    box-shadow:0 6px 16px rgba(71,42,59,.08),0 0 0 5px rgba(255,122,56,.14),0 0 22px rgba(255,122,56,.55);
    border-color:rgba(255,122,56,.5);color:var(--orange-deep);transform:translateY(-2px)}
  14%{
    box-shadow:0 6px 16px rgba(71,42,59,.08),0 0 0 9px rgba(255,122,56,0),0 0 14px rgba(255,122,56,.22);
    border-color:rgba(255,122,56,.24);color:var(--plum);transform:translateY(-1px)}
}
html.sparsam .nwl__sym{animation:none}
.nwl__txt{
  font-size:14px;line-height:1.45;color:var(--muted);
}
.nwl__txt b{display:block;font-weight:500;font-size:15px;color:var(--ink);margin-bottom:2px}
@media(max-width:900px){
  .nwl{grid-template-columns:1fr;gap:12px}
}

/* ============================================================
   BEDIENELEMENTE — auf allen Unterseiten wie auf der Startseite
   Knöpfe als Kapsel mit Schein, Zahlen als Leiste mit Rundung und
   Trennlinien. Vorher hatten die Editorial-Seiten eckige Knöpfe und
   Zahlen auf einer nackten Linie — das fiel neben der Startseite auf.
   ============================================================ */
body.ed .ed-btn{
  font-size:15px;font-weight:500;gap:8px;
  padding:15px 28px;border-radius:999px;
  /* Dieselbe Mechanik wie .btn: der Magnet schreibt --mag-x / --mag-y,
     das Anheben beim Überfahren --lift. Getrennte Variablen, damit sich
     beide nicht gegenseitig überschreiben, und ein ruhiger Übergang, der
     die Bewegung glättet. */
  transform:translate(var(--mag-x,0px),var(--mag-y,0px)) translateY(var(--lift,0px));
  transition:transform .5s var(--ease-out),background .3s,box-shadow .3s,border-color .3s,color .3s;
  will-change:transform;
}
body.ed .ed-btn--voll{
  background:var(--orange);color:#fff;
  box-shadow:0 8px 22px rgba(255,122,56,.32);
}
body.ed .ed-btn--voll:hover{background:var(--orange);box-shadow:0 14px 32px rgba(255,122,56,.42)}
body.ed .ed-btn--linie{border-color:var(--line);color:var(--plum);background:#fff}
body.ed .ed-btn--linie:hover{border-color:var(--plum);background:#fff}
/* Auf dunklen Flächen ist der zweite Knopf Milchglas, wie im Hero. */
body.ed .ed-kopfbild--dunkel .ed-btn--linie,
body.ed .ed-invers .ed-btn--linie{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
body.ed .ed-kopfbild--dunkel .ed-btn--linie:hover,
body.ed .ed-invers .ed-btn--linie:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4)}

/* ---- Abschlusskachel in Pflaume ---------------------------------
   Der zweite Knopf stand dort weiß auf weiß und war unlesbar:
   `body.ed .ed-btn--linie` bringt `background:#fff` mit, und die
   Ausnahme davon kannte nur `.ed-kopfbild--dunkel` und `.ed-invers`.
   Die Pflaumenkachel ist genauso dunkel und gehört in dieselbe Reihe.
   Die Seiten trugen deshalb ein inline gesetztes `color:#fff` — das
   färbte nur die Schrift, nicht die Fläche, und machte den Knopf
   endgültig unsichtbar. Die Inline-Angaben sind entfernt. */
body.ed .ed-kachel--pflaume .ed-btn--linie{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
body.ed .ed-kachel--pflaume .ed-btn--linie:hover{
  background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);color:#fff;
}
@supports not (backdrop-filter:blur(1px)){
  body.ed .ed-kachel--pflaume .ed-btn--linie{background:rgba(255,255,255,.16)}
}

/* ---- Die drei Wege in der Abschlusskachel ------------------------
   Statt zweier Knöpfe, von denen einer unsichtbar war, steht hier
   jetzt derselbe Aufbau wie auf der Kontaktseite: drei Karten mit
   Weg-Nummer, Thema, Ansprechpartner und dessen Mailadresse. Der
   Besucher landet bei einer Person, nicht in einem Postfach.

   Aussehen und Textfarben der Karten kommen unverändert aus
   `body.ed .wege3 .weg` weiter oben — helle Fläche, Tinte, Pflaume.
   Hier wird nur nachgezogen, was die Pflaumenkachel ihnen sonst
   aufzwingen würde. */
.ed-kachel .wege3{
  width:100%;text-align:left;margin-top:clamp(30px,3.6vw,44px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
body.ed .ed-kachel .wege3 .weg{padding:26px 24px}
body.ed .ed-kachel .wege3 .weg h3{font-size:clamp(19px,1.7vw,22px);margin:11px 0 7px}
body.ed .ed-kachel .wege3 .weg .txt{margin-top:11px;font-size:14.5px;line-height:1.55}

/* Die Kachel färbt alle Beschriftungen weiß, damit sie auf Pflaume
   lesbar sind. Auf den hellen Karten darin wäre Weiß auf Weiß —
   dort gilt wieder die normale Farbe. */
body.ed .ed-kachel--pflaume .wege3 .weg .nf__no{color:var(--orange-deep,#C2591A)}

/* `.ed-kachel a:not(.ed-btn)` macht aus jedem Link in einer Kachel eine
   Mono-Versalzeile. Für die Mailzeile der Karten ist das falsch: sie
   ist eine Adresse zum Lesen, keine Beschriftung. */
/* Fließtext statt inline-flex: `j.hollweg@memoro-bestattungen.de` passt in
   der schmalen Karte in keine Zeile. Als Flexkasten stünde der Pfeil dann
   allein neben zwei Textzeilen, und die Unterstreichung liefe über die
   ganze Kartenbreite. Als normaler Link umbricht die Adresse sauber, die
   Linie folgt jeder Zeile und der Pfeil hängt am letzten Wort. */
body.ed .ed-kachel .wege3 .weg .mail{
  font-family:var(--sans);font-size:14.5px;letter-spacing:normal;
  text-transform:none;margin-top:16px;
  display:inline;overflow-wrap:anywhere;
  border-bottom:0;
  text-decoration:underline;text-decoration-color:rgba(112,72,97,.34);
  text-decoration-thickness:1px;text-underline-offset:4px;
  transition:text-decoration-color .3s ease;
}
body.ed .ed-kachel .wege3 .weg .mail:hover{text-decoration-color:var(--orange)}
body.ed .ed-kachel .wege3 .weg .mail .pf{
  display:inline-block;margin-left:6px;text-decoration:none;
}
.ed-kachel .weg .mail .pf{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.ed-kachel .weg .mail:hover .pf{transform:translateX(3px)}
/* Die Knopfreihe rückt unter die Karten und wird zur Nebenhandlung. */
.ed-kachel .wege3 + .ed-knopfreihe{margin-top:clamp(26px,3vw,36px)}
@media(max-width:900px){
  .ed-kachel .wege3{grid-template-columns:1fr;gap:12px}
  body.ed .ed-kachel .wege3 .weg{padding:22px 20px}
}
body.ed .ed-zahlen > div{
  padding:18px 22px;border-top:0;border-right:1px solid var(--line);
}
body.ed .ed-zahlen > div:last-child{border-right:0}
body.ed .ed-zahlen b{
  display:block;font-family:var(--sans);font-size:32px;font-weight:400;
  letter-spacing:-.035em;line-height:1;color:var(--plum);
}
body.ed .ed-zahlen span{
  display:block;margin-top:6px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
/* Dunkle Fassung */
body.ed .ed-kopfbild--dunkel .ed-zahlen,
body.ed .ed-invers .ed-zahlen{
  border-color:rgba(255,255,255,.17);
  background:rgba(255,255,255,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.18);
}
@supports not (backdrop-filter:blur(1px)){
  body.ed .ed-kopfbild--dunkel .ed-zahlen,body.ed .ed-invers .ed-zahlen{background:rgba(30,17,25,.93)}
  body.ed .ed-zahlen{background:#fff}
}
body.ed .ed-kopfbild--dunkel .ed-zahlen > div,
body.ed .ed-invers .ed-zahlen > div{border-right-color:rgba(255,255,255,.1)}
body.ed .ed-kopfbild--dunkel .ed-zahlen b,
body.ed .ed-invers .ed-zahlen b{color:#fff}
body.ed .ed-kopfbild--dunkel .ed-zahlen span,
body.ed .ed-invers .ed-zahlen span{color:rgba(255,255,255,.58)}
@media(max-width:880px){
  body.ed .ed-zahlen{grid-template-columns:1fr 1fr}
  body.ed .ed-zahlen > div:nth-child(2n){border-right:0}
  body.ed .ed-zahlen > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  body.ed .ed-kopfbild--dunkel .ed-zahlen > div:nth-child(-n+2),
  body.ed .ed-invers .ed-zahlen > div:nth-child(-n+2){border-bottom-color:rgba(255,255,255,.1)}
  body.ed .ed-zahlen b{font-size:27px}
}


/* ============================================================
   KONTAKTFORMULAR IN DREI SCHRITTEN
   ------------------------------------------------------------
   Klick für Klick statt einer langen Liste: Anliegen, Kontakt,
   Termin. Ohne Skript trägt kein Schritt die Klasse .is-da — dann
   stehen alle untereinander und das Formular bleibt benutzbar.
   ============================================================ */
body.ed .wiz{max-width:none}

/* ---- Fortschrittsspur ---- */
body.ed .wiz__spur{
  list-style:none;margin:0 0 var(--spacing-32,32px);padding:0 0 18px;
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--line);
}
body.ed .wiz__spur li{
  display:flex;align-items:center;gap:9px;flex:1 1 0;min-width:0;
  font-size:13.5px;color:var(--muted);
  transition:color .3s var(--ease-out);
}
body.ed .wiz__spur b{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  background:var(--plum-mist);color:var(--plum);
  transition:background .3s var(--ease-out),color .3s var(--ease-out),transform .3s var(--ease-out);
}
body.ed .wiz__spur li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.ed .wiz__spur li.is-da{color:var(--plum-deep)}
body.ed .wiz__spur li.is-da b{background:var(--plum);color:#fff;transform:scale(1.06)}
body.ed .wiz__spur li.is-durch b{background:var(--orange);color:#fff}
@media(max-width:560px){
  body.ed .wiz__spur li span{display:none}
  body.ed .wiz__spur li{flex:0 0 auto}
  body.ed .wiz__spur{gap:14px}
}

/* ---- Ein Schritt ----
   Ohne Skript liegen alle Schritte offen; sobald formular.js läuft,
   trägt genau einer .is-da und die anderen verschwinden. */
body.ed .wiz__schritt{border:0;margin:0;padding:0;min-width:0}
body.ed .wiz__schritt + .wiz__schritt{margin-top:var(--spacing-32,32px)}
body.ed .wiz.js .wiz__schritt{display:none}
body.ed .wiz.js .wiz__schritt.is-da{
  display:block;margin-top:0;
  animation:wizAuf .42s var(--ease-out) both;
}
@keyframes wizAuf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  body.ed .wiz.js .wiz__schritt.is-da{animation:none}
}
body.ed .wiz__frage{
  padding:0;font-family:var(--sans);font-weight:400;
  font-size:clamp(22px,2.6vw,30px);line-height:1.16;letter-spacing:-.03em;
  color:var(--ink);
}
body.ed .wiz__hilfe{margin:8px 0 22px;font-size:15px;color:var(--muted)}

/* ---- Auswahlkarten statt Aufklappmenü ---- */
body.ed .wahl{display:grid;gap:10px}
body.ed .wahl--zwei{grid-template-columns:1fr 1fr}
@media(max-width:640px){body.ed .wahl--zwei{grid-template-columns:1fr}}
/* Eine Karte über beide Spalten — für die letzte, unter der sich das
   Textfeld öffnet. */
body.ed .wahl__feld--breit{grid-column:1 / -1}
body.ed .wahl__feld{
  position:relative;display:block;margin:0;cursor:pointer;
}
/* Der echte Knopf liegt darüber, nur unsichtbar: so bleibt die
   Bedienung mit Tastatur und Vorlesesoftware wie bei einem Radio. */
body.ed .wahl__feld input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:1;
  opacity:0;cursor:pointer;
}
body.ed .wahl__in{
  display:block;padding:16px 18px;border-radius:18px;
  border:1px solid var(--line);background:#fff;
  transition:border-color .25s var(--ease-out),background .25s var(--ease-out),
             box-shadow .25s var(--ease-out),transform .25s var(--ease-out);
}
body.ed .wahl__feld:hover .wahl__in{
  border-color:rgba(112,72,97,.34);transform:translateY(-1px);
  box-shadow:0 14px 30px -18px rgba(26,15,23,.4);
}
body.ed .wahl__feld input:focus-visible + .wahl__in{
  outline:2px solid var(--plum);outline-offset:2px;
}
body.ed .wahl__feld input:checked + .wahl__in{
  border-color:var(--plum);background:var(--plum-mist);
  box-shadow:0 0 0 1px var(--plum) inset,0 18px 36px -22px rgba(26,15,23,.45);
}
body.ed .wahl__titel{
  display:block;font-size:16.5px;font-weight:500;color:var(--ink);
  padding-right:30px;
}
body.ed .wahl__text{display:block;margin-top:5px;font-size:14px;line-height:1.5;color:var(--muted)}
/* Knappe Fassung: zu zweit nebeneinander brauchen die Karten weniger
   Fläche, sonst wird der erste Schritt länger als der Bildschirm. */
body.ed .wahl--knapp .wahl__in{padding:13px 15px;border-radius:15px}
body.ed .wahl--knapp .wahl__titel{font-size:15.5px;padding-right:26px}
body.ed .wahl--knapp .wahl__text{margin-top:3px;font-size:13px;line-height:1.45}
body.ed .wahl--knapp .wahl__in::after{right:13px;top:13px;width:17px;height:17px}
body.ed .wahl--knapp .wahl__feld input:checked + .wahl__in::after{background-size:11px}
/* Das Häkchen sitzt rechts oben und erscheint erst bei der Wahl. */
body.ed .wahl__in::after{
  content:"";position:absolute;right:16px;top:16px;
  width:20px;height:20px;border-radius:50%;
  border:1px solid var(--line);background:#fff;
  transition:border-color .25s,background .25s;
}
body.ed .wahl__feld input:checked + .wahl__in::after{
  border-color:var(--plum);background:var(--plum) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ---- Terminkalender ---- */
body.ed .kal{
  margin-top:var(--spacing-24,24px);padding:20px;border-radius:22px;
  border:1px solid var(--line);background:var(--f1);
}
body.ed .kal__kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
body.ed .kal__monat{font-size:15px;font-weight:500;color:var(--plum-deep)}
body.ed .kal__pf{
  width:34px;height:34px;flex:none;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  border:1px solid var(--line);background:#fff;color:var(--plum);
  transition:border-color .25s,color .25s,opacity .25s;
}
body.ed .kal__pf:hover:not(:disabled){border-color:var(--plum)}
body.ed .kal__pf:disabled{opacity:.35;cursor:default}
body.ed .kal__pf svg{width:16px;height:16px}
body.ed .kal__tage{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;
}
@media(max-width:640px){body.ed .kal__tage{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:380px){body.ed .kal__tage{grid-template-columns:repeat(3,minmax(0,1fr))}}
body.ed .kal__tag{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:9px 4px 8px;border-radius:14px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  transition:border-color .2s,background .2s,transform .2s,color .2s;
}
body.ed .kal__tag:hover{border-color:rgba(112,72,97,.4);transform:translateY(-1px)}
body.ed .kal__tag.is-da{background:var(--plum);border-color:var(--plum);color:#fff}
body.ed .kal__wt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.72}
body.ed .kal__nr{font-size:17px;font-weight:500;line-height:1.1}
body.ed .kal__mo{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
body.ed .kal__zeiten{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
body.ed .kal__zeiten:empty{margin-top:0}
body.ed .kal__zk{flex:0 0 100%;font-size:13.5px;color:var(--muted);margin-bottom:2px}
body.ed .kal__zeit{
  padding:9px 16px;border-radius:999px;cursor:pointer;font-size:14.5px;
  border:1px solid var(--line);background:#fff;color:var(--plum-deep);
  transition:border-color .2s,background .2s,color .2s;
}
body.ed .kal__zeit:hover{border-color:var(--plum)}
body.ed .kal__zeit.is-da{background:var(--plum);border-color:var(--plum);color:#fff}
body.ed .kal__hinweis{margin:14px 0 0;font-size:12.5px;color:var(--muted)}

/* ---- Individuelle Terminanfrage ---- */
body.ed .wahl__feld--frei{margin-top:12px}
/* Nur mit Skript versteckt: ohne Skript bleibt der Kalender aus (hidden
   im Markup) und das Freitextfeld ist der einzige Weg zum Termin — dann
   muss es sichtbar sein. */
body.ed .feld--frei{margin-top:12px}
body.ed .wiz.js .feld--frei{display:none}
/* flex, nicht block: .feld selbst ist eine Flex-Spalte (Beschriftung
   über dem Eingabefeld). Mit display:block stünde die Beschriftung
   daneben und das Feld schrumpfte auf seine Standardbreite. */
body.ed .wiz.js .feld--frei.is-da{display:flex}
body.ed .feld__opt{font-weight:400;color:var(--muted)}

/* ---- Fuß mit Zustimmung und Knöpfen ---- */
body.ed .wiz__fuss{margin-top:var(--spacing-32,32px);padding-top:22px;border-top:1px solid var(--line)}
body.ed .wiz__navi{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* .btn setzt display:inline-flex und schlägt damit die Voreinstellung
   von [hidden]. Ohne diese Zeile stünden „Zurück" und „Senden" in
   jedem Schritt da, obwohl das Skript sie ausgeblendet hat. */
body.ed .wiz__navi .btn[hidden]{display:none}
body.ed .wiz__navi .btn{margin:0;flex:0 0 auto;width:auto}
body.ed .pf--links{display:inline-block}
/* Nach dem Absenden bleibt nur die Meldung stehen. */
body.ed .wiz__fuss.is-fertig .consent,
body.ed .wiz__fuss.is-fertig .wiz__navi,
body.ed .wiz__fuss.is-fertig .form__hinweis{display:none}


/* ============================================================
   GESCHICHTE DER GRUPPE · „Über uns"
   Breites Bild des Hauptsitzes über zwei Textspalten. Das Foto ist
   sehr flach, deshalb steht es quer über die ganze Breite statt neben
   dem Text — nebeneinander wäre es ein Streifen von Daumenbreite.
   ============================================================ */
.festung{margin-top:clamp(32px,4vw,52px)}
.festung__bild{
  margin:0;position:relative;border-radius:22px;overflow:hidden;
  border:1px solid var(--linie,rgba(112,72,97,.14));
  background:var(--f2);
}
.festung__bild img{display:block;width:100%;height:auto}
.festung__bild figcaption{
  position:absolute;left:18px;bottom:14px;
  padding:7px 13px;border-radius:999px;
  background:rgba(31,18,25,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--mono,"Geist Mono",monospace);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.88);
}
.festung__text{
  margin-top:clamp(26px,3vw,38px);
  columns:2;column-gap:clamp(28px,3.4vw,52px);
}
.festung__text p{margin:0;break-inside:avoid;color:var(--muted);font-size:16.5px;line-height:1.62}
.festung__text p + p{margin-top:18px}
@media(max-width:820px){
  .festung__text{columns:1}
  .festung__bild{border-radius:18px}
  .festung__bild figcaption{left:12px;bottom:10px;font-size:9px}
}


/* ============================================================
   BLOG · „Aus dem Verbund"
   Aufmacher oben, darunter zwei Spalten mit Beitragskarten. Die Seite
   steht noch nicht in der Navigation, die Gestaltung gehört aber schon
   in dieselbe Datei wie die übrigen Unterseiten.
   ============================================================ */
.bl-marke{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono,"Geist Mono",monospace);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--plum);
}
.bl-marke i{width:5px;height:5px;border-radius:50%;background:var(--orange);flex:none}

/* ---- Aufmacher ---- */
.bl-auf{
  display:grid;gap:clamp(24px,3vw,40px);
  padding-bottom:clamp(36px,4.4vw,60px);
  border-bottom:1px solid rgba(112,72,97,.14);
}
.bl-auf__bild{
  display:block;border-radius:24px;overflow:hidden;background:var(--f2);
  aspect-ratio:21/7;
}
.bl-auf__bild img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease-out,cubic-bezier(.2,.8,.2,1))}
.bl-auf:hover .bl-auf__bild img{transform:scale(1.03)}
.bl-auf__in{max-width:760px}
.bl-auf h2{
  font-family:var(--display,inherit);font-size:clamp(28px,3.6vw,46px);line-height:1.1;
  letter-spacing:-.03em;font-weight:400;margin:14px 0 0;
}
.bl-auf h2 a,.bl-karte h3 a{color:inherit;text-decoration:none}
.bl-auf h2 a:hover,.bl-karte h3 a:hover{color:var(--plum)}
.bl-lead{margin-top:16px;font-size:17px;line-height:1.62;color:var(--muted);max-width:62ch}
.bl-meta{
  margin-top:16px;font-family:var(--mono,"Geist Mono",monospace);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);opacity:.75;
}

/* ---- Reihe der Beiträge ---- */
.bl-liste{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,2.6vw,34px);
  margin-top:clamp(36px,4.4vw,58px);
}
.bl-karte{
  display:flex;flex-direction:column;
  border-radius:22px;overflow:hidden;background:#fff;
  border:1px solid rgba(112,72,97,.14);
  transition:transform .45s var(--ease-spring,cubic-bezier(.2,.9,.3,1.2)),
             box-shadow .45s,border-color .45s;
}
.bl-karte:hover{transform:translateY(-4px);box-shadow:0 26px 52px -24px rgba(26,15,23,.28);
  border-color:rgba(112,72,97,.26)}
.bl-karte__bild{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--f2)}
.bl-karte__bild img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease-out,cubic-bezier(.2,.8,.2,1))}
.bl-karte:hover .bl-karte__bild img{transform:scale(1.04)}
.bl-karte__in{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1 1 auto}
.bl-karte h3{
  font-family:var(--display,inherit);font-size:clamp(20px,2vw,25px);line-height:1.22;
  letter-spacing:-.02em;font-weight:400;margin:12px 0 0;
}
.bl-karte p{margin-top:12px;font-size:15px;line-height:1.6;color:var(--muted)}
.bl-karte .bl-meta{margin-top:auto;padding-top:18px}

/* Hinweis, dass die Seite ein Entwurf ist. Verschwindet mit der
   Freigabe, zusammen mit dem Wort MUSTERTEXT in den Beiträgen. */
.bl-hinweis{
  margin:clamp(30px,3.6vw,46px) 0 0;padding:16px 20px;border-radius:14px;
  background:var(--orange-mist,#FDEFE6);border:1px solid rgba(240,118,47,.28);
  font-size:14px;color:var(--plum-deep,#4A2B41);
}
.bl-hinweis b{font-weight:500}

@media(max-width:900px){
  .bl-liste{grid-template-columns:1fr}
  .bl-auf__bild{aspect-ratio:16/7}
}
@media(max-width:560px){
  .bl-auf__bild{aspect-ratio:16/9;border-radius:18px}
  .bl-karte__in{padding:20px 20px 22px}
}

/* Zweiter Link in Weg 03: zur Investorenseite, eigene Zeile */
.weg .mail--seite,body.ed .ed-kachel .wege3 .weg .mail--seite{display:block;width:max-content;max-width:100%;margin-top:10px}

/* Sehr schmale Handys (320 px): die Plakette „Beliebteste Variante" ragte
   5 px über den Rand. Näher an die Kante und etwas kleiner. */
@media(max-width:360px){
  body.ed .tcard__marke{right:12px;top:14px;font-size:10.5px;padding:4px 9px 4px 7px}
  /* Die Karte wuchs auf die Mindestbreite ihres Inhalts (328 px bei 286 px Platz) */
  body.ed .tcard{min-width:0}
  body.ed .tcard .ed-btn{white-space:normal;text-align:center}
}

/* Kontaktformular: Datenschutz-Einwilligung erst im letzten Schritt (formular.js) */
body.ed .wiz .consent.is-spaeter{display:none}