/*
Theme Name: MitReeder
Theme URI: https://mitreeder.de
Author: rubberduck software
Description: Werbeseite fuer MitReeder — Boatsharing fuer Eignergemeinschaften.
             Richtung "kalt + Ultramarin", entschieden am 09.10.2026. Die Gestaltung
             lehnt sich bewusst NICHT an Kielwasser an: Kielwasser ist zurueckhaltend
             und werbefrei, MitReeder muss in drei Minuten ueberzeugen.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: mitreeder
*/

:root {
  --tief:      #0B1622;
  --tief-2:    #13222F;
  --tief-3:    #1B2E3E;
  --linie-d:   #273F52;

  --grund:     #FFFFFF;
  --flaeche:   #F2F6F8;
  --linie:     #DCE5EB;

  --tinte:     #0B1622;
  --tinte-2:   #5A6B78;
  --tinte-d:   #9FB4C4;

  --marke:     #2D5BFF;
  --marke-h:   #7694FF;
  --marke-w:   #E8EDFF;

  --gut:       #0E9F6E;
  --offen:     #D97A2B;

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --sans:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0 0 1em; max-width: 62ch; }
a { color: inherit; }

.bahn   { padding-inline: 20px; }
.innen  { max-width: 1120px; margin-inline: auto; }
.schmal { max-width: 740px; margin-inline: auto; }

.augenbraue {
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--marke); margin: 0 0 14px;
}
.dunkel .augenbraue { color: var(--marke-h); }

/* ───────────────────────── Kopf ───────────────────────── */
.kopf { background: var(--tief); color: #fff; padding-block: 18px; }
.kopf .innen { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
/* Marke = Zeichen + Wortmarke.
   „Reeder" ist abgesetzt (Christians Entscheidung, 10.10.2026 — zurück zur früheren
   Fassung). Der Name ist zusammengesetzt, und die Farbe zeigt, wo die Fuge sitzt:
   MIT dem Reeder, nicht „Mitreeder" als ein Wort.
   Damit tragen zwei Dinge den Markenton — das Zeichen und die zweite Silbe. Das Zeichen
   steht deshalb im HELLEREN Ton (--marke-h), die Silbe ebenso: Auf dem dunklen Kopf
   bliebe das kräftige #2D5BFF matschig. */
.marke {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 24px; font-weight: 700;
  letter-spacing: -.03em; margin-right: auto;
  color: #fff; text-decoration: none;
}
.marke .zeichen { width: 30px; height: 30px; flex: 0 0 auto; color: var(--marke-h); }
.marke:hover .zeichen { color: #fff; }
.marke .reeder { color: var(--marke-h); }
.marke:hover .reeder { color: #fff; }
.navi { display: flex; gap: 24px; font-size: 15px; flex-wrap: wrap; }
.navi a { color: var(--tinte-d); text-decoration: none; }
.navi a:hover { color: #fff; }
/* Abgesetzt von der Navigation: ein Rahmen, kein weiterer Menüpunkt. Wer hier klickt,
   verlässt die Werbeseite — das darf man sehen. */
.anmelden {
  margin-left: 24px; padding: 8px 16px; border-radius: 8px;
  border: 1px solid var(--linie-d); color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 500; white-space: nowrap;
}
.anmelden:hover { background: var(--marke); border-color: var(--marke); }
@media (max-width: 720px) { .anmelden { margin-left: 0; } }

/* ───────────────────────── Hero ───────────────────────── */
.hero {
  position: relative; isolation: isolate;
  background: var(--tief); color: #fff;
  padding-block: 76px 92px; overflow: hidden;
  min-height: min(78vh, 680px); display: flex; align-items: center;
}
/* Das Foto liegt HINTER dem Inhalt. Der Verlauf ist Platzhalter UND Abdunklung —
   er bleibt liegen, wenn das Foto kommt, damit der Text in jedem Fall traegt. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(115% 85% at 78% 24%, #1E4FA8 0%, #14304F 38%, var(--tief) 74%);
}
.hero.mit-bild::before {
  background-image: var(--heldenbild);
  background-size: cover;
  /* 32 % statt 60 %: Radbogen und Gegenlicht liegen im OBEREN Drittel des Fotos.
     Bei 60 % schnitt der Ausschnitt genau darueber weg und zeigte nur Wasser. */
  background-position: center 32%;
}
/* Der Schleier lag zuerst bei 95 % — davon war vom Foto nichts mehr zu sehen
   (Christian, 09.10.2026). Jetzt traegt die Lesbarkeit vor allem der Textschatten,
   der Schleier nur noch so viel, wie links hinter der Ueberschrift noetig ist.
   Rechts laeuft er fast auf null aus, damit Rad und Gegenlicht sichtbar bleiben. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(11,22,34,.80) 0%,
    rgba(11,22,34,.58) 38%,
    rgba(11,22,34,.22) 72%,
    rgba(11,22,34,.04) 100%);
}
@media (max-width: 959px) {
  /* Einspaltig steht der Text ueber dem ganzen Bild — dort braucht es etwas mehr,
     aber laengst nicht so viel wie vorher. */
  .hero::after {
    background: linear-gradient(180deg,
      rgba(11,22,34,.74) 0%, rgba(11,22,34,.66) 55%, rgba(11,22,34,.80) 100%);
  }
}

.hero h1 {
  font-size: clamp(36px, 6.4vw, 66px); max-width: 16ch; font-weight: 700;
  text-shadow: 0 2px 22px rgba(4,10,16,.85), 0 1px 3px rgba(4,10,16,.6);
}
.hero h1 em { font-style: normal; color: var(--marke-h); }
.hero .unter {
  font-size: clamp(17px, 2vw, 20px); color: #CBD9E4; max-width: 54ch; margin-top: 20px;
  text-shadow: 0 1px 14px rgba(4,10,16,.9);
}
.hero .augenbraue, .hero .hinweis { text-shadow: 0 1px 10px rgba(4,10,16,.9); }
.hero .hinweis { color: #A9BECE; }
.hero .innen { width: 100%; }
.hero-raster { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: start; }
@media (min-width: 960px) { .hero-raster { grid-template-columns: 1fr 1.02fr; gap: 60px; align-items: center; } }

.knopfreihe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.knopf {
  display: inline-block; padding: 14px 26px; border-radius: 10px;
  font-weight: 600; font-size: 16px; text-decoration: none;
  border: 1.5px solid transparent; font-family: var(--sans);
}
.knopf-haupt { background: var(--marke); color: #fff; }
.knopf-haupt:hover { background: #4a71ff; }
.knopf-neben { border-color: var(--linie-d); color: #C9D8E3; }
.knopf-neben:hover { border-color: var(--marke-h); color: #fff; }

.hinweis { font-size: 14.5px; color: #8EA3B4; margin-top: 18px; }

/* ──────────────── Karte: die Abrechnung ──────────────── */
.karte {
  background: var(--grund); color: var(--tinte);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 28px 70px rgba(0,0,0,.42);
}
.karte-kopf {
  background: var(--flaeche); border-bottom: 1px solid var(--linie);
  padding: 15px 22px; display: flex; justify-content: space-between;
  align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.karte-kopf .titel { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -.02em; }
.karte-kopf .jahr { font-size: 12.5px; color: var(--tinte-2); letter-spacing: .07em; }

table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 11px 22px; text-align: right; }
th:first-child, td:first-child { text-align: left; }
thead th {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinte-2); font-weight: 600; padding-block: 13px 7px;
}
tbody tr + tr td { border-top: 1px solid var(--linie); }
.zahl { font-variant-numeric: tabular-nums; }
.plus  { color: var(--gut); font-weight: 600; }
.minus { color: var(--offen); font-weight: 600; }
.anteil { color: var(--tinte-2); font-size: 13.5px; }

.karte-fuss {
  border-top: 2px solid var(--tief);
  padding: 14px 22px; display: flex; justify-content: space-between;
  align-items: center; gap: 12px; font-weight: 600;
}
.karte-fuss .summe { font-variant-numeric: tabular-nums; font-size: 18px; }
.marke-ok {
  font-size: 12.5px; font-weight: 600; color: var(--gut);
  background: #E3F5EE; padding: 5px 11px; border-radius: 999px;
}

/* ───────────────────────── Abschnitte ───────────────────────── */
.abschnitt { padding-block: 76px; }
.abschnitt h2 { font-size: clamp(28px, 3.7vw, 44px); }
.abschnitt .vorsatz { font-size: 19px; color: var(--tinte-2); max-width: 58ch; margin-top: 16px; }

.dunkel { background: var(--tief); color: #fff; }

/* Dunkles Band MIT Foto (09.10.2026, Christian: „unten bei dem dunklen Hintergrund
   ist nichts"). Zurueckhaltender als im Hero — dort steht der Text in einer Spalte,
   hier ueber die ganze Breite. Das Bild traegt deshalb Tiefe, nicht Motiv: starker
   Schleier, dafuer ein Textschatten, der die Lesbarkeit uebernimmt. */
.mit-foto { position: relative; isolation: isolate; overflow: hidden; }
.mit-foto::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--bandbild);
  background-size: cover; background-position: var(--bandlage, center 40%);
}
.mit-foto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(11,22,34,.93) 0%, rgba(11,22,34,.74) 42%,
    rgba(11,22,34,.76) 66%, rgba(11,22,34,.94) 100%);
}
.mit-foto h2, .mit-foto .vorsatz, .mit-foto .augenbraue {
  text-shadow: 0 1px 16px rgba(4,10,16,.92);
}
.mit-foto .block p, .mit-foto .liste-strich li, .mit-foto .saeule h3 {
  text-shadow: 0 1px 12px rgba(4,10,16,.9);
}
.dunkel h2 { color: #fff; }
.dunkel .vorsatz { color: #A8BCCA; }
.dunkel .block p { color: #93A9B9; }

.drei { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 42px; }
@media (min-width: 780px) { .drei { grid-template-columns: repeat(3, 1fr); } }

.block h3 { font-size: 20px; margin-bottom: 9px; }
.block p { font-size: 16px; color: var(--tinte-2); margin: 0; }
.block .nr {
  font-family: var(--display); font-size: 14px; font-weight: 700;
  color: var(--marke); display: block; margin-bottom: 8px; letter-spacing: 0;
}
.dunkel .block .nr { color: var(--marke-h); }

/* ───────────────────────── Kalender ───────────────────────── */
.kalender {
  background: var(--grund); border: 1px solid var(--linie);
  border-radius: 16px; padding: 24px; margin-top: 42px;
}
.kal-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.kal-kopf h3 { font-size: 19px; }
.kal-kopf span { font-size: 14px; color: var(--tinte-2); }

.monate {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  font-size: 11px; color: var(--tinte-2); letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 8px;
}
.monate span { text-align: center; }

.spur { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; margin-bottom: 9px; }
.spur .name { font-size: 14.5px; font-weight: 500; }
.balken { display: grid; grid-template-columns: repeat(28, 1fr); gap: 3px; height: 26px; }
.balken i { border-radius: 4px; background: var(--flaeche); }
.balken i.b  { background: var(--marke); }
.balken i.b2 { background: #9BB2FF; }

.zaehler { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--linie); }
@media (min-width: 640px) { .zaehler { grid-template-columns: repeat(4, 1fr); } }
.zaehler b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; font-family: var(--display); font-weight: 600; letter-spacing: -.02em; }
.zaehler small { color: var(--tinte-2); font-size: 13px; }

/* ───────────────────────── App ───────────────────────── */
.app-raster { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; margin-top: 44px; }
@media (min-width: 900px) { .app-raster { grid-template-columns: 340px 1fr; gap: 64px; } }

.geraet {
  width: 300px; max-width: 100%; margin-inline: auto;
  background: #06101A; border: 9px solid #06101A; border-radius: 40px;
  box-shadow: 0 30px 70px rgba(0,0,0,.5); overflow: hidden;
}
.geraet-schirm { background: var(--grund); border-radius: 30px; overflow: hidden; }
.geraet-leiste {
  background: var(--tief); color: #fff; padding: 12px 16px 14px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.geraet-leiste .t { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -.02em; }
.geraet-leiste .u { font-size: 11px; color: var(--tinte-d); }
.geraet-inhalt { padding: 14px 16px 18px; }

.app-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--linie); font-size: 13.5px;
}
.app-zeile:last-of-type { border-bottom: 0; }
.app-punkt { width: 9px; height: 9px; border-radius: 3px; background: var(--marke); flex: none; }
.app-punkt.hell { background: #9BB2FF; }
.app-zeile .wer { font-weight: 500; }
.app-zeile .wann { margin-left: auto; color: var(--tinte-2); font-variant-numeric: tabular-nums; font-size: 12.5px; }

.app-saldo {
  margin-top: 14px; background: var(--flaeche); border-radius: 11px;
  padding: 12px 14px; display: flex; justify-content: space-between; align-items: center;
}
.app-saldo .l { font-size: 12.5px; color: var(--tinte-2); }
.app-saldo .r { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 17px; color: var(--gut); }

.app-knopf {
  margin-top: 12px; background: var(--marke); color: #fff; border-radius: 10px;
  text-align: center; padding: 11px; font-size: 13.5px; font-weight: 600;
}

.geraet-fuss {
  margin: 0; padding: 10px 0 2px; text-align: center;
  font-size: 11.5px; color: #7E94A6; letter-spacing: .04em; max-width: none;
}

.zwei-spalten { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 620px) { .zwei-spalten { grid-template-columns: 1fr 1fr; gap: 36px; } }
.saeule h3 { font-size: 17px; margin-bottom: 14px; color: #fff; }

.liste-strich { margin: 0; padding: 0; list-style: none; }
.liste-strich li {
  position: relative; padding-left: 18px; margin-bottom: 11px;
  font-size: 15.5px; line-height: 1.5; color: #93A9B9; max-width: 42ch;
}
.liste-strich li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 9px; height: 2px; background: #4D6678; border-radius: 2px;
}
.liste-strich.hervor li { color: #B7C8D4; }
.liste-strich.hervor li b { color: #fff; font-weight: 600; }
.liste-strich.hervor li::before { background: var(--marke-h); }

.liste-haken { margin: 26px 0 0; padding: 0; list-style: none; }
.liste-haken li {
  padding-left: 30px; position: relative; margin-bottom: 14px;
  color: #A8BCCA; font-size: 16.5px; max-width: 54ch;
}
.liste-haken li b { color: #fff; font-weight: 600; }
.liste-haken li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 16px; height: 9px; border-left: 2.5px solid var(--marke-h);
  border-bottom: 2.5px solid var(--marke-h); transform: rotate(-45deg);
}

/* ───────────────────────── Kosten sammeln ───────────────────────── */
.kosten-raster { display: grid; grid-template-columns: 1fr; gap: 44px; margin-top: 42px; align-items: start; }
@media (min-width: 960px) { .kosten-raster { grid-template-columns: 1.15fr 1fr; gap: 56px; } }

.kostenliste { background: var(--grund); border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; }
.kostenliste .kopfzeile {
  background: var(--flaeche); border-bottom: 1px solid var(--linie);
  padding: 15px 22px; display: flex; justify-content: space-between;
  align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.kostenliste .kopfzeile .titel { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -.02em; }
.kostenliste .kopfzeile .jahr { font-size: 12.5px; color: var(--tinte-2); letter-spacing: .07em; }

.kz { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 13px 22px; }
.kz + .kz { border-top: 1px solid var(--linie); }
.kz .was { font-size: 15.5px; font-weight: 500; }
.kz .betrag { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15.5px; text-align: right; }
.kz .meta { grid-column: 1 / 2; font-size: 13px; color: var(--tinte-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.beleg {
  font-size: 11.5px; font-weight: 600; color: var(--marke);
  background: var(--marke-w); padding: 2px 8px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
}
.beleg::before {
  content: ""; width: 9px; height: 11px; flex: none;
  background: currentColor;
  clip-path: polygon(0 0, 68% 0, 100% 28%, 100% 100%, 0 100%);
}
.kostenliste .summenzeile {
  border-top: 2px solid var(--tief); padding: 14px 22px;
  display: flex; justify-content: space-between; align-items: center; font-weight: 600;
}
.kostenliste .summenzeile .s { font-variant-numeric: tabular-nums; font-size: 18px; }

.nachweis { margin-top: 30px; }
.nachweis .zeile { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--linie); }
.nachweis .zeile:first-child { border-top: 1px solid var(--linie); }
.nachweis .zif {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  background: var(--marke-w); color: var(--marke); font-size: 12.5px; font-weight: 600;
  display: grid; place-items: center; margin-top: 2px; font-variant-numeric: tabular-nums;
}
.nachweis h3 { font-size: 16.5px; margin-bottom: 4px; }
.nachweis p { font-size: 15px; color: var(--tinte-2); margin: 0; max-width: 48ch; }

/* ───────────────────────── Vereinbarung ───────────────────────── */
.punkte { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 38px;
  border-top: 1px solid var(--linie); }
@media (min-width: 760px) { .punkte { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.punkt { padding: 16px 0; border-bottom: 1px solid var(--linie); display: flex; gap: 14px; }
.punkt .zif {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  background: var(--marke-w); color: var(--marke);
  font-size: 12.5px; font-weight: 600; display: grid; place-items: center;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.punkt h3 { font-size: 16.5px; margin-bottom: 4px; }
.punkt p { font-size: 15px; color: var(--tinte-2); margin: 0; max-width: 46ch; }

.kasten {
  margin-top: 36px; background: var(--flaeche); border: 1px solid var(--linie);
  border-left: 3px solid var(--marke); border-radius: 10px; padding: 20px 24px;
}
.kasten p { margin: 0; font-size: 15.5px; color: var(--tinte-2); max-width: 70ch; }
.kasten b { color: var(--tinte); }

/* ───────────────────────── FAQ ───────────────────────── */
.faq { margin-top: 38px; border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  list-style: none; cursor: pointer; padding: 17px 36px 17px 0; position: relative;
  font-family: var(--display); font-weight: 600; font-size: 17.5px;
  letter-spacing: -.015em; color: var(--tinte);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--marke); border-bottom: 2px solid var(--marke);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:focus-visible { outline: 2px solid var(--marke); outline-offset: 3px; border-radius: 4px; }
.faq .antwort { padding: 0 0 20px; }
.faq .antwort p { font-size: 16px; color: var(--tinte-2); margin: 0; max-width: 64ch; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ───────────────────────── Preis ───────────────────────── */
.preis {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 18px; padding: 40px; margin-top: 42px;
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
}
@media (min-width: 840px) { .preis { grid-template-columns: auto 1fr; gap: 52px; } }
.preis .zahl-gross {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(48px, 8vw, 72px); color: var(--marke); line-height: 1;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.preis .je { font-size: 15px; color: var(--tinte-2); margin-top: 8px; }
.preis ul { margin: 0; padding-left: 20px; color: var(--tinte-2); font-size: 16px; }
.preis li { margin-bottom: 9px; }
.preis li b { color: var(--tinte); font-weight: 600; }

/* ───────────────────────── Fuß ───────────────────────── */
.fuss { background: var(--tief); color: #7E94A6; padding-block: 40px; font-size: 14.5px; }
.fuss .innen { display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap; }
.fuss a { color: #A8BCCA; text-decoration: none; }

.trenner { height: 1px; background: var(--linie); border: 0; margin: 0; }

/* ═══════════════════ Inhaltsseiten ═══════════════════
   Die Startseite ist dunkel und wirbt. Ein Fachtext hat eine andere Aufgabe: Er wird
   gelesen, oft lang und oft am Telefon. Deshalb heller Grund, ruhige Spalte, grosszuegige
   Zeilenhoehe — und eine Zeilenlaenge um die 70 Zeichen, nicht die volle Breite. */

.artikel-kopf {
  background: var(--tief); color: #fff;
  padding-block: 54px 48px;
}
.artikel-kopf .innen { max-width: 760px; }
.artikel-kopf h1 {
  font-size: clamp(30px, 4.6vw, 46px); font-weight: 700;
  letter-spacing: -.025em; max-width: 20ch;
}
.artikel-kopf .kurz {
  font-size: clamp(16.5px, 1.9vw, 19px); color: #B9C9D6;
  margin: 16px 0 0; max-width: 56ch;
}
.brotkrume { font-size: 13.5px; color: #8EA3B4; margin: 0 0 16px; }
.brotkrume a { color: var(--marke-h); text-decoration: none; }
.brotkrume a:hover { text-decoration: underline; }

.artikel { padding-block: 52px 72px; }
.artikel .innen { max-width: 760px; }
.artikel p, .artikel li { font-size: 17.5px; line-height: 1.68; max-width: 70ch; }
.artikel p.lead {
  font-size: clamp(19px, 2.1vw, 21px); line-height: 1.55;
  color: var(--tinte); margin-bottom: 36px;
}
.artikel h2 {
  font-size: clamp(23px, 2.8vw, 29px); margin: 46px 0 14px;
  padding-top: 26px; border-top: 1px solid var(--linie);
}
.artikel h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.artikel h3 { font-size: 19px; margin: 30px 0 8px; }
.artikel ul, .artikel ol { padding-left: 22px; margin: 0 0 18px; }
.artikel li { margin-bottom: 9px; }
.artikel li::marker { color: var(--marke); }
.artikel a { color: var(--marke); text-decoration: underline; text-underline-offset: 3px; }
.artikel strong { font-weight: 600; }

.artikel .tab {
  width: 100%; margin: 6px 0 24px; font-size: 16px;
  border: 1px solid var(--linie); border-radius: 12px; border-collapse: separate;
  border-spacing: 0; overflow: hidden;
}
.artikel .tab th, .artikel .tab td {
  padding: 11px 16px; text-align: left; vertical-align: top;
}
.artikel .tab thead th {
  background: var(--flaeche); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinte-2); font-weight: 600;
}
.artikel .tab tbody tr + tr td { border-top: 1px solid var(--linie); }
.artikel .tab td:not(:first-child) { font-variant-numeric: tabular-nums; }
.tab-rolle { overflow-x: auto; }

.artikel .kasten {
  margin: 36px 0 0; background: var(--flaeche); border: 1px solid var(--linie);
  border-left: 3px solid var(--marke); border-radius: 10px; padding: 20px 24px;
}
.artikel .kasten p { margin: 0; font-size: 16.5px; color: var(--tinte-2); }
.artikel .kasten strong { color: var(--tinte); }

/* Weiterlesen */
.weiter { background: var(--flaeche); border-top: 1px solid var(--linie); padding-block: 56px; }
.weiter .innen { max-width: 1120px; }
.weiter h2 { font-size: 24px; margin-bottom: 26px; }
.weiter-raster { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .weiter-raster { grid-template-columns: repeat(3, 1fr); } }
.weiter-karte {
  background: var(--grund); border: 1px solid var(--linie); border-radius: 12px;
  padding: 18px 20px; text-decoration: none; display: block;
}
.weiter-karte:hover { border-color: var(--marke); }
.weiter-karte h3 { font-size: 17px; margin-bottom: 7px; }
.weiter-karte p { font-size: 14.5px; color: var(--tinte-2); margin: 0; }

/* Wissens-Abschnitt auf der Startseite */
.wissen-raster { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
@media (min-width: 720px) { .wissen-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .wissen-raster { grid-template-columns: repeat(3, 1fr); } }

.fuss .innen { align-items: flex-start; }
.fuss-wissen { flex-basis: 100%; order: 3; padding-top: 18px; border-top: 1px solid var(--linie-d); font-size: 13.5px; line-height: 2; }