/* ============================================================
   STARTSEITE — „LEBENSWERK"

   Struktur: an Aroundhome orientiert (Gewerkleiste, Rechner im
   Hero, Drei-Schritte, Gründe, Themenwelten, Fachbeiträge mit
   Branchenfilter, CTA-Wiederholung, Partnerakquise).

   Bildsprache: an den drei Dribbble-Referenzen orientiert —
   Elfenbein-Grund, Waldgrün, gedecktes Gold, Serifen-Display,
   organische Formen, runde Piktogrammplaketten.

   Leitmotiv: Baum und Jahresringe für das Lebenswerk. Die Ringe
   sind nicht Dekoration, sie tragen die Werttreiber.
   ============================================================ */

:root{
  --ivory:#F7F3EC;      /* Grund */
  --ivory-2:#EFEAE0;    /* zweite Fläche */
  --paper:#FFFFFF;
  --forest:#1E4436;     /* Hauptfarbe */
  --forest-2:#2C6349;   /* helleres Grün für Flächen */
  --leaf:#3C8460;       /* Akzentgrün in Grafiken */
  --gold:#E3C489;       /* Akzentfläche */
  --gold-ink:#7A5A18;   /* Gold als Textfarbe auf Hell */
  --gold-dark:#D7B26A;
  --ink:#1A1D1A;
  --mut:#5E635C;
  --line:#DED7C9;
  --shadow:0 1px 2px #1a1d1a0d,0 14px 34px #1a1d1a0f;
  /* Eine Höhe für alle einzeiligen Bedienelemente: Auswahlfeld, Eingabe,
     Knopf daneben. Vorher rechnete sich jedes seine Höhe aus Polster und
     Zeilenhöhe selbst zusammen — in der Angebotsleiste stand ein 46 px
     hoher Knopf neben 51,1 px hohen Feldern. */
  --feld:50px;

  /* Displayleiter. Drei Stufen, eine je Rang der Seite. Vorher standen
     vier Deklarationen mit vier verschiedenen Tripeln aus Minimum,
     Steigung und Maximum im Blatt — 62 / 50 / 50 / 48 px, also drei
     Werte, die sich am Schreibtisch um zwei Pixel unterschieden, bei
     drei verschiedenen vw-Steigungen, die sich unterwegs kreuzten.
     Niemand hatte das so entschieden, es war gewachsen.

     D1 trägt die Bühne, D2 den Einstieg in einen Bereich, D3 die
     Arbeitsseite, auf der unter der Überschrift sofort etwas zu tun
     ist: Rechner, Artikel, Einzelseite. Die Abschnittsüberschrift
     h2.big liegt eine Stufe darunter. */
  --h1-buehne:clamp(34px,5vw,62px);   /* Startseite, 1 Seite */
  --h1-kopf:clamp(30px,4.1vw,50px);   /* Bereichseinstiege, 31 Seiten */
  --h1-seite:clamp(27px,3.4vw,42px);  /* Arbeitsseiten, 72 Seiten */

  /* Eine Abschnittsüberschrift. Vorher vier: h2.big mit 46 px in vollen
     Abschnitten, .fach h2 mit 33 im Textkasten, .artikel h2 mit 31 im
     Artikel, .kgrp h2 mit 33 auf der Komponentenseite. Drei davon lagen
     innerhalb von zwei Pixeln beieinander und standen auf denselben
     Seiten. */
  --h2-abschnitt:clamp(24px,2.8vw,33px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;margin:0;line-height:1.1;letter-spacing:-.015em;font-weight:600}
img,svg{max-width:100%}
.in{max-width:1200px;margin:0 auto;padding:0 28px}
section{padding:88px 0}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:18px}
.eyebrow i{width:20px;height:20px;border-radius:50%;background:var(--gold);flex:none;
  display:flex;align-items:center;justify-content:center}
.eyebrow i svg{width:11px;height:11px;color:var(--forest)}
h2.big{font-size:var(--h2-abschnitt);max-width:26ch;text-wrap:balance}
.lede{font-size:18.5px;color:var(--mut);max-width:62ch;margin:16px 0 0}

/* ---------- Hinweisleiste des Entwurfs (nicht Teil der Seite) ---------- */
#draftbar{background:var(--ink);color:#fff;font-size:12.5px;line-height:1.5;padding:8px 28px;text-align:center}
#draftbar b{color:var(--gold)}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Inter',sans-serif;font-size:15.5px;
  font-weight:600;padding:14px 24px;border-radius:10px;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn svg{width:15px;height:15px;flex:none}
.btn.gold{background:var(--gold);color:#2A1F06;border-color:var(--gold)}
.btn.gold:hover{background:var(--gold-dark)}
.btn.green{background:var(--forest);color:#fff}
.btn.green:hover{background:var(--forest-2)}
.btn.ghost{background:transparent;color:var(--forest);border-color:#B9C6BD}
.btn.ghost:hover{background:#EAF0EB}

/* ---------- Formularfelder ----------
   Eine Definition für alle einzeiligen Felder. Vorher stand dieselbe
   Angabe dreimal im Blatt — im Hero-Rechner mit 15,5 px, im
   Angebotsfilter mit 15,5 px, im Kontaktformular des Rechners mit
   16 px — und lief auseinander: der eigene Auswahlpfeil war nur für
   die ersten beiden gesetzt, im Rechnerformular stand der Pfeil des
   Betriebssystems.

   16 px ist Untergrenze, nicht Geschmack: Safari auf dem iPhone zoomt
   die Seite, sobald ein Feld mit kleinerer Schrift den Fokus bekommt.
   Dieselbe Begründung steht bei .uwfeld input. */
.feld,
.calc select,.filterbar select,.rf input,.rf select{
  font:inherit;font-size:16px;height:var(--feld);padding:0 14px;
  border:1px solid #C9C2B3;border-radius:10px;
  background:var(--paper);color:var(--ink)}
.feld:focus,
.calc select:focus,.filterbar select:focus,
.rf input:focus,.rf select:focus{
  outline:2px solid var(--forest);outline-offset:1px;border-color:var(--forest)}

/* Der eigene Auswahlpfeil. Der native klebte am rechten Rand und passte
   weder zur Schrift noch zu den Farben. */
select.feld,.calc select,.filterbar select,.rf select{
  -webkit-appearance:none;appearance:none;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E635C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px}
select.feld::-ms-expand,.calc select::-ms-expand,
.filterbar select::-ms-expand,.rf select::-ms-expand{display:none}

/* ---------- Karte mit Fuß ----------
   Kacheln in einer Reihe sind gleich hoch, ihr Inhalt ist es nicht.
   Ohne diese Regel richtet sich die Fußzeile — Lesedauer, Abzeichen,
   Weiterlink — nach dem Text darüber aus und steht über die Reihe
   hinweg auf vier verschiedenen Höhen. Die Trennlinie zwischen Inhalt
   und Fuß ist dann nicht mehr als Linie zu erkennen.

   Regel: Die Karte ist eine Spalte, das letzte Element bekommt den
   ganzen Rest. Wer eine neue Kachel baut, trägt sie hier ein. */
.stufe,.br,.phase,.art2,.kpf,.gegen>div,.zband div{display:flex;flex-direction:column}
.stufe .tag,.br .go,.phase .dauer,.art2 .fak,.gegen .fuss,.zband i,
.ang .fuss,.uwk .go,.uwk .bald,.st2 .go,.ktyp .go,.wege .fuer{margin-top:auto}

/* ---------- Kachel mit gekoppelten Zeilen ----------
   Der andere Fall: Die Kachel hat keine Fußzeile, sondern zwei oder drei
   Zeilen, die über die Reihe hinweg auf derselben Linie beginnen sollen —
   Zeichen, Titel, Beschreibung. Hier hilft margin-top:auto nicht, denn es
   schiebt nach unten statt auszurichten. Subgrid reicht die Zeilenhöhen
   der Reihe an die einzelne Kachel durch.

   Eingetragen sind .rkachel und .wahl (drei Zeilen, weiter unten) sowie
   die zweizeiligen Kacheln im Block am Dateiende.

   Die Regeln stehen am Ende des Blattes, nicht hier: `.quer a` und
   `.andgrid a` setzen weiter unten `display:block`, bei gleicher
   Spezifität. An dieser Stelle verlor das Subgrid gegen sie und war
   wirkungslos, ohne dass etwas fehlschlug. Aufgefallen erst, als die
   Umstellung auf bereinigtes EBITDA die Bewertungsbasis mancher
   Branchen zweizeilig machte. */

/* ---------- Kopf ---------- */
header{background:var(--ivory);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
/* padding-top/-bottom einzeln, nicht als Kurzform: Der Kopfbalken trägt
   zugleich die Klasse .in und bekommt sein seitliches Polster von dort.
   Eine Kurzform mit „0" setzte es auf jeder Breite zurück, wodurch
   Wortmarke und Knopf am Bildschirmrand klebten. */
header .top{display:flex;align-items:center;gap:34px;padding-top:15px;padding-bottom:15px}
.wm{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-size:20px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.wm .mark{width:32px;height:32px;flex:none}
.wm span{color:var(--mut);font-weight:400}
header nav{display:flex;gap:26px;font-size:15.5px;color:var(--mut);margin-left:auto}
/* Kein Umbruch in der Navigation: Seit der Knopf daneben „Unternehmenswert
   berechnen" heißt, stand „Über uns" bei 1280 px zweizeilig und der Kopf
   war 80 px hoch statt 75. */
header nav a{white-space:nowrap}
header nav a:hover{color:var(--forest)}
header .hcta{display:flex;gap:10px}
header .hcta .btn{padding:10px 18px;font-size:14.5px}
@media (max-width:1140px){header .top{gap:20px}header nav{gap:18px;font-size:14.5px}
  header .hcta .btn{padding:10px 14px;font-size:14.5px}}
@media (max-width:980px){header nav{display:none}header .hcta{margin-left:auto}}
@media (max-width:620px){header .top{gap:14px}.wm{font-size:17px}.wm .mark{width:28px;height:28px}
  header .hcta .btn.ghost{display:none}header .hcta .btn{padding:9px 14px;font-size:14.5px}}

/* Wortmarke und Knopfbeschriftung auf schmalen Schirmen.

   Gemessen, nicht geschätzt. Bei 375 px bleiben für den Kopf 335 px.
   Bildmarke und Name brauchen zusammen 270 px, der Knopf
   „Unternehmenswert berechnen" 244 px. Beides passt nicht, auch dann
   nicht, wenn der Name auf 11 px schrumpft — er misst dort immer noch
   182 px. Vorher brachen beide um: Der Kopf war 89 px hoch statt 74, und
   der Name stand zweizeilig mit einem Umbruch am Bindestrich.

   Die Schwelle liegt bei 721 px, nicht tiefer. Zwischen 540 und 620 px
   passte der Name zwar, ab 621 kommt aber „Anmelden" dazu und die
   Wortmarke wächst von 17 auf 20 px — dort reicht es bis 700 px wieder
   nicht. Ein Band, in dem der Name auftaucht, verschwindet und wieder
   auftaucht, ist schlechter als eine Schwelle.

   Darunter bleibt die Bildmarke allein. Sie ist als Marke gezeichnet und
   trägt für sich; der Name steht weiterhin im Seitentitel, in der
   Brotkrume und im Fuß. Der Knopf behält dafür seine Beschriftung — er
   ist auf jeder Seite der Weg ins Produkt, die Wortmarke ist es nicht.

   Sobald nachfolger.de dazukommt, misst der Name rund 90 px statt 232.
   Dann kann die Schwelle deutlich sinken oder ganz entfallen. */
@media (max-width:720px){
  header .wm .nm,header .wm span{display:none}
  header .wm .mark{margin-right:0}
  header .top{gap:12px}
}
/* Der Knopf verliert dabei sein Verb. Gemessen würde „Unternehmenswert
   berechnen" bis hinunter zu 320 px in eine Zeile passen, sobald der Name
   daneben entfällt — die Kürzung ist also keine Platzfrage, sondern eine
   Entscheidung: Im kompakten Kopf steht neben der Bildmarke ein Wort, und
   es ist das Wort, unter dem gesucht wird. Dieselbe Schwelle wie oben,
   damit der Kopf eine Form hat und nicht zwei. */
@media (max-width:720px){
  header .hcta .btn.green .vb{display:none}
}

/* ---------- Gewerkleiste ---------- */
.gewerke{background:var(--paper);border-bottom:1px solid var(--line)}
.gewerke .in{position:relative}
/* Auslaufender rechter Rand: Er zeigt, dass die Leiste weitergeht.

   Vorher lag darüber eine Fläche mit einem Verlauf nach #FFFFFF, also
   eine zweite Stelle, an der die Hintergrundfarbe der Leiste stand.
   Als die erste einmal verloren ging, blendete der Verlauf ins Weiße,
   während die Leiste auf Elfenbein lag — eine helle Schliere am Rand.

   Jetzt blendet die Leiste sich selbst aus, statt etwas darüberzulegen.
   Eine Maske kennt keine Farbe und kann deshalb nicht von der Fläche
   darunter abweichen, egal welchen Grund die Leiste bekommt. */
.gewerke .rail{display:flex;gap:6px;overflow-x:auto;padding:12px 0;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),#0000);
          mask-image:linear-gradient(90deg,#000 calc(100% - 56px),#0000)}
.gewerke .rail::-webkit-scrollbar{display:none}
.gewerke a{flex:none;width:104px;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:10px 6px;border-radius:12px;text-align:center;font-size:12.5px;line-height:1.3;color:var(--mut)}
.gewerke a:hover{background:var(--ivory);color:var(--forest)}
.gewerke a svg{width:24px;height:24px;color:var(--forest)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:76px 0 84px}
.hero .blob{position:absolute;border-radius:50%;pointer-events:none}
.hero .b1{width:760px;height:700px;background:#FFFFFF9E;right:-180px;top:-220px;
  border-radius:48% 52% 44% 56%/52% 44% 56% 48%}
.hero .b2{width:420px;height:380px;background:#EAE3D5A6;left:-160px;bottom:-150px;
  border-radius:54% 46% 58% 42%/46% 56% 44% 54%}
.hero .grid{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:52px;align-items:center}
.hero h1{font-size:var(--h1-buehne);line-height:1.04;letter-spacing:-.028em;max-width:15ch}
.hero .lede{font-size:19px;max-width:48ch;margin-top:20px}

/* Rechnerkarte im Hero */
.calc{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  padding:22px;margin-top:30px;max-width:560px}
.calc .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.calc label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);margin-bottom:6px}
.calc select{width:100%}
.calc .btn{width:100%;justify-content:center;margin-top:14px}
.calc .fine{font-size:13px;color:var(--mut);margin:12px 0 0;text-align:center}
.trustrow{display:flex;gap:10px 20px;flex-wrap:wrap;margin-top:22px;font-size:14.5px;color:var(--mut)}
.trustrow span{display:flex;align-items:center;gap:8px}
.trustrow svg{width:16px;height:16px;color:var(--forest-2);flex:none}
.demand{display:inline-flex;align-items:center;gap:10px;background:#E7EFE9;border-radius:999px;
  padding:8px 16px;font-size:14.5px;color:#14392C;margin-top:26px}
.demand b{font-weight:700}
.demand i{width:8px;height:8px;border-radius:50%;background:var(--leaf);flex:none}
@media (max-width:980px){.hero .grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .hero .baum{order:-1;max-width:380px;margin:0 auto}}

/* ---------- Schritte ---------- */
.steps{background:var(--paper)}
.stepgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
.step{background:var(--ivory);border-radius:18px;padding:28px 26px 30px;position:relative}
/* Schrittpille: die Nummer als Beschriftung. Sie steht, wo für den Kreis
   kein Platz ist — in einer Kachelreihe, in der schon ein Piktogramm sitzt.
   Eine Definition für .step und .phase; vorher zwei, die sich um ein Pixel
   Polster und sechs Pixel Abstand unterschieden.
   align-self, weil die Karte eine Spalte ist: ohne das dehnt sich die Pille
   auf die volle Kartenbreite. */
.step .pill,.phase .n{align-self:flex-start;background:var(--forest);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  border-radius:999px;padding:5px 13px;margin-bottom:18px}
.step .ic{width:56px;height:56px;border-radius:50%;background:var(--paper);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.step .ic svg{width:27px;height:27px;color:var(--forest)}
.step h3{font-size:21px;margin-bottom:9px}
.step p{margin:0;color:var(--mut);font-size:15.5px;line-height:1.6}

/* ---------- Gründe ---------- */
.reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
.reason{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px 26px}
.reason .ic{width:48px;height:48px;border-radius:50%;background:#E7EFE9;display:flex;
  align-items:center;justify-content:center;margin-bottom:16px}
.reason .ic svg{width:24px;height:24px;color:var(--forest)}
.reason h3{font-size:20px;margin-bottom:8px}
.reason p{margin:0;color:var(--mut);font-size:15.5px}

/* ---------- Jahresringe ---------- */
.rings{background:var(--forest);color:#fff}
.rings .eyebrow{color:var(--gold)}
.rings .eyebrow i{background:#ffffff1f}
.rings .eyebrow i svg{color:var(--gold)}
.rings h2{color:#fff}
.rings .lede{color:#CEDCD2}
.rings .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.ringlist{margin:30px 0 0;padding:0;list-style:none}
.ringlist li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:16px;align-items:baseline;
  padding:14px 0;border-top:1px solid #ffffff26}
.ringlist li i{width:13px;height:13px;border-radius:50%;display:block;transform:translateY(2px)}
.ringlist li b{display:block;font-weight:600;font-size:16px}
.ringlist li span{display:block;font-size:14.5px;color:#B9CBC0;line-height:1.5}
.ringlist li .v{font-family:'Fraunces',serif;font-size:22px;font-weight:600;white-space:nowrap}
.ringlist li .v.pos{color:#8FD3AC}
.ringlist li .v.neg{color:#E9B7A2}
.rings .fn{font-size:13px;color:#9FB3A7;margin-top:20px;max-width:62ch}
@media (max-width:900px){.rings .grid{grid-template-columns:minmax(0,1fr);gap:34px}}

/* ---------- Branchenraster ---------- */
.brgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px}
.br{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px}
.br:hover{border-color:var(--forest-2);box-shadow:var(--shadow)}
.br .ic{width:42px;height:42px;border-radius:12px;background:#E7EFE9;display:flex;
  align-items:center;justify-content:center;margin-bottom:14px}
.br .ic svg{width:22px;height:22px;color:var(--forest)}
.br b{display:block;font-family:'Fraunces',serif;font-size:18.5px;font-weight:600;letter-spacing:-.012em;margin-bottom:5px}
.br span{display:block;font-size:14.5px;color:var(--mut);line-height:1.5}
.br span{margin-bottom:12px}
.br .go{align-self:flex-start;margin-bottom:0;font-size:14.5px;font-weight:600;color:var(--forest)}

/* ---------- Unternehmensangebote ---------- */
.angebote{background:var(--paper)}
.filterbar{background:var(--ivory);border:1px solid var(--line);border-radius:18px;padding:20px 22px;
  margin-top:34px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:14px;align-items:end}
.filterbar label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);margin-bottom:6px}
.filterbar select{width:100%}
.filterbar .btn{height:var(--feld)}
.anggrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px}
.ang{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px;
  display:flex;flex-direction:column}
.ang:hover{border-color:var(--forest-2);box-shadow:var(--shadow)}
.ang .kopf{display:flex;align-items:center;gap:6px 10px;margin-bottom:10px;flex-wrap:wrap}
.ang .kn{font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--mut)}
.ang .neu{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:#E7EFE9;color:#14392C;border-radius:999px;padding:3px 9px}
.ang .datum{margin-left:auto;font-size:12.5px;color:var(--mut)}
.ang h3{font-size:19px;line-height:1.28;margin-bottom:10px}
.ang .tz{margin:0 0 16px;font-size:15.5px;color:var(--mut);line-height:1.55}
.ang dl{margin:0 0 16px;font-size:14.5px;border-top:1px solid var(--line)}
.ang dl>div{display:flex;justify-content:space-between;gap:6px 14px;padding:7px 0;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.ang dt{color:var(--mut)}
.ang dd{margin:0;font-weight:500;text-align:right;white-space:nowrap;margin-left:auto}
.ang .fuss{margin-top:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* Das Siegel ist eine Pille wie .tag und .neu und gilt überall, nicht nur in
   der Angebotskarte. Vorher hing die Maßangabe des Zeichens an .ang: außerhalb
   einer Angebotskarte wuchs der Haken auf Containergröße — 159 x 159 px. */
.siegel{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#14392C;
  background:#E7EFE9;border-radius:999px;padding:5px 11px}
.siegel svg{width:13px;height:13px;flex:none}
.ang .go{margin-left:auto;font-size:14.5px;font-weight:600;color:var(--forest);white-space:nowrap}
.angfuss{margin-top:30px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:24px}
.angfuss p{margin:0;font-size:15.5px;color:var(--mut);max-width:58ch}
.angfuss p b{color:var(--ink);font-weight:600}
@media (max-width:980px){.filterbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .filterbar .btn{grid-column:1/-1;justify-content:center}}
@media (max-width:640px){.filterbar{grid-template-columns:minmax(0,1fr)}
  /* Auf dem Telefon Bezeichnung über den Wert, sonst sprengen lange Spannen die Zeile */
  .ang dl>div{display:block;padding:8px 0}
  .ang dt{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
  .ang dd{text-align:left;margin-left:0;white-space:normal}
  .ang .datum{margin-left:0;flex-basis:100%}
  .ang .go{margin-left:0}}

/* ---------- Sichtbarkeitsstufen ---------- */
.visib{background:var(--ivory-2)}
.stufen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px}
.stufe{background:var(--paper);border-radius:16px;padding:24px 22px;border-top:4px solid var(--line);
  display:flex;flex-direction:column}
.stufe.on{border-top-color:var(--gold)}
.stufe .n{font-family:'Fraunces',serif;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:12px}
.stufe h3{font-size:18.5px;margin-bottom:9px}
.stufe p{margin:0 0 16px;font-size:14.5px;color:var(--mut);line-height:1.55}
.stufe .tag{align-self:flex-start;font-size:12.5px;font-weight:600;border-radius:999px;padding:4px 11px}
.stufe .tag.no{background:#E7EFE9;color:#14392C}
.stufe .tag.yes{background:#F6E7CB;color:#6A4E12}

/* ---------- Käufer im Netzwerk ---------- */
.buyers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:44px}
.buyer{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px}
.buyer .kn{font-size:12.5px;letter-spacing:.08em;color:var(--mut);font-weight:600}
.buyer h3{font-size:19px;margin:7px 0 12px}
.buyer dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font-size:14.5px}
.buyer dt{color:var(--mut)}
.buyer dd{margin:0;font-weight:500;text-align:right}

/* ---------- Wissensblock der Startseite ----------
   Zeigt dieselbe Streckenkarte wie /wissen, nur drei statt neun. Vorher
   standen hier eine eigene Kachel .art und eine Reiterleiste, für die
   es kein Skript gab. Beides ist entfallen; wo dasselbe gezeigt wird,
   steht jetzt dieselbe Komponente. */
.strecken.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.strecken.drei{grid-template-columns:minmax(0,1fr)}}
.mehr{margin:26px 0 0;font-size:15.5px;font-weight:600}
.mehr a{display:inline-flex;align-items:center;gap:8px;color:var(--forest)}
.mehr a:hover{text-decoration:underline;text-underline-offset:3px}
.mehr svg{flex:none}

/* ---------- Abschluss-CTA ---------- */
.final{background:var(--gold);position:relative;overflow:hidden}
.final .blob{position:absolute;width:520px;height:480px;background:#EFD7AB8c;right:-140px;top:-160px;
  border-radius:52% 48% 44% 56%/48% 52% 48% 52%}
.final .grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.final h2{font-size:clamp(27px,3.4vw,42px);max-width:17ch;color:#2A1F06}
.final p{color:#4A380E;max-width:52ch;margin:16px 0 0;font-size:17px}
.final .calc{margin-top:0;border-color:#D8BE8B}
@media (max-width:900px){.final .grid{grid-template-columns:minmax(0,1fr);gap:30px}}

/* ---------- Käuferpartner ---------- */
.partner{background:var(--ivory-2)}
.partner .box{background:var(--paper);border-radius:20px;padding:38px 40px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center;border:1px solid var(--line)}
.partner h2{font-size:27px;max-width:20ch}
.partner p{margin:12px 0 0;color:var(--mut);max-width:62ch}
@media (max-width:820px){.partner .box{grid-template-columns:minmax(0,1fr)}}

/* ---------- Fuß ---------- */
footer{background:var(--forest);color:#fff;padding:62px 0 0;overflow:hidden}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
footer .wm{color:#fff}
footer .wm span{color:#A9C0B2}
footer p{color:#B9CBC0;font-size:15.5px;max-width:34ch;margin:14px 0 0}
footer h4{font-family:'Inter',sans-serif;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:0 0 12px;font-weight:700}
footer ul{list-style:none;padding:0;margin:0;font-size:15.5px;line-height:2;color:#D5E0D9}
footer ul a:hover{color:#fff;text-decoration:underline}
footer .base{border-top:1px solid #ffffff29;margin-top:38px;padding:16px 0 20px;display:flex;gap:18px;
  flex-wrap:wrap;font-size:13px;color:#A9C0B2}
footer .base .r{margin-left:auto;display:flex;gap:18px}

@media (max-width:980px){
  .stepgrid,.reasons,.buyers,.anggrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .brgrid,.stufen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  section{padding:60px 0}
  .in{padding:0 20px}
  .stepgrid,.reasons,.buyers,.brgrid,.stufen,.anggrid,footer .cols{grid-template-columns:minmax(0,1fr)}
  .calc .row{grid-template-columns:minmax(0,1fr)}
  h1,h2,h3,h4{hyphens:auto}
  .partner .box{padding:26px 22px}
}


/* ===== Gewerkseite ===== */
/* ============================================================
   GEWERKSEITE — Vorlage, Beispiel Versicherungsmakler

   Aufbau nach aroundhome.de/immobilienverkauf/:
   Trichterschritt 1 steht ganz oben statt eines Marketing-Heros,
   darunter ein Nachfragebeleg, dann Inhaltsverzeichnis, dann der
   Fachtext mit eingestreuten Handlungsaufforderungen und
   Querverweisen, am Ende Vertrauensblock und häufige Fragen.

   Nur die seitenspezifischen Bausteine stehen hier. Farben,
   Schriften, Knöpfe, Kopf und Fuß kommen aus lebenswerk.css.
   ============================================================ */

/* Brotkrume */
.krume{background:var(--ivory);padding:14px 0;font-size:13px;color:var(--mut)}
.krume a:hover{color:var(--forest);text-decoration:underline}
.krume span{margin:0 7px;opacity:.5}

/* Trichterschritt als Bühne */
.trichter{background:var(--ivory);padding:26px 0 40px;position:relative;overflow:hidden}
.trichter .blob{position:absolute;width:620px;height:560px;background:#FFFFFF8c;right:-200px;top:-180px;
  border-radius:48% 52% 44% 56%/52% 44% 56% 48%;pointer-events:none}
.trichter .in{position:relative}
.trichter .zeile{text-align:center;font-size:15.5px;color:var(--mut);margin-bottom:16px}
.trichter .frage{display:block;text-align:center;font-family:'Fraunces',serif;font-size:clamp(21px,2.5vw,28px);
  font-weight:600;letter-spacing:-.018em;margin:0 auto 26px;max-width:24ch}
.wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:840px;margin:0 auto}
.wahl button{font:inherit;background:var(--paper);border:1.5px solid var(--line);border-radius:16px;
  padding:24px 18px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--ink)}
.wahl button:hover{border-color:var(--forest-2);box-shadow:var(--shadow)}
.wahl button.on{border-color:var(--forest);background:#F3F8F4}
.wahl button svg{width:34px;height:34px;color:var(--forest)}
.wahl button b{font-family:'Fraunces',serif;font-size:17px;font-weight:600}
.wahl button span{font-size:13px;color:var(--mut);line-height:1.45;text-align:center}

/* Dieselbe Zeilenkopplung wie bei .rkachel, siehe dort. Der Trichter der
   Brandschutzseite stammt aus dem Prototyp und hat eine eigene Klasse,
   dieselbe Dreiteilung und deshalb dasselbe Problem. Der Umbruch fällt
   hier sogar sicher an: "Externe Bestellungen" gegen "Gutachten und
   Sachverständigenleistungen". */
@supports (grid-template-rows: subgrid){
  @media (min-width:641px){
    .wahl{grid-template-rows:auto auto auto}
    .wahl button{display:grid;grid-row:span 3;grid-template-rows:subgrid;
      align-items:start;justify-items:center}
  }
}
.fortschritt{max-width:840px;margin:28px auto 0;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.fortschritt i{display:block;height:100%;width:25%;background:var(--gold);border-radius:3px;transition:width .3s}
.fortschritt-txt{max-width:840px;margin:10px auto 0;font-size:13px;color:var(--mut);text-align:center}


/* Inhaltsverzeichnis */
.ivz{border:1px solid var(--line);border-radius:14px;background:var(--paper);margin-top:34px}
.ivz summary{cursor:pointer;list-style:none;padding:15px 20px;font-weight:600;font-size:16px;
  display:flex;align-items:center;gap:10px}
.ivz summary::-webkit-details-marker{display:none}
.ivz summary::after{content:'▾';margin-left:auto;color:var(--mut)}
.ivz[open] summary::after{content:'▴'}
/* Einspaltig. Zweispaltig ließ 350 px je Eintrag, und jeder Titel über rund
   45 Zeichen brach um. Eine Liste, in der die Hälfte der Zeilen zweizeilig
   ist, liest sich schlechter als eine längere einspaltige. */
.ivz ol{margin:0;padding:0 20px 18px 40px;font-size:15.5px;line-height:1.9}
.ivz ol li{margin-bottom:2px}
.ivz ol a:hover{color:var(--forest);text-decoration:underline}

/* Fachtext */
.fach{max-width:760px;margin:0 auto}
/* Lesemaß: Fließtext bleibt unter 80 Zeichen, Tabellen und Karten dürfen die volle Spalte nutzen */
.fach>p,.fach>ul,.fach .hf p,.beleg p{max-width:61ch}
.fach h2{font-size:var(--h2-abschnitt);margin:52px 0 14px;scroll-margin-top:90px}
.fach h3{font-size:20px;margin:30px 0 10px}
.fach p{margin:0 0 14px}
.fach ul{margin:0 0 16px;padding-left:22px}
.fach li{margin-bottom:8px}
.fach li::marker{color:var(--gold-ink)}
.autor{display:flex;align-items:center;gap:12px;margin:20px 0 0;font-size:14.5px;color:var(--mut);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
.autor .av{width:34px;height:34px;border-radius:50%;background:#E7EFE9;display:flex;align-items:center;
  justify-content:center;flex:none}
.autor .av svg{width:18px;height:18px;color:var(--forest)}
.autor b{color:var(--ink);font-weight:600}

/* Belegkasten statt Expertenzitat */
.beleg{background:var(--ivory-2);border-left:4px solid var(--gold);border-radius:0 14px 14px 0;
  padding:22px 24px;margin:26px 0}
.beleg .z{font-family:'Fraunces',serif;font-size:32px;font-weight:600;line-height:1;margin-bottom:8px}
.beleg p{margin:0;font-size:15.5px;color:var(--mut)}
.beleg .q{display:block;margin-top:10px;font-size:13px;color:var(--mut)}
.beleg .q b{color:var(--ink);font-weight:600}

/* Verfahrenstabelle */
/* ---------- Tabelle ----------
   Eine Tabelle, zwei Vorkommen: die Verfahrenstabelle im Fachtext und die
   Rangliste der Bundesländer. Vorher standen dafür zwei fast gleiche
   Regelblöcke im Blatt, die sich in Polster, Zellenhöhe und im Namen der
   hervorgehobenen Zeile unterschieden (.hl gegen .hier), und die Regeln
   der ersten lagen zusätzlich über drei Stellen verteilt.

   Polster und seitlicher Ausbruch sind ein Paar und kommen deshalb aus
   derselben Marke. Der Ausbruch sitzt an der Hülle .tabwrap, damit die
   erste Spalte mit dem Fließtext fluchtet und die letzte rechts mit ihm
   abschließt. Das Polster gibt der hervorgehobenen Zeile Luft zu ihren
   Kanten: Bei 12 px stand ihr Text so dicht an der Kante der Fläche, dass
   es wie gar kein Polster aussah.

   Der Ausbruch gehört an die Hülle, nicht an die Tabelle. Sitzt er an der
   Tabelle, ist sie breiter als ihre Hülle, und weil die Hülle
   overflow-x:auto trägt, entsteht auf jeder Tabelle eine waagerechte
   Bildlaufleiste mit abgeschnittenem Inhalt rechts. */
:root{--tabluft:18px}
@media (max-width:640px){:root{--tabluft:12px}}

.tabwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 10px;padding:0;
  margin-left:calc(var(--tabluft) * -1);margin-right:calc(var(--tabluft) * -1)}
.tab,.rangliste{width:100%;border-collapse:collapse;font-size:15.5px;margin:0}
.tabwrap .tab,.tabwrap .rangliste{min-width:min(100%,420px)}
.tab th,.rangliste th{text-align:left;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);font-weight:700;
  border-bottom:2px solid var(--ink);padding:0 var(--tabluft) 8px}
.tab td,.rangliste td{border-bottom:1px solid var(--line);
  padding:11px var(--tabluft);vertical-align:top}
.tab th.r,.tab td.r,.rangliste th.r,.rangliste td.r{text-align:right}
.rangliste th.r,.rangliste td.r{font-variant-numeric:tabular-nums}
.tab td small,.rangliste td small{display:block;font-size:13px;color:var(--mut)}
.tab td.r.pos{color:#1E4436;font-weight:600}
.tab td.r.neg{color:#9A4A28;font-weight:600}
.rangliste a:hover{color:var(--forest);text-decoration:underline}

/* Hervorgehobene Zeile. Ein Name für beide Tabellen: .hl. */
.tab tr.hl td,.rangliste tr.hl td{background:#F3F8F4}
.rangliste tr.hl td{font-weight:600}
.tab tr.hl td:first-child,.rangliste tr.hl td:first-child{border-radius:10px 0 0 10px}
.tab tr.hl td:last-child,.rangliste tr.hl td:last-child{border-radius:0 10px 10px 0}

.fussnote{font-size:13px;color:var(--mut);line-height:1.6;margin:6px 0 0;max-width:66ch}

/* Querverweise */
.quer{margin:26px 0 10px;border-top:1px solid var(--line);padding-top:18px}
.quer .lb{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:12px}
.quer .reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.quer a{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--paper);display:block}
.quer a:hover{border-color:var(--forest-2)}
.quer a b{display:block;font-family:'Fraunces',serif;font-size:16px;font-weight:600;line-height:1.3;margin-bottom:4px}
.quer a span{font-size:13px;color:var(--mut)}
@media (max-width:760px){.quer .reihe{grid-template-columns:minmax(0,1fr)}}

/* Zwischen-CTA */
.zcta{background:var(--gold);border-radius:18px;padding:26px 30px;margin:34px 0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center}
.zcta h3{font-size:22px;color:#2A1F06;margin-bottom:6px}
.zcta p{margin:0;color:#4A380E;font-size:15.5px;max-width:52ch}
.zcta .btn.green{background:#2A1F06;border-color:#2A1F06}
.zcta .btn.green:hover{background:#3E2F0B}
@media (max-width:760px){.zcta{grid-template-columns:minmax(0,1fr);padding:22px}}

/* Phasen */
.phasen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0 10px}
.phase{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px}
.phase h3{font-size:18.5px;margin:0 0 10px}
.phase ul{margin:0;padding-left:19px;font-size:14.5px;color:var(--mut);line-height:1.8}
.phase ul{margin-bottom:14px}
.phase .dauer{padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--mut)}
@media (max-width:820px){.phasen{grid-template-columns:minmax(0,1fr)}}

/* Bestandsarten */
.arten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0 10px}
.art2{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px}
.art2 h3{font-size:18.5px;margin-bottom:10px}
.art2 ul{margin:0;padding-left:19px;font-size:14.5px;color:var(--mut);line-height:1.75}
.art2 ul{margin-bottom:14px}
.art2 .fak{padding-top:12px;border-top:1px solid var(--line);
  font-family:'Fraunces',serif;font-size:19px;font-weight:600;color:var(--forest)}
@media (max-width:820px){.arten{grid-template-columns:minmax(0,1fr)}}

/* Vertrauensblock */
.uns{background:var(--forest);color:#fff}
.uns .eyebrow{color:var(--gold)}
.uns .eyebrow i{background:#ffffff1f}
.uns .eyebrow i svg{color:var(--gold)}
.uns h2{color:#fff;font-size:clamp(25px,3vw,36px);max-width:20ch}
.uns p{color:#C5D6CB;max-width:58ch;margin:16px 0 26px}
.uns .zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:40px;
  border-top:1px solid #ffffff2e;padding-top:28px}
.uns .zahlen b{display:block;font-family:'Fraunces',serif;font-size:clamp(30px,4vw,46px);font-weight:600;line-height:1}
.uns .zahlen span{display:block;font-size:14.5px;color:#B4C8BC;margin-top:8px;line-height:1.5}
.uns .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:44px;align-items:center}
@media (max-width:900px){.uns .grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .uns .zahlen{grid-template-columns:minmax(0,1fr)}}

/* Häufige Fragen */
.hf details{border-bottom:1px solid var(--line);padding:16px 0}
.hf summary{cursor:pointer;list-style:none;font-family:'Fraunces',serif;font-size:19px;font-weight:600;
  display:flex;gap:14px;align-items:flex-start}
.hf summary::-webkit-details-marker{display:none}
.hf summary::before{content:'+';color:var(--gold-ink);font-family:'Inter',sans-serif;font-weight:700;flex:none}
.hf details[open] summary::before{content:'–'}
.hf p{margin:12px 0 0 26px;color:var(--mut);max-width:70ch}

/* ============================================================
   DEMO-SITE — zusätzliche Bausteine
   ============================================================ */
.skip{position:absolute;left:-9999px;top:0;background:var(--forest);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}
#demobar{background:var(--ink);color:#fff;font-size:12.5px;line-height:1.5;padding:8px 20px;text-align:center}
#demobar b{color:var(--gold)}
#demobar a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.krume .in{display:flex;gap:0;align-items:center;flex-wrap:wrap}
.krume .sep{margin:0 7px;opacity:.5}
.krume [aria-current]{color:var(--ink)}
nav [aria-current="page"]{color:var(--forest);font-weight:600}
.h1gross{font-size:var(--h1-seite);letter-spacing:-.028em;margin-bottom:18px}
section.alt{background:var(--ivory-2)}

/* Unternehmenswert-Übersicht */
/* ---- /unternehmenswert, Einstieg -------------------------------
   Wer über "unternehmenswert berechnen" oder aus einem Artikel-CTA
   kommt, sucht einen Rechner. Das Suchfeld steht deshalb im Hero und
   nicht hinter drei Absätzen Erklärung. Die Erklärung folgt darunter.
   ---------------------------------------------------------------- */
.uwhero{background:var(--ivory);padding:52px 0 48px}
.uwtop{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:44px;align-items:start}
.uwhero h1{font-size:var(--h1-kopf);letter-spacing:-.03em;max-width:14ch}
.uwhero .lede{font-size:18.5px;max-width:54ch;margin:14px 0 0}

.uwsuche{position:relative;margin-top:26px;max-width:560px}
.uwsuche label{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:8px}
.uwfeld{display:flex;align-items:center;gap:12px;background:var(--paper);
  border:1.5px solid var(--line);border-radius:14px;padding:0 16px;
  box-shadow:var(--shadow);transition:border-color .15s}
.uwfeld:focus-within{border-color:var(--forest-2)}
.uwfeld .lupe{flex:0 0 21px;width:21px;height:21px;color:var(--mut)}
.uwfeld input{flex:1 1 auto;min-width:0;border:0;outline:0;background:none;
  font:inherit;font-size:17px;color:var(--ink);padding:15px 0;
  -webkit-appearance:none;appearance:none}
.uwfeld input::-webkit-search-cancel-button{-webkit-appearance:none}
.uwfeld input::placeholder{color:var(--mut);opacity:.85}

/* Trefferliste. Liegt über dem Inhalt, damit der Hero beim Tippen
   nicht springt. */
.uwtreffer{position:absolute;z-index:30;left:0;right:0;top:100%;
  margin:8px 0 0;padding:6px;list-style:none;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  max-height:min(52vh,420px);overflow-y:auto}
.uwtreffer li{border-radius:10px}
.uwtreffer li>a,.uwtreffer li>span{display:flex;align-items:baseline;gap:10px;
  padding:11px 13px;flex-wrap:wrap}
.uwtreffer b{font-size:16px;font-weight:600}
.uwtreffer li span span,.uwtreffer li>a>span{font-size:13px;color:var(--mut);
  flex:1 1 auto;min-width:0;overflow-wrap:break-word;hyphens:auto}
.uwtreffer em{font-style:normal;font-size:13px;font-weight:600;color:var(--forest);
  margin-left:auto;white-space:nowrap}
.uwtreffer li.an{background:var(--ivory)}
.uwtreffer li.aus{opacity:.62}
.uwtreffer li.aus.an{background:transparent}
.uwtreffer li.leer{padding:12px 13px;font-size:14.5px;color:var(--mut)}

/* Chipreihe: eine Zeile anklickbarer Begriffe, Breite nach Inhalt.
   Steht unter dem Suchfeld auf /unternehmenswert und unter der
   Branchenliste auf /unternehmen-kaufen. */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin:14px 0 0;font-size:14.5px}
.chips>span{color:var(--mut)}
.chips a{border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  background:var(--paper);font-size:14.5px;font-weight:500}
.chips a:hover{border-color:var(--forest-2);color:var(--forest)}
.uwmeta{margin:20px 0 0;font-size:14.5px;color:var(--mut)}

/* Rechte Spalte: beantwortet, was nach dem Tippen passiert. */
.uwso{background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:24px 26px;margin-top:8px}
.uwso>b{display:block;font-family:'Fraunces',Georgia,serif;font-size:19px;
  font-weight:600;letter-spacing:-.015em;margin-bottom:16px}
.uwso ol{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.uwso li{display:flex;gap:13px;font-size:14.5px;line-height:1.55;color:var(--mut)}
.uwso li>span{flex:0 0 27px;width:27px;height:27px;font-size:14.5px}

@media (max-width:940px){
  .uwtop{grid-template-columns:minmax(0,1fr);gap:30px}
  .uwhero h1{max-width:none}
  .uwso{margin-top:0}
}
@media (max-width:620px){
  .uwhero{padding:36px 0 38px}
  .uwsuche{max-width:none}
  .uwfeld input{font-size:16px}   /* darunter zoomt iOS beim Fokus */
  .uwtreffer em{margin-left:0;flex-basis:100%}
}
.uwgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:34px}
.uwk{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column}
a.uwk:hover{border-color:var(--forest-2);box-shadow:var(--shadow)}
.uwk .verf{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:10px}
.uwk b{font-family:'Fraunces',serif;font-size:19px;font-weight:600;letter-spacing:-.015em;margin-bottom:7px}
.uwk .satz{font-size:14.5px;color:var(--mut);line-height:1.55}
.uwk .go{margin-top:auto;padding-top:14px;font-size:14.5px;font-weight:600;color:var(--forest)}
.uwk .bald{margin-top:auto;padding-top:14px;font-size:13px;color:var(--mut)}
.uwk.aus{background:transparent;border-style:dashed}
@media (max-width:1000px){.uwgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:620px){.uwgrid{grid-template-columns:minmax(0,1fr)}}

/* Begriffskasten */
.begriff{background:#EDF3EE;border-left:4px solid var(--forest-2);border-radius:0 14px 14px 0;
  padding:20px 24px;margin:26px 0;max-width:none}
.begriff b{display:block;font-family:'Fraunces',serif;font-size:19px;font-weight:600;margin-bottom:8px;color:var(--forest)}
.begriff p{margin:0;font-size:15.5px;line-height:1.62;color:#31423A;max-width:64ch}
.begriff i{font-style:italic}

/* Phasenliste im Artikel */
.phasen3{margin:22px 0 10px}
.ph{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding:16px 0;border-top:1px solid var(--line)}
.ph:last-child{border-bottom:1px solid var(--line)}
/* ---------- Schrittnummer im Kreis ----------
   Sie trägt die Schrittfolge. Wer eine Seite überfliegt, sieht zuerst die
   Ziffern und weiß daran, dass es eine Reihenfolge gibt und wie viele
   Schritte es sind — das steht in keiner Überschrift.

   Eine Gestalt, zwei Größen: groß (40 px) in der Schrittfolge .phasen3,
   klein (27 px) in einem schmalen Kasten wie .uwso. Die kleine Fassung war
   vorher anders gefärbt und anders gesetzt — heller Kreis mit grüner Ziffer
   in Inter statt grünem Kreis mit weißer Ziffer in Fraunces. Dieselbe Sache
   sah an zwei Orten verschieden aus. */
.ph .n,.uwso li>span{border-radius:50%;background:var(--forest);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none;
  font-family:'Fraunces',Georgia,serif;font-weight:600}
.ph .n{width:40px;height:40px;font-size:17px}
.ph b{display:block;font-family:'Fraunces',serif;font-size:19px;font-weight:600;margin-bottom:5px}
.ph span{display:block;color:var(--mut);font-size:15.5px;line-height:1.6;max-width:62ch}
.ph i{display:inline-block;margin-top:8px;font-style:normal;font-size:12.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink)}

/* Ratgeber */
.ratkopf{background:var(--ivory);padding:56px 0 0}
.ratkopf h1{font-size:var(--h1-kopf);letter-spacing:-.03em;max-width:20ch}
.ratbild{margin:38px 0 0;position:relative}
.ratbild img{width:100%;height:clamp(240px,34vw,420px);object-fit:cover;border-radius:20px 20px 0 0;display:block}
.ratbild figcaption,.akopf figcaption{position:absolute;right:12px;bottom:12px;background:#0b0f14a6;color:#fff;
  font-size:11.5px;letter-spacing:.06em;padding:4px 9px;border-radius:999px}

/* Artikel */
.artikel{padding-bottom:80px}
.akopf{margin:0;position:relative}
.akopf img{width:100%;height:clamp(220px,38vw,480px);object-fit:cover;display:block}
.artikel .in{margin-top:-40px;position:relative}
.artikel .fach{background:var(--paper);border-radius:20px;padding:38px 44px 44px;box-shadow:var(--shadow)}
.acat{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:14px}
.artikel h2{font-size:var(--h2-abschnitt);margin:44px 0 12px}
.artikel h3{font-size:19px;margin:28px 0 8px}
.artikel .lede{font-size:19px;color:var(--mut);margin:0 0 8px;max-width:62ch}
@media (max-width:700px){.artikel .fach{padding:26px 22px 32px;border-radius:16px}.artikel .in{margin-top:-24px}}

/* Werttreiber-Spalte in Tabellen */
/* Bildnachweis nicht unter die Artikelkarte schieben */
.akopf figcaption{top:12px;bottom:auto}

/* ============================================================
   KORREKTUREN 2026-09-12
   ============================================================ */

/* 1) Wortmarke: gap wirkte zwischen ALLEN Flex-Kindern, also auch
      zwischen „nachfolger" und „.de". Abstand jetzt nur hinter der Marke. */
.wm{gap:0}
.wm .mark{margin-right:10px}


/* 4) Goldene Handlungsaufforderung: die Überschrift erbte den oberen
      Abstand der Artikelüberschriften und saß dadurch 56 px tief bei
      26 px Luft unten. */
.fach .zcta h3,.artikel .zcta h3,.zcta h3{margin:0 0 8px}
.zcta{align-items:center}

/* Bildmarke F1 „Siegel". Zwei Farbfassungen über Variablen: dunkles
   Siegel auf hellem Grund, helles Siegel im dunklen Fuß. Vorher war
   die Marke im Fuß dunkelgrün auf dunkelgrün und damit unsichtbar. */
.wm .mark{--mDark:#1E4436;--mGold:#E3C489;--mBg:#F7F3EC}
footer .wm .mark{--mDark:#F7F3EC;--mGold:#8A6A3B;--mBg:#1E4436}
/* Gold im Fuß dunkler: dort liegt der Stamm auf dem hellen Siegel, nicht auf
   dem dunklen. #B8913F kam dabei auf 2,65:1, #8A6A3B erreicht 4,51:1. */

/* Zahl im Ringpunkt: dieselbe Nummer wie in der Grafik daneben */
.ringlist li i{display:flex;align-items:center;justify-content:center;width:24px;height:24px;
  font-size:12.5px;font-weight:700;font-style:normal;color:#12261E;transform:translateY(2px)}
.ringlist li{grid-template-columns:24px minmax(0,1fr) auto}
.rings svg{display:block}

/* ============================================================
   MEHRSTUFIGER RECHNER
   Erster Bildschirm der Gewerkseite. Auf dem Telefon liegt die
   gesamte Strecke in einer Spalte, die Antwortflächen sind
   mindestens 48 px hoch.
   ============================================================ */
.trichter .tkopf{max-width:640px;margin:0 auto 30px;text-align:center}
.trichter .tkopf .eyebrow{justify-content:center}
.trichter .tkopf h1{margin-left:auto;margin-right:auto}
.trichter .tkopf .lede{margin-left:auto;margin-right:auto}

.rechner{max-width:760px;margin:0 auto;position:relative}
.rfortschritt{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin-bottom:0}
.rfortschritt i{display:block;height:100%;width:20%;background:var(--gold);
  border-radius:3px;transition:width .35s cubic-bezier(.4,0,.2,1)}
.rbox{background:var(--paper);border:1px solid var(--line);border-top:0;
  border-radius:0 0 20px 20px;box-shadow:var(--shadow);padding:34px 36px 30px}
/* .rstep ist ein <section> und erbt sonst section{padding:88px 0} */
.rstep{display:none;padding:0}
.rstep.on{display:block;animation:reinblenden .28s ease}
@keyframes reinblenden{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rnr{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 12px}
.rfrage{font-family:'Fraunces',serif;font-size:clamp(22px,2.6vw,29px);font-weight:600;
  letter-spacing:-.02em;line-height:1.18;margin:0 0 10px}
.rhinweis{margin:0 0 24px;color:var(--mut);font-size:15.5px;max-width:60ch}

/* Kachelauswahl */
.rkachel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rkachel .ropt{font:inherit;background:var(--paper);border:1.5px solid var(--line);border-radius:14px;
  padding:22px 16px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--ink);text-align:center}
.rkachel .ropt svg{width:30px;height:30px;color:var(--forest)}
.rkachel .ropt b{font-family:'Fraunces',serif;font-size:17px;font-weight:600}
.rkachel .ropt span{font-size:13px;color:var(--mut);line-height:1.45}

/* Die drei Zeilen einer Antwortkachel — Zeichen, Titel, Beschreibung —
   liegen über alle Kacheln hinweg auf derselben Höhe. Ohne das rutscht
   die Beschreibung der kurzen Kacheln nach oben, sobald ein Titel
   umbricht ("Berufsausübungsgemeinschaft"), und die Zeile, die den
   Titel vom erklärenden Text trennt, ist über die Kacheln hinweg nicht
   mehr zu sehen. Subgrid reicht die Zeilenhöhen der Kachelreihe an die
   einzelne Kachel durch, statt sie je Kachel neu zu berechnen. */
@supports (grid-template-rows: subgrid){
  @media (min-width:721px){
    .rkachel{grid-template-rows:auto auto auto}
    .rkachel .ropt{display:grid;grid-row:span 3;grid-template-rows:subgrid;
      align-items:start}
    .rkachel .ropt svg{justify-self:center}
  }
}

/* Listenauswahl */
.rliste{display:flex;flex-direction:column;gap:8px}
.rliste .ropt{font:inherit;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;
  padding:14px 16px;cursor:pointer;display:flex;align-items:center;gap:14px;color:var(--ink);
  text-align:left;min-height:52px}
.rliste .hk{width:22px;height:22px;border-radius:50%;border:1.5px solid #C9C2B3;flex:none;
  position:relative;background:var(--paper)}
.rliste .ropt.on .hk{border-color:var(--forest)}
.rliste .ropt.on .hk{background:var(--forest) center/13px 13px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-8'/%3E%3C/svg%3E")}
.rliste .tx b{display:block;font-size:16px;font-weight:600}
.rliste .tx span{display:block;font-size:13px;color:var(--mut);margin-top:2px}
.ropt:hover{border-color:var(--forest-2)}
.ropt.on{border-color:var(--forest);background:#F3F8F4}
.ropt:focus-visible{outline:2px solid var(--forest);outline-offset:2px}

/* Genauer Betrag statt Spanne. Regler zur Orientierung, Feld für die Zahl. */
.rgenau .tx b{color:var(--forest)}
.rbetrag{padding-top:2px}
.rzurueck2{font:inherit;font-size:14.5px;background:none;border:0;padding:6px 10px 6px 4px;margin:0 0 18px -4px;
  color:var(--mut);cursor:pointer;display:inline-flex;align-items:center;gap:4px;border-radius:8px}
.rzurueck2 svg{width:16px;height:16px}
.rzurueck2:hover{color:var(--forest)}
.rzurueck2:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.rbetrag label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);margin-bottom:12px}
/* Regler und Feld in einer Reihe. Beide zeigen dieselbe Zahl, deshalb
   gehören sie nebeneinander.

   Der Regler und seine Skalenenden sind eine Einheit und stecken in
   .rregler. Vorher lagen sie als Geschwister in zwei Rasterzeilen: der
   Regler in Zeile eins, die Skala in Zeile zwei. Das Feld stand nur in
   Zeile eins und wurde dort mittig gesetzt — also gegen den Regler
   allein statt gegen Regler samt Skala. Gemessen stand es dadurch 25 px
   zu hoch und stieß oben fast an die Feldbeschriftung.

   .rfeld, nicht .rein: .rein gehört der Einordnung auf der Ergebnisseite. */
.rreihe{display:grid;grid-template-columns:minmax(0,1fr) 186px;column-gap:24px;
  align-items:center}
.rfeld{display:flex;align-items:baseline;justify-content:flex-end;gap:7px;background:var(--paper);
  border:1.5px solid var(--line);border-radius:12px;padding:14px 18px;
  transition:border-color .15s,box-shadow .15s}
.rfeld:focus-within{border-color:var(--forest);box-shadow:0 0 0 4px rgba(30,68,54,.1)}
.rfeld input{font:inherit;font-family:'Fraunces',serif;font-size:24px;font-weight:600;
  color:var(--ink);letter-spacing:-.02em;border:0;background:none;outline:none;padding:0;
  width:100%;min-width:0;text-align:right;font-variant-numeric:tabular-nums}
.reuro{font-family:'Fraunces',serif;font-size:20px;font-weight:600;color:var(--mut);flex:none}
.rhint2{margin:18px 0 0;font-size:13px;color:var(--mut);line-height:1.5}
@media (max-width:600px){
  /* Auf schmalen Schirmen bleibt neben dem Regler kein Platz fuer das Feld. */
  .rreihe{grid-template-columns:minmax(0,1fr);row-gap:0}
  .rreihe .rfeld{grid-column:1;grid-row:1;margin-bottom:22px;padding:15px 20px}
  .rreihe .schieber{grid-row:2}
  .rreihe .rlab{grid-row:3}
  .rfeld input{font-size:28px}
}

/* Schieberegler. Eigene Spur und eigener Griff, weil die Darstellung des
   Betriebssystems weder zur Typografie noch zu den Farben passt. Die
   gefuellte Haelfte kommt aus --f, gesetzt von app.js. */
input[type=range].schieber{-webkit-appearance:none;appearance:none;width:100%;height:30px;
  margin:0;padding:0;background:transparent;cursor:pointer;display:block}
/* Spur und Füllung in getrennten Angaben, nicht in einer Kurzform.

   Vorher stand beides in einem background: die grüne Füllung mit
   left/var(--f) und dahinter die graue Spur. Ist --f ungültig — auf der
   Komponentenseite stand einmal „20%%" statt „20%" —, wird die ganze
   Angabe zur Rechenzeit ungültig. Dann verschwindet mit der Füllung auch
   die Spur, und der Regler ist eine unsichtbare Linie mit einem Griff
   darauf.

   Getrennt kann eine kaputte Füllung die Spur nicht mehr mitnehmen. */
input[type=range].schieber::-webkit-slider-runnable-track{height:8px;border-radius:99px;
  background-color:#E3DED1;
  background-image:linear-gradient(var(--forest),var(--forest));
  background-repeat:no-repeat;
  background-position:left center;
  background-size:var(--f,45%) 100%}
input[type=range].schieber::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:26px;height:26px;margin-top:-9px;border-radius:50%;background:var(--paper);
  border:2.5px solid var(--forest);box-shadow:0 2px 5px rgba(30,68,54,.22),0 0 0 0 rgba(30,68,54,0);
  transition:box-shadow .16s ease,transform .16s ease}
input[type=range].schieber::-moz-range-track{height:8px;border-radius:99px;background:#E3DED1}
input[type=range].schieber::-moz-range-progress{height:8px;border-radius:99px;background:var(--forest)}
input[type=range].schieber::-moz-range-thumb{width:21px;height:21px;border-radius:50%;
  background:var(--paper);border:2.5px solid var(--forest);
  box-shadow:0 2px 5px rgba(30,68,54,.22);transition:box-shadow .16s ease,transform .16s ease}
input[type=range].schieber:hover::-webkit-slider-thumb{box-shadow:0 2px 5px rgba(30,68,54,.22),0 0 0 6px rgba(30,68,54,.1)}
input[type=range].schieber:active::-webkit-slider-thumb{transform:scale(1.06);
  box-shadow:0 2px 5px rgba(30,68,54,.22),0 0 0 10px rgba(30,68,54,.14)}
input[type=range].schieber:focus{outline:none}
input[type=range].schieber:focus-visible::-webkit-slider-thumb{box-shadow:0 2px 5px rgba(30,68,54,.22),0 0 0 10px rgba(30,68,54,.24)}
input[type=range].schieber:hover::-moz-range-thumb{box-shadow:0 2px 5px rgba(30,68,54,.22),0 0 0 6px rgba(30,68,54,.1)}
input[type=range].schieber:focus-visible::-moz-range-thumb{box-shadow:0 2px 5px rgba(30,68,54,.22),0 0 0 10px rgba(30,68,54,.24)}
.rlab{display:flex;justify-content:space-between;font-size:13px;color:var(--mut);line-height:1.35;
  margin-top:6px}
.rlab .re{text-align:right}
.rhint{margin:16px 0 0;font-family:'Fraunces',serif;font-size:19px;font-weight:600;
  color:var(--forest);text-align:center}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Ergebnis */
.rergebnis .rspanne{background:var(--forest);color:#fff;border-radius:16px;padding:26px 28px;
  text-align:center;margin-bottom:20px}
.rzahl{font-family:'Fraunces',serif;font-size:clamp(30px,4.6vw,44px);font-weight:600;
  letter-spacing:-.03em;line-height:1.05}
.rfaktor{margin:8px 0 0;color:#C5D6CB;font-size:15.5px}
.rherleitung{margin:0 0 18px;font-size:15.5px}
.rherleitung>div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line)}
.rherleitung dt{color:var(--mut)}
.rherleitung dd{margin:0;font-weight:600;white-space:nowrap}
.rein{background:var(--ivory-2);border-radius:12px;padding:16px 18px;margin-bottom:20px}
.rein p{margin:0;font-size:15.5px;line-height:1.6;color:#3D4A42}
.rfein{font-size:13px;color:var(--mut);line-height:1.6;margin:0 0 18px;max-width:66ch}
.rnext{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.rnext .btn{flex:1;justify-content:center;min-width:200px}

/* Abschluss: Ergebnis und Kontakt in einem Schritt.
   Der Schritt, an dem der Trichter gewonnen oder verloren wird. Er traegt drei
   Dinge — die Zahl, das Dokument, das Formular — und sonst nichts.

   Die Aufnahme des Druckstuecks liegt als Band oben im Kasten, das Formular
   darunter. Nebeneinander waere die Abbildung rund 300 px breit, und darin
   ist ein Flat-Lay aus drei Druckstuecken ein Daumennagel: Der Titel auf dem
   Umschlag liest sich dann nicht mehr. Das Band kostet Hoehe, aber es kostet
   sie an einem Bild und nicht an Text, den jemand lesen muss.

   Die Abbildung laeuft bis an die Kanten des Kastens. Ihr Grund ist auf
   --ivory-2 gezogen, also auf denselben Ton; so liegt das Druckstueck auf
   der Flaeche, statt als Rechteck darin zu schwimmen. Vorbild und Abgleich:
   docs/design-system/broschuere-vorbild.md. */
.rabschluss{background:var(--ivory-2);border-radius:14px;overflow:hidden;margin:22px 0 18px}
.rabild{margin:0}
.rabild img{display:block;width:100%;height:auto}
/* Der Text unter dem Band bleibt schmal. Ueber die volle Breite gezogen
   stuende „Nachname" in einem 530 px breiten Feld neben einer 140 px
   breiten Anrede, und die Liste liefe auf 66 Zeichen Zeilenlaenge. */
.rabtext{max-width:620px;margin:0 auto;padding:26px 26px 30px}
.rabtitel{font-family:'Fraunces',serif;font-size:21px;font-weight:600;line-height:1.25;margin:0 0 8px}
.rabliste{margin:0 0 20px;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.rabliste li{font-size:15px;line-height:1.45;color:var(--mut);padding-left:22px;position:relative}
.rabliste li::before{content:"";position:absolute;left:2px;top:6px;width:9px;height:5px;
  border-left:2px solid var(--forest);border-bottom:2px solid var(--forest);
  transform:rotate(-45deg)}
/* Zwei gleich breite Spalten statt 140 px plus Rest: Unter dem Band ist
   Platz fuer vier Felder in zwei Reihen, und das spart dem Schritt eine
   Feldhoehe. */
.rabtext .rfelder{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-bottom:16px}
.rabtext .rf:nth-child(3),.rabtext .rf:nth-child(4){grid-column:auto}
.rabtext .rf input,.rabtext .rf select{background:var(--paper)}
.rabtext .rcheck{margin-bottom:18px}
.rabtext .btn{width:100%;justify-content:center}
@media (max-width:760px){.rabtext{padding:20px}}
/* Am Telefon zurueck zu einer Spalte: Zwei Felder nebeneinander sind dort
   je rund 135 px breit, und in 135 px tippt niemand gern eine E-Mail-
   Adresse. */
@media (max-width:560px){
  .rabtext .rfelder{grid-template-columns:140px minmax(0,1fr)}
  .rabtext .rf:nth-child(3),.rabtext .rf:nth-child(4){grid-column:1/-1}
}

/* Plattformfrage und Region */
/* Die Karte ist hier Vorschau, kein Ziel. Schwebezustand und Weiterverweis
   der echten Angebotskarte versprechen eine Verlinkung, die es an dieser
   Stelle nicht gibt; das Siegel bleibt, es ist hier die Aussage. */
.rwahl{display:flex;align-items:flex-start;gap:14px;background:#F3F8F4;border:1px solid #D6E5DA;
  border-radius:12px;padding:14px 16px;margin-bottom:14px}
.rwahl p{margin:0;font-size:14.5px;line-height:1.55;color:var(--mut)}
.rwahl b{display:block;color:var(--ink);font-weight:600}
.rwaendern{font:inherit;font-size:14px;font-weight:600;background:none;border:0;color:var(--forest);
  text-decoration:underline;cursor:pointer;padding:2px 0;margin-left:auto;white-space:nowrap}
.rwaendern:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}

/* Formular */
.rfelder{display:grid;grid-template-columns:140px minmax(0,1fr);gap:14px;margin-bottom:22px}
.rf{display:flex;flex-direction:column}
.rf:nth-child(3),.rf:nth-child(4),.rf.breit{grid-column:1/-1}
.rf label{font-size:13px;font-weight:600;margin-bottom:6px}
.rf .opt{font-weight:400;color:var(--mut)}
.rf input,.rf select{width:100%}
.rf .fhint{font-size:13px;color:var(--mut);margin-top:6px;line-height:1.5}
.rconsent{border-top:1px solid var(--line);padding-top:18px;margin-bottom:20px}
.rcheck{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;cursor:pointer;font-size:14.5px;
  line-height:1.55;color:var(--mut)}
.rcheck input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--forest);flex:none}
.rcheck b{color:var(--ink)}

/* Bestätigung */
.rdanke{text-align:center;padding:12px 0}
.rhaken{width:62px;height:62px;border-radius:50%;background:#E7EFE9;color:var(--forest);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.rhaken svg{width:30px;height:30px}
.rdanke .rhinweis{margin-left:auto;margin-right:auto;text-align:center}
.rdanke .rnext{justify-content:center}
.rdanke .rnext .btn{flex:0 0 auto}

/* Navigation */
.rnav{display:flex;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.rnav #rweiter{margin-left:auto;min-width:150px;justify-content:center}
.rtrust{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  margin:16px 0 0;font-size:14.5px;color:var(--mut);text-align:center}
.rtrust svg{width:15px;height:15px;color:var(--forest-2);flex:none}

@media (max-width:720px){
  .rbox{padding:22px 18px 20px;border-radius:0 0 16px 16px}
  .rkachel{grid-template-columns:minmax(0,1fr);gap:9px}
  .rkachel .ropt{flex-direction:row;align-items:center;text-align:left;padding:14px 16px;gap:14px}
  .rkachel .ropt svg{width:24px;height:24px}
  .rkachel .ropt>span{flex:1}
  .rfelder{grid-template-columns:minmax(0,1fr)}
  .rf:nth-child(n){grid-column:auto}
  .rnext .btn{flex:1 1 100%;min-width:0}
  .rnav #rweiter{min-width:0;flex:1}
}

/* Zweispalter im Fachtext */
.zweispalt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:22px 0 12px}
.zweispalt .sp{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px}
.zweispalt .sp h3{font-size:19px;margin:0 0 8px}
.zweispalt .sp p{font-size:15.5px;color:var(--mut);margin:0 0 12px}
.zweispalt .sp ul{margin:0;padding-left:19px;font-size:14.5px;color:var(--mut);line-height:1.75}
@media (max-width:760px){.zweispalt{grid-template-columns:minmax(0,1fr)}}

/* Branchenverteiler am Seitenende */
.andere{background:var(--ivory-2)}
.andgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:30px}
.andgrid a,.andgrid .aus{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;display:block}
.andgrid a:hover{border-color:var(--forest-2);box-shadow:var(--shadow)}
.andgrid b{display:block;font-family:'Fraunces',serif;font-size:17px;font-weight:600;
  letter-spacing:-.012em;margin-bottom:4px}
.andgrid span{display:block;font-size:13px;color:var(--mut);line-height:1.45}
.andgrid .aus{background:transparent;border-style:dashed}
.andgrid .alle{background:var(--forest);border-color:var(--forest)}
.andgrid .alle b{color:#fff}
.andgrid .alle span{color:#B9CBC0}
@media (max-width:980px){.andgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:620px){.andgrid{grid-template-columns:minmax(0,1fr)}}
/* .btn setzt display:inline-flex und schlägt damit das UA-display:none
   des hidden-Attributs. Deshalb hier ausdrücklich. */
.btn[hidden],[hidden]{display:none}
/* .rfrage ist jetzt ein <p>, behält aber das Aussehen einer Überschrift */
p.rfrage{font-family:'Fraunces',serif}

/* Fingerziele: auf dem Telefon mindestens 44 px hoch */
@media (max-width:620px){header .hcta .btn{min-height:44px}}

/* ============================================================
   GEWERKLEISTE ALS CHIPS
   Vorher gestapelt: Piktogramm oben, Label darunter, 104 px breit.
   „Versicherungsmakler" passte dort nicht in eine Zeile und brach
   mit Trennstrich um, während elf andere einzeilig blieben. Das
   sah unruhig aus und wäre bei jedem weiteren langen Branchennamen
   wieder aufgetreten.
   Chips lösen das dauerhaft: eine Zeile, Breite nach Inhalt, nie
   ein Umbruch. Die Leiste wird dabei flacher, was dem Hero darunter
   zugutekommt.
   ============================================================ */
.gewerke .rail{gap:8px;padding:11px 0 12px;align-items:center}
.gewerke a{flex:none;width:auto;flex-direction:row;align-items:center;gap:9px;
  white-space:nowrap;padding:8px 15px 8px 12px;border:1px solid var(--line);
  border-radius:999px;background:var(--paper);font-size:14.5px;line-height:1.2;
  color:var(--ink);text-align:left}
.gewerke a svg{width:18px;height:18px;flex:none}
.gewerke a:hover{background:var(--ivory);border-color:var(--forest-2);color:var(--ink)}
.gewerke a[aria-current="page"]{background:var(--forest);border-color:var(--forest);color:#fff}
.gewerke a[aria-current="page"] svg{color:var(--gold)}
/* Auf Touchgeräten das Fingerziel auf 44 px bringen. Auf dem Schreibtisch
   bleiben 36 px, dort zeigt eine Maus und die Leiste bleibt flach. */
@media (max-width:768px){.gewerke a{min-height:44px;padding-top:0;padding-bottom:0}}

/* Zweiteilige Überschrift: Das Hauptkeyword steht in der H1, die
   menschliche Frage als eigener Absatz direkt darunter.

   Vorher stand die Frage als <span> in der H1 selbst, mit der Begründung,
   der Suchbegriff dürfe nicht in einem dekorativen Element landen. Das
   Argument trägt nicht: Ein span in der H1 gehört zum Textinhalt der H1
   und verwässert sie, statt sie zu schützen. Ohne Leerzeichen im Quelltext
   las sie sich sogar zusammengezogen, "ArztpraxenWas ist Ihre Praxis wert".
   Die H1 trägt jetzt nur den Suchbegriff, die Frage steht daneben und
   sieht unverändert aus. */
.h1frage{font-size:clamp(16px,2vw,24px);font-weight:400;letter-spacing:-.012em;
  color:var(--mut);margin:-8px 0 18px;line-height:1.25;
  font-family:'Fraunces',Georgia,serif}
.h1gross + .h1frage{margin-top:-8px}

/* ============================================================
   WISSEN — Darstellungsbausteine für Artikel
   Die Regel dahinter steht in .agents/rules/content-style.mdc:
   Die Antwort steht oben, die Tiefe darunter. Jeder Baustein
   hier existiert, weil eine Zahl, ein Vergleich oder ein Ablauf
   als Fließtext schlechter zu erfassen wäre.
   ============================================================ */

/* Die kurze Antwort. Steht vor allem anderen, trägt die Aussage
   des Artikels in höchstens hundert Wörtern. */
.antwort{background:var(--forest);color:#fff;border-radius:18px;padding:26px 30px;margin:6px 0 26px}
.antwort .lb{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px}
.antwort p{margin:0 0 10px;font-size:17px;line-height:1.6;color:#EAF1EC;max-width:62ch}
.antwort p:last-child{margin-bottom:0}
.antwort b{color:#fff;font-weight:600}
.antwort .gz{font-family:'Fraunces',serif;font-size:clamp(28px,4vw,40px);font-weight:600;
  line-height:1;color:var(--gold);display:block;margin:0 0 12px}
@media (max-width:700px){.antwort{padding:22px;border-radius:16px}}

/* Zahlenband: zwei bis vier Kennzahlen nebeneinander */
.zband{display:grid;gap:16px;margin:26px 0;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.zband div{background:var(--ivory-2);border-radius:14px;padding:20px 22px}
.zband b{display:block;font-family:'Fraunces',serif;font-size:clamp(26px,3.4vw,34px);font-weight:600;
  line-height:1;color:var(--forest)}
.zband b.neg{color:#9A4A28}
.zband span{display:block;font-size:14.5px;color:var(--mut);margin:9px 0 7px;line-height:1.5}
.zband i{display:block;font-style:normal;font-size:12.5px;color:var(--mut);opacity:.85}

/* Balkenvergleich. Werte stehen im Balken, nie nur in der Legende. */
.balken{margin:26px 0}
.balken .bt{font-family:'Fraunces',serif;font-size:19px;font-weight:600;margin-bottom:4px}
.balken .bq{font-size:13px;color:var(--mut);margin-bottom:16px}
.balken .zeile{display:grid;grid-template-columns:minmax(96px,21%) minmax(0,1fr);gap:14px;
  align-items:center;margin-bottom:11px}
.balken .lab{font-size:14.5px;color:var(--mut);line-height:1.35}
.balken .spur{display:flex;align-items:center;gap:10px;min-width:0}
.balken .bar{height:34px;border-radius:8px;background:var(--forest);display:flex;align-items:center;
  justify-content:flex-end;padding:0 12px;color:#fff;font-weight:600;font-size:14.5px;
  white-space:nowrap;flex:none;box-sizing:border-box}
.balken .wert{font-weight:600;font-size:14.5px;color:var(--ink);white-space:nowrap}
.balken .bar.gold{background:var(--gold);color:#2A1F06}
.balken .bar.neg{background:#E5A181;color:#4A2412}
.balken .bar.hell{background:#B9CFC1;color:#1E4436}
@media (max-width:600px){.balken .zeile{grid-template-columns:minmax(0,1fr);gap:5px}
  .balken .bar{height:30px}
  /* Steht der Wert neben dem Balken, passt er auf dem Telefon oft nicht mehr
     in dieselbe Zeile: Balken plus Beschriftung schoben die Seite nach rechts.
     Er rutscht dort unter den Balken, statt sie zu sprengen. */
  .balken .spur{flex-wrap:wrap;gap:4px 10px}
  .balken .wert{white-space:normal}}

/* Formel. Groß gesetzt, weil sie die eigentliche Antwort trägt. */
.formel{background:var(--ivory-2);border-radius:16px;padding:24px 26px;margin:26px 0;
  border-left:4px solid var(--forest-2)}
.formel .fz{font-family:'Fraunces',serif;font-size:clamp(19px,2.4vw,25px);font-weight:600;
  line-height:1.45;color:var(--forest)}
.formel .fz em{font-style:normal;color:var(--gold-ink)}
.formel .fe{font-size:14.5px;color:var(--mut);margin-top:12px;line-height:1.6;max-width:62ch}
.formel .rechnung{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:15.5px}
.formel .rechnung div{display:flex;justify-content:space-between;gap:18px;padding:5px 0}
.formel .rechnung div.sum{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;font-weight:600}
.formel .rechnung span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Gegenüberstellung zweier Wege */
.gegen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:26px 0}
.gegen>div{border:1px solid var(--line);border-radius:16px;padding:22px 24px;background:var(--paper)}
.gegen>div.ja{border-color:#9DBFAB;background:#F3F8F4}
.gegen>div.nein{border-color:#E5C2B0;background:#FBF3EF}
.gegen h3{font-size:18.5px;margin:0 0 12px}
.gegen ul{margin:0 0 14px;padding-left:19px;font-size:15.5px;color:var(--mut);line-height:1.65}
.gegen li{margin-bottom:7px}
.gegen .fuss{padding-top:12px;border-top:1px solid var(--line);font-size:14.5px;
  font-weight:600;color:var(--ink)}
@media (max-width:760px){.gegen{grid-template-columns:minmax(0,1fr)}}

/* Hinweis auf fremde Zuständigkeit. Steuerrecht gehört dem Steuerberater. */
.warn{border:1px solid #E0CFA8;background:#FBF6EA;border-radius:14px;padding:20px 24px;margin:26px 0}
.warn b{display:block;font-family:'Fraunces',serif;font-size:18.5px;font-weight:600;margin-bottom:7px;
  color:#6B4E12}
.warn p{margin:0;font-size:15.5px;line-height:1.6;color:#4E4432;max-width:64ch}

/* Merkliste */
.check{margin:24px 0;padding:0;list-style:none}
.check li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.6}
.check li:first-child{border-top:1px solid var(--line)}
.check li svg{width:20px;height:20px;color:var(--forest-2);margin-top:3px}
.check li b{font-weight:600}

/* Querverweis mitten im Text, dort wo die Frage entsteht */
.verweis{display:flex;gap:12px;align-items:baseline;border-left:3px solid var(--gold);
  padding:2px 0 2px 16px;margin:22px 0;font-size:15.5px;color:var(--mut);max-width:62ch}
.verweis a{color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.verweis a:hover{color:var(--forest-2)}

/* Wasserfall: vom Unternehmenswert zum ausgezahlten Betrag */
.fall{margin:26px 0}
.fall .st{display:grid;grid-template-columns:minmax(110px,26%) minmax(0,1fr) auto;gap:14px;
  align-items:center;padding:7px 0;font-size:15.5px}
.fall .st .lab{color:var(--mut);line-height:1.35}
.fall .st .sp{height:26px;position:relative}
.fall .st .sp i{position:absolute;top:0;bottom:0;border-radius:5px;background:var(--forest)}
.fall .st .sp i.ab{background:#E5A181}
.fall .st .sp i.rest{background:var(--gold)}
.fall .st .w{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.fall .st.erg{border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
@media (max-width:620px){.fall .st{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .fall .st .sp{grid-column:1/-1;order:3}}

/* Zeitstrahl für Fristen und Vorlauf */
.zeit{margin:26px 0;padding:0;list-style:none;border-left:2px solid var(--line);padding-left:26px}
.zeit li{position:relative;padding-bottom:22px}
.zeit li:last-child{padding-bottom:0}
.zeit li::before{content:'';position:absolute;left:-33px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--forest);border:3px solid var(--ivory)}
.zeit li.gold::before{background:var(--gold)}
.zeit .wann{display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:4px}
.zeit .was{display:block;font-family:'Fraunces',serif;font-size:18.5px;font-weight:600;margin-bottom:5px}
.zeit .txt{display:block;font-size:15.5px;color:var(--mut);line-height:1.6;max-width:60ch}

/* Kapitelnavigation innerhalb einer Strecke */
.weiter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:34px 0 0}
.weiter a{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--paper)}
.weiter a:hover{border-color:var(--forest-2)}
.weiter .ri{display:block;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:6px}
.weiter b{display:block;font-family:'Fraunces',serif;font-size:17px;font-weight:600;line-height:1.3}
.weiter a.vor{text-align:right}
/* Erstes Kapitel: Es gibt nur „weiter". Ohne diese Regel steht der rechts
   ausgerichtete Kasten in der linken Spalte und wirkt verrutscht. */
.weiter a.vor:only-child{grid-column:2}
@media (max-width:620px){.weiter{grid-template-columns:minmax(0,1fr)}.weiter a.vor{text-align:left}}

/* Streckenübersicht */
.strecken{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:34px}
.st2{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px 28px;
  display:flex;flex-direction:column}
a.st2:hover{border-color:var(--forest-2);box-shadow:var(--shadow)}
.st2 .nr{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:10px}
.st2 b{font-family:'Fraunces',serif;font-size:23px;font-weight:600;line-height:1.2;letter-spacing:-.02em;
  margin-bottom:9px}
.st2 .satz{font-size:15.5px;color:var(--mut);line-height:1.55}
.st2 .go{margin-top:auto;padding-top:16px;font-size:14.5px;font-weight:600;color:var(--forest);
  display:flex;align-items:center;gap:7px}
.st2 .go svg{width:17px;height:17px;flex:none}
@media (max-width:760px){.strecken{grid-template-columns:minmax(0,1fr)}}

/* Kapitelliste auf der Streckenseite */
.kapitel{list-style:none;padding:0;margin:30px 0 0;counter-reset:kap}
.kapitel li{counter-increment:kap;border-top:1px solid var(--line)}
.kapitel li:last-child{border-bottom:1px solid var(--line)}
.kapitel a{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:18px;align-items:center;
  padding:20px 4px}
.kapitel a:hover b{color:var(--forest)}
.kapitel a::before{content:counter(kap,decimal-leading-zero);font-family:'Fraunces',serif;font-size:19px;
  font-weight:600;color:var(--gold-ink)}
.kapitel .txt{display:block;min-width:0}
.kapitel b{display:block;font-family:'Fraunces',serif;font-size:20px;font-weight:600;line-height:1.28;
  margin-bottom:5px}
.kapitel .txt span{display:block;font-size:14.5px;color:var(--mut);line-height:1.55;max-width:70ch}
.kapitel .dauer{font-size:13px;color:var(--mut);white-space:nowrap;align-self:start;padding-top:4px}
@media (max-width:620px){.kapitel a{grid-template-columns:34px minmax(0,1fr);gap:12px}
  .kapitel .dauer{display:none}}

/* Illustrierter Artikelkopf, wo kein Foto stehen darf */
.akopf.zeichnung{background:var(--forest);display:flex;align-items:center;justify-content:center;
  height:clamp(220px,30vw,360px);overflow:hidden}
.akopf.zeichnung svg{width:min(760px,88%);height:auto;display:block}

/* ============================================================
   UNTERNEHMENSNACHFOLGE — Hub, Zahlen, Bundesländer
   ============================================================ */

/* Länderraster */
.laender{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px}
.laender a{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--paper);
  display:flex;flex-direction:column;gap:6px}
.laender a:hover{border-color:var(--forest-2);box-shadow:var(--shadow)}
.laender b{font-family:'Fraunces',serif;font-size:16px;font-weight:600;line-height:1.25}
.laender span{font-size:13px;color:var(--mut)}
.laender em{font-style:normal;font-weight:600;color:var(--forest)}
@media (max-width:900px){.laender{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.laender{grid-template-columns:minmax(0,1fr)}}

/* Quellenzeile unter Datenblöcken */
.quelle{font-size:13px;color:var(--mut);line-height:1.6;margin:10px 0 0;max-width:70ch}
.quelle a{text-decoration:underline;text-underline-offset:3px}

/* Rangliste aller Bundesländer, kompakt */

/* Drei Wege nebeneinander */
.wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:26px 0}
.wege>div{border:1px solid var(--line);border-radius:16px;padding:22px 24px;background:var(--paper);
  display:flex;flex-direction:column}
.wege h3{font-size:18.5px;margin:0 0 10px}
.wege ul{margin:0;padding-left:19px;font-size:14.5px;color:var(--mut);line-height:1.7}
.wege li{margin-bottom:6px}
.wege .fuer{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:14.5px}
.wege .fuer b{color:var(--forest)}
@media (max-width:860px){.wege{grid-template-columns:minmax(0,1fr)}}

/* Nummerierte Phasenliste auch als <ol>, siehe phasen() in _build.py */
ol.phasen3{list-style:none;padding:0}

/* Lange deutsche Komposita brechen, statt den Kasten zu sprengen.
   Auslöser waren „Berufsausübungsgemeinschaft" in einer Rechnerkachel
   und „Verschwiegenheitserklärung" in einer Phasenkarte. Die Regel gilt
   für alle schmalen Spalten, nicht nur für die beiden Fundstellen. */
.rkachel .ropt,.rliste .tx,.phase,.art2,.ph,.begriff b,.beleg .z,
.quer .reihe a,.andgrid a,.andgrid span{
  overflow-wrap:break-word;hyphens:auto}

@media (max-width:720px){
  /* Auf schmalen Schirmen standen Titel und Beschreibung der Rechnerkachel
     nebeneinander. Bei langen Titeln wie „Tor- und Türtechnik mit Service"
     blieb für die Beschreibung eine Spalte von wenigen Zeichen Breite.
     Die Beschreibung bekommt jetzt eine eigene Zeile unter dem Titel. */
  .rkachel .ropt{flex-wrap:wrap;gap:6px 14px}
  .rkachel .ropt b{flex:1 1 0;min-width:0}
  .rkachel .ropt>span{flex:1 1 100%;padding-left:38px}
}

/* Auswahlkacheln des Rechners auf schmalen Schirmen.
   Bei 390 px blieben je Kachel 107 px, und ein Wort wie
   „Brandschutzbeauftragter" passt dort nicht hinein: Der Text lief aus der
   Kachel heraus. Unterhalb von 640 px steht deshalb eine Kachel je Zeile. */
@media (max-width:640px){
  .wahl{grid-template-columns:minmax(0,1fr)}
  .wahl button{flex-direction:row;text-align:left;gap:14px;padding:16px 18px}
  .wahl button svg{flex:none}
  .wahl button span{text-align:left}
}
.wahl button b,.wahl button span{overflow-wrap:anywhere}

/* Artikelkopf: Fokus und Höhe.
   Das Motiv liegt im Format 3:2, der Kopfbereich zeigt einen Streifen davon.
   Bei mittigem Zuschnitt schnitt der obere Rand regelmäßig das Gesicht ab, weil
   in dokumentarischen Porträts der Kopf im oberen Drittel sitzt. Der Streifen
   ist jetzt höher, und der Zuschnitt liegt bei 30 Prozent statt in der Mitte.
   Dieselbe Zahl steht in _ogbilder.py; wer eine ändert, ändert beide. */
.akopf img{height:clamp(240px,42vw,560px);object-position:center 30%}
.ratbild img{object-position:center 30%}

/* Knöpfe auf schmalen Schirmen.
   .btn trägt white-space:nowrap, damit die Beschriftung auf dem Schreibtisch
   nicht mitten im Wort bricht. Unter 420 px reicht die Spaltenbreite für
   „Unternehmenswert berechnen" nicht mehr: Der Text lief aus dem Knopf heraus
   und wurde vom abgerundeten Hintergrund abgeschnitten. Dort darf er umbrechen. */
@media (max-width:440px){
  .btn{white-space:normal;text-align:center;line-height:1.35;padding:14px 18px}
  .btn svg{align-self:flex-start;margin-top:2px}
}

/* Lange Komposita in den schmalen Kästen.
   „Pflichtteilsergänzungsanspruch" ist 30 Zeichen lang und passt bei 375 px in
   keine Kastenspalte. Ohne Trennung lief das Wort aus dem Belegkasten heraus.
   Die Regel für die Rechnerkacheln gab es schon, die Textkästen des
   Wissensbereichs fehlten darin. */
.beleg p,.begriff p,.warn p,.antwort p,.formel .fe,.formel .rechnung,
.gegen li,.gegen .fuss,.check li,.zeit .txt,.wege li,.balken .lab,.kapitel span{
  overflow-wrap:break-word;hyphens:auto}

/* Rechenaufstellung auf schmalen Schirmen.
   Bezeichnung und Betrag stehen nebeneinander, der Betrag bricht nicht um.
   Steht rechts statt einer Zahl ein Text wie „rund das Zweieinhalbfache",
   blieb für die Bezeichnung links eine Spalte von 43 px: ein Buchstabe je
   Zeile. Unter 520 px rutscht der rechte Teil deshalb in die nächste Zeile. */
@media (max-width:520px){
  .formel .rechnung div{flex-wrap:wrap;gap:2px 14px}
  .formel .rechnung span:last-child{white-space:normal;margin-left:auto}
}


/* ---- /unternehmen-kaufen ---------------------------------------
   Die Käuferseite. Sie nimmt den Hero-Aufbau von /unternehmenswert
   auf, damit beide Marktseiten gleich aussehen, und ergänzt vier
   eigene Bausteine: Wege, Käufertypen, Pflichten, Branchenwolke.
   ---------------------------------------------------------------- */
.kwege{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.kwege .btn{flex:0 1 auto}

.ktypen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.ktyp{background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;display:flex;flex-direction:column}
.ktyp:hover{border-color:var(--forest-2);box-shadow:var(--shadow)}
.ktyp .rolle{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;border-radius:999px;padding:4px 11px;margin-bottom:13px}
.ktyp .rolle.lauf{background:var(--forest);color:#fff}
.ktyp .rolle.einm{background:var(--ivory-2);color:var(--mut)}
.ktyp b{font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:600;
  letter-spacing:-.015em;margin-bottom:8px}
.ktyp .tx{font-size:15.5px;color:var(--mut);line-height:1.6}
.ktyp .go{margin-top:auto;padding-top:16px;font-size:14.5px;font-weight:600;color:var(--forest)}

.kpflichten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:26px}
.kpf{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.kpf b{display:block;font-size:16px;font-weight:600;margin-bottom:7px}
.kpf p{margin:0;font-size:15.5px;color:var(--mut);line-height:1.6}

@media (max-width:820px){
  .ktypen,.kpflichten{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .kwege{flex-direction:column;align-items:stretch}
  .kwege .btn{justify-content:center}
}

/* ============================================================
   KOMPONENTENSEITE /komponenten

   Sie zeigt die Bausteine lebend, nicht als Abbildung. Alles, was
   hier steht, ist deshalb nur Rahmen: Kopfzeile, Klassenname,
   Hinweis. Kein Baustein wird hier umgestaltet — täte er das,
   zeigte die Seite etwas anderes als die Plattform.
   ============================================================ */
.kkopf{background:var(--ivory);padding:44px 0 8px}
.kdoc{max-width:880px;margin:0 auto}
.kgrp{padding:48px 0 8px}
.kgrp:nth-of-type(even){background:var(--ivory-2)}
.kgrp h2{font-size:var(--h2-abschnitt);margin-bottom:10px}
.kgrp .lede{margin-bottom:8px}

.kbs{border:1px solid var(--line);border-radius:16px;background:var(--paper);
  margin:22px 0;overflow:hidden}
.kbs .kk{display:flex;align-items:baseline;gap:9px 14px;flex-wrap:wrap;
  padding:13px 20px;background:var(--ivory);border-bottom:1px solid var(--line)}
.kbs .kk b{font-family:'Fraunces',Georgia,serif;font-size:17px;font-weight:600}
.kbs .kw{margin-left:auto;font-size:13px;color:var(--mut)}
.kbs code,.kdoc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;color:var(--gold-ink);background:var(--paper);
  border:1px solid var(--line);border-radius:6px;padding:2px 7px;white-space:nowrap}
.kbs .kh{margin:0;padding:14px 20px;font-size:14.5px;line-height:1.6;color:var(--mut);
  background:#FBF9F5;border-bottom:1px solid var(--line);max-width:none}
.kbs .kd{padding:24px 20px}
.kbs .kd>:first-child{margin-top:0}
.kbs .kd>:last-child{margin-bottom:0}

/* Farbtafel */
.kfarben{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px}
.kfarbe .sw{height:60px;border-radius:10px;border:1px solid var(--line);margin-bottom:9px}
.kfarbe code{display:inline-block;margin-bottom:5px}
.kfarbe span{display:block;font-size:12.5px;color:var(--mut);letter-spacing:.04em}
.kfarbe i{display:block;font-style:normal;font-size:13px;color:var(--mut);
  line-height:1.45;margin-top:4px}
.kdunkel{background:var(--forest);border-radius:16px;padding:24px 26px}
.kdunkel b{display:block;font-family:'Fraunces',Georgia,serif;font-size:22px;
  font-weight:600;color:#fff;margin-bottom:8px}
.kdunkel p{margin:0;color:#C5D6CB;font-size:15.5px;max-width:60ch}
.kgoldlink{display:inline-block;margin-top:14px;font-size:11.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}

/* Schriftleiter */
.kprobe{margin:0;font-size:24px;line-height:1.35}
.kleiter{display:grid;gap:2px}
.kzeile{display:grid;grid-template-columns:minmax(0,1fr) 168px 190px 44px;
  gap:16px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line)}
.kleiter2 .kzeile{grid-template-columns:minmax(0,1fr) 190px 220px}
.kzeile .kmuster{line-height:1.25;overflow-wrap:break-word}
.kzeile .kmass{font-size:13px;color:var(--mut)}
.kzeile .kmass b{color:var(--ink);font-weight:600}
.kzeile .kwo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  color:var(--gold-ink);overflow-wrap:break-word}
.kzeile .kn2{font-size:12.5px;color:var(--mut);text-align:right}
@media (max-width:760px){
  .kzeile,.kleiter2 .kzeile{grid-template-columns:minmax(0,1fr);gap:4px}
  .kzeile .kn2{text-align:left}
}

/* Demos zeigen zwei oder drei Kacheln statt der vollen Reihe, sonst wird
   jede zu schmal, um etwas zu erkennen. Unter 760 px gilt wieder eine
   Kachel je Zeile — eine feste Spaltenzahl im Demo würde sonst die
   Umbruchregel der Komponente selbst überstimmen und dort Überläufe
   erzeugen, die es auf der echten Seite nicht gibt. */
.kd .kzwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.kd .kdrei{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){
  .kd .kzwei,.kd .kdrei{grid-template-columns:minmax(0,1fr)}
}

/* Die Kopfzeile im Demo: Sie ist klebend und läge sonst über sich selbst. */
/* Die Kopfzeile im Demo: Sie ist klebend und läge sonst über sich selbst.
   Die Umbruchregeln des Kopfes richten sich nach der Fensterbreite, nicht
   nach diesem Kasten — auf dem Telefon ist der Kasten schmaler als der
   Kopf, den er zeigt. Er bekommt deshalb einen eigenen Bildlauf und
   behält die echten Maße, statt den Kopf zu quetschen und damit etwas
   anderes zu zeigen als die Plattform. */
.kkopfdemo{position:relative;background:var(--ivory);border:1px solid var(--line);
  border-radius:12px;overflow-x:auto}
.kkopfdemo .top{position:static;padding-left:18px;padding-right:18px;
  max-width:none;min-width:430px}

/* Reihen für Knöpfe und Pillen */
.kreihe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.kreihe.kmitte{align-items:center}
.kklein{padding:10px 18px;font-size:14.5px}
.kfelder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end}
.kfelder label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);margin-bottom:6px}
@media (max-width:700px){.kfelder{grid-template-columns:minmax(0,1fr)}}

/* Gegenüberstellung falsch/richtig für die Fußzeilenregel */
.kregel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.klbl{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:10px}
.kfalsch .klbl{color:#9A4A28}
.krichtig .klbl{color:var(--forest)}
.kdemo2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kdemo2>div{background:var(--ivory);border:1px solid var(--line);border-radius:12px;
  padding:14px 15px}
.kaus>div{display:flex;flex-direction:column}
.kdemo2 b{display:block;font-family:'Fraunces',Georgia,serif;font-size:15.5px;
  font-weight:600;line-height:1.25;margin-bottom:6px}
.kdemo2 p{margin:0 0 12px;font-size:13px;color:var(--mut);line-height:1.5}
.kdemo2 .kfuss{padding-top:9px;border-top:1px solid var(--line);font-size:12.5px;
  color:var(--mut)}
.kaus .kfuss{margin-top:auto}
@media (max-width:820px){.kregel{grid-template-columns:minmax(0,1fr)}}

/* ---------- Gekoppelte Zeilen, Nachtrag am Blattende ----------
   Gehört inhaltlich zum Block „Kachel mit gekoppelten Zeilen" weiter oben
   und steht nur deshalb hier, weil `.quer a` und `.andgrid a` dasselbe
   Gewicht haben und `display:block` setzen. Wer diese Regeln nach oben
   zurückschiebt, schaltet das Subgrid wieder ab. */
@supports (grid-template-rows: subgrid){
  @media (min-width:761px){
    .andgrid,.quer .reihe{grid-template-rows:auto auto}
    .andgrid>a,.andgrid>span,.quer .reihe a{display:grid;grid-row:span 2;
      grid-template-rows:subgrid;align-content:start}
    .andgrid>a>*,.andgrid>span>*,.quer .reihe a>*{min-width:0}
  }
}