/* ============================================================
   KOSY – core.css
   Zusammengefasstes & bereinigtes Grundgerüst
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=DM+Sans:wght@400;500;600&display=swap');

:root {
    /* Hintergrund-Ebenen */
    --bg-page:          #111111;
    --bg-surface:       #181818;
    --bg-card:          #202020;
    --bg-raised:        #2a2a2a;
    --bg-header:        #0a0a0a;
    --bg-input:         #141414;

    /* Akzentfarbe */
    --color-accent:        #f97316;
    --color-accent-dark:   #e06010;
    --color-accent-light:  rgba(249,115,22,0.12);
    --color-accent-line:   rgba(249,115,22,0.35);

    /* Text */
    --color-text:          #e2ddd8;
    --color-text-muted:    #6e6860;
    --color-text-faint:    #3a3530;

    /* Borders */
    --color-border:        rgba(255,255,255,0.05);
    --color-border-strong: rgba(255,255,255,0.10);

    /* Status */
    --color-success:       #4ade80;
    --color-success-bg:    rgba(74,222,128,0.10);
    --color-error:         #f87171;
    --color-error-bg:      rgba(248,113,113,0.10);
    --color-warning:       #fbbf24;
    --color-warning-bg:    rgba(251,191,36,0.10);
    --color-info:          #60a5fa;
    --color-info-bg:       rgba(96,165,250,0.10);

    /* Typografie */
    --font-heading:        'Cinzel', serif;
    --font-body:           'DM Sans', system-ui, sans-serif;
    --font-primary:        'DM Sans', system-ui, sans-serif;

    /* Abstände */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   16px;
    --space-lg:   24px;
    --space-xl:   40px;
    --space-xxl:  64px;

    /* Radien */
    --radius-sm:  4px;
    --radius-md:  6px;
    --radius-lg:  10px;

    /* Sonstiges */
    --transition:    0.15s ease;
    --header-height: 56px;
    --sidebar-width: 220px;
}

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

html { font-size: 15px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
    background-color: #0a0a0a;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img, svg   { display: block; max-width: 100%; }
ul, ol     { list-style: none; }
button     { font-family: var(--font-body); cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: var(--font-body); font-size: 1rem; }

a { color: var(--color-accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-text); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text);
    letter-spacing: 0.04em;
}
h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; } h5 { font-size: 0.95rem; } h6 { font-size: 0.88rem; }

p { margin-bottom: var(--space-md); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
code { font-family: 'Courier New', monospace; font-size: 0.88rem; background: var(--bg-card); color: var(--color-accent); padding: 2px 6px; border-radius: var(--radius-sm); }

/* ------------------------------------------------------------
   Hilfsklassen (Utilities)
------------------------------------------------------------ */
.text-accent  { color: var(--color-accent); }
.text-muted   { color: var(--color-text-muted); }
.text-faint   { color: var(--color-text-faint); }
.text-sm      { font-size: 0.85rem; }
.text-xs      { font-size: 0.75rem; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-upper   { text-transform: uppercase; letter-spacing: 0.06em; }

.mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); }
.mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); }

.d-flex          { display: flex; }
.gap-sm          { gap: var(--space-sm); }
.gap-md          { gap: var(--space-md); }
.align-center    { align-items: center; }
.justify-between { justify-content: space-between; }

/* ------------------------------------------------------------
   Buttons & Formulare
------------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; gap: var(--space-sm);
    padding: 8px 18px; font-family: var(--font-body); font-size: 0.82rem;
    font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    border-radius: var(--radius-sm); cursor: pointer; text-decoration: none;
    transition: background var(--transition), color var(--transition);
    border: 1px solid transparent; white-space: nowrap;
}
.btn--primary { background: var(--color-accent); color: #1a0800; }
.btn--primary:hover { background: var(--color-accent-dark); color: #1a0800; }
.btn--secondary { background: transparent; color: var(--color-text-muted); border-color: var(--color-border-strong); }
.btn--secondary:hover { color: var(--color-text); border-color: rgba(255,255,255,0.18); }
.btn--danger { background: transparent; color: var(--color-error); border-color: var(--color-error); }
.btn--danger:hover { background: var(--color-error-bg); }
.btn--sm { padding: 5px 12px; font-size: 0.75rem; }
.btn--lg { padding: 11px 24px; font-size: 0.88rem; }
.btn--full { width: 100%; justify-content: center; }
.btn[disabled], .btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.form-group { margin-bottom: var(--space-md); }
.form-label { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-xs); }
.form-input, .form-textarea, .form-select {
    width: 100%; padding: 9px 12px; background: var(--bg-input);
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 0.92rem; color: var(--color-text);
    transition: border-color var(--transition); appearance: none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--color-accent-line); }
.form-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.form-hint { font-size: 0.75rem; color: var(--color-text-faint); margin-top: var(--space-xs); }
.form-error { font-size: 0.78rem; color: var(--color-error); margin-top: var(--space-xs); }
.form-captcha { display: flex; align-items: center; gap: var(--space-md); }
.form-captcha__question { font-size: 0.95rem; font-weight: 600; color: var(--color-text); background: var(--bg-card); border: 1px solid var(--color-border); padding: 8px 14px; border-radius: var(--radius-sm); white-space: nowrap; }
.form-captcha .form-input { max-width: 100px; }
.form-errors { background: var(--color-error-bg); border-left: 3px solid var(--color-error); border-radius: var(--radius-sm); padding: var(--space-md); margin-bottom: var(--space-lg); }
.form-errors ul { list-style: disc; padding-left: var(--space-lg); }
.form-errors li { font-size: 0.88rem; color: var(--color-error); margin-bottom: var(--space-xs); }

/* ------------------------------------------------------------
   Badges & Tabellen
------------------------------------------------------------ */
.badge { display: inline-block; padding: 3px 8px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; border-radius: var(--radius-sm); text-transform: uppercase; }
.badge--accent  { background: var(--color-accent-light); color: var(--color-accent); border: 1px solid rgba(249,115,22,0.25); }
.badge--success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid rgba(74,222,128,0.2); }
.badge--error   { background: var(--color-error-bg); color: var(--color-error); border: 1px solid rgba(248,113,113,0.2); }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid rgba(251,191,36,0.2); }
.badge--info    { background: var(--color-info-bg); color: var(--color-info); border: 1px solid rgba(96,165,250,0.2); }
.badge--neutral { background: rgba(255,255,255,0.05); color: var(--color-text-muted); border: 1px solid var(--color-border-strong); }

.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border-top: 1px solid var(--color-accent-line); background: var(--bg-surface); }
.table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.table th { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-faint); background: rgba(0,0,0,0.2); padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--color-border); }
.table td { padding: 0 16px; height: 56px; border-bottom: 1px solid var(--color-border); vertical-align: middle; transition: background var(--transition); }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: rgba(255,255,255,0.02); }

/* ------------------------------------------------------------
   Header & Footer
------------------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--bg-header); border-bottom: 1px solid var(--color-border); width: 100%; }
.header-inner { display: flex; align-items: center; height: var(--header-height); padding: 0 28px; position: relative; max-width: 1400px; margin: 0 auto; }
.header-logo { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; flex-shrink: 0; }
.header-logo__name { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; color: var(--color-text); letter-spacing: 0.16em; text-transform: uppercase; }
.header-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; }
.header-nav__list { display: flex; align-items: center; gap: 2px; }
.header-nav__link { display: flex; align-items: center; gap: 5px; padding: 5px 14px; font-size: 0.88rem; font-weight: 500; color: var(--color-text-muted); border-radius: var(--radius-sm); transition: color var(--transition), background var(--transition); text-decoration: none; white-space: nowrap; position: relative; }
.header-nav__link:hover { color: var(--color-text); background: rgba(255,255,255,0.03); }
.header-nav__link.is-active { color: var(--color-text); }
.header-nav__link.is-active::after { content: ''; position: absolute; bottom: -1px; left: 14px; right: 14px; height: 2px; background: var(--color-accent); border-radius: 1px; }
.header-user { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }
.header-user__btn { display: flex; align-items: center; gap: 7px; padding: 4px 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background var(--transition), color var(--transition); }
.header-user__btn:hover { background: rgba(255,255,255,0.08); color: var(--color-text); }
.header-user__avatar { width: 22px; height: 22px; background: var(--bg-raised); border: 1px solid var(--color-border-strong); color: var(--color-accent); font-family: var(--font-heading); font-size: 0.7rem; font-weight: 600; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.header-user__name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-user__badge { min-width: 18px; height: 18px; padding: 0 4px; background: var(--color-accent); color: #fff; font-size: 0.68rem; font-weight: 600; border-radius: 9px; display: flex; align-items: center; justify-content: center; }

.site-footer { background: var(--bg-header); border-top: 1px solid var(--color-border); width: 100%; margin-top: auto; }
.footer-inner { max-width: 1400px; margin: 0 auto; padding: var(--space-md) var(--space-xl); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.footer-copy { font-size: 0.75rem; color: var(--color-text-faint); margin: 0; flex-shrink: 0; }
.footer-disclaimer { font-size: 0.72rem; color: var(--color-text-faint); margin: 0; text-align: right; opacity: 0.5; }

/* ------------------------------------------------------------
   Layouts (Global, Game, Admin)
------------------------------------------------------------ */
.site-main { flex: 1; width: 100%; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; }

.global-layout, .layout-with-sidebar, .layout-admin {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    flex: 1;
    width: 100%;
    min-height: calc(100vh - var(--header-height));
}

.global-sidebar, .game-sidebar, .admin-sidebar {
    background: var(--bg-surface);
    border-right: 1px solid var(--color-border);
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height));
    width: var(--sidebar-width);
    box-sizing: border-box;
}

.global-content, .game-content, .admin-content {
    min-width: 0; /* WICHTIG: Verhindert das Ausufern des Grids */
    width: 100%;
    padding: var(--space-lg) var(--space-xl);
    box-sizing: border-box;
}

/* Sidebar Überschriften & Links */
.global-sidebar__title, .game-sidebar__name, .admin-sidebar__title {
    display: block;
    padding: 0 18px 16px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--color-text);
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 8px;
}
.global-sidebar__sub, .game-sidebar__sub { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); font-weight: 600; }
.global-sidebar__list, .game-sidebar__list, .admin-sidebar__list { list-style: none; padding: 0; }

.global-sidebar__link, .game-sidebar__link, .admin-sidebar__link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 18px; font-size: 0.88rem; font-weight: 500;
    color: var(--color-text-muted); text-decoration: none;
    transition: color var(--transition), background var(--transition);
    position: relative;
}
.global-sidebar__link::before, .game-sidebar__link::before, .admin-sidebar__link::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--color-accent); transform: scaleX(0); transform-origin: left;
    transition: transform var(--transition);
}
.global-sidebar__link:hover, .game-sidebar__link:hover, .admin-sidebar__link:hover { color: var(--color-text); background: rgba(255,255,255,0.025); }
.global-sidebar__link.is-active, .game-sidebar__link.is-active, .admin-sidebar__link.is-active { color: var(--color-text); background: var(--color-accent-light); }
.global-sidebar__link.is-active::before, .game-sidebar__link.is-active::before, .admin-sidebar__link.is-active::before { transform: scaleX(1); }

/* Admin Sub-Links */
.admin-sidebar__sub { list-style: none; padding: 0; margin: 0; }
.admin-sidebar__sub-link {
    display: block; padding: 6px 18px 6px 30px; font-size: 0.82rem;
    color: var(--color-text-faint); text-decoration: none;
    transition: color var(--transition), background var(--transition);
}
.admin-sidebar__sub-link:hover { color: var(--color-text); background: rgba(255,255,255,0.02); }
.admin-sidebar__sub-link.is-active { color: var(--color-accent); }

/* Seiten-Header */
.page-header { margin-bottom: var(--space-xl); display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; width: 100%; }
.page-header__title { font-family: var(--font-heading); font-size: 2rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-text); }
.page-header__subtitle { font-size: 0.88rem; color: var(--color-text-muted); width: 100%; margin-top: 4px; }
.page-header__actions { display: flex; align-items: center; gap: var(--space-sm); }
.page-header__action-link {
    font-size: 0.82rem; color: var(--color-text-muted); text-decoration: none;
    font-weight: 500; transition: opacity var(--transition), color var(--transition); white-space: nowrap;
}
.page-header__action-link:hover { opacity: 1; color: var(--color-accent); }

/* Zentriertes Layout (Login) */
.layout-center { display: flex; align-items: flex-start; justify-content: center; padding: var(--space-xxl) var(--space-md); min-height: 60vh; }
.layout-center__box { width: 100%; max-width: 440px; background: var(--bg-surface); border-top: 1px solid var(--color-accent-line); border-radius: var(--radius-lg); padding: var(--space-xl); }
.layout-center__title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.04em; margin-bottom: var(--space-xs); }
.layout-center__subtitle { font-size: 0.88rem; color: var(--color-text-muted); margin-bottom: var(--space-xl); }

/* Flash-Meldungen */
.flash { padding: var(--space-md) var(--space-xl); font-family: var(--font-body); font-size: 0.92rem; font-weight: 500; letter-spacing: 0.02em; text-align: center; }
.flash--success { background: var(--color-success-bg); color: var(--color-success); border-bottom: 1px solid rgba(74,222,128,0.2); }
.flash--error   { background: var(--color-error-bg);   color: var(--color-error);   border-bottom: 1px solid rgba(248,113,113,0.2); }
.flash--warning { background: var(--color-warning-bg); color: var(--color-warning); border-bottom: 1px solid rgba(251,191,36,0.2); }
.flash--info    { background: var(--color-info-bg);    color: var(--color-info);    border-bottom: 1px solid rgba(96,165,250,0.2); }

/* TinyMCE Anpassungen */
.tox.tox-tinymce { border-color: var(--color-border-strong) !important; border-radius: var(--radius-sm) !important; }
.tox .tox-toolbar, .tox .tox-toolbar__overflow, .tox .tox-toolbar-overlord, .tox .tox-edit-area__iframe, .tox .tox-statusbar { background-color: var(--bg-card) !important; border-color: var(--color-border) !important; }
.tox .tox-toolbar__primary, .tox-tinymce .tox-editor-header { background-color: var(--bg-raised) !important; border-bottom: 1px solid var(--color-border) !important; border-top: none !important; box-shadow: none !important; }
.tox .tox-edit-area { border-top: none !important; }
.tox .tox-edit-area::before { border: none !important; }
.tox .tox-tbtn svg { fill: #aaa !important; }
.tox .tox-tbtn:hover svg { fill: #fff !important; }
.tox .tox-statusbar { color: var(--color-text-faint) !important; }

/* Responsive */
@media (max-width: 1024px) { .content-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
    .global-layout, .layout-with-sidebar, .layout-admin { grid-template-columns: 1fr; }
    .global-sidebar, .game-sidebar, .admin-sidebar { display: none; min-height: auto; }
    .global-content, .game-content, .admin-content { padding: var(--space-md); }
    .layout-center { padding: var(--space-lg) var(--space-md); }
    .layout-center__box { padding: var(--space-lg); }
}