@font-face {
    font-family: 'Hooligan';
    src: url('/assets/fonts/hooligan.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}
/* NJ5 is the handwriting the printed Länderbriefe use since August - the scan
   and the name dropped into it are the same face now. Cn8 stays as the fallback
   for the older scans. */
@font-face {
    font-family: 'Cn8';
    src: url('/assets/fonts/cn8.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'NJ5';
    src: url('/assets/fonts/nj5.woff2') format('woff2');
    font-weight: normal;
    /* block, not swap: the name is placed by NJ5 metrics and would sit visibly
       wrong in the fallback face for the first moments */
    font-display: block;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/assets/fonts/Satoshi-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/assets/fonts/Satoshi-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/assets/fonts/Satoshi-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

:root {
    --blue: #2f5496;
    --blue-light: #5075c4;
    --blue-pale: #eef2f9;
    --coral: #ff6464;
    --coral-dark: #f04c4c;
    --yellow: #ffc000;
    --green: #60c530;
    --ink: #1d2b45;
    --muted: #5a6b8c;
    --line: #dfe5ef;
    --paper: #fffdf6;
}

* { box-sizing: border-box; }

/* Layout rules with their own display would otherwise beat the hidden attribute */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: 'Satoshi', 'Helvetica Neue', Arial, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink);
    background: #fff;
}

h1, h2, legend {
    font-family: 'Hooligan', 'Satoshi', sans-serif;
    color: var(--blue);
    line-height: 1.15;
    font-weight: normal;
}
h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin: 0 0 .5em; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 .6em; }

a { color: var(--blue); }
img { max-width: 100%; height: auto; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Grid items default to min-width:auto and would propagate their
   min-content width into the track, overflowing small viewports */
.hero > *, .packages > *, .letter-grid > *,
.testimonials-grid > *, .addon-cards > *,
.summary-grid > *, .thankyou-steps > * { min-width: 0; }
body.is-embed { padding: 8px 0; }

/* Header / Footer */
/* Light blue matches the live shop so the two sites read as one brand */
.topbar {
    background: var(--blue-light);
    color: #fff;
    font-size: .82rem;
    padding: 11px 20px;
}
/* Contact left, rating optically centred. The empty third column is what keeps
   the rating on the page centre, exactly like the live shop */
.topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar-contacts { display: inline-flex; align-items: center; gap: 28px; }
.topbar-contact { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar-rating { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
/* Star fill like the live shop: grey row below, gold row clipped to the average */
.topbar-stars { position: relative; display: inline-block; letter-spacing: 2px; line-height: 1; }
.topbar-stars-bg { color: rgba(255, 255, 255, .4); }
.topbar-stars-fill {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--yellow);
    overflow: hidden;
    white-space: nowrap;
}
.topbar-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.topbar-badge:hover { text-decoration: none; }
/* Native size, no backing plate - the seal carries its own shape like on the live shop */
.topbar-badge img { height: 15px; width: auto; }
.promo-banner {
    background: var(--yellow);
    color: var(--blue);
    font-weight: 700;
    text-align: center;
    padding: 9px 14px;
    font-size: .95rem;
}
.site-header { display: flex; justify-content: center; padding: 20px 20px 12px; }
.logo-link img { display: block; max-width: min(385px, 86vw); height: auto; }

.usp-bar {
    margin-top: 64px;
    background: var(--blue-pale);
    display: flex;
    justify-content: center;
    gap: clamp(18px, 4vw, 56px);
    flex-wrap: wrap;
    padding: 16px 20px;
    color: var(--blue);
    font-weight: 700;
    font-size: .95rem;
}
.usp-item { display: inline-flex; align-items: center; gap: 9px; }
.site-footer {
    background: var(--blue-light);
    color: #fff;
    padding: 36px 20px 24px;
    font-size: .95rem;
}
.footer-withdrawal {
    display: inline-block;
    margin-top: 14px;
    font-weight: 700;
    white-space: nowrap;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: space-between;
}
.footer-col strong { display: block; margin-bottom: 8px; }
.footer-legal { display: flex; flex-direction: column; gap: 5px; }
.footer-logos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.footer-logos img { background: #fff; border-radius: 6px; padding: 2px 6px; height: 34px; width: auto; }
.footer-note {
    max-width: 1200px;
    margin: 26px auto 0;
    border-top: 1px solid rgba(255, 255, 255, .25);
    padding-top: 18px;
    color: rgba(255, 255, 255, .85);
    font-size: .85rem;
}

/* Legal modal */
.legal-modal {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(19, 28, 46, .8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.legal-modal.is-hidden { display: none; }
.legal-modal-panel {
    position: relative;
    background: #fff;
    width: min(820px, 96vw);
    height: 86vh;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
.legal-modal-panel iframe { width: 100%; height: 100%; border: 0; }
.legal-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: var(--blue-pale);
    color: var(--blue);
    font-size: 1.5rem;
    cursor: pointer;
}
.legal-modal-close:hover { background: var(--line); }

/* Buttons */
.btn {
    display: inline-block;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    padding: 12px 26px;
    transition: transform .08s ease, background .15s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--coral); color: #fff; box-shadow: 0 6px 16px rgba(255, 100, 100, .35); }
.btn-primary:hover { background: var(--coral-dark); }
.btn-secondary { background: #fff; color: var(--blue); border: 2px solid var(--blue); }
.btn-lg { padding: 15px 34px; font-size: 1.08rem; }
.btn-xl { padding: 18px 42px; font-size: 1.15rem; width: 100%; }

/* Hero + packages */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 40px;
    align-items: start;
    padding-top: 24px;
}
.hero-media img { border-radius: 16px; }
/* Desktop: one large slide, the rest waits in the DOM for the phone carousel.
   contain, not cover: the artwork carries headlines at its edges and one image
   is 3:2 - cropping it swallows part of the package shot */
.gallery-stage { position: relative; }
.gallery-slide {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
    cursor: zoom-in;
    display: none;
}
.gallery-slide.is-active { display: block; }
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(19, 28, 46, .88);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox.is-hidden { display: none; }
.lightbox-img {
    max-width: min(90vw, 900px);
    max-height: 86vh;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    cursor: default;
    background: #fff;
    padding: 14px;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
    position: absolute;
    background: rgba(255, 255, 255, .12);
    border: 0;
    color: #fff;
    font-size: 1.6rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255, 255, 255, .28); }
.lightbox-close { top: 18px; right: 18px; font-size: 2rem; }
.lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gallery-thumb {
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    flex: none;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb.is-active { border-color: var(--blue); }
.gallery-thumb:hover { border-color: var(--blue-light); }
.eyebrow {
    color: var(--coral);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .8rem;
    margin: 0 0 8px;
}
.hero-sub { margin: 0 0 10px; }

/* One shape for every section headline: red kicker, heading below, both centred */
.section-head { text-align: center; margin-bottom: 22px; }
.section-head h2 { margin: 0; }
.section-head .eyebrow { margin-bottom: 4px; }
.rating-line { color: var(--muted); font-size: .92rem; margin: 0 0 20px; }
.stars { color: var(--yellow); letter-spacing: 2px; margin-right: 4px; }

.packages {
    border: 0;
    padding: 0;
    margin: 0 0 18px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.packages legend {
    font-size: 1.05rem;
    margin-bottom: 10px;
    color: var(--ink);
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
}
.package {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 2px solid var(--line);
    border-radius: 14px;
    padding: 30px 12px 12px;
    cursor: pointer;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.package input { position: absolute; opacity: 0; pointer-events: none; }
.package:hover { border-color: var(--blue-light); }
.package.is-selected {
    border-color: var(--blue);
    box-shadow: 0 8px 22px rgba(47, 84, 150, .18);
    background: var(--blue-pale);
}
.package-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--blue);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.package-badge.badge-crown { background: var(--coral); }
.package-months { font-weight: 900; font-size: 1.02rem; }
.package-monthly { color: var(--blue); font-weight: 900; font-size: 1.05rem; white-space: nowrap; }
.package-monthly small { font-size: .7rem; font-weight: 700; color: var(--muted); }
.package-total { font-size: .78rem; color: var(--muted); }
.package-bonus { font-size: .72rem; color: var(--green); font-weight: 700; }

.price-box {
    border: 2px solid var(--blue);
    border-radius: 16px;
    padding: 18px 20px;
    background: #fff;
}
.price-box-main { margin: 0 0 4px; font-size: 1.25rem; }
.price-box-main strong { color: var(--blue); font-size: 1.5rem; }
.price-monthly { color: var(--muted); font-size: 1rem; }
.price-box-note { margin: 0 0 14px; color: var(--muted); font-size: .88rem; }
.price-box .btn { width: 100%; }

/* Letter teaser */
.letter-teaser { background: var(--blue-pale); margin-top: 56px; padding: 44px 0 48px; }
.letter-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 40px;
    /* Top aligned: the letter is much taller than the copy, centring left it
       floating in the middle of the section */
    align-items: start;
}
.letter-input-label { display: block; font-weight: 700; margin-bottom: 6px; }
#child-name-input {
    width: 100%;
    max-width: 320px;
    padding: 12px 16px;
    font-size: 1.1rem;
    border: 2px solid var(--blue);
    border-radius: 10px;
    font-family: inherit;
}
.letter-cta { margin-top: 6px; }
.letter-paper {
    position: relative;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 14px 34px rgba(29, 43, 69, .18);
    padding: 26px 24px 18px;
    transform: rotate(-1.2deg);
}
.letter-real {
    position: relative;
    overflow: hidden;
    /* The excerpt ends mid-sentence on purpose - the fade says "it goes on" */
    -webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
}
/* Container units keep the overlaid name locked to the scan at every width, and
   they survive the mobile zoom because the query container is the image itself */
.letter-real-inner {
    position: relative;
    width: 100%;
    container-type: inline-size;
}
.letter-real img { display: block; width: 100%; }
/* Position derived from the print template and then measured against the scan:
   the name starts where "Konnichiwa" ends and sits on its baseline. All values
   in cqw, so they hold at every width and survive a taller excerpt. */
.letter-real-name {
    position: absolute;
    left: 22.06%;
    /* Negative on purpose: NJ5 carries a tall ascent, so the line box starts
       above the scan. Measured against the rendered scan so the name sits on
       "Konnichiwa"s baseline - plus a touch, because the sheet is tilted and a
       word further right reads as too high against the horizontal. */
    top: -1.43cqw;
    font-family: 'NJ5', 'Cn8', cursive;
    /* Same point size the print template sets the letter in (26.275pt) */
    font-size: 4.82cqw;
    /* Room for NJ5's tall ascenders - at line-height 1 the box clips them */
    line-height: 1.8;
    color: var(--coral);
    /* Stop before the flag doodle - the printed letter has the same limit */
    max-width: 44.5%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Contents + trust */
.contents { margin-top: 56px; }
.contents-grid { max-width: 700px; margin: 0 auto; }
.check-list, .trust-list { list-style: none; padding: 0; margin: 0 0 18px; }
/* The list itself is centred as a block, its lines stay left aligned - otherwise
   it sits visibly left of the button underneath it */
.check-list { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.check-list li, .trust-list li { padding-left: 30px; position: relative; margin-bottom: 9px; }
.check-icon { position: absolute; left: 0; top: 0; }
.trust-list li::before { content: '\2605'; position: absolute; left: 2px; color: var(--yellow); }
.trust-list { border-top: 1px dashed var(--line); padding-top: 14px; color: var(--muted); font-size: .95rem; }

/* Video */
.video-section { margin-top: 56px; text-align: center; }
.video-inner video {
    width: 100%;
    max-width: 420px;
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(29, 43, 69, .18);
}
.video-hashtags {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    font-family: 'Hooligan', sans-serif;
    font-size: 1.3rem;
    margin-top: 18px;
}
.tag-blue { color: var(--blue); }
.tag-red { color: var(--coral); }
.tag-yellow { color: var(--yellow); }

/* Seal bar */
.seals-band {
    margin-top: 48px;
    background: #eceef2;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 26px 0;
}
.seals {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(26px, 9vw, 120px);
    flex-wrap: wrap;
}
.seals img { max-height: 120px; width: auto; max-width: 190px; object-fit: contain; }

/* Coupon field, folded away until asked for */
.coupon-toggle { margin-top: 14px; }
.coupon-toggle > summary {
    cursor: pointer;
    color: var(--muted);
    font-size: .92rem;
    list-style: none;
}
.coupon-toggle > summary::-webkit-details-marker { display: none; }
.coupon-toggle > summary::before { content: '+ '; font-weight: 700; }
.coupon-toggle[open] > summary::before { content: '\2212  '; }
.coupon-toggle > summary:hover { color: var(--blue); }
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Repeated conversion prompts between the content blocks */
.mid-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 38px 0 0;
    text-align: center;
}
.mid-cta span { color: var(--muted); font-size: .88rem; }
.hero-quick-cta { display: none; }

/* Testimonials (Trusted Shops) */
/* Tinted band so the reviews read as their own section, not as page background */
.testimonials-band { margin-top: 56px; background: var(--blue-pale); padding: 48px 0; }
.testimonials-score { color: var(--muted); margin-bottom: 22px; }
.testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.testimonial-card {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 20px;
    background: #fff;
}
.testimonial-rating { margin: 0 0 6px; font-size: .85rem; color: var(--muted); }
.testimonial-title { font-weight: 900; margin: 0 0 6px; color: var(--blue); }
.testimonial-text { margin: 0 0 10px; font-size: .93rem; }
.testimonial-card footer { color: var(--muted); font-size: .85rem; }

/* FAQ */
.faq { margin-top: 56px; max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { font-weight: 700; cursor: pointer; color: var(--blue); }
.faq-cta { text-align: center; margin-top: 32px; }

/* Resume bar (cart substitute for the funnel) */
.resume-bar {
    background: var(--blue-pale);
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
    margin-bottom: 16px;
}
.resume-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    font-weight: 700;
    color: var(--blue);
}
.resume-btn { padding: 7px 18px; font-size: .9rem; }

/* Addon upsell cards */
.addon-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.addon-card {
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
    gap: 10px;
    transition: border-color .15s ease, background .15s ease;
}
.addon-card:hover { border-color: var(--blue-light); }
.addon-card:has(input:checked) { border-color: var(--green); background: #f4fbef; }
.addon-card img { border-radius: 10px; aspect-ratio: 1; object-fit: cover; }
.addon-body { display: flex; flex-direction: column; gap: 2px; }
.addon-body small { color: var(--muted); }
.addon-price { color: var(--blue); font-weight: 900; }
.addon-choose {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: .92rem;
    border-top: 1px dashed var(--line);
    padding-top: 10px;
}

/* Footer social */
.footer-social { display: flex; gap: 12px; margin-top: 12px; }
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    transition: background .15s ease;
}
.footer-social a:hover { background: rgba(255, 255, 255, .3); }

/* Progress */
.progress {
    display: flex;
    justify-content: space-between;
    margin: 26px 0 34px;
    position: relative;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.progress::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 40px;
    right: 40px;
    height: 2px;
    background: var(--line);
}
.progress-step {
    position: relative;
    flex: 1;
    text-align: center;
    color: var(--muted);
    font-size: .78rem;
}
.progress-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--line);
    font-weight: 700;
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
}
.progress-step.is-active { color: var(--coral); font-weight: 700; }
.progress-step.is-active .progress-dot { border-color: var(--coral); color: var(--coral); }
.progress-step.is-done .progress-dot { background: var(--green); border-color: var(--green); color: #fff; }
.progress-label { display: block; padding: 0 4px; }

/* Checkout forms */
.checkout { max-width: 720px; }
.checkout-head { margin-bottom: 22px; }
.checkout-head p { color: var(--muted); margin: 0; }
.checkout-package-chip {
    display: inline-block;
    background: var(--blue-pale);
    border-radius: 999px;
    padding: 4px 14px;
    font-size: .88rem;
    margin: 0 0 6px;
}
.checkout-form fieldset, .child-block {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px 22px 14px;
    margin: 0 0 22px;
}
/* The display face renders too small and thin here - section headings in the
   checkout have to be readable at a glance */
.checkout-form legend {
    font-family: 'Satoshi', sans-serif;
    font-weight: 900;
    font-size: 1.22rem;
    color: var(--blue);
    padding: 0 8px;
}
/* The legend sits on the fieldset border, so text right below it needs clearance */
.checkout-form legend + .field-hint { margin: 12px 0 18px; }
.field { margin-bottom: 15px; flex: 1; }
.field-sm { max-width: 240px; }
.field label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 5px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="date"], .field select, .field textarea {
    width: 100%;
    padding: 11px 14px;
    font-size: 1rem;
    font-family: inherit;
    border: 1.5px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--blue-light);
    border-color: var(--blue-light);
}
.field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.field-hint { color: var(--muted); font-size: .82rem; margin: 5px 0 0; }
.field-checkbox label, .field-radio label {
    font-weight: 400;
    font-size: .95rem;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 8px;
    cursor: pointer;
}
input[type="checkbox"], input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--blue);
    flex: none;
    /* optically align control with the first label line */
    margin: 2px 0 0;
    cursor: pointer;
}
.lastname-suggest, .suggest-chip {
    margin-top: 6px;
    background: var(--blue-pale);
    border: 1px dashed var(--blue-light);
    border-radius: 999px;
    color: var(--blue);
    font-family: inherit;
    font-size: .8rem;
    font-weight: 700;
    padding: 4px 12px;
    cursor: pointer;
}
.lastname-suggest:hover, .suggest-chip:hover { background: #e0e8f6; }
.birthday-row { display: flex; gap: 10px; max-width: 420px; }
.birthday-row select {
    flex: 1;
    padding: 11px 10px;
    font-size: 1rem;
    font-family: inherit;
    border: 1.5px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
}
.birthday-row select:focus { outline: 2px solid var(--blue-light); border-color: var(--blue-light); }
/* The finished envelope, so the letterbox requirement needs no warning text */
.envelope {
    margin: 18px 0 8px;
    max-width: 340px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 18px 16px;
    box-shadow: 0 3px 10px rgba(29, 43, 69, .07);
}
.envelope-caption {
    margin: 0 0 10px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
}
.envelope-lines { margin: 0; line-height: 1.5; }
.envelope-line { display: block; }
/* An address without a second line must not leave a gap on the label */
.envelope-line:empty { display: none; }
#envelope-name { font-weight: 700; }

.copy-address-row { margin: 0 0 12px; }
.copy-address-row .suggest-chip { margin-top: 0; }

/* Delivery date: the chosen date is what you see, the calendar opens on top of
   it and only the deliverable Fridays can be picked */
.delivery-calendar { margin-top: 6px; }
.datepick { position: relative; max-width: 340px; }
.datepick-trigger {
    width: 100%;
    text-align: left;
    font: inherit;
    font-weight: 700;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 11px 38px 11px 14px;
    cursor: pointer;
}
.datepick-trigger::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 21px;
    border: 5px solid transparent;
    border-top-color: var(--blue);
}
.datepick-trigger:hover { border-color: var(--blue-light); }
.datepick-pop {
    position: absolute;
    z-index: 5;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(29, 43, 69, .16);
    padding: 12px 14px 10px;
}
.cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.cal-title { font-weight: 700; }
.cal-nav {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--blue);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.cal-nav:hover:not(:disabled) { background: var(--blue-pale); }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}
.cal-weekday { font-size: .72rem; color: var(--muted); padding-bottom: 4px; }
.cal-day {
    font: inherit;
    font-size: .9rem;
    padding: 7px 0;
    border: 0;
    background: none;
    border-radius: 8px;
    color: var(--muted);
}
.cal-day.is-off { opacity: .45; }
.cal-day.is-open {
    color: var(--blue);
    font-weight: 700;
    background: var(--blue-pale);
    cursor: pointer;
}
.cal-day.is-open:hover { background: #dbe4f5; }
.cal-day.is-chosen { background: var(--blue); color: #fff; }

.has-error input, .has-error select { border-color: var(--coral); }
/* Validation message in German, right at the field instead of the browser's
   own bubble - which speaks the browser language, not the shop language */
.field-error {
    margin: 6px 0 0;
    color: var(--coral);
    font-size: .85rem;
    font-weight: 700;
}
.field-checkbox.has-error input { outline: 2px solid var(--coral); outline-offset: 2px; }
.alert-error {
    background: #fff2f2;
    border: 1.5px solid var(--coral);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: .95rem;
}
.alert-error ul { margin: 6px 0 0; padding-left: 20px; }

.checkout-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.link-back { color: var(--muted); }
/* Last step: the order button leads, the way back follows quietly below */
.checkout-actions-final {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}
.checkout-actions-final .btn { width: 100%; max-width: 460px; }
.checkout-actions-final .link-back { font-size: .92rem; }

.child-block { position: relative; background: #fff; }
.child-remove {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: 0;
    color: var(--coral);
    font-size: .85rem;
    cursor: pointer;
    font-family: inherit;
}
.add-child-row { display: flex; align-items: center; gap: 14px; margin: -6px 0 24px; flex-wrap: wrap; }

.shipping-free { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; }
.shipping-free-badge {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}
.payment-option {
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
}
.payment-option small { color: var(--muted); }

/* Summary */
.summary-grid { display: grid; gap: 18px; margin-bottom: 26px; }
.summary-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px 22px;
}
.summary-card h2 {
    font-family: 'Satoshi', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.summary-card p { margin: 0 0 10px; }
.summary-edit { font-size: .82rem; font-family: 'Satoshi', sans-serif; font-weight: 700; }
.summary-line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--line);
}
.summary-line small { display: block; color: var(--muted); font-weight: 400; font-size: .82rem; }
/* The product photo sits left of the label, the price stays hard right, so the
   middle column has to be the one that gives - hence flex: 1 on the text */
.summary-product { align-items: center; }
.summary-product > span:first-of-type { flex: 1; }
.summary-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--line);
}
.summary-line small.bonus { color: var(--green); font-weight: 700; }
/* Amounts must never break between figure and currency sign */
.summary-line > span:last-child { white-space: nowrap; }
.summary-total { border-bottom: 0; font-weight: 900; font-size: 1.15rem; }
.summary-discount { color: var(--green); }
.summary-shipping .free { color: var(--green); font-weight: 700; }
.summary-monthly-note {
    background: var(--blue-pale);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: .9rem;
    color: var(--blue);
}
.coupon-form label { font-weight: 700; font-size: .92rem; display: block; margin-bottom: 5px; }
.coupon-row { display: flex; gap: 10px; }
.coupon-row input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid var(--line);
    border-radius: 9px;
    font-family: inherit;
    font-size: 1rem;
}
.coupon-row.has-error input { border-color: var(--coral); }
.inline-form { display: inline; }
.link-button {
    background: none;
    border: 0;
    color: var(--coral);
    cursor: pointer;
    font-size: .82rem;
    font-family: inherit;
    padding: 0 4px;
}
.order-form .field-checkbox { margin-bottom: 18px; }

/* Thank you */
.thankyou { max-width: 760px; text-align: center; padding-top: 34px; }
.thankyou-icon { margin-bottom: 14px; }
.thankyou-order { color: var(--muted); margin-bottom: 34px; }
.thankyou-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; }
.thankyou-step {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
}
/* Hooligan has a small x-height, so the heading needs more nominal size than
   the body text to actually read as the heading */
.thankyou-step h2 { font-size: 1.3rem; margin: 12px 0 6px; line-height: 1.25; }
.thankyou-step p { font-size: .95rem; margin: 0; color: var(--muted); line-height: 1.55; }
.thankyou-step-num {
    display: inline-flex;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    margin-bottom: 8px;
}
.thankyou-contact { margin-top: 30px; color: var(--muted); font-size: .95rem; }

/* What was ordered, on the page and not only in the mail - the first thing
   people look for once the order is through */
.thankyou-summary {
    margin-top: 34px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px 22px;
    text-align: left;
}
.thankyou-summary h2 { font-size: 1.3rem; margin: 0 0 12px; }
.thankyou-summary dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 18px;
    margin: 0;
}
.thankyou-summary dt { color: var(--muted); font-size: .95rem; }
.thankyou-summary dd { margin: 0; font-weight: 700; text-align: right; }
.thankyou-bank {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}
.thankyou-bank p { margin: 0 0 10px; font-size: .95rem; color: var(--muted); }
.thankyou-bank dd { font-variant-numeric: tabular-nums; }

/* Admin: the working list for the service team, one card per order with
   everything they have to retype into the live shop */
.admin { padding-top: 20px; }
.admin-meta { color: var(--muted); }
.admin-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.order-card {
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 14px 18px 16px;
    margin-bottom: 16px;
    background: #fff;
}
.order-card.is-done { background: #f7f9fc; border-style: dashed; opacity: .78; }
.order-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
    margin-bottom: 12px;
}
.order-date { color: var(--muted); font-size: .88rem; margin-left: 10px; }
.order-mail { font-size: .88rem; margin-left: 10px; }
.order-payment {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    background: #fff2f2;
    color: var(--coral-dark);
}
.order-payment-bezahlt { background: #eaf7e4; color: #3f7d2f; }
.order-payment-erstattet, .order-payment-teilerstattet { background: #eef2f9; color: var(--muted); }
.order-paid-note { color: var(--muted); font-size: .78rem; margin-left: 6px; }
.payment-logo { vertical-align: -6px; margin-right: 8px; }
.order-sum { font-size: .92rem; }
/* Both buttons stay together on the right instead of wrapping apart */
.order-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.order-toggle { display: flex; align-items: center; gap: 10px; }
.order-toggle .btn { padding: 7px 14px; font-size: .88rem; }
.order-toggle small { color: var(--muted); }
.order-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 24px;
}
.order-grid h2 {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    margin: 0 0 4px;
    font-family: inherit;
}
.order-grid p { margin: 0 0 8px; font-size: .94rem; line-height: 1.45; }
.order-comment {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: .94rem;
}
.legal { max-width: 760px; padding-top: 20px; }
.legal-back { margin: 0 0 18px; }
.legal-back a { font-weight: 700; text-decoration: none; }
.legal-back a:hover { text-decoration: underline; }
.legal-todo { background: #fff8e1; border: 1px dashed var(--yellow); border-radius: 10px; padding: 12px 16px; }

/* Responsive */
@media (max-width: 900px) {
    .hero, .letter-grid { grid-template-columns: 1fr; gap: 26px; }

    /* Above the fold has to carry image, value promise and a CTA - so the photo
       leads and the long intro paragraph moves below the button */
    .hero-copy { display: flex; flex-direction: column; }
    .hero-copy .eyebrow { order: 1; }
    .hero-copy h1 { order: 2; }
    .hero-copy .rating-line { order: 3; margin-bottom: 14px; }
    .hero-copy .hero-quick-cta { order: 4; display: block; margin: 0 0 20px; }
    .hero-copy .hero-quick-cta .btn { width: 100%; }
    .hero-copy .hero-sub { order: 5; }
    .hero-copy .package-form { order: 6; }

    .packages { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
    .testimonials-grid, .addon-cards { grid-template-columns: 1fr; }
    .thankyou-steps { grid-template-columns: 1fr; }
    .progress-label { font-size: .68rem; }
}
@media (max-width: 600px) {
    /* Phone and mail disappear like on the live shop - the rating stays centered.
       The seal wordmark goes too, so the bar keeps to one line and does not push
       the hero below the fold */
    .topbar-contacts, .topbar-spacer { display: none; }
    .topbar-inner { grid-template-columns: 1fr; justify-items: center; }
    .topbar-badge-label { display: none; }
    .topbar-rating { flex-wrap: nowrap; gap: 6px; }
    .topbar { font-size: .78rem; padding: 6px 10px; }

    /* Every pixel above the fold counts on the phone */
    .site-header { padding: 10px 16px 8px; }
    .logo-link img { max-width: min(280px, 74vw); }
    .promo-banner { font-size: .85rem; padding: 7px 12px; }
    .hero { padding-top: 14px; }
    .hero-copy h1 { font-size: 1.5rem; }

    /* Seals become a swipeable row instead of a cramped two-by-two block */
    .seals {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 26px;
        padding-bottom: 6px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .seals img { flex: none; max-height: 78px; scroll-snap-align: center; }
    .mid-cta .btn { width: 100%; }

    /* Full width, never zoomed: a horizontal crop cut every line short and made
       the letter read wrong. Height is capped instead and fades out at the end. */
    .letter-paper { padding: 14px 12px 10px; }
    .letter-real {
        aspect-ratio: 1515 / 1150;
        -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
    }

    /* The stage itself becomes the slider: swiping through the pictures is what
       people try first on a phone, tapping a thumbnail second */
    .gallery-stage {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
    }
    .gallery-stage::-webkit-scrollbar { display: none; }
    .gallery-slide { display: block; flex: 0 0 100%; scroll-snap-align: center; }

    /* Thumbnails become a swipeable row with touch-friendly targets */
    .gallery-thumbs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .gallery-thumb { width: 72px; height: 72px; scroll-snap-align: start; }

    .letter-cta { width: 100%; }

    /* Long labels (child name fields) need the full width */
    .field-row-stack-sm { flex-direction: column; gap: 0; }
}
@media (max-width: 480px) {
    body { font-size: 16px; }
    .btn-xl { padding: 16px 20px; }
    .progress-label { display: none; }
    .progress-step.is-active .progress-label { display: block; }
}

/* Funnel variant preview (internal only) */
.variant-switcher {
    background: #1d2b45;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: .82rem;
}
.variant-switcher-label { font-weight: 700; }
.variant-switcher-option {
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    padding: 3px 12px;
}
.variant-switcher-option.is-active { background: var(--yellow); color: var(--blue); border-color: var(--yellow); font-weight: 700; }
.variant-switcher-hint { opacity: .6; }
.checkout-reassurance { text-align: center; color: var(--muted); font-size: .88rem; margin: 12px 0 0; }
.summary-edit-inline { font-size: .8rem; margin-left: 8px; white-space: nowrap; }
@media (max-width: 600px) {
    .variant-switcher-hint { display: none; }
}