/* =====================================================================
   RE80s Terminmanager
   Aufbau: 1 Tokens · 2 Basis · 3 Rahmen · 4 Bausteine · 5 Seiten · 6 Druck
   ===================================================================== */

/* ---------- 1  Tokens ---------- */

:root {
    /* Logofarben – nur dekorativ einsetzen (zu wenig Kontrast für Text) */
    --brand-violet: #b843d3;
    --brand-cyan: #55c2f5;
    --brand-gradient: linear-gradient(90deg, var(--brand-violet), var(--brand-cyan));

    --bg: #f3f2f8;
    --surface: #ffffff;
    --surface-2: #f7f6fb;
    --ink: #1d1830;
    --ink-2: #57516d;
    --ink-3: #8a849e;
    --line: #e3e0ec;
    --line-strong: #ccc7da;

    --nav-bg: #ffffff;
    --nav-ink: #1d1830;
    --nav-ink-2: #57516d;

    /* Logo-Violett, leicht vertieft für ausreichenden Kontrast */
    --accent: #9c2fb8;
    --accent-hover: #85259e;
    --accent-ink: #ffffff;
    --accent-soft: #f5e6fa;

    --success: #0b7a63;  --success-bg: #dbf2ea;
    --progress: #8e5600; --progress-bg: #fcefd4;
    --info: #0a6f9e;     --info-bg: #ddf2fc;
    --warning: #a14600;  --warning-bg: #fde5d3;
    --danger: #b3261e;   --danger-bg: #fbe0de;
    --neutral: #4b5070;  --neutral-bg: #e7e9f1;
    --muted: #868ba6;    --muted-bg: #f0f1f5;

    --font: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;

    --radius: 12px;
    --radius-sm: 8px;
    --page-max: 1120px;
    --gap: clamp(1rem, 2.5vw, 1.5rem);
    --bottom-nav: 0px;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #121022;
        --surface: #1b1830;
        --surface-2: #24203d;
        --ink: #efedf7;
        --ink-2: #b3adcb;
        --ink-3: #847e9f;
        --line: #322c4e;
        --line-strong: #443d66;

        --nav-bg: #1b1830;
        --nav-ink: #efedf7;
        --nav-ink-2: #b3adcb;

        --accent: #d17ce8;
        --accent-hover: #de99f0;
        --accent-ink: #1c0824;
        --accent-soft: #3a1f47;

        --success: #4fd1ae;  --success-bg: #123b35;
        --progress: #f3b552; --progress-bg: #3d2c10;
        --info: #72d0fa;     --info-bg: #123349;
        --warning: #ff9f5a;  --warning-bg: #40230f;
        --danger: #ff8278;   --danger-bg: #44191a;
        --neutral: #c0c4dc;  --neutral-bg: #2b3054;
        --muted: #8d92b4;    --muted-bg: #23274a;

        color-scheme: dark;
    }
}

/* ---------- 2  Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 1rem;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 1rem/1.5 var(--font);
    min-height: 100vh;
    padding-bottom: calc(var(--bottom-nav) + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.15; }

h1 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4.5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.005em;
}

h2 {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.print-only { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- 3  Rahmen ---------- */

.topbar {
    position: relative;
    background: var(--nav-bg);
    color: var(--nav-ink);
    padding-top: env(safe-area-inset-top, 0px);
    box-shadow: 0 1px 0 var(--line);
}
.topbar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--brand-gradient);
}

.topbar-inner {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0.5rem var(--gap) 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: inherit;
    text-decoration: none;
}
.brand:hover { color: inherit; }

.brand-logo {
    display: block;
    height: 58px;
    width: auto;
}

.brand-sub {
    padding-left: 0.85rem;
    border-left: 1px solid var(--line-strong);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--nav-ink-2);
}

.mainnav {
    display: flex;
    gap: 0.25rem;
}

.mainnav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-sm);
    color: var(--nav-ink-2);
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.15s, color 0.15s;
}
.mainnav-link:hover { color: var(--nav-ink); background: var(--surface-2); }
.mainnav-link.is-active { color: var(--accent); background: var(--accent-soft); }
.mainnav-link.is-cta { background: var(--accent); color: var(--accent-ink); }
.mainnav-link.is-cta:hover { background: var(--accent-hover); color: var(--accent-ink); }

.page {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--gap);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
}

.page-head-main { min-width: 0; }
.page-head h1 { overflow-wrap: anywhere; }

.page-sub {
    margin: 0.35rem 0 0;
    color: var(--ink-2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.9rem;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.backlink {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    color: var(--ink-2);
    text-decoration: none;
    font-size: 0.95rem;
}
.backlink:hover { color: var(--accent); }

/* Mobil: Navigation als Leiste am unteren Rand */
@media (max-width: 720px) {
    :root { --bottom-nav: 64px; }

    .topbar-inner { justify-content: center; padding-block: 0.5rem 0.65rem; }
    .brand-logo { height: 48px; }

    .mainnav {
        position: fixed;
        z-index: 50;
        left: 0; right: 0; bottom: 0;
        padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
        background: var(--nav-bg);
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 18px rgb(29 24 48 / 0.06);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.25rem;
    }

    .mainnav-link {
        flex-direction: column;
        gap: 0.15rem;
        padding: 0.4rem 0.25rem;
        font-size: 0.72rem;
        justify-content: center;
    }
    .mainnav-link i { font-size: 1.1rem; }

    .hide-sm { display: none !important; }

    .page-head { flex-wrap: nowrap; align-items: flex-start; }
    .page-actions { flex-wrap: nowrap; margin-top: 1.6rem; }
    .page-actions .btn { min-width: 40px; padding: 0.45rem; }
    .page-actions .btn span { display: none; }

    .tab { font-size: 1.08rem; padding-inline: 0.65rem; }
    .form-actions .btn { flex: 1 1 auto; }
}

/* ---------- 4  Bausteine ---------- */

/* Buttons */
.btn {
    --btn-bg: var(--surface);
    --btn-ink: var(--ink);
    --btn-border: var(--line-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 42px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-sm);
    background: var(--btn-bg);
    color: var(--btn-ink);
    font: 600 0.95rem/1.2 var(--font);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { color: var(--btn-ink); border-color: var(--ink-3); }

.btn-primary { --btn-bg: var(--accent); --btn-ink: var(--accent-ink); --btn-border: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-secondary { --btn-bg: var(--surface-2); }

.btn-ghost { --btn-bg: transparent; --btn-border: transparent; --btn-ink: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); border-color: transparent; color: var(--ink); }

.btn-danger-text:hover { color: var(--danger); background: var(--danger-bg); }

.btn-icon { min-width: 40px; min-height: 40px; padding: 0.4rem; }
.btn-block { width: 100%; }

.inline-form { display: inline; margin: 0; }

/* Meldungen */
.flash {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    padding: 0.8rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
}
.flash > i { margin-top: 0.2rem; }
.flash > span { flex: 1; }
.flash-success { background: var(--success-bg); color: var(--success); }
.flash-error   { background: var(--danger-bg);  color: var(--danger); }
.flash-warning { background: var(--warning-bg); color: var(--warning); }
.flash-warning a { color: inherit; text-decoration: underline; }

.flash-close {
    background: none;
    border: 0;
    color: inherit;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
    opacity: 0.7;
}
.flash-close:hover { opacity: 1; }

/* Status-Plaketten */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--tone-bg);
    color: var(--tone);
}

.tone-success  { --tone: var(--success);  --tone-bg: var(--success-bg); }
.tone-progress { --tone: var(--progress); --tone-bg: var(--progress-bg); }
.tone-info     { --tone: var(--info);     --tone-bg: var(--info-bg); }
.tone-warning  { --tone: var(--warning);  --tone-bg: var(--warning-bg); }
.tone-danger   { --tone: var(--danger);   --tone-bg: var(--danger-bg); }
.tone-neutral  { --tone: var(--neutral);  --tone-bg: var(--neutral-bg); }
.tone-muted    { --tone: var(--muted);    --tone-bg: var(--muted-bg); }

.tone-text-danger  { color: var(--danger); font-weight: 600; }
.tone-text-warning { color: var(--warning); font-weight: 600; }

/* Flächen */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--gap);
}

.panel-flush { padding: 0; overflow: hidden; }

.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.panel-flush > .panel-head { padding: var(--gap) var(--gap) 0; margin-bottom: 0.75rem; }

.count {
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-3);
    margin-left: 0.25rem;
}

.link-quiet { color: var(--ink-2); font-size: 0.95rem; }

.empty { padding: 3rem var(--gap); text-align: center; color: var(--ink-2); }
.empty p { margin: 0 0 1rem; }
.empty-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--ink); }
.empty-inline { margin: 0; color: var(--ink-2); padding: 0.5rem 0; }

/* Formulare */
.form-section {
    border: 0;
    margin: 0;
    padding: 0 0 1.5rem;
    min-width: 0;
}
.form-section + .form-section { border-top: 1px solid var(--line); padding-top: 1.25rem; }

.form-section > legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 0.9rem;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
}
.form-section > legend + * { clear: both; }

.legend-note { font-family: var(--font); font-size: 0.95rem; font-weight: 500; color: var(--ink-3); margin-left: 0.4rem; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    gap: 1rem 1.25rem;
}
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr)); }

.field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.field-wide { grid-column: 1 / -1; }

.field > label { font-size: 0.9rem; font-weight: 600; color: var(--ink-2); }
.req { color: var(--accent); }
.field-hint { color: var(--ink-3); font-size: 0.82rem; }

input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
input[type="password"], input[type="date"], input[type="number"], select, textarea {
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: 400 1rem/1.4 var(--font);
    transition: border-color 0.15s, box-shadow 0.15s;
}

textarea { resize: vertical; min-height: 88px; }

select {
    appearance: none;
    padding-right: 2.2rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

input:user-invalid, textarea:user-invalid { border-color: var(--danger); }

input[type="checkbox"] { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }

.form-actions {
    position: sticky;
    bottom: calc(var(--bottom-nav) + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.85rem 0;
    margin-bottom: calc(-1 * var(--gap));
    padding-bottom: var(--gap);
    background: linear-gradient(to bottom, transparent, var(--surface) 0.6rem);
}
.add-row {
    width: 100%;
    min-height: 52px;
    border-style: dashed;
    background: transparent;
    color: var(--ink-2);
}
.add-row:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }

/* Felder mit "Link öffnen"-Knopf */
.linkfield { position: relative; }
.linkfield .field-open {
    position: absolute;
    right: 0.35rem;
    bottom: 0.3rem;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    color: var(--ink-3);
    border-radius: 6px;
}
.linkfield .field-open:hover { color: var(--accent); background: var(--surface-2); }
.linkfield input { padding-right: 2.75rem; }

/* Tabs */
.tabs {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--line-strong);
    margin-bottom: calc(-1 * var(--gap) + 0.5rem);
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.9rem 0.7rem;
    color: var(--ink-2);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }

.tab-count {
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--neutral-bg);
    color: var(--ink-2);
}
.tab.is-active .tab-count { background: var(--accent-soft); color: var(--accent); }

.tabpanel { display: flex; flex-direction: column; gap: var(--gap); }
.tabpanel[hidden] { display: none; }

/* ---------- 5  Seiten ---------- */

/* Übersicht: Kennzahlen */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 1rem var(--gap);
    color: var(--ink);
    text-decoration: none;
    transition: background-color 0.15s;
}
.stat + .stat { border-left: 1px solid var(--line); }
.stat:hover { background: var(--surface-2); color: var(--ink); }

.stat-value {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
}
.stat-label { color: var(--ink-2); font-size: 0.9rem; }
.stat-alert .stat-value { color: var(--accent); }

@media (max-width: 720px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(3) { border-left: 0; }
    .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* Übersicht: Wiedervorlagen */
.reminders { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.reminder {
    display: grid;
    grid-template-columns: 7.5rem 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink);
    text-decoration: none;
}
.reminder:hover { color: var(--ink); background: var(--neutral-bg); }

.reminder-due { display: flex; flex-direction: column; line-height: 1.2; color: var(--tone); }
.reminder-due strong { font-family: var(--font-display); font-size: 1.35rem; }
.reminder-due small { font-size: 0.8rem; font-weight: 600; }
.reminder-due.tone-neutral { color: var(--ink-2); }

.reminder-body { min-width: 0; display: flex; flex-direction: column; }
.reminder-title { font-weight: 600; }
.reminder-meta { color: var(--ink-2); font-size: 0.9rem; }
.reminder-go { color: var(--ink-3); }

@media (max-width: 520px) {
    .reminder { grid-template-columns: 5.5rem 1fr; }
    .reminder-go { display: none; }
}

/* Übersicht: Filter */
.filters {
    padding: 0 var(--gap) 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-bottom: 1px solid var(--line);
}

.filters-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }

.search { position: relative; flex: 1 1 260px; }
.filters-main > .btn-secondary { flex: none; }

.select-icon { position: relative; flex: 0 1 190px; }
.select-icon i { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.select-icon select { padding-left: 2.3rem; }
.select-icon:has(option[value=""]:not(:checked)) select { border-color: var(--accent); }
.search i { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search input { padding-left: 2.4rem; }

.toggle { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 500; color: var(--ink-2); }

.filters-more summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--ink-2);
    padding: 0.25rem 0;
    list-style: none;
}
.filters-more summary::-webkit-details-marker { display: none; }
.filters-more summary:hover { color: var(--ink); }
.filters-more[open] summary { margin-bottom: 0.75rem; }

.filters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 0.75rem 1rem; }


/* Übersicht: Terminliste im Stil einer Tourdaten-Liste */
.month {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 var(--gap);
    padding: 1.25rem 0 0.4rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    border-bottom: 2px solid var(--ink);
}
.month-year { font-weight: 500; color: var(--ink-3); }

.gigs { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.gig + .gig { border-top: 1px solid var(--line); }

.gig-link {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 1.25rem;
    padding: 0.85rem var(--gap);
    color: var(--ink);
    text-decoration: none;
    transition: background-color 0.12s;
}
.gig-link:hover { background: var(--surface-2); color: var(--ink); }

.gig-date {
    display: grid;
    justify-items: center;
    line-height: 1;
    font-family: var(--font-display);
}
.gig-wd  { font-size: 0.9rem; font-weight: 600; color: var(--ink-3); }
.gig-day { font-size: 2.35rem; font-weight: 700; letter-spacing: -0.02em; margin: 0.08rem 0; }
.gig-mon { font-size: 0.95rem; font-weight: 600; color: var(--ink-2); }
.gig-day-none { color: var(--ink-3); }

.gig-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.gig-title { font-weight: 600; font-size: 1.08rem; overflow-wrap: anywhere; }
.gig-meta { display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; color: var(--ink-2); font-size: 0.92rem; }
.gig-meta i { margin-right: 0.35rem; color: var(--ink-3); }
.gig-note { color: var(--ink-2); font-size: 0.92rem; white-space: pre-line; }

/* Terminkonflikt mit dem Urlaubskalender */
.conflict {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.15rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm, 6px);
    background: var(--warning-bg);
    color: var(--warning);
    font-size: 0.88rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.conflict i { margin-top: 0.2rem; }
.panel-links { display: flex; gap: 0.75rem; margin-left: auto; font-size: 0.92rem; }

.gig-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.gig-counts { display: flex; gap: 0.85rem; color: var(--ink-3); font-size: 0.85rem; }
.gig-counts i { margin-right: 0.25rem; }
.gig-counts .is-complete { color: var(--success); font-weight: 600; }

.gig.is-today .gig-day { color: var(--accent); }
.gig.is-today .gig-link { box-shadow: inset 3px 0 0 var(--accent); }
.gig.is-past .gig-link { opacity: 0.55; }

@media (max-width: 620px) {
    .gig-link {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        grid-template-areas: "date main" "date side";
        gap: 0.4rem 0.9rem;
        align-items: start;
    }
    .gig-date { grid-area: date; padding-top: 0.1rem; }
    .gig-main { grid-area: main; }
    .gig-side { grid-area: side; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
    .gig-day { font-size: 2rem; }
}

/* Bearbeiten: Kontakte */
.contacts { display: grid; gap: var(--gap); }

.contact {
    margin: 0;
    padding: var(--gap);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    min-width: 0;
}
.contact.is-prio { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }

.contact-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }

.prio-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--ink-3);
    padding: 0.3rem 0.65rem 0.3rem 0.3rem;
    border-radius: 999px;
}
.prio-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.prio-toggle i { font-size: 1.05rem; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); }
.prio-toggle:has(input:checked) { color: var(--accent); background: var(--accent-soft); }
.prio-toggle:has(input:checked) i { background: var(--accent); color: var(--accent-ink); }
.prio-toggle:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.tabpanel > .form { display: flex; flex-direction: column; gap: var(--gap); }
#panel-kontakte .form-actions { background: linear-gradient(to bottom, transparent, var(--bg) 0.6rem); }

/* Bearbeiten: Notizen */
.note-editor { padding: 0; }
.note-editor > summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem var(--gap);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    list-style: none;
}
.note-editor > summary::-webkit-details-marker { display: none; }
.note-editor > summary i { color: var(--accent); font-size: 1rem; }
.note-editor > .form { padding: 0 var(--gap) var(--gap); }
.note-editor[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: var(--gap); }

.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }

.note {
    padding: 1rem var(--gap);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.note.is-editing { border-color: var(--accent); }

.note-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin-bottom: 0.3rem; }
.note-date { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.note-channel { color: var(--ink-2); font-size: 0.92rem; }
.note-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.25rem; }
.note-text { margin: 0.35rem 0 0; color: var(--ink); max-width: 75ch; overflow-wrap: anywhere; }

.note-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; }
.note-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; color: var(--ink-2); font-size: 0.9rem; margin: 0.4rem 0 0; }
.note-foot .note-meta { margin: 0; }
.note-meta i { margin-right: 0.35rem; }
.note-actions { display: flex; gap: 0.15rem; margin-left: auto; }

/* Bearbeiten: Checkliste */
.tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 0.6rem; }

.task {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.15s, border-color 0.15s;
}
.task:hover { border-color: var(--ink-3); }
.task input { position: absolute; opacity: 0; pointer-events: none; }

.task-box {
    width: 22px; height: 22px;
    flex: none;
    display: grid; place-items: center;
    border: 2px solid var(--line-strong);
    border-radius: 6px;
    color: transparent;
    font-size: 0.75rem;
}
.task-icon { color: var(--ink-3); width: 1.1rem; text-align: center; }

.task:has(input:checked) { background: var(--success-bg); border-color: transparent; color: var(--success); }
.task:has(input:checked) .task-box { background: var(--success); border-color: var(--success); color: var(--surface); }
.task:has(input:checked) .task-icon { color: var(--success); }
.task:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Bearbeiten: Anhänge */
.upload { display: flex; flex-direction: column; gap: 0.75rem; }

.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.75rem 1rem;
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius);
    text-align: center;
    color: var(--ink-2);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone > i { font-size: 1.75rem; color: var(--ink-3); }
.dropzone small { color: var(--ink-3); }
.dropzone-text { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.has-file { border-style: solid; border-color: var(--success); }
.dropzone.has-file > i { color: var(--success); }
.dropzone:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.upload .btn { align-self: flex-start; }

.files { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }

.file {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.6rem 0.75rem 0.6rem var(--gap);
}
.file + .file { border-top: 1px solid var(--line); }
.file-icon { font-size: 1.25rem; color: var(--ink-3); }
.file-name { font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.file-name:hover { color: var(--accent); text-decoration: underline; }
.file-date { color: var(--ink-3); font-size: 0.88rem; }
.file-actions { display: flex; gap: 0.15rem; }

@media (max-width: 520px) {
    .file { grid-template-columns: auto minmax(0, 1fr) auto; }
    .file-date { display: none; }
}

/* Druckansicht */
.sheet h2 { margin-bottom: 1rem; }

.details {
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) 1fr;
    margin: 0;
}
.details dt, .details dd { padding: 0.55rem 0; border-top: 1px solid var(--line); margin: 0; }
.details dt { color: var(--ink-2); font-weight: 600; padding-right: 1rem; }
.details dd { overflow-wrap: anywhere; }
.details dt:first-of-type, .details dd:first-of-type { border-top: 0; }

@media (max-width: 560px) {
    .details { grid-template-columns: 1fr; }
    .details dt { padding-bottom: 0; }
    .details dd { border-top: 0; padding-top: 0.15rem; }
}

.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 0.4rem 1rem; }
.checklist li { display: flex; gap: 0.55rem; align-items: center; color: var(--ink-2); }
.checklist li.is-done { color: var(--success); font-weight: 600; }

.contact-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0.75rem; }
.contact-view { padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.contact-view.is-prio { border-color: var(--accent); }
.contact-view p { margin: 0.15rem 0; overflow-wrap: anywhere; }
.contact-view i { width: 1.2rem; color: var(--ink-3); }
.contact-view .fa-star { color: var(--accent); }
.contact-name { font-weight: 600; font-size: 1.05rem; }
.contact-notes { color: var(--ink-2); font-size: 0.92rem; margin-top: 0.4rem !important; }

/* Kalender */
.year-switch { display: flex; align-items: center; gap: 0.25rem; }
.year-current { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; min-width: 3.5rem; text-align: center; }

.legend-dot { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; margin-right: -0.5rem; vertical-align: -1px; }
.legend-form { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0.35rem 0 0.25rem; }
.legend-form .legend-dot { margin-right: 0; }
.legend-form .toggle input:not(:checked) ~ * { opacity: 0.45; }

/* Status-Filter im Kalender: Plaketten zum An-/Abwählen */
.status-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; flex-basis: 100%; }
.status-chip { position: relative; cursor: pointer; }
.status-chip input { position: absolute; opacity: 0; pointer-events: none; }
.status-chip span {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-3);
    background: var(--surface);
    transition: background-color 0.12s, color 0.12s;
}
.status-chip input:checked + span { background: var(--tone-bg); color: var(--tone); border-color: transparent; }
.status-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.status-chip:hover span { border-color: var(--tone); }
.legend-dot.is-appt { background: var(--accent); }
.legend-dot.is-note { border: 2px solid var(--info); }
.legend-dot.is-vacation { background: var(--warning); }

.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--gap); align-items: start; }

.month-sheet { padding: 1rem; }
.month-sheet h2 { margin-bottom: 0.6rem; }
.month-sheet.is-current { border-color: var(--accent); }
.month-sheet.is-current h2 { color: var(--accent); }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.cal-wd { font-size: 0.75rem; font-weight: 600; color: var(--ink-3); padding-bottom: 0.2rem; }

.cal-day {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 6px;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
    text-decoration: none;
}
.cal-day.is-blank { visibility: hidden; }
a.cal-day:hover { filter: brightness(1.1); }
.cal-day.has-note { box-shadow: inset 0 0 0 2px var(--info); color: var(--info); font-weight: 600; }
.cal-day.has-appt { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.cal-day.has-appt.has-note { box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 4px var(--surface); }
.cal-day.has-vacation { background: var(--warning-bg); color: var(--warning); font-weight: 700; }
.cal-day.has-vacation.has-note { box-shadow: inset 0 0 0 2px var(--info); }
.cal-day.has-vacation.has-appt { background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 0 0 3px var(--warning); }
.cal-day.is-today { outline: 2px solid var(--ink); outline-offset: -1px; color: var(--ink); font-weight: 700; }
.cal-day.is-today.has-appt { color: var(--accent-ink); }

.agenda { list-style: none; margin: 0.9rem 0 0; padding: 0.6rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.15rem; }
.agenda li { scroll-margin-top: 1rem; }
.agenda li:target .agenda-item { background: var(--accent-soft); }

.agenda-item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.92rem;
}
.agenda-item:hover { background: var(--surface-2); color: var(--ink); }
.agenda-day { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--accent); }
.agenda-item.is-note .agenda-day { color: var(--info); }
.agenda-item.is-vacation { cursor: default; }
.agenda-item.is-vacation:hover { background: none; }
.agenda-item.is-vacation .agenda-day { color: var(--warning); }
.agenda-item .conflict { margin-top: 0.3rem; font-size: 0.8rem; }
.agenda li { scroll-margin-top: 1rem; }
.agenda-item:target { background: var(--warning-bg); }
.agenda-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.agenda-title { font-weight: 600; overflow-wrap: anywhere; }
.agenda-meta { color: var(--ink-3); font-size: 0.85rem; }
.agenda-item .badge { font-size: 0.72rem; }

/* Anmeldung */
body.is-login {
    background:
        radial-gradient(ellipse at 12% 8%, rgb(184 67 211 / 0.16), transparent 50%),
        radial-gradient(ellipse at 88% 92%, rgb(85 194 245 / 0.2), transparent 50%),
        var(--bg);
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1.5rem;
}
body.is-login .page { width: 100%; max-width: 400px; padding: 0; }

.login { display: flex; flex-direction: column; gap: 1.5rem; }

.login-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.login-logo { display: block; width: min(300px, 80vw); height: auto; }
.login-brand .brand-sub {
    margin-top: 0.75rem;
    padding: 0;
    border: 0;
    font-size: 1.35rem;
    color: var(--ink-2);
}

.login-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgb(29 24 48 / 0.08);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.login-card h1 { font-size: 1.8rem; }
.login-card .btn { margin-top: 0.4rem; min-height: 48px; }

/* ---------- 6  Druck ---------- */

@media print {
    :root {
        --bg: #fff; --surface: #fff; --surface-2: #fff; --ink: #000; --ink-2: #333; --ink-3: #555;
        --line: #bbb; --accent: #000; --bottom-nav: 0px;
        color-scheme: light;
    }
    body { font-size: 11pt; padding: 0; }
    .topbar, .mainnav, .no-print, .btn, .flash, .tabs { display: none !important; }
    .print-only { display: block !important; }
    .page { max-width: none; padding: 0; gap: 1rem; }
    .panel { border: 0; padding: 0; break-inside: avoid; }
    .sheet + .sheet { border-top: 1px solid #000; padding-top: 0.75rem; }
    .badge { background: none; color: #000; border: 1px solid #000; padding: 0 0.4rem; }
    a { color: #000; text-decoration: none; }
    .note { border: 0; border-left: 2px solid #999; border-radius: 0; padding: 0.2rem 0 0.2rem 0.75rem; break-inside: avoid; }
    .contact-view { break-inside: avoid; }
}