/* Gemeinsame Styles für Rechts-/Hilfsseiten (Impressum, Datenschutz, 404).
   Wird zusätzlich zu /assets/styles.css geladen, daher nur Ergänzungen/Overrides. */

header{position:sticky;top:0;background:rgba(244,241,236,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);z-index:20}
.nav{max-width:1180px;margin:0 auto;padding:18px 32px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;row-gap:10px}
/* Auf sehr schmalen Phones reicht die Zeile nicht mehr für Marke + Theme-Schalter + Zurück-Link
   nebeneinander; nav-end (Schalter + Link) darf dann in die zweite Zeile umbrechen, bleibt
   dort aber rechtsbündig statt an den linken Rand zu rutschen. */
@media(max-width:480px){
  .nav{padding:16px 18px}
  .nav-end{margin-left:auto}
}
.brand-mark{width:42px;height:42px;border-radius:50%;background:var(--sage);color:var(--on-sage);display:grid;place-items:center;font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;flex-shrink:0;box-shadow:0 6px 16px -8px rgba(61,79,58,.6)}.brand-mark-svg{width:27px;height:27px;display:block}
.brand-tag{font-size:.64rem;letter-spacing:.098em;text-transform:uppercase;color:#4C5D45;font-weight:560;margin-top:4px;white-space:nowrap}
html[data-theme="dark"] .brand-tag{color:var(--sage2)}
/* Mirrors the staged sizing of .brand-text span in styles.css */
@media(max-width:430px){.brand-tag{font-size:.6rem;letter-spacing:.06em}}
@media(max-width:365px){.brand-tag{display:none}}
.back{color:var(--soft);text-decoration:none;font-size:.92rem;font-weight:500}
.back:hover{color:var(--sage)}
.nav-end{display:flex;align-items:center;gap:16px}

body{font-family:Outfit,sans-serif;background:var(--cream);color:var(--ink);line-height:1.75;font-weight:400}
.legal-wrap{max-width:760px;margin:0 auto;padding:0 32px}
footer .wrap{max-width:1180px}
.hero{padding:74px 0 34px}
.hero h1{color:var(--paper)}
/* Der Hero dieser Seiten ist in beiden Themes dunkel (.hero-overlay über dunklem Verlauf, siehe
   styles.css). var(--sage) ist im Hell-Modus ein dunkles Grün und stand damit dunkel auf dunkel
   (ca. 2:1). var(--gold) folgt der Hero-Konvention aus styles.css (.offer-hero .eyebrow) und ist
   in beiden Themes hell genug (>= 4.5:1). */
.eyebrow{font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:700}
h1{font-family:Fraunces,serif;font-weight:300;font-size:clamp(2.5rem,6vw,4rem);line-height:1.05;margin-top:14px;overflow-wrap:break-word;hyphens:auto}
h2{font-family:Fraunces,serif;font-weight:400;font-size:1.7rem;margin:42px 0 12px}
h3{font-family:Fraunces,serif;font-weight:500;font-size:1.22rem;color:var(--ink);margin:28px 0 10px}
p,li{color:var(--soft);margin-top:12px}
ul{margin-left:20px;margin-top:12px}
ol{margin-left:20px;margin-top:12px}
.box{background:var(--color-surface);border:1px solid var(--line);border-left:4px solid var(--clay);border-radius:14px;padding:24px;margin:30px 0}
.legal-meta{color:var(--muted);font-size:.88rem;margin-top:16px}
.legal-fine{color:var(--muted);font-size:.85rem;line-height:1.6}
.legal-formular{background:var(--color-surface);border:1px solid var(--line);border-radius:14px;padding:26px 28px;margin:20px 0}
.legal-formular p{margin-top:8px}
.legal-hr{border:none;border-top:1px solid var(--line);margin:48px 0}