/* Layout: Goldplatte als Kopfband wie im Ladenschild, darunter eine schmale Textspalte mit Label links und Angabe rechts. */
:root{
  --bg:#faf8f3; --surface:#ffffff; --fg:#17140d; --muted:#5e584a; --line:#e4dcc6;
  --gold-1:#b98f3e; --gold-2:#d4aa4f; --gold-3:#e7c866; --gold-4:#f1e17c;
  --plate-ink:#0b0b0b; --demo-bg:#fbefc4; --demo-fg:#5a4207; --link:#7a5a12; --focus:#7a5a12;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12100b; --surface:#1b1810; --fg:#f2ecdc; --muted:#b4ab94; --line:#352f20;
  --demo-bg:#3a2e0b; --demo-fg:#f1dd94; --link:#e7c866; --focus:#e7c866; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12100b; --surface:#1b1810; --fg:#f2ecdc; --muted:#b4ab94; --line:#352f20;
  --demo-bg:#3a2e0b; --demo-fg:#f1dd94; --link:#e7c866; --focus:#e7c866; color-scheme:dark}

*{box-sizing:border-box;margin:0}
body{
  background:var(--bg); color:var(--fg); font:400 17px/1.65 var(--body);
  padding-block:0 64px;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.wrap{width:min(100%,860px);margin:0 auto}

/* Kopfband */
.plate{
  position:relative; isolation:isolate; overflow:hidden; color:var(--plate-ink);
  margin-top:24px; border-radius:10px; padding:clamp(28px,6vw,56px) clamp(20px,5vw,48px);
  background:
    linear-gradient(90deg,rgba(241,225,124,0) 0%,rgba(241,225,124,.5) 10%,rgba(241,225,124,0) 28%),
    linear-gradient(90deg,rgba(241,225,124,0) 65%,rgba(241,225,124,.75) 100%),
    linear-gradient(180deg,var(--gold-2),var(--gold-3) 50%,var(--gold-1));
}
.plate::before{
  content:"";position:absolute;inset:0;z-index:-1;mix-blend-mode:soft-light;opacity:.9;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='300'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.002 0.9' numOctaves='3' seed='4'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
}
.plate p{font:500 clamp(15px,2.4vw,20px)/1.2 var(--display);letter-spacing:.18em;text-transform:uppercase}
.plate h1{font:500 clamp(48px,11vw,96px)/.95 var(--display);text-transform:uppercase;letter-spacing:.01em;margin-top:.15em;text-wrap:balance}

/* Hinweis */
.demo-note{
  margin-top:20px; padding:12px 16px; border-radius:6px; font-size:15px; line-height:1.5;
  background:var(--demo-bg); color:var(--demo-fg);
}
.demo-note strong{font-weight:500}

/* Abschnitte */
section{
  display:grid; grid-template-columns:minmax(0,270px) minmax(0,1fr); gap:8px 40px;
  padding:32px 0; border-bottom:1px solid var(--line);
}
section:last-of-type{border-bottom:0}
h2{font:500 22px/1.2 var(--display);letter-spacing:.04em;text-transform:uppercase;overflow-wrap:anywhere;hyphens:auto}
.body{display:grid;gap:12px;min-width:0}
.body p{max-width:62ch}
.small{color:var(--muted);font-size:15px}
address{font-style:normal}
dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 20px}
dt{color:var(--muted)}
dd{margin:0;min-width:0;overflow-wrap:anywhere}
a{color:var(--link);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}

/* Demodaten */
.demo{background:var(--demo-bg);color:var(--demo-fg);padding:0 .3em;border-radius:3px}

.copy{
  font:inherit;font-size:14px;color:var(--link);background:none;cursor:pointer;
  border:1px solid var(--line);border-radius:4px;padding:0 8px;margin-left:8px;min-height:28px;
}
.copy{transition:transform 160ms ease-out,border-color 160ms ease-out}
.copy:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.copy:hover{border-color:var(--link)}}

footer{padding-top:24px;color:var(--muted);font-size:15px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

@media (max-width:640px){
  body{font-size:16px}
  section{grid-template-columns:1fr;gap:12px;padding:24px 0}
}

.toc{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;font-size:15px}
ul.list{padding-left:1.2em;display:grid;gap:6px;max-width:62ch}
nav.legal-nav{display:flex;flex-wrap:wrap;gap:8px 24px}


.back{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-size:16px}
.plate p a{color:inherit;text-decoration:none}
.plate p a:hover,.plate p a:focus-visible{text-decoration:underline}
.plate{margin-top:0}