/* --- Einbindung der Haus-Schriftart über tv-logo.ttf --- */
@font-face {
    font-family: 'Goffik Outline';
    src: url('../fonts/tv-logo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* NautiApp - Master Stylesheet 
   Version: 6.0 (Präzise Mobile Scroll-Korrektur auf deiner Basis)
*/

:root {
    --nauti-blue: #005596;
    --nauti-bg: #f0f4f7;
    --nauti-white: #ffffff;
}

/* --- Basis & Layout --- */
body {
    background-color: var(--nauti-bg);
    margin: 0; 
    padding: 0;
    font-family: sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #444;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--nauti-blue);
    line-height: 1.3;
    text-align: left;
}
/* Erzwingt linksbündige Überschriften auf modularen Seiten */
.modular h1, 
.modular h2, 
.modular h3, 
.modular h4 {
    text-align: left !important;
}

.container {
    width: 85% !important;
    margin: 0 auto;
}

/* --- Header & Navigation --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    padding: 20px 0;
    position: relative;
    z-index: 1100; 
}

/* Brand-Einheit */
.navbar-brand {
    display: flex;
    flex-direction: row; 
    align-items: center;
    gap: 20px;
    position: relative; 
    text-decoration: none;
}

.nauti-brand-text {
    font-family: 'Goffik Outline', sans-serif !important;
    font-size: 2.4rem; 
    line-height: 1;
    display: inline-block;
    color: var(--nauti-blue) !important;
    font-weight: normal;
}

.nauti-nav-logo {
    height: 75px; 
    width: auto;
    max-width: 280px;
    object-fit: contain;
    display: block;
    z-index: 100;           
}

/* Hamburger Icon Styling */
.menu-toggle {
    display: none; 
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 1200;
}

.menu-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: var(--nauti-blue);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.dropmenu ul {
    display: flex;
    list-style: none;
    margin: 0; 
    padding: 0;
}

.dropmenu ul li {
    position: relative;
}

.dropmenu ul li a {
    display: block;
    padding: 10px 25px; 
    color: var(--nauti-blue) !important;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.dropmenu > ul > li:hover > a {
    background-color: var(--nauti-blue);
    color: white !important;
}

/* --- Untermenü Logik (NautiApp Ultra-Smooth Desktop) --- */
.dropmenu ul li ul {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    display: block !important; 
    visibility: hidden;
    
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 2.0s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.4s ease, 
                visibility 0.4s;

    flex-direction: column !important;
    background-color: rgba(240, 244, 247, 0.8) !important; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    min-width: 240px;
    z-index: 1000;
    border-top: 0px solid var(--nauti-blue);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    padding: 0; 
    margin: 0;
}

.dropmenu ul li ul.is-open {
    max-height: 600px; 
    opacity: 1;
    visibility: visible;
    padding: 10px 0 !important;
    border-top: 3px solid var(--nauti-blue) !important;
}

.dropmenu ul li ul li a {
    padding: 12px 25px;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(0,85,150,0.05);
    background: transparent;
}

/* --- Bilder --- */
#header-image {
    position: relative;
    background-size: cover;
    background-position: center;
    width: 100%;
    z-index: 1; 
}

.header-home, .header-sub { height: 226px; }

/* --- Content & Willkommenstext --- */
.main-welcome-content {
    margin-top: 100px; 
    margin-bottom: 50px;
    width: 100%;
    line-height: 1.6;
}

.main-welcome-content h1, 
.main-welcome-content h2, 
.main-welcome-content h3 {
    text-align: left !important;
}

.main-welcome-content p {
    text-align: left !important;
}

/* --- Nauti-Boxen System --- */
.nauti-grid {
    margin-top: 20px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    padding-bottom: 50px;
}

.nauti-box {
    position: relative; 
    width: 400px;
    height: auto;
    background: var(--nauti-white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid transparent;
}

.nauti-box:hover {
    transform: translateY(-8px); 
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); 
    border-color: var(--nauti-blue); 
    cursor: pointer;
}

.nauti-box img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.nauti-box-content {
    padding: 25px !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.nauti-box-content img { display: none !important; }

.nauti-box-content h3 {
    text-align: center !important;
    margin-top: 5px !important;
    margin-bottom: 25px !important;
    font-size: 1.5rem;
}

.nauti-box-content p {
    text-align: left !important;
    line-height: 1.6;
    color: #444;
    hyphens: auto;
    word-break: break-word;
}

.nauti-btn {
    position: relative; 
    background: var(--nauti-blue);
    color: white !important;
    padding: 15px;
    text-align: center;
    margin-top: auto; 
    text-decoration: none;
    font-weight: bold;
    border-radius: 0 0 12px 12px; 
    align-self: stretch; 
}

.nauti-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: -500px; 
    z-index: 10;
}

/*  WIR STARTEN WITH UNSEREN GESAMMELTEN WERKEN AUS DEN STANDARDS */

.lightbox { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); text-align: center; align-items: center; justify-content: center; }
.lightbox img { max-width: 90%; max-height: 90%; margin: auto; border-radius: 4px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); }
.lightbox:target { display: flex; }
.lightbox-close { position: absolute; top: 20px; right: 20px; color: #fff !important; font-size: 40px; font-weight: bold; text-decoration: none !important; background: rgba(0, 0, 0, 0.5); width: 50px; height: 50px; line-height: 45px; border-radius: 50px; text-align: center; transition: background 0.2s; }
.lightbox-close:hover { background: #0073e6; }

@media (max-width: 768px) {
    .responsive-img { float: none !important; margin: 0 auto 20px auto !important; max-width: 100% !important; }
}

/* 1. CONTAINER FÜR GRÖSSE UND LAGE DES STREAMS */
.stream-wrapper {
    position: relative;
    display: block;        /* Erzwingt Block-Modus für die saubere Zentrierung */
    max-width: 500px;      /* HIER die gewünschte maximale Breite eintragen */
    width: 40%;            /* Desktop-Standardbreite */
    height: auto;
    margin: 20px auto;     /* Standardmäßig ZENTRIERT */
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    
    /* WICHTIG: Wirkt als Stanzmaske für den Zoom-Effekt des Posters */
    overflow: hidden; 
}

/* Der Video-Player selbst */
.stream-player {
    width: 100%;
    display: block;
    cursor: pointer;
    /* Flüssiger Übergang für den Zoom-Effekt */
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* HOVER-EFFEKT: Das Startbild (Poster) zoomt elegant um 12% hoch */
.stream-wrapper:not(.playing):hover .stream-player {
    transform: scale(1.12);
}

/* 2. DAS CUSTOM STARTDREIECK (PLAY-BUTTON) */
.stream-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    
    /* Das Dreieck über CSS-Borders gezeichnet */
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 40px solid rgba(255, 255, 255, 0.9);
    
    margin-left: 5px; /* Optischer Ausgleich, damit das Dreieck perfekt zentriert wirkt */
    pointer-events: none; /* Klicks gehen durch das Dreieck hindurch auf das Video */
    transition: opacity 0.3s ease, transform 0.25s ease;
    z-index: 5;
}

/* HOVER-EFFEKT FÜR DEN PLAY-BUTTON: Das Dreieck wächst dezent mit */
.stream-wrapper:not(.playing):hover::after {
    transform: translate(-50%, -50%) scale(1.15);
}

/* Sobald der Stream läuft (und die Controls eingeblendet werden), verschwindet das custom Dreieck */
.stream-wrapper.playing::after {
    opacity: 0;
    pointer-events: none;
}

/* --- DER NATIVE MITWANDERNDE CSS-TOOLTIP --- */
.stream-wrapper::before {
    content: attr(data-tooltip);
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translate(-50%, -5px);
    background-color: #025a87; /* Edles Nauti-Dunkelblau */
    color: #ffffff;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: bold;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

/* Tooltip poppt beim Hover sauber und ruckelfrei auf */
.stream-wrapper:not(.playing):hover::before {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Deaktiviert Tooltip und Hover komplett, sobald das Video läuft */
.stream-wrapper.playing .stream-player {
    transform: none !important;
    cursor: default;
}
.stream-wrapper.playing::before {
    display: none !important;
}

/* SMARTPHONE-OPTIMIERUNG */
@media (max-width: 768px) {
    .stream-wrapper {
        width: 100% !important;
        max-width: 100%;
        margin: 15px 0;
    }
    .stream-wrapper::before { display: none !important; } /* Tooltips auf Touch-Geräten ausblenden */
}

/* Responsive, umrandete SEO-Tabelle */
.table-container { width: 100%; overflow-x: auto; margin: 25px 0; -webkit-overflow-scrolling: touch; }
table.seo-tabelle { width: 100%; border-collapse: collapse; min-width: 600px; font-family: sans-serif; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
table.seo-tabelle th, table.seo-tabelle td { border: 1px solid #d1d5db; padding: 12px 15px; text-align: left; }
table.seo-tabelle th { background-color: #f3f4f6; color: #1f2937; font-weight: 700; }
table.seo-tabelle tr:nth-child(even) { background-color: #f9fafb; }
table.seo-tabelle tr:hover { background-color: #f1f5f9; }


/* FAQ Styling */
/* --- FAQ IM STIL DER NAUTISCHEN NOTIZEN --- */

.faq-container {
    margin: 35px 0;
}

.faq-container details {
    background: #ffffff;
    border: 2px solid rgba(2, 132, 199, 0.45);
    border-radius: 12px;
    margin-bottom: 14px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.faq-container details:hover {
    transform: translateY(-3px);
    border-color: #0284c7;
    box-shadow: 0 10px 18px -8px rgba(2, 132, 199, 0.35);
}

.faq-container details[open] {
    background: #ffffff;
    border-color: #0284c7;
}

.faq-container summary {
    position: relative;
    list-style: none;
    padding: 16px 56px 16px 18px;
    font-size: 1.02rem;
    line-height: 1.35;
    font-weight: 700;
    color: #005596;
    cursor: pointer;
}

.faq-container summary::-webkit-details-marker {
    display: none;
}

.faq-container summary::before {
    display: none;
}

.faq-container summary::after {
    content: '›';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(2, 132, 199, 0.08);
    color: #0284c7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 300;
    transform: translateY(-50%);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.faq-container details:hover summary::after {
    background: #0284c7;
    color: #ffffff;
    transform: translateY(-50%) translateX(3px);
}

.faq-container details[open] summary::after {
    transform: translateY(-50%) rotate(90deg);
    background: #0284c7;
    color: #ffffff;
}

.faq-container .faq-content {
    padding: 0 18px 18px 18px;
    font-size: 0.96rem;
    line-height: 1.6;
    color: #334155;
    cursor: default;
}



/*  Einblenden der Rezensionen   */
.nautiapp-reviews { display: flex; flex-direction: column; gap: 20px; margin-top: 25px; }
.nautiapp-review-box { border: 2px solid #edf2f7; border-radius: 12px; background: #ffffff; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
.nautiapp-review-header { background: #bbddf6; padding: 12px 20px; border-bottom: 1px solid #edf2f7; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; font-weight: bold; color: #7f8c8d; }
.nautiapp-review-name { color: #2c3e50; }
.nautiapp-review-date { font-weight: normal; }
.nautiapp-review-source { color: #3498db; font-size: 0.8rem; letter-spacing: 0.5px; }
.nautiapp-review-body { padding: 20px; font-size: 0.95rem; line-height: 1.6; color: #2c3e50; white-space: pre-line; }

/* SEO-Trick: Box ist im Quelltext vorhanden, wird aber optisch versteckt */
.nautiapp-hidden { display: none !important; }

.btn-nautiapp-more { display: none; background-color: #3498db; color: #ffffff; padding: 11px 22px; border: none; border-radius: 8px; font-weight: bold; font-family: sans-serif; text-align: center; cursor: pointer; margin-top: 15px; transition: background-color 0.2s; width: 100%; max-width: 300px; }
.btn-nautiapp-more:hover { background-color: #2980b9; }

/* --- PREMIUM BUTTON ENGINE SYSTEM --- */
.sss-btn-wrapper {
    margin: 25px 0;
    display: block;
}
.btn-footer-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    margin: 30px 0;
}

/* Großer, unübersehbarer Haupt-CTA-Button */
.btn-booking-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0284c7;
    color: #ffffff !important;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
    transition: all 0.2s ease-in-out;
}
.btn-booking-cta:hover {
    background: #0369a1;
    box-shadow: 0 6px 20px rgba(3, 105, 161, 0.35);
    transform: translateY(-2px);
}

/* Eleganter, dezenter Outline-Button für sekundäre Links */
.btn-back-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: #0284c7 !important;
    border: 2px solid #0284c7;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
}
.btn-back-outline-btn:hover {
    background: #e0f2fe;
    color: #025a87 !important;
    border-color: #025a87;
    transform: translateY(-1px);
}

/* Spezieller, markanter PDF-Download-Button */
.btn-download-pdf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff5f5;
    color: #c53030 !important;
    border: 2px solid #fc8181;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
}
.btn-download-pdf-btn:hover {
    background: #fff5f5;
    border-color: #c53030;
    box-shadow: 0 4px 12px rgba(197, 48, 48, 0.15);
    transform: translateY(-1px);
}

@media (max-width: 680px) {
    .btn-footer-navigation { flex-direction: column; align-items: stretch; }
    .btn-booking-cta, .btn-back-outline-btn, .btn-download-pdf-btn { text-align: center; justify-content: center; width: 100%; box-sizing: border-box; }
}

/* DASHBOARD Kursteile in der Mediathek */

/* Aktiviert das elegante, flüssige Scrollen beim Klick auf die Kacheln */
html {
    scroll-behavior: smooth;
}

/* Absolut flexibles Mediathek Button-Dashboard */
.med-dashboard {
    display: flex;
    flex-wrap: wrap;
    /* Zentriert die Kacheln in jeder Zeile, sobald ein Umbruch stattfindet */
    justify-content: center; 
    /* Harmonischer Abstand zwischen den Kacheln – horizontal und vertikal */
    gap: 25px; 
    margin: 35px 0;
    width: 100%;
}

.med-tile-btn {
    background: #ffffff;
    border: 3px solid #0284c7; /* Markanter Nauti-Cyan Rahmen */
    border-radius: 14px; /* Schön abgerundete Ecken */
    padding: 0 !important; /* Absolut randlos */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    
    /* FIXE BREITE: Startet bei 150px und wird streng bei max. 150px gedeckelt */
    flex: 1 1 150px; 
    max-width: 150px; 
    
    /* Stanzt die Ecken des WebP-Bildes kompromisslos ab */
    overflow: hidden; 
    
    /* Behält das exakte Seitenverhältnis deiner Grafiken (290x350) bei */
    aspect-ratio: 290 / 350; 
    
    /* Sanfter Übergang für Rahmenfarbe, Schattenwurf und Transformation */
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* Der kraftvolle Hover-Effekt für den Rahmen & Schatten */
.med-tile-btn:hover {
    transform: translateY(-6px); /* Kachel hebt kraftvoll ab */
    border-color: #0369a1; /* Sattes Tiefblau beim Hover */
    box-shadow: 0 15px 20px -5px rgba(2, 132, 199, 0.4), 0 8px 8px -5px rgba(2, 132, 199, 0.2);
}

/* Das Bild füllt den Button randlos aus */
.med-tile-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* Verhindert Verzerrungen und füllt den Raum perfekt */
    object-position: top; /* Schneidet Überschüsse im Notfall unten ab */
    
    /* Kraftvoller Zoom-Effekt mit dynamischer Elastizität */
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Spürbarer Bild-Zoom innerhalb der Stanzmaske beim Hover */
.med-tile-btn:hover .med-tile-img {
    transform: scale(1.12); /* 12% Vergrößerung beim Drüberfahren */
}

@media screen and (max-width: 450px) {
    /* Gewährleistet ein sauberes, kompaktes Bild auf kleinen Smartphones */
    .med-tile-btn { flex-basis: 120px; max-width: 120px; }
    .med-dashboard { gap: 15px; }
}

/*  STYLE DER VIDEO DASHBOARD     */

/* --- DASHBOARD FÜR DIE VIDEOTAGE (REINER STANDARD) --- */
.vid-dashboard {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Hält die Reihe bei 5 oder 6 Kacheln immer perfekt mittig */
    gap: 25px; 
    margin: 35px 0;
    width: 100%;
}

.vid-tile-link {
    background: #ffffff;
    border: 3px solid #0284c7; /* Markanter Nauti-Cyan Rahmen */
    border-radius: 14px; 
    padding: 0 !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none !important;
    
    /* Kompakte Kachelgröße (150px) bleibt im Display unangetastet */
    flex: 1 1 150px; 
    max-width: 150px; 
    aspect-ratio: 290 / 350; 
    overflow: hidden; 
    
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* Hover-Effekt: Kachel hebt harmonisch ab */
.vid-tile-link:hover {
    transform: translateY(-6px); 
    border-color: #0369a1; 
    box-shadow: 0 15px 20px -5px rgba(2, 132, 199, 0.4), 0 8px 8px -5px rgba(2, 132, 199, 0.2);
}

/* Das Icon-Bild (Schneidet rechts/links gleichmäßig ab, bleibt oben bündig) */
.vid-tile-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; 
    object-position: center top; 
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Harmonischer Bild-Zoom beim Hover */
.vid-tile-link:hover .vid-tile-img {
    transform: scale(1.12); 
}

@media screen and (max-width: 450px) {
    .vid-tile-link { flex-basis: 120px; max-width: 120px; }
    .vid-dashboard { gap: 15px; }
}



/* --- PDF-DOWNLOAD-KACHELN --- */
.pdf-dashboard {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    margin: 35px 0;
    width: 100%;
}

.pdf-tile-link {
    background: #ffffff;
    border: 3px solid #0284c7;
    border-radius: 14px;
    padding: 10px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    text-decoration: none !important;
    overflow: hidden;

    flex: 1 1 210px;
    max-width: 210px;

    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.pdf-tile-link:hover {
    transform: translateY(-6px);
    border-color: #0369a1;
    box-shadow: 0 15px 20px -5px rgba(2, 132, 199, 0.4), 0 8px 8px -5px rgba(2, 132, 199, 0.2);
}

.pdf-tile-img {
    width: 150px;
    height: 130px;
    display: block;
    object-fit: cover;
    object-position: center top;
    border: 3px solid #0284c7;
    border-radius: 12px;
    margin-bottom: 10px;
    transition: transform 0.25s ease;
}

.pdf-tile-link:hover .pdf-tile-img {
    transform: scale(1.05);
}

.pdf-tile-title {
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.2;
    color: #003366;
    text-align: center;
    margin-bottom: 4px;
}

.pdf-tile-subtitle {
    font-size: 0.82rem;
    line-height: 1.25;
    color: #666;
    text-align: center;
    overflow-wrap: break-word;
}

@media screen and (max-width: 450px) {
    .pdf-tile-link {
        flex-basis: 170px;
        max-width: 170px;
    }

    .pdf-tile-img {
        width: 125px;
        height: 108px;
    }

    .pdf-dashboard {
        gap: 15px;
    }
}


    /* --- EINZEL-BUTTON DASHBOARD (ZENTRIERT) --- */
    .stream-start-dashboard {
        display: flex;
        justify-content: center; /* Zentriert die Kachel exakt in der Mitte */
        margin: 40px 0;
        width: 100%;
    }
    
    /* Wiederverwendung des identischen Nauti-Looks */
    .stream-start-tile {
        background: #ffffff;
        border: 3px solid #0284c7; /* Identischer Nauti-Cyan Rahmen */
        border-radius: 14px; 
        padding: 0 !important; 
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        text-decoration: none !important;
        
        /* EXAKT dieselbe kompakte Displaygröße wie deine anderen Kacheln */
        flex: 0 0 150px; 
        width: 150px;
        max-width: 150px; 
        aspect-ratio: 290 / 350; 
        overflow: hidden; 
        
        transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    }
    
    /* Identischer, kraftvoller Hover-Effekt */
    .stream-start-tile:hover {
        transform: translateY(-6px); 
        border-color: #0369a1; 
        box-shadow: 0 15px 20px -5px rgba(2, 132, 199, 0.4), 0 8px 8px -5px rgba(2, 132, 199, 0.2);
    }
    
    /* Das Live-Stream-Icon (Stanzmaske fängt das 350x360 Maß ab) */
    .stream-start-img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover; 
        object-position: center top; 
        transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .stream-start-tile:hover .stream-start-img {
        transform: scale(1.12); 
    }

    @media screen and (max-width: 450px) {
        .stream-start-tile { flex-basis: 120px; max-width: 120px; width: 120px; }
    }


    /* KALENDER WEBINARE  */
  /* Grundlayout der Tabelle - Optimiert für sportbootschule.TV */
  .kalender-table { 
    width: 100%; 
    min-width: 680px;
    border-collapse: collapse; 
    margin-bottom: 30px; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    border-radius: 8px; 
    /*  overflow: hidden;    */
  }
  .kalender-table th, .kalender-table td { 
    padding: 12px 20px; 
    text-align: left; 
    border-bottom: 1px solid rgba(0,0,0,0.08); 
  }
  
  /* Der Tabellenkopf in deinem markanten Dunkelblau */
  .kalender-table th { 
    background-color: #1e3a8a; 
    color: #ffffff; 
    text-transform: uppercase; 
    font-size: 0.85em; 
    letter-spacing: 1px; 
  }
  
  
  
  /* Kalender mobil scrollbar machen */
.kalender-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
  @media screen and (max-width: 600px) {
    .kalender-table th,
    .kalender-table td {
        padding: 10px 12px;
        font-size: 0.9em;
    }
}
  
  
  

  /* Maritime Farblogik für die Zeilen */
  .row-sss-mo { background-color: #f0f7ff; } /* Ganz helles Wasserblau */
  .row-sss-mi { background-color: #e6fcf5; } /* Helles Meeresgrün-Blau */
  .row-shs-mo { background-color: #fffbf0; } /* Warmer Sandton */
  .row-shs-mi { background-color: #fff5f0; } /* Sanfter Muschelton */
  
  /* Spezialzeilen */
  .row-holiday { background-color: #fcfcfc; color: #95a5a6; font-style: italic; } 
  .row-final   { background-color: #fdf2f2; font-weight: bold; border-left: 5px solid #1e40af; }

  /* Hover-Effekt: Eine dezente Abdunkelung der Zeile */
  .kalender-table tr:hover { 
    filter: brightness(0.95);
    transition: all 0.2s ease;
    cursor: default;
  }

  /* Badge-Styles im sportbootschule.TV & NautiApp-Design */
  .badge { padding: 4px 8px; border-radius: 4px; font-weight: bold; font-size: 0.9em; display: inline-block; }
  .badge-sss { color: #1e40af; }
  .badge-shs { color: #d68910; } /* Kräftiges Navigations-Gold */





/* ============================================================
    MOBILE OPTIMIERUNG (Version 5.9 - Explizite Hardcoded Kaskade)
   ============================================================ */

@media screen and (max-width: 768px) {
    .container { width: 92% !important; padding: 0 10px !important; }

    .menu-toggle { display: flex; } 

    .dropmenu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: rgba(240, 244, 247, 0.98);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        z-index: 1050;
        border-bottom: 3px solid var(--nauti-blue);
        
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: max-height 2.0s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.4s ease;
    }

    .dropmenu.is-active {
        /* KORREKTUR: 100dvh berechnet die ausblendbare URL-Leiste des Smartphones präzise mit ein! */
        max-height: calc(100dvh - 85px) !important; 
        
        /* Erlaubt das vertikale Scrollen innerhalb des Menüs */
        overflow-y: auto !important; 
        
        /* Sorgt für das flüssige Wischen auf iOS und Android */
        -webkit-overflow-scrolling: touch; 
        
        opacity: 1;
        visibility: visible;
        padding: 20px 0;
    }

    .menu-toggle.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .menu-toggle.open span:nth-child(2) { opacity: 0; }
    .menu-toggle.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    .nauti-brand-text { font-size: 1.4rem !important; }
    
    body { font-size: 16px !important; }
    
    .main-welcome-content h1 { font-size: 1.7rem !important; }
    .main-welcome-content p { font-size: 1.1rem !important; line-height: 1.5 !important; }

    .nauti-grid { gap: 25px !important; margin-top: 10px !important; }

    .nauti-box { width: 100% !important; min-width: 100% !important; margin-bottom: 20px !important; }
    .nauti-box img { height: 200px !important; }

    .main-welcome-content { margin-top: 40px !important; }
    .header-home, .header-sub { height: 180px !important; }

    /* Löst die Flex-Blockade der Listen kompromisslos auf */
    .dropmenu ul { display: block !important; width: 100% !important; }

    /* Standard-Reset für alle mobilen Unterlisten */
    .dropmenu ul li ul {
        position: static !important;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        background: transparent !important;
        box-shadow: none !important;
        overflow: hidden;
        transition: max-height 0.5s ease-out, opacity 0.3s ease;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Blendet geöffnete Segmente flüssig ein */
    .dropmenu ul li ul.is-open {
        max-height: 3000px !important; 
        opacity: 1 !important;
        visibility: visible !important;
        padding: 5px 0 !important;
    }

    /* --- HARDCODED STUFEN-EINRÜCKUNG --- */
    
    /* Ebene 1 (Hauptmenü) - Basis-Abstand */
    .dropmenu ul.navigation > li > a {
        padding-left: 20px !important;
    }

    /* Ebene 2 (Erstes Untermenü) - Einrücken */
    .dropmenu ul.navigation > li > ul > li > a {
        padding-left: 35px !important;
    }

    /* Ebene 3 (Unter-Untermenü) - Tiefer einrücken */
    .dropmenu ul.navigation > li > ul > li > ul > li > a {
        padding-left: 55px !important;
    }

    /* Ebene 4 (Nächste Generation) - Noch tiefer einrücken */
    .dropmenu ul.navigation > li > ul > li > ul > li > ul > li > a {
        padding-left: 75px !important;
    }

    /* Ebene 5 (Sicherheitsstufe) - Maximale Einrückung */
    .dropmenu ul.navigation > li > ul > li > ul > li > ul > li > ul > li > a {
        padding-left: 95px !important;
    }


    /* --- DIE DIENSTHABENDE DICKE BALKEN-ENGINE --- */
    
    /* Basis-Hilfslinie für alle Unterpunkte zur Orientierung */
    .dropmenu ul.navigation li ul li a {
        border-left: 2px solid rgba(0, 85, 150, 0.15) !important;
    }

    /* WENN ein Menüast geöffnet ist (.is-open), bekommen die direkt darin liegenden Links 
       den fetten, geliebten Nauti-Balken links angeheftet! */
    .dropmenu ul.navigation li ul.is-open > li > a {
        border-left: 6px solid var(--nauti-blue) !important;
        font-weight: bold !important;
        background: rgba(0, 85, 150, 0.04) !important;
    }

    /* --- KORREKTUR: MOBIL-SICHTBARKEITS-RESET ---
       Verhindert, dass der aktive Oberpunkt auf dem Smartphone durch den Desktop-Hover-Zwang 
       mit einem massiven blauen Block hinterlegt wird und dadurch unscharf oder unsichtbar wird.
    */
    .dropmenu ul.navigation li.clicked-active > a {
        border-left: 6px solid var(--nauti-blue) !important;
        font-weight: bold !important;
        background: transparent !important; /* Kein störendes Vollblau mobil! */
        color: var(--nauti-blue) !important; /* Text bleibt perfekt lesbar */
    }

    /* Fix für die Hierarchie: Wenn sich ein NOCH tieferes Untermenü öffnet, 
       stufen wir den fetten Rand der Ebene darüber wieder auf die feine Hilfslinie zurück. */
    .dropmenu ul.navigation li ul.is-open:has(ul.is-open) > li > a,
    .dropmenu ul.navigation li.clicked-active:has(li.clicked-active) > a {
        border-left: 2px solid rgba(0, 85, 150, 0.3) !important;
        font-weight: 600 !important;
        background: transparent !important;
        color: var(--nauti-blue) !important;
    }
}

/* --- Buttons & Info --- */
.btn-inline {
    display: inline-block;
    background-color: var(--nauti-blue);
    color: white !important;
    padding: 10px 22px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
    font-size: 1rem;
    margin-left: 10px;
    transition: background 0.3s ease;
    vertical-align: middle;
    border: none;
}

.btn-inline:hover { background-color: #003d6b; text-decoration: none; }

.update-info {
    font-size: 0.9rem;
    color: #777;
    font-style: italic;
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 20px;
}

#gdpr-cookie-notice { background-color: #dee6ed !important; border-top: 4px solid #005596 !important; color: #333 !important; }
#gdpr-cookie-notice .button { background-color: #005596 !important; color: white !important; border-radius: 4px !important; padding: 10px 25px !important; font-weight: bold; }
#gdpr-cookie-notice a { color: #005596 !important; text-decoration: underline; }


/* ============================================================
    INDIKATOR-SYMBOLE (REIN CSS-BASIERT ÜBER ":has(ul)" DETEKTION)
   ============================================================ */

.dropmenu > ul > li:has(ul) > a::after {
    content: " ▾";
    font-size: 0.75rem;
    opacity: 0.7;
    margin-left: 6px;
}

.dropmenu li:has(ul) > a::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid var(--nauti-blue); 
    position: absolute;
    left: 10px; 
    top: 50%;
    transform: translateY(-50%);
    opacity: 0; 
    z-index: 10;
    transition: opacity 0.15s ease-out, border-right-color 0.15s ease-out;
}

.dropmenu li:has(ul) > a:hover::before {
    opacity: 1 !important;
    border-right-color: #ffffff !important; 
}

.dropmenu li:has(ul):hover > a:not(:hover)::before {
    opacity: 1 !important;
    border-right-color: var(--nauti-blue) !important; 
}


/* ============================================================
    RADIKALER RESET FÜR PERMANENTE GRAV-KLASSEN (EBENE 1 FIX)
   ============================================================ */
.dropmenu ul.navigation li.active:not(.clicked-active) > a,
.dropmenu ul.navigation li.activeChild:not(.clicked-active) > a {
    background-color: transparent !important;
    color: var(--nauti-blue) !important;
}


/* ============================================================
    KETTEN-HOVER & KLICK-TIMER SYSTEM (ALLE EBENEN GARANTIERT BLU)
   ============================================================ */
.dropmenu ul.navigation li:hover > a,
.dropmenu ul.navigation li.clicked-active > a,
.dropmenu ul.navigation li ul li.clicked-active > a,
.dropmenu ul.navigation li ul li ul li.clicked-active > a {
    background-color: var(--nauti-blue) !important;
    color: #ffffff !important;
}

/* Schaltet die kleinen CSS-Dreiecke synchron im gesamten Hover- oder Klick-Pfad auf Weiß */
.dropmenu li:hover > a::before,
.dropmenu li.clicked-active > a::before {
    border-right-color: #ffffff !important;
    opacity: 1 !important;
}


/* ============================================================
    SYNCHRONISIERTER OVERRIDE FÜR EBENE 3 (NACH LINKS)
   ============================================================ */
@media screen and (min-width: 769px) {
    .dropmenu ul.navigation li ul li ul {
        top: 0 !important;
        left: auto !important;     
        right: 100% !important;    
        margin-left: 0 !important;
        margin-right: 2px !important;
        border-top: none !important;
        border-right: 3px solid var(--nauti-blue) !important; 
        border-left: none !important;
    }

    .dropmenu ul.navigation li ul li:hover > ul,
    .dropmenu ul.navigation li ul li ul.is-open {
        visibility: visible !important;
        opacity: 1 !important;
        max-height: 800px !important;
        overflow: visible !important;
    }
}


/* ============================================================
    OPTIMIZED STICKY HEADER NAVIGATION (NautiApp Global - Perfect Alignment)
   ============================================================ */
header.container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    
    /* HIER IST DIE NEUE LINIE: 2 Pixel dick, durchgezogen, in deinem Nauti-Blau */
    border-bottom: 1px solid var(--nauti-blue);
    
    /* Setzt Abstände und die zentrierenden 85% für das äußere Element zurück */
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

/* Erzwingt, dass Logo und Menü exakt die 85%-Flucht des Contents einnehmen */
header.container .navbar {
    width: 85% !important; 
    max-width: 100%;
    margin: 0 auto !important; 
    padding: 10px 0; 
    box-sizing: border-box;
}

/* KORREKTUR: Nahtloser Übergang zur Header-Grafik ohne Spalt */
#header-image {
    margin-top: 95px !important; 
}

/* ============================================================
    MOBILE ANPASSUNG (Für Smartphones)
   ============================================================ */
@media screen and (max-width: 768px) {
    header.container .navbar {
        width: 92% !important; 
        padding: 15px 10px !important;
    }
    
    #header-image {
        margin-top: 75px !important; 
    }
}


#nauti-article .news-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 28px 0;
}

#nauti-article a.news-row {
    background: #ffffff;
    border: 2px solid rgba(2, 132, 199, 0.45);
    border-radius: 12px;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 95px 1fr 30px;
    gap: 16px;
    align-items: center;
    text-decoration: none !important;
    color: inherit !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

#nauti-article a.news-row:hover {
    transform: translateY(-3px);
    border-color: #0284c7;
    box-shadow: 0 10px 18px -8px rgba(2, 132, 199, 0.35);
    text-decoration: none !important;
}

#nauti-article .news-date {
    font-size: 0.84rem;
    color: #64748b;
    white-space: nowrap;
}

#nauti-article .news-main {
    min-width: 0;
}

#nauti-article .news-headline {
    font-size: 1.02rem;
    line-height: 1.35;
    font-weight: 700;
    color: #003366;
}

#nauti-article .news-teaser {
    margin-top: 4px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #475569;
}

#nauti-article .news-arrow {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    color: #0284c7;
    background: rgba(2, 132, 199, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 300;
}

#nauti-article a.news-row:hover .news-arrow {
    background: #0284c7;
    color: #ffffff;
    transform: translateX(3px);
}

@media screen and (max-width: 600px) {
    #nauti-article a.news-row {
        grid-template-columns: 1fr 26px;
        gap: 10px;
    }

    #nauti-article .news-date {
        grid-column: 1 / 2;
        font-size: 0.78rem;
    }

    #nauti-article .news-main {
        grid-column: 1 / 2;
    }

    #nauti-article .news-arrow {
        grid-column: 2 / 3;
        grid-row: 1 / span 2;
        width: 26px;
        height: 26px;
        font-size: 1.35rem;
    }
	#nauti-article .only-summary {
    display: none;
}
}