/* Add this new style to your existing style.css file */
.calvacation {
    background-color: #fee2e2; /* Light red for vacation days (Tailwind bg-red-50) */
    font-weight: 600; /* Semi-bold text */
    color: #475569; /* Tailwind text-slate-600 */
    border: 1px solid #f1f5f9; /* Tailwind border-slate-100 */
    position: relative; /* Needed for pseudo-elements if you want to add an icon/tooltip */
}

/* Optional: Add a small icon or indicator for vacation days (removed per request for "leichte rot") */
/* .calvacation::after {
    content: '✈️';
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.7em;
    opacity: 0.7;
} */

/* Existing styles below (no changes needed for these) */

/* Import Inter font from Google Fonts */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); */

/* Define @font-face rules for locally hosted Inter font */

/* Inter Thin/Light (300) */
@font-face {
    font-family: 'Inter';
    src: url('./fonts/inter-v19-latin-300.woff2') format('woff2'),
         url('./fonts/inter-v19-latin-300.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap; /* Improve perceived performance by displaying fallback text */
}

/* Inter Regular (400) */
@font-face {
    font-family: 'Inter';
    src: url('./fonts/inter-v19-latin-400.woff2') format('woff2'), /* Please verify this filename */
         url('./fonts/inter-v19-latin-400.woff') format('woff');  /* Please verify this filename */
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Inter Medium (500) */
@font-face {
    font-family: 'Inter';
    src: url('./fonts/inter-v19-latin-500.woff2') format('woff2'), /* Please verify this filename */
         url('./fonts/inter-v19-latin-500.woff') format('woff');  /* Please verify this filename */
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Inter SemiBold (600) */
@font-face {
    font-family: 'Inter';
    src: url('./fonts/inter-v19-latin-600.woff2') format('woff2'), /* Please verify this filename */
         url('./fonts/inter-v19-latin-600.woff') format('woff');  /* Please verify this filename */
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Inter Bold (700) */
@font-face {
    font-family: 'Inter';
    src: url('./fonts/inter-v19-latin-700.woff2') format('woff2'), /* Please verify this filename */
         url('./fonts/inter-v19-latin-700.woff') format('woff');  /* Please verify this filename */
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* Apply Inter font globally, if not already set by Tailwind config */
body {
    font-family: 'Inter', sans-serif;
}

/* Base Styles and Resets (Optional, as Tailwind provides many resets) */
/* This ensures a smooth box-sizing experience across all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Remove default margin from body */
body {
    margin: 0;
}

/* Mobile Navigation Toggle (Hamburger Icon) */
/* This hides the menu by default on small screens */
#main-nav {
    display: none; /* Hidden by default on mobile */
}

/* When the checkbox is checked, display the navigation menu */
/* Corrected selector: target #main-nav (sibling) when #menu-toggle is checked */
#menu-toggle:checked ~ #main-nav {
    display: flex; /* Show the menu */
    flex-direction: column; /* Stack items vertically */
    /* Positioning from Tailwind classes in HTML: absolute top-full left-0 right-0 */
    /* Center the absolutely positioned menu */
    left: 50%;
    transform: translateX(-50%);
    max-width: 300px; /* Limit width */
    width: calc(100% - 2rem); /* Ensure it doesn't overflow on very small screens, 1rem padding each side */
    background-color: #1e3a8a; /* Darker blue background */
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 40; /* Needs to be lower than the header's z-index (z-50) so the toggle button is clickable to close */
}

/* Styles for navigation links within the mobile menu */
#main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0 auto; /* Center the list within its parent */
    width: 100%; /* Take full width of the contained dropdown */
}

#main-nav ul li {
    margin: 0;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separator */
}

#main-nav ul li:last-child {
    border-bottom: none;
}

#main-nav ul li a,
#main-nav ul li summary {
    display: block;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: white;
    transition: background-color 0.2s ease;
}

#main-nav ul li a:hover,
#main-nav ul li summary:hover {
    background-color: #2544a0; /* Slightly lighter on hover */
}

/* Dropdown menu for nested items (e.g., "Informationen") */
#main-nav details[open] summary {
    background-color: #2544a0; /* Highlight when open */
}

#main-nav details ul {
    background-color: #172a6b; /* Even darker for sub-menu */
    padding: 0.25rem 0;
}

/* Increased indentation for sub-menu items on mobile */
#main-nav details ul li a {
    padding-left: 3rem; /* Increased indent for sub-menu items */
    font-size: 0.95rem;
}

/* Desktop Navigation */
@media (min-width: 1024px) {
    /* Hide the mobile toggle on desktop */
    label[for="menu-toggle"] {
        display: none;
    }

    /* Display main nav as flex row on desktop */
    #main-nav {
        display: flex;
        flex-direction: row;
        position: static; /* Reset position */
        background-color: transparent; /* Reset background */
        box-shadow: none; /* Remove shadow */
        transform: none; /* Reset transform */
        max-width: none; /* Reset max-width */
        width: auto; /* Reset width */
        z-index: auto; /* Reset z-index */
    }

    #main-nav ul {
        flex-direction: row;
        align-items: center;
        margin: 0; /* Reset margin */
    }

    #main-nav ul li {
        border-bottom: none; /* No separator on desktop */
    }

    #main-nav ul li a,
    #main-nav ul li summary {
        padding: 0.5rem 0.75rem; /* Adjust padding for desktop */
    }

    #main-nav details ul {
        position: absolute; /* Allow dropdown to float */
        z-index: 60; /* Ensure it's above other content */
        min-width: 200px;
        background-color: #1e3a8a; /* Use the mobile dropdown background for desktop dropdown */
        border-radius: 0.375rem; /* rounded-md */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
        padding: 0.5rem 0;
        top: calc(100% + 0.5rem); /* Position below the parent item */
        display: none; /* Hidden by default */
        left: unset; /* Remove left/right centering for desktop */
        transform: none; /* Remove transform for desktop */
        width: auto; /* Auto width for desktop dropdown */
    }

    #main-nav details[open] ul {
        display: block; /* Show when parent is open */
    }

    #main-nav details ul li a {
        padding-left: 1rem; /* Reset indent for desktop dropdowns */
        font-size: 1rem; /* Reset font size */
    }
}


/* Calendar Styles - Modernized version of existing classes */
.caltab {
    font-family: 'Inter', sans-serif;
    border-collapse: collapse;
    width: 100%;
    background-color: #f8fafc; /* Tailwind: bg-slate-50 */
    border-radius: 0.5rem; /* Tailwind: rounded-lg */
    overflow: hidden; /* Ensures rounded corners apply */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Tailwind: shadow-sm */
    color: #334155; /* Tailwind: text-slate-800 */
}

.caltab1 {
    width: 100%;
    border-collapse: collapse;
}

.caltab1 td {
    padding: 0.75rem;
    text-align: center;
    vertical-align: middle;
}

.caltz {
    font-size: 1.125rem; /* Tailwind: text-lg */
    font-weight: 600; /* Tailwind: font-semibold */
    color: #1e3a8a; /* Tailwind: text-blue-800 */
}

.callink {
    color: #3b82f6; /* Tailwind: text-blue-500 */
    text-decoration: none;
    font-weight: 700; /* Tailwind: font-bold */
    transition: color 0.2s ease;
}

.callink:hover {
    color: #2563eb; /* Tailwind: text-blue-600 */
    text-decoration: underline;
}

.caltab2 {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}

.calwt {
    background-color: #e2e8f0; /* Tailwind: bg-slate-200 */
    font-weight: 500; /* Tailwind: font-medium */
    padding: 0.5rem;
    text-align: center;
    border-radius: 0.25rem; /* Tailwind: rounded */
    color: #475569; /* Tailwind: text-slate-600 */
}

.calat {
    background-color: #ffffff; /* Reverted to white for standard days */
    padding: 0.75rem;
    text-align: center;
    border-radius: 0.375rem; /* Tailwind: rounded-md */
    border: 1px solid #f1f5f9; /* Tailwind: border-slate-100 */
    color: #475569; /* Tailwind: text-slate-600 */
    transition: background-color 0.2s ease;
}

.calat:hover {
    background-color: #eff6ff; /* Reverted to light blue on hover for standard days */
}

.calht { /* Heute - Today */
    background-color: #bfdbfe; /* Tailwind: bg-blue-200 */
    font-weight: 600; /* Tailwind: font-semibold */
    color: #1e3a8a; /* Tailwind: text-blue-800 */
    border: 1px solid #93c5fd; /* Tailwind: border-blue-300 */
}

.calhe { /* Heute Wochenende - Today Weekend */
    background-color: #fef08a; /* Tailwind: bg-yellow-200 */
    font-weight: 600; /* Tailwind: font-semibold */
    color: #b45309; /* Tailwind: text-amber-800 */
    border: 1px solid #fcd34d; /* Tailwind: border-amber-300 */
}

.calwe { /* Wochenende - Weekend */
    background-color: #fbcfe8; /* Tailwind: bg-pink-200 */
    color: #9d174d; /* Tailwind: text-rose-800 */
}