/* ══ sc-kalender.css — Datumswaehler des Preisrechners (sc-kalender.js, window.SCKalender) ══
   20.10.2026. Dunkel wie der Rechner, eigenstaendig (kein Tailwind).

   SPEZIFITAET — BINDEND: jede Regel steht unter .sc-kal (mindestens 0,2,0). rechner.css setzt
   global `button:hover { transform: translateY(-1px) }`, am Handy `button { min-height: 44px }`
   und `input[type="checkbox"] { width: 20px; height: 20px }`; Tailwind-Preflight (nach diesem
   Blatt geladen) setzt `button { background: transparent }`. Eine einfache Klassenregel
   verloere dagegen je nach Reihenfolge — der Kalender kippte still.

   Gestalten: .sc-kal--pop (Popover, absolut im Dokument) und .sc-kal--sheet (Bottom-Sheet,
   fixed). .sc-kal--gross = Fingerfelder (mind. 44 x 44 px Trefferflaeche). */

.sc-kal {
    --sck-flaeche: #161618;
    --sck-rand: rgba(255, 255, 255, 0.1);
    --sck-linie: rgba(255, 255, 255, 0.07);
    --sck-text: #e5e7eb;
    --sck-text2: #9ca3af;
    --sck-blau: #4cb3d6;
    --sck-blau-hell: #6cc4e2;
    --sck-dunkel: #0b0b0c;
    --sck-zelle: 40px;
    --sck-kreis: 36px;
    --sck-bernstein: #e8b34b;       /* wie --sc-amber im Rechner */
    --sck-bernstein-text: #f2c56a;
    --sck-rosa: #f27a9f;
    z-index: 10050;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: var(--sck-text);
    font-family: inherit;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    white-space: normal;
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
.sc-kal *, .sc-kal *::before, .sc-kal *::after { box-sizing: border-box; }
.sc-kal.sc-kal--gross { --sck-zelle: 46px; --sck-kreis: 42px; font-size: 16px; }

/* ── Popover (Schreibtisch; am Finger im mitwachsenden Iframe) ── */
.sc-kal.sc-kal--pop { position: absolute; top: 0; left: 0; width: 320px; max-width: 100%; }

.sc-kal .sc-kal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 0 12px;
    background: var(--sck-flaeche);
    border: 1px solid var(--sck-rand);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    color: var(--sck-text);
    outline: none;
}
.sc-kal.sc-kal--pop .sc-kal__panel { animation: sc-kal-pop 0.14s ease-out both; transform-origin: 50% 0; }
.sc-kal.sc-kal--pop.sc-kal--oben .sc-kal__panel { animation-name: sc-kal-pop-oben; transform-origin: 50% 100%; }
@keyframes sc-kal-pop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes sc-kal-pop-oben { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ── Bottom-Sheet (Handy/Tablet) ── */
.sc-kal.sc-kal--sheet { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
.sc-kal.sc-kal--sheet .sc-kal__backdrop {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0, 0, 0, 0.58);
    cursor: pointer;
    /* Ziehen auf dem Schleier scrollt nichts dahinter. Nur hier, nie an einem Vorfahren:
       touch-action schneidet sich entlang der Vorfahrenkette (Lehre LeadsWidget 06.08.). */
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    animation: sc-kal-ein 0.2s ease-out both;
}
.sc-kal.sc-kal--sheet .sc-kal__panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    max-height: 88vh;
    max-height: 88dvh;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    padding-bottom: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    animation: sc-kal-hoch 0.28s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
@keyframes sc-kal-hoch { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }
@keyframes sc-kal-ein { from { opacity: 0; } to { opacity: 1; } }
.sc-kal.sc-kal--sheet .sc-kal__griff {
    flex: none;
    width: 40px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.22);
}
/* Der Monat scrollt in sich, Kopf und Knoepfe bleiben stehen. Kein overscroll-behavior an
   html/body (kappt die Touch-Kette zur Huelle) — es gehoert an genau diesen inneren Scroller. */
.sc-kal.sc-kal--sheet .sc-kal__koerper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
/* Quer am Handy (kaum 380 px hoch): bliebe der Fuss stehen, sah man vom Monat eine Zeile.
   Dort scrollt das ganze Sheet in sich. */
@media (max-height: 560px) {
    .sc-kal.sc-kal--sheet .sc-kal__panel { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .sc-kal.sc-kal--sheet .sc-kal__koerper { flex: none; overflow: visible; }
    .sc-kal.sc-kal--sheet .sc-kal__fuss { flex: none; }
}
/* Spezifitaet wie die Animationsregeln oben (bis 0,4,0), sonst gewinnen die trotz Medienabfrage */
@media (prefers-reduced-motion: reduce) {
    .sc-kal.sc-kal--sheet .sc-kal__panel,
    .sc-kal.sc-kal--sheet .sc-kal__backdrop,
    .sc-kal.sc-kal--pop .sc-kal__panel,
    .sc-kal.sc-kal--pop.sc-kal--oben .sc-kal__panel { animation: none; }
    .sc-kal .sc-kal__kreis, .sc-kal .sc-kal__spur, .sc-kal .sc-kal__spur::after { transition: none; }
}

/* ── Kopf: Titel (nur Sheet sichtbar), Monat, Pfeile, Schliessen ── */
.sc-kal .sc-kal__kopf {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 10px 8px 6px 16px;
}
.sc-kal.sc-kal--sheet .sc-kal__kopf { padding: 8px 10px 6px 18px; }
.sc-kal .sc-kal__kopftext { min-width: 0; }
.sc-kal .sc-kal__titel {
    margin: 0 0 1px;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sck-text2);
}
.sc-kal .sc-kal__monat {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-kal.sc-kal--gross .sc-kal__monat { font-size: 18px; }
.sc-kal .sc-kal__aktionen { flex: none; display: flex; align-items: center; gap: 2px; }
.sc-kal .sc-kal__nav {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--sck-text);
    font: inherit;
    cursor: pointer;
    transform: none;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.sc-kal.sc-kal--gross .sc-kal__nav { width: 44px; height: 44px; }
.sc-kal .sc-kal__nav[aria-disabled="true"] { opacity: 0.3; cursor: default; }
.sc-kal .sc-kal__zu { margin-left: 4px; color: var(--sck-text2); }
.sc-kal .sc-kal__ikon {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.sc-kal .sc-kal__nav:not([aria-disabled="true"]):active { background: rgba(255, 255, 255, 0.1); }

/* ── Monatsraster ── */
.sc-kal .sc-kal__koerper { margin: 0; padding: 0 10px 4px; }
.sc-kal.sc-kal--sheet .sc-kal__koerper { padding: 0 12px 6px; }
/* 320 px: sieben Felder brauchen 7 x 44 = 308 px — der Rand gibt den Rest her */
@media (max-width: 359px) {
    .sc-kal.sc-kal--gross .sc-kal__koerper { padding-left: 4px; padding-right: 4px; }
}
.sc-kal .sc-kal__raster {
    display: block;
    width: 100%;
    margin: 0;
    -webkit-user-select: none;
    user-select: none;
}
.sc-kal .sc-kal__zeile { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; }
/* Scrollt der Monat im Sheet (kleine/quer gehaltene Handys), bleiben die Wochentage stehen */
.sc-kal.sc-kal--sheet .sc-kal__wtgruppe { position: sticky; top: 0; z-index: 1; background: var(--sck-flaeche); }
.sc-kal .sc-kal__wt {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sck-text2);
}
.sc-kal .sc-kal__wt.sc-kal__wt--we { color: #6f7580; }
.sc-kal .sc-kal__leer { height: var(--sck-zelle); }
.sc-kal .sc-kal__tag {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--sck-zelle);
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--sck-text);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transform: none;
    transition: none;
    touch-action: manipulation;   /* kein Doppeltipp-Zoom */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}
.sc-kal.sc-kal--gross .sc-kal__tag { font-size: 16px; }
.sc-kal .sc-kal__kreis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sck-kreis);
    height: var(--sck-kreis);
    position: relative;
    border-radius: 50%;
    pointer-events: none;
    transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.sc-kal .sc-kal__tag.sc-kal__tag--we { color: #a9aeb7; }
.sc-kal .sc-kal__tag.sc-kal__tag--heute .sc-kal__kreis { box-shadow: inset 0 0 0 1px rgba(76, 179, 214, 0.85); }

/* ── Tages-Markierungen (opts.tagInfo -> .sc-kal--info, .sc-kal__tag--<art>, data-stufe) ──
   Kurzzeile IN jedem Kreis reserviert (auch leer): alle Zahlen auf einer Linie, keine Zelle wird
   hoeher. Diese Regeln stehen VOR „gewaehlt“: die Stufen (0,4,0) verloeren sonst gegen das Blau
   nicht, sondern gewaennen es. Gesperrte Tage bekommen keine Markierung (fragt das Modul nicht). */
.sc-kal.sc-kal--info .sc-kal__kreis { flex-direction: column; gap: 1px; }
.sc-kal .sc-kal__zahl { display: block; font-size: 14px; line-height: 1; }
.sc-kal.sc-kal--gross .sc-kal__zahl { font-size: 15px; }
.sc-kal .sc-kal__kurz {
    display: block;
    height: 10px;
    max-width: calc(var(--sck-kreis) + 2px);
    overflow: hidden;
    font-size: 9px;
    font-weight: 600;
    line-height: 10px;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--sck-text2);
    font-variant-numeric: tabular-nums;
}
.sc-kal.sc-kal--gross .sc-kal__kurz { height: 11px; font-size: 9.5px; line-height: 11px; }
.sc-kal .sc-kal__kurz s { text-decoration: line-through; text-decoration-thickness: 1px; }
/* kurzfristig: Bernstein, je teurer (Stufe 1) desto kraeftiger */
.sc-kal .sc-kal__tag--kurzfristig .sc-kal__kreis { background-color: rgba(232, 179, 75, 0.22); }
.sc-kal .sc-kal__tag--kurzfristig[data-stufe="1"] .sc-kal__kreis { background-color: rgba(232, 179, 75, 0.42); }
.sc-kal .sc-kal__tag--kurzfristig[data-stufe="2"] .sc-kal__kreis { background-color: rgba(232, 179, 75, 0.32); }
.sc-kal .sc-kal__tag--kurzfristig[data-stufe="3"] .sc-kal__kreis { background-color: rgba(232, 179, 75, 0.24); }
.sc-kal .sc-kal__tag--kurzfristig[data-stufe="4"] .sc-kal__kreis { background-color: rgba(232, 179, 75, 0.16); }
.sc-kal .sc-kal__tag--kurzfristig[data-stufe="5"] .sc-kal__kreis { background-color: rgba(232, 179, 75, 0.10); }
/* Farbe der Kurzzeile nach der Art, die sie geliefert hat (Sonntag UND kurzfristig: Bernstein) */
.sc-kal .sc-kal__kurz[data-art="kurzfristig"] { color: var(--sck-bernstein-text); }
/* Feiertag: rosa Punkt oben rechts am Kreis + rosa Kurzzeile */
.sc-kal .sc-kal__tag--feiertag .sc-kal__kreis::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sck-rosa);
    box-shadow: 0 0 0 2px var(--sck-flaeche);
}
.sc-kal .sc-kal__kurz[data-art="feiertag"] { color: #f59bb7; }
/* Sonntag: sehr dezent (erlassener Zuschlag durchgestrichen) */
.sc-kal .sc-kal__kurz[data-art="sonntag"] { color: #80868f; font-weight: 500; }

.sc-kal .sc-kal__tag[aria-selected="true"] { color: var(--sck-dunkel); font-weight: 700; }
.sc-kal .sc-kal__tag[aria-selected="true"] .sc-kal__kreis { background: var(--sck-blau); color: var(--sck-dunkel); }
.sc-kal .sc-kal__tag[aria-selected="true"] .sc-kal__kurz { color: rgba(11, 11, 12, 0.72); }
.sc-kal .sc-kal__tag.sc-kal__tag--heute[aria-selected="true"] .sc-kal__kreis {
    box-shadow: 0 0 0 2px var(--sck-flaeche), 0 0 0 3px rgba(76, 179, 214, 0.85);
}
.sc-kal .sc-kal__tag:disabled { opacity: 0.3; cursor: default; }
/* Tipp-/Hover-Rueckmeldung als Schicht UEBER der Farbe (background-image): die Bernsteinstufe bleibt sichtbar */
.sc-kal .sc-kal__tag:not(:disabled):active .sc-kal__kreis { background-image: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)); }
.sc-kal .sc-kal__tag[aria-selected="true"]:not(:disabled):active .sc-kal__kreis { background: var(--sck-blau-hell); }

/* Hover nur, wo es Hover gibt — am Finger klebt :hover sonst nach dem Tippen */
@media (hover: hover) {
    .sc-kal .sc-kal__nav:not([aria-disabled="true"]):hover { background: rgba(255, 255, 255, 0.08); }
    .sc-kal .sc-kal__tag:not(:disabled):hover .sc-kal__kreis { background-image: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)); }
    .sc-kal .sc-kal__tag[aria-selected="true"]:not(:disabled):hover .sc-kal__kreis { background: var(--sck-blau-hell); }
    .sc-kal .sc-kal__knopf--ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.26); }
    .sc-kal .sc-kal__knopf--primaer:not(:disabled):hover { background: var(--sck-blau-hell); border-color: var(--sck-blau-hell); }
}

/* Fokusring nur bei Tastatur. Muster :focus:not(:focus-visible): ein Browser ohne
   :focus-visible verwirft beide Regeln und behaelt seinen eigenen Ring. */
.sc-kal .sc-kal__tag:focus:not(:focus-visible),
.sc-kal .sc-kal__nav:focus:not(:focus-visible),
.sc-kal .sc-kal__knopf:focus:not(:focus-visible) { outline: none; }
.sc-kal .sc-kal__tag:focus-visible { outline: none; }
.sc-kal .sc-kal__tag:focus-visible .sc-kal__kreis { box-shadow: 0 0 0 2px var(--sck-flaeche), 0 0 0 4px var(--sck-blau); }
.sc-kal .sc-kal__nav:focus-visible,
.sc-kal .sc-kal__knopf:focus-visible { outline: 2px solid var(--sck-blau); outline-offset: 2px; }

/* ── Fuss: Zusammenfassung, „Für alle“, Knoepfe ── */
.sc-kal .sc-kal__fuss {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 6px 0 0;
    padding: 12px 14px 0;
    border-top: 1px solid var(--sck-linie);
}
.sc-kal.sc-kal--sheet .sc-kal__fuss { padding: 12px 16px 0; }
.sc-kal .sc-kal__summe { min-width: 0; }
.sc-kal .sc-kal__anzahl { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--sck-text); }
.sc-kal .sc-kal__liste {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--sck-text2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-kal .sc-kal__alle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--sck-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* Das echte Kaestchen liegt unsichtbar ueber der Schiene: fokussierbar, vorlesbar, antippbar.
   (Pseudo-Elemente direkt am <input> zeichnet nicht jeder Browser.) */
.sc-kal .sc-kal__schalter {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 1;
    width: 46px;
    height: 28px;
    min-height: 0;
    margin: -14px 0 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}
.sc-kal .sc-kal__spur {
    position: relative;
    flex: none;
    width: 46px;
    height: 28px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.16);
    transition: background-color 0.18s ease;
}
.sc-kal .sc-kal__spur::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    transition: transform 0.18s ease;
}
.sc-kal .sc-kal__schalter:checked + .sc-kal__spur { background: var(--sck-blau); }
.sc-kal .sc-kal__schalter:checked + .sc-kal__spur::after { transform: translateX(18px); background: #fff; }
.sc-kal .sc-kal__schalter:focus-visible + .sc-kal__spur { box-shadow: 0 0 0 2px var(--sck-flaeche), 0 0 0 4px var(--sck-blau); }
.sc-kal .sc-kal__alletext { min-width: 0; }
.sc-kal .sc-kal__knoepfe { display: flex; justify-content: flex-end; gap: 8px; }
.sc-kal .sc-kal__knopf {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 40px;
    height: auto;
    margin: 0;
    padding: 8px 16px;
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transform: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
/* Am Finger: „Abbrechen“ so breit wie sein Wort, „{n} Tage übernehmen“ nimmt den Rest — bei 375 px
   steht auch „12 Tage übernehmen“ in einer Zeile; notfalls bricht die Beschriftung um, nie ueber den Rand */
.sc-kal.sc-kal--gross .sc-kal__knopf { flex: 1 1 auto; min-height: 48px; padding: 8px 14px; font-size: 16px; white-space: normal; text-align: center; }
.sc-kal.sc-kal--gross .sc-kal__knopf--ghost { flex: 0 0 auto; min-width: 104px; }
@media (max-width: 359px) {
    .sc-kal.sc-kal--gross .sc-kal__knopf { padding: 8px 10px; font-size: 15px; }
    .sc-kal.sc-kal--gross .sc-kal__knopf--ghost { flex: 0 1 auto; min-width: 0; }
    .sc-kal.sc-kal--gross .sc-kal__fuss { padding-left: 12px; padding-right: 12px; }
}
.sc-kal .sc-kal__knopf--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.16); color: var(--sck-text); }
.sc-kal .sc-kal__knopf--primaer { background: var(--sck-blau); border: 1px solid var(--sck-blau); color: var(--sck-dunkel); font-weight: 700; }
.sc-kal .sc-kal__knopf--primaer:disabled { opacity: 0.4; cursor: not-allowed; }
.sc-kal .sc-kal__knopf--ghost:active { background: rgba(255, 255, 255, 0.08); }

/* ── Legende unter dem Raster (nur Arten des sichtbaren Monats; Zeile immer reserviert) ── */
.sc-kal .sc-kal__legende {
    height: 20px;
    margin: 4px 2px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 20px;
    color: var(--sck-text2);
}
.sc-kal .sc-kal__lg { margin-right: 12px; }
.sc-kal .sc-kal__lg:last-child { margin-right: 0; }
.sc-kal .sc-kal__lg-mark {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 5px;
    border-radius: 50%;
    vertical-align: -1px;
    background: rgba(255, 255, 255, 0.2);
}
.sc-kal .sc-kal__lg--kurzfristig .sc-kal__lg-mark { background: rgba(232, 179, 75, 0.62); }
.sc-kal .sc-kal__lg--feiertag .sc-kal__lg-mark { width: 7px; height: 7px; vertical-align: 0; background: var(--sck-rosa); }
.sc-kal .sc-kal__lg--sonntag .sc-kal__lg-mark { background: transparent; box-shadow: inset 0 0 0 1px #80868f; }

/* ── Hinweis im Fuss (Tagestext nach dem Tipp, „Weitere Tage …“ nach dem Ersetzen) ──
   Hoehe fest (1 bzw. 2 Zeilen), damit der Fuss beim Erscheinen/Verschwinden nicht springt. */
.sc-kal .sc-kal__hinweis {
    height: 17px;
    margin-top: 4px;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 17px;
    color: #b8bdc5;
    transition: opacity 0.3s ease;
}
.sc-kal .sc-kal__hinweis.sc-kal__hinweis--zwei { height: 34px; }
.sc-kal .sc-kal__hinweis.sc-kal__hinweis--weg { opacity: 0; }
.sc-kal .sc-kal__hz { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; animation: sc-kal-ein 0.25s ease-out both; }
.sc-kal .sc-kal__hinweis--zwei .sc-kal__hz:only-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
.sc-kal .sc-kal__hz b { font-weight: 700; color: var(--sck-text); }
@media (prefers-reduced-motion: reduce) {
    .sc-kal .sc-kal__hinweis.sc-kal__hinweis { transition: none; }
    .sc-kal .sc-kal__hinweis .sc-kal__hz { animation: none; }
}

.sc-kal .sc-kal__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}