:root {
    --bg: #0f1115;
    --bg-deep: #090b0f;
    --panel: #151a22;
    --panel-2: #0c0f14;
    --panel-hover: #1b2230;
    --text: #e9edf5;
    --muted: #aab3c5;
    --line: #293244;
    --accent: #6aa9ff;
    --accent-strong: #3e8fff;
    --ok: #7cf0c0;
    --warn: #ffcc66;
    --bad: #ff6a6a;
    --shadow: 0 22px 65px rgba(0, 0, 0, .34);
    --radius: 18px;
    --radius-small: 11px;
    --page-gutter: clamp(12px, 1.7vw, 34px);
    --calendar-sidebar-width: clamp(360px, 22vw, 430px);
    --surface-opacity: .64;
    --public-surface-opacity: .64;
    --admin-surface-opacity: .90;
    --chrome-opacity: .86;
    --surface-blur: 12px;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { position: relative; isolation: isolate; min-height: 100vh; margin: 0; color: var(--text); background: var(--bg); }
.site-background { inset: 0; z-index: 0; pointer-events: none; background-repeat: no-repeat; }
.site-background.is-fixed { position: fixed; }
.site-background.is-scrolling { position: absolute; min-height: 100%; }
body::before { content: ""; position: fixed; z-index: 1; inset: 0; pointer-events: none; background:
    linear-gradient(to bottom, rgba(9,11,15,.18), rgba(9,11,15,.32)),
    radial-gradient(circle at 18% -10%, rgba(106,169,255,.16), transparent 34rem),
    radial-gradient(circle at 93% 5%, rgba(255,106,106,.08), transparent 28rem),
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
    background-size: auto, auto, auto, 48px 48px, 48px 48px; }
/* Inhalts- und Navigationsebenen gezielt setzen. Eine globale Regel für alle
   direkten Body-Kinder würde die spezifischen sticky-Positionen überschreiben. */
.flash, .public-shell, .admin-shell, .footer { position: relative; z-index: 2; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.topbar { position: sticky; z-index: 50; top: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 72px; padding: 12px var(--page-gutter); border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(9, 11, 15, var(--chrome-opacity)); backdrop-filter: blur(var(--surface-blur)); -webkit-backdrop-filter: blur(var(--surface-blur)); }
.brand { display: flex; flex: 1 1 auto; gap: 12px; align-items: center; min-width: 0; overflow: hidden; color: var(--text); text-decoration: none; }
.brand > span:last-child { min-width: 0; overflow: hidden; }
.brand strong, .brand small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand strong { letter-spacing: .01em; }
.brand small { margin-top: 2px; color: var(--muted); font-size: .76rem; }
.brand-mark { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(106, 169, 255, .65); border-radius: 12px; color: #fff; background: linear-gradient(145deg, rgba(106,169,255,.28), rgba(62,143,255,.08)); box-shadow: inset 0 0 24px rgba(106,169,255,.1), 0 0 26px rgba(106,169,255,.08); font-weight: 900; letter-spacing: -.05em; }
.brand-mark.large { width: 82px; height: 82px; border-radius: 22px; font-size: 1.45rem; }
.topnav { position: relative; z-index: 2; display: flex; flex: 0 0 auto; gap: 8px; pointer-events: auto; }
.topnav a { position: relative; z-index: 1; padding: 9px 12px; border-radius: 9px; color: var(--muted); text-decoration: none; font-size: .9rem; pointer-events: auto; }
.topnav a:hover { color: var(--text); background: rgba(255,255,255,.06); }

.public-shell, .admin-shell { width: 100%; max-width: none; margin: 0; padding-right: var(--page-gutter); padding-left: var(--page-gutter); }
.public-shell { padding-top: 38px; padding-bottom: 58px; container: public-shell / inline-size; }
.admin-shell { padding-top: 28px; padding-bottom: 58px; }
.install-shell { width: min(920px, calc(100% - 36px)); margin: 0 auto; padding: 48px 0 80px; }
.hero { display: flex; justify-content: space-between; gap: 32px; align-items: end; margin: 0 0 30px; padding: 36px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 24px; background: linear-gradient(135deg, rgba(21,26,34,var(--surface-opacity)), rgba(12,15,20,var(--surface-opacity))); backdrop-filter: blur(var(--surface-blur)); -webkit-backdrop-filter: blur(var(--surface-blur)); box-shadow: var(--shadow); position: relative; }
.hero::after { content: "G38"; position: absolute; right: 28%; bottom: -55px; color: rgba(255,255,255,.025); font-size: 12rem; font-weight: 900; letter-spacing: -.08em; transform: rotate(-6deg); pointer-events: none; }
.hero.compact { align-items: center; justify-content: flex-start; }
.hero h1 { max-width: 850px; margin: 7px 0 10px; font-size: clamp(2rem, 4vw, 4rem); line-height: .98; letter-spacing: -.055em; }
.hero p { max-width: 760px; margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.65; }
.hero-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.eyebrow { color: var(--accent); font-size: .73rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

.panel { border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); background: linear-gradient(145deg, rgba(21,26,34,var(--surface-opacity)), rgba(12,15,20,var(--surface-opacity))); backdrop-filter: blur(var(--surface-blur)); -webkit-backdrop-filter: blur(var(--surface-blur)); box-shadow: 0 14px 40px rgba(0,0,0,.2); }
.panel h2 { margin: 0 0 14px; font-size: 1.05rem; letter-spacing: -.01em; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; }
.button, .icon-button, .view-switch button, .text-button { border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,.035); cursor: pointer; text-decoration: none; transition: border-color .18s, background .18s, transform .18s; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 15px; border-radius: 10px; font-weight: 750; }
.button:hover, .icon-button:hover, .view-switch button:hover { border-color: #52617a; background: rgba(255,255,255,.07); }
.button:active, .icon-button:active { transform: translateY(1px); }
.button.primary { border-color: rgba(106,169,255,.75); background: linear-gradient(135deg, var(--accent-strong), #246fd8); box-shadow: 0 10px 26px rgba(62,143,255,.18); }
.button.primary:hover { background: linear-gradient(135deg, #55a0ff, #327ee7); }
.button.small { min-height: 36px; padding: 7px 12px; font-size: .86rem; }
.button.full { width: 100%; }
.button.danger { border-color: rgba(255,106,106,.55); color: #ffb1b1; }
.icon-button { width: 38px; height: 38px; border-radius: 10px; font-size: 1.6rem; line-height: 1; }
.text-button { padding: 3px 0; border: 0; color: var(--accent); background: none; font-size: .82rem; }

.calendar-app { display: grid; grid-template-columns: var(--calendar-sidebar-width) minmax(0, 1fr); gap: 18px; align-items: start; width: 100%; min-width: 0; }
.calendar-sidebar { display: grid; gap: 16px; position: sticky; top: 90px; min-width: 0; max-width: 100%; }
.calendar-sidebar .panel { padding: 20px; }
.next-events { display: grid; gap: 8px; margin-top: 13px; }
.next-event { display: grid; grid-template-columns: 51px minmax(0, 1fr); gap: 11px; width: 100%; min-width: 0; padding: 10px 0 10px 11px; border: 0; border-left: 3px solid var(--event-color); color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.next-event:hover { background: rgba(255,255,255,.035); }
.next-event-date { align-self: center; color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.next-event-info { min-width: 0; }
.next-event-info strong, .next-event-info small { display: block; }
.next-event-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.next-event-info small { margin-top: 3px; color: var(--muted); }
.category-filters { display: grid; gap: 8px; }
.category-filter { display: flex; gap: 9px; align-items: center; padding: 7px 8px; border-radius: 9px; color: var(--muted); cursor: pointer; }
.category-filter:hover { color: var(--text); background: rgba(255,255,255,.035); }
.category-filter input { flex: 0 0 auto; accent-color: var(--accent); }
.category-filter > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.category-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: var(--category-color); background: color-mix(in srgb, var(--category-color) 14%, transparent); font-weight: 900; }
.subscribe-panel p { color: var(--muted); line-height: 1.55; font-size: .88rem; }

.calendar-main { position: relative; isolation: isolate; overflow: hidden; min-width: 0; max-width: 100%; min-height: 650px; }
.calendar-toolbar { display: grid; min-width: 0; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 72px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.calendar-toolbar h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; text-align: center; font-size: clamp(1rem, 2vw, 1.25rem); }
.toolbar-group { display: flex; gap: 7px; align-items: center; min-width: 0; }
.view-switch { justify-self: end; display: inline-flex; min-width: 0; max-width: 100%; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: rgba(12,15,20,var(--surface-opacity)); backdrop-filter: blur(var(--surface-blur)); -webkit-backdrop-filter: blur(var(--surface-blur)); }
.view-switch button { min-height: 31px; padding: 5px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: .8rem; }
.view-switch button.active { color: var(--text); background: rgba(27,34,48,.88); box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.calendar-content { min-width: 0; max-width: 100%; min-height: 575px; overflow: hidden; }
.calendar-loading { display: grid; place-items: center; align-content: center; gap: 14px; min-height: 575px; color: var(--muted); }
.calendar-loading span { width: 32px; height: 32px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
.weekday-header { min-width: 0; overflow: hidden; padding: 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); text-align: center; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.weekday-header:nth-child(7) { border-right: 0; }
.month-day { position: relative; min-width: 0; overflow: hidden; min-height: 112px; padding: 9px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.008); }
.month-day:nth-child(7n) { border-right: 0; }
.month-day:nth-last-child(-n + 7) { border-bottom: 0; }
.month-day.outside { background: rgba(0,0,0,.12); color: #667086; }
.month-day.today { background: linear-gradient(145deg, rgba(106,169,255,.11), rgba(255,255,255,.005)); box-shadow: inset 0 0 0 1px rgba(106,169,255,.35); }
.day-number { display: grid; place-items: center; width: 27px; height: 27px; margin: 0 0 6px auto; border-radius: 50%; color: var(--muted); font-size: .76rem; font-weight: 800; }
.today .day-number { color: #fff; background: var(--accent-strong); }
.event-chip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: center; width: 100%; min-width: 0; margin: 4px 0; padding: 5px 7px; border: 0; border-left: 3px solid var(--event-color); border-radius: 6px; color: var(--text); background: color-mix(in srgb, var(--event-color) 10%, rgba(255,255,255,.025)); text-align: left; cursor: pointer; }
.event-chip:hover { background: color-mix(in srgb, var(--event-color) 17%, rgba(255,255,255,.04)); }
.event-chip span { color: var(--muted); font-size: .68rem; }
.event-chip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.event-chip.cancelled { opacity: .58; text-decoration: line-through; }
.more-events { width: 100%; padding: 4px 7px; border: 0; color: var(--accent); background: transparent; text-align: left; font-size: .7rem; cursor: pointer; }

.week-grid { display: grid; grid-template-columns: repeat(7, minmax(145px, 1fr)); min-height: 575px; overflow-x: auto; }
.week-day { min-width: 145px; padding: 11px; border-right: 1px solid var(--line); }
.week-day:last-child { border-right: 0; }
.week-day > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line); color: var(--muted); }
.week-day > header strong { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: var(--text); }
.week-day.today > header strong { background: var(--accent-strong); }
.week-empty { display: block; padding: 20px 0; color: #687287; text-align: center; font-size: .75rem; }
.event-card { display: block; width: 100%; margin: 8px 0; padding: 10px; border: 1px solid color-mix(in srgb, var(--event-color) 32%, var(--line)); border-left: 4px solid var(--event-color); border-radius: 9px; color: var(--text); background: color-mix(in srgb, var(--event-color) 9%, rgba(12,15,20,.66)); text-align: left; cursor: pointer; }
.event-card:hover { background: color-mix(in srgb, var(--event-color) 15%, rgba(12,15,20,.72)); }
.event-card-time, .event-card-main, .event-card-main strong, .event-card-main small { display: block; }
.event-card-time { margin-bottom: 6px; color: var(--muted); font-size: .7rem; }
.event-card-main strong { line-height: 1.25; font-size: .83rem; }
.event-card-main small { margin-top: 5px; color: var(--muted); line-height: 1.35; }
.event-card.horizontal { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; padding: 13px 15px; }
.event-card.horizontal .event-card-time { margin: 0; }
.event-card.cancelled { opacity: .58; text-decoration: line-through; }

.agenda-list { padding: 8px 18px 25px; }
.agenda-day { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.agenda-day:last-child { border-bottom: 0; }
.agenda-day > header { padding: 10px 0; }
.agenda-day > header strong, .agenda-day > header span { display: block; }
.agenda-day > header strong { font-size: .9rem; }
.agenda-day > header span { margin-top: 4px; color: var(--muted); font-size: .78rem; }

.year-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.mini-month { padding: 17px; background: rgba(12,15,20,var(--surface-opacity)); backdrop-filter: blur(var(--surface-blur)); -webkit-backdrop-filter: blur(var(--surface-blur)); }
.mini-month > button { width: 100%; margin-bottom: 12px; padding: 0; border: 0; color: var(--text); background: transparent; text-align: left; font-weight: 850; cursor: pointer; }
.mini-month > button:hover { color: var(--accent); }
.mini-weekdays, .mini-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mini-weekdays span { color: #6f798d; text-align: center; font-size: .62rem; font-weight: 800; }
.mini-days button, .mini-days span { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: .68rem; }
.mini-days button { cursor: default; }
.mini-days button.has-events { color: var(--text); background: rgba(106,169,255,.1); cursor: pointer; }
.mini-days button.has-events::after { content: ""; position: absolute; bottom: 2px; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); }
.mini-days button.today { color: #fff; background: var(--accent-strong); }

.event-dialog { width: min(650px, calc(100% - 28px)); padding: 0; overflow: hidden; border: 1px solid #3a465b; border-radius: 20px; color: var(--text); background: linear-gradient(145deg, rgba(23,29,39,var(--surface-opacity)), rgba(13,17,24,var(--surface-opacity))); backdrop-filter: blur(var(--surface-blur)); -webkit-backdrop-filter: blur(var(--surface-blur)); box-shadow: 0 40px 100px rgba(0,0,0,.65); }
.event-dialog::backdrop { background: rgba(3,5,8,.76); backdrop-filter: blur(5px); }
.event-dialog > button { position: absolute; z-index: 2; top: 12px; right: 12px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: rgba(0,0,0,.24); cursor: pointer; }
#event-dialog-content { position: relative; padding: 34px; }
.dialog-accent { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--event-color); }
.event-dialog h2 { margin: 8px 44px 22px 0; font-size: clamp(1.45rem, 4vw, 2.3rem); line-height: 1.08; letter-spacing: -.035em; }
.event-meta { display: grid; gap: 10px; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.event-meta > div { display: grid; grid-template-columns: 90px 1fr; gap: 15px; }
.event-meta span { color: var(--muted); font-size: .8rem; }
.event-meta strong { font-size: .9rem; font-weight: 680; }
.event-description { white-space: pre-wrap; color: #c5ccda; line-height: 1.65; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.dialog-event-list { display: grid; gap: 7px; margin-top: 20px; }

.admin-nav { position: sticky; z-index: 45; top: 72px; isolation: isolate; display: flex; gap: 5px; width: 100%; overflow-x: auto; padding: 9px var(--page-gutter); border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(12,15,20,var(--chrome-opacity)); backdrop-filter: blur(var(--surface-blur)); -webkit-backdrop-filter: blur(var(--surface-blur)); pointer-events: auto; }
.admin-nav a { position: relative; z-index: 1; flex: 0 0 auto; padding: 8px 11px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: .84rem; pointer-events: auto; }
.admin-nav a:hover { color: var(--text); background: rgba(255,255,255,.055); }
.admin-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.admin-header h1 { margin: 4px 0 0; font-size: 2rem; letter-spacing: -.04em; }
.dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 18px; }
.stat-card { padding: 21px; }
.stat-card strong, .stat-card span { display: block; }
.stat-card strong { font-size: 2rem; letter-spacing: -.05em; }
.stat-card span { margin-top: 4px; color: var(--muted); }
.admin-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
.admin-grid .panel { padding: 21px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
td { font-size: .88rem; }
tr:last-child td { border-bottom: 0; }
.table-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.055); font-size: .72rem; }
.badge.ok { color: var(--ok); background: rgba(124,240,192,.08); }
.badge.bad { color: #ffaaaa; background: rgba(255,106,106,.08); }
.badge.warn { color: var(--warn); background: rgba(255,204,102,.08); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 25px; }
.form-grid > h2 { margin: 12px 0 0; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.form-grid .full { grid-column: 1 / -1; }
label { display: grid; gap: 7px; color: #c8cfdb; font-size: .84rem; font-weight: 700; }
label small, .field-help { color: var(--muted); font-size: .74rem; font-weight: 400; line-height: 1.4; }
input, textarea, select { width: 100%; border: 1px solid #303a4e; border-radius: 9px; outline: none; color: var(--text); background: #0c1016; }
input, select { min-height: 42px; padding: 9px 11px; }
textarea { min-height: 135px; padding: 11px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(106,169,255,.1); }
input[type="checkbox"] { width: auto; min-height: auto; }
.checkbox-label { display: flex; align-items: center; gap: 9px; min-height: 42px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding-top: 8px; }
.inline-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.recurrence-fields { display: contents; }
.hidden { display: none !important; }
.inline-error { padding: 11px 13px; border: 1px solid rgba(255,106,106,.35); border-radius: 9px; color: #ffb5b5; background: rgba(255,106,106,.07); }

.auth-shell { display: grid; place-items: center; min-height: calc(100vh - 220px); }
.auth-card { width: min(440px, 100%); padding: 30px; }
.auth-card h1 { margin: 7px 0; font-size: 2.2rem; letter-spacing: -.045em; }
.auth-card label { margin: 16px 0; }
.success-panel { padding: 42px; text-align: center; }
.success-panel .brand-mark { margin: 0 auto 20px; }
.success-panel .form-actions { justify-content: center; margin: 25px 0; }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.check { display: flex; gap: 8px; align-items: center; padding: 10px; border-radius: 9px; background: rgba(255,255,255,.035); }
.check.ok span { color: var(--ok); }
.check.bad span { color: var(--bad); }
.install-shell > .panel { margin-bottom: 18px; padding: 24px; }

.flash { width: auto; margin: 16px var(--page-gutter) 0; padding: 13px 16px; border: 1px solid var(--line); border-radius: 11px; background: rgba(21,26,34,var(--surface-opacity)); backdrop-filter: blur(var(--surface-blur)); -webkit-backdrop-filter: blur(var(--surface-blur)); }
.flash-success { border-color: rgba(124,240,192,.35); color: #b8f8dc; }
.flash-error { border-color: rgba(255,106,106,.4); color: #ffc0c0; }
.flash-warning { border-color: rgba(255,204,102,.4); color: #ffe1a0; }
.empty-state { display: grid; place-items: center; align-content: center; gap: 7px; min-height: 220px; padding: 25px; color: var(--muted); text-align: center; }
.empty-state strong { color: var(--text); font-size: 1.1rem; }
.muted { color: var(--muted); }
.skeleton { color: var(--muted); font-size: .82rem; }
code { padding: 2px 6px; border-radius: 5px; background: rgba(255,255,255,.06); }
.footer { display: flex; justify-content: space-between; gap: 20px; width: auto; margin: 0 var(--page-gutter); padding: 25px 12px 35px; border-top: 1px solid rgba(255,255,255,.07); border-radius: 14px 14px 0 0; color: #8a94a7; background: rgba(9,11,15,calc(var(--chrome-opacity) * .52)); backdrop-filter: blur(var(--surface-blur)); -webkit-backdrop-filter: blur(var(--surface-blur)); font-size: .76rem; }

/*
 * Die Monatsansicht braucht horizontal mehr Platz als eine gewöhnliche
 * Inhaltskarte. Darum wandert die Seitenleiste bereits bei mittleren
 * Breiten oberhalb des Kalenders, statt den Kalender zusammenzudrücken.
 */
@media (max-width: 1280px) {
    .calendar-app { grid-template-columns: minmax(0, 1fr); }
    .calendar-sidebar { grid-template-columns: repeat(3, minmax(0, 1fr)); position: static; }
    .calendar-sidebar .panel { min-width: 0; }
    .year-grid { grid-template-columns: repeat(3, 1fr); }
    .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Reagiert auch dann korrekt, wenn der Kalender in einem schmalen Container
   oder per iframe eingebettet wird, obwohl das Browserfenster selbst breit ist. */
@container public-shell (max-width: 1240px) {
    .calendar-app { grid-template-columns: minmax(0, 1fr); }
    .calendar-sidebar { grid-template-columns: repeat(3, minmax(0, 1fr)); position: static; }
    .calendar-sidebar .panel { min-width: 0; }
}

@media (max-width: 800px) {
    :root { --page-gutter: 11px; }
    .install-shell { width: calc(100% - 22px); }
    .topbar { min-height: 64px; padding: 9px 12px; }
    .brand small { display: none; }
    .topnav a { padding: 8px; font-size: .8rem; }
    .admin-nav { top: 64px; }
    .hero { display: block; padding: 25px; }
    .hero h1 { font-size: 2.4rem; }
    .hero-actions { margin-top: 22px; }
    .calendar-sidebar { grid-template-columns: 1fr; }
    .category-panel, .subscribe-panel { display: none; }
    .calendar-toolbar { grid-template-columns: 1fr auto; }
    .calendar-toolbar h2 { grid-column: 1 / -1; grid-row: 1; }
    .toolbar-group { grid-row: 2; }
    .view-switch { grid-row: 2; }
    .view-switch button[data-view="year"] { display: none; }
    .month-day { min-height: 92px; padding: 5px; }
    .event-chip { grid-template-columns: 1fr; gap: 0; padding: 4px; }
    .event-chip span { display: none; }
    .event-chip strong { font-size: .65rem; }
    .agenda-day { grid-template-columns: 1fr; gap: 5px; }
    .event-card.horizontal { grid-template-columns: 80px minmax(0,1fr); }
    .year-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; padding: 18px; }
    .form-grid .full { grid-column: auto; }
    .inline-fields { grid-template-columns: 1fr; }
    .footer { display: grid; }
}

@media (max-width: 520px) {
    .brand-mark { width: 38px; height: 38px; border-radius: 10px; font-size: .82rem; }
    .brand strong { font-size: .85rem; }
    .public-shell { padding-top: 18px; }
    .hero { border-radius: 17px; }
    .hero h1 { font-size: 2rem; }
    .calendar-main { border-radius: 13px; }
    .calendar-toolbar { padding: 12px 9px; }
    .view-switch button { padding: 5px 7px; }
    .month-day { min-height: 78px; }
    .weekday-header { padding: 8px 3px; }
    .day-number { width: 22px; height: 22px; margin-bottom: 2px; }
    .event-chip { border-left-width: 2px; }
    .event-chip strong { font-size: .59rem; }
    .more-events { font-size: .6rem; padding: 2px; }
    .year-grid { grid-template-columns: 1fr; }
    #event-dialog-content { padding: 26px 20px; }
    .event-meta > div { grid-template-columns: 1fr; gap: 3px; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .check-grid { grid-template-columns: 1fr; }
}

@media print {
    .topbar, .hero-actions, .calendar-sidebar, .calendar-toolbar button, .view-switch, .footer, .admin-nav { display: none !important; }
    body { color: #000; background: #fff; }
    .public-shell { width: 100%; padding: 0; }
    .hero, .panel { border: 1px solid #ccc; color: #000; background: #fff; box-shadow: none; }
    .hero p, .weekday-header, .day-number { color: #444; }
    .calendar-app { display: block; }
    .month-day { min-height: 110px; border-color: #ccc; }
    .event-chip { color: #000; background: #eee; }
}

.brand-logo { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; }
.filter-bar { display: grid; grid-template-columns: minmax(220px,1fr) 260px auto; gap: 10px; margin-bottom: 16px; padding: 14px; }
.table-panel { padding: 20px; }
.audit-list { display: grid; gap: 4px; }
.audit-item { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.audit-item:last-child { border-bottom: 0; }
.audit-item strong { font-size: .85rem; }
.audit-item span { grid-column: 1; color: var(--muted); font-size: .75rem; }
.audit-item small { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #737d90; font-size: .68rem; }
.compact-form { align-content: start; }
.category-preview { display: inline-flex; align-items: center; gap: 9px; }
.category-preview > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--category-color); background: color-mix(in srgb, var(--category-color) 14%, transparent); }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding: 20px; border: 1px solid rgba(255,106,106,.3); border-radius: var(--radius); background: rgba(255,106,106,.045); }
.danger-zone strong, .danger-zone span { display: block; }
.danger-zone span { margin-top: 4px; color: var(--muted); font-size: .82rem; }
.weekday-picker { display: flex; flex-wrap: wrap; gap: 7px; }
.weekday-picker label { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(12,15,20,.72); }
.field-label { display: block; margin-bottom: 8px; color: #c8cfdb; font-size: .84rem; font-weight: 700; }
.exception-panel { margin-top: 18px; padding: 24px; }
.exception-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
.exception-override { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.exception-override .full { grid-column: 1 / -1; }
.logo-preview { display: flex; align-items: center; gap: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(12,15,20,calc(var(--surface-opacity) * .88)); }
.logo-preview img { max-width: 180px; max-height: 90px; object-fit: contain; }
.separator { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.separator::before, .separator::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.import-note { display: grid; gap: 4px; padding: 13px; border: 1px solid rgba(106,169,255,.25); border-radius: 10px; background: rgba(106,169,255,.055); }
.import-note span { color: var(--muted); font-size: .8rem; }
.backup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.backup-card { padding: 24px; }
.backup-card h2 { margin-top: 7px; }
.backup-card p { color: var(--muted); line-height: 1.55; }
.restore-zone { display: grid; grid-template-columns: 1fr 1.4fr; }
.restore-form { display: grid; grid-template-columns: 1fr 220px auto; gap: 9px; align-items: center; }

@media (max-width: 800px) {
    .filter-bar { grid-template-columns: 1fr; }
    .exception-form, .exception-override { grid-template-columns: 1fr; }
    .exception-override .full { grid-column: auto; }
    .backup-grid { grid-template-columns: 1fr; }
    .danger-zone, .restore-zone { display: grid; }
    .restore-form { grid-template-columns: 1fr; }
}

.settings-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line); }
.settings-section-heading h2 { margin: 5px 0 0; }
.settings-section-heading p { max-width: 580px; margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.5; text-align: right; }
.background-preview { display: grid; grid-template-columns: minmax(260px, 1.25fr) minmax(220px, .75fr); gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(12,15,20,calc(var(--surface-opacity) * .88)); }
.background-preview-image { position: relative; min-height: 180px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background-color: var(--bg-deep); background-position: center; background-repeat: no-repeat; background-size: cover; }
.background-preview-image::before { content: ""; position: absolute; inset: 0; background: inherit; opacity: var(--preview-opacity, .26); }
.background-preview-image::after { content: "Vorschau"; position: absolute; right: 10px; bottom: 10px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; color: rgba(255,255,255,.75); background: rgba(9,11,15,.72); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.background-preview > div:last-child { display: grid; gap: 7px; }
.background-preview strong, .background-preview span { display: block; }
.background-preview span { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.range-field { display: grid; grid-template-columns: minmax(0,1fr) 64px; gap: 12px; align-items: center; min-height: 42px; }
.range-field input[type="range"] { min-height: auto; padding: 0; accent-color: var(--accent); }
.range-field output { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }

@media (max-width: 800px) {
    .settings-section-heading { display: grid; align-items: start; }
    .settings-section-heading p { text-align: left; }
    .background-preview { grid-template-columns: 1fr; }
    .background-preview-image { min-height: 150px; }
}



/* Einstellbare Glasflächen – Version 1.0.6 */
.public-body { --surface-opacity: var(--public-surface-opacity, .64); }
.admin-body { --surface-opacity: var(--admin-surface-opacity, .90); }
.surface-preview { position: relative; min-height: 270px; overflow: hidden; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background-color: var(--bg-deep); background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: inset 0 0 80px rgba(0,0,0,.24); }
.surface-preview::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(9,11,15,.18), rgba(9,11,15,.38)); }
.surface-preview-chrome, .surface-preview-card { position: relative; z-index: 1; border: 1px solid rgba(255,255,255,.11); box-shadow: 0 12px 34px rgba(0,0,0,.18); }
.surface-preview-chrome { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 16px; border-radius: 11px; background: rgba(9,11,15,var(--preview-chrome-opacity,.86)); backdrop-filter: blur(var(--preview-blur,12px)); -webkit-backdrop-filter: blur(var(--preview-blur,12px)); }
.surface-preview-chrome span { color: var(--muted); font-size: .78rem; }
.surface-preview-content { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px; }
.surface-preview-card { display: grid; gap: 7px; min-height: 130px; align-content: end; padding: 18px; border-radius: 13px; backdrop-filter: blur(var(--preview-blur,12px)); -webkit-backdrop-filter: blur(var(--preview-blur,12px)); }
.surface-preview-card.is-public { background: linear-gradient(145deg, rgba(21,26,34,var(--preview-public-opacity,.64)), rgba(12,15,20,var(--preview-public-opacity,.64))); }
.surface-preview-card.is-admin { background: linear-gradient(145deg, rgba(21,26,34,var(--preview-admin-opacity,.90)), rgba(12,15,20,var(--preview-admin-opacity,.90))); }
.surface-preview-card strong, .surface-preview-card small { display: block; }
.surface-preview-card small { color: var(--muted); font-weight: 400; }

@media (max-width: 800px) {
    .surface-preview-content { grid-template-columns: 1fr; margin-top: 18px; }
    .surface-preview-chrome { align-items: flex-start; flex-direction: column; gap: 4px; }
}