/* Gemeinsames Basis-CSS für die QA-Lernwebseite */

:root {
  --bg:    #f0ece6;
  --text:  #283535;
  --mid:   #4e6060;
  --soft:  #7a9090;
  --border: rgba(0,0,0,0.07);
  --bdr:   var(--border);
  /* Typografie & Abstände (Index + Unterseiten) */
  --title-size:    1.6rem;
  --subtitle-size: 1.05rem;
  --subtitle-margin-top: 0.4rem;
  --header-margin-bottom: 2rem;
  --footer-note-margin-top: 1.5rem;
  /* Gemeinsame Karten-/Ebenen-Palette (Index, Glossar, Testuniversum, HA4-Anforderungsanalyse) */
  --e1: #d8e4d0;
  --e2: #bad1dc;
  --e3: #e0cec8;
  --e4: #ddc48a;
  --e5: #d4c4e0;
  --e6: #c8d4cc;
  /* Formularseiten (Hausaufgaben-Druckversionen): leicht dunklere Nuance von --e3 */
  --e3form: #cfbdb6;
  /* Vertikaler Rhythmus: oben in Nav-Zone, zwischen Nav 1/2, unter Nav bis page-chrome */
  --nav-vertical-rhythm: 1.75rem;
  /* Logo im ersten Nav-Punkt (Startseite / Tab-Favicon-Asset) */
  --nav-inline-logo-height: 2rem;

  /*
   * P1 Pilot — Chip-Palette & Aliase (Workshop: C-SYLLABUS … C-EXTRA)
   * Doku: 01_Projektsteuerung/designsystem-workshop/P03-mapping-ist-soll-token.md
   *
   * --ctfl / --ctfl-bg … --extra-bg: „Akzent“ + „Fläche“ (früher u. a. in 01-landkarte.html
   * und 02c dupliziert). Jetzt eine Quelle; Aliase --chip-* für SOLL-Codes.
   *
   * Domain-Farben `.tag--*` + Hülle `.tag-group .tag`: unten im File (Landkarte).
   * 02c-teststufen.html nutzt andere Klassen (.stag-*) für die Stufen-Karten, aber dieselben
   * Farbvariablen (--ctfl-bg, --praxis-bg …) in base.css — Legende + Matrix-Styling.
   */
  --ctfl: #4a7c59;
  --ctfl-bg: #cde8d2;
  --praxis: #9c6a2a;
  --praxis-bg: #f0dfc0;
  --advanced: #2a547c;
  --advanced-bg: #c4d8ee;
  --extra: #8a5a6a;
  --extra-bg: #ead8de;
  /* C-SYLLABUS (ISTQB-Lehrplan / „grüne“ Chip-Familie) — Hintergrund + Text */
  --chip-syllabus-bg: var(--ctfl-bg);
  --chip-syllabus-fg: #1a2e1a;
  /* C-PRAXIS (Berufs-/Praxisbezug) */
  --chip-praxis-bg: var(--praxis-bg);
  --chip-praxis-fg: #1e2210;
  /* C-ADV (Vertiefung, Normen, Kapitel-3-Blau) */
  --chip-advanced-bg: var(--advanced-bg);
  --chip-advanced-fg: #0e1e30;
  /* C-EXTRA (Extra-Kontext, nicht Syllabus-Pflicht) */
  --chip-extra-bg: var(--extra-bg);
  --chip-extra-fg: #2a2820;
  /* P-CHIPS: gemeinsame „Hülle“ — nur auf Landkarte an .tag/.tags gebunden (02c: eigene .tag-Maße) */
  --chip-padding-y: 0.28rem;
  --chip-padding-x: 0.65rem;
  --chip-radius: 4px;
  --chip-gap: 0.4rem;
  --chip-border: 1px solid rgba(0, 0, 0, 0.08);
  --chip-font-size: 13px;

  /* F-LEGEND — Seitenlegende (04d B.12.9) */
  --legend-gap: 1rem;
  --legend-padding-y: 0.65rem;
  --legend-padding-x: 1rem;
  --legend-margin-bottom: 1.5rem;
  --legend-font-size: 0.8125rem;
  --legend-line-height: 1.4;
  --legend-surface: rgba(255, 255, 255, 0.45);
  --legend-swatch-size: 12px;
  --legend-item-gap: 0.5rem;
  /* F-CHAIN — Dokumentenkette HA (Web); 04d B.13 — creme/pastell, nicht F-INFO-Blau */
  --callout-chain-bg: #fbf9f5;
  --callout-chain-surface: rgba(255, 252, 248, 0.88);
  --callout-chain-border-outer: rgba(74, 64, 54, 0.14);
  --callout-chain-border-accent: #8b7d6c;
  --callout-chain-title: #3a342c;
  --callout-chain-body: var(--mid);
  --callout-chain-radius: 8px;
  --callout-chain-padding-y: 0.85rem;
  --callout-chain-padding-x: 1.1rem;
  --callout-chain-margin-bottom: 1.5rem;
  --callout-chain-accent-width: 5px;
  /* Semantische Aliase (Callouts, Korrekturleiste 01c; gleiche Werte wie C-SYLLABUS / C-PRAXIS) */
  --ok: var(--ctfl);
  --ok-bg: var(--ctfl-bg);
  --warn: var(--praxis);
  --warn-bg: var(--praxis-bg);
  /*
   * HA3 (04e): ACTION (H3 „Aufgaben:“) = Ocker; Kopf Lösungs-Hülle (.ha3p-sheet--answer) = ctfl-grün.
   * Nur 04e nutzt --surface-loesung-kopf-bg; 04c/05a section--e4 = Palette --e4 (Feature-Band), Landkarte/Glossar = --e4.
   * Handlung: bewusst weicher als reines --e4; feste Hex-Werte (kein color-mix), damit local/GitHub/Browser gleich aussehen — doppelte Zeilen mit color-mix wirkten je nach color-mix-Unterstützung unterschiedlich.
   */
  --surface-handlung-bg: #e7dac0;
  --surface-handlung-border-outer: rgba(156, 106, 42, 0.14);
  --surface-handlung-accent: #9f7a4e;
  --surface-loesung-kopf-bg: var(--ctfl-bg);
}

/*
 * C-* Domain-Chip-Farben (P03 §1, P04-04 A.0.2) — an .tag--* gebunden.
 * Hülle `.tag-group .tag` siehe Block darunter.
 */
.tag--ctfl {
  background: var(--chip-syllabus-bg);
  color: var(--chip-syllabus-fg);
}
.tag--praxis {
  background: var(--chip-praxis-bg);
  color: var(--chip-praxis-fg);
}
.tag--advanced {
  background: var(--chip-advanced-bg);
  color: var(--chip-advanced-fg);
}
.tag--extra {
  background: var(--chip-extra-bg);
  color: var(--chip-extra-fg);
}

/*
 * C-* Landkarten-Chips — Hülle & Gruppe (nur `01-landkarte.html` nutzt `.tag-group`;
 * andere Seiten mit `.tag` bleiben unberührt).
 */
.tag-group {
  margin-bottom: 1rem;
}
.tag-group:last-child {
  margin-bottom: 0;
}
.tag-group__title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--bdr);
}
.tag-group__title .ref {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.55;
  letter-spacing: 0.04em;
  margin-left: 0.4em;
}
.tag-group .tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--chip-gap);
}
/* Abstand Syllabus-Zeile → Praxis-Zeile: wie Chip-Gap, nicht wie Untertitel (0,85rem wirkte zu groß) */
.tag-group .tags + .tags {
  margin-top: var(--chip-gap);
}
.tag-group .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--chip-font-size);
  padding: var(--chip-padding-y) var(--chip-padding-x);
  border-radius: var(--chip-radius);
  border: var(--chip-border);
  line-height: 1.3;
}
.tag-group .tag .tdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tag-group .tag .ref {
  font-size: 10px;
  opacity: 0.55;
  font-weight: 600;
  letter-spacing: 0.04em;
}

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

body {
  background: var(--bg);
  background-image: radial-gradient(circle, rgba(0,0,0,0.028) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--text);
  font-family: Georgia, 'Palatino Linotype', serif;
  min-height: 100vh;
}

header { text-align: center; }
header h1 { font-weight: normal; letter-spacing: .05em; }
header p { font-style: italic; color: var(--soft); }

/* Globale obere Navigationszone: volle Viewport-Breite, feste Optik (kein Variablen-Erbe) */
.top-nav-zone {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--bg);
  border-bottom: 1px solid var(--bdr);
  display: flex;
  flex-direction: column;
  gap: var(--nav-vertical-rhythm);
  padding-top: var(--nav-vertical-rhythm);
  padding-bottom: var(--nav-vertical-rhythm);
}
.top-nav-zone .main-nav { margin-bottom: 0; border-bottom: none; }

/* Oberer Rahmen unter der Nav: einheitlich auf allen Unterseiten (normal, Formular, Visualisierung) */
.page-chrome {
  width: 100%;
  align-self: stretch;
  background: var(--bg);
  border-bottom: 1px solid var(--bdr);
}

main { width: 100%; }

/* Hauptnavigation: einheitlich auf allen Seiten, unabhängig von body (Höhe, Schrift) */
.main-nav {
  margin-bottom: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--bdr);
  font-family: Georgia, 'Palatino Linotype', serif;
}
.main-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.main-nav a {
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.main-nav a:hover { text-decoration: underline; }
.main-nav a.current { color: var(--text); font-weight: normal; border-bottom-color: var(--text); }

/* Erster Nav-Punkt: Startseite als Icon (statt Text „Einstieg“) */
.main-nav a.main-nav__home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  border-radius: 0.25rem;
}
.main-nav a.main-nav__home .main-nav__home-img {
  display: block;
  height: var(--nav-inline-logo-height);
  width: var(--nav-inline-logo-height);
  object-fit: contain;
}
.main-nav a.main-nav__home:hover {
  opacity: 0.88;
  text-decoration: none;
}
.main-nav a.main-nav__home:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.main-nav--assignments a {
  font-size: 0.875rem;
  color: var(--mid);
}
.main-nav--assignments a:hover,
.main-nav--assignments a.current {
  color: var(--text);
}

/* Skip-Link: für Tastatur/Screenreader zum Hauptinhalt springen */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--bg);
  color: var(--text);
  font-size: 0.875rem;
  text-decoration: none;
  border: 1px solid var(--bdr);
  border-radius: 4px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* Obere Nav: Brand-Zeile umschließt nur den Nav-Stack; Startseite = Logo im ersten Listenpunkt */
.top-nav-zone__brand-row {
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.top-nav-zone__nav-stack {
  min-width: 0;
  width: max-content;
  max-width: min(100%, 96vw);
  display: flex;
  flex-direction: column;
  gap: var(--nav-vertical-rhythm);
}

@media (max-width: 720px) {
  .top-nav-zone__nav-stack {
    width: 100%;
    max-width: 100%;
  }
}

/*
 * F-META — meta-bar & C-SYLLABUS visueller Chip (Pilot B.11)
 * Norm: 01_Projektsteuerung/designsystem-workshop/P04-04-ctfl-lernwebsite-spec.md
 * Farbe Chip: --chip-syllabus-bg (Alias → --ctfl-bg), nicht hardcodiertes „Grün“.
 */
.meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--bdr);
  background: rgba(255, 255, 255, 0.55);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--mid);
}
.meta-bar strong {
  color: var(--text);
}

/* Option A: kein sichtbarer Text im Element; Bedeutung nur aria-label (04d B.4 / B.8) */
.chip.chip--syllabus.chip--syllabus-visual {
  display: inline-block;
  box-sizing: border-box;
  width: 10px;
  height: 20px;
  min-width: 10px;
  min-height: 20px;
  border-radius: var(--chip-radius);
  background: var(--chip-syllabus-bg);
  border: var(--chip-border);
  vertical-align: middle;
  flex-shrink: 0;
}

/* Hausaufgabe mit CTFL-Bezug: gleiche Maße wie Syllabus-Chip, Farbe HA-Palette (--e3), nicht C-SYLLABUS-Grün */
.chip.chip--syllabus.chip--syllabus-assign {
  display: inline-block;
  box-sizing: border-box;
  width: 10px;
  height: 20px;
  min-width: 10px;
  min-height: 20px;
  border-radius: var(--chip-radius);
  background: var(--e3);
  border: var(--chip-border);
  vertical-align: middle;
  flex-shrink: 0;
}

/*
 * F-LEGEND — Seitenlegende unterhalb F-META (04d B.12)
 * Block .legend; Elemente .legend__item, .legend__swatch; optional .legend__sep
 */
.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--legend-gap);
  padding: var(--legend-padding-y) var(--legend-padding-x);
  margin-top: 0;
  margin-bottom: var(--legend-margin-bottom);
  border-radius: 8px;
  border: 1px solid var(--bdr);
  background: var(--legend-surface);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--legend-font-size);
  font-weight: 400;
  line-height: var(--legend-line-height);
  color: var(--mid);
}
.legend strong {
  color: var(--text);
}

.legend__item,
.legend-item {
  display: flex;
  align-items: center;
  gap: var(--legend-item-gap);
  min-height: 1.25rem;
}

.legend__swatch,
.legend-swatch {
  box-sizing: border-box;
  width: var(--legend-swatch-size);
  height: var(--legend-swatch-size);
  flex-shrink: 0;
  border-radius: 50%;
}

/* Kachel-Variante (B.12.4) — z. B. Verfahrensklassen, SDLC-Farbfelder */
.legend__swatch--tile,
.legend-swatch--tile {
  border-radius: 3px;
}

/* Vertikaler Trenner zwischen Legenden-Gruppen (02c) */
.legend__sep {
  width: 1px;
  align-self: stretch;
  min-height: 1.25rem;
  background: var(--bdr);
  margin: 0 0.5rem;
  flex-shrink: 0;
}

/*
 * Landkarte — Domänen-Legende: gleiche **Flächenfarbe** wie C-*-Chips (--chip-*-bg),
 * nicht nur Akzent (--ctfl …), damit Legende und Tags optisch zusammenpassen (P04-04 A.0.1).
 */
.legend__swatch--ctfl {
  background: var(--chip-syllabus-bg);
  border: 1px solid rgba(74, 124, 89, 0.28);
}
.legend__swatch--praxis {
  background: var(--chip-praxis-bg);
  border: 1px solid rgba(156, 106, 42, 0.28);
}
.legend__swatch--advanced {
  background: var(--chip-advanced-bg);
  border: 1px solid rgba(42, 84, 124, 0.28);
}
.legend__swatch--extra {
  background: var(--chip-extra-bg);
  border: 1px solid rgba(138, 90, 106, 0.28);
}

/* Legende zur Hypozykloide (SDLC/ISTQB, 02a/02b) — Kacheln + Ausnahme T2-Ring (B.12) */
.legend__swatch--sdlc { background: #b3cdb6; border-radius: 3px; }
.legend__swatch--istqb { background: #a5bfce; border-radius: 3px; }
.legend__swatch--t2 { background: #c8a96a; border-radius: 3px; }
.legend__swatch--t2ring {
  width: 22px;
  height: 0;
  min-height: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  border-top: 2px dashed rgba(200, 169, 106, 0.55);
  margin-top: 1px;
}

/* F-CHAIN — Dokumentenkette (Web); Block .chain-callout; 04d B.13 */
.chain-callout {
  background: var(--callout-chain-bg);
  border: 1px solid var(--callout-chain-border-outer);
  border-left: var(--callout-chain-accent-width) solid var(--callout-chain-border-accent);
  border-radius: var(--callout-chain-radius);
  padding: var(--callout-chain-padding-y) var(--callout-chain-padding-x);
  margin-bottom: var(--callout-chain-margin-bottom);
}
.chain-callout__title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--callout-chain-title);
  line-height: 1.35;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.chain-callout__content {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--callout-chain-body);
}
.chain-callout__content p {
  margin: 0.5rem 0;
}
.chain-callout__content p:first-child {
  margin-top: 0;
}
.chain-callout__content p:last-child {
  margin-bottom: 0;
}

/* Testmittel (01c): Korrekturleiste + CTFL-Fix-Tag — 04d B.10 (Token, keine Seiten-Hardcodes) */
.correction-bar {
  background: var(--warn-bg);
  border: 1px solid rgba(156, 106, 42, 0.25);
  border-left: 3px solid var(--warn);
  border-radius: 0 8px 8px 0;
  padding: 0.7rem 1.1rem;
  margin-bottom: 1.8rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: var(--warn);
  line-height: 1.6;
}
.correction-bar strong {
  font-weight: 700;
}
.correction-bar table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-size: 11.5px;
}
.correction-bar td {
  padding: 0.2rem 0.6rem;
  vertical-align: top;
}
.correction-bar td:first-child {
  font-weight: 700;
  color: var(--warn);
  white-space: nowrap;
}
.correction-bar td:nth-child(2) {
  color: var(--mid);
}
.correction-bar td:nth-child(3) {
  color: var(--ok);
  font-weight: 600;
}

.ctfl-fix {
  display: inline-flex;
  align-items: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  margin-left: 0.4rem;
  background: var(--ok-bg);
  color: var(--ok);
  border: 1px solid rgba(74, 124, 89, 0.3);
  vertical-align: middle;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .legend {
    gap: 0.75rem;
  }
}