@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;
    }


    #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;}

    
    .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;
    }

    .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;
    }
    


    /* Responsive Anpassung */