/* Farbtokens uebernommen aus der Hauptanwendung (public/app.css), damit der
   spaetere Umstieg auf die echte App kein optischer Bruch ist. */
:root{
  --bg:#0F1712; --surface:#1B2820; --surface2:#223227;
  --line:rgba(233,230,220,.10); --line2:rgba(233,230,220,.18);
  --text:#E9E6DC; --muted:#9BAA9E; --accent:#E4A33C; --accent-ink:#241A08;
  --good:#6FBF8F;
  --sans:system-ui,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
.mitte{max-width:54rem; margin:0 auto; padding:0 1.5rem}

/* Kopf mit Wortmarke und Navigation */
.kopf{
  padding:1.6rem 0; border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem;
}
.marke{
  font-family:var(--serif); font-size:1.28rem; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:.6rem;
  color:var(--text); text-decoration:none; margin-right:auto;
}
.marke .punkt{
  width:.6rem; height:.6rem; border-radius:50%;
  background:var(--accent); flex:none;
  box-shadow:0 0 0 .27rem rgba(228,163,60,.16);
}
.navi{display:flex; gap:1.3rem; font-size:.93rem}
.navi a{color:var(--muted); text-decoration:none}
.navi a:hover,.navi a[aria-current="page"]{color:var(--text)}

/* Typografie */
h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem, 5vw, 2.7rem); line-height:1.18;
  margin:0 0 1.2rem; letter-spacing:-.012em;
}
h2{
  font-family:var(--serif); font-weight:400; font-size:1.5rem;
  margin:2.4rem 0 .7rem; letter-spacing:-.006em;
}
h2:first-of-type{margin-top:1.6rem}
p{margin:0 0 1rem}
ul{margin:0 0 1.1rem; padding-left:1.2rem}
li{margin-bottom:.35rem}
code{
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  font-size:.92em; background:var(--surface); padding:.1em .35em; border-radius:.25rem;
}

/* Fliesstext-Seiten (Impressum, Datenschutz) */
.text{padding:2.5rem 0 1rem; max-width:42rem}
.text h1{margin-bottom:1.6rem}
.text p,.text li{color:var(--muted)}
.text p b,.text li b{color:var(--text); font-weight:600}
.text a{color:var(--accent)}

/* Fussbereich */
.fuss{
  border-top:1px solid var(--line); margin-top:3rem;
  padding:2.2rem 0 3.5rem; font-size:.85rem; color:var(--muted); line-height:1.75;
}
.fuss a{color:var(--muted)}
.fuss a:hover{color:var(--text)}
.fuss-navi{display:flex; flex-wrap:wrap; gap:1.2rem; margin-bottom:1.1rem}
.impressum-zeile{opacity:.82}
.impressum-zeile b{color:var(--muted); font-weight:600}