/* Handbücher (Maschinen-Klinik) — Darstellung der Apache-Ordnerliste.
   Alle Werte stehen als Variablen hier oben; Herkunft siehe docs/design-karte.md.
   Keine externen Ressourcen (keine Webfonts, kein CDN). */

:root {
  color-scheme: light;

  /* Markenfarben (gemessen an maschinen-klinik.com) */
  --c-accent: #CC1421;        /* Rot: Flächen, Knöpfe, Fokus */
  --c-accent-hover: #AF1120;  /* Rot beim Darüberfahren */
  --c-link: #E51D13;          /* Linkrot (4,65:1 auf Weiß) */
  --c-black: #000000;         /* Kopf- und Fußfläche */
  --c-page: #EAEAEA;          /* Seitenhintergrund */
  --c-surface: #FFFFFF;       /* Inhaltsfläche */
  --c-text: #333333;          /* Fließtext */
  --c-heading: #222222;       /* Überschriften, Dateinamen */
  --c-on-dark: #FFFFFF;       /* Schrift auf Schwarz und Rot */

  /* Abgeleitet: Zeilen-Hover, Trennlinien, gedämpfter Text */
  --c-row-hover: #F5F5F5;
  --c-rule: #EAEAEA;
  --c-muted: #595959;         /* 7,00:1 auf Weiß */

  /* Schrift (nur lokal installierte Schriften) */
  --font: "Open Sans", Roboto, "Segoe UI", Arial, sans-serif;
  --fs-base: 1rem;
  --fs-small: 0.875rem;
  --fs-title: 1.25rem;
  --lh: 1.5;
  --fw-strong: 600;

  /* Abstände: 4er/8er-Raster */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;

  --radius: 3px;
  --stripe: 4px;              /* rote Leiste unter dem Kopf */
  --focus-w: 3px;
  --target-min: 32px;         /* über WCAG-2.2-Minimum 24px */
  --logo-h: 56px;
  --wrap: 1100px;
  --t-fast: 200ms;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--c-page);
  color: var(--c-text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh);
}

img { max-width: 100%; height: auto; }

a { color: var(--c-link); }
a:hover { color: var(--c-accent-hover); }

/* Sichtbarer Tastaturfokus überall */
:focus-visible {
  outline: var(--focus-w) solid var(--c-accent);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  /* nur seitlich, damit main/Kopf ihre Höhenabstände behalten */
  padding-left: var(--s-4);
  padding-right: var(--s-4);
}

/* Sprunglink: erst bei Tastaturfokus sichtbar */
.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 10;
  padding: var(--s-2) var(--s-4);
  background: var(--c-surface);
  color: var(--c-heading);
  font-weight: var(--fw-strong);
  border-radius: var(--radius);
}
.skip-link:focus { top: var(--s-2); }

/* ---------- Kopf ---------- */
.site-head {
  background: var(--c-black);
  color: var(--c-on-dark);
  border-bottom: var(--stripe) solid var(--c-accent);
}
.site-head__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-6);
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
}
/* Logo hat schwarze Schrift: steht deshalb auf einer weißen Plakette */
.brand {
  display: inline-flex;
  padding: var(--s-1) var(--s-2);
  background: var(--c-surface);
  border-radius: var(--radius);
}
.brand img {
  display: block;
  height: var(--logo-h);
  width: auto;
}
.site-head :focus-visible { outline-color: var(--c-on-dark); }
.site-title {
  flex: 1 1 auto;
  margin: 0;
  color: var(--c-on-dark);
  font-size: var(--fs-title);
  font-weight: var(--fw-strong);
  line-height: 1.25;
}
.site-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--c-on-dark);
  font-size: var(--fs-small);
  font-weight: var(--fw-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color var(--t-fast);
}
.site-link:hover { color: var(--c-link); }

/* ---------- Inhalt ---------- */
main {
  flex: 1 0 auto;
  padding-top: var(--s-8);
  padding-bottom: var(--s-8);
}
.panel {
  background: var(--c-surface);
  border-radius: var(--radius);
  padding: var(--s-6);
}

/* Pfadleiste (wird per JS gefüllt) */
.crumbs { margin-bottom: var(--s-4); }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
}
.crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs li + li::before {
  content: "›";
  padding: 0 var(--s-2);
  color: var(--c-muted);
}
.crumbs a,
.crumbs [aria-current] {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  overflow-wrap: anywhere;
}
.crumbs a { text-decoration: underline; text-underline-offset: 2px; }
.crumbs [aria-current] { color: var(--c-heading); font-weight: var(--fw-strong); }

/* ---------- Tabelle ---------- */
.listing table {
  width: 100%;
  border-collapse: collapse;
}
.listing hr { display: none; }
.listing th[colspan] { padding: 0; border: 0; }
.listing th {
  padding: var(--s-2);
  border-bottom: 2px solid var(--c-heading);
  color: var(--c-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-strong);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.listing th a { color: inherit; text-decoration: none; }
.listing th a:hover { color: var(--c-accent); text-decoration: underline; }
.listing th:nth-child(n+2) { text-align: right; }

.listing td {
  padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--c-rule);
  vertical-align: middle;
}
.listing td:nth-child(n+2) {
  color: var(--c-muted);
  font-size: var(--fs-small);
  white-space: nowrap;
  text-align: right;
}
.listing td:first-child {
  width: 100%;
  overflow-wrap: anywhere;
}
.listing tr:hover td { background: var(--c-row-hover); }

/* Name-Zelle: Link und Knopf nebeneinander, bei Platzmangel untereinander */
.name-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.listing td:first-child > a,
.name-cell > a:first-child {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--s-2);
  min-width: 0;
  min-height: 24px;
  color: var(--c-heading);
  text-decoration: none;
}
.listing td:first-child > a:hover,
.name-cell > a:first-child:hover {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Symbole: allgemeine Datei, Ordner, PDF (Inline-SVG, nichts extern) */
.listing td:first-child a:not(.dl)::before {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 1.5h7l4 4v13h-11z' fill='%23fff' stroke='%23595959' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M11.5 1.5v4h4' fill='none' stroke='%23595959' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.listing td:first-child a:not(.dl)[href$="/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M1.5 4.5a1 1 0 0 1 1-1h5l2 2h8a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1z' fill='%23CC1421'/%3E%3C/svg%3E");
}
.listing td:first-child a[href$="/"] { font-weight: var(--fw-strong); }
.listing td:first-child a:not(.dl)[href$=".pdf" i]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 1.5h7l4 4v13h-11z' fill='%23fff' stroke='%23222' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M11.5 1.5v4h4' fill='none' stroke='%23222' stroke-width='1.5' stroke-linejoin='round'/%3E%3Crect x='1' y='9' width='14' height='7' rx='1' fill='%23CC1421'/%3E%3Cpath d='M3 14.5v-4h1.4a1.1 1.1 0 0 1 0 2.2H3M7 10.5v4h.9a2 2 0 0 0 0-4zM11.2 14.5v-4h2.3M11.2 12.4h1.8' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
}
/* Übergeordneter Ordner (Klasse per JS) */
.listing td:first-child a:not(.dl).is-parent::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 16V4M5 9l5-5 5 5' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.listing td:first-child a:not(.dl).is-parent[href] { font-weight: 400; }

/* Knopf „Herunterladen“ */
.dl {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: var(--s-1) var(--s-3);
  background: var(--c-accent);
  color: var(--c-on-dark);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: var(--fw-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-fast);
}
.dl:hover,
.dl:focus-visible { background: var(--c-accent-hover); color: var(--c-on-dark); }

/* Hinweis bei leerem Ordner */
.listing td.empty {
  padding: var(--s-6) var(--s-2);
  color: var(--c-muted);
  font-size: var(--fs-base);
  text-align: left;
  white-space: normal;
}

/* ---------- Fuß ---------- */
.site-foot {
  background: var(--c-black);
  color: var(--c-on-dark);
  font-size: var(--fs-small);
}
.site-foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding-top: var(--s-6);
  padding-bottom: var(--s-6);
}
.site-foot a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--c-on-dark);
}
.site-foot a:hover { color: var(--c-link); }
.site-foot :focus-visible { outline-color: var(--c-on-dark); }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 600px) {
  :root { --logo-h: 40px; }
  main { padding-top: var(--s-4); padding-bottom: var(--s-4); }
  .panel { padding: var(--s-4) var(--s-3); }
  .site-title { flex-basis: 100%; order: 3; }
  .site-head__inner { justify-content: space-between; }
  /* Datumsspalte ausblenden */
  .listing th:nth-child(2),
  .listing td:nth-child(2) { display: none; }
  .listing td { padding: var(--s-3) var(--s-1); }
  .listing th { padding: var(--s-2) var(--s-1); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}