/*
 * Domino Frontend — SimpleTwo Template Stylesheet
 *
 * Fully standalone — does NOT depend on app.css.
 * Replicates the style of fenster-fachfirmen.de / Heyflow "Fenster Angebotsvergleich" layout.
 *
 * Key design tokens (from reference):
 *   Primary blue:    #0098d3
 *   Accent yellow:   #FECA34
 *   Body bg:         #f8f9fb
 *   Body text:       #495057
 *   Footer bg:       #343a40
 *   Footer text:     #dee2e6
 *   Font:            Rubik (Google Fonts)
 *
 * BEM naming: all classes prefixed s2- to avoid any collision.
 */

/* ==========================================================================
   Rubik — self-hosted (SIL OFL v1.1, see assets/fonts/)
   ========================================================================== */

@import url("fonts/rubik-9LVrqNV.css");

/* ==========================================================================
   Reset & Base
   ========================================================================== */

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

body {
    margin: 0;
    padding: 0;
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.35;
    color: #495057;
    background-color: #f8f9fb;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: 1.35;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.s2-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.s2-main {
    flex: 1;
}

.s2-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ==========================================================================
   Header — full blue block
   Logo left · phone center · stat/badge right
   Then hero title + subtitle as a second row inside same blue block
   ========================================================================== */

.s2-header {
    background-color: #0098d3;
}

/* Top bar: logo | phone/bullets | stat
   The left and right slots each get flex:1 so they are equal-width bookends.
   This guarantees the center slot sits at the true horizontal midpoint of the
   bar regardless of how wide the logo or the stat content actually are. */
.s2-header__bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 0;
}

/* Left slot — grows to fill its third, logo stays at the left edge */
.s2-header__left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

/* Logo */
.s2-header__logo {
    width: clamp(133px, calc(25vw - 7px), 293px);
    max-width: 100%;
    height: auto;
    flex-shrink: 0;
    display: block;
}

/* Center: phone + bullet points — does NOT grow; always truly centered */
.s2-header__center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.s2-header__bullet-list {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.s2-header__bullet-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1rem;
    color: #fff;
    font-weight: 400;
    white-space: nowrap;
}

.s2-header__bullet-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Right slot — same flex:1 as the left slot, stat content right-aligned */
.s2-header__stat {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: #fff;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.s2-header__stat-number {
    color: #FECA34;
    font-weight: 700;
}

.s2-header__stat img {
    display: block;
}

/* All links inside the header stay white and never show an underline, but the
   pointer cursor is preserved so they still feel interactive. */
.s2-header a,
.s2-header a:visited,
.s2-header a:hover,
.s2-header a:active {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* The <a> wrapping the seal needs an explicit size; without it the block-level
   anchor collapses to 0px inside the flex container and max-width:100% on the
   img resolves to zero. */
.s2-header__proven-expert-seal {
    width: clamp(35px, calc(6.73vw - 3px), 78px);
    max-width: 100%;
    height: auto;
}

.s2-hide-desktop {
    display: none;
}

.s2-hide-mobile {
    display: block;
}

/* Hero title + subtitle — second row inside the blue header block */
.s2-header__hero {
    padding: 0 0 1.5rem;
    text-align: center;
}

.s2-header__hero-title {
    font-size: 2rem;          /* 32px */
    font-weight: 500;
    color: #fff;
    line-height: 1.35;
}

.s2-header__hero-subtitle {
    font-size: 1.5rem;        /* 24px */
    font-weight: 400;
    color: #fff;
    line-height: 1.35;
    margin: 0;
}

/* Hero image row (when image present) — overrides text-only hero */
.s2-header__hero--with-image {
    text-align: left;
}

.s2-header__hero-inner {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.s2-header__hero-content {
    flex: 1;
    min-width: 0;
}

.s2-header__hero-image-wrapper {
    flex-shrink: 0;
    width: 220px;
    position: relative;
}

.s2-header__hero-image {
    border-radius: 4px;
    width: 100%;
    height: auto;
    display: block;
}

/* Checkmark bullet list inside hero */
.s2-header__hero-bullet-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.75rem;
    margin-top: 0.75rem;
}

.s2-header__hero-bullet-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: #fff;
    font-weight: 500;
}

.s2-header__hero-bullet-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* ==========================================================================
   Heyflow embed
   ========================================================================== */

.s2-heyflow {
    background-color: #f8f9fb;
    padding: 2rem 0;
}

.s2-heyflow__wrapper {
    margin: 0 auto;
}

/* ==========================================================================
   Trust bar
   Same body background, centered row of 4 items with icon + two-line text
   ========================================================================== */

.s2-trust {
    background-color: #f8f9fb;
    padding: 2rem 0;
}

.s2-trust__list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 1rem 0;
}

.s2-trust__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    flex: 1;           /* equal-width columns, full container width */
}

.s2-trust__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    /* Tint icons with primary blue using CSS filter */
    filter: invert(42%) sepia(99%) saturate(432%) hue-rotate(163deg) brightness(93%) contrast(101%);
    opacity: 0.9;
}

.s2-trust__label {
    font-size: 1rem;
    font-weight: 600;
    color: #2e3134;
    line-height: 1.2;
    display: block;
}

.s2-trust__sub-label {
    font-size: 0.9rem;
    line-height: 1.2;
    display: block;
    margin-top: 0.125rem;
}

/* ==========================================================================
   Footer
   Dark background · centered nav · separator · legal text
   ========================================================================== */

.s2-footer {
    background-color: #343a40;
    color: #dee2e6;
    padding: 1.5rem 0;
    margin-top: auto;
}

.s2-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.s2-footer__logo {
    max-height: 40px;
    width: auto;
}

/* Centered nav */
.s2-footer__nav {
    display: flex;
    justify-content: center;
    flex: 1;
}

.s2-footer__menu {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.s2-footer__menu-link {
    color: #dee2e6;
    font-size: 0.8125rem;    /* 13px */
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    text-decoration: none;
}

.s2-footer__menu-link:hover {
    color: #fff;
    text-decoration: none;
}

.s2-footer__separator {
    border: none;
    margin: 1rem 0;
}

.s2-footer__text {
    font-size: 0.6875rem;    /* 11px */
    color: #adb5bd;
    line-height: 1.6;
    text-align: center;
}

.s2-footer__text p {
    margin: 0 0 0.5rem;
}

.s2-footer__text p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Error pages (used when no template is matched)
   ========================================================================== */

.s2-error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    /* Hero title scales down */
    .s2-header__hero-title {
        font-size: 1.5rem;
    }

    .s2-header__hero-subtitle {
        font-size: 1.125rem;
    }

    /* Hero with image stacks */
    .s2-header__hero-inner {
        flex-direction: column-reverse;
        gap: 1rem;
    }

    .s2-header__hero-image-wrapper {
        width: 100%;
        max-width: 260px;
        margin: 0 auto;
    }

    .s2-header__hero--with-image {
        text-align: center;
    }

    .s2-header__hero-bullet-list {
        flex-direction: column;
        gap: 0.375rem;
        justify-content: center;
        align-items: center;
    }

    /* Trust bar: wrap to 2×2 on mobile */
    .s2-trust__list {
        flex-wrap: wrap;
        gap: 1.25rem 0;
    }

    .s2-trust__item {
        flex: 0 0 50%;   /* 2 columns on mobile */
    }

    /* Footer stacks */
    .s2-footer__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .s2-footer__nav {
        justify-content: flex-start;
    }

    .s2-footer__menu {
        justify-content: flex-start;
        gap: 0.75rem 1.25rem;
    }

    .s2-footer__text {
        text-align: left;
    }
}

@media (max-width: 560px) {
    .s2-header__logo {
        width: clamp(139px, calc(37.6vw - 8px), 203px);
    }

    .s2-header__proven-expert-seal {
        width: clamp(37px, calc(10vw - 2px), 54px);
    }

    .s2-hide-mobile {
        display: none !important;
    }

    .s2-hide-desktop {
        display: block !important;
    }

    .s2-header__bar {
        gap: 0.5rem;
        padding: 0.625rem 0;
    }

    .s2-header__left,
    .s2-header__stat {
        flex: 1;
    }

    .s2-header__stat {
        text-align: right;
        justify-content: flex-end;
    }
}