/* wunderwien — shared styling for legal pages (impressum, datenschutz)
   Matches the main site's brand tokens. Self-hosted fonts, no third-party requests (DSGVO). */

:root{
  --blanc:#F2EFE6; --noir:#161616; --vermillon:#D6371E; --outremer:#1E50A0; --jaune:#F2C12B;
  --ink:#2A2A26; --ink-soft:#46423A; --mono-soft:#6E6A5C; --line:#E2DAC8; --card:#FBF9F2;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--blanc); color:var(--noir);
  font-family:'Jost',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px; line-height:1.72; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ── skip link & focus ── */
.skip{position:absolute;left:8px;top:-56px;z-index:200;background:var(--noir);color:var(--blanc);
  padding:10px 16px;border-radius:8px;text-decoration:none;transition:top .15s ease;}
.skip:focus{top:8px;}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--outremer);outline-offset:2px;border-radius:4px;}

/* ── top bar ── */
.bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px clamp(20px,5vw,40px);background:rgba(242,239,230,.92);
  backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line);}
.wordmark{font-family:'Jost',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em;
  color:var(--noir);text-decoration:none;line-height:1;}
.wordmark .r{color:var(--vermillon);}
.langtoggle{display:inline-flex;border:1px solid var(--line);border-radius:100px;overflow:hidden;}
.langtoggle button{font-family:'Overpass Mono',ui-monospace,monospace;font-weight:700;font-size:12px;
  letter-spacing:.06em;padding:0 16px;min-height:44px;display:inline-flex;align-items:center;border:none;background:transparent;color:var(--noir);cursor:pointer;}
.langtoggle button[aria-pressed="true"]{background:var(--noir);color:var(--blanc);}

/* ── layout ── */
main{max-width:760px;margin:0 auto;padding:clamp(34px,6vw,64px) clamp(20px,5vw,40px) 24px;}
.eyebrow{font-family:'Overpass Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:#C0301A;font-weight:600;margin:0 0 10px;}
h1{font-family:'Jost',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(32px,5.2vw,52px);margin:0 0 6px;}
.lede{font-size:18px;color:var(--ink-soft);max-width:60ch;margin:0 0 8px;}
h2{font-family:'Jost',sans-serif;font-weight:700;letter-spacing:-.01em;font-size:clamp(20px,2.6vw,26px);
  margin:42px 0 8px;padding-top:18px;border-top:1px solid var(--line);}
h2:first-of-type{border-top:none;padding-top:0;}
h3{font-weight:600;font-size:17px;margin:22px 0 4px;}
p{margin:0 0 14px;max-width:68ch;}
a{color:var(--outremer);text-decoration:underline;text-underline-offset:2px;}
a:hover{color:var(--vermillon);}
ul{margin:0 0 14px;padding-left:1.2em;max-width:68ch;}
li{margin:4px 0;}
strong{font-weight:600;}

/* ── imprint key/value fields ── */
.fields{margin:6px 0 18px;display:grid;gap:2px;}
.field{padding:12px 0;border-bottom:1px solid var(--line);}
.field .k{font-family:'Overpass Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mono-soft);display:block;margin-bottom:3px;}
.field .v{font-size:17px;}

/* ── TODO blanks (info still needed before go-live) ── */
.todo{background:rgba(242,193,43,.32);border-bottom:1.5px dashed #B98900;border-radius:3px;
  padding:1px 6px;font-style:normal;}
.todo::before{content:"TODO ";font-family:'Overpass Mono',ui-monospace,monospace;font-size:10px;
  font-weight:700;letter-spacing:.1em;color:#7A5200;vertical-align:1px;}

/* ── draft callout ── */
.note{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--vermillon);border-radius:12px;padding:14px 18px;margin:0 0 26px;
  font-size:15px;color:var(--ink-soft);}
.note .ic{flex:none;color:var(--vermillon);font-weight:800;}

/* ── footer ── */
footer{max-width:760px;margin:30px auto 0;padding:24px clamp(20px,5vw,40px) 48px;
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 24px;
  align-items:center;justify-content:space-between;
  font-family:'Overpass Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.04em;color:var(--mono-soft);}
footer a{color:var(--mono-soft);text-decoration:none;}
footer a:hover{color:var(--vermillon);}
footer nav{display:flex;gap:18px;flex-wrap:wrap;}

.back{display:inline-flex;align-items:center;gap:7px;margin-top:30px;font-weight:600;
  font-family:'Jost',sans-serif;text-decoration:none;color:var(--outremer);}
.back:hover{color:var(--vermillon);}

[hidden]{display:none !important;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}