/* Gemeinsame Gestaltung für index.html und impressum.html */

:root {
  --paper: #ffffff;
  --grid: #dbe5f1;
  --grid-strong: #b9c9dd;
  --karo-fein: #f4f8fc;
  --karo-grob: #e8eff7;
  --ink: #1c2b3a;
  --ink-muted: #5b6b7c;
  --link: #1f4fbf;
  --rule: #d6dee8;
  --button: #eef3fa;
  --button-hover: #dfe8f4;
  --focus: #1f4fbf;
  --mark: #ffe9a3;
  --neu-bg: #e3f1e6;
  --neu-ink: #1d6b33;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121a24;
    --grid: #1e2a38;
    --grid-strong: #2c3c4f;
    --karo-fein: #151d26;
    --karo-grob: #1b2430;
    --ink: #e8eef5;
    --ink-muted: #9fb0c2;
    --link: #8fb3ff;
    --rule: #263444;
    --button: #1b2736;
    --button-hover: #243346;
    --focus: #8fb3ff;
    --mark: #5c4a12;
    --neu-bg: #1d3524;
    --neu-ink: #8fd7a4;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.55;
}
a { color: var(--link); text-underline-offset: 0.15em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Kopf: Millimeterpapier */
header {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--karo-grob) 1px, transparent 1px),
    linear-gradient(90deg, var(--karo-grob) 1px, transparent 1px),
    linear-gradient(var(--karo-fein) 1px, transparent 1px),
    linear-gradient(90deg, var(--karo-fein) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  background-position: -1px -1px;
  border-bottom: 2px solid var(--grid-strong);
}
.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; }
header .wrap { padding-top: 3.5rem; padding-bottom: 2.5rem; }
h1 {
  margin: 0 0 0.5rem;
  font-size: 2.4rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
}
header p { margin: 0; max-width: 34rem; color: var(--ink-muted); }

/* Zweispaltiges Layout: Navigation und Liste */
main .wrap { padding-top: 1rem; padding-bottom: 2rem; }
.layout { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }

.sidenav { position: sticky; top: 1.25rem; font-size: 0.95rem; }
.sidenav h2 {
  margin: 0.4rem 0 0.6rem; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
}
.sidenav ul { list-style: none; margin: 0; padding: 0; }
.sidenav li { margin: 0; }
.sidenav a {
  display: flex; gap: 0.5rem; align-items: baseline;
  padding: 0.25rem 0; text-decoration: none; color: var(--ink);
  border-left: 2px solid transparent; padding-left: 0.6rem;
}
.sidenav a:hover { color: var(--link); border-left-color: var(--rule); }
.sidenav .nav-fach { font-weight: 600; }
.sidenav .nav-count { margin-left: auto; color: var(--ink-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.sidenav ul ul a { padding-left: 1.4rem; color: var(--ink-muted); font-size: 0.9rem; }
.sidenav ul ul { margin-bottom: 0.3rem; }

/* Umschalter der Ansicht */
.toolbar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem 1rem; align-items: start; margin-bottom: 0.75rem;
}
.tools { display: contents; }
.suche {
  font: inherit; font-size: 0.95rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 5px;
  padding: 0.25rem 0.6rem; grid-column: 1; grid-row: 1;
  justify-self: start; width: min(14rem, 100%); min-width: 0;
}
.suche:hover { border-color: var(--ink-muted); }
.filterbar {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: baseline; gap: 0.3rem 0.6rem;
}
.filter-label { color: var(--ink-muted); font-size: 0.95rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip {
  font: inherit; font-size: 0.9rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 999px; padding: 0.15rem 0.7rem; cursor: pointer;
}
.chip:hover { background: var(--button-hover); }
.chip[aria-pressed="true"] { background: var(--button); border-color: var(--ink-muted); font-weight: 600; }
.reset {
  font: inherit; font-size: 0.9rem; color: var(--ink-muted);
  background: none; border: 0; padding: 0.15rem 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.reset:hover { color: var(--ink); }
.tools > .reset { grid-column: 1 / -1; justify-self: start; }
.rechts {
  grid-column: 2; grid-row: 1; justify-self: end;
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
mark { background: var(--mark); color: inherit; padding: 0 0.1em; border-radius: 2px; }
.neu {
  margin-left: 0.5rem; font-size: 0.72em; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--neu-ink); background: var(--neu-bg);
  border-radius: 999px; padding: 0.1em 0.5em; vertical-align: 0.15em;
}
.segmented { display: inline-flex; border: 1px solid var(--rule); border-radius: 5px; overflow: hidden; }
.segmented button {
  font: inherit; font-size: 0.9rem; color: var(--ink);
  background: var(--paper); border: 0; padding: 0.3rem 0.8rem; cursor: pointer;
}
.segmented button + button { border-left: 1px solid var(--rule); }
.segmented button:hover { background: var(--button-hover); }
.segmented button[aria-pressed="true"] { background: var(--button); font-weight: 600; }

/* Fachgruppen */
.fach { border-top: 2px solid var(--grid-strong); scroll-margin-top: 1rem; }
.fach:last-of-type { border-bottom: 2px solid var(--grid-strong); }
.fach > summary {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 0.7rem 0; cursor: pointer;
  font-size: 1.35rem; font-weight: 700; line-height: 1.2;
  list-style: none;
}
.fach > summary::-webkit-details-marker { display: none; }
.fach > summary::before {
  content: "▸"; color: var(--ink-muted); font-size: 0.9em;
  transition: transform 0.15s; display: inline-block;
}
.fach[open] > summary::before { transform: rotate(90deg); }
.fach > summary:hover .fach-name { color: var(--link); }
.fach-count { margin-left: auto; font-size: 0.9rem; font-weight: 400; color: var(--ink-muted); }

.typ { scroll-margin-top: 1rem; padding-bottom: 0.5rem; }
.typ h3 {
  margin: 0.6rem 0 0.2rem; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
}

/* Applet-Liste */
.items { list-style: none; margin: 0; padding: 0; }
.items li { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.items li:last-child { border-bottom: 0; }
.items h4 { margin: 0 0 0.3rem; font-size: 1.15rem; line-height: 1.3; font-weight: 600; }
.items h4 a { text-decoration: none; }
.items h4 a:hover { text-decoration: underline; }
.description { margin: 0 0 0.6rem; }
.meta {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; align-items: center;
  margin: 0; font-size: 0.92rem; color: var(--ink-muted);
}
.meta .url { word-break: break-all; }
[data-leit="aus"] .meta .leit { display: none; }
.material {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem;
  margin: 0.35rem 0 0; font-size: 0.92rem;
}
.material > span { color: var(--ink-muted); }
button.copy {
  font: inherit; font-size: 0.9rem;
  color: var(--ink);
  background: var(--button);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.2rem 0.65rem;
  cursor: pointer;
}
button.copy:hover { background: var(--button-hover); }
.status { color: var(--ink-muted); padding: 1.4rem 0; }
.status small { display: block; margin-top: 0.4rem; }

/* Ansicht „Nur Titel“ */
[data-view="titel"] .material,
[data-view="titel"] .meta,
[data-view="titel"] #leitToggle { display: none; }
[data-view="titel"] .items {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0 1.5rem;
}
[data-view="titel"] .items li { padding: 0.3rem 0; border-bottom: 0; position: relative; }
[data-view="titel"] .items h4 { margin: 0; font-size: 1.02rem; font-weight: 500; }
[data-view="titel"] .typ { padding-bottom: 0.9rem; }

/* Beschreibung als Fähnchen beim Überfahren */
[data-view="titel"] .description {
  position: absolute; left: 0; top: 100%; z-index: 5;
  width: max(100%, 15rem); max-width: 22rem;
  margin: 0.15rem 0 0; padding: 0.5rem 0.7rem;
  font-size: 0.92rem; line-height: 1.4;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 5px;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.18);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.12s;
}
[data-view="titel"] .items li:hover .description,
[data-view="titel"] .items li:focus-within .description { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  [data-view="titel"] .description { transition: none; }
}

/* Schmale Bildschirme */
@media (max-width: 640px) {
  .toolbar { grid-template-columns: minmax(0, 1fr); }
  .rechts { grid-column: 1; grid-row: auto; justify-self: start; }
}
@media (max-width: 520px) {
  .filterbar { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .hinweis dl { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .hinweis dd { margin-bottom: 0.35rem; }
}
@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; gap: 1.25rem; }
  .sidenav { position: static; border-bottom: 1px solid var(--rule); padding-bottom: 0.75rem; }
  .sidenav h2 { margin-top: 0; }
  .sidenav > ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
  .sidenav a { border-left: 0; padding-left: 0; }
  .sidenav .nav-count { margin-left: 0.3rem; }
  .sidenav ul ul { display: none; }
}

/* Fuß (index.html) */
footer { border-top: 2px solid var(--grid-strong); }
footer .wrap { padding-top: 1.5rem; padding-bottom: 3rem; }
footer section { margin-bottom: 1.75rem; }
footer h2 { font-size: 1.05rem; margin: 0 0 0.4rem; font-weight: 600; }
footer p { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--ink-muted); max-width: 46rem; }
footer code { font-size: 0.88em; word-break: break-all; }
.legal-link { font-size: 0.95rem; }

/* Hinweis für Kolleginnen und Kollegen */
.hinweis { max-width: 46rem; margin: 0 0 0.9rem; font-size: 0.95rem; color: var(--ink-muted); }
.hinweis > summary {
  cursor: pointer; padding: 0.15rem 0; color: var(--ink); font-weight: 600;
  list-style: none;
}
.hinweis > summary::-webkit-details-marker { display: none; }
.hinweis > summary::before {
  content: "▸"; color: var(--ink-muted); font-size: 0.9em;
  display: inline-block; width: 1em; transition: transform 0.15s;
}
.hinweis[open] > summary::before { transform: rotate(90deg); }
.hinweis > summary:hover { color: var(--link); }
.hinweis p { margin: 0.5rem 0 0; }
.hinweis dl {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.25rem 0.9rem; margin: 0.7rem 0 0;
}
.hinweis dt { color: var(--ink); }
.hinweis dd { margin: 0; }
.hinweis pre {
  margin: 0.6rem 0 0; padding: 0.6rem 0.8rem; overflow-x: auto;
  background: var(--button); border: 1px solid var(--rule); border-radius: 5px;
  color: var(--ink); font-size: 0.85rem; line-height: 1.5;
}

/* Druck: Handout aus der gerade angezeigten Auswahl */
@media print {
  @page { margin: 1.5cm; }
  html, body { background: #fff; color: #000; font-size: 11pt; }
  header { background: none; border-bottom: 1px solid #999; }
  header .wrap { padding: 0 0 0.6rem; }
  .wrap { max-width: none; padding: 0; }
  main .wrap { padding: 0; }
  h1 { font-size: 20pt; }
  .sidenav, .toolbar, .status, footer, button { display: none !important; }
  .layout { display: block; }
  .fach { border-top: 1px solid #999; break-inside: auto; }
  .fach > summary { list-style: none; font-size: 14pt; padding: 0.5rem 0 0.2rem; }
  .fach > summary::before { content: none; }
  .fach-count { color: #555; }
  .typ h3 { color: #555; margin-top: 0.5rem; }
  .items li { padding: 0.35rem 0; border-bottom: 0; break-inside: avoid; }
  .items h4 { font-size: 11.5pt; margin: 0; }
  .items h4 a { color: #000; text-decoration: none; }
  .description { margin: 0; }
  .meta { color: #333; font-size: 9.5pt; gap: 0.2rem 0.9rem; }
  .material { font-size: 9.5pt; }
  .material a { color: #000; }
  .neu { border: 1px solid #555; color: #000; background: none; }
  mark { background: none; font-weight: 700; }
  [data-view="titel"] .items { display: block; }
  [data-view="titel"] .items li { padding: 0.35rem 0; }
  [data-view="titel"] .material { display: flex; }
  [data-view="titel"] .meta { display: flex; }
  [data-view="titel"] .description {
    position: static; opacity: 1; visibility: visible;
    width: auto; max-width: none; margin: 0; padding: 0;
    border: 0; box-shadow: none; background: none; font-size: 10pt;
  }
  [data-leit="aus"] .meta .leit { display: inline; }
}

/* Textseite (impressum.html) */
.prose .wrap { padding-top: 1.5rem; padding-bottom: 3rem; }
.prose section { margin-bottom: 2rem; }
.prose h2 { font-size: 1.25rem; margin: 0 0 0.5rem; font-weight: 600; }
.prose p, .prose address { margin: 0 0 0.7rem; font-size: 0.98rem; max-width: 44rem; }
.prose address { font-style: normal; line-height: 1.5; }