/* Website Gesundheitsdaten – A2-Palette, responsive, Dark Mode.
   Schriften: System-Stacks (keine externen Requests). Optional spaeter
   lokale Fraunces/Newsreader-woff2 ergaenzen. */

:root {
  --navy:#16323a; --teal:#2a7d7b; --gold:#c79a3c; --alarm:#c1121f;
  --bg:#f3f5f4; --card:#ffffff; --ink:#23302f; --muted:#6f807b;
  --line:#dde6e3; --soft:#eef4f2; --alarm-bg:#fbecea;
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --radius:14px; --shadow:0 2px 10px rgba(20,50,50,.07);
}
[data-theme="dark"] {
  --navy:#cfe3e1; --teal:#5fb6b2; --gold:#d9b15e; --alarm:#ff7a6b;
  --bg:#14171b; --card:#1e242a; --ink:#e7ecea; --muted:#9aa7a3;
  --line:#2c343b; --soft:#222a30; --alarm-bg:#2a1c1c;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); line-height:1.55; font-size:16px;
}

/* --- Sprache (oeffentlich) --- */
[data-en]{display:none;}
[data-lang="en"] [data-de]{display:none;}
[data-lang="en"] [data-en]{display:inline;}

/* --- Topbar --- */
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; background:var(--card); border-bottom:3px solid var(--gold);
  position:sticky; top:0; z-index:5;
}
.brand { font-family:var(--serif); font-weight:700; color:var(--navy); text-decoration:none; font-size:18px; }
.topbar-actions { display:flex; align-items:center; gap:8px; }
.btn-icon {
  font:inherit; font-size:14px; cursor:pointer; color:var(--navy);
  background:var(--soft); border:1px solid var(--line); border-radius:9px;
  padding:6px 10px; line-height:1;
}
.btn-icon:hover { border-color:var(--teal); }

/* --- Layout --- */
.wrap { max-width:880px; margin:0 auto; padding:16px; }
.grid { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:720px){ .grid { grid-template-columns:1fr 1fr; } .card-alarm,.card-contacts,.card-name{ grid-column:1 / -1; } }

/* --- Cards --- */
.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 18px;
}
.card-name { border-top:3px solid var(--gold); }
.person { font-family:var(--serif); color:var(--navy); margin:0 0 4px; font-size:26px; line-height:1.1; }
.muted { color:var(--muted); font-size:13px; margin:0; }
.label { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--teal); margin-top:8px; }
.label:first-child { margin-top:0; }
.val { font-size:15px; margin:2px 0 4px; }
.val.strong { font-weight:600; }

.card-alarm { background:var(--alarm-bg); border-left:5px solid var(--alarm); }
.alarm-label { color:var(--alarm); font-weight:700; }

/* --- Kontakte --- */
.card-contacts .contact { padding:8px 0; border-bottom:1px dashed var(--line); }
.card-contacts .contact:last-child { border-bottom:0; }
.contact-name { font-weight:600; color:var(--navy); }
.contact .rel { color:var(--muted); font-weight:400; }
.tel {
  display:inline-block; margin-top:2px; font-size:18px; font-weight:700;
  color:var(--teal); text-decoration:none;
}
.tel:hover { text-decoration:underline; }

.card-directive { grid-column:1 / -1; background:var(--soft); }

/* --- Footer --- */
.foot { max-width:880px; margin:8px auto 28px; padding:0 16px; color:var(--muted); font-size:13px; }

/* --- Privatbereich: Dokumenttext --- */
.private .doc { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px; }
.doc h1 { font-family:var(--serif); color:var(--navy); font-size:24px; }
.doc h2 { font-family:var(--serif); color:var(--navy); margin-top:1.4em; }
.doc h3 { color:var(--teal); }
.doc a { color:var(--teal); }
.doc table { width:100%; border-collapse:collapse; margin:1em 0; font-size:14px; }
.doc th, .doc td { border:1px solid var(--line); padding:7px 9px; text-align:left; vertical-align:top; }
.doc th { background:var(--soft); }
.doc blockquote { border-left:4px solid var(--gold); margin:1em 0; padding:.4em 1em; background:var(--soft); border-radius:0 8px 8px 0; }
.doc code { background:var(--soft); padding:1px 5px; border-radius:5px; font-size:.92em; }
.crumbs { font-size:13px; margin-bottom:10px; }
.crumbs a, .foot a { color:var(--teal); text-decoration:none; }
.sec { font-family:var(--serif); color:var(--navy); margin:0 0 8px; font-size:18px; }
.pagelist { margin:0; padding-left:18px; }
.pagelist li { margin:3px 0; }
.pagelist a, .doctable a { color:var(--teal); }

/* --- Privatbereich: Navigation (Sidenav + TOC) --- */
html { scroll-behavior:smooth; }
.doc h1, .doc h2, .doc h3 { scroll-margin-top:72px; }   /* Anker nicht unter Topbar */

body.private .wrap { max-width:1140px; }
.layout { display:grid; grid-template-columns:1fr; gap:14px; }

.sidenav { display:flex; flex-direction:column; gap:12px; min-width:0; }
.navbox, .toc {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:10px 14px;
}
.navbox > summary {
  font-family:var(--serif); color:var(--navy); font-weight:700; cursor:pointer;
  list-style:none; padding:2px 0;
}
.navbox > summary::-webkit-details-marker { display:none; }
.navbox > summary::before { content:"☰ "; color:var(--teal); }
.sections { margin-top:8px; }
.navsec { border-top:1px solid var(--line); padding:6px 0; }
.navsec:first-child { border-top:0; }
.navsec > summary {
  cursor:pointer; color:var(--teal); font-weight:600; font-size:13px;
  text-transform:uppercase; letter-spacing:.4px; list-style:none; padding:3px 0;
}
.navsec > summary::-webkit-details-marker { display:none; }
.navsec > summary::before { content:"▸"; display:inline-block; width:1.1em; transition:transform .15s; }
.navsec[open] > summary::before { transform:rotate(90deg); }
.navsec ul { list-style:none; margin:4px 0 6px; padding-left:1.1em; }
.navsec li { margin:3px 0; }
.navsec a { color:var(--navy); text-decoration:none; font-size:14px; }
.navsec a:hover { color:var(--teal); text-decoration:underline; }
.navsec li.here > a { color:var(--teal); font-weight:700; }

.toc-h {
  margin:0 0 6px; font-size:11px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--teal);
}
.toc ul { list-style:none; margin:0; padding:0; }
.toc li { margin:2px 0; line-height:1.35; }
.toc li.lvl3 { padding-left:14px; font-size:13px; }
.toc a { color:var(--muted); text-decoration:none; font-size:13.5px; border-left:2px solid transparent; padding-left:8px; margin-left:-10px; display:inline-block; }
.toc a:hover { color:var(--teal); }
.toc li.active > a { color:var(--navy); font-weight:600; border-left-color:var(--gold); }

@media (min-width:900px){
  .layout { grid-template-columns:248px minmax(0,1fr); align-items:start; }
  .sidenav { position:sticky; top:72px; max-height:calc(100vh - 84px); overflow:auto; }
  /* Sektionsliste auf Desktop immer sichtbar, auch wenn das Drawer-<details> zu ist */
  details.navbox:not([open]) > .sections { display:block; }
  .navbox > summary { cursor:default; }
}

/* --- Glossar-Tooltip --- */
abbr.gloss {
  text-decoration:underline dotted var(--teal); text-underline-offset:3px;
  cursor:help; position:relative;
}
abbr.gloss.show::after, abbr.gloss:hover::after {
  content:attr(title); position:absolute; left:0; top:130%; z-index:9;
  background:var(--navy); color:#fff; padding:7px 10px; border-radius:8px;
  width:max-content; max-width:260px; font-size:12.5px; line-height:1.4;
  white-space:normal; box-shadow:0 4px 14px rgba(0,0,0,.25);
}

/* --- Suche (Dashboard-Hero) --- */
.searchbox { position:relative; margin:18px 0 0; }
.searchbox input {
  width:100%; padding:15px 16px 15px 48px; font:inherit; font-size:16px;
  color:var(--ink); background-color:var(--card); border:1.5px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); background-repeat:no-repeat;
  background-position:16px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232a7d7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
}
.searchbox input::placeholder { color:var(--muted); }
.searchbox input:focus {
  outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(42,125,123,.16);
}
.searchkey {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font:600 12px/1 var(--sans); color:var(--muted); background:var(--soft);
  border:1px solid var(--line); border-radius:6px; padding:4px 7px;
  pointer-events:none; transition:opacity .15s;
}
.searchbox input:focus ~ .searchkey,
.searchbox input:not(:placeholder-shown) ~ .searchkey { opacity:0; }

.results {
  list-style:none; margin:0; padding:6px; position:absolute; left:0; right:0;
  top:calc(100% + 8px); z-index:20; background:var(--card);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 14px 36px rgba(20,50,50,.18); max-height:62vh; overflow:auto;
}
.results li { margin:0; }
.results a { display:block; padding:10px 12px; border-radius:9px; color:var(--navy); text-decoration:none; }
.results a:hover, .results li.sel a { background:var(--soft); }
.results .rtitle { font-weight:600; }
.results .rsec {
  margin-left:8px; font:600 10.5px/1 var(--sans); letter-spacing:.06em;
  text-transform:uppercase; color:var(--teal);
}
.results .snip { display:block; color:var(--muted); font-size:12.5px; margin-top:2px; }
.results .empty { padding:12px; color:var(--muted); font-size:13.5px; }

/* --- Dokumenttabelle: mobil gestapelt --- */
.doctable { width:100%; border-collapse:collapse; font-size:14px; }
.doctable th, .doctable td { border:1px solid var(--line); padding:8px 10px; text-align:left; }
.doctable th { background:var(--soft); }
@media (max-width:600px){
  .doctable thead { display:none; }
  .doctable, .doctable tbody, .doctable tr, .doctable td { display:block; width:100%; }
  .doctable tr { margin-bottom:10px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
  .doctable td { border:0; border-bottom:1px solid var(--line); }
  .doctable td:last-child { border-bottom:0; }
  .doctable td::before { content:attr(data-h) ": "; font-weight:600; color:var(--teal); }
}

/* --- Privat-Dashboard --- */
body.dash .wrap { max-width:1080px; }
a.btn-icon { text-decoration:none; display:inline-block; }

.hero { margin:6px 0 8px; }
.eyebrow { margin:0 0 8px; font:600 11px/1 var(--sans); letter-spacing:.18em;
  text-transform:uppercase; color:var(--teal); }
.hero-title { margin:0; font-family:var(--serif); color:var(--navy); font-weight:700;
  font-size:clamp(30px,5.2vw,46px); line-height:1.02; letter-spacing:-.015em; }
.hero-meta { margin:14px 0 0; color:var(--muted); font-size:13px; }

.quick { display:grid; grid-template-columns:1fr; gap:10px; margin:26px 0 20px; }
@media (min-width:640px){ .quick { grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .quick { grid-template-columns:repeat(4,1fr); } }
.quicklink { display:flex; flex-direction:column; gap:3px; padding:14px 16px;
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:12px; text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.quicklink:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-left-color:var(--teal); }
.ql-label { font-weight:700; color:var(--navy); }
.ql-hint { font-size:12.5px; color:var(--muted); }

.sectiongrid { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:640px){ .sectiongrid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .sectiongrid { grid-template-columns:repeat(3,1fr); } }
.divcard { display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.divcard-head { display:flex; align-items:center; gap:10px; padding:13px 15px;
  border-bottom:1px solid var(--line); }
.tab { flex:none; min-width:30px; text-align:center; padding:5px 7px; border-radius:7px;
  font:700 12px/1 var(--sans); letter-spacing:.04em; color:#fff; background:var(--gold); }
.tab-doc { background:var(--teal); }
.divcard-head h2 { flex:1; margin:0; font-family:var(--serif); color:var(--navy); font-size:17px; }
.count { flex:none; font:600 12px/1 var(--sans); color:var(--muted);
  background:var(--soft); border-radius:20px; padding:4px 9px; }
.divlist { list-style:none; margin:0; padding:6px 15px 12px; }
.divlist li { margin:0; }
.divlist a { display:block; padding:8px 0; color:var(--navy); text-decoration:none;
  border-bottom:1px dashed var(--line); font-size:14.5px;
  transition:color .12s, padding-left .12s; }
.divlist li:last-child a { border-bottom:0; }
.divlist a:hover { color:var(--teal); padding-left:4px; }

.docs { margin-top:22px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.docs-head { display:flex; align-items:center; gap:10px; padding:13px 15px;
  border-bottom:1px solid var(--line); }
.docs-head h2 { flex:1; margin:0; font-family:var(--serif); color:var(--navy); font-size:17px; }
.docs .doctable { border:0; }
.docs .doctable th, .docs .doctable td { border-left:0; border-right:0; }

@media (prefers-reduced-motion: no-preference){
  .quicklink, .divcard, .docs { animation:rise .5s both; }
  .quicklink:nth-child(2){ animation-delay:.04s; }
  .quicklink:nth-child(3){ animation-delay:.08s; }
  .quicklink:nth-child(4){ animation-delay:.12s; }
  .sectiongrid .divcard:nth-child(2){ animation-delay:.05s; }
  .sectiongrid .divcard:nth-child(3){ animation-delay:.10s; }
  .sectiongrid .divcard:nth-child(4){ animation-delay:.13s; }
  .sectiongrid .divcard:nth-child(5){ animation-delay:.16s; }
  .sectiongrid .divcard:nth-child(6){ animation-delay:.19s; }
}
@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }