@import url(https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css);
@import url(login.css);
@import url(nexo.css);

body {
    background-color: rgba(22, 21, 21, 0.905);
    color: white;
}

/* Bootstrap-Default (.text-muted) ist zu dunkel fuer den dunklen Hintergrund dieser App */
.text-muted {
    color: #ced4da !important;
}

h1 {
    text-decoration: none;
    text-align: center;
}

.container {
    align-items: center;
    margin: 30px;
    padding: 20px;
    font-size: 25px;
}

.footer {
    display: block;
    left: 0;
    bottom: 0;
    color: white;
    text-align: center;
    justify-content: center;
}

.site-footer {
  margin-top: 2rem;
  padding: 1.5rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
}

.site-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.site-footer__top,
.site-footer__links,
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
}

.site-footer__disclaimer {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
}

.site-footer__links a {
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  opacity: 0.92;
}

.site-footer__links a:hover {
  opacity: 1;
  text-decoration: underline;
}

.site-footer__bottom {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.84rem;
}

.site-footer__hosting {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.site-footer__hosting i {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.92);
}

.site-footer__version {
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}


#time {
    text-align: right;
    justify-content: right;
    font-size: 20px;
}

.mob {
    color: red;
}

a{
    color: white;
    text-decoration: none;
}


/* Hier standen .not und .notfound für die Fehlerseite. Die Klasse "notfound"
   lag dort gleichzeitig auf dem Container und auf dem Link, der dadurch
   Zentrierung und Aussenabstand des Containers erbte. Die Seite benutzt jetzt
   eigene Klassen (siehe .fehlerseite weiter unten). */

.login {
    color: white;
    font-size: 15px;
}

a {
    color: white;
    text-decoration: none;
}


#status {
    margin: 10px;
    padding: 10px;
    display: block;
    width: 99%;
    border: 2px solid grey;
    border-radius: 20px;
    background-color: grey;
    color: white;
}
.status {
    margin: 10px;
    padding: 10px;
    display: flex;
    width: 99%;
    border: 2px solid grey;
    border-radius: 20px;
    background-color: grey;
    color: white;
}

.status span {
    margin-right: 10px;
  }


#running {
    text-align: right;
    justify-content: right;
    padding-left: 90%;
    margin: 0px;
}
#name {
    text-align: left;
    justify-content: left;
}

li {
    list-style-type: none;
}


.user-table th, .user-table td {
    vertical-align: middle;
  }
  .role-select, .status-checkbox {
    min-width: 50px;
  }

  .dashboard-card {
    background-color: rgba(40, 40, 40, 0.95);
    color: white;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 15px;
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

.dashboard-card .card-header {
    background-color: rgba(50, 50, 50, 0.95);
    border-bottom: 1px solid rgba(80, 80, 80, 0.5);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 15px;
}

.admin-header {
    background-color: rgba(180, 40, 40, 0.7) !important;
}
.supporter-header {
    background-color: rgba(8, 8, 234, 0.865) !important
}

.role-badge {
    background-color: #3498db;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: normal;
    border-radius: 20px;
}

.activity-item {
    background-color: rgba(40, 40, 40, 0.95);
    color: white;
    border-bottom: 1px solid rgba(80, 80, 80, 0.5);
    padding: 12px 15px;
}

.activity-item:last-child {
    border-bottom: none;
}

.profile-image {
    border: 3px solid #3498db;
    padding: 3px;
}

.icon-circle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.quick-access-item {
    background-color: rgba(40, 40, 40, 0.95);
    color: white;
    border-bottom: 1px solid rgba(80, 80, 80, 0.5);
    padding: 12px 15px;
    transition: background-color 0.2s;
}

.quick-access-item:hover {
    background-color: rgba(60, 60, 60, 0.95);
    color: white;
}

.quick-access-item:last-child {
    border-bottom: none;
}

/* Hero Section Styles */
.hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero-content {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 2rem 0;
}

/* Hier lag eine PNG von images.revox.dev - ein fremder Server, der damit bei
   jedem Aufruf der Startseite die IP-Adresse des Besuchers zu sehen bekam. Sie
   kam zuletzt gar nicht mehr an, die Startseite war schlicht schwarz.

   Jetzt eine eigene Zeichnung aus dem Projekt (public/images/hero.svg), in
   derselben Formensprache wie die Bildmarke. */
.hero-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/images/hero.svg') center / cover no-repeat, #0B0D14;
  /* background-attachment: fixed ist hier raus: auf iOS wird es ignoriert, und
     wo es wirkt, ruckelt das Scrollen, weil der Browser die Fläche bei jedem
     Bild neu zusammensetzen muss. */

  /* Kein blur() mehr. Der Weichzeichner war dazu da, ein Foto so weit
     zuzudecken, dass Text darauf lesbar bleibt - eine entworfene Fläche braucht
     das nicht, und 10,5 px hätten die Formen in Matsch verwandelt. */
  z-index: -2;
}

/* Von 0.6 auf 0.35 zurückgenommen: die Zeichnung ist bereits dunkel gehalten.
   Mit 60 % Schwarz darüber wäre von den Einschüben und den Lichtern nichts mehr
   zu sehen - genau der Zustand, der ersetzt werden sollte. Der Rest reicht, damit
   die Überschrift ihren Kontrast behält. */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: -1;
}

.hero-content .container {
  position: relative;
  z-index: 2;
  filter: none;
}

.hero-text {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.brand-name {
  background: linear-gradient(45deg, #0d6efd, #6610f2, #0d6efd, #fd7e14, #ffc107, pink, magenta, green, yellow, black, lightgreen, lightblue, grey, white, yellowgreen, gold);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 3s ease-in-out infinite;
  font-size: 3.5rem;
  font-weight: 700;
  word-break: break-word;
  overflow-wrap: break-word;
}

.typing-container {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #e9ecef;
}

.typing-text {
  font-weight: 500;
}

.cursor {
  display: inline-block;
  background-color: #0d6efd;
  width: 3px;
  height: 1.5rem;
  margin-left: 5px;
  animation: blink 1s infinite;
}

.hero-description {
  font-size: 1.25rem;
  color: #ced4da;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

.hero-actions .btn {
  padding: 12px 30px;
  font-size: 1.1rem;
  font-weight: 500;
  border-radius: 50px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero-actions .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Features Section */
/* Ankuendigungen auf der Startseite.
   Gleiche Bildsprache wie die Feature-Karten darunter, nur ruhiger: linksbuendig
   statt zentriert, weil es Fliesstext ist und kein Schlagwort. */
.start-ankuendigungen {
  padding: 1rem 0 0;
}

.start-ankuendigungen-titel {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.25rem;
}

.start-ankuendigung {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid #0d6efd;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  height: 100%;
  text-align: left;
  transition: background 0.3s ease;
}

.start-ankuendigung:hover {
  background: rgba(255, 255, 255, 0.08);
}

.start-ankuendigung h3 {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.start-ankuendigung p {
  color: #ced4da;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
  /* Lange Texte nicht die Karte sprengen lassen - die ganze Meldung steht
     weiterhin im Dashboard. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.start-ankuendigung time {
  color: #8b939c;
  font-size: 0.8rem;
}

.features-section {
  background-color: transparent;
  padding: 2rem 0;
  justify-content: center;
  text-align: center;
  border-top: 1px solid transparent;
}

.feature-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 2rem 1.5rem;
  text-align: center;
  justify-content: center;
  transition: all 0.3s ease;
  height: 100%;
}

.feature-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.feature-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, #0d6efd, #6610f2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
  color: white;
}

.feature-card h3 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.feature-card p {
  color: #ced4da;
  font-size: 1rem;
  line-height: 1.6;
}

/* Hosted Page */
.hosted-page .hero-content {
  min-height: 85vh;
}

.hosted-hero {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.hosted-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #fff;
}

.hosted-grid .hosted-card {
  height: 100%;
}

.hosted-provider-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 1.5rem;
}

.hosted-provider-title {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
}

.hosted-provider-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.hosted-provider-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: rgba(13, 110, 253, 0.2);
  border: 1px solid rgba(13, 110, 253, 0.4);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
}



/* Animations */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-text {
  animation: fadeInUp 1s ease-out;
}

/* Dashboard Hero Section */
.dashboard-hero-section {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, 
    rgba(13, 110, 253, 0.05) 0%, 
    rgba(52, 58, 64, 0.1) 50%, 
    rgba(33, 37, 41, 0.15) 100%);
}

.dashboard-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
}

.dashboard-content {
  position: relative;
  z-index: 2;
}

/* Dashboard Header Card */
.dashboard-header-card {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  animation: fadeInUp 0.8s ease-out;
  margin: 0 15px; /* Seitenabstand hinzugefügt */
}

.dashboard-title {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(45deg, #0d6efd, #6610f2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 10px;
  padding: 5px;
}

.dashboard-subtitle {
  color: #ced4da;
  font-size: 1.1rem;
  text-align: center;
  justify-content: center;
  margin: auto 5px;
  padding: 5px;
}

.role-badge-modern {
  background: linear-gradient(45deg, #0d6efd, #6610f2);
  color: white;
  padding: 12px 20px;
  margin: auto 15px;
  border-radius: 25px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.3);
}

/* Dashboard Alert */
.dashboard-alert {
  background: rgba(13, 110, 253, 0.15);
  border: 1px solid rgba(13, 110, 253, 0.3);
  backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 15px;
  padding: 1rem 1.5rem;
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.1);
}

/* Stats Cards */
.stats-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  transition: all 0.3s ease;
  height: 100%;
  overflow: hidden;
  position: relative;
  margin: 0 15px; /* Seitenabstand hinzugefügt */
}

.ticket-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  transition: all 0.3s ease;
  height: 50%;
  overflow: hidden;
  position: relative;
  margin: 0 15px; /* Seitenabstand hinzugefügt */
}

.stats-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(45deg, #0d6efd, #6610f2);
}

.stats-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.ticket-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(45deg, #0d6efd, #6610f2);
}

.ticket-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.08);
}


.stats-card .card-body {
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ticket-card .card-body {
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stats-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(45deg, #0d6efd, #6610f2);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.3);
}

.stats-content {
  flex: 1;
}

.stats-number {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.stats-label {
  color: #ced4da;
  margin: 0;
  font-size: 0.9rem;
}

/* Activity Card */
.activity-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.activity-card .card-header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
}

.activity-item-modern {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.activity-icon {
  width: 40px;
  height: 40px;
  background: rgba(40, 167, 69, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #28a745;
}

.activity-content {
  flex: 1;
  display: flex;
  justify-content: between;
  align-items: center;
}

.activity-title {
  color: #fff;
  font-weight: 500;
}

.activity-time {
  color: #ced4da;
  margin-left: auto;
}

/* Quick Access Card */
.quick-access-card, .news-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  margin: 0 15px; /* Seitenabstand hinzugefügt */
}

.dashboard-news-card {
  margin: 0;
}

.quick-access-card .card-header,
.news-card .card-header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
}

.quick-action-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 0.5rem;
  border-radius: 15px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.quick-action-item:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(5px);
  color: inherit;
}

.quick-action-icon {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
}

.quick-action-content h6 {
  color: #fff;
  margin: 0;
  font-weight: 600;
}

.quick-action-content small {
  color: #ced4da;
}

/* News Items */
.news-item-modern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  margin-bottom: 0.5rem;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.news-item-modern:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(5px);
}

.news-content {
  flex: 1;
}

.news-title {
  color: #fff;
  margin: 0 0 0.25rem 0;
  font-weight: 600;
  font-size: 0.9rem;
}

.news-date {
  color: #ced4da;
}

.no-news {
  text-align: center;
  padding: 2rem;
  color: #6c757d;
}

.no-news i {
  font-size: 2rem;
  display: block;
}

/* Modern Modal */
.modern-modal {
  background: rgba(0, 0, 0, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: white;
  position: relative;
  z-index: 1060 !important;
}

.modern-modal .modal-header,
.modern-modal .modal-footer {
  border-color: rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1061;
}

.modern-modal .modal-body {
  position: relative;
  z-index: 1061;
}

/* Modal Backdrop Fix */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 1040 !important;
}

.modal-backdrop.show {
  opacity: 0.7 !important;
}

/* Modal Dialog Fix */
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  z-index: 1055 !important;
}

.modal.show .modal-dialog {
  transform: none;
  z-index: 1055 !important;
}

/* Z-Index für Modals - drastisch erhöht */
.modal {
  z-index: 1050 !important;
  position: fixed !important;
}

/* Modal Content Fixes */
.modal-content {
  position: relative !important;
  z-index: 1060 !important;
  pointer-events: auto !important;
  display: block !important;
}

/* Modal spezifische Fixes für Interaktivität */
.modal-dialog {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1055 !important;
}

.modal.show {
  pointer-events: auto !important;
  display: block !important;
}

/* Form Controls in Modals */
.modal .form-control,
.modal .form-select,
.modal .form-check-input,
.modal .btn {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1062 !important;
}

/* Input Groups in Modals */
.modal .input-group,
.modal .input-group-text {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1062 !important;
}

/* Settings Section in Modals */
.modal .settings-section {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1061 !important;
}

/* Modal Header und Footer Elemente */
.modal .modal-header *,
.modal .modal-footer *,
.modal .modal-body * {
  pointer-events: auto !important;
}

/* Settings Navigation Card */
.settings-nav-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.settings-nav-card .card-header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
}

/* Settings Header Card */
.settings-header-card {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  animation: fadeInUp 0.8s ease-out;
}

/* Settings Content Card */
.settings-content-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  margin: 0 15px; /* Seitenabstand hinzugefügt */
}

.settings-content-card .card-header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
}

/* Navigation Links Modern */
.nav-link-modern {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-radius: 15px;
  text-decoration: none;
  color: #ced4da;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border: none;
  width: 100%;
  text-align: left;
}

.nav-link-modern:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transform: translateX(5px);
}

.nav-link-modern.active {
  background: linear-gradient(45deg, #0d6efd, #6610f2);
  color: white;
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.3);
}

/* Settings Sections */
.settings-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  padding: 1.5rem;
}

.settings-section-title {
  color: #fff;
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.hoster-provider-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1rem;
}

.hoster-key-wrap {
  transition: all 0.2s ease;
}

.hoster-provider-card .form-check-label {
  color: #e2e6ea;
  font-weight: 600;
}

/* Form Styling */
.form-control, .form-select {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 10px;
  padding: 0.75rem 1rem;
}

.form-control:focus, .form-select:focus {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  color: #fff;
}

.form-control:disabled {
  background-color: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.05);
  color: #6c757d;
}

.form-label {
  color: #ced4da;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.form-text {
  color: #6c757d;
}

/* Password Requirements */
#passwordRequirements {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 1rem;
}

.requirement {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  color: #ced4da;
  font-size: 0.9rem;
}

.requirement.valid i {
  color: #28a745;
}

.requirement.valid {
  color: #28a745;
}

/* Button Styling */
.btn-primary {
  background: linear-gradient(45deg, #0d6efd, #6610f2);
  border: none;
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.4);
}

/* Kompakte Button-Klassen */
.btn-compact {
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: auto !important;
  white-space: nowrap;
}

.btn-compact i {
  margin: auto 5px;
}

.btn-group-compact {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.btn-group-compact .btn {
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: auto !important;
  white-space: nowrap;
}

/* Für Buttons die nur Icon + Text haben */
.btn-icon-text {
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

/* Für reine Icon-Buttons */
.btn-icon-only {
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  min-width: auto !important;
}

/* Server Management Styles */
.server-detail-item {
  margin-bottom: 1rem;
}

.server-controls {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.server-action-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  text-align: left;
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
}

.server-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(3px);
  color: #fff;
}

.server-action-btn.start {
  border-color: rgba(40, 167, 69, 0.3);
  background: rgba(40, 167, 69, 0.1);
}

.server-action-btn.start:hover {
  background: rgba(40, 167, 69, 0.2);
  border-color: rgba(40, 167, 69, 0.5);
}

.server-action-btn.stop {
  border-color: rgba(220, 53, 69, 0.3);
  background: rgba(220, 53, 69, 0.1);
}

.server-action-btn.stop:hover {
  background: rgba(220, 53, 69, 0.2);
  border-color: rgba(220, 53, 69, 0.5);
}

.server-action-btn.restart {
  border-color: rgba(255, 193, 7, 0.3);
  background: rgba(255, 193, 7, 0.1);
}

.server-action-btn.restart:hover {
  background: rgba(255, 193, 7, 0.2);
  border-color: rgba(255, 193, 7, 0.5);
}

.server-action-btn.vnc {
  border-color: rgba(13, 110, 253, 0.3);
  background: rgba(13, 110, 253, 0.1);
}

.server-action-btn.vnc:hover {
  background: rgba(13, 110, 253, 0.2);
  border-color: rgba(13, 110, 253, 0.5);
}

/* Resource Monitor Styles */
.resource-monitor-item {
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.resource-monitor-item:last-child {
  border-bottom: none;
}

.resource-label {
  color: #fff;
  font-weight: 500;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
}

.resource-value {
  color: #ced4da;
  font-size: 0.8rem;
  font-weight: 500;
}

.resource-progress {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  height: 8px;
  overflow: hidden;
  position: relative;
}

.resource-progress .progress-bar {
  height: 100%;
  border-radius: 10px;
  transition: width 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-text {
  font-size: 0.7rem;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  position: absolute;
  width: 100%;
  text-align: center;
}

.message-item {
    border-left: 4px solid transparent;
  }
  
  .user-message {
    border-left-color: #0d6efd;
  }
  
  .staff-message {
    border-left-color: #fd7e14;
  }
  
  .message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
  }
  
  .user-avatar {
    background-color: #0d6efd;
    color: white;
  }
  
  .staff-avatar {
    background-color: #fd7e14;
    color: white;
  }
  
  .message-content {
    background-color: #2a2a2a;
    white-space: pre-line;
  }


  .hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
  }
  
  .border-dashed {
    border-style: dashed !important;
  }

  .text-light-50 {
    color: rgba(255, 255, 255, 0.7);
  }

  @media (max-width: 768px) {
    .sticky-top {
      position: static;
    }
  }


  .form-control:focus, .form-select:focus {
    background-color: #2a2a2a;
    color: #fff;
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  }
  
  .form-control::placeholder {
    color: #6c757d;
    opacity: 1;
  }
  
  .card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  }
  
  .admin-settings .form-check-input {
    cursor: pointer;
  }
  
  .admin-settings .card-header {
    font-weight: 500;
  }
  
  .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
  }


  .form-control:focus, .form-select:focus {
    background-color: #2a2a2a;
    color: #fff;
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  }
  
  .form-control::placeholder {
    color: #6c757d;
    opacity: 1;
  }
  
  .card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  }
  
  .accordion-button::after {
    filter: invert(1);
  }
  
  .accordion-button:not(.collapsed)::after {
    filter: invert(1);
  }
  
  .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.125);
  }
  
  .accordion-button:not(.collapsed) {
    background-color: #2a2a2a;
    color: white;
  }
  
  .changelog-list li {
    margin-bottom: 0.5rem;
  }
  
  .content-list .input-group:only-child .remove-content {
    cursor: not-allowed;
  }

  
  .form-control, .form-select {
    background-color: #2a2a2a;
    border-color: #3a3a3a;
    color: #e4e4e4;
  }
  
  .form-control:focus, .form-select:focus {
    background-color: #2a2a2a;
    color: #e4e4e4;
    border-color: #3498db;
    box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
  }
  
  .form-control::placeholder {
    color: #888;
  }
  
  .form-check-input {
    background-color: #2a2a2a;
    border-color: #3a3a3a;
  }
  
  .form-check-input:checked {
    background-color: #3498db;
    border-color: #3498db;
  }
  
  .announcement-item {
    background-color: rgba(255, 255, 255, 0.05);
    border-left: 4px solid var(--bs-primary);
  }
  
  /* Auto-resize textarea */
  textarea.auto-resize {
    min-height: 58px;
    overflow-y: hidden;
  }
  
  .char-count {
    font-size: 0.8rem;
    text-align: right;
    color: #888;
  }
  
  .char-count.warning {
    color: #ffc107;
  }
  
  .char-count.error {
    color: #dc3545;
  }

  .avatar-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .avatar-text {
    font-size: 42px;
    color: white;
    font-weight: bold;
  }
  

  .achievement-badge {
    background-color: #2a2a2a;
    border-radius: 8px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #444;
  }
  
  .achievement-badge i {
    font-size: 1.5rem;
    color: gold;
  }


/* =========================================================
   FEHLERSEITE (views/404.ejs)

   Eigene Klassen statt der frueheren .notfound, die auf Container und Link
   zugleich lag. Das Bild bekommt bewusst KEINEN Rahmen mehr - der schwarze
   Rand der alten Regel stand quer im dunklen Layout.
   ========================================================= */
.fehlerseite {
  max-width: 520px;
  margin: 0 auto;
  padding: 4rem 1rem 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.fehlerseite-bild {
  width: 100%;
  max-width: 300px;
  height: auto;
}

.fehlerseite-titel {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 700;
  color: #fff;
}

.fehlerseite-text {
  margin: 0;
  max-width: 42ch;
  color: #9AA5B6;
  line-height: 1.6;
}





.wiki-title {
    font-weight: 600;
    font-size: 2rem;
    border-bottom: 1px solid #444;
    padding-bottom: 0.5rem;
  }
  
  .wiki-content {
    color: #e9ecef;
    font-size: 1.1rem;
    line-height: 1.8;
  }
  
  .wiki-content h2 {
    font-size: 1.85rem;
    color: #fff;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
    border-bottom: 2px solid #343a40;
    padding-bottom: 0.5rem;
  }
  
  .wiki-content h3 {
    font-size: 1.5rem;
    color: #fff;
    margin-top: 1.75rem;
    margin-bottom: 1rem;
  }
  
  .wiki-content p {
    margin-bottom: 1.5rem;
  }
  
  .wiki-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 1.5rem 0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
  }
  
  .wiki-content blockquote {
    background: #343a40;
    border-left: 4px solid #0d6efd;
    margin: 1.5rem 0;
    padding: 1rem;
    border-radius: 0 8px 8px 0;
  }
  
  .wiki-content code {
    background: #343a40;
    color: #0d6efd;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
  }
  
  .wiki-content pre {
    background: #343a40;
    padding: 1.25rem;
    border-radius: 8px;
    margin: 1.5rem 0;
  }
  
  .avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .avatar-text {
    font-size: 16px;
    color: white;
    font-weight: bold;
  }
  
  .author-link {
    color: #0d6efd;
    text-decoration: none;
  }
  
  .author-link:hover {
    text-decoration: underline;
  }
  
  #shareButton {
    transition: all 0.2s ease;
  }

  #shareButton:hover {
    transform: scale(1.1);
  }

  #shareButton:active {
    transform: scale(0.95);
  }

  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }



.hoster {
  text-align: center;
  margin-top: 3rem;
  padding: 2rem 0;
  width: 100%;
}

.hoster h3 {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  text-align: center;
  justify-content: center;
}

.slideshow-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  padding: 2rem 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.slideshow-track {
  display: flex;
  animation: scroll 50s linear infinite;
  width: calc(200% + 4rem);
}

.slide {
  flex: 0 0 auto;
  margin: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide img {
  height: 60px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: brightness(0.8) contrast(1.2);
  transition: all 0.3s ease;
}

.slide img:hover {
  filter: brightness(1) contrast(1);
  transform: scale(1.1);
}



@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Pause animation on hover */

/* Neue Styles für die Hero-Alert-Nachricht */
.hero-alert {
  background: rgba(13, 110, 253, 0.15);
  border: 1px solid rgba(13, 110, 253, 0.3);
  backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 15px;
  padding: 1rem 1.5rem;
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.1);
  animation: slideInDown 0.5s ease-out;
}

.hero-alert .btn-close-white {
  filter: invert(1);
  opacity: 0.8;
}

.hero-alert .btn-close-white:hover {
  opacity: 1;
}

.modern-info-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.modern-info-card h4,
.modern-info-card h5 {
  color: #fff;
}

.modern-info-card p,
.modern-info-card li {
  color: #ced4da;
}

.profile-card-modern {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.profile-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.profile-card-header h5 {
  color: #fff;
}

.profile-card-body {
  padding: 1.25rem;
}

.profile-form .form-label {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

.profile-form .form-control {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
}

.profile-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.profile-form .form-control:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(13, 110, 253, 0.55);
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.18);
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mail Log Card */
.mail-log-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  margin: 0 15px; /* Seitenabstand hinzugefügt */
}

.mail-log-card .card-header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
}

/* Modern Table */
.modern-table {
  background: transparent;
  color: white;
  border-radius: 15px;
  overflow: hidden;
  margin: auto 0px; 
}

.modern-table thead {
  background: rgba(255, 255, 255, 0.05);
}

.modern-table thead th {
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important;
  font-weight: 600;
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
  white-space: nowrap;
}

.modern-table tbody tr {
  border: none;
  transition: all 0.3s ease;
}

.modern-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(5px);
}

.modern-table tbody td {
  border: none;
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
  font-size: 0.875rem;
  white-space: nowrap;
  color: white !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.modern-table tbody td:nth-child(2) {
  max-width: 200px;
  white-space: normal;
  word-wrap: break-word;
}

.modern-table tbody td a {
  color: white !important;
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 500;

}

.modern-table tbody td a:hover {
  color: transparent !important;
}

.modern-table tbody td .text-muted {
  color: #6c757d !important;
}

/* Support Page Enhancements */
.bg-gradient {
  background: linear-gradient(45deg, #0d6efd, #6610f2) !important;
}

.fw-500 {
  font-weight: 500;
}

.mail-content-header h6 {
  color: #fff;
  font-weight: 600;
}

.mail-content-body {
  padding: 2rem 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  color: #e9ecef;
  font-size: 1rem;
  line-height: 1.6;
  border-radius: 0 0 20px 20px;
  min-height: 200px;
}


.mail-content-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: -1;
}


.mail-wrapper {
  all: initial;
  display: block;
  font-family: sans-serif;
  background: #fff;
  color: #333;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 5px;
  overflow: hidden;
}

.mail-wrapper * {
  all: unset;
  display: revert;
  box-sizing: border-box;
  font-family: inherit;
}

.mail-wrapper .container {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 20px !important;
  background-color: #fff !important;
  color: #333 !important;
  font-family: sans-serif !important;
}

.mail-wrapper h1,
.mail-wrapper h2,
.mail-wrapper h3,
.mail-wrapper h4,
.mail-wrapper h5,
.mail-wrapper h6 {
  color: #333 !important;
  margin: 1rem 0 !important;
  font-weight: bold !important;
}

.mail-wrapper p {
  margin: 1rem 0 !important;
  color: #333 !important;
  line-height: 1.6 !important;
}

.mail-wrapper a {
  color: #007bff !important;
  text-decoration: none !important;
}

.mail-wrapper a:hover {
  text-decoration: underline !important;
}

.mail-wrapper .header {
  text-align: center !important;
  padding-bottom: 20px !important;
}

.mail-wrapper .content {
  padding: 20px 0 !important;
}

.mail-wrapper .footer {
  text-align: center !important;
  font-size: 12px !important;
  color: #777 !important;
  padding-top: 20px !important;
}

.mail-wrapper img {
  max-width: 100% !important;
  height: auto !important;
}

/* Mail Actions */
.mail-actions {
  display: flex;
  gap: 0.5rem;
}

/* Button Styling */
.btn-outline-primary {
  color: #0d6efd;
  border-color: #0d6efd;
  background: transparent;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  background: #0d6efd;
  border-color: #0d6efd;
  color: white;
  transform: translateY(-2px);
}

.btn-outline-secondary {
  color: #ced4da;
  border-color: rgba(255, 255, 255, 0.2);
  background: transparent;
  transition: all 0.3s ease;
}

.btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  transform: translateY(-2px);
}

/* Support Page Enhancements */
.bg-gradient {
  background: linear-gradient(45deg, #0d6efd, #6610f2) !important;
}

.fw-500 {
  font-weight: 500;
}
  
/* Hier endete einmal eine Medienabfrage zu frueh.
   Die vier Regeln darin - an der Einrueckung noch zu erkennen - galten dadurch
   FUER DIE GANZE ANWENDUNG statt nur fuer schmale Bildschirme. Drei davon
   (.mail-field, .mail-field-label, .mail-actions) sind ersatzlos entfernt: die
   Klassen kommen in keiner Vorlage und keinem Skript vor, .mail-actions hat
   ausserdem 50 Zeilen weiter oben seine eigentliche Definition, die von der
   ausgelaufenen ueberschrieben wurde.

   Geblieben ist ".btn { width: 100% }", jetzt wieder auf schmale Bildschirme
   begrenzt. Global hat die Regel jeden Knopf der Anwendung auf volle Breite
   gezogen; sichtbar wurde das nur dort, wo kein Flex-Container ihn wieder
   gestaucht hat - weshalb an mehreren Stellen Gegenregeln noetig waren
   (proxmox-detail.css nennt sie im Kommentar ausdruecklich).

   Fuer Mobilgeraete bleibt alles wie bisher: responsive.css hat fuer die
   betroffenen Faelle ohnehin eigene Regeln in Medienabfragen. */
@media (max-width: 768px) {
  .btn {
    width: 100%;
  }
}

  /* Responsive Design Anpassungen für Container */


/* KVM Card Specific Styles */
.kvm-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  transition: all 0.3s ease;
  height: 100%;
  overflow: hidden;
  position: relative;
  margin: 0 15px;
}

.kvm-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(45deg, #0d6efd, #6610f2);
}

.kvm-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.kvm-card .card-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.kvm-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.kvm-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(45deg, #0d6efd, #6610f2);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.3);
  flex-shrink: 0;
}

.kvm-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.kvm-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}

/* Der Titel auf der 24fire-Uebersicht laesst sich anklicken, um den Server
   umzubenennen (role="button" im Markup). Ohne diese Regel sah man das nicht -
   der Zeiger blieb der Textcursor und nichts deutete auf den Klick hin. */
.fire-umbenennen {
  cursor: pointer;
}

.fire-umbenennen:hover,
.fire-umbenennen:focus-visible {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
}

.kvm-id {
  color: #ced4da;
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
}

.kvm-status-info {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.kvm-status-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: white;
  background: rgba(108, 117, 125, 0.3);
  flex-shrink: 0;
}

.kvm-status-content h6 {
  color: #fff;
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
}

.kvm-status-content small {
  color: #ced4da;
  font-size: 0.8rem;
}

.kvm-actions {
  margin-top: auto;
}

.kvm-btn {
  background: linear-gradient(45deg, #0d6efd, #6610f2);
  border: none;
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
  color: white;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.kvm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.4);
  color: white;
  text-decoration: none;
}

.kvm-btn i {
  margin-right: 0.5rem;
}

/* KVM Empty State */
.kvm-empty-state {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  margin: 0 15px;
}

.kvm-empty-content {
  text-align: center;
  padding: 3rem 2rem;
  color: #6c757d;
}

.kvm-empty-content i {
  font-size: 3rem;
  display: block;
  margin-bottom: 1.5rem;
  color: #495057;
}

/* Die Regel darueber gilt fuer jedes Symbol im leeren Zustand - auch fuer das
   in einem Knopf. Der wurde dadurch 126px hoch. Gemeint ist nur die grosse
   Abbildung, nicht ein Symbol in einer Schaltflaeche. */
.kvm-empty-content .btn i,
.kvm-empty-content a.btn i {
  font-size: inherit;
  display: inline;
  margin-bottom: 0;
  color: inherit;
}

.kvm-empty-content h5 {
  color: #fff;
  font-weight: 600;
  margin-bottom: 1rem;
}

.kvm-empty-content p {
  color: #ced4da;
  margin-bottom: 2rem;
  line-height: 1.6;
}



 .status-indicator {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    font-weight: 500;
  }
  
  .status-indicator.online {
    background-color: rgba(25, 135, 84, 0.15);
    color: #20c997;
  }
  
  .status-indicator.offline {
    background-color: rgba(220, 53, 69, 0.15);
    color: #ff6b6b;
  }
  
  .status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    padding: 5px
  }
  
  .online .status-dot {
    background-color: #20c997;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.25);
    animation: pulse-green 1.5s infinite;
  }
  
  .offline .status-dot {
    background-color: #ff6b6b;
  }

  /* Login Page Styles */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(135deg, 
    rgba(13, 110, 253, 0.05) 0%, 
    rgba(52, 58, 64, 0.1) 50%, 
    rgba(33, 37, 41, 0.15) 100%);
}

.login-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
  z-index: -1;
}

.login-card {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  padding: 3rem;
  width: 100%;
  max-width: 450px;
  animation: fadeInUp 0.8s ease-out;
  position: relative;
  z-index: 2;
}

.login-title {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(45deg, #0d6efd, #6610f2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 2rem 0;
  text-align: center;
}

.login-form {
  margin-bottom: 2rem;
}

.login-form .form-group {
  margin-bottom: 1.5rem;
}

.login-form .form-group label {
  color: #ced4da;
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: block;
}

.login-form .form-control {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  color: #fff;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.login-form .form-control:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  color: #fff;
}

.login-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.login-form .btn-block {
  width: 100%;
  padding: 0.75rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1rem;
}

.login-options {
  text-align: center;
  padding: 1rem 0;
}

.login-options p {
  margin: 0.5rem 0;
  color: #ced4da;
}

.login-options a {
  color: #0d6efd;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.login-options a:hover {
  color: #6610f2;
  text-decoration: underline;
}

.discord-login {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.discord-login .btn {
  background: #5865F2;
  border: none;
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
}

.discord-login .btn:hover {
  background: #4752C4;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(88, 101, 242, 0.4);
}

.login-alert {
  background: rgba(13, 110, 253, 0.15);
  border: 1px solid rgba(13, 110, 253, 0.3);
  backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 15px;
  padding: 1rem 1.5rem;
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.1);
  margin-bottom: 1.5rem;
}




.mail-sent {
  background: rgba(40, 167, 69, 0.15);
  border: 1px solid rgba(40, 167, 69, 0.3);
  backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 15px;
  padding: 1rem 1.5rem;
  box-shadow: 0 8px 20px rgba(40, 167, 69, 0.1);
  margin-bottom: 1.5rem;
}

.mail-failed {
  background: rgba(220, 53, 69, 0.15);
  border: 1px solid rgba(220, 53, 69, 0.3);
  backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 15px;
  padding: 1rem 1.5rem;
  box-shadow: 0 8px 20px rgba(220, 53, 69, 0.1);
  margin-bottom: 1.5rem;
}

/* Changelog Page Styles */
.changelog-hero {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, 
    rgba(13, 110, 253, 0.05) 0%, 
    rgba(52, 58, 64, 0.1) 50%, 
    rgba(33, 37, 41, 0.15) 100%);
}

.changelog-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
  z-index: -1;
}

.changelog-header-card {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  animation: fadeInUp 0.8s ease-out;
  margin: 0 15px;
}

.changelog-content-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  margin: 0 15px;
  overflow: hidden;
}

.changelog-content-card .card-header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
}

.changelog-accordion {
  background: transparent;
}

.changelog-accordion-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.changelog-accordion-button {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: none;
  padding: 1.5rem;
  font-weight: 500;
  width: 100%;
  max-width: 100%;
  transition: all 0.3s ease;
}

.changelog-accordion-button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.changelog-accordion-button:not(.collapsed) {
  background: rgba(13, 110, 253, 0.1);
  color: #fff;
  box-shadow: none;
}

.changelog-accordion-button::after {
  filter: invert(1);
}

.changelog-accordion-body {
  background: rgba(255, 255, 255, 0.02);
  padding: 1.5rem;
}

.version-badge {
  background: linear-gradient(45deg, #0d6efd, #6610f2);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
}

.version-badge.beta {
  background: linear-gradient(45deg, #ffc107, #fd7e14);
  color: #000;
  box-shadow: 0 4px 10px rgba(255, 193, 7, 0.3);
}

.changelog-list {
  list-style: none;
  padding: 0;
  margin: 0;
}



.changelog-list li {
  position: relative;
  padding: 0.5rem 0 0.5rem 2rem;
  color: #ced4da;
  line-height: 1.6;
}

.changelog-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #0d6efd;
  font-weight: bold;
  font-size: 1.2rem;
}

.changelog-empty-state {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  margin: 0 15px;
}

.changelog-empty-content {
  text-align: center;
  padding: 3rem 2rem;
  color: #6c757d;
}

.changelog-empty-content i {
  font-size: 3rem;
  display: block;
  margin-bottom: 1.5rem;
  color: #495057;
}

.changelog-empty-content h3 {
  color: #fff;
  font-weight: 600;
  margin-bottom: 1rem;
}

.changelog-empty-content p {
  color: #ced4da;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.content-item-group {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.content-item-group:hover {
  background: rgba(255, 255, 255, 0.05);
}

.content-item-group .input-group-text {
  background: transparent;
  border: none;
  color: #0d6efd;
  font-weight: bold;
}

.content-item-group .form-control {
  background: transparent;
  border: none;
  color: #fff;
}

.content-item-group .form-control:focus {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #fff;
}

/* Zeilen-Editor fuer Changelog-Aenderungen.

   Weiter unten macht ".btn { width: 100% }" jeden Knopf auf schmalen
   Bildschirmen voll breit. In einer input-group sprengt der Entfernen-Knopf
   damit die Zeile und rutscht unter das Eingabefeld - hier wird das fuer diese
   Zeilen zurueckgenommen. */
/* Auch hier wirkt ".btn { width: 100% }": im leeren Zustand wurde daraus ein
   ueberbreiter Kasten statt eines Knopfes. */
.changelog-empty-content .btn {
  width: auto;
}

.aenderungszeile .aenderung-entfernen {
  width: auto;
  flex: 0 0 auto;
}

.aenderungszeile .aenderung {
  min-width: 0;
}

.add-content-btn {
  background: rgba(40, 167, 69, 0.1);
  border: 1px solid rgba(40, 167, 69, 0.3);
  color: #28a745;
  border-radius: 10px;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
}

.add-content-btn:hover {
  background: rgba(40, 167, 69, 0.2);
  border-color: rgba(40, 167, 69, 0.5);
  color: #28a745;
}


  

.modern-navbar {
  background: rgba(0, 0, 0, 0.95) !important;
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  z-index: 1050;
  padding: 0.5rem 0;
}

.modern-navbar.scrolled {
  background: rgba(0, 0, 0, 0.98) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  padding: 0.3rem 0;
}

/* Container für verschiedene Bildschirmgrößen */
.modern-navbar .container-fluid {
  padding: 0 1rem;
  max-width: 100%;
}

/* Brand Logo und Text - Responsiv */
.modern-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: white !important;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 0.25rem 0;
}

.modern-brand:hover {
  color: #0d6efd !important;
  transform: translateY(-1px);
}

.navbar-logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.navbar-logo:hover {
  transform: scale(1.05);
}

.brand-text {
  background: linear-gradient(45deg, #0d6efd, #6610f2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
}

/* Navigation Links - Responsiv */
.modern-nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
  padding: 0.5rem 0.75rem !important;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  margin: 0 0.2rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

.modern-nav-link:hover {
  color: white !important;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.modern-nav-link.active {
  color: #0d6efd !important;
  background: rgba(13, 110, 253, 0.15);
}

.modern-nav-link i {
  font-size: 0.9rem;
}

/* Toggler Button */
.modern-toggler {
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.modern-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  background: rgba(255, 255, 255, 0.1);
}

.modern-toggler:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* User Section */
.navbar-user-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-dropdown {
  position: relative;
}

/* User Dropdown Toggle - Responsiv */
.user-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 25px;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 500;
  font-size: 0.85rem;
  white-space: nowrap;
}

.user-dropdown-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: white;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* User Avatar - Responsiv */
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, #0d6efd, #6610f2);
  color: white;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.user-avatar-large {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, #0d6efd, #6610f2);
  color: white;
  font-weight: 600;
  font-size: 1.2rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.user-name {
  font-size: 0.85rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* Modern Dropdown */
.modern-dropdown {
  background: rgba(0, 0, 0, 0.96) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 15px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
  min-width: 280px;
  padding: 0.75rem 0;
  margin-top: 0.5rem;
}

.modern-dropdown .dropdown-header {
  padding: 1rem 1.5rem;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0.5rem;
}

.modern-dropdown .dropdown-item {
  color: rgba(255, 255, 255, 0.85);
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.modern-dropdown .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  transform: translateX(5px);
}

.modern-dropdown .dropdown-item i {
  width: 16px;
  opacity: 0.8;
  font-size: 0.9rem;
}

.modern-dropdown .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.15);
  margin: 0.5rem 1rem;
}

/* =========================================================
   TEAM-MENUE

   Alles, was nur Admin, Supporter und Moderator sehen, liegt in einem
   eigenen Menue neben dem Benutzernamen. Vorher hing es mit im
   Benutzermenue: als Admin 22 Eintraege, "Ausloggen" ganz unten und
   ausserhalb des Bildschirms.

   Ab einer gewissen Laenge zweispaltig, damit auch das Team-Menue
   ohne Scrollen auskommt.
   ========================================================= */
.team-dropdown {
  position: relative;
  margin-right: 0.75rem;
}

.team-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.team-dropdown-toggle:hover,
.team-dropdown-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.team-dropdown-toggle i {
  font-size: 0.95rem;
  opacity: 0.85;
}

.team-menu {
  padding: 0.6rem;
  gap: 0.25rem 0.75rem;
  align-items: start;
}

/* Das display steht bewusst nur auf .show. Stuende es schon auf .team-menu,
   wuerde es Bootstraps display:none schlagen - das Menue haenge dann
   dauerhaft aufgeklappt in der Seite. */
.team-menu.show {
  display: block;
}

/* Mehrspaltiger Satz statt Gitter: die Spalten gleichen ihre Hoehe selbst
   aus. Mit festen Gitterspalten landete die laengste Gruppe unter der
   ersten und die rechte Spalte blieb halb leer. */
.team-menu.team-menu-breit.show {
  min-width: 520px;
  column-count: 2;
  column-gap: 0.75rem;
}

.team-gruppe {
  display: flex;
  flex-direction: column;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.team-gruppe-titel {
  padding: 0.55rem 0.9rem 0.35rem 0.9rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.team-menu .dropdown-item {
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
}

/* Abmelden setzt sich vom Rest ab - es ist der einzige Punkt, der etwas
   beendet statt irgendwohin zu fuehren. */
.dropdown-item-abmelden {
  color: rgba(255, 138, 128, 0.92) !important;
}

.dropdown-item-abmelden:hover {
  background: rgba(220, 53, 69, 0.16) !important;
  color: #ff8a80 !important;
}

/* Auf schmalen Fenstern klappt die Leiste ohnehin auf; dann einspaltig
   und ohne feste Mindestbreite. */
@media (max-width: 991.98px) {
  .team-menu.team-menu-breit.show {
    min-width: 0;
    column-count: 1;
  }

  /* Aufgeklappte Leiste: Team und Benutzer stehen untereinander und
     nehmen die ganze Breite, wie die uebrigen Punkte auch. Sonst haengt
     der Team-Knopf als nacktes Symbol neben dem Benutzernamen. */
  .navbar-user-section {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .team-dropdown {
    margin-right: 0;
  }

  .team-dropdown-toggle {
    width: 100%;
    justify-content: flex-start;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.9rem;
  }
}

/* Login Link für nicht eingeloggte User */
.nav-color {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  text-decoration: none;
  border: 1px solid #007bff !important;
}

.nav-color:hover {
  color: white !important;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
  border: 1px solid #007bff !important;
}

.hostsystem-details {
  display: inline-block;
  margin-right: 1rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  color: #ced4da;
  font-weight: 500;
  transition: all 0.3s ease;
  width: 50px auto;
  justify-content: right;
  text-align: left;
}

.kvm-info {
   display: inline-block;
  margin-right: 1rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  color: #ced4da;
  font-weight: 500;
  transition: all 0.3s ease;
  width: 50px auto;
  justify-content: right;
  text-align: left;
}

.kvm-resource {
    display: inline-block;
    margin-right: 1rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    color: #ced4da;
    font-weight: 500;
    transition: all 0.3s ease;
    width: 50px auto;
    justify-content: right;
    text-align: left;
}

.kvm-network {
   display: inline-block;
  margin-right: 1rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  color: #ced4da;
  font-weight: 500;
  transition: all 0.3s ease;
  width: 50px auto;
  justify-content: right;
  text-align: left;
}

.kvm-finance {
    display: inline-block;
    margin-right: 1rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    color: #ced4da;
    font-weight: 500;
    transition: all 0.3s ease;
    width: 100px auto;
    justify-content: right;
    text-align: left;
}

.kvm-finance span {
  text-align: right;
  justify-content: right;
  display: inline-block;
  margin: 10px auto;
}

.kvm-usage {
    display: inline-block;
    margin-right: 1rem;
    margin: 10px auto;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    color: #ced4da;
    font-weight: 500;
    transition: all 0.3s ease;
    width: 99%;
    justify-content: right;
    text-align: left;
}


.kvm-actions {
    display: inline-block;
    margin-right: 1rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    color: #ced4da;
    font-weight: 500;
    transition: all 0.3s ease;
    width: 100px auto;
    justify-content: right;
    text-align: left;
    height: 100px;
    margin: 10px auto;
}


.backup {
    display: inline-block;
    margin-right: 5px;
    margin: 5px;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    color: #ced4da;
    font-weight: 500;
    transition: all 0.3s ease;
    width: 100px auto;
    justify-content: right;
    text-align: left;
    height: 200px;
    margin: 10px auto;
}

.technology-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  transition: all 0.3s ease;
  height: 100%;
  overflow: hidden;
  position: relative;
  margin: 0 15px;
}

.technology-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(45deg, #0d6efd, #6610f2);
}

.technology-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.08);
} 
.technology-card .card-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.technology-card img {
  width: 80px;
  height: 80px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.3);
  flex-shrink: 0;
  margin-bottom: 1rem;
}
/* =========================================================
   EINSTELLUNGEN: Knoepfe und Datenauskunft
   ========================================================= */

/* style.css macht Knoepfe unter 768px voll breit - ein Speichern-Knopf soll
   sich aber nach seinem Inhalt richten, nicht die ganze Karte fuellen. */
.einst-knopf {
  width: auto !important;
}

.einst-knopfzeile {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Zwei Knoepfe, einer links, einer rechts */
.einst-knopfzeile.geteilt {
  justify-content: space-between;
}

/* Sicherheit: die Aktionen stehen untereinander, nicht nebeneinander -
   es sind Eingriffe, keine Speichern-Knoepfe. */
.sicher-aktionen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

/* Die Datenauskunft gehoert in die Karte, nicht darunter */
.einst-auskunft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.einst-auskunft strong {
  display: block;
  font-size: 0.95rem;
  color: #e6edf3;
}

.einst-auskunft p {
  max-width: 46ch;
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 576px) {
  .einst-knopfzeile {
    justify-content: stretch;
  }

  /* max-width muss mit weg: server-overview.css deckelt .btn-primary
     seitenweit auf 320px. Ohne diese Zeile wurden die primaeren Knoepfe
     schmaler als die daneben stehenden Umriss-Knoepfe - im Sicherheits-
     und Benachrichtigungsbereich standen dann 320er neben 363ern. */
  .einst-knopfzeile .einst-knopf,
  .einst-auskunft .einst-knopf,
  .sicher-aktionen .einst-knopf {
    width: 100% !important;
    max-width: none !important;
    justify-content: center;
  }
}

/* =========================================================
   EINSTELLUNGEN: Auswahl der anzuzeigenden VMs und Container

   Ein echtes Aufklappmenue: zu ist nur die Zeile mit dem Zaehler
   zu sehen. Vorher stand die ganze Liste offen auf der Seite und
   zwei Knoepfe wurden von ".btn { width: 100% }" (gilt unter 768px) ueber
   die volle Breite gezogen.
   ========================================================= */
.gast-dropdown {
  width: 100%;
}

.gast-oeffner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #e6edf3;
  font-size: 0.9rem;
  text-align: left;
}

.gast-oeffner:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
  color: #e6edf3;
}

.gast-oeffner:disabled {
  opacity: 0.45;
}

.gast-oeffner i {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  transition: transform 0.2s ease;
}

.gast-oeffner[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.gast-menu {
  width: 100%;
  min-width: 0;
  margin-top: 0.4rem;
  padding: 0;
  background: #1b2129;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.gast-kopf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gast-suche {
  position: relative;
  flex: 1;
  min-width: 0;
}

.gast-suche i {
  position: absolute;
  top: 50%;
  left: 0.6rem;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35);
}

.gast-suche input {
  width: 100%;
  padding: 0.35rem 0.6rem 0.35rem 1.9rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: #e6edf3;
  font-family: inherit;
  font-size: 0.82rem;
}

.gast-suche input:focus {
  outline: none;
  border-color: rgba(13, 110, 253, 0.6);
}

.gast-knoepfe {
  display: flex;
  gap: 0.4rem;
}

/* Gegen ".btn { width: 100% }" (gilt unter 768px) */
.gast-knopf {
  width: auto !important;
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
}

.gast-liste {
  max-height: 17rem;
  overflow-y: auto;
  padding: 0.3rem;
}

.gast-liste::-webkit-scrollbar {
  width: 8px;
}

.gast-liste::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
}

.gast-zeile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.55rem;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s ease;
}

/* Das hidden-Attribut bringt sein display:none nur aus dem Browser-Standard
   mit und verliert damit gegen jede eigene Regel. Durch das display:flex
   darueber blieben ausgeblendete Zeilen sichtbar - die Suche im Aufklappmenue
   hat schlicht nichts gefiltert. */
.gast-zeile[hidden],
.gast-leer[hidden] {
  display: none;
}

.gast-zeile:hover {
  background: rgba(255, 255, 255, 0.06);
}

.gast-zeile input {
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
}

/* Kennzeichen fuer VM oder Container - gleiche Breite, damit die Spalte steht */
.gast-art {
  flex-shrink: 0;
  width: 2rem;
  padding: 0.1rem 0;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.5px;
}

.gast-art.ct {
  background: rgba(13, 202, 240, 0.18);
  color: #6edff6;
}

.gast-art.vm {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
}

.gast-id {
  flex-shrink: 0;
  min-width: 2.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.gast-name {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  color: #e6edf3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gast-leer {
  margin: 0;
  padding: 1rem 0.55rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
}

/* =========================================================
   DASHBOARD: eigene Benutzer-ID

   Gibt man weiter, wenn einem jemand einen Server freigeben
   soll. Stand vorher nur in den Einstellungen.
   ========================================================= */
.dash-kennung {
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.dash-kennung-titel {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.45);
}

.dash-kennung-zeile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dash-kennung code {
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  color: #e6edf3;
  font-size: 0.82rem;
  letter-spacing: 0.3px;
}

/* Gegen ".btn { width: 100% }" (gilt unter 768px) - hier ist es ohnehin kein .btn */
.dash-kennung-knopf {
  flex-shrink: 0;
  width: auto;
  padding: 0.28rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dash-kennung-knopf:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.dash-kennung small {
  display: block;
  margin-top: 0.35rem;
  max-width: 34ch;
  font-size: 0.74rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 576px) {
  .dash-kennung {
    width: 100%;
  }
}

/* =========================================================
   EINSTELLUNGEN: Hoster-Liste

   Ein Eintrag je Anbieter, zum Aufklappen. Nutzt <details> -
   das braucht kein Javascript und funktioniert auch, wenn
   welches ausfaellt.
   ========================================================= */
.hoster-hinweis {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.5);
}

.hoster-liste {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hoster-eintrag {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.hoster-eintrag[open] {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.hoster-kopf {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s ease;
}

/* Das Standarddreieck von <details> ersetzen wir durch den Pfeil rechts */
.hoster-kopf::-webkit-details-marker,
.hoster-kopf::marker {
  display: none;
  content: '';
}

.hoster-kopf:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Nur das kleine Logo in der Hosterliste der Einstellungen.
   Ohne die Einschraenkung auf .hoster-eintrag traf diese Regel auch die
   Serveruebersicht, die dieselbe Klasse verwendet - dort schrumpften die
   Logos auf 26px. Aufgefallen war es nicht ueber die Kaskade: die
   Uebersicht setzt max-width/max-height, hier stehen width/height. Zwei
   verschiedene Eigenschaften, die einander nicht ersetzen. */
.hoster-eintrag .hoster-logo {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 5px;
}

.hoster-titel {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #e6edf3;
}

.hoster-marke {
  flex-shrink: 0;
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.hoster-marke.an {
  background: rgba(76, 175, 80, 0.15);
  color: #7ed492;
}

.hoster-pfeil {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.2s ease;
}

.hoster-eintrag[open] .hoster-pfeil {
  transform: rotate(180deg);
}

.hoster-inhalt {
  padding: 0 0.9rem 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 0.9rem;
}

/* Bootstraps .form-text bringt kein display mit, und <small> ist inline.
   Der Hinweis unter einem Feld klebte deshalb an der naechsten Beschriftung,
   sobald er nicht zufaellig zeilenfuellend endete. */
.hoster-inhalt .form-text,
.hoster-inhalt .form-label {
  display: block;
}

.hoster-feld {
  position: relative;
}

.hoster-feld input {
  padding-right: 2.75rem;
}

.hoster-auge {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  width: auto;
  padding: 0.35rem 0.5rem;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.hoster-auge:hover {
  color: #e6edf3;
}

/* Kanaele nutzen dieselbe Aufklappliste wie die Hoster, tragen aber ein
   Symbol statt eines Logos */
.hoster-symbol {
  flex-shrink: 0;
  width: 26px;
  font-size: 1.05rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}

/* =========================================================
   PROFILBILD

   Der Avatar in der Navigationsleiste und die Vorschau auf der Profilseite.
   Wer kein Bild hinterlegt hat, bekommt den ersten Buchstaben seines Namens -
   eine leere Flaeche waere schlechter als gar kein Bild.
   ========================================================= */

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 0.5rem;
  border-radius: 50%;
  /* Bilder sind selten quadratisch - zuschneiden statt verzerren */
  object-fit: cover;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.user-avatar-buchstabe {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.profil-vorschau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.profil-vorschau img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profil-vorschau-buchstabe {
  font-size: 2.2rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}