/**
 * Landingpage Circular Textile Network
 *
 * Aufbau und Farben 1:1 nach dem Figma-Entwurf "Landingpage Membership DE".
 * Die Farbwerte sind aus dem Prototyp-Rendering gemessen, nicht geschaetzt.
 *
 * Zwei Regeln, die dieses Stylesheet traegt:
 *
 * 1. Kein globaler Selektor. Weder `*` noch `body` noch `html` - das Plugin
 *    laeuft im Shop-Template und wuerde sonst Header und Footer mitfaerben
 *    (belegter Fehler: der Shop-Footer erschien auf dieser Seite in einer
 *    anderen Schrift als auf allen uebrigen). Alles haengt an `.ms-lp-page`.
 *
 * 2. Die Breite wird an genau EINER Stelle begrenzt - am aeusseren Wrapper.
 *    Die Baender und Farbfelder darin laufen bis an dessen Kante, wie im
 *    Entwurf. Wuerde jeder Abschnitt sich selbst begrenzen, entstuenden
 *    weisse Raender zwischen den Flaechen.
 *
 * Die Grundschrift wird bewusst NICHT gesetzt, sondern vom Shop geerbt: auf
 * kaya-kato.de ist das Roboto, auf einem reinen NOVA Open Sans. Die
 * Ueberschriften erben sie ebenfalls - aber ausdruecklich per
 * `font-family: inherit`, nicht durch Weglassen: sonst greift die Schrift, die
 * das Template fuer Ueberschriften vorsieht (NOVA: Montserrat, das
 * Child-Template von kaya-kato.de sogar Roboto Condensed).
 */

/* Der Seitentitel des Shop-Templates entfaellt - die Hero-Ueberschrift ist die H1.
   Unkritisch, weil dieses Stylesheet nur auf den Plugin-Seiten geladen wird. */
.index-heading-wrapper { display: none; }

.ms-lp-page {
    /* Gemessene Palette aus dem Entwurf */
    --ms-sage:        #B9C2BD;   /* Baender, linker Split-Block */
    --ms-gruen:       #65796E;   /* rechter Split-Block, sekundaerer Button */
    --ms-gruen-dark:  #54655C;   /* dessen Hover */
    --ms-bordeaux:    #A30A30;   /* primaerer Button */
    --ms-bordeaux-dk: #86082780;
    --ms-beige-1:     #F4EFE9;   /* Prozess-Spalte 1 ... */
    --ms-beige-2:     #F8F3EF;
    --ms-beige-3:     #FCF8F5;
    --ms-beige-4:     #FDFCFA;   /* ... bis Spalte 4 */
    --ms-dunkel:      #303231;   /* Ueberschriften */
    --ms-text:        #52534E;   /* Fliesstext */
    /*
     * Der Entwurf nutzt fuer ALLE Ueberschriften die normale Roboto in 700,
     * keine Condensed. Nachgerechnet mit den Schriftdateien des Shops gegen die
     * Entwurfsmasse: „EIN ZWEITES LEBEN" misst dort 293px bei 32px Schriftgrad —
     * Roboto Bold liefert 294px, Roboto Condensed Bold nur 258px. Fuer „WARUM"
     * ebenso: Entwurf 119px, Roboto Bold 118px, Condensed 103px.
     *
     * Die Ueberschriften duerfen deshalb NICHT die Schrift des Shop-Templates
     * erben: NOVA setzt dort Montserrat, das Child-Template von kaya-kato.de
     * fuer h2 sogar Roboto Condensed. `inherit` holt stattdessen die Grund-
     * schrift des Wrappers — auf kaya-kato.de Roboto, auf reinem NOVA Open Sans.
     */

    /* Eine Begrenzung fuer die ganze Seite - siehe Kopfkommentar, Regel 2 */
    max-width: 1250px;
    margin-inline: auto;
    color: var(--ms-text);
    line-height: 1.55;
    overflow-x: hidden;
}

/* Reset, eingegrenzt auf die Plugin-Seite */
.ms-lp-page,
.ms-lp-page * { box-sizing: border-box; }
.ms-lp-page h1,
.ms-lp-page h2,
.ms-lp-page h3,
.ms-lp-page p,
.ms-lp-page ul { margin: 0; padding: 0; }
.ms-lp-page ul { list-style: none; }
.ms-lp-page img { max-width: 100%; }

/*
 * KEINE Sperrung im Fliesstext dieser Seite.
 * Aus dem Figma-Dev-Modus liessen sich an zwei Knoten der FORMULARseite je 2 %
 * Sperrung ablesen. Ich hatte daraus geschlossen, das gelte auch hier - und es
 * gesetzt, ohne es zu pruefen. Die Gegenprobe an fuenf Textbreiten widerlegt
 * das eindeutig (Soll aus dem Entwurf gegen live ohne Sperrung):
 *   H1            541,7  ->  541,7   exakt
 *   Hero-Lead     339,6  ->  344,0   +1,3 %
 *   CTA-Text      443,6  ->  441,7   -0,4 %
 *   CTA-H2        384,5  ->  383,0   -0,4 %
 *   Beratungsband 596,5  ->  592,6   -0,7 %
 * Mit 2 % Sperrung lagen dieselben Stellen bei +3,2 bis +8,3 %.
 * Die Sperrung gehoert also zur Formularseite, nicht hierher.
 */

/* ------------------------------------------------------------------ BUTTONS */

.ms-lp-btn {
    display: inline-block;
    /* 36,1px Buttonhoehe und 14,6px Schrift laut Entwurf. Hier standen 13px -
       dadurch waren beide Hero-Knoepfe rund 12 % zu schmal im Text. Belegt an
       den Textbreiten in figma-3-2-hero.png: „JETZT REGISTRIEREN" misst dort
       161,4px, „PREISUEBERSICHT" 129,9px; live waren es 144 und 116,5.
       Der Beratungsknopf hatte diesen Wert schon - er war keine Ausnahme,
       sondern der Regelfall, den ich bei den Hero-Knoepfen uebersehen hatte.
       Seitliches Innenmass 23px: Der Entwurf hat je Knopf ein anderes
       (20,2 und 25,2); 23 haelt beide innerhalb 3 %. */
    padding: 10.75px 23px;
    line-height: 1;
    font-family: inherit;
    font-size: clamp(11px, 1.17vw, 14.6px);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    border: none;
    /* Radius 14px. Vorher standen hier 10px - der Wert kam daher, dass nur
       abgelesen wurde, ab welcher Zeile die volle Breite erreicht ist. Das
       misst aber die Erkennungsschwelle, nicht den Bogen. Richtig ist, einen
       Kreis an den Kantenverlauf anzupassen: bei Versatz 1/2/5/10/15 Zeilen
       misst der Entwurf 15/12/8/4/1 Bildpunkte, was r=21 ergibt (r=19 waere
       12,9/10,5/6,2/2,3/0,4 - zu flach). 21 Bildpunkte sind 13,9px. */
    border-radius: 14px;
    cursor: pointer;
    transition: background-color .2s ease;
}
.ms-lp-btn-primary       { background: var(--ms-bordeaux); color: #fff; }
.ms-lp-btn-primary:hover,
.ms-lp-btn-primary:focus { background: #86081f; color: #fff; }
.ms-lp-btn-green         { background: var(--ms-gruen); color: #fff; }
.ms-lp-btn-green:hover,
.ms-lp-btn-green:focus   { background: var(--ms-gruen-dark); color: #fff; }

/* --------------------------------------------------------------------- HERO */

.ms-lp-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(420px, 45vw, 560px);
    padding: clamp(32px, 4vw, 56px) clamp(20px, 5vw, 64px);
    /* Der Verlauf haelt die linke Seite dunkel genug fuer weissen Text, ohne
       das Motiv rechts (gefaltete Waesche) abzudecken. */
    background:
        linear-gradient(90deg, rgba(20,22,21,.62) 0%, rgba(20,22,21,.34) 42%, rgba(20,22,21,.05) 72%),
        url('../img/hero-membership-v5.jpg') right center/cover no-repeat;
}
/*
 * 700px statt der ~550px, die der Entwurf fuer den Textblock zeigt: Die laengste
 * H1-Zeile („GEBEN SIE IHREN ALTTEXTILIEN") stand sonst ohne Reserve an der
 * Kante — im NOVA-Testshop auf 0,33px genau, weil dort Open Sans nur in 400 und
 * 600 vorliegt und der Browser den Fettschnitt breiter hochrechnet. Eine
 * Kleinigkeit an Wortlaut oder Schriftgrad haette eine dritte Zeile erzeugt.
 * Auf die Zeilenlaenge des Fliesstextes wirkt sich das nicht aus, die begrenzt
 * `max-width: 34em` weiter unten.
 */
.ms-lp-hero-content { max-width: 700px; color: #fff; }

.ms-lp-hero h1 {
    font-family: inherit;
    /* Groessen aus dem Entwurf ueber die Textbreite bestimmt, mit Roboto auf
       beiden Seiten: H1 36,5px (zwei Zeilen ergaben 36,7 und 36,3). */
    font-size: clamp(27px, 2.92vw, 36.5px);
    font-weight: 700;
    /* Zeilenabstaende ebenfalls aus dem Entwurf gemessen (Abstand der
       Zeilenmitten geteilt durch den Schriftgrad): H1 1,23 - Lead 1,07 -
       Fliesstext 1,13. Mit den vorherigen Werten (1,1 / 1,3 / 1,5) war der
       Hero 622px hoch statt der 566px des Entwurfs. */
    line-height: 1.23;
    text-transform: uppercase;
    /* Kein letter-spacing: mit .01em war die H1-Zeile 551,8px statt der 544,3px
       des Entwurfs — exakt die 1,4 %, die der Zeichenabstand ausmacht. */
    color: #fff;
    /* Abstaende aus dem Entwurf gemessen und auf 1250px umgerechnet:
       H1 -> Lead 47px, Lead -> Fliesstext 23px. */
    margin-bottom: clamp(22px, 3.7vw, 46px);
}
/*
 * Zwei Klassen im Selektor, nicht eine: der Reset weiter oben (`.ms-lp-page p`)
 * hat als Klasse+Element hoehere Spezifitaet als eine einzelne Klasse und
 * setzte den Abstand sonst wieder auf 0 - der Lead klebte am Fliesstext.
 */
.ms-lp-hero .ms-lp-hero-lead {
    /* Lead 27px (Zeilen ergaben 26,8 und 27,0) - vorher 24px. */
    font-size: clamp(18px, 2.16vw, 27px);
    font-weight: 300;
    line-height: 1.07;
    color: #fff;
    margin-bottom: clamp(12px, 1.85vw, 23px);
}
.ms-lp-hero p:not(.ms-lp-hero-lead) {
    /* Fliesstext 18,8px (drei Zeilen ergaben 18,9 / 18,9 / 18,7) - vorher 14px,
       also ein Drittel zu klein.

       Die Kastenbreite geht mit: 31em (583px). Die breiteste Zeile des Entwurfs
       misst 573px und muss hineinpassen, das naechste Wort in Absatz 1 aber
       nicht mehr (dessen Zeile 1 plus „Unternehmen" braucht rund 600px). Mit
       den vorher gesetzten 27em brach Absatz 2 auf fuenf statt vier Zeilen und
       der Hero wurde dadurch 650 statt 566px hoch. */
    font-size: clamp(14px, 1.5vw, 18.8px);
    line-height: 1.13;
    color: rgba(255,255,255,.92);
    margin-bottom: clamp(10px, 1.4vw, 17px);
    max-width: 31em;
}
.ms-lp-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: clamp(20px, 3vw, 38px);
}

/*
 * Die drei Kreis-Symbole am rechten Bildrand.
 *
 * Im Figma-File sind sie in das Hero-Foto einkopiert. Sie wurden dort
 * abgeschnitten und liegen hier als SVG darueber: so skalieren sie scharf,
 * behalten ihre Position bei jedem Bildausschnitt und lassen sich auf Mobil
 * abschalten, wo sie sonst den Text ueberlagern wuerden.
 *
 * Verteilung aus dem Entwurf gemessen: Mitten bei 16,7 % / 50,5 % / 84,3 %
 * der Hero-Hoehe, Durchmesser 9,4 % davon, rechter Abstand 3,9 % der Breite.
 * Wie diese drei Hoehen getroffen werden, steht beim Selektor `.ms-lp-mark`.
 */
/*
 * Die drei Symbole sind seit dem Wechsel auf Titelbild-v5 IM FOTO enthalten -
 * scharf und in Originalqualitaet. Die nachgebauten Symbole daneben wuerden
 * sich mit ihnen ueberlagern (zwei Kreise, zwei Sterne). Deshalb bleibt die
 * Symbolspalte verborgen; die Regeln darunter bleiben stehen, falls spaeter
 * ein Foto ohne eingebrannte Symbole geliefert wird.
 */
.ms-lp-hero-marks { display: none; }

.ms-lp-hero-marks {
    position: absolute;
    top: 0;
    bottom: 0;
    /* Die Spalte ist so breit wie das groesste Symbol (98px). Die gemeinsame
       Mittelachse der drei Symbole liegt im Entwurf 65,6px vom rechten Rand
       des Heros - daher 65,6 minus halbe Spaltenbreite. */
    right: clamp(10px, 1.33vw, 16.6px);
    width: clamp(60px, 7.87vw, 98px);
    color: rgba(255,255,255,.9);
    pointer-events: none;
}
/*
 * Jedes Symbol wird einzeln auf seine Hoehe gesetzt, statt drei Elemente mit
 * `space-between` und Innenabstand zu verteilen.
 *
 * Grund: Ein prozentualer `padding`-Wert bezieht sich IMMER auf die BREITE des
 * umgebenden Blocks, nie auf dessen Hoehe. `padding-block: 12%` ergab deshalb
 * 12 % von 1250px = 150px statt 12 % der Hero-Hoehe — gemessen sassen die
 * Symbole bei 30,8 / 50,0 / 69,2 % statt bei den 16,7 / 50,5 / 84,3 % des
 * Entwurfs, und die Spreizung aenderte sich mit der Fensterbreite.
 * `top` in Prozent bezieht sich dagegen auf die Hoehe und trifft exakt.
 */
/* Alle drei sitzen auf einer gemeinsamen Mittelachse - im Entwurf liegen ihre
   Mittelpunkte bei 1804,5 / 1805 / 1805 Bildpunkten. Deshalb mittig statt
   rechtsbuendig: sonst waeren die schmalen Kreise gegen das breitere mittlere
   Symbol versetzt. */
.ms-lp-mark {
    position: absolute;
    /* Ueber die volle Spaltenbreite aufspannen und den Inhalt mittig setzen.
       Mit `left: 50%` allein stuende einem absolut positionierten Element nur
       die halbe Restbreite zur Verfuegung - das mittlere Symbol kam dadurch
       auf 49 statt 98px. */
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    transform: translateY(-50%);
}
.ms-lp-mark:nth-child(1) { top: 16.7%; }
.ms-lp-mark:nth-child(2) { top: 50.5%; }
.ms-lp-mark:nth-child(3) { top: 84.3%; }
/*
 * Der Kreis wird gezeichnet, nicht aus dem Foto geholt: freigestellt war er
 * gestrichelt, weil die duenne Linie im 66px-JPEG stellenweise unter dem
 * Schwellwert lag. Als Rahmen ist er auf jeder Aufloesung sauber.
 */
.ms-lp-mark-kreis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(38px, 4.96vw, 62px);
    height: clamp(38px, 4.96vw, 62px);
    /* `.ms-lp-mark` und `.ms-lp-mark-kreis` sitzen am selben Element. Die feste
       Breite hier schlaegt das dortige `left: 0; right: 0`, der Kreis stuende
       sonst linksbuendig statt auf der gemeinsamen Mittelachse. */
    margin-inline: auto;
    /* Ringstaerke 2px: im Entwurf am waagerechten Schnitt durch die Kreismitte
       gemessen (2,0 / 2,0 / 2,6 / 2,0 / 1,3 px). Mit 1,5px rendert Chrome nur
       1px - das liess die Ringe duenn und blass wirken. */
    border: 2px solid currentColor;
    border-radius: 50%;
}
/* Das Innensymbol misst 74 bis 77 % des Kreisdurchmessers, nicht 58 %. Der
   alte Wert war der eigentliche Grund fuer den Eindruck "verwaschen": Das
   Symbol war ein Viertel zu klein gezeichnet. */
.ms-lp-mark-kreis img,
.ms-lp-mark-kreis svg {
    /* 79 % der Innenflaeche entsprechen 74 % des Aussendurchmessers - der
       2px-Ring zaehlt bei Prozentangaben nicht mit. */
    width: 79%;
    height: 79%;
    display: block;
}
/* Das mittlere Symbol traegt keinen Ring und ist im Entwurf deutlich groesser
   als die beiden Kreise: 98,4 x 91,9px statt 61. */
.ms-lp-mark-voll img {
    width: clamp(58px, 7.87vw, 98px);
    height: auto;
    display: block;
    filter: drop-shadow(0 0 2px rgba(40,44,42,.35));
}
/* Nicht `.ms-lp-mark svg`: Das traefe auch den Stern im Kreis und wuerde die
   75-%-Regel darueber schlagen, weil beide gleich spezifisch sind und diese
   hier spaeter steht. */
.ms-lp-mark-bild img {
    width: clamp(38px, 4.96vw, 62px);
    height: auto;
    display: block;
    /* Die duennen hellen Linien liegen teils auf heller Bettwaesche. Ein
       minimaler Schatten haelt sie lesbar, ohne die Form zu veraendern. */
    /* Schwacher Schatten haelt die hellen Linien auf heller Bettwaesche
       lesbar. Schwaecher als zuvor, weil die Symbole jetzt deckender sind
       und der Schatten sie sonst weich wirken laesst. */
    filter: drop-shadow(0 0 2px rgba(40,44,42,.35));
}

/* --------------------------------------------------- BAND: SO FUNKTIONIERT'S */

/*
 * Zwei Klassen im Selektor: Der Reset weiter oben (`.ms-lp-page h2`) ist
 * Klasse+Element und damit spezifischer als `.ms-lp-band` allein — er setzte
 * das Innenmass auf 0 zurueck, das Band war dadurch 37px statt der 60px des
 * Entwurfs. Derselbe Konflikt wie beim Hero-Lead.
 */
.ms-lp-page .ms-lp-band {
    background: var(--ms-sage);
    color: #fff;
    font-family: inherit;
    font-size: clamp(19px, 2.48vw, 31px);
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    /* 67,6px Bandhoehe laut Entwurf: 31px Schrift, Zeilenhoehe 1,2 (37,2px),
       je 15,2px Innenabstand. Vorher standen hier 60px - der Wert stammte aus
       einer Aufnahme mit geschaetztem Massstab. Diesmal ist der Massstab am
       Band selbst geprueft: seine Breite ist im Entwurf 1249,3px und damit
       exakt der 1250er-Container, was den Faktor 0,6562 bestaetigt. */
    line-height: 1.2;
    padding: 15.2px 16px;
}

/* ------------------------------------------------------------------ PROZESS */

/*
 * `padding: 0` ist hier Pflicht, keine Kosmetik: NOVA gibt jedem <section> ein
 * `padding: 64px 0`. Weil die Farbflaechen auf den Kind-Elementen liegen und
 * nicht auf der Section, erzeugt dieses geerbte Padding oben und unten je einen
 * weissen Streifen - die Bloecke stossen dann sichtbar nicht mehr aneinander.
 * Gleiches gilt fuer .ms-lp-split.
 */
.ms-lp-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0;
}
.ms-lp-step {
    /* 380px Spaltenhoehe laut Entwurf; mit 46px Innenabstand waren es 391,6. */
    /* Seitliches Innenmass 21px statt 26. Im Entwurf sind es 23px, aber die
       laengste Zeile aller vier Spalten misst 269px ("Textilien in den
       Materialkreislauf") - bei 23px Rand bliebe zu wenig uebrig und der
       Umbruch faende eine Zeile frueher statt. */
    padding: clamp(24px, 3.2vw, 40px) clamp(14px, 1.68vw, 21px);
    text-align: center;
}
/* Der Beige-Verlauf des Entwurfs, Spalte fuer Spalte */
.ms-lp-step-1 { background: var(--ms-beige-1); }
.ms-lp-step-2 { background: var(--ms-beige-2); }
.ms-lp-step-3 { background: var(--ms-beige-3); }
.ms-lp-step-4 { background: var(--ms-beige-4); }

.ms-lp-step img {
    /* Im Entwurf 129px hoch bei 1250er Container, Abstand zum Titel 45px. */
    width: clamp(80px, 10.3vw, 129px);
    height: auto;
    display: block;
    margin: 0 auto clamp(22px, 3.6vw, 45px);
}
.ms-lp-step h3 {
    font-family: inherit;
    /* 18,5px im Entwurf, hier standen 17px. */
    font-size: clamp(13px, 1.48vw, 18.5px);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ms-dunkel);
    margin-bottom: .7em;
}
.ms-lp-step p {
    /* Zeilenabstand 21,7px (Faktor 1,16) im Entwurf; hier standen 16px bei
       1,45 - der Text war ein Sechstel zu klein. Die Rueckrechnung aus drei
       Zeilenbreiten ergab 18,7 bis 19,0; gewaehlt ist der untere Rand dieser
       Spanne. Mit dem inzwischen auf 21px verringerten seitlichen Innenmass
       stehen 270,5px zur Verfuegung - die laengste Zeile misst bei 18,7px
       269,0px und passt damit, ohne die Vierzeiligkeit zu brechen. */
    font-size: clamp(13px, 1.496vw, 18.7px);
    line-height: 1.16;
    color: var(--ms-text);
    /* Hier KEINE 2-%-Sperrung, obwohl der Entwurf sie hat: Mit ihr wird die
       laengste Zeile 280px breit, es stehen aber nur 270,5px zur Verfuegung -
       die Spalten wuerden fuenfzeilig statt vierzeilig. Die Vierzeiligkeit
       entspricht dem Entwurf und wiegt hier schwerer als die Sperrung. */
}

/* -------------------------------------------------------------------- SPLIT */

.ms-lp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;   /* siehe Hinweis bei .ms-lp-steps */
}
/* Die Innenmasse sind im Entwurf je Spalte verschieden: links ruecken
   Ueberschrift und Symbole 58px ein, rechts nur 35px. Unten stehen beide
   Spalten 30px ab - der rechte Textblock endet dadurch fast buendig mit der
   linken Liste. */
.ms-lp-split-left {
    padding: clamp(30px, 3.8vw, 54px) clamp(16px, 2vw, 25px)
             clamp(20px, 2.1vw, 30px) clamp(22px, 4.1vw, 58px);
}
.ms-lp-split-right {
    display: flex;
    flex-direction: column;
    padding: clamp(30px, 3.8vw, 54px) clamp(22px, 2.7vw, 35px)
             clamp(20px, 2.1vw, 30px) clamp(22px, 2.7vw, 35px);
}
.ms-lp-split-left  { background: var(--ms-sage); }
.ms-lp-split-right { background: var(--ms-gruen); }

.ms-lp-split h2 {
    font-family: inherit;
    /* 38px im Entwurf, Zeilenabstand 42,7px (Faktor 1,12). */
    font-size: clamp(24px, 3.04vw, 38px);
    font-weight: 700;
    line-height: 1.12;
    text-transform: uppercase;
    letter-spacing: .005em;
    margin-bottom: clamp(20px, 2.6vw, 36px);
}
.ms-lp-split-left  h2 { color: var(--ms-dunkel); }
.ms-lp-split-right h2 { color: #fff; }

.ms-lp-vorteile {
    display: flex;
    flex-direction: column;
    /* 74,1px von Punkt zu Punkt im Entwurf; bei 41,3px Symbolhoehe bleiben
       32,8px Zwischenraum. Vorher standen hier 26px. */
    gap: clamp(14px, 2.64vw, 33px);
}
.ms-lp-vorteile li {
    display: flex;
    align-items: flex-start;
    /* 29,5px zwischen Symbol und Text laut Entwurf. */
    gap: clamp(12px, 2.36vw, 29.5px);
}
.ms-lp-vorteile img {
    flex: 0 0 auto;
    width: clamp(28px, 3.3vw, 41px);
    height: auto;
    margin-top: -.15em;
}
.ms-lp-vorteile span {
    /* 19px bei Zeilenabstand 21px (Faktor 1,11) im Entwurf; hier standen 16px
       bei 1,45 - derselbe Fehler wie in den Prozess-Spalten. */
    font-size: clamp(13px, 1.52vw, 19px);
    line-height: 1.11;
    color: var(--ms-text);
    /* Auch hier KEINE 2-%-Sperrung: Mit ihr wird der laengste Punkt
       fuenfzeilig, im Entwurf ist er vierzeilig. Wie bei den Prozess-Spalten
       wiegt der Umbruch des Entwurfs schwerer als die Sperrung. */
}

/* Der Textblock steht im Entwurf am unteren Rand der Spalte, nicht direkt
   unter der Ueberschrift: er beginnt erst 415px unter der Blockkante, waehrend
   die Ueberschrift schon bei 60px endet. */
/* Die Absaetze sind direkte Kinder der Spalte, deshalb greift der Abstand am
   ersten von ihnen. */
.ms-lp-split-right p:first-of-type { margin-top: auto; }

.ms-lp-split-right p {
    font-size: clamp(13px, 1.53vw, 19.1px);
    line-height: 1.10;
    color: rgba(255,255,255,.95);
}
.ms-lp-split-right p + p { margin-top: 1.1em; }

/* ------------------------------------------------------- CTA AUF STOFFBILD */

.ms-lp-cta {
    text-align: center;
    /* 364,2px Gesamthoehe laut Entwurf, oben und unten verschieden:
       77px bis zur Ueberschrift, 69px unter dem Knopf. */
    padding: clamp(40px, 6.16vw, 77px) 20px clamp(36px, 5.52vw, 69px);
    background: url('../img/bg-fabric.jpg') center/cover no-repeat;
}
.ms-lp-cta h2 {
    font-family: inherit;
    /* 38,3px im Entwurf, Zeilenabstand 44,4px. */
    font-size: clamp(24px, 3.06vw, 38.3px);
    font-weight: 700;
    line-height: 1.16;
    text-transform: uppercase;
    color: var(--ms-dunkel);
    margin-bottom: 10px;
}
.ms-lp-cta p {
    /* 27px bei Zeilenabstand 30,2px (Faktor 1,12) im Entwurf; hier standen
       24px bei 1,45. */
    font-size: clamp(16px, 2.16vw, 27px);
    font-weight: 300;
    line-height: 1.12;
    color: var(--ms-text);
    margin-bottom: 37px;
}

/* ---------------------------------------------------------- BAND: BERATUNG */

.ms-lp-beratung {
    background: var(--ms-sage);
    text-align: center;
    /* 171,9px Gesamthoehe laut Entwurf: 44,4px bis zur Textbox, darunter der
       Knopf, unten 44px. Hier standen 160px - der Wert war aus einer frueheren
       Aufnahme geschaetzt. */
    padding: clamp(30px, 3.55vw, 44.4px) 20px clamp(30px, 3.52vw, 44px);
}
.ms-lp-beratung p {
    /* 27px im Entwurf, Zeilenabstand 30,2px. Hier standen 19px - der Text war
       damit knapp ein Drittel zu klein, die groesste Abweichung der Seite. */
    font-size: clamp(15px, 2.16vw, 27px);
    line-height: 1.12;
    color: var(--ms-dunkel);
    margin-bottom: 17px;
}

/* Die Schriftgroesse teilt dieser Knopf mit den anderen (14,6px). Nur das
   seitliche Innenmass ist groesser: 30px statt 23px, damit der Knopf die im
   Entwurf gemessenen 252,0px erreicht. */
.ms-lp-beratung .ms-lp-btn { padding: 10.75px 30px; }

/* ---------------------------------------------------- PREIS-POP-UP (Seite 2) */

/*
 * Aufbau nach dem Entwurf "Landing Page Pop-up" (node 4185-24).
 *
 * Alle Masse sind aus dem Prototyp-Rendering gemessen und auf den 1250px-
 * Container umgerechnet. Drei Eigenheiten sind Absicht, kein Versehen:
 *
 * - Die Seite dahinter wird AUFGEHELLT, nicht abgedunkelt: weiss mit 65 %
 *   Deckkraft, an drei Stellen gegengerechnet (Sage #B9C2BD -> #E8EAE9,
 *   Dunkelgruen #65796E -> #C9CFCB, Bordeaux #A30A30 -> #DFAABA).
 * - Die Karten haben KEINE Flaeche. Sie sind durchsichtig, nur von einer
 *   hellen Linie gerahmt, ihr Text steht in Weiss.
 * - Die Karten fuellen den Dialog nicht aus, sondern stehen mittig darin
 *   (350 px in einem 644 px breiten Dialog).
 *
 * Die Groessen haengen bewusst NICHT an `vw`. Der Dialog ist bei 644px
 * gedeckelt; waeren Schrift und Abstaende an die Fensterbreite gekoppelt,
 * liefe die Entwurfsproportion schon ab etwa 1200px Fensterbreite weg — bei
 * 768px waeren die Karten dann 32 % zu breit und der Titel ein Drittel zu
 * klein. Feste Werte, die nur im Mobil-Breakpoint angepasst werden, halten
 * das Verhaeltnis auf jeder Breite.
 */

.ms-lp-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.65);
    z-index: 1050;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
.ms-lp-modal-overlay.ms-lp-open { display: flex; }

/*
 * Gescrollt wird das OVERLAY, nicht der Dialog.
 *
 * Vorher hatte der Dialog `max-height: 90vh` samt eigenem Scrollbalken. Sobald
 * das Fenster niedriger als rund 903px war - also bei den meisten Notebooks -
 * nahm dieser Balken 15px von der Dialogbreite. Die Karte schrumpfte auf 335px,
 * ihre Inhaltsbreite auf 251px, und „Enterprise Membership" braucht bei 24px
 * genau 252,4px: die Karte brach zweizeilig um und wurde 28px hoeher als die
 * beiden anderen.
 *
 * Liegt das Scrollen am Overlay, geht der Balken von dessen Breite ab und der
 * Dialog behaelt seine 644px. `margin: auto` zentriert ihn, solange Platz ist,
 * und laesst ihn sonst von oben mitscrollen - anders als `align-items: center`,
 * bei dem der obere Rand abgeschnitten und unerreichbar wuerde.
 */
.ms-lp-modal {
    background: #778B7F;
    border-radius: 31px;
    width: 100%;
    max-width: 644px;
    margin: auto;
    /* unten deutlich mehr Luft als oben — so endet der Dialog im Entwurf */
    padding: 39px 147px 80px;
    box-shadow: 0 18px 60px rgba(48,50,49,.22);
    /* Der Shop vererbt eine dunkelgraue Textfarbe. Ohne diese Zeile stuende
       jeder Text ohne eigene Farbregel dunkelgrau auf Salbeigruen. */
    color: #fff;
}

.ms-lp-modal-head {
    position: relative;
    text-align: center;
    margin-bottom: 48px;
}
.ms-lp-modal-head span {
    display: inline-block;
    font-family: inherit;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.2;
    color: #fff;
}
/*
 * Das Schliesskreuz sitzt am Rand des DIALOGS, nicht am Rand des Textblocks —
 * der Dialog hat innen 147px Abstand. Als SVG statt als Zeichen "×", weil der
 * Entwurf ein schlankes Kreuz zeigt; die Schriftglyphe ist gedrungener und
 * baut bei gleicher Groesse deutlich schwerer.
 */
.ms-lp-modal-close {
    position: absolute;
    top: 50%;
    right: -112px;
    transform: translateY(-50%);
    width: 44px;              /* Trefferflaeche fuer Touch */
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    opacity: .9;
}
.ms-lp-modal-close:hover,
.ms-lp-modal-close:focus { opacity: 1; }
.ms-lp-modal-close svg {
    width: 21px;              /* Symbolgroesse laut Entwurf */
    height: 21px;
    display: block;
}

.ms-lp-pop-cards {
    display: flex;
    flex-direction: column;
    gap: 42px;
}
.ms-lp-pop-card {
    display: block;
    background: transparent;
    border: 3px solid rgb(245,239,234);
    border-radius: 10px;
    /*
     * Die senkrechten Werte sind am Innenrhythmus des Entwurfs ausgerichtet,
     * gemessen als Tinten-Oberkante ab Kartenoberkante:
     * Kartentitel 16,3 - Zielgruppe 55,3 und 74,2 - Preis 119,7 - Karte 177,6.
     * Sie haengen am Kartentitel: als der noch 21px war, brauchte es hier 18px.
     * Wer Titelgroesse oder Zeilenabstaende aendert, muss sie mitziehen und
     * gegen diese vier Werte nachmessen.
     */
    padding: 10px 39px 15px;
    min-height: 177px;
    text-decoration: none;
    color: #fff;
    transition: background-color .2s ease;
}
.ms-lp-pop-card:hover,
.ms-lp-pop-card:focus { background: rgba(255,255,255,.10); }

.ms-lp-pop-card h3 {
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.ms-lp-pop-card .ms-lp-target {
    font-size: 16px;
    line-height: 1.18;
    color: #fff;
    margin-bottom: 24px;
}
.ms-lp-pop-card .ms-lp-price {
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.ms-lp-pop-card .ms-lp-price small {
    font-size: 15.5px;
    font-weight: 400;
    color: #fff;
    margin-left: 6px;
}

/* ----------------------------------------------------------------- TABLET */

@media (max-width: 760px) {
    /* Ab hier passt der 147px-Innenabstand des Entwurfs nicht mehr neben die
       350px-Karte. Er wird zurueckgenommen, die Karte behaelt ihre Groesse. */
    .ms-lp-modal { padding-left: 32px; padding-right: 32px; }
    .ms-lp-modal-close { right: -14px; }
}

@media (max-width: 900px) {
    /* Vier Prozess-Spalten passen nicht mehr - zwei Reihen zu zwei Spalten.
       Damit der Beige-Verlauf weiter von hell nach dunkel laeuft, bekommt die
       zweite Reihe die helleren Toene. */
    .ms-lp-steps { grid-template-columns: repeat(2, 1fr); }

    /* Symbolgroesse anteilig zur Entwurfsvorgabe: 61px bei 1250px Breite
       entspricht bei 768px rund 38px. */
    .ms-lp-hero-marks { width: 60px; }
    .ms-lp-mark-kreis { width: 38px; height: 38px; border-width: 1.5px; }
    .ms-lp-mark-voll img { width: 60px; }

    /*
     * Die engen Zeilenabstaende des Entwurfs (H1 1,23 / Lead 1,07 / Text 1,13)
     * gelten dort fuer 36,5 / 27 / 18,8px grosse Schrift. Ab hier steht der Text
     * bei 27 / 18 / 14px - dieselbe Enge wirkt dann gedraengt. Der Entwurf macht
     * unterhalb von Desktop keine Aussage; hier entscheidet die Lesbarkeit.
     */
    .ms-lp-hero h1 { line-height: 1.15; }
    .ms-lp-hero .ms-lp-hero-lead { line-height: 1.25; }
    .ms-lp-hero p:not(.ms-lp-hero-lead) { line-height: 1.45; }

    /* 44px Mindesthoehe fuer Beruehrungsziele. Mit dem Innenabstand des
       Entwurfs (12,5px) kam der Knopf auf 36px. */
    .ms-lp-btn { padding-top: 16.5px; padding-bottom: 16.5px; }
}

/* ----------------------------------------------------------------- MOBIL */

@media (max-width: 680px) {
    .ms-lp-steps { grid-template-columns: 1fr; }

    /* Der zweigeteilte Block stapelt: erst sage, dann dunkelgruen - dieselbe
       Lesereihenfolge wie im Entwurf von links nach rechts. */
    .ms-lp-split { grid-template-columns: 1fr; }

    .ms-lp-hero {
        min-height: 0;
        padding: 40px 20px 44px;
        /* Auf schmalen Geraeten liegt der Text ueber dem Motiv statt daneben,
           deshalb ein gleichmaessig dunklerer Verlauf ueber die volle Breite. */
        background:
            linear-gradient(180deg, rgba(20,22,21,.66) 0%, rgba(20,22,21,.58) 100%),
            url('../img/hero-membership-v5.jpg') center/cover no-repeat;
    }
    .ms-lp-hero-content { max-width: none; }

    /* Hier steht das Foto wieder mittig statt rechts: Bei dieser Breite ist der
       Ausschnitt so eng, dass die im Foto enthaltenen Symbole in die
       Ueberschrift ragen wuerden. Mittig liegen sie ausserhalb des Ausschnitts.
       Die nachgebaute Symbolspalte bleibt aus demselben Grund verborgen. */
    .ms-lp-hero-marks { display: none; }

    .ms-lp-hero-cta { gap: 10px; }
    .ms-lp-hero-cta .ms-lp-btn,
    .ms-lp-cta .ms-lp-btn,
    .ms-lp-beratung .ms-lp-btn { width: 100%; }

    /* Die Umbrueche des Entwurfs sind fuer Desktop gesetzt und wuerden hier
       zu kurze Zeilen erzeugen. */
    .ms-lp-hero h1 br,
    .ms-lp-hero-lead br,
    .ms-lp-cta p br { display: none; }

    .ms-lp-cta p { font-size: 16px; }

    /* Der Dialog nutzt auf Mobil die volle Breite; der grosse Innenabstand des
       Entwurfs (147px) haette sonst kaum Platz fuer die Karten gelassen.
       Schriftgrade und Abstaende werden hier gemeinsam heruntergezogen, damit
       das Verhaeltnis untereinander erhalten bleibt. */
    .ms-lp-modal-overlay { padding: 14px; align-items: flex-start; }
    .ms-lp-modal { padding: 28px 18px 32px; border-radius: 20px; }
    .ms-lp-modal-head { margin-bottom: 22px; }
    .ms-lp-modal-head span { font-size: 19px; }
    .ms-lp-modal-close { right: -4px; }
    .ms-lp-pop-cards { gap: 22px; }
    .ms-lp-pop-card { padding: 18px 20px; min-height: 0; border-width: 2px; }
    .ms-lp-pop-card h3 { font-size: 19px; }
    .ms-lp-pop-card .ms-lp-price { font-size: 32px; }
    .ms-lp-pop-card .ms-lp-price small { font-size: 12.5px; }
}