@charset "UTF-8";

/**
 * Modernes Custom-CSS für das Cassiopeia-Template
 * Farbpalette: Blau (#112855 Primary, #224faa Links)
 * Keine externen Fonts - nur System-Fonts für rechtliche Sicherheit
 */

/* ============================================
   GRUNDLEGENDE STYLING-ÄNDERUNGEN
   ============================================ */

:root {
    /* Bestehende blaue Farben beibehalten */
    --cassiopeia-color-primary: #222855;
    --cassiopeia-color-link: #224faa;
    --link-color: #224faa;
    --link-color-rgb: 34, 79, 170;
    --cassiopeia-color-hover: #424077;
    --link-hover-color: #424077;
    --link-hover-color-rgb: 66, 64, 119;
    
    /* Neue moderne Variablen */
    --modern-border-radius: 12px;
    --modern-border-radius-sm: 8px;
    --modern-border-radius-lg: 20px;
    --modern-shadow: 0 4px 20px rgba(17, 40, 85, 0.1);
    --modern-shadow-hover: 0 8px 30px rgba(17, 40, 85, 0.15);
    --modern-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   HEADER & NAVIGATION (FIX: Lesebare Farben)
   ============================================ */

/* Moderner Header mit sanftem Schatten */
.header {
    background: linear-gradient(135deg, #c6d7f7 0%, #66aee6 100%) !important;
    box-shadow: 0 2px 20px rgba(17, 40, 85, 0.15) !important;
    border-bottom: 3px solid #224faa !important;
}

/* Logo und Branding modernisieren */
.navbar-brand {
    transition: var(--modern-transition);
}

.navbar-brand:hover {
    transform: scale(1.02);
}

.brand-logo {
    transition: var(--modern-transition);
}

.brand-logo:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* Navigation modern */
.navbar-nav .nav-link {
    border-radius: var(--modern-border-radius-sm) !important;
    transition: var(--modern-transition) !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    /* FIX: Weißer Text für bessere Lesbarkeit auf dunklem Hintergrund */
    color: #ffffff !important; 
}

.navbar-nav .nav-link:hover {
    background-color: rgba(34, 79, 170, 0.15) !important;
    transform: translateY(-1px);
    /* FIX: Helles Blau beim Überfahren */
    color: #a8c7fa !important; 
}

/* Aktiver Menüeintrag hervorheben */
.nav-item.active .nav-link,
.nav-item.show .nav-link {
    background: rgba(34, 79, 170, 0.2) !important;
    box-shadow: inset 0 2px 4px rgba(34, 79, 170, 0.1);
    color: #ffffff !important;
}

/* ============================================
   KARTEN & MODULE (Container)
   ============================================ */

/* Moderne Karten-Designs für Module und Artikel */
.container-component,
.container-banner,
.container-top-a,
.container-top-b,
.container-sidebar-left,
.container-sidebar-right,
.container-bottom-a,
.container-bottom-b {
    border-radius: var(--modern-border-radius) !important;
    transition: var(--modern-transition) !important;
}

/* Hover-Effekt für Karten */
.card {
    border-radius: var(--modern-border-radius) !important;
    box-shadow: var(--modern-shadow) !important;
    border: 1px solid rgba(17, 40, 85, 0.08) !important;
    transition: var(--modern-transition) !important;
}

.card:hover {
    box-shadow: var(--modern-shadow-hover) !important;
    transform: translateY(-3px);
}

/* ============================================
   ARTIKEL & INHALTE
   ============================================ */

/* Artikel-Container modernisieren */
.item-page,
.view-article {
    border-radius: var(--modern-border-radius) !important;
    background: #ffffff !important;
}

/* Artikel-Titel modern */
h1, h2, h3, h4, h5, h6 {
    color: #112855 !important;
    font-weight: 600 !important;
    letter-spacing: -0.3px !important;
    margin-bottom: 1rem !important;
}

/* Hervorhebung wichtiger Überschriften */
h1 {
    font-size: 2.2rem !important;
    background: linear-gradient(135deg, #112855 0%, #224faa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 0.5rem !important;
    border-bottom: 3px solid #224faa !important;
    display: inline-block !important;
}

h2 {
    font-size: 1.8rem !important;
    color: #1a3a75 !important;
}

/* Fließtext optimieren */
.item-page p,
.article p {
    line-height: 1.8 !important;
    color: #2c3e50 !important;
    font-size: 1.05rem !important;
}

/* ============================================
   BILDER & MEDIA (FIX: Banner-Reparatur)
   ============================================ */

/* Moderne Bilderrahmen */
img,
.article img,
.media-item {
    border-radius: var(--modern-border-radius-sm) !important;
    transition: var(--modern-transition) !important;
    box-shadow: var(--modern-shadow) !important;
}

img:hover,
.article img:hover {
    transform: scale(1.02);
    box-shadow: var(--modern-shadow-hover) !important;
}

/* Bildunterschriften modern */
.figure,
figcaption {
    border-radius: var(--modern-border-radius-sm) !important;
    background: #f8f9fa !important;
    padding: 0.75rem !important;
    font-style: italic !important;
    color: #495057 !important;
}

/* FIX: Banner-Bilder sollen keine Schatten oder Rahmen haben */
.banner img,
.mod-banner img,
a img {
    border: none !important;
    box-shadow: none !important;
}

/* ============================================
   LINKS & BUTTONS (FIX: Unterstrich-Animation)
   ============================================ */

/* Moderne Links */
a {
    color: #224faa !important;
    text-decoration: none !important;
    transition: var(--modern-transition) !important;
    position: relative;
}

/* Der Unterstrich-Effekt beim Hover */
a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(90deg, #224faa, #424077);
    transition: width 0.3s ease;
}

a:hover::after {
    width: 100%;
}

a:hover {
    color: #424077 !important;
}

/* FIX: Unterstrich für Banner-Bilder deaktivieren */
a:has(img)::after {
    display: none !important;
}

/* Buttons modernisieren */
.btn,
button[type="submit"],
input[type="submit"] {
    border-radius: var(--modern-border-radius-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    transition: var(--modern-transition) !important;
    box-shadow: var(--modern-shadow) !important;
    border: 2px solid transparent !important;
}

.btn-primary {
    background: linear-gradient(135deg, #224faa 0%, #112855 100%) !important;
    border-color: #224faa !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #424077 0%, #112855 100%) !important;
    border-color: #424077 !important;
    transform: translateY(-2px);
    box-shadow: var(--modern-shadow-hover) !important;
}

/* Sekundäre Buttons */
.btn-secondary {
    background: #ffffff !important;
    color: #112855 !important;
    border: 2px solid #112855 !important;
}

.btn-secondary:hover {
    background: #112855 !important;
    color: #ffffff !important;
}

/* ============================================
   FORMULAR-ELEMENTE
   ============================================ */

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    border-radius: var(--modern-border-radius-sm) !important;
    border: 2px solid #e0e6ed !important;
    padding: 0.75rem 1rem !important;
    transition: var(--modern-transition) !important;
    font-size: 1rem !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #224faa !important;
    box-shadow: 0 0 0 3px rgba(34, 79, 170, 0.1) !important;
    outline: none !important;
}

/* ============================================
   LISTEN & NAVIGATION
   ============================================ */

/* Moderne Listen */
ul, ol {
    border-radius: var(--modern-border-radius-sm) !important;
    padding-left: 1.5rem !important;
}

ul li, ol li {
    line-height: 1.8 !important;
    margin-bottom: 0.5rem !important;
}

/* Module-Listen modernisieren */
.module-content ul,
.module-menu ul {
    list-style: none !important;
    padding-left: 0 !important;
}

.module-menu li {
    transition: var(--modern-transition) !important;
    border-radius: var(--modern-border-radius-sm) !important;
}

.module-menu li:hover {
    background: rgba(34, 79, 170, 0.08) !important;
    transform: translateX(5px);
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
    background: linear-gradient(135deg, #112855 0%, #0d1f42 100%) !important;
    border-top: 3px solid #224faa !important;
    border-radius: var(--modern-border-radius) var(--modern-border-radius) 0 0 !important;
}

.footer a {
    color: #a8c7fa !important;
}

.footer a:hover {
    color: #ffffff !important;
}

/* ============================================
   BREADCRUMBS
   ============================================ */

.breadcrumb {
    background: #f8f9fa !important;
    border-radius: var(--modern-border-radius-sm) !important;
    padding: 0.75rem 1.25rem !important;
    box-shadow: var(--modern-shadow) !important;
}

.breadcrumb-item a {
    color: #224faa !important;
}

.breadcrumb-item.active {
    color: #112855 !important;
    font-weight: 600 !important;
}

/* ============================================
   SPEZIFISCHE KOMPONENTEN
   ============================================ */

/* Kontaktformulare */
.contact-form,
.form-contact {
    border-radius: var(--modern-border-radius) !important;
    background: #ffffff !important;