* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    letter-spacing: 0.02em;
}

/* Headlines use Noto Sans */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Sans', sans-serif;
    letter-spacing: 0.03em;
}

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.logo {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    display: inline-block;
}

.logo:hover {
    color: #000;
    text-decoration: none;
}

.logo strong {
    font-weight: 800;
}

.main-header nav {
    display: flex;
    align-items: center;
    gap: 25px;
}

.main-header nav a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.main-header nav a:hover {
    color: #000;
}

.dropdown-arrow {
    font-size: 0.7rem;
    margin-left: 4px;
}

.btn-lang {
    background-color: #00d600;
    /* Bright green from screenshot */
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 600 !important;
}

.btn-lang:hover {
    background-color: #00b300;
}

/* Burger Menu Button - Hidden on Desktop */
.burger-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 101;
    position: relative;
}

.burger-line {
    width: 100%;
    height: 3px;
    background-color: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 400px;
    height: 100vh;
    background-color: #fff;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    overflow-y: auto;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

.mobile-menu-overlay.active .mobile-menu-nav {
    right: 0;
}

.mobile-menu-logo {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: #000;
    padding: 20px 30px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    display: block;
}

.mobile-menu-logo:hover {
    color: #000;
    text-decoration: none;
}

.mobile-menu-logo strong {
    font-weight: 800;
}

.mobile-menu-links {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
}

.mobile-menu-links a {
    display: block;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 1.1rem;
    padding: 12px 30px;
    border-bottom: 1px solid #eee;
    transition: color 0.2s, background-color 0.2s;
}

.mobile-menu-links a:hover {
    color: #000;
    background-color: #f5f5f5;
}

.mobile-menu-nav .mobile-lang-btn {
    margin-top: auto;
    margin-bottom: 20px;
    margin-left: 30px;
    margin-right: 30px;
    text-align: center;
    display: block;
}

.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: visible;
    text-align: center;
    padding-bottom: 0;
}

.hero.has-screenshot-text {
    min-height: 100vh;
    height: auto;
    padding-bottom: 2rem;
    overflow-y: visible;
}

.hero-text {
    position: absolute;
    top: 15%;
    /* Adjust based on visual balance */
    z-index: 1;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hero-text h1 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.hero-text p {
    font-size: 1.8rem;
    font-weight: 400;
    opacity: 0.9;
    color: #fff;
}

.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(95, 116, 110, 0.8);
    /* Darker green tint matching reference image (#5f746e) */
    z-index: -1;
}

.screenshot-wrapper {
    position: relative;
    width: 80%;
    max-width: 1000px;
    z-index: 2;
    /* Initial state: pushed down so only top is visible */
    transform: translateY(75vh);
    /* Push to bottom if using flex column */
    margin-bottom: 0;
}

.screenshot-wrapper.has-text {
    margin-bottom: 0;
    padding-bottom: 0;
    /* Stelle sicher, dass der Wrapper genug Platz für den Text hat */
    min-height: auto;
}

.demo-btn {
    position: fixed;
    bottom: 30px;
    right: 0;
    background-color: #00d600;
    color: white;
    padding: 15px 20px 15px 30px;
    border-radius: 50px 0 0 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s;
    /* Initial state: Shifted right so only icon is visible (approx) */
    /* Assuming text width + gap is around 100px. Let's use a percentage or fixed value. */
    /* Better: Use translateX to push it right. */
    transform: translateX(calc(100% - 60px));
    /* Keep 60px visible (icon + padding) */
}

.demo-btn:hover {
    background-color: #00b300;
    transform: translateX(0);
    /* Fully visible on hover */
}

.demo-btn.open {
    transform: translateX(0);
    /* Fully visible */
}

.demo-btn svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.btn-text {
    font-size: 1.2rem;
    font-weight: 700;
    white-space: nowrap;
    padding-right: 10px;
    color: white;
    text-decoration: none;
    /* Add some padding on the right for the text */
}

.btn-text:hover {
    color: white;
    text-decoration: none;
}

p a {
    color: #00d600;
}

.screenshot {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    display: block;
}

.screenshot-text {
    margin-top: 2rem;
    padding-top: 1rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    font-size: 1.4rem;
    line-height: 1.8;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1rem;
    position: relative;
    z-index: 1;
    display: block;
}

.screenshot-text p {
    color: #fff;
    margin-bottom: 1rem;
}

.screenshot-text a {
    color: #00d600;
    text-decoration: underline;
    font-weight: 600;
}

.screenshot-text h1,
.screenshot-text h2,
.screenshot-text h3,
.screenshot-text h4,
.screenshot-text h5,
.screenshot-text h6 {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.content {
    padding: 100px 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

.container {
    max-width: 800px;
}

h2 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: #333;
}

p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: #555;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .main-header {
        padding: 0 20px;
        height: 60px;
    }

    .logo {
        font-size: 1.4rem;
    }

    /* Hide desktop navigation on mobile */
    .main-header > nav {
        display: none;
    }

    /* Ensure mobile menu is visible */
    .mobile-menu-overlay {
        display: block;
    }

    .mobile-menu-nav {
        display: flex;
    }

    /* Show burger menu button on mobile */
    .burger-menu-toggle {
        display: flex;
    }

    /* Burger icon animation when menu is open */
    .burger-menu-toggle.active .burger-line:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .burger-menu-toggle.active .burger-line:nth-child(2) {
        opacity: 0;
    }

    .burger-menu-toggle.active .burger-line:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .hero {
        height: auto;
        min-height: 100vh;
        padding-top: 120px;
        /* Space for header */
        padding-bottom: 40px;
        justify-content: flex-start;
    }

    .hero-text {
        position: relative;
        top: auto;
        width: 90%;
        padding: 0 10px;
        margin-bottom: 40px;
    }

    .hero-text h1 {
        font-size: 2.75rem;
        line-height: 1.2;
    }

    .hero-text p {
        font-size: 1.35rem;
        margin-top: 10px;
    }

    .screenshot-wrapper {
        width: 92%;
        transform: none;
        /* Remove translation */
        margin-top: 0;
    }

    .content {
        padding: 60px 20px;
    }

    h2 {
        font-size: 1.8rem;
    }

    .demo-btn {
        bottom: 20px;
        padding: 12px 15px 12px 20px;
    }

    .btn-text {
        font-size: 1rem;
    }
}

/* Text Section */
.text-section {
    padding: 100px 20px;
    background-color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Ensure flex items are centered */
}

.text-section h2 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 3.5rem;
    /* Larger font */
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    color: #1a2e35;
}

.text-section .subtitle {
    font-family: 'Noto Sans', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a2e35;
    margin-bottom: 3rem;
    line-height: 1.2;
}

.icon-wrapper {
    margin-bottom: 3rem;
}

.text-section p {
    max-width: 900px;
    margin: 0 auto;
    color: #1a2e35;
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: 500;
}

/* Carousel Intro (Header) */
.carousel-intro {
    padding: 100px 20px 50px 20px;
    /* Top padding, bottom spacing */
    background-color: #dbece2;
    /* Match background of carousel */
    text-align: center;
}

.carousel-header {
    /* Removed absolute positioning */
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
}

.carousel-header .pre-title {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a2e35;
    margin-bottom: 10px;
}

.carousel-header h2 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 5rem;
    font-weight: 800;
    color: #1a2e35;
    margin-bottom: 0;
}

/* Carousel Section */
.carousel-section {
    position: relative;
    padding: 0;
    /* Remove top padding, keep bottom */
    /* background-color: #dbece2; Removed in favor of image */
    background-image: url('../images/karusselbg.jpeg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.carousel-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(95, 116, 110, 0.9);
    /* Greenish tint overlay, adjusted opacity */
    z-index: 1;
}

/* White background for carousel on Lernziele page */
.carousel-section.carousel-white-bg {
    background-image: none;
    background-color: #fff;
}

.carousel-section.carousel-white-bg::before {
    display: none;
}

/* Dots auf weißem Hintergrund */
.carousel-section.carousel-white-bg .dot {
    background-color: #1a2e35;
    opacity: 0.3;
}

.carousel-section.carousel-white-bg .dot.active {
    background-color: #00d600;
    opacity: 1;
}

.carousel-track-wrapper {
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    position: relative;
    z-index: 2;
    /* Ensure content is above overlay */
    padding-bottom: 80px;
    /* Platz für herausragende Bilder */
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.carousel-track {
    display: flex;
    gap: 100px;
    /* Increased gap to isolate cards */
    width: max-content;
    /* Allow track to grow */
    padding: 0;
    /* Padding rechts für die letzte Card */
    padding-left: 0;
    /* Initial position wird von GSAP gesetzt */
}

.carousel-slide-wrapper {
    width: 1200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-bottom: 30px;
    /* Platz für den Schatten */
    margin-top: 100px;
    /* Card etwas nach unten verschieben */
}

.carousel-card {
    width: 1050px;
    min-width: 1050px;
    max-width: 1050px;
    height: auto;
    background: white;
    border-radius: 30px;
    /* Entferne oder reduziere die Box-Shadow, damit der separate Schatten besser sichtbar ist */
    box-shadow: none;
    overflow: hidden;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.card-shadow {
    width: 110%;
    height: 50px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.05) 65%, rgba(0, 0, 0, 0) 85%);
    margin-top: -25px;
    margin-left: -5%;
    border-radius: 50%;
    filter: blur(8px);
    position: relative;
    z-index: 0;
    transform: translateY(0);
    pointer-events: none;
}

.card-inner {
    display: flex;
    width: 100%;
    height: 100%;
}

.card-image {
    flex: 0.8;
    /* Mehr Platz für das Bild */
    background-color: #fff;
    /* Changed to white/transparent */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    /* Reduziertes Padding für größeres Bild */
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Ensure illustration fits nicely */
}

.card-content {
    flex: 1.2;
    /* Weniger Platz für Text, damit Bild mehr Platz hat */
    padding: 50px 50px 50px 50px;
    /* Gleiches Padding oben und unten für vertikale Zentrierung */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    /* Gleichmäßiger Abstand zwischen allen Elementen */
    min-height: 350px;
}

.card-content h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 3rem;
    /* Larger heading */
    font-weight: 800;
    margin: 0;
    /* Kein margin, gap übernimmt den Abstand */
    line-height: 1.1;
    color: #1a2e35;
}

.card-content p {
    font-size: 1.2rem;
    margin: 0;
    /* Kein margin, gap übernimmt den Abstand */
    color: #555;
    line-height: 1.6;
}

.card-btn {
    padding: 15px 30px;
    background-color: #1a2e35;
    /* Dark button */
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.3s;
    font-size: 1.1rem;
}

.card-btn:hover {
    background-color: #000;
}

.carousel-dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 10;
}

.dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.5;
    display: inline-block;
    transition: opacity 0.3s;
}

.dot.active {
    background-color: #00d600;
    opacity: 1;
}

/* Quote Section */
.quote-section {
    padding: 150px 20px;
    background-color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.quote-section blockquote {
    font-family: 'Noto Sans', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a2e35;
    margin-bottom: 2rem;
    line-height: 1.3;
    max-width: 1000px;
    font-style: italic;
    /* Ensure it doesn't span too wide */
}

.quote-section cite {
    font-size: 1.1rem;
    color: #1a2e35;
    font-style: normal;
    font-weight: 600;
}

/* Footer */
.main-footer {
    background-color: #c4dccf;
    padding: 60px 50px;
    color: #1a2e35;
    border-radius: 30px 30px 0 0;
    margin: 0;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: stretch;
    min-height: 200px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

/* Spalte 1: Copyright - unten bündig */
.footer-column-copyright {
    /* bereits durch .footer-column gesetzt */
}

.footer-copyright {
    font-size: 0.9rem;
    font-weight: 500;
    color: #1a2e35;
    text-align: center;
}

/* Spalte 2: Social Icons - unten bündig */
.footer-column-socials {
    /* bereits durch .footer-column gesetzt */
}

.footer-socials {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.footer-socials .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1a2e35;
    text-decoration: none;
    transition: opacity 0.2s;
}

.footer-socials .social-icon:hover {
    opacity: 0.7;
}

.footer-socials .social-icon svg {
    width: 20px;
    height: 20px;
}

/* Spalte 3: Links - unten bündig */
.footer-column-links {
    /* bereits durch .footer-column gesetzt */
}

.footer-menu {
    width: 100%;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: flex-start;
}

.footer-links li {
    margin: 0;
    padding: 0;
}

.footer-links a {
    text-decoration: none;
    color: #1a2e35;
    font-size: 1.05rem;
    transition: opacity 0.2s;
    display: block;
    text-align: left;
}

.footer-links a:hover {
    opacity: 0.7;
}

/* Spalte 4 & 5: Logos - unten bündig */
.footer-column-logo {
    align-items: center;
}

.logo-item {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
}

.logo-item img {
    max-height: 120px;
    width: auto;
    object-fit: contain;
}

.logo-item.hsu-logo img {
    max-height: 120px;
}

.logo-item.digitaks-logo {
    width: 80%;
}

.logo-item.digitaks-logo img {
    max-height: 120px;
    width: 100%;
    object-fit: contain;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .text-section h2 {
        font-size: 2rem;
    }

    .text-section .subtitle {
        font-size: 1.5rem;
    }

    .carousel-section {
        height: auto;
        min-height: auto;
        padding: 60px 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .carousel-header {
        position: relative;
        top: auto;
        margin-bottom: 30px;
        padding: 0 20px;
    }

    .carousel-header h2 {
        font-size: 3.125rem;
    }

    .carousel-track-wrapper {
        overflow-x: hidden;
        /* Pinning wird von GSAP gesteuert */
        padding: 20px;
        /* Space for shadow */
    }

    .carousel-track {
        padding: 0;
        width: auto;
        gap: 20px;
    }

    .carousel-slide-wrapper {
        width: auto;
        min-width: auto;
        margin-top: 20px;
        /* Wrapper passt sich an Card-Größe an */
    }

    .carousel-card {
        width: 90vw;
        min-width: 90vw;
        max-width: 90vw;
        /* Wider on mobile */
        height: auto;
        scroll-snap-align: center;
        flex-direction: column;
        border-radius: 20px;
        flex-shrink: 0;
    }

    .card-inner {
        flex-direction: column;
        /* Bild oben, dann Headline, dann Text */
    }

    .card-image {
        flex: none;
        /* Kein flex-grow, damit Bild oben bleibt */
        height: 250px;
        /* Taller image area */
        padding: 20px;
        width: 100%;
        order: 1;
        /* Bild zuerst */
    }

    .card-content {
        flex: none;
        /* Kein flex-grow */
        padding: 30px;
        order: 2;
        /* Content danach */
        width: 100%;
    }

    .card-content h3 {
        order: 1;
        /* Headline zuerst im Content */
    }

    .card-content p {
        order: 2;
        /* Text danach */
    }

    .card-content .card-btn {
        order: 3;
        /* Button zuletzt */
    }

    .card-content h3 {
        font-size: 1.8rem;
    }

    .carousel-card.dark-theme .card-content p span {
        font-size: 1.1rem;
    }

    .carousel-card.dark-theme .card-image {
        margin-bottom: -20px;
    }

    .carousel-dots {
        position: relative;
        bottom: auto;
        margin-top: 20px;
        justify-content: center;
        /* Hide dots on mobile or adjust */
        /* Note: syncing dots with native scroll requires JS intersection observer,
           which we haven't implemented for mobile. Let's keep them hidden or static for now
           to avoid confusion, or implement simple JS.
           User asked for "sinnvolle darstellung". Native scroll is good.
           Let's hide dots to keep it clean unless requested. */
        display: none;
        left: auto;
        transform: none,
    }

    .main-footer {
        padding: 40px 20px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
        min-height: auto;
    }

    .footer-column {
        width: 100%;
    }

    .footer-column-copyright,
    .footer-column-socials,
    .footer-column-logo {
        justify-content: flex-start;
        align-items: center;
    }

    .logo-item img {
        max-height: 80px;
    }

    .logo-item.hsu-logo img {
        max-height: 80px;
    }

    .logo-item.digitaks-logo img {
        max-height: 80px;
    }
}

/* Lerninhalte Hero */
.lerninhalte-hero {
    padding: 150px 50px 100px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    background-color: #fff;
    /* White background for Lerninhalte page */
}

/* Lernziele Hero - Hintergrund über volle Breite, Content bleibt zentriert */
.lernziele-hero {
    background-color: #DAE2DB;
    /* Light green/grey background for Lernziele page */
    max-width: 100%;
    /* Hintergrund über volle Breite */
    min-height: 100vh;
    /* Hero soll volle Bildschirmhöhe haben */
    padding: 150px 0 100px 0;
    /* Vertikales Padding beibehalten, horizontales entfernt */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    position: relative;
}

.lernziele-hero::before {
    content: '';
    display: flex;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 50px;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    pointer-events: none;
}

/* Content-Bereich innerhalb des Wrappers */
.lernziele-hero > .hero-content,
.lernziele-hero > .hero-image {
    position: relative;
    z-index: 1;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

.lernziele-hero > .hero-content {
    flex: 1;
    min-width: 0;
    max-width: 800px;
    /* Textbereich schmaler wie bei Lerninhalte */
}

.lernziele-hero > .hero-image {
    flex: 0 0 auto;
}

.hero-content h1 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: #1a2e35;
    margin-bottom: 2rem;
}

.hero-content p {
    font-size: 1.8rem;
    color: #555;
    line-height: 1.5;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
}

.hero-image {
    flex: 0 0 auto;
    max-width: 500px;
    /* Limit image size to match lerninhalte page */
}

.hero-image img {
    max-width: 100%;
    height: auto;
    width: 100%;
}

/* Scroll Down Arrow */
.scroll-down-arrow {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    cursor: pointer;
    color: #1a2e35;
    transition: opacity 0.3s;
    animation: bounce-arrow 2s infinite;
    pointer-events: auto;
}

/* White arrow for dark hero backgrounds (front-page) */
.hero .scroll-down-arrow {
    color: #fff;
}

.scroll-down-arrow:hover {
    opacity: 0.7;
}

.scroll-down-arrow svg {
    width: 48px;
    height: 48px;
    display: block;
}

@keyframes bounce-arrow {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(10px);
    }
}

/* Hero Section - ensure relative positioning for arrow */
.hero {
    position: relative;
}

.lerninhalte-hero {
    position: relative;
}

/* Module Stack Section */
.module-stack-section {
    position: relative;
    background-color: #6d8c7d;
    /* Greenish background from screenshot */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 20px;
    text-align: center;
    color: white;
    overflow: hidden;
    /* Hide overflow for stack */
}

.module-stack-green-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(95, 116, 110, 0.8);
    /* Grüner Ton wie im Hero */
    z-index: 0;
}

.module-stack-dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.stack-header {
    position: relative;
    z-index: 1;
}

.stack-header h2 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 3rem;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.stack-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 500px;
    /* Fixed height for the stack area */
    margin: 0 auto;
    perspective: 1000px;
    z-index: 1;
}

/* Stack States - Staircase Effect */
.stack-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 450px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.5s ease-out, 
                box-shadow 0.4s ease-out,
                filter 0.4s ease-out;
    cursor: pointer;
    color: #1a2e35;
    user-select: none;
    /* Prevent text selection */
    -webkit-user-select: none;
    z-index: 0;
    opacity: 0;
    /* Default hidden */
    pointer-events: none;
}

.stack-card h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 20px 0;
}

.stack-card p {
    font-size: 0.9rem;
    color: #555;
}

/* Center Card (Active) */
.stack-card.pos-0 {
    z-index: 10;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* Right Side */
.stack-card.pos-1 {
    z-index: 9;
    transform: translate(-20%, -50%) scale(0.85);
    /* Shift right, scale down */
    opacity: 1;
    /* Fully opaque */
    pointer-events: auto;
}

.stack-card.pos-2 {
    z-index: 8;
    transform: translate(10%, -50%) scale(0.7);
    /* Shift further right */
    opacity: 1;
    /* Fully opaque */
    pointer-events: auto;
}

/* Left Side */
.stack-card.pos--1 {
    z-index: 9;
    transform: translate(-80%, -50%) scale(0.85);
    /* Shift left */
    opacity: 1;
    /* Fully opaque */
    pointer-events: auto;
}

.stack-card.pos--2 {
    z-index: 8;
    transform: translate(-110%, -50%) scale(0.7);
    /* Shift further left */
    opacity: 1;
    /* Fully opaque */
    pointer-events: auto;
}

/* Hidden cards */
.stack-card.hidden {
    z-index: 0;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
}

/* Hover-Effekte für klickbare nicht-aktive Karten */
.stack-card.pos-1:hover,
.stack-card.pos--1:hover {
    transform: translate(-20%, -50%) scale(0.9);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

.stack-card.pos--1:hover {
    transform: translate(-80%, -50%) scale(0.9);
}

.stack-card.pos-2:hover,
.stack-card.pos--2:hover {
    transform: translate(10%, -50%) scale(0.75);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.22);
}

.stack-card.pos--2:hover {
    transform: translate(-110%, -50%) scale(0.75);
}

/* Aktive Karte hat keinen speziellen Hover-Effekt, da sie bereits im Fokus ist */
.stack-card.pos-0 {
    cursor: default;
}

.stack-controls {
    position: relative;
    z-index: 1;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.stack-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s;
}

.stack-dot.active {
    background-color: white;
}

/* System Section */
.system-section {
    background-color: #fff;
    /* White background for text section */
    padding: 100px 20px;
    text-align: center;
}

.system-content {
    max-width: 90%;
    margin: 0 auto;
    background-color: #D0DBD0;
    border-radius: 30px;
    padding: 40px 50px;
}

.page-template-page-lernziele .system-content {
    background-color: #fff;
}

.system-content h2 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: #1a2e35;
    margin-bottom: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.system-icon {
    margin: 2rem auto;
}

.system-content p {
    font-size: 1.2rem;
    color: #1a2e35;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    max-width: 1000px;
    margin: 0 auto;
}

.system-links p {
    margin-top: 10px;
}

.system-links a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    display: block;
}

/* System Section Intro für Lernziele-Seite */
.system-section-intro {
    display: flex;
    align-items: center;
    justify-content: center;
}

.system-section-intro .system-content {
    max-width: 60%;
    width: 100%;
    text-align: center;
}

.system-section-intro .system-content h2 {
    margin-bottom: 1.5rem;
}

.system-section-intro .system-content p {
    margin-bottom: 0;
}

/* Tools Section */
.tools-section {
    position: relative;
    padding: 100px 20px;
    background-color: #fff;
    /* White background from reference */
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tools-lms-section {
    background-color: #fff;
    /* White background from reference */
}

.tools-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.tools-card {
    background: white;
    border-radius: 30px;
    padding: 60px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    max-width: 1200px;
    margin: 0 auto;
}

/* Tools Container für Lernziele - max 60% Breite, zentriert */
.tools-section .tools-container {
    width: 100%;
    max-width: 60%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Erste Zeile: Headline (80%) und Bild (20%) */
.tools-header-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

.tools-title-wrapper {
    flex: 0 0 60%;
}

.tools-title-wrapper h2 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 4rem;
    font-weight: 800;
    color: #1a2e35;
    margin: 0;
    line-height: 1.2;
}

.tools-image {
    flex: 0 0 100%;
    max-width: 100%;
    align-items: flex-start;
    justify-content: flex-end;
}

.tools-image img {
    width: 100%;
    /*max-width: 200px;*/
    height: auto;
    border-radius: 20px;
}

.page-template-page-lernziele .tools-image img {
    max-width: 200px;
}

/* Zweite Zeile: Aufzählung */
.tools-text {
    width: 100%;
}

.tools-text p {
    font-size: 1.2rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* Listenpunkte als kleine Pfeile */
.tools-text ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tools-text ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: #555;
    line-height: 1.6;
}

.tools-text ul li::before {
    content: '►';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #1a2e35;
    font-size: 0.8rem;
    line-height: 1;
}

.tools-content {
    display: flex;
    gap: 60px;
    align-items: stretch;
    position: relative;
}

.tools-content .tools-text-wrapper {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
}

.tools-content h2 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: #1a2e35;
    margin-bottom: 20px;
}

.tools-content .tools-text {
    flex: 1;
}

.tools-content .tools-image {
    flex: 0 0 50%;
    margin-right: -60px;
    margin-top: -60px;
    margin-bottom: -60px;
    position: relative;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.tools-content .tools-image-spacer {
    flex: 1;
    min-height: 100%;
    width: 100%;
}

.tools-content .tools-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0 30px 30px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: block;
}

/* LMS Tools Section - gleiches Layout */
.tools-lms-section .tools-content {
    display: flex;
    gap: 60px;
    align-items: stretch;
}

/* Footer Link Section */
.footer-link-section {
    padding: 80px 20px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-link-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    text-align: center;
}

.footer-link {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    font-style: italic;
    color: #1a2e35;
    text-decoration: underline;
    text-decoration-color: #1a2e35;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #2d5a6b;
    text-decoration-color: #2d5a6b;
}

.footer-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-image img {
    max-width: 100px;
    height: auto;
    display: block;
}

/* Mobile Adjustments for Lerninhalte */
@media (max-width: 768px) {
    .lerninhalte-hero {
        flex-direction: column;
        padding: 120px 20px 50px 20px;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .stack-container {
        height: 400px;
        /* Touch-Swipe optimieren */
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    .stack-card {
        width: 280px;
        height: 350px;
        /* Touch-Feedback */
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Swipe-Hinweis auf Mobile */
    .stack-controls::before {
        content: "← swipe →";
        display: block;
        width: 100%;
        text-align: center;
        font-size: 0.8rem;
        opacity: 0.6;
        margin-bottom: 15px;
        color: white;
        letter-spacing: 2px;
    }

    .system-section-intro {
        padding: 60px 20px;
    }

    .system-section-intro .system-content {
        max-width: 100%;
    }

    .system-section-intro .system-content h2 {
        font-size: 2rem;
    }

    .tools-section {
        padding: 60px 20px;
        min-height: auto;
    }

    .tools-section .tools-container {
        max-width: 100%;
    }

    .tools-header-row {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .tools-title-wrapper {
        flex: 1 1 100%;
        width: 100%;
    }

    .tools-title-wrapper h2 {
        font-size: 2rem;
    }

    .tools-image {
        flex: 1 1 100%;
        max-width: 100%;
        justify-content: flex-start;
    }

    .tools-image img {
        max-width: 150px;
    }

    .tools-card {
        padding: 40px 30px;
        border-radius: 20px;
    }

    .tools-content {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .tools-content .tools-text-wrapper {
        flex: 1 1 100%;
        order: 1;
    }

    .tools-content h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .tools-content .tools-image {
        order: 2;
        flex: 1 1 100%;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0;
        justify-content: flex-start;
        min-height: 200px;
    }

    .footer-link-section {
        padding: 60px 20px;
    }

    .footer-link {
        font-size: 1.2rem;
    }

    .tools-content .tools-image img {
        border-radius: 20px;
        width: 100%;
        max-width: 100%;
    }

    .tools-content .tools-text {
        order: 3;
    }

    .tools-lms-section .tools-content {
        display: flex;
        flex-direction: column;
    }

    .tools-lms-section .tools-content .tools-text-wrapper {
        order: 1;
    }

    .tools-lms-section .tools-content .tools-image {
        order: 2;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    .tools-lms-section .tools-content .tools-image img {
        border-radius: 20px;
    }
}

/* Dark Theme for Carousel Cards (Lernziele) */
.carousel-card.dark-theme {
    background-color: #5F7466;
    /* Dark Green/Grey from reference image */
    color: white;
    width: 1050px;
    min-width: 1050px;
    max-width: 1050px;
    flex-shrink: 0;
}

.carousel-card.dark-theme .card-content h3 {
    font-family: 'Noto Sans', sans-serif;
    color: white;
    font-size: 3rem;
    /* Slightly smaller to fit content */
}

.carousel-card.dark-theme .card-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.5;
}

.carousel-card.dark-theme .card-image {
    background-color: transparent;
    /* Ensure no white background */
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Adjust card layout for list items */
.carousel-card.dark-theme .card-content {
    align-items: flex-start;
    padding: 40px 80px;
}

/* Arrow/Chevron style for list items */
.carousel-card.dark-theme .card-content p {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Pfeil vor Spans und größere Schrift */
.carousel-card.dark-theme .card-content p span {
    font-size: 1.3rem;
    line-height: 1.6;
    position: relative;
    padding-left: 25px;
}

.carousel-card.dark-theme .card-content p span::before {
    content: '>';
    position: absolute;
    left: 0;
    font-weight: 700;
    font-size: 1.3rem;
}

/* Bild soll unten aus der Card herausragen */
.carousel-card.dark-theme {
    overflow: visible;
}

.carousel-card.dark-theme .card-inner {
    overflow: visible;
}

.carousel-card.dark-theme .card-image {
    position: relative;
    align-self: flex-end;
    margin-bottom: -50px;
    z-index: 2;
    flex: 1;
    min-height: 200px;
    display: flex !important;
    align-items: flex-end;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
}

.carousel-card.dark-theme .card-image img {
    position: relative;
    z-index: 2;
    width: auto;
    height: auto;
    min-width: 300px;
    min-height: 150px;
    max-width: 100%;
    max-height: 350px;
    object-fit: contain;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Mobile Anpassungen für Dark Theme Carousel Cards */
@media (max-width: 768px) {
    .carousel-card.dark-theme {
        width: 90vw;
        min-width: 90vw;
        max-width: 90vw;
    }

    .carousel-card.dark-theme .card-inner {
        flex-direction: column;
    }

    .carousel-card.dark-theme .card-content {
        padding: 30px;
        order: 1;
    }

    .carousel-card.dark-theme .card-content h3 {
        font-size: 1.8rem;
    }

    .carousel-card.dark-theme .card-content p span {
        font-size: 1.1rem;
    }

    .carousel-card.dark-theme .card-image {
        order: 2;
        margin-bottom: -30px;
        min-height: 150px;
    }

    .carousel-card.dark-theme .card-image img {
        min-width: 200px;
        min-height: 100px;
        max-height: 200px;
    }

    /* Dots auch auf Mobile sichtbar bei weißem Hintergrund */
    .carousel-section.carousel-white-bg .carousel-dots {
        display: flex;
    }
}

/* OER Page Styles */
.oer-section {
    padding: 150px 20px 100px 20px;
    max-width: 1200px;
    margin: 0 auto;
    color: #1a2e35;
}

.oer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 60px;
}

.oer-header-text {
    flex: 1;
    padding-right: 50px;
}

.oer-header-text h1 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.oer-header-text p {
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: 600;
}

.oer-header-image {
    flex: 0 0 300px;
}

.oer-header-image img {
    width: 100%;
    height: auto;
}

.oer-content-text {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 60px;
    max-width: 900px;
}

.oer-features {
    display: flex;
    gap: 60px;
    margin-bottom: 80px;
}

.oer-feature {
    display: flex;
    gap: 20px;
    flex: 1;
}

.oer-feature-icon {
    flex: 0 0 80px;
}

.oer-feature-icon img,
.oer-feature-icon svg {
    width: 100%;
    height: auto;
}

.oer-feature-content h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.oer-launch-section {
    margin-bottom: 80px;
}

.oer-launch-section h2 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 30px;
}

.launch-content {
    display: flex;
    gap: 40px;
    align-items: center;
}

.launch-media {
    flex: 1;
}

.launch-media img {
    width: 100%;
    border-radius: 10px;
}

.launch-text {
    flex: 1;
}

.oer-wave {
    text-align: center;
    margin-top: 60px;
}

.oer-wave img {
    max-width: 100%;
    height: auto;
}

/* Downloads Page Styles */
.downloads-section {
    padding: 150px 20px 100px 20px;
    max-width: 1200px;
    margin: 0 auto;
    color: #1a2e35;
}

.downloads-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 60px;
}

.downloads-header-text h1 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.downloads-header-icon {
    flex: 0 0 150px;
}

.downloads-header-icon svg,
.downloads-header-icon img {
    width: 100%;
    height: auto;
    color: #1a2e35;
}

.download-block {
    margin-bottom: 60px;
}

.download-block h2 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.download-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.download-item {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
}

.download-item-image {
    width: 80px;
    height: 80px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.download-item-image img {
    max-width: 100%;
    max-height: 100%;
}

.download-item-content {
    flex: 1;
    font-size: 1.2rem;
    font-weight: 600;
}

.pdf-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #c00;
    font-weight: 700;
    font-size: 0.8rem;
}

.pdf-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 5px;
}

/* Modern Downloads Page Styles */
.downloads-hero {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 0 0 50px 50px;
    margin-bottom: 60px;
}

.downloads-hero h1 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #1a2e35;
}

.downloads-hero p {
    font-size: 1.2rem;
    color: #555;
    max-width: 700px;
    margin: 0 auto;
}

.downloads-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 100px 20px;
}

.featured-download {
    background-color: #1a2e35;
    /* Dark theme like carousel */
    color: white;
    border-radius: 20px;
    padding: 60px;
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.featured-content {
    flex: 1;
}

.featured-content h2 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: white;
}

.featured-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.9);
}

.btn-download-large {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #c00;
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s, background-color 0.2s;
}

.btn-download-large:hover {
    background-color: #a00;
    transform: translateY(-2px);
}

.featured-image {
    flex: 0 0 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.featured-image svg {
    width: 200px;
    height: 200px;
    color: rgba(255, 255, 255, 0.1);
}

.material-section h2 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 40px;
    text-align: center;
}

.material-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.material-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #eee;
}

.material-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.material-icon {
    width: 80px;
    height: 80px;
    background: #f0f4f8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #c00;
}

.material-card h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.3rem;
    margin-bottom: 20px;
    flex-grow: 1;
}

.btn-download-small {
    color: #c00;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    padding: 8px 16px;
    border: 2px solid #c00;
    border-radius: 30px;
    transition: all 0.2s;
}

.btn-download-small:hover {
    background-color: #c00;
    color: white;
}

/* Float Animation */
@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes shadow-scale {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(0.8);
        opacity: 0.1;
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

.float-shadow {
    width: 60%;
    height: 20px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
    margin: -10px auto 0 auto;
    z-index: 1;
    animation: shadow-scale 3s ease-in-out infinite;
}

/* Mobile Optimization for New Sections */
@media (max-width: 768px) {
    .lerninhalte-hero {
        flex-direction: column;
        padding: 100px 20px 60px 20px;
        text-align: center;
    }


    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-content p {
        font-size: 1.1rem;
    }

    .hero-image {
        margin-top: 40px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .hero-image svg,
    .hero-image img {
        max-width: 250px;
        height: auto;
    }

    .scroll-down-arrow {
        bottom: 30px;
    }

    .scroll-down-arrow svg {
        width: 40px;
        height: 40px;
    }

    .downloads-content {
        padding: 0 20px 60px 20px;
    }

    .featured-download {
        flex-direction: column-reverse;
        padding: 30px;
        gap: 30px;
        text-align: center;
    }

    .featured-content h2 {
        font-size: 1.8rem;
    }

    .featured-image svg {
        width: 120px;
        height: 120px;
    }

    .btn-download-large {
        width: 100%;
        justify-content: center;
    }

    .oer-features {
        flex-direction: column;
        gap: 40px;
    }

    .launch-content {
        flex-direction: column;
    }
}

/* Content Page (Impressum, Datenschutz, etc.) */
.content-page {
    padding: 150px 20px 100px 20px;
    min-height: 100vh;
    background-color: #f5f7f6;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.content-page-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.content-card {
    background: #fff;
    border-radius: 30px;
    padding: 60px 80px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.content-card h1 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: #1a2e35;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.content-text {
    color: #555;
    font-size: 1.1rem;
    line-height: 1.8;
}

.content-text h2 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a2e35;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.content-text h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a2e35;
    margin-top: 2rem;
    margin-bottom: 0.8rem;
}

.content-text p {
    margin-bottom: 1.2rem;
    color: #555;
}

.content-text a {
    color: #00d600;
    text-decoration: underline;
    font-weight: 500;
}

.content-text a:hover {
    color: #00b300;
}

.content-text ul,
.content-text ol {
    margin-bottom: 1.2rem;
    padding-left: 1.5rem;
}

.content-text li {
    margin-bottom: 0.5rem;
    color: #555;
}

.content-text strong {
    font-weight: 600;
    color: #1a2e35;
}

/* Mobile Anpassungen für Content Page */
@media (max-width: 768px) {
    .content-page {
        padding: 100px 15px 60px 15px;
    }

    .content-card {
        padding: 40px 25px;
        border-radius: 20px;
    }

    .content-card h1 {
        font-size: 2rem;
    }

    .content-text {
        font-size: 1rem;
    }

    .content-text h2 {
        font-size: 1.5rem;
    }

    .content-text h3 {
        font-size: 1.2rem;
    }
}

/** temporär */
.btn-lang {
    display: none;
}

.stack-card-content .icon-area img {
    max-width: 100px;
}