@media (max-width: 768px) {
    /* --- 1. Überschriften & Navigation zentrieren --- */
    .frame-type-megooglecalendar_pi1 header,
    .frame-type-megooglecalendar_pi1 header h2 {
        text-align: center !important;
        width: 100% !important;
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .fc-toolbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }

    .fc-toolbar .fc-left,
    .fc-toolbar .fc-center,
    .fc-toolbar .fc-right {
        float: none !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* --- 2. Inneres Scrollen abschalten & Kalender nach unten verlängern --- */
    .tx-me-google-calendar,
    .fc-view-container {
        overflow: visible !important;
    }

    /* Überschreibt die von JS starr berechnete Höhe, die den Scrollbalken auslöst */
    .fc-scroller {
        height: auto !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }

    .fc-view-container table {
        width: 100% !important;
        table-layout: fixed !important;
    }

    /* --- 3. Wochentage per CSS auf 2 Buchstaben abkürzen & vertikal zentrieren --- */
    .fc-head .fc-day-header {
        font-size: 0 !important;
        padding: 0 !important;
        height: 40px !important; /* Definiert die Gesamthöhe der Kopfzeile */
        vertical-align: middle !important;
    }

    .fc-head .fc-day-header::before {
        font-size: 11px !important;
        display: block !important;
        text-align: center !important;
        line-height: 40px !important; /* Muss exakt der Höhe (height) entsprechen */
    }

    /* Mappt die neuen Bezeichnungen auf die Standard-Klassen der Extension */
    .fc-head .fc-mon::before { content: "Mo"; }
    .fc-head .fc-tue::before { content: "Di"; }
    .fc-head .fc-wed::before { content: "Mi"; }
    .fc-head .fc-thu::before { content: "Do"; }
    .fc-head .fc-fri::before { content: "Fr"; }
    .fc-head .fc-sat::before { content: "Sa"; }
    .fc-head .fc-sun::before { content: "So"; }

    /* --- 4. Tageszahlen & Events kompaktieren --- */
    .fc-day-number {
        float: none !important;
        text-align: center !important;
        font-size: 12px !important;
        padding: 4px !important;
        display: block !important;
    }

    .fc-event {
        font-size: 9px !important;
        line-height: 1.1 !important;
        padding: 2px 1px !important;
        margin: 1px !important;
        border-radius: 2px !important;
        text-align: center !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    .fc-time {
        display: none !important;
    }
}

/*
.fc-head-container.fc-widget-header {
background: #efefef;
display: list-item;

}
*/

/* =========================================
   1. GLOBALE REGELN (Desktop & Mobil)
   ========================================= */

/* 1. Schließt die unsichtbare Lücke (überschreibt Bootstrap/Theme-Margins) */
.fc-head-container,
.fc-head-container table {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Hintergrund & Abstände direkt auf die Tabellenzelle anwenden */
.fc-head .fc-day-header {
    background-color: #efefef !important;
    vertical-align: middle !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    line-height: 1.2 !important;
}

/* (Der alte Block .fc-head-container.fc-widget-header {...} kann komplett weg) */