/* ═══════════════════════════════════════════════════════════════════
 * kalender-de-overrides.css
 * DE-spezifische Anpassungen ueber dem FR-Port von calendar-year.css.
 *
 * Grund: Die DE-Variante zeigt im Jahres-Modus eine zusaetzliche
 * KW-Spalte (Kalenderwoche) links neben jedem Mini-Monat. Der FR-Port
 * setzt jedoch fest grid-template-columns: repeat(7, 1fr), was die
 * KW-Zelle in eine 8. Spalte ueberlaufen liesse und das Raster
 * zerschiesst. Diese Datei fuegt die fehlenden Regeln hinzu, ohne
 * irgendeine FR-Regel zu aendern.
 *
 * Pattern-Referenz: contadordeprazo /quantas-semanas-tem (KW als
 * gefuellte blaue Pille links jeder Zeile, 56px Spalte). Im Jahres-
 * Modus uebernehmen wir die gefuellte Pillen-Optik bei 44px Spalte
 * (Kompromiss zwischen Lesbarkeit und Mini-Monats-Breite); im Monats-
 * Detail erbt die KW-Pille volle 38px Min-Hoehe und gefuellte Optik.
 *
 * 2026-05-09 (FX2 re-port): KW-Spalte 28px -> 44px, gefuelltes Pill
 * statt transparent rgba(0.10), Layout-Cap 1200px -> 1280px im Jahres-
 * Modus damit 3 Mini-Monate-Spalten genug Atmung haben (CDP-Pattern).
 *
 * Kein FR-Aequivalent: dieser Override existiert NUR auf werktagerechner.de.
 * ═══════════════════════════════════════════════════════════════════ */

/* ========================================================================
   1. JAHRES-MODUS: Kalender-Grid mit KW-Spalte (8 Spalten)
   ------------------------------------------------------------------------
   Bump 2026-05-09 (FX2 re-port): KW-Spalte von 28px auf 44px erweitert.
   Begruendung:
     - 28px war zu schmal — KW-Pille rendert ohne Atem, faellt visuell ab,
       und der Kontrast zur breiten contadordeprazo /quantas-semanas-tem
       Layoutvorlage (56px) wirkt zu eng.
     - 44px ist ein Kompromiss: in Mini-Monaten passt 7 Tageszellen + KW
       weiterhin auf 320px Mindestbreite ohne dass die Tageszellen unter
       30px fallen (Tap-Target-Schwelle).
     - Fuer das Monats-Detail (mois.php) hat der Override unten weiterhin
       38-46px (volle Card, 7 Tage entspannter).
   ======================================================================== */
/* Default (Mobile-first): 8 Spalten = KW (44px) + 7 Tage. */
.calendar-grid.calendar-grid--with-weeks {
    display: grid;
    grid-template-columns: 44px repeat(7, 1fr);
    column-gap: 4px;
    row-gap: 4px;
}

body.cal-year-wide #annual-calendar-container .calendar-grid.calendar-grid--with-weeks {
    grid-template-columns: 44px repeat(7, 1fr) !important;
    text-align: center;
    font-size: 0.92em;
    margin-bottom: 10px;
    padding: 0;
    background: transparent;
    border: none;
    font-variant-numeric: tabular-nums;
    grid-auto-rows: auto;
}

/* Header-Zelle "KW" (oben links, ueber den Wochennummern). */
body.cal-year-wide #annual-calendar-container .calendar-header-day.calendar-week-header {
    font-weight: 800;
    color: #0071e3;
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0 0 6px;
    background: transparent;
    position: static;
    border-right: 1.5px solid rgba(0, 113, 227, 0.22);
    margin-right: 2px;
    align-self: end;
}

/* KW-Zelle pro Woche (Pille blau, CDP-Pattern: gefuelltes Pill statt
   transparentem Hintergrund — visuell deutlich praesenter). */
body.cal-year-wide #annual-calendar-container .calendar-week-cell {
    background: #0071e3;
    color: #ffffff;
    border-radius: 6px;
    padding: 2px 0;
    text-align: center;
    font-weight: 700;
    font-size: 0.78em;
    line-height: 1.2;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
    cursor: default;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0, 113, 227, 0.25);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

body.cal-year-wide #annual-calendar-container .calendar-week-cell:hover,
body.cal-year-wide #annual-calendar-container .calendar-week-cell:focus-visible {
    background: #0062cc;
    transform: scale(1.06);
    outline: 0;
}

/* Heute-Zeile heben: alle Zellen der Reihe (inkl. KW) bekommen einen
   sanfteren Hintergrund, wenn der heutige Tag in dieser Reihe liegt. */
body.cal-year-wide #annual-calendar-container .calendar-week-cell.today-week {
    background: #ff9500;
    color: #fff;
    box-shadow: 0 2px 6px rgba(255, 149, 0, 0.4);
}

/* ========================================================================
   2. DARK MODE
   Volle Abdeckung: Header, KW-Pille (gefuellt), Hover, today-week.
   ======================================================================== */
body.dark-mode.cal-year-wide #annual-calendar-container .calendar-header-day.calendar-week-header {
    color: #67b1ff;
    border-right-color: rgba(103, 177, 255, 0.34);
}

body.dark-mode.cal-year-wide #annual-calendar-container .calendar-week-cell {
    background: #0a84ff;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(10, 132, 255, 0.40);
}

body.dark-mode.cal-year-wide #annual-calendar-container .calendar-week-cell:hover,
body.dark-mode.cal-year-wide #annual-calendar-container .calendar-week-cell:focus-visible {
    background: #2d96ff;
    color: #ffffff;
    transform: scale(1.06);
}

body.dark-mode.cal-year-wide #annual-calendar-container .calendar-week-cell.today-week {
    background: #ff9f0a;
    color: #fff;
    box-shadow: 0 2px 6px rgba(255, 159, 10, 0.5);
}

/* ========================================================================
   3. WIDER MINI-MONTH CARDS (CDP-Pattern, mehr Atmung)
   FX2 Re-Port 2026-05-09: Vergroesserung der Mini-Monats-Mindestbreite
   von 320px auf 340px + breiterer Layout-Cap. Zielbild ist die
   contadordeprazo /quantas-semanas-tem-um-ano Vorlage:
   3 Spalten desktop mit fast quadratischen Mini-Monaten, KW-Pille
   gut sichtbar, Tageszahlen lesbar (32-40px). Die FR-Vorlage gibt
   1200px max-width (calendar-year.css), wir behalten das bei und
   erhoehen lediglich die Innen-Mindestbreite.
   ======================================================================== */
body.cal-year-wide #annual-calendar-container {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    column-gap: 18px;
    row-gap: 18px;
}

/* Tablet (768-1023): 2 Spalten — FR-Default greift, hier Override
   damit auto-fit nicht 1 Mini-Monat allein darstellt. */
@media (min-width: 768px) and (max-width: 1023px) {
    body.cal-year-wide #annual-calendar-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Desktop (>=1024px): 3 Spalten harte Sperre (CDP-Pattern). */
@media (min-width: 1024px) {
    body.cal-year-wide #annual-calendar-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Mini-Monatskarte: leicht generoeseres Padding fuer 8-Spalten-Grid. */
body.cal-year-wide #annual-calendar-container .month-container {
    padding: 14px 16px 12px;
}

@media (min-width: 1024px) {
    body.cal-year-wide #annual-calendar-container .month-container {
        padding: 16px 18px 14px;
    }
}

/* ========================================================================
   3.bis. WIDER YEAR-MODE CONTAINER (override FR 1200px -> 1280px DE)
   FX2 Re-Port 2026-05-09: in der FR-Vorlage cap'd calendar-year.css
   den #annual-calendar-container und die toolbar/wrapper-Container auf
   1200px. Fuer DE mit 8-Spalten-Grid (KW + 7 Tage) ist das eng — die
   Mini-Monate kommen kompakter raus als auf der FR-Seite, weil eine
   Spalte auf den KW-Pill faellt. Wir erhoehen den Cap auf 1280px
   (matching contadordeprazo Tool-Layout-Vorlage) damit 3 Mini-Monate
   wieder die gleiche Breite pro Tageszelle haben wie die FR-Vorlage
   mit 7 Spalten.
   ======================================================================== */
body.cal-year-wide #annual-calendar-container,
body.cal-year-wide .container.cal-toolbar-wrapper,
body.cal-year-wide .container.cal-toolbar-wrapper--bottom,
body.cal-year-wide .container > .cal-toolbar {
    max-width: 1280px !important;
}

/* Editorial-Sektionen unterhalb des Tools: gleiche 1280px Breite (FR
   gibt hier 1200px). */
body.cal-year-wide main#main > .container .container.article-wrapper,
body.cal-year-wide main#main > .container .container.howto-wrapper,
body.cal-year-wide main#main > .container .container.faq-section,
body.cal-year-wide main#main > .container .container.serp-wrapper {
    max-width: 1280px !important;
}

/* ========================================================================
   4. MOBILE: KW-Spalte ausblenden, zurueck auf 7-Spalten-Grid
   Auf engen Bildschirmen ist die KW-Pille kosmetischer Ballast — die
   FR-Vorlage macht das genauso fuer .calendar-month-grid--with-weeks
   in calendar-month.css (siehe Block @media (max-width:768px) dort).
   ======================================================================== */
@media (max-width: 767px) {
    body.cal-year-wide #annual-calendar-container .calendar-header-day.calendar-week-header,
    body.cal-year-wide #annual-calendar-container .calendar-week-cell {
        display: none !important;
    }
    body.cal-year-wide #annual-calendar-container .calendar-grid.calendar-grid--with-weeks {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        column-gap: 3px;
        row-gap: 3px;
    }
    /* Children: grid-column auto, sonst respektieren manche Browser
       aria-colindex und legen die Zellen versetzt ab. Pattern aus
       FR calendar-month.css uebernommen. */
    body.cal-year-wide #annual-calendar-container .calendar-grid.calendar-grid--with-weeks > * {
        grid-column: auto !important;
    }
}

/* Auch fuer noch engere Smartphones. */
@media (max-width: 480px) {
    body.cal-year-wide #annual-calendar-container {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================
   5. PRINT: KW-Spalte ausblenden um Tinte zu sparen
   ======================================================================== */
@media print {
    .calendar-grid.calendar-grid--with-weeks .calendar-header-day.calendar-week-header,
    .calendar-grid.calendar-grid--with-weeks .calendar-week-cell {
        display: none !important;
    }
    .calendar-grid.calendar-grid--with-weeks {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }
    .calendar-grid.calendar-grid--with-weeks > * {
        grid-column: auto !important;
    }
}

/* ========================================================================
   6. MONATS-MODUS: KW-Pille mit gleichem Stil wie Jahres-Modus
   FR mois.php-CSS in calendar-month.css setzt 8 Spalten, aber stylet
   .calendar-month-week-cell nicht als Pille. Wir uebernehmen das
   Pillen-Pattern fuer Konsistenz.
   ======================================================================== */
.calendar-month-grid--with-weeks .calendar-month-week-header {
    font-weight: 700;
    color: #0071e3;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: center;
    padding: 8px 4px;
    background: transparent;
    border-right: 1px solid rgba(0, 113, 227, 0.18);
}

.calendar-month-grid--with-weeks .calendar-month-week-cell {
    background: #0071e3;
    color: #ffffff;
    border-radius: 6px;
    text-align: center;
    font-weight: 700;
    font-size: 0.88em;
    line-height: 1.2;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
    cursor: default;
    user-select: none;
    min-height: 38px;
    box-shadow: 0 1px 3px rgba(0, 113, 227, 0.25);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.calendar-month-grid--with-weeks .calendar-month-week-cell:hover,
.calendar-month-grid--with-weeks .calendar-month-week-cell:focus-visible {
    background: #0062cc;
    transform: scale(1.04);
    outline: 0;
}

/* Dark Mode fuer Monats-Modus KW-Pille. */
body.dark-mode .calendar-month-grid--with-weeks .calendar-month-week-header {
    color: #67b1ff;
    border-right-color: rgba(103, 177, 255, 0.34);
}

body.dark-mode .calendar-month-grid--with-weeks .calendar-month-week-cell {
    background: #0a84ff;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(10, 132, 255, 0.40);
}

body.dark-mode .calendar-month-grid--with-weeks .calendar-month-week-cell:hover,
body.dark-mode .calendar-month-grid--with-weeks .calendar-month-week-cell:focus-visible {
    background: #2d96ff;
    color: #ffffff;
    transform: scale(1.04);
}

/* ========================================================================
   7. MOIS PAGE: erstaunliche Konsistenz-Sicherung
   Die FR-Regel (calendar-month.css line 506-553) versteckt
   .calendar-month-week-cell und .calendar-month-week-header mobile,
   was wir uebernehmen. Hier nur belt-and-suspenders fuer 481px-768px
   range, wo der mobile-block ggf. Specifity-Probleme hat.
   ======================================================================== */
@media print {
    .calendar-month-grid--with-weeks .calendar-month-week-header,
    .calendar-month-grid--with-weeks .calendar-month-week-cell {
        display: none !important;
    }
    .calendar-month-grid--with-weeks {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }
}