/* Rechtliche Seiten (Impressum, Datenschutz) + Demo-Übersicht – ruhiges, gut lesbares Layout */
:root{--wrap:min(1180px,calc(100% - 32px))}
html,body{overflow-x:clip}
body{font-family:var(--font-sans);font-size:17px;color:var(--ink);background:var(--cream)}
.wrap{width:var(--wrap);margin-inline:auto}

/* Kopfzeile */
.l-head{position:sticky;top:0;z-index:20;background:rgba(250,246,241,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(43,35,38,.08)}
.l-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.logo{display:inline-flex;align-items:center;gap:12px;color:var(--plum-deep)}
.logo-mark{width:40px;height:40px;color:var(--plum)}
.logo-text{display:flex;flex-direction:column;line-height:1.05}
.logo-text b{font-family:var(--font-alt);font-weight:800;letter-spacing:.16em;font-size:18px;color:var(--plum-ink)}
.logo-text small{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:3px}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(43,35,38,.16);background:#fff;font-weight:600;font-size:15px;transition:background .25s,color .25s,border-color .25s}
.back:hover{background:var(--slate);color:#fff;border-color:var(--slate)}

/* Inhalt */
.l-hero{padding:72px 0 28px}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--plum)}
.eyebrow::before{content:"";width:34px;height:2px;background:currentColor}
.l-hero h1{font-family:var(--font-serif);font-weight:600;font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.05;margin:16px 0 14px;color:var(--plum-ink)}
.l-hero p{color:var(--muted);max-width:640px}
.legal{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;padding:24px 0 110px}
.toc{position:sticky;top:110px;align-self:start;font-size:14.5px}
.toc b{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.toc ol{list-style:none;display:grid;gap:2px;border-left:2px solid var(--plum-soft)}
.toc a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);transition:color .2s,border-color .2s}
.toc a:hover{color:var(--plum);border-color:var(--plum)}
.prose{background:#fff;border-radius:28px;padding:clamp(28px,5vw,64px);box-shadow:0 30px 70px -50px rgba(43,35,38,.45);max-width:860px}
.prose h2{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.2;color:var(--plum-ink);margin:2.2em 0 .6em;scroll-margin-top:110px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.06rem;font-weight:700;margin:1.6em 0 .4em;color:var(--slate)}
.prose p,.prose li{color:#3d3437;line-height:1.75}
.prose p+p{margin-top:.85em}
.prose ul{padding-left:1.25em;margin:.6em 0 1em;display:grid;gap:.3em}
.prose a{color:var(--plum);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--plum-deep)}
.prose address{font-style:normal;line-height:1.75}
.card-box{background:var(--plum-mist);border-radius:18px;padding:20px 24px;margin:1em 0}
.card-box.strong{background:var(--slate);color:#fff}
.card-box.strong p,.card-box.strong li{color:rgba(255,255,255,.88)}
.card-box.strong h3{color:#fff;margin-top:0}
.todo{display:inline;background:#FFF1C9;color:#5C4300;border-radius:6px;padding:1px 6px;font-size:.92em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.todo::before{content:"Offen: ";font-weight:700}
.meta{margin-top:2.4em;font-size:14px;color:var(--muted)}

/* Fußzeile */
.l-foot{background:var(--plum-deep);color:rgba(255,255,255,.82);padding:34px 0;font-size:14.5px}
.l-foot .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.l-foot nav{display:flex;gap:22px}
.l-foot a:hover{color:#fff;text-decoration:underline}

@media (max-width:900px){
  .legal{grid-template-columns:1fr;gap:20px}
  .toc{position:static}
  .l-hero{padding:48px 0 18px}
  .back span{display:none}
}

/* =========================================================
   Tag/Nacht (29.10.2026): head.js setzt html[data-theme="day"|"night"] nach Sonnenstand in Marne.
   Tag = Creme wie bisher (oben). Nacht = dunkle Palette wie die Startseite (Entwurf B).
   Kontraste (Nacht): Fließtext #D6CCD1 auf #1B1418 ≈ 11,6:1 · Nebentext #9D9197 ≈ 6:1 · Gold #E4CC93 ≈ 12:1
   ========================================================= */
html[data-theme="night"]{color-scheme:dark;background:#140F12;--focus-ring:#E4CC93}
html[data-theme="night"] body{color:#F4EEF1;background:#140F12}
html[data-theme="night"] ::selection{background:rgba(201,164,92,.38);color:#fff}
html[data-theme="night"] .skip-link{background:#C9A45C;color:#1A1216}
html[data-theme="night"] .l-head{background:rgba(20,15,18,.86);border-bottom-color:rgba(255,255,255,.08)}
html[data-theme="night"] .logo{color:#C9A45C}
html[data-theme="night"] .logo-mark{color:#C9A45C}
html[data-theme="night"] .logo-text b{color:#F4EEF1}
html[data-theme="night"] .logo-text small{color:#B9AEB3}
html[data-theme="night"] .back{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#F4EEF1}
html[data-theme="night"] .back:hover{background:#C9A45C;border-color:#C9A45C;color:#1A1216}
html[data-theme="night"] .eyebrow{color:#E4CC93}
html[data-theme="night"] .l-hero h1{color:#F4EEF1}
html[data-theme="night"] .l-hero p{color:#B9AEB3}
html[data-theme="night"] .l-hero p a{color:#E4CC93;text-decoration:underline;text-underline-offset:3px}
html[data-theme="night"] .toc b{color:#9D9197}
html[data-theme="night"] .toc ol{border-left-color:rgba(217,174,189,.22)}
html[data-theme="night"] .toc a{color:#B9AEB3}
html[data-theme="night"] .toc a:hover{color:#E4CC93;border-color:#E4CC93}
html[data-theme="night"] .prose{background:#1B1418;border:1px solid rgba(255,255,255,.07);box-shadow:0 30px 80px -50px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04)}
html[data-theme="night"] .prose h2{color:#F4EEF1}
html[data-theme="night"] .prose h3{color:#D9AEBD}
html[data-theme="night"] .prose p,html[data-theme="night"] .prose li,html[data-theme="night"] .prose address{color:#D6CCD1}
html[data-theme="night"] .prose strong,html[data-theme="night"] .prose b{color:#F4EEF1}
html[data-theme="night"] .prose a{color:#E4CC93}
html[data-theme="night"] .prose a:hover{color:#fff}
html[data-theme="night"] .card-box{background:#241B20;border:1px solid rgba(255,255,255,.06)}
html[data-theme="night"] .card-box.strong{background:#2C2128;border-color:rgba(201,164,92,.3)}
html[data-theme="night"] .card-box.strong p,html[data-theme="night"] .card-box.strong li{color:rgba(255,255,255,.88)}
html[data-theme="night"] .todo{background:rgba(228,204,147,.16);color:#F3DFA8}
html[data-theme="night"] .meta{color:#9D9197}
html[data-theme="night"] .l-foot{background:#0E0A0C;color:rgba(255,255,255,.78);border-top:1px solid rgba(255,255,255,.08)}
html[data-theme="night"] .l-foot a:hover{color:#E4CC93}

/* Automatischer Wechsel bei Sonnenauf-/-untergang: weich überblenden */
html.theme-anim body,html.theme-anim .l-head,html.theme-anim .prose,html.theme-anim .l-foot,html.theme-anim .card-box,
html.theme-anim .prose p,html.theme-anim .prose li,html.theme-anim .prose h2,html.theme-anim .l-hero h1{transition:background-color 1s ease,color 1s ease,border-color 1s ease}

/* Original-Logos (falls eingebunden; Stil + Farbe: marke.css .brand-logo) */
.l-head .logo-service-mark{width:56px}
.l-foot .logo-service{width:120px}