/* Gemeinsame Gestaltung für delinkedde.de, delinked.de und herrmann-jan.de.
   Übernommen aus LinguaLib Katalog und Forum (katalog-web/stil.css, forum-web/forum.css):
   Bahnschrift (DIN) + Cascadia Mono, Schwarz auf Weiß, Redstone-Rot #b02e26 nur für Zustand und Fokus, keine Rundungen.
   Keine externen Schriften, kein JavaScript nötig.
   MASTER-DATEI: nur hier ändern, dann _gemeinsam\verteilen.ps1 ausführen (kopiert in die Seitenordner). */
:root {
  --papier: #ffffff;
  --tinte: #141414;
  --grau: #5c5c5c;
  --linie: #cfcfcf;
  --flaeche: #f1f1f1;
  --redstone: #b02e26;
  --abstand: 8px;
  --schrift: "Bahnschrift", "DIN Alternate", "DIN 2014", "Roboto Condensed", "Arial Narrow", sans-serif;
  --mono: "Cascadia Mono", "Consolas", "SFMono-Regular", "Menlo", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--papier); color: var(--tinte); font: 15px/1.45 var(--schrift); font-variant-numeric: tabular-nums; }
a { color: var(--tinte); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--redstone); outline-offset: 0; }
code, .mono { font-family: var(--mono); font-size: 0.86em; }
.leise { color: var(--grau); font-size: 14px; }

/* Kopf und Reiter wie im Katalog */
.kopf { background: var(--tinte); color: var(--papier); border-bottom: 6px solid var(--redstone); }
.kopf-innen, .reiter-innen { max-width: 1100px; margin: 0 auto; padding: 0 calc(var(--abstand) * 2); }
.kopf-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand) calc(var(--abstand) * 3); padding-top: 14px; padding-bottom: 12px; }
.marke { color: var(--papier); text-decoration: none; font-size: 22px; font-weight: 700; letter-spacing: 0.01em; display: inline-flex; align-items: center; }
.marke span { font-weight: 400; color: #bdbdbd; }
.marke .getrennt { margin-left: 0.4em; }
.marke img { display: block; width: 26px; height: 26px; margin-right: 10px; }
.stand { margin: 0; color: #d6d6d6; font-size: 13px; }
.reiter { border-bottom: 1px solid var(--linie); }
.reiter-innen { display: flex; gap: 0; }
.reiter a { padding: 12px 18px 8px; color: var(--grau); text-decoration: none; border-bottom: 4px solid transparent; }
.reiter a:hover { color: var(--tinte); }
.reiter a[aria-current="page"] { color: var(--tinte); border-bottom-color: var(--tinte); font-weight: 700; }
.reiter a:focus-visible { outline-offset: -3px; }

/* Inhalt */
.spalte { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: calc(var(--abstand) * 2); }
h1 { font-size: 26px; line-height: 1.2; margin: 8px 0 12px; }
h2 { font-size: 18px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--tinte); }
.block { margin: calc(var(--abstand) * 4) 0; }
.text { max-width: 70ch; }
.text p { margin: 8px 0; }
.einleitung { max-width: 70ch; font-size: 16px; }

/* Zustand wie im Forum */
.status { display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 700; padding: 1px 6px; border: 1px solid currentColor; white-space: nowrap; }
.s-wartet::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--redstone); margin-right: 5px; }
.meldung { border-left: 6px solid var(--tinte); background: var(--flaeche); padding: 8px 12px; max-width: 80ch; margin: 16px 0; }

/* Eigenschaftstabelle */
.tabelle-rahmen { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
table.eigenschaften { max-width: 900px; }
table.eigenschaften th { text-align: left; vertical-align: top; width: 150px; font-size: 13px; padding: 7px 10px; border-bottom: 1px solid var(--linie); }
table.eigenschaften td { padding: 7px 10px; vertical-align: top; border-bottom: 1px solid var(--linie); word-break: break-word; }
.zustand { color: var(--redstone); font-weight: 700; }

.fuss { width: 100%; max-width: 1100px; margin: 0 auto; padding: calc(var(--abstand) * 2); border-top: 1px solid var(--linie); color: var(--grau); font-size: 13px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.fuss a { color: var(--grau); }
.fuss p { margin: 0; }

@media (max-width: 760px) { table.eigenschaften th { width: 110px; } }
@media (max-width: 600px) { .reiter a { padding: 10px 10px 6px; } .kopf-innen { padding-top: 10px; padding-bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
.fuss-links { text-align: center; }
.fuss a[aria-current="page"] { color: var(--tinte); font-weight: 700; text-decoration: none; }
.block.text h2 { margin-top: 24px; }
.block.text h2:first-child { margin-top: 0; }