/* ==========================================================================
   Crazykrauts – Theme (dunkel / gold)
   Aufbau: 1 Variablen · 2 Basis · 3 Navigation · 4 Komponenten · 5 Startseite
           6 Unterseiten · 7 Kalender · 8 Footer · 9 Animationen
   ========================================================================== */

/* 1 ---------- Variablen ---------- */
:root {
    --ck-bg: #0b0a0f;
    --ck-bg-2: #110f17;
    --ck-surface: #17141f;
    --ck-surface-2: #1f1a29;
    --ck-border: rgba(212, 166, 74, .22);
    --ck-gold: #d4a64a;
    --ck-gold-light: #f7cf5c;
    --ck-gold-dark: #8a5a14;
    --ck-red: #c62a1a;
    --ck-green: #2f5a26;
    --ck-text: #e9e3d5;
    --ck-muted: #a39b8a;
    --ck-discord: #5865f2;
    --ck-radius: 14px;
    --ck-font-head: 'Cinzel', Georgia, serif;
    --ck-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Terminart-Farben kommen aus config event_types (data-ev-color → --ev-color per JS) */

    --bs-body-bg: var(--ck-bg);
    --bs-body-color: var(--ck-text);
    --bs-body-font-family: var(--ck-font-body);
    --bs-link-color-rgb: 247, 207, 92;
    --bs-link-hover-color-rgb: 255, 230, 160;
    --bs-border-color: var(--ck-border);
}
[data-bs-theme=dark] {
    --bs-body-bg: var(--ck-bg);
    --bs-body-color: var(--ck-text);
    --bs-secondary-bg: var(--ck-surface);
    --bs-tertiary-bg: var(--ck-surface-2);
}

/* 2 ---------- Basis ---------- */
body {
    background-color: var(--ck-bg);
    background-image: url("../img/pattern.svg"), radial-gradient(ellipse at top, #16121f 0%, var(--ck-bg) 60%);
    font-family: var(--ck-font-body);
    line-height: 1.65;
    padding-top: 76px;
}
.page-home { padding-top: 0; }

h1, h2, h3, h4, .section-title, .footer-title {
    font-family: var(--ck-font-head);
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ck-gold-light);
}
a { text-decoration: none; }
::selection { background: var(--ck-gold); color: #120a03; }

.skip-link { position: absolute; top: .5rem; left: .5rem; z-index: 2000; background: var(--ck-gold); color: #000; padding: .5rem 1rem; border-radius: 8px; }
.text-ck-muted { color: var(--ck-muted) !important; }
.lead-ck { font-size: 1.15rem; color: var(--ck-text); }
.btn-reset { background: none; border: 0; padding: 0; text-align: left; }
.divider { width: min(400px, 80%); height: auto; display: block; margin: .75rem auto 0; }

/* 3 ---------- Navigation ---------- */
.navbar-ck {
    background: rgba(11, 10, 15, .72);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: background .3s, border-color .3s, padding .3s;
    padding-block: .6rem;
}
.navbar-ck.is-scrolled, .navbar-ck:has(.navbar-collapse.show) {
    background: rgba(11, 10, 15, .95);
    border-bottom-color: var(--ck-border);
    padding-block: .35rem;
}
.brand-wordmark { height: 46px; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.7)); transition: transform .3s; }
.navbar-brand:hover .brand-wordmark { transform: rotate(-2deg) scale(1.04); }
.navbar-ck .nav-link {
    font-family: var(--ck-font-head);
    font-weight: 700;
    color: var(--ck-text);
    padding-inline: 1rem !important;
    position: relative;
}
.navbar-ck .nav-link .bi { color: var(--ck-gold); margin-right: .2rem; }
.navbar-ck .nav-link:hover, .navbar-ck .nav-link.active { color: var(--ck-gold-light); }
.navbar-ck .nav-link.active::after {
    content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .15rem; height: 2px;
    background: linear-gradient(90deg, transparent, var(--ck-gold), transparent);
}
.navbar-toggler { border-color: var(--ck-border); color: var(--ck-gold); font-size: 1.5rem; }

/* 4 ---------- Komponenten ---------- */
.ck-card {
    background: linear-gradient(180deg, rgba(31, 26, 41, .92), rgba(20, 17, 27, .92));
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 230, 160, .05);
}

.btn { font-weight: 600; border-radius: 10px; }
.btn-gold {
    --bs-btn-color: #1a0f03;
    --bs-btn-hover-color: #1a0f03;
    --bs-btn-active-color: #1a0f03;
    background: linear-gradient(180deg, #ffe08a, var(--ck-gold) 55%, #a8721f);
    border: 1px solid #ffe9a8;
    box-shadow: 0 6px 20px rgba(212, 166, 74, .3), inset 0 1px 0 rgba(255,255,255,.5);
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.btn-gold:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(212, 166, 74, .45); }
.btn-outline-gold {
    --bs-btn-color: var(--ck-gold-light);
    --bs-btn-border-color: var(--ck-gold);
    --bs-btn-hover-bg: rgba(212, 166, 74, .14);
    --bs-btn-hover-color: #fff2c4;
    --bs-btn-hover-border-color: var(--ck-gold-light);
    --bs-btn-active-bg: rgba(212, 166, 74, .24);
    --bs-btn-active-color: #fff2c4;
    --bs-btn-active-border-color: var(--ck-gold-light);
}
.btn-discord {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ck-discord);
    --bs-btn-border-color: var(--ck-discord);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4752c4;
    --bs-btn-hover-border-color: #4752c4;
    --bs-btn-active-bg: #3c45a5;
    --bs-btn-active-color: #fff;
}
.link-gold { color: var(--ck-gold-light); font-weight: 600; }
.link-gold:hover { color: #fff2c4; }
.link-gold .bi-arrow-right { transition: transform .2s; display: inline-block; }
.link-gold:hover .bi-arrow-right { transform: translateX(4px); }

.badge-ck {
    background: linear-gradient(180deg, #e2321f, #7d0e0a);
    border: 1px solid rgba(255, 200, 150, .4);
    font-family: var(--ck-font-head);
    letter-spacing: .04em;
    font-weight: 700;
}

.section { padding-block: 4.5rem; }
.section--alt { background: linear-gradient(180deg, transparent, rgba(47, 90, 38, .08), transparent); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.section-title { font-size: 1.5rem; margin: 0; }
.section-title .bi { color: var(--ck-gold); margin-right: .35rem; }
.section-title--center { text-align: center; font-size: 2rem; }

/* News-Karte */
.news-card { overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, border-color .25s, box-shadow .25s; }
.news-card:hover { transform: translateY(-4px); border-color: rgba(247, 207, 92, .55); box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(247,207,92,.15); }
.news-card__img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.news-card:hover .news-card__img img { transform: scale(1.06); }
.news-card__img .badge { position: absolute; top: .75rem; left: .75rem; }
.news-card__body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.news-card__body .link-gold { margin-top: auto; }
.news-card__meta { font-size: .82rem; color: var(--ck-muted); margin-bottom: .4rem; }
.news-card__meta .bi { color: var(--ck-gold); }
.news-card__title { font-size: 1.15rem; line-height: 1.35; margin-bottom: .5rem; }
.news-card__title a { color: var(--ck-gold-light); }
.news-card__title a:hover { color: #fff2c4; }
.news-card__teaser { color: var(--ck-text); opacity: .85; font-size: .95rem; }

@media (min-width: 768px) {
    .news-card--featured { flex-direction: row; }
    .news-card--featured .news-card__img { flex: 0 0 55%; aspect-ratio: auto; min-height: 280px; }
    .news-card--featured .news-card__body { justify-content: center; padding: 2rem; }
    .news-card--featured .news-card__title { font-size: 1.6rem; }
}

/* Event-Liste */
.event-list { display: flex; flex-direction: column; gap: .35rem; }
.event-item { display: flex; gap: .9rem; align-items: center; padding: .6rem; border-radius: 10px; transition: background .2s; }
.event-item:hover { background: rgba(255, 230, 160, .05); }
.event-date {
    flex: 0 0 56px; height: 60px; border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #2a2233, #17121e);
    border: 1px solid var(--ev-color, var(--ck-gold));
    box-shadow: inset 0 0 12px color-mix(in srgb, var(--ev-color, var(--ck-gold)) 25%, transparent);
}
.event-date__day { font-family: var(--ck-font-head); font-size: 1.35rem; font-weight: 900; line-height: 1; color: #fff2c4; }
.event-date__mon { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ev-color, var(--ck-gold)); font-weight: 600; }
.event-title { color: var(--ck-text); font-weight: 600; display: block; line-height: 1.3; }
.event-title:hover { color: var(--ck-gold-light); }
.event-meta { font-size: .8rem; color: var(--ck-muted); display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .2rem; }

.ev-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .75rem; font-weight: 600; padding: .1rem .55rem; border-radius: 999px;
    color: var(--ev-color, var(--ck-gold));
    background: color-mix(in srgb, var(--ev-color, var(--ck-gold)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--ev-color, var(--ck-gold)) 45%, transparent);
}

/* Modal */
.modal-ck {
    background: linear-gradient(180deg, rgba(36,30,47,.98), rgba(20,17,27,.98));
    border: 1px solid var(--ck-border); border-top: 3px solid var(--ev-color, var(--ck-gold));
    border-radius: var(--ck-radius); box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 30px color-mix(in srgb, var(--ev-color, var(--ck-gold)) 20%, transparent);
}
.modal-backdrop.show { opacity: .75; }
.modal-ck .modal-header { border-bottom-color: var(--ck-border); }
.modal-ck .modal-footer { border-top-color: var(--ck-border); }
.modal-ck .modal-title { font-size: 1.3rem; margin-top: .3rem; }
.modal-ck .modal-title .bi { color: var(--ev-color); }
.event-dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 1rem 0; }
.event-dl dt { color: var(--ck-muted); font-weight: 600; }
.event-dl dt .bi { color: var(--ck-gold); }
.event-dl dd { margin: 0; }

/* 5 ---------- Startseite ---------- */
.hero {
    position: relative;
    min-height: min(92vh, 860px);
    display: flex; align-items: center;
    padding: 120px 0 140px;
    background: url("../img/kit/hero-darkportal.jpg") 65% center / cover no-repeat, #05060d;
    overflow: hidden;
    isolation: isolate;
}
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(5,6,13,.85) 0%, rgba(5,6,13,.45) 45%, rgba(5,6,13,0) 70%),
                linear-gradient(180deg, rgba(5,6,13,0) 70%, var(--ck-bg) 100%);
}
.hero__inner { position: relative; }
.hero__wordmark { width: min(560px, 100%); height: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.8)); animation: wordmark-in .9s cubic-bezier(.2,1.4,.4,1) both; }
.hero__lead { font-size: 1.2rem; max-width: 560px; margin: 1rem 0 1.75rem; color: #f1ead9; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.hero__lead strong { color: var(--ck-gold-light); }
.hero__embers {
    position: absolute; inset: 0; pointer-events: none; z-index: -1;
    background-image:
        radial-gradient(2px 2px at 20% 80%, #ffb347, transparent),
        radial-gradient(2px 2px at 40% 90%, #ffcf6b, transparent),
        radial-gradient(1.5px 1.5px at 65% 85%, #ff9d2e, transparent),
        radial-gradient(2px 2px at 85% 95%, #ffb347, transparent),
        radial-gradient(1.5px 1.5px at 10% 95%, #ffcf6b, transparent);
    animation: embers 9s linear infinite;
    opacity: .8;
}

.countdown { display: inline-block; padding: 1rem 1.25rem; max-width: 100%; }
.countdown__label { font-size: .85rem; color: var(--ck-muted); margin-bottom: .5rem; font-weight: 600; }
.countdown__label .bi { color: var(--ck-gold); }
.countdown__grid { display: grid; grid-template-columns: repeat(4, minmax(64px, 1fr)); gap: .6rem; }
.countdown__grid > div {
    text-align: center; padding: .5rem .25rem; border-radius: 10px;
    background: rgba(0,0,0,.35); border: 1px solid var(--ck-border);
}
.countdown__grid span { display: block; font-family: var(--ck-font-head); font-weight: 900; font-size: 1.9rem; line-height: 1.1; color: var(--ck-gold-light); font-variant-numeric: tabular-nums; }
.countdown__grid small { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ck-muted); }
.countdown__done { font-family: var(--ck-font-head); font-size: 1.3rem; color: var(--ck-gold-light); }

.facts { margin-top: -70px; position: relative; z-index: 2; }
.fact { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.15rem; height: 100%; }
.fact > .bi { font-size: 1.6rem; color: var(--ck-gold); flex: 0 0 auto; }
.fact__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ck-muted); }
.fact__value { font-weight: 600; color: var(--ck-text); }

.discord-mini { padding: 1.5rem; text-align: center; background: linear-gradient(160deg, rgba(88,101,242,.25), rgba(20,17,27,.95) 60%); }
.discord-mini > .bi { font-size: 2.5rem; color: #fff; }
.discord-mini h3 { font-size: 1.15rem; margin: .5rem 0; }
.discord-mini p { font-size: .9rem; color: var(--ck-muted); }

.feature { padding: 2rem 1.5rem; text-align: center; transition: transform .25s, border-color .25s; }
.feature:hover { transform: translateY(-4px) rotate(-.4deg); border-color: rgba(247,207,92,.5); }
.feature__icon {
    width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%;
    display: grid; place-items: center; font-size: 2rem; color: #1a0f03;
    background: radial-gradient(circle at 35% 30%, #fff1c0, var(--ck-gold) 55%, var(--ck-gold-dark));
    box-shadow: 0 0 0 4px rgba(212,166,74,.15), 0 8px 24px rgba(212,166,74,.25);
}
.feature h3 { font-size: 1.2rem; }
.feature p { color: var(--ck-muted); margin: 0; }

.cta { padding-bottom: 5rem; }
.cta__box {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2rem;
    padding: 2.5rem; border-radius: calc(var(--ck-radius) * 1.5);
    background: linear-gradient(90deg, rgba(14,10,18,.95) 0%, rgba(14,10,18,.8) 45%, rgba(14,10,18,.35) 100%), url("../img/kit/banner-gryphon.jpg") center 40% / cover no-repeat;
    border: 1px solid rgba(247, 207, 92, .35);
    box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 0 80px rgba(212,166,74,.08);
}
.cta__crest { width: 110px; height: auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,.7)); animation: float 5s ease-in-out infinite; }
.cta__text { flex: 1 1 320px; }
.cta__text h2 { font-size: 2rem; }
.cta__text p { margin: 0; color: var(--ck-text); opacity: .9; }

/* 6 ---------- Unterseiten ---------- */
.page-hero { text-align: center; padding: 3.5rem 0 2.5rem; }
.page-hero__icon { font-size: 2.2rem; color: var(--ck-gold); }
.page-hero__title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; margin: .25rem 0; text-shadow: 0 4px 20px rgba(212,166,74,.25); }
.page-hero__sub { color: var(--ck-muted); font-size: 1.1rem; margin: 0; }

.article__hero { height: 340px; overflow: hidden; position: relative; margin-top: -76px; }
.article__hero img { width: 100%; height: 100%; object-fit: cover; }
.article__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,10,15,.3), var(--ck-bg)); }
.article__container { max-width: 860px; margin-top: -120px; position: relative; padding-bottom: 4rem; }
.article__card { padding: 2rem 2.25rem; }
.article__title { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 900; }
.article__lead { font-size: 1.15rem; font-weight: 600; color: #f1ead9; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--ck-muted); --bs-breadcrumb-item-active-color: var(--ck-muted); font-size: .85rem; }

.guild-crest { width: min(320px, 75%); height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)); animation: float 6s ease-in-out infinite; }
.rules { margin: 0; padding-left: 1.3rem; }
.rules li { padding: .35rem 0; }
.rules li::marker { color: var(--ck-gold); font-family: var(--ck-font-head); font-weight: 900; }
.officer { display: flex; align-items: center; gap: .9rem; padding: 1rem; }
.officer__avatar {
    width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center; font-family: var(--ck-font-head); font-weight: 900; font-size: 1.3rem;
    color: #1a0f03; background: radial-gradient(circle at 35% 30%, #fff1c0, var(--ck-gold) 60%, var(--ck-gold-dark));
}
.officer__name { font-weight: 600; }
.officer__role { font-size: .85rem; color: var(--ck-muted); }

.legal h2 { font-size: 1.2rem; }
.error-page { padding-block: 6rem; }

/* Logo im Hero – dunkle Aura dahinter, damit das Emblem vor dem Portal klar steht */
.hero__emblem-wrap { position: relative; }
.hero__emblem-wrap::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: min(520px, 110%); aspect-ratio: 1;
    transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
    background: radial-gradient(circle, rgba(5,6,13,.85) 0%, rgba(5,6,13,.55) 40%, rgba(5,6,13,0) 70%);
}
.hero__emblem {
    position: relative; z-index: 1;
    width: min(400px, 80%); height: auto;
    filter: drop-shadow(0 0 2px rgba(0,0,0,.9)) drop-shadow(0 0 30px rgba(255, 170, 60, .3)) drop-shadow(0 20px 40px rgba(0,0,0,.85));
    animation: float 6s ease-in-out infinite;
}

/* Unterseiten-Köpfe mit Fansite-Kit-Bildern */
.page-hero--ironforge, .page-hero--map, .page-hero--gryphon, .page-hero--portal {
    position: relative; isolation: isolate; padding: 6rem 0 3.5rem; margin-top: -76px; padding-top: calc(76px + 4rem);
}
.page-hero--ironforge::before, .page-hero--map::before, .page-hero--gryphon::before, .page-hero--portal::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-position: center; background-size: cover; background-repeat: no-repeat;
}
.page-hero--ironforge::before { background-image: linear-gradient(180deg, rgba(11,10,15,.55), rgba(11,10,15,.75) 60%, var(--ck-bg)), url("../img/kit/banner-ironforge.jpg"); }
.page-hero--gryphon::before   { background-image: linear-gradient(180deg, rgba(11,10,15,.5), rgba(11,10,15,.75) 60%, var(--ck-bg)), url("../img/kit/banner-gryphon.jpg"); background-position: center 35%; }
.page-hero--portal::before    { background-image: linear-gradient(180deg, rgba(11,10,15,.5), rgba(11,10,15,.75) 60%, var(--ck-bg)), url("../img/kit/banner-darkportal.jpg"); }
.page-hero--map::before       { background-image: linear-gradient(180deg, rgba(11,10,15,.8), rgba(11,10,15,.88) 60%, var(--ck-bg)), url("../img/kit/stormwindmap.jpg"); }
.page-hero--ironforge .page-hero__sub, .page-hero--gryphon .page-hero__sub, .page-hero--map .page-hero__sub, .page-hero--portal .page-hero__sub { color: #e2dacb; text-shadow: 0 2px 8px #000; }

/* Klassen-Showcase */
.showcase__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: .5rem 1rem; }
.showcase__item { margin: 0; text-align: center; width: 110px; transition: transform .3s cubic-bezier(.2,1.6,.4,1); }
.showcase__item img { height: 150px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.7)); }
.showcase__item figcaption { font-family: var(--ck-font-head); font-weight: 700; font-size: .8rem; color: var(--ck-gold); margin-top: .35rem; }
.showcase__item--0 { transform: rotate(-3deg); }
.showcase__item--1 { transform: translateY(-8px) rotate(2deg); }
.showcase__item--2 { transform: rotate(1deg); }
.showcase__item:hover { transform: translateY(-12px) rotate(-4deg) scale(1.08); }

/* Gildenseite: Klassen-Render als Avatar */
.officer__avatar--render { width: 64px; height: 64px; overflow: hidden; background: radial-gradient(circle at 50% 30%, #3a2c18, #120d07); border: 2px solid var(--ck-gold); }
.officer__avatar--render img { width: 100%; height: 160%; object-fit: cover; object-position: top center; transform: translateY(4%); }

/* Footer-Pflichthinweis */
.footer-emblem { height: 72px; width: auto; }
.footer-legal { display: flex; gap: 1.25rem; align-items: center; }
.footer-wowlogo { width: 120px; height: auto; flex: 0 0 auto; border-radius: 6px; opacity: .9; }
@media (max-width: 575.98px) { .footer-legal { flex-direction: column; align-items: flex-start; } }

/* Rechtstexte */
.legal h2 { color: var(--ck-gold-light); border-bottom: 1px solid var(--ck-border); padding-bottom: .35rem; margin-top: 2rem; }
.legal h2:first-of-type { margin-top: .5rem; }
.legal h2[id] { scroll-margin-top: 90px; }
.legal h3 { font-size: 1rem; margin-top: 1.25rem; color: var(--ck-gold); }
.legal p, .legal li { color: var(--ck-text); }
.legal address { font-style: normal; }
.legal-toc { columns: 2; font-size: .9rem; }
@media (max-width: 767.98px) { .legal-toc { columns: 1; } }

/* 7 ---------- Kalender ---------- */
.calendar-card { padding: 1.75rem; position: relative; overflow: hidden; }
.calendar-card::before {           /* goldene Kante oben wie bei den Hero-Elementen */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--ck-gold), var(--ck-gold-light), var(--ck-gold), transparent);
}
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.calendar-kicker { font-size: .75rem; text-transform: uppercase; letter-spacing: .18em; color: var(--ck-muted); font-weight: 600; }
.calendar-kicker .bi { color: var(--ck-gold); }
.calendar-month {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 900; margin: .1rem 0 0;
    text-shadow: 0 4px 20px rgba(212,166,74,.3);
}
.cal-nav {
    width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center; font-size: 1.2rem; color: #1a0f03;
    background: radial-gradient(circle at 35% 30%, #fff1c0, var(--ck-gold) 55%, var(--ck-gold-dark));
    box-shadow: 0 0 0 3px rgba(212,166,74,.15), 0 6px 18px rgba(212,166,74,.25);
    transition: transform .2s, box-shadow .2s;
}
.cal-nav:hover { color: #1a0f03; transform: scale(1.08); box-shadow: 0 0 0 4px rgba(212,166,74,.25), 0 8px 24px rgba(212,166,74,.4); }

.calendar-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; margin-bottom: 1.25rem; }
.ev-today-link { --ev-color: var(--ck-gold-light); }
.ev-today-link:hover { background: rgba(212,166,74,.25); }

.calendar { display: grid; gap: 6px; }
.calendar__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar__head .calendar__cell {
    text-align: center; font-family: var(--ck-font-head); font-weight: 700; color: var(--ck-gold);
    padding: .45rem 0; font-size: .95rem; letter-spacing: .05em;
    border-bottom: 1px solid var(--ck-border);
}
.calendar__head .is-weekend { color: var(--ck-gold-light); }
.calendar__day {
    min-height: 118px; padding: .5rem; border-radius: 10px; min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
    background: linear-gradient(180deg, rgba(36, 30, 47, .85), rgba(20, 17, 27, .85));
    border: 1px solid rgba(212, 166, 74, .10);
    box-shadow: inset 0 1px 0 rgba(255, 230, 160, .04);
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.calendar__day.is-weekend { background: linear-gradient(180deg, rgba(48, 36, 40, .85), rgba(24, 18, 24, .85)); }
.calendar__day:hover { border-color: rgba(212, 166, 74, .45); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.calendar__day.is-out { opacity: .28; }
.calendar__day.has-events { border-color: rgba(212, 166, 74, .28); }
.calendar__day.is-today {
    border-color: var(--ck-gold);
    box-shadow: 0 0 0 1px var(--ck-gold), 0 0 24px rgba(212,166,74,.3), inset 0 0 30px rgba(212,166,74,.12);
}
.calendar__num { font-family: var(--ck-font-head); font-weight: 700; font-size: 1rem; color: var(--ck-muted); line-height: 1.6; }
.has-events .calendar__num { color: var(--ck-text); }
.is-today .calendar__num {
    align-self: flex-start; min-width: 1.9rem; text-align: center; border-radius: 999px; color: #1a0f03;
    background: radial-gradient(circle at 35% 30%, #fff1c0, var(--ck-gold) 60%, var(--ck-gold-dark));
}

.cal-event {
    display: flex; align-items: center; gap: .4rem; width: 100%; text-align: left; cursor: pointer;
    padding: .25rem .35rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--ev-color) 45%, transparent);
    color: var(--ck-text);
    background: linear-gradient(180deg, color-mix(in srgb, var(--ev-color) 22%, #1d1726), color-mix(in srgb, var(--ev-color) 10%, #120f18));
    transition: transform .15s, box-shadow .2s, border-color .2s;
}
.cal-event:hover, .cal-event:focus-visible {
    transform: translateY(-2px); border-color: var(--ev-color);
    box-shadow: 0 6px 16px rgba(0,0,0,.4), 0 0 12px color-mix(in srgb, var(--ev-color) 35%, transparent);
}
.cal-event__icon {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    font-size: .72rem; color: #120f18; background: var(--ev-color);
}
.cal-event__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.cal-event__time { font-size: .7rem; font-weight: 600; color: var(--ev-color); }
.cal-event__title { font-size: .76rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Terminkarten */
.event-card { padding: 1.35rem; display: flex; flex-direction: column; gap: .75rem; position: relative; overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; }
.event-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ev-color); box-shadow: 0 0 12px var(--ev-color); }
.event-card:hover { transform: translateY(-4px); border-color: rgba(247,207,92,.5); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.event-card__head { display: flex; gap: .9rem; align-items: center; }
.event-card__title { font-size: 1.1rem; margin: .35rem 0 0; line-height: 1.3; }
.event-card__meta { list-style: none; padding: 0; margin: 0; font-size: .85rem; color: var(--ck-muted); }
.event-card__meta .bi { color: var(--ck-gold); margin-right: .3rem; }
.event-card__desc { font-size: .92rem; opacity: .9; margin: 0; }

@media (max-width: 767.98px) {
    .calendar-card { padding: 1rem; }
    .calendar, .calendar__row { gap: 3px; }
    .calendar__day { min-height: 58px; padding: .25rem; align-items: center; }
    .calendar__num { font-size: .8rem; }
    .cal-event { padding: 0; border: 0; background: none; justify-content: center; }
    .cal-event:hover { box-shadow: none; }
    .cal-event__text { display: none; }
    .calendar__head .calendar__cell { font-size: .75rem; }
    .cal-nav { width: 38px; height: 38px; }
}

/* 8 ---------- Footer ---------- */
.site-footer { background: linear-gradient(180deg, transparent, #07060a 30%); border-top: 1px solid var(--ck-border); padding: 3rem 0 1.5rem; }
.footer-title { font-size: 1.3rem; }
.footer-links a { color: var(--ck-text); margin-right: 1rem; }
.footer-links a:hover { color: var(--ck-gold-light); }
.footer-hr { border-color: var(--ck-border); opacity: 1; margin: 1.5rem 0 1rem; }

/* Responsive Feinschliff */
@media (max-width: 991.98px) {
    .navbar-ck .navbar-collapse { padding: 1rem 0; }
    .hero { padding-top: 110px; min-height: auto; }
    .hero::before { background: linear-gradient(180deg, rgba(5,6,13,.55), rgba(5,6,13,.75) 60%, var(--ck-bg)); }
}
@media (max-width: 991.98px) {
    .hero__emblem { width: min(220px, 55%); }
}
@media (max-width: 575.98px) {
    .brand-wordmark { height: 36px; }
    .countdown { display: block; }
    .countdown__grid { grid-template-columns: repeat(4, 1fr); gap: .4rem; }
    .countdown__grid span { font-size: 1.4rem; }
    .cta__box { padding: 1.75rem; text-align: center; justify-content: center; }
    .article__card { padding: 1.5rem; }
}

/* 9 ---------- Animationen ---------- */
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }
@keyframes wordmark-in { from { opacity: 0; transform: scale(.85) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes embers { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; transform: translateY(0); } to { transform: translateY(-120px); opacity: 0; } }
.wobble { animation: wobble 2.5s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

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

/* ==========================================================================
   10 ---------- Mitgliederbereich & Verwaltung (v0.4.0)
   ========================================================================== */

/* Navigation: Login / Benutzermenü oben rechts */
.nav-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.user-menu { max-width: 220px; }
.user-menu__name { display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.dropdown-ck {
    --bs-dropdown-bg: #1b1622; --bs-dropdown-border-color: var(--ck-border); --bs-dropdown-link-color: var(--ck-text);
    --bs-dropdown-link-hover-bg: rgba(212,166,74,.12); --bs-dropdown-link-hover-color: var(--ck-gold-light);
    --bs-dropdown-link-active-bg: rgba(212,166,74,.25); box-shadow: 0 18px 40px rgba(0,0,0,.6);
}
.dropdown-ck .bi { color: var(--ck-gold); width: 1.2rem; display: inline-block; }

/* Meldungen */
.flash-stack { position: relative; z-index: 5; padding-top: 1rem; }
.page-home .flash-stack { position: absolute; left: 0; right: 0; top: 86px; z-index: 20; }
.alert-ck {
    background: linear-gradient(180deg, rgba(36,30,47,.97), rgba(22,18,28,.97));
    border: 1px solid var(--ck-border); border-left: 4px solid var(--a, var(--ck-gold)); color: var(--ck-text);
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.alert-ck > .bi { color: var(--a, var(--ck-gold)); margin-right: .35rem; }
.alert-success.alert-ck { --a: #5fcf6a; }
.alert-danger.alert-ck  { --a: #e2452f; }
.alert-warning.alert-ck { --a: #f2c94c; }
.alert-info.alert-ck    { --a: #6fb6ff; }

/* Formulare */
.form-control-ck, .form-select.form-control-ck {
    background-color: rgba(8,7,12,.6); border: 1px solid rgba(212,166,74,.25); color: var(--ck-text);
}
.form-control-ck:focus, .form-select.form-control-ck:focus {
    background-color: rgba(8,7,12,.8); border-color: var(--ck-gold); color: #fff;
    box-shadow: 0 0 0 .2rem rgba(212,166,74,.2);
}
.form-control-ck::placeholder { color: #6f6858; }
.form-label { font-weight: 600; color: #e6dcc6; }
.form-text { color: var(--ck-muted); }
.form-check-input { background-color: rgba(8,7,12,.6); border-color: rgba(212,166,74,.45); }
.form-check-input:checked { background-color: var(--ck-gold); border-color: var(--ck-gold); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(212,166,74,.2); border-color: var(--ck-gold); }
.form-switch .form-check-input:checked { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231a0f03'/%3e%3c/svg%3e"); }
.form-control-color { width: 3rem; padding: .2rem; background: rgba(8,7,12,.6); border-color: rgba(212,166,74,.25); }
.form-card { padding: 2rem; }
.form-card--narrow { max-width: 640px; margin-inline: auto; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.btn-outline-danger { --bs-btn-color: #ff8a7a; --bs-btn-border-color: rgba(226,69,47,.6); --bs-btn-hover-bg: #b3261a; --bs-btn-hover-border-color: #b3261a; }

/* Login / Registrierung */
.auth-section { padding-block: 3.5rem 5rem; }
.auth-card { max-width: 460px; margin: 0 auto; padding: 2.25rem; position: relative; }
.auth-card--wide { max-width: 760px; }
.auth-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: var(--ck-radius) var(--ck-radius) 0 0;
    background: linear-gradient(90deg, transparent, var(--ck-gold), var(--ck-gold-light), var(--ck-gold), transparent); }
.auth-card__emblem { display: block; height: 96px; width: auto; margin: -.5rem auto .5rem; filter: drop-shadow(0 8px 20px rgba(0,0,0,.7)); }
.auth-card__icon { display: block; text-align: center; font-size: 2.6rem; color: var(--ck-gold); margin-bottom: .25rem; }
.auth-card__title { text-align: center; font-size: 2rem; font-weight: 900; margin-bottom: .25rem; }

/* Statuskarten, Rollen */
.status-card { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.35rem; }
.status-card > .bi { font-size: 1.8rem; color: var(--ck-gold); }
.status-card--pending { border-color: rgba(242,201,76,.5); background: linear-gradient(120deg, rgba(242,201,76,.12), rgba(20,17,27,.95) 60%); }
.role-badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: .1rem .55rem; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.role-admin     { color: #ff8a7a; border-color: rgba(226,69,47,.5); background: rgba(226,69,47,.12); }
.role-redakteur { color: #c8a6ff; border-color: rgba(162,116,255,.5); background: rgba(162,116,255,.12); }
.role-mitglied  { color: var(--ck-gold-light); border-color: rgba(212,166,74,.5); background: rgba(212,166,74,.12); }
.role-anwaerter { color: #9fd3a5; border-color: rgba(95,207,106,.45); background: rgba(95,207,106,.1); }

/* Charakterkarten */
.char-card { padding: 1.1rem 1.25rem; height: 100%; display: flex; flex-direction: column; gap: .75rem; position: relative; overflow: hidden; }
.char-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--class-color, var(--ck-gold)); box-shadow: 0 0 14px var(--class-color, var(--ck-gold)); }
.char-card__head { display: flex; gap: .9rem; align-items: center; }
.char-card__crest {
    flex: 0 0 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--ck-font-head); font-weight: 900; font-size: 1.5rem; color: #120f18;
    background: radial-gradient(circle at 35% 30%, #fff 0%, var(--c, var(--ck-gold)) 55%, color-mix(in srgb, var(--c, var(--ck-gold)) 50%, #000));
    box-shadow: 0 0 0 3px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.5);
}
.char-card__name { font-size: 1.2rem; margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.char-card__meta { font-size: .88rem; color: var(--ck-muted); }
.char-class.has-color { color: var(--c); font-weight: 600; }
.badge-main  { background: linear-gradient(180deg, #ffe08a, #b8791b); color: #1a0f03; font-size: .68rem; }
.badge-twink { background: rgba(255,255,255,.08); color: var(--ck-muted); font-size: .68rem; border: 1px solid rgba(255,255,255,.1); }
.char-card__profs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.prof { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; padding: .12rem .5rem; border-radius: 6px; margin: 0 .2rem .2rem 0;
    background: rgba(212,166,74,.1); border: 1px solid rgba(212,166,74,.3); color: #ecdcb6; }
.prof--secondary { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: var(--ck-muted); }
.prof__skill { font-weight: 700; color: var(--ck-gold-light); }
.char-card__story summary { cursor: pointer; color: var(--ck-gold-light); font-size: .88rem; font-weight: 600; }
.char-card__story summary .bi { color: var(--ck-gold); }
.char-card__story-text, .story-text { font-size: .92rem; margin-top: .5rem; white-space: normal; line-height: 1.7; }
.char-card__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.min-w-0 { min-width: 0; }

/* Berufe im Formular */
.prof-grid { display: grid; gap: .35rem; }
.prof-row { display: grid; grid-template-columns: 1fr 96px; gap: .75rem; align-items: center; padding: .3rem .5rem; border-radius: 8px; background: rgba(255,255,255,.02); }
.prof-row:hover { background: rgba(212,166,74,.06); }
.prof-skill:disabled { opacity: .35; }

/* Tabellen (inkl. DataTables) */
.table-ck { --bs-table-bg: transparent; --bs-table-color: var(--ck-text); --bs-table-border-color: rgba(212,166,74,.12);
    --bs-table-hover-bg: rgba(212,166,74,.06); --bs-table-striped-bg: rgba(255,255,255,.02); }
.table-ck thead th { font-family: var(--ck-font-head); color: var(--ck-gold); font-size: .85rem; letter-spacing: .04em; border-bottom-color: var(--ck-border); white-space: nowrap; }
.table-ck tr.is-past td { opacity: .55; }
.dt-container .dt-search input, .dt-container .dt-length select {
    background-color: rgba(8,7,12,.6); border: 1px solid rgba(212,166,74,.25); color: var(--ck-text); border-radius: 8px;
}
.dt-container .dt-search input:focus { border-color: var(--ck-gold); outline: none; box-shadow: 0 0 0 .2rem rgba(212,166,74,.2); }
.dt-container .dt-info, .dt-container label { color: var(--ck-muted); font-size: .85rem; }
.dt-container .pagination { --bs-pagination-bg: transparent; --bs-pagination-color: var(--ck-gold-light); --bs-pagination-border-color: var(--ck-border);
    --bs-pagination-hover-bg: rgba(212,166,74,.12); --bs-pagination-hover-color: #fff2c4; --bs-pagination-hover-border-color: var(--ck-gold);
    --bs-pagination-active-bg: var(--ck-gold); --bs-pagination-active-border-color: var(--ck-gold); --bs-pagination-active-color: #1a0f03;
    --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-color: #5b5547; --bs-pagination-disabled-border-color: var(--ck-border); }
.thumb { width: 96px; height: 54px; object-fit: cover; border-radius: 6px; border: 1px solid var(--ck-border); }
.status-dot { font-size: .8rem; white-space: nowrap; color: var(--ck-muted); }
.status-dot::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .35rem; background: #6f6858; }
.status-dot--live::before { background: #5fcf6a; box-shadow: 0 0 8px #5fcf6a; }
.status-dot--plan::before { background: #f2c94c; }
.user-row-form { display: flex; align-items: center; gap: .5rem; min-width: 210px; }
.user-row-form .form-select { width: auto; }

/* Verwaltung: Kopf & Reiter */
.page-hero--admin { padding: 2.5rem 0 1.5rem; text-align: left; }
.page-hero--admin .page-hero__title { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.admin-kicker { font-size: .78rem; text-transform: uppercase; letter-spacing: .2em; color: var(--ck-muted); font-weight: 600; }
.admin-kicker .bi { color: var(--ck-gold); }
.admin-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--ck-border); }
.admin-tab {
    display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 10px; font-weight: 600; font-size: .9rem;
    color: var(--ck-text); background: rgba(255,255,255,.03); border: 1px solid transparent; transition: background .2s, border-color .2s, color .2s;
}
.admin-tab .bi { color: var(--ck-gold); }
.admin-tab:hover { color: var(--ck-gold-light); border-color: var(--ck-border); }
.admin-tab.active { color: #1a0f03; background: linear-gradient(180deg, #ffe08a, var(--ck-gold) 60%, #a8721f); border-color: #ffe9a8; }
.admin-tab.active .bi { color: #1a0f03; }

/* Initialpasswort */
.secret-box { display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap; padding: 1rem; border-radius: 10px;
    background: rgba(0,0,0,.45); border: 1px dashed var(--ck-gold); }
.secret-box code { font-size: 1.4rem; color: var(--ck-gold-light); letter-spacing: .06em; user-select: all; }

/* Terminart-Auswahl */
.type-picker { display: flex; flex-wrap: wrap; gap: .5rem; }
.type-pill { cursor: pointer; padding: .35rem .8rem; font-size: .85rem; opacity: .6; transition: opacity .2s, transform .2s; }
.btn-check:checked + .type-pill { opacity: 1; transform: translateY(-1px); box-shadow: 0 0 12px color-mix(in srgb, var(--ev-color) 40%, transparent); }
.btn-check:focus-visible + .type-pill { outline: 2px solid var(--ck-gold); outline-offset: 2px; }

/* News-Bildauswahl */
.image-picker { border: 1px solid var(--ck-border); border-radius: 12px; padding: 1rem; display: grid; gap: .5rem; }
.image-picker legend { float: none; width: auto; padding: 0 .4rem; margin: 0; font-size: 1rem; }
.image-picker__current { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--ck-border); margin-bottom: .25rem; }
.preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: .25rem 0 .5rem; }
.preset { cursor: pointer; position: relative; }
.preset input { position: absolute; opacity: 0; }
.preset img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; border: 2px solid transparent; opacity: .6; transition: opacity .2s, border-color .2s; }
.preset input:checked + img { border-color: var(--ck-gold); opacity: 1; box-shadow: 0 0 12px rgba(212,166,74,.45); }
.preset input:focus-visible + img { outline: 2px solid var(--ck-gold-light); }

/* Stammdaten-Zeilen */
.md-head, .md-row { display: grid; gap: .5rem; align-items: center; }
.md-head--class, .md-row--class { grid-template-columns: 1fr 3rem 4.5rem 3rem 2.5rem 2.5rem; }
.md-head--prof, .md-row--prof { grid-template-columns: 1fr 8.5rem 4.5rem 4.5rem 3rem 2.5rem 2.5rem; }
.md-head { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ck-muted); padding: 0 .25rem .4rem; border-bottom: 1px solid var(--ck-border); margin-bottom: .4rem; }
.md-row { padding: .3rem .25rem; border-radius: 8px; }
.md-row:hover { background: rgba(212,166,74,.05); }
.md-row--new { border-top: 1px dashed var(--ck-border); margin-top: .4rem; padding-top: .7rem; }
.md-usage { font-size: .75rem; color: var(--ck-muted); text-align: right; }
@media (max-width: 575.98px) {
    .md-head { display: none; }
    .md-row--class, .md-row--prof { grid-template-columns: 1fr 1fr 1fr; }
    .md-row .form-control:first-of-type { grid-column: 1 / -1; }
}

/* Öffentliche Statistik */
.stats-title { font-family: var(--ck-font-head); color: var(--ck-gold); text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; margin-bottom: 1rem; }
.stat-bar { display: grid; grid-template-columns: 7.5rem 1fr 2rem; gap: .6rem; align-items: center; margin-bottom: .45rem; font-size: .88rem; }
.stat-bar--compact { grid-template-columns: 8.5rem 1fr 1.6rem; font-size: .8rem; margin-bottom: .3rem; }
.stat-bar__track { height: 10px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.stat-bar__fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--ck-gold-dark), var(--ck-gold-light)); transition: width .8s ease; }
.stat-bar__fill.has-color { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, #000), var(--c)); }
.stat-bar__value { text-align: right; font-weight: 700; color: var(--ck-gold-light); }
.level-columns { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; height: 170px; align-items: end; }
.level-col { display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; gap: .3rem; }
.level-col__bar { display: flex; align-items: flex-end; justify-content: center; background: rgba(255,255,255,.04); border-radius: 6px; overflow: hidden; }
.level-col__bar span { display: block; width: 100%; height: 2%; background: linear-gradient(0deg, var(--ck-gold-dark), var(--ck-gold-light)); border-radius: 6px 6px 0 0; transition: height .8s ease; }
.level-col__value { font-weight: 700; color: var(--ck-gold-light); font-size: .9rem; }
.level-col__label { font-size: .7rem; color: var(--ck-muted); white-space: nowrap; }

@media (max-width: 991.98px) {
    .nav-actions { padding-top: .5rem; }
    .page-home .flash-stack { top: 70px; }
}

/* ==========================================================================
   11. Termine: Countdown zum nächsten Termin, Anmeldung, Teilnehmerübersicht (v0.4.2)
   ========================================================================== */
.anchor-offset { scroll-margin-top: 90px; }

/* Countdown-Karte als Link zum Termin */
.countdown--link { color: inherit; text-decoration: none; border-left: 3px solid var(--ev-color, var(--ck-gold)); transition: transform .2s ease, box-shadow .2s ease; }
.countdown--link:hover { color: inherit; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 18px color-mix(in srgb, var(--ev-color, var(--ck-gold)) 25%, transparent); }
.countdown--link .countdown__label .bi { color: var(--ev-color, var(--ck-gold)); }
.countdown__title { font-family: var(--ck-font-head); font-weight: 700; font-size: 1.15rem; color: #fff2c4; margin: -.2rem 0 .6rem; }
.countdown__empty { color: var(--ck-muted); }
.countdown__done .link-gold, .countdown__empty .link-gold { font-family: var(--ck-font-body); font-size: .9rem; margin-left: .4rem; }

.ev-live { --ev-color: #ff5a5a; }
.ev-past { --ev-color: var(--ck-muted); }

/* Startseite: kompakte Klassenstatistik */
.class-mini .stat-bar--compact { grid-template-columns: 6.2rem 1fr 1.6rem; }
.class-mini__foot { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--ck-muted); margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--ck-border); }

/* Status- und Rollenfarben */
.status-yes   { --st: #5fcf6a; }
.status-maybe { --st: #f2c94c; }
.status-no    { --st: #e2452f; }
i.status-yes, i.status-maybe, i.status-no { color: var(--st); }
.role-tank { --role: #6ea8ff; }
.role-heal { --role: #5fcf6a; }
.role-dps  { --role: #ff8a5c; }

/* Auswahlknöpfe (Radio als Buttons) */
.choice-group { display: flex; flex-wrap: wrap; gap: .4rem; }
.btn-choice {
    --c: var(--st, var(--role, var(--ck-gold)));
    border: 1px solid var(--ck-border); color: var(--ck-text); background: rgba(255,255,255,.03);
    border-radius: 999px; padding: .35rem .9rem; font-size: .9rem;
}
.btn-choice .bi { color: var(--c); }
.btn-choice:hover { border-color: var(--c); color: var(--ck-text); }
.btn-check:checked + .btn-choice { background: color-mix(in srgb, var(--c) 22%, transparent); border-color: var(--c); color: #fff; }
.btn-check:focus-visible + .btn-choice { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--c) 40%, transparent); }

.signup-mine { display: flex; gap: .6rem; align-items: center; padding: .6rem .8rem; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--ck-border); font-size: .92rem; }
.signup-mine > .bi { font-size: 1.3rem; }

/* Übersicht */
.signup-total { text-align: center; margin-bottom: .75rem; }
.signup-total__num { display: block; font-family: var(--ck-font-head); font-weight: 900; font-size: 2.6rem; line-height: 1; color: var(--ck-gold-light); }
.signup-total__num small { font-size: 1.2rem; color: var(--ck-muted); }
.signup-total__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ck-muted); }
.signup-counts { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem 1rem; font-size: .85rem; color: var(--ck-muted); }
.signup-counts strong { color: var(--ck-text); }

.role-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.role-tile { display: flex; flex-direction: column; align-items: center; padding: .6rem .3rem; border-radius: 10px; background: color-mix(in srgb, var(--role) 12%, transparent); border: 1px solid color-mix(in srgb, var(--role) 40%, transparent); }
.role-tile .bi { color: var(--role); font-size: 1.2rem; }
.role-tile strong { font-size: 1.3rem; line-height: 1.2; color: #fff; }
.role-tile span { font-size: .72rem; color: var(--ck-muted); text-transform: uppercase; letter-spacing: .08em; }
.role-tile.is-empty { opacity: .45; }

.class-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .4rem; }
.class-tile {
    display: flex; justify-content: space-between; align-items: center; gap: .4rem;
    padding: .35rem .6rem; border-radius: 8px; font-size: .85rem;
    background: color-mix(in srgb, var(--class-color, var(--ck-gold)) 14%, transparent);
    border-left: 3px solid var(--class-color, var(--ck-gold));
}
.class-tile__name { color: var(--class-color, var(--ck-text)); font-weight: 600; }
.class-tile__count { font-weight: 700; color: #fff; }
.class-tile.is-missing { background: rgba(255,255,255,.03); border-left-style: dashed; opacity: .5; }
.class-tile.is-missing .class-tile__count { color: var(--ck-red); }

.role-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; padding: .05rem .5rem; border-radius: 999px; color: var(--role); border: 1px solid color-mix(in srgb, var(--role) 45%, transparent); background: color-mix(in srgb, var(--role) 12%, transparent); }
.signup-group--confirmed { border-top: 3px solid #5fcf6a; }
.signup-group--waitlist  { border-top: 3px solid var(--ck-gold); }
.signup-group--maybe     { border-top: 3px solid #f2c94c; }
.signup-group--no        { border-top: 3px solid #e2452f; opacity: .85; }
.event-detail .event-dl { margin-bottom: 1rem; }

/* ==========================================================================
   12. Serien / Terminverwaltung (v0.5.0)
   ========================================================================== */
.repeat-box { border: 1px solid var(--ck-border); border-radius: 12px; padding: .9rem 1rem .6rem; background: rgba(255,255,255,.02); }
.repeat-box legend { float: none; width: auto; padding: 0 .4rem; margin-bottom: .4rem; font-size: 1rem; }
.btn-choice--day { min-width: 3rem; }
.input-ck { background: var(--ck-surface-2); border-color: var(--ck-border); color: var(--ck-muted); }
.series-note { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .9rem; border-radius: 10px; background: rgba(79,179,255,.08); border: 1px solid rgba(79,179,255,.35); }
.series-note > .bi { color: #4fb3ff; font-size: 1.3rem; }
.series-icon { color: #4fb3ff; }
.ev-nosignup { --ev-color: var(--ck-muted); }

/* ==========================================================================
   13. Kalender: Termin anlegen per „+“ (nur Redakteur+), Addons (v0.6.0)
   ========================================================================== */
.calendar__day { position: relative; }
.cal-add {
    position: absolute; top: .3rem; right: .3rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
    color: var(--ck-gold-light); background: rgba(212,166,74,.12); border: 1px solid var(--ck-border);
    opacity: 0; transition: opacity .15s ease, background .15s ease;
}
.calendar__day:hover .cal-add, .cal-add:focus-visible { opacity: 1; }
.cal-add:hover { background: rgba(212,166,74,.3); color: #fff; }
@media (hover: none) { .cal-add { opacity: .7; } }

.addon-card { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem; height: 100%; position: relative; }
.addon-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.addon-card__name { font-family: var(--ck-font-head); font-weight: 700; font-size: 1.02rem; color: #fff2c4; margin: 0; }
.addon-card__cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ck-muted); }
.addon-card__desc { font-size: .88rem; color: var(--ck-text); margin: 0; flex-grow: 1; }
.addon-card__link { font-size: .85rem; }
.addon-hot {
    display: inline-flex; align-items: center; gap: .25rem; flex-shrink: 0;
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    padding: .1rem .5rem; border-radius: 999px; color: #fff; background: linear-gradient(90deg, #c62a1a, #ff7a2f);
    box-shadow: 0 0 10px rgba(255,106,47,.45);
}
.addon-card.is-hot { border-color: rgba(255,122,47,.45); }
.addon-cat-title { font-family: var(--ck-font-head); font-size: 1.1rem; color: var(--ck-gold-light); margin: 2rem 0 .8rem; display: flex; align-items: center; gap: .5rem; }
.addon-cat-title .badge { font-family: var(--ck-font-body); }
.text-ck-gold { color: var(--ck-gold); }
.addon-intro .addon-hot { vertical-align: middle; }

/* ==========================================================================
   14. Teilen-Leiste (v0.6.1) – reine Links, keine Fremdskripte
   ========================================================================== */
.share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--ck-border); }
.share-bar__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ck-muted); margin-right: .3rem; }
.share-btn {
    --c: var(--ck-gold);
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 2.3rem; height: 2.3rem; padding: 0 .6rem;
    border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
    background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font-size: .95rem; text-decoration: none;
    transition: background .15s ease, transform .15s ease, color .15s ease;
}
.share-btn:hover, .share-btn:focus-visible { background: var(--c); color: #fff; transform: translateY(-1px); }
.share-btn span { font-size: .82rem; }
.share-btn--whatsapp { --c: #25d366; }
.share-btn--x        { --c: #e7e7e7; }
.share-btn--x:hover  { color: #000; }
.share-btn--facebook { --c: #1877f2; }
.share-btn--telegram { --c: #29a9eb; }
.share-btn--reddit   { --c: #ff4500; }
.share-btn--bluesky  { --c: #1185fe; }
.share-btn--mail     { --c: var(--ck-gold); }
.share-btn--copy, .share-btn--native { --c: var(--ck-gold-light); }
.share-btn.is-done   { --c: #5fcf6a; }
@media (max-width: 575.98px) { .share-btn__txt { display: none; } .share-btn.is-done .share-btn__txt { display: inline; } }

/* ==========================================================================
   15. Gildenränge (v0.7.0)
   ========================================================================== */
.md-head--rank, .md-row--rank { grid-template-columns: 1fr 2.5rem; }
.md-head--rank { grid-template-columns: 1fr 4.5rem 5.5rem 3rem 2.5rem 2.5rem; }
.md-row--rank-form { grid-template-columns: 1fr 4.5rem 5.5rem 3rem 2.5rem; padding: 0; }
.md-row--rank-form:hover { background: none; }
@media (max-width: 575.98px) { .md-row--rank-form { grid-template-columns: 1fr 1fr 1fr; } }
.rank-badge {
    display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px;
    color: var(--ck-gold-light); background: rgba(212,166,74,.12); border: 1px solid var(--ck-border); white-space: nowrap;
}
.rank-select { min-width: 10rem; }
.officer__real { font-size: .78rem; color: var(--ck-muted); }
.officer__avatar--class { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c, #d4a64a) 75%, #fff), color-mix(in srgb, var(--c, #d4a64a) 55%, #000)); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.hero__share .share-bar { margin-top: 0; padding-top: 0; border-top: 0; }
.cta__text .share-bar { margin-top: .9rem; padding-top: .8rem; }
.table-ck th.rank-col, .table-ck td.rank-col { text-align: left !important; }

/* Teilen dezent: Footer-Leiste + Symbol oben rechts (v0.7.1) */
.footer-share { margin-top: 1.2rem; }
.share-bar--small { margin-top: 0; padding-top: 0; border-top: 0; justify-content: center; gap: .3rem; }
.share-bar--small .share-btn { min-width: 1.9rem; height: 1.9rem; font-size: .8rem; padding: 0 .45rem; background: transparent; border-color: var(--ck-border); color: var(--ck-muted); }
.share-bar--small .share-btn:hover, .share-bar--small .share-btn:focus-visible { background: var(--c); border-color: var(--c); color: #fff; }
.share-bar--small .share-btn--x:hover { color: #000; }
.share-bar--small .share-bar__label { font-size: .72rem; }
.share-bar--small .share-btn__txt { font-size: .75rem; }
.nav-share { padding: .25rem .55rem; }
.share-menu { min-width: 13rem; }
.share-menu .dropdown-item .bi { width: 1.3rem; display: inline-block; color: var(--c, var(--ck-gold)); }
.share-menu .share-item.is-done { color: #5fcf6a; }

/* ==========================================================================
   16. Völker, Fraktion, Charakterbogen, Charakterfoto (v0.8.0)
   ========================================================================== */
.md-head--race, .md-row--race { grid-template-columns: 1fr 7rem 4.5rem 3rem 2.5rem 2.5rem; }
@media (max-width: 575.98px) { .md-row--race { grid-template-columns: 1fr 1fr 1fr; } }
.faction-badge {
    --c: #d4a64a;
    display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    padding: .1rem .5rem; border-radius: 999px; color: #fff;
    background: color-mix(in srgb, var(--c) 55%, transparent); border: 1px solid color-mix(in srgb, var(--c) 80%, transparent);
}
.faction-alliance { --c: #3a7bd5; }
.faction-horde    { --c: #c62a1a; }
.faction-alliance-choice { --st: #5b9bff; }
.faction-horde-choice    { --st: #ff5a45; }
.char-photo { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; border: 1px solid var(--ck-border); background: rgba(255,255,255,.03); }
.char-photo--sm { width: 90px; height: 120px; }
.char-photo--empty { display: flex; align-items: center; justify-content: center; color: var(--ck-muted); font-size: 1.8rem; }
.char-card__photo { width: 56px; height: 75px; object-fit: cover; border-radius: 8px; border: 1px solid var(--class-color, var(--ck-border)); flex-shrink: 0; }
.char-sheet__photo { max-width: 360px; margin: 0 auto; box-shadow: 0 0 30px color-mix(in srgb, var(--class-color, #d4a64a) 30%, transparent); border-color: var(--class-color, var(--ck-border)); }
.char-sheet__name { font-family: var(--ck-font-head); font-size: 2rem; color: #fff2c4; margin: 0; }
.char-sheet__meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin: .6rem 0 1rem; }
.char-sheet .event-dl { margin-top: 0; }
.dt-filter { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.dt-filter select { width: auto; }
.char-card__link { color: inherit; text-decoration: none; } .char-card__link:hover { color: var(--ck-gold-light); text-decoration: underline; }

/* Mehrtägige Termine im Kalender (v0.8.1) */
.cal-event--start  { border-right-style: dashed; }
.cal-event--middle, .cal-event--end { border-left-style: dashed; opacity: .85; }
.cal-event--middle { border-right-style: dashed; }

/* ==========================================================================
   17. Linkliste (v0.9.0)
   ========================================================================== */
.link-card { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.1rem; height: 100%; color: inherit; text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.link-card:hover { color: inherit; transform: translateY(-2px); border-color: var(--ck-gold); }
.link-card__icon { flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--ck-gold-light); background: rgba(212,166,74,.12); border: 1px solid var(--ck-border); }
.link-card__body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.link-card__title { font-family: var(--ck-font-head); font-weight: 700; color: #fff2c4; }
.link-card__title .bi { font-size: .75rem; color: var(--ck-muted); }
.link-card__desc { font-size: .88rem; color: var(--ck-text); }
.link-card__host { font-size: .75rem; color: var(--ck-muted); }

/* Benutzermenü: „Mein Bereich“ und „Verwaltung“ klar getrennt (v0.9.0) */
.user-dropdown { min-width: 15rem; padding-bottom: .3rem; }
.user-dropdown__who { font-size: .85rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.user-dropdown__head { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ck-muted); padding-top: .2rem; }
.user-dropdown__admin { margin: .45rem .4rem .2rem; padding: .25rem 0 .3rem; border-radius: 10px; background: rgba(212,166,74,.08); border: 1px solid var(--ck-border); }
.user-dropdown__head--admin { color: var(--ck-gold-light); }
.user-dropdown__admin .dropdown-item { border-radius: 6px; font-size: .9rem; padding-top: .25rem; padding-bottom: .25rem; }

/* Navigation mit 6 Punkten: kein Umbruch; auf mittleren Breiten kompakter (v0.9.0) */
.navbar-ck .nav-link { white-space: nowrap; }
.nav-actions { flex-wrap: nowrap; }
@media (min-width: 992px) and (max-width: 1399.98px) {
    .navbar-ck .navbar-nav .nav-link { padding-inline: .55rem !important; font-size: .86rem; letter-spacing: .04em; }
    .navbar-ck .nav-link.active::after { left: .55rem; right: .55rem; }
    .navbar-ck .navbar-nav .nav-link .bi { display: none; }
    .nav-actions .btn-discord span { display: none; }
    .user-menu__name { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }
}
@media (max-width: 991.98px) { .nav-actions { flex-wrap: wrap; } }
.code-input { font-family: Consolas, monospace; font-size: 1.4rem; letter-spacing: .4em; text-align: center; }