/* VMCV Kalender - handgeschrieben, kein Build-Schritt. Alle Farben als Custom Properties, Theme über [data-theme] am . */ :root { --bg: #0f172a; --surface: #1e293b; --surface-2: #273449; --text: #e2e8f0; --text-dim: #94a3b8; --line: #334155; --accent: #818cf8; --accent-ink: #c7d2fe; --now: #34d399; --font-scale: 1; --radius: 12px; --gap: 1rem; } [data-theme="light"] { --bg: #f8fafc; --surface: #ffffff; --surface-2: #f1f5f9; --text: #0f172a; --text-dim: #64748b; --line: #e2e8f0; --accent: #4f46e5; --accent-ink: #3730a3; --now: #059669; } [data-font="small"] { --font-scale: 0.9; } [data-font="medium"] { --font-scale: 1; } [data-font="large"] { --font-scale: 1.15; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: calc(16px * var(--font-scale))/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; } .wrap { width: 100%; max-width: 46rem; margin-inline: auto; padding-inline: 1rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- Header ---------- */ .header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding-block: 0.7rem; } .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 650; color: inherit; text-decoration: none; } .brand img { border-radius: 6px; } .header-actions { display: flex; gap: 0.4rem; } .icon-btn { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; cursor: pointer; } .icon-btn:hover { border-color: var(--accent); } .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } [data-theme="dark"] .only-light { display: none; } [data-theme="light"] .only-dark { display: none; } /* ---------- Suche ---------- */ .main { padding-block: 1.5rem 3rem; } .search { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; } .search input { flex: 1 1 12rem; min-width: 0; padding: 0.6rem 0.8rem; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 8px; font: inherit; } .search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .search button { padding: 0.6rem 1rem; background: var(--accent); color: #fff; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; } [data-theme="light"] .search button { color: #fff; } .search-clear { color: var(--text-dim); font-size: 0.9em; } .result-line { color: var(--text-dim); margin: -0.75rem 0 1.25rem; } /* ---------- Hinweise ---------- */ .notice { padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text-dim); } .notice-warn { border-color: #b45309; color: #fcd34d; } [data-theme="light"] .notice-warn { color: #92400e; } /* ---------- Monate & Termine ---------- */ .month { margin-bottom: 2rem; } .month-title { margin: 0 0 0.75rem; font-size: 0.85em; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } .events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .event { display: flex; gap: 1rem; padding: 0.9rem 1rem; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); } .event.is-past { opacity: 0.55; border-left-color: var(--line); } .event.is-now { border-left-color: var(--now); } .event-date { flex: 0 0 3rem; text-align: center; line-height: 1.15; padding-top: 0.15rem; } .event-weekday, .event-month { display: block; font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); } .event-day { display: block; font-size: 1.5em; font-weight: 650; } .event-body { min-width: 0; flex: 1; } .event-title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.3rem; font-size: 1.02em; font-weight: 620; overflow-wrap: anywhere; } .event-logo { border-radius: 4px; flex: none; } .event-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; margin: 0; font-size: 0.88em; color: var(--text-dim); } .event-location::before { content: "· "; } .badge { padding: 0.05rem 0.5rem; background: var(--surface-2); border-radius: 999px; font-size: 0.92em; color: var(--accent-ink); } .badge-now { background: var(--now); color: #04241a; font-weight: 600; } .badge-manual { background: transparent; border: 1px solid var(--line); color: var(--text-dim); font-size: 0.75em; letter-spacing: 0.03em; text-transform: uppercase; } .event-desc { margin: 0.5rem 0 0; font-size: 0.9em; color: var(--text-dim); overflow-wrap: anywhere; } .event-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin: 0.6rem 0 0; font-size: 0.87em; } .event-actions a { color: var(--accent-ink); text-decoration: none; } .event-actions a:hover { text-decoration: underline; } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } .more { margin: 0 0 2rem; padding: 0.9rem 1rem; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; } .more a { color: var(--accent-ink); font-weight: 600; text-decoration: none; } .more a:hover { text-decoration: underline; } /* ---------- Fuß ---------- */ .footer { padding-bottom: 2rem; font-size: 0.82em; color: var(--text-dim); } .footer p { margin: 0; } /* ---------- Schmal ---------- */ @media (max-width: 30rem) { .event { gap: 0.75rem; padding: 0.8rem; } .event-date { flex-basis: 2.6rem; } .brand span { font-size: 0.95em; } }