@charset "UTF-8";

/* ate: Startseiten-CSS nach ATE-Mockup-Redesign 07/2026 — Komplett-Neuschrieb
   (die fruehere Fassung stylte die geloeschten Sektionen Welcome/Popular/
   Service; wiederverwendet wurden nur Breakout-Wrapper + Content-Margin-Reset).

   Quelle: JTL-Store Mockup/1. atestore-startseite-redesign.html (Inline-CSS
   Z.11-327), Klassen mit ate--Praefix (Mockup-Klassen wie .btn/.chip/.page
   kollidieren mit Bootstrap/NOVA). Alles unter .ate-home gescoped.

   Farb-/Radius-Tokens: custom.css :root (--ate-*). Sticky-Offset der
   Sidebar: --ate-sticky-top (js/custom.js + Fallback chrome.css Sektion 0).
   Markup: snippets/content_startseite.tpl + snippets/home/*.tpl.
   JS-Interaktionen: js/home.js. Einbindung: layout/header.tpl (?v-Bust). */


/* === 1. Wrapper / Breakout / Seitengrid ==================================== */

#content-wrapper:has(.ate-home) {
    /* ate: NOVA-Defaults killen (margin + 64px padding-top), damit die
       Startseite direkt unter der Trustbar beginnt — die Sektionen bringen
       ihre Mockup-Abstaende selbst mit. */
    margin-top: 0;
    padding-top: 0;
}

/* ate: NOVA gibt #content 48px padding-bottom (_base_crit.scss / my-nova_crit.css).
   Auf der Startseite bringt die letzte Sektion ihren Abstand selbst mit und endet am
   Footer — den unteren NOVA-Abstand hier killen, sonst weisser Streifen zwischen dem
   grauen Process-Band und dem Footer. Nur Home (:has(.ate-home)); hoehere Spezifitaet
   (#content + :has) ueberstimmt die inline-kritische Regel #content{padding-bottom:3rem}. */
#content:has(.ate-home) {
    padding-bottom: 0;
}

/* ate: NOVA-Theme setzt global `main section { padding: 2rem/4rem 0 }` —
   das addierte 64px auf JEDE Startseiten-Sektion (u.a. die Luecke zwischen
   Trustbar und Hero). Im Home-Scope zuruecksetzen; die gewollten Abstaende
   definieren die Sektionsklassen (.ate-persona, .ate-products, ...), die
   als Klassen-Selektoren diese Element-Regel ohnehin ueberstimmen. */
.ate-home section {
    padding: 0;
}

.ate-home {
    /* Full-Bleed-Breakout aus dem NOVA-#content-Container (bewaehrtes
       Voltando-Pattern) — Basis-Regeln zusaetzlich im Critical-CSS-Block.
       WICHTIG: overflow-x CLIP statt hidden — overflow:hidden macht den
       Wrapper zum Scroll-Container und bricht position:sticky der Sidebar
       (sie wuerde relativ zum Wrapper statt zum Viewport kleben). clip
       schneidet nur den 100vw-Ueberstand ab, ohne Scroll-Kontext. */
    position: relative;
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    isolation: isolate;
    overflow-x: clip;
    overflow-y: visible;
    display: block;

    /* Mockup-Basistypografie + lokale Layout-Tokens */
    font-size: 16px;
    line-height: 1.6;
    color: var(--ate-tiefnavy);
    --ate-home-maxw: 1340px;
    --ate-home-radius: 14px;
    --ate-body-soft: #3b4c5c;
}

.ate-home .ate-page {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 28px;
    align-items: start;
    gap: 0 26px;
}

.ate-home .ate-content {
    min-width: 0;
}

/* ate: Full-Bleed-Baender — die farbigen Sektionen (.ate-persona/.ate-tech/
   .ate-process) liegen in der Grid-Spalte .ate-content und enden damit auf BEIDEN
   Seiten vor der Viewport-Kante; dahinter ist reinweisser Body-Hintergrund =>
   sichtbare Streifen (v.a. beim navy Tech-Band). Statt die Baender aus dem Grid zu
   ziehen (das bricht die sticky Sidebar + macht den transparenten Produkt-Slider
   schmaler), verlaengern wir NUR ihre Hintergrundfarbe per ::before/::after bis zu
   beiden Kanten. background-color:inherit uebernimmt automatisch die jeweilige
   Bandfarbe. .ate-home hat overflow-x:clip => der 100vw-Ueberstand wird gekappt,
   kein horizontaler Scroll.

   ate 2026-07-23: Der LINKE Ausleger ist neu und eine bewusste Mockup-Abweichung.
   Das Mockup laesst die Baender bei ~326px beginnen (Sidebar-Spalte) — dort ist die
   Sidebar aber durchgehend sticky mit overflow-y:auto, es steht also immer Inhalt
   daneben. Unsere Sidebar scrollt auf Wunsch ATE weg (siehe .ate-sidecats unten),
   wodurch links ein leerer weisser Block stehenblieb, der wie ein Layoutfehler wirkt.

   z-index:-1 ist PFLICHT: .ate-side-inner ist sticky (= positioniert) und steht in
   Baumordnung VOR den Baendern. Ohne negativen z-index wuerde der linke Ausleger
   ueber der Sidebar liegen und sie verdecken. .ate-home hat isolation:isolate, der
   Stacking-Context bleibt damit sauber begrenzt. Die Sidebar hat als Gegenstueck
   einen eigenen weissen Panel-Hintergrund, damit sie ueber dem navy Band lesbar
   bleibt (.ate-side-inner). */
.ate-home .ate-persona,
.ate-home .ate-tech,
.ate-home .ate-process {
    position: relative;
}
.ate-home .ate-persona::before,
.ate-home .ate-tech::before,
.ate-home .ate-process::before,
.ate-home .ate-persona::after,
.ate-home .ate-tech::after,
.ate-home .ate-process::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100vw;
    background-color: inherit;
    pointer-events: none;
    z-index: -1;
}
.ate-home .ate-persona::before,
.ate-home .ate-tech::before,
.ate-home .ate-process::before {
    right: 100%;
}
.ate-home .ate-persona::after,
.ate-home .ate-tech::after,
.ate-home .ate-process::after {
    left: 100%;
}

/* ate: NOVA/custom.css unterstreichen Links global — im Mockup sind Links
   dekorationslos (a{text-decoration:none}); Hover-Effekte definieren die
   Komponenten selbst. Scoped Reset statt globalem Eingriff. */
.ate-home a,
.ate-home a:hover,
.ate-home a:focus {
    text-decoration: none;
}

.ate-home .ate-wrap {
    max-width: var(--ate-home-maxw);
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Sidebar (Mockup .sidecats) --- */
/* ate: Sticky-Grenze der Sidebar (User-Vorgabe 07/2026: "klebt, bis der
   Footer kommt, dann weggescrollt"). Wichtig: Der Footer ist KUERZER als
   ein Bildschirm — startet das Wegscrollen erst exakt am Content-Ende
   (height:100%), kann es bis zum maximalen Scrollweg nie fertig werden
   und die Sidebar wirkt festgeklebt (so auf grossen Monitoren passiert).
   Darum endet der Klebe-Bereich einen halben Viewport vor dem Content-
   Ende: das Rausscrollen beginnt kurz vorm Footer und ist abgeschlossen,
   sobald er im Bild ist — auf jeder Monitorgroesse. (Explizite Hoehe
   noetig, weil .ate-page align-items:start setzt; max() als Guard fuer
   sehr kurze Seiten.) */
.ate-home .ate-sidecats {
    /* ate: Traeger der sticky Sidebar. height:100% (= volle Content-Hoehe)
       laesst den content-hohen Inner durch den gesamten Content mitkleben;
       am Ende schiebt der hochkommende Footer ihn aus dem Bild.
       (Frueher trug diese Hoehe zusammen mit einem VIEWPORT-hohen Inner das
       Layout; der Inner ist seit 2026-07-21 content-hoch — siehe unten.) */
    height: 100%;
}

.ate-home .ate-side-inner {
    position: sticky;
    top: var(--ate-sticky-top, 176px);
    /* ate 2026-07-21: Hoehe = INHALT (vorher height:calc(100vh - sticky-top)
       + Flex-Spalte + margin-top:auto auf "Direkter Draht"). Behebt zwei
       Defekte, ohne die Sidebar-Funktion zu aendern:
       (1) Weisse Luecke in der Sidebar-Mitte: die viewport-fuellende Hoehe
           schob "Direkter Draht" ans untere Spaltenende und liess dazwischen
           Weiss stehen. Jetzt folgt die Box direkt (22px, .ate-side-help)
           unter der Blog-Card.
       (2) Leerraum vor dem Footer bei sehr hohen Viewports (>~5300px):
           calc(100vh - …) blies die Spalte ueber die Content-Hoehe hinaus
           auf und schob den Footer nach unten. Content-Hoehe kann das nicht.
       Sticky-Begleitung durch den Content bleibt (Traeger .ate-sidecats hat
       height:100%); kein overflow-y:auto (wuerde das Mausrad schlucken). */

    /* ate 2026-07-23: Eigener Panel-Hintergrund. Notwendig, seit die farbigen
       Baender full-bleed nach links laufen (siehe ::before-Block oben) — die
       Sidebar ist rein navy/graue Schrift ohne Flaeche und waere sonst beim
       Durchscrollen des navy Tech-Bands unlesbar. Als weisse Karte fuegt sie
       sich zugleich in die Kartensprache der Seite ein (Persona-, Blog- und
       Produktkarten liegen ebenfalls als weisse Karten auf farbigem Band).
       Horizontales Padding bewusst knapp (12px): die Kategorie-Links bringen
       ihre eigenen 12px mit, damit die Hover-Flaeche ueber den Text hinausgeht. */
    background-color: #fff;
    /* ate 2026-07-24: nur untere Ecken abgerundet (oben eckig) — User-Wunsch */
    border-radius: 0 0 var(--ate-home-radius) var(--ate-home-radius);
    box-shadow: var(--ate-shadow-card-sm);
    padding: 26px 12px 28px;
}

.ate-home .ate-side-h2 {
    font-family: 'Roboto Condensed', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 15px;
    color: var(--ate-navy);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 0 12px;
    padding-left: 12px;
}

.ate-home .ate-side-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.ate-home .ate-side-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ate-body-soft);
    transition: background-color .15s ease, color .15s ease;
}

.ate-home .ate-side-list li a::after {
    content: "\203A";
    color: var(--ate-grey-mid);
    font-size: 16px;
    transition: transform .15s ease;
}

.ate-home .ate-side-list li a:hover {
    background-color: #eef1f5;
    color: var(--ate-navy);
    text-decoration: none;
}

.ate-home .ate-side-list li a:hover::after {
    transform: translateX(3px);
}

/* ate 2026-07-23: Regel .ate-side-all entfernt — der "Alle Hersteller"-Button
   in der Startseiten-Sidebar ist auf Wunsch ATE raus (snippets/home/sidebar.tpl),
   die Klasse existiert nicht mehr. Abstand Kategorienliste -> Blog-Card traegt
   jetzt allein .ate-side-list (margin-bottom) + .ate-side-blog (margin-top). */

.ate-home .ate-side-blog {
    margin-top: 22px;
    border-top: 1px solid var(--ate-grey-light);
    padding-top: 18px;
}

.ate-home .ate-side-h3 {
    font-family: 'Roboto Condensed', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 13px;
    color: var(--ate-navy);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ate-home .ate-side-blog-card {
    display: block;
    padding: 14px;
    border: 1px solid var(--ate-grey-light);
    border-radius: 10px;
    transition: transform .15s ease, box-shadow .15s ease;
}

.ate-home .ate-side-blog-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ate-shadow-card-sm);
    text-decoration: none;
}

.ate-home .ate-side-blog-date {
    display: inline-block;
    background-color: var(--ate-navy);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 5px;
    margin-bottom: 9px;
}

.ate-home .ate-side-blog-tag {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ate-magenta-dark);
    margin-bottom: 4px;
}

.ate-home .ate-side-blog-card strong {
    display: block;
    font-size: 13.5px;
    color: var(--ate-navy);
    line-height: 1.4;
    margin-bottom: 9px;
}

.ate-home .ate-side-blog-more {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ate-navy);
}

/* ate 2026-08-24: .ate-side-help-Regeln entfernt — die "Direkter Draht"-Box
   ist auf Kunden-Feedback (Fady, PPT 21.08. Folie 4) aus sidebar.tpl raus. */


/* === 2. Shared-Komponenten ================================================= */

/* ate 2026-08-24: Bild-Links auf Hero-/Produktkarten (Kunden-Feedback Fady,
   PPT 21.08. Folie 9) — display:contents nimmt den <a> aus dem Layout, damit
   die bestehenden Karten-Selektoren (img als Kind der Karte) weiter greifen;
   klickbar bleibt die Bildflaeche trotzdem. */
.ate-home .ate-imglink {
    display: contents;
}

.ate-home .ate-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ate-grey-mid);
}

.ate-home .ate-statement {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-style: italic;
    line-height: 1.15;
}

.ate-home .ate-headline {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-style: italic;
    line-height: 1.15;
}

/* ate: Section-H2s sind laut Mockup NAVY (die globale Magenta-H2-Regel aus
   custom.css gilt fuer Content-Seiten; hier gewinnt die Mockup-Referenz). */
.ate-home .ate-section-head {
    max-width: 720px;
}

.ate-home .ate-section-head h2 {
    font-size: clamp(28px, 3.4vw, 40px);
    color: var(--ate-navy);
    margin: 10px 0 14px;
}

.ate-home .ate-section-head p {
    color: var(--ate-body-soft);
    font-size: 17px;
    margin: 0;
}

/* Buttons (Mockup .btn) — bewusst eigene Klasse, NICHT Bootstrap .btn. */
.ate-home .ate-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}

.ate-home .ate-btn:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.ate-home .ate-btn--primary {
    background-color: var(--ate-navy);
    color: #fff;
    box-shadow: var(--ate-shadow-card-sm);
}

.ate-home .ate-btn--primary:hover,
.ate-home .ate-btn--primary:focus {
    background-color: #003a6e;
    color: #fff;
}

.ate-home .ate-btn--outline {
    border-color: var(--ate-navy);
    color: var(--ate-navy);
    background-color: transparent;
}

.ate-home .ate-btn--outline:hover,
.ate-home .ate-btn--outline:focus {
    background-color: var(--ate-navy);
    color: #fff;
}

.ate-home .ate-btn--sm {
    padding: 9px 18px;
    font-size: 14px;
}

/* Produkt-Bausteine (Feature-/Prod-Cards) */
.ate-home .ate-mfr {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ate-grey-mid);
}

.ate-home .ate-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ate-home .ate-spec-chip {
    font-size: 12px;
    font-weight: 500;
    color: var(--ate-navy);
    background-color: #eef1f5;
    border: 1px solid var(--ate-grey-light);
    border-radius: 6px;
    padding: 4px 10px;
    letter-spacing: .02em;
}

.ate-home .ate-price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.ate-home .ate-price-old {
    font-size: 14px;
    color: var(--ate-grey-mid);
    text-decoration: line-through;
}

.ate-home .ate-price {
    font-size: 26px;
    font-weight: 700;
    color: var(--ate-navy);
}

.ate-home .ate-price small {
    font-size: 13px;
    font-weight: 400;
    color: var(--ate-grey-mid);
}

.ate-home .ate-price small a {
    color: var(--ate-grey-mid);
}


/* === 3. Hero + Hero-Produktkarussell ======================================= */

.ate-home .ate-hero {
    position: relative;
    overflow: hidden;
    background-color: #fff;
}

/* Grid-Pattern-Hintergrund mit Mask (Mockup .hero::before) */
.ate-home .ate-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(223, 227, 232, .4) 1px, transparent 1px),
        linear-gradient(rgba(223, 227, 232, .4) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(105deg, transparent 30%, #000 75%);
    -webkit-mask-image: linear-gradient(105deg, transparent 30%, #000 75%);
}

.ate-home .ate-hero .ate-wrap {
    position: relative;
}

.ate-home .ate-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 56px;
    /* ate: Hero-Text oben buendig mit dem Produkt (User-Wunsch); bewusste
       Abweichung vom Mockup, das align-items:center nutzt. */
    align-items: start;
    /* ate 2026-08-24: Vertikal-Padding gestrafft (76/84 -> 56/36) — Kunden-
       Feedback Fady (PPT 21.08., Folie 6): Weissraum unter der Hero-Intro-
       Spalte reduzieren und die Herstellerrotation naeher an den Hero ziehen.
       Der Rest-Leerraum links haengt an der Hoehe der Produktkarte rechts
       (Slides unterschiedlich hoch) und ist nicht per Padding wegzukriegen,
       ohne das Top-Alignment (User-Wunsch oben) zu kippen. */
    padding-top: 56px;
    padding-bottom: 36px;
}

.ate-home .ate-hero h1 {
    font-size: clamp(34px, 4.6vw, 56px);
    color: var(--ate-navy);
    margin: 18px 0 20px;
}

.ate-home .ate-hero h1 .ate-accent {
    color: var(--ate-magenta);
}

.ate-home .ate-lead {
    font-size: 18px;
    color: var(--ate-body-soft);
    max-width: 560px;
    margin-bottom: 32px;
}

.ate-home .ate-cta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.ate-home .ate-hero-trust {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
}

.ate-home .ate-hero-trust span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--ate-grey-mid);
    font-weight: 500;
}

.ate-home .ate-hero-trust svg {
    flex: none;
}

/* Feature-Card (Slide) */
.ate-home .ate-feature-card {
    position: relative;
    background-color: #fff;
    padding: 28px;
    display: flex;
    flex-direction: column;
}

.ate-home .ate-feature-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: var(--ate-navy);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 20px;
    z-index: 1;
}

/* ate 2026-08-24: + .ate-imglink-Variante — das Bild steckt jetzt in einem
   Produktlink (Fady Folie 9); display:contents haelt das Layout, aber der
   Direktkind-Selektor braucht den zweiten Pfad. */
.ate-home .ate-feature-card > img,
.ate-home .ate-feature-card > .ate-imglink > img {
    height: 230px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 8px auto 18px;
    display: block;
}

.ate-home .ate-feature-card h3 {
    font-size: 22px;
    color: var(--ate-navy);
    margin: 4px 0 12px;
}

/* Hero-Slider-Rahmen */
.ate-home .ate-hero-slider {
    position: relative;
    background-color: #fff;
    border: 1px solid var(--ate-grey-light);
    border-radius: var(--ate-home-radius);
    box-shadow: var(--ate-shadow-card);
    overflow: hidden;
}

.ate-home .ate-hero-track {
    display: flex;
    align-items: stretch;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.ate-home .ate-hero-slider .ate-feature-card {
    flex: 0 0 100%;
    min-width: 100%;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding-bottom: 100px;
}

.ate-home .ate-hero-slider .ate-feature-card .ate-btn {
    align-self: flex-start;
    margin-top: auto;
}

.ate-home .ate-slider-nav {
    position: absolute;
    bottom: 36px;
    right: 20px;
    display: flex;
    gap: 8px;
    z-index: 2;
}

.ate-home .ate-slider-nav button,
.ate-home .ate-pc-nav button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--ate-grey-light);
    background-color: #fff;
    color: var(--ate-navy);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, border-color .15s ease;
    padding: 0;
}

.ate-home .ate-slider-nav button:hover,
.ate-home .ate-pc-nav button:hover {
    background-color: var(--ate-navy);
    border-color: var(--ate-navy);
}

.ate-home .ate-slider-nav button:hover svg,
.ate-home .ate-pc-nav button:hover svg {
    stroke: #fff;
}

.ate-home .ate-slider-nav button:focus-visible,
.ate-home .ate-pc-nav button:focus-visible {
    outline: 2px solid var(--ate-navy);
    outline-offset: 2px;
}

.ate-home .ate-slider-thumbs {
    position: absolute;
    bottom: 22px;
    left: 24px;
    /* ate: rechte Grenze + schrumpffaehige Kacheln — die Leiste war fix
       4x58+3x10 = 262px breit und lief damit unter die Prev/Next-Pfeile
       (Slider-Spalte ist real nur 273-386px breit), Thumb 3/4 waren nicht
       klickbar. 120px = 20px Rand + 88px Nav + 12px Luft. */
    right: 120px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
}

.ate-home .ate-slider-thumbs button {
    /* ate: schrumpft erst, wenn die Spalte zu schmal wird — sonst 58px. */
    flex: 0 1 58px;
    min-width: 0;
    height: auto;
    aspect-ratio: 1;
    border: 1.5px solid var(--ate-grey-light);
    border-radius: 10px;
    background-color: #fff;
    cursor: pointer;
    padding: 6px;
    transition: border-color .15s ease, transform .15s ease, opacity .15s ease;
    opacity: .75;
}

.ate-home .ate-slider-thumbs button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ate-home .ate-slider-thumbs button:hover {
    transform: translateY(-2px);
    opacity: 1;
}

.ate-home .ate-slider-thumbs button.active {
    border: 2px solid var(--ate-navy);
    opacity: 1;
}

.ate-home .ate-slider-thumbs button:focus-visible {
    outline: 2px solid var(--ate-navy);
    outline-offset: 2px;
}


/* === 4. Hersteller-Linecard (3D-Coverflow) ================================= */

.ate-home .ate-linecard {
    background-color: #fff;
    border-top: 1px solid var(--ate-grey-light);
    border-bottom: 1px solid var(--ate-grey-light);
    padding: 26px 0 34px;
    position: relative;
    overflow: hidden;
}

.ate-home .ate-lc-label {
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ate-grey-mid);
    margin-bottom: 8px;
}

.ate-home .ate-lc3d-stage {
    position: relative;
    height: 190px;
    perspective: 1400px;
    max-width: 1200px;
    margin: 0 auto;
}

.ate-home .ate-lc3d-stage .ate-lc-tile {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 214px;
    height: 128px;
    margin: -64px 0 0 -107px;
    background-color: #fff;
    border: 1px solid var(--ate-grey-light);
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(8, 25, 41, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    transition: transform .55s ease, opacity .55s ease, box-shadow .3s ease;
    backface-visibility: hidden;
    will-change: transform;
    /* ate 2026-08-25 (Fady, Folie 5): Kacheln sind wieder <a> — Seiten-
       Kachel dreht per Klick nach vorn, Mittelkachel fuehrt zum Hersteller
       (js/home.js initLinecard). Link-Defaults neutralisieren, damit die
       Text-Fallback-Kachel nicht in Linkfarbe/unterstrichen rendert. */
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.ate-home .ate-lc3d-stage .ate-lc-tile:hover,
.ate-home .ate-lc3d-stage .ate-lc-tile:focus {
    text-decoration: none;
    color: inherit;
}

.ate-home .ate-lc3d-stage .ate-lc-tile img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .65;
    transition: filter .3s ease, opacity .3s ease;
}

/* Text-Fallback solange Logo-Asset fehlt (linecard.tpl) */
.ate-home .ate-lc-text {
    font-family: 'Roboto Condensed', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 18px;
    color: var(--ate-grey-mid);
    text-align: center;
    transition: color .3s ease;
}

.ate-home .ate-lc3d-stage .ate-lc-tile.center {
    box-shadow: 0 22px 46px rgba(8, 25, 41, .20);
    /* ate 2026-08-25: Mittelkachel ist jetzt der aktive Link -> pointer. */
    cursor: pointer;
}

.ate-home .ate-lc3d-stage .ate-lc-tile.center img {
    filter: none;
    opacity: 1;
}

.ate-home .ate-lc3d-stage .ate-lc-tile.center .ate-lc-text {
    color: var(--ate-navy);
}

/* ate 2026-08-25: Fokus-Ring zurueck (Mockup Z.80) — die Kacheln sind wieder
   Links und per Tab erreichbar (versteckte Kacheln bekommen tabindex=-1 im JS). */
.ate-home .ate-lc3d-stage .ate-lc-tile:focus-visible {
    outline: 2px solid var(--ate-navy);
    outline-offset: 4px;
}

.ate-home .ate-lc3d-hidden {
    opacity: 0 !important;
    pointer-events: none;
}


/* === 5. Persona ============================================================ */

.ate-home .ate-persona {
    background-color: #f4f6f8;
    padding: 72px 0;
}

.ate-home .ate-persona-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 36px;
}

.ate-home .ate-persona-card {
    background-color: #fff;
    border-radius: var(--ate-home-radius);
    box-shadow: var(--ate-shadow-card-sm);
    padding: 38px 36px;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}

.ate-home .ate-persona-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ate-shadow-card);
}

.ate-home .ate-persona-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background-color: var(--ate-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.ate-home .ate-persona-card h3 {
    font-size: 24px;
    color: var(--ate-navy);
    margin-bottom: 14px;
}

.ate-home .ate-persona-card ul {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}

.ate-home .ate-persona-card li {
    padding: 7px 0 7px 30px;
    position: relative;
    color: var(--ate-body-soft);
    font-size: 15px;
}

.ate-home .ate-persona-card li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 14px;
    width: 16px;
    height: 9px;
    border-left: 2.5px solid var(--ate-navy);
    border-bottom: 2.5px solid var(--ate-navy);
    transform: rotate(-45deg);
}

.ate-home .ate-persona-card .ate-btn {
    margin-top: auto;
    align-self: flex-start;
}

/* ate: Swipe-Dots der Persona — am Desktop (2-Spalten-Grid) ausgeblendet,
   erst im mobilen Slider (<=840px, Sektion 11) sichtbar. JS baut die
   Buttons (home.js initPersonaSlider); ohne JS bleiben sie leer + hidden. */
.ate-home .ate-persona-dots {
    display: none;
}


/* === 6. "Neu im Store"-Produktkarussell ==================================== */

.ate-home .ate-products {
    padding: 84px 0;
}

.ate-home .ate-products-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 38px;
    flex-wrap: wrap;
}

.ate-home .ate-products-top-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ate-home .ate-pc-nav {
    display: flex;
    gap: 8px;
}

.ate-home .ate-pc-viewport {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* ate: Karussell nach RECHTS bis zur Bildschirmkante ziehen (analog zur ::after-
       Rechts-Verlaengerung der farbigen Baender). Der Scroller startet links an der
       Content-Spalten-Kante (Karussell liegt ausserhalb .ate-wrap, s. products_carousel.tpl,
       also buendig mit den farbigen Baendern rechts der Sidebar) und laeuft via width:100vw
       bis ueber die Viewport-Kante; .ate-home overflow-x:clip kappt den Ueberstand (kein
       H-Scroll). Links keine Kollision mit der sticky Sidebar (Karten beginnen rechts von ihr). */
    width: 100vw;
}

.ate-home .ate-pc-viewport::-webkit-scrollbar {
    display: none;
}

.ate-home .ate-pc-track {
    display: flex;
    gap: 24px;
    width: max-content;
    padding: 4px 2px 10px;
}

.ate-home .ate-prod-card {
    background-color: #fff;
    border: 1px solid var(--ate-grey-light);
    border-radius: var(--ate-home-radius);
    padding: 22px;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    flex: 0 0 305px;
    width: 305px;
}

.ate-home .ate-prod-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ate-shadow-card);
    border-color: transparent;
}

/* ate 2026-08-24: + .ate-imglink-Variante, Begruendung s. .ate-feature-card. */
.ate-home .ate-prod-card > img,
.ate-home .ate-prod-card > .ate-imglink > img {
    height: 150px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 6px auto 16px;
    display: block;
}

.ate-home .ate-prod-card .ate-mfr {
    font-size: 11px;
}

.ate-home .ate-prod-card h3 {
    font-size: 17px;
    color: var(--ate-navy);
    margin: 4px 0 4px;
    min-height: 44px;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3;
}

.ate-home .ate-mpn {
    font-size: 12px;
    color: var(--ate-grey-mid);
    margin-bottom: 12px;
}

.ate-home .ate-prod-card .ate-price-row {
    margin-top: auto;
    margin-bottom: 14px;
}

.ate-home .ate-prod-card .ate-price {
    font-size: 20px;
}

.ate-home .ate-prod-card .ate-btn {
    width: 100%;
    justify-content: center;
}


/* === 7. Tech-Band ========================================================== */

.ate-home .ate-tech {
    background-color: var(--ate-navy);
    color: #fff;
    padding: 84px 0;
    position: relative;
    /* ate: overflow:hidden entfernt (war vestigial aus dem Mockup, keine Deko nutzt es) —
       es klippte den ::after-Rand-Ausleger nach rechts. Den 100vw-Ueberstand faengt
       .ate-home overflow-x:clip ab. */
}

.ate-home .ate-tech .ate-eyebrow {
    color: #8fa3b6;
}

.ate-home .ate-tech .ate-section-head h2 {
    color: #fff;
}

.ate-home .ate-tech .ate-section-head p {
    color: #c7d3de;
}

.ate-home .ate-tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.ate-home .ate-tech-tile {
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    padding: 24px;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.ate-home .ate-tt-img {
    flex: none;
    width: 66px;
    height: 66px;
    background-color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.ate-home .ate-tt-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ate-home .ate-tt-body {
    min-width: 0;
}

.ate-home .ate-tech-tile:hover {
    background-color: rgba(255, 255, 255, .11);
    border-color: rgba(255, 255, 255, .3);
    transform: translateY(-3px);
    text-decoration: none;
}

.ate-home .ate-tech-tile h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #fff;
}

.ate-home .ate-tech-tile p {
    font-size: 14px;
    color: #b6c4d1;
    margin-bottom: 14px;
}

.ate-home .ate-tt-link {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ate-home .ate-tt-link::after {
    content: "\2192";
    transition: transform .15s ease;
}

.ate-home .ate-tech-tile:hover .ate-tt-link::after {
    transform: translateX(4px);
}


/* === 8. Blog + Newsletter ================================================== */

.ate-home .ate-blog {
    padding: 88px 0;
}

.ate-home .ate-blog-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.ate-home .ate-new-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--ate-magenta);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.ate-home .ate-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 44px;
}

.ate-home .ate-blog-card {
    border: 1px solid var(--ate-grey-light);
    border-radius: var(--ate-home-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}

.ate-home .ate-blog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ate-shadow-card);
    text-decoration: none;
}

.ate-home .ate-blog-thumb {
    height: 180px;
    border-bottom: 1px solid var(--ate-grey-light);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background:
        repeating-linear-gradient(0deg, rgba(223, 227, 232, .55) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(90deg, rgba(223, 227, 232, .55) 0 1px, transparent 1px 24px),
        linear-gradient(135deg, #fdfdfe, #eef1f5);
}

.ate-home .ate-blog-thumb img {
    max-height: 100%;
    max-width: 78%;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(8, 25, 41, .16));
    transition: transform .35s ease;
}

.ate-home .ate-blog-card:hover .ate-blog-thumb img {
    transform: scale(1.04);
}

.ate-home .ate-blog-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ate-home .ate-blog-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ate-magenta-dark);
    margin-bottom: 10px;
}

.ate-home .ate-blog-card h3 {
    font-size: 18px;
    color: var(--ate-navy);
    margin-bottom: 10px;
    line-height: 1.35;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 700;
}

.ate-home .ate-blog-body p {
    font-size: 14px;
    color: var(--ate-body-soft);
    margin-bottom: 18px;
}

.ate-home .ate-blog-meta {
    margin-top: auto;
    font-size: 13px;
    color: var(--ate-grey-mid);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ate-home .ate-blog-read {
    font-weight: 700;
    color: var(--ate-navy);
}

/* Newsletter-Box */
.ate-home .ate-newsletter {
    background-color: #f4f6f8;
    border-radius: var(--ate-home-radius);
    padding: 36px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.ate-home .ate-newsletter::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--ate-gradient-accent);
}

.ate-home .ate-newsletter h3 {
    font-size: 22px;
    color: var(--ate-navy);
    margin-bottom: 6px;
}

.ate-home .ate-newsletter > div > p {
    font-size: 14.5px;
    color: var(--ate-body-soft);
    margin: 0;
}

.ate-home .ate-newsletter-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.ate-home .ate-newsletter-form input[type="email"] {
    height: 48px;
    border: 1px solid var(--ate-grey-light);
    border-radius: 8px;
    padding: 0 16px;
    font-size: 15px;
    /* ate: Bootstrap .form-control setzt width:100% -> Input wuerde die
       Flex-Zeile sprengen; inline halten wie im Mockup. */
    width: auto;
    flex: 1 1 280px;
    min-width: 280px;
    max-width: 420px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s ease;
    background-color: #fff;
}

.ate-home .ate-newsletter-form input[type="email"]:focus {
    border-color: var(--ate-navy);
    box-shadow: none;
}

.ate-home .ate-newsletter-consent {
    flex-basis: 100%;
    order: 10;
    font-size: 12px;
    color: var(--ate-grey-mid);
    margin: 4px 0 0;
}

.ate-home .ate-newsletter-form .ate-btn {
    height: 48px;
}

/* JTL-Captcha im Newsletter-Formular dezent einreihen */
.ate-home .ate-newsletter-form .captcha-wrapper,
.ate-home .ate-newsletter-form .form-group {
    margin: 0;
}


/* === 9. Process ============================================================ */

.ate-home .ate-process {
    background-color: #f4f6f8;
    padding: 84px 0;
}

.ate-home .ate-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 42px;
}

.ate-home .ate-step {
    background-color: #fff;
    border-radius: var(--ate-home-radius);
    box-shadow: var(--ate-shadow-card-sm);
    padding: 30px 26px;
    position: relative;
}

.ate-home .ate-step-num {
    font-family: 'Roboto Condensed', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 40px;
    color: var(--ate-grey-light);
    line-height: 1;
    margin-bottom: 14px;
}

.ate-home .ate-step h3 {
    font-size: 17px;
    color: var(--ate-navy);
    margin-bottom: 10px;
}

.ate-home .ate-step p {
    font-size: 14px;
    color: var(--ate-body-soft);
    margin: 0;
}

.ate-home .ate-process-cta {
    text-align: center;
    margin-top: 44px;
}


/* === 10. Scroll-Reveal ===================================================== */
/* ate: Versteckt wird NUR unter .ate-anim — die Klasse setzt js/home.js
   VOR dem Observer-Setup. Laedt/failt JS, bleibt alles sichtbar
   (robuster als das Mockup, das .reveal unconditionally versteckt). */

.ate-home.ate-anim .ate-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
}

.ate-home.ate-anim .ate-reveal.visible {
    opacity: 1;
    transform: none;
}


/* === 11. Reduced Motion + Responsive ======================================= */

@media (prefers-reduced-motion: reduce) {
    .ate-home.ate-anim .ate-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .ate-home .ate-hero-track,
    .ate-home .ate-lc3d-stage .ate-lc-tile {
        transition: none;
    }
    .ate-home .ate-btn:hover,
    .ate-home .ate-prod-card:hover,
    .ate-home .ate-persona-card:hover,
    .ate-home .ate-blog-card:hover,
    .ate-home .ate-tech-tile:hover {
        transform: none;
    }
    .ate-home .ate-blog-card:hover .ate-blog-thumb img {
        transform: none;
    }
}

@media (max-width: 1399.98px) {
    /* ate: Prev/Next erst ab ~1400px Viewport — darunter ist die Slider-Spalte
       zu schmal (gemessen 273px bei 1100px Viewport bis 386px bei 1366px), die
       Pfeile lagen dann auf der Thumb-Leiste und machten Thumb 3/4 unklickbar.
       Die Thumbnails bleiben als Umschalter und nutzen die volle Kartenbreite;
       die Pfeile sind ohnehin redundant. Bewusste Abweichung vom Mockup — das
       hat exakt denselben Ueberlappungs-Bug (bei 1280px: 47px Ueberlappung). */
    .ate-home .ate-slider-nav {
        display: none;
    }
    .ate-home .ate-slider-thumbs {
        right: 20px;
    }
}

@media (max-width: 1099.98px) {
    .ate-home .ate-page {
        grid-template-columns: 1fr;
        /* ate 2026-07-23: Seitenpolsterung raus, sobald die Sidebar weg ist.
           Die 28px trugen die Sidebar-Spalte; ohne sie erzeugen sie nur noch
           einen Versatz: Header, Trustbar, die Farbbaender und der Footer laufen
           randbuendig (0..Viewport), die Sektionen dagegen 28..Viewport-28. Sichtbar
           wurde das an jeder Sektion mit eigener Kante — die Haarlinien der
           Hersteller-Leiste und das Hero-Raster endeten 28px vor dem Rand.
           Seitenabstand kommt ab hier durchgehend aus .ate-wrap (24px); der
           -24px-Bleed der Mobil-Slider (Sektion 11) haengt ebenfalls daran und
           bleibt unberuehrt. Nebeneffekt: .ate-pc-viewport (width:100vw) startete
           bei x=28 und ragte 28px ueber die rechte Kante hinaus — jetzt exakt 0..W. */
        padding-inline: 0;
    }
    .ate-home .ate-sidecats {
        display: none;
    }
    .ate-home .ate-tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ate-home .ate-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 839.98px) {
    .ate-home .ate-hero-grid {
        grid-template-columns: 1fr;
        gap: 44px;
        padding-top: 52px;
        padding-bottom: 60px;
    }

    /* ate: mobil KEIN Slider-Bedienelement (User-Wunsch 07/2026) — die Leiste
       baute auf schmalen Screens nur Breite auf (bei 360px stand sie 31px ueber
       die Karte hinaus), und die Produkte sind ueber die Karte selbst erreichbar.
       Autoplay + Wischen bleiben. Ohne Leiste braucht die Karte die 100px-
       Fussreserve nicht mehr. */
    .ate-home .ate-slider-thumbs,
    .ate-home .ate-slider-nav {
        display: none;
    }
    .ate-home .ate-hero-slider .ate-feature-card {
        padding-bottom: 28px;
    }

    /* ate: Mobil-Slider statt Stapel — Persona / Tech / Prozess / Blog werden
       zu horizontalen Scroll-Snap-Reihen (User-Entscheid 07/2026). Muster wie
       das Produktkarussell (.ate-pc-*): overflow-x + Scrollbar versteckt,
       -24px-Bleed nutzt die .ate-wrap-Polsterung als Rand, sodass die erste/
       letzte Karte buendig zum Content bleibt (padding-inline 24px). */
    .ate-home .ate-persona-grid,
    .ate-home .ate-tech-grid,
    .ate-home .ate-steps,
    .ate-home .ate-blog-grid {
        display: flex;
        gap: 16px;
        margin-inline: -24px;
        padding: 4px 24px 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 24px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ate-home .ate-persona-grid::-webkit-scrollbar,
    .ate-home .ate-tech-grid::-webkit-scrollbar,
    .ate-home .ate-steps::-webkit-scrollbar,
    .ate-home .ate-blog-grid::-webkit-scrollbar {
        display: none;
    }
    /* eine Karte pro Ansicht + "Peek" der naechsten als Wisch-Hinweis */
    .ate-home .ate-persona-card {
        flex: 0 0 min(86%, 360px);
        scroll-snap-align: start;
    }
    .ate-home .ate-tech-tile {
        flex: 0 0 min(74%, 260px);
        scroll-snap-align: start;
    }
    .ate-home .ate-step {
        flex: 0 0 min(74%, 260px);
        scroll-snap-align: start;
    }
    .ate-home .ate-blog-card {
        flex: 0 0 min(84%, 320px);
        scroll-snap-align: start;
    }

    /* ate: Reveal-Startpose (opacity:0) im Slider neutralisieren — sonst
       bleibt die peekende Nachbarkarte unsichtbar (IntersectionObserver
       greift horizontal nicht). Section-Heads behalten den Reveal. */
    .ate-home.ate-anim .ate-persona-grid .ate-reveal,
    .ate-home.ate-anim .ate-tech-grid .ate-reveal,
    .ate-home.ate-anim .ate-steps .ate-reveal,
    .ate-home.ate-anim .ate-blog-grid .ate-reveal {
        opacity: 1;
        transform: none;
    }

    /* ate: Swipe-Dots der Persona sichtbar machen (Basis: display:none) */
    .ate-home .ate-persona-dots {
        display: flex;
        justify-content: center;
        gap: 9px;
        margin-top: 18px;
    }
    .ate-home .ate-persona-dots button {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(0, 38, 73, .25);
        cursor: pointer;
        transition: width .2s ease, background .2s ease;
    }
    .ate-home .ate-persona-dots button[aria-selected="true"] {
        width: 22px;
        border-radius: 4px;
        background: var(--ate-navy);
    }
    .ate-home .ate-persona-dots button:focus-visible {
        outline: 2px solid var(--ate-navy);
        outline-offset: 2px;
    }
}

@media (max-width: 559.98px) {
    /* ate: tech-grid/steps 1-Spalten-Regeln entfernt — ab <=840px sind das
       horizontale Slider (Sektion 11 oben), display:flex ueberschreibt das
       Grid ohnehin. */
    .ate-home .ate-pc-track .ate-prod-card {
        flex: 0 0 262px;
        width: 262px;
    }
    .ate-home .ate-lc3d-stage {
        height: 150px;
    }
    .ate-home .ate-lc3d-stage .ate-lc-tile {
        width: 152px;
        height: 96px;
        margin: -48px 0 0 -76px;
        padding: 11px;
        border-radius: 12px;
    }
    .ate-home .ate-newsletter {
        padding: 28px 22px;
    }
    .ate-home .ate-newsletter-form input[type="email"] {
        min-width: 0;
        width: 100%;
    }
}