/* ============================================================
   Quizlabor CMS — Stylesheet
   Farben als RGB-Triplets:
     rgb(var(--primaryColor))
     rgba(var(--primaryColor), 0.7)
   ============================================================ */

/* ── Farbvariablen ────────────────────────────────────────────────────────── */
:root {
    /* Akzentfarben */
    --primaryColor:    255, 213,   0;   /* Gelb          */
    --secondaryColor:  255, 179,   0;   /* Amber         */
    --tertiaryColor:   200, 140,   0;   /* Amber dunkel  */

    /* Hintergründe — Dark Mode ist Standard */
    --bg-base:          15,  23,  42;   /* slate-900     */
    --bg-surface:       30,  41,  59;   /* slate-800     */
    --bg-surface-2:     15,  23,  42;   /* slate-900     */
    --bg-nav:           22,  33,  55;

    /* Text */
    --textColor:       226, 232, 240;   /* slate-200     */
    --textMuted:       148, 163, 184;   /* slate-400     */
    --textNav:         203, 213, 225;   /* slate-300     */
    --textOnPrimary:    15,  23,  42;   /* dunkel auf gelb */

    /* Rahmen */
    --borderColor:      51,  65,  85;   /* slate-700     */

    /* Schatten */
    --shadowColor:       0,   0,   0;
    --shadowOpacity:    0.4;

    /* Statusfarben */
    --colorSuccess:    110, 231, 183;   /* emerald-300   */
    --colorWarning:    252, 211,  77;   /* amber-300     */
    --colorDanger:     252, 165, 165;   /* red-300       */
    --colorInfo:       147, 197, 253;   /* blue-300      */

    /* Event-Farben im Kalender */
    --eventDefault:    147, 197, 253;   /* blue-300      */
    --eventOwn:        255, 179,   0;   /* secondaryColor */
}

[data-theme="light"] {
    --bg-base:         243, 244, 246;   /* gray-100      */
    --bg-surface:      255, 255, 255;
    --bg-surface-2:    249, 250, 251;   /* gray-50       */
    --bg-nav:           22,  33,  55;   /* Navbar bleibt dunkel */

    --textColor:        31,  41,  55;   /* gray-800      */
    --textMuted:       107, 114, 128;   /* gray-500      */
    --textNav:         203, 213, 225;

    --borderColor:     229, 231, 235;   /* gray-200      */
    --shadowOpacity:    0.1;

    --colorSuccess:     16, 185, 129;   /* emerald-500   */
    --colorWarning:    245, 158,  11;   /* amber-500     */
    --colorDanger:     239,  68,  68;   /* red-500       */
    --colorInfo:        59, 130, 246;   /* blue-500      */

    --eventDefault:     96, 165, 250;   /* blue-400      */
}

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    background: rgb(var(--bg-base));
    color: rgb(var(--textColor));
}

a { color: rgb(var(--primaryColor)); text-decoration: none; }
a:hover { text-decoration: underline; }

input, select, textarea, button { font-family: inherit; font-size: inherit; }

/* ── Layout utilities ─────────────────────────────────────────────────────── */
.min-h-full  { min-height: 100%; }
.h-full      { height: 100%; }
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }
.hidden      { display: none; }
.block       { display: block; }

.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.flex-1          { flex: 1; }
.items-center    { align-items: center; }
.items-end       { align-items: flex-end; }
.items-baseline  { align-items: baseline; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }

.gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem;  } .gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem;    } .gap-6 { gap: 1.5rem;  } .gap-8 { gap: 2rem;    }

.w-full    { width: 100%;   } .w-32 { width: 8rem; } .w-24 { width: 6rem; }
.max-w-lg  { max-width: 32rem; } .max-w-7xl { max-width: 80rem; }
.w-4  { width:  1rem;   } .h-4  { height:  1rem;   }
.w-5  { width:  1.25rem;} .h-5  { height:  1.25rem;}
.w-6  { width:  1.5rem; } .h-6  { height:  1.5rem; }
.w-10 { width:  2.5rem; } .h-10 { height:  2.5rem; }
.min-h-0        { min-height: 0; }
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.relative { position: relative; } .absolute { position: absolute; }
.fixed    { position: fixed;    } .inset-0  { inset: 0; }

/* Spacing */
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-1 { margin-bottom:.25rem } .mb-2 { margin-bottom:.5rem  } .mb-3 { margin-bottom:.75rem }
.mb-4 { margin-bottom:1rem   } .mb-6 { margin-bottom:1.5rem } .mb-8 { margin-bottom:2rem   }
.mt-1 { margin-top:.25rem    } .mt-2 { margin-top:.5rem     } .mt-4 { margin-top:1rem      }
.ml-1 { margin-left:.25rem   } .ml-2 { margin-left:.5rem    } .ml-10{ margin-left:2.5rem   }
.mr-1 { margin-right:.25rem  }

.p-1 { padding:.25rem } .p-2 { padding:.5rem   } .p-4  { padding:1rem   }
.p-6 { padding:1.5rem } .p-8 { padding:2rem    }
.px-1 { padding-left:.25rem;  padding-right:.25rem;  }
.px-2 { padding-left:.5rem;   padding-right:.5rem;   }
.px-3 { padding-left:.75rem;  padding-right:.75rem;  }
.px-4 { padding-left:1rem;    padding-right:1rem;    }
.px-6 { padding-left:1.5rem;  padding-right:1.5rem;  }
.px-8 { padding-left:2rem;    padding-right:2rem;    }
.py-1 { padding-top:.25rem;   padding-bottom:.25rem; }
.py-2 { padding-top:.5rem;    padding-bottom:.5rem;  }
.py-3 { padding-top:.75rem;   padding-bottom:.75rem; }
.py-4 { padding-top:1rem;     padding-bottom:1rem;   }
.py-6 { padding-top:1.5rem;   padding-bottom:1.5rem; }
.py-8 { padding-top:2rem;     padding-bottom:2rem;   }
.py-12 { padding-top:3rem;    padding-bottom:3rem;   }
.py-16 { padding-top:4rem;    padding-bottom:4rem;   }
.pt-2  { padding-top:.5rem;   } .pb-2  { padding-bottom:.5rem;  }
.pt-0  { padding-top:0;       } .pb-4  { padding-bottom:1rem;   }

/* Typography */
.text-xs   { font-size:.75rem;   line-height:1rem;    }
.text-sm   { font-size:.875rem;  line-height:1.25rem; }
.text-base { font-size:1rem;     line-height:1.5rem;  }
.text-lg   { font-size:1.125rem; line-height:1.75rem; }
.text-xl   { font-size:1.25rem;  line-height:1.75rem; }
.text-2xl  { font-size:1.5rem;   line-height:2rem;    }
.text-3xl  { font-size:1.875rem; line-height:2.25rem; }

.font-medium  { font-weight:500; } .font-semibold { font-weight:600; }
.font-bold    { font-weight:700; } .font-mono { font-family:ui-monospace,monospace; }
.text-left    { text-align:left;   } .text-center { text-align:center; }
.text-right   { text-align:right;  }
.whitespace-nowrap { white-space:nowrap; }
.truncate     { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leading-tight { line-height:1.25; }
.tracking-tight { letter-spacing:-0.025em; }

/* Semantic text colors */
.text-base-color { color: rgb(var(--textColor));    }
.text-muted      { color: rgb(var(--textMuted));    }
.text-primary    { color: rgb(var(--primaryColor)); }
.text-white      { color: #ffffff; }
.text-on-primary { color: rgb(var(--textOnPrimary)); }
.text-success    { color: rgb(var(--colorSuccess)); }
.text-warning    { color: rgb(var(--colorWarning)); }
.text-danger     { color: rgb(var(--colorDanger));  }

/* Borders & Radius */
.rounded    { border-radius:.25rem;  } .rounded-md  { border-radius:.375rem; }
.rounded-lg { border-radius:.5rem;   } .rounded-full { border-radius:9999px; }
.rounded-l-md { border-radius:.375rem 0 0 .375rem; }
.rounded-r-md { border-radius:0 .375rem .375rem 0; }

.border   { border:1px solid rgb(var(--borderColor)); }
.border-t { border-top:1px solid rgb(var(--borderColor)); }
.border-b { border-bottom:1px solid rgb(var(--borderColor)); }
.border-r { border-right:1px solid rgb(var(--borderColor)); }
.border-2 { border:2px solid rgb(var(--borderColor)); }
.border-dashed { border-style:dashed; }
.divide-y > * + * { border-top:1px solid rgb(var(--borderColor)); }

/* Backgrounds */
.bg-base      { background: rgb(var(--bg-base));      }
.bg-surface   { background: rgb(var(--bg-surface));   }
.bg-surface-2 { background: rgb(var(--bg-surface-2)); }
.bg-primary-subtle   { background: rgba(var(--primaryColor),   0.12); }
.bg-secondary-subtle { background: rgba(var(--secondaryColor), 0.12); }
.bg-success { background: rgba(var(--colorSuccess), 0.15); }
.bg-danger  { background: rgba(var(--colorDanger),  0.15); }
.bg-warning { background: rgba(var(--colorWarning), 0.15); }

/* Misc */
.shadow-sm  { box-shadow: 0 1px 3px rgba(var(--shadowColor), var(--shadowOpacity)); }
.shadow     { box-shadow: 0 2px 8px rgba(var(--shadowColor), var(--shadowOpacity)); }
.shadow-lg  { box-shadow: 0 8px 32px rgba(var(--shadowColor), var(--shadowOpacity)); }
.opacity-25 { opacity:.25; } .opacity-60 { opacity:.60; } .opacity-75 { opacity:.75; }
.cursor-pointer { cursor:pointer; }
.transition { transition: background .15s, color .15s, border-color .15s, opacity .15s; }

@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* ============================================================
   Components
   ============================================================ */

/* ── Navbar ───────────────────────────────────────────────────────────────── */
.cms-nav {
    background: rgb(var(--bg-nav));
    border-bottom: 1px solid rgb(var(--borderColor));
    padding: 0;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}
.cms-nav > div {
    height: 100%;
}
.cms-nav-brand {
    height: 100%;
    aspect-ratio: 1 / 1;
    font-weight: 700;
    font-size: 1.1rem;
    color: rgb(var(--primaryColor));
    letter-spacing: -0.02em;
    text-decoration: none;
    background-image: url(/favicon.svg);
}
.cms-nav-brand img {
    margin: 15%;
    height: 70%;
    
}
.cms-nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.cms-nav-link {
    color: rgb(var(--textNav));
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background .15s, color .15s;
    text-decoration: none;
}
.cms-nav-link:hover {
    background: rgba(var(--primaryColor), 0.12);
    color: rgb(var(--primaryColor));
}
.cms-nav-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.cms-nav-user { font-size: .875rem; color: rgb(var(--textNav)); }

/* ── Page header ──────────────────────────────────────────────────────────── */
.cms-page-header {
    background: rgb(var(--bg-surface));
    border-bottom: 1px solid rgb(var(--borderColor));
    padding: 0.875rem 1.5rem;
}
.cms-page-header h1 {
    font-size: 1.125rem;
    font-weight: 600;
}

/* ── Main ─────────────────────────────────────────────────────────────────── */
.cms-main {
    margin: 0 auto;
    padding: 2rem 0.5rem;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
    background: rgb(var(--bg-surface));
    border: 1px solid rgb(var(--borderColor));
    border-radius: .5rem;
    box-shadow: 0 1px 3px rgba(var(--shadowColor), var(--shadowOpacity));
}
.card-body { padding: 1.5rem; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .875rem;
    border-radius: .375rem;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn-primary {
    background: rgb(var(--primaryColor));
    color: rgb(var(--textOnPrimary));
    border-color: rgb(var(--primaryColor));
}
.btn-primary:hover { background: rgba(var(--primaryColor), 0.85); }

.btn-secondary {
    background: transparent;
    color: rgb(var(--textColor));
    border-color: rgb(var(--borderColor));
}
.btn-secondary:hover {
    background: rgba(var(--primaryColor), 0.08);
    border-color: rgb(var(--primaryColor));
    color: rgb(var(--primaryColor));
}

.btn-ghost {
    background: transparent;
    color: rgb(var(--textMuted));
    border-color: transparent;
}
.btn-ghost:hover { color: rgb(var(--textColor)); background: rgba(var(--primaryColor), 0.08); }

.btn-danger {
    background: transparent;
    color: rgb(var(--colorDanger));
    border-color: transparent;
    font-size: .75rem;
}
.btn-danger:hover { background: rgba(var(--colorDanger), 0.1); }

.btn-sm  { padding: .25rem .625rem; font-size: .75rem; }
.btn-icon { padding: .375rem; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-label {
    display: block;
    font-size: .8125rem;
    font-weight: 500;
    color: rgb(var(--textMuted));
    margin-bottom: .375rem;
}
.form-control {
    display: block;
    width: 100%;
    padding: .5rem .75rem;
    font-size: .875rem;
    background: rgb(var(--bg-base));
    color: rgb(var(--textColor));
    border: 1px solid rgb(var(--borderColor));
    border-radius: .375rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    color-scheme: dark;
}
.form-control:focus {
    border-color: rgb(var(--primaryColor));
    box-shadow: 0 0 0 2px rgba(var(--primaryColor), 0.2);
}
.form-control::placeholder { color: rgb(var(--textMuted)); opacity: .7; }
select.form-control { cursor: pointer; }

.form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    font-size: .875rem;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    width: 1rem;
    height: 1rem;
    accent-color: rgb(var(--primaryColor));
    cursor: pointer;
}
.form-group { margin-bottom: 1.25rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table-wrap {
    overflow: hidden;
    border-radius: .5rem;
    border: 1px solid rgb(var(--borderColor));
    background: rgb(var(--bg-surface));
    box-shadow: 0 1px 3px rgba(var(--shadowColor), var(--shadowOpacity));
}
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
thead th {
    padding: .625rem 1rem;
    text-align: left;
    font-size: .75rem;
    font-weight: 500;
    color: rgb(var(--textMuted));
    background: rgb(var(--bg-surface-2));
    border-bottom: 1px solid rgb(var(--borderColor));
}
tbody td {
    padding: .625rem 1rem;
    color: rgb(var(--textColor));
    border-bottom: 1px solid rgba(var(--borderColor), 0.5);
    vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(odd) td  { background: rgba(var(--primaryColor), 0.03); }
tbody tr:hover td { background: rgba(var(--primaryColor), 0.07); }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: .125rem .5rem;
    border-radius: 9999px;
    font-size: .8rem;
    font-weight: 500;
}
.badge-success { background: rgba(var(--colorSuccess), 0.15); color: rgb(var(--colorSuccess)); }
.badge-danger  { background: rgba(var(--colorDanger),  0.15); color: rgb(var(--colorDanger));  }
.badge-warning { background: rgba(var(--colorWarning), 0.15); color: rgb(var(--colorWarning)); }
.badge-muted   { background: rgba(var(--textMuted),    0.15); color: rgb(var(--textMuted));    }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert {
    padding: .75rem 1rem;
    border-radius: .375rem;
    font-size: .875rem;
    margin-bottom: 1rem;
}
.alert-success { background: rgba(var(--colorSuccess), 0.12); color: rgb(var(--colorSuccess)); border: 1px solid rgba(var(--colorSuccess), 0.3); }
.alert-danger  { background: rgba(var(--colorDanger),  0.12); color: rgb(var(--colorDanger));  border: 1px solid rgba(var(--colorDanger),  0.3); }
.alert-warning { background: rgba(var(--colorWarning), 0.12); color: rgb(var(--colorWarning)); border: 1px solid rgba(var(--colorWarning), 0.3); }

/* ── View toggle ──────────────────────────────────────────────────────────── */
.view-toggle {
    display: flex;
    border-radius: .375rem;
    border: 1px solid rgb(var(--borderColor));
    overflow: hidden;
}
.view-toggle a {
    padding: .375rem .875rem;
    font-size: .875rem;
    font-weight: 500;
    color: rgb(var(--textMuted));
    transition: background .15s, color .15s;
    text-decoration: none;
}
.view-toggle a:hover { background: rgba(var(--primaryColor), 0.08); color: rgb(var(--primaryColor)); }
.view-toggle a.active { background: rgb(var(--primaryColor)); color: rgb(var(--textOnPrimary)); }

/* ── Section tabs ─────────────────────────────────────────────────────────── */
.section-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid rgb(var(--borderColor));
    margin-bottom: 1rem;
}
.section-tab {
    padding: .625rem 1rem .5rem;
    font-size: .875rem;
    font-weight: 500;
    color: rgb(var(--textMuted));
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-decoration: none;
    transition: color .15s, border-color .15s;
}
.section-tab:hover { color: rgb(var(--textColor)); text-decoration: none; }
.section-tab.active { color: rgb(var(--primaryColor)); border-bottom-color: rgb(var(--primaryColor)); }

/* ── Calendar ─────────────────────────────────────────────────────────────── */
.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.cal-nav h2 { font-size: 1rem; font-weight: 600; }
.cal-wrap {
    border-radius: .5rem;
    border: 1px solid rgb(var(--borderColor));
    background: rgb(var(--bg-surface));
    overflow: hidden;
}
.cal-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid rgb(var(--borderColor));
}
.cal-header div {
    padding: .5rem;
    text-align: center;
    font-size: .75rem;
    font-weight: 500;
    color: rgb(var(--textMuted));
}
.cal-header div.weekend { background: rgba(var(--bg-surface-2), 1); opacity: .7; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell {
    overflow: hidden;
    min-height: 5.5rem;
    padding: .25rem;
    border-right: 1px solid rgb(var(--borderColor));
    border-bottom: 1px solid rgb(var(--borderColor));
    background: rgb(var(--bg-surface));
}
.cal-cell.weekend  { background: rgb(var(--bg-surface-2)); }
.cal-cell.inactive { opacity: .25; }
.cal-cell.no-border-b { border-bottom: none; }
.cal-cell:nth-child(7n) { border-right: none; }

.cal-day-num {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .25rem;
}
.cal-day-num span {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 500;
    color: rgb(var(--textMuted));
}
.cal-day-num span.today {
    background: rgb(var(--primaryColor));
    color: rgb(var(--textOnPrimary));
}

.cal-event {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    text-align: left;
    font-size: .7rem;
    padding: .125rem .25rem;
    border-radius: .25rem;
    margin-bottom: 2px;
    cursor: pointer;
    line-height: 1.25;
    background: rgba(var(--eventDefault), 0.2);
    color: rgb(var(--textColor));
    border-left: 2px solid rgba(var(--eventDefault), 0.8);
    text-decoration: none;
    transition: background .1s;
}
.cal-event:hover { background: rgba(var(--eventDefault), 0.35); text-decoration: none; }
.cal-event.own   { background: rgba(var(--eventOwn), 0.2); border-left-color: rgb(var(--eventOwn)); }
.cal-event.own:hover { background: rgba(var(--eventOwn), 0.35); }
.cal-event.past  { opacity: .55; }

.cal-legend {
    display: flex;
    gap: 1.5rem;
    margin-top: .75rem;
    font-size: .75rem;
    color: rgb(var(--textMuted));
}
.cal-legend span { display: flex; align-items: center; gap: .375rem; }
.legend-dot {
    width: .75rem;
    height: .75rem;
    border-radius: .125rem;
}
.legend-dot.default { background: rgba(var(--eventDefault), 0.5); }
.legend-dot.own     { background: rgba(var(--eventOwn), 0.7); }

/* ── Users-Table ─────────────────────────────────────────────────────────────── */
#user-table table tr *:nth-child(2)
,#user-table table tr *:nth-child(3) {
    display: none;
}

/* ── Dashboard cards ──────────────────────────────────────────────────────── */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
}
.dash-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: rgb(var(--bg-surface));
    border: 1px solid rgb(var(--borderColor));
    border-radius: .5rem;
    box-shadow: 0 1px 3px rgba(var(--shadowColor), var(--shadowOpacity));
    text-decoration: none;
    color: rgb(var(--textColor));
    transition: box-shadow .15s, border-color .15s;
}
.dash-card:hover {
    box-shadow: 0 4px 12px rgba(var(--shadowColor), var(--shadowOpacity));
    border-color: rgba(var(--primaryColor), 0.5);
    text-decoration: none;
    color: rgb(var(--textColor));
}
.dash-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--primaryColor), 0.12);
    color: rgb(var(--primaryColor));
    flex-shrink: 0;
}
.dash-card-label { font-weight: 500; font-size: .9375rem; }
.dash-card-sub   { font-size: .75rem; color: rgb(var(--textMuted)); margin-top: .125rem; }

/* ── Theme toggle ─────────────────────────────────────────────────────────── */
#theme-toggle {
    background: none;
    border: 1px solid rgb(var(--borderColor));
    border-radius: .375rem;
    padding: .25rem .5rem;
    cursor: pointer;
    font-size: .875rem;
    color: rgb(var(--textNav));
    transition: border-color .15s, color .15s;
}
#theme-toggle:hover { border-color: rgb(var(--primaryColor)); color: rgb(var(--primaryColor)); }

/* ── HTMX indicator ───────────────────────────────────────────────────────── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request { display: flex; justify-content: center; padding: 3rem 0; }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-top: 1rem;
}
.pagination button {
    padding: .25rem .625rem;
    border-radius: .375rem;
    border: 1px solid rgb(var(--borderColor));
    background: transparent;
    color: rgb(var(--textColor));
    cursor: pointer;
    font-size: .875rem;
    transition: background .15s;
}
.pagination button:hover { background: rgba(var(--primaryColor), 0.1); }
.pagination button.active {
    background: rgb(var(--primaryColor));
    color: rgb(var(--textOnPrimary));
    border-color: rgb(var(--primaryColor));
}

/* ── Filter indicator dot ─────────────────────────────────────────────────── */
.filter-dot {
    position: absolute;
    top: 4px; right: 4px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgb(var(--colorWarning));
}

/* ── Popup ────────────────────────────────────────────────────────────────── */
#gPopup-overlay { background: rgba(var(--shadowColor), 0.6) !important; }
#gPopup-panel {
    background: rgb(var(--bg-surface)) !important;
    color: rgb(var(--textColor));
    border: 1px solid rgb(var(--borderColor));
}

/* ── Login ────────────────────────────────────────────────────────────────── */
.login-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}
.login-card {
    width: 100%;
    max-width: 26rem;
    background: rgb(var(--bg-surface));
    border: 1px solid rgb(var(--borderColor));
    border-radius: .75rem;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(var(--shadowColor), var(--shadowOpacity));
    margin-top: 1.5rem;
}
.login-title {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: rgb(var(--primaryColor));
    margin-bottom: .25rem;
}
.login-sub {
    text-align: center;
    font-size: .875rem;
    color: rgb(var(--textMuted));
    margin-bottom: 1.5rem;
}

/* ── x-cloak ──────────────────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Row link (stretch anchor across entire table row) ───────────────────────── */
.row-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
}
.row-link { color: inherit; text-decoration: none; }
.row-link:hover { text-decoration: none; }
tr:has(.row-link) { position: relative; }
tr:has(.row-link):hover td { background: rgba(var(--primaryColor), 0.07); cursor: pointer; }


/* ============================================================
   Responsive — Mobile First
   Breakpoints:
     sm:  480px  — große Phones (Landscape)
     md:  768px  — Tablets
     lg:  1024px — kleine Desktops / Laptop
     xl:  1280px — Desktop
   ============================================================ */

/* ── Base (Mobile / < 480px) ──────────────────────────────────────────────────
   Hier stehen die Styles die auf ALLEN Geräten gelten.
   Überschreibe sie in den Breakpoints unten.
   Faustregel: Mobile zuerst, Desktop ist die Ausnahme.
   ──────────────────────────────────────────────────────────────────────────── */

/* Kalender: auf sehr kleinen Screens als Liste */
.cal-grid,
.cal-header {
    /* Option A: Grid bleibt, aber Zellen werden höher */
    /* Option B: Komplett andere Darstellung — hier eintragen */
}

/* Event-Detailseite: Tabs scrollen horizontal */
.section-tabs {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.section-tab { display: inline-block; }

/* Formulare: volle Breite auf Mobile */
.flex.gap-4 { flex-wrap: wrap; }


/* ── Container Queries ────────────────────────────────────────────────────────
   Für Komponenten die in verschiedenen Breiten vorkommen.
   Eltern-Element braucht: container-type: inline-size;
   ──────────────────────────────────────────────────────────────────────────── */

/* Beispiel: Card reagiert auf eigene Breite statt Viewport
.card-wrapper { container-type: inline-size; }
@container (max-width: 400px) {
    .card { flex-direction: column; }
}
*/


/* ── Fluid Typography (clamp) ─────────────────────────────────────────────────
   Schriftgrößen die sich zwischen Mobile und Desktop flüssig anpassen.
   Syntax: clamp(minimum, bevorzugt, maximum)
   ──────────────────────────────────────────────────────────────────────────── */

/*
   Beispiele:
   font-size: clamp(0.875rem, 2.5vw, 1rem);     -- Fließtext
   font-size: clamp(1rem,     3vw,   1.5rem);    -- Überschriften
   padding:   clamp(1rem,     5vw,   3rem);      -- Seitenränder
*/


/* ── Print ────────────────────────────────────────────────────────────────────
   Falls Event-Detailseiten gedruckt werden sollen
   ──────────────────────────────────────────────────────────────────────────── */
@media print {
    .cms-nav,
    .cms-page-header,
    .btn,
    .section-tabs { display: none; }

    body { background: white; color: black; }
    .card { box-shadow: none; border: 1px solid #ccc; }
}