/* ═══════════════════════════════════════════════════════════════════════════
   ENTWURF 3 — „NACHTKANZLEI"
   Kanzlei Rehbein · Bielefeld

   HALTUNG
   Dunkle Zinkflaechen, ein kuehles Blau, weiche 6px-Ecken. Diese Seite sieht
   aus wie ein gutes Softwareprodukt und nicht wie eine Kanzlei. Das ist
   Absicht — und es ist zugleich das Risiko dieses Entwurfs.

   AUSDRUECKLICHE EINSCHRAENKUNG
   Dunkle Kanzleiseiten funktionieren dort, wo die Mandantschaft juenger und
   digital-affin ist: IT-Recht, Datenschutz, Wirtschaftsrecht. Fuer eine
   Kanzlei, deren zweites Standbein FAMILIENRECHT ist, ist dieser Ton mit
   Vorsicht zu geniessen: wer wegen einer Trennung, eines Sorgerechtsstreits
   oder eines Unterhaltsverfahrens auf die Seite kommt, sucht Waerme und
   Verlaesslichkeit, nicht Coolness. Der Entwurf steht hier trotzdem — weil
   man den Unterschied sehen muss, um sich bewusst dagegen zu entscheiden.
   Wer ihn nimmt, sollte die Bildsprache warm halten und die Texte weich.

   WORIN SICH DIESER ENTWURF VON 1 UND 2 UNTERSCHEIDET — im Aufbau:
     Buehne       Alles MITTIG in einem abgedunkelten Vollbild.  — Entwurf 1
                  stellt Text und Bild nebeneinander, Entwurf 2 nimmt eine
                  Ueberschrift ueber die volle Breite ohne Bild.
     Rechtsgebiete  BILDKARTEN mit weichen Ecken.  — Entwurf 1 hat ein
                  Register aus Haarlinien, Entwurf 2 farbige Vollflaechen.
     Ablauf       Links eine mitlaufende Liste, rechts ein Bild, das beim
                  Scrollen stehenbleibt (sticky).  — Entwurf 1 nimmt eine
                  waagerechte Zeitleiste, Entwurf 2 vier nummerierte Spalten.
     Kosten       Drei Karten mit grossen Zahlen, darunter ein Fliessteil.
                  — Entwurf 1 schreibt einen Aufsatz, Entwurf 2 baut eine
                  Tabelle.
     Kontakt      Das Formular steht MITTIG in einer Karte, die Angaben
                  darunter als Kacheln.  — Entwurf 1 stellt beides
                  nebeneinander, Entwurf 2 legt das Formular breit.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Kontrakt ─────────────────────────────────────────────────────────────────
   Gemessene Kontraste. Auf dunklem Grund ist die haeufigste Falle eine zu
   dunkle Linie, die dann als Umriss eines Knopfes benutzt wird — deshalb
   stehen --linie und --rand hier getrennt und tragen ihre Werte im Kommentar. */
:root{
  --grund:   #09090B;  /* Seitengrund                                          */
  --karte:   #18181B;  /* Kartenflaeche, Formularfelder                        */
  --karte-h: #202024;  /* Karte bei Hover                                      */
  --tinte:   #FAFAFA;  /* Ueberschriften   (Grund 19,1:1 · Karte 17,0:1)       */
  --text:    #A1A1AA;  /* Fliesstext       (Grund  7,8:1 · Karte  6,9:1)       */
  --linie:   #3F3F46;  /* Trennlinien — 1,9:1. NIE fuer Text, NIE als Umriss
                          eines bedienbaren Elements                           */
  --rand:    #71717A;  /* Umriss bedienbarer Elemente (Grund 4,1:1 · Karte 3,7:1) */
  --akzent:  #60A5FA;  /* kuehles Blau     (Grund  7,8:1 · Karte  7,0:1)
                          als Flaeche mit dunkler Schrift ebenfalls 7,8:1      */

  --display:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --spalte: 1200px;
  --tempo: .36s cubic-bezier(.2,.7,.35,1);
  --radius: 6px;         /* Karten, Felder                                     */
  --radius-knopf: 0px;   /* der Primaerknopf bleibt kantig — der eine Bruch    */
}

/* ── 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.66;
  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(--display); color:var(--tinte); font-weight:600;
            line-height:1.1; letter-spacing:-.02em}
a{color:var(--akzent)}
:focus-visible{outline:2px solid var(--akzent); outline-offset:3px; border-radius:2px}

.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:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--akzent);
}

/* ── 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:rgba(9,9,11,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color var(--tempo);
}
.kopf[data-fest="1"]{border-color:var(--linie)}
.kopf .wrap{display:flex; align-items:center; gap:18px; min-height:68px}
.marke{
  font-family:var(--display); font-size:1.3rem; font-weight:600;
  color:var(--tinte); text-decoration:none; letter-spacing:-.025em;
  display:flex; align-items:baseline; gap:9px; flex:none;
}
.marke i{
  font-style:normal; font-family:var(--schrift); font-size:.66rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--akzent);
}
.menue{margin-left:auto; display:flex; gap:26px}
.menue a{
  color:var(--text); text-decoration:none; font-size:.94rem;
  padding:6px 0; transition:color var(--tempo);
}
.menue a:hover{color:var(--tinte)}

.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:var(--radius-knopf);
  font-family:var(--schrift); font-weight:600; font-size:.95rem;
  text-decoration:none; border:1px solid var(--akzent);
  background:var(--akzent); color:#09090B;    /* 7,8:1 */
  cursor:pointer; transition:background var(--tempo), border-color var(--tempo);
}
.knopf:hover{background:#93C5FD; border-color:#93C5FD}
.knopf--leer{
  background:transparent; color:var(--tinte); border-color:var(--rand);
  border-radius:var(--radius);
}
.knopf--leer:hover{background:var(--karte); border-color:var(--tinte)}
.kopf .knopf{flex:none; padding:11px 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 — mittig in einem abgedunkelten Vollbild ──────────────────────── */
.buehne{position:relative; isolation:isolate; overflow:clip}
.buehne-bild{position:absolute; inset:0; z-index:-2}
.buehne-bild img{width:100%; height:100%; object-fit:cover}
/* Der Schleier ist der Grund, warum die Schrift ueberhaupt lesbar ist. Er
   liegt in der Mitte bei 0,84 sehr hoch — lieber ein zu dunkles Bild als ein
   Text, der ueber einer hellen Stelle verschwindet.
   Gemessen im schlimmsten denkbaren Fall, also gegen eine REINWEISSE Stelle
   im Bild: an der duennsten Stelle (0,84) ergibt das rgb(48,48,50), darauf
   Ueberschrift 12,6:1, Fliesstext 5,1:1, Akzentblau 5,2:1. Wird der Wert
   gesenkt, faellt der Fliesstext unter 4,5:1. */
.buehne-schleier{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(9,9,11,.92) 0%, rgba(9,9,11,.84) 46%, rgba(9,9,11,.97) 100%);
}
.buehne .wrap{
  padding:clamp(70px, 11vw, 150px) 0 clamp(56px, 8vw, 108px);
  text-align:center; display:flex; flex-direction:column; align-items:center;
}
.buehne h1{
  font-size:clamp(2.3rem, 5.6vw, 4.1rem); margin:18px 0 24px;
  max-width:18ch; letter-spacing:-.03em;
}
.buehne .lead{font-size:clamp(1.04rem, 1.5vw, 1.2rem); max-width:56ch}
.buehne-knoepfe{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:32px}

.marker{
  display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center;
  margin-top:clamp(34px, 4vw, 52px);
}
.marker span{
  border:1px solid var(--linie); border-radius:999px;
  background:var(--karte); color:var(--text);      /* auf Karte 6,9:1 */
  padding:8px 16px; font-size:.9rem;
}
.marker b{color:var(--tinte); font-weight:600}

/* ── Abschnitte ───────────────────────────────────────────────────────────── */
.abschnitt{padding:clamp(58px, 7vw, 112px) 0}
.abschnitt--karte{background:var(--karte)}
.abschnitt-kopf{max-width:58ch; margin-bottom:clamp(30px, 4vw, 54px)}
.abschnitt-kopf--mitte{margin-inline:auto; text-align:center}
.abschnitt-kopf h2{font-size:clamp(1.9rem, 3.8vw, 2.9rem); margin:14px 0 16px}
.abschnitt-kopf p{font-size:1.05rem}

/* ── Rechtsgebiete — Bildkarten ───────────────────────────────────────────── */
.karten{
  display:grid; gap:clamp(18px, 2.2vw, 26px);
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.gebiet-karte{
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
  overflow:clip; display:flex; flex-direction:column;
  transition:border-color var(--tempo), background var(--tempo), translate var(--tempo);
}
.gebiet-karte:hover{border-color:var(--rand); background:var(--karte-h); translate:0 -4px}
.gebiet-karte > img{width:100%; aspect-ratio:16/9; object-fit:cover}
.gebiet-karte .inhalt{padding:clamp(20px, 2.4vw, 28px); display:flex; flex-direction:column; flex:1}
.gebiet-karte h3{font-size:1.42rem; margin-bottom:10px}
.gebiet-karte > .inhalt > p{font-size:.97rem}
.gebiet-karte ul{list-style:none; margin-top:16px; border-top:1px solid var(--linie)}
.gebiet-karte li{
  font-size:.94rem; padding:9px 0 9px 20px; position:relative;
  border-bottom:1px solid var(--linie);
}
.gebiet-karte li::before{
  content:""; position:absolute; left:0; top:calc(9px + .78em);
  width:11px; height:1px; background:var(--akzent);
}

/* ── Ablauf — links laufende Liste, rechts stehenbleibendes Bild ──────────── */
.ablauf-gitter{
  display:grid; gap:clamp(28px, 4vw, 60px);
  grid-template-columns:minmax(0, 1fr) minmax(0, .82fr);
  align-items:start;
}
.schritte{list-style:none; counter-reset:schritt}
.schritt{
  counter-increment:schritt; position:relative;
  padding:0 0 34px 62px;
}
/* Die senkrechte Linie ist ein Pseudo-Element je Schritt und endet beim
   letzten — so bleibt sie auch dann sauber, wenn Text unterschiedlich lang
   umbricht. */
.schritt::before{
  content:""; position:absolute; left:19px; top:40px; bottom:0; width:1px;
  background:var(--linie);
}
.schritt:last-child{padding-bottom:0}
.schritt:last-child::before{display:none}
.schritt::after{
  content:counter(schritt, decimal-leading-zero);
  position:absolute; left:0; top:0;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--akzent); color:var(--akzent);
  display:grid; place-items:center;
  font-size:.86rem; font-weight:600; font-family:var(--schrift);
  background:var(--grund);
}
.abschnitt--karte .schritt::after{background:var(--karte)}
.schritt h3{font-size:1.28rem; margin:8px 0 9px}
.schritt p{font-size:.98rem}
.schritt p + p{margin-top:10px}
.ablauf-bild{position:sticky; top:100px; border-radius:var(--radius); overflow:clip;
             border:1px solid var(--linie)}
.ablauf-bild img{width:100%; aspect-ratio:3/4; object-fit:cover}

/* ── Kosten — drei Karten mit grossen Zahlen ──────────────────────────────── */
.zahlkarten{
  display:grid; gap:clamp(18px, 2.2vw, 26px);
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.zahlkarte{
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
  padding:clamp(24px, 2.8vw, 34px);
}
.zahlkarte .gross{
  display:block; font-family:var(--display); font-size:clamp(2.2rem, 4vw, 3rem);
  font-weight:600; color:var(--akzent); line-height:1; letter-spacing:-.03em;
}
.zahlkarte h3{font-size:1.14rem; margin:16px 0 9px}
.zahlkarte p{font-size:.95rem}
.zahlkarte .quelle{
  display:block; margin-top:16px; padding-top:14px; border-top:1px solid var(--linie);
  font-size:.86rem; color:var(--text);
}

.kosten-text{
  margin-top:clamp(30px, 3.6vw, 50px);
  display:grid; gap:clamp(22px, 3vw, 42px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.kosten-text h3{font-size:1.14rem; margin-bottom:9px}
.kosten-text p{font-size:.96rem}
.kosten-text p + p{margin-top:10px}
.kosten-text strong{color:var(--tinte); font-weight:600}

/* ── Fragen — einspaltig, mittig ──────────────────────────────────────────── */
.fragen{max-width:78ch; margin-inline:auto}
.frage{
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
  margin-bottom:12px; overflow:clip;
}
.abschnitt--karte .frage{background:var(--grund)}
.frage summary{
  list-style:none; cursor:pointer; padding:19px 52px 19px 22px; position:relative;
  font-family:var(--display); font-size:1.1rem; font-weight:600; color:var(--tinte);
  line-height:1.4;
}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{
  content:""; position:absolute; right:22px; top:50%; translate:0 -50%;
  width:10px; height:10px; border-right:2px solid var(--akzent);
  border-bottom:2px solid var(--akzent); rotate:45deg; margin-top:-4px;
  transition:rotate var(--tempo);
}
.frage[open] summary::after{rotate:-135deg; margin-top:2px}
.frage summary:hover{color:var(--akzent)}
.frage-inhalt{padding:0 52px 22px 22px; font-size:.99rem}
.frage-inhalt p + p{margin-top:11px}
.frage-inhalt strong{color:var(--tinte); font-weight:600}

/* ── Kontakt — Formular mittig in einer Karte ─────────────────────────────── */
.formular{
  max-width:640px; margin-inline:auto;
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
  padding:clamp(24px, 3vw, 40px);
}
.feld{margin-bottom:19px}
.feld label{display:block; font-size:.88rem; font-weight:600; color:var(--tinte); margin-bottom:8px}
.feld input,.feld select,.feld textarea{
  width:100%; font-family:var(--schrift); font-size:1rem; color:var(--tinte);
  background:var(--grund); border:1px solid var(--rand); border-radius:var(--radius);
  padding:13px 15px;
}
.feld textarea{min-height:124px; resize:vertical; line-height:1.6}
/* Die Felder stehen auf --grund in einer Karte aus --karte. Der
   Platzhaltertext wird deshalb gegen --grund gemessen, nicht gegen --karte. */
.feld input::placeholder,.feld textarea::placeholder{color:#8E8E97}  /* Grund 6,1:1 */
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:2px solid var(--akzent); outline-offset:1px; border-color:var(--akzent);
}
.feld .hilfe{display:block; font-size:.86rem; color:var(--text); margin-top:7px}
.feld .hilfe strong{color:var(--tinte); font-weight:600}
.formular .knopf{width:100%; margin-top:4px}
.formular .fussnote{font-size:.87rem; margin-top:14px}

/* Der Kostenhinweis steht sichtbar am Kontaktteil, nicht im Kleingedruckten. */
.kostenhinweis{
  max-width:640px; margin:22px auto 0;
  border:1px solid var(--akzent); border-radius:var(--radius);
  padding:20px 22px; font-size:.95rem;
}
.kostenhinweis b{color:var(--tinte); font-weight:600}

.kacheln{
  max-width:900px; margin:clamp(34px, 4vw, 54px) auto 0;
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.kachel{
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
  padding:20px 22px;
}
.kachel dt{
  font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--akzent); margin-bottom:8px;
}
.kachel dd{color:var(--tinte); font-size:1rem; line-height:1.5}
.kachel dd a{color:var(--tinte); text-decoration:none; border-bottom:1px solid var(--akzent)}
.kachel dd a:hover{color:var(--akzent)}
.kachel dd small{display:block; font-size:.85rem; color:var(--text); margin-top:5px}

/* ── 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:36px;
}
.fuss-gitter p{font-size:.95rem; margin-top:12px}
.fuss h3{
  font-family:var(--schrift); font-size:.72rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text); 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(--akzent)}
.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-size:.85rem;
}

/* ── Daumenleiste ─────────────────────────────────────────────────────────── */
.daumen{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:rgba(9,9,11,.95); backdrop-filter:blur(10px);
  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 .55s ease calc(var(--i, 0) * 70ms),
             translate .55s cubic-bezier(.2,.7,.35,1) calc(var(--i, 0) * 70ms);
}

/* ── Enger ────────────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .karten{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .zahlkarten{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .ablauf-gitter{grid-template-columns:minmax(0, 1fr)}
  .ablauf-bild{position:static; order:-1}
  .ablauf-bild img{aspect-ratio:16/9}
}
@media (max-width:820px){
  .menue{
    position:absolute; left:0; right:0; top:100%;
    background:var(--grund); 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:74px}
  .karten{grid-template-columns:minmax(0, 1fr)}
  .zahlkarten{grid-template-columns:minmax(0, 1fr)}
  .buehne-knoepfe .knopf{width:100%}
  .schritt{padding-left:52px}
  .schritt::before{left:16px}
  .schritt::after{width:34px; height:34px; font-size:.8rem}
  .frage summary{padding:17px 44px 17px 18px}
  .frage-inhalt{padding:0 44px 20px 18px}
}

@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(2rem, 4.4vw, 3rem); 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.46rem; 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.05em;
  width:11px; height:1px; background:var(--akzent);
}
.rechtstext address{font-style:normal; line-height:1.75}
.rechtstext dl{margin:12px 0}
.rechtstext dt{font-weight:600; color:var(--tinte); margin-top:12px}
.rechtstext dd{margin-left:0}
.rechtstext strong{color:var(--tinte); font-weight:600}
.rechtstext a{color:var(--akzent)}

.rechts-hinweis{
  background:var(--karte); border:1px solid var(--akzent); border-radius:var(--radius);
  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 blau — und
   damit auf blauem Grund unlesbar. */
.rechtstext .zurueck{
  display:inline-flex; align-items:center; gap:9px; margin-top:30px;
  padding:13px 24px; border:1px solid var(--rand); border-radius:var(--radius);
  color:var(--tinte); text-decoration:none; font-weight:600; font-size:.95rem;
  background:var(--karte);
}
.rechtstext .zurueck:hover{border-color:var(--tinte)}