/* ═══════════════════════════════════════════════════════════════════════════
   ENTWURF 2 — „EINE STIMME"
   Kanzlei Rehbein · Bielefeld

   HALTUNG
   Eine Schriftfamilie fuer alles, sehr viel Weiss, ein einziges lautes Signal.
   Die Seite argumentiert nicht mit Wuerde, sondern mit Klarheit: grosse
   Ueberschrift, harte Kanten, keine Verzierung. Zahlen — Fristen, Betraege,
   Paragrafen, die Telefonnummer — stehen in einer Monoschrift, damit sie wie
   Zahlen aussehen und nicht wie Text.

   Der eigentliche Kunstgriff: JEDES RECHTSGEBIET HAT EINE EIGENE FARBE und
   eine eigene Vollflaeche. Wer mit einer Kuendigung kommt, sucht nicht nach
   einer Ueberschrift, sondern nach dem petrolfarbenen Feld. Das traegt sich
   spaeter durch die Unterseiten durch, wenn welche dazukommen.

   WORIN SICH DIESER ENTWURF VON 1 UND 3 UNTERSCHEIDET — im Aufbau:
     Buehne       Eine Ueberschrift ueber die volle Breite, KEIN Bild daneben.
                  Das Bild kommt darunter als randloses Band.  — Entwurf 1
                  stellt Text und Bild nebeneinander, Entwurf 3 legt den Text
                  mittig in ein abgedunkeltes Vollbild.
     Rechtsgebiete  Drei farbige Vollflaechen nebeneinander.  — Entwurf 1 hat
                  ein Register aus Haarlinien, Entwurf 3 Bildkarten.
     Ablauf       Vier Spalten unter einer durchgehenden Linie, nummeriert mit
                  grossen Monoziffern.  — Entwurf 1 nimmt eine waagerechte
                  Zeitleiste mit Punkten, Entwurf 3 eine mitlaufende Liste.
     Kosten       Eine TABELLE: was, wieviel, welche Fundstelle. Nur gepruefte
                  Werte.  — Entwurf 1 schreibt einen Aufsatz, Entwurf 3 baut
                  drei Karten.
     Kontakt      Volle Breite, das Formular ueber zwei Spalten, die Angaben
                  als Monoschrift-Zeile darueber.  — Entwurf 1 stellt Formular
                  und Angaben nebeneinander, Entwurf 3 in eine mittige Karte.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Kontrakt ─────────────────────────────────────────────────────────────────
   Gemessene Kontraste, keine geschaetzten. Die drei Gebietsfarben sind hier
   FLAECHEN, nicht Textfarben — deshalb steht bei jeder, was noch draufdarf.  */
:root{
  --grund:   #FFFFFF;  /* Seitengrund — echtes Weiss, das ist die Handschrift  */
  --tinte:   #0A0A0A;  /* Ueberschriften                    (auf Weiss 19,8:1) */
  --text:    #575757;  /* Fliesstext                        (auf Weiss  7,2:1) */
  --leise:   #767676;  /* Beschriftungen, Meta              (auf Weiss  4,5:1) */
  --linie:   #E5E5E5;  /* Trennlinien — 1,3:1, NIE fuer Text, nie als Umriss
                          eines bedienbaren Elements                           */
  --rand:    #8A8A8A;  /* Umriss bedienbarer Elemente       (auf Weiss  3,5:1) */
  --signal:  #E5003C;  /* das eine laute Rot. Als Text auf Weiss 4,8:1, als
                          Flaeche mit weisser Schrift ebenfalls 4,8:1          */

  /* Eine Farbe je Rechtsgebiet. Alle drei tragen WEISSE Schrift:
       Arbeit  14,7:1 — auch kleiner Text erlaubt
       Familie  5,8:1 — auch kleiner Text erlaubt
       Verkehr  4,3:1 — NUR grosse Schrift (ab 24px oder ab 19px fett).
     Damit die drei Flaechen gleich aussehen, halten sich alle drei an die
     strengste Regel: auf einer Gebietsflaeche steht nichts Kleines. */
  --arbeit:  #002D37;
  --familie: #7A4BC4;
  --verkehr: #C25E00;

  --schrift:'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --spalte: 1240px;
  --tempo: .34s cubic-bezier(.2,.7,.35,1);
  --radius: 0px;
}

/* ── Grundlagen ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0; padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
body{
  font-family:var(--schrift); font-size:17px; line-height:1.62;
  color:var(--text); background:var(--grund);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{display:block; max-width:100%; height:auto}
h1,h2,h3,h4{font-family:var(--schrift); color:var(--tinte); font-weight:700; line-height:1.04;
            letter-spacing:-.028em}
a{color:var(--tinte)}
:focus-visible{outline:2px solid var(--signal); outline-offset:3px}

.wrap{width:min(100% - 40px, var(--spalte)); margin-inline:auto}
.nur-vorleser{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.rubrik{
  display:block; font-family:var(--mono); font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--signal);
}
.rubrik--leise{color:var(--leise)}

/* ── Band ueber allem ─────────────────────────────────────────────────────── */
.entwurf-band{
  background:#F4E58A; color:#2A2400;
  font-size:.84rem; text-align:center; padding:8px 20px;
}
.entwurf-band b{font-weight:700}

/* ── Kopf ─────────────────────────────────────────────────────────────────── */
.kopf{
  position:sticky; top:0; z-index:60;
  background:var(--grund); border-bottom:1px solid var(--linie);
  transition:border-color var(--tempo);
}
.kopf[data-fest="1"]{border-color:var(--tinte)}
.kopf .wrap{display:flex; align-items:center; gap:18px; min-height:68px}
.marke{
  font-size:1.34rem; font-weight:700; color:var(--tinte); text-decoration:none;
  letter-spacing:-.035em; display:flex; align-items:baseline; gap:9px; flex:none;
}
.marke i{
  font-style:normal; font-family:var(--mono); font-size:.64rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--signal);
}
.menue{margin-left:auto; display:flex; gap:28px}
.menue a{
  color:var(--text); text-decoration:none; font-size:.94rem; font-weight:500;
  padding:6px 0; position:relative;
}
.menue a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--signal); transition:right var(--tempo);
}
.menue a:hover{color:var(--tinte)}
.menue a:hover::after{right:0}

.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:var(--radius);
  font-family:var(--schrift); font-weight:700; font-size:.95rem;
  text-decoration:none; border:2px solid var(--signal);
  background:var(--signal); color:#FFFFFF;    /* 4,8:1 */
  cursor:pointer; transition:background var(--tempo), color var(--tempo);
}
.knopf:hover{background:#B80031; border-color:#B80031}
.knopf--leer{background:transparent; color:var(--tinte); border-color:var(--tinte)}
.knopf--leer:hover{background:var(--tinte); color:#FFFFFF}
.knopf--weiss{background:transparent; color:#FFFFFF; border-color:#FFFFFF}
.knopf--weiss:hover{background:#FFFFFF; color:var(--tinte)}
.kopf .knopf{flex:none; padding:11px 18px}
.knopf svg{width:17px; height:17px; flex:none}
.knopf .zahl{font-family:var(--mono); font-weight:700}

.burger{
  display:none; margin-left:auto;
  width:44px; height:44px; background:none;
  border:2px solid var(--tinte); border-radius:var(--radius);
  cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:10px; right:10px; height:2px; background:var(--tinte);
  transition:translate var(--tempo), rotate var(--tempo), opacity var(--tempo);
}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){translate:0 6px; rotate:45deg}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){translate:0 -6px; rotate:-45deg}

/* ── Buehne — eine grosse Ueberschrift, danach ein randloses Bildband ─────── */
.buehne{padding:clamp(48px, 7vw, 108px) 0 0}
.buehne h1{
  font-size:clamp(2.6rem, 7.4vw, 5.6rem); letter-spacing:-.04em;
  margin:20px 0 0; max-width:17ch;
}
.buehne h1 em{font-style:normal; color:var(--signal)}
.buehne-unten{
  display:grid; gap:clamp(24px, 3vw, 48px);
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  align-items:end; margin-top:clamp(26px, 3.4vw, 44px);
}
.buehne-unten p{font-size:clamp(1.02rem, 1.35vw, 1.16rem); max-width:50ch}
.buehne-knoepfe{display:flex; flex-wrap:wrap; gap:12px}

/* Die Monozeile unter der Bühne: drei harte Angaben, durch Schrägstriche
   getrennt. Kein Kasten — sie soll wie eine Zeile aus einem Schriftsatz wirken. */
.monozeile{
  margin-top:clamp(30px, 4vw, 52px);
  border-top:2px solid var(--tinte); border-bottom:1px solid var(--linie);
  display:flex; flex-wrap:wrap; gap:10px 34px; padding:16px 0;
  font-family:var(--mono); font-size:.86rem; color:var(--leise);
}
.monozeile b{color:var(--tinte); font-weight:700}

.bildband{margin-top:clamp(34px, 4vw, 56px)}
.bildband img{width:100%; aspect-ratio:16/6.2; object-fit:cover}
.bildband figcaption{
  font-family:var(--mono); font-size:.78rem; color:var(--leise);
  padding-top:10px; border-top:1px solid var(--linie); margin-top:10px;
}

/* ── Abschnitte ───────────────────────────────────────────────────────────── */
.abschnitt{padding:clamp(58px, 7.5vw, 116px) 0}
.abschnitt-kopf{max-width:58ch; margin-bottom:clamp(30px, 4vw, 56px)}
.abschnitt-kopf h2{font-size:clamp(2rem, 4.4vw, 3.4rem); margin:14px 0 18px}
.abschnitt-kopf p{font-size:1.06rem}

/* ── Rechtsgebiete — drei Vollflaechen ────────────────────────────────────── */
.gebiete{
  display:grid; gap:clamp(18px, 2.2vw, 28px);
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.gebiet-flaeche{
  background:var(--farbe); color:#FFFFFF;
  padding:clamp(26px, 2.8vw, 38px);
  display:flex; flex-direction:column; min-height:340px;
}
/* Die Ziffer sitzt bewusst zurueck. Das geschieht ueber die Textfarbe und
   NICHT ueber opacity: eine Deckkraft auf dem Element waere fuer jedes
   Pruefwerkzeug unsichtbar, die halbdurchsichtige Farbe dagegen wird beim
   Messen richtig mit dem Untergrund verrechnet. 38px sind grosse Schrift,
   noetig sind also 3:1 — die schwaechste der drei Flaechen (Verkehr) kommt
   damit auf 3,3:1. */
.gebiet-flaeche .nr{
  font-family:var(--mono); font-size:2.4rem; font-weight:700; line-height:1;
  color:rgba(255,255,255,.8); margin-bottom:auto;
}
.gebiet-flaeche h3{
  color:#FFFFFF; font-size:clamp(1.6rem, 2.4vw, 2.1rem); margin:30px 0 20px;
}
/* Die Stichwortliste ist bewusst FETT und 20px gross. Nicht aus Geschmack:
   auf der orangefarbenen Flaeche erreicht Weiss 4,3:1 — das genuegt fuer
   grosse Schrift (ab 19px fett), nicht fuer kleine. Alle drei Flaechen
   halten sich daran, damit sie identisch gebaut sind. */
.gebiet-flaeche ul{list-style:none}
.gebiet-flaeche li{
  font-size:1.25rem; font-weight:700; line-height:1.35;
  padding:9px 0; border-top:1px solid rgba(255,255,255,.34);
}
.gebiet-text{padding-top:16px; font-size:.98rem}
.gebiet-text b{color:var(--tinte); font-weight:700}

/* ── Ablauf — vier nummerierte Spalten unter einer Linie ──────────────────── */
.spalten{
  display:grid; gap:clamp(20px, 2.6vw, 36px);
  grid-template-columns:repeat(4, minmax(0, 1fr));
  border-top:2px solid var(--tinte); padding-top:26px;
}
.schritt .nr{
  display:block; font-family:var(--mono); font-size:2.6rem; font-weight:700;
  line-height:1; color:var(--signal); margin-bottom:16px;  /* gross: 3:1 reicht */
}
.schritt h3{font-size:1.3rem; margin-bottom:10px}
.schritt p{font-size:.97rem}
.schritt p + p{margin-top:10px}

/* ── Kosten — eine Tabelle ────────────────────────────────────────────────── */
.tabellenhuelle{overflow-x:auto}
.kosten-tabelle{width:100%; border-collapse:collapse; min-width:640px}
.kosten-tabelle caption{
  text-align:left; font-family:var(--mono); font-size:.78rem; color:var(--leise);
  padding-bottom:14px; letter-spacing:.06em;
}
.kosten-tabelle th,.kosten-tabelle td{
  text-align:left; padding:16px 20px 16px 0; border-bottom:1px solid var(--linie);
  vertical-align:top;
}
.kosten-tabelle thead th{
  font-family:var(--mono); font-size:.74rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--leise); border-bottom:2px solid var(--tinte);
  padding-bottom:12px;
}
.kosten-tabelle tbody th{font-size:1rem; font-weight:700; color:var(--tinte); width:38%}
.kosten-tabelle .wert{font-family:var(--mono); font-weight:700; color:var(--tinte); width:30%}
.kosten-tabelle .quelle{font-family:var(--mono); font-size:.86rem; color:var(--leise)}
.kosten-tabelle .quelle a{color:var(--signal)}
.kosten-nach{
  display:grid; gap:clamp(20px, 3vw, 40px); margin-top:clamp(28px, 3.4vw, 46px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.kosten-nach h3{font-size:1.16rem; margin-bottom:9px}
.kosten-nach p{font-size:.97rem}

/* ── Fragen — zwei Spalten ────────────────────────────────────────────────── */
.fragen{
  display:grid; gap:0 clamp(24px, 3.4vw, 54px);
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:start;
}
.frage{border-top:2px solid var(--tinte)}
.frage + .frage{border-top-width:1px; border-top-color:var(--linie)}
.fragen > .frage:nth-child(2){border-top:2px solid var(--tinte)}
.frage summary{
  list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative;
  font-size:1.14rem; font-weight:700; color:var(--tinte); line-height:1.35;
  letter-spacing:-.015em;
}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{
  content:""; position:absolute; right:10px; top:31px;
  width:15px; height:2px; background:var(--signal);
}
.frage summary::before{
  content:""; position:absolute; right:16px; top:24px;
  width:2px; height:15px; background:var(--signal); transition:opacity var(--tempo);
}
.frage[open] summary::before{opacity:0}
.frage summary:hover{color:var(--signal)}
.frage-inhalt{padding:0 40px 22px 0; font-size:.99rem}
.frage-inhalt p + p{margin-top:11px}
.frage-inhalt strong{color:var(--tinte)}

/* ── Kontakt — volle Breite ───────────────────────────────────────────────── */
.kontakt{background:var(--tinte); color:#D6D6D6}      /* auf #0A0A0A: 13,6:1 */
.kontakt h2,.kontakt h3,.kontakt label{color:#FFFFFF}
.kontakt .rubrik{color:#FF6B90}                        /* auf #0A0A0A:  7,3:1 */
.kontakt .abschnitt-kopf p{color:#D6D6D6}

/* Die Angaben stehen als Monozeile ueber dem Formular — wie eine Kopfzeile
   auf einem Briefbogen. */
.kontakt-kopfzeile{
  display:grid; gap:2px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  border:1px solid #3A3A3A; margin-bottom:clamp(26px, 3vw, 42px);
}
.kontakt-kopfzeile div{padding:20px 22px; background:#141414}
.kontakt-kopfzeile dt{
  font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#A8A8A8; margin-bottom:7px;   /* 7,8:1 */
}
.kontakt-kopfzeile dd{font-size:1.02rem; color:#FFFFFF; line-height:1.5}
.kontakt-kopfzeile dd a{color:#FFFFFF; text-decoration:none; border-bottom:2px solid var(--signal)}
.kontakt-kopfzeile dd .mono{font-family:var(--mono); font-weight:700}
.kontakt-kopfzeile dd small{display:block; font-size:.84rem; color:#A8A8A8; margin-top:5px}

.formular{
  display:grid; gap:0 clamp(20px, 2.6vw, 36px);
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.feld{margin-bottom:20px}
.feld--breit{grid-column:1 / -1}
.feld label{display:block; font-size:.88rem; font-weight:700; margin-bottom:8px}
.feld input,.feld select,.feld textarea{
  width:100%; font-family:var(--schrift); font-size:1rem; color:#FFFFFF;
  background:#141414; border:1px solid #6E6E6E; border-radius:var(--radius);
  padding:13px 15px;                              /* Umriss auf #0A0A0A: 3,9:1 */
}
.feld textarea{min-height:126px; resize:vertical; line-height:1.6}
.feld input::placeholder,.feld textarea::placeholder{color:#9A9A9A}  /* 6,6:1 */
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:2px solid var(--signal); outline-offset:1px; border-color:var(--signal);
}
.feld .hilfe{display:block; font-size:.86rem; color:#B4B4B4; margin-top:7px}  /* 8,9:1 */
.feld .hilfe strong{color:#FFFFFF}
.formular .absenden{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:16px; align-items:center}
.formular .fussnote{grid-column:1 / -1; font-size:.88rem; color:#B4B4B4; margin-top:14px}

/* Der Kostenhinweis steht sichtbar am Kontaktteil, nicht im Kleingedruckten. */
.kostenhinweis{
  grid-column:1 / -1; margin-top:24px;
  border-left:4px solid var(--signal); background:#141414;
  padding:20px 22px; font-size:.96rem; color:#D6D6D6;
}
.kostenhinweis b{color:#FFFFFF}
.kostenhinweis .mono{font-family:var(--mono); font-weight:700; color:#FFFFFF}

/* ── Fuss ─────────────────────────────────────────────────────────────────── */
.fuss{border-top:1px solid var(--linie); padding:clamp(44px, 5vw, 72px) 0 0}
.fuss-gitter{
  display:grid; gap:34px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding-bottom:38px;
}
.fuss-gitter p{font-size:.95rem; margin-top:12px}
.fuss h3{
  font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--leise); margin-bottom:14px;
}
.fuss ul{list-style:none; font-size:.95rem}
.fuss li{padding:4px 0}
.fuss a{color:var(--text); text-decoration:none}
.fuss a:hover{color:var(--signal)}
.fuss-unten{
  border-top:1px solid var(--linie);
  padding:20px 0 calc(20px + var(--daumen-luft, 0px));
  display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between;
  font-family:var(--mono); font-size:.78rem; color:var(--leise);
}

/* ── Daumenleiste ─────────────────────────────────────────────────────────── */
.daumen{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--grund); border-top:2px solid var(--tinte);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom)); gap:10px;
}
.daumen .knopf{flex:1; padding:12px 8px; font-size:.9rem}

/* ── Sanftes Einblenden ───────────────────────────────────────────────────── */
html.js .zeig{opacity:0; translate:0 14px}
html.js .zeig[data-da="1"]{
  opacity:1; translate:0 0;
  transition:opacity .5s ease calc(var(--i, 0) * 65ms),
             translate .5s cubic-bezier(.2,.7,.35,1) calc(var(--i, 0) * 65ms);
}

/* ── Enger ────────────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .gebiete{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .spalten{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:36px 26px}
  .buehne-unten{grid-template-columns:minmax(0, 1fr); align-items:start}
}
@media (max-width:820px){
  .menue{
    position:absolute; left:0; right:0; top:100%;
    background:var(--grund); border-bottom:2px solid var(--tinte);
    flex-direction:column; gap:0; padding:8px 20px 18px; display:none;
  }
  .menue[data-offen="1"]{display:flex}
  .menue a{padding:13px 0; border-bottom:1px solid var(--linie)}
  .kopf .knopf{display:none}
  .burger{display:block}
  .kopf .wrap{position:relative}
  .daumen{display:flex}
  body{--daumen-luft:64px}
  .fragen{grid-template-columns:minmax(0, 1fr)}
  .fragen > .frage:nth-child(2){border-top:1px solid var(--linie)}
  .formular{grid-template-columns:minmax(0, 1fr)}
}
@media (max-width:640px){
  body{font-size:16px}
  html{scroll-padding-top:74px}
  .gebiete{grid-template-columns:minmax(0, 1fr)}
  .gebiet-flaeche{min-height:0}
  .spalten{grid-template-columns:minmax(0, 1fr); gap:32px}
  .bildband img{aspect-ratio:16/10}
  .buehne-knoepfe .knopf{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
  html.js .zeig{opacity:1; translate:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Rechtstexte (Impressum, Datenschutz)
   ═══════════════════════════════════════════════════════════════════════════ */
.rechts-kopf{padding:clamp(44px, 6vw, 84px) 0 clamp(22px, 3vw, 34px)}
.rechts-kopf h1{font-size:clamp(2.1rem, 5vw, 3.4rem); margin:14px 0 14px}
.rechts-kopf .lead{max-width:62ch; font-size:1.05rem}

/* Deutsche Rechtsbegriffe sind lang: „Datenschutzerklaerung",
   „Umsatzsteuer-Identifikationsnummer", „Verbraucherstreitbeilegungsgesetz".
   Auf einem 375px-Bildschirm passt so ein Wort in keine Zeile und wuerde sonst
   ueber den Rand hinausgeschoben — der Text waere abgeschnitten. hyphens trennt
   nach den Regeln der Sprache (lang="de" steht im html-Tag, sonst greift es
   nicht), overflow-wrap ist das Netz darunter fuer Browser ohne Trennmuster.
   Beides vererbt sich, die eine Regel auf dem Behaelter deckt alle Absaetze,
   Listen und Adressen darin ab. */
.rechts-kopf h1,.rechtstext{hyphens:auto; overflow-wrap:break-word}
.rechtstext{max-width:74ch; padding-bottom:clamp(50px, 6vw, 90px)}
.rechtstext section{padding:26px 0; border-top:1px solid var(--linie)}
.rechtstext h2{font-size:1.5rem; margin-bottom:14px}
.rechtstext h3{font-size:1.08rem; margin:22px 0 8px}
.rechtstext p + p{margin-top:12px}
.rechtstext ul{list-style:none; margin:12px 0}
.rechtstext li{position:relative; padding:6px 0 6px 20px}
.rechtstext li::before{
  content:""; position:absolute; left:0; top:1.02em;
  width:10px; height:2px; background:var(--signal);
}
.rechtstext address{font-style:normal; line-height:1.75}
.rechtstext dl{margin:12px 0}
.rechtstext dt{font-weight:700; color:var(--tinte); margin-top:12px}
.rechtstext dd{margin-left:0}
.rechtstext strong{color:var(--tinte)}
.rechtstext a{color:var(--signal)}

.rechts-hinweis{
  border:2px solid var(--tinte); border-left:6px solid var(--signal);
  padding:20px 22px; margin-bottom:10px;
}
.rechts-hinweis b{display:block; color:var(--tinte); margin-bottom:8px}
.rechts-hinweis p{font-size:.96rem}

/* Muss ".rechtstext .zurueck" heissen und nicht nur ".zurueck": die Linkregel
   weiter oben ist spezifischer und faerbte den Knopftext sonst rot auf rot. */
.rechtstext .zurueck{
  display:inline-flex; align-items:center; gap:9px; margin-top:30px;
  padding:13px 24px; border:2px solid var(--tinte); border-radius:var(--radius);
  color:var(--tinte); text-decoration:none; font-weight:700; font-size:.95rem;
}
.rechtstext .zurueck:hover{background:var(--tinte); color:#FFFFFF}