/* =====================================================================
   Gemeinsames Stylesheet für die Textseiten
   (Impressum, Datenschutz, 404)
   ---------------------------------------------------------------------
   Gleiche Farben, gleiche Schriften, gleiche Abstände wie die
   Startseite — nur auf Fliesstext hin ausgelegt. Bewusst als eigene
   Datei, damit der Browser sie einmal lädt und für alle Unterseiten
   wiederverwendet.
   ===================================================================== */

:root{
  --granit:#101823;
  --slate:#1a2635;
  --gletscher:#57a9d6;
  --gletscher-hell:#9fd0ec;
  --schnee:#f2f6fa;
  --nebel:#a3b4c6;
  --linie-dunkel:rgba(87,169,214,.20);
  --radius:12px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:'Karla',system-ui,sans-serif;
  background:var(--granit);color:var(--schnee);
  line-height:1.7;font-size:17px;
}
h1,h2,h3{font-family:'Fraunces',serif;line-height:1.15}
a{color:var(--gletscher);text-decoration:none}
a:hover{color:var(--gletscher-hell)}
:focus-visible{outline:3px solid var(--gletscher-hell);outline-offset:3px;border-radius:4px}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}

/* ---------- Header (identisch zur Startseite) ---------- */
header{
  position:sticky;top:0;z-index:50;background:rgba(16,24,35,.9);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--linie-dunkel);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{font-family:'Fraunces',serif;font-weight:700;font-size:1.25rem;color:var(--schnee)}
.logo span{color:var(--gletscher)}
.nav-links{display:flex;gap:26px;align-items:center;list-style:none}
.nav-links a{color:var(--nebel);font-size:.95rem;font-weight:500}
.nav-links a:hover{color:var(--schnee)}
.nav-cta{background:var(--gletscher);color:var(--granit)!important;padding:9px 20px;border-radius:99px;font-weight:700}
@media(max-width:820px){.nav-links li:not(:last-child){display:none}}

/* ---------- Textspalte ---------- */
.doc{padding:72px 0 96px}
.doc .inner{max-width:70ch}
.doc .eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gletscher);margin-bottom:16px;
}
.doc h1{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:600;margin-bottom:14px}
.doc .stand{color:var(--nebel);font-size:.9rem;margin-bottom:44px}
.doc h2{
  font-size:1.35rem;font-weight:600;margin:44px 0 14px;
  padding-top:22px;border-top:1px solid var(--linie-dunkel);
}
.doc h2:first-of-type{border-top:none;padding-top:0;margin-top:0}
.doc h3{font-size:1.05rem;font-weight:600;margin:26px 0 8px;font-family:'Karla',sans-serif}
.doc p{color:var(--nebel);margin-bottom:16px}
.doc ul{color:var(--nebel);margin:0 0 18px 22px}
.doc li{margin-bottom:8px}
.doc strong{color:var(--schnee)}
.doc dl{margin-bottom:18px}
.doc dt{color:var(--schnee);font-weight:700;margin-top:14px}
.doc dd{color:var(--nebel);margin-left:0}
.doc table{
  width:100%;border-collapse:collapse;margin:0 0 22px;font-size:.94rem;
  display:block;overflow-x:auto;
}
.doc th,.doc td{
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--linie-dunkel);
  color:var(--nebel);vertical-align:top;
}
.doc th{color:var(--schnee);font-weight:700;white-space:nowrap}

/* Hinweiskasten für offene Punkte und Warnungen */
.hinweis{
  background:var(--slate);border-left:3px solid var(--gletscher);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:18px 22px;margin:0 0 36px;
}
.hinweis p{margin-bottom:0;font-size:.94rem}
.hinweis p + p{margin-top:10px}
.hinweis strong{color:var(--schnee)}

/* ---------- 404 ---------- */
.fehler-seite{
  min-height:70vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:80px 24px;
}
.fehler-seite .code{
  font-family:'Fraunces',serif;font-size:clamp(4rem,14vw,8rem);
  font-weight:700;color:var(--gletscher);line-height:1;margin-bottom:10px;
}
.fehler-seite h1{font-size:clamp(1.5rem,4vw,2.2rem);font-weight:600;margin-bottom:16px}
.fehler-seite p{color:var(--nebel);max-width:46ch;margin:0 auto 30px}
.btn{
  display:inline-block;font-weight:700;padding:15px 30px;border-radius:99px;
  border:2px solid transparent;cursor:pointer;font-size:1rem;font-family:'Karla';
  transition:transform .15s ease, background .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-blau{background:var(--gletscher);color:var(--granit)}
.btn-blau:hover{background:var(--gletscher-hell);color:var(--granit)}
.btn-line{border-color:var(--schnee);color:var(--schnee);background:transparent;margin-left:10px}
.btn-line:hover{background:rgba(242,246,250,.12);color:#fff}
@media(max-width:520px){.btn-line{margin-left:0;margin-top:12px}}

/* ---------- Footer (identisch zur Startseite) ---------- */
footer{border-top:1px solid var(--linie-dunkel);padding:36px 0;font-size:.88rem;color:var(--nebel)}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:var(--nebel)}
footer a:hover{color:var(--schnee)}