/* =================================================================
   SUPPORT TICKET APP - FINALES STYLESHEET (DARK & MODERN)
   ================================================================= */

/* === 1. GRUNDEINSTELLUNGEN & DESIGN-TOKENS (Standard = Dark Mode) === */
   :root {
	   --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	   
	   /* Farb-Variablen */
	   --bg-primary: #111015;
	   --bg-secondary: #1A1920;
	   --bg-tertiary: #24232B;
	   --text-primary: #EAEAEA;
	   --text-secondary: #9A99A2;
	   --text-disabled: #616068;
	   --accent-primary: #8A42F4;
	   --accent-secondary: #B085F5;
	   --accent-gradient: linear-gradient(45deg, #8A42F4, #C048F4);
	   --border-color: #36353D;
	   --nav-bg: rgba(26, 25, 32, 0.8); /* NEUE VARIABLE für dunklen Nav-Hintergrund */
	
	   --bg-primary: #111015; --bg-secondary: #1A1920; --bg-tertiary: #24232B;
	   --text-primary: #EAEAEA; --text-secondary: #9A99A2; --text-disabled: #616068;
	   --accent-primary: #8A42F4; --accent-secondary: #B085F5; --accent-gradient: linear-gradient(45deg, #8A42F4, #C048F4);
	   --danger-color: #F44336; --danger-rgb: 244, 67, 54; --warning-color: #FFC107; --info-color: #2196F3; --success-color: #4CAF50; --success-rgb: 76, 175, 80;
	   --border-color: #36353D; --border-radius-md: 8px; --border-radius-lg: 16px;
	   --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.2); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.3);
	   --transition-fast: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
   }
   
   /* === NEU: LIGHT-MODE VARIABLEN === */
   /* Diese Regeln werden aktiv, wenn der body das Attribut data-theme="light" hat */
   body[data-theme="light"] {
	   --bg-primary: #F8F9FA;
	   --bg-secondary: #FFFFFF;
	   --bg-tertiary: #F1F3F5;
	   --text-primary: #212529;
	   --text-secondary: #6C757D;
	   --text-disabled: #ADB5BD;
	   --border-color: #E9ECEF;
	   --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.05);
	   --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08);
	   --border-color: #E9ECEF;
	   --nav-bg: rgba(255, 255, 255, 0.7); /* NEUE VARIABLE für hellen Nav-Hintergrund */

   }
/* === 2. GLOBALE STYLES & RESETS === */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--font-family); background-color: var(--bg-primary); color: var(--text-primary); margin: 0; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-weight: 600; }
a { color: var(--accent-secondary); text-decoration: none; transition: var(--transition-fast); }
a:hover { color: var(--text-primary); }
.container { max-width: 1600px; margin: 0 auto; padding: 20px; }
.hidden { display: none !important; }

/* === 3. SCROLLBAR & NAVIGATION === */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: var(--border-radius-lg); }
nav {
	background-color: var(--nav-bg); /* Verwendet jetzt die Theme-Variable */
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border-color);
	position: sticky;
	top: 0;
	z-index: 1000;
	color: var(--text-primary); /* Setzt die Textfarbe für die gesamte Nav explizit */
}
.nav-container { display: flex; justify-content: space-between; align-items: center; max-width: 1600px; margin: 0 auto; padding: 0 20px; height: 64px; }
/* === KORREKTUR & ANIMATION FÜR DAS LOGO === */

/* =================================================================
   KORREKTUR & ANIMATION FÜR DAS LOGO
   ================================================================= */

/* =================================================================
	  FINALE KORREKTUR FÜR LOGO-ANIMATION (MIT !IMPORTANT)
	  ================================================================= */
   
   /* Der Logo-Link selbst */
   .logo, .logo:hover {
	   font-size: 1.0rem;
	   font-weight: 700;
	   letter-spacing: 2px;
	   cursor: pointer;
  
   
	   /* Die Animation für den fließenden Verlauf */
	   animation: gradient-flow 8s ease-in-out infinite;
   }
   
   @media (max-width: 480px) {
	   .logo {
		  font-size: 0.5rem;
			 letter-spacing: 1px;
	   }
   }

   
   /* Die einzelnen Buchstaben im Logo */
   .logo span {
	   display: inline-block;
	   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   }
   
   /* Die Hover-Animation für die "Welle" */
   .logo:hover span {
	   transform: translateY(-5px);
   }
   
   /* Stellt die verzögerte Animation für jeden Buchstaben ein */
   .logo:hover span:nth-child(1) { transition-delay: 0s; }
   .logo:hover span:nth-child(2) { transition-delay: 0.05s; }
   .logo:hover span:nth-child(3) { transition-delay: 0.1s; }
   .logo:hover span:nth-child(4) { transition-delay: 0.15s; }
   .logo:hover span:nth-child(5) { transition-delay: 0.2s; }
   .logo:hover span:nth-child(6) { transition-delay: 0.25s; }
   
   /* Keyframes für die Farbverlauf-Animation */
   @keyframes gradient-flow {
	   0% { background-position: 0% 50%; }
	   50% { background-position: 100% 50%; }
	   100% { background-position: 0% 50%; }
   }
}
.user-menu {
	position: relative;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	/* NEU: Fügt einen unsichtbaren Puffer unter dem Menüpunkt hinzu, um die Lücke zu schließen */
	padding-bottom: 15px;
	margin-bottom: -15px; /* Verhindert, dass der Puffer das Layout verschiebt */
}.nav-avatar { width: 36px; height: 36px; border-radius: 50%; margin-right: 8px; object-fit: cover; border: 2px solid var(--border-color); }
.user-menu .dropdown {
	position: absolute;
	right: 0;
	top: 100%; /* Beginnt jetzt direkt am Ende des gepaddeten Bereichs */
	background-color: var(--bg-tertiary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	padding: 10px 0;
	list-style: none;
	min-width: 150px;
	
	/* NEU: Animations-Setup */
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.2s ease-in-out;
}
.user-menu:hover .dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.dropdown li a { display: block; padding: 8px 20px; white-space: nowrap; }

/* === 4. GLOBALE BUTTONS & FORMULARE === */
.btn-primary, .btn-secondary, .btn-tertiary, .btn-danger { font-size: 1.0rem; border: none; padding: 10px 20px; border-radius: var(--border-radius-md); cursor: pointer; font-weight: 600; transition: var(--transition-fast); display: flex; align-items: center; justify-content: center; height: 38px; }
.btn-primary { background: var(--accent-gradient); color: white; box-shadow: 0 2px 10px rgba(138, 66, 244, 0.3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(138, 66, 244, 0.4); }
.btn-secondary { text-transform: none;background-color: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-color); }
.btn-secondary:hover { background-color: var(--border-color); color: var(--text-primary); }
.btn-tertiary { background-color: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); padding: 5px 10px; font-size: 0.9rem; font-weight: 500;}
.btn-tertiary:hover { background-color: var(--border-color); color: var(--text-primary); }
.btn-danger { background-color: var(--danger-color); color: white; }
input, select, textarea { background-color: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary); padding: 10px; border-radius: var(--border-radius-md); font-family: var(--font-family); transition: var(--transition-fast); width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(138, 66, 244, 0.2); }
.form-group label { display: block; font-weight: 600; margin-bottom: 5px; color: var(--text-secondary); }
.error-message { color: var(--danger-color); font-size: 0.9rem; margin-top: 10px; }

/* === 5. BOARD & LISTENANSICHT === */
.board-header { padding-bottom: 20px; }
.header-top-row, .board-controls, .filter-group { display: flex; align-items: center; gap: 15px; }
.board-controls {
	display: flex;
	align-items: center;
	gap: 15px;
}
.header-top-row { justify-content: space-between; }
.board-filters {
	display: flex;
	flex-wrap: wrap; /* Erlaubt Umbruch auf sehr kleinen Bildschirmen */
	gap: 20px;
	align-items: center; /* Zentriert alle Elemente auf der Querachse */
	background-color: transparent;
	border: 1px solid var(--border-color);
	padding: 15px;
	border-radius: var(--border-radius-lg);
	margin-top: 20px;
}
.filter-group label { margin-bottom: 0; white-space: nowrap; }
.filter-group select, .filter-group input[type="date"] { height: 38px; }
.kanban-board { display: flex; gap: 20px; overflow-x: auto; flex-grow: 1; padding: 10px 0 20px 0; }
.kanban-column { background-color: var(--bg-secondary); border-radius: var(--border-radius-lg); width: 320px; flex-shrink: 0; padding: 15px; display: flex; flex-direction: column; }
.kanban-column h3 { margin: 0 0 20px 0; padding: 5px; cursor: grab; }


/* =================================================================
   FINALES LAYOUT FÜR TICKET-KARTEN
   ================================================================= */

.kanban-ticket {
	background: var(--bg-tertiary);
	border-radius: var(--border-radius-md);
	padding: 20px;
	margin-bottom: 15px;
	cursor: pointer;
	transition: var(--transition-fast);
	border: 1px solid var(--border-color);
	position: relative; /* Wichtigster Bezugspunkt */
	padding-bottom: 45px; /* Platz für die Pills unten */
}
.kanban-ticket:hover {
	transform: translateY(-3px);
	border-color: var(--accent-primary);
	box-shadow: 0 0 20px rgba(138, 66, 244, 0.1);
}

/* Positioniert den Avatar absolut oben rechts */
.ticket-assignee {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 10; /* Stellt sicher, dass er über allem liegt */
}
.ticket-assignee img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid var(--bg-primary);
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Das Cover-Bild, das den oberen Rand der Karte füllt */
.card-cover-image-wrapper {
	width: calc(100% + 40px); /* Breite = 100% + 2 * padding */
	margin: -20px -20px 15px -20px; /* Negativer Margin, um Padding zu kompensieren */
	aspect-ratio: 16 / 10;
	border-top-left-radius: var(--border-radius-md);
	border-top-right-radius: var(--border-radius-md);
	overflow: hidden;
	background-color: var(--bg-primary);
}
.card-cover-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * DER TRICK: Wenn ein Avatar existiert, bekommt das Cover-Bild
 * (sein direkter HTML-Nachbar) einen Abstand nach oben.
 */
.ticket-assignee + .card-cover-image-wrapper {
	margin-top: 35px;
}

/* Der Titel bekommt rechts Platz, damit er nicht unter den Avatar rutscht */
.kanban-ticket p {
	margin: 0;
	padding-right: 40px;
	word-break: break-word;
}

/* Der Footer enthält nur noch die Tags */
.ticket-footer {
	margin-top: 15px;
	display: flex;
	align-items: center;
}
.ticket-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.ticket-tag-small {
	width: 18px;
	height: 6px;
	border-radius: 3px;
}

/* NEUE, KORRIGIERTE REGEL */


.ticket-tags { display: flex; gap: 5px; }
.ticket-tag-small { width: 18px; height: 6px; border-radius: 3px; }

/* View Switcher */
.view-switcher { display: flex; background-color: var(--bg-tertiary); border-radius: var(--border-radius-md); padding: 4px; border: 1px solid var(--border-color); }
.view-switcher button { background: none; border: none; cursor: pointer; padding: 4px; line-height: 1; border-radius: var(--border-radius-sm); color: var(--text-disabled); transition: var(--transition-fast); }
.view-switcher button:hover { color: var(--text-primary); background-color: var(--border-color); }
.view-switcher button.active { background-color: var(--accent-primary); color: white; box-shadow: 0 0 10px rgba(138, 66, 244, 0.3); }

/* List View */
#list-view { margin-top: 10px; background-color: var(--bg-secondary); border-radius: var(--border-radius-lg); border: 1px solid var(--border-color); overflow: hidden; }
.ticket-list-header, .ticket-list-row { display: grid; grid-template-columns: 3fr 1.2fr 1.5fr 1fr 1fr; gap: 20px; padding: 15px 20px; align-items: center; border-bottom: 1px solid var(--border-color); }
.ticket-list-header { font-weight: 600; color: var(--text-secondary); }
.ticket-list-row { transition: var(--transition-fast); cursor: pointer; }
.ticket-list-row:hover { background-color: var(--bg-tertiary); }
.ticket-list-row:last-child { border-bottom: none; }
.list-cell { display: flex; align-items: center; gap: 10px; overflow: hidden; white-space: nowrap; }
.list-cell .nav-avatar { width: 24px; height: 24px; margin: 0; }
.list-cell .priority-pill, .list-cell /* NEU: Container für die Fälligkeitsanzeige */
.duedate-container {
	position: absolute;
	bottom: 10px;
	left: 15px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	color: var(--text-secondary);
}

/* NEU: Die Pille selbst braucht keine Positionierung mehr */
.duedate-pill {
	padding: 2px 8px;
	border-radius: var(--border-radius-md);
	font-size: 0.75rem;
	font-weight: 600;
	background-color: var(--bg-tertiary);
	color: var(--text-secondary);
	border: 1px solid var(--border-color);
}

/* === 6. MODAL & DETAILS === */
/* NEUE, VOLLSTÄNDIGE REGEL */
.modal {
	display: none; /* Garantiert, dass Modals standardmäßig versteckt sind */
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(17, 16, 21, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
/* NEUE REGEL MIT GRÖSSENBEGRENZUNG */
.modal-content {
	background-color: var(--bg-secondary);
	border-radius: var(--border-radius-lg);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-lg);
	margin: 5% auto;
	position: relative;
	padding: 30px; /* Etwas mehr Innenabstand für den Look */

	/* --- HIER IST DIE KORREKTUR --- */
	width: 90%; /* Nimmt 90% der Breite ein... */
	max-width: 500px; /* ...aber wird maximal 500px breit. */
}
.modal.large .modal-content {
	max-width: 900px;
}
.close-button { position: absolute; top: 15px; right: 20px; color: var(--text-disabled); font-size: 28px; cursor: pointer; transition: var(--transition-fast); }
.close-button:hover { color: var(--text-primary); transform: rotate(90deg); }
#ticket-details-content h2 { font-size: 2rem; }
.editable-field .view-mode:hover { background-color: var(--border-color); cursor: pointer; border-radius: var(--border-radius-md); }
.edit-mode { display: flex; align-items: center; gap: 8px; }
.edit-mode .save-btn, .edit-mode .cancel-btn { background: none; border: none; cursor: pointer; font-size: 1.5rem; padding: 5px; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); }
.edit-mode .save-btn { color: var(--success-color); }
.edit-mode .cancel-btn { color: var(--danger-color); }
.edit-mode .save-btn:hover { background-color: rgba(var(--success-rgb), 0.1); }
.edit-mode .cancel-btn:hover { background-color: rgba(var(--danger-rgb), 0.1); }
.ticket-detail-grid {
	display: grid;
	/* Definiert ein Raster mit 4 Spalten: (Label, Wert, Label, Wert) */
	grid-template-columns: auto 1fr auto 1fr;
	gap: 20px 30px; /* Etwas mehr Abstand für die neue Optik */
	align-items: center;
}
.ticket-detail-grid strong { color: var(--text-secondary); }
.ticket-extra-details { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 15px; }
.tags-container { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.tag-pill { background-color: var(--accent-primary); color: white; padding: 5px 12px; border-radius: 15px; font-size: 0.9rem; display: flex; align-items: center; border: 1px solid transparent; }
.remove-tag-btn { background: none; border: none; color: white; cursor: pointer; margin-left: 8px; font-size: 1rem; padding: 0; line-height: 1; opacity: 0.7; }
.comment-section { margin-top: 15px; }
.comments-list { max-height: 300px; overflow-y: auto; background-color: var(--bg-primary); padding: 15px; border-radius: var(--border-radius-md); margin-bottom: 15px; }
.comment { display: flex; gap: 15px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.comment:last-child { border-bottom: none; }
#comment-form button { float: right; }
.notification-section { margin-top: 20px; padding: 15px; background-color: var(--bg-tertiary); border-radius: var(--border-radius-md); display: flex; align-items: center; }

/* =================================================================
   FEINSCHLIFF FÜR DIE NAVIGATION
   ================================================================= */
/* =================================================================
	  KORREKTUR FÜR NAVIGATIONSAUSRICHTUNG
	  ================================================================= */
   
   /* Die Liste selbst (ul) wird zum Flex-Container, um die Listenelemente (li) nebeneinander anzuordnen */
   .nav-links {
	   display: flex;
	   align-items: center; /* Vertikal zentrieren */
	   gap: 25px;           /* Abstand zwischen den Elementen */
	   list-style: none;    /* Aufzählungspunkte entfernen */
	   margin: 0;
	   padding: 0;
   }
   
   /* Das spezielle Benutzermenü (li) wird AUCH zum Flex-Container, um Bild und Namen darin nebeneinander auszurichten */
   .user-menu {
	   display: flex;
	   align-items: center;
	   gap: 12px; /* Abstand zwischen Bild und Namen */
   }
   
   
  /* =================================================================
	 FINALES KARTEN-LAYOUT FÜR PROJEKTÜBERSICHT (CSS-GRID)
	 ================================================================= */
  
  .project-grid {
	  display: grid;
	  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	  gap: 25px;
	  margin-top: 30px;
  }
  
  /* Die Projekt-Karte wird zum Grid-Container */
  .project-card {
	  background: var(--bg-secondary);
	  border-radius: var(--border-radius-lg);
	  border: 1px solid var(--border-color);
	  transition: var(--transition-fast);
	  padding: 25px;
	  text-decoration: none;
	  color: inherit;
	  
	  display: flex; /* Stellt sicher, dass der Inhalt die Karte füllt */
	  justify-content: space-between; /* Schiebt Hauptinhalt nach links, Aktionen nach rechts */
	  align-items: flex-start; /* Richtet alles oben aus */
	  gap: 15px;
  }
  
  .project-card:hover {
	  transform: translateY(-5px);
	  border-color: var(--accent-primary);
	  box-shadow: var(--shadow-md);
  }
  
  .card-main-content {
	  flex-grow: 1; /* Nimmt den meisten Platz ein */
  }
  
  .card-title {
	  margin: 0;
	  font-size: 1.5rem;
	  color: var(--text-primary);
  }
  
  .card-owner {
	  margin: 4px 0 0 0;
	  color: var(--text-secondary);
	  font-size: 0.9rem;
  }
  
  /* Der Container für die Aktionen rechts (Badge & Icon) */
  .card-actions {
	  display: flex;
	  align-items: center;
	  gap: 12px;
	  flex-shrink: 0; /* Verhindert, dass die Elemente schrumpfen */
  }
  
  /* Styling für das Einstellungs-Icon */
  .settings-icon-wrapper {
	  color: var(--text-disabled);
	  width: 32px;
	  height: 32px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border-radius: 50%;
	  transition: var(--transition-fast);
	  cursor: pointer;
  }
  
  .settings-icon-wrapper:hover {
	  color: var(--text-primary);
	  background-color: var(--border-color);
	  transform: rotate(90deg);
  }
   
.app-container {
	   display: grid; /* Wir verwenden Grid statt Flexbox */
	   grid-template-rows: auto 1fr auto; /* 3 Reihen: Header (auto), Main (füllt), Footer (auto) */
	   min-height: 100vh;
   }
   
main.container {
	   /* flex-grow wird nicht mehr benötigt! */
	   width: 100%; /* Stellt sicher, dass der Main-Bereich die volle Breite im Grid einnimmt */
	   max-width: 100vw; /* Behält das zentrierte Layout für den Inhalt bei */
	   margin: 0 auto; /* Zentriert den Inhalt horizontal */
	   padding: 20px;
   }
   
   /* Macht den Hauptbereich der Karte klickbar */
   .project-card-main-link {
	   display: block;
	   padding: 25px;
	   text-decoration: none;
	   color: inherit;
   }
   
/* Ersetze die bestehende Regel für .project-card-header */
	  .project-card-header {
		  display: flex;
		  justify-content: space-between;
		  align-items: flex-start;
		  gap: 15px;
		  padding-right: 35px;}
   
   .project-card h3 {
	   margin: 0;
	   font-size: 1.5rem;
	   color: var(--text-primary);
   }
   
   .project-owner {
	   margin: 10px 0 0 0;
	   color: var(--text-secondary);
	   font-size: 0.9rem;
   }
   
   /* Ersetze die bestehende Regel für .settings-link */
   .settings-link {
	   position: absolute;
	   top: 15px;
	   right: 15px;
	   color: var(--text-disabled);
	   z-index: 5; /* Stellt sicher, dass es über dem Inhalt liegt und klickbar ist */
	   
	   /* NEU: Feste Größe und Flexbox-Zentrierung für einen perfekten Kreis */
	   width: 32px;
	   height: 32px;
	   display: flex;
	   align-items: center;
	   justify-content: center;
	   
	   border-radius: 50%; /* Macht den Hintergrund (beim Hover) rund */
	   transition: var(--transition-fast);
   }
   
   /* Ersetze die bestehende Regel für .settings-link:hover */
   .settings-link:hover {
	   color: var(--text-primary);
	   background-color: var(--border-color);
	   transform: rotate(90deg); /* Kleine, schicke Animation */
   }
   
   
   
   /* Styling für die Rollen-Anzeige (Badges) */
   .role-badge {
	   padding: 4px 12px;
	   border-radius: 15px;
	   font-size: 0.8rem;
	   font-weight: 600;
	   white-space: nowrap;
	   flex-shrink: 0;
   }
   
   .role-badge.role-owner { background-color: var(--accent-primary); color: white; }
   .role-badge.role-admin { background-color: var(--danger-color); color: white; }
   .role-badge.role-edit { background-color: var(--warning-color); color: var(--bg-primary); }
   .role-badge.role-view { background-color: var(--info-color); color: white; }
   
   
   /* =================================================================
	  STYLING FÜR PROJEKT-EINSTELLUNGEN
	  ================================================================= */
   
   /* Container für die gesamte Seite, um die Breite zu begrenzen */
   .page-container {
	   max-width: 900px;
	   margin: 0 auto;
   }
   
   /* Stellt sicher, dass die Profilbilder in der Benutzerliste klein und rund sind */
   .user-list-item .avatar-small {
	   width: 40px;
	   height: 40px;
	   min-width: 40px; /* Verhindert, dass das Bild in Flexbox schrumpft */
	   border-radius: 50%; /* Macht das Bild rund */
	   object-fit: cover; /* Verhindert, dass das Bild verzerrt wird */
	   margin: 0; /* Entfernt ggf. alten Abstand */
   }
   
   /* Stellt sicher, dass der Container für Name/E-Mail korrekt ist */
   .user-info {
	   display: flex;
	   flex-direction: column;
	   flex-grow: 1; 
   }
   
   .user-name {
	   font-weight: 500;
	   color: var(--text-primary);
   }
   
   .user-email {
	   font-size: 0.9rem;
	   color: var(--text-secondary);
   }
   
   /* Stellt sicher, dass die Aktionen rechts korrekt ausgerichtet sind */
   .user-actions {
	   display: flex;
	   align-items: center;
	   gap: 10px;
	   flex-shrink: 0; 
   }
   .user-actions .user-role-select {
	   min-width: 120px;
   }
   .btn-danger-small {
	   background-color: var(--bg-tertiary);
	   color: var(--text-secondary);
	   border: 1px solid var(--border-color);
	   width: 36px;
	   height: 36px;
	   font-weight: normal;
	   font-size: 1.5rem;
	   line-height: 1;
	   transition: var(--transition-fast);
   }
   .btn-danger-small:hover {
	   background-color: var(--danger-color);
	   border-color: var(--danger-color);
	   color: white;
   }
   
   /* Stil für die Trennlinie */
   .settings-divider {
	   border: none;
	   height: 1px;
	   background-color: var(--border-color);
	   margin: 30px 0;
   }
   
   /* Stile für Aktions-Buttons in Modals */
   .modal-actions {
	   display: flex;
	   justify-content: flex-end;
	   gap: 15px;
	   margin-top: 20px;
   }
   
   /* =================================================================
	  LAYOUT-VERBESSERUNGEN FÜR EINSTELLUNGEN
	  ================================================================= */
   
   /* Ein generischer Wrapper für Formularzeilen */
   .form-row {
	   display: flex;
	   align-items: center; /* Vertikal zentrieren */
	   gap: 15px; /* Abstand zwischen den Elementen */
   }
   
   /* Sagt dem Input-Feld, dass es den verfügbaren Platz ausfüllen soll */
   .form-row input[type="text"],
   .form-row input[type="email"] {
	   flex-grow: 1;
   }
   
   /* Verhindert, dass Buttons oder Selects in der Breite schrumpfen */
   .form-row .flex-shrink-0 {
	   flex-shrink: 0;
   }
   
   /* Stellt sicher, dass die Benutzerliste die Elemente korrekt nebeneinander anordnet */
   .user-list-item {
	   display: flex;
	   align-items: center;
	   gap: 15px;
	   padding: 15px 0;
	   border-bottom: 1px solid var(--border-color);
   }
   
   /* Korrigiert den Abstand, wenn keine Beschriftung vorhanden ist */
   .form-row:has(input[type="email"]) {
	   margin-top: 10px;
   }
   
   
   /* === 9. FOOTER === */
   footer {
	   width: 100%;
	   padding: 30px 20px;
	   margin-top: 60px;
	   background-color: var(--bg-primary); /* Passt sich dem Hintergrund an */
	   border-top: 1px solid var(--border-color); /* Saubere Trennlinie zum Inhalt */
	   color: var(--text-secondary); /* Dezente Textfarbe */
	   font-size: 0.9rem;
   }
   
   .footer-container {
	   max-width: 1600px;
	   margin: 0 auto;
	   display: flex; /* Richtet die Elemente nebeneinander aus */
	   justify-content: space-between; /* Schiebt Copyright nach links, Links nach rechts */
	   align-items: center; /* Zentriert alles vertikal */
	   flex-wrap: wrap; /* Erlaubt sauberen Umbruch auf kleinen Bildschirmen */
	   gap: 20px;
   }
   
   .footer-container p {
	   margin: 0;
   }
   
   footer ul {
	   display: flex; /* Richtet die Links nebeneinander aus */
	   gap: 30px;
	   list-style: none; /* Entfernt die Aufzählungspunkte */
	   margin: 0;
	   padding: 0;
   }
   
   footer a {
	   color: var(--text-secondary);
	   transition: var(--transition-fast);
   }
   
   footer a:hover {
	   color: var(--accent-primary); /* Hebt den Link beim Hovern mit der Akzentfarbe hervor */
   }
   
   
   /* =================================================================
	  STYLING FÜR SPALTEN-VERWALTUNG
	  ================================================================= */
   .column-list-item {
	   display: flex;
	   align-items: center;
	   gap: 15px;
	   padding: 10px 0;
   }
   .column-name-input {
	   flex-grow: 1;
	   margin: 0;
   }
   #add-column-form .form-row {
	   margin-top: 10px;
   }
   
   /* =================================================================
	  FEINSCHLIFF FÜR TICKET-DETAIL-MODAL
	  ================================================================= */
   
   /* Ersetzt die hässlichen <hr> durch eine feine, moderne Linie mit mehr Abstand */
   #ticket-details-content hr {
	   border: none;
	   height: 1px;
	   background-color: var(--border-color);
	   margin: 35px 0; /* Schafft vertikale Abstände zur Gruppierung */
   }
   
   /* Vergrößert den Titel und gibt ihm mehr Raum nach unten */
   #ticket-details-content h2.view-mode {
	   font-size: 2.25rem;
	   margin-bottom: 20px;
   }
   
   /* Verbessert das Layout des Key-Value-Gitters */
   .ticket-detail-grid {
	   gap: 20px 30px; /* Mehr Abstand */
   }
   
   /* Stilt die Sektions-Überschriften (Tags, Anhänge, Kommentare) */
   .tag-section > strong,
   .attachment-section > strong,
   .comment-section > h3 {
	   display: block;
	   color: var(--text-secondary);
	   font-size: 1rem;
	   font-weight: 600;
	   margin-bottom: 15px;
	   border-bottom: 1px solid var(--border-color);
	   padding-bottom: 10px;
   }
   
   /* Modernisiert das Formular für Dateianhänge */
  /* NEUE, FUNKTIONIERENDE REGELN FÜR ANHANG-UPLOAD */
  #attachment-form {
	  display: flex;
	  align-items: center;
	  gap: 15px;
	  margin-top: 15px;
  }
  
  /* Gestaltetes Label, das wie ein Button aussieht */
  .file-input-label {
	  padding: 8px 15px;
	  background-color: var(--bg-tertiary);
	  border: 1px solid var(--border-color);
	  border-radius: var(--border-radius-md);
	  cursor: pointer;
	  transition: var(--transition-fast);
	  white-space: nowrap;
  }
  .file-input-label:hover {
	  background-color: var(--border-color);
	  color: var(--text-primary);
  }
  
  /* Span, das die ausgewählten Dateinamen anzeigt */
  #file-name-display {
	  flex-grow: 1; /* Nimmt den restlichen Platz ein */
	  font-size: 0.9rem;
	  color: var(--text-secondary);
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis; /* Schneidet lange Dateinamen mit "..." ab */
	  text-align: left;
  }
   
   /* Verbessert das Kommentar-Formular */
   #comment-form textarea {
	   min-height: 80px;
	   background-color: var(--bg-primary);
   }
   
   
   /* =================================================================
	  STYLING FÜR TICKET-COVER-BILDER
	  ================================================================= */
   
  
   
   /* Stile für Tag-Management */
   .add-tag-wrapper { display: flex; align-items: center; gap: 10px; }
   .add-tag-wrapper select { flex-grow: 1; }
   #show-create-tag-modal-btn { padding: 5px; height: auto; font-size: 1.5rem; line-height: 1; }
   input[type="color"] { padding: 0; height: 40px; border-radius: var(--border-radius-md); cursor: pointer; }
   #project-tags-list .column-list-item { /* Wiederverwendung der Spalten-Stile */ grid-template-columns: 40px 1fr auto; }
   
   
   
   
   
   /* =================================================================
	  FINALES KARTEN-STYLING (Tags, Priorität, Fälligkeit)
	  ================================================================= */
   
   /* Der Container am unteren Rand, der alles ausrichtet */
   .card-bottom-row {
	   position: absolute;
	   bottom: 0;
	   left: 0;
	   right: 0;
	   padding: 10px 20px;
	   display: flex;
	   justify-content: space-between;
	   align-items: center;
   }
   
   /* Container für die linke Seite (Fälligkeit) */
   .bottom-left {
	   display: flex;
   }
   
   /* Container für die rechte Seite (Priorität) */
   .bottom-right {
	   display: flex;
   }
   
   /* Die Fälligkeitsanzeige (Label + Pille) */
   .duedate-display {
	   display: flex;
	   align-items: center;
	   gap: 6px;
	   font-size: 0.8rem;
	   color: var(--text-secondary);
   }
   
   /* Die Pille für das Fälligkeitsdatum */
   .duedate-pill {
	   padding: 3px 10px;
	   border-radius: var(--border-radius-md);
	   font-size: 0.75rem;
	   font-weight: 600;
	   background-color: var(--bg-tertiary);
	   color: var(--text-secondary);
	   border: 1px solid var(--border-color);
   }
   .duedate-pill.overdue {
	   background-color: var(--danger-color);
	   color: white;
	   border-color: var(--danger-color);
   }
   
   /* Die Pille für die Priorität */
   .priority-pill {
	   padding: 1px 8px;
	   border-radius: var(--border-radius-md);
	   font-size: 0.6rem;
	   font-weight: 600;
	   color: white;
   }
   
   /* Farben für die Prioritäts-Pillen */
   .priority-low { background-color: var(--info-color); }
   .priority-medium { background-color: var(--text-disabled); }
   .priority-high { background-color: var(--warning-color); color: var(--bg-primary); }
   .priority-critical { background-color: var(--danger-color); }
   
   
   /* Die Tag-Pillen im Footer */
   .ticket-tag {
	   display: inline-block;
	   padding: 1px 8px;
	   border-radius: 14px;
	   font-size: 0.6rem;
	   font-weight: 500;
	   color: white;
	   line-height: 1.4;
	   white-space: nowrap;
	   /* Die Hintergrundfarbe kommt ausschließlich aus dem inline-style vom JavaScript */
   }
   
   /* =================================================================
	  FEINSCHLIFF FÜR KOMMENTARE & BENACHRICHTIGUNGEN
	  ================================================================= */
   
   /* Stellt sicher, dass der Kommentar-Button korrekt ausgerichtet ist */
   #comment-form button {
	   margin-top: 10px;
	   float: none; /* Überschreibt alte Regel */
	   display: block; /* Stellt korrekte Positionierung sicher */
	   margin-left: auto; /* Schiebt den Button nach rechts */
   }
   
   
   /* === Moderner Toggle Switch für Benachrichtigungen === */
   
   /* Versteckt die originale, hässliche Checkbox, aber hält sie funktional */
   .hidden-checkbox {
	   opacity: 0;
	   position: absolute;
	   width: 0;
	   height: 0;
   }
   
   /* Der Container für den Switch und den Text */
   .notification-section {
	   display: flex;
	   align-items: center;
	   gap: 15px;
	   padding: 20px;
	   background-color: var(--bg-tertiary);
	   border-radius: var(--border-radius-md);
   }
   .notification-section span {
	   color: var(--text-secondary);
	   font-weight: 500;
   }
   
   /* Die "Schiene" des Schalters */
   .toggle-switch {
	   position: relative;
	   display: inline-block;
	   width: 50px;
	   height: 28px;
	   background-color: var(--bg-primary);
	   border-radius: 14px;
	   cursor: pointer;
	   border: 1px solid var(--border-color);
	   transition: var(--transition-fast);
   }
   
   /* Der "Knopf" des Schalters */
   .toggle-switch::after {
	   content: '';
	   position: absolute;
	   width: 20px;
	   height: 20px;
	   border-radius: 50%;
	   background-color: var(--text-disabled);
	   top: 3px;
	   left: 4px;
	   transition: var(--transition-fast);
   }
   
   /* Wenn die unsichtbare Checkbox :checked ist... */
   .hidden-checkbox:checked + .toggle-switch {
	   background-color: var(--accent-primary); /* ... wird die Schiene lila. */
	   border-color: var(--accent-primary);
   }
   
   .hidden-checkbox:checked + .toggle-switch::after {
	   background-color: white; /* ... wird der Knopf weiß... */
	   transform: translateX(22px); /* ... und nach rechts geschoben. */
   }
   
   
   /* =================================================================
	  NEUES AUTH/LOGIN-SEITEN-DESIGN (2026)
	  ================================================================= */
   
   /* Container für die gesamte Seite und den animierten Hintergrund */
   .auth-page-wrapper {
	   display: flex;
	   align-items: center;
	   justify-content: center;
	   min-height: calc(100vh - 160px); /* Höhe anpassen, um Footer zu berücksichtigen */
	   position: relative;
	   overflow: hidden;
   }
   
   /* Die neue Anmelde/Registrierungs-Karte mit Glas-Effekt */
   .auth-card-2026 {
	   width: 100%;
	   max-width: 450px;
	   background-color: rgba(26, 25, 32, 0.7); /* Halb-transparent */
	   backdrop-filter: blur(20px);
	   -webkit-backdrop-filter: blur(20px);
	   border: 1px solid var(--border-color);
	   border-radius: var(--border-radius-lg);
	   padding: 40px;
	   z-index: 2;
	   box-shadow: var(--shadow-lg);
   }
   
   /* Tabs zum Umschalten */
   .auth-tabs {
	   display: flex;
	   border-bottom: 1px solid var(--border-color);
	   margin-bottom: 30px;
   }
   .auth-tab {
	   flex-grow: 1;
	   background: none;
	   border: none;
	   color: var(--text-secondary);
	   padding: 15px;
	   font-size: 1.1rem;
	   font-weight: 600;
	   cursor: pointer;
	   border-bottom: 3px solid transparent;
	   transition: var(--transition-fast);
   }
   .auth-tab:hover {
	   color: var(--text-primary);
   }
   .auth-tab.active {
	   color: var(--text-primary);
	   border-bottom-color: var(--accent-primary);
   }
   
   /* Button innerhalb der Auth-Karte */
   .auth-button {
	   width: 100%;
	   margin-top: 20px;
	   padding: 15px;
	   font-size: 1rem;
   }
   
   /* === Animierter Hintergrund-Effekt === */
   @keyframes moveBlob {
	   0%   { transform: translate(0, 0) scale(1); }
	   25%  { transform: translate(40vw, -30vh) scale(1.2); }
	   50%  { transform: translate(-20vw, 20vh) scale(0.8); }
	   75%  { transform: translate(30vw, 30vh) scale(1.1); }
	   100% { transform: translate(0, 0) scale(1); }
   }
   
   .animated-blob {
	   position: absolute;
	   border-radius: 50%;
	   opacity: 0.15;
	   filter: blur(100px);
	   z-index: 1;
   }
   .blob1 {
	   width: 500px;
	   height: 500px;
	   top: -150px;
	   left: -150px;
	   background-color: var(--accent-primary);
	   animation: moveBlob 30s infinite alternate;
   }
   .blob2 {
	   width: 400px;
	   height: 400px;
	   bottom: -100px;
	   right: -100px;
	   background-color: var(--info-color);
	   animation: moveBlob 25s infinite alternate-reverse;
   }
   .blob3 {
	   width: 300px;
	   height: 300px;
	   top: 50%;
	   left: 50%;
	   background-color: var(--warning-color);
	   animation: moveBlob 35s infinite alternate;
   }
   
   
   /* =================================================================
	  STYLING FÜR DAS NEUE PXLTIX-LOGO
	  ================================================================= */
   
   .logo-container {
	   display: flex;
	   flex-direction: column;
	   align-items: center;
	   gap: 15px;
	   margin-bottom: 40px;
   }
   
   .logo-icon {
	   position: relative;
	   width: 60px;
	   height: 60px;
   }
   
   .logo-shape {
	   position: absolute;
	   width: 45px;
	   height: 45px;
	   border-radius: var(--border-radius-md);
	   transition: all 0.3s ease-in-out;
   }
   
   /* Die drei versetzten Karten des Icons */
   .logo-icon .shape1 {
	   background: var(--accent-gradient);
	   transform: rotate(-15deg);
	   z-index: 3;
	   top: 0;
	   left: 5px;
   }
   .logo-icon .shape2 {
	   background: var(--accent-gradient);
	   transform: rotate(0deg);
	   z-index: 2;
	   top: 7px;
	   left: 15px;
	   opacity: 0.7;
   }
   .logo-icon .shape3 {
	   background: var(--accent-gradient);
	   transform: rotate(15deg);
	   z-index: 1;
	   top: 15px;
	   left: 8px;
	   opacity: 0.4;
   }
   
   /* Leichte Animation beim Hovern über den Logo-Container */
   .logo-container:hover .shape1 {
	   transform: rotate(-20deg) scale(1.05);
   }
   .logo-container:hover .shape2 {
	   transform: rotate(5deg) scale(1.05);
   }
   .logo-container:hover .shape3 {
	   transform: rotate(20deg) scale(1.05);
   }
   
   /* Der App-Name als Text */
   .logo-text {
	   font-size: 2.5rem;
	   font-weight: 700;
	   letter-spacing: 4px; /* Etwas mehr Abstand für den Tech-Look */
	   color: var(--text-primary);
	   margin: 0;
   }
   
   
   /* =================================================================
	  KORREKTUR FÜR PROFILBILD-ANZEIGE
	  ================================================================= */
   
   /* Der Wrapper, der die Größe (150x150) und die runde Form vorgibt */
   .profile-picture-wrapper {
	   position: relative;
	   width: 150px;
	   height: 150px;
	   display: block;
	   cursor: pointer;
	   border-radius: 50%;
	   overflow: hidden; /* Schneidet alles ab, was über den Kreis hinausragt */
	   border: 3px solid var(--border-color);
	   transition: var(--transition-fast);
   }
   .profile-picture-wrapper:hover {
	   border-color: var(--accent-primary);
   }
   
   /* Das Bild selbst, das den Wrapper komplett ausfüllt */
   #profile-picture-preview {
	   width: 100%;
	   height: 100%;
	   object-fit: cover; /* Verhindert, dass das Bild verzerrt wird */
   }
   
   /* Der "Ändern"-Text, der beim Hovern erscheint */
   .profile-picture-overlay {
	   position: absolute;
	   bottom: 0;
	   left: 0;
	   width: 100%;
	   background-color: rgba(0,0,0,0.6);
	   color: white;
	   text-align: center;
	   padding: 10px 0;
	   opacity: 0;
	   transition: var(--transition-fast);
   }
   .profile-picture-wrapper:hover .profile-picture-overlay {
	   opacity: 1;
   }
   
   /* Die Logik für den unsichtbaren file-input */
   .hidden-input {
	   display: none;
   }
   
   
   /* === NEU: STILE FÜR DEN THEME-UMSCHALTER (am Ende der Datei anfügen) === */
   #theme-toggle-btn {
	   background: none;
	   border: none;
	   cursor: pointer;
	   padding: 5px;
	   border-radius: 50%;
	   display: flex;
	   align-items: center;
	   justify-content: center;
	   color: var(--text-secondary);
	   transition: var(--transition-fast);
   }
   #theme-toggle-btn:hover {
	   color: var(--text-primary);
	   background-color: var(--border-color);
   }
   #theme-toggle-btn .sun-icon,
   #theme-toggle-btn .moon-icon {
	   transition: transform 0.4s ease;
   }
   /* Standardmäßig ist der Dark Mode aktiv, also ist die Sonne versteckt */
   #theme-toggle-btn .sun-icon {
	   display: none;
   }
   /* Im Light-Mode wird die Sonne gezeigt und der Mond versteckt */
   body[data-theme="light"] #theme-toggle-btn .sun-icon {
	   display: block;
   }
   body[data-theme="light"] #theme-toggle-btn .moon-icon {
	   display: none;
   }
   
   
   /* =================================================================
	  STYLING FÜR LONG-PRESS AUF SPALTEN
	  ================================================================= */
   
   /* Ändert den Cursor, während man den Spalten-Header gedrückt hält */
   .kanban-column h3:active {
	   cursor: grabbing;
   }
   
   /* Stil, der angewendet wird, wenn SortableJS ein Element zieht */
   .sortable-chosen {
	   cursor: grabbing;
	   background-color: var(--accent-primary) !important;
	   opacity: 0.8;
   }
   
   /* Stil für das "Geister"-Element, das die neue Position anzeigt */
   .sortable-ghost {
	   opacity: 0.3;
	   background-color: var(--bg-tertiary);
   }
   
   /* Stil für das Element, das gerade gezogen wird */
   .sortable-drag {
	   opacity: 0.9 !important;
	   transform: rotate(2deg); /* Leichte Neigung für Drag-Effekt */
   }