/*
 * Landing-page stylesheet for the Tchibo Shop-Aktivierung pages
 * (Views/Home/Index.cshtml = "LP Registration_V2", Views/Home/Confirmation.cshtml =
 * "LP Bestätigung", Views/Home/Share.cshtml = "LP Sharing") and their layout
 * Views/Shared/_LayoutLp.cshtml.
 * ---------------------------------------------------------------------------
 * SOURCE: Figma file L07BFNft08IxkR423a21k1, nodes 63:1554, 54:4951, 54:6147 and
 * 188:607 (390px mobile
 * frames - the file has NO desktop frame; tablet/desktop are derived from the layout
 * system of www.tchibo.ch, see the media queries at the end of this file).
 * Every number below is read from the Figma node geometry / variables, not estimated.
 * Figma variable -> CSS custom property mapping is at the top; component values carry
 * the node id they come from.
 *
 * FONT: the design shows "Interstate" (commercial, not licensed here). Decision
 * 2026-09-07: Tchibo Espresso VF from the theme library is the font of the site, so it
 * is used here as well (weights 300/400/700 map 1:1 onto the variable font).
 */

:root {
    /* Figma variables (get_variable_defs on 54:1424) */
    --lp-navy: #222d56;          /* Tchibo/Color/Department/Mobil Dark            */
    --lp-blue-light: #d6ebf8;    /* Tchibo/Color/Department/Mobil Light           */
    --lp-coffee-light: #f5ede5;  /* Tchibo/Color/Coffee/Light                     */
    --lp-red: #892b2b;           /* Tchibo/Color/Non Food/No 05 - hero band 63:1579 */
    --lp-gold-light-50: #f6e9c7; /* Tchibo/Color/CI/Gold Light 50 - voucher / share cards (54:6920, 58:570) */
    --lp-pink: #ea516d;          /* Tchibo/Color/Non Food/No 08 - "Aktuell in der Filiale" badge (184:897) */
    --lp-clover-gold: #c0a468;   /* fills of the hero clovers 63:1583 (Figma exports) */
    --lp-clover-red: #d93a25;
    --lp-clover-yellow: #fbbb21;
    --lp-stone: #d2cbc9;         /* Tchibo/Color/Non Food/No 01 - steps band 153:665 */
    --lp-gold: #8c723b;          /* CTA: tchibo.ch brand-brand (gold-39) instead of the Figma logo gold #c0a468 -
                                    decision 2026-09-07 for contrast (4.6:1 vs 2.3:1 on white text)     */
    --lp-gold-logo: #c0a468;     /* Tchibo/Color/CI/Gold Dark - footer links, as in Figma           */
    --lp-gold-50: #e0d2b4;       /* var(--tchibo-color-ci-gold-dark-50)           */
    --lp-black: #000000;         /* Tchibo/Color/CI/Black                         */
    --lp-white: #ffffff;         /* Tchibo/Color/CI/White                         */
    --lp-error: #c31d1d;         /* tchibo.ch danger-danger instead of Figma Non Food 06 #d93a25 - decision 2026-09-07 */
    --lp-success: #719c6f;       /* Tchibo/Color/Department/Sustainability (check icon) */
    --lp-border: #c2c5c4;        /* Tchibo/Color/Non Food/No 03 - empty field     */
    --lp-border-filled: #aca49d; /* Tchibo/Color/Non Food/No 04 - filled field    */
    --lp-checkbox-border: #55545b; /* borderColor/neutral/01                      */
    --lp-text-body: #333333;     /* checkbox copy (node 54:4608)                  */
    --lp-shadow-card: 0 0 16px rgba(85, 84, 91, 0.24);   /* form card 54:4472     */
    --lp-shadow-header: 0 4px 2px rgba(0, 0, 0, 0.25);   /* lpheader/mobile 58:680 */
    --lp-font: 'Tchibo Espresso VF', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --lp-gutter: 19.08px;        /* side gutter (390 - 351.84) / 2                 */
    --lp-content: min(640px, calc(100% - 2 * var(--lp-gutter))); /* 351.84 at 390 (Figma), grows on wider phones */
}

/* =====================================================================
   Page shell
   ===================================================================== */
html.lp-html {
    background: var(--lp-white);
}

body.lp-body {
    margin: 0;
    background: var(--lp-white);
    color: var(--lp-black);
    font-family: var(--lp-font);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.lp-page {
    width: 100%;
    overflow-x: hidden;
    min-height: 100vh;        /* short pages (confirmation): footer stays at the bottom */
    display: flex;
    flex-direction: column;
}

.lp-page > main {
    flex: 1 0 auto;
}

.lp-page *,
.lp-page *::before,
.lp-page *::after {
    box-sizing: border-box;
}

.lp-page p {
    margin: 0;
}

/* body weight is 300, so the browser's "bolder" would only reach 400 */
.lp-page strong,
.lp-page b {
    font-weight: 700;
}

/* Header: lpheader/mobile 58:680 - 90.81px high, white, logo 155.7 x 50.78 centred */
.lp-header {
    background: var(--lp-white);
    height: 90.81px;
    padding: 14px 20px 28px;          /* lpheader/mobile 58:680: pt 14, pl 20, pb 28 - logo left */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    box-shadow: var(--lp-shadow-header);
    position: relative;
    z-index: 2;
}

.lp-header__logo {
    display: block;
    width: 155.7px;
    height: 50.78px;
}

/* Footer: footer-horizon 54:4947 - navy, padding 40/25, gap 40 */
.lp-footer {
    background: var(--lp-black);      /* footer-lp-mobile 153:761 */
    padding: 40px 25px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.lp-footer__address {
    color: var(--lp-white);
    font-size: 16px;
    line-height: 1.7;
}

.lp-footer__links {
    color: var(--lp-gold-logo);
    font-size: 14px;
    line-height: 1.5;
}

.lp-footer__links a {
    color: inherit;
    text-decoration: none;
}

.lp-footer__links a:hover {
    text-decoration: underline;
}

/* =====================================================================
   Registration page (54:1424)
   ===================================================================== */
.lp-main {
    display: flex;
    flex-direction: column;
    gap: 30px;            /* 60:1424 gap 30 */
}

/* Hero band 63:1575 + 63:1812: red band, flower strip (390x122, Figma export at 3x)
   at the top, headline and copy below. The text block starts 15px before the strip
   ends (Figma y 196.55 vs 211.69), the band ends 65px after the copy. */
.lp-hero-band {
    position: relative;
    overflow: hidden;
    background: var(--lp-red);
    padding-bottom: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lp-hero-band__art {
    width: 100%;
    height: 122px;
    background: url(img/hero-band.webp) top center no-repeat;
    background-size: 390px 122px;
}

/* Clover field, >= 768px only (the container is filled by lp/js/lp-hero-clovers.js).
   Each clover is a Figma shape used as a mask, so the colour comes from here. */
.lp-hero-band__clovers {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Motion is split over three independent CSS properties so they never fight:
   - scale / rotate / opacity: one-off entrance (lp-clover-in, springy overshoot)
   - transform: endless drift along three waypoints (lp-clover-drift)
   - translate: cursor parallax, set by lp/js/lp-hero-clovers.js (bigger = closer = moves more) */
.lp-clover {
    position: absolute;
    opacity: var(--alpha, 1);
    transform: rotate(var(--rot));
    transition: translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
    animation:
        lp-clover-in 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) var(--in-delay) both,
        lp-clover-drift var(--dur) ease-in-out var(--delay) infinite;
}

/* shape: the Figma clover as a mask, filled with the colour of the parent */
.lp-clover__shape {
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor;
    -webkit-mask: var(--shape) center / contain no-repeat;
    mask: var(--shape) center / contain no-repeat;
}

.lp-clover--gold { color: var(--lp-clover-gold); }
.lp-clover--red { color: var(--lp-clover-red); }
.lp-clover--yellow { color: var(--lp-clover-yellow); }

@keyframes lp-clover-in {
    from { opacity: 0; scale: 0.2; rotate: -90deg; }
    to { opacity: var(--alpha, 1); scale: 1; rotate: 0deg; }
}

@keyframes lp-clover-drift {
    0%   { transform: translate(0, 0) rotate(var(--rot)); }
    33%  { transform: translate(var(--dx1), var(--dy1)) rotate(calc(var(--rot) + var(--spin1))); }
    66%  { transform: translate(var(--dx2), var(--dy2)) rotate(calc(var(--rot) + var(--spin2))); }
    100% { transform: translate(0, 0) rotate(var(--rot)); }
}

@media (prefers-reduced-motion: reduce) {
    .lp-clover {
        animation: none;
        transition: none;
    }
}

.lp-hero-band__inner {
    width: var(--lp-content);
    margin-top: -15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: var(--lp-white);
}

.lp-h1 {
    font-size: 30px;
    font-weight: 400;     /* node 54:3132 renders Interstate Regular */
    line-height: 1.3;
    margin: 0;
}

.lp-body {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
}

/* Content column below the hero: 54:4950 gap 60, column 351.84 */
.lp-sections {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
}

.lp-col {
    width: var(--lp-content);
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* --- Form card 54:4472: white, radius 20, padding 40/20, shadow ---------- */
.lp-form-block {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    width: 100%;
}

.lp-card {
    background: var(--lp-white);
    border-radius: 20px;
    box-shadow: var(--lp-shadow-card);
    padding: 40px 20px;
    width: 100%;
}

.lp-card__title {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--lp-black);  /* 63:1617 */
    margin: 0 0 20px;
}

.lp-fieldset {
    display: flex;
    flex-direction: column;
    gap: 20px;               /* 54:4477 gap 20 */
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.lp-label {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--lp-black);
}

.lp-label--group {
    font-size: 16px;
    line-height: 1.7;
}

/* A <legend> takes no part in its fieldset's flex gap, so the 20px between "Anrede*" and
   the radio row (Figma 63:1618 -> 63:1619) is set here; without it the gap was 4px. */
.lp-fieldset > legend.lp-label--group {
    padding: 0;
    margin-bottom: 20px;
}

/* Radio row 54:4480: gap 20, radio 24px + gap 16 to label. When "Ohne Angabe" wraps on
   phones the second row sits 10px below the first (client feedback 2026-09-30: 20px read as
   a separate group). */
.lp-radios {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 10px;
}

.lp-radio {
    display: inline-flex;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.7;
    color: var(--lp-black);
}

.lp-radio input {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 1px solid var(--lp-checkbox-border);
    border-radius: 50%;
    background: var(--lp-white);
    position: relative;
    cursor: pointer;
    margin-top: 1.5px;       /* optical centre against the 27px line box */
}

.lp-radio input:checked {
    border-color: var(--lp-navy);
}

.lp-radio input:checked::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--lp-navy);
}

.lp-radio input:focus-visible {
    outline: 2px solid var(--lp-navy);
    outline-offset: 2px;
}

/* Input fields (component "Inputfield" 58:1171): label + 4px gap + 48px pill */
.lp-fields {
    display: flex;
    flex-direction: column;
    gap: 30px;               /* 54:4486 gap 30 */
}

.lp-fields--secondary .lp-field {
    padding-top: 20px;       /* 54:4489 / 54:4635 pt 20 */
}

.lp-fields--secondary {
    gap: 0;
}

.lp-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lp-input-wrap {
    position: relative;
}

.lp-input {
    width: 100%;
    min-height: 48px;
    padding: 8px 48px 8px 16px;
    border: 1px solid var(--lp-border);
    border-radius: 5px;               /* 63:1631 _Inputfield_base */
    background: var(--lp-white);
    color: var(--lp-black);
    font: inherit;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    outline: none;
    -webkit-appearance: none;
}

.lp-input::placeholder {
    color: var(--lp-border-filled);
    opacity: 1;
}

.lp-input:focus {
    border-color: var(--lp-navy);
}

/* filled + valid: border No 04 and green check (58:1231 + icon_success) */
.lp-input.lp-input--valid {
    border-color: var(--lp-border-filled);
}

.lp-input--valid + .lp-input__icon {
    display: block;
}

.lp-input__icon {
    display: none;
    position: absolute;
    right: 16px;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    pointer-events: none;
}

.lp-input__icon svg {
    position: absolute;
    inset: 20%;              /* Icons/bold/check_mark sits at inset 20% of the 24px box */
    width: 60%;
    height: 60%;
}

/* error state (58:1385 + _Inputfield/Errortext) */
.lp-input.input-validation-error,
.lp-input.lp-input--error {
    border-color: var(--lp-error);
    color: var(--lp-error);
}

/* Error text only, in red - the Figma "!" icon (img/icon-error.svg) in front of it was dropped
   on team feedback (2026-09-30) */
.lp-error,
.field-validation-error {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--lp-error);
    margin-top: 8px;
}

.field-validation-valid,
.field-validation-error:empty {
    display: none;
}

.lp-required-note {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    text-align: right;
    margin-top: 30px;        /* 54:4475 gap 30 */
}

/* Checkbox 54:4605: 24px box radius 4, gap 16, copy 14px #333 with underlined links */
.lp-checkbox {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
}

.lp-checkbox input {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 1px solid var(--lp-checkbox-border);
    border-radius: 4px;
    background: var(--lp-white);
    position: relative;
    cursor: pointer;
}

.lp-checkbox input:checked {
    background: var(--lp-navy);
    border-color: var(--lp-navy);
}

.lp-checkbox input:checked::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid var(--lp-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.lp-checkbox input.input-validation-error {
    border-color: var(--lp-error);
}

.lp-checkbox input:focus-visible {
    outline: 2px solid var(--lp-navy);
    outline-offset: 2px;
}

.lp-checkbox__text {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--lp-text-body);
    cursor: pointer;
}

.lp-checkbox__text a {
    color: inherit;
    text-decoration: underline;
    text-underline-position: from-font;
}

/* CTA "code" 54:4616: gold, radius 55, padding 15/40, 16px bold white, full width */
.lp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px 40px;
    border: 0;
    border-radius: 55px;
    background: var(--lp-gold);
    color: var(--lp-white);
    font-family: var(--lp-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease;
}

.lp-btn:hover {
    background: #000;        /* tchibo.ch trigger-trigger: primary buttons turn black on hover */
}

.lp-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.global-error {
    display: block;
    color: var(--lp-error);
    font-size: 14px;
    line-height: 1.5;
}

/* display:block above would otherwise override the hidden attribute (reCAPTCHA load error) */
.global-error[hidden] {
    display: none;
}

/* --- Prizes 54:4620: title 30 navy, gap 40, cards 340 wide gap 30 ---------- */
.lp-prizes {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.lp-prizes__list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: calc(100% - 11.84px);      /* 340 in the 351.84 column (63:1696), grows with wider phones */
}

.lp-prize {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lp-prize__visual {
    height: 181px;
    border-radius: 20px;
    background: var(--lp-coffee-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lp-prize__img {
    width: auto;
    object-fit: contain;
}

.lp-prize__img--esperto {
    height: 76.95%;          /* 139.28 / 181 (63:1711) */
}

.lp-prize__img--qbo {
    height: 70.73%;          /* 128.02 / 181 (63:1720) */
}

.lp-prize__text {
    width: 300px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--lp-navy);
}

.lp-prize__title {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    margin: 0;
}

/* Voucher 63:1702: Figma component "Reisegutschein" exported as an image (photo,
   shadow and the rotation are part of the export - it is not rebuilt here). */
.lp-prize__img--voucher {
    height: 73.66%;          /* 133.3 / 181: export of 63:1702 incl. rotation and shadow */
}

/* --- Steps 153:665: stone band, padding 40/20; white card radius 30 ------------ */
.lp-steps-band {
    background: var(--lp-stone);
    padding: 40px 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.lp-steps-band__inner {
    width: 100%;              /* band already has the 20px padding; card is 350 wide in Figma */
    max-width: 351.84px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.lp-steps-card {
    background: var(--lp-white);
    border-radius: 30px;
    padding: 45px 15px 40px 19px;     /* 54:3991 */
    width: 350px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    color: var(--lp-black);
}

.lp-steps-card__title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

/* consent checkbox + its error: the message starts on the label's edge (24px box + 16px gap)
   directly under the text */
.lp-check-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.lp-check-group .field-validation-error {
    padding-left: 40px;
    text-align: left;
}

/* second, optional checkbox (marketing opt-in) directly under the consent checkbox: 16px apart
   instead of the 30px .lp-form-block gap */
.lp-checkbox--optional {
    margin-top: -14px;
}

/* footnote of the steps card ("*Supermärkte ausgeschlossen" for step 3) */
.lp-steps-card__note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.lp-step {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.lp-step__no {
    width: 26.45px;
    height: 26.45px;
    border-radius: 50%;
    background: var(--lp-black);      /* 153:671 */
    color: var(--lp-white);
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-step__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
}

.lp-step__text {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
}

/* =====================================================================
   Confirmation page (54:4951)
   ===================================================================== */
.lp-confirm {
    background: var(--lp-coffee-light);   /* 54:4996 */
    min-height: 568px;
    padding: 40px 0;
    display: flex;
    justify-content: center;
}

.lp-confirm__inner {
    width: var(--lp-content);
    display: flex;
    flex-direction: column;
    gap: 30px;
    color: var(--lp-black);       /* 54:4999 Tchibo/Color/CI/Black */
}

/* "LP Bestätigung" 54:6147 (e-mail confirmed): same band, plus the title pair */
.lp-confirm__titles {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lp-h4 {
    font-size: 20px;             /* Tchibo/Type/Mobile/H4 */
    font-weight: 400;            /* node 54:6175 renders Interstate Regular, like .lp-h1 */
    line-height: 1.3;
    margin: 0;
}

/* store-finder CTA with its footnote centred below the button */
.lp-storefinder {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    align-self: flex-start;
    width: 100%;
}

.lp-storefinder__note {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

@media (min-width: 768px) {
    /* desktop: button and note start on the text edge like the copy above; centring the
       note under the button read as misaligned (client, 2026-09-30) */
    .lp-storefinder {
        width: auto;
        align-items: flex-start;
    }

    .lp-storefinder__note {
        text-align: left;
    }
}

.lp-confirm .lp-btn {
    text-decoration: none;
    align-self: flex-start;      /* left edge of the text column, like the copy above */
    margin-left: 0;              /* beats the desktop .lp-btn auto margins that centre it in the 640px column */
    margin-right: 0;
}

.lp-confirm__body p + p {
    margin-top: 27.2px;      /* one empty 16px/1.7 line in the design */
}

.lp-confirm__body a {
    color: inherit;
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Hero band above the 390px frame width: the Figma strip (390x122) would sit as an island
   in a wider red band, so from 391px the clovers are scattered over the band instead
   (lp/js/lp-hero-clovers.js uses the same 391px breakpoint). */
@media (min-width: 391px) {
    .lp-hero-band {
        padding-top: 110px;
        padding-bottom: 100px;
    }

    .lp-hero-band__art {
        display: none;
    }

    .lp-hero-band__clovers {
        display: block;
    }

    .lp-hero-band__inner {
        position: relative;
        z-index: 1;
        margin-top: 0;
    }
}

/* Phones and small tablets: short pages fill the height down to the footer, and the last
   content block keeps air above the footer (desktop gets that from the footer margin). */
@media (max-width: 767.98px) {
    .lp-main > .lp-text-page--band:last-child,
    .lp-main > .lp-confirm:last-child {
        flex-grow: 1;
    }

    /* only when the page ends in a content column (Share); a full-width band such as the
       steps band of the registration page runs straight into the footer */
    .lp-main > .lp-sections:last-child > .lp-col:last-child {
        padding-bottom: 40px;
    }
}

/* "Jetzt mitmachen" anchors scroll to the form instead of jumping */
@media (prefers-reduced-motion: no-preference) {
    html.lp-html {
        scroll-behavior: smooth;
    }
}

/* =====================================================================
   Tablet / desktop - derived, not designed
   ---------------------------------------------------------------------
   The Figma file only has 390px frames. The wider layout follows the layout
   system of www.tchibo.ch, measured 2026-09-07 on the live site:
     page container   max-width 1920px, side padding 64px (.navigation-container)
     text column      ~1121px (.tp-col-xl-9 = 75% of the 1494px section)
     grid gutter      20px (--grid-gutter-size), row margin 60px (--grid-row-margin)
     header           95px high
   Breakpoints: 768px (tablet, two columns) and 1024px (desktop, three columns).
   Colours, radii and type sizes stay the mobile Figma values; only the arrangement
   changes. Content column caps at 1136px so the 16px body copy keeps a readable
   measure, matching tchibo.ch's ~1121px text column.
   ===================================================================== */
@media (min-width: 768px) {
    :root {
        --lp-desk-container: 1136px;
        --lp-desk-pad: 64px;          /* tchibo.ch side padding */
        --lp-desk-gutter: 20px;       /* tchibo.ch --grid-gutter-size */
        --lp-desk-row: 60px;          /* tchibo.ch --grid-row-margin */
        --lp-content: 100%;
    }

    .lp-header {
        height: 95px;                 /* tchibo.ch header height */
        /* logo on the left edge of the 1136px content container */
        padding: 0 max(var(--lp-desk-pad), calc((100% - var(--lp-desk-container)) / 2 + var(--lp-desk-pad)));
        align-items: center;
    }

    /* hero band: full width and flush with the header, as on mobile. The flower strip
       is replaced by the single clovers, scattered and animated by
       lp/js/lp-hero-clovers.js; the copy sits on the container edge. */
    .lp-main {
        gap: 0;
    }

    .lp-hero-band {
        width: 100%;
        padding: 110px 0 100px;
        align-items: stretch;
    }

    .lp-hero-band__art {
        display: none;
    }

    .lp-hero-band__clovers {
        display: block;
    }

    .lp-hero-band__inner {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: var(--lp-desk-container);
        margin: 0 auto;
        padding: 0 var(--lp-desk-pad);
    }

    .lp-hero-band__inner .lp-body {
        max-width: 640px;
    }

    .lp-sections {
        max-width: var(--lp-desk-container);
        margin: var(--lp-desk-row) auto 0;
        padding: 0 var(--lp-desk-pad);
        width: 100%;
    }

    .lp-col {
        width: 100%;
    }

    /* form: centred card, 640 wide (2 x 300 text column + gutter, tchibo.ch checkout width class) */
    .lp-form-block {
        max-width: 640px;
        margin: 0 auto;
    }

    /* since 63:1671 the second group holds the e-mail field only - full width */
    .lp-fields--secondary {
        grid-template-columns: 1fr;
    }

    .lp-fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--lp-desk-gutter);
    }

    .lp-fields--secondary .lp-field {
        padding-top: 0;
    }

    .lp-fields--secondary {
        margin-top: var(--lp-desk-gutter);
    }

    .lp-btn {
        max-width: 351.84px;          /* keep the Figma button width, centred */
        margin-left: auto;
        margin-right: auto;
    }

    /* prizes: two cards per row on tablet, three on desktop (>= 1024px below) */
    .lp-prizes__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--lp-desk-gutter);
        width: 100%;
        max-width: none;
    }

    .lp-prize__text {
        width: 100%;
    }

    /* steps band: full bleed background, card spans the container, steps in a row */
    .lp-steps-band {
        padding: var(--lp-desk-row) var(--lp-desk-pad);
        border-radius: 20px;
    }

    .lp-steps-band__inner {
        max-width: calc(var(--lp-desk-container) - 2 * var(--lp-desk-pad));
    }

    .lp-steps-card {
        width: 100%;
        max-width: none;
        padding: 45px 40px 40px;
        display: grid;
        grid-template-columns: 1fr;     /* steps stack on tablet, three columns on desktop */
        gap: 30px var(--lp-desk-gutter);
    }

    .lp-steps-card__title {
        grid-column: 1 / -1;
    }

    /* footer: address left, links right */
    .lp-footer {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        /* address and links on the edges of the 1136px content container, like the header logo */
        padding: 40px max(var(--lp-desk-pad), calc((100% - var(--lp-desk-container)) / 2 + var(--lp-desk-pad)));
        margin-top: var(--lp-desk-row);
    }

    .lp-footer__links {
        text-align: right;
    }

    /* confirmation: content card across the 1136px container, the copy using the card's full
       width (team feedback 2026-10-01: a 640px column left an empty beige half, a narrower card
       looked misplaced) */
    .lp-confirm {
        width: 100%;              /* auto margins would otherwise shrink-wrap the flex item */
        max-width: var(--lp-desk-container);
        margin: var(--lp-desk-row) auto 0;
        padding: var(--lp-desk-row) var(--lp-desk-pad);
        border-radius: 20px;
        min-height: 0;
        justify-content: flex-start;
    }

    .lp-confirm__inner {
        width: 100%;
    }

}

@media (min-width: 1024px) {
    .lp-h1 {
        font-size: 36px;              /* one step up from the 30px mobile H1 */
    }

    .lp-prizes__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lp-steps-card {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =====================================================================
   Secondary pages without a Figma frame (Participation, NoRegion, Share)
   ---------------------------------------------------------------------
   Built from the landing-page vocabulary above: the light-blue intro band,
   the white card and the same type scale. Nothing new is invented here.
   ===================================================================== */
.lp-text-page {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.lp-text-page--band {
    background: var(--lp-coffee-light);   /* same band as the confirmation page (54:4996) */
}

.lp-text-page__inner {
    width: var(--lp-content);
    display: flex;
    flex-direction: column;
    gap: 30px;
    color: var(--lp-black);
}

/* CMS rich text (legal copy): keep it readable, inherit the body scale */
.lp-richtext p { margin: 0 0 1em; }
.lp-richtext p:last-child { margin-bottom: 0; }
.lp-richtext h2, .lp-richtext h3 { font-size: 20px; font-weight: 400; line-height: 1.3; margin: 1.5em 0 .5em; }
.lp-richtext ul, .lp-richtext ol { margin: 0 0 1em; padding-left: 1.25em; }
.lp-richtext a { color: inherit; text-decoration: underline; text-underline-position: from-font; }
.lp-richtext strong { font-weight: 700; }

/* Share card */
.lp-share-card {
    background: var(--lp-white);
    border-radius: 20px;
    box-shadow: var(--lp-shadow-card);
    padding: 40px 20px;               /* 188:657 */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Link box 188:714: dashed gold border, radius 5, min-height 48 */
.lp-share-link {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px 16px;
    border: 1px dashed var(--lp-gold);
    border-radius: 5px;
    background: var(--lp-white);
    color: var(--lp-black);
    font: inherit;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    text-align: left;
    width: 100%;
    cursor: pointer;
}

.lp-share-link__text {
    flex: 1 0 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-share-link__icon {
    width: 16px;
    height: 16px;
    flex: none;
}

/* "copied" state (client feedback 2026-09-30: clearer confirmation): green border, the Figma
   check icon (Icons/bold/check_mark, img/icon-check.svg) instead of the copy icon, green text.
   Set by the script in Views/Home/Share.cshtml for 2.5s. */
.lp-share-link.is-copied {
    border-style: solid;
    border-color: var(--lp-success);
}

.lp-share-link__check,
.lp-share-copied__check {
    display: none;
    width: 16px;
    height: 16px;
    flex: none;
    background: var(--lp-success);
    -webkit-mask: url(img/icon-check.svg) center / 14px no-repeat;
    mask: url(img/icon-check.svg) center / 14px no-repeat;
}

.lp-share-link.is-copied .lp-share-link__icon {
    display: none;
}

.lp-share-link.is-copied .lp-share-link__check,
.is-copied > .lp-share-copied__check {
    display: inline-block;
}

.lp-share-link.is-copied .lp-share-link__text,
.lp-share-actions button.is-copied {
    color: var(--lp-success);
    font-weight: 700;
}

.lp-share-actions button.is-copied {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.lp-share-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;                        /* 188:2263 */
}

.lp-share-actions a,
.lp-share-actions button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--lp-black);
    font: inherit;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    text-decoration: underline;
    text-underline-position: from-font;
    cursor: pointer;
}


/* reCAPTCHA v3 badge hidden. Google permits this only if the reCAPTCHA branding is shown
   in the user flow, see .lp-recaptcha-note under the submit button (Views/Home/Index.cshtml).
   https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed */
.grecaptcha-badge {
    visibility: hidden;
}

.lp-recaptcha-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--lp-text-body);
    text-align: center;
}

.lp-recaptcha-note a {
    color: inherit;
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Text pages on tablet/desktop. Must stay BELOW the base .lp-text-page rules above:
   same specificity, so the later rule wins. */
@media (min-width: 768px) {
    /* same container as the confirmation card; without this the inner column took
       --lp-content = 100% and ran edge to edge */
    .lp-text-page {
        width: 100%;
        max-width: var(--lp-desk-container);
        margin: var(--lp-desk-row) auto 0;
        padding: var(--lp-desk-row) var(--lp-desk-pad);
        justify-content: flex-start;
    }

    .lp-text-page--band {
        border-radius: 20px;
    }

    .lp-text-page__inner {
        width: 100%;
        max-width: 800px;         /* readable measure for the legal copy */
    }
}

/* =====================================================================
   Staff app (Tchibo.Contest.Web.App): code form + participation confirmation
   ---------------------------------------------------------------------
   The form reuses the landing-page form classes; only the select and the
   QR helper image are new. The confirmation is the web version of the Figma
   frame "@Teilnahmebestätigung" (54:6502), see Web.App/Views/Home/Confirmation.cshtml.
   ===================================================================== */
.lp-select {
    padding-right: 44px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--lp-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") right 16px center / 12px 8px no-repeat;
    cursor: pointer;
}

/* code form page: air between the CTA and the footer (the registration page has sections there) */
.lp-staff {
    padding-bottom: 40px;
}

.lp-staff-qr img {
    display: block;
    width: 100%;
    border-radius: 20px;
}

/* --- Staff confirmation (Web.App Views/Home/Confirmation.cshtml): the gift box takes the slot
   of the code form's card (.lp-form-block .lp-card, 640px centred on desktop); colours of box
   63:1552 of the Figma mail "@Teilnahmebestätigung" (gold-light, black round icon) --- */
.lp-staff-gift {
    background: var(--lp-gold-light-50);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--lp-black);
    text-align: center;
}

.lp-staff-gift__icon {
    width: 57.92px;
    height: 57.92px;
    margin-bottom: 15px;         /* 20px to the title in 63:1552 */
    border-radius: 50%;
    background: var(--lp-black);
    display: grid;
    place-items: center;
}

.lp-staff-gift__icon::before {
    content: "";
    width: 31.67px;
    height: 31.67px;
    background: var(--lp-white);
    -webkit-mask: url(img/icon-present.svg) center / contain no-repeat;
    mask: url(img/icon-present.svg) center / contain no-repeat;
}

.lp-staff-gift__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

/* Unsubscribe page (Views/Home/Unsubscribe.cshtml, no Figma frame): the form only wraps the
   CTA, which keeps the .lp-confirm .lp-btn placement (left edge, content width) */
.lp-confirm__form {
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* CTA below the copy of a text page (Unavailable: "Zu tchibo.ch"); the 30px above it come
   from the .lp-text-page__inner gap */
.lp-text-page__cta {
    text-decoration: none;
}

@media (min-width: 768px) {
    .lp-text-page__cta {
        margin-left: 0;              /* beats the centring desktop .lp-btn margins */
        margin-right: 0;
    }
}

/* =====================================================================
   Staff app (Web.App, body.lp-body--staff): compact header at every width, and on phones
   (< 768px) a compact hero too, so the code form is visible without scrolling (client
   feedback 2026-09-30). The Registration pages keep the full campaign look.
   ===================================================================== */
.lp-body--staff .lp-header {
    height: 60px;
    padding: 10px 20px;
    align-items: center;
}

.lp-body--staff .lp-header__logo {
    width: 98.1px;                   /* 155.7 x 50.78 scaled to 32px height */
    height: 32px;
}

@media (min-width: 768px) {
    .lp-body--staff .lp-header {
        height: 64px;
        /* same horizontal rule as the desktop .lp-header: logo on the container's content edge */
        padding: 0 max(var(--lp-desk-pad), calc((100% - var(--lp-desk-container)) / 2 + var(--lp-desk-pad)));
    }
}

@media (max-width: 767.98px) {
    .lp-body--staff .lp-hero-band {
        padding: 16px 0;
    }

    .lp-body--staff .lp-hero-band__art {
        display: none;               /* the 122px flower strip; clovers stay on wider screens */
    }

    .lp-body--staff .lp-hero-band__inner {
        margin-top: 0;
        gap: 8px;
    }

    .lp-body--staff .lp-h1 {
        font-size: 24px;
    }

    .lp-body--staff .lp-main {
        gap: 16px;
    }

    .lp-body--staff .lp-card {
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

/* staff confirmation: the two answer buttons below the gift card, stacked on phones, side by
   side from 768px, each at the Figma button width */
.lp-staff-answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

@media (min-width: 768px) {
    .lp-staff-answers {
        flex-direction: row;
        justify-content: center;
        gap: 20px;
    }

    .lp-staff-answers .lp-btn {
        margin: 0;
    }
}

/* secondary button: outline in the brand gold, filled black on hover like the primary */
.lp-btn--secondary {
    background: transparent;
    color: var(--lp-gold);
    box-shadow: inset 0 0 0 2px var(--lp-gold);
}

.lp-btn--secondary:hover {
    background: #000;
    color: var(--lp-white);
    box-shadow: none;
}