/* shop-gratis-produkte.de - eigenes Stylesheet.
   Aufbau: 1 Schrift, 2 Grundwerte, 3 Rohbau, 4 Raster, 5 Kopf und Fuss,
   6 Bausteine, 7 Nachbauten, 8 Breiten. */

/* 1 Schrift ---------------------------------------------------------------- */

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/outfit-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/outfit-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2 Grundwerte ------------------------------------------------------------- */

:root {
  --tinte: #17223a;
  --text: #566274;
  --leise: #616a78;   /* 5,5:1 auf weiss, 5,0:1 auf Sand - WCAG AA */
  --ton: #6d3f9c;
  --ton-tief: #522e78;
  --ton-hauch: #f4eefb;
  --grund: #fdfdfe;
  --sand: #f5f4f9;
  --linie: #e4e6ee;
  --nacht: #141d31;
  --gruen: #1f7a52;
  --gruen-hauch: #eaf6f0;
  --meer: #1d4f8a;
  --meer-hauch: #eaf1fa;
  --gold: #8a5a11;
  --gold-hauch: #fbf2e3;
  --rost: #b23a33;
  --rost-hauch: #fbecea;
  --rund-klein: 10px;
  --rund: 16px;
  --rund-gross: 24px;
  --wurf: 0 1px 2px rgba(23, 34, 58, .04), 0 20px 44px -22px rgba(23, 34, 58, .24);
  --wurf-klein: 0 1px 2px rgba(23, 34, 58, .05), 0 10px 24px -16px rgba(23, 34, 58, .28);
  --schrift: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* 3 Rohbau ----------------------------------------------------------------- */

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

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; color: var(--tinte); text-wrap: balance; }
h1 { font-size: 52px; line-height: 1.08; letter-spacing: -1.4px; font-weight: 700; }
h2 { font-size: 34px; line-height: 1.18; letter-spacing: -.8px; font-weight: 700; }
h3 { font-size: 18px; line-height: 1.4; letter-spacing: -.2px; font-weight: 650; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, svg { max-width: 100%; }
b, strong { font-weight: 650; }

/* 4 Raster ----------------------------------------------------------------- */

.bahn { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 26px; }
.bahn--eng { max-width: 840px; }
.bahn--mitte { text-align: center; }
p.bahn--mitte { margin-top: 32px; }

.streifen { padding: 92px 0; }
.streifen--sand { background: var(--sand); }
.streifen--nacht { padding: 96px 0; background: var(--nacht); color: #fff; }
.streifen--nacht h2 { color: #fff; }
.streifen--schmal { padding: 68px 0; }
.streifen--sand + .streifen--sand { padding-top: 0; }

.gitter { display: grid; gap: 22px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gitter--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gitter--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gitter--fuenf { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gitter--fuenf > * { grid-column: span 2; }
.gitter--fuenf > :nth-child(4), .gitter--fuenf > :nth-child(5) { grid-column: span 3; }

.zweispalt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.zweispalt--oben { align-items: start; }
.zweispalt__halt { position: sticky; top: 104px; }

/* 5 Kopf und Fuss ---------------------------------------------------------- */

.kopfzeile {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--linie);
  background: rgba(253, 253, 254, .9);
  backdrop-filter: blur(12px) saturate(1.3);
}

.kopfzeile__innen { display: flex; align-items: center; gap: 30px; height: 72px; max-width: 1180px; margin: 0 auto; padding: 0 26px; }

.marke { display: inline-flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 700; letter-spacing: -.3px; text-decoration: none; }
.marke__zeichen { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--rund-klein); background: var(--ton); color: #fff; }
.marke__knapp { display: none; }

.kopfzeile__pfade { display: flex; gap: 22px; margin-left: auto; font-size: 15.5px; }
.kopfzeile__pfade a { color: var(--text); text-decoration: none; }
.kopfzeile__pfade a:hover { color: var(--tinte); }
.kopfzeile__pfade a[aria-current], .kopfzeile__pfade a.ist-zweig { color: var(--ton); font-weight: 600; }

.kopfzeile__werkzeuge { display: flex; align-items: center; gap: 16px; }
.kopfzeile__werkzeuge a { font-size: 15px; color: var(--text); text-decoration: none; }
.kopfzeile__werkzeuge a:hover { color: var(--tinte); }

.fusszeile { padding: 76px 0 34px; border-top: 1px solid var(--linie); background: var(--sand); }
.fusszeile__raster { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.fusszeile__absender p { margin: 14px 0 18px; max-width: 260px; color: var(--text); font-size: 14.5px; }
.fusszeile__spalte h2 { margin: 0 0 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--leise); }
.fusszeile__spalte ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.fusszeile__spalte a { color: var(--text); font-size: 15px; text-decoration: none; }
.fusszeile__spalte a:hover { color: var(--ton); }
.fusszeile__schluss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--linie); color: var(--leise); font-size: 14px; }
.fusszeile__schluss a { color: var(--leise); }

/* 6 Bausteine -------------------------------------------------------------- */

.plakette { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 12px; border: 1px solid var(--linie); border-radius: 999px; background: #fff; color: var(--text); font-size: 14px; font-weight: 600; }
.plakette::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ton); }
.streifen--nacht .plakette { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); color: #e6ddf5; }

.taste { display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; border: 1px solid var(--ton); border-radius: 999px; background: var(--ton); color: #fff; font-size: 16px; font-weight: 650; text-decoration: none; }
.taste:hover { background: var(--ton-tief); border-color: var(--ton-tief); }
.taste--still { border-color: var(--linie); background: #fff; color: var(--tinte); }
.taste--still:hover { border-color: var(--ton); background: #fff; color: var(--ton); }
.taste--hell { border-color: #fff; background: #fff; color: var(--ton-tief); }
.taste--rand { border-color: rgba(255, 255, 255, .5); background: transparent; color: #fff; }
.taste--breit { width: 100%; }
.tastenreihe { display: flex; flex-wrap: wrap; gap: 14px; }

.weiterlink { display: inline-flex; align-items: center; gap: 8px; color: var(--ton); font-size: 15.5px; font-weight: 650; text-decoration: none; }
.weiterlink:hover { color: var(--ton-tief); }
.weiterlink svg { flex: none; }

.aufmacher { padding: 76px 0 0; background: linear-gradient(184deg, var(--ton-hauch) 0%, var(--grund) 62%); }
.aufmacher__text { max-width: 760px; margin: 0 auto; text-align: center; }
.aufmacher__satz { margin: 26px 0 0; }
.aufmacher__erklaerung { margin: 24px 0 0; color: var(--text); font-size: 19.5px; line-height: 1.58; }
.aufmacher .tastenreihe { justify-content: center; margin-top: 34px; }
.aufmacher__weiter { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 22px; font-size: 15px; }
.aufmacher__weiter a { color: var(--text); }

.aufmacher .schaubild { margin-top: 44px; }
.beweisreihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; margin: 0; padding: 40px 0 78px; list-style: none; color: var(--text); font-size: 14.5px; }
.beweisreihe li { display: inline-flex; align-items: center; gap: 9px; }
.beweisreihe svg { color: var(--ton); }

.seitenkopf { padding: 56px 0 0; background: linear-gradient(184deg, var(--ton-hauch) 0%, var(--grund) 78%); }
.seitenkopf h1 { margin: 18px 0 0; font-size: 44px; }
.seitenkopf__erklaerung { margin: 20px 0 46px; max-width: 720px; color: var(--text); font-size: 19px; }
.seitenkopf + .streifen { padding-top: 46px; }

.pfadleiste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--leise); font-size: 14px; }
.pfadleiste li::after { content: "/"; margin-left: 8px; color: var(--linie); }
.pfadleiste li:last-child::after { content: none; }
.pfadleiste a { color: var(--leise); text-decoration: none; }
.pfadleiste a:hover { color: var(--ton); }

.ueberschrift { max-width: 720px; margin: 0 0 44px; }
.ueberschrift--mitte { margin-left: auto; margin-right: auto; text-align: center; }
.ueberschrift__erklaerung { margin: 18px 0 0; color: var(--text); font-size: 18px; }
.ueberschrift .weiterlink { margin-top: 22px; }
.randnotiz { max-width: 640px; margin: 18px 0 0; padding-left: 16px; border-left: 3px solid var(--ton-hauch); color: var(--leise); font-size: 14.5px; }
p.bahn--mitte.randnotiz { margin-top: 18px; margin-inline: auto; text-align: left; }

.karte h2 { font-size: 18px; line-height: 1.4; letter-spacing: -.2px; font-weight: 650; }
.karte { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border: 1px solid var(--linie); border-radius: var(--rund); background: #fff; }
.karte p { color: var(--text); font-size: 15.5px; }
.karte--verweis { position: relative; }
.karte--verweis:hover { border-color: #cdbce6; box-shadow: var(--wurf-klein); }
.karte--verweis:hover h3 { color: var(--ton); }
/* Die Überschrift trägt den Link, die Fläche der Karte wird darüber gelegt.
   So bleibt genau ein Link je Karte, und die ganze Karte ist anklickbar. */
.karte--verweis h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rund); }
.karte--verweis h3 a:focus-visible::after { outline: 2px solid var(--ton); outline-offset: 3px; }
.karte--hier { border-color: var(--ton); }
.karte a { text-decoration: none; }
.karte a:hover { color: var(--ton); }

.merkmale { display: grid; gap: 0; margin: 0; padding: 0; }
.merkmale__zeichen { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ton-hauch); color: var(--ton); }
.merkmale dt { display: flex; align-items: center; gap: 14px; margin-top: 34px; font-size: 18px; font-weight: 650; }
.merkmale dt:first-child { margin-top: 0; }
.merkmale dd { margin: 9px 0 0 54px; color: var(--text); font-size: 15.5px; }
.merkmale a { text-decoration: none; }
.merkmale a:hover { color: var(--ton); }

.stapel { display: grid; gap: 26px 44px; margin: 0; padding: 0; list-style: none; counter-reset: stufe; }
.stapel--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stapel li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; }
.stapel li::before { counter-increment: stufe; content: counter(stufe); display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--linie); border-radius: 50%; background: #fff; color: var(--ton); font-size: 15px; font-weight: 700; }
.stapel h2, .stapel h3 { font-size: 18px; font-weight: 650; }
.stapel p { margin-top: 8px; color: var(--text); font-size: 15.5px; }

.gegenueber { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--linie); border-radius: var(--rund-gross); background: #fff; overflow: hidden; }
.gegenueber__seite { padding: 34px 32px; }
.gegenueber__seite--ohne { background: #fafafc; border-right: 1px solid var(--linie); }
.gegenueber__kopf { margin: 0 0 20px; font-size: 12.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--leise); }
.gegenueber__seite--mit .gegenueber__kopf { color: var(--ton); }
.gegenueber ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.gegenueber li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; color: var(--text); font-size: 15.5px; }
.gegenueber li::before { content: "×"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--rost-hauch); color: var(--rost); font-size: 13px; font-weight: 700; }
.gegenueber__seite--mit li::before { content: "✓"; background: var(--ton-hauch); color: var(--ton); }

.spruch { max-width: 900px; margin: 24px auto 0; font-size: 30px; line-height: 1.36; letter-spacing: -.6px; font-weight: 650; }

.tabellenrahmen { border: 1px solid var(--linie); border-radius: var(--rund); background: #fff; overflow-x: auto; }
.tabelle { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 15.5px; }
.tabelle th, .tabelle td { padding: 15px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.tabelle thead th { background: var(--sand); color: var(--leise); font-size: 12.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.tabelle tbody th { color: var(--tinte); font-weight: 600; }
.tabelle td { color: var(--text); }
.tabelle tr:last-child th, .tabelle tr:last-child td { border-bottom: 0; }
.tabelle--schmal { min-width: 0; font-size: 14.5px; }
.tabelle--schmal th, .tabelle--schmal td { padding: 12px 14px; }
.tabelle__quer { vertical-align: middle; text-align: center; background: var(--ton-hauch); color: var(--ton-tief); font-weight: 600; }

.hinweis { max-width: 880px; margin: 0; padding: 18px 22px; border: 1px solid var(--meer-hauch); border-radius: var(--rund); background: var(--meer-hauch); color: #12365f; font-size: 15.5px; }
.hinweis + .hinweis { margin-top: 16px; }
.hinweis--warnung { border-color: #f0dfc2; background: var(--gold-hauch); color: #6a4409; }
.hinweis--gut { border-color: #c6e4d5; background: var(--gruen-hauch); color: #10563b; }

.fliesstext { max-width: 700px; color: var(--text); font-size: 17px; }
.fliesstext + .hinweis { margin-top: 26px; }

.fragen { margin-top: 40px; border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 17.5px; font-weight: 650; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--linie); border-radius: 50%; color: var(--ton); font-size: 17px; }
.fragen details[open] summary::after { content: "–"; }
.fragen details > div { padding: 0 0 24px; color: var(--text); font-size: 16px; }

.taktwahl { display: flex; gap: 6px; width: fit-content; margin: 0 auto 30px; padding: 5px; border: 1px solid var(--linie); border-radius: 999px; background: #fff; }
.taktwahl label { padding: 9px 18px; border-radius: 999px; color: var(--text); font-size: 15px; font-weight: 650; cursor: pointer; }
.taktwahl label i { margin-left: 9px; padding: 2px 9px; border-radius: 999px; background: var(--ton-hauch); color: var(--ton-tief); font-size: 12.5px; font-style: normal; }
.taktschalter { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
#takt-jahr:checked ~ .taktwahl label[for="takt-jahr"],
#takt-monat:checked ~ .taktwahl label[for="takt-monat"] { background: var(--ton); color: #fff; }
#takt-jahr:checked ~ .taktwahl label[for="takt-jahr"] i { background: rgba(255, 255, 255, .2); color: #fff; }
#takt-jahr:checked ~ .gitter .stufe__monat,
#takt-monat:checked ~ .gitter .stufe__jahr { display: none; }

.stufe { display: flex; flex-direction: column; padding: 30px 26px 26px; border: 1px solid var(--linie); border-radius: var(--rund); background: #fff; }
.stufe__name { font-size: 17px; font-weight: 650; }
.stufe__zahl { margin: 14px 0 6px; font-size: 36px; font-weight: 700; line-height: 1.06; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; }
.stufe__zahl small { margin-left: 7px; color: var(--text); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.stufe__takt { min-height: 48px; color: var(--text); font-size: 14.5px; line-height: 1.5; }
.stufe__takt b { display: block; margin-top: 4px; color: var(--ton-tief); }
.stufe__grenze { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linie); font-size: 15px; font-weight: 650; }
.stufe__grenze svg { flex: none; color: var(--ton); }

.abschluss { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; padding: 58px 56px; border-radius: var(--rund-gross); background: linear-gradient(128deg, var(--ton-tief) 0%, var(--ton) 58%, #9b73d4 100%); color: #fff; }
.abschluss h2 { color: #fff; font-size: 34px; }
.abschluss p { margin-top: 14px; max-width: 540px; color: rgba(255, 255, 255, .88); font-size: 17.5px; }

.bildunterschrift { max-width: 560px; margin: 14px auto 0; color: var(--leise); font-size: 13.5px; text-align: center; }
.bildreihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bildreihe--eins { grid-template-columns: minmax(0, 1fr); }
.bildreihe--weiter { margin-top: 20px; }
.bildstapel--mitte { max-width: 880px; margin-inline: auto; }

.stapelbild { display: grid; gap: 16px; max-width: 880px; margin: 0 auto; padding: 22px; border: 1px solid var(--linie); border-radius: var(--rund-gross); background: var(--sand); }
.stapelbild__kopf { margin: 0 0 2px; color: var(--leise); font-size: 12.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.stapelbild__kopf b { color: var(--tinte); font-variant-numeric: tabular-nums; }
.stapelbild__fuss { max-width: 640px; margin: 2px 0 0; color: var(--leise); font-size: 13px; line-height: 1.5; }

.bildstapel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

/* 7 Nachbauten ------------------------------------------------------------- */

.schaubild { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 26px; border: 1px solid var(--linie); border-radius: var(--rund-gross); background: var(--sand); }

.platte { padding: 20px; border: 1px solid var(--linie); border-radius: var(--rund); background: #fff; box-shadow: var(--wurf-klein); }
.platte__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 14px; font-size: 15px; font-weight: 650; }
.platte__kopf em { color: var(--leise); font-size: 12.5px; font-style: normal; font-weight: 500; }
.platte__fuss { margin-top: 14px; color: var(--leise); font-size: 12.5px; }

.werte { display: grid; gap: 10px; }
.werte__reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.werte__reihe--eins { grid-template-columns: minmax(0, 1fr); }
.werte__feld { display: grid; gap: 4px; }
.werte__feld span { color: var(--leise); font-size: 11.5px; font-weight: 600; letter-spacing: .3px; }
.werte__feld b { padding: 9px 12px; border: 1px solid var(--linie); border-radius: var(--rund-klein); background: #fcfcfe; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.reiter { display: flex; gap: 22px; margin: -4px 0 16px; border-bottom: 1px solid var(--linie); }
.reiter span { padding: 0 2px 9px; color: var(--leise); font-size: 12.5px; font-weight: 600; }
.reiter .ist-da { position: relative; color: var(--tinte); box-shadow: inset 0 -2px 0 var(--ton); }
.reiter b { margin-left: 7px; padding: 1px 7px; border-radius: 999px; background: var(--ton-hauch); color: var(--ton-tief); font-size: 10.5px; }

.gitterrahmen { border: 1px solid var(--linie); border-radius: var(--rund-klein); overflow-x: auto; }
.admingitter { width: 100%; min-width: 400px; border-collapse: collapse; font-size: 12.5px; }
.admingitter th, .admingitter td { padding: 9px 9px; text-align: left; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.admingitter thead th { background: #fafaff; color: var(--leise); font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; white-space: normal; }
.admingitter tbody th { color: var(--tinte); font-size: 13px; font-weight: 650; white-space: normal; }
.admingitter tr:last-child th, .admingitter tr:last-child td { border-bottom: 0; }
.admingitter__ordnung { width: 46px; }
.admingitter__zahl { font-variant-numeric: tabular-nums; font-weight: 600; }
.admingitter__leise { color: var(--leise); }
.ordnungszahl { color: var(--leise); font-variant-numeric: tabular-nums; }
.ordnungspfeile { margin-left: 5px; color: var(--linie); vertical-align: -3px; }
.art { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.art--produkt { background: var(--ton-hauch); color: var(--ton-tief); }
.art--rabatt { background: #e4f1f4; color: #17627a; }
.schalter { display: inline-flex; align-items: center; gap: 6px; color: var(--leise); font-size: 11.5px; font-weight: 600; }
.schalter::before { content: ""; width: 22px; height: 12px; border-radius: 999px; background: var(--linie); box-shadow: inset -10px 0 0 -1px #fff; }
.schalter--an { color: var(--text); }
.schalter--an::before { background: var(--gruen); box-shadow: inset 10px 0 0 -1px #fff; }
.gitterleiste { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.knopfbild { padding: 7px 13px; border: 1px solid var(--ton); border-radius: var(--rund-klein); background: var(--ton); color: #fff; font-size: 11.5px; font-weight: 650; }
.knopfbild--still { border-color: var(--linie); background: #fff; color: var(--text); }

.posten { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.posten li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.posten li:last-child { border-bottom: 0; }
.posten__bild { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--rund-klein); background: var(--sand); color: var(--tinte); font-size: 15px; font-weight: 700; }
.posten__bild--praemie { background: var(--ton-hauch); color: var(--ton-tief); }
.posten__name { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.posten__name small { display: block; margin-top: 3px; color: var(--leise); font-size: 11.5px; font-weight: 500; }
.posten__name i { color: var(--ton); font-style: normal; font-weight: 650; }
.posten__preis { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.posten__preis--minus { color: var(--gruen); }
.posten__weg { margin-left: 6px; padding: 1px 5px; border: 1px solid var(--linie); border-radius: 5px; color: var(--leise); font-size: 11px; font-weight: 500; }
.summe { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linie); color: var(--leise); font-size: 13px; }
.summe b { color: var(--tinte); font-size: 19px; font-variant-numeric: tabular-nums; }

.gruppe__text { margin: 0 0 4px; color: var(--leise); font-size: 12.5px; line-height: 1.5; }
.leiter { display: flex; align-items: flex-start; margin: 28px 0 0; padding-left: 7px; list-style: none; }
.leiter li { position: relative; display: grid; justify-items: end; gap: 7px; }
.leiter li + li { flex: 1; min-width: 0; }
.leiter li + li::before { content: ""; position: absolute; top: 5px; right: 7px; left: -7px; height: 4px; background: var(--linie); }
.leiter i { position: relative; z-index: 1; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--linie); box-shadow: 0 0 0 3px #fff; }
.leiter span { font-size: 10.5px; font-weight: 600; color: var(--leise); white-space: nowrap; font-variant-numeric: tabular-nums; transform: translateX(45%); }
.leiter li:last-child span { transform: none; }
.leiter .ist-da i, .leiter .ist-da::before { background: var(--gruen); }
.leiter .ist-da i::after { content: ""; position: absolute; top: 4px; left: 3.5px; width: 6px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.leiter .ist-da span { color: var(--text); }
.leiter .ist-ziel::before { background: var(--ton); }
.leiter .ist-ziel i { background: #fff; border: 3px solid var(--ton); }
.leiter .ist-ziel span { color: var(--ton-tief); }
.leiter .ist-offen i { background: var(--linie); }
.leiter__rest { margin: 14px 0 0; text-align: center; }
.leiter__rest span { display: inline-block; padding: 5px 13px; border-radius: 999px; background: var(--sand); color: var(--ton-tief); font-size: 12.5px; }
.leiter__rest--voll span { background: #eaf6ef; color: #1d6b42; }
.leiter__rest b { font-variant-numeric: tabular-nums; }

.gaben { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.gaben--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gabe { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--linie); border-radius: 12px; background: #fff; }
.gabe--gewaehlt { border-color: #bfe0cd; background: #f5fbf8; }
.gabe--zu { background: #fbfbfd; border-color: #e8e8ef; }
.gabe--zu .gabe__name { color: var(--leise); }
.gabe--zu .gabe__name small { color: var(--leise); }
.gabe--zu .gabe__schild--frei { background: #4f7f68; }
.gabe--zu .gabe__schild--rabatt { background: #4a6a90; }
.gabe__schild { align-self: flex-start; padding: 3px 9px; border-radius: 6px; font-size: 10.5px; font-weight: 700; }
.gabe__schild--frei { background: var(--gruen); color: #fff; }
.gabe__schild--rabatt { background: var(--meer); color: #fff; }
.gabe__name { font-size: 13px; font-weight: 650; line-height: 1.35; }
.gabe__name small { display: block; margin-top: 3px; color: var(--leise); font-size: 11.5px; font-weight: 500; }
.gabe__knopf { margin-top: auto; padding: 8px 6px; border-radius: 9px; text-align: center; font-size: 11.5px; font-weight: 700; }
.gabe__knopf--waehlen { background: var(--ton); color: #fff; }
.gabe__knopf--gewaehlt { background: var(--gruen); color: #fff; }
.gabe__knopf--tauschen { border: 1px solid var(--ton); color: var(--ton); }
.gabe__knopf--zu { border: 1px solid var(--linie); background: #f7f7fa; color: var(--leise); font-variant-numeric: tabular-nums; }

.regel__liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.regel__liste li { padding: 9px 12px; border: 1px solid var(--linie); border-radius: var(--rund-klein); background: #fcfcfe; font-size: 12.5px; color: var(--text); }
.regel__liste li b { display: block; color: var(--tinte); font-size: 13px; }
.regel__liste li span { display: inline-block; margin-top: 4px; margin-right: 4px; padding: 2px 8px; border-radius: 999px; background: var(--ton-hauch); color: var(--ton-tief); font-size: 11.5px; font-weight: 600; }
.regel__und { text-align: center; color: var(--leise); font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.regel__folge { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--ton-tief); font-size: 13px; font-weight: 600; }

.meldung { margin: 0 0 14px; padding: 11px 14px; border: 1px solid var(--gruen-hauch); border-radius: var(--rund-klein); background: var(--gruen-hauch); color: #10563b; font-size: 12.5px; line-height: 1.5; }
.meldung--meer { border-color: var(--meer-hauch); background: var(--meer-hauch); color: #12365f; }

.strich { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.strich .voll { fill: currentColor; stroke: none; }

/* Rechtstexte */

.rechtstext { color: var(--text); font-size: 16.5px; overflow-wrap: break-word; hyphens: auto; }
.rechtstext h2 { margin: 38px 0 12px; font-size: 22px; }
.rechtstext h3 { margin: 26px 0 8px; font-size: 18px; }
.rechtstext p { margin: 0 0 14px; }
.rechtstext ul { margin: 0 0 14px; padding-left: 22px; }
.rechtstext li { margin: 0 0 6px; }
.rechtstext a { color: var(--ton); }
.quelle { margin-top: 30px; color: var(--leise); font-size: 14px; }

.tastenreihe--mitte { justify-content: center; margin-top: 34px; }
.tastenreihe--mitte .weiterlink + .weiterlink { margin-left: 18px; }

/* Tastatur */

a:focus-visible, summary:focus-visible, label:focus-visible { outline: 2px solid var(--ton); outline-offset: 3px; border-radius: 6px; }
.abschluss a:focus-visible { outline-color: #fff; }

/* 7b Senkrechter Rhythmus ---------------------------------------------------
   Was im Streifen aufeinander folgt, braucht Luft. Steht davor eine
   Überschrift, gewinnt deren größerer Abstand (Ränder fallen zusammen). */

* + .gitter,
* + .bildreihe,
* + .bildstapel,
* + .stapelbild,
* + .schaubild,
* + .tabellenrahmen,
* + .gitterrahmen,
* + .hinweis,
* + .fliesstext,
* + .gegenueber,
* + .merkmale,
* + .stapel,
* + .taktwahl { margin-top: 30px; }

.hinweis + .hinweis { margin-top: 16px; }
.bildreihe--weiter { margin-top: 20px; }

/* 8 Breiten ---------------------------------------------------------------- */

@media (max-width: 1080px) {
  h1 { font-size: 44px; }
  .kopfzeile__pfade { gap: 16px; font-size: 15px; }
}

@media (max-width: 980px) {
  .kopfzeile__pfade { display: none; }
  .kopfzeile__innen { gap: 14px; height: 64px; }
  .kopfzeile__werkzeuge { gap: 12px; margin-left: auto; }
  .kopfzeile__werkzeuge .taste { padding: 9px 16px; font-size: 15px; }
  .streifen { padding: 72px 0; }
  .zweispalt { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .zweispalt__halt { position: static; }
  .gitter, .gitter--drei, .gitter--fuenf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gitter--fuenf > *, .gitter--fuenf > :nth-child(4), .gitter--fuenf > :nth-child(5) { grid-column: auto; }
  .fusszeile__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abschluss { grid-template-columns: minmax(0, 1fr); padding: 44px 34px; }
}

@media (max-width: 760px) {
  .kopfzeile__werkzeuge .ist-demo { display: none; }
  .marke { font-size: 15.5px; }
  h1 { font-size: 36px; letter-spacing: -1px; }
  h2 { font-size: 28px; }
  .aufmacher { padding-top: 54px; }
  .aufmacher__erklaerung { font-size: 17.5px; }
  .seitenkopf h1 { font-size: 34px; }
  .gegenueber { grid-template-columns: minmax(0, 1fr); }
  .gegenueber__seite--ohne { border-right: 0; border-bottom: 1px solid var(--linie); }
  .spruch { font-size: 23px; }
  .schaubild { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .bildreihe { grid-template-columns: minmax(0, 1fr); }
  .stapel--zwei { grid-template-columns: minmax(0, 1fr); }
  .gaben { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .bahn { padding: 0 18px; }
  .marke__lang { display: none; }
  .marke__knapp { display: inline; }
  .streifen { padding: 56px 0; }
  .gitter, .gitter--zwei, .gitter--drei, .gitter--fuenf, .fusszeile__raster { grid-template-columns: minmax(0, 1fr); }
  .leiter span { font-size: 10px; }
  .abschluss { padding: 34px 22px; }
  .abschluss h2 { font-size: 26px; }
}

/* Sehr schmale Geraete: ein einzelnes langes Wort als Titel, etwa
   "Datenschutzerklaerung", ist bei 34 px breiter als die Bahn. */
@media (max-width: 380px) {
  h1 { font-size: 30px; hyphens: auto; }
  .seitenkopf h1 { font-size: 27px; }
}