/* Geplante Wartungen — Kalender und Liste, Maße aus dem Entwurf 10a. */

.kalender {
    padding: 24px 28px;
    background: var(--grund);
    border-radius: 22px;
    box-shadow: 0 2px 14px rgba(20, 32, 30, .06);
}

.kalender__leiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.kalender__pfeil {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--r-pille);
    background: var(--flaeche-kraeftig);
    color: var(--text-sekundaer);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .16s ease, transform .16s ease;
}

.kalender__pfeil:hover { background: var(--linie); color: var(--akzent); }
.kalender__pfeil:active { transform: scale(.9); }

.kalender__spanne {
    margin: 0;
    text-align: center;
    font-family: var(--schrift-titel);
    font-size: 19px;
    font-weight: 600;
    color: var(--text);
}

.kalender__wochentage,
.kalender__raster {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.kalender__wochentage {
    margin-top: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--text-schwach);
}

.kalender__raster { margin-top: 8px; }

.tag {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 62px;
    padding: 8px 8px 9px;
    background: var(--flaeche);
    border: 1.5px solid transparent;
    border-radius: 14px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, border-color .15s ease,
                transform .15s ease;
}

.tag:hover { background: var(--flaeche-tief); }

/* Tage aus dem Nachbarmonat: derselbe Aufbau, nur schwächer — der laufende
   Monat soll hervortreten, ohne dass daneben Löcher entstehen. */
.tag--fremd { background: #FAFBFB; }
.tag--fremd .tag__zahl { color: #C2C9C6; }
.tag--fremd:hover { background: var(--flaeche); }
/* Termine aus dem Nachbarmonat: blasser, wie die Zahl daneben. */
.tag--fremd .tag__termin { opacity: .55; }

/* Wochenenden etwas abgesetzt, Feiertage deutlicher */
.tag--wochenende { background: #F1F4F3; }
.tag--wochenende.tag--fremd { background: #F7F9F8; }

.tag--feiertag { background: #FBF4E6; }
.tag--feiertag .tag__zahl { color: var(--geplant-text); font-weight: 600; }
.tag--feiertag.tag--fremd { background: #FDF9F1; }
.tag--feiertag.tag--fremd .tag__zahl { color: #D2C3A3; }
.tag--heute:hover { background: rgba(15, 90, 84, .08); }
.tag:active { transform: scale(.96); }

/* Heute: umrandet statt gefüllt — fällt auf, ohne zu schreien. */
.tag--heute {
    background: transparent;
    border-color: var(--akzent);
}

.tag__zahl { font-size: 13.5px; color: var(--text-sekundaer); }
.tag--vergangen .tag__zahl { color: var(--text-schwach); }
.tag--heute .tag__zahl { font-weight: 700; color: var(--akzent); }

/* ── Der angetippte Tag ───────────────────────────────────────────────────
   Diese Regeln stehen bewusst ganz am Ende und decken jede Verbindung ab:
   Die Auswahl muss „heute" schlagen (sonst durchsichtiger Grund unter weißer
   Schrift) und den Überfahr-Zustand (sonst wird der Grund beim Draufzeigen
   hell, während die Schrift weiß bleibt). Beides war der Fall. */

.tag--gewaehlt,
.tag--gewaehlt:hover,
.tag--gewaehlt.tag--heute,
.tag--gewaehlt.tag--heute:hover {
    background: var(--akzent);
    border-color: var(--akzent);
}

.tag--gewaehlt .tag__zahl,
.tag--gewaehlt.tag--heute .tag__zahl,
.tag--gewaehlt.tag--vergangen .tag__zahl {
    color: var(--text-auf-farbe);
    font-weight: 700;
}

/* Feiertag: steht als Wort in der Zelle, nicht nur als Farbe. */
.tag__feiertag {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--geplant-text);
    text-wrap: pretty;
}

.tag--fremd .tag__feiertag { color: #CFC3AA; }

.tag__termin {
    padding: 5px 8px;
    border-radius: 8px;
    background: #DCE4F0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--info);
    text-align: left;
}

/* ── Der gewählte Tag, ganz zum Schluss ───────────────────────────────────
   Alles, was auf dem petrolfarbenen Feld liegt, muss hier stehen — und
   zwar nach den Normalzuständen. Zwei dieser Regeln standen vorher davor
   und hatten den Präfix verloren: Der Terminkasten behielt seinen
   hellblauen Grund auf dunklem Feld und war kaum zu lesen. */

.tag--gewaehlt .tag__feiertag { color: rgba(255, 255, 255, .88); }

.tag--gewaehlt .tag__termin {
    background: rgba(255, 255, 255, .22);
    color: var(--text-auf-farbe);
}

.auswahl { margin-top: 16px; }

.auswahl__feiertag {
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: var(--r-pille);
    background: var(--geplant-flaeche);
    font-family: var(--schrift);
    font-size: 13px;
    font-weight: 600;
    color: var(--geplant-text);
    vertical-align: 2px;
}

.auswahl__titel {
    margin: 0 0 12px;
    padding: 0 6px;
    font-family: var(--schrift-titel);
    font-size: 19px;
    font-weight: 600;
    color: var(--text);
}

.auswahl__leer {
    margin: 0;
    padding: 26px;
    background: var(--grund);
    border-radius: 18px;
    text-align: center;
    color: var(--text-schwach);
}

/* Der nächste Termin war ein Fließtext mit vier verschiedenen Trennern —
   „Mi, 2. Sep · 6–10 Uhr — Wartung …, Im Haupthaus zeitweise laut. ·
   Haupthaus · Ebene 2–3". Jetzt dieselbe Karte wie in der Liste. */
.naechster { margin: 18px 0 0; }

.naechster__titel {
    margin: 0 0 9px;
    padding: 0 4px;
    font-family: var(--schrift-titel);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-tertiaer);
}

/* Der Ort steht auf einer eigenen Zeile statt hinter einem weiteren Punkt. */
.termin__ort {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--text-schwach);
}

/* ── Liste ────────────────────────────────────────────────────────────── */

.terminliste { display: flex; flex-direction: column; gap: 12px; }

.termin {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 17px;
    background: var(--grund);
    border: 1.5px solid transparent;
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(20, 32, 30, .05);
    text-decoration: none;
    transition: border-color .12s ease;
}

/* Führt zur Meldung — dieselbe Geste wie bei den Systemzeilen. */
.termin:hover { border-color: var(--akzent); }
.termin:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Ohne den Monat ist „MI 2" nur im laufenden Monat eindeutig — blättert
   man weiter, stünde dort weiter nur eine Zahl. */
.termin__monat {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text-schwach);
}

.termin__kachel {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 52px;
    padding: 8px 0;
    background: #DCE4F0;
    border-radius: 12px;
    color: var(--info);
}

.termin__wochentag { font-size: 11px; font-weight: 600; }

.termin__zahl {
    font-family: var(--schrift-titel);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.1;
}

.termin__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.termin__titel { font-size: 15.5px; font-weight: 600; color: var(--text); }
.termin__zusatz { font-size: 13px; color: var(--text-schwach); text-wrap: pretty; }

.termin__gewerk {
    margin-left: auto;
    flex-shrink: 0;
    padding: 6px 13px;
    border-radius: var(--r-pille);
    background: #F1EDE6;
    font-size: 12.5px;
    font-weight: 500;
    color: #6B6357;
}

.terminliste__leer {
    margin: 0;
    padding: 28px;
    background: var(--grund);
    border-radius: 18px;
    text-align: center;
    color: var(--text-schwach);
}

/* ── Handy ────────────────────────────────────────────────────────────── */

@media (max-width: 899px) {
    .kalender { padding: 16px 12px; border-radius: var(--r-gross); }
    .kalender__spanne { font-size: 17px; }
    .kalender__wochentage, .kalender__raster { gap: 3px; }
    .kalender__wochentage { margin-top: 14px; font-size: 11.5px; }

    .tag {
        min-height: 46px;
        gap: 3px;
        padding: 5px 4px;
        border-radius: 10px;
    }

    .tag__zahl { font-size: 12px; }
    .tag--heute .tag__zahl { font-size: 11.5px; }
    .auswahl__titel { font-size: 17px; }

    /* Am Telefon ist kein Platz für Text in der Zelle — ein Punkt zeigt,
       dass an dem Tag etwas ansteht. Die Einzelheiten stehen in der Liste. */
    .tag__termin {
        padding: 0;
        width: 7px;
        height: 7px;
        border-radius: var(--r-pille);
        background: var(--info);
        font-size: 0;
        line-height: 0;
        overflow: hidden;
    }

    .tag__termin br { display: none; }

    /* Auf dem petrolfarbenen Feld ist ein blauer Punkt kaum zu sehen. */
    .tag--gewaehlt .tag__termin { background: var(--text-auf-farbe); }

    .auswahl { margin-top: 16px; }

.auswahl__feiertag {
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: var(--r-pille);
    background: var(--geplant-flaeche);
    font-family: var(--schrift);
    font-size: 13px;
    font-weight: 600;
    color: var(--geplant-text);
    vertical-align: 2px;
}

.auswahl__titel {
    margin: 0 0 12px;
    padding: 0 6px;
    font-family: var(--schrift-titel);
    font-size: 19px;
    font-weight: 600;
    color: var(--text);
}

.auswahl__leer {
    margin: 0;
    padding: 26px;
    background: var(--grund);
    border-radius: 18px;
    text-align: center;
    color: var(--text-schwach);
}

.naechster__titel { font-size: 13.5px; }

    .termin { padding: 13px 14px; gap: 12px; border-radius: var(--r-gross); }
    .termin__gewerk { display: none; }
}