/* Gemeinsame Gestaltung der Rechtsseiten (12.11.2026).
   Bewusst schlank gehalten: Impressum und Datenschutz sind reine Lesetexte und
   brauchen nichts von der Mechanik der Startseite. Farben, Schriften und Fuss-
   zeile sind aber dieselben, damit der Besucher nicht das Gefuehl hat, er sei
   auf einer fremden Seite gelandet. */
*,*::before,*::after{box-sizing:border-box}
:root{
  --paper:#F8F5EF; --surface:#EFEAE0; --ink:#232323; --ink-soft:#56514A; --line:#E2DBCD;
  --gold:#D4AF37; --gold-text:#7A641A; --cta:#F97316; --on-cta:#1A0F00;
  --band-fg:#FFFFFF; --band-muted:#B5AEA4; --band-line:#332F2A;
  --ph:#5D5A88; --ph-bg:#F2F1F8;
  --font:"Poppins","Helvetica Neue",Arial,sans-serif;
  --font-kopf:"Lora",Georgia,"Times New Roman",serif;
  --r:3px;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.72 var(--font);-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:max(16px,4vw)}
.lesewrap{max-width:760px}

header{background:#121212;border-bottom:1px solid var(--band-line);padding-block:13px}
header .wrap{display:flex;align-items:center;gap:18px}
header .logo{display:inline-flex;line-height:0}
header .logo img{height:30px;width:auto;display:block}
header .zurueck{margin-left:auto;color:var(--band-fg);text-decoration:none;
  font-size:14px;letter-spacing:.02em;border-bottom:1px solid transparent;padding-bottom:2px}
@media(hover:hover){header .zurueck:hover{border-bottom-color:var(--gold)}}

main{padding-block:52px 72px}
h1{font:600 clamp(30px,6vw,42px)/1.14 var(--font-kopf);margin:0 0 6px;letter-spacing:-.01em}
.unterzeile{color:var(--ink-soft);font-size:15px;margin:0 0 34px}
h2{font:600 clamp(20px,3.4vw,25px)/1.25 var(--font-kopf);margin:46px 0 12px;
  padding-top:26px;border-top:1px solid var(--line)}
h2:first-of-type{border-top:0;padding-top:0;margin-top:34px}
h3{font:600 16px/1.45 var(--font);margin:26px 0 6px}
p{margin:0 0 15px}
ul{margin:0 0 15px;padding-left:22px}
li{margin-bottom:8px}
a{color:var(--gold-text);text-underline-offset:3px}
@media(hover:hover){a:hover{color:var(--ink)}}
.anschrift{margin:0 0 15px;line-height:1.6}
/* Grossgeschriebene Absaetze aus der Vorlage sind schwer lesbar. Etwas kleiner
   und in der Laufweite geoeffnet, Inhalt bleibt unveraendert. */
.laut{font-size:14.5px;line-height:1.75;letter-spacing:.01em;color:var(--ink-soft)}

/* Offene Stelle, die vor dem Livegang gefuellt werden muss. Anders als auf der
   Startseite ohne Schalter: Auf einer Rechtsseite darf eine Luecke nicht
   unsichtbar sein. */
.offen{background:var(--ph-bg);border:1px solid var(--ph);border-left-width:4px;
  border-radius:var(--r);padding:16px 18px;margin:0 0 15px;color:var(--ph)}
.offen b{display:block;margin-bottom:4px;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.offen p{margin:0}

footer{background:#000;color:var(--band-muted);border-top:1px solid var(--band-line);
  padding-block:34px;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px 44px;justify-content:space-between;align-items:center}
footer a{color:var(--band-muted);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
@media(hover:hover){footer a:hover{color:var(--band-fg);border-bottom-color:var(--gold)}}
footer .links{display:flex;gap:26px;flex-wrap:wrap}

/* Teile, die der Datenschutz-Generator mitbringt (12.11.2026).
   Die Inhaltsuebersicht laeuft in zwei Spalten, damit sie nicht die halbe
   Seite fuellt. Die Aufzaehlungen mit der Klasse m-elements sind die
   Datenarten- und Rechtsgrundlagen-Bloecke am Ende jedes Abschnitts; sie
   bekommen eine ruhige Flaeche, damit man sie beim Lesen ueberspringen kann. */
.index{list-style:none;padding-left:0;margin:0 0 15px;columns:2;column-gap:34px}
.index li{margin-bottom:5px;break-inside:avoid}
.index-link{color:var(--gold-text);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:1px}
@media(hover:hover){.index-link:hover{color:var(--ink);border-bottom-color:var(--gold)}}
@media(max-width:600px){.index{columns:1}}
ul.m-elements{list-style:none;padding:14px 16px;margin:4px 0 15px;
  background:var(--surface);border-radius:var(--r);font-size:14.5px;line-height:1.62}
ul.m-elements li{margin-bottom:7px}
ul.m-elements li:last-child{margin-bottom:0}
.seal{font-size:14px;color:var(--ink-soft);margin:0 0 30px}
/* Der Knopf steht hier mitten im Fliesstext und soll wie ein Link aussehen. */
main .ew-aendern{color:var(--gold-text);border-bottom:1px solid var(--line)}
@media(hover:hover){main .ew-aendern:hover{color:var(--ink);border-bottom-color:var(--gold)}}
/* Die Datenschutzerklaerung nennt viele Internetadressen im Klartext. Eine
   einzige lange Adresse schob die ganze Seite am Handy nach rechts: bei 360 px
   waren es 141 px Ueberhang, gemessen in WebKit und Chromium am 12.11.2026.
   Darum duerfen Adressen hier innerhalb des Wortes umbrechen. */
main a{overflow-wrap:break-word;overflow-wrap:anywhere}