*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html {
    scroll-behavior: smooth;
    /* Rinne für die Scrollleiste immer reservieren — sonst springt das Layout,
       sobald das Menü das Scrollen sperrt. */
    scrollbar-gutter: stable;
    overflow-y: scroll;   /* Leiste immer da — auch auf kurzen Seiten kein Sprung */
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  .erbe {
    --gold: #C9A227;
    --gold-light: #D4B44A;
    /* Dunkler als das Marken-Gold: Creme darauf kommt jetzt auf 4,51:1 statt
       3,31, und als Schrift auf Creme ebenfalls 4,51 statt 3,31. */
    --gold-dark: #8D7119;
    /* Die tatsaechlich sichtbare Markenflaeche. Stand vorher achtmal hart im
       Code, waehrend der Token einen anderen Ton fuehrte (#7A8B6E) und nur an
       einer Stelle benutzt wurde — die Erfolgsmeldung im Kontaktformular war
       dadurch ein anderes Gruen als jede Salbei-Flaeche der Seite. */
    --salbei: #5E6E54;
    /* Drei Stufen fuer Reihen, die einen Weg beschreiben: je weiter, desto
       satter. Kontrast zu Creme geprueft — 4,5 / 5,3 / 6,7:1, alle drei
       tragen Fliesstext. */
    --salbei-1: #697961;
    --salbei-2: #5E6E54;
    --salbei-3: #505E48;
    /* Dasselbe in Beige, fuer Reihen auf hellem Grund — je Grund ein eigener
       Satz, damit die erste Stufe sich immer abhebt: auf Beige beginnt sie
       weiss, auf Creme mit dem hellen Beige. Ein Satz fuer beide ginge nicht,
       Weiss auf Creme waere praktisch unsichtbar. */
    --stufe-1: #FFFFFF;
    --stufe-2: #F4E4D5;
    --stufe-3: #EAD5C0;
    --stufe-c1: #F6EDE4;
    --stufe-c2: #EFDFCD;
    --stufe-c3: #E7D2BB;
    --black: #2B2B2B;
    /* Dunkle Grossflaechen (Hero, Anmeldung, Menuepanel) teilen sich einen
       Wert. Der Blauton stammt aus dem Portrait auf der Anmeldeflaeche und
       ist dort gesetzt; --black bleibt Textfarbe und darf hier nicht
       einspringen, sonst stossen wieder zwei verschiedene Dunkel aneinander. */
    --dunkelgrund: #3B404C;
    --gray-dark: #4A4A4A;
    /* 4,54:1 auf Beige statt 3,41. Betrifft Eyebrows, Spaltentitel und
       Formular-Beschriftungen — alles kleine, gesperrte Schrift. */
    --gray-mid: #6C6C6C;
    --gray-light: #B8B8B8;
    --cream: #FDFBF9;
    --beige-light: #F6EDE4;
    --beige-dark: #F1E2D3;
    --white: #FFFFFF;

    /* Schriftskala aus assets/css/style.css - Root 18px */
    --leading-display: 1.15;
    --leading-tight: 1.3;
    --leading-text: 1.7;

    /* ---- Raumskala: drei Stufen, jede mit einer Aufgabe ----
       Vorbild Root: die Seite gliedert sich ueber Abstaende, nicht ueber
       Flaechen. Vorher stand an neun Stellen ein eigenes clamp() mit
       aehnlichen, aber nie gleichen Werten — dadurch hatte die Seite kein
       Mass, sondern neun Bauchgefuehle.
         xl  zwischen zwei Abschnitten
         l   zwischen zwei Bloecken im Abschnitt
         m   innerhalb eines Blocks
         Raster-Fugen laufen weiter ueber --fuge. */
    --raum-xl: clamp(120px, 14vw, 240px);
    --raum-l:  clamp(72px, 10vw, 150px);
    --raum-m:  clamp(34px, 4.6vw, 68px);
    --section-y: var(--raum-xl);
    --container: min(90%, 1680px);
    --measure: 65ch;

    /* ---- Schriftskala: sechs Stufen, jede mit einer Aufgabe ----
       Vorher 57 verschiedene Werte in 102 Deklarationen, dann sieben Token —
       von denen drei auf jedem Handy dieselbe Groesse ergaben. --fs-lead ist
       deshalb gefallen. Dass --fs-h3 und --fs-gross auf dem Handy dieselbe
       Untergrenze haben, ist Absicht: sechs Stufen auf dem Schirm, fuenf auf
       dem Handy. Wichtig ist nur, dass keine Ueberschrift unter --fs-text
       faellt — genau das passierte mit einer tieferen Untergrenze. */
    --fs-h1:    clamp(2.2rem, 5vw, 3.4rem);    /* 54px  Hero, einmal pro Seite */
    --fs-h2:    clamp(1.5rem, 3.4vw, 2.6rem);  /* 42px  Abschnitts- und Kacheltitel */
    --fs-gross: clamp(1.3rem, 2.4vw, 1.8rem);  /* 29px  herausgehobene Saetze */
    --fs-h3:    clamp(1.3rem, 1.9vw, 1.5rem);  /* 24px  Karten- und Zeilentitel */
    --fs-text:  1.125rem;                      /* 18px  Fließtext, wie .erbe selbst */
    --fs-klein: .95rem;                        /* 15px  Sekundaertext */
    --fs-micro: .82rem;                        /* 13px  Kleingedrucktes */

    /* Eine Fuge fuer alle Raster der Seite — Fragenfelder und Kacheln stehen
       im selben Abschnitt und muessen denselben Rhythmus haben. 20px waren
       neben 54px Innenpolster zu knapp: die Karten wirkten aneinandergedraengt.
       Faustregel: rund die Haelfte des Innenpolsters. */
    --fuge: clamp(18px, 2.4vw, 32px);
    /* Zwei Radien, nicht mehr: --radius-card fuer kleine Dinge (Eingabefeld,
       Knopf), --radius-panel fuer jede Flaeche mit Text darin. Vorher rundete
       ein Fragenfeld mit 12px neben einer Bildzelle mit 20px in derselben
       Reihe. */
    --radius-card: 12px;
    --radius-panel: clamp(18px, 1.8vw, 26px);
    /* Der Wert aus dem Hausstandard: weich, symmetrisch, nach unten. Ohne ihn
       liegen Karten flach auf dem Grund und wirken wie Drahtgitter. */
    --shadow-card: 0 4px 20px rgba(43,43,43,0.06);
    --shadow-lift: 0 12px 38px rgba(43,43,43,0.13);
    --transition-base: 250ms ease;
    --kopf-hoehe: 70px;
    /* Derselbe Pfeil wie in den Knoepfen, als Maske — damit er die
       Schriftfarbe des jeweiligen Links annimmt. */
    --pfeil-maske: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cline%20x1%3D%274%27%20y1%3D%2712%27%20x2%3D%2719%27%20y2%3D%2712%27%2F%3E%3Cpolyline%20points%3D%2713%206%2019%2012%2013%2018%27%2F%3E%3C%2Fsvg%3E");
  }

  .erbe {
    position: relative;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 18px;
    line-height: var(--leading-text);
    color: var(--black);
    background-color: var(--cream);
    -webkit-font-smoothing: antialiased;
  }

  .erbe .wrap {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
  }

  .erbe section { padding: var(--section-y) 0; }
  /* Haarlinie nur zwischen zwei gleichfarbigen Abschnitten — wo der Grund
     wechselt, trennt schon die Farbe. */
  .erbe section + section:not(.beige):not(.anmeldung) { border-top: 1px solid rgba(184,184,184,.28); }

  /* Die Serife traegt nur noch die Hero-Ueberschrift — einmal je Seite, dort
     wo die Marke auftritt. Ueberall sonst Manrope: zwei Schriften, die sich
     ueber die ganze Seite abwechseln, lesen sich als zwei Handschriften.
     Die Hierarchie machen Groesse, Gewicht und Abstand. */
  .erbe h1, .erbe h2 {
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.022em;
    text-wrap: balance;
  }
  .erbe .erbe-hero h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.005em;
  }

  .erbe h3 {
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.012em;
    text-wrap: balance;
  }

  .erbe h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.018em; }
  .erbe h2 { font-size: var(--fs-h2); line-height: var(--leading-display); margin-bottom: 28px; }
  .erbe h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--leading-tight); }

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

  /* ---------- Dunkle Kopfzone ---------- */
  .erbe .erbe-dunkel { background-color: var(--dunkelgrund); color: var(--cream); }
  .erbe .erbe-dunkel header .meta { color: rgba(253,251,249,.55); }

  /* ---------- Hero ---------- */
  .erbe .erbe-hero {
    padding: 56px 0 108px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    /* Volle Viewporthoehe, aber mit Boden und Deckel:
         unter 480px waere der Hero nur noch ein Band und die Ueberschrift
         passt nicht mehr hinein;
         ueber 860px steht der Text sehr tief und das Bild wird zerrissen —
         auf einem hohen Schirm ist 100 % einfach zu viel.
       clamp() rechnet max(480, min(100dvh, 860)). Der Rueckfall darueber
       gilt fuer Browser ohne dvh. */
    min-height: 100vh;
    min-height: clamp(480px, 100dvh, 1000px);
    padding: calc(var(--kopf-hoehe) + 40px) 0 clamp(48px, 7vh, 88px);
    /* Eigener Stapelkontext. Ohne ihn kann das Bild, sobald es animiert und
       der Browser es auf eine eigene Grafikebene hebt, ueber der fest
       stehenden Kopfzeile landen — Logo und Menue sind dann verschwunden.
       Mit z-index 0 bleibt alles aus dem Hero unter der Kopfzeile (70). */
    z-index: 0;
  }
  /* Die Startseite darf lauter sein als die Unterseiten: dort ist die
     Ueberschrift der Auftritt der Marke, hier nur die Wegmarke. Auf dem
     Handy landet sie bei 42px — dieselbe Groesse, die Root dort faehrt. */
  .erbe .erbe-hero--gross h1 {
    font-size: clamp(2.6rem, 6.2vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -0.022em;
  }

  .erbe .erbe-hero .hero-bild,
  .erbe .erbe-hero .hero-bild img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    /* Der waagerechte Bildmittelpunkt ist ueberall steuerbar, nicht erst auf
       schmalen Schirmen: auch im breiten Fenster wird seitlich beschnitten,
       und bei einem Motiv mit der Sonne am Rand faellt genau die weg. */
    object-fit: cover; object-position: var(--hero-fokus, 70%) center;
    display: block;
     /* Eigene Ebene: verhindert, dass das Bild waehrend der Menue-Blende
       neu gezeichnet wird. translateZ(0) muss in jeder Fassung des transform
       stehenbleiben, auch in den Bildern der Animation unten. Am Ende der
       Animation rechnet der Browser translateZ(0) scale(1) zu einer flachen
       2D-Matrix zusammen und wuerfe die Ebene wieder weg. Sie wird deshalb
       ueber backface-visibility gehalten und nicht ueber will-change:
       will-change macht das Bild zu einem eigenen Stapelkontext, und in
       manchen Browsern legt sich so eine Ebene ueber die fest stehende
       Kopfzeile — dann ist der Kopf hinter dem Bild verschwunden. */
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* ---------- Auftritt des Hero ----------
     Vorher stand alles vom ersten Bild an starr da. Jetzt kommt das Bild
     einmalig aus einer leichten Vergroesserung heraus zur Ruhe und blendet
     dabei auf; Ueberschrift, Satz und Knoepfe folgen versetzt von unten.
     Bewusst einmalig und nicht als Schleife: eine Dauerbewegung hinter dem
     Text zieht beim Lesen die Aufmerksamkeit ab.
     Die Zeiten sind dieselben wie beim .reveal der Hauptseite (0,7 s, 0,1 s
     Versatz), damit die Seite sich anfuehlt wie die uebrige.
     Ausgeloest wird ueber die Klasse .kommt-an, die erbe.js setzt. Nur so ist
     der Ausgangszustand (durchsichtig) nie der Ruhezustand: laeuft kein
     JavaScript oder wird die Animation unterdrueckt, steht der Hero einfach
     fertig da, statt unsichtbar zu bleiben. */
  .erbe .erbe-hero.kommt-an .hero-bild img {
    animation: hero-ankommen 1.9s cubic-bezier(.22, .61, .36, 1) both;
  }
  @keyframes hero-ankommen {
    from { opacity: 0; transform: translateZ(0) scale(1.07); }
    45%  { opacity: 1; }
    to   { opacity: 1; transform: translateZ(0) scale(1); }
  }

  .erbe .erbe-hero.kommt-an .text > * {
    animation: hero-auf .7s ease both;
    animation-delay: .25s;
  }
  .erbe .erbe-hero.kommt-an .text > * + * { animation-delay: .35s; }
  .erbe .erbe-hero.kommt-an .text > * + * + * { animation-delay: .45s; }
  @keyframes hero-auf {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }
  /* Schleier: oben für die Kopfzeile, Mitte hell, unten für Text und Knopf.
     Das Motiv soll freundlich bleiben — nicht zugedeckt. */
  .erbe .erbe-hero::after {
    content: ''; position: absolute; inset: 0;
    background:
      /* kurzer Abdunkler nur hinter der Kopfzeile — unabhängig davon,
         wie hell das Motiv der jeweiligen Jahreszeit oben ist */
      linear-gradient(180deg,
        rgba(43,43,43,.70) 0px,
        rgba(43,43,43,.48) 62px,
        rgba(43,43,43,0) 150px),
      linear-gradient(180deg,
        rgba(43,43,43,.16) 20%,
        rgba(43,43,43,.16) 45%,
        rgba(43,43,43,.40) 78%,
        rgba(43,43,43,.62) 100%),
      radial-gradient(120% 70% at 50% 62%, rgba(43,43,43,.34) 0%, rgba(43,43,43,0) 70%);
  }
  .erbe .erbe-hero .wrap { position: relative; z-index: 2; width: 100%; }
  @media (max-width: 1079px) and (min-width: 760px) {
    .erbe .erbe-hero { min-height: 88vh; min-height: clamp(460px, 88dvh, 880px); }
  }
  @media (max-width: 759px) {
    .erbe .erbe-hero {
      min-height: 86vh;
      min-height: clamp(420px, 86dvh, 760px);
      padding: calc(var(--kopf-hoehe) + 24px) 0 44px;
    }
    .erbe .erbe-hero .hero-bild img { object-position: var(--hero-fokus, 72%) center; }
    /* Deutlich heller als vorher: oben nur so viel wie die Kopfzeile braucht,
       in der Mitte offen, unten so viel wie Text und Knöpfe brauchen. */
    .erbe .erbe-hero::after {
      background:
        linear-gradient(180deg,
          rgba(43,43,43,.62) 0px,
          rgba(43,43,43,.34) 90px,
          rgba(43,43,43,.16) 34%,
          rgba(43,43,43,.46) 72%,
          rgba(43,43,43,.72) 100%);
    }
  }
  /* Schmal bleibt vom Bild nur ein hochkantes Fenster uebrig. Welcher Teil des
     Motivs darin steht, haengt vom Bild ab — der Steg liegt links, die Bruecke
     rechts. Deshalb kann die Seite den Punkt ueber --hero-fokus setzen; ohne
     Angabe bleibt es beim bisherigen Wert. */
  @media (min-width: 760px) and (max-width: 1023px) {
    .erbe .erbe-hero .hero-bild img { object-position: var(--hero-fokus, 70%) center; }
  }

  /* Handy im Querformat: 86dvh sind hier nur 335px, die Untergrenze von 420px
     schiebt den Knopf unter den Bildrand. Also Hoehe genau auf den Schirm und
     die Schrift so weit herunter, dass Ueberschrift, Satz und Knopf hineinpassen.
     Ueber max-height gebunden, damit kein Desktop-Fenster hier hineinfaellt. */
  @media (orientation: landscape) and (max-height: 520px) {
    .erbe .erbe-hero {
      min-height: 100vh;
      min-height: 100dvh;
      padding: calc(var(--kopf-hoehe) + 16px) 0 28px;
    }
    .erbe .erbe-hero h1 { font-size: var(--fs-h2); }
    .erbe .erbe-hero h1 span + span { margin-top: .18em; }
    .erbe .erbe-hero .versprechen { font-size: var(--fs-text); margin-top: 14px; }
    .erbe .hero-knoepfe { margin-top: 18px; }
  }

  /* Kein Trennstrich direkt unter dem Hero — die Bildkante trennt schon. */
  .erbe .erbe-hero + section { border-top: none; }
  /* Mit Hero darueber braucht der Artikel den Platz fuer die feste Kopfzeile
     nicht mehr. */
  .erbe .erbe-hero + .artikel { padding-top: var(--section-y); }

  .erbe .erbe-hero .text { text-align: left; }
  .erbe .erbe-hero h1 {
    /* Kein ch-Deckel: die Zeilenfuehrung steht im Markup, ein enger Deckel
       zerlegt die Zeile zusaetzlich in Bruchstuecke. */
    max-width: none;
    color: var(--cream);
    text-shadow: 0 2px 24px rgba(43,43,43,.45);
  }
  .erbe .erbe-hero .erkennung {
    font-size: var(--fs-h3);
    font-style: italic;
    line-height: 1.35;
    color: var(--cream);
    max-width: 46ch;
    margin: 30px 0 0;
    text-shadow: 0 1px 18px rgba(43,43,43,.5);
  }
  .erbe .erbe-hero .versprechen {
    margin: 26px 0 0;
    font-size: var(--fs-text);
    max-width: 70ch;
    color: rgba(253,251,249,.94);
    text-shadow: 0 1px 16px rgba(43,43,43,.55);
  }

  /* ---------- Hero auf Handy und Tablet: Bildtafel plus Textkarte ----------
     Statt Text auf dem Bild liegen hier zwei Gegenstaende untereinander: eine
     gerundete Bildtafel mit etwas Rand zur Seite, und darauf die Textkarte,
     die ein Stueck ueber die untere Bildkante ragt. Der Grund ist Lesbarkeit:
     auf 375px bleibt vom Motiv nur ein hochkantes Fenster, und jeder
     Schleier, der die Ueberschrift darauf tragbar macht, deckt genau das
     Motiv zu, das man zeigen wollte. Getrennt kann beides ganz da sein.
     Ab 900px bleibt es beim randlosen Bild mit Text darauf. */
  /* Auf dem dunklen Heldenbild dreht sich das um. */
  .erbe .hero-knoepfe .pfeilknopf--leicht { color: var(--cream); }

  @media (max-width: 899px) {
    .erbe .erbe-hero {
      display: block;
      min-height: 0;
      /* Die Karte ragt ueber die Bildkante — sie darf nicht abgeschnitten
         werden. Das Beschneiden des skalierenden Bildes uebernimmt jetzt die
         Bildtafel selbst. */
      overflow: visible;
      padding: 0 0 clamp(24px, 4vw, 40px);
    }
    /* Der Schleier lag ueber der ganzen Sektion; jetzt gehoert er ins Bild. */
    .erbe .erbe-hero::after { display: none; }

    .erbe .erbe-hero .hero-bild {
      position: relative;
      inset: auto;
      display: block;
      /* width:auto — die Grundregel setzt 100 %, zusammen mit dem Seitenrand
         waere die Tafel 24px breiter als der Schirm. */
      width: auto;
      margin: 10px 12px 0;
      height: clamp(300px, 44vh, 460px);
      border-radius: var(--radius-panel);
      overflow: hidden;
    }
    /* Nur noch so viel Abdunklung, wie die Kopfzeile braucht. Darunter
       bleibt das Motiv unangetastet. */
    .erbe .erbe-hero .hero-bild::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(180deg,
        rgba(43,43,43,.58) 0px,
        rgba(43,43,43,.30) 96px,
        rgba(43,43,43,0) 210px);
    }

    .erbe .erbe-hero .wrap { padding: 0 22px; }
    .erbe .erbe-hero .text {
      background-color: var(--cream);
      border-radius: var(--radius-panel);
      box-shadow: var(--shadow-lift);
      padding: clamp(26px, 5vw, 36px) clamp(22px, 4.6vw, 32px) clamp(28px, 5vw, 36px);
      /* Rund ein Drittel der Kartenhoehe liegt auf dem Bild. */
      margin-top: clamp(-64px, -9vw, -40px);
    }
    /* Auf der Karte steht die Schrift auf Creme, nicht auf dem Foto — also
       dunkle Tinte und kein Schlagschatten. */
    .erbe .erbe-hero h1,
    .erbe .erbe-hero--gross h1 { color: var(--black); text-shadow: none; }
    .erbe .erbe-hero--gross h1 { font-size: clamp(2rem, 7.6vw, 2.9rem); }
    .erbe .erbe-hero h1 { font-size: clamp(1.85rem, 6.8vw, 2.5rem); }
    .erbe .erbe-hero .versprechen {
      color: var(--gray-dark);
      text-shadow: none;
      font-size: var(--fs-text);
      margin-top: 18px;
    }
    .erbe .erbe-hero .erkennung { color: var(--gray-dark); text-shadow: none; }
    .erbe .erbe-hero .eyebrow { color: var(--gold-dark); }
    .erbe .hero-knoepfe { margin-top: 22px; }
    /* Der zweite Weg stand in Creme da — auf der cremefarbenen Karte war er
       unsichtbar. Und ohne Zeiger faehrt hier auch kein Pfeil ein, also
       steht er dauerhaft. */
    .erbe .hero-knoepfe .pfeilknopf--leicht { color: var(--black); }
    .erbe .hero-knoepfe .pfeilknopf--leicht .pfeilknopf-icon {
      width: 18px;
      opacity: 1;
      margin-right: 0;
      transform: none;
    }
  }

  /* ---------- Weg ---------- */

  /* ---------- Warum ---------- */

  /* ---------- Anmeldung (das eine Ziel) ---------- */
  /* Das Portraet ist der Hintergrund der Sektion. Die linke Flaeche des Bildes
     ist auf genau #3B404C geglaettet, deshalb schliesst die Hintergrundfarbe
     ohne sichtbare Naht an — das Bild muss nicht die volle Breite fuellen.
     'auto 100%' statt 'cover': cover wuerde auf breiten Schirmen oben und
     unten beschneiden und dem Kopf die Stirn nehmen. */
  /* Das Portraet ist der Hintergrund der Sektion. Die linke Flaeche des Bildes
     ist auf genau #3B404C geglaettet, deshalb schliesst die Hintergrundfarbe
     ohne sichtbare Naht an — das Bild muss nicht die volle Breite fuellen.
     'auto 100%' statt 'cover': cover wuerde auf breiten Schirmen oben und
     unten beschneiden und dem Kopf die Stirn nehmen. */
  .erbe .anmeldung {
    background-color: var(--dunkelgrund);
    background-image: url("../assets/img/erbe/gemeinsam/portraet/anmeldung-portraet.jpg");
    background-repeat: no-repeat;
    /* Unten buendig: das Portrait steht auf der Unterkante der Flaeche,
       darueber fuellt der Grund. Mittig zentriert schwebte es sonst, sobald
       der Textblock hoeher wird als das Bild. */
    background-position: right bottom;
    /* Das Bild begrenzt die Flaeche nach oben und unten — kein grauer
       Streifen darueber. Damit haengt die Bildgroesse an der Sektionshoehe
       und die an der Textmenge: Der Textblock ist deshalb bewusst kurz und
       das Polster knapp. */
    background-size: auto 100%;
    color: var(--cream);
    border-top: none;
    min-height: 540px;
    padding: clamp(40px, 4.2vw, 60px) 0;
    display: flex;
    align-items: flex-end;
  }
  .erbe .anmeldung .wrap { width: 100%; }
  .erbe .anmeldung-portraet-schmal { display: none; }
  @media (max-width: 900px) {
    /* Schmal steht der Kopf im Weg — als Hintergrund. Deshalb dort kein
       Hintergrundbild, sondern dieselbe Aufnahme als Band ueber dem Text. */
    .erbe .anmeldung { background-image: none; min-height: 0; display: block; }
    .erbe .anmeldung-portraet-schmal {
      display: block;
      /* Vollstaendig, nicht beschnitten: Ein Deckel mit object-fit hat oben
         den Kopf abgeschnitten. Das Bild behaelt sein Seitenverhaeltnis. */
      width: 100%;
      height: auto;
      border-radius: var(--radius-card);
      margin-bottom: 30px;
    }
  }
  .erbe .anmeldung h2 { color: var(--cream); }
  .erbe .anmeldung .zeilen p { color: var(--cream); }
  /* Kleiner als die Ueberschriften der Seite: der Block ist ein Angebot am
     Fuss, keine eigene Sektion mit eigener Stimme. */
  .erbe .anmeldung h2 { margin-bottom: 20px; font-size: var(--fs-gross); }
  .erbe .anmeldung .zeilen p {
    font-size: var(--fs-text);
    line-height: 1.4;
    /* Breiter laufen lassen: bei 40ch bricht jeder Satz dreimal um und der
       Block wird unnoetig hoch. */
    max-width: 54ch;
  }
  .erbe .anmeldung .zeilen p + p { margin-top: 12px; }
  /* Die Einladung ist der eigentliche Schritt (Carl Richards): erst fuer wen,
     dann was drin steht, dann die Aufforderung. Damit sie nicht als dritte
     Beschreibungszeile untergeht, bekommt sie Luft und die Farbe des Knopfes.
     Kontrast auf #3B404C: 5,1:1. */
  .erbe .anmeldung .zeilen .einladung {
    margin-top: 20px;
    color: var(--gold-light);
  }

  /* Zweite Tuer unter dem Formular: der Newsletter ist das Hauptangebot,
     das Gespraech die Abkuerzung fuer die, die schon so weit sind. Leiser
     gesetzt, damit die Reihenfolge klar bleibt. */
  .erbe .zweite-tuer {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(253,251,249,.18);
    font-size: var(--fs-klein);
    color: rgba(253,251,249,.78);
  }
  .erbe .zweite-tuer a { color: var(--gold-light); }
  .erbe .zweite-tuer a:hover { color: var(--cream); }
  @media (max-width: 640px) {
    /* Schmal bricht der Link mitten im Satz um und die Unterstreichung
       zerfaellt in zwei Stuecke. Dann lieber eine eigene Zeile. */
    .erbe .zweite-tuer a { display: block; margin-top: 4px; }
  }

  /* Die letzten Betreffzeilen als Beweis, dass es den Newsletter gibt und
     worum es geht. Keine Aufzaehlungszeichen, ein feiner Strich davor. */
  .erbe .ausgaben {
    list-style: none;
    margin: 16px 0 2px;
    display: grid;
    gap: 6px;
  }
  .erbe .ausgaben li {
    position: relative;
    padding-left: 22px;
    font-size: var(--fs-text);
    line-height: 1.3;
    color: var(--cream);
  }
  .erbe .ausgaben li::before {
    content: '';
    position: absolute; left: 0; top: .72em;
    width: 12px; height: 1px;
    background-color: var(--gold-light);
  }

  .erbe form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
    max-width: 560px;
  }
  .erbe input[type="email"] {
    flex: 1 1 260px;
    font-family: inherit;
    font-size: var(--fs-text);
    padding: 15px 18px;
    border: 1px solid var(--gray-light);
    border-radius: var(--radius-card);
    background-color: var(--white);
    color: var(--black);
  }
  .erbe input[type="email"]:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,162,39,.18);
  }
  .erbe button {
    font-family: inherit;
    font-size: var(--fs-text);
    font-weight: 600;
    padding: 15px 28px;
    border: none;
    border-radius: var(--radius-card);
    background-color: var(--cream);
    color: var(--black);
    cursor: pointer;
    transition: background var(--transition-base), box-shadow var(--transition-base);
  }
  .erbe button:hover { background-color: var(--gold-light); box-shadow: var(--shadow-card); }

  .erbe .formhinweis { font-size: var(--fs-micro); color: rgba(253,251,249,.72); margin-top: 14px; max-width: 52ch; }

  @media (max-width: 640px) {
    /* Auf dem Handy kostet die 90-Prozent-Einfassung rund 38px Textbreite —
       genau die, die den Fragen und Knopfbeschriftungen zum Umbruch fehlen.
       Die Rinne von 24px bleibt, nur der zusaetzliche Rand faellt weg.
       Ab 641px rechnet min(90%, 1680px) unveraendert weiter.
       Die frueher hier stehenden Regeln fuer body und section waren wirkungslos
       (.erbe schlaegt body) und die Hero-Polsterung widersprach dem 759er-Block. */
    .erbe { --container: 100%; }
  }

  /* Scroll Reveal - identisch zu assets/css/style.css */
  .erbe .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
  .erbe .reveal.visible { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .erbe .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* ---------- Sprunglink ---------- */
  .erbe .sprunglink {
    position: absolute; left: -9999px;
    background-color: var(--cream); color: var(--black);
    padding: 10px 16px; z-index: 100;
  }
  .erbe .sprunglink:focus { left: 12px; top: 12px; }
  .erbe .nur-fuer-screenreader {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  /* ---------- Eigener Kopf ---------- */
  .erbe .kopf {
    height: var(--kopf-hoehe);
    display: flex; align-items: center;
    position: fixed; top: 0; left: 0; right: 0; z-index: 70;
    /* Eigene Grafikebene, damit die Kopfzeile auch dann oben bleibt, wenn im
       Hero eine animierte Ebene liegt. Guertel und Hosentraeger zum z-index
       des Hero — der Fehler war schwer zu reproduzieren, das soll er nicht
       noch einmal werden. */
    transform: translateZ(0);
    background-color: var(--cream);
    border-bottom: 1px solid rgba(184,184,184,.28);
    transition: background var(--transition-base), border-color var(--transition-base);
  }
  .erbe .kopf-innen { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .erbe .kopf-logo img { height: 46px; width: auto; display: block; }
  .erbe .kopf-logo .logo-fuer-dunkel { display: none; }
  /* Startseite: über dem Bild zunächst durchsichtig, helle Tinte */
  /* Umgekehrt gedacht: Creme ist der Normalfall, durchsichtig die Ausnahme —
     so gibt es keinen Streit zwischen den Regeln. */
  .erbe .kopf-dunkel:not(.gescrollt) {
    background-color: transparent;
    border-bottom-color: transparent;
  }
  /* Eigener Schleier direkt unter der Kopfzeile — trägt das Logo unabhängig
     davon, wie hell das Motiv der Jahreszeit oben gerade ist. */
  .erbe .kopf-dunkel:not(.gescrollt)::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0;
    height: calc(var(--kopf-hoehe) + 56px);
    background: linear-gradient(180deg,
      rgba(43,43,43,.78) 0%,
      rgba(43,43,43,.52) 55%,
      rgba(43,43,43,0) 100%);
    pointer-events: none;
    z-index: -1;
  }
  .erbe .kopf-dunkel:not(.gescrollt) .kopf-logo img { filter: drop-shadow(0 1px 6px rgba(43,43,43,.9)); }
  .erbe .kopf-dunkel:not(.gescrollt) .menue-knopf span { box-shadow: 0 1px 8px rgba(43,43,43,.65); }

  /* Nach dem ersten Scrollen legt sich Creme darunter, Tinte wird dunkel */
  .erbe .kopf-dunkel.gescrollt .kopf-logo .logo-fuer-hell { display: block; }
  .erbe .kopf-dunkel.gescrollt .kopf-logo .logo-fuer-dunkel { display: none; }
  .erbe .kopf-dunkel.gescrollt .kopf-logo img { filter: none; }
  .erbe .kopf-dunkel.gescrollt .menue-knopf span { background-color: var(--black); box-shadow: none; }

  /* Bei offenem Menü liegt die Menüfläche selbst darunter — Kopf bleibt leer.
     Tinte und Striche regelt der Zustand 'gescrollt', den das Skript mitsetzt. */
  /* Bei offenem Menue bleibt die Kopfzeile, was sie ohnehin ist: creme nach
     dem Scrollen, durchsichtig mit eigenem Schleier ueber dem Hero-Bild.
     Kein Sonderfall — der Zustand ist waehrenddessen eingefroren, weil der
     Scroll-Handler bei offenem Menue nichts anfasst. */
  .erbe .kopf-dunkel:not(.gescrollt) .kopf-logo .logo-fuer-hell { display: none; }
  .erbe .kopf-dunkel:not(.gescrollt) .kopf-logo .logo-fuer-dunkel { display: block; }

  .erbe .menue-knopf {
    background: none; border: none; cursor: pointer;
    /* Ohne das Schrumpfverbot draengt das Logo den Knopf auf dem Handy
       zusammen — gemessen 26px statt 44px. */
    flex: 0 0 auto;
    width: 44px; height: 44px; padding: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border-radius: 0; box-shadow: none;
  }
  .erbe .menue-knopf:hover { background: none; box-shadow: none; }
  .erbe .menue-knopf span {
    display: block; height: 2px; width: 26px; background-color: var(--black);
    transition: transform 380ms cubic-bezier(.4,0,.2,1), opacity 160ms ease;
  }
  .erbe .kopf-dunkel:not(.gescrollt) .menue-knopf span { background-color: var(--cream); }

  /* Drei Striche drehen sich rechts herum ins X — und beim Schließen zurück.
     Verschiebung = Strichhöhe + Abstand = 8px */
  .erbe .menue-knopf.offen span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .erbe .menue-knopf.offen span:nth-child(2) { opacity: 0; transform: rotate(45deg); }
  .erbe .menue-knopf.offen span:nth-child(3) { transform: translateY(-8px) rotate(135deg); }

  @media (prefers-reduced-motion: reduce) {
    .erbe .menue-knopf span { transition: opacity 160ms ease; }
  }

  /* ---------- Menü: einzelne Punkte, von rechts ----------
     Keine grosse Flaeche mehr. Die Punkte stehen rechts, wo der Zeiger nach
     dem Knopf ohnehin ist — kurzer Weg statt quer ueber den Schirm. Statt
     einer Karte, die sich darueberschiebt, fliegt jeder Punkt einzeln herein.
     Der dunkle Schleier ist kein Traeger, sondern nimmt der Seite darunter
     nur die Aufmerksamkeit — die Punkte tragen sich selbst. */
  .erbe .menue {
    position: fixed; inset: 0; z-index: 60;
    background-color: rgba(43,43,43,.62);
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: opacity 260ms ease, visibility 0s linear 400ms;
  }
  .erbe .menue.offen {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease, visibility 0s;
  }
  .erbe .menue[hidden] { display: none; }
  /* Der Wrap behaelt die normale Spaltenbreite der Seite. Dadurch fluchtet die
     rechte Kante der Menuepunkte mit dem Menue-Knopf in der Kopfzeile — beides
     sitzt in derselben Spalte. */
  .erbe .menue .wrap { width: 100%; }
  .erbe .menue nav {
    display: flex; flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
  /* Keine Flaechen mehr: Der Schleier dunkelt den Hintergrund ohnehin ab —
     ein Kasten je Punkt waere doppelt gemoppelt und sah nach Blasen aus.
     Stattdessen kraeftige helle Schrift mit weichem Schatten, der sie auch
     ueber hellen Bildstellen traegt. */
  .erbe .menue nav a {
    /* Grundschrift, nicht Cormorant: als grosse helle Serifen auf dem
       abgedunkelten Bild wirkt das Menue wie eine Ueberschrift und nicht
       wie Navigation. */
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: var(--fs-gross);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.15;
    color: var(--cream);
    text-decoration: none;
    text-shadow: 0 2px 18px rgba(43,43,43,.75);
    padding: 6px 0;
    width: max-content;
    opacity: 0;
    transform: translateX(56px);
    transition: color var(--transition-base),
                background-color var(--transition-base),
                opacity 200ms ease,
                transform 380ms cubic-bezier(.2, .8, .3, 1);
  }
  .erbe .menue.offen nav a { opacity: 1; transform: none; }
  /* Schmal: nicht mittig, sondern oben unter dem Schliessen-Kreuz. Mittig
     laegen die Punkte sonst ueber der Ueberschrift des Heros, und auf einem
     hohen Handy ist der Weg vom Knopf dorthin unnoetig weit. */
  @media (max-width: 700px) {
    .erbe .menue {
      align-items: flex-start;
      padding-top: calc(var(--kopf-hoehe) + 14px);
    }
    .erbe .menue nav { gap: 6px; }
    .erbe .menue nav a { font-size: var(--fs-h3); padding: 7px 0; }
  }

  /* Handy und Tablet: Das Menue bekommt eine eigene Flaeche statt nur eines
     Schleiers. Frei stehende Punkte ueber der durchscheinenden Seite sahen
     aus, als waere die Seite kaputt — man las Menue und Inhalt gleichzeitig.
     Die Tafel deckt gut zwei Drittel des Schirms und ist unten gerundet,
     damit sie als Schublade von oben liest und nicht als zweite Seite. */
  @media (max-width: 899px) {
    .erbe .menue {
      align-items: stretch;
      padding-top: 0;
      background-color: rgba(43,43,43,.45);
    }
    .erbe .menue .wrap {
      align-self: flex-start;
      width: 100%;
      background-color: var(--dunkelgrund);
      border-radius: 0 0 var(--radius-panel) var(--radius-panel);
      /* Deckt gut die halbe Hoehe. Die Punkte stehen aber oben, direkt unter
         dem Schliessen-Kreuz — mittig zentriert klaffte darueber eine
         Handbreit Leere und der Weg vom Knopf war unnoetig weit. */
      min-height: 46vh;
      min-height: 46dvh;
      padding-top: calc(var(--kopf-hoehe) + 26px);
      padding-bottom: clamp(36px, 7vw, 56px);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    .erbe .menue nav { gap: 2px; }
    .erbe .menue nav a {
      /* So gross wie eine Abschnitts-Ueberschrift: auf dem Handy ist das
         Menue der ganze Schirm, da darf es nicht fluestern. */
      font-size: var(--fs-h2);
      font-weight: 600;
      line-height: 1.1;
      padding: 11px 0;
      /* Auf der eigenen Flaeche traegt die Schrift sich selbst. */
      text-shadow: none;
    }
  }

  .erbe .menue nav a:hover,
  .erbe .menue nav a:focus-visible { color: var(--gold-light); }

  /* Staffelung ueber zwei Zaehler, die erbe.js an jeden Punkt schreibt:
     --i von oben, --j von unten. Vorher stand je Platz eine eigene Regel,
     gebaut fuer fuenf Punkte — der sechste bekam keine Verzoegerung und
     erschien ohne Flug. Mit den Zaehlern wachsen die Wellen mit, egal wie
     viele Punkte im Menue stehen.
     Beim Schliessen rueckwaerts: der unterste zuerst. */
  .erbe .menue nav a {
    transition-delay: 0s, 0s,
      calc(var(--j, 0) * 45ms), calc(var(--j, 0) * 45ms);
  }
  /* Beim Oeffnen vorwaerts, von oben nach unten. */
  .erbe .menue.offen nav a {
    transition-delay: 0s, 0s,
      calc(40ms + var(--i, 0) * 55ms), calc(40ms + var(--i, 0) * 55ms);
  }

  /* Ueber dem dunklen Schleier braucht die Kopfzeile helle Tinte — nicht die
     dunkle wie frueher ueber der cremefarbenen Flaeche. */

  @media (prefers-reduced-motion: reduce) {
    .erbe .menue,
    .erbe .menue.offen,
    .erbe .menue nav a,
    .erbe .menue.offen nav a { transition: none; transform: none; transition-delay: 0s; }
  }

  /* ---------- Fragen-Raster ---------- */
  .erbe h2.gross {
    font-size: var(--fs-h2);
    line-height: 1.14;
    max-width: 42ch;
    margin-bottom: var(--raum-m);
  }
  /* Unterzeile ist keine Fließtext-Strecke, sondern ein kurzer Absatz direkt
     unter der Überschrift. Deshalb bewusst über der 65-Zeichen-Lesegrenze:
     zwei lange Zeilen lesen sich hier besser als drei kurze. */
  /* Dieselbe Stufe wie der Satz im Auftakt: die Zeile unter einer
     Abschnitts-Ueberschrift ist eine Aussage, kein Fliesstext. Auf 18px unter
     einer 42px-Zeile sah sie aus wie eine Bildunterschrift. */
  /* ---------- Zitat in einer Kachel ----------
     Fremde Rede muss als fremde Rede erkennbar sein, sonst liest sie sich als
     mein Satz. Statt Anfuehrungszeichen im Text ein einzelnes grosses
     Zeichen als Marke darueber: es sagt dasselbe, stoert den Satz aber nicht
     mitten im Lesen. Manrope wie ueberall ausserhalb des Heros.
     Semantisch ein blockquote, damit Vorlesesoftware und Suchmaschinen es
     auch als Zitat verstehen und nicht nur das Auge. */
  .erbe .kachel--zitat { position: relative; }
  .erbe .kachel--zitat blockquote { margin: 0; }
  /* Oben rechts statt oben links: links sass es ueber der ersten Zeile und
     drueckte den Satz nach unten. Rechts hat es die leere Ecke fuer sich,
     darf deutlich groesser werden und stoert das Lesen nicht. */
  .erbe .kachel--zitat::before {
    content: '„';
    position: absolute;
    /* Haengt in der rechten oberen Ecke und ragt bewusst ueber die Karte
       hinaus in den Abschnittsgrund. Innerhalb der Flaeche sah es aus wie
       ein Fehler im Satz; halb darueber liest es sich als Marke, die auf der
       Karte liegt. Die Kachel darf dafuer nichts abschneiden. */
    top: clamp(-64px, -5.5vw, -30px);
    right: clamp(-18px, -1.6vw, -6px);
    font-size: clamp(190px, 22vw, 340px);
    line-height: 1;
    font-weight: 600;
    color: currentColor;
    opacity: 0.22;
    pointer-events: none;
  }
  /* Auf dem Grund ausserhalb der Karte braucht das Zeichen die Farbe des
     Abschnitts, nicht die der Karte — sonst stuende Creme auf Beige. */
  .erbe section .kachel--zitat::before { color: var(--salbei); opacity: 0.16; }
  .erbe section .kachel--zitat { overflow: visible; }
  .erbe .kachel--zitat blockquote p { padding-right: clamp(52px, 6vw, 96px); }

  /* ---------- Drei Stationen, eine Linie ----------
     Vorbild ist eine Reihe, in der die Karten nicht nebeneinander stehen,
     sondern aufgefaedelt sind: eine duenne Linie laeuft hinter ihnen durch
     und ist nur in den Fugen zu sehen. Deshalb ist das hier ein Element und
     nicht drei — die Regel "hoechstens ein gefuelltes Feld je Abschnitt"
     gilt fuer einzelne Aussagen, nicht fuer eine Reihe, die zusammen einen
     Weg beschreibt. */
  .erbe .wegkarten {
    position: relative;
    display: grid;
    gap: var(--fuge);
    margin-top: var(--raum-m);
  }
  .erbe .wegkarte {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 3vw, 38px) clamp(24px, 2.8vw, 34px) clamp(30px, 3.4vw, 42px);
    border-radius: var(--radius-panel);
    /* Der Verlauf liegt als neutraler Schleier ueber der Stufe, damit alle
       drei denselben Lichtfall haben und nur der Ton sich aendert. */
    background-color: var(--salbei-2);
    background-image: linear-gradient(118deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.07) 100%);
    color: var(--cream);
  }
  /* Wo eine Reihe Fremdkoerper enthaelt (etwa eine Bildkachel), zaehlt
     nth-child falsch. Dort steht die Stufe als Klasse im Markup. */
  /* Die Kachelklasse muss mitgenannt werden: die Grundregel des
     Kartensystems ist selbst dreiteilig und steht weiter hinten. */
  .erbe section .kachel.stufe-1 { background-color: var(--stufe-c1); }
  .erbe section .kachel.stufe-2 { background-color: var(--stufe-c2); }
  .erbe section .kachel.stufe-3 { background-color: var(--stufe-c3); }
  .erbe section.beige .kachel.stufe-1 { background-color: var(--stufe-1); }
  .erbe section.beige .kachel.stufe-2 { background-color: var(--stufe-2); }
  .erbe section.beige .kachel.stufe-3 { background-color: var(--stufe-3); }

  .erbe .wegkarte:nth-child(1) { background-color: var(--salbei-1); }
  .erbe .wegkarte:nth-child(2) { background-color: var(--salbei-2); }
  .erbe .wegkarte:nth-child(3) { background-color: var(--salbei-3); }
  .erbe .wegkarte h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.25;
    color: var(--cream);
  }
  /* Der grosse Abstand zwischen Titel und Text ist Absicht: er macht aus der
     Karte eine Station mit Kopf und Inhalt statt eines Absatzes mit
     Ueberschrift. */
  .erbe .wegkarte p {
    margin-top: clamp(30px, 3.6vw, 56px);
    max-width: none;
    font-size: var(--fs-text);
    line-height: 1.6;
    color: var(--cream);
  }
  @media (min-width: 860px) {
    .erbe .wegkarten { grid-template-columns: repeat(3, 1fr); }
    .erbe .wegkarten::before {
      content: '';
      position: absolute;
      left: 14%;
      right: 14%;
      top: 50%;
      height: 1px;
      background-color: var(--salbei);
      z-index: 0;
    }
  }
  /* Hoehere Spezifitaet als die allgemeine Knopfreihe weiter unten, die
     sonst mit ihrem eigenen Abstand gewinnt. */
  .erbe .wegkarten + .knopfreihe--weg {
    margin-top: var(--raum-m);
    justify-content: center;
  }

  /* ---------- Entlastung nach der Fragenwand ----------
     Kein Titel, keine Karte: ein Satz, der frei auf der Flaeche steht und
     Raum um sich hat. Eine Stufe unter h2, damit er die Ueberschrift des
     naechsten Abschnitts nicht ueberholt, aber deutlich ueber Fliesstext —
     er ist die Antwort auf alles, was darueber steht. */
  .erbe .entlastung {
    margin-top: var(--raum-l);
    /* Kein Zeilenbreiten-Deckel: die drei Saetze sind selbst die
       Zeilenfuehrung und sollen einzeilig stehen, solange die Spalte reicht.
       Mit 22ch brach schon der erste mitten im Satz um. */
    max-width: none;
    font-size: var(--fs-gross);
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.018em;
    color: var(--black);
  }
  .erbe .entlastung span { display: block; }
  /* Die ersten beiden Saetze gehoeren zusammen und stehen deshalb direkt
     untereinander. Erst vor dem Schlusssatz kommt Luft: Er ist die Folgerung
     aus den beiden, nicht ihre Fortsetzung. */
  .erbe .entlastung span:last-child { margin-top: clamp(20px, 2.2vw, 32px); }
  .erbe .entlastung-nachsatz {
    margin-top: var(--raum-m);
    /* 44ch brachen den Satz nach "nicht" um — eine Zeile mit zwei Woertern
       darunter. Der Satz ist 64 Zeichen lang und soll als ein Stueck stehen;
       auf schmalen Viewports bricht er ohnehin an der Containerkante. */
    max-width: 68ch;
    font-size: var(--fs-text);
    color: var(--gray-dark);
  }

  .erbe .unterzeile {
    font-size: var(--fs-gross);
    line-height: 1.45;
    color: var(--gray-dark);
    max-width: 52ch;
    margin-bottom: var(--raum-l);
    text-wrap: balance;
  }
  .erbe .raster {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fuge);
  }
  @media (min-width: 700px) {
    .erbe .raster { grid-template-columns: 1fr 1fr; }
  }
  /* Drei Spalten erst spät. Darunter wird die Spalte so schmal, dass die Fragen
     zweizeilig werden — und eine umbrechende Frage liest sich als Absatz statt
     als Zeile. Lieber zwei breite Spalten als drei enge. */
  /* Auf niedrigen Fenstern enger: Auf einem Laptop (rund 780px Fensterhoehe)
     sollen die sechs Felder zusammen sichtbar sein. Die Regel haengt an der
     Fensterhoehe, nicht an der Breite — genau darum geht es hier. Auf hohen
     Schirmen bleibt die luftige Fassung. */
  /* Drei Spalten ab 1520px. Damit passt der ganze Abschnitt auf einem
     Laptop-Bildschirm (etwa 1536x1024) in eine Bildschirmhoehe: zwei Reihen
     statt drei sparen rund 257px. Die Masse der Fragen wirkt nur, wenn man
     sie auf einen Blick sieht — scrollt man sie ab, wird ein Katalog daraus. */
  @media (min-width: 1520px) {
    .erbe .raster { grid-template-columns: repeat(3, 1fr); }
    /* Etwas knapperes Polster, damit die Fragen in der schmaleren Spalte
       trotzdem einzeilig bleiben. */

  }
  /* Jedes Themengebiet steht auf eigener Fläche. Das Auge überspringt eine
     Fläche als Ganzes — man sucht die eigene Frage, statt achtzehn zu lesen. */
  /* Dieselbe Formel wie eine Kachel: Flaeche aus dem Abschnittsgrund, kein
     Rahmen, kein Schatten, grosser Radius. Vorher standen im selben Abschnitt
     zwei Kartensprachen untereinander. */
  .erbe .raster-gruppe {
    background-color: var(--beige-light);
    border: none;
    border-radius: var(--radius-panel);
    box-shadow: none;
    padding: clamp(26px, 3vw, 40px) clamp(26px, 3vw, 40px) clamp(28px, 3.2vw, 44px);
  }
  .erbe section.beige .raster-gruppe { background-color: var(--white); }
  .erbe .raster-gruppe h3 {
    font-weight: 500;
    font-size: var(--fs-h3);
    margin-bottom: 10px;
  }
  .erbe .raster-gruppe ul { list-style: none; }
  .erbe .raster-gruppe li {
    /* Eine Stufe ueber dem Sekundaertext: das sind die Fragen des Lesers,
       nicht das Kleingedruckte darunter. */
    font-size: var(--fs-text);
    line-height: 1.45;
    color: var(--gray-dark);
    padding: 13px 0;
    border-bottom: 1px solid rgba(43,43,43,.10);
  }
  /* Innerhalb der Fläche braucht es oben und unten keine Linie mehr —
     die Kante der Fläche macht die Begrenzung. */
  .erbe .raster-gruppe li:first-child { border-top: none; }
  .erbe .raster-gruppe li:last-child { border-bottom: none; padding-bottom: 0; }

  /* ---------- Pfeil-Knopf: Pfeil und Text tauschen die Plätze ---------- */
  .erbe .pfeilknopf {
    --weg-pfeil: 0px;
    --weg-text: 0px;
    display: inline-flex; align-items: center; gap: 14px;
    margin-top: 52px;
    text-decoration: none; color: var(--black);
    font-weight: 600; font-size: var(--fs-klein);
  }
  .erbe .pfeilknopf-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--gold-dark); color: var(--cream);
    border-radius: 3px;
    transition: transform 380ms cubic-bezier(.4,0,.2,1), background var(--transition-base);
  }
  .erbe .pfeilknopf-icon svg { width: 20px; height: 20px; }
  .erbe .pfeilknopf-text {
    transition: transform 380ms cubic-bezier(.4,0,.2,1);
  }
  .erbe .pfeilknopf:hover .pfeilknopf-icon { transform: translateX(var(--weg-pfeil)); }
  .erbe .pfeilknopf:hover .pfeilknopf-text { transform: translateX(var(--weg-text)); }
  @media (prefers-reduced-motion: reduce) {
    .erbe .pfeilknopf-icon, .erbe .pfeilknopf-text { transition: none; }
    .erbe .pfeilknopf:hover .pfeilknopf-icon,
    .erbe .pfeilknopf:hover .pfeilknopf-text { transform: none; }
  }
  /* ---------- Der Erlaubnis-Satz ----------
     Steht auf beigem Grund, deshalb Creme als Flaeche — heller als die
     Umgebung, damit er sich abhebt, ohne dass etwas dazukommt. Zentriert,
     weil er kein Absatz im Argument ist, sondern dessen Ende. */
  /* Salbei statt Weiss. Die drei Karten darueber sind die Angst, diese hier
     ist die Antwort darauf — auf derselben weissen Flaeche liest sie sich als
     vierte Karte derselben Sorte. Salbei ist die ruhige Farbe der Marke und
     schon in Gebrauch (Zitat-Schild auf ueber.php). Kontrast Creme auf
     #5E6E54: 5,3:1, bei dieser Schriftgroesse mehr als ausreichend. */
  /* ---------- Rückmeldung des Formulars ---------- */
  @media (max-width: 640px) {
    /* Schmal steht das Eingabefeld auf voller Breite, der Knopf aber nur so
       breit wie sein Text — das sieht nach Versehen aus. Beide voll. */
    .erbe form { max-width: none; }
    .erbe form button { width: 100%; justify-content: center; }
  }

  .erbe .formmeldung { margin-top: 14px; font-size: var(--fs-klein); min-height: 1em; }
  .erbe .formmeldung.gut { color: var(--cream); }
  .erbe .formmeldung.schlecht { color: var(--gold-light); }

  /* ---------- Eigener Fuß ---------- */
  /* Hell, nicht dunkel. Die Anmeldeflaeche darueber ist der einzige dunkle
     Block am Seitenende und damit der letzte Akzent auf dem einen Ziel — ein
     zweites Dunkel direkt darunter nimmt ihr genau diese Wirkung. Ausserdem
     Die zwei verschiedenen Dunkel (#3B404C blaugrau gegen #2B2B2B warmgrau),
     die frueher hier aneinanderstiessen, sind seit 13.09.2026 zu einem Wert
     zusammengefasst: --dunkelgrund. Hell bleibt die Fusszeile trotzdem. */
  .erbe .fuss {
    background-color: var(--beige-light); color: var(--gray-dark);
    padding: 64px 0 40px; font-size: var(--fs-klein);
  }
  .erbe .fuss a { color: var(--black); text-decoration: none; }
  .erbe .fuss a:hover { color: var(--black); }

  /* Grundfarbe fuer Links. Ohne sie faellt jeder Link ohne eigene Regel auf
     das Browser-Blau zurueck — was genau dann passiert, wenn irgendwo ein
     neuer dazukommt. Die besonderen Faelle (Rechtsseiten, zweite Tuer,
     Fuss) stehen weiter unten und gewinnen ueber ihre Spezifitaet. */
  .erbe a { color: var(--black); text-decoration: none; }
  .erbe a:hover { color: var(--black); }

  /* ---------- Links: Pfeil faehrt von links herein ----------
     Statt einer Unterlaengung dieselbe Geste wie beim zweiten Weg im Hero:
     ein Pfeil schiebt sich von links dazwischen und den Text ein Stueck mit.
     Der Pfeil ist eine Maske mit currentColor — er nimmt die Schriftfarbe des
     Links an und funktioniert auf hellem wie auf dunklem Grund.
     Bewusst inline-block und nicht Flex: ein Flex-Link kann nicht ueber zwei
     Zeilen umbrechen, und in der Datenschutzerklaerung stehen Links mitten im
     Satz, die das muessen. Die Groessen haengen an em, damit der Pfeil in
     jeder Schriftgroesse zur Zeile passt. */
  .erbe a::before {
    content: '';
    display: inline-block;
    width: 0;
    height: .78em;
    vertical-align: -.09em;
    margin-right: 0;
    opacity: 0;
    background-color: currentColor;
    -webkit-mask: var(--pfeil-maske) no-repeat center / contain;
    mask: var(--pfeil-maske) no-repeat center / contain;
    transition: width 320ms cubic-bezier(.4, 0, .2, 1),
                margin-right 320ms cubic-bezier(.4, 0, .2, 1),
                opacity 220ms ease;
  }
  .erbe a:hover::before,
  .erbe a:focus-visible::before {
    width: .92em;
    margin-right: .3em;
    opacity: 1;
  }
  /* Zweiter Pfeil auf der rechten Seite, im Ruhezustand zusammengeschoben.
     Er ist der Partner des linken: beim Hover schrumpft der eine, waechst
     der andere — Text und Zeiger tauschen die Seite, dieselbe Geste wie beim
     goldenen Knopf, nur ohne Flaeche. */
  .erbe a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: .78em;
    vertical-align: -.09em;
    margin-left: 0;
    opacity: 0;
    background-color: currentColor;
    -webkit-mask: var(--pfeil-maske) no-repeat center / contain;
    mask: var(--pfeil-maske) no-repeat center / contain;
    transition: width 320ms cubic-bezier(.4, 0, .2, 1),
                margin-left 320ms cubic-bezier(.4, 0, .2, 1),
                opacity 220ms ease;
  }

  /* ---------- Eigenstaendige Textlinks ----------
     Ein Link, der allein in seiner Zeile steht, ist kein Wort im Satz,
     sondern ein Weg. Deshalb traegt er den Pfeil dauerhaft links und nicht
     erst im Hover — ohne ihn sah die Zeile aus wie vergessener Fliesstext.
     Beim Zeigen wandert der Pfeil auf die andere Seite: der linke geht
     zusammen, der rechte faehrt aus.
     Bewusst an Klassen festgemacht und nicht an :only-child — das zaehlt nur
     Elementkinder, nicht Text. "<p>Satz <a>Link</a></p>" waere damit auch
     getroffen worden, und in der Datenschutzerklaerung bekamen Links mitten
     im Satz einen stehenden Pfeil. */
  .erbe .nachsatz-link a::before,
  .erbe .zweite-tuer a::before,
  .erbe .textlink::before {
    width: .92em;
    margin-right: .3em;
    opacity: 1;
  }
  .erbe .nachsatz-link a:hover::before,
  .erbe .nachsatz-link a:focus-visible::before,
  .erbe .zweite-tuer a:hover::before,
  .erbe .zweite-tuer a:focus-visible::before,
  .erbe .textlink:hover::before,
  .erbe .textlink:focus-visible::before {
    width: 0;
    margin-right: 0;
    opacity: 0;
  }
  .erbe .nachsatz-link a:hover::after,
  .erbe .nachsatz-link a:focus-visible::after,
  .erbe .zweite-tuer a:hover::after,
  .erbe .zweite-tuer a:focus-visible::after,
  .erbe .textlink:hover::after,
  .erbe .textlink:focus-visible::after {
    width: .92em;
    margin-left: .3em;
    opacity: 1;
  }
  /* Ausgenommen: Links, die ihre eigene Geste schon haben oder gar kein Text
     sind — die Knoepfe mit eingebautem Pfeil, das Logo, der Sprunglink und
     die Menuepunkte, die von rechts hereinfliegen. */
  .erbe .pfeilknopf::before,
  .erbe .kopf-logo::before,
  .erbe .sprunglink::before,
  .erbe .menue nav a::before,
  .erbe .pfeilknopf::after,
  .erbe .kopf-logo::after,
  .erbe .sprunglink::after,
  .erbe .weiter-karte::after,
  .erbe .menue nav a::after { content: none; }
  @media (prefers-reduced-motion: reduce) {
    .erbe a::before, .erbe a::after { transition: none; }
  }
  .erbe .fuss-marke img { height: 56px; width: auto; margin-bottom: 22px; }
  .erbe .fuss-marke p { max-width: none; }
  /* Ein Kanal, nicht drei: LinkedIn ist der einzige, auf dem regelmaessig
     etwas passiert. Nur das Wort, kein Symbol — ein Icon in der Groesse des
     Logos zog den Blick vom Text weg, und der Fuss ist kein Schaufenster. */
  .erbe .fuss-social {
    margin-top: 18px;
    font-size: var(--fs-klein);
    font-weight: 600;
  }
  .erbe .fuss-unten {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    border-top: 1px solid rgba(43,43,43,.12);
    padding-top: 22px; font-size: var(--fs-micro); color: var(--gray-dark);
  }

  @media (max-width: 640px) {
    .erbe .pfeilknopf { margin-top: 40px; }
  }

  /* ---------- Pfeilknopf, volle Fläche (Hero) ---------- */
  .erbe .pfeilknopf--voll {
    background-color: var(--gold-dark);
    color: var(--cream);
    height: 56px;
    padding: 0 22px 0 10px;
    border-radius: 3px;
    gap: 14px;
    transition: background var(--transition-base);
  }
  .erbe .pfeilknopf--voll .pfeilknopf-icon {
    background-color: var(--cream);
    color: var(--gold-dark);
    width: 36px; height: 36px;
    border-radius: 2px;
  }
  .erbe .pfeilknopf--voll .pfeilknopf-icon svg { width: 17px; height: 17px; }
  /* Hover = reine Farbumkehr: Gold wird Creme, Creme wird Gold.
     Beim Tausch entsteht rechts derselbe Rand wie vorher links. */
  .erbe .pfeilknopf--voll .pfeilknopf-icon {
    transition: transform 380ms cubic-bezier(.4,0,.2,1),
                background-color var(--transition-base), color var(--transition-base);
  }
  .erbe .pfeilknopf--voll:hover {
    background-color: var(--cream);
    color: var(--gold-dark);
    padding: 0 10px 0 22px;
  }
  .erbe .pfeilknopf--voll:hover .pfeilknopf-icon {
    background-color: var(--gold-dark);
    color: var(--cream);
  }

  /* ---------- Pfeilknopf auf der Salbei-Karte ----------
     Gold auf Salbei waeren zwei Akzentfarben uebereinander, und Salbei auf
     Salbei verschwindet. Deshalb kehrt der Knopf die Karte um: Creme als
     Flaeche, Salbei als Schrift. Beim Hover tauschen Flaeche und Zeichen die
     Rollen wie beim goldenen Knopf, nur ohne die Flaeche zu verlieren — sie
     wird weiss, das Zeichen creme auf Salbei. */
  .erbe .kachel--voll .pfeilknopf--auf-salbei {
    --weg-pfeil: 4px;
    --weg-text: 4px;
    background-color: var(--cream);
    color: var(--salbei);
    /* Die Karte ist so hoch wie die Honorarliste daneben und traegt nur zwei
       Zeilen. Statt die Leere unter dem Knopf stehen zu lassen, steht der
       Knopf an ihrem Fuss: oben die Zusage, unten der Weg. */
    margin-top: auto;
  }

  .erbe .kachel--voll .pfeilknopf--auf-salbei .pfeilknopf-icon {
    background-color: var(--salbei);
    color: var(--cream);
  }
  /* Kein Seitentausch des Polsters wie beim goldenen Knopf: dort begleitet
     ihn eine volle Farbumkehr, hier bliebe nur ein Ruck ohne Anlass.
     Stattdessen ruecken Zeichen und Text gemeinsam ein Stueck nach rechts. */
  .erbe .kachel--voll .pfeilknopf--auf-salbei:hover {
    background-color: var(--white);
    color: var(--salbei);
    padding: 0 22px 0 10px;
  }
  .erbe .kachel--voll .pfeilknopf--auf-salbei:hover .pfeilknopf-icon {
    background-color: var(--salbei);
    color: var(--white);
  }

  /* ---------- Pfeilknopf, dunkle Fläche (helle Karten) ----------
     Gleiche Mechanik wie --voll, nur Schwarz statt Gold: auf Creme kommt Gold
     nur auf 3,3:1, Schwarz auf 13:1. Hover ist auch hier reine Farbumkehr. */
  .erbe .pfeilknopf--dunkel {
    background-color: var(--black);
    color: var(--cream);
    height: 56px;
    padding: 0 22px 0 10px;
    border: none;
    border-radius: 3px;
    gap: 14px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: var(--fs-klein);
    margin-top: 0;
    transition: background-color var(--transition-base), color var(--transition-base);
  }
  .erbe .pfeilknopf--dunkel .pfeilknopf-icon {
    background-color: var(--cream);
    color: var(--black);
    width: 36px; height: 36px;
    border-radius: 2px;
    transition: transform 380ms cubic-bezier(.4,0,.2,1),
                background-color var(--transition-base), color var(--transition-base);
  }
  .erbe .pfeilknopf--dunkel .pfeilknopf-icon svg { width: 17px; height: 17px; }
  .erbe .pfeilknopf--dunkel:hover {
    background-color: var(--cream);
    color: var(--black);
    padding: 0 10px 0 22px;
  }
  .erbe .pfeilknopf--dunkel:hover .pfeilknopf-icon {
    background-color: var(--black);
    color: var(--cream);
  }
  /* Auf der hellen Karte braucht die umgekehrte Fläche eine Kante,
     sonst verschwindet der Knopf beim Hover im Kartengrund. */
  .erbe .anmeldung .pfeilknopf--dunkel:hover { box-shadow: inset 0 0 0 1px var(--black); }

  /* Nach dem Absenden ruht der Knopf, obwohl der Zeiger noch darauf steht.
     Ohne das bleibt die Farbumkehr stehen und sieht aus wie eingefroren —
     dabei ist der Vorgang längst durch. Die Klasse fällt weg, sobald der
     Zeiger den Knopf einmal verlassen hat. */
  .erbe .pfeilknopf.ruht:hover { padding: 0 22px 0 10px; }
  .erbe .pfeilknopf--voll.ruht:hover {
    background-color: var(--gold-dark); color: var(--cream);
  }
  .erbe .pfeilknopf--voll.ruht:hover .pfeilknopf-icon {
    background-color: var(--cream); color: var(--gold-dark);
  }
  .erbe .pfeilknopf--dunkel.ruht:hover {
    background-color: var(--black); color: var(--cream); box-shadow: none;
  }
  .erbe .anmeldung .pfeilknopf--dunkel.ruht:hover {
    background-color: var(--cream); color: var(--black); box-shadow: none;
  }
  .erbe .anmeldung .pfeilknopf--dunkel.ruht:hover .pfeilknopf-icon {
    background-color: var(--black); color: var(--cream);
  }
  .erbe .pfeilknopf.ruht:hover .pfeilknopf-icon,
  .erbe .pfeilknopf.ruht:hover .pfeilknopf-text { transform: none; }

  /* ---------- Zwei Handlungsaufforderungen im Hero ---------- */
  .erbe .hero-knoepfe {
    margin-top: 34px;
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: flex-start;
    gap: 14px 26px;
  }
  .erbe .hero-knoepfe .pfeilknopf { margin: 0; }
  /* Der zweite Weg im Hero. Kein Kasten, kein Unterstrich — stattdessen
     faehrt beim Zeigen ein Pfeil von links herein und schiebt den Text ein
     Stueck mit. Dieselbe Geste wie beim Hauptknopf, nur leiser. */
  /* Der Normalfall ist heller Grund, nicht der dunkle Hero. Vorher stand
     hier Creme: ueberall ausserhalb des Heros war der zweite Weg damit
     praktisch unsichtbar. Die Ausnahme steht beim Hero selbst. */
  .erbe .pfeilknopf--leicht {
    --weg-pfeil: 0px;
    --weg-text: 0px;
    color: var(--black);
    height: 52px;
    padding: 0 6px;
    font-weight: 500;
    border-bottom: none;
  }
  .erbe .pfeilknopf--leicht .pfeilknopf-text { transform: none; }
  .erbe .pfeilknopf--leicht .pfeilknopf-icon {
    width: 0; height: auto;
    background: none;
    color: inherit;
    border-radius: 0;
    opacity: 0;
    overflow: hidden;
    /* Gleicht die Luecke aus, die der Flex-Abstand sonst schon im
       Ruhezustand aufreisst. */
    margin-right: -14px;
    transform: translateX(-8px);
    transition: width 320ms cubic-bezier(.4,0,.2,1),
                margin-right 320ms cubic-bezier(.4,0,.2,1),
                transform 320ms cubic-bezier(.4,0,.2,1),
                opacity 220ms ease;
  }
  .erbe .pfeilknopf--leicht .pfeilknopf-icon svg { width: 18px; height: 18px; }
  .erbe .pfeilknopf--leicht:hover .pfeilknopf-icon,
  .erbe .pfeilknopf--leicht:focus-visible .pfeilknopf-icon {
    width: 18px;
    opacity: 1;
    margin-right: 0;
    transform: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .erbe .pfeilknopf--leicht .pfeilknopf-icon { transition: none; }
  }
  @media (max-width: 480px) {
    .erbe .hero-knoepfe { flex-direction: column; gap: 12px; align-items: stretch; }
    .erbe .hero-knoepfe .pfeilknopf { width: 100%; justify-content: center; }
    /* Auf dem Handy gibt es kein Zeigen, also auch keinen einfahrenden Pfeil.
       Damit der zweite Weg nicht als blosser Text dasteht, ist der Pfeil dort
       dauerhaft sichtbar. */
    .erbe .hero-knoepfe .pfeilknopf--leicht {
      width: auto;
      align-self: center;
    }
    .erbe .hero-knoepfe .pfeilknopf--leicht .pfeilknopf-icon {
      width: 18px;
      opacity: 1;
      margin-right: 0;
      transform: none;
    }
  }

  /* Fester Kopf: Inhalt darunter beginnt tiefer (nur wo kein Hero-Bild liegt) */
  .erbe .artikel { padding-top: calc(var(--kopf-hoehe) + 56px); }

  /* ---------- Beiger Abschnitt mit Karten ---------- */
  .erbe section.beige { background-color: var(--beige-light); border-top: none; }
  .erbe section.beige + section { border-top: none; }

  /* ---------- Rasterliste (Baustein 41) ----------
     Fuer gleichrangige, kurze Punkte. Keine Aufzaehlungszeichen — eine feine
     Linie ueber jedem Eintrag und zwei Spalten. Ersetzt Fliesstext, der in
     Wahrheit eine Liste ist. */
  .erbe .rasterliste {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(var(--cols, 2), 1fr);
    gap: 0 clamp(28px, 3.5vw, 56px);
    margin: clamp(24px, 3vw, 36px) 0;
  }
  .erbe .rasterliste li {
    padding: 13px 0;
    border-top: 1px solid var(--beige-dark);
    line-height: 1.45;
    color: var(--gray-dark);
    /* Wie die Fragen in den Fragenfeldern: das ist Inhalt, nicht
       Kleingedrucktes darunter. */
    font-size: var(--fs-text);
  }
  /* Einspaltig in einer Karte: die oberste Linie faellt weg. Sie soll Zeilen
     voneinander trennen — ueber der ersten trennt sie nichts, dort macht das
     die Kartenkante. */
  .erbe .rasterliste--eins { grid-template-columns: 1fr; }
  .erbe .rasterliste--eins li:first-child { border-top: none; padding-top: 0; }
  @media (max-width: 640px) {
    .erbe .rasterliste { grid-template-columns: 1fr; }
  }

  /* Auftakt eines Abschnitts, frei auf der Flaeche. Grosse Zeile, ein Satz
     darunter, viel Luft — und dann faengt der Inhalt an. */
  /* Grosszuegig: der Auftakt soll fuer sich stehen und nicht als Kopfzeile
     des Rasters darunter gelesen werden. */
  /* ---------- Einordnung in der Hero-Ecke ----------
     Was es hier gibt, gehoert auf die Seite — aber nicht neben die
     Ueberschrift. Die fragt („Und was jetzt?"); eine Leistungszeile daneben
     beantwortet die Frage, bevor sie wirkt. Deshalb unten rechts, klein und
     leise: wer sie sucht, findet sie, wer liest, wird nicht aufgehalten.
     Rechts buendig mit dem Inhalt, nicht mit dem Bildschirmrand — dieselbe
     Kante wie der Text darueber. */
  .erbe .hero-einordnung {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(48px, 7vh, 88px);
    z-index: 2;
    box-sizing: border-box;
    max-width: var(--container);
    padding: 0 24px;
    margin: 0 auto;
    text-align: right;
    font-size: var(--fs-micro);
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: rgba(253, 251, 249, 0.74);
    text-shadow: 0 1px 14px rgba(43, 43, 43, 0.55);
    pointer-events: none;
  }
  /* Schmal steht der Text auf einer cremefarbenen Karte, die ueber das Bild
     ragt. Eine helle Zeile in der Ecke laege dann teils auf der Karte, teils
     daneben — dort laeuft sie unter dem Text mit, linksbuendig und dunkel. */
  @media (max-width: 899px) {
    .erbe .hero-einordnung {
      position: static;
      margin: 18px auto 0;
      padding: 0 22px;
      text-align: left;
      color: var(--gray-mid);
      text-shadow: none;
    }
  }

  .erbe .auftakt { margin-bottom: var(--raum-l); }
  .erbe .auftakt h2 {
    font-size: var(--fs-h1);
    /* Kein ch-Deckel: die Zeilenfuehrung steht im Markup, ein enger Deckel
       zerlegt die gesetzte Zeile zusaetzlich. */
    max-width: none;
  }
  /* Zeilenfuehrung aus dem Markup, wie im Hero: automatisch braeche der Satz
     an der falschen Stelle. */
  .erbe .auftakt h2 span { display: block; }
  .erbe .auftakt p {
    margin-top: var(--raum-m);
    font-size: var(--fs-gross);
    line-height: 1.45;
    color: var(--gray-dark);
    max-width: 52ch;
  }

  /* Bildzelle im Fragenraster: randlos, kein Text. Bricht die Reihe aus
     gleichen Feldern auf. */
  .erbe .raster-bild {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-panel);
    min-height: 220px;
  }
  /* Ueber zwei Zeilen: so wird aus dem Bild ein Element statt eines
     Streifens. Schmal faellt der Zeilensprung weg, dann eine normale
     Bildhoehe zwischen den Fragen. */
  @media (min-width: 700px) {
    .erbe .raster-bild--hoch { grid-row: span 2; }
  }
  @media (max-width: 699px) {
    .erbe .raster-bild--hoch { min-height: 260px; }
  }
  .erbe .raster-bild img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ---------- Gespann: Aussage links, Belege rechts ----------
     Bricht das Muster Ueberschrift-Unterzeile-Raster auf. Links steht die
     These und bleibt beim Scrollen stehen, rechts laufen die Belege durch.
     Unter 1000px fallen beide Spalten untereinander, dann ohne Kleben. */
  /* Die Gruende nebeneinander, ohne Karten: eine feine Oberkante je Spalte
     reicht als Trennung. Als weisse Kaesten lasen sich drei Absaetze wie drei
     Gegenstaende — es ist aber nur Text.
     Drei Spalten erst ab 1100px: darunter blieben rund 26 Zeichen je Zeile,
     und ein dreifach umbrechender Absatz liest sich schlechter als einer
     ueber die ganze Breite. */
  .erbe .gruende {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fuge);
    margin-top: var(--raum-l);
  }
  @media (min-width: 1100px) {
    .erbe .gruende {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  /* Vier Gruende stehen 2x2, nicht 3+1: ein einzelner Rest in der zweiten
     Reihe liest sich wie ein Fehler. Steht absichtlich nach der 3er-Regel,
     damit sie auch oberhalb von 1100px gewinnt. */
  @media (min-width: 700px) {
    .erbe .gruende--vier { grid-template-columns: repeat(2, 1fr); }
    /* Quadratische Felder mit dem Text an der Unterkante — dieselbe Bauform
       wie die Schrittkacheln auf "Wie ich arbeite". Der Leerraum oben ist
       gewollt: er gibt dem Text einen Boden, statt ihn oben anzukleben.
       Nur ab 700px, darunter ist eine Spalte zu schmal fuer ein Quadrat. */
    .erbe .gruende--vier > div {
      aspect-ratio: 1;
      /* Sicherheitsnetz: Zwischen 700 und 820px fuellt der laengste Text das
         Quadrat randvoll aus. Ohne min-content liefe er unten heraus — so
         waechst das Feld stattdessen ueber das Quadrat hinaus, und das Grid
         zieht die anderen drei mit auf dieselbe Hoehe. */
      min-height: min-content;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
  }
  /* Die Gruende stehen auf eigenen Flaechen — dieselbe Formel wie jede
     Kachel: Farbe aus dem Abschnittsgrund, kein Rahmen, kein Schatten.
     Die Ueberschrift darueber bleibt frei auf der Flaeche; nur der Inhalt
     bekommt Karten. */
  .erbe .gruende > div {
    background-color: var(--beige-light);
    border-radius: var(--radius-panel);
    padding: clamp(28px, 3.2vw, 44px);
  }
  /* Dieselbe Logik in Beige: der Text steigert sich ("kommt noch etwas
     dazu"), also steigert sich auch die Flaeche. */
  .erbe section.beige .gruende > div:nth-child(1) { background-color: var(--stufe-1); }
  .erbe section.beige .gruende > div:nth-child(2) { background-color: var(--stufe-2); }
  .erbe section.beige .gruende > div:nth-child(3) { background-color: var(--stufe-3); }
  .erbe .gruende h3 {
    font-size: var(--fs-h3);
    font-weight: 500;
    color: var(--black);
    margin-bottom: 10px;
  }
  .erbe .gruende p {
    font-size: var(--fs-text);
    line-height: 1.7;
    color: var(--gray-dark);
    max-width: 46ch;
  }

  /* ---------- Fragen als Akkordeon (Baustein 10) ----------
     Nicht ein Block mit Trennlinien, sondern einzelne Karten mit Luft
     dazwischen — auf der beigen Flaeche traegt jede Frage fuer sich.
     Der offene Punkt bekommt Salbei als Kante plus einen weichen Ring
     (Regel: offenes Akkordeon = Akzent-Highlight). Salbei ist die zweite
     Markenfarbe und steht schon auf der Erlaubnis-Karte der Startseite.
     Zugeklappt wird erst per Skript: ohne JavaScript steht alles offen. */
  .erbe .akkordeon {
    display: grid;
    gap: var(--fuge);
    margin-top: var(--raum-l);
    /* Nicht ueber die ganze Breite: eine Frage ist eine Zeile, keine Spalte.
       Auf 1400px lief der Text sonst als schmale Saeule in einer sehr breiten
       Karte — viel Leere rechts, kurze Zeilen links. */
    max-width: clamp(560px, 66vw, 860px);
  }
  /* Der Punkt ist nur der Behaelter. Die Flaeche traegt die Frage, die
     Antwort bekommt eine eigene. */
  .erbe .akk-punkt { background: none; border: none; }

  .erbe .akk-kopf {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
    border: none;
    border-radius: var(--radius-panel);
    /* Textgroesse, nicht Ueberschriftsgroesse: acht Fragen untereinander
       sollen zusammen in eine Bildschirmhoehe passen. Bei 24px brachen die
       langen Fragen zwei- und dreizeilig um, die Liste wurde so hoch, dass
       die Antwort zu den unteren Fragen ausserhalb des Bildes begann. */
    padding: clamp(14px, 1.6vw, 20px) clamp(20px, 2.4vw, 28px);
    font-size: var(--fs-text);
    line-height: 1.35;
    font-weight: 500;
    color: var(--black);
    cursor: pointer;
    transition: color var(--transition-base), box-shadow var(--transition-base);
  }
  /* Flaeche wie bei jeder Kachel aus dem Abschnittsgrund — und ausdruecklich
     auch im Hover: .erbe button:hover faerbt sonst jeden Knopf golden, und ein
     Frage-Kopf ist technisch ein Knopf. */
  .erbe section .akk-kopf,
  .erbe section .akk-kopf:hover { background-color: var(--beige-light); }
  .erbe section.beige .akk-kopf,
  .erbe section.beige .akk-kopf:hover { background-color: var(--white); }
  /* Die Antwort ist die eine Flaeche, auf die es im Abschnitt ankommt:
     dunkles Salbei mit cremefarbener Schrift. Die offene Frage nimmt die
     Stufe dazu, die auf dem Grund noch frei ist — das dunklere Beige. So
     gehoeren die beiden sichtbar zusammen, ohne dass etwas dazwischen
     gezeichnet werden muss. */
  .erbe section .akk-antwort,
  .erbe section.beige .akk-antwort {
    background-color: var(--salbei);
    color: var(--cream);
  }
  /* Die offene Frage nimmt dieselbe Flaeche wie ihre Antwort. Ein eigener
     Ton dazwischen — vorher das dunklere Beige — machte aus dem Paar wieder
     zwei Sachen. Gleiche Farbe heisst: gehoert zusammen. */
  .erbe section .akk-punkt.offen .akk-kopf,
  .erbe section .akk-punkt.offen .akk-kopf:hover,
  .erbe section.beige .akk-punkt.offen .akk-kopf,
  .erbe section.beige .akk-punkt.offen .akk-kopf:hover {
    background-color: var(--salbei);
    color: var(--cream);
  }
  .erbe .akk-kopf { box-shadow: var(--shadow-card); }
  .erbe .akk-kopf:hover { color: var(--salbei); box-shadow: var(--shadow-lift); }
  .erbe .akk-kopf:focus-visible { outline: 2px solid var(--salbei); outline-offset: 2px; }
  /* Offen = Akzent-Highlight, wie bei den Werkbank-Tools. */
  /* Offen und zugeklappt unterscheiden sich nur durch die Flaeche. Vorher
     zog eine gruene Linie von der Frage ueber einen Steg um die Antwort
     herum: die Linie traf die Antwortkarte auf halber Hoehe und liess links
     eine Luecke — ein T-Stueck, das nach Fehler aussah statt nach Weg.
     Jetzt liegen die offene Frage und ihre Antwort auf demselben hellen
     Salbei, alle anderen auf Weiss. Das verbindet die beiden, ohne dass
     etwas dazwischen gezeichnet werden muss. */

  /* Kein Plus, kein Minus, kein Kreis mehr. Die offene Frage traegt die
     Salbei-Flaeche und dieselbe Farbe wie ihre Antwort — damit ist der
     Zustand schon gesagt, und ein Zeichen daneben sagt ihn ein zweites Mal.
     Den Zustand fuer Vorlesesoftware traegt weiterhin aria-expanded. */


  /* Der Kopf liegt oben: die Antwort kommt unter ihm hervor. */
  .erbe .akk-kopf { position: relative; z-index: 2; }

  /* Der Koerper ist nur die Blende fuer die Hoehe. Das Polster oben gehoert
     dazu — es setzt die Antwort deutlich unter die Frage und wird von der
     gemessenen scrollHeight mitgebracht. */
  .erbe .akk-koerper {
    position: relative;
    z-index: 1;
    max-height: 0;
    overflow: hidden;
    padding-top: 18px;
    transition: max-height 380ms cubic-bezier(.2, .7, .3, 1);
  }
  /* Zugeklappt ist die Antwort ein Kreis in der Groesse des Plus-Zeichens.
     Beim Oeffnen waechst er nach rechts zur Karte aus. Der Text kommt erst
     dazu, wenn die Flaeche steht — sonst laeuft er waehrend des Wachsens
     ueber die Kante. */
  .erbe .akk-antwort {
    position: relative;
    margin-left: clamp(24px, 4vw, 64px);
    width: 46px;
    min-height: 46px;
    border-radius: 999px;
    overflow: hidden;
    /* Zugeklappt ohne Polster: mit border-box waere der Kreis sonst so breit
       wie seine Innenabstaende und nicht 46px. */
    padding: 0;
    transition: width 420ms cubic-bezier(.2, .7, .3, 1),
                padding 420ms cubic-bezier(.2, .7, .3, 1),
                border-radius 420ms cubic-bezier(.2, .7, .3, 1);
  }
  .erbe .akk-punkt.offen .akk-antwort,
  .erbe .akk-antwort.misst {
    width: calc(100% - clamp(24px, 4vw, 64px));
    border-radius: var(--radius-panel);
    padding: clamp(22px, 2.6vw, 30px) clamp(24px, 3vw, 36px);
  }
  .erbe .akk-antwort p {
    font-size: var(--fs-text);
    line-height: 1.65;
    color: var(--cream);
    max-width: none;
    opacity: 0;
    transition: opacity 220ms ease;
  }
  .erbe .akk-punkt.offen .akk-antwort p { opacity: 1; transition-delay: 240ms; }
  .erbe .akk-antwort p + p { margin-top: 12px; }
  /* Auf der Salbei-Flaeche nimmt der Link die Schrift der Karte an und
     bleibt als Link erkennbar — sonst stuende Schwarz auf Salbei. */
  .erbe .akk-antwort a {
    color: var(--cream);
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
  }
  /* Beim Messen darf nichts laufen, sonst kommt die Hoehe der schmalen
     Fassung heraus. */
  .erbe .akk-antwort.misst,
  .erbe .akk-antwort.misst p { transition: none; }
  .erbe .akk-antwort.misst p { opacity: 1; }
  @media (max-width: 640px) {
    /* Schmal reicht der Platz fuer die Einrueckung nicht — dann steht die
       Antwort buendig unter der Frage. */
    .erbe .akk-antwort { margin-left: 0; }
    .erbe .akk-punkt.offen .akk-antwort,
    .erbe .akk-antwort.misst { width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .erbe .akk-koerper, .erbe .akk-kopf,
    .erbe .akk-antwort, .erbe .akk-antwort p { transition: none; }
  }

  /* Kleine Karten in einer Kachel: kurze Saetze, die im Absatz untergehen
     wuerden. Leicht gegeneinander versetzt, damit sie nach hingelegt aussehen
     und nicht nach Tabellenzeile. Auf der gefuellten Flaeche eine hellere
     Stufe derselben Farbe statt Creme — weisse Zettel auf Salbei waeren drei
     Loecher in der Kachel. */
  .erbe .zettel {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: clamp(20px, 2.4vw, 28px) 0;
  }
  .erbe .zettel li {
    background-color: rgba(253, 251, 249, .12);
    border-radius: 999px;
    padding: 11px 20px;
    font-size: var(--fs-klein);
    color: var(--cream);
    line-height: 1.3;
  }
  .erbe .zettel li:nth-child(2) { transform: translateY(7px); }
  .erbe .zettel li:nth-child(3) { transform: translateY(-4px); }
  /* Auf hellen Flaechen umgekehrt: dunkle Tinte auf beiger Stufe. */
  .erbe .kachel:not(.kachel--voll) .zettel li {
    background-color: var(--beige-dark);
    color: var(--black);
  }
  @media (prefers-reduced-motion: reduce) {
    .erbe .zettel li { transform: none; }
  }

  /* ---------- Ab 900px: Fragen links, eine Antwortflaeche rechts ----------
     Dasselbe Markup, andere Anordnung. Der Punkt wird zu display:contents,
     dadurch landen alle Fragen als eigene Rasterzellen in Spalte 1 und alle
     Antworten uebereinander in Spalte 2. Weil die Antwortspalte ueber alle
     Zeilen laeuft, ist sie automatisch so hoch wie die Fragenliste — ohne
     eine einzige Hoehenangabe.
     Darunter bleibt es beim Akkordeon: nebeneinander waere jede Spalte auf
     dem Handy zu schmal. */
  @media (min-width: 900px) {
    .erbe .akkordeon {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: var(--fuge);
      row-gap: 12px;
      align-items: start;
      max-width: none;
    }
    .erbe .akk-punkt { display: contents; }
    .erbe .akk-kopf { grid-column: 1; }

    .erbe .akk-koerper {
      grid-column: 2;
      /* Ueber genau so viele Zeilen, wie es Fragen gibt. -1 zaehlt nur
         explizite Zeilen, die es hier nicht gibt, und ein pauschaler span
         legt leere Zeilen an — die Zahl setzt deshalb erbe.js als --zeilen. */
      grid-row: 1 / span var(--zeilen, 1);
      align-self: stretch;
      max-height: none;
      overflow: visible;
      padding-top: 0;
      visibility: hidden;
      opacity: 0;
      /* Kein Uebergang: alle Antworten liegen in derselben Rasterzelle. Mit
         einem Fade fuhren beim Wechsel zwei Flaechen gleichzeitig durch halbe
         Deckkraft, ihre Salbeitoene addierten sich und es sah aus, als baue
         sich die Karte neu zusammen. Da die Flaeche bei jeder Antwort gleich
         gross und gleich gefaerbt ist, bleibt sie beim harten Wechsel
         optisch stehen — nur der Text tauscht. */
      transition: none;
    }
    .erbe .akk-punkt.offen .akk-koerper { visibility: visible; opacity: 1; }
    .erbe .akk-antwort {
      margin-left: 0;
      width: 100%;
      height: 100%;
      border-radius: var(--radius-panel);
      padding: clamp(30px, 3.2vw, 44px);
      display: flex;
      flex-direction: column;
      /* Oben beginnen, nicht mittig: die Antworten sind verschieden lang, und
         mittig gesetzt startet jede an einer anderen Stelle — beim Wechseln
         springt der Text dann herum. */
      justify-content: flex-start;
      transition: none;
    }
    .erbe .akk-antwort p { opacity: 1; transition: none; }
  }

  /* Weiterlesen: zwei Wege am Ende einer Seite. Bewusst als Satz mit Link
     und nicht als Karten — es ist ein Hinweis, kein Angebot. */
  /* ---------- Weiterlesen ----------
     Zwei Karten statt zweier Textzeilen. Am Fuss einer langen Seite hat eine
     nackte Zeile keine Chance mehr gegen das, was darueber lag — sie wurde
     ueberlesen. Jede Karte traegt das Heldenbild ihrer Zielseite: man
     erkennt die Seite wieder, bevor man klickt. Ebene 2 des Kartensystems,
     weil sie anklickbar sind. */
  .erbe .weiterlesen { padding: var(--raum-l) 0; }
  .erbe .weiter-karten { display: grid; gap: var(--fuge); }
  @media (min-width: 700px) {
    .erbe .weiter-karten { grid-template-columns: 1fr 1fr; }
    /* Einzelne Karte: eine halbe Rasterspalte laesst den Abschnitt
       unfertig aussehen. Deshalb eine Spalte, mittig, auf Lesebreite
       begrenzt. Faellt weg, sobald ein zweiter Fall danebensteht. */
    .erbe .weiter-karten--einzeln {
      grid-template-columns: minmax(0, 34rem);
      justify-content: center;
    }
  }
  .erbe .weiter-karte {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-panel);
    background-color: var(--beige-light);
    box-shadow: var(--shadow-card);
    color: var(--black);
    text-decoration: none;
    transition: box-shadow 320ms cubic-bezier(.4, 0, .2, 1),
                transform 320ms cubic-bezier(.4, 0, .2, 1);
  }
  .erbe section.beige .weiter-karte { background-color: var(--white); }
  /* Der Pfeil der Textlinks gehoert hier an den Titel, nicht vor das Bild. */
  .erbe .weiter-karte::before { content: none; }
  .erbe .weiter-bild { display: block; }
  .erbe .weiter-bild img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 620ms cubic-bezier(.4, 0, .2, 1);
  }
  .erbe .weiter-text {
    display: block;
    padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.6vw, 32px) clamp(24px, 2.8vw, 34px);
  }
  .erbe .weiter-kicker {
    display: block;
    font-size: var(--fs-klein);
    color: var(--gray-dark);
    margin-bottom: 6px;
  }
  .erbe .weiter-titel {
    display: block;
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
  }
  /* Fallbeispiele nutzen dieselbe Karte, tragen aber zusaetzlich zwei Saetze
     zum Fall. Ohne sie waere es nur ein Name mit Bild. */
  .erbe .weiter-satz {
    display: block;
    margin-top: 12px;
    font-size: var(--fs-klein);
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--gray-dark);
  }
  .erbe .weiter-karte:hover,
  .erbe .weiter-karte:focus-visible { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
  .erbe .weiter-karte:hover .weiter-bild img,
  .erbe .weiter-karte:focus-visible .weiter-bild img { transform: scale(1.04); }
  .erbe .weiter-karte:hover .weiter-titel,
  .erbe .weiter-karte:focus-visible .weiter-titel { color: var(--salbei); }
  .erbe .weiter-karte:focus-visible { outline: 2px solid var(--salbei); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    .erbe .weiter-karte,
    .erbe .weiter-bild img { transition: none; }
    .erbe .weiter-karte:hover { transform: none; }
  }

  /* Einzelner Aufklapper fuer einen Sonderfall: bleibt in jeder Breite ein
     Akkordeon, nutzt die ganze Spalte und traegt im Koerper das gewohnte
     Kachelpaar statt einer Antwortkarte. */
  .erbe .akkordeon--einzeln { max-width: none; }
  /* Die Luft um das Kachelpaar sitzt am Raster, nicht an der Blende. Am
     Koerper waere sie Polster: zugeklappt bleibt ein Element mit max-height 0
     genau so hoch wie sein Polster stehen — 71px, durch die man die oberen
     Kanten beider Karten sah. Am Kind wandert die Luft mit hinter die Blende. */
  .erbe .akkordeon--einzeln .akk-koerper { padding: 0; }
  /* Das Raster steht hier nicht als eigener Block auf der Seite, sondern im
     Koerper des Aufklappers — sein Blockabstand nach oben gehoert nicht dazu. */
  .erbe .akkordeon--einzeln .akk-koerper .kacheln {
    margin-top: 0;
    padding-top: var(--fuge);
  }
  @media (min-width: 760px) {
    /* Die obenliegende Karte ist per transform nach unten versetzt — das
       zaehlt fuer die gemessene Hoehe nicht mit und wuerde von der Blende
       abgeschnitten. */
    .erbe .akkordeon--einzeln .akk-koerper .kacheln { padding-bottom: clamp(20px, 2.8vw, 44px); }
  }
  @media (min-width: 900px) {
    .erbe .akkordeon--einzeln { display: block; }
    .erbe .akkordeon--einzeln .akk-punkt { display: block; }
    .erbe .akkordeon--einzeln .akk-koerper {
      max-height: 0;
      overflow: hidden;
      visibility: visible;
      opacity: 1;
      transition: max-height 380ms cubic-bezier(.2, .7, .3, 1);
    }
  }

  /* ---------- Honorar ----------
     Kein Preisraster, keine Pakete: das ist eine Positionierungsseite, keine
     Angebotsseite. Drei Absaetze, in der Mitte die Groessenordnung — die
     steht groesser, weil sie die Antwort auf die Frage ist. */
  /* Eine Flaeche statt freier Zeilen: der Preis ist ein Block, kein
     Fliesstext. Die Zeilen darin bleiben zweispaltig. */
  /* Keine eigene Karte mehr: die Liste sitzt auf einer Kachel, und zwei
     Flaechen uebereinander waren eine zu viel. */
  .erbe .honorar { margin: 0; }
  .erbe .honorar > div:first-child { border-top: none; padding-top: 0; }
  .erbe .honorar > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--beige-dark);
    padding: clamp(20px, 2.2vw, 28px) 0;
  }
  /* Einspaltig: Die Liste sitzt in einer Karte, die nur rund 750px breit
     ist. Mit einer 240px-Beschriftungsspalte blieben fuer den Text 350px —
     drei Woerter je Zeile. Bezeichnung ueber Beschreibung liest sich dort
     besser als nebeneinander. */
  .erbe .honorar dt {
    font-size: var(--fs-h3);
    line-height: 1.25;
    color: var(--black);
    margin-bottom: 6px;
  }
  .erbe .honorar dd {
    font-size: var(--fs-text);
    line-height: 1.6;
    color: var(--gray-dark);
    max-width: 52ch;
  }
  .erbe .honorar .betrag { color: var(--black); font-weight: 600; }

  /* Knopfreihe unter der obenliegenden Karte: dritte Rasterzelle, aber
     ausdruecklich in Spalte 2 — sonst setzt die automatische Verteilung sie
     links unter die Preisliste. Sie uebernimmt Versatz und Einzug der Karte
     darueber, damit beide auf einer Kante stehen. */
  .erbe .knopfreihe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
    margin-top: var(--fuge);
  }
  @media (min-width: 760px) {
    .erbe .kacheln--versetzt .knopfreihe {
      grid-column: 2;
      margin-left: calc(-1 * (var(--fuge) + var(--ueberlapp)));
      transform: translateY(clamp(20px, 2.6vw, 40px));
      /* Rechtsbuendig mit der Karte darueber. row-reverse statt
         justify-content: flex-end, damit der Hauptknopf ganz aussen steht und
         nicht der leise dahinter — die Reihenfolge im Markup bleibt dabei
         Haupt- vor Nebenweg, also auch fuer Tastatur und Vorlesesoftware. */
      flex-direction: row-reverse;
      justify-content: flex-start;
    }
  }
  @media (max-width: 759px) {
    .erbe .knopfreihe { flex-direction: column; align-items: stretch; gap: 12px; }
    .erbe .knopfreihe .pfeilknopf { width: 100%; justify-content: center; }
  }
  .erbe .knopfreihe .pfeilknopf { margin: 0; }

  /* Bewertungszeile: eine Zahl, eine Quelle, mehr nicht. Keine goldenen
     Sterne — Gold traegt auf diesen Seiten nur Funktion, und ein Sternenband
     waere Schmuck. Die Zahl steht fett, weil sie die Aussage ist. */
  .erbe .bewertung {
    margin-top: var(--raum-m);
    font-size: var(--fs-klein);
    color: var(--gray-dark);
    /* Fliesstext hat auf diesen Seiten einen Zeilenbreiten-Deckel. Eine
       einzelne Zeile mittig setzen heisst deshalb: Deckel weg und den
       Absatz selbst in die Spalte zentrieren, sonst steht die zentrierte
       Zeile nur in der linken Haelfte. */
    max-width: none;
    text-align: center;
  }
  .erbe .bewertung strong { color: var(--black); font-weight: 600; }
  /* Der Verweis auf das Profil muss als Verweis zu erkennen sein: die Zeile
     ist grau, und ein schwarzes Wort darin liest sich sonst nur als Betonung.
     Unterstrichen statt eingefaerbt — Gold traegt hier keine Funktion. */
  .erbe .bewertung a {
    color: var(--black);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
  }
  .erbe .bewertung a:hover,
  .erbe .bewertung a:focus-visible { color: var(--salbei); }

  /* Verweis unter einem Abschnitt, der nur einen Ausschnitt zeigt. */
  .erbe .nachsatz-link {
    margin-top: var(--raum-m);
    font-size: var(--fs-text);
  }
  .erbe .nachsatz-link a { font-weight: 600; }
  @media (max-width: 640px) {
    /* Schmal bricht der Link mitten im Satz um und zerfaellt in zwei
       Stuecke. Dann lieber eine eigene Zeile — wie bei der zweiten Tuer. */
    .erbe .nachsatz-link a { display: block; margin-top: 6px; }
  }


  /* ---------- Grosse Kacheln (2x2) ----------
     Vorbild Root Financial: wenige, grosse Felder statt vieler kleiner
     Karten. Kein Rahmen, kein Schatten, grosser Radius — die Flaeche selbst
     traegt. Drei Sorten, damit die Reihe nicht aus vier gleichen besteht:
     eine gefuellte mit grosser Schrift, ein randloses Bild, ruhige Felder. */
  .erbe .kacheln {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fuge);
    margin-top: var(--raum-l);
  }
  /* Zwei Raster hintereinander sind zwei Bloecke, nicht zwei Reihen: sie
     bekommen den Blockabstand. Mit einer Rasterfuge dazwischen las sich das
     obere als Ueberschrift des unteren. */
  .erbe .kacheln + .kacheln,
  .erbe .kacheln + .kette,
  .erbe .kette + .kacheln { margin-top: var(--raum-l); }
  @media (min-width: 760px) {
    .erbe .kacheln { grid-template-columns: 1fr 1fr; }
  }
  .erbe .kachel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Grosszuegig wie bei Root: dort sind die Kacheln 550 bis 1000px hoch
       und haben 100 bis 200px Innenabstand. So viel Luft traegt die Flaeche
       ohne Rahmen und ohne Schatten. */
    min-height: clamp(340px, 38vw, 560px);
    border-radius: var(--radius-panel);
    padding: clamp(32px, 4.2vw, 64px);
    overflow: hidden;
  }
  .erbe .kachel h3 {
    font-size: var(--fs-gross);
    font-weight: 500;
    line-height: 1.12;
    margin-bottom: 14px;
    text-wrap: balance;
  }
  .erbe .kachel p {
    font-size: var(--fs-text);
    line-height: 1.6;
    max-width: 34ch;
    margin-bottom: 0;
  }
  @media (max-width: 640px) {
    /* Wie bei Root: auf dem Handy schrumpfen die Radien der grossen Flaechen,
       und das Bild wandert nach vorn — gestapelt wuerde es sonst zwischen
       zwei Textbloecken verschwinden. */
    .erbe .kachel { border-radius: 15px; }
    .erbe .kachel--bild { order: -1; min-height: 260px; }
    /* Das Bild wandert nach vorn, die Titelkachel bleibt trotzdem davor —
       sonst steht das Foto ueber der Ueberschrift des Abschnitts. */
    .erbe .kachel--titel { order: -2; }
    .erbe .raster-bild { border-radius: 15px; }
  }

  /* Titelkachel: laeuft ueber beide Spalten und ersetzt die Ueberschrift
     ueber dem Raster. Flacher als die anderen, damit sie fuehrt statt zu
     konkurrieren. */
  .erbe .kachel--titel {
    grid-column: 1 / -1;
    min-height: 0;
    justify-content: center;
  }
  .erbe .kachel--titel h2 {
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 1.1;
    color: var(--black);
    margin-bottom: 16px;
    text-wrap: balance;
  }
  .erbe .kachel--titel p {
    font-size: var(--fs-text);
    line-height: 1.6;
    color: var(--gray-dark);
    max-width: 52ch;
  }

  /* Volle Breite ohne Titel-Rolle: Listen und Aussagen, die ueber beide
     Spalten laufen, aber nicht der Kopf des Rasters sind. */
  .erbe .kachel--weit { grid-column: 1 / -1; }
  /* Flach: nur so hoch wie der Inhalt. Eine Aussage in einer 560px-Flaeche
     schwimmt, eine Liste sprengt sie. */
  .erbe .kachel--flach { min-height: 0; justify-content: flex-start; }
  /* Die Ueberschrift skaliert mit der Flaeche — dieselbe Regel wie beim
     Radius. Auf einem hohen Feld traegt sie die halbe Kachel und darf 29px
     haben; auf einem flachen steht sie dicht ueber ihrem eigenen Text, dort
     sind 24px die Stufe darueber statt ein Sprung. Mehr als diese zwei
     Groessen gibt es nicht. */
  .erbe .kachel--flach h3 { font-size: var(--fs-h3); }

  /* ==========================================================
     KARTENSYSTEM — vier Ebenen, jede mit einer Aufgabe
     ==========================================================
     Die Ebene sagt, wie wichtig etwas ist. Wer alles auf Ebene 1 legt,
     bekommt eine Seite aus grauen Kaesten; wer alles auf Ebene 3 legt, hat
     keinen Akzent mehr. Deshalb die Regel:

       1  FLAECHE     .kachel
          Gruppierter Inhalt. Farbe kommt vom Abschnittsgrund (auf Creme
          liegt Beige, auf Beige liegt Weiss). Kein Rahmen, kein Schatten,
          --radius-panel, grosszuegiges Polster. Der Normalfall.

       2  KARTE       .kachel--drueber, .akk-kopf
          Ein Gegenstand, der auf der Seite liegt: dieselbe Flaeche plus
          --shadow-lift. Nur dort, wo etwas ueberlappt, anklickbar ist oder
          sich abheben soll. Der Schatten ist die einzige Tiefe im System.

       3  AKZENT      .kachel--voll
          Salbei mit leichtem Verlauf, cremefarbene Tinte. Traegt den einen
          Satz, auf den es im Abschnitt ankommt. HOECHSTENS EINER JE
          ABSCHNITT — sonst heben sie sich gegenseitig auf.

       4  BILD        .kachel--bild
          Randlos, kein Polster, kein Text darauf.

     Innen gilt in jeder Ebene dieselbe Leiter:
       .kachel-nr    15px  Gold      Marke, wo eine Reihenfolge existiert
       h3            24px  flach / 29px auf hohen Feldern
       p             18px
       .pointe       18px  fett      der Satz, der haengen bleibt
     ========================================================== */

  /* ---------- Flaeche einer Kachel ----------
     Die Flaeche haengt am Grund des Abschnitts, nicht an einer Klasse je
     Kachel. Vorher konnte jede Kachel creme, beige oder weiss sein; in einem
     Abschnitt standen bis zu fuenf Toene nebeneinander, und der Grund, auf
     dem sie liegen, war nicht mehr zu erkennen. Jetzt gilt: auf Creme liegt
     Beige, auf Beige liegt Weiss. Zwei Ausnahmen — die gefuellte Kachel
     (hoechstens eine je Abschnitt) und das randlose Bild. */
  .erbe .kachel { background-color: var(--beige-light); }
  .erbe section.beige .kachel { background-color: var(--white); }
  .erbe .kachel h3 { color: var(--black); }
  .erbe .kachel p { color: var(--gray-dark); }

  /* Ueber die volle Breite darf der Text auch breit laufen — 34ch auf einer
     1100px-Flaeche ergibt eine schmale Saeule mit viel Leere daneben. */
  .erbe .kachel--weit p { max-width: 62ch; }
  /* Die verdeckte Karte ist die breite der beiden — 34ch waeren dort eine
     schmale Saeule mit viel Leere daneben. */
  .erbe .kachel--unten p { max-width: 48ch; }
  /* Zwei Absaetze in einer Kachel brauchen eine Fuge — die Grundregel setzt
     margin-bottom:0, damit der letzte buendig auf der Kante sitzt. */
  .erbe .kachel p + p { margin-top: 14px; }

  /* Aussage: ein Satz, gross gesetzt, ohne Ueberschrift darueber. Ersetzt
     die frueheren freistehenden Zitatkarten. */
  .erbe .kachel--aussage p {
    font-size: var(--fs-gross);
    line-height: 1.3;
    color: var(--black);
    max-width: 30ch;
    text-wrap: balance;
  }
  .erbe .kachel--aussage.kachel--voll p,
  .erbe .kachel--aussage.kachel--voll blockquote { color: rgba(253,251,249,.86); }
  /* Der Schlusssatz ist die Kernaussage. Abgesetzt und schwerer gesetzt,
     damit er nicht als vierte Zeile eines Absatzes untergeht — der Absatz
     davor wird dafuer etwas leiser. */
  .erbe .kachel--aussage .pointe { font-weight: 600; margin-top: 18px; }
  /* Auf hellen Aussage-Kacheln tritt der Absatz vor der Pointe zurueck — auf
     der gefuellten macht das die Regel darueber. Ausdruecklich ohne --voll,
     sonst gewinnt diese Regel dort ueber die Cremetinte. */
  .erbe .kachel--aussage:not(.kachel--voll) p,
  .erbe .kachel--aussage:not(.kachel--voll) blockquote { color: var(--gray-dark); }
  .erbe .kachel--aussage:not(.kachel--voll) .pointe { color: var(--black); }
  .erbe .kachel--aussage.kachel--voll .pointe { color: var(--cream); }
  /* Ueber die volle Breite darf auch die Aussage laenger laufen; 30ch waeren
     dort vier kurze Zeilen mit halbleerer Flaeche daneben. */
  .erbe .kachel--aussage.kachel--weit p { max-width: 52ch; }

  /* ---------- Kacheln, die sich ueberlappen ----------
     Zwei Karten gehoeren zusammen: statt eines Zeichens dazwischen legt sich
     die zweite ein Stueck auf die erste. Die Ueberlappung selbst ist die
     Aussage. Die obere braucht dafuer einen Schatten — ohne ihn sieht es
     nach einem Rechenfehler im Raster aus und nicht nach Absicht.
     Die untere bekommt an der ueberdeckten Seite so viel Polster dazu, wie
     verdeckt wird, damit kein Text darunter verschwindet. */
  .erbe .kacheln { --ueberlapp: clamp(28px, 3.4vw, 56px); }
  .erbe .kachel--drueber {
    position: relative;
    z-index: 2;
    box-shadow: var(--shadow-lift);
  }
  @media (min-width: 760px) {
    /* Ungleiche Spalten fuer das versetzte Paar: links steht Fliesstext, der
       Platz braucht, rechts vier kurze Fragen. Bei 1fr/1fr stand rechts eine
       halbe Kartenbreite leer. Gilt nur fuer dieses Raster — die Kacheln, die
       ueber beide Spalten laufen, merken davon nichts. */
    .erbe .kacheln--versetzt { grid-template-columns: 1.15fr .85fr; }
    .erbe .kachel--drueber {
      margin-left: calc(-1 * (var(--fuge) + var(--ueberlapp)));
      /* Zusaetzlich nach unten versetzt: buendig oben und unten liesen sich
         die beiden als eine geteilte Flaeche. Erst der Versatz zeigt, dass
         hier zwei Karten liegen, eine auf der anderen. Ueber transform,
         damit die Zeilenhoehe des Rasters gleich bleibt. */
      transform: translateY(clamp(20px, 2.6vw, 40px));
    }
    .erbe .kachel--unten { padding-right: calc(clamp(32px, 4.2vw, 64px) + var(--ueberlapp)); }
  }
  /* Erst wenn genug Breite da ist, darf die rechte Spalte richtig schmal
     werden — darunter braechen die Fragen zweizeilig um, und eine
     umbrechende Frage liest sich als Absatz statt als Zeile. */
  @media (min-width: 1200px) {
    .erbe .kacheln--versetzt { grid-template-columns: 1.3fr .7fr; }
  }
  @media (max-width: 759px) {
    /* Einspaltig liegt die obere Karte nicht links, sondern oben auf. */
    .erbe .kachel--drueber { margin-top: calc(-1 * (var(--fuge) + var(--ueberlapp))); }
    .erbe .kachel--unten { padding-bottom: calc(clamp(32px, 4.2vw, 64px) + var(--ueberlapp)); }
  }

  /* ---------- Kette: Karten, die treppenartig aufeinander liegen ----------
     Weiterfuehrung des Ueberlappungs-Musters auf mehr als zwei Felder. Jede
     Karte greift auf die vorherige und sitzt ein Stueck tiefer. Der Versatz
     macht aus drei gleichrangigen Feldern eine Reihenfolge — und weil sie
     sich beruehren, liest man sie als einen Zusammenhang.
     Einspaltig faellt beides weg: eine halb ueberdeckte Karte auf 375px
     sieht nach Fehler aus. */
  .erbe .kette {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fuge);
    margin-top: var(--fuge);
  }
  @media (min-width: 900px) {
    .erbe .kette {
      grid-template-columns: repeat(3, 1fr);
      /* Der Versatz kommt aus transform und zaehlt fuer das Layout nicht mit:
         die dritte Karte haengt zwei Stufen tiefer, als ihr Kasten reicht.
         Der Platz dafuer muss also dazu — plus die normale Fuge, sonst klebt
         der naechste Block an der verschobenen Karte. */
      margin-bottom: calc(2 * var(--stufe) + var(--fuge));
      --stufe: clamp(18px, 2vw, 32px);
    }
    .erbe .kette > .kachel { position: relative; }
    .erbe .kette > .kachel:nth-child(2) {
      z-index: 2;
      margin-left: calc(-1 * (var(--fuge) + var(--ueberlapp-kette)));
      transform: translateY(var(--stufe));
      box-shadow: var(--shadow-lift);
    }
    .erbe .kette > .kachel:nth-child(3) {
      z-index: 3;
      margin-left: calc(-1 * (var(--fuge) + var(--ueberlapp-kette)));
      transform: translateY(calc(2 * var(--stufe)));
      box-shadow: var(--shadow-lift);
    }
    /* Schmaler als beim Paar: bei drei Karten summieren sich die
       Ueberlappungen, sonst frisst die letzte die erste auf. */
    .erbe .kette { --ueberlapp-kette: clamp(20px, 2.2vw, 36px); }
    /* Die verdeckte Seite braucht Polster, damit kein Text darunter liegt. */
    .erbe .kette > .kachel:nth-child(1),
    .erbe .kette > .kachel:nth-child(2) {
      padding-right: calc(clamp(32px, 4.2vw, 64px) + var(--ueberlapp-kette));
    }
  }

  /* Erste Zeile einer Listen-Kachel: fuehrt, ohne Ueberschrift zu sein. */
  /* Dieselbe Groesse wie die Aussage-Kachel: beide sind ein herausgehobener
     Satz auf voller Breite und standen direkt untereinander — zwei Groessen
     fuer dieselbe Rolle liest sich als Versehen. */
  .erbe .kachel p.kachel-lead {
    font-size: var(--fs-gross);
    line-height: 1.35;
    color: var(--black);
    max-width: 44ch;
    margin-bottom: 0;
    text-wrap: balance;
  }
  .erbe .kachel p.kachel-schluss {
    font-size: var(--fs-text);
    line-height: 1.6;
    color: var(--gray-dark);
    max-width: 58ch;
    margin-bottom: 0;
  }
  .erbe .kachel .rasterliste { margin: clamp(22px, 2.6vw, 34px) 0; }

  /* Reihenfolge-Marke im Kopf einer Ablauf-Kachel. Keine Ziffern: Cormorant
     setzt die 1 als Versalziffer, die auf der Flaeche wie ein grosses I
     aussieht — die Reihenfolge war damit eher verschleiert als gesagt. Ein
     Wort sagt dasselbe und liest sich, wie man es sprechen wuerde.
     Sie sitzt oben, der Text unten; dazwischen schiebt margin-bottom:auto die
     Flaeche auseinander. */
  .erbe .kachel-nr {
    display: block;
    font-size: var(--fs-klein);
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.2;
    margin-bottom: auto;
    padding-bottom: 20px;
  }
  .erbe .kachel-nr { color: var(--gold-dark); }
  .erbe .kachel--voll .kachel-nr { color: rgba(253,251,249,.72); }

  /* Gefuellt: Salbei, cremefarbene Tinte. Traegt die staerkste Aussage,
     hoechstens eine je Abschnitt. Kontrast Creme auf #5E6E54: 5,3:1.
     Der Abschnittsgrund-Selektor oben ist spezifischer als eine Klasse
     allein — deshalb hier dieselbe Tiefe, sonst gewinnt Weiss auf Beige. */
  .erbe section .kachel--voll,
  .erbe section.beige .kachel--voll {
    background-color: var(--salbei);
    /* Ein leichter Verlauf gibt der Flaeche Tiefe, ohne dass sie nach
       Farbverlauf aussieht: 7 Stufen dunkler von links oben nach rechts
       unten, wie Licht von schraeg oben. Bewusst nur dunkler und nie heller
       — nach oben hin faellt der Kontrast der cremefarbenen Schrift unter den
       Wert, den grosse Schrift braucht. So wird er nur besser:
       Creme auf #5E6E54 5,3:1, auf #576650 6,0:1. */
    background-image: linear-gradient(118deg, var(--salbei) 0%, #576650 100%);
  }
  .erbe .kachel--voll h3 { color: var(--cream); }
  .erbe .kachel--voll p { color: rgba(253,251,249,.86); }
  /* Bild: randlos, kein Text darauf. Absolut gesetzt, damit die Kachelhoehe
     vom Raster kommt und nicht vom Seitenverhaeltnis der Datei — sonst zieht
     ein hochkantes Foto die ganze Reihe in die Laenge. */
  .erbe .kachel--bild { padding: 0; position: relative; }
  /* Bildband ueber die volle Breite. Eine Bildkachel bezieht ihre Hoehe
     sonst vom Textnachbarn in derselben Zeile — steht sie allein, braucht
     sie eine eigene. Neben den Text gestellt kostet sie mehr, weil der
     Text dann auf halber Breite doppelt so oft umbricht. */
  .erbe .kachel--band {
    grid-column: 1 / -1;
    min-height: clamp(220px, 24vw, 360px);
  }
  .erbe .kachel--bild img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Rolle unter dem Namen. Kein Eyebrow ueber der Ueberschrift — sie steht
     darunter, weil sie den Namen erklaert und nicht ankuendigt. */
  .erbe .kachel-rolle {
    font-size: var(--fs-klein);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gray-mid);
    margin: -6px 0 14px;
  }
  .erbe .kachel--voll .kachel-rolle { color: rgba(253,251,249,.66); }

  /* Paare aus Bild und Text: hier gehoert jedes Bild zu genau einer
     Textkachel. Der Griff, alle Bilder auf dem Handy nach vorn zu ziehen,
     wuerde die Zuordnung zerreissen. */
  @media (max-width: 640px) {
    .erbe .kacheln--paare .kachel--bild { order: 0; min-height: 300px; }
  }
  /* Bei Bild und Text liegt die Textkarte nicht buendig auf dem Portraet,
     sondern steht kuerzer und mittig darin — sonst sind es zwei gleich hohe
     Flaechen nebeneinander und die Ueberlappung faellt gar nicht auf. Also
     keine Streckung und kein Versatz nach unten, sondern zentriert. */
  @media (min-width: 760px) {
    /* Das Portraet bestimmt die Reihenhoehe und ist dafuer hoeher als eine
       normale Kachel — sonst ist die Textkarte genauso hoch wie es und liegt
       buendig darauf statt darin. */
    .erbe .kacheln--paare .kachel--bild { min-height: clamp(420px, 47vw, 700px); }
    .erbe .kacheln--paare .kachel--drueber {
      align-self: center;
      transform: none;
      padding-top: clamp(28px, 3.4vw, 48px);
      padding-bottom: clamp(28px, 3.4vw, 48px);
    }
  }

  /* ---------- Aufklapper in den Fragenbloecken ----------
     Auf dem Handy steht je Gruppe nur die erste Frage. Der Knopf sagt, wie
     viele noch kommen — sonst sieht die Karte fertig aus und niemand tippt.
     Sichtbar wird er erst, wenn erbe.js ihn scharf gestellt hat (data-an);
     ohne JavaScript stehen alle Fragen offen und der Knopf bleibt weg. */
  .erbe .fragen-mehr {
    display: none;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin-top: 6px;
    padding: 12px 0 0;
    background: none;
    border: none;
    border-top: 1px solid var(--beige-dark);
    border-radius: 0;
    font-size: var(--fs-klein);
    font-weight: 600;
    color: var(--gold-dark);
    text-align: left;
  }
  .erbe .fragen-mehr:hover { background: none; box-shadow: none; color: var(--black); }
  .erbe .fragen-mehr[data-an] { display: flex; }
  .erbe .fragen-mehr svg {
    width: 15px; height: 15px; flex: none;
    transition: transform var(--transition-base);
  }
  .erbe .fragen-mehr[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* Die nachgeschobenen Fragen. Eingeklappt wird erst, wenn erbe.js die
     Klasse setzt — ohne Skript steht alles offen da. */
  .erbe .fragen-rest { list-style: none; }
  .erbe .fragen-rest.klappt {
    overflow: hidden;
    max-height: 0;
    transition: max-height 340ms cubic-bezier(.4, 0, .2, 1);
  }
  /* Zwischen den beiden Listen darf keine Linie fehlen: die letzte Frage der
     ersten Liste haette sonst keine Unterkante, obwohl darunter weitergeht. */
  .erbe .raster-gruppe ul:has(+ .fragen-rest) li:last-child {
    border-bottom: 1px solid rgba(43,43,43,.10);
    padding-bottom: 13px;
  }
  @media (prefers-reduced-motion: reduce) {
    .erbe .fragen-rest.klappt { transition: none; }
  }

  /* ---------- Anmeldung: Text links neben dem Kopf ---------- */
  .erbe .anmeldung .inner {
    max-width: 780px;
    margin: 0;
    padding: 0;
  }
  /* .57 statt .55: auf der Portraetflaeche #3B404C ergibt das 4,52:1
     statt 4,31 — der Unterschied ist unsichtbar, der Wert zaehlt. */
  .erbe .anmeldung .formhinweis { color: rgba(253,251,249,.57); }
  .erbe .anmeldung .formhinweis a { color: rgba(253,251,249,.85); }
  .erbe .anmeldung input[type="email"] { border-color: rgba(253,251,249,.35); }
  .erbe .anmeldung .formmeldung.gut { color: var(--cream); }
  .erbe .anmeldung .formmeldung.schlecht { color: var(--gold-light); }
  /* Auf dem dunklen Grund kehrt sich der Knopf um: Creme wird zur Flaeche. */
  .erbe .anmeldung .pfeilknopf--dunkel {
    background-color: var(--cream);
    color: var(--black);
  }
  .erbe .anmeldung .pfeilknopf--dunkel .pfeilknopf-icon {
    background-color: var(--black);
    color: var(--cream);
  }
  .erbe .anmeldung .pfeilknopf--dunkel:hover {
    background-color: transparent;
    color: var(--cream);
    box-shadow: inset 0 0 0 1px var(--cream);
  }
  .erbe .anmeldung .pfeilknopf--dunkel:hover .pfeilknopf-icon {
    background-color: var(--cream);
    color: var(--black);
  }
  @media (max-width: 900px) {
    .erbe .anmeldung .inner { max-width: none; }
  }

  /* ---------- Fuß: drei Spalten ---------- */
  .erbe .fuss-raster {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 44px;
  }
  @media (min-width: 760px) {
    .erbe .fuss-raster { grid-template-columns: 2fr 1fr 1.4fr; gap: 56px; }
  }
  .erbe .fuss-marke img { height: 56px; width: auto; margin-bottom: 22px; }
  .erbe .fuss-slogan {
    font-size: var(--fs-h3); color: var(--black); margin-bottom: 10px;
  }
  .erbe .fuss-spalte h3 {
    font-family: 'Manrope', sans-serif;
    font-size: var(--fs-micro); font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    /* Nicht --gray-mid: auf Beige kommt das nur auf 3,4:1, und die Zeile ist
       klein und gesperrt — also die dunklere Stufe. */
    color: var(--gray-dark);
    margin-bottom: 14px;
  }
  .erbe .fuss-spalte ul { list-style: none; }
  /* Kontaktzeilen mit Symbol — dieselben wie auf der Hauptseite, dort in Gold
     auf Dunkel. Hier in Schwarz: Gold auf Beige kaeme nur auf 2,95:1 und
     bliebe unter der 3:1-Schwelle fuer Grafiken. */
  .erbe .fuss-kontaktliste li {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 10px;
    align-items: start;
  }
  .erbe .fuss-kontaktliste img {
    display: block;
    /* Auf die Mitte der ersten Zeile setzen, nicht auf deren Oberkante. */
    margin-top: .28em;
    opacity: .75;
  }
  .erbe .fuss-spalte li { margin-bottom: 9px; line-height: 1.5; }

  /* ---------- Hero-Überschrift: Zeilenführung aus dem Markup ---------- */
  .erbe .erbe-hero h1 span { display: block; }
  .erbe .erbe-hero h1 span + span { margin-top: .38em; }
  .erbe .erbe-hero .versprechen {
    font-size: var(--fs-h3);
    line-height: 1.35;
  }

  /* Fuß bricht schon auf dem Tablet um, sonst stehen 20-Zeichen-Zeilen */
  @media (min-width: 760px) and (max-width: 1023px) {
    .erbe .fuss-raster { grid-template-columns: 1fr 1fr; }
    .erbe .fuss-marke { grid-column: 1 / -1; }
  }

  /* Display-Schrift darf mobil kleiner werden, sonst stehen Einzelwörter */
  @media (max-width: 480px) {
    .erbe h1 { font-size: var(--fs-h1); }
    /* 46px Logo sind 250px breit — zusammen mit dem 44px-Knopf bleibt auf
       360px kein Spielraum. 40px sind 218px breit und lassen ihn stehen. */
    .erbe .kopf-logo img { height: 40px; }
  }

  /* ---------- Umbruch auf Handy und Tablet ----------
     Schmale Spalten lassen sonst ein einzelnes Wort auf der letzten Zeile
     stehen. balance verteilt die Zeilen gleichmaessig, statt den Rest
     hinunterzuschieben. Ab 1025px bleibt alles wie am Desktop. */
  @media (max-width: 1024px) {
    .erbe .raster-gruppe li,
    .erbe .karte h3,
    .erbe .pfeilknopf-text,
    .erbe .merkmale li,
    .erbe .erbe-hero .versprechen,
    .erbe .fuss-slogan { text-wrap: balance; }
  }

  /* ---------- Fingerziele auf Geraeten ohne Mauszeiger ----------
     An den Zeiger gebunden statt an die Breite: ein iPad im Querformat ist
     1112px breit und braucht die Flaechen trotzdem, ein Desktopfenster
     derselben Breite nicht. */
  @media (pointer: coarse) {
    .erbe .kopf-logo { display: flex; align-items: center; min-height: 44px; }
    .erbe .menue nav a { padding: 3px 0; }
    .erbe .fuss-spalte ul li { margin-bottom: 0; }
    .erbe .fuss-spalte ul a { display: block; padding: 12px 0; }
    /* Das Symbol steht in einer eigenen Rasterspalte und muss dieselbe
       Verschiebung mitmachen wie die Zeile daneben. */
    .erbe .fuss-kontaktliste img { margin-top: calc(12px + .28em); }
    .erbe .fuss-kontaktliste li:last-child span { display: block; padding: 12px 0; }
    /* Negative Aussenabstaende: die Flaeche waechst, die Zeilenhoehe nicht. */
    .erbe .fuss-unten a { display: inline-block; padding: 12px 6px; margin: -12px 0; }
  }

  /* ---------- Porträt in der Anmeldekarte ---------- */
  .erbe .anmeldung .portraet {
    width: 96px; height: 96px;
    object-fit: cover; object-position: center 20%;
    border-radius: 50%;
    display: block;
    margin-bottom: 24px;
  }

  /* ---------- Bildbänder ---------- */
  .erbe .seitenbild { margin: 0; }
  .erbe .seitenbild img {
    width: 100%; height: auto; display: block;
    aspect-ratio: 21 / 9; object-fit: cover;
  }
  .erbe .seitenbild.schmal img { aspect-ratio: 32 / 9; }
  /* Muss hinter '.erbe .seitenbild { margin: 0 }' stehen, sonst gewinnt die
     allgemeine Regel und das Band klebt an den Karten. */
  /* Randloses Band als Taktgeber zwischen zwei Abschnitten. Nie innerhalb
     eines Abschnitts, nie mit Text darauf, hoechstens zwei pro Seite — so
     hat es Root, und so wirkt es als Atempause statt als Dekor.
     Kein eigener Abstand: die Polster der Abschnitte davor und danach
     machen die Luft. */
  .erbe .seitenbild.band-zwischen { margin: 0; }

  @media (max-width: 640px) {
    .erbe .seitenbild img { aspect-ratio: 16 / 10; }
    .erbe .seitenbild.schmal img { aspect-ratio: 16 / 9; }
  }