/* ============================================================
   GLOBAL.CSS  –  Konsolidierte Haupt-CSS-Datei
   Zusammengeführt aus allen style/**  und  module/forum/admin/
   Drittanbieter-Bibliotheken (fancybox, quill, sweetalert2,
   tinymce, teamspeak-widget) bleiben separate Dateien.
   ============================================================ */


/* ============================================================
   1.  CSS CUSTOM PROPERTIES  (ehem. inc_var.css)
   ============================================================ */
:root {

    /* --- Basis / Oberflächen --- */
    --site-bg:           #0f1117;
    --site-bg-alt:       #1a1d26;
    --site-surface:      #222633;

    /* --- Rahmen --- */
    --border-color:      #2e3445;
    --border-light:      #3a4155;
    --border-box:        #2a2c32;
    --border-card:       #20222f;
    --border-table:      #1c1e24;
    --border-gray-light: #555;
    --border-gray-dark:  #101412;
    --border-yellow:     #c99b00;
    --border-red:        #b30000;
    --border-green:      #00b36b;

    /* --- Text --- */
    --text-primary:      #fcfcfe;
    --text-secondary:    #ced1dd;
    --text-muted:        #888ea3;
    --text-inverse:      #101010;
    --text-white:        #fcfcfe;
    --text-light-gray:   #ced1dd;
    --text-gray:         #888888;
    --text-dark:         #101010;
    --text-yellow:       #ffd700;
    --text-orange:       #ffa500;
    --text-blue-light:   #8fbcff;
    --text-green:        #00ff88;
    --text-red:          #ff4d4d;

    /* --- Brand / Akzent --- */
    --color-primary:         #4a90e2;
    --color-primary-hover:   #357abd;
    --color-secondary:       #9c27b0;
    --color-secondary-hover: #7b1fa2;
    --color-success:         #4caf50;
    --color-warning:         #ff9800;
    --color-danger:          #f44336;
    --color-info:            #00bcd4;

    /* --- Hintergründe --- */
    --bg-transparent:       rgba(0,0,0,0);
    --bg-gray:              #2a2c32;
    --bg-gray-light:        #3a3c42;
    --bg-gray-box:          rgba(10,13,19,0.7);
    --bg-gray-transparent:  rgba(30,30,40,0.3);
    --bg-dark-hover:        #202423;
    --bg-yellow:            #ffd700;
    --bg-yellow-hover:      #ffb300;
    --bg-red:               #ff5151;
    --bg-red-hover:         #ff3333;
    --bg-green:             #00ff88;
    --bg-green-accent:      #1f8b4c;
    --bg-blue:              #5c78d1;
    --bg-blue-hover:        #3f5cbf;
    --bg-blue-dark:         #0a0d13;
    --bg-box-shadow:        rgba(0,0,0,0.65);
    --bg-toast:             #1a1d26;
    --bg-admin-hover:       #3a3d45;
    --bg-admin-delete-hover:#400000;

    /* --- Links --- */
    --link-color:   var(--color-primary);
    --link-hover:   #6aa8ff;
    --link-active:  #2f6fd1;

    /* --- Buttons --- */
    --btn-bg:           var(--color-primary);
    --btn-bg-hover:     var(--color-primary-hover);
    --btn-text:         #ffffff;
    --btn-border:       1px solid #111111;
    --btn-radius:       8px;
    --btn-padding:      12px 10px;
    --btn-margin:       10px 5px;
    --cursor-pointer:   pointer;

    --btn-secondary-bg:     #2e3445;
    --btn-secondary-hover:  #3a4155;
    --btn-secondary-text:   #ffffff;

    --btn-bg-confirm:           var(--bg-blue);
    --btn-bg-confirm-hover:     var(--bg-blue-hover);
    --btn-text-confirm:         var(--text-white);

    --btn-bg-cancel:            var(--bg-gray);
    --btn-bg-cancel-hover:      var(--bg-gray-light);
    --btn-text-cancel:          var(--text-white);

    --btn-bg-admin:             var(--bg-gray);
    --btn-bg-admin-hover:       var(--bg-admin-hover);
    --btn-border-admin:         var(--border-gray-light);
    --btn-text-admin:           var(--text-white);

    --btn-bg-admin-close:       var(--bg-gray);
    --btn-border-admin-close:   var(--border-yellow);
    --btn-text-admin-close:     var(--bg-yellow);

    --btn-bg-admin-reopen:      var(--bg-gray);
    --btn-border-admin-reopen:  var(--border-green);
    --btn-text-admin-reopen:    var(--bg-green);

    --btn-bg-admin-delete:          var(--bg-gray);
    --btn-border-admin-delete:      var(--border-red);
    --btn-text-admin-delete:        var(--bg-red);
    --btn-bg-admin-delete-hover:    var(--bg-admin-delete-hover);

    /* --- Formulare --- */
    --input-bg:             #1a1d26;
    --input-border:         #2e3445;
    --input-border-focus:   var(--color-primary);
    --input-text:           var(--text-primary);
    --input-placeholder:    #6c738a;

    /* --- Navigation --- */
    --nav-bg:           #141720;
    --nav-link:         var(--text-secondary);
    --nav-link-hover:   var(--text-primary);
    --nav-active-bg:    #222633;

    /* --- Cards / Boxen --- */
    --card-bg:      #1a1d26;
    --card-border:  #2e3445;
    --card-shadow:  0 4px 12px rgba(0,0,0,0.3);

    /* --- Accordion --- */
    --accordion-bg:             #1a1d26;
    --accordion-header-bg:      #222633;
    --accordion-header-hover:   #2a3040;
    --accordion-border:         #2e3445;
    --accordion-text:           var(--text-primary);

    /* --- Tabellen --- */
    --table-bg:         #1a1d26;
    --table-header-bg:  #222633;
    --table-row-hover:  #2a3040;
    --table-border:     #2e3445;

    /* --- Badges --- */
    --badge-success-bg: #4caf50;
    --badge-warning-bg: #ff9800;
    --badge-danger-bg:  #f44336;
    --badge-info-bg:    #00bcd4;
    --badge-text:       #ffffff;

    /* --- Modals / Overlays --- */
    --modal-bg:      #1a1d26;
    --modal-overlay: rgba(0,0,0,0.7);

    /* --- Tooltip --- */
    --tooltip-bg:   #2a3040;
    --tooltip-text: #ffffff;

    /* --- Scrollbar --- */
    --scrollbar-bg:          #141720;
    --scrollbar-thumb:       #2e3445;
    --scrollbar-thumb-hover: #3a4155;

    /* --- Sonstiges --- */
    --shadow:           0 5px 15px rgba(0,0,0,0.5);
    --transition:       background 0.2s;
    --transition-fast:  0.15s ease-in-out;
    --transition-normal:0.3s ease;

    --radius-small:  4px;
    --radius-medium: 8px;
    --radius-large:  14px;
}


/* ============================================================
   2.  GLOBAL RESET & BASE  (ehem. inc_core.css / inc_body.css)
   ============================================================ */
html {
    scroll-behavior: smooth;
}

*, *::before, *::after, p, u {
    margin: 0;
    padding: 0;
    outline: 0;
    text-decoration: none;
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-white);
    background: none;
    overflow-x: hidden;
}

/* Hintergrundbild als Fixed-Layer */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("../../images/site/background/body_bg.jpg") center/cover no-repeat;
    z-index: -1;
    will-change: transform;
}

video:focus { outline: none; }

/* Hilfsklassen */
.hidden { display: none; }
.clear  { clear: both; }


/* ============================================================
   3.  SCROLLBAR
   ============================================================ */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; border-radius: 4px; }
::-webkit-scrollbar-thumb {
    background: var(--border-gray-light);
    border-radius: 4px;
    border: 2px solid var(--border-gray-light);
    transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover { background: var(--bg-dark-hover); }

* {
    scrollbar-width: thin;
    scrollbar-color: #4e5045 transparent;
}


/* ============================================================
   4.  LINKS  (ehem. inc_link.css / style_main/inc_link.css)
   ============================================================ */
a {
    color: var(--text-secondary);
    text-decoration: none;
}

a:hover, a:focus {
    color: var(--text-yellow);
    outline: none;
}

a:active { color: var(--text-orange); }

a.underline { text-decoration: underline; }

a.btn, a.button {
    display: inline-block;
    padding: 8px 16px;
    background-color: rgba(70, 130, 180, 0.85);
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}
a.btn:hover, a.button:hover {
    background-color: rgba(100, 160, 210, 0.9);
}

a.with-icon::after {
    content: "→";
    margin-left: 4px;
    font-size: 0.9em;
    transition: transform 0.2s ease, color 0.3s ease;
    color: var(--text-secondary);
}
a.with-icon:hover::after {
    transform: translateX(2px);
    color: var(--text-yellow);
}


/* ============================================================
   5.  AUTOFILL FIX (Chrome / Edge / Safari)
   ============================================================ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(30,30,40,0.3) inset !important;
    -webkit-text-fill-color: var(--text-white) !important;
    caret-color: var(--text-white) !important;
    transition: background-color 9999s ease-in-out 0s !important;
}


/* ============================================================
   6.  FORMULARE  (ehem. inc_form.css)
   ============================================================ */
.form_group {
    position: relative;
    margin: 30px 0 25px 0;
}

.form_group input[type="text"],
.form_group input[type="password"] {
    width: 100%;
    padding: 14px 12px 10px;
    border: 1px solid var(--bg-gray-light);
    border-radius: 6px;
    background: var(--bg-gray-transparent);
    color: var(--text-light-gray);
    font-size: 16px;
    transition: border 0.2s, background 0.2s;
}

.form_group input:focus {
    border-color: var(--bg-yellow);
    outline: none;
}

/* Badge über dem Feld */
.form_badge {
    position: absolute;
    top: -9px;
    left: 12px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    background-color: var(--site-bg-alt);
    color: #9aa3b2;
    border: 1px solid #42454f;
    border-radius: 4px;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(0,0,0,0.95);
}

/* Dropdown in .form_group */
.form_group select {
    width: 100%;
    padding: 20px 40px 12px 12px;
    border-radius: 5px;
    border: 1px solid var(--border-box);
    background-color: var(--site-bg-alt);
    color: var(--text-white);
    font-size: 16px;
    cursor: pointer;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all 0.2s ease;
}

.form_group::after {
    content: "▼";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa3b2;
    font-size: 12px;
    pointer-events: none;
}

.form_group select option {
    background-color: var(--site-bg-alt);
    color: var(--text-white);
    padding: 8px 12px;
}

.form_group select option:hover,
.form_group select option:checked {
    background-color: var(--bg-gray);
    color: var(--text-yellow);
}


/* ============================================================
   7.  SELECT GLOBAL  (ehem. inc_form_select.css)
   ============================================================ */
select {
    width: 100%;
    padding: 8px 35px 8px 10px;
    font-size: 14px;
    color: rgb(220,220,220);
    background-color: rgb(20,20,30);
    border: 1px solid rgb(50,50,60);
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

select:hover  { border-color: rgb(255,215,0); }
select:focus  { outline: none; border-color: rgb(255,215,0); box-shadow: 0 0 5px rgba(255,215,0,0.3); }
select option { background-color: rgb(20,20,30); color: rgb(220,220,220); }


/* ============================================================
   8.  CHECKBOXEN & TOGGLES  (ehem. inc_form.css + inc_form_checkbox.css)
   ============================================================ */

/* Standard Checkbox */
.checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
}

.checkbox input[type="checkbox"] { display: none; }

.checkbox label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.checkbox label::before {
    content: "";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-gray);
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    transition: all 0.2s;
}

.checkbox input[type="checkbox"]:checked + label::before {
    content: "✔";
    color: #333;
}

.checkbox label:hover::before { border-color: var(--text-gray); }

/* Toggle-Switch */
.checkbox_toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    padding-bottom: 15px;
    position: relative;
}

.checkbox_toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox_toggle label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 50px;
    font-size: 14px;
    color: var(--text-white);
    line-height: 1.2;
}

.checkbox_toggle label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 20px;
    background: var(--bg-gray-transparent);
    border-radius: 5px;
    border: 1px solid var(--bg-gray-light);
    transition: background 0.3s, border 0.2s;
}

.checkbox_toggle label::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: var(--bg-gray-light);
    border-radius: 5px;
    border: 1px solid var(--bg-gray-light);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: transform 0.3s, background 0.3s, border 0.3s;
}

.checkbox_toggle input:checked + label::before { border-color: var(--bg-green-accent); }
.checkbox_toggle input:checked + label::after  {
    transform: translateY(-50%) translateX(16px);
    background-color: var(--bg-green);
    border-color: var(--bg-green-accent);
}
.checkbox_toggle label:hover::before { border-color: var(--bg-green-accent); }

/* Checkbox-Label (inline) */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    cursor: pointer;
}
.checkbox-label input[type="checkbox"],
.checkbox-label input[type="radio"] {
    accent-color: #4CAF50;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
    .checkbox { font-size: 14px; }
    .checkbox label::before { width: 18px; height: 18px; font-size: 12px; }
}


/* ============================================================
   9.  BUTTONS  (ehem. inc_button.css + style.css)
   ============================================================ */

/* Basis-Button */
.btn {
    display: inline-block;
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: var(--text-blue-light);
    background-color: var(--bg-gray);
    transition: 0.2s;
}
.btn:hover {
    background-color: var(--bg-gray-light);
    transform: scale(1.05);
}

/* Bestätigen */
.btn_confirm {
    display: inline-block;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    background: var(--btn-bg-confirm);
    color: var(--btn-text-confirm);
    transition: var(--transition);
}
.btn_confirm:hover {
    background-color: var(--btn-bg-confirm-hover);
    transform: scale(1.05);
}

/* Abbrechen */
.btn_cancel {
    display: inline-block;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    background: var(--btn-bg-cancel);
    color: var(--btn-text-cancel);
    border: var(--btn-border);
    border-radius: var(--btn-radius);
    transition: var(--transition);
}
.btn_cancel:hover { background: var(--btn-bg-cancel-hover); }

/* Rot */
.btn_red { background-color: var(--bg-red); color: var(--text-dark); }
.btn_red:hover { background-color: var(--bg-red-hover); }

/* Admin-Buttons */
.btn_admin {
    display: inline-block;
    font-size: 13px;
    padding: 6px 12px;
    background: var(--btn-bg-admin);
    color: var(--btn-text-admin);
    border: 1px solid var(--btn-border-admin);
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: var(--transition);
}
.btn_admin:hover             { background: var(--btn-bg-admin-hover); }
.btn_admin.close             { border-color: var(--btn-border-admin-close); color: var(--btn-text-admin-close); }
.btn_admin.reopen            { border-color: var(--btn-border-admin-reopen); color: var(--btn-text-admin-reopen); }
.btn_admin.delete            { border-color: var(--btn-border-admin-delete); color: var(--btn-text-admin-delete); }
.btn_admin.delete:hover      { background: var(--btn-bg-admin-delete-hover); }

/* Sonstige spezifische Buttons */
.back-button {
    padding: 6px 12px;
    background: #2c2d38;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}
.back-button:hover { background: #66cc66; color: #000; transform: translateY(-1px); }

.join-button {
    padding: 10px 16px;
    margin: 15px 0;
    background-color: #2c2d38;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}
.join-button:hover { background-color: #66cc66; color: #000; transform: translateY(-1px); }
.join-button.secondary { background-color: #555; color: #ddd; }
.join-button.secondary:hover { background-color: #888; color: #000; transform: translateY(-1px); }

.ok-btn {
    padding: 2px 6px;
    margin-left: 4px;
    border: none;
    border-radius: 4px;
    background: #444;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
}
.ok-btn:disabled          { opacity: .5; cursor: default; }
.ok-btn:hover:enabled     { background: #555; }

.action-btn {
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: #444;
    color: #fff;
    transition: all .2s;
}
.action-btn:hover { background: #555; }

.swal-btn-full {
    display: block !important;
    width: 80% !important;
    margin: 4px 0;
    font-weight: bold;
    text-align: center;
}

/* Button-Gruppe */
.button_group {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
}
.button_group button { flex: 1; padding: 10px; }


/* ============================================================
   10.  TABELLEN  (ehem. inc_table.css + style_main/inc_table.css)
   ============================================================ */
table {
    width: 100%;
    border-collapse: collapse;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background-color: rgba(20,20,25,0.85);
    color: var(--text-white);
    border-radius: 6px;
    overflow: hidden;
    cursor: default;
    user-select: none;
}

table thead th {
    padding: 10px;
    text-align: left;
    font-weight: bold;
    background-color: rgba(30,30,40,0.95);
}

table tbody td { padding: 10px; vertical-align: top; }

table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: background-color 0.1s ease;
}

table tbody tr:nth-child(even) { background-color: rgba(35,35,45,0.55); }
table tbody tr:nth-child(odd)  { background-color: rgba(25,25,35,0.55); }
table tbody tr:hover           { background-color: rgba(50,50,70,0.7); }

table a { text-decoration: none; color: var(--text-blue-light); }

table .icon     { width: 50px; text-align: center; }
table .icon img { width: 32px; height: 32px; }

/* Klassen-basierte Tabelle (.table) */
.table { width: 100%; border-collapse: collapse; }
.table th { padding: 10px; text-align: left; font-weight: bold; }
.table tr { border-bottom: 1px solid var(--border-gray-dark); }
.table td { padding: 10px; vertical-align: top; }
.table a  { text-decoration: none; color: var(--text-white); transition: color 0.2s, text-decoration 0.2s; }
.table a:hover { text-decoration: underline; color: var(--text-yellow); }
.title    { font-size: 1rem; }
.subtitle, .small-text { font-size: 0.9rem; margin: 5px 0 0; }


/* ============================================================
   11.  LAYOUT & SITE CONTAINER  (ehem. inc_layout.css + inc_content.css)
   ============================================================ */
.site-content       { width: 100%; display: flex; justify-content: center; }
.site-content-inner { width: 100%; max-width: 1400px; padding: 16px; }

/* Standard Content-Box */
.container_content {
    background-color: var(--bg-gray-box);
    border: 1px solid var(--border-box);
    border-radius: 5px;
    margin: 20px 0;
    padding: 10px;
    color: var(--text-white);
    box-shadow: -5px 5px 10px var(--bg-box-shadow), 5px 5px 10px var(--bg-box-shadow);
}

.admin_box { display: flex; justify-content: flex-end; gap: 10px; }

/* Grid-Wrapper */
.content_wrapper {
    display: grid;
    gap: 5px;
    margin: 20px 0;
    align-items: start;
}

.content_2col { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.content_3col { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.content_4col { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.content_5col { grid-template-columns: repeat(5, 1fr); gap: 10px; }

@media (max-width: 768px) {
    .content_wrapper { grid-template-columns: 1fr !important; }
}

/* Content Blöcke */
.content_block {
    padding: 10px;
    border: 1px solid var(--border-card);
    border-radius: 6px;
    background-color: var(--bg-gray-transparent);
    transition: transform 0.2s, box-shadow 0.2s;
}
.content_block_header {
    border-bottom: 1px solid var(--border-card);
    margin-bottom: 10px;
    padding-bottom: 6px;
}
.content_block_body {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.content_block_title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-yellow);
    text-shadow: 0 0 5px #000;
    margin-bottom: 10px;
}
.content_block_title a { color: var(--text-yellow); text-decoration: none; }
.content_block_title a:hover { color: #fffacd; }

.content_grid { display: flex; flex-wrap: wrap; justify-content: space-between; }
.content_card {
    display: block;
    padding: 10px;
    margin: 5px;
    color: #cce7ff;
    text-decoration: none;
    transition: 0.2s;
}

/* Copyright */
.copyright { margin-top: 10px; font-size: 12px; color: #666; }


/* ============================================================
   12.  BOX KOMPONENTE  (ehem. inc_box.css)
   ============================================================ */
.box {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-box);
    border-radius: 5px;
    background-color: var(--bg-gray-box);
    color: var(--text-white);
    min-height: 300px;
    box-shadow: -5px 5px 10px var(--bg-box-shadow), 5px 5px 10px var(--bg-box-shadow);
}

.box_header {
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #e6edf3;
    letter-spacing: .4px;
    background: linear-gradient(135deg, #161b22 0%, #0d1117 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.03);
}

.box_content {
    flex: 1;
    padding: 14px 12px;
    overflow: hidden;
    color: var(--text-white);
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.linkbox { display: block; text-decoration: none; color: inherit; }
.linkbox:hover .content_block { border-color: #4e94ff; transform: translateY(-2px); }
.linkbox .content_block { transition: 0.2s ease; }

@media (max-width: 768px) {
    .box { height: auto; }
    .box_content { padding: 15px 10px; }
}


/* ============================================================
   13.  HEADLINES  (ehem. inc_layout.css + inc_headline.css)
   ============================================================ */
.headline {
    margin: 10px 0;
    padding: 10px;
    font-family: Verdana, sans-serif;
    font-size: 1.2em;
    border-bottom: 2px solid var(--border-gray-dark);
}

.headline_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-yellow);
    border: 1px solid var(--bg-blue-dark);
    border-left: 3px solid var(--bg-yellow);
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 5px 10px;
    background-color: rgba(40,40,50,0.5);
}

.headline_left {
    font-size: 1.4em;
    color: var(--text-white);
    letter-spacing: 0.3px;
}

.headline_right {
    font-size: 0.9em;
    color: #aaaaaa;
    display: flex;
    gap: 12px;
    align-items: center;
}

.headline_right a {
    display: inline-block;
    color: var(--text-blue-light);
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 4px;
    background-color: var(--bg-gray);
    transition: 0.2s;
}
.headline_right a:hover { background-color: var(--bg-gray-light); color: var(--text-white); }

.subline_bar {
    display: flex;
    padding: 5px;
    margin: 5px 0 10px;
    border-radius: 3px;
    border: 1px solid var(--border-gray-dark);
    border-left: 3px solid var(--border-gray-light);
    color: var(--text-white);
    background-color: rgba(10,10,20,0.5);
}

@media (max-width: 768px) {
    .headline_bar    { flex-direction: column; align-items: flex-start; padding: 10px 15px; }
    .headline_left   { font-size: 1.2em; margin-bottom: 6px; }
    .headline_right  { font-size: 0.85em; gap: 8px; }
}


/* ============================================================
   14.  PAGINATION  (ehem. inc_pagination.css + style_main/inc_pagination.css)
   ============================================================ */
.pagination {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin: 10px 0;
    gap: 6px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    user-select: none;
    cursor: default;
}

.pagination a {
    display: inline-block;
    padding: 6px 10px;
    min-width: 36px;
    text-align: center;
    background-color: rgb(10,10,15);
    color: #fff;
    border-radius: 5px;
    border: 1px solid rgb(30,30,40);
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.pagination a:hover {
    background-color: rgb(35,35,50);
    color: var(--text-yellow);
    border-color: var(--text-yellow);
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.pagination a.active {
    background-color: var(--text-yellow);
    color: rgb(10,10,15);
    border-color: var(--text-yellow);
    font-weight: bold;
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.pagination a.prev,
.pagination a.next { background-color: rgb(20,20,35); color: #fff; }
.pagination a.prev:hover,
.pagination a.next:hover {
    background-color: rgb(40,40,60);
    color: var(--text-yellow);
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.pagination .dots {
    display: inline-block;
    padding: 6px 10px;
    color: rgb(90,90,90);
    font-weight: bold;
    user-select: none;
}


/* ============================================================
   15.  DASHBOARD  (ehem. inc_dashboard.css)
   ============================================================ */
.dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    padding: 20px;
}

@media (max-width: 768px) {
    .dashboard { grid-template-columns: 1fr; padding: 10px; gap: 15px; }
}


/* ============================================================
   16.  ACCORDION  (ehem. inc_accordion.css)
   ============================================================ */
.accordion {
    margin: 0 12px 6px 12px;
    border: 1px solid var(--border-box);
    border-radius: 6px;
    overflow: hidden;
    background: var(--site-bg-alt);
}

.accordion-item { border-radius: 4px; overflow: hidden; }

.accordion-header {
    color: var(--text-white);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 8px 14px;
    margin: 2px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(30,30,40,0.85);
    border: 1px solid #1c1e24;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    position: relative;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.accordion-header:hover {
    background-color: rgba(50,50,70,0.85);
    box-shadow: 0 4px 14px rgba(0,0,0,0.8);
}

.accordion-header.active {
    background-color: rgba(70,70,100,0.9);
    box-shadow: 0 4px 16px rgba(0,0,0,0.9);
}

.accordion-header::after {
    content: "\25BC";
    position: absolute;
    right: 15px;
    transition: transform 0.3s ease;
}

.accordion-header.active::after { transform: rotate(-180deg); }

.accordion-header .toggle-icon {
    display: inline-block;
    transition: transform 0.3s ease;
    transform-origin: center;
}
.accordion-header.open .toggle-icon { transform: rotate(180deg); }

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordion-active .accordion-content {
    max-height: 500px;
    padding: 30px 10px;
    overflow-y: auto;
}

.accordion-content.open { max-height: 100%; }

.accordion_icon { font-size: 18px; color: #9aa3b2; }

.status-badge {
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    color: #000;
    margin-left: 8px;
}

/* Gallery Story Accordion */
.galleryStoryHeader { color: var(--text-yellow); font-weight: bold; }

.galleryStoryContent {
    display: block;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #e0e0e0;
    background-color: rgba(25,25,35,0.8);
    border-left: 3px solid var(--text-yellow);
    border-radius: 0 0 6px 6px;
    padding: 10px 16px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.accordion-active .galleryStoryContent { overflow-y: auto; }
.galleryStoryContent::-webkit-scrollbar       { width: 8px; }
.galleryStoryContent::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; }
.galleryStoryContent::-webkit-scrollbar-thumb { background-color: var(--text-yellow); border-radius: 4px; }

/* BB-Code Accordion (more tag) */
.bb-accordion         { margin: 8px 0; }
.bb-accordion-label   { padding: 8px 12px; cursor: pointer; }
.bb-accordion-title   { display: inline-block; flex: 0 0 auto; padding: 4px 8px; font-size: 13px; font-weight: 600; color: #e6e6e6; }
.bb-accordion-arrow   { margin-left: auto; font-size: 11px; opacity: 0.7; transition: transform 0.2s ease; display: inline-block; }
.bb-accordion-body    { display: none; padding: 10px 12px; font-size: 13px; color: #cfcfcf; background: #181818; }
.bb-accordion-toggle:checked ~ .bb-accordion-label .bb-accordion-arrow { transform: rotate(90deg); }
.bb-accordion-toggle:checked ~ .bb-accordion-body { display: block; }


/* ============================================================
   17.  TABS  (ehem. inc_tabs.css)
   ============================================================ */
.layout_2col { display: grid; grid-template-columns: 275px 1fr; gap: 20px; }

.card { background: rgba(26,29,37,0.95); border-radius: 10px; padding: 15px; }

.avatar_large { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 3px; display: block; }

.username { font-size: 22px; font-weight: 600; margin-bottom: 5px; }

.muted { color: #9aa0b3; font-size: 13px; }

.tabs-nav {
    display: flex;
    width: 100%;
    gap: 6px;
    margin-bottom: 15px;
    padding: 4px;
    background: rgba(20,23,30,0.9);
    border-radius: 6px;
    border: 1px solid rgba(60,70,90,0.25);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
}

.tabs-nav button {
    flex: 1;
    background: transparent;
    border: none;
    color: #9aa3b2;
    padding: 10px 14px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
}
.tabs-nav button:hover { background: rgba(255,255,255,0.04); color: #d6dbea; }
.tabs-nav button.active {
    background: linear-gradient(180deg, #2e3344, #262b3a);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 4px 10px rgba(0,0,0,0.5);
}
.tabs-nav button.active::after {
    content: "";
    position: absolute;
    left: 25%; right: 25%;
    bottom: -4px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #4d6fff, #7fa2ff);
    box-shadow: 0 0 4px rgba(100,140,255,0.35);
}
.tabs-nav button:active { transform: scale(0.97); }

/* Privacy Tab */
.tabs-nav button[data-tab="tab_privacy"] { color: #8fbaff; }
.tabs-nav button[data-tab="tab_privacy"]:hover { background: rgba(79,130,255,0.08); color: #a8c6ff; }
.tabs-nav button[data-tab="tab_privacy"].active {
    background: linear-gradient(180deg, #2a3346, #222a3a);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(79,130,255,0.25), 0 4px 10px rgba(0,0,0,0.5);
}
.tabs-nav button[data-tab="tab_privacy"].active::after {
    background: linear-gradient(90deg, #4f82ff, #7fa2ff);
    box-shadow: 0 0 4px rgba(79,130,255,0.4);
}

/* Tab-Link (Anchor statt Button) */
.tabs-nav .tab-link {
    flex: 1;
    display: block;
    text-align: center;
    text-decoration: none;
    background: transparent;
    border: none;
    color: #9aa3b2;
    padding: 10px 14px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
}
.tabs-nav .tab-link:hover { background: rgba(255,255,255,0.04); color: #d6dbea; }
.tabs-nav .tab-link.active {
    background: linear-gradient(180deg, #2e3344, #262b3a);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 4px 10px rgba(0,0,0,0.5);
}
.tabs-nav .tab-link.active::after {
    content: "";
    position: absolute;
    left: 25%; right: 25%;
    bottom: -4px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #4d6fff, #7fa2ff);
    box-shadow: 0 0 4px rgba(100,140,255,0.35);
}
.tabs-nav .tab-link:active { transform: scale(0.97); }

.tabs-content { display: none; padding-top: 10px; }
.tabs-content.active { display: block; animation: fadeIn 0.2s ease; }

.tabs-select {
    display: none;
    margin-bottom: 10px;
    padding: 8px;
    background: #222633;
    color: #fff;
    border: 1px solid #333;
    border-radius: 6px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
    .layout_2col { grid-template-columns: 1fr; }
    .avatar_large { width: 100px; height: 100px; display: block; margin: 0 auto 10px; }
    .layout_2col > div:first-child .card { text-align: center; }
    .tabs-nav    { display: none; }
    .tabs-select { display: block; }
}


/* ============================================================
   18.  USER CARD  (ehem. inc_user_card.css)
   ============================================================ */
.user_card {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}
.user_card:hover { background-color: rgba(60,60,80,0.35); border-color: #3a3d4f; }
.user_card:link, .user_card:visited,
.user_card:hover, .user_card:active { color: inherit; text-decoration: none; }

.user_avatar { width: 45px; height: 45px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
.user_info   { display: flex; flex-direction: column; }
.user_text   { font-weight: 600; }
.user_status { font-size: 0.8rem; color: #9aa3b5; }

/* Slim-Variante */
.user_card_slim {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    background: rgba(35,35,45,0.35);
    border: 1px solid rgba(255,255,255,0.04);
    transform: scale(1);
    transform-origin: center;
    transition: background 0.15s, transform 0.18s, box-shadow 0.2s, border-color 0.2s;
}
.user_card_slim:hover {
    background: rgba(65,65,90,0.55);
    border-color: rgba(120,120,160,0.25);
    transform: scale(1.04);
    box-shadow: 0 6px 14px rgba(0,0,0,0.35), 0 0 0 1px rgba(120,120,160,0.08);
}
.user_card_slim:active { transform: scale(0.98); }
.user_card_slim:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(120,140,255,0.4), 0 6px 14px rgba(0,0,0,0.35);
}

.user_avatar_slim {
    width: 22px; height: 22px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    transition: transform 0.2s, filter 0.2s;
}
.user_card_slim:hover .user_avatar_slim { transform: scale(1.12); filter: brightness(1.1); }

.user_text_slim {
    font-size: 0.8rem; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user_status_slim {
    font-size: 0.65rem; color: #9aa3b5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Userlist (legacy inc_userlist.css) */
.userlist_Body { padding: 10px 0; text-align: center; }
.userlist_Item {
    display: inline-flex;
    align-items: center;
    width: 250px;
    height: 50px;
    background: #1a1a1a;
    color: #fff;
    border-left: 3px solid #ffb300;
    border-right: 1px solid var(--border-box);
    border-top: 1px solid var(--border-box);
    border-bottom: 1px solid var(--border-box);
    margin: 8px 10px;
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: -5px 5px 10px rgba(0,0,0,0.3), 5px 5px 10px rgba(0,0,0,0.3);
    text-align: left;
    vertical-align: top;
    gap: 8px;
    transition: all 0.2s ease;
}
.userlist_Item:hover { background: #2a2a2a; cursor: pointer; transform: translateY(-1px); }
.userlist_Item a { display: flex; align-items: center; text-decoration: none; color: inherit; width: 100%; height: 100%; }
.user_text span.clantag { margin-right: 6px; color: #ffb300; }


/* ============================================================
   19.  ACCOUNT  (ehem. inc_account.css)
   ============================================================ */
.account_form {
    width: 350px;
    max-width: 90%;
    margin: 50px auto;
    padding: 10px;
    background-color: var(--bg-gray-box);
    border: 1px solid var(--border-box);
    border-radius: 5px;
    color: var(--text-white);
    box-shadow: -5px 5px 10px var(--bg-box-shadow), 5px 5px 10px var(--bg-box-shadow);
}
.account_form h2 { text-align: center; margin-bottom: 20px; color: var(--text-yellow); }
.account_form p  { margin-bottom: 25px; text-align: center; }

.twofa-inputs {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 0 0 30px 0;
}
.twofa-inputs input {
    width: 40px;
    height: 50px;
    color: var(--text-white);
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    transition: border-color 0.2s;
    border: 1px solid var(--border-box);
    border-radius: 5px;
    background-color: rgba(20,25,35,0.7);
    box-sizing: border-box;
}
.twofa-inputs input:focus { border-color: #007bff; outline: none; }

@media (max-width: 768px) { .twofa-inputs { gap: 10px; } }

/* Account Wrapper (erweitertes Layout) */
.account-wrapper { max-width: 1400px; margin: 40px auto; padding: 20px; display: flex; gap: 40px; }
.account-sidebar { width: 300px; }
.account-content { flex: 1; }
.account-avatar img { width: 100%; border-radius: 8px; margin-bottom: 15px; }
.account-tabs { display: flex; gap: 10px; margin-bottom: 25px; overflow-x: auto; scrollbar-width: thin; }
.account-tabs button { white-space: nowrap; padding: 8px 14px; border: none; background: #2c2d38; color: #fff; cursor: pointer; border-radius: 4px; }
.account-tabs button.active { background: #66cc66; color: #000; }
.tab-content { display: none; background: rgba(40,40,50,0.4); border: 1px solid #42454f; padding: 20px; border-radius: 8px; }
.tab-content.active { display: block; }
.account-dropdown { width: 100%; padding: 8px; margin-bottom: 15px; border-radius: 4px; border: 1px solid #42454f; background: #2c2d38; color: #fff; display: none; }

@media (max-width: 900px) {
    .account-wrapper  { flex-direction: column; }
    .account-sidebar  { width: 100%; }
    .account-tabs     { display: none !important; }
    .account-dropdown { display: block !important; }
}


/* ============================================================
   20.  FORUM  (ehem. inc_forum.css + style_main/inc_forum.css)
   ============================================================ */

/* Überschrift */
.forum-title { text-align: center; font-size: 2.5rem; margin-bottom: 20px; }

.category-header th { font-size: 1.2rem; padding: 10px; }
.subcategory          { border-bottom: 1px solid var(--border-gray-dark); }
.subcategory .title   { width: 40%; }
.subcategory .last-post { font-size: 0.9rem; }
.subcategory .last-post a { text-decoration: none; }
.subcategory .last-post a:hover { text-decoration: underline; }

/* Zitat */
.forum_quote {
    padding: 5px;
    margin: 5px 10px;
    border: 1px solid #666666;
    background: #151a18;
    border-radius: 4px;
}

/* Forum Content Block */
.content_forum_block {
    padding: 10px;
    border: 1px solid var(--border-card);
    border-radius: 6px;
    background-color: var(--bg-gray-transparent);
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
}

/* Grid-Wrapper (Forum-Startseite) */
.grid-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
}

.content-block {
    flex: 1 1 450px;
    max-width: 650px;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid #080b10;
    background-color: var(--bg-gray-transparent);
    border-radius: 5px;
    box-shadow: -5px 5px 10px rgba(0,0,0,0.3), 5px 5px 10px rgba(0,0,0,0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.content-block:hover {
    transform: translateY(-2px);
    box-shadow: -6px 6px 12px rgba(0,0,0,0.4), 6px 6px 12px rgba(0,0,0,0.4);
}

.block-title { font-size: 18px; color: var(--text-yellow); text-shadow: 0 0 5px #000; margin-bottom: 10px; text-align: center; }
.block-title a { color: var(--text-yellow); text-decoration: none; }
.block-title a:hover { color: #fffacd; }

.grid-container { display: flex; flex-wrap: wrap; gap: 10px; }

.item-card { display: block; padding: 10px; margin: 5px; color: #cce7ff; text-decoration: none; transition: 0.2s ease; border-radius: 4px; }
.item-card:hover { background: rgba(40,40,60,0.8); }

.item-list li {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 6px 12px;
    margin-bottom: 4px;
    background-color: var(--bg-gray-transparent);
    border: 1px solid var(--border-card);
    border-radius: 4px;
}

.item-card.empty-item .item-title       { color: #888; }
.item-card.empty-item:hover .item-title { color: #aaa; }

/* Thread-Container */
.thread-container { flex: 1; min-width: 300px; }
.forum-threads    { flex: 1; min-width: 300px; }

.thread-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }

.thread-list li {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 6px 12px;
    margin-bottom: 4px;
    background-color: var(--bg-gray-transparent);
    border: 1px solid var(--border-card);
    border-radius: 4px;
}
.thread-list li:hover { background: rgba(28,32,44,0.95); }
.thread-list li a { color: #cfd8e3; font-size: 14px; text-decoration: none; flex-grow: 1; line-height: 1.2; }
.thread-list li a:hover { color: #7cc4ff; }

.active-thread { font-weight: 600; color: #4da3ff; }
.thread-user   { font-size: 0.75em; color: #8b93a1; white-space: nowrap; }

/* Post-Block */
.post-block {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    padding: 12px 0 0 12px;
    border: 1px solid var(--border-box);
    background-color: rgba(40,40,50,0.5);
    box-shadow: -5px 5px 10px rgba(0,0,0,0.3), 5px 5px 10px rgba(0,0,0,0.3);
    color: var(--text-white);
}

.comment-block {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    padding: 12px 0 0 12px;
    background-color: rgba(20,23,30,0.8);
    border: 1px solid var(--border-box);
    box-shadow: -3px 3px 8px rgba(0,0,0,0.5);
}

.post-user, .comment-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
    flex-shrink: 0;
}
.post-user img, .comment-user img {
    width: 80px; height: 80px;
    border-radius: 5px;
    object-fit: cover;
    border: 2px solid #555;
}
.post-username, .comment-username { font-size: 0.85em; color: var(--text-secondary); text-align: center; word-break: break-word; }

.post-content, .comment-content {
    flex: 1;
    position: relative;
    border-left: 1px solid var(--border-box);
    padding: 10px;
}

.post-date, .comment-date { position: absolute; top: 0; right: 15px; font-size: 0.75em; color: #888; }

.post-content p, .comment-content p { overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
.post-content h3 { margin: 0; }
.comment-content p { margin-top: 5px; line-height: 1.4; }

/* Kommentar hover */
.post-comment {
    padding: 14px;
    margin-bottom: 12px;
    border-left: 3px solid #6e6e6e;
    border-radius: 3px;
    background-color: var(--bg-gray-transparent);
    color: #d0d0d0;
}
.post-comment:hover { background-color: #1a1d26; border-left-color: #3a3c42; }

/* Thread-Post (Detail) */
.thread-post {
    padding: 18px;
    margin-bottom: 18px;
    border-radius: 3px;
    border: 1px solid var(--border-box);
    background-color: rgba(40,40,50,0.5);
    box-shadow: -5px 5px 10px rgba(0,0,0,0.3), 5px 5px 10px rgba(0,0,0,0.3);
    color: var(--text-white);
}
.thread-post .thread-user { font-size: 0.85em; color: #aaa; }

.thread-comments .comment {
    padding: 14px;
    margin-bottom: 12px;
    border-left: 3px solid #6e6e6e;
    border: 1px solid #080b10;
    border-radius: 3px;
    background-color: var(--bg-gray-transparent);
    color: #d0d0d0;
}
.thread-comments .comment:hover { background-color: #1a1d26; border-left-color: #3a3c42; }

/* Read-All */
.forum-readall-row      { width: 100%; text-align: center; margin: 20px 0; flex-basis: 100%; }
.forum-readall-container{ margin-bottom: 10px; text-align: right; }

.subboard-unread-count {
    display: inline-block;
    min-width: 22px;
    padding: 2px 6px;
    margin-left: 6px;
    font-size: 0.75em;
    font-weight: bold;
    color: #fff;
    background-color: #1e6bb8;
    border-radius: 12px;
    text-align: center;
    line-height: 1.2;
}
.subboard-unread-count:hover { background-color: #66b3ff; }

.btn-readall {
    padding: 6px 12px;
    font-size: 0.9em;
    font-weight: bold;
    background-color: #1e6bb8;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-readall:hover { background-color: #155a9c; }

.subforum-list li {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 6px 12px;
    margin-bottom: 4px;
    background-color: var(--bg-gray-transparent);
    border: 1px solid var(--border-card);
    border-radius: 4px;
}

.forum-card.empty-subforum .forum-card-title       { color: #888; }
.forum-card.empty-subforum:hover .forum-card-title { color: #aaa; }

/* Blockquote */
blockquote {
    margin: 12px 0;
    padding: 12px 16px;
    border-left: 4px solid #6c7ae0;
    background: #1e1f26;
    color: #d6d6d6;
    border-radius: 6px;
    position: relative;
}

/* Quill-Größen */
.ql-size-small  { font-size: 0.75em; color: #b8b8b8; }
.ql-size-normal { font-size: 1em; color: #e6e6e6; }
.ql-size-large  { font-size: 1.25em; font-weight: 600; color: #fff; }
.ql-size-huge   { font-size: 1.6em; font-weight: 700; color: #fff; letter-spacing: 0.2px; }

.ql-syntax {
    background: #1e1f26;
    color: #e6e6e6;
    padding: 14px 16px;
    margin: 12px 0;
    border-radius: 8px;
    border: 1px solid #2c2f3a;
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.ql-container { position: relative; resize: vertical; overflow: auto; min-height: 140px; max-height: 600px; }

/* BBCode Post-Styles */
.post-text > *:first-child { margin-top: 0; }
.post-text > *:last-child  { margin-bottom: 0; }

.post-text .bb-h1, .post-text h1 { font-size: 1.7em; font-weight: 700; color: #f0f2ff; margin: 16px 0 8px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 6px; }
.post-text .bb-h2, .post-text h2 { font-size: 1.35em; font-weight: 600; color: #e8eaff; margin: 14px 0 6px; }
.post-text .bb-h3, .post-text h3 { font-size: 1.1em; font-weight: 600; color: #dde0f8; margin: 12px 0 5px; }

.post-text .bb-u  { text-decoration: underline; }
.post-text .bb-o  { text-decoration: overline; }

.post-text .bb-mark, .post-text mark { background: rgba(255,220,60,0.25); color: #ffe86e; padding: 1px 3px; border-radius: 3px; }
.post-text .bb-highlight { background: rgba(108,123,255,0.2); color: #aab4ff; padding: 1px 5px; border-radius: 4px; }

.post-text .bb-kbd, .post-text kbd {
    display: inline-block;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 6px;
    font-family: monospace;
    font-size: 12px;
    color: #c8d0e8;
}

.post-text sup { font-size: 0.75em; vertical-align: super; }
.post-text sub { font-size: 0.75em; vertical-align: sub; }

.post-text .bb-left    { text-align: left; }
.post-text .bb-center  { text-align: center; }
.post-text .bb-right   { text-align: right; }
.post-text .bb-justify { text-align: justify; }
.post-text [style*="text-align:center"],  .post-text [style*="text-align: center"]  { text-align: center; }
.post-text [style*="text-align:right"],   .post-text [style*="text-align: right"]   { text-align: right; }
.post-text [style*="text-align:justify"], .post-text [style*="text-align: justify"] { text-align: justify; }

.post-text .bb-quote, .post-text .bb-bq, .post-text blockquote {
    margin: 10px 0; padding: 10px 14px;
    border-left: 3px solid #6c7bff;
    background: rgba(108,123,255,0.07);
    border-radius: 0 6px 6px 0;
    color: #b0b8d8;
    font-style: italic;
}
.post-text .bb-quote cite { display: block; font-size: 12px; font-style: normal; font-weight: 600; color: #8898cc; margin-bottom: 6px; }

.post-text .bb-code, .post-text pre {
    background: #0f111a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 12px 16px;
    margin: 10px 0;
    overflow-x: auto;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #a8b4d8;
}
.post-text .bb-code code, .post-text pre code { background: none; border: none; padding: 0; font-size: inherit; color: inherit; }

.post-text .bb-inline-code, .post-text code {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 85%;
    color: #a5b4fc;
}

.post-text pre[data-lang]::before {
    content: attr(data-lang);
    display: block;
    font-size: 10px;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #5a6088;
    margin-bottom: 8px;
}

.post-text .bb-list, .post-text ul, .post-text ol { padding-left: 1.6em; margin: 6px 0; }
.post-text .bb-list li, .post-text ul li, .post-text ol li { margin: 3px 0; line-height: 1.6; }

.post-text .bb-table, .post-text table { border-collapse: collapse; width: auto; max-width: 100%; margin: 10px 0; font-size: 13px; }
.post-text .bb-table td, .post-text .bb-table th,
.post-text table td, .post-text table th { border: 1px solid rgba(255,255,255,0.12); padding: 6px 12px; text-align: left; vertical-align: top; }
.post-text .bb-table th, .post-text table th { background: rgba(255,255,255,0.06); font-weight: 600; color: #d0d6f0; }
.post-text .bb-table tr:nth-child(even) td, .post-text table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }

.post-text .bb-video-wrapper { position: relative; width: 100%; border: 1px solid #000; }
.post-text .bb-video-wrapper iframe { width: 100%; height: auto; aspect-ratio: 16/9; border: 1px solid #000; }

.post-text .bb-img, .post-text img { max-width: 100%; height: auto; border-radius: 4px; display: inline-block; vertical-align: middle; }

.post-text .bb-spoiler, .post-text .bb-more { border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; margin: 8px 0; overflow: hidden; }
.post-text .bb-spoiler > summary, .post-text .bb-more > summary {
    padding: 8px 14px;
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 600;
    color: #9aa8d0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background .15s;
}
.post-text .bb-spoiler > summary::before { content: '▶'; font-size: 10px; }
.post-text .bb-spoiler[open] > summary::before { content: '▼'; }
.post-text .bb-more > summary::before { content: '▶'; font-size: 10px; }
.post-text .bb-more[open] > summary::before { content: '▼'; }
.post-text .bb-spoiler > summary:hover, .post-text .bb-more > summary:hover { background: rgba(255,255,255,0.07); }
.post-text .bb-spoiler > div, .post-text .bb-more > .bb-more-body { padding: 12px 14px; border-top: 1px solid rgba(255,255,255,0.08); }

.post-text a, .post-text .bb-link { color: #818cf8; text-decoration: none; transition: color .15s; }
.post-text a:hover, .post-text .bb-link:hover { color: #a5b0ff; text-decoration: underline; }
.post-text .bb-link--wiki::before   { content: '📖 '; }
.post-text .bb-link--google::before { content: '🔍 '; }

.post-text .bb-hr, .post-text hr { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 14px 0; }
.post-text p { margin: 0; }
.post-text p:last-child { margin-bottom: 0; }

/* Responsive Forum */
@media (max-width: 768px) {
    .forum-title { font-size: 2rem; margin-bottom: 15px; }
    .table th, .table td { padding: 8px; }
    .subcategory .title { width: auto; }
    .post-block, .comment-block { flex-direction: column; align-items: flex-start; }
    .post-user, .comment-user  { flex-direction: row; align-items: center; width: auto; }
    .post-user img, .comment-user img { margin-right: 10px; margin-bottom: 0; }
    .post-date, .comment-date  { position: static; margin-left: auto; margin-bottom: 5px; }
}

@media (max-width: 1400px) {
    .content-block { flex: 0 0 auto; min-width: 250px; max-width: 425px; padding: 0; }
    .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
    .item-card { margin: 0; }
}

@media (max-width: 900px) {
    .content-block { min-width: 100%; padding: 0; }
    .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
    .item-card { padding: 5px 10px; margin: 5px 0; }
    .block-title { font-size: 1.2em; font-weight: bold; margin-bottom: 5px; text-align: center; }
}


/* ============================================================
   21.  POLL  (ehem. inc_poll.css)
   ============================================================ */
.poll-container { max-width: 100%; padding: 10px; color: #fff; font-family: Tahoma, sans-serif; border-radius: 8px; box-sizing: border-box; }
.poll-description { margin-bottom: 20px; }

.poll-headline-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 12px 15px;
    border-radius: 8px;
    background-color: rgba(40,40,50,0.6);
    border: 1px solid #42454f;
    box-shadow: 0 0 15px rgba(0,0,0,0.6);
}
.poll-headline-left { font-size: 1.4em; font-weight: bold; letter-spacing: 0.5px; }

.poll-options { display: flex; flex-direction: column; gap: 15px; }

.poll-option {
    position: relative;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--border-card);
    background-color: var(--bg-gray-transparent);
    box-shadow: -5px 5px 10px rgba(0,0,0,0.3), 5px 5px 10px rgba(0,0,0,0.3);
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.poll-option:hover          { transform: scale(1.02); background-color: rgba(40,40,50,0.35); }
.poll-option.selected       { background-color: rgba(40,40,50,0.5); border: 1px solid #42454f; box-shadow: 0 0 10px rgba(0,0,0,0.95); }
.poll-option.selected:hover { transform: scale(1.025); }
.poll-option.has-vote       { border: 1px solid var(--bg-green-accent); background: rgba(31,139,76,0.08); }

.my-vote-badge {
    position: absolute;
    top: -12px;
    left: 15px;
    background: #0f1f14;
    color: var(--bg-green);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 5px;
    font-weight: 600;
    border: 1px solid var(--bg-green-accent);
    box-shadow: 0 0 10px rgba(0,0,0,0.95);
}

.poll-option-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px; }

.status-icon        { font-size: 1.5em; margin-right: 5px; }
.status-icon.closed { color: red; }
.status-icon.open   { color: limegreen; }

.poll-answer { flex: 1; display: flex; align-items: center; gap: 5px; }
.poll-count  { width: 80px; text-align: center; }

.toggle-users { cursor: pointer; user-select: none; font-weight: bold; }
.poll-users   { display: none; padding: 5px; margin-top: 5px; }

.user-vote { display: flex; align-items: center; gap: 5px; padding: 2px; margin: 2px 0; cursor: pointer; transition: background 0.3s ease; }
.user-vote:hover { background: #333; }

.avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }

.poll-bar-wrapper { margin-top: 5px; width: 100%; }
.poll-bar         { height: 20px; overflow: hidden; }
.poll-progress {
    height: 100%;
    background: #fad73c;
    color: #fff;
    text-align: center;
    line-height: 18px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
                 -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, 0 0 3px rgba(0,0,0,0.7);
}

.poll-card-link { display: block; text-decoration: none; color: inherit; margin: 2px 0; }
.poll-card {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--border-card);
    background-color: var(--bg-gray-transparent);
    box-shadow: -5px 5px 10px rgba(0,0,0,0.3), 5px 5px 10px rgba(0,0,0,0.3);
    transition: background 0.3s, transform 0.2s;
}
.poll-card:hover { transform: scale(1.01); background-color: rgba(40,40,50,0.5); }
.poll-title { font-weight: bold; }
.poll-status-icon { margin-right: 5px; }
.poll-dates { display: flex; justify-content: space-between; font-size: 0.9em; color: #aaa; }

.poll-submit-wrapper { display: flex; justify-content: space-between; margin-top: 20px; flex-wrap: wrap; gap: 10px; }
.poll-submit { background: #0a0; border: none; padding: 10px 20px; border-radius: 6px; color: #fff; font-weight: bold; cursor: pointer; transition: background 0.3s ease, transform 0.2s ease; }
.poll-submit:hover { background: #0f0; transform: scale(1.05); }

.poll-message { text-align: center; margin-top: 10px; color: #aaa; }

.poll-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}
.poll-section label { margin-bottom: 5px; font-weight: bold; }
.poll-section input[type="text"],
.poll-section input[type="number"],
.poll-section textarea,
.poll-section select {
    width: 100%;
    box-sizing: border-box;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid #50536a;
    background-color: rgba(60,60,80,0.7);
    color: #fff;
    resize: none;
}
.poll-section textarea { height: 200px; }

/* poll_section (Admin-Variante) */
.poll_section {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 5px;
    border: 1px solid var(--border-card);
    margin-bottom: 10px;
    padding: 5px 10px;
    background-color: rgba(40,40,50,0.5);
    box-shadow: -5px 5px 10px rgba(0,0,0,0.3), 5px 5px 10px rgba(0,0,0,0.3);
}
.poll_section label { display: block; margin-bottom: 5px; font-weight: 600; }
.poll_section input[type="text"],
.poll_section textarea,
.poll_section select,
.poll_section input[type="number"] {
    width: 100%;
    padding: 7px 10px;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid var(--border-card);
    background-color: rgba(10,10,10,0.9);
    color: var(--text-secondary);
    font-size: 16px;
    transition: border 0.2s ease, background 0.2s ease;
}
.poll_section textarea { resize: none; min-height: 70px; }
.poll_section .ulpoll  { list-style: none; padding-left: 0; margin-top: 10px; }
.poll_section .ulpoll li { display: flex; align-items: center; margin-bottom: 8px; }
.poll_section .ulpoll li input[type="text"] { flex: 1; margin-right: 5px; }
.poll_section .ulpoll img { cursor: pointer; width: 20px; height: 20px; }

.flex-wrap { display: flex; flex-wrap: wrap; gap: 15px; }
.flex-row  { display: flex; flex-wrap: wrap; gap: 10px; }
.flex-col  { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 5px; }

.poll-option-col { display: flex; flex-direction: column; gap: 5px; flex: 1; }

.ulpoll { list-style: decimal; padding-left: 20px; }
.ulpoll li { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.ulpoll input { flex: 1; }

@media (max-width: 600px) {
    .flex-wrap { flex-direction: column; }
    .flex-row  { flex-direction: column; }
    .flex-col  { min-width: 100%; }
    .poll-submit-wrapper { flex-direction: column; align-items: stretch; }
    .poll-submit-wrapper button { width: 100%; }
}


/* ============================================================
   22.  GALLERY  (ehem. inc_gallery.css + style_main/inc_gallery.css)
   ============================================================ */
.gallery_box { padding: 10px; min-height: 170px; background-color: #101413; }

.randomImage {
    width: 288px;
    height: 175px;
    background-size: cover;
    background-position: center 10%;
    background-repeat: no-repeat;
    box-sizing: border-box;
}

.gallery_select  { width: 300px; background-color: #f0f0f0; }
.gallery_images  { flex-grow: 1; min-width: 500px; background-color: #d0d0d0; }
.gallery_list    { list-style-type: none; padding: 0; margin: 0; }
.gallery_list li { border: 1px solid #ccc; margin: 5px; padding: 10px; cursor: pointer; transition: background-color 0.3s ease; }
.gallery_list li:hover  { background-color: #f0f0f0; }
.gallery_list li.active { background-color: #007bff; color: white; }

/* Thumbnails */
.gallery_thumbnails { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; width: 100%; }
.thumbnail { width: 100%; aspect-ratio: 1/1; background-size: cover; background-position: center; border-radius: 6px; cursor: pointer; transition: transform 0.2s ease, filter 0.2s ease; }
.thumbnail:hover { transform: scale(1.04); filter: brightness(1.1); }

@media (max-width: 768px) {
    .gallery_thumbnails { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 4px; }
}

/* Galerie-Viewer */
.galleryContent { position: relative; width: 100%; height: 100%; overflow: hidden; background-color: #000; border-radius: 0 0 5px 5px; }
.galleryContent img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top 5%; opacity: 0; transition: opacity 0.8s ease, object-position 0.5s ease; z-index: 2; border-radius: 0; }
.galleryContent img.active { opacity: 1; }

.bg-blur { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: blur(20px); transform: scale(1.1); z-index: 1; background-size: cover; background-position: center; border-radius: 0; }

.imageDesc {
    position: absolute;
    bottom: 8px;
    left: 8px;
    color: #f0f2f8;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    z-index: 3;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    background-color: rgba(0,0,0,0.65);
    padding: 6px 10px;
    border-radius: 8px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: inline-block;
    max-width: calc(100% - 16px);
    word-wrap: break-word;
    box-sizing: border-box;
}


/* ============================================================
   23.  TEAMSPEAK  (ehem. inc_teamspeak.css + style_main/inc_teamspeak.css)
   ============================================================ */

/* Header */
.ts3_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(40,40,50,0.5);
    border-left: 3px solid #ebb43d;
    border-right: 1px solid var(--border-card);
    border-top: 1px solid var(--border-card);
    border-bottom: 1px solid var(--border-card);
    box-shadow: -5px 5px 10px rgba(0,0,0,0.3), 5px 5px 10px rgba(0,0,0,0.3);
}

.ts3_header_info   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ts3_header_label  { font-size: 13px; color: #6c7086; text-transform: uppercase; letter-spacing: .05em; }
.ts3_header_server { font-size: 15px; font-weight: bold; color: #FAD73C; }
.ts3_header_port   { font-size: 12px; color: #888; background: rgba(255,255,255,0.05); border: 1px solid #2a2c3a; border-radius: 4px; padding: 1px 7px; }

.ts3_connect_btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 5px;
    border: 1px solid #ebb43d44;
    background: rgba(235,180,61,0.1);
    color: #ebb43d;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.ts3_connect_btn:hover { background: rgba(235,180,61,0.22); border-color: #ebb43d88; color: #FAD73C; }

/* Body */
.ts3_body { width: 100%; font-family: Verdana, sans-serif; color: #cdd6f4; box-sizing: border-box; }
.ts3ssv   { width: 100%; max-width: 1300px; margin: 0 auto; font-family: Verdana, sans-serif; color: #fff; box-sizing: border-box; }

/* Hauptchannel */
.ts3ssvMainChannel { margin-bottom: 16px; }
.ts3ssvMainChannelHeader {
    font-size: 15px;
    font-weight: bold;
    color: #FAD73C;
    border-left: 3px solid #ebb43d;
    border-right: 1px solid var(--border-card);
    border-top: 1px solid var(--border-card);
    border-bottom: 1px solid var(--border-card);
    margin-bottom: 8px;
    padding: 6px 12px;
    background: rgba(40,40,50,0.5);
    box-shadow: -5px 5px 10px rgba(0,0,0,0.3), 5px 5px 10px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ts3ssvMainChannelHeader::before { content: "📢"; font-size: 14px; flex-shrink: 0; }

/* Subchannels */
.ts3ssvSubChannel {
    border-left: 3px solid #3a3c4e;
    border-right: 1px solid var(--border-card);
    border-top: 1px solid var(--border-card);
    border-bottom: 1px solid var(--border-card);
    margin-left: 20px;
    margin-bottom: 6px;
    padding: 4px 0;
    background: rgba(30,30,40,0.3);
    box-shadow: -5px 5px 10px rgba(0,0,0,0.2), 5px 5px 10px rgba(0,0,0,0.2);
}
.ts3ssvSubChannelHeader { font-size: 15px; font-weight: bold; color: #888aaa; padding: 3px 10px; display: flex; align-items: center; gap: 6px; }
/* .ts3ssvSubChannelHeader::before { content: "▸"; color: #6c7086; font-size: 12px; flex-shrink: 0; } */

/* Users */
.ts3ssvUsers { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 8px 6px 40px; }

.ts3ssvUser {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 12px 3px 12px;
    background: rgba(20,25,35,0.4);
    border: 1px solid #2a2c3a;
    border-radius: 5px;
    font-size: 15px;
    font-weight: bold;
    color: #ebb43d;
    box-shadow: -3px 3px 8px rgba(0,0,0,0.3), 3px 3px 8px rgba(0,0,0,0.3);
    transition: background .15s, border-color .15s;
    user-select: none;
    cursor: default;
}

.ts3ssvUser img {
	height: 16px;
	width: 16px;
	object-fit: contain;
	vertical-align: middle;
	margin-right: 3px;
}

.ts3_channel_icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
}

/* .ts3ssvUser::before { content: "🎧"; font-size: 14px; flex-shrink: 0; line-height: 1; } */
.ts3ssvUser:hover   { background: rgba(235,180,61,0.1); border-color: #ebb43d44; }

.ts3ssvUsers .ts3ssvItem { background-color: #101413; padding: 5px 10px; font-size: 15px; font-weight: bold; color: #fceb98; cursor: default; transition: background 0.2s, box-shadow 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.5); border-radius: 4px; }
.ts3ssvUsers .ts3ssvItem:hover { background-color: #0b0b09; box-shadow: 0 4px 12px rgba(0,0,0,0.6); }

.ts3ssvItem, .ts3ssvSubChannel, .ts3ssvMainChannel { user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.ts3ssvItem img { vertical-align: middle; margin-right: 5px; }

/* Leer */
.ts3UserEmpty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 160px; color: #6c7086; font-size: 14px; font-style: italic; }
.ts3UserEmpty::before { content: "🎧"; font-size: 32px; opacity: .5; }

/* Fehler */
.ts3ssvError { padding: 12px 16px; border-left: 3px solid #f7768e; background: rgba(247,118,142,0.08); color: #f7768e; font-size: 13px; border-radius: 0 5px 5px 0; }

/* ts_user */
.ts_user {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 6px 10px 6px 30px;
    position: relative;
    display: block;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: #e6edf3;
    transition: all .15s ease;
}
.ts_user:hover { background: rgba(255,255,255,0.04); border-color: rgba(88,166,255,0.25); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.25); }
.ts_user::before { content: "🗣️"; color: #ebb43d; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); font-size: 16px; }

.tsUsersBox { max-height: 300px; overflow-y: auto; position: relative; }
.ts3UserEmpty { padding: 10px; color: #888; text-align: center; }

.ts_pagination { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.ts_pagination a { color: #4CAF50; text-decoration: none; font-weight: 600; padding: 3px 8px; border: 1px solid #4CAF50; border-radius: 4px; transition: background 0.2s; display: inline-block; white-space: nowrap; }
.ts_pagination a:hover { background: #4CAF50; color: #fff; }

@media (max-width: 768px) {
    .ts3_header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ts3_connect_btn { width: 100%; justify-content: center; }
    .ts3ssvUsers  { flex-direction: column; margin-left: 8px; }
    .ts3ssvSubChannel { margin-left: 8px; }
    .ts3ssvUser { font-size: 12px; }
    .ts3ssvMainChannelHeader { font-size: 16px; }
    .ts3ssvSubChannelHeader  { font-size: 14px; }
    .ts3ssvUsers .ts3ssvItem { font-size: 12px; padding: 0 5px; }
}


/* ============================================================
   24.  WIDGET – TOAST  (ehem. inc_widgets.css)
   ============================================================ */
#toast {
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 18px;
    border-radius: 6px;
    background-color: var(--bg-toast);
    color: #fff;
    font-weight: 600;
    font-family: Tahoma, sans-serif;
    box-shadow: var(--shadow);
    z-index: 9999;
    opacity: 0.95;
    max-width: 90%;
    white-space: nowrap;
    text-align: center;
    transition: top 0.5s ease;
}
#toast.success { border: 1px solid var(--bg-green-accent); }
#toast.info    { border: 1px solid #3399ff; }
#toast.alert   { border: 1px solid var(--bg-red); }

@media (max-width: 480px) { #toast { white-space: normal; word-break: break-word; } }


/* ============================================================
   25.  STATUS / EVENT  (aus style.css)
   ============================================================ */
.status-content { display: flex; flex-direction: column; gap: 8px; font-size: 0.95em; }
.status-row { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 6px; background-color: var(--bg-gray-transparent); transition: 0.3s; }
.status-row:hover { background-color: rgba(50,50,70,0.5); }
.status-label { font-weight: 600; color: #ccc; }
.status-value { font-weight: 500; color: #fff; text-align: right; }

/* Orga Sub-Tabs */
.orga-subtabs        { display: flex; gap: 8px; margin-bottom: 10px; }
.orga-subtabs button { padding: 6px 10px; border: none; background: #444; color: #fff; border-radius: 4px; cursor: pointer; }
.orga-subtabs button.active { background: #66cc66; color: #000; }
.orga-subtab        { display: none; }
.orga-subtab.active { display: block; }

@media (max-width: 900px) {
    .event-tabs     { display: none !important; }
    .event-dropdown { display: block !important; }
}

/* Teilnehmer-Grid */
.participants-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 20px; }
.participant-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 6px;
    background-color: rgba(60,60,80,0.35);
    border: 1px solid #3a3d4f;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: #fff;
    min-width: 80px;
}
.participant-card:hover { background-color: rgba(70,70,100,0.45); transform: translateY(-2px); }
.participant-avatar { width: 45px; height: 45px; border-radius: 5px; object-fit: cover; margin-bottom: 6px; border: 2px solid #444; }
.participant-name   { font-size: 0.9em; font-weight: 500; text-align: center; word-break: break-word; }
.participants-grid.paid .participant-card,
.participants-grid.unpaid .participant-card { border: 1px solid var(--border-card); }

/* Roundmail Form */
.roundmail-form { display: flex; flex-direction: column; gap: 12px; }
.roundmail-form .form-group { display: flex; flex-direction: column; }
.roundmail-form input, .roundmail-form select, .roundmail-form textarea { padding: 8px; border-radius: 6px; border: 1px solid #444; background-color: rgba(30,30,40,0.7); color: #fff; }
.roundmail-form button.join-button { background: #66cc66; color: #000; border: none; padding: 10px; border-radius: 6px; cursor: pointer; }

/* Team-Title */
.team-title { background: #1c1f27; border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.team-title span { color: #dfe3ea; font-weight: 500; }

/* Cart */
.cart-head-left  { display: flex; flex-direction: column; }
.cart-title      { font-weight: bold; font-size: 14px; }
.cart-dates      { font-size: 12px; color: #aaa; }
.cart-head-right { text-align: right; margin-right: 25px; }

/* User-Wrapper (Profil) */
.user-wrapper  { display: flex; gap: 40px; margin: 20px 0; }
.user-sidebar  { width: 280px; }
.user-avatar img { width: 100%; border-radius: 8px; margin-bottom: 10px; }
.user-content  { flex: 1; }
.user-field    { margin-bottom: 15px; }
.user-field label { font-weight: bold; display: block; margin-bottom: 5px; }

/* Map */
.map_controls { display: flex; gap: 10px; margin-bottom: 15px; align-items: center; }
.map_controls input.live-search-box { flex: 1; padding: 14px 12px 10px 12px; border: 1px solid var(--bg-gray-light); border-radius: 6px; background-color: var(--bg-gray-transparent); color: var(--text-secondary); font-size: 16px; box-sizing: border-box; transition: border 0.2s ease, background 0.2s ease; }
.map_controls input.live-search-box::placeholder { color: #aaa; }
.map_controls button#back_button { padding: 8px 15px; border: none; border-radius: 5px; background: #3498db; color: #fff; cursor: pointer; font-weight: bold; transition: background 0.2s; }
.map_controls button#back_button:hover { background: #444; }

.map_layout { display: flex; gap: 20px; flex-wrap: wrap; }
#map_wrapper { flex: 1 1 60%; min-width: 300px; height: 500px; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.5); }

.map_userlist_container { flex: 1 1 35%; min-width: 200px; display: flex; flex-direction: column; height: 500px; }
.map_userlist_container ul#myUL { flex: 1; overflow-y: auto; scroll-behavior: smooth; margin: 0; padding: 0; list-style: none; scrollbar-width: none; -ms-overflow-style: none; }
.map_userlist_container ul#myUL::-webkit-scrollbar { display: none; }
.map_userlist_container ul#myUL li { display: flex; align-items: center; padding: 5px 10px; margin-bottom: 3px; cursor: pointer; color: #fff; border-radius: 4px; border: 1px solid var(--border-card); background-color: rgba(30,30,40,0.6); box-shadow: -3px 3px 8px rgba(0,0,0,0.4), 3px 3px 8px rgba(0,0,0,0.4); transition: background 0.3s, transform 0.2s, box-shadow 0.2s; backdrop-filter: blur(2px); }
.map_userlist_container ul#myUL li:hover { background-color: rgba(50,50,70,0.8); box-shadow: -5px 5px 12px rgba(0,0,0,0.5), 5px 5px 12px rgba(0,0,0,0.5); transform: scale(1.02); }
.map_userlist_container ul#myUL li.selected { font-weight: bold; background-color: #3498db; color: #fff; }
.map_userlist_container ul#myUL li img { width: 30px; height: 30px; border-radius: 4px; margin-right: 8px; object-fit: cover; }

.pagination_buttons { display: flex; justify-content: space-between; margin-top: 5px; }
.pagination_btn { flex: 1; margin: 0 2px; padding: 6px 0; border: none; border-radius: 5px; cursor: pointer; color: #fff; font-weight: bold; transition: background 0.2s; }
.pagination_btn.enabled        { background: #1f1f1f; }
.pagination_btn.enabled:hover  { background: #444; }
.pagination_btn.disabled       { background: #555; cursor: default; color: #aaa; }

@media (max-width: 768px) {
    .map_layout { flex-direction: column; }
    #map_wrapper, .map_userlist_container { flex: 1 1 100%; height: auto; max-height: none; }
    .map_controls { flex-direction: column; align-items: stretch; }
    .map_controls button#back_button { width: 100%; }
    .pagination_buttons { flex-direction: column; }
}

/* Dark Select */
.darkSelect { background-color: #222; color: #eee; border: 1px solid #555; border-radius: 6px; padding: 3px 6px; font-size: 14px; outline: none; cursor: pointer; }
.darkSelect option { background-color: #333; color: #eee; }
.darkSelect:focus  { border-color: #888; }

/* SWal */
.swal-btn-full { display: block !important; width: 80% !important; margin: 4px 0; font-weight: bold; text-align: center; }

/* Kalender (legacy) */
.cal_current_day { color: #000; font-weight: bold; width: 40px; height: 30px; background: #4caf50; text-align: center; border: 1px solid #000; }
.cal_normal_day  { font-family: Verdana; width: 40px; height: 30px; background: #101413; text-align: center; border: 1px solid #000; }
.cal_other_day   { color: #666; width: 40px; height: 30px; background: #101413; text-align: center; border: 1px solid #000; }

/* News (legacy) */
div.news_body { margin: 10px 0; padding: 10px; background: #101413; border: 1px solid #000; }

/* Search (legacy) */
.search-container { align-items: center; background-color: #2a2e2c; border: 1px solid #101413; padding: 5px 10px; border-radius: 5px; width: 100%; box-sizing: border-box; }
.search-icon      { margin-left: 20px; color: #b9bbbe; font-size: 20px; }
.search-input     { background-color: transparent; border: none; color: #fff; font-size: 16px; outline: none; width: 100%; padding: 5px 10px; border-radius: 20px; }
.search-input:focus { outline: none; border-radius: 5px; }
.search-input::placeholder { color: #b9bbbe; }


/* ============================================================
   26.  FORUM-ADMIN  (ehem. module/forum/admin/forum_admin.css)
   Scoped unter .fa-* Präfix — bleibt isoliert
   ============================================================ */
.fa-wrap { display: flex; flex-direction: column; gap: 14px; padding-bottom: 40px; font-family: 'Segoe UI', system-ui, sans-serif; }

.fa-error { display: flex; align-items: center; gap: 10px; padding: 16px 20px; background: rgba(248,81,73,0.12); border: 1px solid rgba(248,81,73,0.3); border-radius: 8px; color: #f85149; font-size: 14px; }

.fa-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.fa-header-left    { display: flex; align-items: center; gap: 14px; }
.fa-header-icon    { width: 46px; height: 46px; background: rgba(56,139,253,0.12); border: 1px solid rgba(56,139,253,0.3); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.fa-header-title   { font-size: 20px; font-weight: 700; color: #e6edf3; letter-spacing: -.02em; }
.fa-header-sub     { font-size: 12px; color: #7d8590; margin-top: 2px; }
.fa-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.fa-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: all .15s; white-space: nowrap; line-height: 1; }
.fa-btn--primary { background: #388bfd; color: #fff; border-color: #388bfd; }
.fa-btn--primary:hover { background: #58a6ff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(56,139,253,.3); }
.fa-btn--ghost   { background: #1c2128; color: #7d8590; border-color: rgba(255,255,255,0.08); }
.fa-btn--ghost:hover { border-color: rgba(255,255,255,0.14); color: #e6edf3; }
.fa-btn--sm { padding: 4px 10px; font-size: 12px; }

.fa-icon-btn { padding: 4px 10px; border-radius: 5px; font-size: 12px; border: 1px solid rgba(255,255,255,0.08); background: #21262d; color: #7d8590; cursor: pointer; transition: all .12s; white-space: nowrap; }
.fa-icon-btn:hover { background: rgba(255,255,255,.06); color: #e6edf3; border-color: rgba(255,255,255,0.14); }
.fa-icon-btn--danger:hover { background: rgba(248,81,73,0.12); color: #f85149; border-color: rgba(248,81,73,.3); }

.fa-link-btn { background: none; border: none; color: #388bfd; cursor: pointer; font-size: 12px; padding: 0; }
.fa-link-btn:hover { text-decoration: underline; }

.fa-legend { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; background: #161b22; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; }

.fa-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.fa-badge--read   { background: rgba(56,139,253,.12);  color: #58a6ff; border: 1px solid rgba(56,139,253,.25); }
.fa-badge--write  { background: rgba(63,185,80,.12);   color: #3fb950; border: 1px solid rgba(63,185,80,.25); }
.fa-badge--public { background: rgba(210,153,34,.12);  color: #d29922; border: 1px solid rgba(210,153,34,.25); }
.fa-badge--clan   { background: rgba(163,113,247,.12); color: #a371f7; border: 1px solid rgba(163,113,247,.25); }
.fa-badge--team   { background: rgba(248,81,73,.12);   color: #f85149; border: 1px solid rgba(248,81,73,.25); }
.fa-badge--user   { background: rgba(125,133,144,.12); color: #7d8590; border: 1px solid rgba(125,133,144,.25); }

.fa-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 20px; background: #161b22; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; color: #7d8590; font-size: 14px; }
.fa-empty-icon { font-size: 36px; }

.fa-board-list { display: flex; flex-direction: column; gap: 10px; }

.fa-category { background: #161b22; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; overflow: hidden; transition: border-color .15s; }
.fa-category:hover { border-color: rgba(255,255,255,0.14); }
.fa-category-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: #1c2128; border-bottom: 1px solid rgba(255,255,255,0.08); flex-wrap: wrap; }
.fa-category-left  { display: flex; align-items: center; gap: 10px; }
.fa-category-right { display: flex; align-items: center; gap: 6px; }
.fa-category-icon  { font-size: 18px; }
.fa-category-name  { font-size: 15px; font-weight: 700; color: #e6edf3; }
.fa-category-meta  { font-size: 11px; color: #484f58; margin-top: 2px; }
.fa-drag-handle    { color: #484f58; cursor: grab; font-size: 16px; padding: 0 2px; user-select: none; }
.fa-drag-handle:active { cursor: grabbing; }

.fa-rights-row  { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; background: rgba(255,255,255,.015); border-bottom: 1px solid rgba(255,255,255,0.08); flex-wrap: wrap; }
.fa-rights-label{ font-size: 11px; color: #484f58; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding-top: 3px; white-space: nowrap; }
.fa-rights-chips{ display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }

.fa-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; border: 1px solid transparent; }
.fa-chip--read    { background: rgba(56,139,253,.1);  color: #58a6ff; border-color: rgba(56,139,253,.2); }
.fa-chip--write   { background: rgba(63,185,80,.1);   color: #3fb950; border-color: rgba(63,185,80,.2); }
.fa-chip--public  { background: rgba(210,153,34,.1);  color: #d29922; border-color: rgba(210,153,34,.2); }
.fa-chip--clan    { background: rgba(163,113,247,.1); color: #a371f7; border-color: rgba(163,113,247,.2); }
.fa-chip--team    { background: rgba(248,81,73,.1);   color: #f85149; border-color: rgba(248,81,73,.2); }
.fa-chip--user    { background: rgba(125,133,144,.1); color: #8b949e; border-color: rgba(125,133,144,.2); }
.fa-chip--none    { background: rgba(255,255,255,.03); color: #484f58; border-color: rgba(255,255,255,0.08); font-style: italic; font-weight: 400; }
.fa-chip--add     { background: rgba(255,255,255,.04); color: #388bfd; border-color: rgba(56,139,253,.2); cursor: pointer; transition: all .12s; }
.fa-chip--add:hover { background: rgba(56,139,253,0.12); border-color: rgba(56,139,253,.4); }
.fa-chip-type { opacity: .7; font-size: 10px; }
.fa-chip-del  { background: none; border: none; cursor: pointer; color: inherit; opacity: .5; font-size: 14px; line-height: 1; padding: 0 0 0 2px; transition: opacity .12s; }
.fa-chip-del:hover { opacity: 1; }

.fa-tag           { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; margin-left: 4px; }
.fa-tag--threads  { background: rgba(63,185,80,0.12); color: #3fb950; }
.fa-inactive-tag  { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; margin-left: 4px; background: rgba(248,81,73,0.12); color: #f85149; }

.fa-sub-list { display: flex; flex-direction: column; }
.fa-sub-item { border-bottom: 1px solid rgba(255,255,255,.04); transition: background .1s; }
.fa-sub-item:last-child { border-bottom: none; }
.fa-sub-item:hover { background: rgba(255,255,255,.015); }
.fa-sub-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px 11px 28px; flex-wrap: wrap; }
.fa-sub-left  { display: flex; align-items: center; gap: 10px; }
.fa-sub-right { display: flex; align-items: center; gap: 6px; }
.fa-sub-icon  { font-size: 15px; }
.fa-sub-name  { font-size: 13px; font-weight: 600; color: #e6edf3; }
.fa-sub-meta  { font-size: 11px; color: #484f58; margin-top: 1px; }
.fa-no-subs   { padding: 10px 16px 12px 28px; font-size: 12px; color: #484f58; }

.fa-modal-form    { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.fa-modal-field   { display: flex; flex-direction: column; gap: 5px; }
.fa-modal-field label { font-size: 11px; font-weight: 700; color: #7d8590; text-transform: uppercase; letter-spacing: .05em; }
.fa-req           { color: #f85149; }
.fa-modal-row     { display: flex; gap: 10px; }
.fa-modal-row .fa-modal-field { flex: 1; }
.fa-modal-input, .fa-modal-select, .fa-modal-textarea { width: 100%; padding: 9px 12px; box-sizing: border-box; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; color: #e0e0e0; font-size: 13px; font-family: inherit; transition: border-color .15s; margin: 0; height: auto; }
.fa-modal-input:focus, .fa-modal-select:focus, .fa-modal-textarea:focus { outline: none; border-color: #388bfd; background: rgba(56,139,253,.06); }
.fa-modal-textarea { min-height: 64px; resize: vertical; }
.fa-modal-select option { background: #1c2128; }
.fa-modal-checks  { display: flex; gap: 16px; flex-wrap: wrap; }
.fa-modal-check   { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; color: #ccc; }
.fa-modal-check input { width: 15px; height: 15px; accent-color: #388bfd; cursor: pointer; }

.fa-type-toggle  { display: flex; gap: 8px; flex-wrap: wrap; }
.fa-type-opt     { cursor: pointer; }
.fa-type-opt input { display: none; }
.fa-type-box     { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; border: 1px solid rgba(255,255,255,.1); transition: all .15s; cursor: pointer; background: rgba(255,255,255,.03); color: #7d8590; }
.fa-type-opt input:checked + .fa-type-box--read  { background: rgba(56,139,253,.15); border-color: #388bfd; color: #58a6ff; }
.fa-type-opt input:checked + .fa-type-box--write { background: rgba(63,185,80,.15); border-color: #3fb950; color: #3fb950; }
.fa-type-box:hover { border-color: rgba(255,255,255,.2); color: #ccc; }

.fa-target-toggle { display: flex; gap: 6px; flex-wrap: wrap; }
.fa-target-btn { padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: #7d8590; cursor: pointer; transition: all .15s; }
.fa-target-btn:hover { border-color: rgba(255,255,255,.2); color: #ccc; }
.fa-target-btn.active { background: rgba(56,139,253,0.12); border-color: #388bfd; color: #58a6ff; }
.fa-target-section { padding-top: 4px; }

@media (max-width: 640px) {
    .fa-category-header { gap: 8px; }
    .fa-sub-header      { padding-left: 16px; }
    .fa-modal-row       { flex-direction: column; }
    .fa-rights-row      { padding: 8px 12px; }
}