/*
Theme Name: Athmer Pinnwand Responsive
Theme URI: https://pinnwand.athmer.local/
Author: Christina Stehling & DC (Data & Analytics)
Description: Ein modernes, voll responsives Intranet-Theme (Pinnwand) für die athmer oHG basierend auf Bootstrap 5 und der offiziellen Athmer-Farbpalette.
Version: 2.0.1
License: GNU General Public License v2 or later
Text Domain: athmer-pinnwand
*/

/* Definition der offiziellen athmer Farbtöne */
:root {
    --ath-rot: #e30513;
    --ath-dunkelrot: #ae0f09;
    --ath-tiefrot: #630b00;
    
    /* Neutrale Hintergrundfarben */
    --ath-bg-light: #f9f7f4;
    --ath-bg-card: #f5f1ee;
    --ath-border-gray: #dddddc;
    --ath-text-dark: #5f6267;
    
    /* Funktionstöne (Störer, Hinweise, "neu"-Sticker) */
    --ath-funktions-blau: #0a4e65;
    --ath-funktions-tuerkis-dark: #0a8291;
    --ath-funktions-tuerkis-light: #66c1bf;
}

body {
    background-color: var(--ath-bg-light);
    color: var(--ath-text-dark);
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Responsives Sidebar-Layout */
.app-container {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

@media (min-width: 768px) {
    .app-container {
        flex-direction: row;
    }
}

/* Rote Navigation (Sidebar) */
.tm-header {
    background-color: var(--ath-rot);
    color: #ffffff;
    padding: 20px;
}

@media (min-width: 768px) {
    .tm-header {
        width: 280px;
        min-width: 280px;
        position: sticky;
        top: 0;
        height: 100vh;
    }
}

/* Kacheln & Rahmen im Design der Pinnwand */
.term-rahmen, .dokumente {
    background-color: var(--ath-bg-card);
    border: 1px solid var(--ath-border-gray);
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 25px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.term-rahmen:hover, .dokumente:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(95, 98, 103, 0.15);
}

/* Hinweis-Störer "neu" */
.color-new, .rechts.color-new {
    background-color: var(--ath-funktions-tuerkis-dark);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
}

/* Links & Interaktionen */
a {
    color: var(--ath-dunkelrot);
    text-decoration: none;
}

a:hover {
    color: var(--ath-rot);
    text-decoration: underline;
}

/* Kategorien-Pillen */
ul.bycategories li a {
    background-color: var(--ath-border-gray);
    color: var(--ath-text-dark);
    padding: 5px 12px;
    border-radius: 20px;
    display: inline-block;
    margin: 0 10px 10px 0;
    font-size: 0.85rem;
}

ul.bycategories li a:hover {
    background-color: var(--ath-rot);
    color: #ffffff;
    text-decoration: none;
}

.clear {
    clear: both;
}