/* product-epr-compliance.de, Theme »protokoll« (TIK-1151). Farben und Schriften aus
   74 - Brands und Styles/Product Compliance & EPR Management/design-tokens.json, keine eigenen Werte.
   Regeln der Marke: Messraster als einziger Hintergrund, harte Kanten, keine Verläufe, keine Schatten,
   Petrol nur als Signal (Frist, Befund, Haken, Link), Normzitate und Fristen in Roboto Mono. */

@font-face { font-family: "Roboto"; src: url("schriften/Roboto-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("schriften/Roboto-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("schriften/Roboto-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("schriften/Roboto-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("schriften/RobotoMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("schriften/RobotoMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --tinte: #1C2026;
  --stahl: #41566A;
  --petrol: #0E6E73;
  --petrol-licht: #2FA6A9;
  --papier: #F6F6F3;
  --n100: #ECEDE9;
  --n300: #D3D6D6;
  --grau: #5E656E;
  --n700: #3A4048;
  --buehne: #14171C;
  --buehne-flaeche: #1E232A;
  --buehne-linie: #333A43;
  --buehne-text: #EEF0EE;
  --buehne-leise: #A9B1BA;
  --erfolg: #1F7A4D;
  --warnung: #8F5B00;
  --schrift: Roboto, "Segoe UI", Arial, sans-serif;
  --mono: "Roboto Mono", ui-monospace, Consolas, monospace;
  --raster: 8px;
  --breit: 76rem;
  --spalte: 44rem;
  --rand: clamp(1rem, 4vw, 3rem);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinte);
  background-color: var(--papier);
  /* Das Messraster: ein Millimeterpapier aus Haarlinien, alle 8 px schwach, alle 40 px etwas deutlicher. */
  background-image:
    linear-gradient(to right, rgba(65, 86, 106, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(65, 86, 106, .07) 1px, transparent 1px),
    linear-gradient(to right, rgba(65, 86, 106, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(65, 86, 106, .035) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  font-feature-settings: "tnum" 0;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; }
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: -999px; top: 0; background: var(--tinte); color: var(--papier); padding: .5rem 1rem; z-index: 10; }
.sprung:focus { left: var(--rand); }
main { outline: none; }

/* ---------- Kopf: die Kopfzeile eines Protokolls */
.kopf {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem 2rem;
  max-width: var(--breit); margin: 0 auto; padding: 1.25rem var(--rand) 1rem;
  border-bottom: 2px solid var(--tinte);
}
.marke { display: flex; align-items: center; gap: .85rem; color: var(--tinte); text-decoration: none; }
.marke__signet { width: 40px; height: 40px; }
.marke__text { display: flex; flex-direction: column; line-height: 1.15; }
.marke__wort { font-weight: 900; font-size: 1.3rem; letter-spacing: -.01em; }
.marke__fach { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--stahl); }
.kopf__kennung { margin: 0; font-family: var(--mono); font-size: .78rem; color: var(--grau); letter-spacing: .04em; }
.kopf__kennung span { color: var(--tinte); font-weight: 500; margin-right: .4rem; }
.sprachen { display: flex; gap: .25rem; font-family: var(--mono); font-size: .8rem; }
.sprachen > * { padding: .2rem .5rem; border: 1px solid var(--n300); text-decoration: none; color: var(--tinte); }
.sprachen__aktiv { background: var(--tinte); color: var(--papier) !important; border-color: var(--tinte) !important; }
.sprachen__aus { color: var(--grau) !important; }

/* ---------- Auftakt */
.auftakt {
  max-width: var(--breit); margin: 0 auto; padding: clamp(2.5rem, 7vw, 5rem) var(--rand) 2.5rem;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2.5rem; align-items: end;
}
.auftakt__kennung { margin: 0 0 1.25rem; font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--stahl); }
.auftakt__kennung span { color: var(--papier); background: var(--tinte); padding: .15rem .45rem; margin-right: .5rem; letter-spacing: .04em; }
.auftakt__titel {
  margin: 0; font-weight: 900; font-size: clamp(2.6rem, 7.2vw, 5.4rem); line-height: .98; letter-spacing: -.025em;
}
.auftakt__titel span { display: block; color: var(--petrol); }

.protokollkopf { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--tinte); background: var(--papier); }
.protokollkopf > div { padding: .7rem .9rem; border-right: 1px solid var(--n300); border-bottom: 1px solid var(--n300); min-width: 0; }
.protokollkopf > div:nth-child(2n) { border-right: 0; }
.protokollkopf dt { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.protokollkopf dd { margin: .15rem 0 0; font-weight: 500; }
.protokollkopf__frist, .protokollkopf__breit { grid-column: 1 / -1; border-right: 0 !important; border-bottom: 0 !important; }
.protokollkopf__frist { border-left: 6px solid var(--petrol); }
.protokollkopf__frist .mono { color: var(--petrol); font-weight: 500; margin-right: .35rem; }
.protokollkopf__tage { display: block; font-family: var(--mono); font-size: .8rem; color: var(--grau); font-weight: 400; }

/* ---------- Abschnittsköpfe, nummeriert wie Prüfpunkte */
.abschnitt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: .5rem 2rem; align-items: baseline;
  border-top: 2px solid var(--tinte); padding-top: .9rem; margin-bottom: 1.75rem; }
.abschnitt h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 900; letter-spacing: -.01em; }
.abschnitt__nr { font-family: var(--mono); font-weight: 500; font-size: .9rem; color: var(--stahl); vertical-align: .35em; margin-right: .5rem; }
.abschnitt p { margin: 0; color: var(--n700); font-size: .95rem; max-width: 40rem; }

.leiste, .matrix, .bestand { max-width: var(--breit); margin: 0 auto; padding: 1.5rem var(--rand) 3rem; }

/* ---------- Fristen-Leiste */
.leiste__buehne { position: relative; height: 7.5rem; margin: 2.5rem 0 1rem; border-bottom: 2px solid var(--tinte); }
.leiste__vergangen { position: absolute; left: 0; bottom: 0; width: var(--bis); height: 100%;
  background: rgba(65, 86, 106, .08); }
.leiste__tick { position: absolute; bottom: -2px; left: var(--pos); height: 1.1rem; border-left: 1px solid var(--tinte); }
.leiste__tick span { position: absolute; top: 1.35rem; left: 0; transform: translateX(-50%); font-family: var(--mono); font-size: .75rem; color: var(--grau); }
.leiste__heute { position: absolute; left: var(--pos); bottom: -.6rem; top: -1.5rem; border-left: 2px solid var(--tinte); }
.leiste__heute span { position: absolute; top: 0; left: .4rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; background: var(--tinte); color: var(--papier); padding: .05rem .35rem; white-space: nowrap; }
.leiste__marke { position: absolute; left: var(--pos); bottom: -7px; width: 12px; height: 12px; margin-left: -6px; background: var(--stahl); border: 2px solid var(--papier); outline: 1px solid var(--stahl); }
.leiste__marke--laeuft { background: var(--petrol); outline-color: var(--petrol); }
.leiste__marke--angekuendigt { background: var(--papier); outline: 2px solid var(--stahl); }
.leiste__marke--in_kraft { background: var(--grau); outline-color: var(--grau); }
.leiste__nummern { position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column-reverse; gap: 2px; }
.leiste__nummern span { font-family: var(--mono); font-size: .72rem; font-weight: 500; min-width: 1.35rem; text-align: center; padding: .05rem .2rem;
  background: var(--papier); border: 1px solid currentColor; color: var(--stahl); }
.leiste__marke--laeuft .leiste__nummern span { color: var(--papier); background: var(--petrol); border-color: var(--petrol); }
.leiste__marke--in_kraft .leiste__nummern span { color: var(--grau); }

.fristen { list-style: none; margin: 3rem 0 0; padding: 0; border-top: 1px solid var(--tinte); }
.frist { display: grid; grid-template-columns: 2.5rem 7rem minmax(0, 1fr) auto; gap: .25rem 1rem; align-items: baseline;
  padding: .7rem 0; border-bottom: 1px solid var(--n300); }
.frist__nr { color: var(--stahl); font-size: .8rem; }
.frist__datum { font-weight: 500; }
.frist--laeuft .frist__datum { color: var(--petrol); }
.frist--in_kraft .frist__datum, .frist--in_kraft .frist__text { color: var(--n700); }
.frist__text { font-weight: 500; }
.frist__quelle { grid-column: 3 / -1; font-size: .88rem; }
.fristen--kurz .frist { grid-template-columns: 7rem minmax(0, 1fr) auto; }

/* Befund-Marker: drei Zustände, nur »läuft« trägt Petrol als Fläche */
.befund { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  padding: .2rem .5rem; border: 1px solid var(--stahl); color: var(--stahl); justify-self: start; }
.befund--laeuft { background: var(--petrol); border-color: var(--petrol); color: var(--papier); }
.befund--in_kraft { border-color: var(--n300); color: var(--n700); }
.befund__tage { text-transform: none; letter-spacing: 0; }

/* ---------- Regelwerks-Matrix */
.matrix__rahmen { position: relative; overflow-x: auto; border: 2px solid var(--tinte); background: var(--papier); }
.matrix__tabelle { width: 100%; border-collapse: collapse; min-width: 52rem; }
.matrix__tabelle th, .matrix__tabelle td { border-bottom: 1px solid var(--n300); padding: .75rem .7rem; text-align: left; vertical-align: top; }
.matrix__tabelle thead th { background: var(--stahl); color: var(--papier); font-family: var(--mono); font-weight: 500; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; vertical-align: bottom; }
.matrix__bereich { text-align: center !important; width: 4.2rem; border-left: 1px solid rgba(246, 246, 243, .18); }
.matrix__bereich--leer { color: rgba(246, 246, 243, .78) !important; }
.matrix__nr { width: 3rem; color: var(--stahl); }
.matrix__beitrag { font-weight: 500; min-width: 16rem; }
tbody .matrix__beitrag a { color: var(--tinte); text-decoration: none; display: block; line-height: 1.3; }
tbody .matrix__beitrag a:hover { color: var(--petrol); text-decoration: underline; }
.normzitat { display: block; font-family: var(--mono); font-weight: 400; font-size: .76rem; color: var(--petrol); margin-top: .3rem; }
.matrix__zelle { text-align: center !important; border-left: 1px solid var(--n300); vertical-align: middle !important; }
.kreuz { display: inline-block; width: 18px; height: 18px; position: relative; }
.kreuz::before, .kreuz::after { content: ""; position: absolute; left: 50%; top: 0; width: 2.5px; height: 100%; background: var(--tinte); }
.kreuz::before { transform: translateX(-50%) rotate(45deg); }
.kreuz::after { transform: translateX(-50%) rotate(-45deg); }
.matrix__frist { min-width: 13rem; font-size: .9rem; }
.matrix__frist .befund { display: inline-block; margin-bottom: .3rem; }
.matrix__frist .mono { display: block; font-weight: 500; }
.matrix__fristtext { display: block; color: var(--n700); line-height: 1.35; }
tfoot td, tfoot th { border-bottom: 0 !important; background: var(--n100); font-family: var(--mono); font-size: .8rem; }
.matrix__summe { font-weight: 400; color: var(--grau); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
tbody tr:hover { background: rgba(14, 110, 115, .045); }

/* ---------- Beiträge als Akten */
.bestand__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.5rem; }
.akte { border: 1px solid var(--tinte); background: var(--papier); display: flex; flex-direction: column; }
.akte__bild { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--tinte); background: var(--n100); }
.akte__bild img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.akte__text { padding: 1rem 1.1rem 1.2rem; }
.akte__kopf { margin: 0 0 .5rem; font-size: .74rem; color: var(--petrol); }
.akte__kopf span { color: var(--papier); background: var(--tinte); padding: 0 .35rem; margin-right: .4rem; }
.akte__titel { margin: 0 0 .5rem; font-size: 1.2rem; line-height: 1.25; font-weight: 700; }
.akte__titel a { color: var(--tinte); text-decoration: none; }
.akte__titel a:hover { color: var(--petrol); text-decoration: underline; }
.akte__einleitung { margin: 0 0 .75rem; color: var(--n700); font-size: .95rem; }
.akte__fakten { margin: 0; font-family: var(--mono); font-size: .74rem; color: var(--grau); }

/* ---------- Artikelblatt */
.blatt { max-width: var(--breit); margin: 0 auto; padding: 2rem var(--rand) 4rem; }
.blatt__kopf { max-width: 56rem; }
.blatt__zurueck { margin: 0 0 1.5rem; font-family: var(--mono); font-size: .8rem; }
.blatt__zurueck a::before { content: "← "; }
.blatt__titel { margin: 0 0 1.5rem; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; font-weight: 900; letter-spacing: -.02em; }
.protokollkopf--blatt { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 2rem; }
.protokollkopf--blatt > div { border-right: 1px solid var(--n300); }
.protokollkopf--blatt > div:nth-child(2n) { border-right: 1px solid var(--n300); }
.protokollkopf--blatt > div:last-child { border-right: 0; }
.protokollkopf--blatt .protokollkopf__breit { border-bottom: 1px solid var(--n300) !important; border-left: 6px solid var(--petrol); }
.protokollkopf--blatt .normzitat { font-size: .95rem; margin: .15rem 0 0; }
.marken { display: flex; flex-wrap: wrap; gap: .3rem; }
.marken span { font-family: var(--mono); font-size: .72rem; border: 1px solid var(--tinte); padding: 0 .35rem; font-weight: 500; }
.blatt__titelbild { margin: 0 0 2.5rem; border: 1px solid var(--tinte); }
.blatt__fristen { max-width: calc(var(--spalte) + 3rem); margin: 0 auto 2.5rem; border: 2px solid var(--tinte); padding: 1rem 1.2rem .4rem; background: var(--papier); }
.blatt__fristen h2 { margin: 0 0 .25rem; font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--stahl); }
.blatt__fristen .fristen { margin-top: .5rem; border-top: 0; }
.blatt__fristen .frist:last-child { border-bottom: 0; }

.blatt__text { max-width: calc(var(--spalte) + 3rem); margin: 0 auto; background: var(--papier); padding: .5rem 1.5rem 1.5rem; }
.blatt__text h2 { font-size: 1.55rem; line-height: 1.2; margin: 2.6rem 0 .8rem; font-weight: 900; letter-spacing: -.01em;
  padding-top: .7rem; border-top: 2px solid var(--tinte); }
.blatt__text h3 { font-size: 1.2rem; margin: 2rem 0 .5rem; font-weight: 700; }
.blatt__text p, .blatt__text li { hyphens: auto; }
.blatt__text strong { font-weight: 700; }
.blatt__text blockquote { margin: 1.5rem 0; padding: .3rem 0 .3rem 1.2rem; border-left: 4px solid var(--petrol); color: var(--n700); }
.blatt__text table { position: relative; width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .92rem; display: block; overflow-x: auto; }
.blatt__text th { background: var(--stahl); color: var(--papier); font-weight: 500; text-align: left; }
.blatt__text th, .blatt__text td { border: 1px solid var(--n300); padding: .5rem .65rem; vertical-align: top; }
.blatt__text td:first-child { font-family: var(--mono); font-size: .86rem; white-space: nowrap; }
.blatt__text figure { margin: 2rem 0; }
.blatt__text figcaption { font-size: .85rem; color: var(--grau); margin-top: .5rem; }
.blatt__text img { border: 1px solid var(--n300); }
.blatt__text code { font-family: var(--mono); font-size: .9em; }
.blatt__text hr { border: 0; border-top: 1px solid var(--n300); margin: 2.5rem 0; }

.erstquelle { max-width: calc(var(--spalte) + 3rem); margin: 3rem auto 0; padding: 1.1rem 1.25rem; border: 1px solid var(--tinte); border-left: 6px solid var(--stahl); background: var(--n100); }
.erstquelle h2 { margin: 0 0 .4rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--stahl); }
.erstquelle p { margin: .3rem 0; font-size: .95rem; }
.blaettern { max-width: calc(var(--spalte) + 3rem); margin: 2.5rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.blaettern a { display: block; border: 1px solid var(--tinte); padding: .8rem 1rem; text-decoration: none; color: var(--tinte); font-weight: 500; line-height: 1.3; background: var(--papier); }
.blaettern a:hover { border-color: var(--petrol); color: var(--petrol); }
.blaettern span { display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); margin-bottom: .3rem; font-weight: 400; }
.blaettern__nach { grid-column: 2; text-align: right; }

/* ---------- Recht und 404 */
.blatt--recht .blatt__text { margin-left: 0; }
.blatt__stand { font-family: var(--mono); font-size: .8rem; color: var(--grau); }
.fehlt { max-width: var(--breit); margin: 0 auto; padding: 4rem var(--rand); display: grid; grid-template-columns: auto 1fr 1fr; gap: 2rem 3rem; align-items: start; }
.fehlt__code { margin: 0; font-size: clamp(4rem, 12vw, 8rem); line-height: .9; font-weight: 500; color: var(--petrol); }
.fehlt h1, .fehlt h2 { margin: 0 0 .5rem; font-weight: 900; font-size: 1.5rem; line-height: 1.2; }
.fehlt__vorschlaege { grid-column: 1 / -1; border-top: 2px solid var(--tinte); padding-top: 1rem; }

/* ---------- Fuß: die dunkle Bühne */
.fuss { background: var(--buehne); color: var(--buehne-text); margin-top: 3rem; padding: 2.5rem var(--rand);
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1.5rem 2.5rem; align-items: center; }
.fuss a { color: var(--buehne-text); }
.fuss a:hover { color: var(--petrol-licht); }
.fuss__marke { display: flex; align-items: center; gap: 1rem; }
.fuss__claim { margin: 0; font-weight: 900; font-size: 1.25rem; line-height: 1.15; }
.fuss__claim span { color: var(--petrol-licht); }
.fuss__dach, .fuss__recht { margin: 0; font-family: var(--mono); font-size: .8rem; }
.fuss__recht a + a { margin-left: 1.25rem; }

/* ---------- Schmale Bildschirme */
@media (max-width: 52rem) {
  .kopf { grid-template-columns: 1fr auto; }
  .kopf__kennung { display: none; }
  .auftakt { grid-template-columns: 1fr; gap: 2rem; }
  .abschnitt { grid-template-columns: 1fr; }
  .leiste__buehne { height: 6.5rem; }
  .leiste__tick span { font-size: .72rem; }
  .frist { grid-template-columns: 2rem minmax(0, 1fr); }
  .frist__datum { grid-column: 2; }
  .frist__text, .frist .befund, .frist__quelle { grid-column: 2; }
  .fristen--kurz .frist { grid-template-columns: minmax(0, 1fr); }
  .fristen--kurz .frist > * { grid-column: 1; }
  .protokollkopf--blatt { grid-template-columns: 1fr 1fr; }
  .protokollkopf--blatt > div:nth-child(2n) { border-right: 0; }
  .blaettern { grid-template-columns: 1fr; }
  .blaettern__nach { grid-column: 1; text-align: left; }
  .fehlt { grid-template-columns: 1fr; }
  .fuss { grid-template-columns: 1fr; }
}
@media (max-width: 30rem) {
  .blatt__text { padding: .25rem 0 1rem; background: transparent; }
  .marke__fach { font-size: .72rem; }
  .leiste__nummern span { min-width: 1.15rem; font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print {
  body { background: var(--papier); }
  .kopf, .fuss, .sprachen, .blaettern { display: none; }
}