@charset "UTF-8";
/* ==========================================================================
   stichsaege-vergleich.de — Design "Werkstatt am Holz"
   Keine externen Ressourcen. Keine Google Fonts. Keine Cookies.
   ========================================================================== */

:root {
  --werkbank:      #1D3557;
  --werkbank-tief: #142744;
  --werkbank-hell: #40628C;
  --holz:          #FAF5EC;
  --span:          #EFE3CE;
  --saege:         #1E7A46;
  --saege-hell:    #1D8450;
  --klinge:        #5D6C7B;
  --warnung:       #A85200;
  --warn-flaeche:  #FFF3E4;
  --gut-flaeche:   #E7F2EA;
  --papier:        #FFFFFF;
  --tinte:         #1E1C1A;
  --tinte-soft:    #565049;
  --linie:         #E2D8C8;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;

  --space-1: 4px;  --space-2: 8px;  --space-3: 16px; --space-4: 24px;
  --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px;

  --radius:   10px;
  --radius-s: 6px;
  --breite:   1120px;
  --schatten: 0 1px 2px rgba(29,53,87,.06), 0 4px 16px rgba(29,53,87,.07);
  --schatten-stark: 0 2px 6px rgba(29,53,87,.10), 0 12px 32px rgba(29,53,87,.12);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--tinte);
  background: var(--holz);
  overflow-wrap: break-word;
}
@media (min-width: 700px) { body { font-size: 18px; } }
img, svg { max-width: 100%; height: auto; }
a { color: var(--werkbank); text-underline-offset: .18em; }
a:hover { color: var(--saege); }
:focus-visible {
  outline: 3px solid var(--werkbank-hell);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--space-3); }
@media (min-width: 700px) { .wrap { padding-inline: var(--space-4); } }

main { display: block; }
.inhalt { max-width: 68ch; }
.inhalt-breit { max-width: 100%; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--werkbank); color: #fff; padding: var(--space-3) var(--space-4);
  border-radius: 0 0 var(--radius-s) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* --- Kopfbereich ---------------------------------------------------------- */
.kopf {
  background: var(--werkbank);
  color: #fff;
  border-bottom: 4px solid var(--saege);
}
.kopf a { color: #fff; }
.kopf-zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); min-height: 64px; flex-wrap: wrap;
}
.marke {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: .98rem; letter-spacing: -.01em;
  text-decoration: none; padding: var(--space-2) 0;
}
.marke-text { display: inline-flex; flex-wrap: wrap; }
@media (min-width: 420px) { .marke { font-size: 1.05rem; } }
.marke svg { flex: 0 0 auto; }
.marke b { color: #fff; }
.marke span { color: #BFD3EC; font-weight: 500; }

.nav-schalter {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 12px;
  background: rgba(255,255,255,.10); color: #fff;
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-s);
  font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
}
.nav-schalter:hover { background: rgba(255,255,255,.18); }
@media (min-width: 900px) { .nav-schalter { display: none; } }

/* Ohne JavaScript bleibt die Navigation sichtbar und rutscht als volle Zeile unter
   das Logo, statt es zu überlagern. Mit JavaScript wird sie per [hidden] geklappt. */
.haupt-nav { flex: 0 0 100%; }
.haupt-nav ul {
  list-style: none; margin: 0; padding: 0 0 var(--space-3);
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid rgba(255,255,255,.16); padding-top: var(--space-2);
}
.haupt-nav a {
  display: block; padding: 11px var(--space-3); min-height: 44px;
  text-decoration: none; font-weight: 600; font-size: .98rem;
  border-radius: var(--radius-s);
}
.haupt-nav a:hover, .haupt-nav a:focus-visible { background: rgba(255,255,255,.14); color: #fff; }
.haupt-nav a[aria-current="page"] { background: rgba(255,255,255,.18); box-shadow: inset 3px 0 0 var(--saege); }
.haupt-nav[hidden] { display: none; }
@media (min-width: 900px) {
  .haupt-nav, .haupt-nav[hidden] { display: block; }
  .haupt-nav { flex: 0 1 auto; }
  .haupt-nav ul { flex-direction: row; align-items: center; gap: var(--space-1);
    padding: 0; flex-wrap: wrap; border-top: 0; }
  .haupt-nav a { padding: 9px 12px; font-size: .93rem; }
  .haupt-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--saege); }
}

/* --- Breadcrumb ----------------------------------------------------------- */
.brotkrumen { font-size: .88rem; color: var(--tinte-soft); padding: var(--space-3) 0 0; }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.brotkrumen li::after { content: "›"; margin-left: 6px; color: var(--klinge); }
.brotkrumen li:last-child::after { content: ""; }
.brotkrumen a { color: var(--tinte-soft); }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  background: linear-gradient(160deg, var(--werkbank) 0%, var(--werkbank-tief) 100%);
  color: #fff; padding: var(--space-6) 0;
}
.hero h1 { color: #fff; margin-top: 0; }
.hero-grid { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.1fr .9fr; } }
.hero-text { max-width: 60ch; }
.hero-lead { font-size: 1.1rem; color: #DCE6F2; }
.hero-fakten { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: 10px; }
.hero-fakten li { position: relative; padding-left: 30px; color: #E8EFF7; font-size: .98rem; }
.hero-fakten li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 14px; height: 8px; border-left: 3px solid var(--saege-hell);
  border-bottom: 3px solid var(--saege-hell); transform: rotate(-45deg);
}
.hero-aktion { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* --- Typografie ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 700; line-height: 1.22; color: var(--werkbank);
  letter-spacing: -.015em; margin: 0 0 var(--space-3);
  overflow-wrap: break-word; hyphens: auto;
}
h1 { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.85rem); margin-top: var(--space-6); }
h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.3rem); margin-top: var(--space-5); }
h4 { font-size: 1.02rem; margin-top: var(--space-4); color: var(--werkbank-tief); }
h2 + h3 { margin-top: var(--space-4); }
p { margin: 0 0 var(--space-3); }
.lead { font-size: 1.1rem; color: var(--tinte-soft); }
main ul, main ol { margin: 0 0 var(--space-3); padding-left: 1.35em; }
main li { margin-bottom: var(--space-2); }
main li::marker { color: var(--saege); }
strong { font-weight: 700; }
abbr[title] { text-decoration-style: dotted; cursor: help; }
hr { border: 0; border-top: 1px solid var(--linie); margin: var(--space-6) 0; }
.artikel { padding-bottom: var(--space-7); }
.meta-zeile {
  font-size: .86rem; color: var(--tinte-soft);
  border-bottom: 1px solid var(--linie); padding-bottom: var(--space-3); margin-bottom: var(--space-4);
}

/* --- Code-Chip (Sägeblatt-Bezeichnungen) ---------------------------------- */
.code-chip {
  font-family: var(--mono); font-size: .88em; font-weight: 600;
  background: var(--span); color: var(--werkbank-tief);
  padding: .12em .45em; border-radius: 4px;
  border: 1px solid var(--linie); white-space: nowrap;
}
a .code-chip, .code-chip a { color: inherit; }

/* --- Boxen ---------------------------------------------------------------- */
.info-box, .warn-box, .merk-box {
  border-radius: var(--radius); padding: var(--space-4);
  margin: var(--space-5) 0; border: 1px solid var(--linie);
}
.info-box  { background: var(--papier); border-left: 5px solid var(--werkbank-hell); }
.warn-box  { background: var(--warn-flaeche); border-left: 5px solid var(--warnung); border-color: #F2DFC5; }
.merk-box  { background: var(--gut-flaeche); border-left: 5px solid var(--saege); border-color: #CFE3D6; }
.info-box > :last-child, .warn-box > :last-child, .merk-box > :last-child { margin-bottom: 0; }
.box-titel {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; margin: 0 0 var(--space-2); font-size: 1.02rem;
}
.warn-box .box-titel { color: var(--warnung); }
.merk-box .box-titel { color: var(--saege); }
.info-box .box-titel { color: var(--werkbank); }
.box-titel svg { flex: 0 0 auto; }

/* --- Inhaltsverzeichnis --------------------------------------------------- */
.toc {
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: var(--space-4); margin: var(--space-5) 0;
}
.toc > p { font-weight: 700; color: var(--werkbank); margin: 0 0 var(--space-2); font-size: .95rem;
  text-transform: uppercase; letter-spacing: .06em; }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { margin-bottom: 6px; }
.toc a { color: var(--werkbank); text-decoration-color: var(--linie); }
.toc a:hover { color: var(--saege); }

/* --- Buttons -------------------------------------------------------------- */
.btn-amazon, .btn-zweit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px var(--space-4);
  border-radius: var(--radius-s); font-weight: 700; font-size: 1rem;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
  border: 2px solid transparent;
}
.btn-amazon {
  background: linear-gradient(180deg, var(--saege-hell) 0%, var(--saege) 100%);
  color: #fff; box-shadow: var(--schatten);
}
.btn-amazon:hover { background: var(--saege-hell); color: #fff; box-shadow: var(--schatten-stark); }
.btn-amazon:active { transform: translateY(1px); }
.btn-zweit { background: var(--papier); color: var(--werkbank); border-color: var(--werkbank); }
.btn-zweit:hover { background: var(--werkbank); color: #fff; }
.btn-block { width: 100%; }
.hero .btn-zweit { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.hero .btn-zweit:hover { background: #fff; color: var(--werkbank); }

/* --- Produktkarten -------------------------------------------------------- */
.karten-raster { display: grid; gap: var(--space-4); margin: var(--space-5) 0; }
@media (min-width: 780px) { .karten-raster.zwei { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .karten-raster.drei { grid-template-columns: repeat(3, 1fr); } }

.produkt-karte {
  background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: var(--space-4); box-shadow: var(--schatten);
  display: flex; flex-direction: column;
}
.karte-rolle {
  display: inline-block; align-self: flex-start;
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  background: var(--span); color: var(--werkbank-tief);
  padding: 4px 10px; border-radius: 100px; margin-bottom: var(--space-3);
}
.produkt-karte h3 { margin: 0 0 var(--space-1); font-size: 1.15rem; }
.produkt-karte .typ { font-size: .85rem; color: var(--klinge); font-family: var(--mono); margin-bottom: var(--space-3); }
.produkt-karte .warum { margin-bottom: var(--space-3); }

.datenblatt { list-style: none; margin: 0 0 var(--space-3); padding: 0; border-top: 1px solid var(--linie); }
.datenblatt li {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: 7px 0; border-bottom: 1px solid var(--linie); font-size: .9rem; margin: 0;
}
.datenblatt dt, .datenblatt .k { color: var(--tinte-soft); }
.datenblatt .v { font-family: var(--mono); font-weight: 600; color: var(--werkbank-tief); text-align: right; }

.pro-contra { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); font-size: .93rem; }
.pro-contra p { margin: 0; padding-left: 26px; position: relative; }
.pro-contra .pro::before, .pro-contra .contra::before {
  position: absolute; left: 0; top: 0; font-weight: 700; font-family: var(--mono);
}
.pro-contra .pro::before { content: "+"; color: var(--saege); font-size: 1.2em; }
.pro-contra .contra::before { content: "−"; color: var(--warnung); font-size: 1.2em; }
.produkt-karte .btn-amazon { margin-top: auto; }

.affiliate-hinweis { font-size: .78rem; color: var(--tinte-soft); margin: var(--space-2) 0 0; line-height: 1.5; }

/* --- Matrix / Tabellen ---------------------------------------------------- */
.matrix-wrap { margin: var(--space-4) 0 var(--space-5); }
.matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--papier); }
.scroll-hinweis {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--tinte-soft); margin-bottom: var(--space-2);
}
@media (min-width: 1000px) { .scroll-hinweis { display: none; } }

table.matrix { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; }
table.matrix caption { text-align: left; font-size: .85rem; color: var(--tinte-soft); padding: var(--space-2) var(--space-3); }
table.matrix th, table.matrix td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
table.matrix thead th {
  background: var(--werkbank); color: #fff; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  position: sticky; top: 0; z-index: 1;
}
table.matrix tbody tr:nth-child(even) { background: #FCFAF5; }
table.matrix tbody tr:hover { background: var(--gut-flaeche); }
table.matrix td.num, table.matrix td.code { font-family: var(--mono); white-space: nowrap; }
table.matrix th[scope="row"] { font-weight: 700; color: var(--werkbank-tief); }
table.matrix tbody tr:last-child td, table.matrix tbody tr:last-child th { border-bottom: 0; }

.tabelle-schlicht { width: 100%; border-collapse: collapse; font-size: .93rem; margin: var(--space-4) 0; }
.tabelle-schlicht th, .tabelle-schlicht td { padding: 9px 10px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.tabelle-schlicht thead th { color: var(--werkbank); font-size: .84rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid var(--werkbank); }

/* --- Themenkarten / Hubs -------------------------------------------------- */
.themen-raster { display: grid; gap: var(--space-3); margin: var(--space-4) 0 var(--space-6); }
@media (min-width: 640px) { .themen-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .themen-raster { grid-template-columns: repeat(3, 1fr); } }
.themen-karte {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: var(--space-4); text-decoration: none; color: var(--tinte);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.themen-karte:hover { border-color: var(--saege); box-shadow: var(--schatten); transform: translateY(-2px); color: var(--tinte); }
.themen-karte strong { color: var(--werkbank); font-size: 1.05rem; line-height: 1.3; }
.themen-karte span { font-size: .92rem; color: var(--tinte-soft); }
.themen-karte .pfeil { color: var(--saege); font-weight: 700; font-size: .88rem; margin-top: auto; padding-top: var(--space-2); }

/* --- Schritt-Liste -------------------------------------------------------- */
.schritt-liste { list-style: none; counter-reset: schritt; padding: 0; margin: var(--space-4) 0; }
.schritt-liste > li {
  counter-increment: schritt; position: relative;
  padding: 0 0 var(--space-4) 52px; margin: 0;
}
.schritt-liste > li::before {
  content: counter(schritt); position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--werkbank); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .95rem; font-family: var(--mono);
}
.schritt-liste > li::after {
  content: ""; position: absolute; left: 17px; top: 38px; bottom: 6px; width: 2px; background: var(--linie);
}
.schritt-liste > li:last-child::after { display: none; }
.schritt-liste h3, .schritt-liste h4 { margin-top: 0; margin-bottom: var(--space-1); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { margin: var(--space-4) 0; }
.faq details {
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: var(--radius); margin-bottom: var(--space-2);
}
.faq details[open] { border-color: var(--werkbank-hell); }
.faq summary {
  cursor: pointer; padding: var(--space-3) var(--space-4);
  font-weight: 700; color: var(--werkbank); list-style: none;
  display: flex; align-items: flex-start; gap: var(--space-3); min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; font-family: var(--mono); font-size: 1.4rem;
  line-height: 1; color: var(--saege); flex: 0 0 auto; transition: transform .2s ease;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { background: #FCFAF5; }
.faq .antwort { padding: 0 var(--space-4) var(--space-4); }
.faq .antwort > :last-child { margin-bottom: 0; }

/* --- Tools ---------------------------------------------------------------- */
.tool {
  background: var(--papier); border: 2px solid var(--werkbank);
  border-radius: var(--radius); padding: var(--space-4); margin: var(--space-5) 0;
  box-shadow: var(--schatten);
}
.tool-kopf { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.tool-kopf h2, .tool-kopf h3 { margin: 0; }
.tool-felder { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .tool-felder { grid-template-columns: repeat(2, 1fr); } }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld > label,
.feld > .feld-titel { font-weight: 700; color: var(--werkbank); font-size: .95rem; }
.feld .hilfe { font-size: .84rem; color: var(--tinte-soft); }
.feld select, .feld input[type="number"] {
  font: inherit; font-size: 1rem; min-height: 48px;
  padding: 10px 12px; border: 2px solid var(--linie); border-radius: var(--radius-s);
  background: var(--papier); color: var(--tinte); width: 100%;
}
.feld select:focus-visible, .feld input:focus-visible { border-color: var(--werkbank-hell); }
.optionen { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.optionen label {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px;
  border: 2px solid var(--linie); border-radius: 100px;
  background: var(--papier); cursor: pointer; font-size: .95rem;
}
.optionen label:hover { border-color: var(--werkbank-hell); }
.optionen input { accent-color: var(--saege); width: 18px; height: 18px; }
.optionen input:checked + span { font-weight: 700; color: var(--werkbank); }
.optionen label:has(input:checked) { border-color: var(--saege); background: var(--gut-flaeche); }
.tool-aktion { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.tool-ergebnis { margin-top: var(--space-4); }
.ergebnis-karte {
  background: var(--gut-flaeche); border: 1px solid #CFE3D6;
  border-left: 5px solid var(--saege); border-radius: var(--radius); padding: var(--space-4);
}
.ergebnis-karte.achtung { background: var(--warn-flaeche); border-color: #F2DFC5; border-left-color: var(--warnung); }
.ergebnis-karte h4 { margin-top: 0; }
.ergebnis-werte { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: 8px; }
.ergebnis-werte li { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin: 0;
  border-bottom: 1px dashed rgba(29,53,87,.18); padding-bottom: 6px; }
.ergebnis-werte .k { color: var(--tinte-soft); font-size: .9rem; }
.ergebnis-werte .v { font-family: var(--mono); font-weight: 700; color: var(--werkbank-tief); }
.tool-fallback { border-top: 1px solid var(--linie); margin-top: var(--space-4); padding-top: var(--space-3); }
.js .tool-fallback[data-jshide] { display: none; }
.tool-hinweis { font-size: .82rem; color: var(--tinte-soft); margin-top: var(--space-3); }

/* --- Autorbox / Vertrauen ------------------------------------------------- */
.autor-box {
  display: flex; gap: var(--space-4); align-items: flex-start;
  background: var(--span); border-radius: var(--radius);
  padding: var(--space-4); margin: var(--space-6) 0 0; border: 1px solid var(--linie);
}
.autor-box .avatar { flex: 0 0 auto; }
.autor-box h2, .autor-box h3 { margin: 0 0 var(--space-1); font-size: 1.02rem; }
.autor-box p { font-size: .92rem; color: var(--tinte-soft); margin-bottom: var(--space-2); }
.autor-box p:last-child { margin-bottom: 0; }

.kriterien { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: var(--space-4); margin: var(--space-5) 0; }
.kriterien > p:first-child { font-weight: 700; color: var(--werkbank); }

/* --- Verwandte Themen ----------------------------------------------------- */
.weiterlesen { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: var(--space-4); margin: var(--space-6) 0 0; }
.weiterlesen p:first-child { font-weight: 700; color: var(--werkbank); margin-bottom: var(--space-2); }
.weiterlesen ul { margin: 0; padding-left: 1.2em; }

/* --- Fußbereich ----------------------------------------------------------- */
.fuss {
  background: var(--werkbank-tief); color: #C9D6E6;
  margin-top: var(--space-8); padding: var(--space-6) 0 var(--space-4);
  font-size: .92rem;
}
.fuss h2 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 var(--space-3); }
.fuss a { color: #DCE6F2; }
.fuss a:hover { color: #fff; }
.fuss-raster { display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 8px; }
.fuss-recht {
  border-top: 1px solid rgba(255,255,255,.16); margin-top: var(--space-5);
  padding-top: var(--space-4); font-size: .84rem; color: #A9BBD0; line-height: 1.65;
}
.fuss-recht p { margin-bottom: var(--space-2); }

/* --- Hilfsklassen --------------------------------------------------------- */
.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.zentriert { text-align: center; }
.abstand-oben { margin-top: var(--space-6); }
.grafik { margin: var(--space-5) 0; }
.grafik svg, .grafik img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.grafik figcaption { font-size: .86rem; color: var(--tinte-soft); margin-top: var(--space-2); }
.stand { font-size: .82rem; color: var(--tinte-soft); font-style: italic; }