/* ===================================================================
   Kalender-Stile – unveraendert aus Style.css uebernommen.

   Diese Datei wird erzeugt, nicht von Hand gepflegt. Sie enthaelt
   ausschliesslich die Regeln des Buchungskalenders, damit der
   die Seite den funktionierenden Kalender einbinden kann,
   ohne das vollstaendige alte Stylesheet zu laden.

   Quelle : Style.css
   Regeln : 39 (davon in 2 Media-Bloecken)
   =================================================================== */
.calendar-jump-btn {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #990000;
    text-decoration: none;
    cursor: pointer;
    padding: 8px 16px;
    border: 1px solid rgba(153, 0, 0, 0.2);
    border-radius: 6px;
    transition: all 0.2s ease;
    background: transparent;
    margin-top: 16px;
}

.calendar-jump-btn:hover {
    background-color: #990000;
    color: #fff;
    border-color: #990000;
}

/* Certification Section */

/* ====================================
   VISUAL CALENDAR MODULE (PREMIUM)
==================================== */
.visual-calendar-section {
    max-width: 1600px;
    margin: 80px auto;
    font-family: 'Inter', sans-serif;
    padding: 0 64px;
    position: relative;
}

.calendar-section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 48px;
    /* Larger title */
    color: #990000;
    margin: 0;
    letter-spacing: -0.5px;
}

.cal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    /* More spacing */
    flex-wrap: wrap;
    gap: 20px;
}

.module-select {
    padding: 10px 20px;
    border-radius: 99px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    outline: none;
    transition: all 0.2s;
    appearance: none;
    /* Custom arrow if desired, or keep native for simplicity */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 10px;
    padding-right: 40px;
}

.module-select:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
}

.months-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
}

.cal-nav-btn {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    color: #444;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-top: 140px;
    /* Center partially relative to cards */
}

.cal-nav-btn:hover {
    color: #990000;
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(153, 0, 0, 0.15);
    border-color: rgba(153, 0, 0, 0.1);
}

.dual-month-container {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
    perspective: 1000px;
}

.month-card {
    background: #fff;
    /* Removed border */
    border-radius: 24px;
    /* More rounded */
    padding: 32px 24px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08);
    /* Premium soft shadow */
    width: 480px;
    /* Increased to 480px */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* ... existing code ... */

.event-label {
    font-size: 11px;
    font-weight: 800;
    margin-top: 2px;
    line-height: 1;
}

.event-label.part-a {
    color: #000088;
}

.event-label.part-b {
    color: #990000;
}

.month-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.12);
}

.month-header {
    text-align: center;
    font-weight: 700;
    margin-bottom: 24px;
    color: #222;
    font-size: 18px;
    letter-spacing: 0.5px;
}

.weekdays-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    /* More space between days */
}

.day-cell {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Centered content */
    padding-top: 0;
    /* No padding needed */
    font-size: 14px;
    font-weight: 500;
    color: #333;
    border-radius: 12px;
    /* Softer square/circle hybrid */
    cursor: default;
    position: relative;
    transition: all 0.2s ease;
}

.day-cell.empty {
    pointer-events: none;
}

.day-cell.has-event {
    cursor: pointer;
    background-color: transparent;
    /* Clean bg, indicator handles it */
    color: #000;
    font-weight: 600;
}

.day-cell.has-event:hover {
    background-color: #f8f8f8;
    transform: scale(1.1);
}

.day-cell.text-part-a {
    color: #000088;
    font-weight: 800;
    font-size: 16px;
}

.day-cell.text-part-b {
    color: #990000;
    font-weight: 800;
    font-size: 16px;
}

.day-cell.text-part-mixed {
    color: #444;
    font-weight: 800;
}

/* Fallback for mixed */


.day-number {
    z-index: 1;
}

/* Event Details Panel (Modal-like) */
/* Event Details Tooltip (Dynamic Position) */
/* Event Details Tooltip (Dynamic Position) */
.event-details-panel {
    position: fixed;
    /* Fixed relative to viewport */
    top: 0;
    left: 0;
    /* Default, set by JS */
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
    z-index: 20000;
    /* Extremely high z-index */
    width: 320px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    text-align: left;
}

.hidden {
    display: none !important;
}

.event-details-panel.visible {
    opacity: 1;
    pointer-events: all;
    /* Transform handled by JS for centering, e.g. translate(-50%, -100%) */
}

.event-details-panel h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 8px;
    color: #111;
}

@media (max-width: 768px) {
  .dual-month-container {
        flex-direction: column;
        align-items: center;
    }
  .month-card {
        width: 100%;
        max-width: 340px;
    }
  .cal-nav-btn {
        margin-top: 20px;
    }
}

/* ====================================
   MOBILE CALENDAR WIDTH FIX
==================================== */
@media (max-width: 900px) {

    /* Force wrapper to not overflow */
    .visual-calendar-section {
        overflow-x: hidden;
        padding: 0 10px;
        /* Reduced padding */
        width: 100%;
        box-sizing: border-box;
    }

    .months-wrapper {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

    /* Force card to stay within bounds */
    .month-card {
        width: 100% !important;
        min-width: 0 !important;
        /* Prevent flex item from staying large */
        max-width: 100% !important;
        margin: 0 !important;
        padding: 20px 10px !important;
        /* Reduce padding inside card */
        box-sizing: border-box;
    }

    /* Ensure flex container doesn't fight the width */
    .dual-month-container {
        width: 100%;
        max-width: 100%;
    }
}

/* ====================================
   HERO & CALENDAR REFINEMENTS
==================================== */

/* --- 1. Hero Title Position Fix --- */
/* Default Desktop Behavior (matched previous inline style) */
.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
    text-align: center;
}

/* --- 2. Mobile Calendar Refinements --- */
@media (max-width: 900px) {

    /* Show only FIRST month */
    .dual-month-container .month-card:nth-child(2) {
        display: none !important;
    }

    /* Adjust Wrapper for Button Positioning */
    .months-wrapper {
        position: relative;
        padding-top: 60px;
        /* Space for buttons */
        padding-bottom: 20px;
    }

    /* Absolute Position Buttons */
    .cal-nav-btn {
        position: absolute;
        top: 0;
        z-index: 10;
        margin-top: 0;
        background: transparent;
        /* Cleaner look */
        box-shadow: none;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .cal-nav-btn.prev {
        left: calc(50% - 150px);
        /* Adjust spacing from center */
    }

    .cal-nav-btn.next {
        right: calc(50% - 150px);
    }

    /* Ensure title visibility/centering if we have phantom space */
}

@media (max-width: 400px) {
  /* Tighter spacing for small screens */
    .cal-nav-btn.prev {
        left: 10px;
    }
  .cal-nav-btn.next {
        right: 10px;
    }
}


/* ===================================================================
   Nachtrag: Regeln des Terminfensters

   Diese Klassen tragen kein "cal" oder "event" im Namen und fielen
   deshalb durch das Suchmuster der ersten Extraktion. Ohne sie
   verlaeren die Schaltflaechen im Terminfenster ihre Gestaltung.
   Unveraendert aus Style.css uebernommen.
   =================================================================== */
/* Hide Close Button for Tooltip Mode */
.close-details {
    display: none;
}

.close-details:hover {
    background: #e0e0e0;
    color: #333;
}

.evt-meta {
    font-size: 15px;
    color: #666;
    margin-bottom: 24px;
    font-weight: 500;
    display: flex;
    gap: 12px;
    align-items: center;
}

.evt-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
}

.btn-book {
    background: linear-gradient(135deg, #990000 0%, #770000 100%);
    color: #fff;
    padding: 14px 24px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(153, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    letter-spacing: 0.5px;
}

.btn-book:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(153, 0, 0, 0.4);
}