/* =========================================================================
   ENTWURF A — „Werkstatt"
   Redaktionelle Präzision. Warmes Papierweiß, tiefschwarze Schrift,
   das Firmenblau als einziger Akzent. Instrument Serif für Schlagzeilen
   und Zahlen, Archivo für alles andere.
   Die drei Schrägstriche der Marke werden zum Bauprinzip: als Trennzeichen,
   als Abschnittsmarke und als diagonales Muster in Akzentflächen.
   ========================================================================= */

:root {
  /* ---- Farbe ---------------------------------------------------------- */
  --papier:        #F6F4EF;
  --papier-tief:   #EDE9E1;
  --karte:         #FFFDF9;
  --tinte:         #14161A;
  --tinte-leise:   #5A5F68;
  /* Das Markenblau #0084C8 erreicht als Schriftfarbe auf hellem Grund nur
     3,4:1 und als Flächenfarbe hinter weißer Schrift nur 4,1:1 — beides
     unter der Grenze von WCAG AA (4,5:1). Deshalb drei Abstufungen:
     --blau rein dekorativ, --blau-flaeche für gefüllte Schaltflächen,
     --blau-text für alles, was gelesen werden muss. */
  --blau:          #0084C8;   /* dekorativ: Muster, Linien, Markierungen */
  --blau-flaeche:  #0071AD;   /* Schaltflächenfüllung, weiße Schrift  5,3:1 */
  --blau-text:     #005E8A;   /* Schriftfarbe auf hellem Grund        5,8:1 */
  --blau-tief:     #00618F;
  --blau-hell:     #4FB6EA;   /* Schriftfarbe auf dunklem Grund       8,0:1 */
  --blau-hauch:    #E3F1F9;

  /* Das Rot des Markenzeichens. #d40054 ist die Farbe der drei Striche aus
     dem Originallogo und bleibt für die Grafik unangetastet. Als Schriftfarbe
     erreicht es auf --papier-tief nur 4,4:1, deshalb für Text eine Spur
     dunkler, für dunkle Abschnitte eine Spur heller. */
  --rot:           #d40054;   /* Logofarbe, nur Grafik und Flächen */
  --rot-text:      #C4004E;   /* Schriftfarbe auf hellem Grund        5,0:1 */
  --rot-hell:      #FF5C93;   /* Schriftfarbe auf dunklem Grund       6,3:1 */

  --ziffer:        #767B84;   /* große Ordnungszahlen                 3,5:1 */
  --grau-marke:    #757575;
  --linie:         rgba(20, 22, 26, .14);
  --linie-zart:    rgba(20, 22, 26, .07);

  /* ---- Schrift -------------------------------------------------------- */
  --serif:  'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --grotesk:'Archivo', 'Helvetica Neue', Helvetica, sans-serif;

  --gr-winzig:  .75rem;
  --gr-klein:   .875rem;
  --gr-basis:   1.0625rem;
  --gr-gross:   1.25rem;
  --gr-lead:    clamp(1.25rem, .9rem + 1.1vw, 1.6rem);
  --gr-h3:      clamp(1.35rem, 1.1rem + .8vw, 1.75rem);
  --gr-h2:      clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  --gr-h1:      clamp(2.6rem, 1.5rem + 4.6vw, 5.6rem);
  --gr-zahl:    clamp(2.8rem, 2rem + 3vw, 4.4rem);

  /* ---- Maß ------------------------------------------------------------ */
  --breite-max: 78rem;
  --sprung:     clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --radius:     2px;

  /* ---- Zeichen, die keine Schrift dieser Seite hat --------------------- */
  /* Der Pfeil für Verweise nach außen. Früher stand hier das Zeichen ↗.
     Keine der drei Schriften enthält es — die unicode-range in fonts.css
     deckt aus der Pfeilgruppe nur U+2191 und U+2193 ab. Der Browser holte
     es deshalb aus einer Ersatzschrift: andere Strichstärke, andere
     Grundlinie, sichtbar tiefsitzender Kasten neben dem Wort. */
  --pfeil-extern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.6 8.4 8.4 3.6M4.9 3.6h3.5v3.5' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pfeil-rechts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6h7.2M6.4 3l3 3-3 3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pfeil-links:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M9.8 6H2.6M5.6 3l-3 3 3 3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --haken:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3 4.8 8.9 9.8 3.3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --neu-laden:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M9.7 6a3.7 3.7 0 1 1-1.1-2.6' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M9.9 1.6v2.3H7.6' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Als Maske und nicht als Bild: so folgen die Zeichen der Textfarbe — im
   Fließtext blau, auf dunklem Grund hell — ohne je eine zweite Datei. */
.pfeil-extern,
.pfeil-rechts,
.pfeil-links,
.haken,
.neu-laden {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
}
.pfeil-extern { -webkit-mask-image: var(--pfeil-extern); mask-image: var(--pfeil-extern); }
.pfeil-rechts { -webkit-mask-image: var(--pfeil-rechts); mask-image: var(--pfeil-rechts); }
.pfeil-links  { -webkit-mask-image: var(--pfeil-links);  mask-image: var(--pfeil-links); }
.haken        { -webkit-mask-image: var(--haken);        mask-image: var(--haken); }
.neu-laden    { -webkit-mask-image: var(--neu-laden);    mask-image: var(--neu-laden); }

/* =========================================================================
   Grundlagen
   ========================================================================= */

body {
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--grotesk);
  font-size: var(--gr-basis);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Feines Papierkorn — gibt der Fläche Tiefe, ohne aufzufallen */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.015em;
}

p { max-width: 62ch; }

::selection { background: var(--blau); color: #fff; }

/* Das Markenzeichen: drei Schrägstriche, im Fließtext gesetzt. Rot wie im
   Logo — das /// gehört zum Namen und ist keine Dekoration. */
.zeichen {
  font-family: var(--grotesk);
  font-weight: 600;
  color: var(--rot-text);
  letter-spacing: -.08em;
  padding-inline: .06em;
}

/* Auf dunklem Grund kehrt sich das Rot um */
.abschnitt--dunkel .zeichen,
.fuss .zeichen,
.servicezeile .zeichen { color: var(--rot-hell); }

/* Auf farbigen Flächen — Schaltflächen, Fahnen, Etiketten — nimmt das
   Zeichen die Schriftfarbe der Fläche an. Sonst steht Rot auf Blau. */
.knopf .zeichen,
.paket__fahne .zeichen,
.rabattband h3 .zeichen,
.promptkasten .zeichen { color: inherit; }

/* -------------------------------------------------------------------------
   Die Markierung: dieselbe Grafik wie im Logo
   -------------------------------------------------------------------------
   Vorher stand hier ein repeating-linear-gradient. Der wiederholt sich über
   die ganze Breite und schneidet am linken Rand einen halben Streifen an —
   der sah aus wie ein verirrtes Apostroph. Jetzt liegt die echte Datei mit
   genau drei Strichen unterschiedlicher Länge als Maske darüber; die Farbe
   kommt aus background-color und lässt sich so je Untergrund wechseln.
   ------------------------------------------------------------------------- */
.markierung,
.marke::before,
.kurzfassung h2::before,
.fragengruppe > h2::before {
  content: "";
  display: block;
  flex: none;
  aspect-ratio: 40.388 / 48.355;
  background-color: var(--rot);
  -webkit-mask: url(../img/marke-striche.svg) no-repeat center / contain;
          mask: url(../img/marke-striche.svg) no-repeat center / contain;
}

.abschnitt--dunkel .markierung,
.abschnitt--dunkel .marke::before,
.abschnitt--dunkel .kurzfassung h2::before { background-color: var(--rot-hell); }

/* Diagonalmuster, abgeleitet aus dem /// — hier ist die Wiederholung
   erwünscht, es ist eine Fläche und kein Zeichen. */
.diagonal {
  background-image: repeating-linear-gradient(
    115deg,
    var(--rot) 0 2px,
    transparent 2px 11px
  );
}

/* =========================================================================
   Abschnittsgerüst
   ========================================================================= */

.abschnitt { padding-block: var(--sprung); position: relative; z-index: 2; }
.abschnitt--tief { background: var(--papier-tief); }
.abschnitt--dunkel { background: var(--tinte); color: var(--papier); }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: var(--papier); }

.marke {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: 1.6rem;
}
.marke::before { height: 1.15rem; }
.abschnitt--dunkel .marke { color: rgba(246, 244, 239, .6); }

.kopfzeile {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
@media (min-width: 60rem) {
  .kopfzeile { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; }
}
.kopfzeile h2 { font-size: var(--gr-h2); }
.kopfzeile p { font-size: var(--gr-gross); color: var(--tinte-leise); }

/* =========================================================================
   Schaltflächen
   ========================================================================= */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  font-size: var(--gr-klein);
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  border: 1.5px solid var(--tinte);
  border-radius: var(--radius);
  background: var(--tinte);
  color: var(--papier);
  transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s, background .18s;
}
.knopf:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--blau);
}
.knopf:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--blau); }

.knopf--blau { background: var(--blau-flaeche); border-color: var(--blau-flaeche); color: #fff; }
.knopf--blau:hover { box-shadow: 4px 4px 0 var(--tinte); }

.knopf--offen { background: transparent; color: var(--tinte); }
.knopf--offen:hover { box-shadow: 4px 4px 0 var(--blau); }

.abschnitt--dunkel .knopf--offen { color: var(--papier); border-color: var(--papier); }

/* Der Pfeil im Knopf. Früher stand das Zeichen → im Markup; es fehlt in
   allen drei Schriften dieser Seite und kam aus einer Ersatzschrift. Die
   Spanne bleibt, damit die Bewegung beim Überfahren erhalten bleibt — nur
   ihr Inhalt ist jetzt eine Maske statt eines Zeichens. */
.knopf__pfeil {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: var(--pfeil-rechts) center / contain no-repeat;
          mask: var(--pfeil-rechts) center / contain no-repeat;
  transition: transform .18s;
}
.knopf:hover .knopf__pfeil { transform: translateX(3px); }

/* =========================================================================
   Kopfbereich
   ========================================================================= */

.servicezeile {
  background: var(--tinte);
  color: rgba(246, 244, 239, .8);
  font-size: var(--gr-winzig);
  letter-spacing: .03em;
  position: relative;
  z-index: 3;
}
.servicezeile .huelle {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  justify-content: flex-end;
  padding-block: .55rem;
}
.servicezeile a { text-decoration: none; }
.servicezeile a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.servicezeile strong { color: #fff; font-weight: 600; }

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 244, 239, .93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie);
}
.kopf .huelle {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: .9rem;
}
.kopf__logo img { width: 168px; height: auto; }

.navi {
  display: none;
  margin-left: auto;
  gap: 1.9rem;
  align-items: center;
}
@media (min-width: 68rem) { .navi { display: flex; } }

/* Aufgeklapptes Menü auf schmalen Bildschirmen */
@media (max-width: 67.99rem) {
  .navi[data-offen] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--karte);
    border-bottom: 1px solid var(--tinte);
    box-shadow: 0 18px 40px -20px rgba(0,0,0,.4);
    padding: .5rem 0;
  }
  .navi[data-offen] a {
    padding: .95rem clamp(1.25rem, 5vw, 2.5rem);
    font-size: var(--gr-gross);
    border-bottom: 1px solid var(--linie-zart);
  }
  .navi[data-offen] a:last-child { border-bottom: none; }
  .navi[data-offen] a::after { display: none; }
  .navi[data-offen] a:hover { background: var(--papier-tief); }
}
.kopf .huelle { position: relative; }

.navi a {
  font-size: var(--gr-klein);
  font-weight: 500;
  text-decoration: none;
  padding-block: .4rem;
  position: relative;
}
.navi a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--blau);
  transition: right .22s cubic-bezier(.2,.9,.3,1);
}
.navi a:hover::after { right: 0; }

/* Die Seite, auf der man gerade ist, bleibt dauerhaft unterstrichen */
.navi a[aria-current="page"] { color: var(--blau-text); }
.navi a[aria-current="page"]::after { right: 0; }

.kopf__aktionen { display: flex; gap: .6rem; align-items: center; margin-left: auto; }
@media (min-width: 68rem) { .kopf__aktionen { margin-left: 0; } }
.kopf__aktionen .knopf { padding: .6rem 1.05rem; font-size: var(--gr-winzig); }
.kopf__aktionen .knopf--offen { display: none; }
@media (min-width: 46rem) { .kopf__aktionen .knopf--offen { display: inline-flex; } }

/* Login: kein Knopf, sondern ein Verweis. Er richtet sich an Bestandskunden,
   nicht an Interessenten — er darf den Testzugang nicht überstrahlen, muss
   aber ohne Suchen zu finden sein. Deshalb rechts außen und auf jeder
   Bildschirmbreite sichtbar. */
/* Der Login gehört zur Navigation, nicht zur Werbung: Bestandskunden suchen
   genau ihn und sollen ihn nicht neben zwei Angeboten übersehen, die für sie
   nicht gedacht sind. Im Altsystem stand er in Navigationsgröße ganz rechts
   in der blauen Leiste — dieselbe Rangfolge wird hier gehalten: gleiche
   Größe und Farbe wie die Menüpunkte, aber kein Knopf, damit er den beiden
   Handlungsaufrufen nicht die Form wegnimmt. */
.kopf__login {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  font-size: var(--gr-klein);
  font-weight: 500;
  text-decoration: none;
  color: var(--tinte);
  padding: .6rem .5rem;
  white-space: nowrap;
  transition: color .15s;
}
.kopf__login:hover { color: var(--blau-text); }
.kopf__login:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }

/* =========================================================================
   Aufmacher
   ========================================================================= */

.aufmacher {
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) 0;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.aufmacher__gitter { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 62rem) {
  .aufmacher__gitter { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 4rem; }
}

.aufmacher h1 {
  font-size: var(--gr-h1);
  margin-bottom: 1.6rem;
}
.aufmacher h1 em {
  font-style: italic;
  color: var(--blau-text);
}
.aufmacher__lead {
  font-size: var(--gr-lead);
  color: var(--tinte-leise);
  line-height: 1.5;
  max-width: 44ch;
  margin-bottom: 2.2rem;
}
.aufmacher__aktionen { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 2rem; }

.aufmacher__fussnote {
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
  border-left: 2px solid var(--blau);
  padding-left: 1rem;
  max-width: 40ch;
}

.aufmacher__bild {
  position: relative;
  border: 1px solid var(--linie);
  background: var(--karte);
}
.aufmacher__bild img { width: 100%; height: auto; }
.aufmacher__bild::after {
  content: "";
  position: absolute;
  right: -14px; bottom: -14px;
  width: 96px; height: 96px;
  background-image: repeating-linear-gradient(115deg, var(--rot) 0 2px, transparent 2px 11px);
  z-index: -1;
}

/* =========================================================================
   Zahlenband
   ========================================================================= */

.zahlenband {
  border-block: 1px solid var(--linie);
  margin-top: var(--sprung);
  position: relative;
  z-index: 2;
}
.zahlenband__gitter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 56rem) { .zahlenband__gitter { grid-template-columns: repeat(4, 1fr); } }

.zahl {
  padding: 2.4rem 1.6rem;
  border-right: 1px solid var(--linie-zart);
  border-bottom: 1px solid var(--linie-zart);
}
@media (min-width: 56rem) { .zahl { border-bottom: none; } }
.zahl:last-child { border-right: none; }

.zahl__wert {
  font-family: var(--serif);
  font-size: var(--gr-zahl);
  line-height: .9;
  display: block;
  margin-bottom: .55rem;
}
.zahl__wert span { color: var(--blau-text); }
.zahl__text {
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
  line-height: 1.4;
}

/* =========================================================================
   Karten
   ========================================================================= */

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  padding: 1.9rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  text-decoration: none;
  transition: transform .2s cubic-bezier(.2,.9,.3,1), box-shadow .2s, border-color .2s;
}
a.karte:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--tinte);
  border-color: var(--tinte);
}
.karte__nummer {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--blau-text);
  line-height: 1;
}

/* -------------------------------------------------------------------------
   Helle Bausteine in dunklen Abschnitten
   -------------------------------------------------------------------------
   .karte und .schluss bringen ihren eigenen hellen Untergrund mit. Stehen
   sie in einem .abschnitt--dunkel, färbt die allgemeine Regel weiter oben
   trotzdem jede Überschrift hell — helle Schrift auf heller Karte ergibt
   1,08:1 und ist praktisch unlesbar. Hier wird das zurückgedreht.

   Aufgefallen beim Bau von scanpdf.de. Die Verschachtelung gab es auf der
   Hauptdomäne nirgends, auf pdf-box.de dagegen auf zehn Seiten — dort war
   der Fehler also bereits gebaut und ist damit mit behoben.
   ------------------------------------------------------------------------- */
.abschnitt--dunkel .karte,
.abschnitt--dunkel .karte h2,
.abschnitt--dunkel .karte h3,
.abschnitt--dunkel .schluss,
.abschnitt--dunkel .schluss h2,
.abschnitt--dunkel .schluss h3 { color: var(--tinte); }
.abschnitt--dunkel .karte p,
.abschnitt--dunkel .schluss p  { color: var(--tinte-leise); }

/* Der Fließtext einer Kopfzeile nutzt --tinte-leise. Das ist eine Farbe für
   hellen Grund und erreicht auf --tinte nur 2,8:1. Auf dunklem Abschnitt
   deshalb die aufgehellte Fassung, die dort 12:1 erreicht. */
.abschnitt--dunkel .kopfzeile p,
.abschnitt--dunkel > .huelle > p { color: rgba(246, 244, 239, .72); }

/* Zwei Bausteine bringen im dunklen Abschnitt eine eigene Farbregel mit und
   überschreiben die Rückdrehung von oben. Beide sitzen aber auf dem hellen
   Grund der Karte, nicht auf dem dunklen Abschnitt — also zurück auf dunkel:
   der offene Knopf (sonst weiße Schrift auf weißem Grund) und das
   Markenzeichen (sonst Hellrot auf Weiß, 2,9:1). */
.abschnitt--dunkel .karte .knopf--offen,
.abschnitt--dunkel .schluss .knopf--offen {
  color: var(--tinte);
  border-color: var(--tinte);
}
.abschnitt--dunkel .karte .zeichen,
.abschnitt--dunkel .schluss .zeichen { color: var(--rot-text); }
.karte h3 { font-size: var(--gr-h3); }
.karte p { font-size: var(--gr-klein); color: var(--tinte-leise); margin: 0; }
.karte__mehr {
  margin-top: auto;
  padding-top: .8rem;
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blau-text);
  display: flex;
  align-items: center;
  gap: .4rem;
}
a.karte:hover .karte__mehr .knopf__pfeil { transform: translateX(4px); }

/* Verweis auf eine andere Domain — wird im Text sichtbar gemacht,
   damit der Wechsel niemanden überrascht */
.karte__extern {
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
/* Den Abstand setzt hier das gap des inline-flex. */
.karte__extern::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--pfeil-extern) center / contain no-repeat;
          mask: var(--pfeil-extern) center / contain no-repeat;
}

/* Gruppenüberschrift innerhalb einer Übersicht */
.gruppe { margin-top: var(--sprung); }
.gruppe:first-of-type { margin-top: 0; }
.gruppe__kopf {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding-bottom: 1rem;
  margin-bottom: 1.8rem;
  border-bottom: 1.5px solid var(--tinte);
}
.gruppe__kopf h2 { font-size: var(--gr-h3); }
.gruppe__kopf p { font-size: var(--gr-klein); color: var(--tinte-leise); margin-left: auto; text-align: right; }

/* =========================================================================
   Produktzeilen
   ========================================================================= */

.produkt {
  display: grid;
  gap: 2rem;
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-top: 1px solid var(--linie);
  align-items: start;
}
@media (min-width: 60rem) {
  .produkt { grid-template-columns: 5.5rem minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; }
}
/* Produktzeile ohne Preisblock: der Text nimmt die volle Breite ein,
   statt eine leere Spalte stehen zu lassen. */
@media (min-width: 60rem) {
  .produkt--breit > div:nth-child(2) { grid-column: 2 / -1; }
}

.produkt__index {
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--ziffer);
}
.produkt h3 { font-size: var(--gr-h2); margin-bottom: .9rem; }
.produkt__lead { font-size: var(--gr-gross); color: var(--tinte-leise); margin-bottom: 1.5rem; }

/* ---------------------------------------------------------------------
   Listen mit eigenem Aufzählungszeichen

   WICHTIG: Diese Listenpunkte dürfen NICHT display:grid oder display:flex
   bekommen. In einem Grid- oder Flex-Container wird jedes Kindelement zu
   einem eigenen Element — ein <span> oder <strong> mitten im Satz landet
   dann in der nächsten Zeile. Aus „SCAN///PDF" wurde so zwei Zeilen.
   Deshalb: normaler Textfluss, Einzug per padding, Zeichen absolut gesetzt.
   --------------------------------------------------------------------- */

.merkmale { list-style: none; padding: 0; display: grid; gap: .7rem; }
.merkmale li {
  position: relative;
  padding-left: 1.8rem;
  font-size: var(--gr-klein);
  line-height: 1.5;
}
.merkmale li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .95rem;
  height: 2px;
  background: var(--blau);
}

.preisblock {
  border: 1px solid var(--linie);
  background: var(--karte);
  padding: 1.5rem;
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1rem;
}
.preisblock__wert { font-family: var(--serif); font-size: 2.1rem; line-height: 1; }
.preisblock__zusatz { font-size: var(--gr-klein); color: var(--tinte-leise); }
.preisblock__aktionen { display: flex; gap: .7rem; flex-wrap: wrap; width: 100%; margin-top: 1rem; }

/* =========================================================================
   Webinar-Angebot
   ========================================================================= */

.angebot {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 60rem) {
  .angebot { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 4rem; }
}
.angebot h2 { font-size: var(--gr-h2); margin-bottom: 1.2rem; }
.angebot h2 em { font-style: italic; color: var(--blau); }
.angebot p { color: rgba(246, 244, 239, .72); font-size: var(--gr-gross); }

.rechnung {
  border: 1px solid rgba(246, 244, 239, .22);
  padding: 1.8rem;
  background: rgba(246, 244, 239, .04);
}
.rechnung__zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: .8rem;
  border-bottom: 1px solid rgba(246, 244, 239, .14);
  font-size: var(--gr-klein);
}
.rechnung__zeile:last-of-type { border-bottom: none; }
.rechnung__summe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1.2rem;
  border-top: 2px solid var(--blau);
}
.rechnung__summe span:first-child { font-size: var(--gr-klein); letter-spacing: .04em; text-transform: uppercase; }
.rechnung__summe span:last-child { font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--blau); }

/* =========================================================================
   Stimmen
   ========================================================================= */

.stimme {
  background: var(--karte);
  border: 1px solid var(--linie);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.stimme blockquote {
  font-family: var(--serif);
  font-size: var(--gr-h3);
  line-height: 1.25;
  margin: 0;
}
.stimme blockquote::before { content: "„"; color: var(--blau-text); }
.stimme blockquote::after { content: "“"; color: var(--blau-text); }
.stimme footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie-zart);
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
}
.stimme footer img { height: 30px; width: auto; }

/* Viele Zitate nebeneinander. Spalten statt Raster, damit unterschiedlich
   lange Zitate nicht zu Löchern führen. */
.stimmenwand { columns: 1; column-gap: 1.25rem; }
@media (min-width: 52rem) { .stimmenwand { columns: 2; } }
@media (min-width: 76rem) { .stimmenwand { columns: 3; } }

.stimmenwand .stimme {
  break-inside: avoid;
  margin-bottom: 1.25rem;
  display: block;
  padding: 1.6rem;
}
.stimmenwand .stimme blockquote {
  font-family: var(--grotesk);
  font-size: var(--gr-klein);
  line-height: 1.6;
  letter-spacing: 0;
}
.stimmenwand .stimme blockquote::before,
.stimmenwand .stimme blockquote::after { content: none; }
.stimmenwand .stimme figcaption { margin-top: 1.1rem; }
.stimmenwand .stimme footer {
  border-top: 1px solid var(--linie-zart);
  padding-top: .9rem;
  margin-top: 0;
}
.stimmenwand .stimme img { height: 26px; max-width: 130px; object-fit: contain; object-position: left; }

/* Der wiederkehrende Begriff wird hervorgehoben */
.stimmenwand mark {
  background: var(--blau-hauch);
  color: inherit;
  padding: 0 .15em;
  box-shadow: inset 0 -2px 0 var(--blau);
}

/* Ein Zitat, das auch Kritik enthält — wird bewusst nicht versteckt */
.stimme__kritik {
  display: block;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--linie);
  font-size: var(--gr-winzig);
  color: var(--tinte-leise);
  font-style: italic;
}

/* =========================================================================
   Zeitstrahl
   ========================================================================= */

.zeitstrahl { position: relative; }
.zeitstrahl::before {
  content: "";
  position: absolute;
  left: 0; top: .6rem; bottom: 0;
  width: 1px;
  background: var(--linie);
}
@media (min-width: 52rem) {
  .zeitstrahl::before { left: 7.5rem; }
}

.jahr {
  position: relative;
  padding-left: 2rem;
  padding-bottom: 2.4rem;
}
@media (min-width: 52rem) {
  .jahr {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 2.5rem;
    padding-left: 0;
  }
}
.jahr::before {
  content: "";
  position: absolute;
  left: -4px; top: .75rem;
  width: 9px; height: 9px;
  background: var(--blau);
  border: 2px solid var(--papier);
  border-radius: 50%;
}
@media (min-width: 52rem) {
  .jahr::before { left: calc(7.5rem - 4px); }
}
.jahr--wichtig::before {
  width: 13px; height: 13px;
  left: -6px;
  background: var(--tinte);
}
@media (min-width: 52rem) {
  .jahr--wichtig::before { left: calc(7.5rem - 6px); }
}

.jahr__zahl {
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--tinte-leise);
  display: block;
  margin-bottom: .5rem;
}
@media (min-width: 52rem) {
  /* Rechtsbündig endet die Zahl genau auf der Linie — dort sitzt der Punkt.
     Der Abstand rechts hält sie frei. */
  .jahr__zahl { text-align: right; margin-bottom: 0; padding-top: .1rem; padding-right: 1.15rem; }
}
.jahr--wichtig .jahr__zahl { color: var(--tinte); font-size: 2.2rem; }

.jahr h3 {
  font-family: var(--grotesk);
  font-size: var(--gr-basis);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: .45rem;
}
.jahr p { font-size: var(--gr-klein); color: var(--tinte-leise); }
.jahr p + p { margin-top: .5rem; }
.jahr ul { list-style: none; padding: 0; margin-top: .5rem; display: grid; gap: .35rem; }
.jahr li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
  line-height: 1.5;
}
.jahr li::before {
  content: "·";
  position: absolute;
  left: .15rem;
  color: var(--blau-text);
  font-weight: 700;
}

/* =========================================================================
   Logoleiste
   ========================================================================= */

.logoleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.6rem 3.4rem;
}
.logoleiste img {
  height: 30px;
  width: auto;
  filter: grayscale(1) contrast(.35) brightness(.55);
  opacity: .78;
  transition: filter .25s, opacity .25s;
}
.logoleiste img:hover { filter: none; opacity: 1; }

/* =========================================================================
   Schlussaufruf
   ========================================================================= */

.schluss {
  border: 1.5px solid var(--tinte);
  padding: clamp(2.2rem, 1.5rem + 3vw, 4rem);
  display: grid;
  gap: 2rem;
  align-items: center;
  position: relative;
  background: var(--karte);
}
@media (min-width: 58rem) {
  .schluss { grid-template-columns: minmax(0, 1.3fr) auto; }
}
.schluss h2 { font-size: var(--gr-h2); }
.schluss p { color: var(--tinte-leise); margin-top: .8rem; }
.schluss__aktionen { display: flex; flex-wrap: wrap; gap: .8rem; }

/* =========================================================================
   Produktkopf
   ========================================================================= */

.produktkopf {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0;
  position: relative;
  z-index: 2;
}
.produktkopf__gitter { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 62rem) {
  .produktkopf__gitter { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; }
}
.produktkopf h1 { font-size: var(--gr-h1); margin-bottom: 1.2rem; }
.produktkopf__lead { font-size: var(--gr-lead); color: var(--tinte-leise); line-height: 1.5; max-width: 46ch; }
.produktkopf__aktionen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* Bild im Seitenkopf, über der Kurzfassung */
.produktkopf__bild {
  border: 1px solid var(--linie);
  background: var(--karte);
  margin-bottom: 1.25rem;
  position: relative;
}
.produktkopf__bild img { width: 100%; height: auto; }
.produktkopf__bild::after {
  content: "";
  position: absolute;
  right: -12px; bottom: -12px;
  width: 76px; height: 76px;
  background-image: repeating-linear-gradient(115deg, var(--rot) 0 2px, transparent 2px 11px);
  z-index: -1;
}

/* Das Wichtigste auf einen Blick — steht immer ganz oben */
.kurzfassung {
  border: 1.5px solid var(--tinte);
  background: var(--karte);
  padding: 1.8rem;
}
.kurzfassung h2 {
  font-family: var(--grotesk);
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  display: flex; align-items: center; gap: .7rem;
}
.kurzfassung h2::before { height: 1.25rem; }
.kurzfassung ul { list-style: none; padding: 0; display: grid; gap: .8rem; }
.kurzfassung li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--gr-klein);
  line-height: 1.5;
}
.kurzfassung li::before {
  content: "";
  display: inline-block;
  width: 1em;
  top: 0;
  height: 1.5em;
  height: 1lh;
  background-color: currentColor;
  -webkit-mask: var(--pfeil-rechts) center / contain no-repeat;
          mask: var(--pfeil-rechts) center / contain no-repeat;
  position: absolute;
  left: 0;
  color: var(--blau-text);
  font-weight: 600;
}

/* =========================================================================
   Preispakete
   ========================================================================= */

.pakete { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 62rem) { .pakete { grid-template-columns: repeat(3, 1fr); } }

.paket {
  border: 1px solid var(--linie);
  background: var(--karte);
  display: flex; flex-direction: column;
  height: 100%;
}
.paket--empfohlen {
  border: 1.5px solid var(--tinte);
  box-shadow: 6px 6px 0 var(--blau);
}
.paket__fahne {
  background: var(--tinte);
  color: var(--papier);
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .5rem 1.5rem;
}
.paket__kopf { padding: 1.6rem 1.5rem 1.2rem; border-bottom: 1px solid var(--linie); }
.paket__kopf h3 { font-family: var(--grotesk); font-size: var(--gr-gross); font-weight: 600; letter-spacing: 0; margin-bottom: .9rem; }
.paket__preis { font-family: var(--serif); font-size: 2.6rem; line-height: 1; }
.paket__takt { font-size: var(--gr-klein); color: var(--tinte-leise); }
.paket__neben { font-size: var(--gr-klein); color: var(--tinte-leise); margin-top: .7rem; }
.paket__neben del { opacity: .65; }

/* Der Webinar-Preis steht in jedem Paket direkt unter dem Grundpreis */
.paket__webinar {
  margin-top: 1rem;
  padding: .8rem 1rem;
  background: var(--blau-hauch);
  border-left: 3px solid var(--blau);
  display: grid;
  gap: .15rem;
}
.paket__webinar b {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  color: var(--blau-text);
}
.paket__webinar span {
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blau-text);
}
.paket__webinar small { font-size: var(--gr-klein); color: var(--tinte-leise); }

/* Erklärband über der Preistabelle */
.rabattband {
  border: 1.5px solid var(--tinte);
  background: var(--tinte);
  color: var(--papier);
  padding: 1.5rem 1.8rem;
  margin-bottom: 1.5rem;
  display: grid;
  gap: 1.2rem;
  align-items: center;
}
@media (min-width: 58rem) {
  .rabattband { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; }
}
.rabattband h3 {
  font-family: var(--serif);
  font-size: var(--gr-h3);
  margin-bottom: .5rem;
  color: var(--papier);
}
.rabattband p { color: rgba(246, 244, 239, .78); font-size: var(--gr-klein); max-width: 68ch; }
.rabattband ul {
  list-style: none; padding: 0; margin-top: .8rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  font-size: var(--gr-klein);
}
.rabattband li { position: relative; padding-left: 1.3rem; }
.rabattband li::before {
  content: "";
  display: inline-block;
  width: 1em;
  top: 0;
  height: 1.5em;
  height: 1lh;
  background-color: currentColor;
  -webkit-mask: var(--haken) center / contain no-repeat;
          mask: var(--haken) center / contain no-repeat;
  position: absolute;
  left: 0;
  color: var(--blau-hell);
  font-weight: 700;
}
.paket__leistungen { list-style: none; padding: 1.4rem 1.5rem; margin: 0; display: grid; gap: .7rem; flex: 1; }
.paket__leistungen li {
  position: relative;
  padding-left: 1.7rem;
  font-size: var(--gr-klein);
  line-height: 1.45;
}
.paket__leistungen li::before {
  content: "";
  display: inline-block;
  width: 1em;
  top: 0;
  height: 1.5em;
  height: 1lh;
  background-color: currentColor;
  -webkit-mask: var(--haken) center / contain no-repeat;
          mask: var(--haken) center / contain no-repeat;
  position: absolute;
  left: 0;
  color: var(--blau-text);
  font-weight: 700;
}
.paket__leistungen li.fehlt { color: var(--tinte-leise); }
.paket__leistungen li.fehlt::before { content: "–"; color: var(--tinte-leise); }
.paket__fuss { padding: 0 1.5rem 1.5rem; }
.paket__fuss .knopf { width: 100%; justify-content: center; }

.preisfussnote { font-size: var(--gr-klein); color: var(--tinte-leise); margin-top: 1.5rem; }

/* =========================================================================
   Preisübersicht
   ========================================================================= */

.uebersicht { font-size: var(--gr-klein); min-width: 44rem; }
.uebersicht thead th {
  text-align: left;
  padding: .7rem .9rem;
  border-bottom: 1.5px solid var(--tinte);
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.uebersicht__gruppe th {
  padding: 1.9rem .9rem .5rem;
  font-family: var(--serif);
  font-size: var(--gr-h3);
  font-weight: 400;
  letter-spacing: -.01em;
  text-transform: none;
  border-bottom: 1px solid var(--linie);
  text-align: left;
}
.uebersicht tbody th[scope="row"] {
  text-align: left;
  font-weight: 600;
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--linie-zart);
  white-space: nowrap;
}
.uebersicht tbody th a { text-decoration: none; }
.uebersicht tbody th a:hover { color: var(--blau-text); text-decoration: underline; text-underline-offset: .25em; }
.uebersicht td {
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--linie-zart);
  vertical-align: baseline;
}
.uebersicht__kurz { color: var(--tinte-leise); }
.uebersicht__preis { white-space: nowrap; text-align: right; }
.uebersicht__offen { color: var(--tinte-leise); font-style: italic; }
.uebersicht__frei { color: var(--blau-text); font-weight: 600; }
/* Die Bedingung zum „ab"-Preis. Eigene Zeile, damit sie nicht als
   Fortsetzung des Preises gelesen wird — sie schränkt ihn ein. */
.uebersicht__bedingung {
  display: block;
  font-size: .82em;
  font-weight: 400;
  color: var(--tinte-leise);
  white-space: normal;
  margin-top: .15rem;
}
.uebersicht tbody tr:hover td, .uebersicht tbody tr:hover th { background: var(--karte); }
.uebersicht__gruppe:hover th { background: none; }

/* ---- Staffel nach Zahlweise (SACH///LIVE) ---------------------------- */
.zahlweisen { width: 100%; font-size: var(--gr-klein); border-collapse: collapse; }
.zahlweisen caption {
  caption-side: top;
  text-align: left;
  color: var(--tinte-leise);
  padding-bottom: .9rem;
}
.zahlweisen thead th {
  text-align: left;
  font-size: var(--gr-mikro, .75rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  font-weight: 500;
  padding: 0 .9rem .5rem 0;
  border-bottom: 1px solid var(--linie);
}
.zahlweisen th[scope="row"] { text-align: left; font-weight: 600; }
.zahlweisen th, .zahlweisen td {
  padding: .85rem .9rem .85rem 0;
  border-bottom: 1px solid var(--linie-zart);
  vertical-align: baseline;
}
.zahlweisen__preis strong { font-size: 1.25em; }
/* „je Monat" gehört unter den Betrag, nicht dahinter — sonst liest sich
   „30,00 € je Monat 24 Monate" wie eine einzige Angabe. */
.zahlweisen__preis small,
.zahlweise__fahne { display: block; color: var(--tinte-leise); }
.zahlweisen__laufzeit { color: var(--tinte-leise); }
.zahlweise__fahne {
  font-size: var(--gr-mikro, .75rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blau-text);
  font-weight: 500;
  margin-top: .15rem;
}
.zahlweise--empfohlen th, .zahlweise--empfohlen td { background: var(--blau-hauch); }

/* Auf schmalen Bildschirmen wird aus der Tabelle eine Liste von Karten.
   Seitwärts wischen ist für eine Preisliste die schlechtere Bedienung. */
@media (max-width: 46rem) {
  .uebersicht { min-width: 0; width: 100%; }
  .uebersicht thead { display: none; }
  .uebersicht, .uebersicht tbody, .uebersicht tr, .uebersicht th, .uebersicht td { display: block; }

  .uebersicht__gruppe th {
    padding: 1.8rem 0 .6rem;
    border-bottom: 1.5px solid var(--tinte);
  }
  .uebersicht tbody tr:not(.uebersicht__gruppe) {
    border: 1px solid var(--linie);
    background: var(--karte);
    padding: 1rem 1.1rem;
    margin-top: .75rem;
  }
  .uebersicht tbody tr:not(.uebersicht__gruppe) th[scope="row"],
  .uebersicht tbody tr:not(.uebersicht__gruppe) td {
    border-bottom: none;
    padding: 0;
    white-space: normal;
  }
  .uebersicht tbody th[scope="row"] { font-size: var(--gr-basis); margin-bottom: .3rem; }
  .uebersicht__kurz { margin-bottom: .7rem; }
  .uebersicht__preis {
    text-align: left;
    padding-top: .7rem !important;
    border-top: 1px solid var(--linie-zart) !important;
  }
  .uebersicht tbody tr:hover td, .uebersicht tbody tr:hover th { background: none; }
}

/* =========================================================================
   Ablauf in Schritten
   ========================================================================= */

.schritte { display: grid; gap: 1.5rem; counter-reset: schritt; }
@media (min-width: 56rem) { .schritte { grid-template-columns: repeat(4, 1fr); } }
.schritt { border-top: 2px solid var(--tinte); padding-top: 1.1rem; }
.schritt::before {
  counter-increment: schritt;
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--blau-text);
  display: block;
  margin-bottom: .5rem;
}
.schritt h3 { font-family: var(--grotesk); font-size: var(--gr-basis); font-weight: 600; letter-spacing: 0; margin-bottom: .5rem; }
.schritt p { font-size: var(--gr-klein); color: var(--tinte-leise); }

/* =========================================================================
   Wirkungszahlen
   ========================================================================= */

.wirkung { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
@media (min-width: 40rem) { .wirkung { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .wirkung { grid-template-columns: repeat(5, 1fr); } }
.wirkung > div { background: var(--karte); padding: 1.5rem 1.2rem; }
.wirkung b {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
  display: block;
  margin-bottom: .4rem;
}
.wirkung span { font-size: var(--gr-klein); color: var(--tinte-leise); line-height: 1.4; }

/* =========================================================================
   Gegenüberstellung vorher / nachher
   ========================================================================= */

.vergleich { display: grid; gap: 1.25rem; align-items: stretch; }
@media (min-width: 56rem) { .vergleich { grid-template-columns: 1fr 1fr; } }

.vergleich > div {
  border: 1px solid var(--linie);
  background: var(--karte);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
}
.vergleich > div.vergleich--jetzt {
  border: 1.5px solid var(--tinte);
  box-shadow: 6px 6px 0 var(--blau);
}
.vergleich__marke {
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: 1rem;
}
.vergleich--jetzt .vergleich__marke { color: var(--blau-text); }
.vergleich__wert {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
  line-height: .95;
  margin-bottom: .4rem;
}
.vergleich--jetzt .vergleich__wert { color: var(--blau-text); }
.vergleich__wozu { font-size: var(--gr-gross); color: var(--tinte-leise); margin-bottom: 1.4rem; }
.vergleich ul { list-style: none; padding: 0; display: grid; gap: .65rem; margin-top: auto; }
.vergleich li {
  position: relative;
  padding-left: 1.7rem;
  font-size: var(--gr-klein);
  line-height: 1.5;
}
.vergleich li::before { position: absolute; left: 0; }
.vergleich > div:not(.vergleich--jetzt) li::before { content: "•"; color: var(--tinte-leise); }
.vergleich--jetzt li::before {
  content: "";
  display: inline-block;
  width: 1em;
  top: 0;
  height: 1.5em;
  height: 1lh;
  background-color: currentColor;
  -webkit-mask: var(--haken) center / contain no-repeat;
          mask: var(--haken) center / contain no-repeat;
  color: var(--blau-text);
}

/* =========================================================================
   Prompt- und Codekasten
   ========================================================================= */

.promptkasten {
  background: var(--tinte);
  color: var(--papier);
  padding: 1.5rem 1.7rem;
  font-size: var(--gr-klein);
  line-height: 1.6;
  overflow-x: auto;
}
.promptkasten__marke {
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blau-hell);
  display: block;
  margin-bottom: .9rem;
}
.promptkasten pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .85em;
  white-space: pre-wrap;
  color: rgba(246, 244, 239, .92);
}

/* =========================================================================
   Kürzel-Raster (Spartencodes, Parameternamen)
   ========================================================================= */

.codes { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
@media (min-width: 34rem) { .codes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .codes { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72rem) { .codes { grid-template-columns: repeat(4, 1fr); } }

.codes > div {
  background: var(--karte);
  padding: .85rem 1rem;
  display: flex;
  align-items: baseline;
  gap: .7rem;
}
.codes code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--gr-klein);
  font-weight: 600;
  color: var(--blau-text);
  background: var(--blau-hauch);
  padding: .1rem .4rem;
  flex: none;
  min-width: 3.6rem;
  text-align: center;
}
.codes span { font-size: var(--gr-klein); line-height: 1.35; }

/* Kürzel im Fließtext */
p code, li code, td code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .9em;
  background: var(--papier-tief);
  padding: .05em .35em;
  border: 1px solid var(--linie-zart);
}

/* =========================================================================
   Hinweiskasten
   ========================================================================= */

.hinweis {
  border-left: 3px solid var(--blau);
  background: var(--blau-hauch);
  padding: 1.3rem 1.5rem;
  font-size: var(--gr-klein);
  line-height: 1.6;
}
.hinweis strong { display: block; margin-bottom: .3rem; }
.hinweis p { max-width: none; }

/* =========================================================================
   Fragen und Antworten
   ========================================================================= */

.fragen { border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 0;
  cursor: pointer;
  font-size: var(--gr-h3);
  font-family: var(--serif);
  list-style: none;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+";
  font-family: var(--grotesk);
  font-size: 1.5rem;
  color: var(--blau-text);
  flex: none;
  line-height: 1;
  transition: transform .2s;
}
.frage[open] summary::after { transform: rotate(45deg); }
.frage summary:hover { color: var(--blau-text); }
.frage__antwort { padding-bottom: 1.5rem; }
.frage__antwort p { color: var(--tinte-leise); }
.frage__antwort p + p { margin-top: .8rem; }

/* Gruppenüberschrift innerhalb einer Fragenliste */
.fragengruppe { margin-top: 3rem; }
.fragengruppe:first-of-type { margin-top: 0; }
.fragengruppe > h2 {
  font-size: var(--gr-h3);
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin-bottom: .4rem;
}
.fragengruppe > h2::before { height: 1.15rem; }
.fragengruppe > p {
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
  margin-bottom: 1.2rem;
  padding-left: 1.86rem;   /* Breite der Markierung (.96rem) plus Abstand */
}

/* Wegweiser zu den Fragen auf den Produktseiten */
.wegweiser { display: grid; gap: .75rem; }
@media (min-width: 46rem) { .wegweiser { grid-template-columns: repeat(2, 1fr); } }
.wegweiser a {
  display: block;
  padding: 1rem 1.2rem;
  border: 1px solid var(--linie);
  background: var(--karte);
  text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.wegweiser a:hover {
  border-color: var(--tinte);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--blau);
}
.wegweiser strong { display: block; font-size: var(--gr-basis); }
.wegweiser span {
  display: block;
  margin-top: .2rem;
  font-size: var(--gr-winzig);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blau-text);
}

/* =========================================================================
   Gesellschaftstabelle
   ========================================================================= */

.gesellschaften { font-size: var(--gr-klein); }
.gesellschaften th, .gesellschaften td {
  text-align: left;
  padding: .65rem .8rem;
  border-bottom: 1px solid var(--linie-zart);
}
.gesellschaften thead th {
  border-bottom: 1.5px solid var(--tinte);
  font-size: var(--gr-winzig);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  position: sticky; top: 0;
  background: var(--papier);
}
.gesellschaften tbody tr:hover { background: var(--karte); }
.gesellschaften td:not(:first-child) { text-align: center; width: 1%; white-space: nowrap; }
.gesellschaften .ja { color: var(--blau-text); font-weight: 700; }
.gesellschaften .nein { color: var(--linie); }

/* =========================================================================
   Formulare
   ========================================================================= */

.formular {
  border: 1.5px solid var(--tinte);
  background: var(--karte);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.feldgruppe { display: grid; gap: 1.2rem; }
@media (min-width: 40rem) { .feldgruppe--2 { grid-template-columns: 1fr 1fr; } }

.feld { display: grid; gap: .4rem; }
.feld > label {
  font-size: var(--gr-klein);
  font-weight: 600;
  letter-spacing: .02em;
}
.feld > label .pflicht { color: var(--blau-text); }
.feld__hinweis { font-size: var(--gr-winzig); color: var(--tinte-leise); }

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld select,
.feld textarea {
  width: 100%;
  padding: .8rem .9rem;
  border: 1px solid var(--linie);
  border-radius: 0;
  background: var(--papier);
  font-size: var(--gr-basis);
  transition: border-color .15s, box-shadow .15s;
}
.feld textarea { resize: vertical; min-height: 8rem; }

.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--tinte-leise); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none;
  border-color: var(--blau-flaeche);
  box-shadow: 0 0 0 3px var(--blau-hauch);
}
.feld input:user-invalid, .feld textarea:user-invalid {
  border-color: #A3231C;
  box-shadow: 0 0 0 3px rgba(163, 35, 28, .1);
}

/* Auswahlfelder als anklickbare Kacheln */
.wahlgitter { display: grid; gap: .6rem; }
/* Zwischenüberschrift je Produktgruppe. Die Liste ist mit fünfzehn Marken
   zu lang, um sie am Stück zu überfliegen — dieselben vier Gruppen wie in
   der Navigation und in der Preisübersicht geben ihr eine Ordnung. */
.wahlgitter__gruppe {
  font-size: var(--gr-mikro, .75rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin: 1.4rem 0 .5rem;
}
.wahlgitter__gruppe:first-child { margin-top: 0; }
@media (min-width: 40rem) { .wahlgitter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .wahlgitter { grid-template-columns: repeat(3, 1fr); } }

.wahl {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .8rem .9rem;
  border: 1px solid var(--linie);
  background: var(--papier);
  font-size: var(--gr-klein);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.wahl:hover { border-color: var(--tinte-leise); }
.wahl input { margin: .15rem 0 0; accent-color: var(--blau-flaeche); flex: none; }
.wahl:has(input:checked) { border-color: var(--blau-flaeche); background: var(--blau-hauch); }
.wahl:has(input:focus-visible) { outline: 3px solid var(--tinte); outline-offset: 2px; }

/* Datenschutzhinweis über der Einwilligung.
   Er steht bewusst vor dem Kästchen und nicht darin: Wer einwilligt, muss
   vorher wissen, worin — ein Hinweis, den man erst nach dem Klick liest,
   ist keiner. */
.datenhinweis {
  margin-top: 1.2rem;
  padding: .9rem 1rem;
  border-left: 3px solid var(--blau-flaeche);
  background: var(--blau-hauch);
  font-size: var(--gr-winzig);
  line-height: 1.55;
  color: var(--tinte-leise);
}
.datenhinweis a { color: var(--blau-text); }

/* Einwilligung */
.einwilligung {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: var(--gr-klein);
  line-height: 1.5;
  color: var(--tinte-leise);
}
.einwilligung input { margin-top: .25rem; accent-color: var(--blau-flaeche); flex: none; }
.einwilligung a { color: var(--blau-text); }

/* Honigtopf gegen Spam — für Menschen unsichtbar, für Formularroboter nicht */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

fieldset { border: none; padding: 0; margin: 0; }
legend {
  font-size: var(--gr-klein);
  font-weight: 600;
  padding: 0;
  margin-bottom: .7rem;
}

/* =========================================================================
   Webinarkarten
   ========================================================================= */

.webinarliste { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 62rem) { .webinarliste { grid-template-columns: repeat(2, 1fr); } }

.webinar {
  border: 1px solid var(--linie);
  background: var(--karte);
  display: flex;
  flex-direction: column;
}
.webinar--hervor {
  border: 1.5px solid var(--tinte);
  box-shadow: 6px 6px 0 var(--blau);
}
.webinar__kopf {
  padding: 1.5rem 1.6rem 1.2rem;
  border-bottom: 1px solid var(--linie);
}
.webinar__kopf h3 { font-size: var(--gr-h3); margin-bottom: .4rem; }
.webinar__kopf p { font-size: var(--gr-winzig); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-leise); }
.webinar__koerper { padding: 1.5rem 1.6rem; flex: 1; }
.webinar__fuss { padding: 0 1.6rem 1.6rem; }
.webinar__fuss .knopf { width: 100%; justify-content: center; }
.webinar__termine { display: grid; gap: .5rem; max-height: 19rem; overflow-y: auto; }
.webinar__meldung:empty { display: none; }
.webinar__meldung .meldung { margin-bottom: 0; margin-top: 1.2rem; }

/* Ladezustand und Ausfall */
.webinarliste > .meldung { grid-column: 1 / -1; margin-bottom: 0; }
.webinar__laedt {
  grid-column: 1 / -1;
  padding: 2.5rem;
  border: 1px dashed var(--linie);
  text-align: center;
  color: var(--tinte-leise);
  font-size: var(--gr-klein);
}

/* Rückmeldung nach dem Absenden */
.meldung {
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--blau);
  background: var(--blau-hauch);
  margin-bottom: 2rem;
  font-size: var(--gr-klein);
}
.meldung--fehler { border-left-color: #A3231C; background: #FBEDEC; }
.meldung strong { display: block; margin-bottom: .3rem; font-size: var(--gr-basis); }

/* Ansprechpartner-Karte */
.person {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  padding: 1.4rem;
  border: 1px solid var(--linie);
  background: var(--karte);
}
.person__daten h3 {
  font-family: var(--grotesk);
  font-size: var(--gr-basis);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: .15rem;
}
.person__rolle { font-size: var(--gr-winzig); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-leise); }
.person__daten p { font-size: var(--gr-klein); margin-top: .6rem; }
.person__daten a { color: var(--blau-text); }

/* =========================================================================
   Bildarchiv / Presseseite
   ========================================================================= */

.markengitter { display: grid; gap: 1.25rem; }
@media (min-width: 56rem) { .markengitter { grid-template-columns: repeat(2, 1fr); } }

.marke-karte {
  border: 1px solid var(--linie);
  background: var(--karte);
  display: flex;
  flex-direction: column;
}
.marke-karte__bild {
  padding: 2rem 1.6rem;
  border-bottom: 1px solid var(--linie);
  background:
    repeating-conic-gradient(var(--papier-tief) 0% 25%, var(--karte) 0% 50%)
    0 0 / 18px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8.5rem;
}
.marke-karte__bild img { max-height: 4.5rem; width: auto; max-width: 100%; }
.marke-karte__text { padding: 1.4rem 1.6rem 1.6rem; }
.marke-karte__text h3 { font-size: var(--gr-h3); margin-bottom: .25rem; }
.marke-karte__text > p { font-size: var(--gr-klein); color: var(--tinte-leise); }

.dateiliste { list-style: none; padding: 0; margin-top: 1.1rem; display: grid; gap: 1px; background: var(--linie-zart); border: 1px solid var(--linie-zart); }
.dateiliste a {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  gap: .8rem;
  align-items: baseline;
  padding: .6rem .8rem;
  background: var(--papier);
  text-decoration: none;
  font-size: var(--gr-klein);
  transition: background .15s;
}
.dateiliste a:hover { background: var(--blau-hauch); }
.dateiliste strong { font-weight: 600; color: var(--blau-text); }
.dateiliste span { color: var(--tinte-leise); }
.dateiliste em { font-style: normal; color: var(--tinte-leise); font-variant-numeric: tabular-nums; }

/* AGB-Dokumente */
.agbliste { list-style: none; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 56rem) { .agbliste { grid-template-columns: repeat(2, 1fr); } }

.agbliste a {
  display: grid;
  gap: .2rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--linie);
  background: var(--karte);
  text-decoration: none;
  height: 100%;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.agbliste a:hover {
  border-color: var(--tinte);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--blau);
}
.agb__produkt { font-size: var(--gr-gross); font-weight: 600; }
.agb__wofuer { font-size: var(--gr-klein); color: var(--tinte-leise); }
.agb__meta {
  margin-top: .6rem;
  font-size: var(--gr-winzig);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blau-text);
  font-variant-numeric: tabular-nums;
}

/* Farbfelder */
.farbfelder { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .farbfelder { grid-template-columns: repeat(3, 1fr); } }
.farbfeld { border: 1px solid var(--linie); background: var(--karte); }
.farbfeld__probe { height: 5rem; }
.farbfeld__daten { padding: .9rem 1.1rem; font-size: var(--gr-klein); }
.farbfeld__daten strong { display: block; margin-bottom: .2rem; }
.farbfeld__daten code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .95em;
  background: none;
  border: none;
  padding: 0;
  color: var(--tinte-leise);
}

/* =========================================================================
   Rechtstexte
   Der Inhalt kommt von der zentralen Stelle und bringt eigenes Markup mit.
   Hier wird es nur eingepasst, nicht umgebaut.
   ========================================================================= */

.rechtstext { max-width: 44rem; }
.rechtstext h2 {
  font-size: var(--gr-h2);
  margin-top: 3rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--linie);
}
.rechtstext h3 { font-size: var(--gr-h3); margin-top: 2.2rem; }
.rechtstext h4 {
  font-family: var(--grotesk);
  font-size: var(--gr-basis);
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 1.8rem;
}
.rechtstext > *:first-child { margin-top: 0; }
.rechtstext p { margin-top: .9rem; line-height: 1.7; }
.rechtstext ul, .rechtstext ol { margin-top: .9rem; padding-left: 1.4rem; }
.rechtstext li { margin-top: .35rem; line-height: 1.6; }
.rechtstext a { color: var(--blau-text); }
.rechtstext strong { font-weight: 600; }

.rechtstext dl { margin-top: .9rem; }
/* Zweispaltig nur, wenn es überhaupt Werte gibt. Die Kontaktdatenliste im
   Impressum enthält ausschließlich <dt> — die würden sonst paarweise
   nebeneinanderstehen und wie Bezeichnung und Wert aussehen. */
.rechtstext dl.spalten {
  display: grid;
  gap: .3rem 1.5rem;
  align-items: baseline;
}
@media (min-width: 34rem) {
  .rechtstext dl.spalten:has(dd) { grid-template-columns: auto 1fr; }
}
.rechtstext dl.spalten:not(:has(dd)) dt { font-weight: 400; }
.rechtstext dt { font-weight: 600; }
.rechtstext dd { margin: 0; color: var(--tinte-leise); }
/* Inhaltsverzeichnis langer Rechtstexte */
.verzeichnis {
  border: 1px solid var(--linie);
  background: var(--karte);
  margin-bottom: 2.5rem;
}
.verzeichnis > summary {
  padding: 1rem 1.3rem;
  cursor: pointer;
  font-size: var(--gr-klein);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.verzeichnis > summary::-webkit-details-marker { display: none; }
.verzeichnis > summary::after {
  content: "+";
  font-size: 1.3rem;
  line-height: 1;
  color: var(--blau-text);
}
.verzeichnis[open] > summary::after { content: "–"; }
.verzeichnis > summary:hover { color: var(--blau-text); }
.verzeichnis__liste {
  margin: 0;
  padding: 0 1.3rem 1.3rem 2.6rem;
  max-height: 26rem;
  overflow-y: auto;
  font-size: var(--gr-klein);
}
.verzeichnis__liste li { margin-top: .3rem; }
.verzeichnis__liste a { color: inherit; text-decoration: none; }
.verzeichnis__liste a:hover { color: var(--blau-text); text-decoration: underline; text-underline-offset: .2em; }

.rechtstext h2 { scroll-margin-top: 5.5rem; }
.rechtstext table { margin-top: 1rem; font-size: var(--gr-klein); }
.rechtstext th, .rechtstext td {
  text-align: left;
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--linie-zart);
}

/* =========================================================================
   News
   ========================================================================= */

.jahresleiste {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1.5px solid var(--tinte);
  position: sticky;
  top: 4.2rem;
  background: var(--papier);
  z-index: 10;
  padding-top: 1rem;
}
.jahresleiste a {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  padding: .35rem .7rem;
  border: 1px solid var(--linie);
  background: var(--karte);
  font-size: var(--gr-klein);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.jahresleiste a:hover { border-color: var(--tinte); background: var(--papier-tief); }
.jahresleiste a span { font-size: var(--gr-winzig); font-weight: 400; color: var(--tinte-leise); }

.newsjahr { margin-bottom: 3rem; scroll-margin-top: 9rem; }
.newsjahr h2 {
  font-size: var(--gr-h2);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: .8rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--linie);
}
.newsjahr h2 span {
  font-family: var(--grotesk);
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-left: auto;
}

.newsliste { list-style: none; padding: 0; }
.newsliste li { border-bottom: 1px solid var(--linie-zart); }
.newsliste a {
  display: grid;
  gap: .2rem 1.5rem;
  padding: .95rem .3rem;
  text-decoration: none;
  transition: background .15s, padding-left .15s;
}
@media (min-width: 46rem) {
  .newsliste a { grid-template-columns: 11rem 1fr; align-items: baseline; }
}
.newsliste a:hover { background: var(--karte); padding-left: .8rem; }
.newsliste time, .newsliste a > span {
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}
.newsliste strong { font-weight: 500; line-height: 1.4; }
.newsliste a:hover strong { color: var(--blau-text); }

/* Einzelner Beitrag */
.beitrag { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.beitrag .marke a { color: inherit; }
.beitrag .marke a:hover { color: var(--blau-text); }
.beitrag__titel { font-size: var(--gr-h2); margin-bottom: 2rem; }
.beitrag__text > * + * { margin-top: 1.2rem; }
.beitrag__text p { font-size: var(--gr-gross); line-height: 1.65; }
.beitrag__text h2 { font-size: var(--gr-h3); margin-top: 2.5rem; }
.beitrag__blaettern {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linie);
}

/* =========================================================================
   Fuß
   ========================================================================= */

.fuss {
  background: var(--tinte);
  color: rgba(246, 244, 239, .72);
  padding-block: var(--sprung) 2.5rem;
  position: relative;
  z-index: 2;
  font-size: var(--gr-klein);
}
.fuss__gitter { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) {
  .fuss__gitter { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 3rem; }
}
.fuss h3 {
  font-family: var(--grotesk);
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--papier);
  margin-bottom: 1.1rem;
}
.fuss ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.fuss__logo { width: 150px; margin-bottom: 1.2rem; filter: brightness(0) invert(1); opacity: .9; }
.fuss__unten {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(246, 244, 239, .16);
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 2rem;
  justify-content: space-between;
  font-size: var(--gr-winzig);
  color: rgba(246, 244, 239, .5);
}

/* =========================================================================
   Einblenden beim Laden
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .auftritt {
    opacity: 0;
    transform: translateY(14px);
    animation: auftritt .7s cubic-bezier(.2,.9,.3,1) forwards;
  }
  .auftritt:nth-child(1) { animation-delay: .05s; }
  .auftritt:nth-child(2) { animation-delay: .13s; }
  .auftritt:nth-child(3) { animation-delay: .21s; }
  .auftritt:nth-child(4) { animation-delay: .29s; }
}
@keyframes auftritt { to { opacity: 1; transform: none; } }

/* Leiste der Prüfansicht — erscheint nur bei ?platzhalter in der Adresse */
.pruefleiste {
  position: fixed;
  bottom: 1rem; left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--tinte);
  color: var(--papier);
  border: 1px solid rgba(246,244,239,.25);
  padding: .55rem .9rem;
  font-size: var(--gr-winzig);
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  max-width: calc(100% - 2rem);
  text-align: center;
}