/* =====================================================================
   ASOSmobil – Modern Design Layer
   ---------------------------------------------------------------------
   Gekapselte, additive Design-Grundlage. Alle Klassen sind mit "amb-"
   praefixiert und alle Komponenten liegen innerhalb eines .amb-scope
   Containers, damit bestehende Styles (style.css, Bootstrap) nicht
   veraendert werden. Diese Datei kann pro Seite gezielt eingebunden
   werden, ohne die restliche Website zu beeinflussen.

   Farb- und Typo-Tokens sind aus dem bestehenden Markenbild abgeleitet:
   Amber #f5ad12 (Primaerfarbe), Anthrazit (Gehaeusefarbe), Open Sans.
   ===================================================================== */

:root {
    /* Markenfarben */
    --amb-amber:        #f5ad12;
    --amb-amber-600:    #e09a08;
    --amb-amber-dark:   #b97d00;
    --amb-amber-soft:   rgba(245, 173, 18, 0.12);
    --amb-amber-ring:   rgba(245, 173, 18, 0.35);

    /* Neutrale Farben */
    --amb-ink:          #1f2226;   /* Haupttext / Ueberschriften */
    --amb-graphite:     #2f3237;   /* dunkle Flaechen, Gehaeuseton */
    --amb-slate:        #5b616a;   /* Sekundaertext */
    --amb-muted:        #838a93;   /* dezenter Text */
    --amb-line:         #e5e8ec;   /* Trennlinien / Rahmen */
    --amb-line-strong:  #d3d8de;
    --amb-bg:           #ffffff;
    --amb-bg-soft:      #f6f7f9;   /* leichte Sektionsflaeche */
    --amb-bg-tint:      #f2f4f7;

    /* Radien – bewusst zurueckhaltend, angelehnt an die eckige Original-Optik */
    --amb-r-sm: 4px;
    --amb-r:    6px;
    --amb-r-lg: 8px;
    --amb-r-pill: 999px;

    /* Original-Verlauf der Website-Buttons (style.css) */
    --amb-grad-brand: linear-gradient(90deg, rgba(245,173,18,1) 0%, rgba(242,227,12,1) 100%);
    --amb-green: #2aa737;   /* Original "senden"-Buttonfarbe */
    --amb-dark:  #3c3c3a;   /* Original Dunkelgrau (Headlines/Flaechen) */

    /* Schatten */
    --amb-shadow-sm: 0 1px 2px rgba(24, 28, 34, 0.06), 0 1px 3px rgba(24, 28, 34, 0.08);
    --amb-shadow:    0 4px 16px rgba(24, 28, 34, 0.08), 0 2px 6px rgba(24, 28, 34, 0.06);
    --amb-shadow-lg: 0 18px 48px rgba(24, 28, 34, 0.14), 0 6px 16px rgba(24, 28, 34, 0.08);

    /* Abstaende (4pt-Raster) */
    --amb-space-1: 4px;
    --amb-space-2: 8px;
    --amb-space-3: 12px;
    --amb-space-4: 16px;
    --amb-space-5: 24px;
    --amb-space-6: 32px;
    --amb-space-7: 48px;
    --amb-space-8: 64px;

    /* Typo */
    --amb-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --amb-fs-eyebrow: 0.78rem;
    --amb-maxw: 1180px;
}

/* ---------------------------------------------------------------------
   Scope-Container: nur hier gelten die modernen Basis-Regeln.
   So bleiben globale Regeln wie "h1..h4 { text-transform:uppercase }"
   und "img { width:100% }" ausserhalb unberuehrt.
   --------------------------------------------------------------------- */
.amb-scope {
    font-family: var(--amb-font);
    color: var(--amb-ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.amb-scope *,
.amb-scope *::before,
.amb-scope *::after { box-sizing: border-box; }

.amb-scope h1, .amb-scope h2, .amb-scope h3,
.amb-scope h4, .amb-scope h5, .amb-scope h6 {
    text-transform: none;           /* globale Uppercase-Regel neutralisieren */
    color: var(--amb-ink);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 var(--amb-space-3);
    font-weight: 700;
}
.amb-scope p { margin: 0 0 var(--amb-space-3); line-height: 1.6; }
.amb-scope img { max-width: 100%; height: auto; width: auto; } /* globale img{width:100%} entschaerfen */
.amb-scope a { color: var(--amb-amber-dark); }

.amb-container {
    max-width: var(--amb-maxw);
    margin: 0 auto;
    padding-left: var(--amb-space-5);
    padding-right: var(--amb-space-5);
}

/* Eyebrow / Kicker ---------------------------------------------------- */
.amb-eyebrow {
    display: inline-block;
    font-size: var(--amb-fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--amb-amber-dark);
    margin-bottom: var(--amb-space-2);
}

/* Section-Ueberschrift ------------------------------------------------ */
.amb-section-title {
    font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.amb-section-lead {
    font-size: clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
    color: var(--amb-slate);
    max-width: 60ch;
}

/* Buttons – angelehnt an die Original-Buttons der Website:
   Amber→Gelb-Verlauf, dunkler Text, Uppercase, eckig (border-radius 0) */
.amb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--amb-space-2);
    font-family: var(--amb-font);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 15px 26px;
    border-radius: 0;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, filter .2s ease;
    white-space: nowrap;
}
.amb-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--amb-amber-ring);
}
.amb-btn--primary {
    background: var(--amb-grad-brand);
    color: var(--amb-dark);
    box-shadow: var(--amb-shadow-sm);
}
.amb-btn--primary:hover {
    color: var(--amb-dark);
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: var(--amb-shadow);
    text-decoration: none;
}
.amb-btn--send {
    background: var(--amb-green);
    color: #fff;
    border-color: var(--amb-green);
}
.amb-btn--send:hover { background: #238e2f; border-color: #238e2f; color: #fff; transform: translateY(-1px); }
.amb-btn--ghost {
    background: transparent;
    color: var(--amb-ink);
    border-color: var(--amb-line-strong);
}
.amb-btn--ghost:hover {
    border-color: var(--amb-amber);
    color: var(--amb-amber-dark);
    background: var(--amb-amber-soft);
    text-decoration: none;
}
.amb-btn--dark {
    background: var(--amb-dark);
    color: #fff;
}
.amb-btn--dark:hover { background: #23262a; color: #fff; transform: translateY(-1px); }
.amb-btn--block { width: 100%; }
.amb-btn--sm { padding: 10px 16px; font-size: 0.88rem; }

/* Card ---------------------------------------------------------------- */
.amb-card {
    background: var(--amb-bg);
    border: 1px solid var(--amb-line);
    border-radius: var(--amb-r);
    box-shadow: var(--amb-shadow-sm);
    transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.amb-card--hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--amb-shadow);
    border-color: var(--amb-line-strong);
}

/* Badge / Chip -------------------------------------------------------- */
.amb-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--amb-r-pill);
    background: var(--amb-amber-soft);
    color: var(--amb-amber-dark);
    border: 1px solid var(--amb-amber-ring);
}
.amb-badge--neutral {
    background: var(--amb-bg-tint);
    color: var(--amb-slate);
    border-color: var(--amb-line);
}

/* Trust-Strip --------------------------------------------------------- */
.amb-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--amb-space-3) var(--amb-space-6);
    align-items: center;
    justify-content: center;
}
.amb-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--amb-slate);
}
.amb-trust__item svg { flex: 0 0 auto; }

/* Feine, respektvolle Reveal-Animation (nur wenn erlaubt) ------------- */
@media (prefers-reduced-motion: no-preference) {
    .amb-reveal {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .5s ease, transform .5s ease;
    }
    .amb-reveal.amb-in { opacity: 1; transform: none; }
}