/* ------------------------------------------------------------------- */
/* New World Underground (NWU) - Template CSS (überarbeitet) */
/* ------------------------------------------------------------------- */

/* Allgemeine Body-Einstellungen */
body {
  background-color: #0a0a0a;
  color: #e0e0e0;
  margin: 25px; /* beibehalten wie in deinem Original */
  font-family: 'Inter', sans-serif;
}

/* Box sizing */
* { box-sizing: border-box; }

/* Äußerer Container für das Layout */
.container-website {
  max-width: 100%;
  margin: 0;
  background: #0a0a0a;
  border: 2px solid rgba(112, 0, 0, 1.00);
  height: auto;
  width: 100%;
  padding: 25px;
}

/* ------------------------------------------------------------------- */
/* OBERER HEADER-BEREICH (nwu-header) */
/* ------------------------------------------------------------------- */
.nwu-header {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 70px; /* verhindert Aufblähen der Mitte */
  align-items: center; /* vertikal zentrieren der Inhalte */
  min-height: 100px;
  /*margin: 25px;*/
  /*border-bottom: 2px solid #8B4513;*/
  position: relative;
  gap: 0;
  background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
}

/* Linker Bereich mit Eck-Bild */
.nwu-corner-left {
  grid-column: 1;
  width: 70px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: 0;
  position: relative;
  align-self: stretch; /* sorgt dafür, dass die Zelle die Header-Höhe einnimmt */
}

/* Logo Bereich - zentriert */
.nwu-logo-center {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20;
  margin: 0;
}

/* Rechter Bereich mit Eck-Bild */
.nwu-corner-right {
  grid-column: 3;
  width: 70px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  position: relative;
  align-self: stretch; /* sorgt dafür, dass die Zelle die Header-Höhe einnimmt */
}

/* Bilder auf 70x70 begrenzen */
.nwu-corner-left img,
.nwu-corner-right img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  display: block; /* verhindert Inline-Whitespace */
  margin: 0;
  padding: 0;
  border: 0;
}

/* Logo Größe */
.nwu-logo-center img {
  max-height: 320px;
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
  margin: 25px; /* entfernt vorherige top/bottom margins, damit zentriert bleibt */
  padding: 0;
  position: relative;
  z-index: 2;
}

/* HORIZONTALE LINIE - Verbindet linkes und rechtes Eckbild */
.nwu-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 70px;
  right: 70px;
  height: 6px;
  background: rgba(49, 76, 104, 1.0);
  z-index: 1;
}

/* VERTIKALE LINIEN - Von Eckbildern nach unten
   Verwende top + bottom statt height, damit die Linie bis zum unteren Rand reicht */
.nwu-corner-left::after,
.nwu-corner-right::after {
  content: '';
  position: absolute;
  width: 6px;
  background: rgba(49, 76, 104, 1.0);
  top: 70px;   /* beginnt direkt unter dem 70px hohen Bild */
  bottom: 0;   /* reicht bis ganz unten im Header */
  z-index: 1;
}

.nwu-corner-left::after { left: 0; }
.nwu-corner-right::after { right: 0; }

/* Optional: kleine Anpassung für sehr kleine Bildschirme 
@media (max-width: 480px) {
  .nwu-header {
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    min-height: 80px;
  }
  .nwu-corner-left img,
  .nwu-corner-right img {
    width: 56px;
    height: 56px;
  }
  .nwu-header::after { left: 56px; right: 56px; }
  .nwu-corner-left::after,
  .nwu-corner-right::after { top: 56px; }
}*/


/* ------------------------------------------------------------------- */
/* BREADCRUMBS-BEREICH (nwu-breadcrumbs) */
/* ------------------------------------------------------------------- */
.nwu-breadcrumbs {
    display: grid;
    grid-template-columns: 6px minmax(0, 1fr) 6px; /* Nur schmale Spalten für die Linien */
    align-items: center;
    min-height: 0px; /* Kleiner als Header */
    /*border-bottom: 1px solid #8B4513; /* Dünnerer Bottom-Border */
    position: relative;
    gap: 0;
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%); /* Umgekehrter Gradient */
    margin-top: 0px; /* Kleiner Abstand zum Header */
}

/* Linker Bereich - nur für die vertikale Linie */
.nwu-breadcrumbs-left {
    grid-column: 1;
    width: 6px;
    position: relative;
    align-self: stretch;
    background: rgba(49, 76, 104, 1.0); /* Direkt als Background */
}

/* Mittlerer Bereich für Breadcrumb-Navigation */
.nwu-breadcrumbs-center {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Links ausgerichtet für Breadcrumbs */
    width: 100%;
    /*padding: 0px 20px; /* Seitlicher Abstand für den Text */
    padding-top: 20px;

    color: #FFD214; /* Goldene Schrift */
    font-size: 14px;
}


/* Breadcrumb Links Styling */
.nwu-breadcrumbs-center a {
    color: #FFD214;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nwu-breadcrumbs-center a:hover {
    color: #fff;
    text-shadow: 0 0 5px rgba(255, 210, 20, 0.5);
}

/* Breadcrumb Separator */
.nwu-breadcrumbs-center .breadcrumb-separator {
    margin: 0 0px;
    color: #8B4513;
}

/* Rechter Bereich - nur für die vertikale Linie */
.nwu-breadcrumbs-right {
    grid-column: 3;
    width: 6px;
    position: relative;
    align-self: stretch;
    background: rgba(49, 76, 104, 1.0); /* Direkt als Background */
}

/* HORIZONTALE LINIE - Oben über den Breadcrumbs */
.nwu-breadcrumbs::after {
    content: '';
    position: absolute;
    top: 0;
    left: 6px; /* Start nach der linken vertikalen Linie */
    right: 6px; /* Ende vor der rechten vertikalen Linie */
    height: 3px; /* Dünnere Linie */
    background: rgba(49, 76, 104, 1.0); /* Etwas transparenter */
    z-index: 1;
}


/* Optional: Mobile Anpassung 
@media (max-width: 480px) {
  .nwu-breadcrumbs {
    min-height: 35px;
  }
  
  .nwu-breadcrumbs-center {
    padding: 6px 15px;
    font-size: 12px;
  }
}*/


/* ------------------------------------------------------------------- */
/* NAVIGATION-BEREICH (nwu-navigation) - BEREINIGT */
/* ------------------------------------------------------------------- */
.nwu-navigation {
    display: grid;
    grid-template-columns: 6px minmax(0, 1fr) 6px;
    align-items: center;
    min-height: 50px; /* Höher für Navigation-Menü */
    position: relative;
    gap: 0;
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    margin-top: 0px;
}

/* Linker Bereich - nur für die vertikale Linie */
.nwu-navigation-left {
    grid-column: 1;
    width: 6px;
    position: relative;
    align-self: stretch;
    background: rgba(49, 76, 104, 1.0);
}

/* Mittlerer Bereich für Navigation - NUR EINMAL DEFINIEREN */
.nwu-navigation-center {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center; /* Zentriert für Navigation */
    width: 100%;
    padding: 10px 20px; /* Gleichmäßiges Padding */
    /* KEIN padding-top: 20px mehr! */
}

/* Navigation Menü-Liste */
.nwu-navigation-center ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center; /* Vertikal zentrieren */
}

.nwu-navigation-center li {
    margin: 0;
}

/* Navigation Links */
.nwu-navigation-center a {
    display: block;
    padding: 12px 25px; /* Größere Klickfläche */
    color: #FFD214;
    text-decoration: none;
    font-size: 16px; /* Größer als Breadcrumbs */
    font-weight: 600;
    text-transform: uppercase; /* Typisch für Hauptnavigation */
    transition: all 0.3s ease;
    border-right: 1px solid rgba(49, 76, 104, 0.5);
}

.nwu-navigation-center li:last-child a {
    border-right: none;
}

.nwu-navigation-center a:hover {
    color: #fff;
    background: rgba(49, 76, 104, 0.2); /* Hover-Background */
    text-shadow: 0 0 5px rgba(255, 210, 20, 0.5);
}

/* Aktive Seite */
.nwu-navigation-center .active a,
.nwu-navigation-center .current a {
    color: #fff;
    background: rgba(49, 76, 104, 0.3);
}

/* Rechter Bereich - nur für die vertikale Linie */
.nwu-navigation-right {
    grid-column: 3;
    width: 6px;
    position: relative;
    align-self: stretch;
    background: rgba(49, 76, 104, 1.0);
}

/* HORIZONTALE LINIE - Oben über der Navigation */
.nwu-navigation::after {
    content: '';
    position: absolute;
    top: 0;
    left: 6px;
    right: 6px;
    height: 3px;
    background: rgba(49, 76, 104, 1.0);
    z-index: 1;
}




/* ------------------------------------------------------------------- */
/* SIDEBAR-LINKE-SEITE-BEREICH (nwu-aside-left) -KI Claude */
/* ------------------------------------------------------------------- */

/* WRAPPER für alle drei Bereiche nebeneinander */
.nwu-content-wrapper {
    display: grid;
    grid-template-columns: 256px 1fr 256px; /* Links (6px+250px) | Mitte | Rechts (250px+6px) */
    align-items: stretch;
    min-height: 400px;
    gap: 0;
}

/* Linke Aside */
.nwu-aside-left {
    grid-column: 1;
    display: grid;
    grid-template-columns: 6px 250px;
    align-items: stretch;
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
}

.nwu-aside-left-line {
    grid-column: 1;
    width: 6px;
    background: rgba(49, 76, 104, 1.0);
}

.nwu-aside-left-content {
    grid-column: 2;
    padding: 20px;
}


/* ------------------------------------------------------------------- */
/* SIDEBAR NAVIGATION (nwu-aside-left-content) */
/* ------------------------------------------------------------------- */

/* Container für alle Menüs in der Sidebar */
.nwu-aside-left-content {
    padding: 0;
}

/* Jedes einzelne Menü-Modul */
.nwu-aside-left-content .moduletable,
.nwu-aside-left-content .module {
    margin-bottom: 20px; /* Abstand zwischen den 3 Menüs */
}

/* Menü-Titel (Main Menu, User Menu, Admin Menu) */
.nwu-aside-left-content .moduletable h3,
.nwu-aside-left-content .module h3 {
    color: #FFD214;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 12px 20px;
    margin: 0;
    background: rgba(49, 76, 104, 0.2);
    /*border-left: 3px solid #FFD214; test*/
}

/* Menü-Liste */
.nwu-aside-left-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nwu-aside-left-content li {
    margin: 0;
    border-bottom: 1px solid rgba(49, 76, 104, 0.3);
}

.nwu-aside-left-content li:last-child {
    border-bottom: none;
}

/* Menü-Links */
.nwu-aside-left-content a {
    display: block;
    padding: 12px 20px;
    color: #FFD214;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.nwu-aside-left-content a:hover {
    color: #fff;
    background: rgba(49, 76, 104, 0.2);
    /*border-left-color: #FFD214;*/
    text-shadow: 0 0 5px rgba(255, 210, 20, 0.5);
    padding-left: 25px; /* Leichter Einrück-Effekt beim Hover */
}

/* Aktive Seite */
.nwu-aside-left-content .active > a,
.nwu-aside-left-content .current > a {
    color: #fff;
    background: rgba(49, 76, 104, 0.3);
    /*border-left-color: #FFD214; */
}

/* Trennlinie zwischen den Menü-Modulen */
.nwu-aside-left-content .moduletable + .moduletable,
.nwu-aside-left-content .module + .module {
    border-top: 2px solid rgba(49, 76, 104, 0.5);
    padding-top: 20px;
}

/* Optional: Sub-Menüs (falls vorhanden) */
.nwu-aside-left-content ul ul {
    padding-left: 15px;
}

.nwu-aside-left-content ul ul a {
    font-size: 14px;
    padding: 10px 20px;
}






/* Menüpunkte vertikal untereinander */
.nwu-aside-left-content ul {
    display: block !important;
}

.nwu-aside-left-content li {
    display: block !important;
    float: none !important;
    width: 100%;
}

.nwu-aside-left-content a {
    display: block !important;
}



/* ------------------------------------------------------------------- */
/* MAIN-BEREICH (nwu-main) -KI Claude */
/* ------------------------------------------------------------------- */


/* Hauptinhalt - MITTE */
.nwu-main-content {
    grid-column: 2;
    padding: 30px;
    background: #0a0a0a;

  display: flex;
  align-items: flex-end;
  justify-content: flex-end;

}



/* ------------------------------------------------------------------- */
/* PROFIL - NACH OBEN AUSRICHTEN */
/* ------------------------------------------------------------------- */

/* Main Content - Profil oben statt Mitte */
.nwu-main-content {
    display: flex;
    align-items: flex-start !important; /* Nach oben statt center */
    justify-content: flex-start !important; /* Links statt center */
}

/* Oder nur für Profil-Seite */
.com-users-profile .nwu-main-content {
    align-items: flex-start !important;
    justify-content: center !important; /* Horizontal zentriert bleibt */
}




/* ------------------------------------------------------------------- */
/* SIDEBAR-RECHTE-SEITE-BEREICH (nwu-aside-right) -KI Claude */
/* ------------------------------------------------------------------- */

/* Rechte Aside - Container für Sidebar + Linie */
/* Rechte Aside */
.nwu-aside-right {
    grid-column: 3;
    display: grid;
    grid-template-columns: 250px 6px;
    align-items: stretch;
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
}

.nwu-aside-right-content {
    grid-column: 1;
    padding: 20px;
}

.nwu-aside-right-line {
    grid-column: 2;
  width: 70px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
    width: 6px;
    background: rgba(49, 76, 104, 1.0);
}



/* ------------------------------------------------------------------- */
/* UNTERER FOOTER-BEREICH (nwu-footer) */
/* ------------------------------------------------------------------- */
.nwu-footer {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 70px; /* verhindert Aufblähen der Mitte */
  align-items: center; /* vertikal zentrieren der Inhalte */

  min-height: 0px;
  /*margin: 25px;*/
  /*border-bottom: 2px solid #8B4513;*/
  position: relative;
  gap: 0;
  background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
}

/* Linker Bereich mit Eck-Bild */
.nwu-footer-left {
  grid-column: 1;
  width: 70px;
  display: flex;
  align-items: flex-end; /*von start zu end geäbdert*/
  justify-content: flex-end;/*von start zu end geäbdert*/
  padding-left: 0;
  position: relative;
  align-self: stretch; /* sorgt dafür, dass die Zelle die Footer-Höhe einnimmt */
}

/* Mitte des Footer Bereich - zentriert */
.nwu-footer-center {
  grid-column: 2;
  display: flex;
  align-items: end; /*test *//*von start zu end geäbdert*/
  justify-content: end;/*von start zu end geäbdert*/
  width: 100%;
  padding: 20;
  /*margin: 0; /*test*/
  
  
}

/* Rechter Bereich mit Eck-Bild */
.nwu-footer-right {
  grid-column: 3;
  width: 70px;
  display: flex;
  align-items: flex-end;/*von start zu end geäbdert*/
  justify-content: flex-end;/*von start zu end geäbdert*/
  position: relative;
  align-self: stretch; /* sorgt dafür, dass die Zelle die Header-Höhe einnimmt */
}

/* Bilder auf 70x70 begrenzen */
.nwu-footer-left img,
.nwu-footer-right img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  display: block; /* verhindert Inline-Whitespace */
  margin: 0;
  padding: 0;
  border: 0;
}

/* Logo Größe */
.nwu-footer-center img {
  max-height: 320px;
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
  margin: 25px; /* entfernt vorherige top/bottom margins, damit zentriert bleibt */
  padding: 0;
  position: relative;
  z-index: 2;
}

/* HORIZONTALE LINIE - Verbindet linkes und rechtes Eckbild */
.nwu-footer::after {
  content: '';
  position: absolute;
  /*top: 0; /*geändert von 0 - 70 */
  bottom: 0; /*eingefügt */
  left: 70px;
  right: 70px;
  height: 6px;
  background: rgba(49, 76, 104, 1.0);
  z-index: 1;
}

/* VERTIKALE LINIEN - Von Eckbildern nach unten
   Verwende top + bottom statt height, damit die Linie bis zum unteren Rand reicht */
.nwu-footer-left::after,
.nwu-footer-right::after {
  content: '';
  position: absolute;
  width: 6px;
  background: rgba(49, 76, 104, 1.0);
  top: 70px;   /* beginnt direkt unter dem 70px hohen Bild */
  bottom: 0;   /* reicht bis ganz unten im Header */
  z-index: 1;
}

.nwu-footer-left::after { left: 0; }
.nwu-footer-right::after { right: 0; }

/* Optional: kleine Anpassung für sehr kleine Bildschirme
@media (max-width: 480px) {
  .nwu-footer {
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    min-height: 80px;
  }
  .nwu-footer-left img,
  .nwu-footer-right img {
    width: 56px;
    height: 56px;
  }
  .nwu-footer::after { left: 56px; right: 56px; }
  .nwu-footer-left::after,
  .nwu-footer-right::after { top: 56px; }
}
 */

/* P-Tags in Footer-Eckbildern neutralisieren */
.nwu-footer-left p,
.nwu-footer-right p {
    margin: 0 !important;
    padding: 0 !important;
}





/* Tablets */
@media (max-width: 1024px) {
    .nwu-content-wrapper {
        grid-template-columns: auto auto auto;
    }
    
    .nwu-aside-left {
        grid-template-columns: 6px auto;
    }
    
    .nwu-aside-right {
        grid-template-columns: auto 6px;
    }
}

/* Handys */
@media (max-width: 768px) {
    .nwu-content-wrapper {
        grid-template-columns: auto auto auto;
    }
    
    .nwu-aside-left {
        grid-template-columns: 6px auto;
    }
    
    .nwu-aside-right {
        grid-template-columns: auto 6px;
    }
    
    .nwu-main-content {
        padding: 15px; /* Weniger Padding auf Handy */
    }
    
    .nwu-aside-left-content,
    .nwu-aside-right-content {
        padding: 15px;
    }
}



/* Copyright-Bereich unter dem Footer */
.nwu-footer-copyright {
    text-align: center;
    padding: 20px;
    background: #0a0a0a;
    color: #888;
    font-size: 14px;
    border-top: 1px solid rgba(49, 76, 104, 0.3);
}

.nwu-footer-copyright a {
    color: #FFD214;
    text-decoration: none;
}

.nwu-footer-copyright a:hover {
    color: #fff;
}




/* Frontend Bearbeiten-Buttons ausblenden - ABER NICHT Profil */
.jmodedit,
.article-edit,
.module-edit,
.edit-icon,
a[href*="task=module.edit"],
a[href*="task=article.edit"] {
    display: none !important;
}

/* btn-toolbar NUR für Artikel/Module ausblenden, NICHT für Profil */
.com-content .btn-toolbar,
.mod-custom .btn-toolbar {
    display: none !important;
}

/* Profil bearbeiten Button - explizit anzeigen */
.com-users-profile__edit {
    display: block !important;
}

/* ------------------------------------------------------------------- */
/* LOGIN-FORMULAR STYLING -*/
/* ------------------------------------------------------------------- */


/* Profil bearbeiten Button nach unten links */
.com_users.view-profile .com-users-profile {
    display: flex;
    flex-direction: column;
}

.com_users.view-profile .com-users-profile__edit.btn-toolbar.float-end {
    float: none !important;
    order: 999; /* Schiebt den Button ans Ende */
    align-self: flex-start; /* Links ausrichten */
    margin-top: 30px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: auto !important;
}


/* ------------------------------------------------------------------- */
/* LOGIN-FORMULAR STYLING -*/
/* ------------------------------------------------------------------- */

/* ========================================= */
/* ABSTAND ZWISCHEN INPUT-FELDERN */
/* ========================================= */

.com-users-login .control-group {
    margin-bottom: 30px !important; /* Mehr Abstand zwischen Feldern */
}

.com-users-login .com-users-login__input {
    margin-bottom: 30px !important;
}


/* Container BREITER machen */
.com-users-login {
    max-width: 70%; /* von 650px auf 800px (oder noch breiter!) */
    margin: 0 auto;

}

/* Login-Form Box - mehr Padding */
.com-users-login .login {
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    border: 2px solid rgba(49, 76, 104, 0.5);
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Überschrift größer */
.com-users-login h1,
.com-users-login .page-header {
    color: #FFD214;
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 35px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(49, 76, 104, 0.5);
}

/* Labels größer */
.com-users-login label {
    color: rgba(49, 76, 104, 1.0);
    font-size: 16px;
    font-weight: 500;
    display: block;
    margin-bottom: 10px;
}



/* Login-Button größer */
.com-users-login button[type="submit"],
.com-users-login .btn-primary {
    width: 100%;
    padding: 16px;
    background: rgba(49, 76, 104, 1.0);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.com-users-login button[type="submit"]:hover,
.com-users-login .btn-primary:hover {
    background: rgba(49, 76, 104, 0.8);
    box-shadow: 0 4px 15px rgba(49, 76, 104, 0.4);
    transform: translateY(-2px);
}

/* "Angemeldet bleiben" Checkbox */
.com-users-login .form-check {
    margin: 15px 0;
}

.com-users-login .form-check label {
    color: #888;
    font-size: 13px;
    display: inline;
    margin-left: 8px;
}

/* Links (Passwort vergessen, etc.) */
.com-users-login a {
    color: rgba(49, 76, 104, 1.0);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.3s ease;
    background: transparent !important;
    padding: 4px 8px;
    display: inline-block;
}

.com-users-login a:hover {
    color: #fff;
    text-shadow: 0 0 5px rgba(49, 76, 104, 0.5);
    background: rgba(49, 76, 104, 0.2) !important;
}

/* Fehlermeldungen */
.com-users-login .alert-error,
.com-users-login .alert-danger {
    background: rgba(139, 69, 19, 0.3);
    border: 1px solid #8B4513;
    color: #FFD214;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* Erfolgsmeldungen */
.com-users-login .alert-success {
    background: rgba(49, 76, 104, 0.3);
    border: 1px solid rgba(49, 76, 104, 1.0);
    color: rgba(49, 76, 104, 1.0);
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* Liste mit Links (Passwort/Benutzername vergessen) */
.com-users-login ul,
.com-users-login .login-links {
    background: #0a0a0a !important;
    padding: 15px;
    border-radius: 4px;
    list-style: none;
    margin-top: 20px;
}

.com-users-login ul li {
    background: transparent !important;
}

/* Passkey-Link bleibt KLEIN */
.com-users-login .com-users-login__passkey,
.com-users-login a[href*="passkey"],
.com-users-login button[id*="passkey"] {
    font-size: 13px !important;
    padding: 6px 10px !important;
}


.com-users-login input[type="text"]:focus,
.com-users-login input[type="password"]:focus,
.com-users-login input[type="email"]:focus {
    outline: none !important;
    border: 1px solid rgba(49, 76, 104, 0.5) !important; /* Kompletter Border */
    box-shadow: none !important; /* Kein Shadow */
    transform: none !important; /* Keine Transformation */
}

/* Fehlermeldungen - NUR FARBE ÄNDERN */
.com-users-login span.form-control-feedback,
.com-users-login .form-control-feedback,
span.form-control-feedback {
    color: #FF4444 !important; /* Rot statt Blau */
}

/* Labels mit invalid/required Klasse */
.com-users-login label.invalid,
.com-users-login label.required.invalid {
    color: #FF4444 !important; /* Rot statt Blau */
}

/* Input-Felder mit Fehler - roter Border */
.com-users-login input.invalid,
.com-users-login input[aria-invalid="true"] {
    border-color: #FF4444 !important; /* Roter Border */
}





/* Fehlermeldung - Absolute Position (verschiebt nichts) */
.com-users-login span.form-control-feedback,
.com-users-login .form-control-feedback,
span.form-control-feedback {
    color: #FF4444 !important;
    
}



/* Container für Input + Fehlermeldung */
.com-users-login .control-group,
.com-users-login .control-label {
    position: relative;
}

/* Fehlermeldung - schwebt ÜBER dem Layout */
.com-users-login span.form-control-feedback,
.com-users-login .form-control-feedback {
    color: #FF4444 !important;
    position: absolute !important;
    bottom: -35px !important; /* Direkt unter dem Input */
    left: 0 !important;
    width: 100% !important;
    z-index: 10 !important;
}

/* Input-Felder - MEHR ABSTAND NACH OBEN */
.com-users-login input[type="text"],
.com-users-login input[type="password"],
.com-users-login input[type="email"] {
    width: 100%;
    padding: 15px 18px;
    background: #0a0a0a;
    border: 1px solid rgba(49, 76, 104, 0.5);
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    margin-top: 35px !important; /* MEHR ABSTAND ZUM LABEL */
    margin-bottom: 15px !important;
    transition: all 0.3s ease;
}


/* ========================================= */
/* BENUTZERNAME-FELD SPEZIELL */
/* ========================================= */

.com-users-login #username,
.com-users-login input#username {
    margin-top: 15px !important;
}

/* ========================================= */
/* EINHEITLICHER ABSTAND - FÜR ALLE FELDER */
/* ========================================= */

/* Control-Group Container - einheitlicher Abstand */
.com-users-login .control-group {
    margin-bottom: 35px !important;
}

/* Labels - einheitlicher Abstand nach unten */
.com-users-login .control-label {
    margin-bottom: 15px !important;
}

/* ALLE Input-Felder - kein margin-top mehr */
.com-users-login input[type="text"],
.com-users-login input[type="password"],
.com-users-login input[type="email"] {
    width: 100%;
    padding: 15px 18px;
    background: #0a0a0a;
    border: 1px solid rgba(49, 76, 104, 0.5);
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    margin-top: 0 !important; /* KEIN margin-top */
    margin-bottom: 0 !important; /* KEIN margin-bottom */
    transition: all 0.3s ease;
}

/* Fehlermeldung - Position anpassen */
.com-users-login span.form-control-feedback,
.com-users-login .form-control-feedback {
    color: #FF4444 !important;
    position: absolute !important;
    bottom: -16px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10 !important;
}






/* Login-Formular BREITER */
.com-users-login {
    max-width: 70% !important;
    margin: 0 auto;
}

.com-users-login .login {
    max-width: 100% !important; /* Keine Begrenzung */
    width: 100% !important;
}

.com-users-login form {
    max-width: 100% !important;
    width: 100% !important;
}



/* ------------------------------------------------------------------- */
/* LOGIN-FORMULAR - TEMPLATE STYLE (BLAU) */
/* ------------------------------------------------------------------- */

/* Container - zentriert und Breite */
.com-users-login {
    width: 50%;
    margin: 0 auto;
}

/* Login-Form Box - Industrial Style */
.com-users-login .login {
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    border: 2px solid rgba(49, 76, 104, 0.8); /* BLAU - stärker */
    border-radius: 0; /* Eckig wie Template */
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    position: relative;
}

/* Überschrift - Gold mit blauem Unterstrich */
.com-users-login h1,
.com-users-login .page-header {
    color: #FFD214;
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 35px;
    padding-bottom: 15px;
    border-bottom: 3px solid rgba(49, 76, 104, 1.0); /* BLAU */
}

/* Labels - Blau */
.com-users-login label {
    color: rgba(49, 76, 104, 1.0); /* BLAU */
    font-size: 16px;
    font-weight: 600;
    display: block;
    margin-bottom: 12px;
}

/* Input-Felder - Blauer Border */
.com-users-login input[type="text"],
.com-users-login input[type="password"],
.com-users-login input[type="email"] {
    width: 100%;
    padding: 15px 18px;
    background: #0a0a0a;
    border: 2px solid rgba(49, 76, 104, 0.6); /* BLAU */
    border-radius: 0; /* Eckig */
    color: #fff;
    font-size: 16px;
    transition: all 0.3s ease;
}

.com-users-login input[type="text"]:focus,
.com-users-login input[type="password"]:focus,
.com-users-login input[type="email"]:focus {
    outline: none !important;
    border-color: rgba(49, 76, 104, 1.0) !important; /* BLAU - kräftiger */
    box-shadow: none !important;
}

/* Login-Button - BLAU */
.com-users-login button[type="submit"],
.com-users-login .btn-primary {
    width: 100%;
    padding: 16px;
    background: rgba(49, 76, 104, 1.0); /* BLAU */
    border: none;
    border-radius: 0; /* Eckig */
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.com-users-login button[type="submit"]:hover,
.com-users-login .btn-primary:hover {
    background: rgba(49, 76, 104, 0.8); /* BLAU - heller */
    box-shadow: 0 4px 15px rgba(49, 76, 104, 0.5); /* BLAUER Glow */
    transform: translateY(-2px);
}

/* Checkbox - Angemeldet bleiben */
.com-users-login .form-check label {
    color: #888;
    font-size: 13px;
    font-weight: 400;
}

/* Links - Blau */
.com-users-login a {
    color: rgba(49, 76, 104, 1.0); /* BLAU */
    text-decoration: none;
    font-size: 13px;
    transition: all 0.3s ease;
}

.com-users-login a:hover {
    color: #fff;
    text-shadow: 0 0 5px rgba(49, 76, 104, 0.8);
}

/* Fehlermeldungen - Rot */
.com-users-login span.form-control-feedback,
.com-users-login .form-control-feedback {
    color: #FF4444 !important;
}

.com-users-login label.invalid {
    color: #FF4444 !important;
}

.com-users-login input.invalid,
.com-users-login input[aria-invalid="true"] {
    border-color: #FF4444 !important;
}

/* ------------------------------------------------------------------- */
/* PASSWORT & BENUTZERNAME VERGESSEN - TEMPLATE STYLE */
/* ------------------------------------------------------------------- */

/* Passwort vergessen Seite */
.com-users-remind,
.com-users-reset {
    width: 50%;
    margin: 0 auto;
}

/* Form Box - Industrial Style */
.com-users-remind .remind,
.com-users-reset .reset {
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    border: 2px solid rgba(49, 76, 104, 0.8);
    border-radius: 0;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    position: relative;
}

/* Überschrift */
.com-users-remind h1,
.com-users-remind .page-header,
.com-users-reset h1,
.com-users-reset .page-header {
    color: #FFD214;
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 35px;
    padding-bottom: 15px;
    border-bottom: 3px solid rgba(49, 76, 104, 1.0);
}

/* Labels */
.com-users-remind label,
.com-users-reset label {
    color: rgba(49, 76, 104, 1.0);
    font-size: 16px;
    font-weight: 600;
    display: block;
    margin-bottom: 12px;
}

/* Input-Felder */
.com-users-remind input[type="text"],
.com-users-remind input[type="email"],
.com-users-reset input[type="text"],
.com-users-reset input[type="email"],
.com-users-reset input[type="password"] {
    width: 100%;
    padding: 15px 18px;
    background: #0a0a0a;
    border: 2px solid rgba(49, 76, 104, 0.6);
    border-radius: 0;
    color: #fff;
    font-size: 16px;
    transition: all 0.3s ease;
}

.com-users-remind input:focus,
.com-users-reset input:focus {
    outline: none !important;
    border-color: rgba(49, 76, 104, 1.0) !important;
    box-shadow: none !important;
}

/* Submit-Button */
.com-users-remind button[type="submit"],
.com-users-remind .btn-primary,
.com-users-reset button[type="submit"],
.com-users-reset .btn-primary {
    width: 100%;
    padding: 16px;
    background: rgba(49, 76, 104, 1.0);
    border: none;
    border-radius: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.com-users-remind button[type="submit"]:hover,
.com-users-remind .btn-primary:hover,
.com-users-reset button[type="submit"]:hover,
.com-users-reset .btn-primary:hover {
    background: rgba(49, 76, 104, 0.8);
    box-shadow: 0 4px 15px rgba(49, 76, 104, 0.5);
    transform: translateY(-2px);
}

/* Links */
.com-users-remind a,
.com-users-reset a {
    color: rgba(49, 76, 104, 1.0);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.3s ease;
}

.com-users-remind a:hover,
.com-users-reset a:hover {
    color: #fff;
    text-shadow: 0 0 5px rgba(49, 76, 104, 0.8);
}

/* Beschreibungstext */
.com-users-remind .well,
.com-users-reset .well,
.com-users-remind p,
.com-users-reset p {
    color: #888;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Erfolgsmeldungen */
.com-users-remind .alert-success,
.com-users-reset .alert-success {
    background: rgba(49, 76, 104, 0.3);
    border: 1px solid rgba(49, 76, 104, 1.0);
    color: #FFD214;
    padding: 12px;
    border-radius: 0;
    margin-bottom: 20px;
}

/* Fehlermeldungen */
.com-users-remind .alert-error,
.com-users-remind .alert-danger,
.com-users-reset .alert-error,
.com-users-reset .alert-danger {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid #FF4444;
    color: #FF4444;
    padding: 12px;
    border-radius: 0;
    margin-bottom: 20px;
}

/* Control Groups */
.com-users-remind .control-group,
.com-users-reset .control-group {
    margin-bottom: 25px;
    position: relative;
}

.com-users-remind .control-label,
.com-users-reset .control-label {
    margin-bottom: 12px;
}

/* Fehlermeldungen bei Feldern */
.com-users-remind .form-control-feedback,
.com-users-reset .form-control-feedback {
    color: #FF4444 !important;
    position: absolute !important;
    bottom: -25px !important;
    left: 0 !important;
}

/* ------------------------------------------------------------------- */
/* PASSWORT ANZEIGEN/VERSTECKEN BUTTON - LOGIN */
/* ------------------------------------------------------------------- */

/* Button selbst */
.com-users-login button.input-password-toggle {
    background: rgba(49, 76, 104, 0.3) !important;
    border: 2px solid rgba(49, 76, 104, 0.6) !important;
    border-radius: 4px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Icon ersetzen - AUGE-SYMBOL */
.com-users-login button.input-password-toggle .icon-eye {
    font-family: inherit !important;
    font-size: 0 !important;
}

.com-users-login button.input-password-toggle .icon-eye::before {
    content: "👁️" !important;
    font-size: 20px !important;
    color: rgba(49, 76, 104, 1.0) !important;
    display: block !important;
    line-height: 32px !important;
}

/* Durchgestrichenes Auge wenn sichtbar */
.com-users-login button.input-password-toggle .icon-eye-slash,
.com-users-login button.input-password-toggle .icon-eye-close {
    font-family: inherit !important;
    font-size: 0 !important;
}

.com-users-login button.input-password-toggle .icon-eye-slash::before,
.com-users-login button.input-password-toggle .icon-eye-close::before {
    content: "👁️" !important;
    text-decoration: line-through !important;
    font-size: 20px !important;
    color: rgba(49, 76, 104, 1.0) !important;
    display: block !important;
    line-height: 32px !important;
}

/* Hover */
.com-users-login button.input-password-toggle:hover {
    border-color: rgba(49, 76, 104, 1.0) !important;
    background: rgba(49, 76, 104, 0.5) !important;
}

.com-users-login button.input-password-toggle:hover .icon-eye::before,
.com-users-login button.input-password-toggle:hover .icon-eye-slash::before,
.com-users-login button.input-password-toggle:hover .icon-eye-close::before {
    color: #FFD214 !important;
}

/* Passwort-Feld - Platz für Button */
.com-users-login input[type="password"] {
    padding-right: 55px !important;
}

/* ------------------------------------------------------------------- */
/* REGISTRIERUNGS-FORMULAR - TEMPLATE STYLE */
/* ------------------------------------------------------------------- */

/* Registrierung Seite */
.com-users-registration {
    width: 50%;
    margin: 0 auto;
}

/* Form Box - Industrial Style */
.com-users-registration .registration {
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    border: 2px solid rgba(49, 76, 104, 0.8);
    border-radius: 0;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    position: relative;
}

/* Überschrift */
.com-users-registration h1,
.com-users-registration .page-header {
    color: #FFD214;
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 35px;
    padding-bottom: 15px;
    border-bottom: 3px solid rgba(49, 76, 104, 1.0);
}

/* Labels */
.com-users-registration label {
    color: rgba(49, 76, 104, 1.0);
    font-size: 16px;
    font-weight: 600;
    display: block;
    margin-bottom: 12px;
}

/* Input-Felder */
.com-users-registration input[type="text"],
.com-users-registration input[type="email"],
.com-users-registration input[type="password"] {
    width: 100%;
    padding: 15px 18px;
    background: #0a0a0a;
    border: 2px solid rgba(49, 76, 104, 0.6);
    border-radius: 0;
    color: #fff;
    font-size: 16px;
    transition: all 0.3s ease;
}

.com-users-registration input:focus {
    outline: none !important;
    border-color: rgba(49, 76, 104, 1.0) !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------------- */
/* PASSWORT TOGGLE - REGISTRIERUNG */
/* ------------------------------------------------------------------- */

/* Button */
.com-users-registration button.input-password-toggle {
    background: rgba(49, 76, 104, 0.3) !important;
    border: 2px solid rgba(49, 76, 104, 0.6) !important;
    border-radius: 4px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Icons */
.com-users-registration button.input-password-toggle span {
    font-family: inherit !important;
    font-size: 0 !important;
}

.com-users-registration button.input-password-toggle .icon-eye::before {
    content: "👁️" !important;
    font-size: 20px !important;
    color: rgba(49, 76, 104, 1.0) !important;
    display: block !important;
    line-height: 32px !important;
}

.com-users-registration button.input-password-toggle .icon-eye-slash::before {
    content: "👁️" !important;
    text-decoration: line-through !important;
    font-size: 20px !important;
    color: rgba(49, 76, 104, 1.0) !important;
    display: block !important;
    line-height: 32px !important;
}

/* Hover */
.com-users-registration button.input-password-toggle:hover {
    border-color: rgba(49, 76, 104, 1.0) !important;
    background: rgba(49, 76, 104, 0.5) !important;
}

.com-users-registration button.input-password-toggle:hover .icon-eye::before,
.com-users-registration button.input-password-toggle:hover .icon-eye-slash::before {
    color: #FFD214 !important;
}

/* Registrieren-Button */
.com-users-registration button[type="submit"],
.com-users-registration .btn-primary {
    width: 100%;
    padding: 16px;
    background: rgba(49, 76, 104, 1.0);
    border: none;
    border-radius: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.com-users-registration button[type="submit"]:hover,
.com-users-registration .btn-primary:hover {
    background: rgba(49, 76, 104, 0.8);
    box-shadow: 0 4px 15px rgba(49, 76, 104, 0.5);
    transform: translateY(-2px);
}

/* Pflichtfeld-Stern */
.com-users-registration .required {
    color: #FF4444;
}

/* Beschreibungstext */
.com-users-registration .well,
.com-users-registration p {
    color: #888;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Fehlermeldungen */
.com-users-registration .alert-error,
.com-users-registration .alert-danger {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid #FF4444;
    color: #FF4444;
    padding: 12px;
    border-radius: 0;
    margin-bottom: 20px;
}

/* Erfolgsmeldungen */
.com-users-registration .alert-success {
    background: rgba(49, 76, 104, 0.3);
    border: 1px solid rgba(49, 76, 104, 1.0);
    color: #FFD214;
    padding: 12px;
    border-radius: 0;
    margin-bottom: 20px;
}

/* Control Groups */
.com-users-registration .control-group {
    margin-bottom: 25px;
    position: relative;
}

.com-users-registration .control-label {
    margin-bottom: 12px;
}

/* Fehlermeldungen bei Feldern */
.com-users-registration .form-control-feedback {
    color: #FF4444 !important;
    position: absolute !important;
    bottom: -25px !important;
    left: 0 !important;
}

.com-users-registration input.invalid,
.com-users-registration input[aria-invalid="true"] {
    border-color: #FF4444 !important;
}

/* Links */
.com-users-registration a {
    color: rgba(49, 76, 104, 1.0);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.3s ease;
}

.com-users-registration a:hover {
    color: #fff;
    text-shadow: 0 0 5px rgba(49, 76, 104, 0.8);
}

/* Captcha */
.com-users-registration .g-recaptcha {
    margin: 20px 0;
}


/* ------------------------------------------------------------------- */
/* PROFIL-SEITE - TEMPLATE STYLE */
/* ------------------------------------------------------------------- */

/* Profil Container - breiter und linksbündig */
.com-users-profile {
    /*width: 70% !important;*/ /*test*/
    margin: 0 auto 0 50px !important;
}

/* Profil Box - Grid Layout für Button-Positionierung */
.com-users-profile .profile {
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    border: 2px solid rgba(49, 76, 104, 0.8);
    border-radius: 0;
    padding: 150px;/*50 auf 150 zum Test*/
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    display: grid;
    grid-template-rows: auto 1fr auto;
}

/* Hauptüberschrift "Profil" */
.com-users-profile h1,
.com-users-profile .page-header {
    color: #FFD214;
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 35px;
    padding-bottom: 15px;
    border-bottom: 3px solid rgba(49, 76, 104, 1.0);
}

/* Legend "Profil" */
.com-users-profile legend {
    color: #FFD214;
    font-size: 28px !important;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 30px;
}

/* Unter-Überschriften */
.com-users-profile h2,
.com-users-profile h3 {
    color: rgba(49, 76, 104, 1.0);
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 25px 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(49, 76, 104, 0.5);
}

/* Profil-Daten Grid */
.com-users-profile dl {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px 40px;
    margin: 25px 0;
}

/* Labels */
.com-users-profile dt {
    color: rgba(49, 76, 104, 1.0);
    font-weight: 700;
    font-size: 18px !important;
}

/* Werte */
.com-users-profile dd {
    color: #fff;
    font-size: 18px !important;
    margin: 0;
    font-weight: 500;
}

/* Fieldset - in die Mitte */
.com-users-profile__core {
    grid-row: 2;
}

/* Beschreibungstext */
.com-users-profile p {
    color: #888;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* ------------------------------------------------------------------- */
/* PROFIL BEARBEITEN BUTTON - UNTEN LINKS */
/* ------------------------------------------------------------------- */

/* Button Container - ans Ende */
.com-users-profile__edit {
    grid-row: 3;
    margin-top: 30px !important;
    margin-bottom: 0 !important;
    text-align: left !important;
    display: block !important;
}

/* Button Style */
.com-users-profile__edit .btn {
    display: inline-block;
    padding: 14px 30px;
    background: rgba(49, 76, 104, 1.0);
    border: none;
    border-radius: 0;
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.com-users-profile__edit .btn:hover {
    background: rgba(49, 76, 104, 0.8);
    box-shadow: 0 4px 15px rgba(49, 76, 104, 0.5);
    transform: translateY(-2px);
}


/* ------------------------------------------------------------------- */
/* ANDERE BUTTONS UND LINKS */
/* ------------------------------------------------------------------- */

/* Allgemeine Buttons */
.com-users-profile button,
.com-users-profile a.button {
    display: inline-block;
    padding: 12px 30px;
    background: rgba(49, 76, 104, 1.0);
    border: none;
    border-radius: 0;
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 10px 10px 10px 0;
}

.com-users-profile button:hover,
.com-users-profile a.button:hover {
    background: rgba(49, 76, 104, 0.8);
    box-shadow: 0 4px 15px rgba(49, 76, 104, 0.5);
    transform: translateY(-2px);
}

/* Links */
.com-users-profile a {
    color: rgba(49, 76, 104, 1.0);
    text-decoration: none;
    transition: all 0.3s ease;
}

.com-users-profile a:hover {
    color: #fff;
    text-shadow: 0 0 5px rgba(49, 76, 104, 0.8);
}

/* ------------------------------------------------------------------- */
/* TABELLEN */
/* ------------------------------------------------------------------- */

.com-users-profile table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.com-users-profile table th {
    background: rgba(49, 76, 104, 0.3);
    color: rgba(49, 76, 104, 1.0);
    font-weight: 600;
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid rgba(49, 76, 104, 0.6);
}

.com-users-profile table td {
    color: #fff;
    padding: 12px;
    border-bottom: 1px solid rgba(49, 76, 104, 0.3);
}

.com-users-profile table tr:hover {
    background: rgba(49, 76, 104, 0.1);
}

/* ------------------------------------------------------------------- */
/* MELDUNGEN */
/* ------------------------------------------------------------------- */

/* Erfolgsmeldungen */
.com-users-profile .alert-success {
    background: rgba(49, 76, 104, 0.3);
    border: 1px solid rgba(49, 76, 104, 1.0);
    color: #FFD214;
    padding: 12px;
    border-radius: 0;
    margin-bottom: 20px;
}

/* Warnungen */
.com-users-profile .alert-warning {
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid #FFC107;
    color: #FFC107;
    padding: 12px;
    border-radius: 0;
    margin-bottom: 20px;
}

/* Fehlermeldungen */
.com-users-profile .alert-error,
.com-users-profile .alert-danger {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid #FF4444;
    color: #FF4444;
    padding: 12px;
    border-radius: 0;
    margin-bottom: 20px;
}

/* ------------------------------------------------------------------- */
/* ADMIN-FELDER AUSBLENDEN */
/* ------------------------------------------------------------------- */

#users-profile-custom,
#users-profile-custom-actionlogs,
#users-profile-custom-joomlatoken {
    display: none !important;
}

/* Datum des letzten Besuchs ausblenden */
.com-users-profile__core dd:last-child,
.com-users-profile__core dt:last-child {
    display: none !important;
}








/* ========================================
   PROFIL BEARBEITEN SEITE STYLING
   ======================================== */

/* Container auf 70% Breite, linksbündig */
.com_users.layout-edit .com-users-profile__edit {
    width: 70%;
    margin-left: 15%;
    font-size: 18px;
    line-height: 1.6;
}

/* Hauptüberschrift und Legenden */
.com_users.layout-edit h1,
.com_users.layout-edit .page-header,
.com_users.layout-edit legend {
    color: #FFD214;
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Labels (Feldbezeichnungen) */
.com_users.layout-edit label {
    color: rgba(49, 76, 104, 1.0);
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
    display: block;
}

/* Pflichtfeld-Stern */
.com_users.layout-edit .required .star {
    color: #FFD214;
}

/* Text-Inputfelder und Selects */
.com_users.layout-edit input[type="text"],
.com_users.layout-edit input[type="email"],
.com_users.layout-edit input[type="password"],
.com_users.layout-edit textarea,
.com_users.layout-edit select,
.com_users.layout-edit .form-control,
.com_users.layout-edit .form-select {
    width: 100%;
    padding: 12px 15px;
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 2px solid rgba(49, 76, 104, 1.0);
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 16px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.com_users.layout-edit input[type="text"]:focus,
.com_users.layout-edit input[type="email"]:focus,
.com_users.layout-edit input[type="password"]:focus,
.com_users.layout-edit textarea:focus,
.com_users.layout-edit select:focus,
.com_users.layout-edit .form-control:focus,
.com_users.layout-edit .form-select:focus {
    outline: none;
    border-color: #FFD214;
    box-shadow: 0 0 10px rgba(255, 210, 20, 0.3);
}

/* Standard Select Options */
.com_users.layout-edit select option {
    background: #1a1a1a;
    color: #e0e0e0;
}

/* Passwort Input-Group */
.com_users.layout-edit .input-group {
    display: flex;
    margin-bottom: 20px;
}

.com_users.layout-edit .input-group input {
    margin-bottom: 0;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1;
}

.com_users.layout-edit .input-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
    background: rgba(49, 76, 104, 1.0);
    border: 2px solid rgba(49, 76, 104, 1.0);
    color: #FFD214;
    margin-bottom: 0;
    padding: 12px 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.com_users.layout-edit .input-group .btn:hover {
    background: rgba(49, 76, 104, 0.8);
    border-color: #FFD214;
}

/* Passwort-Augen Icons */
.com_users.layout-edit .input-group .btn span[class*="icon"] {
    font-size: 18px;
}

/* Fieldsets */
.com_users.layout-edit fieldset {
    border: 2px solid rgba(49, 76, 104, 0.3);
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 30px;
    background: rgba(49, 76, 104, 0.05);
}

/* Hilfetext */
.com_users.layout-edit .form-text,
.com_users.layout-edit small {
    color: rgba(49, 76, 104, 0.8);
    font-size: 14px;
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
}

/* Token "Kopieren" Button */
.com_users.layout-edit #token-copy {
    background: rgba(49, 76, 104, 1.0);
    border: 2px solid rgba(49, 76, 104, 1.0);
    color: #FFD214;
    padding: 12px 24px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 0 4px 4px 0;
}

.com_users.layout-edit #token-copy:hover {
    background: #FFD214;
    color: #0a0a0a;
    border-color: #FFD214;
}

/* Multi-Faktor-Authentifizierung */
.com_users.layout-edit .com-users-profile__multifactor {
    background: rgba(49, 76, 104, 0.05);
}

.com_users.layout-edit .com-users-profile__multifactor .card {
    background: #1a1a1a;
    border: 2px solid rgba(49, 76, 104, 0.3);
}

.com_users.layout-edit .com-users-profile__multifactor .card-header {
    background: rgba(49, 76, 104, 0.2);
    border-bottom: 2px solid rgba(49, 76, 104, 0.3);
}

.com_users.layout-edit .com-users-profile__multifactor .card-body {
    background: #0a0a0a;
}

.com_users.layout-edit .com-users-profile__multifactor .bg-light {
    background: rgba(49, 76, 104, 0.1) !important;
}

/* Multi-Faktor Buttons */
.com_users.layout-edit .com-users-profile__multifactor .btn-outline-primary {
    background: transparent;
    border: 2px solid rgba(49, 76, 104, 1.0);
    color: #FFD214;
    padding: 12px 24px;
    font-weight: bold;
    text-transform: uppercase;
}

.com_users.layout-edit .com-users-profile__multifactor .btn-outline-primary:hover {
    background: rgba(49, 76, 104, 1.0);
    border-color: #FFD214;
    color: #FFD214;
}

/* Speichern und Abbrechen Buttons */
.com_users.layout-edit .com-users-profile__edit-submit {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid rgba(49, 76, 104, 0.3);
}

.com_users.layout-edit .com-users-profile__edit-submit .btn.validate {
    background: linear-gradient(135deg, #FFD214 0%, #e0bb12 100%);
    border: none;
    color: #0a0a0a;
    padding: 15px 40px;
    font-weight: bold;
    text-transform: uppercase;
}

.com_users.layout-edit .com-users-profile__edit-submit .btn.validate:hover {
    background: linear-gradient(135deg, rgba(49, 76, 104, 1.0) 0%, rgba(39, 61, 84, 1.0) 100%);
    color: #FFD214;
    border: none;
    box-shadow: 0 0 15px rgba(255, 210, 20, 0.5);
}

.com_users.layout-edit .com-users-profile__edit-submit .btn-danger {
    background: transparent;
    border: none;
    color: rgba(220, 53, 69, 1.0);
    padding: 15px 40px;
    font-weight: bold;
    text-transform: uppercase;
}

.com_users.layout-edit .com-users-profile__edit-submit .btn-danger:hover {
    background: rgba(220, 53, 69, 1.0);
    color: #fff;
    border: none;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.5);
}

/* ========================================
   FANCY-SELECT DROPDOWNS (Choices.js)
   ======================================== */

/* Dropdown Liste */
.com_users.layout-edit .choices__list--dropdown {
    background: #1a1a1a !important;
    border: 2px solid rgba(49, 76, 104, 1.0) !important;
}

/* Dropdown Items */
.com_users.layout-edit .choices__item--choice {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
}

.com_users.layout-edit .choices__item--choice.is-highlighted {
    background: rgba(49, 76, 104, 1.0) !important;
    color: #FFD214 !important;
}

.com_users.layout-edit .choices__item--choice.is-selected {
    background: rgba(49, 76, 104, 0.5) !important;
    color: #FFD214 !important;
}

/* Group Headers */
.com_users.layout-edit .choices__group .choices__heading {
    background: rgba(49, 76, 104, 0.3) !important;
    color: #FFD214 !important;
    font-weight: bold !important;
}

/* Selected Items in Multi-Select */
.com_users.layout-edit .choices__item--selectable {
    background: rgba(49, 76, 104, 1.0) !important;
    color: #FFD214 !important;
    border: 1px solid #FFD214 !important;
}

/* Input Field in Dropdown */
.com_users.layout-edit .choices__input--cloned {
    background: #0a0a0a !important;
    color: #e0e0e0 !important;
}

/* Choices Inner Container */
.com_users.layout-edit .choices__inner {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%) !important;
    border: 2px solid rgba(49, 76, 104, 1.0) !important;
}



/* ========================================
   LETZTE ANPASSUNGEN
   ======================================== */

/* 1. Switcher - Rot für "Nein" (nicht aktiviert) */
.com_users.layout-edit .switcher .toggle-outside {
    background: rgba(128,0 ,0, 1.0) !important; /* Rot als Standard */
}

.com_users.layout-edit .switcher input[type="radio"]:last-of-type:checked ~ .toggle-outside {
    background: #28a745 !important; /* Grün wenn "Ja" ausgewählt */
}

/* 2. Administrator-Template-Stil Dropdown - weiß zu dunkel */
.com_users.layout-edit select#jform_params_admin_style {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
}

.com_users.layout-edit select#jform_params_admin_style option,
.com_users.layout-edit select#jform_params_admin_style optgroup {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
}

/* Falls es ein Choices-Dropdown ist */
.com_users.layout-edit #jform_params_admin_style + .choices .choices__list--dropdown,
.com_users.layout-edit .choices[data-type*="select-one"] .choices__list--dropdown {
    background: #1a1a1a !important;
}

.com_users.layout-edit #jform_params_admin_style + .choices .choices__item,
.com_users.layout-edit .choices[data-type*="select-one"] .choices__item {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
}


/* ========================================
   PASSWORT-AUGEN ICONS ERZWINGEN
   ======================================== */

/* Alle Icon-Spans in Passwort-Buttons */
.com_users.layout-edit .input-group .btn span[class*="icon"]::before {
    content: "👁️" !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-family: inherit !important;
}

/* Specifisch für icon-eye */
.com_users.layout-edit .input-password-toggle span.icon-eye::before,
.com_users.layout-edit .btn span.icon-eye::before {
    content: "👁️" !important;
}

/* Specifisch für icon-eye-slash (durchgestrichenes Auge) */
.com_users.layout-edit .input-password-toggle span.icon-eye-slash::before,
.com_users.layout-edit .btn span.icon-eye-slash::before {
    content: "👁️‍🗨️" !important;
}

/* Falls die Spans leer sind, sicherstellen dass Content angezeigt wird */
.com_users.layout-edit .input-group .btn span {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
}

/* Visually-hidden Text wirklich verstecken */
.com_users.layout-edit .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}