/**
 * FWT Kalender-Tool
 * Datei: tools/kalender/assets/kalender.css
 * Stand: 2026-07-22
 */

.fwt-security-note {
    display: grid;
    gap: 0.35rem;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: #fff8e7;
    border: 1px solid rgba(246, 189, 69, 0.35);
    border-left: 6px solid #d94343;
}
.fwt-security-note strong { color: var(--webtools-text, #15232d); }
.fwt-security-note span { color: var(--webtools-muted, #61717d); }

.fwt-cal-error {
    margin: 1rem 0 0; padding: 0.9rem 1rem; border-radius: 1rem;
    background: #fff2cf; border: 1px solid rgba(180,120,0,0.28); border-left: 6px solid #d94343;
    color: #6b4a00; font-weight: 750;
}

.fwt-cal-hero {
    padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
    background: radial-gradient(circle at 12% 18%, rgba(246,189,69,0.22), transparent 24rem),
                radial-gradient(circle at 86% 8%, rgba(22,129,140,0.20), transparent 26rem),
                linear-gradient(180deg, #ffffff 0%, #f5fbfc 100%);
}
.fwt-cal-hero__content h1 {
    margin: 0; color: var(--webtools-text, #15232d);
    font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3.8rem); line-height: 1.02; letter-spacing: -0.05em;
}
.fwt-cal-hero__content p { max-width: 760px; margin-top: 1rem; color: var(--webtools-muted, #61717d); font-size: clamp(1.05rem,2vw,1.25rem); }
.fwt-cal-hero__badges { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.3rem; }
.fwt-cal-hero__badges span {
    display:inline-flex; align-items:center; min-height:2rem; padding:0.35rem 0.7rem;
    border-radius:999px; background:#eaf8fa; color:#0f5962; font-size:0.9rem; font-weight:850;
}

.fwt-cal-section { padding: clamp(1.6rem, 4vw, 3rem) 0; }
.fwt-cal-section--soft { background: #f5fbfc; }
.fwt-cal-help { color: var(--webtools-muted, #61717d); max-width: 42rem; }

.fwt-cal-controls {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    padding: 1.4rem; border-radius: 1.4rem; background: #fff;
    border: 1px solid rgba(21,35,45,0.10); box-shadow: 0 16px 40px rgba(21,35,45,0.08);
}
.fwt-cal-field { display: grid; gap: 0.4rem; }
.fwt-cal-field--wide { grid-column: 1 / -1; }
.fwt-cal-field label { color: var(--webtools-text, #15232d); font-weight: 850; font-size: 0.9rem; }
.fwt-cal-field select, .fwt-cal-field input {
    padding: 0.7rem 0.9rem; border-radius: 0.85rem; border: 1px solid rgba(21,35,45,0.16);
    background: #fff; color: var(--webtools-text, #15232d); font: inherit;
}

.fwt-cal-state-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 0.4rem; }
.fwt-cal-check {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem;
    border-radius: 0.7rem; background: #f5fbfc; border: 1px solid rgba(21,35,45,0.10);
    color: var(--webtools-muted, #61717d); font-size: 0.88rem; cursor: pointer;
}

.fwt-cal-field-row { grid-column: 1 / -1; display: flex; gap: 1rem; flex-wrap: wrap; }
.fwt-cal-field--hint { grid-column: 1 / -1; }

.fwt-cal-design-shell {
    display: grid; grid-template-columns: minmax(300px, 0.6fr) minmax(260px, 1fr);
    gap: 2rem; align-items: start;
}
.fwt-cal-design-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 0.8rem; margin-top: 1rem; }
.fwt-cal-color-field { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0.7rem; border-radius: 0.7rem; background: #fff; border: 1px solid rgba(21,35,45,0.10); font-size: 0.85rem; color: var(--webtools-text, #15232d); }
.fwt-cal-color-field input[type="color"] { width: 2.4rem; height: 2rem; padding: 0; border: 1px solid rgba(21,35,45,0.16); border-radius: 0.4rem; cursor: pointer; }
.fwt-cal-design-preview { padding: 1.2rem; border-radius: 1.2rem; background: #fff; border: 1px solid rgba(21,35,45,0.10); }

.fwtke-yeargrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; padding: 0.8rem; }
.fwtke-yeargrid .fwtke-mini { font-size: 0.6rem; }
.fwtke-yeargrid .fwtke-mini-title { text-align:center; font-weight:700; margin-bottom:0.2rem; }
.fwtke-yeargrid .fwtke-mini-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.fwtke-yeargrid .fwtke-mini-cell { text-align:center; padding:0.05rem 0; }
.fwtke-yeargrid .fwtke-mini-cell.fwtke-feiertag { border-radius: 2px; }

@media (max-width: 900px) {
    .fwt-cal-design-shell { grid-template-columns: 1fr; }
}
.fwt-cal-hint-text { color: var(--webtools-muted, #61717d); font-size: 0.88rem; font-style: italic; }

.fwt-cal-quicklook-shell {
    display: grid; grid-template-columns: minmax(220px, 0.6fr) minmax(260px, 1fr);
    gap: 1.5rem; align-items: start;
    padding: 1.4rem; border-radius: 1.4rem; background: #fff;
    border: 1px solid rgba(21,35,45,0.10); box-shadow: 0 16px 40px rgba(21,35,45,0.08);
}
.fwt-cal-quicklook-shell h2 { margin: 0.2rem 0 0.4rem; color: var(--webtools-text, #15232d); }
.fwt-cal-quicklook { max-width: 22rem; }
.fwtke-cal { font-family: inherit; max-width: 22rem; border: 1px solid #d7dee2; border-radius: 0.9rem; overflow: hidden; }
.fwtke-head { display:flex; align-items:center; justify-content:space-between; padding:0.6rem 0.8rem; background:#10222a; color:#fff; font-weight:700; }
.fwtke-head button { background:none; border:0; color:#fff; font-size:1rem; cursor:pointer; padding:0.2rem 0.5rem; }
.fwtke-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.fwtke-dow { text-align:center; font-size:0.68rem; font-weight:700; color:#61717d; padding:0.3rem 0; }
.fwtke-cell { text-align:center; font-size:0.8rem; padding:0.4rem 0; color:#15232d; }
.fwtke-cell.fwtke-empty { color:transparent; }
.fwtke-cell.fwtke-feiertag { background:#f8b4b4; font-weight:700; }

.fwt-cal-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }

.fwt-cal-embed-box {
    position: fixed; inset: 0; z-index: 50; background: rgba(16,34,42,0.6);
    display: grid; place-items: center; padding: 1.5rem;
}
.fwt-cal-embed-box .webtools-container {
    background: #fff; border-radius: 1.4rem; padding: 1.6rem; max-width: 40rem;
}
.fwt-cal-embed-textarea {
    width: 100%; min-height: 8rem; margin: 1rem 0; padding: 0.9rem;
    border-radius: 0.85rem; border: 1px solid rgba(21,35,45,0.16);
    font-family: Consolas, monospace; font-size: 0.82rem;
}

.fwt-cal-legend { display: flex; gap: 1.2rem; justify-content: center; margin: 1rem 0; }
.fwt-cal-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--webtools-muted, #61717d); }
.fwt-cal-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; }
.fwt-cal-dot--feiertag { background: #d94343; }
.fwt-cal-dot--ferien { background: #16818c; }

.fwt-cal-print-heading { display: none; text-align: center; margin: 1rem 0; }

.fwt-cal-output-section { padding: 1rem 0 3rem; }
.fwt-cal-output {
    max-width: 1400px; margin: 0 auto; padding: 1rem;
}

/* ---- Jahresplaner ---- */
.fwt-cal-yearplan { display: grid; gap: 2px; background: rgba(21,35,45,0.12); border: 1px solid rgba(21,35,45,0.12); }
.fwt-cal-yearplan-row { display: grid; grid-template-columns: 5rem repeat(7, 1fr); gap: 2px; }
.fwt-cal-yearplan-weeklabel {
    background: #f5fbfc; display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 800; color: var(--webtools-muted, #61717d);
}
.fwt-cal-yearplan-day {
    background: #fff; min-height: 2.4rem; padding: 0.3rem 0.4rem; position: relative;
    font-size: 0.78rem; color: var(--webtools-text, #15232d);
}
.fwt-cal-yearplan-day.is-weekend { background: #fafbfc; }
.fwt-cal-yearplan-day.is-feiertag { background: #f8b4b4; box-shadow: inset 0 0 0 2px #d94343; font-weight: 850; }
.fwt-cal-yearplan-day.is-ferien { background: #a9dee9; box-shadow: inset 0 0 0 2px #16818c; }
.fwt-cal-yearplan-day.is-feiertag.is-ferien { background: linear-gradient(135deg, #f8b4b4 50%, #a9dee9 50%); }
.fwt-cal-yearplan-day.is-other-month { opacity: 0.35; }
.fwt-cal-yearplan-day .fwt-cal-month-tag {
    display: block; font-size: 0.65rem; font-weight: 850; text-transform: uppercase;
    color: var(--webtools-primary, #16818c);
}
.fwt-cal-yearplan-head { display: grid; grid-template-columns: 5rem repeat(7,1fr); gap: 2px; margin-bottom: 2px; }
.fwt-cal-yearplan-head span { background: #10222a; color: #fff; text-align: center; padding: 0.4rem 0; font-size: 0.75rem; font-weight: 850; }

/* ---- Monatskalender ---- */
.fwt-cal-month-sheet { break-after: page; }
.fwt-cal-month-sheet:last-child { break-after: auto; }
.fwt-cal-month-page { margin-bottom: 1.6rem; }
.fwt-cal-month-page:last-child { margin-bottom: 0; }
.fwt-cal-month-title { text-align: center; margin: 0 0 0.8rem; color: var(--webtools-text, #15232d); font-size: 1.8rem; }
.fwt-cal-month-page--compact .fwt-cal-month-title { font-size: 1.2rem; margin-bottom: 0.4rem; }
.fwt-cal-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; background: rgba(21,35,45,0.12); border: 1px solid rgba(21,35,45,0.12); }
.fwt-cal-month-grid .fwt-cal-dow { background: #10222a; color: #fff; text-align: center; padding: 0.5rem 0; font-size: 0.8rem; font-weight: 850; }
.fwt-cal-month-grid--compact .fwt-cal-dow { padding: 0.3rem 0; font-size: 0.68rem; }
.fwt-cal-month-cell { background: #fff; min-height: 5rem; padding: 0.5rem; }
.fwt-cal-month-grid--compact .fwt-cal-month-cell { min-height: 2.4rem; padding: 0.25rem; }
.fwt-cal-month-grid--compact .fwt-cal-daynum { font-size: 0.78rem; }
.fwt-cal-month-cell.is-empty { background: #fafbfc; }
.fwt-cal-month-cell.is-feiertag { background: #f8b4b4; box-shadow: inset 0 0 0 2px #d94343; }
.fwt-cal-month-cell.is-ferien { background: #a9dee9; box-shadow: inset 0 0 0 2px #16818c; }
.fwt-cal-month-cell .fwt-cal-daynum { font-weight: 850; color: var(--webtools-text, #15232d); }
.fwt-cal-month-cell .fwt-cal-label { display: block; font-size: 0.65rem; color: var(--webtools-muted, #61717d); margin-top: 0.2rem; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .fwt-cal-controls { grid-template-columns: 1fr; }
    .fwt-cal-yearplan-row, .fwt-cal-yearplan-head { grid-template-columns: 3rem repeat(7,1fr); }
}

/* ---- Druckansicht ---- */
@media print {
    [data-cal-hide-on-print] { display: none !important; }
    .fwt-cal-print-heading { display: block; }
    .fwt-cal-output { max-width: none; }
    .fwt-cal-month-cell, .fwt-cal-yearplan-day { break-inside: avoid; }
    .fwt-cal-half-break { break-before: page; }
}
