/* Konfiguration der Hauptfarbe (ein modernes Blau, ähnlich dem Branding) */
:root {
    --color-primary: #1e3a8a; /* Dunkelblau für Branding */
    --color-accent: var(--youngbiz);
    --dibgiz: #4d85c5;
    --youngbiz: #cd508a;
    --hakwhite: #f7f7f7 /* Akzentfarbe: Helles, modernes Gold/Gelb */
}
.text-primary { 
    color: var(--color-primary); 
}
.bg-primary { 
    background-color: var(--color-primary); 
}
.text-accent { 
    color: var(--color-accent); 
}
.bg-accent { 
    background-color: var(--color-accent); 
}
.border-accent { 
    border-color: var(--color-accent); 
}
body {
    font-family: 'Inter', sans-serif;
    background-color: #f7f7f7; /* Sehr leichter Grauton */
}
.hero-background {
    /* Generischer Platzhalter-Hintergrund für eine Schule */
    background-image: url('assets/img/hintergrund_von_die_schule.JPG');
    background-size: cover;
    background-position: center;
}
.card-shadow {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease;
}
.card-shadow:hover {
    transform: translateY(-4px);
}

/* Semantic utility classes (replacing long Tailwind-like class lists) */
.site-header { 
    background: linear-gradient(
        90deg,
        #ff2f92 0%,
        #ff9fcf 40%,
        #ffffff 50%,
        #9ecbff 60%,
        #1e90ff 100%
    );
    box-shadow: 0 1px 4px rgba(0,0,0,0.08); 
    position: sticky; 
    top: 0; 
    z-index: 50; 
}
.header-inner { 
    max-width: 80rem; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 1rem 1.5rem; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.desktop-nav { 
    display: none; 
    gap: 2rem; 
    font-weight: 600; 
}
.mobile-btn { 
    color: var(--color-primary); 
    background: transparent; 
    border: none; 
}
.mobile-menu { 
    background: #ffffff; 
    border-top: 1px solid rgba(0,0,0,0.08); 
}

@media (min-width: 1024px) {
    .desktop-nav {
        display: flex; 
    }
    .mobile-btn { 
        display: none; 
    }
    .mobile-menu { 
        display: none !important; 
    }
}

.container { 
    max-width: 80rem; 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 1rem; 
    padding-right: 1rem; 
}
.site-main { 
    padding-top: 5rem; 
    padding-bottom: 5rem; 
    background-color: #f7f7f7; 
}
.hero-section { 
    color: #ffffff; 
    padding-top: 6rem; 
    padding-bottom: 8rem; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}
.features-section { 
    padding-top: 4rem; 
    padding-bottom: 6rem; 
    background-color: #ffffff; 
}
.three-grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 2.5rem; 
}
@media (min-width: 768px) { 
    .three-grid { 
        grid-template-columns: repeat(3, 1fr); 
    } 
}
.card { 
    padding: 2rem; 
    text-align: center; 
    border-radius: 0.75rem; 
    background-color: #f8fafc; 
}
.card-feature { 
    background-color: #f8fafc;
}

.grid-teachers { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 2.5rem; 
}
@media (min-width: 640px) {
    .grid-teachers { 
        grid-template-columns: repeat(2, 1fr); 
    } 
}
@media (min-width: 1024px) { 
    .grid-teachers { 
        grid-template-columns: repeat(4, 1fr); 
    } 
}

.events-list { 
    max-width: 48rem; 
    margin-left: auto; 
    margin-right: auto; 
}

.site-footer { 
    background-color: #1f2937; 
    color: #ffffff; 
    padding-top: 2rem; 
    padding-bottom: 2rem; 
}
.footer-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 2rem; 
}
@media (min-width: 768px) { 
    .footer-grid { 
        grid-template-columns: repeat(4, 1fr); 
    } 
}

/* Semantic classes moved from inline/utility-style classes */
.site-title { 
    font-size: 1.25rem; 
    font-weight: 800; 
    color: var(--color-primary); 
    text-decoration: none; 
}
.nav-link { 
    color: inherit; 
    font-weight: 600; 
    text-decoration: none; 
    padding: 0.25rem 0; 
}
.nav-link:hover { 
    color: var(--color-primary); 
}
.mobile-nav { 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
    padding: 1.25rem; 
    font-weight: 600; 
}
.mobile-nav a { 
    color: inherit; 
    text-decoration: none; 
}

.feature-icon { 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    width:44px; 
    height:44px; 
    background-color: var(--color-primary); 
    color: #fff; 
    border-radius: 9999px; 
    margin: 0 auto 1rem auto; 
}
.feature-title { 
    font-size: 1.125rem; 
    font-weight: 700; 
    color: #1f2937; 
    margin-bottom: 0.5rem; 
}
.feature-desc { 
    color: #4b5563; 
}

.program-title { 
    font-size: 1.5rem; 
    color: var(--color-primary); 
    font-weight:700; 
    margin-bottom: .5rem; 
}
.program-desc { 
    color: #4b5563; 
    margin-bottom: 1rem; 
}
.program-link { 
    display:inline-block; 
    margin-top: 1rem; 
    color: var(--color-primary); 
    font-weight: 700; 
    text-decoration: none; 
}
.program-link:hover { 
    color: var(--color-accent); 
}

.news-meta { 
    font-size: .875rem; 
    font-weight: 700; 
    color: var(--color-primary); 
    display:block; 
}
.news-title { 
    font-size: 1.125rem; 
    font-weight: 700; 
    color: #111827; 
    margin-top: .25rem; 
    margin-bottom: .5rem; 
}
.news-excerpt { 
    color: #4b5563; 
    font-size: .9rem; 
}
.news-img { 
    width:100%; 
    height:12rem; 
    object-fit:cover; 
    display:block; 
}

.footer-link { 
    color: #9ca3af; 
    text-decoration: none; 
}
.footer-link:hover { 
    color: #ffffff; 
}

/* YoungBiz: Stundentafel table styles */
.stundentafel-table { 
    margin-top: 1.5rem; 
}
.table-wrap { 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
}
.stundentafel { 
    width: 100%; 
    border-collapse: collapse; 
    background: #fff; 
    border-radius: 0.5rem; 
    overflow: hidden; 
}
.stundentafel thead th { 
    background: var(--youngbiz); 
    color: #fff; 
    font-weight: 700; 
    padding: .9rem 1rem; 
    text-align: left; 
}
.stundentafel tbody td { 
    padding: .9rem 1rem; 
    border-bottom: 1px solid #eef2f7; 
    vertical-align: top; 
}
.stundentafel tbody tr:nth-child(even) {
    background: #fbfdff; 
}
.stundentafel .text-center { 
    text-align: center; 
}

@media (min-width: 640px) {
    .stundentafel thead th {
        padding: 1rem 1.25rem; 
    }
    .stundentafel tbody td { 
        padding: 1rem 1.25rem; 
    }
}

/* DigBiz modifier: alternative header gradient and accenting */
.stundentafel--digbiz thead th {
    background: var(--dibgiz);
    color: #fff;
}
.stundentafel--digbiz tbody td { }









/* Support existing JS toggles */
.hidden { 
    display: none !important; 
}
.show { 
    display: block !important; 
}

/* Small, reusable buttons */
.btn-primary { 
    display: inline-block; 
    padding: .75rem 2.5rem; 
    font-weight: 700; 
    border-radius: 9999px; 
    background-color: var(--color-accent); 
    color: var(--color-primary); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.08); 
    transition: transform .25s ease; 
}
.btn-primary:hover { 
    transform: scale(1.03); 
}

/* small utility adjustments to match spacing expectations */
.text-center { 
    text-align: center; 
}
.rounded-xl { 
    border-radius: 0.75rem; 
}
.p-6 { 
    padding: 1.5rem; 
}
.p-8 { 
    padding: 2rem; 
}
.mb-4 { 
    margin-bottom: 1rem; 
}
.mt-2 { 
    margin-top: .5rem; 
}
.max-w-4xl { 
    max-width: 56rem; 
    margin-left: auto; 
    margin-right: auto; 
}

/* Teachers page specific styles */
.page-title { 
    font-size: 2.25rem; 
    font-weight: 700; 
    text-align: center; 
    color: var(--color-primary); 
    margin-bottom: 4rem;
}
.teacher-card { 
    background-color: #ffffff; 
    border-radius: 0.75rem; 
    padding: 1.5rem; 
    text-align: center; 
}
.avatar { 
    border-radius: 9999px; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 1rem; 
    max-width: 160px; 
    height: auto; 
}
.teacher-name { 
    font-size: 1.125rem; 
    font-weight: 700; 
    color: #1f2937; 
}
.teacher-badge { 
    display:inline-block; 
    margin-top: .5rem; 
    margin-bottom: .75rem; 
    padding: .25rem 1rem; 
    background-color: var(--color-primary); 
    color: #ffffff; 
    font-size: .875rem; 
    font-weight: 600; 
    border-radius: 9999px; 
}
.teacher-role { 
    color: #4b5563; 
}
.teacher-email { 
    display:block; 
    margin-top: .75rem; 
    font-size: .875rem; 
    font-weight: 500; 
    color: var(--color-primary); 
    transition: color .15s ease; 
}
.teacher-email:hover { 
    color: var(--color-accent);
}

/* Footer utilities */
.footer-grid { 
    display: grid; 
    grid-template-columns: repeat(2,1fr); 
    gap: 2rem; 
}
@media (min-width: 768px) { 
    .footer-grid { 
        grid-template-columns: repeat(4,1fr); 
    } 
}
.footer-note { 
    text-align:center; 
    font-size: .875rem; 
    color: #9ca3af; 
    margin-top: 2rem; 
    border-top: 1px solid rgba(55,65,81,0.5); 
    padding-top: 1rem; 
}

/* Page utilities used on content pages like Impressum */
.narrow-container { 
    max-width: 48rem; 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 1rem; 
    padding-right: 1rem; 
}
.page-heading { 
    font-size: 2.25rem; 
    font-weight: 700; 
    color: var(--color-primary); 
    margin-bottom: 1.5rem; 
}
.muted { 
    color: #374151; 
    margin-bottom: 1rem; 
}
.muted-small { 
    color: #4b5563; 
    font-size: .875rem; 
}

/* Contact / Form utilities */
.form-container { 
    max-width: 36rem; 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 1rem; 
    padding-right: 1rem; 
}
.contact-form { 
    background-color: #ffffff;
    padding: 2rem; 
    border-radius: 0.75rem; 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); 
    display: block;
    margin: 0 auto;
}

.form-input { 
    width: 100%; 
    padding: .75rem; 
    border: 1px solid #d1d5db;
    border-radius: .5rem; 
    font-size: 1rem; 
}
.form-input:focus { 
    outline: 2px solid rgba(30,58,138,0.08); 
    box-shadow: 0 0 0 3px rgba(30,58,138,0.06); 
}
.btn-full { 
    width: 100%; 
    padding: .75rem; 
    border-radius: .5rem; 
    font-weight: 700; 
    border: none; 
    cursor: pointer; 
}
.btn-accent { 
    background-color: var(--color-accent); 
    color: var(--color-primary); 
}
.btn-accent:hover { 
    background-color: #eb3ac2; 
}

/* Events specific styles */
.events-list { 
    max-width: 48rem; 
    margin-left: auto; 
    margin-right: auto; 
    display: grid; 
    gap: 1.5rem; 
}
.event-card { 
    padding: 1.5rem; 
    background-color: #f8fafc; 
    border-radius: 0.75rem; 
}
.event-title { 
    font-size: 1.125rem; 
    font-weight: 700; 
    color: #1f2937; 
    margin-bottom: 0.5rem; 
}
.event-date { 
    color: #4b5563; 
}

.page-heading { 
    text-align: center; 
}

/* Index page: hero, features, programs and news */
.hero { 
    color: #ffffff; 
    padding-top: 6rem; 
    padding-bottom: 8rem; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
}
.hero-inner { 
    text-align: center; 
    background-color: rgba(0,0,0,0.45); 
    padding: 2.5rem; 
    border-radius: 0.75rem; 
    max-width: 56rem; 
    margin: 1.5rem; 
}
.hero-heading { 
    font-size: 3rem; 
    font-weight: 800; 
    margin-bottom: .75rem; 
    line-height: 1.05; 
}
@media (min-width:768px) {
    .hero-heading { 
        font-size: 4rem; 
    } 
}
.hero-sub {
    font-size: 1.125rem; 
    font-weight: 300; 
    margin-bottom: 1.5rem; 
    max-width: 40rem; 
    margin-left:auto; 
    margin-right:auto; 
}
.cta-btn { 
    display:inline-block; 
    padding: 1rem 2.5rem; 
    font-size: 1.125rem; 
    font-weight:700; 
    background-color: var(--color-accent); 
    color: var(--color-primary); 
    border-radius: 9999px; 
    box-shadow: 0 12px 30px rgba(0,0,0,0.12); 
    transition: transform .25s ease, background-color .15s ease; 
}
.cta-btn:hover { 
    transform: scale(1.03); 
    background-color: #ff00aa; 
}

.features-grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 2.5rem; 
}
@media (min-width: 768px) { 
    .features-grid { 
        grid-template-columns: repeat(3, 1fr); 
    } 
}
.feature-card { 
    padding: 2rem; 
    text-align:center; 
    border-radius: 0.75rem; 
    background-color: #f8fafc; 
}
.feature-icon { 
    display:inline-block; 
    margin-bottom: 1rem; 
    padding: .75rem; 
    background-color: var(--color-primary); 
    color: #fff; 
    border-radius: 9999px; 
}
.feature-title { 
    font-size: 1.125rem; 
    font-weight: 700; 
    color: #1f2937; 
    margin-bottom: .5rem; 
}
.feature-desc { 
    color: #4b5563; 
}

.programs-row { 
    display: flex; 
    flex-direction: column; 
    gap: 1.5rem; 
}
@media (min-width: 768px) { 
    .programs-row { 
        flex-direction: row; 
    } 
}
.program-card { 
    flex:1; 
    background-color: #ffffff; 
    border-radius: 0.75rem; 
    overflow: hidden; 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08);
}
.program-card:hover { 
    transform: translateY(-4px); 
    transition: transform .25s ease; 
}
.program-img { 
    width:100%; 
    height: 16rem; 
    object-fit: cover; 
    display:block; 
}
.program-content { 
    padding: 2rem; 
}
.program-title { 
    font-size: 1.5rem; 
    color: var(--color-primary); 
    margin-bottom: .75rem; 
}
.program-desc { 
    color: #4b5563; 
    margin-bottom: 1rem; 
}

.news-grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 2rem; 
}
@media (min-width: 640px) { 
    .news-grid {
        grid-template-columns: repeat(2, 1fr); 
    } 
}
@media (min-width: 1024px) { 
    .news-grid { 
        grid-template-columns: repeat(3, 1fr); 
    } 
}
.news-card { 
    background-color: #f8fafc; 
    border-radius: 0.75rem; 
    overflow: hidden; 
}
.news-img { 
    width: 100%; 
    height: 12rem; 
    object-fit: cover; 
    display:block;
}
.news-meta { 
    font-size: .875rem; 
    font-weight: 600; 
    color: var(--color-primary); 
}
.news-title { 
    font-size: 1.125rem; 
    font-weight: 700; 
    color: #111827; 
    margin-top: .25rem; 
    margin-bottom: .5rem; 
}
.news-excerpt { 
    color: #4b5563; 
    font-size: .9rem; 
}

.cta-section { 
    background-color: var(--color-primary); 
    color: #ffffff; 
    padding: 4rem 0; 
    text-align: center; 
}
.cta-heading { 
    font-size: 1.75rem; 
    font-weight: 700; 
    margin-bottom: .5rem; 
}
.cta-sub { 
    font-size: 1.125rem; 
    font-weight: 300; 
    margin-bottom: 1rem;
}
.cta-button { 
    display:inline-block; 
    padding: .9rem 2rem; 
    border-radius: 9999px; 
    font-weight: 700; 
    background-color: var(--color-accent); 
    color: var(--color-primary); 
}
.cta-secondary { 
    display:inline-block; 
    padding: .9rem 2rem; 
    border-radius: 9999px; 
    font-weight: 700; 
    color: #ffffff; 
    border: 2px solid #ffffff; 
    background: #1e3a8a; 
}



/* Generic section utilities */
.section { 
    margin-bottom: 4rem; 
}
.section-title { 
    font-size: 1.875rem; 
    font-weight: 700; 
    color: #1f2937; 
    margin-bottom: 1.5rem; 
}

/* Responsive 1/2/3 column grid (used for Vertreter lists) */
.responsive-3grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 2rem; 
}
@media (min-width: 640px) { 
    .responsive-3grid { 
        grid-template-columns: repeat(2, 1fr); 
    } 
}
@media (min-width: 1024px) { 
    .responsive-3grid { 
        grid-template-columns: repeat(3, 1fr); 
    } 
}

/* Simple info card used across Vertreter sections */
.info-card { 
    background-color: #ffffff; 
    padding: 1.5rem; 
    border-radius: 0.75rem; 
}

/* Add a small circular placeholder image next to the card content */
.info-card { 
    display: flex; 
    align-items: center; 
    gap: 1rem; 
}
/*.info-card::before { 
    content: ""; 
    width: 64px; 
    height: 64px; 
    border-radius: 9999px; 
    flex: 0 0 64px; 
    background-image: url('https://placehold.co/80x80?text=Foto'); 
    background-size: cover; 
    background-position: center; 
}*/
.info-card h3, .info-card p { 
    margin: 0; 
}
.info-card img {
    content: ""; 
    width: 64px; 
    height: 64px; 
    border-radius: 9999px; 
    flex: 0 0 64px; 
    background-size: cover; 
    background-position: center; 
}
.footer-banner {
    width: 100%;
}

.aktuell {
    font-weight: bold;
    text-decoration: underline;
    color: var(--color-primary);
}

.left-sticky-logo {
    position: fixed;
    top: 10px;
    left: 50px;
    width: 100px;
    height: auto;
    z-index: 1000;
}
.right-sticky-logo {
    position: fixed;
    top: 10px;
    right: 50px;
    width: 100px;
    height: auto;
    z-index: 1000;
}
@media (max-width: 640px) {
    .left-sticky-logo, .right-sticky-logo {
        display: none;
    }
}
/* Dropdown Desktop */
.nav-dropdown {
    position: relative;
    padding: 0.25rem 0;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    min-width: 200px;
    padding: 0.5rem 0;
    display: none;
    z-index: 100;
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: #1f2937;
    font-weight: 600;
}

.dropdown-menu a:hover {
    background-color: #f1f5f9;
    color: var(--color-primary);
}

/* Hover-Logik Desktop */
.nav-dropdown:hover .dropdown-menu {
    display: block;
}

/* Mobile Dropdown */
.mobile-dropdown-btn {
    background: none;
    border: none;
    font-weight: 700;
    text-align: left;
    padding: 0.5rem 0;
    cursor: pointer;
}

.mobile-dropdown a {
    display: block;
    padding: 0.5rem 0 0.5rem 1rem;
    text-decoration: none;
    font-weight: 600;
}
.mobile-menu.hidden {
    display: none !important;
}