.h1_Center {
    font-family: sans-serif;
    font-size: 1px;
    text-align: left;
}

.HompageMarginLeftRight {                
    margin-left : 10px !important;
    margin-right : 10px !important;
}

.video-container {
    width: 70%;
    max-width: 400px; /* Verhindert, dass es auf großen Bildschirmen zu groß wird */
    margin: 0 auto; /* Zentriert den Container */
 
    /* 16:9 Seitenverhältnis für YouTube */
    aspect-ratio: 16 / 9; 
    overflow: hidden;
    position: relative;
    /* Optional: max-width, damit es auf Tablets nicht riesig wird */
    max-width: 100%; 
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Vollbreite */
    height: 100%; /* Vollhöhe */
    
    /* object-fit: cover funktioniert bei iframe nicht zuverlässig,
       daher verlassen wir uns auf die 100% Maße */
    border: none;
}

/* Grundlegende Gestaltung des Links */
.custom-link {
    color: blue;                /* Standardfarbe */
    text-decoration: underline; /* Text ist unterstrichen */
    transition: color 0.3s;     /* Sanfter Farbwechsel (optional) */
}

/* Stil beim Überfahren mit der Maus */
.custom-link:hover {
    color: red;                /* Neue Farbe bei Hover */
    text-decoration: underline; /* Unterstreichung bleibt oder ändern */
}

.my-custom-btn {
    /* Gleiche Größe für alle */
    width: 400px;         /* Feste Breite (anpassen nach Bedarf) */
    display: inline-block; /* Damit die Breite greift */
    margin-bottom: 10px;  /* Abstand zwischen den Buttons */
    
    /* Textfarben */
    color: white !important;       /* Schrift immer weiß */
    border-color: #000;            /* Optional: Rahmenfarbe */
    background-color: #6c757d;     /* Beispiel: Hintergrundfarbe */
}

.my-table {
    width: 100% !important;   /* Zwingt die Tabelle auf die volle Breite des Bildschirms/Containers */
    border-collapse: collapse;
    table-layout: fixed;      /* Verhindert, dass die Tabelle nur so breit wie der Text ist */
    border-top: 1px solid #ddd;
}

.my-table td {
    padding: 5px 5px;
    
    border-bottom: 1px solid #ddd;
    /* FIX für den Versatz: Alle Texte fangen oben auf gleicher Höhe an */
    vertical-align: top !important; 
    
    /* FIX für iPhone/Safari Umbrüche */
    word-wrap: break-word;
    white-space: normal;
}

/* --- REGELN FÜR DEN PC --- */
/* Das Datum bekommt nur so viel Platz, wie es wirklich braucht */
.my-table td:nth-child(1) { 
    width: 180px; 
    white-space: nowrap;
    padding-left: 5px !important;
} 

/* Der Kursname schließt direkt daneben an und nutzt den Rest */
.my-table td:nth-child(2) { 
    width: auto; 
    padding-left: 20px !important; /* Abstand zwischen Datum und Text */
}

/* Dritte Spalte komplett abschalten */
.my-table td:nth-child(3) { 
    display: none !important; 
}


/* --- REGELN FÜR DAS HANDY (Bildschirme schmaler als 768px) --- */
@media screen and (max-width: 768px) {
    /* Holt die Tabelle bis ganz an den linken und rechten Bildschirmrand */
    .gallery-wrapper {
        padding: 0 !important;
        margin: 10px 0 !important;
    }
    
    .my-table {
        width: 100% !important;
    }

    /* Auf dem Handy teilen wir den Platz in Prozent auf */
    .my-table td:nth-child(1) { 
        width: 35%; 
        padding-left: 8px !important; /* Minimaler Abstand zum Displayrand */
    } 

    .my-table td:nth-child(2) { 
        width: 65%; 
        padding-left: 60px !important;
        padding-right: 8px !important;
    }
}

/* Der äußere Rahmen um alles herum */
.gallery-wrapper {
    max-width: 100%; /* Verhindert, dass die Seite gesprengt wird */
    margin: 20px auto;
    padding: 5px;
}