/**
 * base.css
 * Styling für die GearBase-Anwendung.
 * @version 0.9.2
 * @date 2025-04-25
 * @author GearBase
 * @description Definiert das grundlegende Styling der GearBase-Anwendung.
 * @notes Tabs kleiner und kompakter gemacht, Main-Bereich scrollbar mit unsichtbarer Scrollbar (0.9.0).
 */

/* ── Cinzel (selbst gehostet, OFL) — ersetzt externe Google-Fonts-Einbindung (DSGVO) ── */
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/cinzel-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/cinzel-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Flash-Meldungsleiste (zwischen Nav und Inhalt) ────────────────────────── */
.flash-bar {
    margin-left: 56px; /* Action-Nav-Breite */
    padding: 6px 16px;
}

.flash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.88em;
    margin-bottom: 4px;
    backdrop-filter: blur(4px);
}

.flash--error {
    background: rgba(180, 50, 50, 0.75);
    border: 1px solid rgba(220, 80, 80, 0.4);
    color: #fdd;
}

.flash--success {
    background: rgba(40, 130, 60, 0.75);
    border: 1px solid rgba(60, 180, 80, 0.4);
    color: #dfd;
}

.flash--info {
    background: rgba(50, 90, 160, 0.75);
    border: 1px solid rgba(80, 130, 220, 0.4);
    color: #ddf;
}

.flash__close {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.6;
    font-size: 13px;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}

.flash__close:hover {
    opacity: 1;
}

/* ── Design-Variablen ──────────────────────────────────────────────────────── */
:root {
    --spacing-sm: 6px;
    --spacing-md: 12px;
    --spacing-lg: 20px;
    --radius: 5px;
    --shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    --button-bg: #555;
    --button-hover: #777;
    --text-color: white;
    --input-bg: #fff;
    --input-text: #000;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Globale Scrollbar-Styling für Webkit-Browser (Chrome, Edge, Safari) */
*::-webkit-scrollbar {
    width: 6px; /* Breite der vertikalen Scrollbar */
    height: 6px; /* Höhe der horizontalen Scrollbar */
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2); /* Farbe des Scrollbalken-Griffs */
    border-radius: 4px; /* Abgerundete Ecken des Griffs */
    transition: background-color 0.2s; /* Sanfte Farbänderung beim Hover */
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4); /* Dunklere Farbe beim Hover */
}

*::-webkit-scrollbar-track {
    background: transparent; /* Hintergrund der Scrollbar-Spur */
}

/* Globale Scrollbar-Styling für Firefox */
html {
  scrollbar-width: thin; /* Dünne Scrollbar */
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* Farbe des Griffs und der Spur */
    scrollbar-gutter: stable;
}

body {
    margin: 0 auto;
    font-family: Arial, sans-serif;
    color: var(--text-color);
    overflow-x: hidden; /* Verhindert horizontalen Scroll */
    max-width: 1600px;
}
body::before {
    content: '';
    position: fixed;    /* fixiert unabhängig von Seitenhöhe */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/bg/bg2.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: -1;        /* hinter allem anderen */
}
.cookie-banner {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #333;
        color: white;
        padding: 15px;
        text-align: center;
        z-index: 1000;
    }
    .cookie-banner button {
        margin-left: 10px;
        padding: 10px 15px;
        border: none;
        color: black;
        cursor: pointer;
    }
    .cookie-banner button:hover {
        opacity: 0.8;
    }

.warning {
    font-size: 14px;
    margin-top: 5px;
    font-weight: bold;
}

.warning.error {
    color: #d32f2f; /* Rot für Fehler */
}

.warning.success {
    color: #388e3c; /* Grün für Erfolg */
}


/* Suche Global */
.search-results {
    margin: 30px 0;
    padding: 5px 20px;
    background: rgba(0, 0, 0, 0.3);
    border: 4px solid var(--category-color, #595B5B);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

}
.search-results h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.search-results ul {
    list-style: none;
    padding: 0;
}
.search-results li {
    margin-bottom: 20px;
}
.search-results li a {
    font-size: 1.3em;
    color: #ccc;
    text-decoration: none;
    font-weight: bold;
}
.search-results li a:hover {
    text-decoration: underline;
    color: #fff;
}
.search-results li p {
    margin: 5px 0;
    color: #ccc;
    font-size: 0.9em;
}

.container {
    position: relative;
    min-height: 100vh; /* Mindesthöhe statt feste Höhe */
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.3);
    margin-left: 56px;
}

/* Breadcrumb Navigation */
.breadcrumb {
    display: inline-flex;
    align-items: center;
    margin: 5px 5px 5px 10px;
    padding: 0;
    border: 1px solid rgba(200, 168, 122, 0.30); /* dezenter Gold-Akzent wie die Buttons */
    border-radius: 4px;
    overflow: hidden;
}

.breadcrumb span {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0 10px 0 20px;
    position: relative;
    color: var(--category-text-color, white); /*#ccc; 
    text-shadow: 1px 1px rgba(0,0,0,0.5);*/
}

.breadcrumb span:first-child {
    padding-left: 16px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.breadcrumb span:after,
.breadcrumb span:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    position: absolute;
    margin: auto;
    top: 0px;
    bottom: 0;
    left: 98%;
    z-index: 2;
}

.breadcrumb span:before {
    margin-left: 1px;
    z-index: 1;
    border-left-color: var(--arrow-color, #2E3031);
}

.breadcrumb span:after {
    border-left-color: var(--arrow-color, #595B5B);
}

.breadcrumb span:hover {
    background: var(--arrow-color, #2E3031);
}

.breadcrumb span:hover:after {
    border-left-color: var(--arrow-color, #2E3031);
}

.breadcrumb span:hover:before {
    border-left-color: var(--arrow-color, #2E3031);
}

.breadcrumb span.active {
    font-weight: bold;
    pointer-events: none;
    cursor: default;
}

.breadcrumb span.active:after,
.breadcrumb span.active:before {
    border: none;
}

.breadcrumb .separator {
    display: none;
}

.breadcrumb span:last-child {
    padding-right: 16px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.main {
    display: flex; /* Sidebar und Content nebeneinander */
    flex-wrap: wrap; /* Responsive */
    /*padding:  5px var(--spacing-lg); /* Einheitliches Padding */
    margin-top: 0px; /* Platz für fixierten Banner */
    background-color: rgba(0, 0, 0, 0.1);
    height: auto;/*calc(100vh - 150px);*/
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding-top: 20px;
}

/* Webkit-Browser (Chrome, Safari) */
.main::-webkit-scrollbar {
    display: none;
}


.menu-toggle {
    display: none; /* Standardmäßig ausgeblendet */
    font-size: 24px;
    cursor: pointer;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--text-color);
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
}

.menu {
    display: block;
}

.login-message {
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    background: rgba(0, 0, 0, 0.1);
    border-color: #fff;
    color: var(--text-color);
    border-radius: var(--radius);
    text-align: center;
    color: #f1f1f1;
    font-size: 20px;
    font-weight: 500;
}

.success-message {
    color: green;
    padding: 10px;
    border: 1px solid green;
    margin: 10px 0;
}
.error-message {
    background-color: #f2dede;
    color: #a94442;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
}


.content {
    flex: 1; /* Nimmt restlichen Platz ein */
    margin: 0 15px 15px 15px; /* Reduzierter Margin */
    padding-left: 30px; /* Reduziertes Padding, kein großer Top-Abstand */
    /* Kein eigenes Panel mehr: die Tabelle (.table-wrapper/table) bringt ihren
       eigenen Hintergrund mit. So liegt kein transparentes Band über der Tabelle,
       und die Breadcrumb wirkt bei Überlänge nicht mehr wie ein Fehler. */
    min-width: 0; /* Verhindert Überlauf */
}

.sidebar-wrapper {
    width: 280px; /* Feste Breite der Sidebar */
    position: relative;
    left: 0; /* Immer sichtbar in Desktop */
    display: block;
}

.sidebar {
    position: static;
    top: 280px; /* Unter dem Banner starten */
    left: 0;
    width: 260px; /* Feste Breite aus sidebar.css */
    max-height: auto;
    height: calc(100vh - 160px); /* Bis zum unteren Rand */
    overflow-y: auto;
    background: rgba(51, 51, 51, 0.7);
    border: 4px solid var(--category-color, #595B5B);
}

.table-toolbar {
    text-align: right;
    width: 97%; /* gleiche Breite wie .table-wrapper → Controls schließen rechts bündig mit der Tabelle ab */
    margin: 5px 0;
}

.table-controls {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 3px 6px 3px 10px;
    font-size: 0.8em;
    color: white;
}

.table-controls label {
    margin: 0;
    cursor: default;
    line-height: 1;
    white-space: nowrap;
}

.table-controls select {
    padding: 2px 4px;
    font-size: 0.95em;
    border-radius: 6px;
    background: var(--category-color, #595B5B);
    color: var(--category-text-color, white);
    width: 52px;
    height: 22px;
    border: none;
    cursor: pointer;
}

.table-controls__sep {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.items-per-page {
    display: none; /* ersetzt durch .table-controls */
}

.itt-spacer {
    margin-top: 6px;
}
.items-per-page label {
    margin: 0 5px;
}
.items-per-page select {
    padding: 3px 3px 3px 8px; /* Kleineres Padding */
    font-size: 0.9em; /* Kleinere Schrift */
    border-radius: 10px;/*var(--radius);*/
    background: var(--category-color, #595B5B);
    color: var(--category-text-color, white);
    width: 50px; /* Feste Breite für kompakteres Dropdown */
    height: 20px;
    border: none;
}
.itt-spacer {
  margin-top: 6px;
}

.banner a {
   z-index: 5; /* Link nicht über IPP */
}

.pagination {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    text-align: center;
}

.pagination a, .pagination span {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: 0 5px;
    background: #555;
    color: var(--text-color);
    border-radius: var(--radius);
    border: 1px solid var(--category-color, #595B5B);
    text-decoration: none;
    font-weight: bold;
    -webkit-box-shadow:  2px 4px 8px 0 #000000;
    box-shadow:  2px 4px 8px 0 rgba(0, 0, 0, 0.15); /* Subtiler Schatten */
}

.pagination a:hover {
    background: var(--category-color, #595B5B);
    color: var(--category-text-color, white);
}

.pagination .current {
    background-color: rgba(119, 119, 119, 0.7);
    color: #999;
    border-color: black;
}

.pagination .page-jump-label {
    margin-left: 10px;
    font-size: 0.9em;
    color: var(--text-color);
}

.pagination .page-jump {
    padding: var(--spacing-sm);
    margin-left: 5px;
    border-radius: var(--radius);
    background: #555;
    color: var(--text-color);
    border: none;
    font-size: 0.9em;
}

@media (max-width: 280px) {
    .menu {
        width: 100%;
        left: -100%; /* Sicherstellen, dass die Sidebar vollständig außerhalb ist */
    }
    .menu.open {
        left: 0;
    }
}

.simple-search {
    display: inline-block; /* Oder block, je nach Layout */
}

#searchInput {
    background-color: #fff; /* Standard-Weiß */
    border: 1px solid #ccc; /* Neutraler Rahmen */
    color: #000; /* Schwarzer Text */
    padding: 5px 10px;
    border-radius: 3px;
    outline: none;
    width: 200px; /* Feste Breite, anpassbar */
    font-size: 0.9rem;
    margin: 5px var(--spacing-md);
}

#searchInput::placeholder {
    color: #999; /* Neutrales Grau für Platzhalter */
    opacity: 0.7;
}

#searchInput:focus {
    border-color: #6CB4F3; /* Leichter Fokus-Effekt */
    box-shadow: 0 0 3px rgba(108, 180, 243, 0.5);
}

hr {
  border: 1px solid black;
  margin: 0;
  padding: 0;
}

.divider-one {
  border: 1px solid #ccc;
  margin: 0;
  padding: 0;
}

.divider-two {
  border: 1px solid black;
  margin: 0;
  padding: 0;
}
.divider-three {
  border: 1px solid;
  border-color: rgba(85,85,85, 0.3);
  margin: 0;
  padding: 0;
}

/* Tiles Tabs */
.cat-nav {
    width: 100%;
    background-color: rgba(28, 28, 26, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cat-nav::-webkit-scrollbar { display: none; }

.cat-nav-inner {
    display: flex;
    justify-content: center;
    min-width: max-content;
}

.cat-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 22px 8px;
    color: rgba(255, 255, 255, 0.38);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.cat-tab:hover {
    color: rgba(255, 255, 255, 0.85);
    border-bottom-color: var(--tc);
    background-color: color-mix(in oklab, var(--tc) 10%, rgba(255, 255, 255, 0.04));
}

.cat-tab--active {
    color: #fff;
    border-bottom-color: var(--tc);
    background-color: color-mix(in oklab, var(--tc) 15%, rgba(255, 255, 255, 0.05));
}

.cat-tab svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.7;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.cat-tab:hover svg,
.cat-tab--active svg {
    opacity: 1;
}