/* ==========================================================================
   HUT UND KRAGA - INTRANET THEME STYLES
   ========================================================================== */

/* Animationen */
@keyframes fadeInIntra {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.tab-pane {
    animation: fadeInIntra 0.25s ease;
}

/* Tabs / Reiter */
.intra-tab-pill {
    background: rgba(0, 0, 0, 0.45) !important;
    color: var(--text-muted, #94a3b8) !important;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.16)) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.intra-tab-pill:hover {
    background: rgba(0, 0, 0, 0.65) !important;
    color: var(--text-heading, #fff) !important;
    border-color: var(--accent, #d4a373) !important;
    box-shadow: 0 0 16px var(--accent-glow, rgba(212, 163, 115, 0.5)), inset 0 0 8px var(--accent-glow, rgba(212, 163, 115, 0.2)) !important;
    transform: translateY(-2px) !important;
}

.intra-tab-pill.active {
    background: rgba(0, 0, 0, 0.7) !important;
    color: var(--text-heading, #fff) !important;
    border: 1px solid var(--accent, #d4a373) !important;
    box-shadow: 0 0 16px var(--accent-glow, rgba(212, 163, 115, 0.5)), inset 0 0 10px var(--accent-glow, rgba(212, 163, 115, 0.2)) !important;
}

/* Große Board-Karten (Startseite & Module) */
.intra-start-banner,
.intra-pane .intra-card,
.intra-pane .card,
.intra-card,
.foundry-glass-card,
.ts-glass-card {
    background: rgba(0, 0, 0, 0.32) !important;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.14)) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}

.intra-start-banner:hover,
.intra-pane .intra-card:hover,
.foundry-glass-card:hover,
.ts-glass-card:hover {
    border-color: var(--accent, #d4a373) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 22px var(--accent-glow, rgba(212, 163, 115, 0.4)) !important;
    transform: translateY(-2px) !important;
}

/* Startseiten Rubriken-Kacheln */
.intra-rubrik-card {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
    border-radius: 14px;
    padding: 22px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.intra-rubrik-card:hover {
    border-color: var(--accent, #d4a373) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), 0 0 24px var(--accent-glow, rgba(212, 163, 115, 0.4)) !important;
    transform: translateY(-3px);
}

.intra-rubrik-header {
    text-align: center;
    margin-bottom: 12px;
}

.intra-rubrik-icon {
    font-size: 1.6rem;
    display: inline-block;
    margin-bottom: 6px;
    filter: drop-shadow(0 0 8px var(--accent-glow, rgba(255, 255, 255, 0.3)));
}

.intra-rubrik-header h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-heading, #fff);
    text-shadow: 0 0 12px var(--accent-glow, rgba(255, 255, 255, 0.2));
}

.intra-rubrik-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent 0%, var(--accent, #d4a373) 50%, transparent 100%);
    margin: 0 0 16px 0;
    opacity: 0.6;
}

.intra-rubrik-subdivider {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent 5%, var(--border-subtle, rgba(255, 255, 255, 0.12)) 50%, transparent 95%);
    margin: 12px 0;
}

.intra-rubrik-item {
    font-size: 0.88rem;
    line-height: 1.5;
}

.intra-item-title {
    font-weight: 600;
    color: var(--text-heading, #fff);
    margin-bottom: 3px;
}

.intra-item-desc {
    color: var(--text-muted, #94a3b8);
    font-size: 0.84rem;
}

/* ==========================================================================
   NOTIZEN & DISKUSSIONEN / EDITOR THEME STYLING
   ========================================================================== */

/* Notiz-Eingabebox / Container */
.intra-notes-card,
.intra-notes-container {
    background: rgba(0, 0, 0, 0.32) !important;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.14)) !important;
    border-radius: 14px !important;
    padding: 24px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.intra-notes-card:hover,
.intra-notes-container:hover {
    border-color: var(--accent, #d4a373) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 22px var(--accent-glow, rgba(212, 163, 115, 0.35)) !important;
}

/* Editor Toolbar Buttons (B, I, Link, Zitat etc.) */
.intra-editor-toolbar button,
.intra-editor-toolbar .btn,
.intra-notes-toolbar button {
    background: rgba(0, 0, 0, 0.45) !important;
    color: var(--text-muted, #94a3b8) !important;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.16)) !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.intra-editor-toolbar button:hover,
.intra-editor-toolbar .btn:hover,
.intra-notes-toolbar button:hover {
    background: rgba(0, 0, 0, 0.65) !important;
    color: var(--text-heading, #fff) !important;
    border-color: var(--accent, #d4a373) !important;
    box-shadow: 0 0 10px var(--accent-glow, rgba(212, 163, 115, 0.4)) !important;
}

/* Notiz Textfeld */
.intra-notes-textarea,
.intra-notes-card textarea {
    background: rgba(0, 0, 0, 0.38) !important;
    color: var(--text-normal, #e2e8f0) !important;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.14)) !important;
    border-radius: 8px !important;
    padding: 14px !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    outline: none !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.intra-notes-textarea:focus,
.intra-notes-card textarea:focus {
    border-color: var(--accent, #d4a373) !important;
    box-shadow: 0 0 16px var(--accent-glow, rgba(212, 163, 115, 0.35)) !important;
}

/* Einzelne gespeicherte Notizen-Einträge */
.intra-note-item,
.intra-entry-card {
    background: rgba(0, 0, 0, 0.28) !important;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12)) !important;
    border-radius: 10px !important;
    padding: 18px !important;
    margin-bottom: 14px !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.25s ease !important;
}

.intra-note-item:hover,
.intra-entry-card:hover {
    border-color: var(--accent, #d4a373) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px var(--accent-glow, rgba(212, 163, 115, 0.3)) !important;
    transform: translateY(-2px);
}

/* Verfeinerte Toolbar & Editor Controls */
.intra-notes-toolbar button {
    background: rgba(0, 0, 0, 0.45) !important;
    color: var(--text-muted, #94a3b8) !important;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.16)) !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.intra-notes-toolbar button:hover {
    background: rgba(0, 0, 0, 0.65) !important;
    color: var(--text-heading, #fff) !important;
    border-color: var(--accent, #d4a373) !important;
    box-shadow: 0 0 10px var(--accent-glow, rgba(212, 163, 115, 0.4)) !important;
    transform: translateY(-1px);
}

.intra-notes-textarea {
    background: rgba(0, 0, 0, 0.38) !important;
    color: var(--text-normal, #e2e8f0) !important;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.14)) !important;
    border-radius: 8px !important;
    padding: 14px !important;
    font-size: 0.95rem !important;
    outline: none !important;
    transition: all 0.25s ease !important;
}

.intra-notes-textarea:focus {
    border-color: var(--accent, #d4a373) !important;
    box-shadow: 0 0 16px var(--accent-glow, rgba(212, 163, 115, 0.35)), inset 0 0 8px rgba(0, 0, 0, 0.4) !important;
}

/* Mehr Abstand zwischen der Tab-Navigationsleiste und dem Inhalt */
.intra-tab-nav,
.intra-tabs-container,
.intra-tabs-wrapper {
    margin-bottom: 34px !important;
}

.intra-pane,
.tab-pane {
    padding-top: 6px;
}

/* Rechtsbündiger Abmelden-Button mit Theme-Glow */
.intra-logout-btn {
    background: rgba(0, 0, 0, 0.45) !important;
    color: var(--text-muted, #94a3b8) !important;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.16)) !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.25s ease !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.intra-logout-btn:hover {
    background: rgba(0, 0, 0, 0.7) !important;
    color: var(--text-heading, #fff) !important;
    border-color: var(--accent, #d4a373) !important;
    box-shadow: 0 0 12px var(--accent-glow, rgba(212, 163, 115, 0.45)) !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   HELLE TEXTE FÜR GRUPPENNOTIZEN & EINTRÄGE
   ========================================================================== */

/* Macht den Inhalt und Text von gespeicherten Notizen-Einträgen strahlend hell */
.intra-note-item p,
.intra-entry-card p,
.intra-note-item div,
.intra-entry-card div,
.note-body p,
.note-body span,
.note-content p,
.note-content span {
    color: var(--text-heading, #ffffff) !important;
}

/* Spezifische Anpassung für Textabschnitte in Notizen, damit sie den Namen-Farbton treffen */
.intra-note-item,
.intra-entry-card {
    color: var(--text-heading, #ffffff) !important;
}