html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ========================================================================
   Hero-Section
 ========================================================================== */

/* Hero Section - Volle Breite */
.hero_section:has(.ce-gallery) {
    width: 100%;
    max-width: 100vw;
    max-height: calc(100vh - 200px);
    overflow: hidden;
    padding: 0 !important;
    margin: 0;
}

/* Alle Container auf volle Breite */
.hero_section .frame,
.hero_section .ce-image,
.hero_section .ce-gallery,
.hero_section .ce-outer,
.hero_section .ce-inner,
.hero_section .ce-row,
.hero_section .ce-column {
    width: 100%;
    max-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

/* Figure und Bild */
.hero_section .ce-gallery figure {
    width: 100%;
    height: calc(100vh - 200px);
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.hero_section .ce-gallery figure img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ========================================================================
   Layout - Container & Grid
 ========================================================================== */

.leda-container {
    max-width: var(--leda-container-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.leda-section {
    margin: var(--section-margin) 0;
}

.leda-section-bg {
    margin: var(--section-padding) 0;
    padding: var(--section-padding) 0;
}

article {
    display: flex;
    flex-direction: column;
}


/* ========================================================================
   Eigene 1/12 Grid-Klasse für UIKit
 ========================================================================== */

.uk-width-1-12, .uk-width-1-12\@s, .uk-width-1-12\@m, .uk-width-1-12\@l, .uk-width-1-12\@xl {
    width: calc(100% / 12);
}

.uk-width-5-12, .uk-width-5-12\@s, .uk-width-5-12\@m, .uk-width-5-12\@l, .uk-width-5-12\@xl {
    width: calc(500% / 12);
}

.uk-width-7-12, .uk-width-7-12\@s, .uk-width-7-12\@m, .uk-width-7-12\@l, .uk-width-7-12\@xl {
    width: calc(700% / 12);
}

.uk-width-11-12, .uk-width-11-12\@s, .uk-width-11-12\@m, .uk-width-11-12\@l, .uk-width-11-12\@xl {
    width: calc(1100% / 12);
}

.uk-width-1-12\@s,
.uk-width-5-12\@s,
.uk-width-7-12\@s,
.uk-width-11-12\@s,
.uk-width-1-12\@m,
.uk-width-5-12\@m,
.uk-width-7-12\@m,
.uk-width-11-12\@m,
.uk-width-1-12\@l,
.uk-width-5-12\@l,
.uk-width-7-12\@l,
.uk-width-11-12\@l,
.uk-width-1-12\@xl,
.uk-width-5-12\@xl,
.uk-width-7-12\@xl,
.uk-width-11-12\@xl {
    flex: initial;
}

@media (max-width: 959px) {
    .uk-width-1-12\@s,
    .uk-width-5-12\@s,
    .uk-width-7-12\@s,
    .uk-width-11-12\@s,
    .uk-width-1-12\@m,
    .uk-width-5-12\@m,
    .uk-width-7-12\@m,
    .uk-width-11-12\@m {
        width: unset;
    }
}

@media (max-width: 1199px) {
    .uk-width-1-12\@l,
    .uk-width-5-12\@l,
    .uk-width-7-12\@l,
    .uk-width-11-12\@l,
    .uk-width-1-12\@xl,
    .uk-width-5-12\@xl,
    .uk-width-7-12\@xl,
    .uk-width-11-12\@xl {
        width: unset;
    }
}

/*
ul.ce-uploads {
    grid-row-gap: 0.8rem;
}

ul.ce-uploads li {
    grid-column: span 4;
    background: #E7E6DB;
    padding: 2.4rem;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto 11rem 6rem auto;
    grid-gap: 0.8rem;
}
 */

section div.downloads {
    width: 100rem;
    margin: 0 auto 1.25rem auto;
    display: grid;
    grid-template-columns: repeat(12, 7.63rem);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}
/*
section div.downloads div.download {
    grid-column: span 4;
    background: #E7E6DB;
    padding: 3rem;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto 13.75rem 7.5rem auto;
    grid-gap: 1rem;
}
*/
/* Desktop: 3 Kacheln */
section div.downloads div.download {
    grid-column: span 4;
    background: #E7E6DB;
    padding: 3rem;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto auto; /* Flexibel statt fest */
    grid-gap: 1rem;
    align-content: start; /* Inhalt oben ausrichten */
}

section div.downloads div.download div img {
    width: 100%;
    height: 10rem;
    object-fit: cover;
    object-position: center;
}

/* Tablet: 2 Kacheln */
@media (max-width: 1699px) {
    section div.downloads div.download {
        grid-column: span 6;
    }

    section div.downloads div.download div img {
        height: 12rem; /* Etwas kleiner */
    }
}

/* Mobile: 1 Kachel */
@media (max-width: 1099px) {
    section div.downloads div.download {
        grid-column: span 12;
        padding: 2rem;
    }

    /* Bilder untereinander */
    section div.downloads div.download div {
        grid-template-columns: 1fr;
    }

    section div.downloads div.download div img {
        height: 10rem; /* Noch kleiner auf Mobile */
    }
}


section div.downloads div.download em {
    color: var(--leda-font);
}

section div.downloads div.download span:first-of-type {
    grid-column: span 2;
    font-weight: 600;
    text-transform: uppercase;
}

section div.downloads div.download div {
    grid-column: span 2;
    align-self: end;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1rem;
}

section div.downloads div.download span:last-of-type {
    grid-column: span 2;
    font-family: 'Quicksand', sans-serif;
    font-size: 1.75rem;
    line-height: 2.5rem;
    overflow: hidden;
}

section div.downloads div.download a {
    color: var(--leda-red);
    text-transform: uppercase;
}
/*
section div.downloads div.download div img {
    width: 100%;
    height: 10rem;
    object-fit: cover;
    object-position: center;
}
*/
a.arrowed {
    position: relative;
    font-weight: 800;
    text-decoration: none;
    padding-right: 0.5em;
}

a.arrowed::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(100% + 0.5em);
    transform: translateY(-50%) rotate(45deg);
    width: 0.5em;
    height: 0.5em;
    border-top: 0.1em solid currentColor;
    border-right: 0.1em solid currentColor;
    transition: left 0.3s ease;
    pointer-events: none;
}

a.arrowed::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    display: inline-block;
    height: 0.05em;
    background-color: currentColor;
    width: 1em;
    transition: width 0.3s ease;
}


/* ========================================================================
   Anchor offset – compensates for sticky header
 ========================================================================== */

[id] {
    scroll-margin-top: 120px;
}

@media (max-width: 991px) {
    [id] {
        scroll-margin-top: 70px;
    }
}