/* ═══════════════════════════════════════════════════════════════════════════
   ENTWURF 1 — „ROBE & PAPIER"
   Kanzlei Rehbein · Bielefeld

   HALTUNG
   Eine Kanzleiseite, die nicht wirbt, sondern auskunft gibt. Der Grund ist
   Papier und nicht Weiss, die Ueberschriften stehen in einer Zeitungsserife,
   darunter arbeitet eine sachliche Grotesk. Es gibt keinen einzigen runden
   Eckenradius und keinen einzigen Schatten — alles wird von Haarlinien
   zusammengehalten, so wie ein Schriftsatz von seiner Gliederung.
   Justizblau traegt die bedienbaren Dinge, Messing ist der einzige Schmuck
   und kommt sparsam.

   WORIN SICH DIESER ENTWURF VON 2 UND 3 UNTERSCHEIDET — im Aufbau, nicht in
   der Farbe:
     Buehne       Zweispaltig. Links der Text, rechts ein hohes Bild
                  (Treppenhaus). Darunter ein schmales Linienband mit drei
                  Angaben.  — Entwurf 2 hat gar kein Buehnenbild, sondern eine
                  Ueberschrift ueber die volle Breite; Entwurf 3 stellt den
                  Text mittig in ein abgedunkeltes Vollbild.
     Rechtsgebiete  Ein nummeriertes REGISTER: roemische Ziffer, Titel,
                  Stichworte — untereinander, nur durch Haarlinien getrennt,
                  keine Karten.  — Entwurf 2 gibt jedem Gebiet eine eigene
                  Farbflaeche; Entwurf 3 baut Bildkarten.
     Ablauf       Waagerechte Zeitleiste mit vier Stationen auf einer Linie.
                  — Entwurf 2 nummeriert vier Spalten in Monoschrift;
                  Entwurf 3 laesst links eine Liste laufen und rechts ein
                  Bild stehenbleiben.
     Kosten       Ein zweispaltiger Aufsatz mit einer eingerueckten Randnotiz.
                  — Entwurf 2 nimmt eine Tabelle, Entwurf 3 drei Karten.
     Kontakt      Zweispaltig: links das Formular, rechts die Angaben als
                  Definitionsliste unter einem Bild.  — Entwurf 2 legt das
                  Formular ueber die volle Breite, Entwurf 3 in eine
                  mittige Karte.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Kontrakt ─────────────────────────────────────────────────────────────────
   Die Zahlen hinter den Farben sind gemessene Kontrastverhaeltnisse, nicht
   geschaetzte. Wo eine Farbe unter 4.5:1 liegt, steht dabei, wofuer sie dann
   noch taugt — genau daran haelt sich der Rest der Datei.                    */
:root{
  --papier:   #F4F1EA;  /* Seitengrund — warmes Papier, kein Weiss             */
  --flaeche:  #FFFFFF;  /* abgesetzte Flaechen, Formularfelder                 */
  --tinte:    #111827;  /* Ueberschriften      (Papier 15,7:1 · Weiss 17,7:1)  */
  --text:     #4B5563;  /* Fliesstext          (Papier  6,7:1 · Weiss  7,6:1)  */
  --leise:    #6B6257;  /* Beschriftungen, Meta            (Papier 5,3:1)      */
  --linie:    #DED8CB;  /* Trennlinien — 1,3:1, NIE fuer Text, nie als Umriss
                           eines bedienbaren Elements                          */
  --rand:     #8A8175;  /* Umriss bedienbarer Elemente     (Papier 3,4:1)      */
  --primaer:  #0B2A6B;  /* Justizblau — Knoepfe, Links     (Papier 12,0:1)     */
  --akzent:   #A6812F;  /* Messing — 3,2:1 auf Papier: Haarlinien, Ziffern ab
                           24px, Zierrat. Nicht fuer kleinen Text.             */
  --akzent-t: #7A5E22;  /* dieselbe Messingidee als Textfarbe (Papier 5,4:1)   */

  --serife:  'Newsreader', Georgia, 'Times New Roman', serif;
  --grotesk: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --spalte: 1180px;
  --tempo: .4s cubic-bezier(.2,.7,.35,1);
  --radius: 0px;         /* durchgehend kantig — das ist die halbe Handschrift */
}

/* ── Grundlagen ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0; padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:86px}
body{
  font-family:var(--grotesk); font-size:17px; line-height:1.68;
  color:var(--text); background:var(--papier);
  -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(--serife); color:var(--tinte); font-weight:600; line-height:1.12}
a{color:var(--primaer)}
:focus-visible{outline:2px solid var(--primaer); 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-size:.74rem; font-weight:700;
  letter-spacing:.19em; text-transform:uppercase; color:var(--leise);
}

/* ── Band ueber allem: das hier ist ein Entwurf ───────────────────────────── */
.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(--papier); border-bottom:1px solid var(--linie);
  transition:box-shadow var(--tempo), background var(--tempo);
}
.kopf[data-fest="1"]{box-shadow:0 1px 0 var(--linie), 0 10px 26px rgba(17,24,39,.07)}
.kopf .wrap{display:flex; align-items:center; gap:18px; min-height:70px}
.marke{
  font-family:var(--serife); font-size:1.32rem; font-weight:600;
  color:var(--tinte); text-decoration:none; letter-spacing:-.005em;
  display:flex; align-items:baseline; gap:9px; flex:none;
}
.marke i{
  font-style:normal; font-family:var(--grotesk); font-size:.66rem;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--akzent-t);
}
.menue{margin-left:auto; display:flex; gap:26px}
.menue a{
  color:var(--text); text-decoration:none; font-size:.94rem;
  padding:6px 0; border-bottom:1px solid transparent;
  transition:color var(--tempo), border-color var(--tempo);
}
.menue a:hover{color:var(--tinte); border-color:var(--akzent)}

.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px; border-radius:var(--radius);
  font-family:var(--grotesk); font-weight:700; font-size:.94rem;
  text-decoration:none; border:1px solid var(--primaer);
  background:var(--primaer); color:#FFFFFF;   /* 13,5:1 */
  cursor:pointer; transition:background var(--tempo), color var(--tempo);
}
.knopf:hover{background:#08214F; border-color:#08214F}
.knopf--leer{background:transparent; color:var(--primaer); border-color:var(--rand)}
.knopf--leer:hover{background:var(--flaeche); border-color:var(--primaer); color:var(--primaer)}
.kopf .knopf{flex:none; padding:10px 18px}
.knopf svg{width:17px; height:17px; flex:none}

.burger{
  display:none; margin-left:auto;
  width:44px; height:44px; background:none;
  border:1px solid var(--rand); border-radius:var(--radius);
  cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:11px; right:11px; height:1.5px; background:var(--tinte);
  transition:translate var(--tempo), rotate var(--tempo), opacity var(--tempo);
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.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 — zweispaltig, Bild rechts ────────────────────────────────────── */
.buehne{padding:clamp(46px, 6vw, 92px) 0 0}
.buehne-gitter{
  display:grid; gap:clamp(30px, 4vw, 56px);
  grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr);
  align-items:center;
}
.buehne h1{
  font-size:clamp(2.3rem, 5vw, 3.75rem); letter-spacing:-.02em;
  margin:16px 0 22px; max-width:16ch;
}
.buehne .lead{font-size:clamp(1.05rem, 1.5vw, 1.2rem); max-width:46ch}
.buehne .lead + .lead{margin-top:14px; font-size:1rem; color:var(--leise)}
.buehne-knoepfe{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.buehne-bild{border:1px solid var(--linie); background:var(--flaeche)}
.buehne-bild img{width:100%; aspect-ratio:3/4; object-fit:cover}

/* Das schmale Linienband unter der Buehne: drei Angaben, durch senkrechte
   Haarlinien getrennt. Kein Kasten, keine Flaeche — nur Linien. */
.band{
  margin-top:clamp(36px, 5vw, 66px);
  border-top:1px solid var(--linie); border-bottom:1px solid var(--linie);
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
}
.band div{padding:22px 26px; border-left:1px solid var(--linie)}
.band div:first-child{border-left:0; padding-left:0}
.band dt{font-size:.74rem; font-weight:700; letter-spacing:.19em;
         text-transform:uppercase; color:var(--leise); margin-bottom:6px}
.band dd{font-family:var(--serife); font-size:1.12rem; color:var(--tinte); line-height:1.35}
.band dd small{display:block; font-family:var(--grotesk); font-size:.86rem;
               color:var(--leise); margin-top:4px}

/* ── Abschnitte ───────────────────────────────────────────────────────────── */
.abschnitt{padding:clamp(56px, 7vw, 104px) 0}
.abschnitt + .abschnitt{border-top:1px solid var(--linie)}
.abschnitt-kopf{max-width:60ch; margin-bottom:clamp(30px, 4vw, 52px)}
.abschnitt-kopf h2{font-size:clamp(1.8rem, 3.4vw, 2.7rem); letter-spacing:-.018em; margin:14px 0 16px}
.abschnitt-kopf p{font-size:1.05rem}

/* ── Rechtsgebiete — als Register, nicht als Karten ───────────────────────── */
.register{border-top:1px solid var(--tinte)}
.gebiet{
  display:grid; gap:8px 34px;
  grid-template-columns:76px minmax(0, 1fr) minmax(0, 1.15fr);
  padding:30px 0; border-bottom:1px solid var(--linie);
  align-items:start;
}
.gebiet .ziffer{
  font-family:var(--serife); font-size:1.9rem; line-height:1;   /* 30px: gross */
  color:var(--akzent); font-weight:600;
}
.gebiet h3{font-size:1.5rem; letter-spacing:-.01em}
.gebiet h3 + p{margin-top:8px; font-size:.97rem; color:var(--leise)}
.gebiet ul{list-style:none; display:flex; flex-wrap:wrap; gap:8px; align-content:start}
.gebiet li{
  border:1px solid var(--linie); background:var(--flaeche);
  padding:6px 12px; font-size:.9rem; color:var(--text);
}

/* ── Ablauf — waagerechte Zeitleiste ──────────────────────────────────────── */
.zeitleiste{
  display:grid; gap:0 26px;
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.station{position:relative; padding-top:44px}
/* Die durchgehende Linie ist ein Pseudo-Element JE Station, nicht eine Linie
   ueber alles: so bricht sie beim Umbruch auf schmalen Bildschirmen sauber mit. */
.station::before{
  content:""; position:absolute; left:0; right:-26px; top:11px;
  height:1px; background:var(--linie);
}
.station:last-child::before{right:0}
.station::after{
  content:""; position:absolute; left:0; top:5px;
  width:13px; height:13px; background:var(--papier);
  border:1.5px solid var(--akzent); border-radius:50%;
}
.station .nr{
  display:block; font-size:.74rem; font-weight:700; letter-spacing:.19em;
  text-transform:uppercase; color:var(--leise); margin-bottom:8px;
}
.station h3{font-size:1.22rem; margin-bottom:9px}
.station p{font-size:.96rem}

/* ── Kosten — Aufsatz mit Randnotiz ───────────────────────────────────────── */
.aufsatz{
  display:grid; gap:clamp(26px, 3.5vw, 52px);
  grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);
  align-items:start;
}
.aufsatz-text > * + *{margin-top:16px}
.aufsatz-text h3{font-size:1.28rem; margin-top:30px}
.aufsatz-text ul{list-style:none; margin-top:14px}
.aufsatz-text li{position:relative; padding:9px 0 9px 22px; border-top:1px solid var(--linie)}
.aufsatz-text li::before{
  content:""; position:absolute; left:0; top:calc(9px + .82em);
  width:11px; height:1px; background:var(--akzent);
}
/* Die Randnotiz ist der einzige Ort auf der Seite mit einer Flaeche darunter —
   deshalb faellt sie auf, ohne dass sie laut sein muesste. */
.randnotiz{
  background:var(--flaeche); border:1px solid var(--linie);
  border-left:3px solid var(--akzent);
  padding:clamp(22px, 2.6vw, 30px);
  position:sticky; top:100px;
}
.randnotiz .rubrik{margin-bottom:10px}
.randnotiz h3{font-size:1.16rem; margin-bottom:12px}
.randnotiz p{font-size:.96rem}
.randnotiz p + p{margin-top:12px}
.randnotiz .quelle{font-size:.86rem; color:var(--leise); margin-top:16px}

/* ── Fragen ───────────────────────────────────────────────────────────────── */
.fragen{border-top:1px solid var(--tinte); max-width:78ch}
.frage{border-bottom:1px solid var(--linie)}
.frage summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--serife); font-size:1.18rem; color:var(--tinte); line-height:1.35;
}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{
  content:"+"; position:absolute; right:8px; top:19px;
  font-family:var(--grotesk); font-size:1.5rem; font-weight:400;
  color:var(--akzent-t); line-height:1; transition:rotate var(--tempo);
}
.frage[open] summary::after{content:"–"}
.frage summary:hover{color:var(--primaer)}
.frage-inhalt{padding:0 44px 24px 0; font-size:1rem}
.frage-inhalt p + p{margin-top:12px}

/* ── Kontakt — links Formular, rechts Angaben ─────────────────────────────── */
.kontakt-gitter{
  display:grid; gap:clamp(30px, 4vw, 60px);
  grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
  align-items:start;
}
.formular{background:var(--flaeche); border:1px solid var(--linie); padding:clamp(24px, 3vw, 38px)}
.feld{margin-bottom:18px}
.feld label{display:block; font-size:.88rem; font-weight:700; color:var(--tinte); margin-bottom:7px}
.feld input,.feld select,.feld textarea{
  width:100%; font-family:var(--grotesk); font-size:1rem; color:var(--tinte);
  background:var(--papier); border:1px solid var(--rand); border-radius:var(--radius);
  padding:12px 14px;
}
.feld textarea{min-height:118px; resize:vertical; line-height:1.6}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:2px solid var(--primaer); outline-offset:1px; border-color:var(--primaer);
}
.feld .hilfe{display:block; font-size:.85rem; color:var(--leise); margin-top:6px}
.formular .knopf{width:100%; margin-top:6px}
.formular .fussnote{font-size:.85rem; color:var(--leise); margin-top:14px}

.angaben{display:grid; gap:22px}
.angaben-bild{border:1px solid var(--linie)}
.angaben-bild img{width:100%; aspect-ratio:16/9; object-fit:cover}
.angaben dl{border-top:1px solid var(--linie)}
.angaben dt{
  font-size:.74rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--leise); padding-top:16px;
}
.angaben dd{
  font-family:var(--serife); font-size:1.1rem; color:var(--tinte);
  padding:4px 0 16px; border-bottom:1px solid var(--linie); line-height:1.45;
}
.angaben dd a{color:var(--primaer); text-decoration:none; border-bottom:1px solid var(--akzent)}
.angaben dd a:hover{color:#08214F}
.angaben dd small{display:block; font-family:var(--grotesk); font-size:.88rem;
                  color:var(--leise); margin-top:4px}
.angaben .zeile{display:flex; align-items:center; gap:9px}
.angaben .zeile svg{width:17px; height:17px; flex:none; color:var(--akzent-t)}

/* Der Kostenhinweis steht hier — sichtbar am Kontaktteil, nicht im Kleingedruckten. */
.kostenhinweis{
  margin-top:26px; border:1px solid var(--rand); padding:18px 20px;
  font-size:.94rem; background:var(--flaeche);
}
.kostenhinweis b{color:var(--tinte)}

/* ── Fuss ─────────────────────────────────────────────────────────────────── */
.fuss{background:var(--tinte); color:#C9CDD6; padding:clamp(44px, 5vw, 70px) 0 0}
.fuss h2,.fuss h3{color:#F4F1EA}
.fuss a{color:#C9CDD6; text-decoration:none}          /* auf #111827: 11,1:1 */
.fuss a:hover{color:#F4F1EA}
.fuss-gitter{
  display:grid; gap:34px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  padding-bottom:38px;
}
.fuss .marke{color:#F4F1EA; font-size:1.3rem}
.fuss .marke i{color:var(--akzent)}                    /* auf #111827: 4,9:1 */
.fuss-gitter p{font-size:.94rem; margin-top:12px}
.fuss h3{font-size:.74rem; font-family:var(--grotesk); font-weight:700;
         letter-spacing:.19em; text-transform:uppercase; color:#A8ADB8; margin-bottom:14px}
.fuss ul{list-style:none; font-size:.94rem}
.fuss li{padding:4px 0}
.fuss-unten{
  border-top:1px solid #2A3140; padding:20px 0 calc(20px + var(--daumen-luft, 0px));
  display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between;
  font-size:.86rem; color:#A8ADB8;                     /* auf #111827: 7,9:1 */
}

/* ── Daumenleiste (nur schmal) ────────────────────────────────────────────── */
.daumen{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--papier); border-top:1px solid var(--linie);
  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 .6s ease calc(var(--i, 0) * 70ms),
             translate .6s cubic-bezier(.2,.7,.35,1) calc(var(--i, 0) * 70ms);
}

/* ── Enger ────────────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .buehne-gitter{grid-template-columns:minmax(0, 1fr)}
  .buehne-bild img{aspect-ratio:16/10}
  .aufsatz{grid-template-columns:minmax(0, 1fr)}
  .randnotiz{position:static}
  .kontakt-gitter{grid-template-columns:minmax(0, 1fr)}
  .zeitleiste{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:32px 26px}
  .station:nth-child(2)::before{right:0}
}
@media (max-width:820px){
  .menue{
    position:absolute; left:0; right:0; top:100%;
    background:var(--papier); border-bottom:1px solid var(--linie);
    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}
}
@media (max-width:640px){
  body{font-size:16px}
  html{scroll-padding-top:76px}
  .band{grid-template-columns:minmax(0, 1fr)}
  .band div{border-left:0; border-top:1px solid var(--linie); padding:18px 0}
  .band div:first-child{border-top:0}
  .gebiet{grid-template-columns:44px minmax(0, 1fr); gap:6px 18px}
  .gebiet ul{grid-column:2}
  .gebiet .ziffer{font-size:1.6rem}
  .zeitleiste{grid-template-columns:minmax(0, 1fr); gap:30px}
  .station::before{right:0}
  .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)
   Eigene Huelle, weil diese Seiten weder Buehne noch Register haben — nur
   langen Fliesstext, der bequem lesbar bleiben muss.
   ═══════════════════════════════════════════════════════════════════════════ */
.rechts-kopf{padding:clamp(44px, 6vw, 84px) 0 clamp(22px, 3vw, 34px)}
.rechts-kopf h1{font-size:clamp(2rem, 4.4vw, 3rem); letter-spacing:-.02em; 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.1rem; 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.05em;
  width:10px; height:1px; background:var(--akzent);
}
.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(--primaer)}

.rechts-hinweis{
  background:var(--flaeche); border:1px solid var(--rand); border-left:3px solid var(--akzent);
  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 wuerde dem Knopf sonst die Schriftfarbe des
   Grundes geben — heller Text auf heller Flaeche. */
.rechtstext .zurueck{
  display:inline-flex; align-items:center; gap:9px; margin-top:30px;
  padding:12px 22px; border:1px solid var(--rand); border-radius:var(--radius);
  color:var(--primaer); text-decoration:none; font-weight:700; font-size:.94rem;
  background:var(--flaeche);
}
.rechtstext .zurueck:hover{border-color:var(--primaer)}