:root{
  --bg:#ffffff;
  --fg:#0f172a;
  --muted:#334155;
  --accent:#0ea5e9;
  --line:#e2e8f0;
  --card:#f8fafc;
}

*{box-sizing:border-box}
html{color-scheme:light}
@media(prefers-color-scheme:dark){
  :root{--bg:#0b1220; --fg:#e5e7eb; --muted:#cbd5e1; --line:#1f2937; --card:#0f172a}
  html{color-scheme:dark}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  line-height:1.6;
}

.container{
  max-width:980px;
  margin:0 auto;
  padding:24px;
}

.header{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}

.header img.logo{height:40px; width:auto}
.header .app{display:flex; align-items:center; gap:12px}
.header .app img{height:32px; width:32px}
.header .app-name{font-size:18px; letter-spacing:0.2px}

.hero{
  margin:24px 0;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:var(--card);
}

nav.toc{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background:var(--card);
  margin:24px 0;
}
nav.toc p{margin:0 0 8px}
nav.toc a{display:inline-block; padding:6px 10px; margin:6px 6px 0 0; border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--fg); font-size:14px}
nav.toc a:focus-visible{outline:3px solid var(--accent); outline-offset:2px}

h1{font-size:28px; margin:12px 0 4px}
h2{font-size:20px; margin:28px 0 8px}
h3{font-size:16px; margin:20px 0 6px}

.section{
  padding:8px 0 16px;
  border-bottom:1px dashed var(--line);
}
.section:last-of-type{border-bottom:none}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
}

.kv{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
}
.kv div{padding:8px; border-radius:8px; border:1px solid var(--line); background:var(--bg)}

@media(min-width:720px){
  .kv{grid-template-columns: 1fr 1fr}
}

.table{
  width:100%;
  border-collapse:collapse;
  margin:12px 0;
  table-layout: fixed; /* Spalten gleichmäßig verteilen */
}

.table th,
.table td{
  border:2px solid var(--line);
  padding:6px 20px;      /* flacher (.35rem ~ 6px) aber breiter */
  vertical-align:top;
  text-align:left;
  font-size:12px;        /* leicht kleiner für bessere Übersicht */
  word-wrap:break-word;  /* lange Inhalte umbrechen */
}

.table th{
  background:var(--card);
  white-space:nowrap;    /* Kopfzeilen bleiben kompakt */
}

.badge{
  display:inline-block;
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;
  margin-left:6px;
}

.footer{
  margin:36px 0 12px;
  font-size:14px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:12px;
}

.inline-note{
  font-size:14px;
  color:var(--muted);
}

.btn-print{
  display:inline-block;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--bg);
  text-decoration:none;
  color:var(--fg);
  cursor:pointer;
}

.back-to-top{
  position:fixed;
  right:16px;
  bottom:16px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--card);
  backdrop-filter: blur(2px);
  text-decoration:none;
  color:var(--fg);
}

.skip-link{
  position:absolute;
  left:-9999px;
}
.skip-link:focus{
  left:16px;
  top:16px;
  background:var(--card);
  color:var(--fg);
  padding:8px 10px;
  border:2px solid var(--accent);
  border-radius:8px;
}

@media print{
  .hero, nav.toc, .back-to-top, .btn-print{display:none}
  body{background:#fff; color:#000}
  a{color:#000; text-decoration:none}
}