@import url("base.css");
    *{box-sizing: border-box;}
    
    body{margin: 0; padding: 0; font-family: 'Poppins', sans-serif;} 

    #courses_cta_wrap,
    .subtopic-grid {
        position: relative;
        width: 100%;
        /* display: grid;
        grid-template-columns: repeat(4, 1fr);  */
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 20px;
        box-sizing: border-box;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        max-width: 1440px;
        margin: 0 auto;
    }

    #fss_courses{
        position: relative !important;
        min-height: 60vh;
        padding-bottom: 100px;
        box-sizing: border-box;
    }

    #fss_courses, #bottom_wrap{
        overflow-anchor: none;
    }

    #hero_wrap{
        position: relative; background: #f4f4f4; min-height: 224px; max-width: 1440px; margin: 0 auto;
    }
        #title_area{color: #0b264e; max-width: 1440px; margin: 0 auto;}
        #control_area{position: relative; width: 100%; max-width: 1440px; margin: 0 auto; padding: 2% 8%; box-sizing: border-box;}

    
    #bottom_wrap {
        position: -webkit-sticky; position: sticky; bottom: -10px; z-index: 10; background: #20293c; padding: 20px; border-radius: 8px;
        box-sizing: border-box; border-top: 1px solid #e5e5e5; padding-bottom: calc(20px + env(safe-area-inset-bottom));
        box-shadow: 0 -6px 16px rgba(0,0,0,.06); width: 100%; 

        /* Animation */
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        transition:
            transform .28s ease,
            opacity  .28s ease,
            visibility 0s linear 0s; 
        will-change: transform, opacity;
    }

    #bottom_wrap.is-off {
        transform: translateY(calc(100% + 10px));
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            transform .28s ease,
            opacity  .28s ease,
            visibility 0s linear .28s;
    }

    @media (prefers-reduced-motion: reduce) {
        #bottom_wrap,
        #bottom_wrap.is-off {
            transition: none !important;
        }
    }

    
    .fading-out {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .hidden {
        position: absolute;
        top: -9999px;
        left: -9999px;
        width: 0;
        height: 0;
        overflow: hidden;
        pointer-events: none; 
    }

    
    .cta-tile{
        position: relative;
        display: flex;
        border: 1px solid #ccc;
        padding: 1rem 3rem;
        background-color: #fdfdfd;
        border-radius: 8px;
        cursor: pointer;
        font-size: 1em;
        user-select: none;
        transition: background-color 0.3s, transform 0.2s;
    }

    .subtopic-tile {
        display: flex;
        border: 1px solid #ccc;
        background-color: #fdfdfd;
        border-radius: 8px;
        cursor: pointer;
        font-size: 1em;
        user-select: none;
        transition: background-color 0.3s, transform 0.2s;
    }
    
        .course-checkbox {
            opacity: 0;
            position: absolute;
        }
        
        .subtopic-tile.selected {
            background-color: #e0f7fa; 
            border-color: #007BFF; 
        }

    .cta-tile{
        min-height: 80px;
        align-items: center;
        flex-direction: row;
        justify-content: center;
        text-align: center;
    }

    .cta-tile h2, .subtopic-tile h2{
        font-size: 2rem;
        font-weight: 500;
        color: #e0083a;
    }

    .cta-tile h3{
        font-size: 18px;
        font-weight: 500;
        color: #0b264e;
    }

    .subtopic-tile {
        position: relative;
        min-height: 260px;
        flex-direction: column;
        justify-content: space-between;
    }

    .cta-tile:hover, .subtopic-tile:hover {
        background-color: #f5f5f5;
        transform: scale(1.05);
    }

    .subtopic-tile .tile-txt-wrap{
        font-family: "Poppins", Sans-serif;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 220px;
    }

    .subtopic-tile .tile-txt-wrap h3 {
        margin-bottom: 10px;
        font-size: 22px;
        font-weight: 500;
        color: #0b264e;
    }

    .subtopic-tile .tile-txt-wrap p {
        margin: 5px 0;
        font-size: 0.8rem;
        color: #555;
    }

    .subtopic-tile .tile-txt-wrap label{
        cursor: pointer;
        user-select: none;
        padding: 1rem 3rem;
        box-sizing: border-box;
    }

    .btn-std {
        background-color: #005aa9;
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 10px 20px;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .btn-std:hover {
        background-color: #0b264e;
        transform: translateY(-2px);
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    }

    .btn-std:active {
        background-color: #004085;
        transform: translateY(0);
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    }

    .btn-std:disabled {
        background-color: #ccc;
        color: #666;
        cursor: not-allowed;
        box-shadow: none;
    }

    /* Form */
    #mainForm{
        margin: 0 auto;
        box-sizing: content-box;
        max-width: 1440px;
        min-width: 80%;
    }

    #mainForm label {
        font-size: .9rem;
        color: #555;
        font-family: 'Arial', sans-serif;
        margin-bottom: 5px;
    }

    #mainForm select {
        padding: 10px;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        width: 100%;
        font-family: 'Arial', sans-serif;
    }

    #mainForm input[type="text"], #mainForm input[type="email"] {
        padding: 10px;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        width: 100%;
        font-family: 'Arial', sans-serif;
    }
    .datepicker{
        border: 1px solid #ccc !important;
    }

    #chk_agb, #chk_agb1{
        margin-right: 20px;
        width: 24px; height: 24px;
    }


    /* Accordion shell */
    .sel-acc {
        border: 1px solid #20293c; border-radius: 8px; background: #fff; margin-bottom: 40px; overflow: hidden;
    }

    .sel-acc > summary {
        list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 600; display: flex; align-items: center;
        justify-content: space-between; user-select: none; position: relative; background:#20293c; color: #fff;
    }

    /* Custom Indicator */
    .sel-acc > summary::after {
        content: ""; width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: transform .2s ease; margin-left: 12px;
    }
    .sel-acc[open] > summary::after {
        transform: rotate(-135deg);
    }

    .sel-acc__panel {
        padding: 12px 16px 16px; border-top: 1px solid #e5e7eb;
    }
    .sel-acc__list {
        margin: 0; padding: 0; list-style: none; display: grid; gap: 8px;
    }
    .sel-acc__list li {
        padding: 10px 12px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #f8fafc; font-size: 14px; line-height: 1.35;
    }

    /* Counter */
    .sel-acc__count {
        font-weight: 500;
    }





    .bubble {
        display: inline-block;
        /* background-color: #FF5733; */
        background-color: #E0083A;
        color: white;
        font-size: 14px;
        text-align: center;
        line-height: 1.8em;
        border-radius: 50%;
        width: 25px;
        height: 25px;
        position: absolute;
        top: -10px;
        right: -5px;
        transition: opacity 0.3s ease;
    }
    
    .bubble.hidden {
        opacity: 0;
        visibility: hidden;
    }
    
    .bubble.visible {
        opacity: 1;
        visibility: visible;
    }

    #fwd_button, #fwd_button2 { position: relative; }
    #fwd_button .fwd-bubble, #fwd_button2 .fwd-bubble {
        position: absolute;
        top: -8px;
        right: -8px;
    }
    


    /* Responsive Anpassung */