/*
 * restyle.css – new light appearance (marketing re-design, experiment).
 *
 * Deliberately decoupled from the Freelancer theme (styles.css): Bootstrap only
 * provides grid/utilities, the entire look lives here. This makes a possible
 * framework switch easier later.
 *
 * Only targets new components (#siteNav, .hero, .products, .product-card).
 * The old page (/ueber-uns) is still served by the Freelancer theme.
 */

:root {
    --at-green: #B0D352;        /* Brand green (accent) */
    --at-green-dark: #93b53e;   /* Hover/darker variant */
    --at-ink: #4a4a4a;          /* Gray for headlines/text (not pure black) */
    --at-muted: #6c757d;
    --at-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Keep anchor jumps from sliding under the fixed navbar */
.products,
#kontakt,
#produkte,
#stellen {
    scroll-margin-top: 5rem;
}

/* ---------------------------------------------------------------- Navbar */
#siteNav.site-nav {
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 0.5rem 0;
    font-family: var(--at-font);
}

#siteNav .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

#siteNav .navbar-brand-text {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--at-ink);
    letter-spacing: 0.02em;
}

/* Two-tone wordmark accent (ARIE ink / TECH green) */
.brand-name__accent {
    color: var(--at-green-dark);
}

#siteNav .navbar-nav {
    gap: 0.25rem;
    align-items: center;
}

#siteNav .nav-link {
    color: var(--at-ink);
    font-weight: 600;
    font-size: 1.05rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: color 0.15s ease, background-color 0.15s ease;
}

#siteNav .nav-link:hover,
#siteNav .nav-link:focus,
#siteNav .nav-link.active {
    color: var(--at-green-dark);
}

#siteNav .navbar-toggler {
    border: none;
    color: var(--at-ink);
    font-size: 1.4rem;
}

#siteNav .navbar-toggler:focus {
    box-shadow: none;
}

/* ------------------------------------------------------------------ Hero */
.hero {
    position: relative;
    overflow: hidden;
    padding: 8rem 0 4rem;       /* room at the top for the fixed navbar */
    background-color: #fff;
    font-family: var(--at-font);
}

/* Waves layer. The PNG has a white background, so contrast() would only wash
   the light waves further toward white. Instead we stack the image multiple
   times with multiply: pure white stays white (255*255=255, invisible) while
   the half-light wave pixels darken with each layer -> more visible waves. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #fff;
    background-image: url("/assets/img/restyle/hero-waves.png"),
                      url("/assets/img/restyle/hero-waves.png"),
                      url("/assets/img/restyle/hero-waves.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    background-blend-mode: multiply;
}

.hero > .container-xxl {
    position: relative;
    z-index: 1;
}

.hero__title {
    font-weight: 700;
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    line-height: 1.2;
    margin-bottom: 1.25rem;
}

.hero__title-main {
    display: block;
    color: var(--at-ink);
}

.hero__title-accent {
    display: block;
    margin-top: 0.6rem;
    color: var(--at-ink);
    font-size: 0.82em;
    font-weight: 600;
}

.hero__lead {
    font-weight: 400;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.6;
    color: #4a4f55;
    max-width: 48ch;
    margin: 0;
}

/* FocusOnNavigate (Routes.razor) focuses the first <h1> after navigation –
   keep the accessibility focus but suppress the visible outline on these
   non-interactive headings. */
.hero__title:focus,
.hero__title:focus-visible,
.page-header__title:focus,
.page-header__title:focus-visible,
.product-hero__title:focus,
.product-hero__title:focus-visible {
    outline: none;
}

/* Hero device images (transparent PNGs) */
.hero__img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Hero entrance animations (skipped for users who prefer reduced motion) */
@media (prefers-reduced-motion: no-preference) {
    .hero::before {
        animation: at-fade-in 1.2s ease-out both;
    }

    .hero__copy {
        animation: at-fade-up 0.9s ease-out 0.1s both;
    }

    .hero__img {
        animation: at-scale-in 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) both;
    }

    .hero .col-lg-4:first-child .hero__img {
        animation-delay: 0.15s;
    }

    .hero .col-lg-4:last-child .hero__img {
        animation-delay: 0.3s;
    }
}

@keyframes at-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes at-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes at-scale-in {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* -------------------------------------------------------------- Products */
.products {
    padding: 4rem 0 5rem;
    background: #fff;
    font-family: var(--at-font);
}

.product-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
    padding: 2.25rem;
    background: #fff;
    border: 1px solid #e7e9e3;
    border-radius: 1.5rem;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.05);
}

.product-card__head {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.product-card__brand {
    flex: 0 0 auto;
    width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.product-card__logo {
    width: 76px;
    height: 76px;
}

.product-card__wordmark {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--at-ink);
}

.product-card__headline {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--at-ink);
    margin-bottom: 0.5rem;
}

.product-card__text {
    color: var(--at-muted);
    margin: 0;
}

/* Shared feature grid (product card + product page). auto-fit yields 2 columns
   in the narrow card and up to 4 in the wide product page. */
.feature-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem 1rem;
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

.feature__icon {
    /* Font Awesome fallback styling (if a feature uses an FA class) */
    font-size: 2.6rem;
    color: var(--at-green-dark);
}

/* SVG pictograms: fixed height, aspect ratio preserved */
img.feature__icon {
    height: 56px;
    width: auto;
}

.feature__label {
    font-size: 0.95rem;
    color: var(--at-ink);
    font-weight: 500;
}

.product-card__cta {
    margin-top: auto;
    text-align: center;
}

/* -------------------------------------------------------- Why ArieTech */
.why {
    padding: 1rem 0 5rem;
    font-family: var(--at-font);
}

.why__header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.why__title {
    font-weight: 400;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    color: var(--at-ink);
    margin-bottom: 0.5rem;
}

.why__subtitle {
    color: var(--at-muted);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    margin: 0;
}

.why__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.why-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #e7e9e3;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.04);
}

.why-card__icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.why-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--at-ink);
    margin: 0 0 0.35rem;
}

.why-card__text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--at-muted);
    margin: 0;
}

/* ----------------------------------------------------------- CTA-Button */
/* CTA as a subtle text link with arrow – maximally restrained:
   dark readable text, green arrow as CI accent, on hover a green
   underline and the arrow slides slightly to the right. */
.btn-at {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    background: transparent;
    border: none;
    color: #2c3e50;
    font-weight: 600;
    text-decoration: none;
}

.btn-at i {
    color: var(--at-green-dark);
    transition: transform 0.15s ease;
}

.btn-at:hover,
.btn-at:focus {
    color: #2c3e50;
    text-decoration: underline;
    text-decoration-color: var(--at-green);
    text-underline-offset: 4px;
}

.btn-at:hover i,
.btn-at:focus i {
    transform: translateX(4px);
}

/* ---------------------------------------------------------- Mobile/Small */
@media (max-width: 575.98px) {
    .product-card__head {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .product-card__brand {
        width: auto;
    }

    .hero {
        padding-top: 7rem;
    }
}

/* ============================================ Content pages (light) ===== */
/* Page header (slimmer than the home page hero) */
.page-header {
    position: relative;
    overflow: hidden;
    padding: 10rem 0 7rem;      /* taller so the wave band matches the home hero */
    text-align: center;
    background-color: #fff;
    font-family: var(--at-font);
}

.page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #fff;
    background-image: url("/assets/img/restyle/hero-waves.png"),
                      url("/assets/img/restyle/hero-waves.png"),
                      url("/assets/img/restyle/hero-waves.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    background-blend-mode: multiply;
}

.page-header > .container {
    position: relative;
    z-index: 1;
}

.page-header__title {
    font-weight: 300;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--at-ink);
    margin-bottom: 0.75rem;
}

.page-header__lead {
    font-weight: 300;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    color: var(--at-muted);
    max-width: 60ch;
    margin: 0 auto;
}

/* Generic light section */
.section {
    padding: 4rem 0;
    font-family: var(--at-font);
}

.section--alt {
    background: #f7f9f3;
}

.section__title {
    text-align: center;
    font-weight: 300;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: var(--at-ink);
    margin-bottom: 0.75rem;
}

.section__title::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: 1rem auto 0;
    background: var(--at-green);
    border-radius: 2px;
}

.section__text {
    color: var(--at-muted);
    font-size: 1.12rem;
    line-height: 1.6;
}

/* Mission – alternating image/text rows */
.mission-row {
    align-items: center;
}

.mission-row + .mission-row {
    margin-top: 3rem;
}

.mission-row h3 {
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--at-ink);
    margin-bottom: 0.25rem;
}

.mission-row__sub {
    font-weight: 600;
    color: var(--at-green-dark);
    margin-bottom: 0.75rem;
}

.mission-row p:not(.mission-row__sub) {
    color: var(--at-muted);
    margin-bottom: 1rem;
}

.mission-row p:not(.mission-row__sub):last-child {
    margin-bottom: 0;
}

/* Career */
.career {
    text-align: center;
}

.career .section__text {
    max-width: 70ch;
    margin: 0 auto 1.75rem;
}

/* Product landing page */
.product-page__logo {
    width: 96px;
    height: 96px;
    margin-bottom: 1rem;
}

.product-page__intro {
    max-width: 60ch;
    margin: 0 auto;
    text-align: center;
}

.product-page__features {
    max-width: 820px;
    margin: 2.5rem auto 0;
}

/* Consecutive tinted sections form one continuous band (no double padding) */
.section--alt + .section--alt {
    padding-top: 0;
}

/* "Unsere Werte" – value cards (icon on top, centered) */
.values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2.5rem 1.5rem;
    margin-top: 2.5rem;
}

.value-card {
    text-align: center;
}

.value-card__icon {
    height: 64px;
    width: auto;
    margin-bottom: 1rem;
}

.value-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--at-ink);
    margin-bottom: 0.5rem;
}

.value-card__text {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--at-muted);
    margin: 0;
}

/* Closing call-to-action band */
.cta-band {
    text-align: center;
}

.cta-band__title {
    font-weight: 400;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    color: var(--at-ink);
    margin-bottom: 0.5rem;
}

.cta-band__sub {
    color: var(--at-green-dark);
    font-size: 1.1rem;
    margin-bottom: 1.75rem;
}

.cta-band__careers {
    margin: 1.75rem 0 0;
    color: var(--at-muted);
}

.cta-band__careers a {
    color: var(--at-green-dark);
    font-weight: 600;
}

/* Solid accent button (dark text on green ~8:1, WCAG) */
.btn-at-solid {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.9rem;
    background: var(--at-green);
    color: #2c3e50;
    font-weight: 600;
    border-radius: 0.6rem;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.btn-at-solid:hover,
.btn-at-solid:focus {
    background: var(--at-green-dark);
    color: #2c3e50;
}

/* ============================================ Product landing page ===== */
.product-hero {
    position: relative;
    overflow: hidden;
    padding: 9rem 0 4rem;
    background-color: #fff;
    font-family: var(--at-font);
}

.product-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #fff;
    background-image: url("/assets/img/restyle/hero-waves.png"),
                      url("/assets/img/restyle/hero-waves.png"),
                      url("/assets/img/restyle/hero-waves.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    background-blend-mode: multiply;
}

.product-hero > .container-xxl {
    position: relative;
    z-index: 1;
}

.product-hero__eyebrow {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--at-ink);
    margin-bottom: 0.4rem;
}

.product-hero__title {
    font-weight: 700;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.2;
    color: var(--at-ink);
    margin-bottom: 0.75rem;
}

.product-hero__subline {
    color: var(--at-ink);
    font-weight: 600;
    font-size: 1.15rem;
    margin-bottom: 1.25rem;
}

/* Inline green accent inside hero headline/subline */
.product-hero__accent {
    color: var(--at-green-dark);
}

.product-hero__body {
    color: var(--at-muted);
    line-height: 1.6;
    max-width: 52ch;
    margin-bottom: 1.75rem;
}

.product-hero__img {
    max-width: 100%;
    height: auto;
}

/* Section subtitle (accented) + body */
.prod-section__subtitle {
    text-align: center;
    font-weight: 600;
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    color: var(--at-ink);
    max-width: 60ch;
    margin: 0 auto 1rem;
}

.prod-section__accent {
    color: var(--at-green-dark);
}

.prod-section__body {
    text-align: center;
    color: var(--at-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 72ch;
    margin: 0 auto;
}

/* Icon cards (icon on top, centered) – used across the product-page sections */
.icon-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 2.5rem 1.5rem;
    margin-top: 2.5rem;
}

.icon-card {
    text-align: center;
}

.icon-card__icon {
    height: 64px;
    width: auto;
    margin-bottom: 1rem;
}

.icon-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--at-ink);
    margin-bottom: 0.5rem;
}

.icon-card__text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--at-muted);
    margin: 0;
}

/* Closing CTA band above the footer – soft green-gray tint (smoother than a
   hard gray) with outlined buttons. */
.product-cta {
    background: #e9ece7;
    padding: 3.5rem 0 4rem;
    text-align: center;
    font-family: var(--at-font);
}

.product-cta__title {
    color: var(--at-green-dark);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    margin-bottom: 0.75rem;
}

.product-cta__body {
    color: var(--at-muted);
    max-width: 62ch;
    margin: 0 auto 1.75rem;
    line-height: 1.6;
}

.product-cta__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Outlined accent button */
.btn-at-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.6rem;
    background: transparent;
    color: #2c3e50;
    border: 2px solid var(--at-green);
    font-weight: 600;
    border-radius: 0.6rem;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-at-outline:hover,
.btn-at-outline:focus {
    background: var(--at-green);
    color: #2c3e50;
}

/* ============================================ Demo request form ======== */
.demo-form {
    max-width: 720px;
    margin: 0 auto;
    font-family: var(--at-font);
}

.demo-form .form-label {
    font-weight: 600;
    color: var(--at-ink);
    margin-bottom: 0.3rem;
}

.demo-form .form-check-label a {
    color: var(--at-green-dark);
}

.demo-form .validation-message {
    color: #b02a37;
    font-size: 0.9rem;
}

.demo-form__error {
    color: #b02a37;
    font-weight: 500;
    margin: 0;
}

.demo-form button {
    margin-top: 0.5rem;
    border: none;
    cursor: pointer;
}

/* Honeypot: kept in the DOM (bots fill it) but off-screen for humans. */
.demo-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==================================================== Footer (light) ==== */
.site-footer {
    background: #e9ece1;
    border-top: 1px solid #d7dccb;
    color: #555c63;
    font-family: var(--at-font);
    font-size: 0.9rem;
    padding: 2.25rem 0 0;
}

.site-footer h4 {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--at-ink);
    margin-bottom: 0.55rem;
}

.site-footer p {
    margin-bottom: 0.2rem;
    line-height: 1.5;
}

.site-footer a {
    color: var(--at-green-dark);
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

/* Social icons as round outline buttons with green hover */
.footer-social {
    display: inline-flex;
    gap: 0.5rem;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #cfd6c4;
    color: var(--at-ink);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.footer-social a:hover {
    background: var(--at-green);
    border-color: var(--at-green);
    color: #2c3e50;
    text-decoration: none;
}

.site-footer__bar {
    margin-top: 1.75rem;
    padding: 0.85rem 0;
    border-top: 1px solid #d7dccb;
    text-align: center;
    color: #555c63;
    font-size: 0.9rem;
}

.site-footer__bar small {
    font-weight: 700;
    color: var(--at-ink);
}

.site-footer__note {
    max-width: 62ch;
    margin: 0.4rem auto 0;
    font-size: 0.68rem;
    color: #9aa0a6;
}