.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: 12px 15px;
    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;
}

/* Spaltenverteilung für PC */
.my-table td:nth-child(1) { width: 35%; } /* Beschreibung */
.my-table td:nth-child(2) { width: 45%; } /* Kursname */
.my-table td:nth-child(3) { width: 20%; } /* Füllspalte für den Rest */

/* Link-Optik für die zweite Spalte */
.my-table td:nth-child(2) {
    text-decoration: underline !important;
}

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