/* rechtliches.css: Impressum und Datenschutz. Look wie start.css, dunkel und hell über html[data-theme]. */
@font-face { font-family: "Montserrat"; src: url("../stile/assets/fonts/Montserrat-Light.woff2") format("woff2"), url("../stile/assets/fonts/Montserrat-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../stile/assets/fonts/Montserrat-Regular.woff2") format("woff2"), url("../stile/assets/fonts/Montserrat-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../stile/assets/fonts/Montserrat-Bold.woff2") format("woff2"), url("../stile/assets/fonts/Montserrat-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

:root {
  --bg: #0E0E0F; --flaeche: #161618; --linie: #2A2B2F; --linie-hover: #3A3B40;
  --text: #F4F4F5; --text-2: #A1A4AB; --text-3: #6B6E76;
  --akzent: #FF6A1A; --akzent-hover: #FF8242;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --rand: clamp(20px, 4vw, 56px);
}
html[data-theme="hell"] {
  --bg: #F4F4F5; --flaeche: #FFFFFF; --linie: #E4E5E8; --linie-hover: #D5D7DC;
  --text: #0E0E0F; --text-2: #3A3B40; --text-3: #6B6E76;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.6; }
a { color: inherit; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }

.kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px var(--rand) 0; }
.logo { position: relative; display: inline-block; line-height: 0; }
.logo img { width: 112px; height: auto; }
.logo .logo-hell { position: absolute; left: 0; top: 0; opacity: 0; }
html[data-theme="hell"] .logo .logo-dunkel { opacity: 0; }
html[data-theme="hell"] .logo .logo-hell { opacity: 1; }
.zurueck { text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.zurueck:hover { color: var(--text); border-bottom-color: var(--akzent); }

.inhalt { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(40px, 8vh, 96px) var(--rand) 64px; }
.label { margin: 0 0 14px; color: var(--akzent); }
.entwurf { display: inline-block; margin: 0 0 18px; padding: 6px 10px; border: 1px solid var(--akzent); border-radius: 3px; color: var(--akzent); }
h1 { margin: 0 0 8px; font-size: clamp(30px, 3.6vw, 44px); font-weight: 300; letter-spacing: -.01em; line-height: 1.15; }
h2 { margin: 40px 0 10px; font-size: 19px; font-weight: 700; padding-top: 18px; border-top: 1px solid var(--linie); }
h3 { margin: 22px 0 6px; font-size: 15px; font-weight: 700; }
p, li { color: var(--text-2); font-weight: 300; font-size: 15.5px; }
p { margin: 0 0 12px; }
ul { margin: 0 0 12px; padding-left: 20px; }
li { margin: 4px 0; }
strong { color: var(--text); font-weight: 700; }
.adresse { color: var(--text); font-weight: 400; }
.inhalt a { text-decoration: none; border-bottom: 1px solid var(--akzent); color: var(--text); }
code { font-family: var(--mono); font-size: 13px; color: var(--text); }
.platzhalter { color: var(--akzent); font-weight: 400; }

.fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 22px var(--rand) 28px; border-top: 1px solid var(--linie); color: var(--text-3); font-size: 13px; }
.fuss p { margin: 0; color: var(--text-3); font-size: 13px; }
.fuss nav { display: flex; gap: 24px; }
.fuss a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid transparent; }
.fuss a:hover, .fuss a[aria-current="page"] { color: var(--text); border-bottom-color: var(--akzent); }
a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

@media (max-width: 520px) { .logo img { width: 84px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }