/** Shopify CDN: Minification failed

Line 468:0 Unexpected "{"
Line 468:1 Expected identifier but found "%"
Line 469:26 Expected identifier but found whitespace
Line 469:79 Expected identifier but found whitespace
Line 472:1 Expected identifier but found "%"

**/
/* START_SECTION:mega-menue (INDEX:80) */
.mm-sektion::before { background: #ECEFFE; }
.mm-sektion { position: relative; z-index: 20; }

/* OFFENE SCHUBLADE MUSS UEBER DIE TOPBAR.

   Die Schublade ist `position: fixed; z-index: 80`. Das half nichts:
   `.mm-sektion` hat selbst `position: relative; z-index: 20` und macht
   damit einen eigenen Stapelbereich auf — die 80 gelten nur INNERHALB
   davon. Nach aussen zaehlt die 20.

   Die Topbar liegt bei 999999. Ergebnis am 20.08.2026 auf dem Telefon:
   Die Topbar lag mitten in der offenen Schublade und verdeckte
   Supplements, Begleitung und 'Neu hier?'.

   Deshalb wird die SEKTION angehoben, nicht die Schublade. Und nur,
   solange sie offen ist — sonst laege die Kopfzeile dauerhaft ueber
   allem. */
.mm-sektion[data-offen] { z-index: 1000000; }

/* DAS MENUE DES THEMES AUSBLENDEN — nur am Rechner.

   Der Kopfbereich zeigte dieselben sechs Namen ein zweites Mal, als blaue
   Pillenreihe. Gesucht hatte ich sie erst bei nav_pills und bei der
   Einstellung menu_active — beides falsch. Am 19.08.2026 gefunden: Es ist
   das eigene Menue der Header-Sektion, `magnet-element.menu__item` in
   einem `ul.flex.flex-wrap`. Das Theme rendert es sogar zweimal, das
   zweite traegt `btn-duplicate`.

   Es bringt drei Probleme auf einmal mit: die Dopplung, SIEBEN Links mit
   href="#" (Nach Anliegen, Einzeltests, Pakete & Komplettprofile, Nicht
   sicher?, Nach Ziel, Nach Form, Kuren) und ACHT Bilder ohne
   Alternativtext. Alle drei verschwinden hiermit.

   NUR AB 900px. Darunter oeffnet der Hamburger eine Schublade mit
   eigenem Aufbau (`drawer__menu`) — die bleibt unberuehrt, sonst haette
   das Telefon gar kein Menue mehr. */
/* DIE KOPFZEILE DES THEMES AUSBLENDEN — nur am Rechner.

   Der Entwurf zeigt EINE Zeile: Logo links, Menue mittig, Anmelden und
   Warenkorb rechts. Das Theme baut daraus drei Ebenen — Logo mittig,
   Menue darunter, Konto rechts. Diese Sektion uebernimmt die ganze
   Zeile, deshalb faellt `header.header` weg.

   Vorher stufenweise gesucht: nav_pills (falsch), menu_active (falsch),
   magnet-element.menu__item (traf nur Punkte mit Untermenue, 'Hilfe'
   blieb stehen), nav.header__menu (traf das Menue, nicht die Zeile).
   `header.header` ist die sichtbare Leiste, 99px hoch.

   NUR AB 900px. `menu-drawer` ist ein Geschwisterelement und bleibt
   unberuehrt — das Telefon behaelt Hamburger, Logo und Warenkorb. */
/* Bei JEDER Breite. Bis 20.08.2026 nur ab 900px — darunter fuehrte die
   Schublade des Themes das Menue, und die war kaputt: Die Topbar lag
   darueber und schnitt den ersten Punkt ab. Diese Sektion traegt jetzt
   auch den Hamburger. */
header.header { display: none !important; }

/* Kopfzeile nach dem Entwurf: 20px 56px, weiss, unten 1px #EFEEF4. */
.mm-sektion::before { background: #FFFFFF; }
.mm-sektion { border-block-end: 1px solid #EFEEF4; }
.mm {
  /* position: relative + z-index: 1 SIND PFLICHT. `.section::before` ist
     eine absolut gesetzte, deckende Flaeche, die NACH den statischen
     Kindern gemalt wird. Beim Umbau der Kopfzeile am 20.08.2026 ging die
     Zeile verloren — Ergebnis: Logo, Beschriftungen und Konto waren weg,
     nur die Pfeile blieben sichtbar. Sah aus wie ein Liquid-Fehler, war
     aber die Stapelreihenfolge. */
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; max-width: 1280px; margin-inline: auto; padding: 20px 56px;
}
.mm__marke { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; }
/* 46 auf 32: Der Kopfbereich war bei 1280px 92px hoch, MOLEQLAR
   kommt mit rund 70 aus, und das Logo traegt davon den groessten Teil.
   Gemessen am 22.08.2026. */
.mm__logo { display: block; height: 32px; width: auto; }
.mm__claim {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .08em; color: #9C9AAE; white-space: nowrap;
}
.mm__konto { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.mm__anmelden { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; font-size: 16px; color: #5A5870; text-decoration: none; white-space: nowrap; }
.mm__anmelden:hover { color: #2B2A3D; }
.mm__korb {
  font-size: 16px; color: #2B2A3D; text-decoration: none; white-space: nowrap;
  border: 1px solid #DEDCE8; border-radius: 999px; padding: 11px 20px;
}
.mm__korb { display: inline-flex; align-items: center; gap: 9px; }
.mm__korb:hover { border-color: #5B5FC7; color: #5B5FC7; }
.mm__zahl {
  display: inline-grid; place-items: center;
  min-inline-size: 24px; block-size: 24px; padding-inline: 6px;
  border-radius: 999px; background: #5B5FC7; color: #fff;
  font-size: 13px; font-weight: 600; line-height: 1;
}
.visually-hidden-mm {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* DER CLAIM IST RAUS. Gemessen am 20.08.2026: Die Zeile hat innen 1328px,
   belegt waren 1313 — frei blieben 15. Ein siebter Reiter braucht rund
   140. Der Claim kostete 183px und wiederholt, was das Logo ohnehin
   sagt; er war der einzige wirklich verzichtbare Posten.

   Das Feld bleibt im Schema. Wer ihn zurueckholt, muss damit rechnen,
   dass die Reiter umbrechen. */
.mm__claim { display: none; }

.mm__burger {
  display: none; align-items: center; justify-content: center;
  inline-size: 48px; block-size: 48px; border: 0; background: transparent;
  cursor: pointer; flex-shrink: 0;
}
.mm__burger-striche { display: grid; gap: 5px; }
.mm__burger-striche i { display: block; inline-size: 24px; block-size: 2px; background: #2B2A3D; border-radius: 2px; }
.mm__zu { display: none; }
.mm__schub-konto { display: none; }



.mm__leiste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 4px; justify-content: center; }
.mm__punkt { position: static; }
.mm__knopf {
  display: inline-flex; align-items: center; gap: 9px;
  /* 17px statt 20 und schmaleres Polster: Seit die Kopfzeile Logo, Reiter
     und Konto in EINER Zeile traegt, passten sechs Reiter zu 20px nicht
     mehr nebeneinander — sie brachen in eine zweite Zeile um. Der Entwurf
     sagt 16; 17 ist der Kompromiss zwischen Vorgabe und der Ansage,
     groesser zu werden. Gemessen auf 1440px am 20.08.2026. */
  min-height: 56px; padding-inline: 13px;
  border: 0; border-radius: 999px; background: transparent;
  font: inherit; font-size: 16px; font-weight: 500; color: #2B2A3D; cursor: pointer;
}
/* Unterstrich statt Pille — so zeigt es der Entwurf. Die Groesse bleibt
   bei 20px: Der Entwurf sagt 16, der Auftraggeber wollte ein Drittel
   groesser. Die Form folgt dem Entwurf, das Mass der Ansage. */
.mm__knopf { border-block-end: 2px solid transparent; border-radius: 0; }
.mm__knopf:hover { background: transparent; border-block-end-color: #DEDCE8; }
.mm__knopf[aria-expanded="true"] { background: transparent; border-block-end-color: #5B5FC7; }
.mm__knopf:focus-visible { outline: 2px solid #5B5FC7; outline-offset: 2px; }
.mm__pfeil {
  inline-size: 7px; block-size: 7px; margin-block-start: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .16s;
}
.mm__knopf[aria-expanded="true"] .mm__pfeil { transform: rotate(-135deg); margin-block-start: 3px; }

/* AUF- UND ZUKLAPPEN. `hidden` allein ist display:none — daran laesst sich
   nichts weich machen. Deshalb: beim Oeffnen erst `hidden` weg, im naechsten
   Bild die Klasse `--auf` dazu; beim Schliessen erst die Klasse weg, nach
   dem Uebergang `hidden` zurueck. */
.mm__panel {
  position: absolute; inset-inline: 0; top: 100%;
  background: #fff; border-block-start: 1px solid #E7E6F0;
  box-shadow: 0 24px 48px rgb(32 31 49 / .12);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
}
.mm__panel--auf { opacity: 1; transform: none; }
.mm__panel[hidden] { display: none; }
/* Wer Bewegung abgestellt hat, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
  .mm__panel { transition: none; transform: none; }
}
.mm__inhalt {
  max-width: 1280px; margin-inline: auto; padding: 32px 56px 40px;
  display: grid; grid-template-columns: 0.9fr 2.4fr; gap: 64px; align-items: start;
}

.mm__vorspann { background: #FBFAFC; border-radius: 24px; padding: 34px; }
.mm__lead-titel { margin: 0 0 12px; font-size: 22px; line-height: 1.2; font-weight: 600; color: #201F31; text-wrap: pretty; }
.mm__lead-text { margin: 0 0 22px; font-size: 16px; line-height: 1.55; color: #5A5870; }
.mm__cta {
  display: inline-flex; align-items: center; min-height: 56px; padding-inline: 30px;
  border-radius: 999px; background: #5B5FC7; color: #fff;
  font-size: 16px; font-weight: 500; text-decoration: none;
}
a.mm__cta:hover { filter: brightness(1.08); }
/* Schaltfläche ohne Ziel: sichtbar, aber nicht klickbar — dieselbe Regel
   wie bei den Einträgen. */
.mm__cta--tot { background: #E7E6F0; color: #8B89A0; cursor: default; }

/* Spaltenzahl kommt aus dem Liquid (--mm-spalten), Rueckfall 3.
   Der Abstand schrumpft mit: bei vier Spalten sind 44px zu viel, der
   Text wuerde in jeder Spalte umbrechen. */
.mm__spalten { display: grid; grid-template-columns: repeat(var(--mm-spalten, 3), 1fr); gap: clamp(24px, 2.4vw, 44px); }
.mm__spalte { display: flex; flex-direction: column; gap: 10px; }
.mm__bild { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; }
.mm__bild.mm__bild--gross { aspect-ratio: 4 / 3; }
.mm__bild img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.mm__bild--leer {
  display: grid; place-items: center; padding: 10px;
  background: repeating-linear-gradient(135deg, #E9E7F1 0 9px, #F4F3F9 9px 18px);
}
.mm__bild--leer span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; line-height: 1.45; text-align: center; color: #7C7A92;
  background: rgb(255 255 255 / .82); border-radius: 10px; padding: 6px 9px;
}
.mm__spalte-titel { margin: 0 0 6px; font-size: 20px; line-height: 1.26; font-weight: 600; color: #201F31; }
.mm__lead-marke {
  display: block; margin-block-end: 8px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8B89A0;
}
.mm__liste { list-style: none; margin: 0; padding: 0; }
/* SCHRIFT EINE STUFE KLEINER, ZEILEN ENGER — 21.08.2026.
   20 auf 18px, Zeilenpolster 9 auf 6px. Die Spalten hatten dadurch
   mehr Luft als noetig, und ein Menue liest sich als Block, nicht als
   Aufzaehlung. */
/* ZEILEN ENGER, 22.08.2026. Die 44px Tippflaeche stammen aus WCAG 2.5.8
   und gelten fuer den Finger. Das Mega-Menue klappt nur mit der Maus auf
   — auf dem Telefon laeuft die Bedienung ueber das Schubfach, und dort
   stehen die Zeilen weiter auf 48px (siehe unten, ab 1100px).
   Zehn Eintraege zu je 44px ergaben eine Spalte von 440px; mit 32px sind
   es 320. Gemessen, nicht geschaetzt. */
.mm__link {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 32px; padding-block: 3px;
  font-size: 16px; line-height: 1.3; color: #201F31; text-decoration: none;
}
/* DER KURZE STRICH LINKS zeigt an: hier fuehrt etwas hin. Derselbe
   Verlauf wie der lange Strich in den Seitenkoepfen, nur 14px statt 120.
   NUR an echten Links — ein Eintrag ohne Ziel bekommt keinen, sonst
   verspricht das Zeichen etwas, was der Eintrag nicht einloest. */
a.mm__link::before {
  content: ""; flex: 0 0 auto; inline-size: 16px; block-size: 3px; border-radius: 999px;
  /* Der ORY-Verlauf in kraeftig: Mint nach Violett. Der helle
     Seitenkopf-Verlauf sah bei 3px wie ein grauer Strich aus — auf
     kleiner Flaeche braucht Farbe mehr Saettigung, nicht weniger. */
  background: linear-gradient(110deg, #A8E8E2 0%, #889FFE 100%);
  transition: inline-size .16s ease, background .16s ease;
}
a.mm__link:hover::before { inline-size: 22px; background: #5B5FC7; }
@media (prefers-reduced-motion: reduce) { a.mm__link::before { transition: none; } }
a.mm__link:hover { color: #5B5FC7; text-decoration: underline; }
/* Eintraege ohne Ziel ruecken um Strich und Abstand ein, damit die
   Textkante trotzdem stimmt. */
.mm__link--tot { color: #201F31; cursor: default; padding-inline-start: 26px; }
/* Der Einzug richtet sich nach Strichbreite plus Abstand: 16 + 10. */




@media (max-width: 1100px) {
  .mm__inhalt { grid-template-columns: 1fr; gap: 24px; }
  .mm__vorspann { max-width: 620px; }
}
@media (max-width: 900px) {
  /* AUF DEM TELEFON: Kopfzeile mit Logo und Hamburger, Menue in einer
     eigenen Schublade. Vorher fuehrte die Schublade des Themes — die war
     kaputt (Topbar darueber, erster Punkt abgeschnitten). */
  .mm { padding: 12px 16px; gap: 12px; }
  .mm__marke { flex: 1; }
  .mm__logo { height: 26px; }
  .mm__konto { gap: 10px; }
  .mm__anmelden { display: none; }          /* steht unten in der Schublade */
  .mm__korb { font-size: 15px; min-block-size: 44px; padding-block: 0; padding-inline: 14px; }
  .mm__burger { display: inline-flex; }

  .mm__nav {
    position: fixed; inset: 0; z-index: 80;
    background: #fff; overflow-y: auto;
    padding: 44px 20px 28px;
    transform: translateX(100%);
    transition: transform .22s ease;
    visibility: hidden;
  }
  .mm-sektion[data-offen] .mm__nav { transform: none; visibility: visible; }
  .mm__zu {
    display: block; position: absolute; inset-block-start: 12px; inset-inline-end: 12px;
    inline-size: 48px; block-size: 48px; border: 0; background: transparent;
    font-size: 28px; line-height: 1; color: #2B2A3D; cursor: pointer;
  }
  .mm__schub-konto {
    display: flex; align-items: center; min-height: 52px; margin-block-start: 24px;
    font-size: 16px; color: #5A5870; text-decoration: none;
    border-block-start: 1px solid #DFE2F5; padding-block-start: 16px;
  }
  /* AKKORDEON, kein waagerechter Scroller. Als Scroller sass das Panel in
     der Breite seines Knopfes fest — es liegt im <li>, und das <li> ist
     ein Flex-Element. Gemessen am 19.08.2026 auf 375px. Der Entwurf zeigt
     hier ohnehin ein Akkordeon mit + und −. */
  .mm__leiste { display: block; overflow: visible; }
  .mm__punkt { display: block; border-block-end: 1px solid #DFE2F5; }
  .mm__punkt:last-child { border-block-end: 0; }
  .mm__knopf { inline-size: 100%; justify-content: space-between; border-radius: 0; padding-inline: 8px; }
  .mm__knopf[aria-expanded="true"] { background: transparent; }
  /* Im Fluss statt schwebend: Ein Panel, das auf 375px über den Inhalt
     fällt, verdeckt genau das, wonach jemand sucht. */
  .mm__panel { position: static; box-shadow: none; border-radius: 20px; margin-block: 8px; }
  .mm__inhalt { padding: 18px 20px 22px; }
  .mm__spalten { grid-template-columns: 1fr; gap: 22px; }
  .mm__vorspann { padding: 18px; border-radius: 20px; }
  .mm__link { min-height: 48px; }   /* Tippfläche 48 */
  .mm__bild { display: none; }   /* Bilder helfen im Akkordeon nicht, sie verlängern nur */
}

/* ANS ENDE GESTELLT. Die Staffelung stand vorher VOR der Grundregel
   fuer .mm__knopf und wurde davon ueberschrieben — gleiche Spezifitaet,
   die spaetere Regel gewinnt. Gemessen: Bei 1280px blieb die Leiste bei
   946px, als waere nichts gesetzt. (20.08.2026) */
/* SIEBEN REITER BRAUCHEN PLATZ, DEN NICHT JEDER SCHIRM HAT.

   Gemessen am 20.08.2026, Zeile innen gegen benoetigte Breite:
     1440px   1328 verfuegbar, 1310 gebraucht   passt
     1366px   1254 verfuegbar, 1268 gebraucht   14 zu wenig
     1280px   1168 verfuegbar, 1268 gebraucht   100 zu wenig

   Ohne Staffelung bricht der Text IM Knopf um — im Bildschirmfoto stand
   'Neu hier?' auf zwei Zeilen. Deshalb: `white-space: nowrap` auf den
   Knopf, damit eine Beschriftung nie zerreisst, und zwei Stufen darunter.
   Unter 1150 darf die Leiste umbrechen — zwei saubere Reihen sind besser
   als sieben gequetschte Reiter. */
.mm__knopf { white-space: nowrap; }

@media (max-width: 1439px) {
  .mm__knopf { font-size: 16px; padding-inline: 9px; min-height: 52px; }
  .mm__anmelden, .mm__korb { font-size: 16px; }
  .mm__korb { padding-block: 10px; padding-inline: 16px; }
  .mm { padding-inline: 32px; }
}
@media (max-width: 1279px) {
  .mm__knopf { font-size: 16px; padding-inline: 7px; }
  .mm { padding-inline: 20px; gap: 14px; }
}
@media (max-width: 1149px) and (min-width: 900px) {
  .mm__leiste { flex-wrap: wrap; }
}
/* END_SECTION:mega-menue */
/* START_SECTION:ory-laufband (INDEX:110) */
.lb-sektion::before { background: var(--lb-flaeche, #D8C7FA); }
.lb { position: relative; z-index: 1; overflow: hidden; padding-block: 11px; }
.lb__satz {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 14px; letter-spacing: .01em; color: #FFFFFF;
}
.lb__punkt { font-style: normal; opacity: .55; }

/* RUHIG IST DIE VORGABE (20.08.2026).
   Ein Band, das über jeder Seite läuft, zieht den Blick weg von dem,
   worum es geht. Ein Satz, mittig, still — die Abwechslung kommt aus
   dem Wochenwechsel, nicht aus der Bewegung. */
.lb--ruhig { display: flex; justify-content: center; padding-inline: 20px; text-align: center; }
.lb--ruhig .lb__satz { flex-wrap: wrap; justify-content: center; row-gap: 2px; }

/* Die laufende Fassung bleibt im Theme-Editor abrufbar, ist aber aus. */
.lb--lauf {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.lb--lauf .lb__spur { display: flex; width: max-content; animation: lb-lauf var(--lb-dauer, 34s) linear infinite; }
/* min-width: 100vw — siehe Kommentar oben. Beide Hälften sind immer
   gleich breit, deshalb sitzt die Naht bei -50% immer genau. */
.lb--lauf .lb__gruppe { display: flex; min-width: 100vw; justify-content: space-around; gap: 48px; }
.lb--lauf .lb__satz { white-space: nowrap; }
.lb--lauf:hover .lb__spur, .lb--lauf:focus-within .lb__spur { animation-play-state: paused; }
@keyframes lb-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Wer Bewegung abgestellt hat, bekommt sie nicht — und sieht trotzdem
   den ganzen Satz. */
@media (prefers-reduced-motion: reduce) {
  .lb--lauf { -webkit-mask-image: none; mask-image: none; justify-content: center; display: flex; }
  .lb--lauf .lb__spur { animation: none; width: auto; }
  /* Von den acht Kopien bleibt eine stehen, mittig. */
  .lb--lauf .lb__gruppe + .lb__gruppe { display: none; }
  .lb--lauf .lb__gruppe { min-width: 0; gap: 0; }
  .lb--lauf .lb__satz + .lb__satz { display: none; }
  .lb--lauf .lb__satz { white-space: normal; padding-inline: 20px; flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 700px) {
  .lb__satz { font-size: 13px; gap: 10px; }
  .lb--lauf .lb__satz { padding-inline-end: 32px; }
}
/* END_SECTION:ory-laufband */
/* START_SECTION:ory-vorsorge (INDEX:125) */
/* Der Akzentverlauf steht so nur im Entwurf; --ory-verlauf gibt es
   bereits in snippets/css-variables.liquid mit demselben Wert. */
.vs { --vs-akzent: linear-gradient(120deg, #F8E9E9 0%, #EDEAF4 45%, #E4F3EE 100%); }

.vs-sektion::before { background: #FBFAFC; }
.vs {
  position: relative; z-index: 1;
  max-width: 1280px; margin-inline: auto;
  background: #FBFAFC; color: #201F31;
}
.vs__band { padding: 56px max(56px, calc((100% - 1280px) / 2)); }

/* ── gemeinsame Bausteine ── */
.vs__marke {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0;
}
.vs__h2 { margin: 0; font-size: 28px; line-height: 1.14; letter-spacing: -0.02em; font-weight: 600; color: #201F31; }
.vs__strich { block-size: 2px; inline-size: 120px; border-radius: 999px; background: var(--ory-verlauf); }
.vs__bandkopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; margin-block-end: 28px; flex-wrap: wrap;
}
.vs__bandkopf--gestapelt { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 660px; margin-block-end: 26px; }
.vs__bandtitel { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.vs__bandtext { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; max-width: 380px; }
.vs__bandtext--breit { max-width: 660px; }
.vs__zaehler { font-size: 15px; color: #8B89A0; flex: none; }
.vs__pille {
  display: flex; align-items: center; min-height: 44px;
  background: #FFFFFF; border: 1px solid #DEDCE8; border-radius: 999px;
  padding: 14px 22px; font-size: 16px; font-weight: 500; color: #201F31; text-decoration: none;
}
a.vs__pille:hover { border-color: #5B5FC7; }
.vs__pille--tot { color: #A9A7B8; background: #F7F6FB; }

/* ── Band 1 · Einführung ── */
.vs__band--einfuehrung { background: #FFFFFF; border-block-end: 1px solid #EFEEF4; padding: 36px 56px 32px; }
.vs__krume { font-size: 13px; color: #8B89A0; margin-block-end: 26px; }
.vs__krume a { color: #8B89A0; text-decoration: none; }
.vs__krume a:hover { color: #5B5FC7; text-decoration: underline; }
.vs__krumeteiler { padding-inline: 7px; }
.vs__krume span:last-child { color: #5A5870; }
.vs__einfuehrung { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; align-items: start; }
.vs__text { display: flex; flex-direction: column; gap: 14px; }
.vs__h1 { margin: 0; font-size: 38px; line-height: 1.05; letter-spacing: -0.028em; font-weight: 600; color: #201F31; }
.vs__lead { margin: 0; font-size: 19px; line-height: 1.6; color: #5A5870; max-width: 56ch; text-wrap: pretty; }
.vs__selbst { margin: 0; font-size: 18px; line-height: 1.6; color: #3B3A50; max-width: 56ch; text-wrap: pretty; }
.vs__grenze { margin: 0; font-size: 16px; line-height: 1.6; color: #8B89A0; max-width: 56ch; }

.vs__hilfen { display: flex; flex-direction: column; gap: 10px; }
.vs__hilfen .vs__marke { font-size: 11px; }
.hilfe {
  background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 20px;
  padding: 18px 20px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 44px; text-decoration: none; color: inherit;
}
a.hilfe:hover { border-color: #DEDCE8; }
.hilfe__text { display: flex; flex-direction: column; gap: 3px; }
.hilfe__titel { font-size: 17px; font-weight: 500; color: #201F31; }
.hilfe__unter { font-size: 15px; line-height: 1.45; color: #5A5870; }
.hilfe__cta { font-size: 16px; color: #5B5FC7; flex: none; }
.hilfe--tot .hilfe__cta { color: #A9A7B8; }

/* ── Band 2 · Einstiege ── */
.vs__band--wege { background: #F4F3F9; border-block-end: 1px solid #EAE8F1; }
.vs__wege { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.weg {
  background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 24px; padding: 24px;
  display: flex; flex-direction: column; gap: 10px; min-height: 44px;
  text-decoration: none; color: inherit;
}
a.weg:hover { border-color: #DEDCE8; }
.weg__feld { inline-size: 40px; block-size: 40px; border-radius: 12px; background: var(--vs-akzent); display: block; }
.weg__titel { font-size: 19px; font-weight: 600; color: #201F31; line-height: 1.25; letter-spacing: -0.01em; }
.weg__text { font-size: 15px; line-height: 1.55; color: #5A5870; }
.weg__cta { font-size: 15px; color: #5B5FC7; margin-block-start: 4px; }
.weg--tot .weg__cta { color: #A9A7B8; }

/* ── Band 3 · Pakete ── */
.vs__band--pakete { background: #FBFAFC; padding: 36px 56px 72px; }
{%- comment -%}
  Zwei Spalten statt drei: Die Kacheln tragen jetzt Erklaerung UND Zusatzlinks.
  Bei drei Spalten wurden sie 373 px breit und 816 px hoch — schmal und lang.
  Bei vier Kacheln geht zudem eine 3er-Reihe nie auf.
{%- endcomment -%}
.vs__angebote { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
/* Bei ungerader Kartenzahl stuende die letzte allein in ihrer Zeile und
   saehe aus wie ein Rest. Sie nimmt deshalb die volle Breite — das liest
   sich als Abschluss. Seit dem fuenften Weg (ORY Athletik, 03.09.2026). */
.vs__angebote > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ang {
  position: relative;
  background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: border-color .16s ease;
}
.ang:has(.ang__flaeche):hover { border-color: #DEDCE8; }
/* padding:0 — der Innenabstand war fuer den Platzhaltertext gedacht.
   Mit einem echten Foto darin lag ringsum ein 14px breiter Streifenrand.
   Der Abstand sitzt jetzt am Platzhaltertext selbst. 22.08.2026 */
.ang__bild {
  position: relative; aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(135deg, #E9E7F1 0 9px, #F4F3F9 9px 18px);
  display: flex; align-items: flex-end; padding: 0;
}
.ang__foto { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.ang__motiv {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; line-height: 1.5; color: #7C7A92;
  background: rgba(255,255,255,.86); border-radius: 10px; padding: 6px 9px;
}
.ang__kennzeichen {
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px;
  background: rgba(255,255,255,.92); border-radius: 999px; padding: 6px 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #3B3A50;
}
.ang__inhalt { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ang__oben { display: flex; flex-direction: column; gap: 6px; }
.ang__art {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #3B3A50;
  background: var(--vs-akzent); border-radius: 999px; padding: 4px 10px; align-self: flex-start;
}
.ang__name { font-size: 23px; line-height: 1.2; font-weight: 500; color: #201F31; letter-spacing: -0.012em; }
.ang__text { font-size: 15px; line-height: 1.5; color: #5A5870; }
.ang__fakten { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: auto; }
.ang__fakt {
  border: 1px solid #EBE9F2; border-radius: 999px; padding: 6px 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; color: #5A5870; white-space: nowrap; flex: none;
}
.ang__flaeche { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ang__mehr--link { position: relative; z-index: 2; }
.ang__liste { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-block-start: 1px solid #EFEEF4; display: flex; flex-direction: column; gap: 8px; }
.ang__listenzeile { display: flex; }
.ang__listenlink { position: relative; z-index: 2; font-size: 14px; color: #3B3A50; border-block-end: 1px solid #DCDAE6; padding-block-end: 2px; transition: border-color .16s ease; }
.ang__listenlink:hover { border-color: #5B5FC7; color: #5B5FC7; }
.ang__listentext { font-size: 14px; color: #6A6880; }
.ang__fuss {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-block-start: 1px solid #EFEEF4; padding-block-start: 12px;
}
.ang__preisblock { display: flex; align-items: baseline; gap: 8px; }
.ang__preis { font-size: 22px; font-weight: 600; color: #5B5FC7; }
.ang__einheit { font-size: 13px; color: #9C9AAE; }
.ang__mehr { font-size: 15px; color: #5B5FC7; }
.ang--tot .ang__mehr { color: #A9A7B8; }

.vs__ueberblick {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-block-start: 28px; background: #FFFFFF; border: 1px solid #EBE9F2;
  border-radius: 24px; padding: 22px 26px;
}
.vs__ueberblicktext { font-size: 17px; line-height: 1.55; color: #3B3A50; }
.vs__ueberblick .vs__pille { flex: none; padding: 14px 24px; }

/* ── Band 4 · Vergleich ── */
.vs__band--vergleich { background: #FFFFFF; border-block-start: 1px solid #EFEEF4; padding: 72px 56px; }
.vs__tabellenrahmen { border-radius: 24px; overflow: hidden; border: 1px solid #EBE9F2; background: #FBFAFC; }
.vs__tabelle { inline-size: 100%; border-collapse: collapse; font-size: 16px; }
/* DIESE ZEILE IST DER EIGENTLICHE FIX, 22.08.2026.
   Das gekaufte Theme setzt in theme.css `table th, table td { font-size:
   var(--text-lg) }` — das sind 20px, und es schlaegt die Vererbung
   von der Tabelle. Die 16px des Entwurfs kamen deshalb nie an; gemessen
   wurden 20px. Ein Wert auf der Tabelle allein genuegt nicht, er muss auf
   den Zellen stehen. */
.vs__tabelle th, .vs__tabelle td { font-size: 16px; }
.vs__tabelle thead tr { background: #F4F3F9; }
.vs__tabelle thead th {
  text-align: start; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: #8B89A0; padding: 14px 20px;
}
.vs__tabelle thead th.sp-k { inline-size: 22%; }
/* Drei Spalten mit eigener Farbe — das ist der Kern der Tabelle im
   Entwurf: die Wege sind auf einen Blick auseinanderzuhalten. */
.vs__tabelle thead th.sp-b { color: #4E6B7A; background: #E4EDF3; border-block-end: 2px solid #C9DCE6; }
.vs__tabelle thead th.sp-c { color: #3F6A5B; background: #E1F1EB; border-block-end: 2px solid #C6E2D7; }
.vs__tabelle thead th.sp-d { color: #8A5457; background: #F7E7E7; border-block-end: 2px solid #EBD2D3; }
.vs__tabelle tbody tr { border-block-start: 1px solid #EFEEF4; }
.vs__tabelle tbody th.sp-k { text-align: start; font-weight: 400; color: #8B89A0; padding: 16px 20px; vertical-align: top; }
.vs__tabelle tbody td { padding: 16px 20px; vertical-align: top; line-height: 1.5; }
.vs__tabelle tbody td.sp-a { color: #3B3A50; }
.vs__tabelle tbody td.sp-b { color: #2F4653; background: #F1F6F9; }
.vs__tabelle tbody td.sp-c { color: #2C4A3F; background: #EFF8F4; }
.vs__tabelle tbody td.sp-d { color: #5C3B3D; background: #FBF2F2; }
.vs__tabellenfuss { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: #8B89A0; max-width: 90ch; }

/* ── Band 5 · Früherkennung ── */
.vs__band--kollektion { background: #FBFAFC; border-block-start: 1px solid #EFEEF4; }
.vs__kollektion { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kp { display: flex; flex-direction: column; gap: 8px; }
.kp__bild { display: block; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background: #F4F3F9; }
.kp__foto { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.kp__name { font-size: 17px; line-height: 1.3; font-weight: 500; color: #201F31; text-decoration: none; }
.kp__name:hover { color: #5B5FC7; }
.kp__preis { font-size: 17px; font-weight: 600; color: #5B5FC7; }
.kp__form { margin: 0; }
.kp__knopf {
  inline-size: 100%; min-height: 44px; border: 1px solid #DEDCE8; border-radius: 999px;
  background: #FFFFFF; color: #201F31; font-size: 15px; font-weight: 500; cursor: pointer;
}
.kp__knopf:hover { border-color: #5B5FC7; }
.kp__knopf[disabled] { color: #A9A7B8; cursor: default; background: #F7F6FB; }

/* ── Band 6 · Fragen ── */
.vs__band--fragen { background: #F4F3F9; border-block-start: 1px solid #EAE8F1; padding: 72px 56px; }
.vs__fragenraster { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: start; }
.vs__fragenkopf { display: flex; flex-direction: column; gap: 14px; }
.vs__fragenknoepfe { display: flex; flex-direction: column; gap: 10px; margin-block-start: 4px; }
.vs__fragenliste { display: flex; flex-direction: column; }
.frage { border-block-start: 1px solid #E4E1EC; }
.frage__q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0; min-height: 44px; cursor: pointer; list-style: none;
}
.frage__q::-webkit-details-marker { display: none; }
.frage__titel { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; color: #201F31; }
.frage__zeichen { font-size: 22px; color: #9C9AAE; line-height: 1; flex: none; }
.frage[open] .frage__zeichen::before { content: "–"; }
.frage[open] .frage__zeichen { font-size: 0; }
.frage[open] .frage__zeichen::before { font-size: 22px; }
.frage__a { padding: 0 0 26px; display: flex; flex-direction: column; gap: 12px; max-width: 70ch; }
.frage__erste { margin: 0; font-size: 17px; line-height: 1.6; color: #3B3A50; }
.frage__zweite { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; }
.vs__fragenabschluss { border-block-start: 1px solid #E4E1EC; }

/* ── Band 7 · Schluss ── */
.vs__band--schluss {
  background: #FFFFFF; border-block-start: 1px solid #EFEEF4; padding: 48px 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.vs__zeichen { display: flex; align-items: center; gap: 12px; }
.vs__logo { block-size: 28px; inline-size: auto; display: block; }
.vs__claim {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .08em; color: #9C9AAE;
}
.vs__schlusssatz { margin: 0; font-size: 14px; line-height: 1.6; color: #8B89A0; max-width: 560px; }

/* Zwischenstufe fuer die Tabelle, bevor sie zur Kartenliste wird. */
@media (max-width: 1200px) {
  .vs__tabelle th, .vs__tabelle td { font-size: 15px; }
  .vs__tabelle thead th { padding: 12px 14px; letter-spacing: .06em; }
  .vs__tabelle tbody th.sp-k, .vs__tabelle tbody td { padding: 12px 14px; }
}
@media (max-width: 1100px) {
  .vs__einfuehrung { grid-template-columns: 1fr; gap: 32px; }
  .vs__wege { grid-template-columns: repeat(2, 1fr); }
  .vs__angebote { grid-template-columns: repeat(2, 1fr); }
  .vs__kollektion { grid-template-columns: repeat(3, 1fr); }
  .vs__fragenraster { grid-template-columns: 1fr; gap: 32px; }
  .vs__fragenknoepfe { flex-direction: row; }
}
/* Fuenf Spalten tragen unter rund 820px nicht mehr — ab hier Karten. */
@media (max-width: 820px) {
  .vs__tabellenrahmen { border: 0; border-radius: 0; overflow: visible; background: transparent; }
  .vs__tabelle th, .vs__tabelle td { font-size: 16px; }
  .vs__tabelle thead { position: absolute; clip-path: inset(50%); inline-size: 1px; block-size: 1px; overflow: hidden; }
  .vs__tabelle, .vs__tabelle tbody, .vs__tabelle tr, .vs__tabelle th, .vs__tabelle td { display: block; inline-size: auto; }
  .vs__tabelle tbody tr {
    border: 1px solid #EBE9F2; border-radius: 20px; overflow: hidden;
    margin-block-end: 12px; background: #FFFFFF;
  }
  .vs__tabelle tbody th.sp-k {
    padding: 14px 16px; background: #F4F3F9; color: #201F31; font-weight: 600; font-size: 16px;
  }
  .vs__tabelle tbody td { padding: 12px 16px; }
  .vs__tabelle tbody td::before {
    content: attr(data-spalte);
    display: block; margin-block-end: 3px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8B89A0;
  }
}

@media (max-width: 700px) {
  .vs__band { padding: 28px 20px; }
  .vs__band--einfuehrung { padding: 20px 20px 24px; }
  .vs__band--pakete, .vs__band--vergleich, .vs__band--fragen { padding: 32px 20px; }
  .vs__h1 { font-size: 31px; }
  .vs__h2 { font-size: 24px; }
  .vs__lead { font-size: 17px; }
  .vs__selbst { font-size: 16px; }
  .vs__wege, .vs__angebote { grid-template-columns: 1fr; }
  .vs__kollektion { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .vs__ueberblick { flex-direction: column; align-items: flex-start; }
  .vs__fragenknoepfe { flex-direction: column; }
  .frage__titel { font-size: 18px; }

  /* Aus der Tabelle wird eine Kartenliste. Die Farbe der Spalte wandert
     auf die Zelle, damit die Zuordnung erhalten bleibt. */
  .vs__tabellenrahmen { border: 0; border-radius: 0; overflow: visible; background: transparent; }
  .vs__tabelle thead { position: absolute; clip-path: inset(50%); inline-size: 1px; block-size: 1px; overflow: hidden; }
  .vs__tabelle, .vs__tabelle tbody, .vs__tabelle tr, .vs__tabelle th, .vs__tabelle td { display: block; inline-size: auto; }
  .vs__tabelle tbody tr {
    border: 1px solid #EBE9F2; border-radius: 20px; overflow: hidden;
    margin-block-end: 12px; background: #FFFFFF;
  }
  .vs__tabelle tbody th.sp-k {
    padding: 14px 16px; background: #F4F3F9; color: #201F31; font-weight: 600; font-size: 16px;
  }
  .vs__tabelle tbody td { padding: 12px 16px; }
  .vs__tabelle tbody td::before {
    content: attr(data-spalte);
    display: block; margin-block-end: 3px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8B89A0;
  }
}

/* ══ DAS THEME BLENDET LEERE ELEMENTE AUS ══ 22.08.2026
   theme.css enthaelt:
     a:empty, ul:empty, dl:empty, div:empty, section:empty, article:empty,
     p:empty, h1:empty … h6:empty { display: none }
   Jedes rein dekorative, leere <div> ist damit unsichtbar — der
   Verlaufsstrich unter den Ueberschriften, die Balkenfuellung, die
   Abschlusslinie. Gefunden, weil ein Balken 91 % breit sein sollte und
   0 Pixel gemessen wurde. Im HTML stand er die ganze Zeit.
   Zwei Klassen hintereinander schlagen div:empty in der Spezifitaet. */
.vs .vs__strich,
.vs .vs__balken,
.vs .vs__fragenabschluss,
.vs .weg__feld { display: block; }
/* END_SECTION:ory-vorsorge */
/* START_SECTION:startseite-fuss (INDEX:156) */
.fuss-sektion::before { background: #FFFFFF; }
.fuss-sektion { border-block-start: 1px solid #EFEEF4; }
.fuss {
  position: relative; z-index: 1;
  max-width: 1280px; margin-inline: auto; padding: 44px 56px 28px;
}
.fuss__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.fuss__marke { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.fuss__logo { display: block; height: 32px; width: auto; }
.fuss__claim {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .08em; color: #9C9AAE;
}
/* 340 statt 300: Der Satz ist seit dem 20.08.2026 länger (drei Teile
   statt zwei). Bei 300px stand er neun Zeilen hoch neben vier flachen
   Spalten. Breiter geht nicht — die Spalte selbst ist rund 380px. */
.fuss__satz { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: #8B89A0; max-width: 340px; text-wrap: pretty; }

.fuss__spalte { display: flex; flex-direction: column; gap: 10px; }
.fuss__spalte-titel { font-size: 16px; font-weight: 600; color: #201F31; }
.fuss__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* 44px, nicht 28. Gemessen am 20.08.2026: Achtzehn Links im Fussbereich
   waren 275x28 — zu flach fuer einen Daumen. Hier stehen Impressum,
   Datenschutz und die Kuendigungsschaltflaeche; das sind genau die
   Links, die jemand im Zweifel trifft oder eben nicht. */
.fuss__link {
  display: flex; align-items: center;
  min-height: 44px; padding-block: 4px;
  font-size: 16px; line-height: 1.45; color: #5A5870; text-decoration: none;
}
a.fuss__link:hover { color: #5B5FC7; text-decoration: underline; }
.fuss__link--tot { color: #A9A7B8; cursor: default; }

.fuss__schluss {
  margin: 40px 0 0; padding-block-start: 24px; border-block-start: 1px solid #EFEEF4;
  font-size: 15px; line-height: 1.5; color: #9C9AAE;
}

@media (max-width: 1000px) {
  .fuss__raster { grid-template-columns: 1fr 1fr; gap: 32px; }
  .fuss__marke { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .fuss { padding: 28px 20px 32px; }
  .fuss__raster { grid-template-columns: 1fr; gap: 28px; }
  /* Tippfläche 48 — im Fussbereich sitzen die Rechtslinks, die jemand
     im Zweifel mit dem Daumen trifft. */
  .fuss__link { min-height: 48px; display: flex; align-items: center; font-size: 16px; }
  .fuss__satz { max-width: none; }
}

/* ── Untere Leiste ── */
.fuss__leiste {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px;
  margin-block-start: 36px; padding-block-start: 28px; border-block-start: 1px solid #EFEEF4;
}
.fuss__leisten-titel { font-size: 16px; font-weight: 600; color: #201F31; }
.fuss__leisten-text { display: block; margin-block-start: 4px; font-size: 15px; line-height: 1.55; color: #5A5870; max-width: 46ch; }
.fuss__newsletter { display: flex; flex-direction: column; gap: 6px; }
.fuss__nl-form { display: flex; gap: 10px; margin-block-start: 8px; flex-wrap: wrap; }
.fuss__nl-feld {
  flex: 1 1 220px; min-height: 48px; padding: 12px 18px;
  border: 1px solid #DEDCE8; border-radius: 999px; background: #FFFFFF;
  font-size: 16px; color: #201F31;
}
.fuss__nl-feld:focus-visible { outline: 2px solid #5B5FC7; outline-offset: 2px; }
.fuss__nl-knopf {
  min-height: 48px; padding: 12px 26px; border: 0; border-radius: 999px;
  background: #201F31; color: #FFFFFF; font-size: 16px; font-weight: 500; cursor: pointer;
}
.fuss__nl-knopf:hover { background: #3B3A50; }
.fuss__nl-hinweis { font-size: 14px; line-height: 1.5; color: #9C9AAE; max-width: 52ch; }
.fuss__nl-danke { flex: 1 1 100%; font-size: 15px; color: #3F6A5B; }
.fuss__nl-fehler { flex: 1 1 100%; font-size: 15px; color: #8A5457; }

.fuss__zahlung { display: flex; flex-direction: column; gap: 10px; }
.fuss__zahlarten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fuss__zahlarten svg { display: block; block-size: 24px; inline-size: auto; }

/* Widerruf, Kuendigung, Cookies und B2B als benannte Schaltflaechen —
   nicht als Zeile im Fliesstext. */
.fuss__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 24px; }
.fuss__knopf {
  display: inline-flex; align-items: center; min-height: 44px; padding: 11px 20px;
  border: 1px solid #DEDCE8; border-radius: 999px; background: #FFFFFF;
  font-family: inherit; font-size: 15px; font-weight: 500; color: #201F31;
  text-decoration: none; cursor: pointer;
}
a.fuss__knopf:hover, button.fuss__knopf:hover { border-color: #5B5FC7; color: #5B5FC7; }
.fuss__knopf--tot { color: #A9A7B8; background: #F7F6FB; cursor: default; }

.fuss__unten {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; margin-block-start: 24px; padding-block-start: 20px;
  border-block-start: 1px solid #EFEEF4;
}
.fuss__anschrift { display: flex; flex-direction: column; gap: 6px; }
.fuss__adresse { margin: 0; font-size: 14px; line-height: 1.6; color: #8B89A0; }
.fuss__copy { margin: 0; font-size: 14px; color: #9C9AAE; }
.fuss__rechts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fuss__netze { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.fuss__netz {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px;
  border: 1px solid #DEDCE8; border-radius: 999px;
  font-size: 15px; color: #201F31; text-decoration: none;
}
.fuss__netz:hover { border-color: #5B5FC7; color: #5B5FC7; }
.fuss__sprachwahl {
  min-height: 44px; padding: 10px 16px; border: 1px solid #DEDCE8; border-radius: 999px;
  background: #FFFFFF; font-family: inherit; font-size: 15px; color: #201F31;
}

@media (max-width: 900px) {
  .fuss__leiste { grid-template-columns: 1fr; gap: 28px; }
  .fuss__unten { flex-direction: column; align-items: flex-start; }
}

/* Das Theme kennt .visually-hidden nicht — die Beschriftungen standen
   sichtbar ueber den Feldern. Eigene Fassung, gemessen am 22.08.2026. */
.fuss .visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* END_SECTION:startseite-fuss */