/* Redesign shared core — extracted from webroot/redesign/final.html (identical across all prototype pages).
   Load order: bootstrap → tokens.css → base.css → nav.css → hero.css → footer.css → pages/redesign-<page>.css */

/* ---------- Reset / body typography ---------- */
* { box-sizing: border-box; margin: 0; }
/* Bootstrap 4 neutralisation: bootstrap sets element-level margins (p, headings, ul, label …)
   which would beat the universal reset above by specificity. Mirror the prototype reset
   at element level so the optics stay identical to the standalone prototypes. */
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure, fieldset, label { margin: 0; }
html { scroll-behavior: smooth; }
body {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 1.06rem;
    line-height: 1.6;
}
img { max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
h1, h2, h3 {
    font-family: var(--f-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.01em;
    color: var(--ink);
}
.eyebrow {
    display: block;
    font-family: var(--f-body-bold);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--yellow-dark);
    margin-bottom: 12px;
}
.lead { color: var(--text-mid); font-size: 1.1rem; line-height: 1.65; }

/* ---------- Sections ---------- */
section.sec { padding: 92px 0; }
.sec--band { background: var(--cream-band); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 44px; flex-wrap: wrap; }
/* uniform section heading size — .map-copy ("Gemeinsam stark") has no .sec-head wrapper */
.sec-head h2, .map-copy h2 { font-size: clamp(2.1rem, 3.6vw, 3rem); line-height: 1.02; max-width: 30ch; }
.sec-head .lead { max-width: 46ch; margin-top: 12px; }
.sec-link { font-family: var(--f-body-bold); color: var(--blue-dark); text-decoration: none; white-space: nowrap; font-size: 1rem; }
.sec-link:hover { text-decoration: underline; }
.center { text-align: center; }
.center .sec-head { justify-content: center; text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* ---------- Buttons (H content) ---------- */
.btn { display: inline-block; font-family: var(--f-body-bold); font-size: 1.02rem; text-decoration: none; cursor: pointer; border-radius: 999px; padding: 13px 28px; transition: transform .2s var(--ease), box-shadow .2s, background .2s; }
.btn-yellow { background: var(--yellow); color: var(--ink); box-shadow: var(--sh-yellow); }
.btn-yellow:hover { background: #ffc71f; box-shadow: 0 14px 32px rgba(245, 184, 0, .45); }
.btn-ink { background: #48679C; color: #fff; }
.btn-ink:hover { background: #3D5A8C; }
.btn-ghostw {
    display: inline-block; font-family: var(--f-body-bold); font-size: 1rem;
    color: #fff; text-decoration: none;
    border: 1.5px solid rgba(255,255,255,.35); border-radius: 999px;
    padding: 12px 26px;
    transition: border-color .2s;
}
.btn-ghostw:hover { border-color: var(--yellow); }

/* ---------- Chips ---------- */
.chips { display: flex; gap: 9px; margin-top: 26px; flex-wrap: wrap; }
.chips span {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 999px; padding: 7px 16px;
    font-family: var(--f-body-bold); font-size: .85rem; color: var(--text-mid);
}

/* ---------- Quote band ---------- */
.quote-band {
    margin-top: 44px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: 24px; box-shadow: var(--sh-sm);
    padding: 30px 34px;
    display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center;
}
.quote-band .stamp {
    font-family: var(--f-body-bold); font-size: .82rem; letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--yellow-soft); color: var(--yellow-dark);
    border-radius: 999px; padding: 9px 18px; white-space: nowrap;
}
.quote-band blockquote { font-size: 1.18rem; color: var(--ink); line-height: 1.5; }
.quote-band cite { display: block; font-style: normal; font-size: .9rem; color: var(--muted); margin-top: 8px; }
@media (max-width: 760px) { .quote-band { grid-template-columns: 1fr; } }

/* ---------- Map / "Gemeinsam stark" ---------- */
.map-grid { display: grid; grid-template-columns: 1fr .85fr; gap: 60px; align-items: center; }
.map-copy .lead { margin-top: 16px; max-width: 46ch; }
.map-copy .btn { margin-top: 28px; }
.map-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 32px; padding: 20px;
    box-shadow: var(--sh-lg);
    transform: rotate(1deg);
}
.map-card img { width: 100%; display: block; border-radius: 18px; }
/* interactive jVectorMap variant (customer_map.tpl.php partial, $module_only) */
.map-card .map-container { height: 380px; }
@media (max-width: 900px) {
    .map-grid { grid-template-columns: 1fr; }
    /* children may not force min-content width (button row / long headline) */
    .map-grid > * { min-width: 0; }
    .country-switch { display: flex; flex-wrap: wrap; gap: 10px; }
    .map-copy h2 { overflow-wrap: anywhere; }
    .map-card { transform: none; }
}

/* country switch buttons for the customer map (pages/customer_map.js toggles
   .btn-accent / .btn-outline-accent; same grammar as pages/redesign-landingpage.css) */
.country-switch { display: flex; gap: 9px; margin-top: 26px; flex-wrap: wrap; }
.country-map-switch {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 999px; padding: 9px 20px;
    font-family: var(--f-body-bold); font-size: .9rem; color: var(--text-mid);
    cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
.country-map-switch:hover { border-color: var(--ink); color: var(--ink); }
.country-map-switch.btn-accent { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }

/* ---------- CTA (ink box) ---------- */
.cta-sec { padding: 92px 0; }
.cta-box {
    position: relative; overflow: hidden;
    background:
        radial-gradient(circle at 86% 10%, rgba(255, 255, 255, .16), transparent 34%),
        linear-gradient(160deg, #5E7EB1, #48679C);
    border-radius: 38px;
    padding: 74px 64px;
    color: #fff;
}
.cta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; position: relative; z-index: 2; }
.cta-col .eyebrow { color: var(--yellow); }
/* explicit font/transform so the legacy CSS stack (loaded on bridge pages)
   cannot restyle the CTA headings away from the homepage look */
.cta-col h3 {
    color: #fff; font-size: 1.6rem; margin-bottom: 10px;
    font-family: var(--f-display); text-transform: uppercase;
    letter-spacing: -.01em; line-height: 1.15; font-weight: 900;
}
.cta-col .eyebrow {
    font-family: var(--f-body-bold); font-size: .82rem; letter-spacing: .06em;
    text-transform: uppercase; display: block; margin-bottom: 10px;
}
.cta-col p { color: #b9c7e0; margin-bottom: 18px; font-size: .98rem; }
.cta-col ul { list-style: none; margin: 0 0 26px; padding: 0; }
.cta-col li { position: relative; padding: 5px 0 5px 28px; color: #dbe4f2; font-size: .95rem; }
.cta-col li::before {
    content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: 900;
    position: absolute; left: 0; top: 5px; color: var(--yellow); font-size: .8rem;
}
.cta-col .foot { display: block; margin-top: 14px; font-size: .82rem; color: #dbe4f2; }
.cta-box .muffel {
    position: absolute; right: 22px; bottom: -26px; width: 190px; z-index: 1;
    /* neutralize the legacy .muffel rule (width/height 100%, min-height,
       background sprite) that the bridge pages still load */
    height: auto; min-height: 0; background: none;
    filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .4));
    animation: sway 4s ease-in-out infinite;
    transform-origin: bottom center;
}
@media (max-width: 860px) {
    .cta-box { padding: 48px 32px; }
    .cta-grid { grid-template-columns: 1fr; }
    .cta-box .muffel { display: none; }
}

/* ---------- Reveals ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .rv { opacity: 1; transform: none; transition: none; }
    .stage .muffel, .cta-box .muffel { animation: none; }
}

/* ---------- Testaccount swal box (kutego.js "a.ax" loads /registrieren/ via AJAX) ----------
   The box appears on every page, so its styles must live in this global file.
   Form markup comes from Pages/registrieren.tpl.php (AJAX branch, Bootstrap grammar);
   values mirror the .form-card grammar in pages/redesign-misc.css. */
.swal2-container { z-index: 9999999 !important; }
body .swal2-popup { border-radius: 32px !important; }
#swal-content { text-align: left; padding: 1.5em; font-family: var(--f-body); color: var(--ink); }
#swal-content .ax-loading { text-align: center; padding: 5em; color: var(--blue-dark); font-size: 1.4rem; }
#swal-content .headline {
    font-family: var(--f-display); font-weight: 900;
    text-transform: uppercase; letter-spacing: -.01em;
    color: var(--ink); font-size: 1.7rem;
}
#swal-content a { color: var(--blue-dark); }
#swal-content label {
    font-family: var(--f-body-bold);
    font-size: .85rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink); margin-bottom: 8px;
}
#swal-content .form-control {
    height: auto;
    font-family: var(--f-body);
    font-size: 1rem; color: var(--ink);
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 13px 16px;
    box-shadow: none;
    transition: border-color .18s, box-shadow .18s;
}
#swal-content .form-control:focus {
    outline: none;
    border-color: var(--yellow-dark);
    box-shadow: 0 0 0 3px rgba(61, 98, 168, .15);
}
#swal-content .form-control::placeholder { color: var(--muted); }
#swal-content .input-group-text {
    background: var(--cream);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 14px 0 0 14px;
    color: var(--muted);
}
#swal-content .input-group .form-control { border-radius: 0 14px 14px 0; }
#swal-content label.error {
    text-transform: none; letter-spacing: 0;
    color: var(--danger); font-family: var(--f-body);
    font-size: .85rem; margin: 6px 0 0;
}
#swal-content .form-control.error { border-color: var(--danger); }
/* checklist column: align bullets with the check icon */
#swal-content .register-benefits { list-style: none; margin: 0; padding: 0; }
#swal-content .register-benefits li { position: relative; padding: 5px 0 5px 28px; color: var(--text-mid); }
#swal-content .register-benefits li .fa-check { position: absolute; left: 0; top: 10px; color: var(--yellow-dark); font-size: .8rem; }
/* submit <button>: replace the Bootstrap default look completely */
#swal-content .btn-yellow {
    display: inline-block; font-family: var(--f-body-bold); font-size: 1rem;
    background: var(--yellow); color: var(--ink); text-decoration: none;
    border: none; border-radius: 999px; padding: 14px 34px;
    box-shadow: var(--sh-yellow); cursor: pointer;
    transition: transform .18s var(--ease);
}
#swal-content .btn-yellow:hover { transform: translateY(-2px); }
/* decorative Muffel in the box corner */
#swal-content .muffel-green {
    position: absolute; right: 12px; bottom: 0;
    width: 110px; height: 90px;
    background: url(../../layout/muffel/green.webp) no-repeat center bottom / contain;
    pointer-events: none;
}
@media (max-width: 700px) {
    #swal-content .muffel-green { display: none; }
    /* register form fields span the full modal width on small screens
       (markup still carries the bootstrap 3 col-xs-12 class, which BS4 ignores) */
    #swal-content .form-column { width: 100%; max-width: 100%; flex: 0 0 100%; }
}

/* ---------- Accessibility: visible focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 3px solid #F5B800; outline-offset: 2px; border-radius: 4px;
}


/**
    ANIMATIONS
 */
.heartbeat {
    -webkit-animation: heartbeat 2s infinite;
    animation: heartbeat 2s infinite;
}

@-webkit-keyframes heartbeat {
    0% {
        transform: scale(.75);
    }
    20% {
        transform: scale(1);
    }
    40% {
        transform: scale(.75);
    }
    60% {
        transform: scale(1);
    }
    80% {
        transform: scale(.75);
    }
    100% {
        transform: scale(.75);
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(.75);
    }
    20% {
        transform: scale(1);
    }
    40% {
        transform: scale(.75);
    }
    60% {
        transform: scale(1);
    }
    80% {
        transform: scale(.75);
    }
    100% {
        transform: scale(.75);
    }
}

/**
    VIDEO LIGHTBOX
 */

.browser {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #fff), color-stop(10%, #eef1f3));
    background: linear-gradient(#fff 1%, #eef1f3 10%);
    position: relative;
    padding-top: 2em;
    border-radius: .4em;
}

.browser:before {
    display: block;
    position: absolute;
    content: '';
    top: 0.75em;
    left: 1em;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: #f44;
    -webkit-box-shadow: 0 0 0 1px #f44, 1.5em 0 0 1px #9b3, 3em 0 0 1px #fb5;
    box-shadow: 0 0 0 1px #f44, 1.5em 0 0 1px #9b3, 3em 0 0 1px #fb5;
}

.browser img {
    max-width: 100%;
}

.browser.shadow {
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.09);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.09);
}

.browser.border {
    border: 1px solid #edf4f8;
}

.video-popup {
    position: relative;
    padding: 40px 10px;
    width: 1100px;
    max-width: 100vw;
    margin: auto;
    text-align: center;
}

.video-popup .mfp-close {
    top: 35px;
    right: 5px;
    font-size: .95em;
}

.video-popup .mfp-close.close-left {
    right: auto;
    left: 24px;
    top: 50px;
    opacity: 1;
    display: block;
    content: '';
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    cursor: pointer;
    line-height: 15px;
    text-align: center;
}

.video-popup .mfp-close.close-left:hover {
    background: #f44;
}

.video-popup video {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.video-popup .browser {
    min-height: auto;
}

.video-popup .play-video,
.video-popup .video-title,
.popup-opened #lz_overlay_wm,
.popup-opened #lz_overlay_chat {
    display: none !important
}

/**
    DEVICE DETECTION (mobile & tablet / desktop)
 */
body::before {
    /* never visible - used in JS to check mq */
    content: 'mobile';
    display: none;
}

@media only screen and (hover: none) {
    body::before {
        content: 'tablet';
    }
}

@media not (hover: none) {
    body::before {
        content: 'desktop';
    }
}