/* recht.css — Impressum und Datenschutz.
   Eigene Datei statt eingebettet: beide Rechtsseiten teilen sie sich, und wer
   sie liest, soll nicht die halbe Startseite mitladen. Farben und Schriftstapel
   wie auf der Startseite, aber auf Lesbarkeit statt auf Wirkung gebaut. */
:root{
  --gruen:#1C2621;
  --dunkel:#161E1A;
  --schrift:#F3EFE4;
  --schrift2:#C9D1C8;
  --rot:#C4452F;
  --blau:#2F6FB5;
  --linie:rgba(243,239,228,.14);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--dunkel);color:var(--schrift);
     font-family:var(--sans);font-size:17px;line-height:1.65;
     -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto;width:auto}
a{color:var(--schrift)}
a:hover{color:#fff}
a:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:3px}
.wrap{width:min(760px,100% - clamp(32px,8vw,80px));margin-inline:auto;
      padding-bottom:clamp(40px,6vw,72px)}

header{display:flex;flex-wrap:wrap;align-items:center;gap:16px;
       padding:clamp(18px,3vw,28px) 0;margin-bottom:clamp(18px,3vw,30px);
       border-bottom:1px solid var(--linie)}
header .marke img{height:46px;width:auto}
header nav{display:flex;flex-wrap:wrap;gap:16px;margin-left:auto;font-size:15px}
header nav a{color:var(--schrift2);text-decoration:none}
header nav a:hover,header nav a[aria-current]{color:var(--schrift)}
header nav a[aria-current]{text-decoration:underline;text-underline-offset:4px}

/* Deutsche Komposita sprengen schmale Spalten: „Verbraucherstreitbeilegung"
   braucht bei 320 px 297 px und lief ueber. `hyphens:auto` trennt es sauber
   (die Seite ist als `lang="de"` ausgezeichnet, sonst griffe die Trennung
   nicht); `overflow-wrap` faengt den Fall ab, dass ein Browser keine
   Trennmuster hat. */
h1{font-size:clamp(28px,4vw,40px);line-height:1.15;margin:0 0 6px;text-wrap:balance;
   hyphens:auto;overflow-wrap:break-word}
h2{font-size:clamp(19px,2vw,23px);line-height:1.25;margin:clamp(28px,3.4vw,42px) 0 8px;
   text-wrap:balance;hyphens:auto;overflow-wrap:break-word}
p{margin:0 0 14px;text-wrap:pretty}
ul{margin:0 0 14px;padding-left:22px}
li{margin:0 0 4px}
.stand{color:var(--schrift2);font-size:15px;margin-bottom:clamp(18px,2.4vw,28px)}
.lede{font-size:clamp(17px,1.5vw,19px);color:var(--schrift2);
      border-left:3px solid var(--rot);padding-left:clamp(14px,2vw,20px)}
.nw{white-space:nowrap}

footer{margin-top:clamp(36px,5vw,60px);padding-top:clamp(18px,2.4vw,26px);
       border-top:1px solid var(--linie);color:var(--schrift2);font-size:15px}
footer a{color:var(--schrift2)}

@media(prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}