/* uhtml.de — HTML-Referenz und Werkzeuge
   Anlehnung an den Seitenaufbau von uhtml.de aus dem Wayback-Stand 2012
   (Kastenlayout, gepunktete Rahmen, Kobaltblau/Orange), technisch neu gebaut:
   fluide clamp()-Skala, semantisches HTML, WCAG-2.2-Kontraste. */

@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dm-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dm-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dm-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben */
  --color-bg: #f5f4fb;
  --color-surface: #ffffff;
  --color-border: #cdc9e6;
  --color-border-strong: #9d97cf;
  --color-ink: #181f45;
  --color-body: #2b3266;
  --color-muted: #565f8f;
  --color-link: #22349c;
  --color-link-visited: #4a3f8f;
  --color-accent: #f5730c;
  --color-accent-ink: #9a4c08;
  --color-accent-tint: #fdece0;
  --color-focus: #181f45;

  /* Abstände (fluid, 320px–1400px) */
  --sp-1: clamp(0.5rem, 0.47rem + 0.15vw, 0.625rem);
  --sp-2: clamp(0.75rem, 0.68rem + 0.3vw, 1rem);
  --sp-3: clamp(1.125rem, 1rem + 0.6vw, 1.625rem);
  --sp-4: clamp(1.625rem, 1.4rem + 1vw, 2.25rem);
  --sp-5: clamp(2.25rem, 1.85rem + 1.75vw, 3.25rem);
  --sp-6: clamp(3rem, 2.3rem + 3vw, 4.75rem);

  /* Schrift (fluid) */
  --t-sm: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --t-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --t-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5625rem);
  --t-xl: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);
  --t-2xl: clamp(2rem, 1.6rem + 1.75vw, 2.875rem);

  --font-body: "DM Sans", "Segoe UI", Verdana, sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;
}

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

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
}

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

a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:visited { color: var(--color-link-visited); }
a:hover { color: var(--color-accent-ink); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -3rem;
  background: var(--color-ink);
  color: #fff;
  padding: var(--sp-1) var(--sp-2);
  border-radius: 0.25rem;
  z-index: 100;
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--sp-2); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-mono);
  color: var(--color-ink);
  line-height: 1.2;
  font-weight: 700;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); margin-top: var(--sp-5); }
h3 { font-size: var(--t-lg); }

p { margin: 0 0 var(--sp-3); max-width: 65ch; }

.site-frame {
  max-width: min(960px, 94vw);
  margin-inline: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 0.5rem;
  overflow: clip;
  margin-block: var(--sp-4);
}

/* Banner */
.site-banner {
  background: linear-gradient(135deg, #1b2456 0%, #232d6e 60%, #2a3583 100%);
  color: #fff;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 3px solid var(--color-accent);
}
.site-banner__inner {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.site-banner__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-2xl);
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
}
.site-banner__mark span { color: var(--color-accent); }
.site-banner__mark:hover { color: #fff; }
.site-banner__tag {
  font-size: var(--t-sm);
  color: #c9cdf2;
  font-family: var(--font-mono);
}

/* Navigation */
.site-nav {
  background: var(--color-accent-tint);
  border-bottom: 1px dotted var(--color-border-strong);
  padding: var(--sp-2) var(--sp-4);
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 500;
}
.site-nav a {
  color: var(--color-ink);
  text-decoration: none;
  padding: 0.2em 0.1em;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent-ink);
}

/* Layout: Inhalt + Info-Spalte */
.page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4);
}
@media (min-width: 760px) {
  .page-layout {
    grid-template-columns: minmax(0, 1fr) 15rem;
  }
  /* Das Inhaltsverzeichnis steht im Quelltext VOR dem Inhalt, damit ein
     Screenreader es zuerst hoert - dort nuetzt es etwas. Optisch gehoert es
     trotzdem nach rechts, deshalb hier feste Spalten statt order: Lese- und
     Tabreihenfolge bleiben so identisch (1.3.2, 2.4.3). */
  .page-layout > .content { grid-column: 1; grid-row: 1; }
  .page-layout > aside.info { grid-column: 2; grid-row: 1; }
}

.content ul.tool-list {
  list-style: none;
  margin: var(--sp-3) 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.content ul.tool-list li {
  border: 1px dotted var(--color-border-strong);
  border-left: 3px solid var(--color-accent);
  border-radius: 0.25rem;
  padding: var(--sp-2) var(--sp-3);
}
.content ul.tool-list a {
  font-family: var(--font-mono);
  font-weight: 500;
  text-decoration: none;
}
.content ul.tool-list p {
  margin: 0.35em 0 0;
  font-size: var(--t-sm);
  color: var(--color-muted);
}

aside.info {
  border: 1px dotted var(--color-border-strong);
  border-radius: 0.25rem;
  padding: var(--sp-3);
  align-self: start;
  font-size: var(--t-sm);
}
aside.info h2 {
  font-size: var(--t-base);
  margin: 0 0 var(--sp-2);
}
aside.info ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5em;
}
/* Auf schmalen Schirmen steht das Verzeichnis oben. Untereinander wuerde es den
   Einstieg weit nach unten schieben, deshalb dort eine kompakte Zeile. */
@media (max-width: 759px) {
  aside.info ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em 0.9em;
  }
  aside.info li + li { position: relative; }
  aside.info li + li::before {
    content: "·";
    position: absolute;
    left: -0.55em;
    color: var(--color-border-strong);
  }
}
aside.info a { text-decoration: none; }
aside.info a:hover { text-decoration: underline; }

/* Fußzeile */
.site-footer {
  border-top: 1px dotted var(--color-border-strong);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-bg);
}
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
}
.badge-row li {
  border: 1px solid var(--color-border-strong);
  border-radius: 0.25rem;
  padding: 0.2em 0.6em;
  color: var(--color-muted);
}
.site-footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--t-sm);
}
.site-footer p.copyright {
  margin: var(--sp-2) 0 0;
  font-size: var(--t-sm);
  color: var(--color-muted);
}

/* Tabellen (Sonderzeichen etc.) */
.table-scroll { overflow-x: auto; border: 1px dotted var(--color-border-strong); border-radius: 0.25rem; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
th, td { padding: 0.5em 0.75em; text-align: left; border-bottom: 1px solid var(--color-border); }
th { font-family: var(--font-mono); background: var(--color-accent-tint); color: var(--color-ink); }
table code { font-family: var(--font-mono); background: var(--color-bg); padding: 0.1em 0.4em; border-radius: 0.2em; }

/* Fließtext-Listen */
.content ul:not(.tool-list),
.content ol {
  margin: 0 0 var(--sp-3);
  padding-left: 1.4em;
  max-width: 65ch;
}
.content ul:not(.tool-list) li,
.content ol li { margin-bottom: 0.4em; }
.content li > p { margin-bottom: 0.4em; }

/* Code */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 0.05em 0.35em;
  border-radius: 0.2em;
}
pre {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: #171d40;
  border-radius: 0.25rem;
  border-left: 3px solid var(--color-accent);
  overflow-x: auto;
  font-size: var(--t-sm);
  line-height: 1.6;
}
pre code {
  background: none;
  border: 0;
  padding: 0;
  color: #e8eaff;
  font-size: 1em;
  white-space: pre;
}
pre code b { font-weight: 500; color: var(--color-accent); }
pre code i { font-style: normal; color: #9aa4dd; }

figure.code-figure { margin: 0 0 var(--sp-4); }
figure.code-figure figcaption {
  font-size: var(--t-sm);
  color: var(--color-muted);
  margin-top: -0.75rem;
}

/* Zeilen-Erklärung unter einem Codeblock */
.code-notes { margin: 0 0 var(--sp-4); max-width: 65ch; }
.code-notes dt {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--color-ink);
  margin-top: var(--sp-2);
}
.code-notes dd { margin: 0.15em 0 0; }

/* Hinweis */
.hinweis {
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-tint);
  padding: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-4);
  max-width: 65ch;
  border-radius: 0 0.25rem 0.25rem 0;
}
.hinweis > :last-child { margin-bottom: 0; }
.hinweis strong { color: var(--color-accent-ink); }

/* Gut/schlecht-Gegenüberstellung */
.vergleich { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-4); }
@media (min-width: 640px) {
  .vergleich { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.vergleich > div { min-width: 0; }
.vergleich h3 {
  font-size: var(--t-base);
  margin: 0 0 var(--sp-1);
  font-family: var(--font-mono);
}
.vergleich pre { margin-bottom: 0; height: 100%; }
.vergleich--nein pre { border-left-color: #a8203c; }

/* Redaktioneller Stempel unter der Überschrift */
.pruefstand {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--color-muted);
  margin: -0.5rem 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px dotted var(--color-border-strong);
  max-width: 65ch;
}

/* Weiterlesen-Block am Fuß einer Inhaltsseite */
.verwandt {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px dotted var(--color-border-strong);
}
.verwandt h2 {
  font-size: var(--t-md);
  margin: 0 0 var(--sp-2);
}
.verwandt ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
@media (min-width: 720px) {
  .verwandt ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.verwandt li {
  border-left: 3px solid var(--color-border-strong);
  padding-left: var(--sp-2);
}
.verwandt a {
  font-family: var(--font-mono);
  font-weight: 500;
  text-decoration: none;
}
.verwandt a:hover { text-decoration: underline; }
.verwandt span {
  display: block;
  font-size: var(--t-sm);
  color: var(--color-muted);
  margin-top: 0.15em;
}

/* Themengruppen auf der Startseite */
.gruppe { margin-top: var(--sp-5); }
.gruppe > h2 { margin-top: 0; }
.gruppe > p.gruppe-text {
  font-size: var(--t-sm);
  color: var(--color-muted);
  margin-bottom: var(--sp-2);
}

/* Referenzlisten: Attribut/Element mit Erklärung */
dl.referenz { max-width: 65ch; margin: 0 0 var(--sp-4); }
dl.referenz dt {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--color-ink);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dotted var(--color-border);
}
dl.referenz dt:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
dl.referenz dd { margin: 0.2em 0 0; }

/* Rechtstexte */
.legal h2 { font-size: var(--t-lg); margin-top: var(--sp-4); }
.legal h3 { font-size: var(--t-md); margin-top: var(--sp-3); }
.legal dl { max-width: 65ch; margin: 0 0 var(--sp-3); }
.legal dt { font-weight: 700; color: var(--color-ink); margin-top: var(--sp-2); }
.legal dd { margin: 0.15em 0 0; }
.legal .stand { font-size: var(--t-sm); color: var(--color-muted); }

/* Illustriertes Kopfband über dem Text.
   aspect-ratio hält den Platz frei, bevor das Bild da ist. Das Band ist
   dekorativ und soll den Einstieg nicht verdrängen, deshalb schmal. */
.kopfband { max-width: 65ch; margin: 0 0 var(--sp-4); }
.kopfband img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-bg);
}

/* Bildmarke in der Kopfzeile, links neben dem Schriftzug.
   Das Zeichen ist tiefblau auf hellem Grund und waere im dunklen Banner
   unsichtbar, deshalb bleibt der helle Grund stehen und wird zur Kachel. */
.site-banner__logo {
  display: block;
  width: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  height: auto;
  aspect-ratio: 1 / 1;
  flex: none;
  border-radius: 5px;
}

/* Nummer eines WCAG-Erfolgskriteriums im Fliesstext.
   Bewusst zurueckhaltend: Sie soll zitierbar sein, ohne den Satz zu zerlegen. */
.kriterium {
  font-family: var(--font-mono);
  font-size: 0.82em;
  color: var(--color-muted);
  background: var(--color-accent-tint);
  border-radius: 0.2rem;
  padding: 0.1em 0.4em;
  white-space: nowrap;
}