/* Leseansicht des Grobkonzepts für GitLab Pages */
:root {
  --sh-blau: #001e49;
  --sh-rot: #ba0c2f;
  --text: #1b1f24;
  --grau: #5b6470;
  --linie: #d9dee5;
  --flaeche: #f4f6f9;
}

html { scroll-padding-top: 1rem; }

body {
  margin: 0 auto;
  max-width: 48rem;
  padding: 0 1rem 4rem;
  font: 1.0625rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: #fff;
}

a { color: var(--sh-blau); }
a:hover { color: var(--sh-rot); }

/* Kopfleiste mit Logo und Downloads */
.kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 4px solid var(--sh-blau);
}
.kopf img { height: 3rem; width: auto; display: block; }
.kopf nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.9375rem; }
.kopf nav a { white-space: nowrap; }

/* Titel */
#title-block-header { margin: 2.5rem 0 2rem; }
#title-block-header .title { font-size: 2rem; line-height: 1.25; color: var(--sh-blau); margin: 0; padding: 0; border: 0; }
#title-block-header .subtitle,
#title-block-header .date { color: var(--grau); margin: 0.25rem 0 0; }

/* Inhaltsverzeichnis */
#TOC {
  background: var(--flaeche);
  border-left: 4px solid var(--sh-rot);
  padding: 1rem 1.25rem;
  margin-bottom: 2.5rem;
  font-size: 0.9375rem;
}
#TOC::before { content: "Inhalt"; display: block; font-weight: 700; color: var(--sh-blau); margin-bottom: 0.5rem; }
#TOC ul { list-style: none; margin: 0; padding-left: 0; }
#TOC ul ul { padding-left: 1rem; }
#TOC li { margin: 0.2rem 0; }
#TOC a { text-decoration: none; }
#TOC a:hover { text-decoration: underline; }

/* Breite Bildschirme: Inhaltsverzeichnis fest am linken Rand */
@media (min-width: 70rem) {
  body { margin-left: max(20rem, calc(50vw - 24rem)); }
  #TOC {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 17rem;
    margin: 0;
    overflow-y: auto;
    border-left: 0;
    border-right: 1px solid var(--linie);
    padding: 1.5rem 1.25rem;
  }
}

/* Inhalt */
h1, h2, h3, h4 { color: var(--sh-blau); line-height: 1.3; }
h1 { font-size: 1.6rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
h2 { font-size: 1.3rem; margin-top: 2.5rem; }
h3 { font-size: 1.1rem; margin-top: 2rem; }

table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: 0.9375rem; display: block; overflow-x: auto; }
th, td { border: 1px solid var(--linie); padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
th { background: var(--flaeche); color: var(--sh-blau); }

blockquote { margin: 1.5rem 0; padding: 0.5rem 1rem; border-left: 4px solid var(--sh-rot); background: var(--flaeche); }
code { font-size: 0.9em; }

.fuss { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--linie); color: var(--grau); font-size: 0.875rem; }

@media print {
  .kopf nav, #TOC { display: none; }
  body { max-width: none; margin: 0; }
  a { color: inherit; text-decoration: none; }
}