/** Shopify CDN: Minification failed

Line 410:2 Unexpected "@media"
Line 655:2 Unexpected "@media"
Line 684:2 Unexpected "@keyframes"
Line 697:2 Unexpected "@media"

**/
/* Trendbox Willkommensbox - erzeugt aus dem Prototyp, NICHT von Hand aendern.
   Quelle: dashboard/public/lp-prototypes/tb-willkommensbox.html
   Neu bauen: python dashboard/scripts/build_willkommensbox_theme.py

   Alles haengt unter .wb-seite. Ohne das Scoping wuerden Regeln wie h2{} oder
   .cta{} auf jeder Seite des Shops mitreden, auf der das Asset geladen ist. */

/* Grundlage. Im Prototyp stand das auf * und body - beides gehoert im Theme
   dem Theme, deshalb hier ausdruecklich und nur innerhalb der Seite:
   - der Reset (box-sizing/margin/padding) ist keine Kosmetik, ohne ihn
     rechnet das ganze Raster falsch
   - Schrift und Textfarbe kamen aus body{} */
.wb-seite *{box-sizing:border-box;margin:0;padding:0}
.wb-seite{
  font-family:var(--body); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

/* Inter, selbst ausgeliefert - siehe Kommentar im Bau-Skript. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('wb-inter-400-5.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('wb-inter-400-6.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('wb-inter-500-12.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('wb-inter-500-13.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('wb-inter-600-19.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('wb-inter-600-20.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('wb-inter-700-26.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('wb-inter-700-27.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('wb-inter-800-33.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('wb-inter-800-34.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

.wb-seite{--lila:#7b59cf; --lila-700:#5f41ab; --lila-100:#f1ecfb; --lila-200:#e3d9f6;
    --ink:#373737; --muted:#6f6a75; --faint:#9b96a3;
    --paper:#ffffff; --paper-2:#faf9fc; --line:#e9e5f0;
    --ok:#3f8f6e; --ok-100:#e7f4ee;
    --radius:16px; --radius-sm:11px;
    --shadow:0 18px 48px -24px rgba(123,89,207,.5);
    --body:'Inter',-apple-system,'Segoe UI',sans-serif;}
.wb-seite /* phone frame. Frueher stand hier ein transform:translateZ(0), .wb-seite damit das Geraet
     containing block fuer das position:fixed-Trust-Siegel wird. Das Siegel ist am
     12.08. statisch in den Hero gewandert (siehe .trustbadge), .wb-seite es gibt keine
     fixed-Kinder mehr — der Hack ist mit raus, .wb-seite sonst erklaert ein Kommentar hier
     eine Mechanik, .wb-seite die es nicht mehr gibt. */
  .device{position:relative; z-index:1;
    width:100%; max-width:430px; height:min(900px,94dvh);
    background:var(--paper); border-radius:42px;
    box-shadow:var(--shadow), 0 0 0 10px #211d29, 0 0 0 12px #383146;
    overflow:hidden; display:flex; flex-direction:column;}
.wb-seite .brand .mark{width:13px;height:13px;background:var(--lila)}
.wb-seite .brand b{font-weight:800;font-size:16px;letter-spacing:2.5px;text-transform:uppercase}
.wb-seite .cart i{position:absolute;top:-7px;right:-10px;background:var(--lila);color:#fff;font-size:10px;font-weight:700;font-style:normal;min-width:16px;height:16px;border-radius:9px;display:grid;place-items:center;padding:0 3px}
.wb-seite .seite[hidden]{display:none}
.wb-seite .sticky-cta{position:sticky;bottom:0;z-index:20;
    padding:10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-top:1px solid var(--line);
    transform:translateY(115%);
    transition:transform .25s cubic-bezier(.2,.7,.3,1);}
.wb-seite /* Erst einfahren, .wb-seite wenn der Hero-Knopf aus dem Blick ist - sonst stehen zwei
     identische Knoepfe uebereinander und die Leiste wirkt wie ein Fehler. */
  .sticky-cta.ist-sichtbar{transform:none}
.wb-seite .sticky-cta .cta{margin-top:0}
.wb-seite /* 19.08. (Lene): beim Scrollen durch die Beweis-Bloecke stand nirgends mehr, .wb-seite was das Ganze kostet - der Preis war im Hero und dann erst wieder im
     Angebots-Block. Die Leiste ist ab dem Hero ohnehin dauerhaft im Bild, .wb-seite also
     traegt sie ihn mit. Eine Zeile, .wb-seite klein: sie darf den Knopf nicht verdraengen. */
  .sticky-preis{display:block;text-align:center;font-size:12px;color:var(--muted);margin-bottom:7px;line-height:1.3}
.wb-seite .sticky-preis b{font-weight:800;color:var(--lila-700)}
@media (prefers-reduced-motion:reduce){
  .wb-seite .sticky-cta{transition:none}
}
.wb-seite /* Kopf der Auswahl-Seite: nur ein Rueckweg, .wb-seite bewusst ohne Navigation. Wer hier
     ist, .wb-seite hat sich entschieden anzufangen - jeder weitere Link waere ein Ausgang. */
  .flow-kopf{padding:14px 20px 0}
.wb-seite .flow-zurueck{appearance:none;border:0;background:none;padding:6px 0;cursor:pointer;
    font-family:var(--body);font-size:13px;font-weight:700;color:var(--muted);}
.wb-seite .flow-zurueck:focus-visible{outline:2.5px solid var(--lila);outline-offset:2px;border-radius:6px}
.wb-seite /* Fakten unter den beiden Kacheln im ersten Schritt. Bis 19.08. stand der Preis
     als erster Haken hier drin - das war seine einzige Nennung im Schritt, .wb-seite klein
     und zwischen zwei Konditionen. Er hat jetzt den eigenen Block darueber
     (.offer-summe), .wb-seite hier stehen nur noch die Konditionen. */
  .flow-fakten{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:16px}
.wb-seite .flow-fakten li{position:relative;font-size:12.5px;font-weight:700;color:var(--muted);padding-left:15px}
.wb-seite .flow-fakten li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
.wb-seite /* announcement bar — traegt das Angebot, .wb-seite nicht Versandinfos. Dezenter
     Verlauf statt Flaeche, .wb-seite damit sie sich vom weissen Header absetzt, .wb-seite ohne wie ein Signal-/Rabatt-Banner zu wirken. */
  .annbar{background:linear-gradient(100deg,var(--lila-100) 0%,var(--lila-200) 100%);color:var(--lila-700);
    font-size:13.5px;font-weight:700;padding:9px 14px;letter-spacing:.2px;
    display:flex;align-items:center;justify-content:center;gap:10px;}
.wb-seite .annbar-text{text-align:center}
.wb-seite .annbar-text span{font-weight:800}
.wb-seite /* Das Siegel darf den Text nicht verdraengen: auf schmalen Handys faellt es weg, .wb-seite der Angebotstext ist die wichtigere der beiden Botschaften. */
  .annbar-ts{flex:0 0 auto;display:flex;align-items:center;gap:4px}
.wb-seite .annbar-ts-sterne{position:relative;display:inline-block;white-space:nowrap;color:rgba(95,65,171,.28);font-size:11px;letter-spacing:.5px;line-height:1}
.wb-seite .annbar-ts-fill{position:absolute;left:0;top:0;bottom:0;overflow:hidden;color:#e8a33d}
.wb-seite .annbar-ts b{font-size:12px;font-weight:800;line-height:1}
@media (max-width:379px){
  .wb-seite .annbar-ts{display:none}
}
.wb-seite /* generic section rhythm (shared with hero/offer)
     13.08. (Robin): Sektionen liefen ineinander - gleicher weisser Grund, .wb-seite 26px
     Abstand, .wb-seite und beim Scrollen war nicht zu erkennen, .wb-seite wo ein Block endet. Zwei
     Aenderungen, .wb-seite bewusst beide: mehr Luft UND ein getoenter Grund fuer jeden
     zweiten Block. Nur Abstand haette die Seite nur laenger gemacht, .wb-seite nur Toenung
     haette die Blockgrenzen an eine Farbe gehaengt, .wb-seite die auf schlechten Displays
     verschwindet. Die Toenung ist randlos (negative Margin), .wb-seite sonst schwebten
     20px weisse Streifen an den Seiten. */
  section{padding:34px 20px 12px}
.wb-seite .sektion-flaeche{background:var(--paper-2);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    margin-top:14px; margin-bottom:14px;}
.wb-seite .eyebrow{font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--lila);margin-bottom:8px}
.wb-seite /* 20px -> 24px (Robin 13.08.): die Ueberschriften trugen zu wenig Gewicht, .wb-seite um
     beim Scrollen als Wegmarke zu dienen. */
  h2{font-size:24px;font-weight:800;letter-spacing:-.4px;line-height:1.22;text-align:center;margin-bottom:8px}
.wb-seite .offer-eyebrow{font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--lila);text-align:center;margin-bottom:6px}
.wb-seite /* hero — das Bild ist der Untergrund der ganzen Sektion (randlos, .wb-seite volle Breite), .wb-seite der Text liegt darauf. Die untere Bildhaelfte bleibt frei: dort steht im Vorbild
     das Produkt. Der Verlauf in .hero-text::before haelt den Text lesbar, .wb-seite egal wie
     hell oder dunkel das spaetere Foto an dieser Stelle ist - ohne ihn haengt die
     Lesbarkeit der wichtigsten Zeilen der Seite am Zufall des Motivs. */
  .hero{padding:0 0 4px}
.wb-seite h1{font-size:29px;line-height:1.16;font-weight:800;letter-spacing:-.5px}
.wb-seite .hero .sub{font-size:14px;color:var(--muted);line-height:1.55;margin-top:10px}
.wb-seite /* 420 -> 470px (20.08.): Robins Hochkant-Fassung ist 900x1200. Bei 420px Hoehe
     schnitt "cover" 68px weg; 470 zeigt fast die volle Datei und schiebt die Box
     tiefer unter den Text. */
  .hero-canvas{position:relative;min-height:470px}
.wb-seite .hero-bg{position:absolute;inset:0;z-index:0}
.wb-seite /* Platzhalter-Beschriftung nach unten in den freien Bildbereich, .wb-seite sonst liegt sie
     hinter der Headline und ist bei der Abnahme nicht lesbar. */
  /* Handy laeuft seit 20.08. auf Robins eigener Hochkant-Fassung (900x1200 statt
     meines Notzuschnitts aus der 1500x643-Datei). Sie ist fuer diesen Platz
     gebaut: Box im unteren Drittel, .wb-seite ruhige Lilaflaeche oben - genau dort, .wb-seite wo
     Headline und Preis liegen. Der Zuschnitt darf deshalb mittig bleiben.
     Desktop bleibt bei der Querformat-Datei, .wb-seite siehe <source media="(min-width:900px)">. */
  .hero-bg picture{display:contents}
.wb-seite .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.wb-seite .hero-text{position:relative;z-index:1;padding:24px 20px 24px}
.wb-seite /* Der Verlauf endete bei 60% und war auf der letzten Zeile ("8+ Mystery-Produkte")
     schon fast durchsichtig. Mit dem alten Querformat-Ausschnitt lag dort nur leere
     Lilaflaeche, .wb-seite mit Robins Hochkant-Fassung liegt dort der Deckel der Box - die
     Zeile stand am 20.08. auf dem TRENDBOX-Schriftzug. Deckkraft bis 78% halten, .wb-seite erst danach ausblenden: der Text bleibt auf hellem Grund, .wb-seite und die Box taucht
     aus dem Weiss auf, .wb-seite statt hinter einem Schleier zu liegen. */
  .hero-text::before{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.93) 78%,rgba(255,255,255,0) 100%);}
.wb-seite .hero-aktion{padding:18px 20px 0}
.wb-seite /* 24.08. (Stephan: "Header etwas unaufgeraeumt, .wb-seite verschiedene Punkte in
     unterschiedlichen Formaten"). Der Hero trug vier Fakten in vier Formaten:
     Wert-Pille, .wb-seite Emoji-Zeile auf dem Bild, .wb-seite Kleingedrucktes unter dem Button und
     das Trust-Siegel. Jetzt EINE Kachelform - zwei Fakten ueber dem Bild (was du
     bekommst), .wb-seite zwei unter dem Button (was es kostet). Nebeneffekt: 33, .wb-seite 95 EUR stand
     im Hero zweimal (Pille + Kleingedrucktes), .wb-seite jetzt einmal.
     Die Farbregel vom 19.08. bleibt: lila ist NUR der Betrag, .wb-seite den du zahlst. In
     der Vorlage stand auch der Warenwert lila - das ist genau die Verwechslung, .wb-seite die Lene gemeldet hat ("die preise sehen aus als ob ich die so bezahlen
     muesste"). Deshalb hier: Warenwert und Produktzahl schwarz, .wb-seite nur der Preis lila. */
  .fakten-duo{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:12px 6px;display:grid;grid-template-columns:1fr 1fr;position:relative;}
.wb-seite .fakten-duo::after{content:"";position:absolute;top:12px;bottom:12px;left:50%;width:1px;background:var(--line)}
.wb-seite .fakt{display:flex;align-items:center;gap:9px;padding:0 8px;min-width:0}
.wb-seite .fakt-ico{flex:0 0 auto;width:36px;height:36px;border-radius:50%;
    background:var(--lila-100);color:var(--lila);
    display:flex;align-items:center;justify-content:center;}
.wb-seite .fakt-ico svg{width:19px;height:19px;display:block}
.wb-seite .fakt-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.wb-seite .fakt-text b{font-size:14.5px;font-weight:800;color:var(--ink);line-height:1.2;letter-spacing:-.3px}
.wb-seite .fakt-text small{font-size:12px;color:var(--muted);line-height:1.3}
.wb-seite /* Einzige lila Zahl im Hero neben dem Button: der Monatspreis. */
  .fakt-preis .fakt-text b{color:var(--lila-700);font-size:16px}
.wb-seite .cta{display:flex;align-items:center;justify-content:center;
    width:100%;border:0;border-radius:14px;background:var(--lila);color:#fff;
    font-family:var(--body);font-size:16px;font-weight:700;padding:16px;cursor:pointer;
    box-shadow:0 14px 30px -12px rgba(123,89,207,.75);
    text-decoration:none;
    transition:transform .15s;}
.wb-seite .cta:active{transform:scale(.98)}
.wb-seite .ctasub{text-align:center;font-size:12.5px;font-weight:600;color:var(--lila-700);margin-top:9px;line-height:1.4}
.wb-seite .kleingedruckt{text-align:center;font-size:12px;color:var(--muted);margin-top:7px;line-height:1.5}
.wb-seite /* .ctasub entfiel am 13.08. mit dem Hero-Umbau: die Zeile "Loslegen & dein Geschenk
     wählen" stand direkt unter dem Button "Geschenk aussuchen" und hat ihn nur
     wiederholt. Das Vorbild hat an der Stelle nichts. */

  /* placeholder frame — bewusst grell fuer die Abnahme, .wb-seite kommt nie live raus */
  [data-placeholder="true"]{background:repeating-linear-gradient(135deg,#fff3b0,#fff3b0 10px,#ffe58a 10px,#ffe58a 20px);
    border:2px dashed #b8860b;
    color:#6b5200;
    display:flex;align-items:center;justify-content:center;text-align:center;
    font-size:12.5px;font-weight:700;line-height:1.4;padding:14px;}
.wb-seite /* Bewertungs-Siegel — stand bis 12.08. als position:fixed am linken Rand des
     Geraets. Das Vorbild kann sich das leisten, .wb-seite weil auf 2560px links vom
     Inhaltsblock leerer Rand liegt; im 430px-Geraet gibt es keinen, .wb-seite das Siegel lag
     ueber der Wert-Zeile „bis zu 146, .wb-seite 45 €" im Angebots-Block. Zudem war es unter
     640px ausgeblendet — auf echten Handys waere es also nie erschienen und hat nur
     das Mockup dekoriert. Jetzt statisch im Hero, .wb-seite direkt an der Kaufentscheidung. */
  .trustbadge-wrap{display:flex;justify-content:center;margin-top:12px}
.wb-seite .trustbadge{display:inline-flex;align-items:center;gap:9px;
    background:var(--paper);border:1.5px solid var(--line);border-radius:999px;
    padding:7px 14px 7px 12px;
    box-shadow:0 12px 26px -20px rgba(33,29,41,.55);}
.wb-seite /* Teilgefuellte Sternreihe: graue Reihe, .wb-seite darueber dieselbe Reihe in Gold auf
     die Breite der Note beschnitten. Der Halbstern-Codepoint U+2BE8 waere kuerzer, .wb-seite fehlt aber in vielen Android-/iOS-Systemfonts - dort stuende ein Tofu-Kaestchen
     im Trust-Siegel. Hier braucht es nur ★, .wb-seite das hat jede Font. */
  .trustbadge .stars{position:relative;display:inline-block;white-space:nowrap;color:#ddd7e6;font-size:13px;letter-spacing:1px;line-height:1}
.wb-seite .trustbadge .stars-fill{position:absolute;left:0;top:0;bottom:0;overflow:hidden;color:#e8a33d}
.wb-seite .trustbadge b{font-size:13px;font-weight:800;color:var(--ink);line-height:1}
.wb-seite .trustbadge small{font-size:12px;color:var(--muted);line-height:1}
.wb-seite /* offer block */
  /* 17.08. (Alex): mobil untereinander statt nebeneinander. Zwei Spalten liessen je
     Karte ~185px auf 390px Breite - "Deine Mystery-Willkommensbox" brach dort auf
     drei Zeilen, .wb-seite die Meta-Zeile auf vier, .wb-seite und die beiden Karten waren trotz gleicher
     Rolle unterschiedlich hoch. Das Vorbild stapelt auf dem Handy ebenfalls.
     Ab 900px stehen sie wieder nebeneinander, .wb-seite siehe Desktop-Block. */
  .offer-karten{display:grid;grid-template-columns:1fr;gap:10px;align-items:center;margin-top:14px}
.wb-seite .karte{border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:14px 10px;background:var(--paper);text-align:center}
.wb-seite .karte-badge{display:inline-block;background:var(--lila-100);color:var(--lila-700);font-size:12px;font-weight:700;padding:4px 9px;border-radius:99px;margin-bottom:8px}
.wb-seite .karte-tag{display:block;font-size:13px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:4px 9px;border-radius:99px;margin-bottom:9px}
.wb-seite .karte-gewaehlt{border-color:var(--lila-200)}
.wb-seite .karte-gewaehlt .karte-tag{display:inline-block;background:var(--lila);color:#fff}
.wb-seite .karte-mystery{background:var(--lila-100);border-style:dashed;border-color:var(--lila-200)}
.wb-seite .karte-mystery .karte-tag{display:inline-block;background:#3a3245;color:#fff}
.wb-seite .karte h3{font-size:15px;font-weight:800;line-height:1.3;margin-bottom:6px}
.wb-seite .karte-meta{font-size:12.5px;color:var(--muted);line-height:1.4;margin-bottom:10px}
.wb-seite /* 19.08. (Lene): "die preise sehen aktuell so aus als ob ich die so bezahlen
     muesste". Ursache war die Farbe, .wb-seite nicht die Zahl: der Warenwert stand in
     --lila-700 - exakt derselben Auszeichnung wie der Monatspreis in
     .summe-preis. Ab jetzt gilt auf der ganzen Seite EINE Regel:
     Lila = was du zahlst. Neutral/--ink = was du bekommst.
     Deshalb hier --ink, .wb-seite und dieselbe Aenderung bei .set-wert b. */
  .karte-wert{font-size:12px;color:var(--muted);line-height:1.3}
.wb-seite .karte-wert b{display:block;font-size:19px;font-weight:800;color:var(--ink);margin-top:3px}
.wb-seite /* Plus als zwei Striche statt als Textzeichen (Alex' Screenshot 17.08.: sass nicht
     mittig). Flex zentriert die Zeilenbox, .wb-seite nicht die Glyphe - Inters "+" sitzt darin
     ueber der Mitte, .wb-seite im 34px-Kreis gut sichtbar. Zwei Pseudo-Elemente sind exakt
     zentriert, .wb-seite egal welche Schrift laedt. Gleiche Ursache und gleicher Fix wie
     bei .faq-plus. */
  .plus{position:relative;
    width:34px;height:34px;border-radius:50%;background:#3a3245;color:#fff;
    justify-self:center;flex-shrink:0;}
.wb-seite .plus::before, .wb-seite .plus::after{content:"";position:absolute;top:50%;left:50%;
    width:13px;height:2.5px;border-radius:2px;background:currentColor;
    transform:translate(-50%,-50%);}
.wb-seite .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.wb-seite .offer-summe{margin-top:16px;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-sm);
    padding:15px 8px;display:grid;grid-template-columns:1fr 1fr;position:relative;}
.wb-seite .offer-summe::after{content:"";position:absolute;top:10px;bottom:10px;left:50%;width:1px;background:var(--line)}
.wb-seite .summe-preis, .wb-seite .summe-wert{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0 6px;min-width:0}
.wb-seite .summe-label{display:block;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.wb-seite .summe-wert b{font-size:19px;font-weight:800;color:var(--ink)}
.wb-seite .summe-preis strong{font-size:24px;font-weight:800;color:var(--lila-700)}
.wb-seite /* 19.08.: "33, .wb-seite 95 €" allein liest sich als Einmalbetrag. Der Takt gehoert an die
     Zahl, .wb-seite nicht nur ins Kleingedruckte darunter - er ist der halbe Preis. */
  .summe-takt{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-top:-1px}
.wb-seite /* 24.08. (Stephan): Warenwert und Preis getauscht. In der Zusammenfassung steht
     ueber der Karte die Liste "Enthalten / Warenwert" mit rechtsbuendigen Betraegen -
     die Summe stand aber links und damit NICHT unter ihrer eigenen Spalte. Jetzt
     schliesst der Gesamt-Warenwert die Spalte ab wie die Endsumme einer Rechnung.
     Gilt an allen drei Stellen, .wb-seite damit die Karte nicht einmal so und einmal
     andersherum steht. */

  .offer .cta{margin-top:18px}
.wb-seite .cta:focus-visible{outline:2.5px solid #2f2542;outline-offset:3px}
.wb-seite .cta:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.wb-seite /* inline gelb-markierter Platzhalter-Text (Zahlen, .wb-seite Namen, .wb-seite Werte) - Element+Klasse+Attribut
     schlaegt deterministisch jede umgebende Komponentenklasse, .wb-seite unabhaengig von Regel-Reihenfolge */
  span.pl[data-placeholder="true"]{display:inline-block; background:#fff3b0; color:#6b5200;
    border:1.5px dashed #b8860b; border-radius:5px; padding:0 6px;}
.wb-seite /* 1 · ugc-strip */
  .ugc-title{font-style:italic;font-weight:600;font-size:14.5px;color:var(--muted);text-align:center;margin-bottom:14px}
.wb-seite /* strip-scroll + community-strip teilen sich denselben horizontalen-Scroll-Mechanismus, .wb-seite nur der margin-Wert unterscheidet sich (siehe .community-strip weiter unten bei 8 · ugc-grid) */
  .strip-scroll, .wb-seite .community-strip{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.wb-seite .strip-scroll::-webkit-scrollbar, .wb-seite .community-strip::-webkit-scrollbar{display:none}
.wb-seite .strip-scroll{margin:0 -20px}
.wb-seite .strip-track{display:flex;gap:10px;padding:0 0 0 20px}
.wb-seite /* 108 -> 150px (17.08.): bei 108px standen dreieinhalb Kacheln nebeneinander und
     jedes Foto war zu klein, .wb-seite um zu erkennen, .wb-seite was ausgepackt wird - der Streifen soll
     Beweis sein, .wb-seite kein Muster. Jetzt gut zweieinhalb je Bildschirmbreite, .wb-seite was die
     angeschnittene dritte Kachel als Scroll-Hinweis erhaelt. */
  .strip-item{flex:0 0 auto;width:150px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;position:relative;background:var(--lila-100)}
.wb-seite .strip-item img{width:100%;height:100%;object-fit:cover;display:block}
.wb-seite .strip-item span{position:absolute;left:6px;bottom:6px;background:rgba(33,29,41,.6);color:#fff;font-size:12px;font-weight:600;padding:2px 8px;border-radius:99px}
.wb-seite .strip-indicator{height:3px;border-radius:99px;background:var(--lila-100);margin-top:12px;overflow:hidden}
.wb-seite .strip-indicator-fill{height:100%;width:30%;background:var(--lila);border-radius:99px}
.wb-seite /* 2 · marken */
  /* Logos deutlich groesser (Robin 13.08.): vorher 3 Kacheln je Reihe mit 26px
     Logohoehe - auf 390px Breite blieben davon ~110px Kachel, .wb-seite in der ein
     Wortmarken-Logo unlesbar klein stand. Jetzt 2 je Reihe und 40px Hoehe, .wb-seite das
     ist knapp die doppelte Flaeche je Logo. Marken sind geliehener Beweis; einer, .wb-seite den man entziffern muss, .wb-seite beweist nichts. */
  /* 17.08. noch einmal groesser (Alex: "kann man nicht erkennen"): 40 -> 56px Logo, .wb-seite Kachel 72 -> 96px. Robins 26->40 war ein Schritt in die richtige Richtung, .wb-seite aber
     die Wortmarken (Rosental, .wb-seite Bears with Benefits, .wb-seite waterdrop) brauchen mehr Hoehe, .wb-seite bevor der Schriftzug lesbar wird. Zwei je Reihe bleibt - drei waeren wieder zu eng. */
  /* 20.08. (Robin: "Marken Logos sollen auch noch mal deutlich groesser sein") -
     dritte Runde, .wb-seite und diesmal war die Zahl nie das Problem. Die Logo-Dateien im
     Shop liegen auf QUADRATISCHEM Rahmen (z.B. waterdrop 193x193), .wb-seite der Schriftzug
     darin ist nur 41px hoch - 79% der Datei ist leerer Alphakanal. "height:56px"
     galt also dem leeren Quadrat: sichtbar blieben ~12-22px Schrift. Deshalb hat
     auch 26->40->56 kaum etwas gebracht. Die Dateien liegen jetzt auf den
     Alphakanal beschnitten unter img/wb/marke-*.png; erst dadurch meint die
     Groessenangabe das Logo selbst. Gemessen statt geraten: breitenbezogen
     (width:100%), .wb-seite damit alle sechs gleich breit stehen und nicht jedes Logo
     abhaengig von seinem Seitenverhaeltnis anders gross wirkt. */
  /* 24.08. (Stephan): ohne Ueberschrift liest sich der Logo-Block als
     Inhaltsversprechen - "warum war Tony's nicht in MEINER Box?". Eine Zeile
     Kontext loest das fuer alle sechs Logos; ein Tausch einzelner Marken
     verschiebt die Erwartung nur auf die naechste Marke (und muesste nach Lenes
     Hinweis jeden Monat neu gemacht werden). */
  .marken-titel{text-align:center;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.2px;line-height:1.35;margin-bottom:12px}
.wb-seite .marken-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.wb-seite .marken-karte{flex:0 0 calc(50% - 5px);min-height:96px;background:#fff;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;padding:14px 12px}
.wb-seite /* max-width in Pixeln, .wb-seite nicht nur 100%: die Shop-Assets sind nur ~200px breit.
     Auf Desktop ist eine Kachel 353px - ohne Deckel wuerde jedes Logo um das
     1, .wb-seite 6-fache hochgerechnet und stuende unscharf da. 260px sind ~1, .wb-seite 2x, .wb-seite das haelt
     die Kante. Scharfer werden sie erst mit groesseren Dateien, .wb-seite nicht mit CSS. */
  .marken-karte img{width:100%;max-width:260px;max-height:62px;object-fit:contain}
.wb-seite /* 3 · reviews */
  .review-grid{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.wb-seite .review-karte{border:1.5px solid var(--line);border-radius:var(--radius);padding:14px;background:#fff}
.wb-seite .review-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.wb-seite .review-wer{display:flex;align-items:center;gap:9px;min-width:0}
.wb-seite .review-avatar{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--lila-100);color:var(--lila-700);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
.wb-seite .review-avatar.pl{background:#e7e5ea;color:#8b8794}
.wb-seite .review-name{font-size:13.5px;font-weight:700;line-height:1.3;min-width:0}
.wb-seite .review-name small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:1px}
.wb-seite .review-datum{font-size:12px;color:var(--faint);white-space:nowrap;flex-shrink:0;margin-top:2px}
.wb-seite .review-text{font-size:13.5px;color:var(--ink);line-height:1.55;margin-top:10px}
.wb-seite .review-fuss{display:flex;align-items:center;gap:9px;margin-top:11px}
.wb-seite .review-sterne{color:#e8a33d;font-size:13px;letter-spacing:1px}
.wb-seite .review-verifiziert{font-size:12px;font-weight:700;color:var(--ok)}
.wb-seite .btn-mehr-bewertungen{display:block;width:100%;margin-top:14px;background:var(--paper-2);border:1.5px solid var(--line);border-radius:14px;padding:13px;font-family:var(--body);font-size:14px;font-weight:700;color:var(--ink);cursor:pointer}
.wb-seite .btn-mehr-bewertungen:focus-visible{outline:2.5px solid var(--lila);outline-offset:2px}
.wb-seite .reviews-summary{text-align:center;font-size:12.5px;color:var(--muted);margin-top:10px}
.wb-seite /* 4 · zahlen */
  .zahlen-tabelle{margin-top:8px;border-top:1px solid var(--line)}
.wb-seite /* Zahl-Spalte fuer ALLE Zeilen gleich breit (Lene 13.08.): vorher war jede Zeile
     ein eigenes Grid mit "auto 1fr" - die Zahl-Spalte hat sich also je Zeile neu
     bemessen ("600.000+" breit, .wb-seite "4, .wb-seite 5/5" schmal) und der Satz daneben sprang von
     Zeile zu Zeile nach links und rechts. Fester Wert als Grundlage, .wb-seite subgrid
     (falls unterstuetzt) misst die Spalte an der breitesten Zahl aus, .wb-seite damit eine
     neue Zahl die Ausrichtung nicht sprengt. */
  .zahlen-zeile{display:grid;grid-template-columns:106px 1fr;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
@supports (grid-template-columns: subgrid){
  .wb-seite .zahlen-tabelle{display:grid;grid-template-columns:auto 1fr}
  .wb-seite .zahlen-zeile{grid-column:1/-1;grid-template-columns:subgrid}
}
.wb-seite .zahlen-zahl{font-size:23px;font-weight:800;color:var(--lila-700);white-space:nowrap}
.wb-seite .zahlen-satz{font-size:12.5px;color:var(--muted);line-height:1.45}
.wb-seite .zahlen-collage{position:relative;height:230px;margin-top:14px;margin-bottom:6px}
.wb-seite .collage-foto{position:absolute;border-radius:12px;overflow:hidden;box-shadow:0 10px 22px -12px rgba(33,29,41,.35)}
.wb-seite .collage-foto img{width:100%;height:100%;object-fit:cover;display:block}
.wb-seite .collage-foto.c1{width:34%;aspect-ratio:1;left:0;top:6px;transform:rotate(-4deg)}
.wb-seite .collage-foto.c2{width:30%;aspect-ratio:1;right:2%;top:0;transform:rotate(3deg)}
.wb-seite .collage-foto.c3{width:32%;aspect-ratio:1;left:4%;bottom:4px;transform:rotate(3deg)}
.wb-seite .collage-foto.c4{width:28%;aspect-ratio:1;right:6%;bottom:0;transform:rotate(-3deg)}
.wb-seite /* Rahmen und Radius sind raus: der Platzhalter musste ein Handy ZEICHNEN, .wb-seite Robins Mockup bringt sein eigenes Gehaeuse mit - beides zusammen ergaebe
     einen doppelten Rand. Hoehe statt Breite gesetzt, .wb-seite sonst sprengt das echte
     Seitenverhaeltnis (0, .wb-seite 49 statt 0, .wb-seite 61) die 230px hohe Collage. */
  .collage-phone{position:absolute;height:210px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-2deg);z-index:2}
.wb-seite .collage-phone img{height:100%;width:auto;display:block;filter:drop-shadow(0 18px 30px rgba(33,29,41,.45))}
.wb-seite /* 5 · ablauf */
  .ablauf-karten{display:flex;flex-direction:column;gap:18px;margin-top:10px}
.wb-seite .ablauf-karte{display:flex;gap:13px;align-items:flex-start}
.wb-seite /* 60 -> 76px: als gelbes Kaestchen war die Groesse egal, .wb-seite mit echtem Foto
     entscheidet sie, .wb-seite ob man den Inhalt erkennt. 76px bleibt neben dem Text
     auf 360px Geraetebreite noch bequem in der Zeile. */
  .ablauf-bild{flex:0 0 auto;width:76px;height:76px;border-radius:50%;overflow:hidden}
.wb-seite .ablauf-bild img{width:100%;height:100%;object-fit:cover;display:block}
.wb-seite .ablauf-text h4{font-size:14.5px;font-weight:800;margin-bottom:4px}
.wb-seite .ablauf-text p{font-size:13px;color:var(--muted);line-height:1.5}
.wb-seite .ablauf-text p b{color:var(--ink);font-weight:800}
.wb-seite /* was-drin */
  /* 20.08. (Robin: "Kann das Trendbox Bild noch groesser skaliert werden") -
     146 -> 210px. Die Hoehe des Rahmens muss mitwachsen, .wb-seite sonst kaeme die Box den
     vier Pillen ins Gehege: die haengen an top/bottom:2% des Rahmens, .wb-seite nicht an der
     Box. 210px breit sind 170px hoch, .wb-seite mittig in 280px bleiben oben wie unten ~55px
     frei - genug fuer eine 29px hohe Pille plus Abstand. */
  .wd-illustration{position:relative;height:280px;margin-top:12px}
.wb-seite /* Freisteller mit eigenem Schlagschatten - kein Radius, .wb-seite kein Hintergrund.
     Breite statt fixer Hoehe, .wb-seite damit das Bild sein Verhaeltnis behaelt. */
  .wd-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:210px;z-index:2}
.wb-seite .wd-box img{width:100%;height:auto;display:block}
.wb-seite .wd-arrows{position:absolute;inset:0;width:100%;height:100%}
.wb-seite .wd-arrows path{fill:none;stroke:var(--lila-200);stroke-width:2}
.wb-seite .wd-label{position:absolute;background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 11px;font-size:12px;font-weight:700;color:var(--lila-700);box-shadow:0 8px 18px -10px rgba(33,29,41,.3);z-index:2}
.wb-seite .wd-label-tl{left:0;top:2%}
.wb-seite .wd-label-tr{right:0;top:2%}
.wb-seite .wd-label-bl{left:0;bottom:2%}
.wb-seite .wd-label-br{right:0;bottom:2%}
.wb-seite /* Die Zeichnung ist eine feste Komposition: alle drei Kreise, .wb-seite der Strich und das
     Label sitzen auf absoluten Pixel-Positionen, .wb-seite die nur bei ~330px Containerbreite
     zueinander passen (wd-kreis-3 klebt auf left:6px, .wb-seite die anderen auf left:50%).
     Ohne Deckel zieht ein breiterer Container die Kreise auseinander - auf Desktop
     stand der dunkle Kreis allein am linken Rand, .wb-seite meterweit von den anderen weg
     (Alex' Screenshot 17.08.). Eine Zeichnung mit festen Koordinaten braucht eine
     feste Breite; zentriert wird sie ueber die Margins. */
  /* width, .wb-seite NICHT nur max-width: auf Desktop ist .wd-diagramm ein Grid-Item, .wb-seite und
     ein Grid-Item mit margin-inline:auto streckt sich nicht, .wb-seite sondern schrumpft auf
     seine INTRINSISCHE Breite - die ist hier 0, .wb-seite weil alle Kinder absolut
     positioniert sind. Ergebnis war ein 0px breiter, .wb-seite unsichtbarer Block in der
     rechten Spalte. Auf Mobil war davon nichts zu sehen, .wb-seite weil das Diagramm dort im
     normalen Blockfluss steht. */
  .wd-diagramm{position:relative;width:330px;height:262px;margin:28px auto 0}
.wb-seite /* Feste Komposition: auf sehr schmalen Geraeten (360px Screen = 320px nach dem
     20px-Sektionsrand) passt sie nicht mehr. Skalieren statt umbrechen - die
     Koordinaten der Kreise duerfen sich nicht verschieben. Die negative Margin
     holt die Hoehe zurueck, .wb-seite die das Skalieren frei laesst. */
  @media (max-width:369px){.wd-diagramm{transform:scale(.88);transform-origin:top center;margin-bottom:-31px}}
.wb-seite /* 17.08. am Vorbild nachgezogen (Alex: "sieht ganz komisch aus, .wb-seite schau nochmal
     genauer die Vorlage an"). Drei Unterschiede waren es:
     1. FARBE. Unsere drei Kreise hatten drei verschiedene Grundfarben, .wb-seite einer davon
        fast schwarz (#3a3245) - der sass im Bild wie ein Fremdkoerper. Das Vorbild
        haelt alle Kreise in EINER Familie und staffelt nur die Helligkeit.
     2. GROESSE DER ZAHLEN. Bei uns stand "Gesamtwert bis zu 180, .wb-seite 00 €" komplett in
        14px, .wb-seite linksbuendig am oberen Kreisrand. Im Vorbild fuellt die Zahl den Kreis
        fast aus, .wb-seite das Label darueber ist klein. Die Zahl IST die Botschaft.
     3. ANORDNUNG. Die Kreise ueberlappen im Vorbild sichtbar und bilden eine Traube;
        bei uns standen sie fast beziehungslos nebeneinander. Koordinaten unten neu
        vermessen, .wb-seite sodass sich jeder Kreis mit mindestens einem anderen schneidet. */
  .wd-kreis{position:absolute;border-radius:50%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;line-height:1.15;padding:10px;}
.wb-seite /* 11, .wb-seite 5 -> 12px: das ist Copy, .wb-seite keine Dekoration, .wb-seite und lag unter der Lesbarkeits-
     grenze, .wb-seite die sich das Projekt selbst gesetzt hat. Der kaputte Check hat es
     seit dem 13.08. nicht gemeldet. */
  .wd-kreis-label{font-size:12px;font-weight:700;letter-spacing:.2px}
.wb-seite .wd-kreis-zahl{font-weight:800;letter-spacing:-1px;display:block}
.wb-seite .wd-kreis-1{width:190px;height:190px;left:4px;top:0;background:var(--lila-100);color:var(--lila-700)}
.wb-seite .wd-kreis-1 .wd-kreis-zahl{font-size:29px;margin-top:2px}
.wb-seite .wd-kreis-2{width:124px;height:124px;left:176px;top:14px;background:var(--lila-200);color:var(--lila-700);z-index:1}
.wb-seite .wd-kreis-2 .wd-kreis-zahl{font-size:30px;margin-bottom:2px}
.wb-seite .wd-kreis-3{width:108px;height:108px;left:86px;top:150px;background:var(--lila);color:#fff;z-index:2}
.wb-seite .wd-kreis-3 .wd-kreis-zahl{font-size:21px;margin-bottom:2px}
.wb-seite /* Waagerechter Verbinder vom untersten Kreis zum Label - im Vorbild ein
     handgezeichneter Pfeil, .wb-seite hier ein schlichter Strich. */
  .wd-pfeil-strich{position:absolute;left:192px;top:203px;width:16px;height:2px;background:var(--lila-200)}
.wb-seite .wd-geschenk-label{position:absolute;left:208px;top:193px;font-size:12px;font-weight:700;color:var(--ink);background:#fff;padding:4px 10px;border-radius:99px;border:1px solid var(--line)}
.wb-seite .wd-chips{margin-top:24px;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wb-seite .wd-chip{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700}
.wb-seite .wd-chip .ico{font-size:16px;flex:0 0 auto}
.wb-seite /* track-record */
  /* 12 -> 24px (Alex 17.08., .wb-seite "Abstand der Ueberschrift komisch"): ueber der Headline
     standen 56px Sektions-Padding plus 22px vom Block davor, .wb-seite darunter klebten die
     Karten mit 12px. Die Ueberschrift gehoerte optisch zur falschen Seite. */
  .tr-carousel{position:relative;margin-top:24px}
.wb-seite .tr-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
.wb-seite .tr-track::-webkit-scrollbar{display:none}
.wb-seite .tr-card{flex:0 0 74%;scroll-snap-align:start}
.wb-seite /* 4/3 -> 1: Robins Monatsbilder sind durchweg 500x500. Im 4:3-Rahmen haette
     object-fit:cover oben und unten je ~12% weggeschnitten - genau dort stehen
     bei diesen Motiven die hohen Produkte und der Boxrand. */
  .tr-foto{aspect-ratio:1;border-radius:var(--radius-sm);position:relative;overflow:hidden}
.wb-seite .tr-foto img{width:100%;height:100%;object-fit:cover;display:block}
.wb-seite /* Monat als Bubble auf dem Bild (Lene 13.08.), .wb-seite Wert gegenueber - vorher lagen
     beide links uebereinander bzw. der Monat stand nur unter dem Bild. */
  .tr-bubble{position:absolute;top:8px;left:8px;font-size:12px;font-weight:800;padding:5px 10px;border-radius:99px;background:var(--lila);color:#fff;box-shadow:0 8px 18px -10px rgba(33,29,41,.5)}
.wb-seite .tr-badge{position:absolute;top:8px;right:8px;font-size:12px;font-weight:800;padding:5px 9px;border-radius:99px;background:#fff;color:var(--ink);box-shadow:0 8px 18px -10px rgba(33,29,41,.5)}
.wb-seite .tr-caption{margin-top:9px;text-align:center}
.wb-seite .tr-caption span{display:block;font-size:12px;color:var(--muted)}
.wb-seite .tr-arrow{position:absolute;top:34%;width:32px;height:32px;border-radius:50%;background:#fff;border:1.5px solid var(--line);box-shadow:0 8px 18px -10px rgba(33,29,41,.35);font-size:16px;display:flex;align-items:center;justify-content:center;z-index:3;cursor:pointer;font-family:var(--body);color:var(--ink)}
.wb-seite .tr-arrow-left{left:-4px}
.wb-seite .tr-arrow-right{right:-4px}
.wb-seite .tr-arrow:focus-visible{outline:2.5px solid var(--lila);outline-offset:2px}
.wb-seite .track-record .strip-indicator{margin-top:14px}
.wb-seite .track-record .cta{margin-top:22px}
.wb-seite /* app — pitch (block A) */
  .app-pitch{display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
.wb-seite /* Die Zweispaltigkeit ab 640px ist am 13.08. entfallen. 640px trifft grosse
     Handys im Querformat und kleine Tablets - dort standen zwei 181px-Spalten
     nebeneinander, .wb-seite in denen weder Text noch Telefon Platz hatten. Der Block wird
     jetzt erst ab 900px umgebaut, .wb-seite und dann anders (siehe Desktop-Block unten). */
  .app-pitch-left{background:var(--lila-100);border-radius:var(--radius);padding:22px 20px}
.wb-seite .app-pitch-left .eyebrow{margin-bottom:9px}
.wb-seite .app-pitch-left h2{text-align:left;margin-bottom:8px}
.wb-seite .app-pitch-left p{font-size:14px;color:var(--muted);line-height:1.55}
.wb-seite .app-pitch-right{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 0 4px}
.wb-seite /* wie .collage-phone: gezeichnetes Gehaeuse raus, .wb-seite Robins Mockup hat eins.
     Das Motiv ist perspektivisch gekippt - ein rechteckiger Rahmen darum haette
     ohnehin nicht zur Schraeglage gepasst. */
  .app-phone{width:200px}
.wb-seite .app-phone img{width:100%;height:auto;display:block;filter:drop-shadow(0 22px 38px rgba(33,29,41,.32))}
.wb-seite .app-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:300px}
.wb-seite .app-chip{background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 13px;font-size:12.5px;font-weight:700;color:var(--lila-700);box-shadow:0 10px 20px -12px rgba(33,29,41,.3)}
.wb-seite .app-chip:nth-child(2n){transform:translateY(4px)}
.wb-seite .app-chip:nth-child(3n){transform:translateY(-3px)}
.wb-seite /* wizard */
  .wizard-inner{display:flex;flex-direction:column;gap:18px;padding-bottom:22px}
.wb-seite .wizard-progress{display:flex;flex-direction:column;gap:6px}
.wb-seite .wizard-progress-label{font-size:12.5px;font-weight:700;color:var(--muted);text-align:center;letter-spacing:.2px}
.wb-seite .wizard-progress-track{height:6px;border-radius:99px;background:var(--lila-100);overflow:hidden}
.wb-seite .wizard-progress-fill{height:100%;border-radius:99px;background:var(--lila);transition:width .35s ease}
.wb-seite /* Preis-Konstante ueber allen Zwischenschritten (19.08.). Bewusst leise: sie
     soll dauerhaft lesbar sein, .wb-seite nicht mit dem Weiter-Knopf konkurrieren. Der
     Betrag selbst in --lila-700 - dieselbe Farbregel wie ueberall auf der Seite:
     Lila ist, .wb-seite was du zahlst. */
  .wizard-preis{margin-top:8px;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.4}
.wb-seite .wizard-preis b{font-weight:800;color:var(--lila-700)}
.wb-seite .wizard-head .sub{font-size:13.5px;color:var(--muted);line-height:1.5;margin-top:6px}
.wb-seite /* set-karten (schritt 1) */
  /* 17.08. (Alex): mobil zwei je Reihe statt untereinander. Eine Karte je Zeile
     bedeutete bei sechs Sets eine sehr lange Strecke - man musste an fuenf Karten
     vorbeiscrollen, .wb-seite um die Auswahl zu ueberblicken, .wb-seite obwohl der Vergleich genau
     hier die Entscheidung ist. Ab 900px bleiben es drei, .wb-seite siehe Desktop-Block. */
  .set-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px;align-items:start}
.wb-seite .set-karte{position:relative;text-align:left;border:1.5px solid var(--line);border-radius:var(--radius);
    padding:14px;background:var(--paper);cursor:pointer;display:flex;flex-direction:column;gap:8px;}
.wb-seite .set-karte:focus-visible{outline:2.5px solid var(--lila);outline-offset:2px}
.wb-seite .set-karte.ist-gewaehlt{border-color:var(--lila);box-shadow:0 0 0 2px var(--lila-200)}
.wb-seite .set-karte.ist-weg{cursor:not-allowed;opacity:.5;background:var(--paper-2)}
.wb-seite .set-karte.ist-gewaehlt::after{content:"✓ Gewählt";position:absolute;top:12px;right:12px;background:var(--lila);color:#fff;
    font-size:12px;font-weight:700;padding:4px 9px;border-radius:99px;}
.wb-seite .set-bild{width:100%;aspect-ratio:16/9;border-radius:var(--radius-sm);background-size:cover;background-position:center;background-color:var(--lila-100)}
.wb-seite .set-karte h4{font-size:16px;font-weight:800}
.wb-seite .set-anzahl{font-weight:700;color:var(--ink)}
.wb-seite /* Schalter fuer die Produktliste (13.08.). Bewusst als Link-Optik statt Button-
     Flaeche: er darf nicht mit der Set-Auswahl konkurrieren, .wb-seite die Karte selbst ist
     das Ziel. */
  .set-inhalt-schalter{align-self:flex-start;appearance:none;border:0;background:none;padding:2px 0;
    font-family:var(--body);font-size:13px;font-weight:700;color:var(--lila-700);
    cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.wb-seite .set-inhalt-schalter:focus-visible{outline:2.5px solid var(--lila);outline-offset:2px;border-radius:4px}
.wb-seite .set-produkte{list-style:none;display:flex;flex-direction:column;gap:3px}
.wb-seite /* 19.08. (Alex): das hier war ein stiller Blindgaenger seit dem 13.08. Die
     Produktliste bekommt beim Zuklappen das hidden-Attribut - aber die
     UA-Regel [hidden]{display:none}
.wb-seite hat weniger Gewicht als jede Klassenregel, .wb-seite und .set-produkte setzt display:flex. Ergebnis: der Schalter "Inhalt
     ansehen" hat nie etwas versteckt, .wb-seite alle sechs Listen standen dauerhaft offen.
     Genau der Zustand, .wb-seite den Robins Rueckmeldung abstellen sollte - im Markup
     umgesetzt, .wb-seite in der Darstellung nie angekommen. Dieselbe Ursache und derselbe
     Fix wie bei .seite[hidden] und .faq-panel[hidden] weiter oben. */
  .set-produkte[hidden]{display:none}
.wb-seite .set-produkte li{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);line-height:1.4}
.wb-seite .set-produkte li span{min-width:0}
.wb-seite .set-produkte li b{color:var(--ink);font-weight:700;white-space:nowrap}
.wb-seite /* 19.08.: eine Spalte mit Betraegen ohne Ueberschrift liest sich wie eine
     Rechnung. Die Kopfzeile sagt einmal, .wb-seite was die Zahlen sind - UVP der Marke, .wb-seite nicht dein Preis. */
  .set-produkte-kopf{font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);padding-bottom:3px;border-bottom:1px solid var(--line);margin-bottom:3px}
.wb-seite .set-produkte-kopf b{color:var(--muted)!important;font-weight:700}
.wb-seite .set-wert{font-size:13px;color:var(--muted)}
.wb-seite /* --ink statt --lila-700, .wb-seite siehe Farbregel bei .karte-wert b (19.08.). */
  .set-wert b{color:var(--ink);font-weight:800}
.wb-seite .set-weg-label{align-self:flex-start;background:#3a3245;color:#fff;font-size:12px;font-weight:700;padding:4px 9px;border-radius:99px}
.wb-seite /* chips (kategorien / vegan / hauttyp) */
  .chip-grid{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.wb-seite .chip{min-height:44px;padding:11px 16px;border-radius:99px;border:1.5px solid var(--line);
    background:var(--paper);color:var(--ink);font-family:var(--body);font-size:14px;font-weight:600;
    cursor:pointer;}
.wb-seite .chip:focus-visible{outline:2.5px solid var(--lila);outline-offset:2px}
.wb-seite .chip.ist-gewaehlt{background:var(--lila);border-color:var(--lila);color:#fff}
.wb-seite .chip:disabled{opacity:.4;cursor:not-allowed}
.wb-seite .feld-label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.wb-seite .feld-label:first-child{margin-top:0}
.wb-seite .wizard-hinweis{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.5}
.wb-seite /* nav */
  /* 17.08. (Alex): der Weiter-Knopf stand unter der Set-Liste. Wer das erste Set
     waehlte, .wb-seite musste an fuenf weiteren Karten vorbeiscrollen, .wb-seite um ihn ueberhaupt zu
     sehen - die Auswahl war getroffen und der Weg weiter unsichtbar. Jetzt klebt
     die Leiste am unteren Rand, .wb-seite sobald sie sonst aus dem Bild liefe. Bewusst als
     schwebende Karte mit eigenem Rahmen statt randloser Balken: sie funktioniert
     so bei jedem Sektions-Padding, .wb-seite mobil wie auf Desktop, .wb-seite ohne negative Margins, .wb-seite die bei der Desktop-Spalte nicht mehr passen wuerden.
     Kein Auto-Scroll zum Knopf - das reisst den Blick von der gerade getroffenen
     Wahl weg und macht Vergleichen unmoeglich. */
  .wizard-nav{display:flex;gap:10px;margin-top:14px;
    position:sticky;bottom:8px;z-index:5;
    background:var(--paper);border:1.5px solid var(--line);border-radius:16px;
    padding:10px;
    box-shadow:0 14px 30px -14px rgba(33,29,41,.35);}
.wb-seite .btn-zurueck{flex:0 0 auto;min-height:48px;padding:0 18px;border-radius:14px;border:1.5px solid var(--line);
    background:var(--paper);color:var(--ink);font-family:var(--body);font-size:14px;font-weight:700;cursor:pointer;}
.wb-seite .btn-zurueck:focus-visible{outline:2.5px solid var(--lila);outline-offset:2px}
.wb-seite /* Abschluss-Leiste: Kauf oben und breit, .wb-seite Rueckweg darunter als leiser Link. */
  .wizard-nav--abschluss{flex-direction:column;gap:2px}
.wb-seite .wizard-nav--abschluss .cta{width:100%}
.wb-seite .btn-zurueck--leise{align-self:center;border:0;background:none;min-height:36px;padding:6px 10px;
    font-size:13px;font-weight:600;color:var(--muted);text-decoration:underline;}
.wb-seite .wizard-nav .cta{flex:1 1 auto;margin-top:0}
.wb-seite /* schritt 5: uebersicht */
  .uebersicht-karte{border:1.5px solid var(--line);border-radius:var(--radius);padding:6px 16px;background:var(--paper)}
.wb-seite .uebersicht-zeile{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px;padding:10px 0}
.wb-seite .uebersicht-zeile+.uebersicht-zeile{border-top:1px solid var(--line)}
.wb-seite .uebersicht-zeile b{font-weight:800}
.wb-seite .uebersicht-kopf{font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);padding-bottom:6px}
.wb-seite .uebersicht-kopf b{font-weight:700;color:var(--muted)}
.wb-seite .lieferlogik{margin-top:16px;display:flex;flex-direction:column;gap:11px}
.wb-seite .lieferlogik-zeile{font-size:13px;line-height:1.5}
.wb-seite .lieferlogik-zeile b{display:block;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--lila-700);margin-bottom:2px}
.wb-seite .wizard-memo{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.5;background:var(--lila-100);border-radius:var(--radius-sm);padding:10px 12px}
.wb-seite .wizard-cta-hinweis{margin-top:12px;text-align:center;font-size:13px;font-weight:700;color:var(--lila-700);background:var(--lila-100);border-radius:var(--radius-sm);padding:10px 12px}
.wb-seite .wizard-cta-hinweis[hidden]{display:none}
.wb-seite /* 6 · marken-panel — zweites Marken-Vorkommen.
     Bis 12.08. stand hier ein dunkelviolettes Panel mit weissen, .wb-seite schraeg
     gestellten Logo-Kaertchen. Das Vorbild macht an genau dieser Stelle das
     Gegenteil: helles Panel, .wb-seite Logos flach und gleichmaessig, .wb-seite Ueberschrift
     mittendrin statt in einer Glaskachel. Angeglichen — der dunkle Block war
     der lauteste Moment der ganzen Seite und sass ausgerechnet dort, .wb-seite wo nur
     geliehene Autoritaet transportiert wird. Die Logos sollen wirken, .wb-seite nicht
     die Flaeche, .wb-seite auf der sie liegen. */
  .marken-panel-section{padding-top:8px}
.wb-seite .marken-panel{border-radius:26px; padding:26px 20px 28px;
    background:linear-gradient(150deg,#f4effc 0%,#efe7fb 45%,#f9eff4 100%);
    display:grid; gap:20px; place-items:center;}
.wb-seite .marken-panel-text{max-width:240px; text-align:center; color:var(--ink);
    font-size:17px; font-weight:800; line-height:1.3; letter-spacing:-.2px;}
.wb-seite /* 17.08. (Alex: "zu klein und langweiliges layout"): die Logos lagen frei auf dem
     Verlauf, .wb-seite 48px hoch und zusaetzlich auf opacity .8 gedimmt - zusammen mit dem
     hellen Untergrund war das der Grund, .wb-seite warum die Wortmarken nicht zu entziffern
     waren. Drei Aenderungen: volle Deckkraft (ein Logo, .wb-seite das man wegblendet, .wb-seite kann
     man auch weglassen), .wb-seite 48 -> 58px, .wb-seite und jedes Logo bekommt eine eigene helle
     Kachel. Die Kacheln geben dem Block ein Raster statt sechs schwebender
     Elemente und heben die Logos vom Verlauf ab, .wb-seite ohne dass das Panel wieder so
     laut wird wie das dunkle von vor dem 12.08. */
  .marken-panel-logos{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; width:100%; align-items:stretch;}
.wb-seite .marken-panel-logo{display:flex;align-items:center;justify-content:center;
    min-height:86px;padding:14px 16px;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(255,255,255,.9);
    border-radius:16px;
    box-shadow:0 10px 24px -18px rgba(60,40,110,.55);}
.wb-seite /* 20.08.: gleiche Ursache wie oben bei .marken-karte - die 58px galten dem
     quadratischen Dateirahmen, .wb-seite nicht dem Schriftzug. Beschnittene Dateien +
     Breitenbezug, .wb-seite damit beide Marken-Bloecke der Seite gleich gross wirken. */
  .marken-panel-logo img{width:100%;max-width:260px;max-height:58px;object-fit:contain}
.wb-seite /* 7 · groesse — eine einzige grosse Zahl, .wb-seite warmer Ton */
  .groesse-panel{display:flex; align-items:center; gap:16px;
    background:linear-gradient(135deg,#f8e8d2 0%,#f0d3a4 100%);
    border-radius:var(--radius); padding:18px; margin-top:4px;}
.wb-seite .groesse-foto{flex:0 0 40%;aspect-ratio:1;border-radius:14px;overflow:hidden}
.wb-seite .groesse-foto img{width:100%;height:100%;object-fit:cover;display:block}
.wb-seite .groesse-text{flex:1 1 auto;min-width:0}
.wb-seite .groesse-zahl{display:block;font-size:32px;font-weight:800;color:#8a5a24;line-height:1.05;letter-spacing:-.5px}
.wb-seite .groesse-text p{font-size:13px;color:#6b4c28;line-height:1.5;margin-top:7px}
.wb-seite /* 8 · ugc-grid — Community-Streifen, .wb-seite randlos, .wb-seite versetzte Hoehen, .wb-seite scrollt in sich */
  .ugc-grid-sub{text-align:center;font-size:13px;color:var(--muted);margin-top:2px}
.wb-seite .community-strip{margin:16px -20px 0}
.wb-seite /* Scroll-Mechanik selbst: siehe .strip-scroll, .wb-seite .community-strip oben (1 · ugc-strip) */
  .community-track{display:flex;align-items:flex-start;gap:9px;padding:4px 20px 24px}
.wb-seite /* 116 -> 168px (Alex 17.08.), .wb-seite gleiche Begruendung wie beim ugc-strip oben: bei
     116px waren die Fotos Briefmarken, .wb-seite auf denen weder Box noch Produkte zu
     erkennen waren - und ungesehene Beweisfotos beweisen nichts. */
  .community-item{flex:0 0 auto;width:168px;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:var(--lila-100)}
.wb-seite .community-item.tief{margin-top:22px}
.wb-seite .community-item img{width:100%;height:100%;object-fit:cover;display:block}
.wb-seite .community-ig{display:flex;align-items:center;gap:11px;margin-top:6px;text-decoration:none;color:inherit}
.wb-seite .community-ig-icon{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--lila-100);color:var(--lila-700);display:flex;align-items:center;justify-content:center}
.wb-seite .community-ig-icon svg{width:17px;height:17px}
.wb-seite .community-ig-text b{display:block;font-size:14px;font-weight:800;color:var(--ink)}
.wb-seite .community-ig-text small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.wb-seite /* 9 · faq */
  .faq-grid{display:flex;flex-direction:column;gap:20px;margin-top:6px}
.wb-seite /* 640 -> 900: bei 640px blieben fuer die Aufklapper 244px, .wb-seite die Fragen brachen
     dreizeilig um. Robin hat das (in der alten, .wb-seite falsch messenden Vorschau) als
     Mobil-Fehler gemeldet - der Umbruchpunkt war trotzdem zu niedrig. */
  @media (min-width:900px){.faq-grid{flex-direction:row;align-items:flex-start;gap:36px}}
.wb-seite .faq-head{flex:0 0 auto}
.wb-seite .faq-heading{display:flex;flex-direction:column;gap:2px;text-align:left}
.wb-seite .faq-heading-light{font-style:italic;font-weight:400;font-size:19px;color:var(--muted)}
.wb-seite .faq-heading-bold{font-weight:800;font-size:36px;letter-spacing:-1px;line-height:1.02}
.wb-seite .faq-list{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px}
.wb-seite .faq-item{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.wb-seite .faq-q{font-size:inherit}
.wb-seite .faq-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
    background:none;border:0;padding:15px 14px;text-align:left;cursor:pointer;
    font-family:var(--body);font-size:14px;font-weight:700;color:var(--ink);}
.wb-seite .faq-btn:focus-visible{outline:2.5px solid var(--lila);outline-offset:-2px;border-radius:10px}
.wb-seite /* Das "+" war bis 17.08. ein Textzeichen, .wb-seite per flex mittig gesetzt. Flex zentriert
     aber die ZEILENBOX, .wb-seite nicht die sichtbare Glyphe - und Inters Plus sitzt darin
     ueber der Mitte, .wb-seite weil die Box Ascender und Descender mitfuehrt. Sichtbar als
     leicht zu hohes Kreuz im Kreis (Alex' Screenshot). Jetzt zwei Striche aus
     Pseudo-Elementen: geometrisch exakt zentriert, .wb-seite unabhaengig von der Schrift, .wb-seite und die 45°-Drehung im offenen Zustand ergibt sauber ein x. */
  .faq-plus{flex:0 0 auto;position:relative;width:28px;height:28px;border-radius:50%;
    background:var(--lila-100);color:var(--lila-700);
    transition:transform .2s,background .2s,color .2s;}
.wb-seite .faq-plus::before, .wb-seite .faq-plus::after{content:"";position:absolute;top:50%;left:50%;
    width:11px;height:2px;border-radius:1px;background:currentColor;
    transform:translate(-50%,-50%);}
.wb-seite .faq-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.wb-seite .faq-btn[aria-expanded="true"] .faq-plus{transform:rotate(45deg);background:var(--lila);color:#fff}
.wb-seite .faq-panel{padding:0 14px 16px;font-size:13.5px;color:var(--muted);line-height:1.55}
.wb-seite .faq-panel[hidden]{display:none}
.wb-seite /* 10 · footer */

  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.wb-seite .hero, .wb-seite section{animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
.wb-seite /* =========================================================================
     DESKTOP (ab 900px) — 13.08.2026
     Bis hierher ist alles mobil-first und wurde auf breiten Schirmen nur
     geweitet: 20px Rand, .wb-seite eine Spalte, .wb-seite Fliesstextzeilen ueber die volle Breite.
     Gemessen (GA4, .wb-seite 60 Tage): 12, .wb-seite 4 % der Sessions sind Desktop, .wb-seite und sie
     konvertieren mit 2, .wb-seite 10 % SCHLECHTER als Mobil mit 2, .wb-seite 58 %. Das ist der Grund
     fuer diesen Block - nicht die Menge.
     Die Vorlage macht es auf 1440px so: Hero randlos ueber die volle Breite, .wb-seite Text links, .wb-seite Produkt rechts. Ihre laengste Textzeile ist allerdings 1080px -
     das uebernehmen wir bewusst NICHT, .wb-seite hier deckelt --spalte den Fliesstext.
     Mobil bleibt unberuehrt: alles unten steht in dieser Media Query.
     ========================================================================= */
  @media (min-width:900px){:root{ --spalte:1080px; --lese:62ch; }

    /* Inhaltsspalte statt 20px-Rand. max() haelt den Rand auf schmalen Desktops. */
    section{padding:56px max(28px, calc((100% - var(--spalte)) / 2)) 22px}
    h2{font-size:30px;letter-spacing:-.6px;margin-bottom:12px}
    /* Fliesstext bekommt eine lesbare Breite, egal wie breit die Sektion ist. */
    .zahlen-satz,.reviews-summary,.kleingedruckt,.ugc-title,.groesse-panel p{max-width:var(--lese)}
    h2 + p,.hero .sub{margin-left:auto;margin-right:auto}

    /* --- Hero: Bild traegt die volle Breite, Text sitzt links darauf --------- */
    .hero{padding:0 0 8px}
    .hero-canvas{min-height:560px;display:flex;align-items:center}
    .hero-text{
      width:min(620px, 56%);
      padding:52px 44px 52px max(28px, calc((100% - var(--spalte)) / 2));
    }
    /* Verlauf dreht sich von oben-nach-unten auf links-nach-rechts: der Text
       steht links im Deckenden, das Motiv bleibt rechts frei sichtbar. */
    .hero-text::before{
      background:linear-gradient(90deg,
        rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 58%, rgba(255,255,255,0) 100%);
    }
    .hero h1{font-size:46px;line-height:1.08;letter-spacing:-1px}
    .hero .sub{font-size:16px;max-width:44ch;margin-left:0}
    .hero .fakten-duo{max-width:440px}
    .hero-aktion .fakten-duo{margin-left:0;max-width:440px}
    .fakt-text b{font-size:15.5px}
    .fakt-preis .fakt-text b{font-size:17px}
    /* Der Aktionsblock steht unter dem Motiv, wird aber auf dieselbe linke
       Spalte gezogen - so bleibt die Blickachse Headline -> Preis -> Button. */
    .hero-aktion{
      max-width:min(620px, 56%);
      padding:22px 44px 0 max(28px, calc((100% - var(--spalte)) / 2));
    }
    /* Buttons nicht ueber die volle Spalte (Alex 17.08.): .cta ist mobil bewusst
       width:100% - auf 1080px wird daraus ein Balken, dessen Beschriftung einsam in
       der Mitte steht und der nicht mehr als Button gelesen wird. fit-content statt
       einer festen Breite, damit laengere Beschriftungen weiter passen; min-width
       haelt kurze Labels ("Weiter") auf Klickgroesse. Betrifft alle .cta-Vorkommen
       (Hero, Track-Record, Wizard, Schlussblock) und den Bewertungs-Knopf. */
    .cta{width:fit-content;min-width:260px;margin-inline:auto;padding-left:38px;padding-right:38px}
    .btn-mehr-bewertungen{width:fit-content;min-width:240px;margin-inline:auto;padding-left:28px;padding-right:28px}
    /* Der Auswahl-Flow ist eine schmale, zentrierte Spalte - NICHT die 1080px-Spalte
       der Landingpage. Ohne das lief die Knopfleiste ueber die volle Breite und
       "Weiter" war 1058px breit; ein Formular liest sich so nicht mehr als Formular.
       Das Vorbild fuehrt seinen Flow ebenfalls als schmale Spalte. */
    .wizard-inner{max-width:620px;margin-inline:auto}
    /* Die Leiste laeuft ueber die volle Breite, ihr Knopf sitzt in der Inhaltsspalte. */
    .sticky-cta{padding-left:max(28px, calc((100% - var(--spalte)) / 2));padding-right:max(28px, calc((100% - var(--spalte)) / 2))}
    /* Innerhalb dieser Spalte darf "Weiter" die Leiste fuellen - hier ist Breite
       Zielflaeche, nicht Laerm. */
    .wizard-nav .cta{width:auto;min-width:0;margin-inline:0;flex:1 1 auto}
    /* Im Hero bleibt der Button linksbuendig - dort traegt die linke Kante die
       Blickachse Headline -> Wert -> Button. */
    .hero-aktion .cta{font-size:17px;padding:18px 38px;margin-inline:0}
    .hero-aktion .ctasub{text-align:left;margin-left:0}
    .hero-aktion .trustbadge-wrap{justify-content:flex-start;margin-top:16px}
    /* Platzhalter-Beschriftung nach unten RECHTS: mittig gesetzt lief sie quer
       durch Subline und Wert-Pille und war bei der Abnahme nicht zu lesen. */
    /* Auf Desktop liegt der Text in den linken 56% - genau da, wo Robins Motiv
       leere Lilaflaeche hat. Rechts ausgerichtet steht die Box vollstaendig im
       Bild, statt vom mittigen Zuschnitt rechts angeschnitten zu werden. */
    .hero-bg img{object-position:100% 50%}

    /* --- Was steckt drin: nebeneinander statt untereinander (Robin, Punkt 1) - */
    .was-drin{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;align-items:center}
    .was-drin h2{grid-column:1 / -1}
    .wd-illustration{grid-column:1;grid-row:2;height:340px;margin-top:0}
    /* Desktop hat die halbe Zeile fuer sich - hier war die Box mit 146px am
       verlorensten. Mehr als 250px geht nicht: die Datei ist 655px breit, alles
       darueber laeuft auf Retina in die Unschaerfe. */
    .wd-box{width:250px}
    .wd-diagramm{grid-column:2;grid-row:2 / span 2;margin-top:0}
    .wd-chips{grid-column:1 / -1;grid-template-columns:repeat(4,1fr);margin-top:32px}

    /* --- App-Block: Text oben ueber die Breite, Handy + Chips nebeneinander
           darunter (Robin, Punkt 8) --------------------------------------- */
    .app-pitch{grid-template-columns:1fr;gap:26px}
    .app-pitch-left{padding:26px 30px}
    .app-pitch-left h2{font-size:26px}
    .app-pitch-right{flex-direction:row;justify-content:center;align-items:center;gap:40px}
    .app-chips{justify-content:flex-start;max-width:360px}
    .app-chip{font-size:13.5px;padding:9px 16px}

    /* Offer-Karten stehen hier wieder nebeneinander: auf 1080px ist der Platz da,
       und das "+" dazwischen erklaert die Kombination nur waagerecht. Mobil wird
       gestapelt, siehe .offer-karten oben. */
    .offer-karten{grid-template-columns:1fr auto 1fr;gap:8px}

    /* --- Kleinkram, der sonst auf 1080px auseinanderfaellt ------------------ */
    .set-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    /* 6 -> 3 je Reihe (17.08.): sechs Kacheln auf 1080px liessen ~171px je Karte -
       auf dem Desktop waren die Logos damit KLEINER als auf dem Handy (~195px).
       Bei sechs Marken sind das jetzt zwei Reihen statt einer, dafuer lesbar. */
    .marken-karte{flex:0 0 calc(33.333% - 7px)}
    /* wie bei .marken-karte: sechs Kacheln auf einer Reihe machen die Logos auf
       Desktop kleiner als auf dem Handy. Drei je Reihe, zwei Reihen. */
    .marken-panel-logos{grid-template-columns:repeat(3,1fr)}
    .ablauf-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
    .tr-card{flex-basis:31%}
    .zahlen-collage{max-width:620px;margin-left:auto;margin-right:auto}}

/* Der Prototyp scrollte in <main>, im Theme scrollt das Fenster: die klebende
   Leiste braucht deshalb fixed statt sticky. Steht bewusst GANZ UNTEN - die
   erzeugte Regel weiter oben setzt sticky, und bei gleicher Spezifitaet
   gewinnt die spaetere. */
.wb-seite .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:20}