/* Isocyanate-Schulung. Richtung: das Gebindeetikett, siehe docs/design-richtung.md. */

@font-face { font-family: "Archivo"; src: url("schriften/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  --blech: #edf0f2;        /* Weißblech: Grund */
  --blech-tief: #dde3e7;   /* ruhige Abschnittsfläche */
  --etikett: #ffffff;      /* Etikett: Flächen, auf denen gelesen wird */
  --tinte: #12171c;
  --fass: #0d3349;         /* Fassblau: Hero, Preise */
  --fass-tief: #082436;    /* Fuß, Leiste */
  --signal: #ff7a1a;       /* nur Bestellen */
  --signal-tief: #f06400;
  --signal-hell: #ffe9d6;
  --raute: #d6131f;        /* Rahmen der Stufen-Rauten, Feldfehler */
  --grau: #48535d;
  --linie: #b9c2c9;
  --linie-stark: #66727c;
  --auf-fass: #eaf1f5;
  --auf-fass-leise: #b9cbd6;

  --schrift: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px;
  --rand: 16px;
  --breite: 1200px;
}
@media (min-width: 720px) { :root { --rand: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s12); scroll-padding-bottom: var(--s12); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--blech); color: var(--tinte); font-family: var(--schrift); font-size: 1.0625rem; line-height: 1.6; }
h1, h2, h3, h4 { margin: 0; font-stretch: 75%; font-weight: 800; line-height: 1.04; letter-spacing: -.005em; text-wrap: balance; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--fass); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--tinte); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
strong { font-weight: 700; }
table { border-collapse: collapse; width: 100%; }
svg { display: block; }
@media (max-width: 479px) { h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; } }
[hidden] { display: none !important; }

.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: var(--s2); top: var(--s1); z-index: 50; background: var(--etikett); padding: var(--s1) var(--s2); transform: translateY(-200%); }
.sprung:focus { transform: none; }

/* --- Knopf --------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s3);
  background: var(--signal); color: var(--tinte); border: 2px solid var(--tinte); border-radius: 4px;
  font-family: var(--schrift); font-weight: 750; font-size: 1.0625rem; line-height: 1.1; text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out, transform .15s ease-out;
}
.knopf:hover { background: var(--signal-tief); color: var(--tinte); }
.knopf:active { transform: translateY(1px); }
.knopf-gross { min-height: 60px; padding: 0 var(--s4); font-size: 1.1875rem; }
.knopf-klein { min-height: 40px; padding: 0 var(--s2); font-size: .9375rem; white-space: nowrap; }
.knopf-ruhig { background: var(--fass); color: var(--etikett); border-color: var(--fass); }
.knopf-ruhig:hover { background: var(--fass-tief); border-color: var(--fass-tief); color: var(--etikett); }
.knopf-linie { background: var(--etikett); color: var(--tinte); border-color: var(--tinte); }
.knopf-linie:hover { background: var(--tinte); color: var(--etikett); }
.hero .knopf-linie { background: var(--fass); color: var(--etikett); border-color: var(--etikett); }
.hero .knopf-linie:hover { background: var(--etikett); color: var(--tinte); }
.hero :focus-visible, .preise :focus-visible, .fuss :focus-visible, .leiste :focus-visible { outline-color: var(--etikett); }
.preis :focus-visible, .etikett :focus-visible { outline-color: var(--tinte); }

/* --- Raute: Rahmen wie auf dem Gefahrstoffetikett, innen die Stufe ------------- */
.raute { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; margin: 8px; background: var(--etikett); border: 3px solid var(--raute); transform: rotate(45deg); vertical-align: middle; }
.raute > span { transform: rotate(-45deg); font-stretch: 75%; font-weight: 800; font-size: 1.125rem; line-height: 1; color: var(--tinte); }
.raute-klein { width: 24px; height: 24px; margin: 6px; border-width: 2px; }
.raute-klein > span { font-size: .8125rem; }
.raute-gross { width: 52px; height: 52px; margin: 12px; border-width: 4px; }
.raute-gross > span { font-size: 1.375rem; }

/* --- Kopf ---------------------------------------------------------------- */
.kopf { background: var(--etikett); border-bottom: 2px solid var(--tinte); }
.kopf-innen { max-width: var(--breite); margin: 0 auto; padding: var(--s1) var(--rand); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--s2); }
.marke { display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; color: var(--tinte); text-decoration: none; font-stretch: 75%; font-weight: 800; font-size: 1.25rem; line-height: 1; }
.marke:hover { color: var(--tinte); }
.marke-zeichen { width: 30px; height: 30px; flex: none; }
.haupt { order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0 var(--s3); font-size: .9375rem; font-weight: 600; }
.haupt a { display: inline-flex; align-items: center; min-height: 40px; color: var(--tinte); text-decoration: none; }
.haupt a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
@media (min-width: 960px) {
  .kopf { position: sticky; top: 0; z-index: 20; }
  .kopf-innen { flex-wrap: nowrap; }
  .haupt { order: 0; flex-basis: auto; margin-left: auto; margin-right: var(--s2); }
}

/* --- Hero: Fassblau, rechts das Etikett ------------------------------------- */
.hero { background: var(--fass); color: var(--auf-fass); }
.hero-innen { max-width: var(--breite); margin: 0 auto; padding: var(--s6) var(--rand) var(--s5); display: grid; gap: var(--s6); align-items: center; }
.hero h1 { font-size: clamp(2.375rem, 1.5rem + 4.2vw, 4.5rem); line-height: .98; color: var(--etikett); }
.hero-unter { margin-top: var(--s3); max-width: 36rem; font-size: 1.1875rem; line-height: 1.5; }
.hero-knoepfe { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2); }
.hero-preis { margin-top: var(--s2); font-size: .9375rem; color: var(--auf-fass-leise); }
.etikett { background: var(--etikett); color: var(--tinte); border-radius: 6px; padding: var(--s3); box-shadow: 0 24px 48px rgba(4, 20, 31, .45); max-width: 34rem; }
.etikett-kopf { display: flex; align-items: center; gap: var(--s1); font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.etikett blockquote { margin-top: var(--s2); padding-top: var(--s2); border-top: 3px solid var(--tinte); }
.etikett blockquote p { font-stretch: 75%; font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.125rem); line-height: 1.12; hyphens: auto; }
.etikett figcaption { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--linie); font-size: .875rem; line-height: 1.45; color: var(--grau); }
.eckdaten { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand) var(--s5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s3); }
.eckdaten > div { padding-top: var(--s2); border-top: 1px solid var(--auf-fass-leise); }
.eckdaten dt { font-size: .875rem; color: var(--auf-fass-leise); }
.eckdaten dd { margin-top: 4px; font-stretch: 75%; font-weight: 800; font-size: 1.375rem; line-height: 1.1; color: var(--etikett); }
@media (min-width: 960px) {
  .hero-innen { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); padding-top: var(--s10); padding-bottom: var(--s8); gap: var(--s8); }
  .etikett { transform: rotate(-1.4deg); padding: var(--s4); justify-self: end; }
  .eckdaten { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: var(--s8); }
  .eckdaten dd { font-size: 1.625rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .etikett { animation: etikett-auf .5s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes etikett-auf { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
}

/* --- Abschnitte ----------------------------------------------------------- */
.abschnitt { padding: var(--s8) 0; }
.abschnitt-ton { background: var(--blech-tief); }
.abschnitt-innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.abschnitt h2 { font-size: clamp(1.875rem, 1.4rem + 2.1vw, 3rem); max-width: 22ch; }
.abschnitt h3 { font-size: 1.375rem; line-height: 1.12; }
.antwort { margin-top: var(--s3); max-width: 44rem; font-size: 1.1875rem; line-height: 1.5; }
.abschnitt-innen > p + p { margin-top: var(--s2); max-width: 44rem; }
.beleg { font-size: .8125rem; white-space: nowrap; color: var(--grau); }
.beleg a { color: inherit; }
.hinweis { margin-top: var(--s3); max-width: 44rem; padding-left: var(--s2); border-left: 3px solid var(--tinte); font-size: .9375rem; }
.mehr { margin-top: var(--s4); font-weight: 600; }
@media (min-width: 960px) { .abschnitt { padding: var(--s12) 0; } }

/* --- Stufen-Finder ---------------------------------------------------------- */
.finder-raster { display: grid; gap: var(--s4); }
.finder-ohne { margin-top: var(--s2); }
.finder { background: var(--etikett); border: 2px solid var(--tinte); border-radius: 6px; padding: var(--s3); }
.finder-fragen { display: grid; gap: var(--s3); }
.finder-frage + .finder-frage { padding-top: var(--s3); border-top: 1px solid var(--linie); }
.finder-frage p { max-width: 40rem; }
.finder-frage p strong { display: block; margin-bottom: 4px; font-stretch: 75%; font-weight: 800; font-size: 1.375rem; line-height: 1.12; }
.finder-wahl { margin-top: var(--s2); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); max-width: 20rem; }
.finder-wahl button { min-height: 48px; background: var(--etikett); color: var(--tinte); border: 2px solid var(--tinte); border-radius: 4px; font: inherit; font-weight: 750; cursor: pointer; transition: background-color .12s ease-out, color .12s ease-out; }
.finder-wahl button:hover { background: var(--blech-tief); }
.finder-wahl button[aria-pressed="true"] { background: var(--tinte); color: var(--etikett); }
.finder-ergebnis > div { margin-top: var(--s3); padding: var(--s3); background: var(--signal-hell); border: 2px solid var(--signal); border-radius: 4px; }
.finder-ergebnis h3 { margin-top: var(--s1); font-size: 1.75rem; }
.finder-ergebnis p { margin-top: var(--s1); max-width: 38rem; }
.finder-ergebnis .knopf { margin-top: var(--s2); }
.finder-ergebnis .raute { margin-left: 6px; margin-right: 0; }
.finder-ergebnis a:not(.knopf) { color: var(--tinte); }
.finder-neu { margin-top: var(--s2); min-height: 40px; padding: 0; background: none; border: 0; color: var(--fass); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.finder-neu:hover { color: var(--tinte); }
@media (prefers-reduced-motion: no-preference) {
  .finder-frage:not([hidden]), .finder-ergebnis > div:not([hidden]) { animation: zeile-auf .28s cubic-bezier(.16, 1, .3, 1); }
  @keyframes zeile-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
@media (min-width: 960px) {
  .finder-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; }
  .finder { padding: var(--s4); }
}

/* --- Nutzen ----------------------------------------------------------------- */
.nutzen { margin-top: var(--s5); display: grid; gap: var(--s4) var(--s5); }
.nutzen li { padding-top: var(--s2); border-top: 3px solid var(--tinte); }
.nutzen p { margin-top: var(--s1); }
@media (min-width: 640px) { .nutzen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .nutzen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Kurse nach Verwendung -------------------------------------------------- */
.kurse { margin-top: var(--s5); display: grid; gap: var(--s2); }
.kurse a { display: grid; gap: var(--s1); height: 100%; padding: var(--s3); background: var(--etikett); color: var(--tinte); border: 2px solid var(--tinte); border-radius: 6px; text-decoration: none; transition: background-color .15s ease-out, color .15s ease-out; }
.kurse a:hover { background: var(--tinte); color: var(--etikett); }
.kurse p { font-size: .9375rem; }
.kurse-mehr { align-self: end; margin-top: var(--s1); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) { .kurse { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kurse { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- Tabellen: echte Tabellen, am Handy gestapelt ----------------------------- */
.tabelle-rahmen { margin-top: var(--s4); background: var(--etikett); border: 2px solid var(--tinte); border-radius: 6px; overflow: hidden; }
.tabelle-rahmen th, .tabelle-rahmen td { padding: var(--s2); text-align: left; vertical-align: top; font-size: 1rem; line-height: 1.45; }
.tabelle-rahmen thead th { background: var(--tinte); color: var(--etikett); font-size: .9375rem; font-weight: 700; }
.tabelle-rahmen tbody tr + tr { border-top: 1px solid var(--linie); }
.tabelle-rahmen tbody th { font-weight: 600; }
.stufen-tabelle tbody th { display: flex; align-items: center; gap: var(--s1); }
.stufen-name { font-stretch: 75%; font-weight: 800; font-size: 1.25rem; line-height: 1.1; }
.tabelle-rahmen td ul { margin-top: var(--s1); display: grid; gap: 4px; }
.tabelle-rahmen td li { position: relative; padding-left: 20px; }
.tabelle-rahmen td li::before, .inhalte li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 7px; height: 7px; background: var(--tinte); transform: rotate(45deg); }
.arbeiten-tabelle td[data-spalte="Stufe"] { white-space: nowrap; font-weight: 700; }
.arbeiten-tabelle td[data-spalte="Stufe"] .raute { margin-left: 4px; margin-right: 10px; }
.arbeiten-tabelle td[data-spalte="Fundstelle"] { color: var(--grau); font-size: .9375rem; }
@media (max-width: 719px) {
  .tabelle-rahmen thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabelle-rahmen table, .tabelle-rahmen tbody, .tabelle-rahmen tr, .tabelle-rahmen th, .tabelle-rahmen td { display: block; }
  .tabelle-rahmen tbody th { padding-bottom: 4px; }
  .tabelle-rahmen td { padding-top: 4px; }
  .stufen-tabelle tbody th { display: flex; }
  .tabelle-rahmen td[data-spalte="Bei uns"]::before { content: "Bei uns: "; font-weight: 700; }
  .tabelle-rahmen td[data-spalte="Fundstelle"]::before { content: "Nr. 74 "; }
}
@media (min-width: 720px) {
  .stufen-tabelle th[scope="col"]:first-child { width: 17rem; }
  .stufen-tabelle th[scope="col"]:last-child:nth-child(3) { width: 15rem; }
}

/* --- Inhalte ------------------------------------------------------------------ */
.inhalte { margin-top: var(--s4); display: grid; gap: var(--s4) var(--s8); }
.inhalte h3 { display: flex; align-items: center; gap: var(--s1); }
.inhalte h3 .raute { margin-left: 6px; }
.inhalte ul { margin-top: var(--s2); display: grid; gap: var(--s1); }
.inhalte li { position: relative; padding-left: 22px; }
@media (min-width: 800px) { .inhalte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Bescheinigung --------------------------------------------------------------- */
.bescheinigung-raster { display: grid; gap: var(--s5); align-items: start; }
.bescheinigung-raster p + p { margin-top: var(--s2); max-width: 44rem; }
.muster { background: var(--etikett); border: 1px solid var(--linie-stark); border-radius: 4px; padding: var(--s3); box-shadow: 0 16px 40px rgba(18, 23, 28, .12); }
.muster figcaption { padding-bottom: var(--s2); border-bottom: 3px solid var(--tinte); font-stretch: 75%; font-weight: 800; font-size: 1.375rem; line-height: 1.1; }
.muster dl > div { padding: 12px 0; border-bottom: 1px solid var(--linie); display: grid; gap: 2px; }
.muster dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.muster dt { font-size: .875rem; color: var(--grau); }
.muster dd { font-weight: 600; line-height: 1.4; }
@media (min-width: 960px) {
  .bescheinigung-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); }
  .muster { padding: var(--s4); }
  .muster dl > div { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--s2); }
}

/* --- Ablauf: vier Schritte, die Reihenfolge ist echt ------------------------------ */
.schritte { margin-top: var(--s5); display: grid; gap: var(--s4) var(--s5); counter-reset: schritt; }
.schritte li { counter-increment: schritt; padding-top: var(--s2); border-top: 3px solid var(--tinte); }
.schritte li::before { content: counter(schritt); display: block; font-stretch: 75%; font-weight: 800; font-size: 3rem; line-height: 1; color: var(--fass); }
.schritte h3 { margin-top: var(--s1); }
.schritte p { margin-top: var(--s1); }
@media (min-width: 640px) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- Preise: Fassblau ------------------------------------------------------------- */
.preise { background: var(--fass); color: var(--auf-fass); }
.preise h2 { color: var(--etikett); }
.preis-raster { margin-top: var(--s5); display: grid; gap: var(--s2); align-items: stretch; }
.preis { display: flex; flex-direction: column; background: var(--etikett); color: var(--tinte); border-radius: 6px; padding: var(--s3); border: 3px solid var(--etikett); }
.preis-firma { border-color: var(--signal); }
.preis h3 { font-size: 1.75rem; }
.preis-wer { margin-top: 4px; color: var(--grau); font-size: .9375rem; }
.preis-zahl { margin-top: var(--s3); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s1); }
.preis-zahl strong { font-stretch: 75%; font-weight: 800; font-size: 3.5rem; line-height: 1; letter-spacing: -.01em; }
.preis-zahl span { font-size: .9375rem; color: var(--grau); }
.preis ul { margin: var(--s3) 0; padding-top: var(--s2); border-top: 1px solid var(--linie); display: grid; gap: var(--s1); font-size: .9375rem; }
.preis .knopf { margin-top: auto; width: 100%; }
.preise-stufe3 { margin-top: var(--s4); }
.preise-stufe3 a { color: var(--etikett); }
@media (min-width: 860px) { .preis-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); } .preis { padding: var(--s4); } }

/* --- Fragen ------------------------------------------------------------------------- */
.fragen { margin-top: var(--s4); max-width: 52rem; border-top: 2px solid var(--tinte); }
.frage { border-bottom: 1px solid var(--linie-stark); }
.frage summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 64px; padding: var(--s2) 0; cursor: pointer; list-style: none; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary h3 { font-size: 1.25rem; }
.frage summary:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.auf-zu { flex: none; position: relative; width: 20px; height: 20px; transition: transform .2s ease-out; }
.auf-zu::before, .auf-zu::after { content: ""; position: absolute; left: 0; top: 9px; width: 20px; height: 3px; background: var(--tinte); }
.auf-zu::after { transform: rotate(90deg); }
.frage[open] .auf-zu { transform: rotate(45deg); }
.frage-inhalt { padding: 0 0 var(--s3); max-width: 44rem; }

/* --- Schluss ------------------------------------------------------------------------ */
.schluss { background: var(--signal); }
.schluss h2 { max-width: 20ch; }
.schluss p { margin-top: var(--s2); font-size: 1.1875rem; font-weight: 500; }
.schluss .knopf { margin-top: var(--s3); background: var(--tinte); color: var(--etikett); border-color: var(--tinte); }
.schluss .knopf:hover { background: var(--fass); border-color: var(--fass); color: var(--etikett); }

/* --- Quellen ------------------------------------------------------------------------ */
.quellen { padding: var(--s8) 0; }
.quellen h2 { font-size: 1.75rem; }
.quellen p { margin-top: var(--s2); max-width: 44rem; font-size: .9375rem; }
.quellen-liste { margin-top: var(--s3); display: grid; gap: var(--s2); max-width: 56rem; font-size: .9375rem; line-height: 1.5; }
.quellen-liste li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s1); padding-top: var(--s2); border-top: 1px solid var(--linie-stark); overflow-wrap: anywhere; }
.quellen-nr { font-stretch: 75%; font-weight: 800; font-size: 1.125rem; }
.quellen-fund { color: var(--grau); }
.quellen-liste li:target { background: var(--signal-hell); }

/* --- Artikel: Ratgeber, Verwendungsseiten, Fragen ------------------------------------- */
.brotkrumen { max-width: var(--breite); margin: 0 auto; padding: var(--s2) var(--rand) 0; font-size: .875rem; color: var(--grau); }
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: 0 var(--s1); }
.brotkrumen li + li::before { content: "/"; margin-right: var(--s1); }
.brotkrumen a { display: inline-block; padding: 4px 0; }
.artikel { max-width: var(--breite); margin: 0 auto; padding: var(--s4) var(--rand) var(--s8); }
.artikel-kopf h1 { font-size: clamp(2.125rem, 1.5rem + 3vw, 3.75rem); max-width: 20ch; }
.artikel-knoepfe { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2); }
.artikel-stand { margin-top: var(--s3); font-size: .875rem; color: var(--grau); }
.artikel > section { margin-top: var(--s8); }
.artikel section h2 { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); max-width: 28ch; }
.artikel section h3 { font-size: 1.375rem; }
.artikel section > p { margin-top: var(--s2); max-width: 44rem; }
.artikel .inhalte { margin-top: var(--s3); }
.eckdaten-hell { margin-top: var(--s5); padding: 0; }
.eckdaten-hell > div { border-top: 3px solid var(--tinte); }
.eckdaten-hell dt { color: var(--grau); }
.eckdaten-hell dd { color: var(--tinte); }
.verweise { margin-top: var(--s2); display: grid; gap: var(--s1); font-weight: 600; }
.verweise a { display: inline-block; padding: 4px 0; }
.frage-offen { margin-top: 0; padding: var(--s3) 0; border-bottom: 1px solid var(--linie-stark); }
.frage-offen h2 { font-size: 1.5rem; max-width: none; }
.frage-offen p { margin-top: var(--s1); max-width: 44rem; }
.frage-offen:target { background: var(--signal-hell); }
.artikel-schluss { margin-top: var(--s8); padding: var(--s4); background: var(--fass); color: var(--auf-fass); border-radius: 6px; }
.artikel-schluss h2 { font-size: 1.875rem; color: var(--etikett); }
.artikel-schluss p { margin-top: var(--s1); }
.artikel-schluss .knopf { margin-top: var(--s3); }
.artikel-schluss :focus-visible { outline-color: var(--etikett); }

/* --- Fuß ---------------------------------------------------------------------------- */
.fuss { background: var(--fass-tief); color: var(--auf-fass); font-size: .9375rem; }
.fuss-innen { max-width: var(--breite); margin: 0 auto; padding: var(--s6) var(--rand); display: grid; gap: var(--s4); }
.fuss-marke { display: flex; gap: var(--s2); align-items: flex-start; max-width: 24rem; }
.fuss-marke strong { font-stretch: 75%; font-weight: 800; font-size: 1.25rem; color: var(--etikett); }
.fuss-nav { display: grid; align-content: start; justify-items: start; }
.fuss-titel { margin-bottom: var(--s1); font-weight: 700; color: var(--etikett); }
.fuss a, .fuss-knopf { display: inline-flex; align-items: center; min-height: 32px; color: var(--auf-fass); }
.fuss a:hover, .fuss-knopf:hover { color: var(--etikett); }
.fuss-knopf { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.fuss-angaben { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--auf-fass-leise); }
.fuss-angaben dt { font-size: .8125rem; color: var(--auf-fass-leise); }
@media (min-width: 800px) {
  .fuss-innen { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5) var(--s6); }
  .fuss-angaben { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
body.start .fuss { padding-bottom: 76px; }
@media (min-width: 960px) { body.start .fuss { padding-bottom: 0; } }

/* --- Leiste am Handy ------------------------------------------------------------------ */
.leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 12px var(--rand); padding-bottom: max(12px, env(safe-area-inset-bottom)); background: var(--fass-tief); color: var(--etikett); }
.leiste-preis { font-size: .8125rem; line-height: 1.2; }
.leiste-preis strong { display: block; font-stretch: 75%; font-size: 1.5rem; font-weight: 800; line-height: 1; }
@media (min-width: 960px) { .leiste { display: none; } }

/* --- Meldung -------------------------------------------------------------------------- */
.meldung { width: min(32rem, calc(100vw - 32px)); padding: var(--s4); border: 3px solid var(--signal); border-radius: 6px; background: var(--etikett); color: var(--tinte); box-shadow: 0 24px 64px rgba(8, 36, 54, .45); }
.meldung::backdrop { background: rgba(8, 36, 54, .7); }
.meldung-zeichen { width: 48px; height: 44px; }
.meldung p { margin-top: var(--s2); font-size: 1.25rem; line-height: 1.42; }
.meldung .knopf { margin-top: var(--s3); }
.meldung[open] { animation: meldung-auf .22s cubic-bezier(.16, 1, .3, 1); }
@keyframes meldung-auf { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .meldung[open] { animation: none; } .knopf, .auf-zu, .kurse a, .finder-wahl button { transition: none; } }

.meldungsseite { padding: var(--s10) var(--rand) var(--s12); }
.meldungsseite-innen { max-width: 40rem; margin: 0 auto; display: grid; gap: var(--s3); justify-items: start; }
.seitentitel { font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); }
.meldungsseite-text { font-size: 1.1875rem; }

/* --- Einwilligungsbanner ---------------------------------------------------------------- */
.banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--etikett); border-top: 4px solid var(--tinte); padding: var(--s2) var(--rand); font-size: .9375rem; line-height: 1.45; display: grid; gap: var(--s2); box-shadow: 0 -12px 32px rgba(8, 36, 54, .2); }
.banner-knoepfe { display: flex; flex-wrap: wrap; gap: var(--s1); }
.banner .knopf { font-size: 1rem; }
@media (min-width: 800px) { .banner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s4); padding-left: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand))); padding-right: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand))); } }

/* --- Rechtstexte -------------------------------------------------------------------------- */
.recht { max-width: 46rem; margin: 0 auto; padding: var(--s6) var(--rand) var(--s10); overflow-wrap: break-word; }
.recht h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); }
.recht h2 { margin-top: var(--s5); font-size: 1.5rem; line-height: 1.12; }
.recht p, .recht ul { margin-top: var(--s2); }
.recht ul { list-style: disc; padding-left: var(--s3); display: grid; gap: 4px; }
.recht-stand { color: var(--grau); font-size: .9375rem; }