/* Gemeinsames Design für Impressum und Datenschutz */
:root{
  --paper:#f6f3ec;
  --ink:#0c0c0c;
  --yellow:#d9ac3e;
  --yellow-soft:#f3e6bd;
  --red:#a87d1c;
  --grey:#66665f;
  --line:rgba(12,12,12,.16);
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --hand:"Permanent Marker","Comic Sans MS",cursive;
  --wrap:1240px;
  --gutter:clamp(18px,4vw,44px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;font-weight:450;font-stretch:92%;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;z-index:200}
.skip:focus{left:8px}

.big{font-weight:800;font-stretch:70%;text-transform:uppercase;line-height:.9;letter-spacing:-.005em}
.hl{background:linear-gradient(transparent 10%,var(--yellow) 10% 90%,transparent 90%);padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Kopfzeile */
header.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--ink)}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.logo{font-weight:800;font-stretch:70%;font-size:1.9rem;text-transform:uppercase;text-decoration:none;letter-spacing:.01em;line-height:1;padding:4px 8px 0;background:var(--ink);color:var(--yellow);transform:rotate(-2deg);display:inline-block}
.btn{display:inline-block;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);padding:10px 20px 8px;text-decoration:none;font-weight:800;font-stretch:78%;text-transform:uppercase;letter-spacing:.16em;font-size:.92rem;box-shadow:0 10px 22px -12px rgba(12,12,12,.55);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 10px -6px rgba(12,12,12,.5)}

/* Inhalt */
main.legal{padding-block:clamp(40px,7vw,90px)}
.legal .wrap{max-width:900px}
.legal h1{font-size:clamp(3rem,10vw,6.4rem);margin-bottom:32px}
.legal h2{font-weight:800;font-stretch:72%;text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1;margin:44px 0 14px;padding-top:22px;border-top:2px solid var(--ink)}
.legal p{margin-bottom:12px;max-width:46em}
.legal ul{margin:0 0 12px 1.2em;max-width:46em}
.legal li{margin-bottom:4px}

/* Entwurfs-Hinweis und Platzhalter: vor dem Veröffentlichen entfernen bzw. ausfüllen */
.draft{border:2px solid var(--red);background:#fff;padding:18px 22px;margin-bottom:8px;box-shadow:0 18px 34px -20px rgba(12,12,12,.5)}
.draft strong{display:inline-block;background:var(--red);color:#fff;font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:.14em;font-size:.85rem;padding:2px 10px 0;margin-bottom:8px}
.draft p{margin-bottom:8px}
.draft ul{margin-bottom:0}
.todo{background:var(--yellow);padding:0 .3em;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Fuß */
footer{background:var(--ink);color:#aaa;border-top:2px solid #333;padding-block:26px;font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;max-width:var(--wrap)}
footer a{margin-left:20px;text-decoration:none}
footer a:hover{color:var(--yellow)}
footer b{color:var(--yellow);font-weight:800;font-stretch:70%;text-transform:uppercase;font-size:1.3rem;margin-right:12px}

/* Feinschliff */
header.nav{border-bottom:1px solid var(--ink);box-shadow:0 1px 0 var(--yellow)}
.btn{border-width:1px}
.draft{border-width:1px}
.draft strong{background:var(--yellow);color:var(--ink)}

/* Schwarz-Weiß */
:root{--paper:#f7f7f5;--yellow-soft:#ececea;--ink:#0b0b0c}
body{color:#151515}
.hl{background:var(--ink);color:#fff}
.btn{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
footer{background:#0b0b0c;color:#a3a3a3}
.hl{background:linear-gradient(transparent 12%,var(--yellow) 12% 88%,transparent 88%);color:var(--ink)}

/* Logo: Schwarz und Weiß statt Gold */
.logo{background:var(--ink);color:#fff;white-space:nowrap;font-size:1.6rem}
footer b,.foot-brand b{color:#fff}

/* Obere Leiste: schwarz, weiße Schrift, Button in Gold */
header.nav{background:#0b0b0c;border-bottom:1px solid rgba(217,172,62,.55);box-shadow:none}
header.nav .btn{background:transparent;color:var(--yellow);border:1px solid var(--yellow);box-shadow:none}
header.nav .btn:hover{background:var(--yellow);color:var(--ink);transform:none}

/* Goldene Leiste unter dem Menü etwas breiter */
header.nav{border-bottom:3px solid var(--yellow)}

header.nav{border-bottom:0}

/* Gold-Marker in Überschriften: leicht abgerundete Ecken, wie auf der Startseite */
h1 .hl,h2 .hl{display:inline-block;white-space:nowrap;line-height:.84;padding:.1em .17em .06em;border-radius:.11em;background:var(--yellow) !important;color:var(--ink) !important}