/**
 * Membership-Registrierung – Circular Textile Network
 *
 * Farben sind aus der Figma-Vorlage gemessen und treffen sie exakt.
 *
 * Die GROESSEN waren dagegen geschaetzt und wichen teils um mehr als die
 * Haelfte ab (H1 +53 %, Lead -37 %, Feldhoehe +37 %). Sie sind am 26.08.2026
 * neu bestimmt worden — ueber Textbreiten, nicht ueber Buchstabenhoehen:
 * Testshop und Entwurf nutzen beide Roboto, deshalb laesst sich jede gemessene
 * Entwurfsbreite mit `canvas.measureText` in die Schriftgroesse zurueckrechnen,
 * die genau diese Breite ergibt. Massstab: Entwurfs-Frame im Screenshot
 * 1069px = 1250px-Container, Faktor 1,1693.
 *
 * Schriften kommen aus dem Shop-Template. **Keine Condensed:** Die Vorlage ist
 * durchgehend mit normaler Roboto gesetzt — nachgerechnet an der Landingpage
 * mit den Schriftdateien des Shops, dort traf Roboto Bold auf 1px, Condensed
 * lag 35px daneben. Die H1 stand hier faelschlich auf `--ms-condensed`.
 *
 * Alle Regeln sind mit .ms- praefixiert, damit sie das Shop-Layout nicht beeinflussen.
 */

/* Der Seitentitel des Shop-Templates entfaellt – die Hero-Ueberschrift ist die H1. */
.index-heading-wrapper { display: none; }

.ms-page {
    --ms-sage:          #66796E;
    --ms-sage-dark:     #55665C;
    --ms-bordeaux:      #A30A30;
    --ms-bordeaux-dark: #8A0827;
    --ms-required:      #FF383C;
    --ms-card:          #DEE6E1;
    --ms-tile-intro:    #E4E9DF;
    --ms-tile:          #EFF5EA;
    --ms-ink:           #2C2E2D;
    --ms-ink-soft:      #5C5E5A;
    --ms-ink-faint:     #8A8F8C;
    --ms-border:        #66796E;
    --ms-border-soft:   #C8D0CB;

    --ms-radius:        8px;
    --ms-condensed:     "Roboto Condensed", "Archivo Narrow", "Arial Narrow", sans-serif;

    background: #fff;
    color: var(--ms-ink);
    font-size: 16px;
}

/* ---------- HERO ---------- */
.ms-hero {
    /* 479px laut Entwurf (vorher 560). Der Textblock misst dort 355px,
       bleiben je 62px Innenabstand. */
    min-height: 479px;
    background: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)) center/cover no-repeat,
                #4a4f4c url('../img/hero-formular.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    padding: clamp(26px, 4.16vw, 52px) clamp(20px, 4vw, 76px);
}

.ms-hero-inner {
    max-width: 1700px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 60px;
    align-items: center;
}

.ms-hero-content { color: #fff; max-width: 960px; }

.ms-hero h1 {
    /* Keine Condensed, siehe Kopfkommentar. `inherit` holt die Grundschrift des
       Shops; ohne die Regel griffe die Ueberschriftenschrift des Templates. */
    font-family: inherit;
    /* 36,5px: „MITGLIED IM CIRCULAR TEXTILE" misst im Entwurf 558,9px, was bei
       Roboto Bold 37,3px entspricht; die Versalhoehe ergibt 36,2px. Vorher
       standen hier 56px — also gut die Haelfte zu gross. */
    font-size: clamp(27px, 2.92vw, 36.5px);
    font-weight: 700;
    /* Zeilenabstaende aus dem Entwurf: H1 1,23 - Lead 1,20 - Fliesstext 1,32.
       Vorher 1,06 / 1,42 / 1,50; dadurch war der Textblock 446 statt 355px. */
    line-height: 1.23;
    text-transform: uppercase;
    color: #fff;
    max-width: 960px;
    /* Der Entwurf zeigt 72px von H1-Tinte zu Lead-Tinte. `margin` wirkt
       Box-zu-Box, und beide Boxen tragen Ober- bzw. Unterlaengen-Puffer -
       deshalb hier 40px, damit der Tintenabstand stimmt. */
    margin: 0 0 clamp(20px, 3.2vw, 40px);
}

/*
 * Zwei Klassen im Selektor, nicht eine: `.ms-hero p` weiter unten ist
 * Klasse+Element und damit spezifischer als `.ms-hero-lead` allein — der Lead
 * wurde dadurch auf 22px gezogen, obwohl hier 32 standen. Derselbe Fehler wie
 * seinerzeit auf der Landingpage.
 */
.ms-hero .ms-hero-lead {
    max-width: 720px;
    /* 35px aus der Entwurfsbreite (drei Zeilen ergaben 34,9 / 39,5 / 32,8 —
       die Streuung kommt vom Ablesen der Zeilenenden). */
    font-size: clamp(20px, 2.8vw, 35px);
    font-weight: 300;
    line-height: 1.2;
    color: #fff;
    /* 15px Tintenabstand laut Entwurf, als Box-Abstand rund 8px. */
    margin: 0 0 clamp(6px, .64vw, 8px);
}

.ms-hero p {
    max-width: 760px;
    /* 21px laut Entwurfsbreite (gemessen 20,8). */
    font-size: clamp(14px, 1.68vw, 21px);
    font-weight: 300;
    line-height: 1.32;
    color: rgba(255, 255, 255, .92);
    margin: 0;
}

.ms-hero-hinweis { color: rgba(255, 255, 255, .92); align-self: end; }

.ms-hero-hinweis h3 {
    font-size: clamp(13px, .95vw, 17px);
    font-weight: 700;
    margin: 0 0 10px;
    color: #fff;
}

.ms-hero-hinweis p {
    /* 13,4px laut Entwurfsbreite. */
    font-size: clamp(11px, 1.07vw, 13.4px);
    font-weight: 300;
    line-height: 1.45;
}

/* ---------- STEPS ---------- */
.ms-steps-bar {
    background: #fff;
    border-bottom: 1px solid #E4E7E5;
    position: sticky;
    top: 0;
    z-index: 90;
}

.ms-steps-inner {
    max-width: 1700px;
    margin: 0 auto;
    padding: 28px clamp(20px, 3vw, 60px);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    overflow-x: auto;
}

.ms-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    cursor: pointer;
    flex: 1;
    min-width: 96px;
    font-family: inherit;
    padding: 0;
}

.ms-step-circle {
    /* 42px im Entwurf gemessen. */
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--ms-sage);
    color: var(--ms-sage);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 400;
    transition: all .25s ease;
    flex-shrink: 0;
}

.ms-step-label {
    /* 16,6px im Entwurf — dieser Wert war zu KLEIN, anders als die meisten. */
    font-size: 16.6px;
    font-weight: 400;
    color: var(--ms-ink-soft);
    text-align: center;
    line-height: 1.3;
}

.ms-step.active .ms-step-circle { background: var(--ms-sage); border-color: var(--ms-sage); color: #fff; }
.ms-step.active .ms-step-label  { color: var(--ms-ink); font-weight: 700; }

/* ---------- LAYOUT ---------- */
.ms-content {
    max-width: 1700px;
    margin: 0 auto;
    padding: clamp(30px, 3vw, 60px) clamp(20px, 3vw, 60px) 80px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 319px;
    gap: clamp(30px, 4vw, 62px);
    align-items: start;
}

/* Im Figma stehen die Abschnitte auf weissem Grund, ohne Karten.
   Der Abstand zum naechsten Abschnitts-Icon ist im Entwurf fest 54,3 px -
   an zwei Stellen nachgemessen (Unternehmensdaten und Vorteils-Kacheln).
   Vorher stand hier ein vw-Wert; dadurch haing die Seitenhoehe von der
   Fensterbreite ab und war nicht reproduzierbar pruefbar. */
.ms-section { padding: 0 0 54px; }

.ms-section h2 {
    display: flex;
    align-items: center;
    gap: 16px;
    /* 24,4px im Entwurf; hier standen 34px. Betrifft alle sieben Abschnitte. */
    font-size: clamp(19px, 1.95vw, 24.4px);
    font-weight: 400;
    color: var(--ms-sage);
    letter-spacing: .01em;
    text-transform: uppercase;
    /* 37px bis zum ersten Feld laut Entwurf (vorher 30). */
    margin: 0 0 clamp(24px, 2.99vw, 37px);
}

.ms-section h2 img {
    /* Kreis 38,4 px im Entwurf, an zwei Abschnitten nachgemessen. */
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    object-fit: contain;
}

/* ---------- FELDER ---------- */
.ms-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Reihenabstand 28px laut Entwurf (vorher 20). */
    gap: 28px 30px;
    margin-bottom: 22px;
}

.ms-grid-address { grid-template-columns: 2fr 1fr 1fr; }

.ms-group { display: flex; flex-direction: column; }
.ms-group-full { grid-column: 1 / -1; }

.ms-group label,
.ms-group-label {
    font-weight: 700;
    /* Im Entwurf liegen zwischen Beschriftungs-Oberkante und Feld 29,1 px;
       das ergibt bei dieser Zeilenhoehe 10 px Abstand. */
    margin-bottom: 10px;
    font-size: 16px;
    color: var(--ms-ink);
    display: block;
    line-height: 1.35;
}

.ms-group input[type="text"],
.ms-group input[type="tel"],
.ms-group input[type="email"],
.ms-group input[type="number"],
.ms-group select,
.ms-group textarea,
.ms-sonstiges-input,
.ms-employees-row input {
    /* 35px Feldhoehe laut Entwurf: 16px Schrift, Zeilenhoehe 1,2 (19px),
       je 7px Innenabstand plus 1px Rahmen. Vorher 48px durch 12px Abstand. */
    padding: 7px 14px;
    box-sizing: border-box;
    /* Feste Zeilenhoehe statt Faktor: bei `input` setzt der Browser eine eigene
       Vorgabe (gemessen 22,4px statt der 19,2px, die 1,2 ergeben haetten) -
       das Feld war dadurch 38,4 statt 35px hoch. */
    line-height: 19px;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    font-size: 16px;
    font-family: inherit;
    font-weight: 400;
    color: var(--ms-ink);
    width: 100%;
    background: #fff;
}

.ms-group textarea { resize: vertical; min-height: 170px; }

.ms-group input::placeholder,
.ms-group textarea::placeholder,
.ms-sonstiges-input::placeholder,
.ms-employees-row input::placeholder { color: var(--ms-ink-faint); }

.ms-group input:focus,
.ms-group select {
    /* Auswahlfelder folgen der Zeilenhoehe nicht - der Browser setzt eine
       eigene und machte sie 37 statt 35px hoch. Feste Hoehe haelt sie auf dem
       Mass der Textfelder. */
    height: 35px;
}

.ms-group select:focus,
.ms-group textarea:focus,
.ms-sonstiges-input:focus,
.ms-employees-row input:focus {
    outline: none;
    border-color: var(--ms-bordeaux);
    box-shadow: 0 0 0 3px rgba(163, 10, 48, .1);
}

.ms-req { color: var(--ms-required); font-weight: 700; }
.ms-hint { font-weight: 400; }
.ms-mt { margin-top: 20px; }

.ms-lead {
    font-size: 17px;
    font-weight: 400;
    color: var(--ms-ink);
    line-height: 1.5;
    margin: 0 0 30px;
    max-width: 1100px;
}

.ms-group input.is-locked,
.ms-group select.is-locked {
    background: #F1F3F2;
    color: var(--ms-ink-soft);
    cursor: not-allowed;
}

.ms-checkbox-single { margin-bottom: 26px; }
.ms-checkbox-single label { font-weight: 700; font-size: 13.6px; cursor: pointer; }
.ms-checkbox-single input { margin-right: 10px; }

/* ---------- TEXTILIEN ---------- */
.ms-textile-columns { display: grid; grid-template-columns: 2.2fr 1fr; gap: 40px; }

.ms-checkbox-grid { display: grid; gap: 16px 20px; margin-top: 20px; }
.ms-textile-grid { grid-template-columns: repeat(4, 1fr); align-items: start; }
.ms-single-column { grid-template-columns: 1fr; }

/* 9px zwischen Kaestchen und Text laut Entwurf. */
.ms-checkbox-item { display: flex; align-items: center; gap: 9px; }

.ms-checkbox-item input {
    width: 22px;
    height: 22px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--ms-sage);
}

/* Im Figma sind die Auswahl-Beschriftungen fett gesetzt */
.ms-checkbox-item label {
    margin: 0;
    font-weight: 700;
    /* 13,6px laut Entwurf (aus vier Textbreiten der Mengenliste zurueckgerechnet:
       13,4 / 13,4 / 13,6 / 13,8). Mit 16px brachen "Mehr als 120 kg" und
       "Weiss ich nicht" zweizeilig um. */
    font-size: 13.6px;
    line-height: 1.3;
    cursor: pointer;
}

/*
 * Die beiden Textfelder enden im Entwurf auf einer Linie (195,1 px links,
 * 156,1 px rechts). Der Unterschied gleicht aus, dass die rechte Beschriftung
 * mehrzeilig ist und ihr Feld nach unten schiebt.
 *
 * Feste Hoehen loesen das NICHT zuverlaessig: Wie viele Zeilen die rechte
 * Beschriftung braucht, haengt von der Fensterbreite ab - bei 1500px sind es
 * zwei, schmaler drei. Mit festen Werten fluchten die Kanten dann nur bei
 * genau einer Breite.
 *
 * Stattdessen fuellt jedes Feld den Rest seiner Spalte. Beide Spalten sind als
 * Rasterzellen ohnehin gleich hoch, also enden auch die Felder gleich - bei
 * jeder Zeilenzahl. Dass das linke dabei hoeher wird als das rechte, ergibt
 * sich von selbst und entspricht dem Entwurf.
 */
.ms-textile-columns > div {
    display: flex;
    flex-direction: column;
}
.ms-textile-columns > div > .ms-group.ms-mt {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ms-textile-columns > div > .ms-group.ms-mt textarea {
    flex: 1;
    min-height: 156px;
}

.ms-checkbox-sonstiges { display: flex; flex-direction: column; gap: 10px; }
/* Das Freitextfeld ist im Entwurf 115px breit und ragt damit etwas ueber seine
   Rasterspalte hinaus; mit den 99px der Spalte war der Platzhalter
   abgeschnitten. Auf schmalen Fenstern bleibt die Spaltenbreite die Grenze. */
.ms-sonstiges-input { width: 115px; max-width: 100%; }
@media (max-width: 768px) { .ms-sonstiges-input { width: 100%; } }
/* Keine eigene Groesse fuer das Sonstiges-Feld: Es steht bereits im Feldblock
   weiter oben. Eine zweite Regel hier hat dessen Innenabstand ueberschrieben,
   waehrend die feste Zeilenhoehe von dort blieb - das Feld wurde 41 statt 35px. */

/* ---------- MEMBERSHIP ---------- */
.ms-membership-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 24px 0 40px;
}

.ms-membership-card {
    display: block;
    border: 2px solid transparent;
    background: var(--ms-card);
    padding: 7px 12px 13px;
    /* 6,6px im Entwurf gemessen; 7px lagen mit +6 % ausserhalb der Toleranz. */
    border-radius: 6.6px;
    line-height: 0;
    cursor: pointer;
    transition: all .25s ease;
    margin: 0;
}

/* Auswahlfeld und Titel stehen im Figma nebeneinander */
.ms-membership-card input[type="radio"] {
    width: 17px;
    height: 17px;
    margin: 0 11px 0 0;
    cursor: pointer;
    vertical-align: middle;
    accent-color: var(--ms-sage);
}

.ms-membership-card h4 {
    display: inline;
    font-size: 16.4px;
    font-weight: 700;
    line-height: 17.2px;
    color: var(--ms-ink);
    margin: 0;
}

.ms-membership-subtitle {
    font-size: 13.4px;
    font-weight: 400;
    color: var(--ms-ink-soft);
    line-height: 1.19;
    margin: 8px 0 12px 28px;
    /* Der Entwurf sperrt den Text um 2 % (im Dev-Modus abgelesen). */
    letter-spacing: .02em;
}

.ms-membership-price {
    font-size: 27.4px;
    font-weight: 700;
    color: var(--ms-ink);
    margin-left: 28px;
    line-height: 1.1;
    white-space: nowrap;
}

.ms-membership-period {
    font-size: 13.4px;
    font-weight: 400;
    color: var(--ms-ink-soft);
    margin-left: 6px;
}

.ms-membership-card:hover { border-color: var(--ms-sage); }

.ms-membership-card.selected {
    border-color: var(--ms-bordeaux);
    box-shadow: 0 0 0 3px rgba(163, 10, 48, .12);
}

.ms-employees-row { display: flex; align-items: center; gap: 20px; margin-bottom: 44px; flex-wrap: wrap; }
.ms-employees-row label { font-weight: 700; font-size: 16px; color: var(--ms-ink); margin: 0; }
.ms-employees-row input { width: 220px; }

/* ---------- VORTEILE ---------- */
.ms-benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 8px 0 0; }

.ms-benefit-card {
    background: var(--ms-tile);
    padding: 17px 23px 21px;
    border-radius: 18px;
    min-height: 179px;
    display: flex;
    flex-direction: column;
}

.ms-benefit-intro {
    background: var(--ms-tile-intro);
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.ms-benefit-intro-title { font-size: 21.7px; font-weight: 700; line-height: 1.22; color: var(--ms-ink); }
.ms-benefit-arrow { width: 30px; height: 30px; color: var(--ms-ink); flex-shrink: 0; }

.ms-benefit-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 0;
}

.ms-benefit-num { font-size: 12.2px; color: var(--ms-ink-soft); letter-spacing: .04em; }
/* Die Symbole sind seit dem 27.08. die Bilddateien aus dem Entwurf statt
   nachgebauter SVGs - sie stimmen damit in der Form, nicht nur in der Groesse.
   `object-fit` haelt das Seitenverhaeltnis, falls eine Datei nicht quadratisch
   ist. */
.ms-benefit-icon {
    /* 49px statt 44: Die PNG-Dateien haben einen transparenten Rand, die
       Zeichnung darin misst beim Netzwerk-Symbol 420x482 von 488x490. Bei einer
       44px-Box erscheint sie deshalb nur 37,9x43,5 gross - der Entwurf verlangt
       41,7x48,3. Mit 49px trifft die sichtbare Zeichnung 42,1x48,2. */
    width: 49px;
    height: 49px;
    object-fit: contain;
    color: var(--ms-ink);
    flex-shrink: 0;
}
.ms-benefit-text { font-size: 16.3px; font-weight: 400; line-height: 1.18; color: var(--ms-ink); margin-top: auto;
    /* Der Entwurf sperrt den Text um 2 % (im Dev-Modus abgelesen). */
    letter-spacing: .02em;
}

/*
 * AUSWAHLFELDER - einheitliche Form nach Entwurf
 * Der Entwurf zeichnet ueberall eckige Kaestchen mit leicht abgerundeten Ecken,
 * auch dort, wo funktional ein Radio steht. Browser zeichnen `type="radio"`
 * dagegen rund. Am Beleg figma-4072-4-textilien-menge.png gemessen:
 * Kaestchen 17,2 px, Eckradius 2,6 px, Rahmen rund 1,5 px.
 */
.ms-page input[type="checkbox"],
.ms-page input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--ms-border);
    border-radius: 2.6px;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-block;
    position: relative;
    margin: 0;
}
.ms-page input[type="checkbox"]:checked,
.ms-page input[type="radio"]:checked {
    background: var(--ms-sage);
    border-color: var(--ms-sage);
}
/* Haken bzw. Punkt in Weiss, damit die Auswahl auf der Fuellung lesbar ist. */
.ms-page input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4.5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ms-page input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 3.5px;
    border-radius: 1px;
    background: #fff;
}
.ms-page input[type="checkbox"]:focus-visible,
.ms-page input[type="radio"]:focus-visible {
    outline: 2px solid var(--ms-bordeaux);
    outline-offset: 2px;
}

/* ---------- ZUSTIMMUNGEN ---------- */
.ms-consents { display: flex; flex-direction: column; gap: 26px; }
.ms-consent-item { display: flex; align-items: flex-start; gap: 9px; }

.ms-consent-item input {
    margin: 2px 0 0;
    width: 17px;
    height: 17px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--ms-sage);
}

.ms-consent-item label {
    margin: 0;
    font-weight: 400;
    font-size: 16.3px;
    line-height: 1.26;
    cursor: pointer;
    max-width: 1150px;
}

.ms-consent-item a { color: inherit; font-weight: 700; text-decoration: underline; }
.ms-consent-item a:hover { color: var(--ms-bordeaux); }

/* ---------- ZAHLUNG ---------- */
.ms-payment-list { margin: 20px 0 26px; }

.ms-payment-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--ms-border-soft);
    cursor: pointer;
    max-width: 900px;
    margin: 0;
}

.ms-payment-option input[type="radio"] {
    width: 22px;
    height: 22px;
    cursor: pointer;
    accent-color: var(--ms-sage);
}

.ms-payment-option span { font-weight: 700; font-size: 16px; color: var(--ms-ink); }

.ms-form-buttons { display: flex; gap: 14px; margin-top: 36px; }

.ms-btn {
    padding: 16px 34px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background .25s ease;
    font-family: inherit;
}

.ms-btn-primary { background: var(--ms-bordeaux); color: #fff; }
.ms-btn-primary:hover { background: var(--ms-bordeaux-dark); }

/* ---------- SUMMARY ---------- */
.ms-summary-box {
    border: 1px solid var(--ms-bordeaux);
    border-radius: 0 0 20px 20px;
    position: sticky;
    top: 130px;
    overflow: hidden;
    background: #fff;
}

.ms-summary-header {
    background: var(--ms-bordeaux);
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 9px 16px;
    letter-spacing: .04em;
    font-size: 22.7px;
    line-height: 1.17;
}

.ms-summary-body { padding: 35px 24px 23px; }

.ms-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 0;
    font-size: 13.2px;
    line-height: 1.17;
}

.ms-summary-label { color: var(--ms-ink-soft); font-weight: 400; }

/* Membership und Laufzeit stehen im Figma untereinander, nicht nebeneinander */
.ms-summary-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    margin-bottom: 21px;
}

.ms-summary-body .ms-summary-row > span:last-child {
    font-size: 16.2px;
    font-weight: 700;
    color: var(--ms-ink);
}

/* Preis netto steht im Figma so gross wie der Gesamtbetrag */
.ms-summary-body .ms-summary-row:nth-child(3) { margin-top: 42px; }
.ms-summary-body .ms-summary-row:nth-child(3) > span:last-child { font-size: 21.4px; }
.ms-summary-body .ms-summary-row:nth-child(4) { margin-top: 7px; }

.ms-summary-total {
    border-top: 2px solid var(--ms-bordeaux-soft, #E8D3D9);
    margin-top: 12px;
    padding-top: 2px;
    font-weight: 700;
    font-size: 13.6px;
}

/* Zwei Klassen im Selektor, sonst schlaegt die Zeile darueber
   (`.ms-summary-body .ms-summary-row > span:last-child`, Spezifitaet 0,3,1)
   diese Regel und der Gesamtbetrag steht auf 16,2 statt 21,4px. */
.ms-summary-body .ms-summary-total > span:last-child { font-size: 21.4px; }

/* ---------- MELDUNGEN ---------- */
.ms-alert { padding: 18px 22px; border-radius: var(--ms-radius); margin-bottom: 24px; font-size: 16px; line-height: 1.5; }
.ms-alert-success { background: var(--ms-tile); border-left: 4px solid var(--ms-sage); color: #33463C; }
.ms-alert-error { background: #FDF0F3; border-left: 4px solid var(--ms-bordeaux); color: #7A1226; }
.ms-alert ul { margin: 10px 0 0 20px; }

/* Hinweisbox mit rundem Ausrufezeichen, wie im Figma */
.ms-info-box {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 0;
    font-size: 12.1px;
    line-height: 1.15;
    color: var(--ms-ink-soft);
    margin-top: 45px;
}

.ms-info-box::before {
    content: "!";
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ms-bordeaux);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ms-info-box a { color: var(--ms-bordeaux); font-weight: 400; text-decoration: underline; }

/* Im Zahlungsabschnitt steht der Hinweis als Block, nicht in der Sidebar */
.ms-section .ms-info-box {
    max-width: 900px;
    font-size: 14px;
    line-height: 1.45;
    margin-top: 18px;
    padding: 18px 0 0;
    border-top: 1px solid var(--ms-border-soft);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px) {
    .ms-content,
    .ms-hero-inner { grid-template-columns: minmax(0, 1fr); }
    .ms-summary-box { position: static; order: -1; }
    .ms-hero-hinweis {
        align-self: start;
        border-top: 1px solid rgba(255, 255, 255, .3);
        padding-top: 22px;
        max-width: 900px;
    }
    .ms-textile-columns { grid-template-columns: 1fr; gap: 30px; }
    .ms-textile-grid { grid-template-columns: repeat(3, 1fr); }
    .ms-benefits-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .ms-page { font-size: 15px; }
    .ms-grid,
    .ms-grid-address { grid-template-columns: 1fr; }
    .ms-textile-grid { grid-template-columns: repeat(2, 1fr); }
    .ms-benefits-grid { grid-template-columns: 1fr; }
    .ms-membership-cards { grid-template-columns: 1fr; }
    .ms-hero { min-height: 0; }
    .ms-section h2 { font-size: 21px; gap: 12px; }
    .ms-section h2 img { width: 38px; height: 38px; }
    .ms-employees-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .ms-employees-row input { width: 100%; }
    .ms-group textarea { min-height: 130px; }

    /* Die Kaestchen sind nach Entwurf klein. Auf Touch waere das zu wenig zum
       Treffen, deshalb bekommen die Beschriftungen eine groessere
       Trefferflaeche - der negative Aussenabstand haelt das Layout unveraendert.
       Das gilt fuer ALLE Auswahlfelder des Formulars, nicht nur die
       Zustimmungen: Ein Pruefer fand, dass 18 von 27 Feldern darunter lagen,
       weil die Regel zuerst nur die Zustimmungen erfasste. */
    .ms-consent-item label,
    .ms-payment-option label,
    .ms-checkbox-item label,
    .ms-checkbox-single label,
    /* `.ms-vat-exempt` IST das Label - es fehlte hier und blieb als einziges
       Feld unter 44px (ein Pruefer fand es bei 768px mit 24,6px). */
    label.ms-vat-exempt { padding: 12px 0; margin: -12px 0; }
    .ms-consent-item input,
    .ms-checkbox-item input,
    .ms-checkbox-single input,
    .ms-vat-exempt input { width: 24px; height: 24px; }

    /* Die Zeilenabstaende der Raster muessen den negativen Aussenabstand
       ausgleichen, sonst ruecken die Zeilen zusammen. */
    .ms-checkbox-grid { gap: 16px 20px; }
    .ms-checkbox-item { align-items: center; }
}

@media (max-width: 480px) {
    .ms-textile-grid { grid-template-columns: 1fr; }
}

/* ---------- ERGAENZUNGEN AUS DER SPEZIFIKATION ---------- */

/* Sechster Vorteil: laengerer Text, spannt ueber die volle Rasterbreite (Spez Kap. 6) */
.ms-benefit-wide { grid-column: 1 / -1; min-height: 0; }
.ms-benefit-wide .ms-benefit-head { margin-bottom: 18px; }

/* Hinweis bei unpassender Mitarbeiterzahl (Spez Kap. 5.2) */
.ms-employee-hint {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #FDF6E7;
    border-left: 4px solid #C8912B;
    border-radius: var(--ms-radius);
    padding: 14px 18px;
    font-size: 15px;
    line-height: 1.45;
    color: #6B4E12;
    margin: -22px 0 34px;
    max-width: 900px;
}

.ms-employee-hint[hidden] { display: none; }

/* Erfolgsansicht nach dem Absenden (Spez Kap. 13) */
.ms-success {
    max-width: 760px;
    padding: clamp(30px, 4vw, 60px) 0;
}

.ms-success-icon {
    width: 68px;
    height: 68px;
    color: var(--ms-sage);
    margin-bottom: 26px;
}

.ms-success h2 {
    font-family: var(--ms-condensed);
    font-size: clamp(26px, 2.6vw, 44px);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ms-ink);
    margin: 0 0 24px;
    line-height: 1.1;
}

.ms-success p { font-size: 17px; line-height: 1.6; margin: 0 0 18px; color: var(--ms-ink); }

.ms-success-contact { color: var(--ms-ink-soft); }
.ms-success-contact a { color: var(--ms-bordeaux); font-weight: 700; }

.ms-btn-link { display: inline-block; text-decoration: none; margin-top: 16px; }
.ms-btn-link:hover { color: #fff; text-decoration: none; }

/* Zweiter Absatz der Gaia-Hinweisbox (Vertragshinweis, Spez Kap. 19) */
.ms-hero-hinweis p + p { margin-top: 12px; }

/* Erfolgsseite laeuft einspaltig, ohne Auswahl-Sidebar */
.ms-content-success { grid-template-columns: minmax(0, 1fr); }

/* Feste Zahlungsart, wenn nur eine zur Auswahl steht (Spez Kap. 9) */
.ms-payment-fixed {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--ms-tile);
    border-radius: var(--ms-radius);
    padding: 22px 24px;
    max-width: 900px;
    margin-bottom: 8px;
}

.ms-payment-fixed-icon { width: 34px; height: 34px; color: var(--ms-sage); flex-shrink: 0; margin-top: 2px; }
.ms-payment-fixed strong { display: block; font-size: 17px; margin-bottom: 8px; color: var(--ms-ink); }
.ms-payment-fixed p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ms-ink-soft); }

/* Ausnahme "keine Umsatzsteuer-ID" unter dem Feld (Spez Kap. 4.1) */
.ms-vat-exempt {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ms-ink-soft);
    cursor: pointer;
}

.ms-vat-exempt input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--ms-sage); }
.ms-group input:disabled { background: #F1F3F2; color: var(--ms-ink-faint); cursor: not-allowed; }

/*
 * Einbettung ins Shop-Seitenlayout: Die gesamte Seite sitzt im Container des
 * Shops (1250px) - auch Hero und Schrittleiste enden an derselben Kante wie
 * Breadcrumb, Header und Footer.
 */
.ms-page {
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
}

.ms-content,
.ms-steps-inner,
.ms-hero-inner {
    max-width: 100%;
}