/* -----------------------------------------------------------
   KULTNET – Modern Grey (Bereinigte, stabile Version)
   Vollständig aufgeräumtes CSS + harmonisierte Abstände
   (Nur gezielte Abstände, keine globalen Margin-Effekte)
----------------------------------------------------------- */

:root {
    --color-bg-dark: #0a0a0a;
    --color-bg-light: #f4f4f4;

    --color-text-dark: #e6e6e6;
    --color-text-light: #2a2a2a;

    --color-accent: #b3a600;

    --color-border-dark: #5c5c5c;
    --color-border-light: #c8c8c8;

    --color-btn-bg-dark: #1a1a1a;
    --color-btn-bg-light: #ffffff;

    --color-btn-hover-dark: #2a2a2a;
    --color-btn-hover-light: #e6e6e6;

    --color-btn-active-dark: #3a3a3a;
    --color-btn-active-light: #d8d8d8;

    --color-focus-dark: #888888;
    --color-focus-light: #666666;

    --radius-base: 6px;
    --transition-fast: 0.18s;
}

/* -----------------------------------
   Grundlayout + Schrift
----------------------------------- */
html, body { height: 100%; }
body {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    margin: 20px;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Farbschemata */
@media (prefers-color-scheme: dark) {
    body { background: var(--color-bg-dark); color: var(--color-text-dark); }
}
@media (prefers-color-scheme: light) {
    body { background: var(--color-bg-light); color: var(--color-text-light); }
}

/* -----------------------------------------------------------
   BUTTONS / TABS / PAGINATION / FORM BUTTONS
   (Basis-Styles, keine globalen Margins)
----------------------------------------------------------- */
.btn,
.tab-btn,
.search-btn,
.pagination a {
    padding: 14px 28px;
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border-light);
    background: var(--color-btn-bg-light);
    color: var(--color-text-light);
    font-size: 1.05rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

/* Dark Mode Buttons */
@media (prefers-color-scheme: dark) {
    .btn,
    .tab-btn,
    .search-btn,
    .pagination a {
        border: 1px solid var(--color-border-dark);
        background: var(--color-btn-bg-dark);
        color: var(--color-text-dark);
    }

    .btn:hover,
    .tab-btn:hover,
    .search-btn:hover,
    .pagination a:hover {
        background: var(--color-btn-hover-dark);
    }

    .tab-btn.active,
    .pagination a.active {
        background: var(--color-btn-active-dark);
    }
}

/* Light Mode Buttons */
@media (prefers-color-scheme: light) {
    .btn,
    .tab-btn,
    .search-btn,
    .pagination a {
        border: 1px solid var(--color-border-light);
        background: var(--color-btn-bg-light);
        color: var(--color-text-light);
    }

    .btn:hover,
    .tab-btn:hover,
    .search-btn:hover,
    .pagination a:hover {
        background: var(--color-btn-hover-light);
    }

    .tab-btn.active,
    .pagination a.active {
        background: var(--color-btn-active-light);
        color: var(--color-text-light);
    }
}

/* -----------------------------------
   Tabs Container
----------------------------------- */

.tab-buttons { margin-bottom: 30px; }

.tab-buttons a {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-base);
    padding: 12px 24px;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    background: var(--color-btn-bg-light);
    color: var(--color-text-light);
    transition: background var(--transition-fast), color var(--transition-fast);
    margin-right: 15px;
}

@media (prefers-color-scheme: dark) {
    .tab-buttons a { border: 1px solid var(--color-border-dark); background: var(--color-btn-bg-dark); color: var(--color-text-dark); }
    .tab-buttons a:hover { background: var(--color-btn-hover-dark); }
    .tab-buttons a.active { background: var(--color-btn-active-dark); color: var(--color-text-dark); }
}

@media (prefers-color-scheme: light) {
    .tab-buttons a { border: 1px solid var(--color-border-light); background: var(--color-btn-bg-light); color: var(--color-text-light); }
    .tab-buttons a:hover { background: var(--color-btn-hover-light); }
    .tab-buttons a.active { background: var(--color-btn-active-light); color: var(--color-text-light); }
}

/* -----------------------------------
   Suchfeld / Input-Felder
----------------------------------- */
.search-input,
input,
textarea,
select {
    padding: 14px 18px;
    font-size: 1.05rem;
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border-light);
    background: var(--color-btn-bg-light);
    color: var(--color-text-light);
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

@media (prefers-color-scheme: dark) {
    .search-input,
    input,
    textarea,
    select {
        border: 1px solid var(--color-border-dark);
        background: var(--color-btn-bg-dark);
        color: var(--color-text-dark);
    }

    .search-input:focus,
    input:focus,
    textarea:focus,
    select:focus {
        border-color: var(--color-focus-dark);
        box-shadow: 0 0 6px rgba(136,136,136,0.25);
        outline: none;
    }
}

@media (prefers-color-scheme: light) {
    .search-input,
    input,
    textarea,
    select {
        border: 1px solid var(--color-border-light);
        background: var(--color-btn-bg-light);
        color: var(--color-text-light);
    }

    .search-input:focus,
    input:focus,
    textarea:focus,
    select:focus {
        border-color: var(--color-focus-light);
        box-shadow: 0 0 6px rgba(102,102,102,0.18);
        outline: none;
    }
}

/* -----------------------------------
   NEU: Zielgerichteter Abstand für Suchfeld und Ergebnisliste
   (nur diese Selektoren erhalten zusätzlichen vertikalen Abstand)
----------------------------------- */
.search-wrapper { margin-bottom: 20px; }
.ergebnis-liste { list-style: none; padding: 0; margin: 0; }
.ergebnis-liste--spaced { margin-top: 18px; }

/* -----------------------------------
   Ergebnisliste / Boxen
----------------------------------- */
.ergebnis {
    border: 1px solid var(--color-border-light);
    background: var(--color-btn-bg-light);
    border-radius: var(--radius-base);
    padding: 15px;
    margin-bottom: 20px;
}

@media (prefers-color-scheme: dark) {
    .ergebnis { border: 1px solid var(--color-border-dark); background: var(--color-btn-bg-dark); }
}

/* Dezenter Textmarker – dünner Unterstrich statt volles Gelb */
.textmarkergelb {
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    border-bottom: 0.6px solid currentColor;
}

@media (prefers-color-scheme: dark) {
    .textmarkergelb { color: var(--color-text-dark); }
}

/* -----------------------------------
   Bilder & Video
----------------------------------- */
.ergebnis-bild,
.video-thumbnail { max-width: 333px; width: 100%; height: auto; object-fit: cover; display: block; margin: 0; border-radius: var(--radius-base); }

/* Bilder in TB_B haben auffälligen Rand */
.TB_B .ergebnis-bild,
.TB_B .video-thumbnail {
    border-radius: var(--radius-base);
    border: 6px solid var(--color-border-light);
}
@media (prefers-color-scheme: dark) {
    .TB_B .ergebnis-bild,
    .TB_B .video-thumbnail { border: 6px solid var(--color-border-dark); }
}

/* Mitglied-Avatar */
.mitglied-avatar { border-radius: 50%; overflow: hidden; width: clamp(140px, 30vw, 280px); height: clamp(140px, 30vw, 280px); }
.mitglied-avatar img, .bild-groesse { width: 100%; height: auto; object-fit: cover; }

/* -----------------------------------
   Pagination Container
----------------------------------- */
.pagination { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 20px; }

/* Video-Thumbnail + Play Button */
.ergebnis-video { position: relative; width: 100%; max-width: 333px; margin: 0; border-radius: var(--radius-base); }
.ergebnis-video .video-thumbnail { width: 100%; height: auto; object-fit: cover; display: block; border-radius: var(--radius-base); }

.ergebnis-video .play-button {
    width: 50px; height: 50px; background: rgba(255,255,255,0.6); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 2; box-shadow: 0 0 6px rgba(0,0,0,0.18);
}
.ergebnis-video .play-button:before { content: ''; display: block; width: 0; height: 0; border-left: 12px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }

.play-button { font-size: 1.6rem; color: white; opacity: 0.95; background-color: transparent; padding: 10px; border-radius: 50%; transition: transform 0.18s ease; }
.video-link:hover .play-button { transform: translate(-50%,-50%) scale(1.05); color: var(--color-accent); }

/* -----------------------------------
  Suchfeld mit Lupe / Symbole
----------------------------------- */
.search-wrapper { position: relative; width: 100%; }
.search-input { width: 100%; padding: 10px 40px 10px 20px; box-sizing: border-box; font-size: 16px; border-radius: 4px; }

.search-icon {
    position: absolute; top: 50%; right: 50px; transform: translateY(-50%); font-size: 18px; color: #333; background: transparent; border: none; cursor: pointer; transition: color 0.2s;
}
.clear-icon {
    position: absolute; top: 50%; right: 30px; transform: translateY(-50%); font-size: 20px; color: #333; cursor: pointer; display: none; transition: color 0.2s;
}
.dropdown-icon { position: absolute; top: 50%; left: 6px; transform: translateY(-50%); font-size: 18px; color: #333; pointer-events: none; }

/* Dark Mode - Symbole */
@media (prefers-color-scheme: dark) {
    .search-icon, .clear-icon, .dropdown-icon { color: var(--color-text-dark); }
}

/* Hover-Farben an Symbolen (leicht akzentuiert) */
.search-icon:hover { color: var(--color-accent); }
.dropdown-icon:hover { color: var(--color-accent); }
.clear-icon:hover { color: #f44336; }

/* -----------------------------------
   Responsive Anpassungen
----------------------------------- */
@media (max-width: 767px) {
    body { font-size: 95%; line-height: 1.35; }

    .tab-buttons { display: flex; flex-direction: column; gap: 16px; }
    .tab-buttons a { margin-right: 0; }

    .btn, .tab-btn, .search-btn, .pagination a { padding: 8px 12px; font-size: 0.95rem; margin: 4px 6px; }
    .search-wrapper { min-width: 100%; }
}

/* -----------------------------------
   KultNet Menü – ausgelagertes CSS (o.css)
----------------------------------- */
/* ------ Grundpositionierung ------ */
#km-menu {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

/* Toggle-Button (Hamburger) */
#km-toggle {
    font-size: 28px;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    background: var(--color-btn-bg-light);
    color: var(--color-text-light);
    border: 1px solid var(--color-border-light);
    transition: background var(--transition-fast);
}

#km-toggle:hover {
    background: var(--color-btn-hover-light);
}

@media (prefers-color-scheme: dark) {
    #km-toggle {
        background: var(--color-btn-bg-dark);
        color: var(--color-text-dark);
        border: 1px solid var(--color-border-dark);
    }
    #km-toggle:hover {
        background: var(--color-btn-hover-dark);
    }
}

/* ------ NAV – Dropdown per Hover ------ */
#km-nav {
    display: none;              /* Hover aktiviert es */
    position: absolute;
    top: 50px;
    right: 0;                   /* bündig unter dem Button */
    width: 230px;

    background: var(--color-btn-bg-light);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);

    padding: 8px 0;
    overflow: hidden;
}

/* Aufklappen per Hover */
#km-menu:hover #km-nav { display: block; }

/* ------ LISTENSTYLING ------ */
#km-nav ul { list-style: none; margin: 0; padding: 0; }

#km-nav li a {
    display: block;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--color-text-light);
    border-radius: 8px;
    font-size: 16px;
    transition: background var(--transition-fast);
}

#km-nav li a:hover { background: var(--color-btn-hover-light); }

/* Dark-Mode */
@media (prefers-color-scheme: dark) {
    #km-nav { background: var(--color-btn-bg-dark); border-color: var(--color-border-dark); }
    #km-nav li a { color: var(--color-text-dark); }
    #km-nav li a:hover { background: var(--color-btn-hover-dark); }
}

/* -----------------------------------
   Footer
----------------------------------- */
footer { padding: 30px 0; text-align: center; font-family: Arial, Helvetica, sans-serif; }

.footer-links { text-align: center; margin: 40px 0; font-size: 0.95em; letter-spacing: 0.4px; }
.footer-links a { text-decoration: none; padding: 6px 10px; font-weight: 500; transition: background var(--transition-fast), color var(--transition-fast); }
.footer-links .sep { padding: 0 6px; user-select: none; }

@media (prefers-color-scheme: light) {
    footer { color: var(--color-text-light); background: #fafafa; }
    .footer-links a { color: var(--color-text-light); }
    .footer-links a:hover { color: #000; background: rgba(0,0,0,0.06); border-radius: 4px; }
    .footer-links .sep { color: #999; }
}
@media (prefers-color-scheme: dark) {
    footer { color: var(--color-text-dark); background: #111; }
    .footer-links a { color: var(--color-text-dark); }
    .footer-links a:hover { color: #fff; background: rgba(255,255,255,0.14); border-radius: 4px; }
    .footer-links .sep { color: #777; }
}

@media (max-width: 600px) {
    .footer-links { font-size: 0.9em; line-height: 2em; }
    .footer-links a { padding: 4px 8px; }
}

/* Ende der Datei – Bereinigte Farbfassung */