.erbe .lead {
    font-size: var(--fs-text); color: var(--gray-dark);
    max-width: var(--measure); text-wrap: balance;
  }

  /* ---------- Woran du merkst: drei Karten ----------
     Vorher drei Zeilen mit Haarlinie — richtig, aber immer noch eine Liste.
     Als Karten stehen die drei Merkmale nebeneinander statt untereinander,
     und der Abschnitt liest sich in einem Blick. Keine farbige Akzentkante —
     weder links noch oben. Eine ruhige Flaeche mit gleichmaessigem Rahmen. */
  .erbe .merkmale {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(16px, 2vw, 24px);
    margin-top: clamp(28px, 3.5vw, 44px);
  }
  @media (min-width: 900px) {
    .erbe .merkmale { grid-template-columns: repeat(3, 1fr); }
  }
  .erbe .merkmale li {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border: none;
    border-radius: var(--radius-panel);
    box-shadow: none;
    padding: 28px 26px 30px;
  }
  /* 12.10.2026: Die Zusagen sind abgestuft wie die Gruende-Reihen. Sonst
     sahen sie aus wie die Merkmale weiter unten, gleiche Karten in gleichem
     Weiss. Die Merkmale bleiben weiss, damit beide Bloecke sich trennen. */
  .erbe #zusagen .merkmale li:nth-child(1) { background-color: var(--stufe-1); }
  .erbe #zusagen .merkmale li:nth-child(2) { background-color: var(--stufe-2); }
  .erbe #zusagen .merkmale li:nth-child(3) { background-color: var(--stufe-3); }
  .erbe .merkmale .merkmal {
    font-size: var(--fs-h3);
    line-height: 1.2;
    color: var(--black);
    margin-bottom: 12px;
  }
  /* 02.10.2026: Fliesstext in Textgroesse statt klein. Mit den laengeren
     Saetzen der Zusagen stand eine grosse Ueberschrift ueber Kleingedrucktem —
     und die Kacheln direkt darueber sprechen in voller Textgroesse. */
  .erbe .merkmale p {
    font-size: var(--fs-text);
    line-height: 1.6;
    color: var(--gray-dark);
    max-width: none;
  }
  /* Der Nachsatz gehoerte zum dritten Merkmal, stand aber als eigener Absatz
     unter dem Block. Jetzt sitzt er in der Karte, zu der er gehoert. */
  .erbe .merkmale .probe {
    margin-top: auto;
    padding-top: 16px;
    font-size: var(--fs-text);
    color: var(--gray-dark);
  }

  .erbe .team-raster.visible .team-karte img { transform: none; }

  .erbe .ueber-raster { display: grid; gap: 32px; }
  @media (min-width: 900px) {
    .erbe .ueber-raster {
      grid-template-columns: minmax(280px, 420px) 1fr;
      gap: 64px;
      align-items: center;
    }
  }
  .erbe .ueber-bild { position: relative; }
  .erbe .ueber-bild img {
    display: block; width: 100%; height: auto;
    border-radius: var(--radius-card);
  }
  .erbe .ueber-schild {
    position: absolute;
    right: -18px;
    bottom: -22px;
    /* Breit genug, dass jede der beiden Zeilen am Stueck steht — der
       Umbruch sitzt im Markup, nicht im Zufall. */
    max-width: 300px;
    padding: 18px 22px;
    border-radius: var(--radius-card);
    /* Dunkleres Salbei als die Markenfarbe: Creme auf #7A8B6E kommt nur auf
       3,2:1. Auf var(--salbei) sind es 5,6:1 — dieselbe Farbe, nur tragfähig. */
    background-color: var(--salbei);
    color: var(--cream);
    box-shadow: var(--shadow-lift);
  }
  /* Jede Zeile ein eigenes Element mit nowrap — so kann der Umbruch nicht
     an einer anderen Stelle passieren als im Markup vorgesehen. */
  .erbe .ueber-schild p span { display: block; white-space: nowrap; }
  .erbe .ueber-schild p {
    display: block;
    max-width: none;
    /* Eine Stufe kleiner als vorher: In --fs-gross fuellte die laengere
       Zeile das Schild bis an die Kante, und der Kasten wurde breiter als
       das Bild, auf dem er liegt. */
    font-size: var(--fs-h3);
    line-height: 1.35;
    font-style: italic;
  }
  @media (max-width: 899px) {
    .erbe .ueber-schild { right: 12px; bottom: -18px; max-width: 250px; padding: 14px 17px; }
    .erbe .ueber-schild p { font-size: var(--fs-klein); }
    /* Einspaltig steht das Schild ueber der Bildkante und frisst 18px vom
       Rasterabstand — sonst blieben nur 14px bis zum ersten Absatz. */
    .erbe .ueber-raster { gap: 50px; }
  }

  .erbe .fliess { max-width: 60ch; }
  .erbe .fliess p { max-width: none; font-size: var(--fs-text); }
  .erbe .fliess p + p { margin-top: 20px; }

  /* ---------- Das Zeichen als Buehne ----------
     Frueher stand das Symbol links und daneben eine Liste mit vier Zeilen —
     eine Aufzaehlung mit Bild dabei. Jetzt steht das Zeichen allein in der
     Mitte, und auf ihm sitzen drei Punkte: oberer Bogen, Wasserlinie, untere
     Spiegelung. Wer einen anfasst, sieht die zugehoerige Haelfte aufleuchten
     und liest den Satz darunter.
     Ohne JavaScript stehen alle vier Saetze untereinander und das Zeichen
     vollstaendig da — der eingeklappte Zustand ist nie der Ruhezustand. */
  .erbe .zeichen-buehne {
    /* Der Ring um jeden Punkt trennt ihn vom Zeichen dahinter. Er muss die
       Farbe der Flaeche haben, auf der er liegt — fest auf Creme gesetzt gab
       er auf der beigen Kachel einen sichtbaren hellen Hof. */
    --punkt-ring: var(--beige-light);
    display: grid;
    justify-items: center;
    /* Grosszuegig: beim Anfassen waechst die aktive Haelfte um 7 Prozent über
       den Ruhezustand hinaus. Mit knappem Abstand ruecken Zeichen und Text
       dabei optisch aneinander. */
    gap: clamp(38px, 4.4vw, 62px);
  }
  .erbe section.beige .zeichen-buehne { --punkt-ring: var(--white); }
  .erbe .zeichen-bild {
    position: relative;
    width: clamp(190px, 26vw, 300px);
    aspect-ratio: 1;
    /* Breite des ganzen Logos im Logo-Zustand: 2,85-mal die Buehne, am Handy
       an der Fensterbreite gedeckelt. Im Logo ist das Symbol nur ein Sechstel
       der Breite; kleiner darf das Logo nicht sein, sonst schrumpft das
       Zeichen auf Briefmarkengroesse. */
    --logo: min(285%, 86vw);
  }
  /* Das Zeichen sitzt absolut in der Mitte der Buehne. Nur so kann es im
     Logo-Zustand an eine andere Stelle und auf eine andere Groesse fahren,
     ohne dass sich der Platz darunter bewegt. */
  .erbe .zeichen-bild svg {
    position: absolute;
    left: 50%; top: 50%;
    width: 100%; height: auto;
    transform: translate(-50%, -50%);
    transition: width 560ms cubic-bezier(.45, 0, .2, 1),
                top 560ms cubic-bezier(.45, 0, .2, 1);
  }

  /* ---------- Das vollstaendige Logo: ein Morph, kein Bildwechsel ----------
     Vorher wurde ein zweites Bild (logo-vertikal) eingeblendet und das Zeichen
     ausgeblendet — das Symbol sprang dabei von 300px auf 146px und an eine
     andere Stelle. Jetzt faehrt das Zeichen selbst dorthin, wo es im Logo
     sitzt, und der Name erscheint darunter.
     Alle Masse kommen aus dem viewBox 700x292 von logo-vertikal: Symbol
     (120 Einheiten, im SVG hier 134 mit Rand) bei (290|32), also Mitte bei
     y=92; das Logo liegt mittig auf der Buehne, seine Mitte bei y=146. Die
     Wortmarke (564x104) steht so skaliert, dass ihr Schriftzug 520 Einheiten
     breit ist, Oberkante bei y=172,6. */
  .erbe .zeichen-wort {
    position: absolute;
    left: 50%;
    top: calc(50% + var(--logo) * 26.6 / 700);
    width: calc(var(--logo) * 535.8 / 700);
    height: auto;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* 15.10.2026: Der Name oeffnet sich aus der Wasserlinie — von seiner
       waagrechten Mitte nach oben und unten, und schliesst sich beim Gehen
       wieder in diese Linie. Ruhiger als das fruehere Hochrutschen, und es
       erzaehlt das Zeichen weiter. Gehen ist schneller als Kommen. */
    clip-path: inset(50% 0 50% 0);
    transition: clip-path 380ms cubic-bezier(.4, 0, .6, 1),
                opacity 300ms ease 80ms,
                visibility 0s linear 380ms;
  }
  .erbe .zeichen-buehne[data-aktiv="logo"] .zeichen-bild svg {
    width: calc(var(--logo) * 134 / 700);
    top: calc(50% - var(--logo) * 54 / 700);
  }
  .erbe .zeichen-buehne[data-aktiv="logo"] .zeichen-wort {
    opacity: 1;
    visibility: visible;
    clip-path: inset(-10% 0 -10% 0);
    transition: clip-path 760ms cubic-bezier(.2, .7, .2, 1) 220ms,
                opacity 420ms ease 220ms,
                visibility 0s;
  }

  /* Die Farben sind die des Logos (symbol-hell): der Bogen dunkel, die
     Spiegelung gedaempft grau, der Horizont gold. Das Zeichen sagt die
     Gewichtung also schon selbst — wir muessen nichts uebermalen. */
  .erbe .zeichen-bild .teil {
    opacity: 1;
    /* Vergroessert wird um die Mitte des Zeichens, nicht um die eigene Mitte:
       So waechst die aktive Haelfte aus dem Kreis heraus nach vorn, statt
       seitlich wegzurutschen. Der viewBox hat dafuer 7 Einheiten Rand. */
    transform-box: view-box;
    transform-origin: 50% 50%;
    transition: fill var(--transition-base),
                opacity var(--transition-base),
                transform 320ms cubic-bezier(.2, .7, .3, 1);
  }
  .erbe .zeichen-bild .teil--bruecke { fill: #2B2B2B; }
  .erbe .zeichen-bild .teil--spiegel { fill: #968D84; }
  .erbe .zeichen-bild .teil--linie   { fill: #C9A227; }

  .erbe .zeichen-buehne[data-aktiv="bruecke"] .teil--bruecke,
  .erbe .zeichen-buehne[data-aktiv="spiegel"] .teil--spiegel,
  .erbe .zeichen-buehne[data-aktiv="linie"] .teil--linie { transform: scale(1.07); }
  /* Der Bogen allein. Die andere Haelfte tritt zurueck, statt zu
     verschwinden — sie ist ja weiterhin da. */
  .erbe .zeichen-buehne[data-aktiv="bruecke"] .teil--spiegel,
  .erbe .zeichen-buehne[data-aktiv="bruecke"] .teil--linie { opacity: .14; }
  /* Die Spiegelung kommt nach vorn und bekommt dasselbe Gewicht wie der
     Bogen. Genau das sagt der Satz darunter. */
  .erbe .zeichen-buehne[data-aktiv="spiegel"] .teil--spiegel { fill: #2B2B2B; }
  .erbe .zeichen-buehne[data-aktiv="spiegel"] .teil--bruecke,
  .erbe .zeichen-buehne[data-aktiv="spiegel"] .teil--linie { opacity: .14; }
  /* Die Wasserlinie allein. Beide Boegen treten zurueck, der goldene Horizont
     bleibt stehen — die einzige Stelle, an der sich die zwei Haelften
     beruehren. Vorher lag hier der Kreis-Zustand: beide Boegen dunkel, die
     Linie ausgeblendet. Der sagte dasselbe wie das ganze Logo und liess das
     auffaelligste Element des Zeichens ohne Bedeutung. */
  .erbe .zeichen-buehne[data-aktiv="linie"] .teil--bruecke,
  .erbe .zeichen-buehne[data-aktiv="linie"] .teil--spiegel { opacity: .14; }

  /* Die drei Punkte sitzen auf dem Zeichen. Die Werte kommen aus dem viewBox
     (-7 -7 134 134): Bogenscheitel oben (60|8), Wasserlinie rechts (117|60),
     Bogenscheitel unten (60|112). */
  .erbe .zeichen-punkt {
    position: absolute;
    width: 34px; height: 34px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    box-shadow: none;
  }
  .erbe .zeichen-punkt:hover { background: none; box-shadow: none; }
  /* Die Lage kommt aus Variablen statt aus mehreren Regeln pro Punkt. Grund:
     Im Logo-Zustand stehen die Punkte woanders, und ein zweiter Regelsatz mit
     hoeherer Spezifitaet hat sich hier nicht durchgesetzt. Variablen vererben
     von der Buehne herunter — es bleibt bei einer Regel je Punkt, sie liest
     nur andere Werte. Spiegelbildlich zum Linienpunkt rechts sitzt der Punkt
     fuer das Ganze links: die beiden Enden der Wasserlinie. */
  .erbe .zeichen-punkt--oben  { left: var(--pkt-oben-x,  50%);   top: var(--pkt-oben-y,  11.2%); }
  .erbe .zeichen-punkt--linie { left: var(--pkt-linie-x, 92.5%); top: var(--pkt-linie-y, 50%); }
  .erbe .zeichen-punkt--unten { left: var(--pkt-unten-x, 50%);   top: var(--pkt-unten-y, 88.8%); }
  .erbe .zeichen-punkt--ganz  { left: var(--pkt-ganz-x,  7.5%);  top: var(--pkt-ganz-y,  50%); }

  /* ---------- Der Logo-Zustand kennt keine Punkte ----------
     Die Punkte beschriften Teile des Zeichens. Im Logo-Zustand gibt es kein
     Zeichen mehr — sie schwebten dort ohne Bezug um das Wort herum. Also
     verschwinden die drei Haelften-Punkte, und der vierte wird unsichtbar und
     legt sich als Flaeche ueber das Logo: Ein Klick darauf fuehrt zurueck.
     Zu sehen ist damit nur noch Logo und Text.

     WICHTIG, nicht "aufraeumen": Die Punkte reagieren auf Hover. Ein Punkt,
     der sich aus dem Mauszeiger herausbewegt, waehrend er selbst den Zustand
     haelt, loest mouseleave aus — der Zustand faellt zurueck und der Klick
     geht ins Leere. Deshalb wird der vierte Punkt hier nicht versetzt, sondern
     vergroessert: Seine neue Flaeche enthaelt seine alte vollstaendig, der
     Zeiger bleibt also drin. Eine Reihe unter dem Logo hatte genau das
     kaputtgemacht. */
  /* Reihenfolge beim Zurueck: erst geht der Name, dann waechst das Zeichen
     in 520ms zurueck, erst danach kommen die Punkte. Vorher waren sie nach
     240ms da, mitten in der Bewegung — der linke sprang sogar sofort an
     seinen Platz. Hin geht es umgekehrt: Punkte sofort weg. */
  .erbe .zeichen-punkt { transition: opacity 360ms ease 480ms, visibility 0s linear 480ms; }
  .erbe .zeichen-buehne[data-aktiv="logo"] .zeichen-punkt--oben,
  .erbe .zeichen-buehne[data-aktiv="logo"] .zeichen-punkt--linie,
  .erbe .zeichen-buehne[data-aktiv="logo"] .zeichen-punkt--unten {
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease, visibility 0s linear 160ms;
  }
  .erbe .zeichen-buehne[data-aktiv="logo"] {
    --pkt-ganz-x: 50%;
    --pkt-ganz-y: 50%;
  }
  .erbe .zeichen-buehne[data-aktiv="logo"] .zeichen-punkt--ganz {
    width: 280%;
    height: 100%;
    border-radius: var(--radius-panel);
  }
  .erbe .zeichen-buehne[data-aktiv="logo"] .zeichen-punkt--ganz::after {
    opacity: 0;
    transition: opacity 160ms ease;
  }
  .erbe .zeichen-punkt::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 11px; height: 11px;
    margin: -5.5px 0 0 -5.5px;
    border-radius: 50%;
    background-color: var(--gold-dark);
    box-shadow: 0 0 0 4px var(--punkt-ring);
    transition: transform 320ms cubic-bezier(.2, .7, .3, 1),
                background-color var(--transition-base),
                opacity 360ms ease 480ms;
  }
  .erbe .zeichen-punkt:hover::after,
  .erbe .zeichen-punkt:focus-visible::after,
  .erbe .zeichen-punkt[aria-pressed="true"]::after {
    transform: scale(1.45);
    background-color: var(--black);
  }
  .erbe .zeichen-punkt:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }

  /* Ohne Hover — also auf jedem Handy — sieht niemand, dass die Punkte etwas
     tun. Deshalb pochen sie, solange noch nichts angefasst wurde. .lebt setzt
     erbe.js: ohne JavaScript pocht nichts. .beruehrt kommt beim ersten Klick
     dazu und beendet das Pochen dauerhaft — ein Hinweis, der bleibt, wird
     zur Reklame. */
  .erbe .zeichen-buehne.lebt:not(.beruehrt) .zeichen-punkt::after {
    animation: punkt-pochen 2.6s ease-in-out infinite;
  }
  .erbe .zeichen-buehne.lebt:not(.beruehrt) .zeichen-punkt--linie::after { animation-delay: .5s; }
  .erbe .zeichen-buehne.lebt:not(.beruehrt) .zeichen-punkt--unten::after { animation-delay: 1s; }
  .erbe .zeichen-buehne.lebt:not(.beruehrt) .zeichen-punkt--ganz::after { animation-delay: 1.5s; }
  @keyframes punkt-pochen {
    0%, 62%, 100% { transform: scale(1); }
    28%           { transform: scale(1.45); }
  }

  .erbe .zeichen-text {
    max-width: 54ch;
    text-align: center;
  }
  .erbe .zeichen-satz {
    font-size: var(--fs-h3);
    line-height: 1.45;
    color: var(--black);
    max-width: none;
    text-wrap: balance;
  }
  .erbe .zeichen-satz + .zeichen-satz { margin-top: 14px; }

  /* Leiser als der Fliesstext, aber nicht geraunt: --gray-mid auf der beigen
     Kachel sind 4,3:1. Der Hinweis belegt seine Rasterzeile dauerhaft und wird
     nur ein-, nicht eingeblendet — sonst ruckt der Text darunter beim
     Umschalten. */
  /* Ueber .zeichen-text adressiert, sonst gewinnt die allgemeine Regel
     .erbe .kachel p mit ihrem --gray-dark. */
  .erbe .zeichen-text .zeichen-hinweis {
    margin-top: 16px;
    font-size: var(--fs-klein);
    color: var(--gray-mid);
    visibility: hidden;
    opacity: 0;
    transition: opacity 240ms ease;
  }
  .erbe .zeichen-buehne.lebt[data-aktiv="logo"] .zeichen-text .zeichen-hinweis {
    visibility: visible;
    opacity: 1;
  }

  /* Erst wenn das Skript laeuft, zeigt die Buehne immer nur einen Satz.
     Die vier Saetze liegen dann uebereinander in derselben Rasterzelle und
     bleiben alle im Fluss — sichtbar geschaltet wird ueber visibility, nicht
     ueber display. Damit ist die Hoehe immer die des laengsten Satzes, und
     nichts darunter verschiebt sich beim Wechseln. */
  .erbe .zeichen-buehne.lebt .zeichen-text { display: grid; }
  .erbe .zeichen-buehne.lebt .zeichen-satz {
    grid-area: 1 / 1;
    margin-top: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 240ms ease;
  }
  .erbe .zeichen-buehne.lebt .zeichen-satz[data-fuer="ruhe"],
  .erbe .zeichen-buehne.lebt[data-aktiv="bruecke"] .zeichen-satz[data-fuer="bruecke"],
  .erbe .zeichen-buehne.lebt[data-aktiv="spiegel"] .zeichen-satz[data-fuer="spiegel"],
  .erbe .zeichen-buehne.lebt[data-aktiv="linie"] .zeichen-satz[data-fuer="linie"],
  .erbe .zeichen-buehne.lebt[data-aktiv="logo"] .zeichen-satz[data-fuer="logo"] {
    visibility: visible;
    opacity: 1;
  }
  .erbe .zeichen-buehne.lebt[data-aktiv] .zeichen-satz[data-fuer="ruhe"] {
    visibility: hidden;
    opacity: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .erbe .zeichen-bild .teil,
    .erbe .zeichen-satz,
    .erbe .zeichen-logo,
    .erbe .zeichen-punkt::after { transition: none; animation: none; }
    /* Nur Ein- und Ausblenden, kein Aufziehen. */
    .erbe .zeichen-wort,
    .erbe .zeichen-buehne[data-aktiv="logo"] .zeichen-wort {
      clip-path: none;
      transition: opacity 300ms ease, visibility 0s linear 300ms;
    }
    .erbe .zeichen-buehne[data-aktiv="logo"] .zeichen-wort { transition-delay: 0s; }
    .erbe .zeichen-buehne[data-aktiv] .teil { transform: none; }
  }

  /* Der Beitrag ist eine Kachel und traegt deren Flaeche — keine eigene
     Karte mehr. Weil er anklickbar ist, hebt er sich beim Zeigen leicht. */
  .erbe .text-eintrag {
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
  }
  .erbe .text-eintrag:hover { box-shadow: var(--shadow-lift); }
  .erbe .text-eintrag::before { content: none; }