/*
 * Wikinger-Theme auf Basis von Bootstrap 5 (dunkel).
 * Farben passend zum WikingerBot-Dashboard: Nachtblau, Eisen, Gold.
 */

@font-face {
    font-family: "Cinzel";
    src: url("../vendor/fonts/cinzel-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Cinzel";
    src: url("../vendor/fonts/cinzel-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

:root,
[data-bs-theme="dark"] {
    --wk-bg: #10161d;
    --wk-bg-deep: #0a0e13;
    --wk-surface: #1a2129;
    --wk-surface-2: #212a33;
    --wk-border: #34424a;
    --wk-border-strong: #8a6a3a;
    --wk-text: #e7e0d0;
    --wk-muted: #9aa3a8;
    --wk-gold: #c9a35c;
    --wk-gold-bright: #e0b96b;
    --wk-gold-dark: #8a6a3a;
    --wk-blood: #b3452f;
    --wk-frost: #5fa8a0;
    --wk-font-heading: "Cinzel", Georgia, "Times New Roman", serif;
    --wk-font-runes: "Segoe UI Historic", "Noto Sans Runic", "Junicode", serif;

    --bs-body-bg: var(--wk-bg);
    --bs-body-color: var(--wk-text);
    --bs-secondary-color: var(--wk-muted);
    --bs-tertiary-bg: var(--wk-surface);
    --bs-border-color: var(--wk-border);
    --bs-emphasis-color: #fff8e8;
    --bs-link-color: var(--wk-gold);
    --bs-link-color-rgb: 201, 163, 92;
    --bs-link-hover-color: var(--wk-gold-bright);
    --bs-link-hover-color-rgb: 224, 185, 107;
    --bs-primary: var(--wk-gold);
    --bs-primary-rgb: 201, 163, 92;
    --bs-danger: var(--wk-blood);
    --bs-danger-rgb: 179, 69, 47;
    --bs-border-radius: .4rem;
    --bs-focus-ring-color: rgba(201, 163, 92, .35);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse at top, #1b2530 0%, var(--wk-bg) 55%, var(--wk-bg-deep) 100%) fixed;
}

main {
    flex: 1;
}

h1, h2, h3, h4, .display-heading, .navbar-brand {
    font-family: var(--wk-font-heading);
    letter-spacing: .03em;
    color: var(--wk-gold-bright);
}

h1, h2, h3 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

::selection {
    background: rgba(201, 163, 92, .35);
}

.skip-link {
    position: absolute;
    z-index: 2000;
    padding: .5rem 1rem;
    background: var(--wk-gold);
    color: #1a1208;
}

.runes {
    font-family: var(--wk-font-runes);
    color: var(--wk-gold-dark);
    letter-spacing: .25em;
}

/* ---------- Navigation ---------- */

.site-nav {
    background: rgba(12, 17, 23, .92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--wk-border-strong);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

.site-nav .navbar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.site-nav .navbar-brand:hover {
    text-decoration: none;
    color: #fff1cf;
}

.site-nav .nav-link {
    color: var(--wk-text);
    border-bottom: 2px solid transparent;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus {
    color: var(--wk-gold-bright);
    text-decoration: none;
}

.site-nav .nav-link.active {
    color: var(--wk-gold-bright);
    border-bottom-color: var(--wk-gold);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--wk-surface);
    --bs-dropdown-border-color: var(--wk-border-strong);
    --bs-dropdown-link-hover-bg: var(--wk-surface-2);
    --bs-dropdown-link-active-bg: var(--wk-gold-dark);
}

/* ---------- Buttons ---------- */

.btn-gold {
    --bs-btn-color: #1d1409;
    --bs-btn-bg: var(--wk-gold);
    --bs-btn-border-color: var(--wk-gold-bright);
    --bs-btn-hover-color: #1d1409;
    --bs-btn-hover-bg: var(--wk-gold-bright);
    --bs-btn-hover-border-color: #f0cf85;
    --bs-btn-active-color: #1d1409;
    --bs-btn-active-bg: #b98c43;
    --bs-btn-active-border-color: #b98c43;
    --bs-btn-disabled-color: #1d1409;
    --bs-btn-disabled-bg: var(--wk-gold-dark);
    --bs-btn-disabled-border-color: var(--wk-gold-dark);
    --bs-btn-focus-shadow-rgb: 201, 163, 92;
    font-weight: 600;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(0, 0, 0, .08));
}

.btn-outline-gold {
    --bs-btn-color: var(--wk-gold-bright);
    --bs-btn-border-color: var(--wk-gold-dark);
    --bs-btn-hover-color: #1d1409;
    --bs-btn-hover-bg: var(--wk-gold);
    --bs-btn-hover-border-color: var(--wk-gold);
    --bs-btn-active-color: #1d1409;
    --bs-btn-active-bg: var(--wk-gold-bright);
    --bs-btn-active-border-color: var(--wk-gold-bright);
    --bs-btn-focus-shadow-rgb: 201, 163, 92;
}

.btn-iron {
    --bs-btn-color: var(--wk-text);
    --bs-btn-bg: #2b2419;
    --bs-btn-border-color: var(--wk-gold-dark);
    --bs-btn-hover-color: var(--wk-gold-bright);
    --bs-btn-hover-bg: #3a2f22;
    --bs-btn-hover-border-color: var(--wk-gold);
    --bs-btn-active-color: var(--wk-gold-bright);
    --bs-btn-active-bg: #241d14;
    --bs-btn-active-border-color: var(--wk-gold);
    --bs-btn-focus-shadow-rgb: 201, 163, 92;
    background-image: linear-gradient(180deg, #3a2f22 0%, #241d14 100%);
}

.btn:hover {
    text-decoration: none;
}

/* ---------- Karten / Panels ---------- */

.card,
.panel {
    --bs-card-bg: var(--wk-surface);
    --bs-card-border-color: var(--wk-border);
    --bs-card-cap-bg: rgba(0, 0, 0, .2);
    background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 40%), var(--wk-surface);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}

.panel {
    border: 1px solid var(--wk-border);
    border-radius: var(--bs-border-radius);
    padding: 1.25rem;
}

.card-header {
    font-family: var(--wk-font-heading);
    color: var(--wk-gold-bright);
    border-bottom-color: var(--wk-border-strong);
}

/* Eisenbeschlag-Ecken fuer hervorgehobene Karten */
.card-forged {
    position: relative;
    border-color: var(--wk-border-strong);
}

.card-forged::before,
.card-forged::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--wk-gold);
    pointer-events: none;
}

.card-forged::before {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
}

.card-forged::after {
    right: -1px;
    bottom: -1px;
    border-left: 0;
    border-top: 0;
}

.page-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--wk-border-strong);
}

.page-title h1 {
    margin: 0;
    font-size: 1.9rem;
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--wk-muted);
    --bs-breadcrumb-item-active-color: var(--wk-muted);
    font-size: .9rem;
    margin-bottom: .5rem;
}

/* ---------- Formulare ---------- */

.form-control,
.form-select {
    background-color: #131a21;
    border-color: var(--wk-border);
    color: var(--wk-text);
}

.form-control:focus,
.form-select:focus {
    background-color: #151d25;
    border-color: var(--wk-gold);
    box-shadow: 0 0 0 .2rem rgba(201, 163, 92, .25);
    color: var(--wk-text);
}

.form-check-input:checked {
    background-color: var(--wk-gold);
    border-color: var(--wk-gold);
}

.form-label {
    color: var(--wk-muted);
    font-size: .9rem;
    margin-bottom: .3rem;
}

/* Bot-Falle: fuer Menschen unsichtbar */
.hp-field {
    position: absolute !important;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.auth-box {
    max-width: 440px;
    margin: 2rem auto;
}

.auth-box .auth-emblem {
    display: block;
    margin: 0 auto 1rem;
    border-radius: 50%;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .7));
}

/* Login/Registrierung: Hintergrundbild ("Der alte Baumwaechter", Freepik/Magnific) */
body.bg-auth {
    background:
        linear-gradient(90deg, rgba(10, 14, 19, .92) 0%, rgba(10, 14, 19, .7) 50%, rgba(10, 14, 19, .92) 100%),
        url("../img/baumwaechter.jpg") center / cover fixed;
    background:
        linear-gradient(90deg, rgba(10, 14, 19, .92) 0%, rgba(10, 14, 19, .7) 50%, rgba(10, 14, 19, .92) 100%),
        image-set(url("../img/baumwaechter.webp") type("image/webp"), url("../img/baumwaechter.jpg") type("image/jpeg")) center 30% / cover fixed;
}

body.bg-auth .site-footer {
    background: rgba(0, 0, 0, .55);
}

.brand-logo {
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .6);
}

/* ---------- Hero auf der Startseite ---------- */

/* Hintergrund: "Herbstwald" von vecstock (Magnific), Nennung im Footer */
.hero {
    position: relative;
    overflow: hidden;
    padding: 6rem 0 7rem;
    text-align: center;
    background-color: var(--wk-bg);
    background-image:
        linear-gradient(180deg, rgba(10, 14, 19, .55) 0%, rgba(10, 14, 19, .72) 60%, var(--wk-bg) 100%),
        url("../img/wald.jpg");
    background-image:
        linear-gradient(180deg, rgba(10, 14, 19, .55) 0%, rgba(10, 14, 19, .72) 60%, var(--wk-bg) 100%),
        image-set(url("../img/wald.webp") type("image/webp"), url("../img/wald.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center 35%;
    border-bottom: 1px solid var(--wk-border-strong);
}

.hero h1,
.hero .lead {
    text-shadow: 0 2px 10px rgba(0, 0, 0, .85);
}

.hero .hero-content {
    position: relative;
    z-index: 1;
}

.hero .hero-emblem {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .7));
    animation: emblem-glow 6s ease-in-out infinite;
}

.hero h1 {
    font-size: clamp(2.2rem, 6vw, 4rem);
    font-weight: 700;
    margin: 1rem 0 .5rem;
}

.hero .lead {
    color: var(--wk-text);
    max-width: 640px;
    margin: 0 auto 2rem;
}

@keyframes emblem-glow {
    0%, 100% { filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .7)); }
    50% { filter: drop-shadow(0 0 18px rgba(224, 185, 107, .35)); }
}

@media (prefers-reduced-motion: reduce) {
    .hero .hero-emblem {
        animation: none;
    }
}

.stat {
    text-align: center;
}

.stat .stat-value {
    font-family: var(--wk-font-heading);
    font-size: 2rem;
    color: var(--wk-gold-bright);
    line-height: 1.1;
}

.stat .stat-label {
    color: var(--wk-muted);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid var(--wk-gold-dark);
    background: rgba(201, 163, 92, .08);
    color: var(--wk-gold-bright);
    font-size: 1.4rem;
}

/* ---------- Trenner mit Flechtmuster ---------- */

.knot-divider {
    height: 12px;
    margin: 0 0 1.25rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 6 Q6 0 12 6 T24 6' fill='none' stroke='%238a6a3a' stroke-width='1.5'/%3E%3Cpath d='M0 6 Q6 12 12 6 T24 6' fill='none' stroke='%238a6a3a' stroke-width='1.5' opacity='.6'/%3E%3C/svg%3E") repeat-x center;
}

.site-footer {
    margin-top: 3rem;
    padding: 1.5rem 0 2rem;
    border-top: 1px solid var(--wk-border);
    background: rgba(0, 0, 0, .25);
    color: var(--wk-muted);
}

/* ---------- Avatare, Rollen ---------- */

.avatar {
    --avatar-hue: 40;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    font-family: var(--wk-font-heading);
    font-weight: 700;
    color: hsl(var(--avatar-hue) 60% 88%);
    background: radial-gradient(circle at 35% 30%, hsl(var(--avatar-hue) 35% 38%), hsl(var(--avatar-hue) 40% 18%));
    border: 2px solid var(--wk-gold-dark);
    user-select: none;
}

.avatar-sm { width: 28px; height: 28px; font-size: .8rem; border-width: 1px; }
.avatar-md { width: 44px; height: 44px; font-size: 1.1rem; }
.avatar-lg { width: 96px; height: 96px; font-size: 2.6rem; border-width: 3px; }

.role-badge {
    --role-color: #9aa3a8;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--role-color);
    border: 1px solid color-mix(in srgb, var(--role-color) 60%, transparent);
    background: color-mix(in srgb, var(--role-color) 14%, transparent);
}

.user-link {
    font-weight: 600;
}

/* ---------- Forum ---------- */

.forum-list {
    border: 1px solid var(--wk-border);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    background: var(--wk-surface);
}

.forum-row {
    display: grid;
    grid-template-columns: 3rem 1fr 7rem 14rem;
    gap: 1rem;
    align-items: center;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--wk-border);
}

.forum-row:last-child {
    border-bottom: 0;
}

.forum-row:hover {
    background: var(--wk-surface-2);
}

.forum-row.is-pinned {
    background: linear-gradient(90deg, rgba(201, 163, 92, .09), transparent 60%);
}

.forum-row .forum-icon {
    font-size: 1.6rem;
    color: var(--wk-gold);
    text-align: center;
}

.forum-row .forum-title {
    font-weight: 600;
    font-size: 1.05rem;
}

.forum-row .forum-desc {
    color: var(--wk-muted);
    font-size: .9rem;
}

.forum-row .forum-stats {
    color: var(--wk-muted);
    font-size: .85rem;
    text-align: center;
}

.forum-row .forum-last {
    font-size: .85rem;
    color: var(--wk-muted);
    min-width: 0;
}

.forum-row .forum-last a.last-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .forum-row {
        grid-template-columns: 2.25rem 1fr;
    }
    .forum-row .forum-stats,
    .forum-row .forum-last {
        grid-column: 2;
        text-align: left;
    }
}

.post {
    display: grid;
    grid-template-columns: 11rem 1fr;
    border: 1px solid var(--wk-border);
    border-radius: var(--bs-border-radius);
    background: var(--wk-surface);
    margin-bottom: 1rem;
    scroll-margin-top: 5rem;
}

.post .post-author {
    padding: 1.1rem;
    text-align: center;
    border-right: 1px solid var(--wk-border);
    background: rgba(0, 0, 0, .15);
    font-size: .85rem;
    color: var(--wk-muted);
}

.post .post-author .user-link {
    display: block;
    margin: .5rem 0 .3rem;
    font-size: 1rem;
    word-break: break-word;
}

.post .post-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.post .post-meta {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem 1.1rem;
    border-bottom: 1px solid var(--wk-border);
    color: var(--wk-muted);
    font-size: .82rem;
}

.post .post-body {
    padding: 1.1rem;
    flex: 1;
    overflow-wrap: anywhere;
    line-height: 1.65;
}

.post .post-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: flex-end;
    padding: .5rem 1.1rem .8rem;
}

@media (max-width: 767.98px) {
    .post {
        grid-template-columns: 1fr;
    }
    .post .post-author {
        display: flex;
        align-items: center;
        gap: .6rem;
        text-align: left;
        border-right: 0;
        border-bottom: 1px solid var(--wk-border);
        padding: .7rem 1rem;
    }
    .post .post-author .avatar {
        width: 32px;
        height: 32px;
        font-size: .9rem;
    }
    .post .post-author .user-link {
        margin: 0;
    }
    .post .post-author .post-author-extra {
        display: none;
    }
}

.post-quote {
    margin: .5rem 0;
    padding: .5rem .9rem;
    border-left: 3px solid var(--wk-gold-dark);
    background: rgba(0, 0, 0, .2);
    color: #cfc7b6;
}

.post-code {
    margin: .5rem 0;
    padding: .75rem 1rem;
    border: 1px solid var(--wk-border);
    border-radius: .3rem;
    background: #0c1116;
    white-space: pre-wrap;
}

code {
    color: #f0cf85;
}

.format-help {
    font-size: .8rem;
    color: var(--wk-muted);
}

.format-help code {
    color: var(--wk-muted);
}

/* ---------- Tickets ---------- */

.ticket-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid currentColor;
}

.status-open     { color: #e0b96b; background: rgba(224, 185, 107, .1); }
.status-progress { color: #6fb7e8; background: rgba(111, 183, 232, .1); }
.status-waiting  { color: #b99be0; background: rgba(185, 155, 224, .1); }
.status-closed   { color: #7fae7a; background: rgba(127, 174, 122, .1); }

.priority-high { color: #e07a5f; font-weight: 600; }
.priority-low  { color: var(--wk-muted); }

.ticket-message {
    border: 1px solid var(--wk-border);
    border-radius: var(--bs-border-radius);
    background: var(--wk-surface);
    margin-bottom: 1rem;
}

.ticket-message.from-staff {
    border-left: 3px solid var(--wk-frost);
}

.ticket-message.is-internal {
    border-style: dashed;
    border-color: #7a6a3a;
    background: repeating-linear-gradient(-45deg, rgba(201, 163, 92, .04) 0 10px, transparent 10px 20px), var(--wk-surface);
}

.ticket-message .ticket-message-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--wk-border);
    font-size: .85rem;
    color: var(--wk-muted);
}

.ticket-message .ticket-message-body {
    padding: 1rem;
    overflow-wrap: anywhere;
    line-height: 1.6;
}

.ticket-event {
    text-align: center;
    color: var(--wk-muted);
    font-size: .82rem;
    margin: -.25rem 0 1rem;
}

.ticket-event::before,
.ticket-event::after {
    content: "᛫";
    margin: 0 .5rem;
    color: var(--wk-gold-dark);
}

/* ---------- Tabellen ---------- */

.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--wk-border);
    --bs-table-hover-bg: var(--wk-surface-2);
    --bs-table-color: var(--wk-text);
    --bs-table-hover-color: var(--wk-text);
    margin-bottom: 0;
}

.table > thead th {
    font-family: var(--wk-font-heading);
    font-weight: 400;
    color: var(--wk-gold);
    font-size: .85rem;
    letter-spacing: .05em;
    border-bottom-color: var(--wk-border-strong);
}

.pagination {
    --bs-pagination-bg: var(--wk-surface);
    --bs-pagination-border-color: var(--wk-border);
    --bs-pagination-color: var(--wk-gold);
    --bs-pagination-hover-bg: var(--wk-surface-2);
    --bs-pagination-hover-color: var(--wk-gold-bright);
    --bs-pagination-hover-border-color: var(--wk-border-strong);
    --bs-pagination-active-bg: var(--wk-gold-dark);
    --bs-pagination-active-border-color: var(--wk-gold);
    --bs-pagination-active-color: #fff4dc;
    --bs-pagination-disabled-bg: var(--wk-bg);
    --bs-pagination-disabled-border-color: var(--wk-border);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--wk-gold-dark);
    --bs-nav-link-color: var(--wk-text);
    --bs-nav-link-hover-color: var(--wk-gold-bright);
}

.alert {
    border-left-width: 4px;
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--wk-muted);
}

.empty-state .bi {
    display: block;
    font-size: 2.5rem;
    color: var(--wk-gold-dark);
    margin-bottom: .75rem;
}

.error-page {
    text-align: center;
    padding: 4rem 1rem;
}

.error-page .error-code {
    font-family: var(--wk-font-heading);
    font-size: 5rem;
    color: var(--wk-gold-dark);
    line-height: 1;
}

.color-swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, .25);
}

.min-w-0 {
    min-width: 0;
}

/* ---------- News ---------- */

.news-card {
    overflow: hidden;
    transition: transform .15s ease, border-color .15s ease;
}

.news-card:hover {
    transform: translateY(-2px);
    border-color: var(--wk-border-strong);
}

.news-card-image {
    position: relative;
    height: 140px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--wk-border-strong);
}

.news-card-large .news-card-image {
    height: 240px;
}

.news-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(16, 22, 29, .75));
}

.news-badge {
    position: absolute;
    z-index: 1;
    top: .75rem;
    left: .75rem;
}

.news-badge + .news-badge {
    left: auto;
    right: .75rem;
}

.news-title {
    color: var(--wk-gold-bright);
}

.news-article {
    overflow: hidden;
}

.news-article-image {
    height: clamp(180px, 30vw, 340px);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--wk-border-strong);
}

.news-body {
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 75ch;
    overflow-wrap: anywhere;
}

/* ---------- Events ---------- */

.event-date {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.6rem;
    padding: .3rem 0 .35rem;
    border: 1px solid var(--wk-border-strong);
    border-radius: .35rem;
    background: linear-gradient(180deg, #2b2419, #1a1510);
    line-height: 1;
    text-align: center;
}

.event-date-month {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--wk-gold);
}

.event-date-day {
    font-family: var(--wk-font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--wk-gold-bright);
    margin: .15rem 0;
}

.event-date-weekday {
    font-size: .7rem;
    color: var(--wk-muted);
}

.event-row:hover {
    border-color: var(--wk-border-strong);
    background: var(--wk-surface-2);
}

.event-row.is-cancelled {
    opacity: .6;
}

.answer-yes   { color: #7fae7a; }
.answer-maybe { color: #e0b96b; }
.answer-no    { color: #c07a6b; }

/* ---------- Smileys ---------- */

.emoji-picker {
    width: min(20rem, 90vw);
    max-height: 18rem;
    overflow-y: auto;
}

.emoji-group-title {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--wk-gold);
    margin: .4rem .2rem .2rem;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}

.emoji-btn {
    border: 0;
    background: none;
    font-size: 1.3rem;
    line-height: 1;
    padding: .3rem 0;
    border-radius: .3rem;
    cursor: pointer;
}

.emoji-btn:hover,
.emoji-btn:focus-visible {
    background: var(--wk-surface-2);
}

.post-heading {
    margin: 1rem 0 .5rem;
    font-size: 1.35rem;
}

h4.post-heading {
    font-size: 1.1rem;
}

/* ---------- Wiki ---------- */

.wiki-link {
    font-weight: 600;
    border-bottom: 1px dotted var(--wk-gold-dark);
}

.wiki-link:hover {
    text-decoration: none;
    border-bottom-style: solid;
}

.wiki-link .bi {
    font-size: .85em;
}

.wiki-body {
    max-width: none;
}

.wiki-toc {
    position: sticky;
    top: 5.5rem;
}

.wiki-diff {
    padding: 1rem 0;
    font-size: .85rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.wiki-diff span {
    display: block;
    padding: 0 1rem;
}

.wiki-diff .diff-add {
    background: rgba(127, 174, 122, .15);
    color: #b5dcb0;
}

.wiki-diff .diff-del {
    background: rgba(192, 122, 107, .15);
    color: #e4aa9d;
    text-decoration: line-through;
    text-decoration-color: rgba(228, 170, 157, .4);
}

.wiki-diff .diff-same {
    color: var(--wk-muted);
}

/* ---------- Einbettbarer Feed (AMP-Login) ---------- */

.feed-body {
    min-height: 0;
    padding: .75rem;
    background: rgba(12, 17, 23, .94);
    font-size: .92rem;
}

.feed-header a {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--wk-font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--wk-gold-bright);
    text-decoration: none;
}

.feed-section {
    margin-top: .9rem;
}

.feed-section h2 {
    font-size: 1rem;
    margin-bottom: .4rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--wk-border-strong);
}

.feed-item {
    padding: .45rem .5rem;
    border-radius: .3rem;
    color: var(--wk-text);
    text-decoration: none;
}

.feed-item:hover {
    background: var(--wk-surface-2);
    text-decoration: none;
    color: var(--wk-text);
}

.feed-item .event-date {
    width: 3rem;
}

.feed-item .event-date-day {
    font-size: 1.25rem;
}

.feed-footer {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 1rem;
    padding-top: .6rem;
    border-top: 1px solid var(--wk-border);
    font-size: .85rem;
}

/* Bildnachweise (Lizenzpflicht) */
.image-credits {
    font-size: .72rem;
    opacity: .75;
    margin-top: .25rem;
}

.image-credits a {
    color: inherit;
    text-decoration: underline dotted;
}