/* ============================================================
   Nexivo — Rechtsseiten (Impressum, Datenschutz)
   Gleiche Design-Tokens wie index.html (helles Papier, Signal-Türkis,
   Manrope/DM Sans) — ersetzt das ältere dunkle Subseiten-Template.
   ============================================================ */

:root{
  --ink: #0B1416;
  --ink-panel: #101B1D;
  --ink-line: rgba(244,242,236,.14);
  --paper: #F3F0E9;
  --paper-2: #FBFAF6;
  --paper-line: rgba(11,20,22,.12);
  --signal: #35E0C2;
  --signal-deep: #14807D;
  --signal-soft: rgba(53,224,194,.14);
  --cream: #F4F2EC;
  --cream-soft: #93A3A4;
  --ink-text: #10201F;
  --ink-soft: #56656A;
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 34px;
  --font-heading: "Manrope", sans-serif;
  --font-body: "DM Sans", sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}

body{
  background:var(--paper);
  color:var(--ink-text);
  font-family:var(--font-body);
  line-height:1.7;
}

img{max-width:100%; display:block;}
a{color:var(--signal-deep); text-decoration:underline; text-underline-offset:2px;}
a:hover{color:var(--ink-text);}

.skip-link{
  position:absolute; left:-999px; top:auto; z-index:2000;
  background:var(--ink); color:var(--cream);
  padding:12px 20px; border-radius:0 0 10px 0;
}
.skip-link:focus{left:0; top:0;}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--signal-deep); outline-offset:3px; border-radius:3px;
}

.container{ width:min(760px, calc(100% - 40px)); margin:0 auto; }
.container-wide{ width:min(1180px, calc(100% - 40px)); margin:0 auto; }

/* ---------- Header ---------- */

header.top{
  padding:22px 0;
  border-bottom:1px solid var(--paper-line);
  background:var(--paper-2);
}
header.top .container-wide{
  display:flex; align-items:center; justify-content:space-between;
}
header.top img{ width:96px; height:auto; display:block; }

.back-home{
  font-size:13px; font-weight:600; color:var(--ink-text);
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border:1px solid var(--paper-line); border-radius:999px;
  transition:border-color .2s ease, color .2s ease;
}
.back-home:hover{ border-color:var(--signal-deep); color:var(--signal-deep); }

/* ---------- Content ---------- */

main{ padding:64px 0 100px; }

.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:12.5px; font-weight:600;
  letter-spacing:.04em; color:var(--signal-deep); margin-bottom:14px;
}
.kicker::before{ content:""; width:16px; height:1px; background:currentColor; }

h1{
  font-family:var(--font-heading);
  font-size:clamp(32px, 5vw, 46px);
  letter-spacing:-.03em;
  line-height:1.1;
  margin-bottom:14px;
  color:var(--ink-text);
}

.updated{ color:var(--ink-soft); font-size:14px; margin-bottom:20px; }

.toc{
  background:var(--paper-2); border:1px solid var(--paper-line);
  border-radius:var(--radius-m); padding:22px 26px; margin-bottom:36px;
  font-size:14px;
}
.toc strong{ display:block; margin-bottom:10px; font-family:var(--font-heading); }
.toc ol{ margin-left:18px; }
.toc li{ margin-bottom:5px; }

h2{
  font-family:var(--font-heading);
  font-size:21px;
  letter-spacing:-.01em;
  margin:40px 0 14px;
  scroll-margin-top:24px;
  color:var(--ink-text);
}
h2:first-of-type{ margin-top:0; }

h3{
  font-family:var(--font-heading);
  font-size:16.5px;
  margin:22px 0 10px;
  color:var(--ink-text);
}

p{ margin-bottom:14px; color:var(--ink-text); }
ul{ margin:0 0 14px 20px; }
li{ margin-bottom:6px; }

.card{
  background:var(--paper-2); border:1px solid var(--paper-line);
  border-radius:var(--radius-m); padding:34px; margin-bottom:16px;
}

/* -----------------------------------------------------------
   PLATZHALTER-MARKIERUNG
   Alles mit dieser Klasse muss durch echte Angaben ersetzt werden.
----------------------------------------------------------- */
.fill{
  display:inline-block;
  background:#FFE9A8;
  color:#5C4300;
  padding:1px 8px;
  border-radius:5px;
  font-weight:600;
  font-size:.95em;
}

.flag{
  margin:16px 0; padding:16px 20px;
  border-left:3px solid var(--signal-deep);
  background:var(--signal-soft);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
  font-size:14px;
}
.flag strong{ color:var(--signal-deep); }

.hint{
  margin-top:36px; padding:20px 24px; border-radius:var(--radius-m);
  background:var(--signal-soft); color:var(--ink-text); font-size:14px;
}
.hint strong{ display:block; margin-bottom:6px; color:var(--signal-deep); font-family:var(--font-heading); }

footer.bottom{
  padding:30px 0; text-align:center; font-size:12.5px;
  color:var(--ink-soft); border-top:1px solid var(--paper-line);
}
footer.bottom a{ color:var(--ink-soft); }
footer.bottom a:hover{ color:var(--signal-deep); }

@media (max-width:600px){
  .card{ padding:24px; }
  main{ padding:48px 0 72px; }
}