* {
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

html,
body {
    height: 100%;
    margin: 0;
    background-color: #222222;
}

.page {
    min-height: calc(100vh - 40px);
    margin: 20px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "site_header site_header"
        "site_nav site_nav"
        "site_main site_main"
        "site_footer site_footer";
    background: #ffffff;
    border: 1px solid rgb(0, 204, 255);
    box-shadow: 0px 1px 1px rgba(3, 7, 18, 0.02),
        0px 5px 4px rgba(3, 7, 18, 0.03),
        0px 12px 9px rgba(3, 7, 18, 0.05),
        0px 20px 15px rgba(3, 7, 18, 0.06),
        0px 32px 24px rgba(3, 7, 18, 0.08);

}

.site_header {
    grid-area: site_header;
    /* Use logo image as full-bleed header background */
    background-color: #000000;
    /* Fallback color while image loads */
    background-image: url("image/Logo.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
        background-attachment: scroll;
    color: #00303a;
    font-size: 28px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 220px;
    /* requested header height */
}

/* Brand: Logo + site title inside header */
.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    max-width: 1200px;
    /* constrain brand width */
    width: 100%;
}

.brand a {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.logo {
    display: block;
    width: 120px;
    height: auto;
}

.site_title {
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
    /* white title for contrast over image */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* subtle dark overlay to improve text contrast */
.site_header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18));
    pointer-events: none;
}

.site_nav {
    grid-area: site_nav;
    background-color: #f4f4f4;
    padding: 20px;
    /* optisch vom Header abtrennen */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    /* span across full width (grid area is set to cover both columns) */
    height: auto;
}

.site_nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    /* links nebeneinander */
    gap: 12px;
    align-items: center;
    justify-content: center;
    /* zentriert die Menüeinträge unter dem Header */
    flex-wrap: wrap;
}

.site_nav li+li {
    /* keep very small fallback spacing for older browsers, gap handles most spacing */
    margin-top: 0;
}

.site_nav a {
    color: #000000;
    text-decoration: none;
    display: inline-block;
    padding: 6px 8px;
}

.site_nav a:focus,
.site_nav a:hover {
    filter: drop-shadow(0 0 8px rgb(0, 204, 255));
}

/* Live Status Button */
.live-status-btn {
    background: #444;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.3s, box-shadow 0.3s;
}
.live-status-btn:hover,
.live-status-btn:focus { background:#333; box-shadow:0 0 0 2px rgba(0,204,255,0.3); }
.live-status-btn.live {
    background: linear-gradient(135deg,#ff1744,#d50000);
    color:#fff;
    font-weight:600;
    position: relative;
    animation: livePulse 1.4s ease-in-out infinite;
}
/* Footer container for live status */
.live-status-footer {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}
.live-status-icon {
    height: 18px;
    width: 18px;
    display: block;
}
.live-status-text { display:inline-block; }
@keyframes livePulse {
  0% { box-shadow:0 0 0 0 rgba(255,23,68,0.7); }
  70% { box-shadow:0 0 0 10px rgba(255,23,68,0); }
  100% { box-shadow:0 0 0 0 rgba(255,23,68,0); }
}

.site_main {
    grid-area: site_main;
    padding: 32px 20px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    display: flex;
    align-items: start;
    justify-content: center;
    /* Zentriert den Inhalt horizontal */
}

.site_main>article {
    width: 100%;
    max-width: 900px;
    /* Beschränkt Breite für besseren Lesefluss */
    background: #fff;
    padding: 24px;
}

.site_footer {
    grid-area: site_footer;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 12px 20px;
    font-size: 12px;
}

.social-link-list {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

    padding: 0;
    margin-top: 16px;
}

.link-icon {
    height: 24px;

}

.link-icon:hover {
    filter: drop-shadow(0 0 8px rgb(0, 204, 255))
}

/* Skip-link: standardmäßig versteckt, beim Fokussieren sichtbar */
.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    padding: 0.5rem 0.75rem;
    background: #00303a;
    color: #fff;
    border-radius: 4px;
    z-index: 1000;
}

/* Visually hidden utility (für Screenreader-only Texte) */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Welcome Content Styling */
.welcome-content {
    animation: fadeIn 0.8s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Article Header */
.article-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 3px solid #00ccff;
}

.welcome-title {
    font-size: 2.5rem;
    color: #00303a;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 204, 255, 0.1);
}

/* Sections */
.intro-section,
.motto-section,
.info-section,
.cta-section {
    margin-bottom: 40px;
}

.intro-text {
    font-size: 1.2rem;
    font-weight: 500;
    color: #333;
    line-height: 1.8;
}

/* Motto Section */
.motto-section {
    background: linear-gradient(135deg, #f4f4f4 0%, #e8f8ff 100%);
    padding: 30px;
    border-radius: 12px;
    border-left: 5px solid #00ccff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.motto-title {
    font-size: 1.5rem;
    color: #00303a;
    margin-top: 0;
    margin-bottom: 20px;
}

.motto-quote {
    margin: 20px 0;
    padding: 0;
    text-align: center;
}

.motto-quote p {
    font-size: 2rem;
    font-weight: bold;
    color: #00ccff;
    font-style: italic;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.motto-description {
    font-size: 1.1rem;
    color: #555;
    text-align: center;
    margin-top: 20px;
}

/* Highlight Text */
.highlight {
    background: linear-gradient(120deg, #00ccff 0%, #00e5ff 100%);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
}

/* CTA Section */
.cta-section {
    text-align: center;
    background: linear-gradient(135deg, #00303a 0%, #005566 100%);
    padding: 40px;
    border-radius: 12px;
    color: white;
}

.cta-text {
    font-size: 1.3rem;
    margin-bottom: 25px;
}

.cta-button {
    display: inline-block;
    background: linear-gradient(135deg, #00ccff 0%, #00e5ff 100%);
    color: #00303a;
    text-decoration: none;
    padding: 15px 40px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 204, 255, 0.4);
}

.cta-button:hover,
.cta-button:focus {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 204, 255, 0.6);
    background: linear-gradient(135deg, #00e5ff 0%, #00ccff 100%);
}

/* Info Section */
.info-section p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
}

/* Responsive Design */
@media (max-width: 768px) {
        .site_header {
            height: 180px;
            background-attachment: scroll;
            background-size: contain;
            background-position: center center;
        }
    
    .welcome-title {
        font-size: 2rem;
    }
    
    .motto-quote p {
        font-size: 1.5rem;
    }
    
    .cta-button {
        padding: 12px 30px;
        font-size: 1rem;
    }
    
    .motto-section,
    .cta-section {
        padding: 20px;
    }
}

/* ============================================
   About Page Styles
   ============================================ */

.about-content {
    animation: fadeIn 0.8s ease-in;
}

.page-title {
    font-size: 2.5rem;
    color: #00303a;
    margin: 0 0 10px 0;
    text-shadow: 2px 2px 4px rgba(0, 204, 255, 0.1);
}

.subtitle {
    font-size: 1.2rem;
    color: #666;
    font-style: italic;
    margin: 0;
}

/* Profile Card */
.profile-section {
    margin-bottom: 50px;
}

.profile-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e8f8ff 100%);
    padding: 35px;
    border-radius: 15px;
    border-left: 5px solid #00ccff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.section-title {
    font-size: 1.8rem;
    color: #00303a;
    margin-top: 0;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #00ccff;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.profile-item {
    display: flex;
    flex-direction: column;
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 204, 255, 0.2);
}

.profile-label {
    font-weight: bold;
    color: #00303a;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.profile-value {
    color: #333;
    font-size: 1.1rem;
}

/* Story Section */
.story-section {
    margin-bottom: 50px;
}

.story-content {
    background: white;
    padding: 30px;
    border-radius: 12px;
    border: 2px solid #f0f0f0;
    line-height: 1.8;
}

.story-content p {
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 20px;
}

.story-content p:last-child {
    margin-bottom: 0;
}

/* Values Section */
.values-section {
    margin-bottom: 50px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.value-card {
    background: white;
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.value-card:hover {
    transform: translateY(-5px);
    border-color: #00ccff;
    box-shadow: 0 6px 20px rgba(0, 204, 255, 0.3);
}

.value-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.value-card h4 {
    font-size: 1.3rem;
    color: #00303a;
    margin: 10px 0;
}

.value-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* About Page CTA Section */
.about-content .cta-section {
    text-align: center;
    background: linear-gradient(135deg, #00303a 0%, #005566 100%);
    padding: 40px;
    border-radius: 12px;
    color: white;
}

.about-content .cta-section h3 {
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 15px;
}

.about-content .cta-section p {
    font-size: 1.1rem;
    margin-bottom: 25px;
}

/* Responsive for About Page */
@media (max-width: 768px) {
    .page-title {
        font-size: 2rem;
    }
    
    .profile-card {
        padding: 20px;
    }
    
    .profile-grid {
        grid-template-columns: 1fr;
    }
    
    .values-grid {
        grid-template-columns: 1fr;
    }
    
    .story-content {
        padding: 20px;
    }
}

/* ============================================
   Clips Page Styles
   ============================================ */

.clips-content { animation: fadeIn 0.8s ease-in; }

.player-section { margin-bottom: 40px; }
.player-container {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    padding: 16px;
}

.clip-video {
    width: 100%;
    max-height: 70vh;
    background: #000;
    border-radius: 8px;
    display: block;
}

.twitch-embed-container {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.player-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
}

.btn {
    appearance: none;
    border: 2px solid #00ccff;
    background: transparent;
    color: #00303a;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.25s ease;
}

.btn:hover, .btn:focus { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,204,255,0.3); }
.btn-primary { background: linear-gradient(135deg, #00ccff 0%, #00e5ff 100%); color: #00303a; }

.now-playing { text-align: center; color: #555; margin: 12px 0 0; font-size: 0.95rem; }

.clips-list-section { margin-top: 32px; }

/* Dropdown Toggle Button */
.clips-dropdown-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #f4fdff 0%, #e8f8ff 100%);
    border: 2px solid #00ccff;
    border-radius: 8px;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    color: #00303a;
    transition: all 0.3s ease;
}

.clips-dropdown-toggle:hover {
    background: linear-gradient(135deg, #e8f8ff 0%, #d0f0ff 100%);
    box-shadow: 0 4px 10px rgba(0, 204, 255, 0.2);
}

.toggle-text { flex-grow: 1; text-align: left; }
.toggle-icon { 
    font-size: 1.2rem; 
    transition: transform 0.3s ease;
}

/* Clip List Container */
.clip-list-container {
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
    opacity: 1;
    margin-top: 15px;
}

.clip-list-container.collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

.clip-list { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.clip-chip {
    border: 1px solid #e0f7ff;
    background: #f4fdff;
    color: #00303a;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}
.clip-chip:hover { background: #e8fbff; border-color: #bfefff; }

.clips-hint {
    padding: 10px 15px;
    margin: 10px 0 0;
    font-size: 0.9rem;
    color: #666;
    background: #f9f9f9;
    border-radius: 6px;
}

@media (max-width: 768px) {
    .clip-video { max-height: 40vh; }
    .clips-dropdown-toggle { font-size: 1rem; padding: 12px 15px; }
    .clip-list-container { max-height: 400px; }
}

/* ============================================
   Impressum Page Styles
   ============================================ */

.impressum-content {
    animation: fadeIn 0.8s ease-in;
}

.impressum-section {
    margin-top: 40px;
}

.impressum-image-container {
    text-align: center;
    margin-bottom: 50px;
    padding: 30px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e8f8ff 100%);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.impressum-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.impressum-image:hover {
    transform: scale(1.02);
}

.impressum-info {
    background: white;
    padding: 35px;
    border-radius: 12px;
    border-left: 5px solid #00ccff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    line-height: 1.8;
}

.impressum-info h3 {
    font-size: 1.5rem;
    color: #00303a;
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #00ccff;
}

.impressum-info h3:first-child {
    margin-top: 0;
}

.impressum-info h4 {
    font-size: 1.2rem;
    color: #005566;
    margin-top: 25px;
    margin-bottom: 10px;
}

.impressum-info p {
    font-size: 1rem;
    color: #444;
    margin-bottom: 15px;
    text-align: justify;
}

/* Footer Link Styling */
.footer-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.95em;
}

.footer-link:hover,
.footer-link:focus {
    color: rgba(255, 255, 255, 0.95);
    background-color: rgba(0, 204, 255, 0.2);
    text-decoration: none;
}

/* Responsive for Impressum Page */
@media (max-width: 768px) {
    .impressum-image-container {
        padding: 20px;
    }
    
    .impressum-info {
        padding: 20px;
    }
    
    .impressum-info h3 {
        font-size: 1.3rem;
    }
    
    .impressum-info h4 {
        font-size: 1.1rem;
    }
}

/* ============================================
   Contact Page Styles
   ============================================ */

.contact-content {
    animation: fadeIn 0.8s ease-in;
}

.contact-intro {
    text-align: center;
    font-size: 1.15rem;
    color: #555;
    margin-bottom: 50px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e8f8ff 100%);
    border-radius: 12px;
}

/* Email Section */
.contact-email-section {
    margin-bottom: 50px;
}

.email-container {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.email-info {
    padding: 30px;
    font-size: 1.1rem;
    color: #444;
    line-height: 1.8;
    border-bottom: 2px solid #f0f0f0;
}

.email-image-container {
    text-align: center;
    padding: 40px 30px;
    background: linear-gradient(135deg, #00303a 0%, #005566 100%);
}

.email-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.email-image:hover {
    transform: scale(1.03);
}

/* Contact Methods Grid */
.contact-methods {
    margin-bottom: 50px;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.contact-card {
    background: white;
    padding: 30px 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-card:hover {
    transform: translateY(-5px);
    border-color: #00ccff;
    box-shadow: 0 6px 20px rgba(0, 204, 255, 0.3);
}

.contact-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-social-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.contact-card h4 {
    font-size: 1.3rem;
    color: #00303a;
    margin: 10px 0 15px 0;
}

.contact-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.contact-link {
    display: inline-block;
    background: linear-gradient(135deg, #00ccff 0%, #00e5ff 100%);
    color: #00303a;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0, 204, 255, 0.3);
}

.contact-link:hover,
.contact-link:focus {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 204, 255, 0.5);
    background: linear-gradient(135deg, #00e5ff 0%, #00ccff 100%);
}

/* Contact Note */
.contact-note {
    margin-top: 50px;
}

.note-box {
    background: linear-gradient(135deg, #fff8e1 0%, #ffe9a6 100%);
    padding: 30px;
    border-radius: 12px;
    border-left: 5px solid #ffc107;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.note-box h4 {
    font-size: 1.3rem;
    color: #00303a;
    margin-top: 0;
    margin-bottom: 15px;
}

.note-box p {
    color: #555;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 15px;
}

.note-box p:last-child {
    margin-bottom: 0;
}

/* Responsive for Contact Page */
@media (max-width: 768px) {
    .contact-intro {
        font-size: 1rem;
        padding: 15px;
    }
    
    .email-info {
        padding: 20px;
        font-size: 1rem;
    }
    
    .email-image-container {
        padding: 30px 20px;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .note-box {
        padding: 20px;
    }
}

/* ============================================
   Contact Page Styles
   ============================================ */

.contact-content {
    animation: fadeIn 0.8s ease-in;
}

.contact-intro {
    text-align: center;
    font-size: 1.15rem;
    color: #555;
    margin-bottom: 50px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e8f8ff 100%);
    border-radius: 12px;
}

.contact-email-section {
    margin-bottom: 50px;
}

.email-container {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.email-info {
    padding: 30px;
    font-size: 1.1rem;
    color: #444;
    line-height: 1.8;
    border-bottom: 2px solid #f0f0f0;
}

.email-image-container {
    text-align: center;
    padding: 40px 30px;
    background: linear-gradient(135deg, #00303a 0%, #005566 100%);
}

.email-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.email-image:hover {
    transform: scale(1.03);
}

.contact-methods {
    margin-bottom: 50px;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.contact-card {
    background: white;
    padding: 30px 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-card:hover {
    transform: translateY(-5px);
    border-color: #00ccff;
    box-shadow: 0 6px 20px rgba(0, 204, 255, 0.3);
}

.contact-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-social-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.contact-card h4 {
    font-size: 1.3rem;
    color: #00303a;
    margin: 10px 0 15px 0;
}

.contact-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.contact-link {
    display: inline-block;
    background: linear-gradient(135deg, #00ccff 0%, #00e5ff 100%);
    color: #00303a;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0, 204, 255, 0.3);
}

.contact-link:hover,
.contact-link:focus {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 204, 255, 0.5);
    background: linear-gradient(135deg, #00e5ff 0%, #00ccff 100%);
}

.contact-note {
    margin-top: 50px;
}

.note-box {
    background: linear-gradient(135deg, #fff8e1 0%, #ffe9a6 100%);
    padding: 30px;
    border-radius: 12px;
    border-left: 5px solid #ffc107;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.note-box h4 {
    font-size: 1.3rem;
    color: #00303a;
    margin-top: 0;
    margin-bottom: 15px;
}

.note-box p {
    color: #555;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 15px;
}

.note-box p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .contact-intro {
        font-size: 1rem;
        padding: 15px;
    }
    
    .email-info {
        padding: 20px;
        font-size: 1rem;
    }
    
    .email-image-container {
        padding: 30px 20px;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .note-box {
        padding: 20px;
    }
}

/* ============================================
   Schedule Page Styles
   ============================================ */

.schedule-content {
    animation: fadeIn 0.8s ease-in;
}

.schedule-intro {
    margin-bottom: 40px;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.schedule-day {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.schedule-day:hover {
    transform: translateY(-5px);
    border-color: #00ccff;
    box-shadow: 0 6px 20px rgba(0, 204, 255, 0.3);
}

.day-header {
    background: linear-gradient(135deg, #00303a 0%, #005566 100%);
    color: white;
    padding: 12px;
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
}

.day-content {
    padding: 20px 15px;
    text-align: center;
}

.stream-time {
    font-size: 0.95rem;
    color: #00ccff;
    font-weight: bold;
    margin: 0 0 8px 0;
}

.stream-type {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

.stream-type.off {
    color: #999;
    font-style: italic;
}

.schedule-notes {
    margin-top: 50px;
}

.schedule-info-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.schedule-info-list li {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    line-height: 1.6;
}

.schedule-info-list li:last-child {
    border-bottom: none;
}

.schedule-upcoming {
    margin-top: 50px;
}

.upcoming-events {
    margin-top: 30px;
}

.event-card {
    background: linear-gradient(135deg, #f4f4f4 0%, #e8f8ff 100%);
    padding: 30px;
    border-radius: 12px;
    border-left: 5px solid #00ccff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.event-date {
    display: inline-block;
    background: #00ccff;
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.event-card h4 {
    font-size: 1.5rem;
    color: #00303a;
    margin: 10px 0 15px 0;
}

.event-card p {
    color: #666;
    line-height: 1.6;
}

/* ============================================
   Community Page Styles
   ============================================ */

.community-content {
    animation: fadeIn 0.8s ease-in;
}

.community-intro {
    margin-bottom: 40px;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.discord-section {
    margin-top: 50px;
}

.discord-card {
    background: linear-gradient(135deg, #5865f2 0%, #7289da 100%);
    color: white;
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(88, 101, 242, 0.4);
}

.discord-icon {
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
}

.discord-card h4 {
    font-size: 2rem;
    margin: 20px 0 15px 0;
    color: white;
}

.discord-card p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.95);
}

.discord-btn {
    background: white !important;
    color: #5865f2 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.discord-btn:hover {
    background: #f0f0f0 !important;
    transform: translateY(-3px);
}

.discord-note {
    margin-top: 20px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}

.support-section {
    margin-top: 50px;
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.support-card {
    background: white;
    padding: 30px 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.support-card:hover {
    transform: translateY(-5px);
    border-color: #00ccff;
    box-shadow: 0 6px 20px rgba(0, 204, 255, 0.3);
}

.support-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.support-card h4 {
    font-size: 1.3rem;
    color: #00303a;
    margin: 10px 0 15px 0;
}

.support-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.support-link {
    display: inline-block;
    background: linear-gradient(135deg, #00ccff 0%, #00e5ff 100%);
    color: #00303a;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0, 204, 255, 0.3);
}

.support-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 204, 255, 0.5);
}

.community-events {
    margin-top: 50px;
}

.events-info {
    margin-top: 30px;
}

.events-info > p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
}

.event-types {
    display: grid;
    gap: 20px;
}

.event-type {
    background: linear-gradient(135deg, #f4f4f4 0%, #e8f8ff 100%);
    padding: 20px 25px;
    border-radius: 10px;
    border-left: 4px solid #00ccff;
    font-size: 1rem;
    line-height: 1.6;
}

.community-rules {
    margin-top: 50px;
}

.rules-box {
    background: linear-gradient(135deg, #fff8e1 0%, #ffe9a6 100%);
    padding: 30px;
    border-radius: 12px;
    border-left: 5px solid #ffc107;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.rules-box > p {
    font-size: 1.05rem;
    color: #555;
    margin-bottom: 20px;
}

.rules-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.rules-list li {
    padding: 10px 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

.rules-note {
    margin-top: 20px;
    font-size: 0.95rem;
    color: #666;
    font-style: italic;
}

@media (max-width: 768px) {
    .schedule-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .support-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Logo Intro Animation ===== */
.logo-intro {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #00303a 0%, #001a1f 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: introFadeIn 0.5s ease-in;
}

.logo-intro.fade-out {
    animation: introFadeOut 0.8s ease-out forwards;
}

.logo-intro-content {
    text-align: center;
    animation: logoScale 2s ease-in-out infinite;
}

.logo-intro-image {
    width: 300px;
    height: auto;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 30px rgba(0, 204, 255, 0.6));
    animation: logoPulse 2s ease-in-out infinite;
}

.logo-intro-text {
    font-size: 48px;
    font-weight: bold;
    color: #00ccff;
    text-transform: uppercase;
    letter-spacing: 8px;
    text-shadow: 0 0 20px rgba(0, 204, 255, 0.8),
                 0 0 40px rgba(0, 204, 255, 0.4);
    animation: textGlow 2s ease-in-out infinite;
}

@keyframes introFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes introFadeOut {
    to {
        opacity: 0;
        transform: scale(1.1);
    }
}

@keyframes logoPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 30px rgba(0, 204, 255, 0.6));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 50px rgba(0, 204, 255, 0.9));
    }
}

@keyframes logoScale {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes textGlow {
    0%, 100% {
        text-shadow: 0 0 20px rgba(0, 204, 255, 0.8),
                     0 0 40px rgba(0, 204, 255, 0.4);
    }
    50% {
        text-shadow: 0 0 30px rgba(0, 204, 255, 1),
                     0 0 60px rgba(0, 204, 255, 0.6),
                     0 0 80px rgba(0, 204, 255, 0.3);
    }
}

#mainContent {
    transition: opacity 0.8s ease-in;
}

/* Reduce animation on devices that prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .logo-intro-content,
    .logo-intro-image,
    .logo-intro-text {
        animation: none;
    }
    
    .logo-intro {
        animation: none;
    }
    
    .logo-intro.fade-out {
        animation: none;
        opacity: 0;
    }
}