/**
 * ============================================================
 * KOMPLETTE USER.CSS FÜR CASSIOPEIA_EXTENDED
 * ============================================================
 * 
 * Version: 6.0
 * Datum: 2026-08-27
 * Pfad: /media/templates/site/cassiopeia_extended/css/user.css
 * 
 * INHALTSVERZEICHNIS:
 * 1.0   TOPBAR - Telefon + E-Mail (rechtsbündig)
 * 2.0   UNTERÜBERSCHRIFT - Rechts neben dem Logo
 * 3.0   MODERNE-BOX - Modul 115 (wie Footer)
 * 4.0   VISFORMS - Zweispaltiges Layout
 * 5.0   VISFORMS - Breiten-Klassen
 * 6.0   VISFORMS - Labels oberhalb
 * 7.0   VISFORMS - Schattenboxen (vor/nach Trenner)
 * 8.0   VISFORMS - Buttons nebeneinander
 * 9.0   VISFORMS - Allgemeine Styles
 * 10.0  BILDERGALERIE - 4 Bilder nebeneinander
 * 11.0  LINK-GRIDS - Zweispaltige Links (mobil einspaltig)
 * 12.0  MODERNE TABELLEN
 * 13.0  MODERNE BUTTONS für Artikel
 * 14.0  HEADER & NAVIGATION
 * 15.0  FOOTER
 * 16.0  MENÜ-FIXES - Hamburger + Tablet
 * 17.0  WEBSITE-OPTIMIERUNGEN
 * 18.0  SCROLLBAR
 * 19.0  VISFORMS-KOMPATIBILITÄT
 * ============================================================
 */

/* ============================================================
   1.0 TOPBAR - TELEFON + E-MAIL (RECHTSBÜNDIG)
   ============================================================ */

/*
   BESCHREIBUNG: Die Topbar zeigt nur Telefon und E-Mail 
   rechtsbündig an. Das Menü bleibt auf Position "menu".
   VERWENDUNG: Automatisch für Module in der Position "topbar"
*/

/* 1.1 - Topbar als Flexbox */
.container-topbar {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    background: #2c3e50 !important;
    padding: 6px 20px !important;
    border-bottom: 2px solid #dc3545 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 1.2 - Alle Kind-Elemente in der Topbar */
.container-topbar .moduletable,
.container-topbar .mod-custom,
.container-topbar .topbar-contact {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
}

/* 1.3 - Die Links (Telefon + E-Mail) */
.container-topbar .topbar-contact {
    gap: 15px !important;
}

.container-topbar .topbar-contact a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    transition: color 0.3s ease !important;
}

.container-topbar .topbar-contact a:hover {
    color: #dc3545 !important;
}

/* 1.4 - Icons für Telefon und E-Mail */
.container-topbar .topbar-contact .icon-phone,
.container-topbar .topbar-contact .icon-envelope {
    font-size: 1rem !important;
    color: #dc3545 !important;
    display: inline-block !important;
}

/* 1.5 - Trennlinie */
.container-topbar .topbar-divider {
    color: rgba(255, 255, 255, 0.2) !important;
    margin: 0 5px !important;
    user-select: none !important;
}

/* 1.6 - Mobile Ansicht */
@media (max-width: 767.98px) {
    .container-topbar {
        justify-content: center !important;
        padding: 5px 15px !important;
    }
    
    .container-topbar .topbar-contact {
        justify-content: center !important;
        gap: 10px !important;
    }
}

/* ============================================================
   2.0 UNTERÜBERSCHRIFT - RECHTS NEBEN DEM LOGO
   ============================================================ */

/*
   BESCHREIBUNG: Eine rote Unterüberschrift im h3-Stil 
   erscheint rechts neben dem Logo.
   VERWENDUNG: Automatisch im Header
*/

/* 2.1 - Desktop: Logo + Unterüberschrift in einer Zeile */
.header.container-header .grid-child:first-child {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.header.container-header .navbar-brand {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.header.container-header .navbar-brand::after {
    content: "Pferdetransporte mit 20 Jahren Erfahrung";
    font-size: 1.75rem;
    color: #dc3545;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

/* 2.2 - Mobile: Unterüberschrift unter dem Logo */
@media (max-width: 767.98px) {
    .header.container-header .navbar-brand {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .header.container-header .navbar-brand::after {
        content: "Pferdetransporte mit 20 Jahren Erfahrung";
        white-space: normal;
        font-size: 1.1rem;
        display: block;
        width: 100%;
        text-align: left;
        margin-top: 2px;
    }
}

/* 2.3 - Doppelte Unterüberschriften ausblenden */
.header-subtitle {
    display: none !important;
}
.header.container-header .brand-logo::after {
    display: none !important;
}

/* ============================================================
   3.0 MODERNE-BOX - MODUL 115 (WIE FOOTER)
   ============================================================ */

/*
   BESCHREIBUNG: Die Box erhält das gleiche Design wie der Footer:
   dunkler Hintergrund, weiße Schrift, roter Rand oben.
   VERWENDUNG: Klasse "moderne-box" im Modul 115
*/

/* 3.1 - Moderne-Box Grundlagen */
.moderne-box {
    background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 25px 20px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-top: 4px solid #dc3545 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    margin: 20px 0 !important;
}

/* 3.2 - Card-Header (Überschrift) */
.moderne-box .card-header {
    background: transparent !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    padding: 0 0 12px 0 !important;
    margin-bottom: 15px !important;
}

/* 3.3 - Card-Body (Inhalt) */
.moderne-box .card-body {
    background: transparent !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* 3.4 - Text in der Box */
.moderne-box p,
.moderne-box span,
.moderne-box div {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1rem !important;
    line-height: 1.8 !important;
}

/* 3.5 - Links in der Box (wie Footer) */
.moderne-box a {
    color: #dc3545 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
}

.moderne-box a:hover {
    color: #ff6b7a !important;
    text-decoration: underline !important;
}

/* 3.6 - Mobile Ansicht */
@media (max-width: 767.98px) {
    .moderne-box {
        padding: 18px 15px !important;
        border-radius: 12px !important;
        margin: 15px 0 !important;
    }
    
    .moderne-box .card-header {
        font-size: 1.2rem !important;
        padding-bottom: 8px !important;
    }
}

/* ============================================================
   4.0 VISFORMS - ZWEISPALTIGES LAYOUT
   ============================================================ */

/*
   BESCHREIBUNG: Alle Visforms-Felder werden standardmäßig 
   in zwei Spalten nebeneinander angezeigt.
   VERWENDUNG: Automatisch für #visform2
*/

#visform2 .row > .visfield-container {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

/* ============================================================
   5.0 VISFORMS - BREITEN-KLASSEN
   ============================================================ */

/*
   BESCHREIBUNG: Diese Klassen werden in der Feldkonfiguration 
   unter "CSS Klasse der Controllgruppe" eingetragen.
   VERWENDUNG: volle-breite, ein-drittel, zwei-drittel, 
               ein-viertel, drei-viertel
*/

/* 5.1 - Volle Breite (100%) */
#visform2 .row > .visfield-container.volle-breite {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* 5.2 - Ein Drittel (33.33%) */
#visform2 .row > .visfield-container.ein-drittel {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
}

/* 5.3 - Zwei Drittel (66.66%) */
#visform2 .row > .visfield-container.zwei-drittel {
    flex: 0 0 66.666% !important;
    max-width: 66.666% !important;
}

/* 5.4 - Ein Viertel (25%) */
#visform2 .row > .visfield-container.ein-viertel {
    flex: 0 0 25% !important;
    max-width: 25% !important;
}

/* 5.5 - Drei Viertel (75%) */
#visform2 .row > .visfield-container.drei-viertel {
    flex: 0 0 75% !important;
    max-width: 75% !important;
}

/* ============================================================
   6.0 VISFORMS - LABELS OBERHALB DER FELDER
   ============================================================ */

/*
   BESCHREIBUNG: Die Labels erscheinen oberhalb der Eingabefelder 
   (statt links daneben).
   VERWENDUNG: Automatisch für #visform2
*/

#visform2 .form-group.row {
    display: flex;
    flex-direction: column;
}

#visform2 .form-group.row label {
    order: 1;
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 0.9rem;
    color: #333;
}

#visform2 .form-group.row > div[class*="col-"] {
    order: 2;
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* ============================================================
   7.0 VISFORMS - SCHATTENBOXEN (vor/nach Trenner)
   ============================================================ */

/*
   BESCHREIBUNG: Alle Felder vor dem Trenner (field19) erhalten 
   eine blaue Schattenbox. Alle Felder nach dem Trenner erhalten 
   eine grüne Schattenbox.
   VERWENDUNG: Automatisch basierend auf der Position zu field19
*/

/* 7.1 - Schattenbox 1 (vor dem Trenner) - Blau */
#visform2 .row > .visfield-container:not(.field19):not(.field19 ~ .visfield-container) {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 25px 20px;
    margin-bottom: 5px;
    border: 1px solid #e9ecef;
    border-top: 4px solid #0d6efd;
    transition: box-shadow 0.3s ease;
}

#visform2 .row > .visfield-container:not(.field19):not(.field19 ~ .visfield-container):hover {
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12);
}

/* 7.2 - Der Trenner selbst */
#visform2 .visfield-container.field19 {
    margin: 30px 0 20px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#visform2 .visfield-container.field19 hr {
    border: none;
    border-top: 3px solid #dee2e6;
    margin: 0;
    position: relative;
    overflow: visible;
}

#visform2 .visfield-container.field19 hr::after {
    content: "▼";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    padding: 0 15px;
    color: #6c757d;
    font-size: 1.2rem;
}

/* 7.3 - Schattenbox 2 (nach dem Trenner) - Grün */
#visform2 .row > .visfield-container.field19 ~ .visfield-container {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 25px 20px;
    margin-bottom: 5px;
    border: 1px solid #e9ecef;
    border-top: 4px solid #198754;
    transition: box-shadow 0.3s ease;
}

#visform2 .row > .visfield-container.field19 ~ .visfield-container:hover {
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   8.0 VISFORMS - BUTTONS NEBENEINANDER
   ============================================================ */

/*
   BESCHREIBUNG: Die Buttons "Abschicken" und "Zurücksetzen" 
   werden nebeneinander mit Abstand angezeigt.
   VERWENDUNG: Automatisch für #visform2
*/

/* 8.1 - Button-Container */
#visform2 .vf-button-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    padding: 25px 20px !important;
    margin-top: 20px !important;
    border: 1px solid #e9ecef !important;
    border-top: 4px solid #198754 !important;
}

/* 8.2 - Alle inneren Container als Flexbox */
#visform2 .vf-button-container .col-auto,
#visform2 .vf-button-container .col-12,
#visform2 .vf-button-container .form-group.row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 8.3 - "Abschicken" Button (grün) */
#visform2 .btn-success,
#visform2 #field11 {
    background: linear-gradient(135deg, #198754, #157347) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 32px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(25, 135, 84, 0.35) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    min-width: 140px !important;
}

#visform2 .btn-success:hover,
#visform2 #field11:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(25, 135, 84, 0.45) !important;
    background: linear-gradient(135deg, #157347, #146c43) !important;
}

/* 8.4 - "Zurücksetzen" Button (rot) */
#visform2 .btn-danger,
#visform2 #field10 {
    background: linear-gradient(135deg, #dc3545, #c82333) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 32px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.35) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    min-width: 140px !important;
}

#visform2 .btn-danger:hover,
#visform2 #field10:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.45) !important;
    background: linear-gradient(135deg, #c82333, #a71d2a) !important;
}

/* 8.5 - Mobile Ansicht */
@media (max-width: 575.98px) {
    #visform2 .vf-button-container {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 20px 15px !important;
    }
    
    #visform2 .vf-button-container .col-auto,
    #visform2 .vf-button-container .col-12,
    #visform2 .vf-button-container .form-group.row {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    #visform2 .btn-success,
    #visform2 .btn-danger,
    #visform2 #field11,
    #visform2 #field10 {
        min-width: 200px !important;
        width: 100% !important;
        text-align: center !important;
        padding: 14px 20px !important;
        font-size: 1.05rem !important;
    }
}

/* ============================================================
   9.0 VISFORMS - ALLGEMEINE STYLES
   ============================================================ */

/*
   BESCHREIBUNG: Allgemeine Styles für Visforms-Formulare.
   VERWENDUNG: Automatisch für #visform2
*/

#visform2 [class^="fc-tbxfield"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

#visform2 .visfield-container {
    margin-bottom: 20px;
}

#visform2 .form-control::placeholder {
    color: #6c757d;
    opacity: 0.8;
    font-style: italic;
}

#visform2 .asterix-ancor::after {
    content: " *";
    color: #dc3545;
    font-weight: bold;
}

#visform2 .visfield-container label {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: 100% !important;
    position: relative !important;
    clip: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 0 5px 0 !important;
    border: none !important;
}

/* 9.1 - Mobile Ansicht */
@media (max-width: 767.98px) {
    #visform2 .row > .visfield-container {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    #visform2 .row > .visfield-container:not(.field19):not(.field19 ~ .visfield-container),
    #visform2 .row > .visfield-container.field19 ~ .visfield-container {
        padding: 15px 12px;
        border-radius: 8px;
    }
    
    #visform2 .visfield-container.field19 hr::after {
        font-size: 1rem;
        padding: 0 10px;
    }
}

/* Moderner Kalender-Button */
.visform .input-group-append .btn-secondary {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
    border: 1px solid #ced4da !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 8px 14px !important;
    transition: all 0.3s ease !important;
}

.visform .input-group-append .btn-secondary:hover {
    background: linear-gradient(135deg, #e9ecef, #dee2e6) !important;
    border-color: #adb5bd !important;
}

.visform .input-group-append .btn-secondary .icon-calendar {
    color: #dc3545 !important;  /* Rot, passend zu deinem Design */
    font-size: 1.1rem !important;
}

/**
 * ============================================================
 * ASTERISK NUR BEI NICHT-PFLICHTFELDERN AUSBLENDEN
 * ============================================================
 */

/* Asterisk bei Feldern OHNE Klasse "required" ausblenden */
.visform .visfield-container:not(.required) .asterix-ancor::after {
    content: none !important;
    display: none !important;
}

/* Asterisk bei Feldern MIT Klasse "required" beibehalten */
.visform .visfield-container.required .asterix-ancor::after {
    content: "*" !important;
    display: inline !important;
    color: #dc3545 !important;
    font-weight: bold !important;
    margin-left: 2px !important;
}

/* ============================================================
   10.0 BILDERGALERIE - 4 BILDER NEBENEINANDER
   ============================================================ */

/*
   BESCHREIBUNG: Die Bilder in der Galerie werden in 4 Spalten 
   nebeneinander angezeigt mit Hover-Zoom.
   VERWENDUNG: Automatisch für #mod-custom116
*/

/* 10.1 - Galerie-Container */
#mod-custom116 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    justify-content: center !important;
    padding: 10px 0 !important;
}

/* 10.2 - Die Bilder */
#mod-custom116 img {
    flex: 0 0 calc(25% - 20px) !important;
    max-width: calc(25% - 20px) !important;
    height: 250px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    display: block !important;
}

/* 10.3 - Hover-Effekt */
#mod-custom116 img:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.20) !important;
    z-index: 10 !important;
    position: relative !important;
    filter: brightness(1.05) saturate(1.1) !important;
}

/* 10.4 - Responsive */
@media (max-width: 991.98px) {
    #mod-custom116 img {
        flex: 0 0 calc(50% - 15px) !important;
        max-width: calc(50% - 15px) !important;
        height: 200px !important;
    }
    #mod-custom116 {
        gap: 15px !important;
    }
}

@media (max-width: 575.98px) {
    #mod-custom116 img {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        height: 200px !important;
        border-radius: 12px !important;
    }
    #mod-custom116 {
        gap: 12px !important;
    }
}

/* ============================================================
   11.0 LINK-GRIDS - ZWEISPALTIGE LINKS (mobil einspaltig)
   ============================================================ */

/*
   BESCHREIBUNG: Links werden in zwei Spalten angezeigt 
   (mobil einspaltig) mit feinen Buttons.
   VERWENDUNG: <div class="link-grid-2"> mit <a class="btn-link">
*/

.link-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    margin: 20px 0;
}

.link-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px 16px;
    margin: 20px 0;
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #2c3e50;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
}

.btn-link::before {
    content: "▸";
    color: #dc3545;
    font-size: 0.75rem;
    transition: transform 0.25s ease;
}

.btn-link:hover {
    background: #ffffff;
    border-color: #dc3545;
    color: #dc3545;
    transform: translateY(-1px);
    box-shadow: 0 2px 12px rgba(220, 53, 69, 0.12);
    text-decoration: none;
}
.btn-link:hover::before {
    transform: translateX(3px);
    color: #dc3545;
}

/* 11.1 - Farbvarianten */
.btn-link.red {
    color: #dc3545;
    border-color: #f5c6cb;
    background: #fff5f5;
}
.btn-link.red:hover {
    background: #dc3545;
    color: #ffffff;
}

.btn-link.blue {
    color: #0d6efd;
    border-color: #b6d4fe;
    background: #f0f7ff;
}
.btn-link.blue:hover {
    background: #0d6efd;
    color: #ffffff;
}

.btn-link.green {
    color: #198754;
    border-color: #b3d8c0;
    background: #f0f9f4;
}
.btn-link.green:hover {
    background: #198754;
    color: #ffffff;
}

.btn-link.orange {
    color: #fd7e14;
    border-color: #fedaaf;
    background: #fff8f0;
}
.btn-link.orange:hover {
    background: #fd7e14;
    color: #ffffff;
}

/* 11.2 - Varianten */
.btn-link.no-icon::before {
    content: none;
}
.btn-link.pill {
    border-radius: 50px;
    padding: 6px 20px;
}
.btn-link.tiny {
    padding: 4px 12px;
    font-size: 0.75rem;
}
.btn-link.underline {
    background: transparent;
    border: none;
    padding: 4px 0;
    border-radius: 0;
    color: #2c3e50;
    width: auto;
}
.btn-link.underline::before {
    content: "›";
    font-size: 1rem;
}
.btn-link.underline:hover {
    background: transparent;
    color: #dc3545;
    transform: translateX(4px);
    box-shadow: none;
    border: none;
}

/* 11.3 - Mobile */
@media (max-width: 767.98px) {
    .link-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .link-grid-3 {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .btn-link {
        white-space: normal;
        padding: 8px 14px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .link-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
}

/* ============================================================
   12.0 MODERNE TABELLEN
   ============================================================ */

/*
   BESCHREIBUNG: Tabellen erhalten ein modernes Design mit 
   Farbverlauf im Kopf, Schatten und Hover-Effekten.
   VERWENDUNG: <table class="table-modern">
*/

.table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 25px 0;
    font-size: 0.95rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    background: #ffffff;
}

.table-modern thead th {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    padding: 15px 20px;
    text-align: left;
    border: none;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-modern tbody td {
    padding: 14px 20px;
    color: #495057;
    vertical-align: middle;
    border: none;
    background: #ffffff;
    border-bottom: 1px solid #f1f3f5;
}

.table-modern tbody tr:hover td {
    background: #f8f9fa;
    transform: scale(1.01);
}

/* 12.1 - Farbakzente */
.table-modern.accent-red thead th {
    background: linear-gradient(135deg, #dc3545, #c82333);
}
.table-modern.accent-blue thead th {
    background: linear-gradient(135deg, #0d6efd, #0b5ed7);
}
.table-modern.accent-green thead th {
    background: linear-gradient(135deg, #198754, #157347);
}

/* 12.2 - Kompakt */
.table-modern.compact thead th {
    padding: 10px 14px;
    font-size: 0.8rem;
}
.table-modern.compact tbody td {
    padding: 8px 14px;
    font-size: 0.85rem;
}

/* ============================================================
   13.0 MODERNE BUTTONS FÜR ARTIKEL
   ============================================================ */

/*
   BESCHREIBUNG: Moderne Buttons für Artikel-Inhalte.
   VERWENDUNG: <a class="btn-modern">
*/

.btn-modern {
    display: inline-block;
    padding: 14px 36px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #dc3545, #c82333);
    border: none;
    border-radius: 50px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(220, 53, 69, 0.35);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 35px rgba(220, 53, 69, 0.5);
    color: #ffffff;
    text-decoration: none;
    background: linear-gradient(135deg, #c82333, #a71d2a);
}

/* 13.1 - Farbvarianten */
.btn-modern.blue {
    background: linear-gradient(135deg, #0d6efd, #0b5ed7);
    box-shadow: 0 4px 20px rgba(13, 110, 253, 0.35);
}
.btn-modern.blue:hover {
    background: linear-gradient(135deg, #0b5ed7, #0a58ca);
}

.btn-modern.green {
    background: linear-gradient(135deg, #198754, #157347);
    box-shadow: 0 4px 20px rgba(25, 135, 84, 0.35);
}
.btn-modern.green:hover {
    background: linear-gradient(135deg, #157347, #146c43);
}

/* 13.2 - Größen */
.btn-modern.large {
    padding: 18px 48px;
    font-size: 1.25rem;
}
.btn-modern.small {
    padding: 8px 20px;
    font-size: 0.85rem;
}

/* ============================================================
   14.0 HEADER & NAVIGATION
   ============================================================ */

/*
   BESCHREIBUNG: Moderner Header mit Blur-Effekt und 
   animiertem Menü.
*/

.header.container-header {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.04) !important;
}

.mod-menu.nav > li > a {
    position: relative;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    color: #2c3e50 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.mod-menu.nav > li > a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: #dc3545;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.mod-menu.nav > li > a:hover::after,
.mod-menu.nav > li.active > a::after {
    width: 60%;
}

.mod-menu.nav > li > a:hover {
    color: #dc3545 !important;
    background: rgba(220, 53, 69, 0.06) !important;
}

.mod-menu.nav > li.active > a {
    color: #dc3545 !important;
    background: rgba(220, 53, 69, 0.08) !important;
}

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

/*
   BESCHREIBUNG: Dunkler Footer mit rotem Akzent und 
   zweispaltigem Layout.
*/

footer.container-footer.footer.full-width {
    background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 40px 0 30px 0 !important;
    margin-top: 40px !important;
    border-top: 4px solid #dc3545 !important;
    width: 100% !important;
}

footer.container-footer.footer.full-width .grid-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

footer.container-footer.footer.full-width p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1rem !important;
    line-height: 1.8 !important;
    margin-bottom: 6px !important;
}

footer.container-footer.footer.full-width a {
    color: #dc3545 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
}
footer.container-footer.footer.full-width a:hover {
    color: #ff6b7a !important;
    text-decoration: underline !important;
}

/* 15.1 - Mobile */
@media (max-width: 767.98px) {
    footer.container-footer.footer.full-width .grid-child {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 15px !important;
        text-align: center !important;
    }
}

/* ============================================================
   16.0 MENÜ-FIXES - HAMBURGER + TABLET
   ============================================================ */

/*
   BESCHREIBUNG: Hamburger-Icon wird auf Mobile sichtbar.
   Auf Tablets wird das horizontale Menü angezeigt.
*/

/* 16.1 - Hamburger-Icon sichtbar machen */
.navbar-toggler {
    background-color: #dc3545 !important;
    border: 2px solid #dc3545 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    transition: all 0.3s ease !important;
}
.navbar-toggler:hover {
    background-color: #c82333 !important;
    transform: scale(1.05);
}
.navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* 16.2 - Tablet: horizontales Menü */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container-header .mod-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        justify-content: flex-end !important;
    }
    .container-header .navbar-toggler {
        display: none !important;
    }
}

/* 16.3 - Mobile: Hamburger anzeigen */
@media (max-width: 767.98px) {
    .container-header .navbar-toggler {
        display: inline-block !important;
    }
    .container-header .mod-menu {
        display: block !important;
    }
    .container-header .mod-menu .nav-item {
        display: block !important;
        width: 100% !important;
    }
}

/* ============================================================
   17.0 WEBSITE-OPTIMIERUNGEN
   ============================================================ */

/*
   BESCHREIBUNG: Sanfte Übergänge, moderne Karten, 
   schöne Überschriften.
*/

/* 17.1 - Sanfte Übergänge */
*:not(.visform *) {
    transition: all 0.3s ease;
}

/* 17.2 - Moderne Karten */
.card, 
.module, 
.com-content-category-blog .item,
.com-content-article .item-page {
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    border-radius: 16px !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}
.card:hover,
.module:hover {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10) !important;
    transform: translateY(-2px) !important;
}

/* 17.3 - Artikelüberschriften */
.com-content-article .page-header h1,
.com-content-category-blog .page-header h1 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #2c3e50, #34495e) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* 17.4 - Artikelbilder */
.com-content-article img,
.com-content-category-blog .item-image {
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* ============================================================
   18.0 SCROLLBAR
   ============================================================ */

/*
   BESCHREIBUNG: Moderne Scrollbar mit rotem Akzent.
*/

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #dc3545, #c82333);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #c82333, #a71d2a);
}

/* ============================================================
   19.0 VISFORMS-KOMPATIBILITÄT
   ============================================================ */

/*
   BESCHREIBUNG: Stellt sicher, dass alle Styles Visforms 
   NICHT beeinflussen.
*/

.visform * {
    transition: none !important;
    animation: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.visform .card,
.visform .module,
.visform .com-content-category-blog .item {
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: none !important;
    background: transparent !important;
}

.visform .btn-primary,
.visform .btn-secondary,
.visform .btn-modern,
.visform .btn-link,
.visform .btn-success,
.visform .btn-danger {
    all: unset !important;
}

.visform .form-control {
    border-radius: 0.375rem !important;
    border: 1px solid #ced4da !important;
    padding: 0.375rem 0.75rem !important;
    box-shadow: none !important;
}
.visform .form-control:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

.visform .form-label {
    font-weight: normal !important;
    color: inherit !important;
}

.visform table,
.visform .table-modern,
.visform .table-responsive-modern {
    all: unset !important;
}

.visform .link-grid-2,
.visform .link-grid-3,
.visform .btn-link {
    all: unset !important;
}

.visform #mod-custom116,
.visform #mod-custom116 img {
    all: unset !important;
}

.visform footer.container-footer.footer.full-width,
.visform .mod-custom {
    all: unset !important;
}

.visform .container-topbar,
.visform .container-topbar * {
    all: unset !important;
}

.visform .moderne-box,
.visform .moderne-box * {
    all: unset !important;
}

/* ============================================================
   ENDE DER KOMPLETTEN USER.CSS
   ============================================================ */