#app {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
*{
  margin: 0;
  padding: 0;
}



header[data-v-00e0aa07]{
    width: 100%;
    display: flex;
    justify-content: space-around;
}
.logo[data-v-00e0aa07]{
    height: 70px;
}


#logo[data-v-259bc354]{
  color: #059669;
}
.routerlink[data-v-259bc354]{
color: white;
text-decoration: none;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding: 10px 15px;
}
.routerlink[data-v-259bc354]:hover{
color: white;
text-decoration: none;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding: 10px 15px;
background-color: #059669;
border-radius: 10px;
}
header[data-v-259bc354]{
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
}
/* Basis-Stile für die Seite */
.container[data-v-259bc354] {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #111827; /* Dunkler Hintergrund */
  color: #D1D5DB; /* Heller Text */
  font-family: 'Inter', sans-serif;
}

/* Header-Stile */
HeaderView[data-v-259bc354] {
  /* Falls HeaderView spezifische Stile benötigt, hier hinzufügen */
}

/* Hauptbereich-Stile */
.content[data-v-259bc354] {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}

/* Begrüßungsnachricht-Stile */
.greeting[data-v-259bc354] {
  font-family: 'Inter', sans-serif; /* Konsistente Schriftart */
  font-size: 2rem;
  color: #F3F4F6; /* Heller Text */
  margin: 0;
  padding: 0;
}

/* Link-Stile */
.link[data-v-259bc354] {
  margin-top: 20px;
  text-decoration: none;
  color: #3B82F6; /* Blau für einen modernen Look */
  font-size: 1rem;
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #1F2937; /* Dunklerer Hintergrund */
  border: 1px solid #3B82F6;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.link[data-v-259bc354]:hover {
  background-color: #374151; /* Hellere Hover-Farbe */
  color: #F3F4F6; /* Weißer Text beim Hover */
  transform: scale(1.05);
}

/* Footer-Stile */
.footer[data-v-259bc354] {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: #1F2937; /* Dunklerer Hintergrund für den Footer */
  border-top: 1px solid #374151; /* Feiner Trennstrich oben */
}

/* Auth-Bereich-Stile */
.auth-container[data-v-259bc354] {
  display: flex;
  gap: 15px; /* Abstand zwischen den Buttons */
}
.auth-button[data-v-259bc354] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #3B82F6; /* Blaue Farbe */
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.auth-button[data-v-259bc354]:hover {
  background-color: #2563EB; /* Dunklere blaue Farbe */
  transform: scale(1.05);
}
.auth-button[data-v-259bc354]:nth-of-type(2) {
  background-color: #10B981; /* Grüne Farbe */
}
.auth-button[data-v-259bc354]:nth-of-type(2):hover {
  background-color: #059669; /* Dunklere grüne Farbe */
}


.menue[data-v-0d84486e] {
  background-color: #1f2937;
  padding: 20px;
  border-radius: 5px;
  width: 60vw;
}
.mitarbeiter[data-v-0d84486e] {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Gleichmäßige Verteilung */
  padding: 10px;
  background-color: #2d3748; /* Etwas dunklerer Hintergrund für die Zeilen */
  margin-bottom: 10px; /* Abstand zwischen den Zeilen */
  border-radius: 8px; /* Abgerundete Ecken */
}
.role-select[data-v-0d84486e] {
/* Abstand zum Namen */
margin-bottom: 10px;
  background-color: rgba(255, 255, 255, 0.1); /* Transparenter Hintergrund */
  border: 1px solid #374151; /* Border für bessere Sichtbarkeit */
  border-radius: 5px; /* Abgerundete Ecken */
  color: #f3f4f6; /* Textfarbe */
  padding: 10px; /* Innenabstand */
  transition: background-color 0.3s ease; /* Sanfte Übergänge */
}
.role-select[data-v-0d84486e]:hover {
  background-color: rgba(255, 255, 255, 0.2); /* Heller bei Hover */
}
.delete-btn[data-v-0d84486e] {
  background-color: #DC2626;
  padding: 10px;
  outline: none;
  border: none;
  border-radius: 5px;
  color: white; /* Textfarbe für den Button */
  cursor: pointer; /* Hand-Cursor bei Hover */
}
.add-btn[data-v-0d84486e] {
  background-color: #4F46E5; /* Hintergrundfarbe für den "Mitarbeiter hinzufügen"-Button */
  color: white; /* Textfarbe */
  padding: 10px 20px; /* Innenabstand */
  border: none;
  border-radius: 5px; /* Abgerundete Ecken */
  cursor: pointer;
  margin-top: 20px; /* Abstand nach oben */
}
.popup[data-v-0d84486e] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Dunkler Hintergrund mit Transparenz */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Über anderen Elementen */
}
.popup-content[data-v-0d84486e] {
  background-color: #2d3748; /* Hintergrundfarbe des Popups */
  padding: 20px;
  border-radius: 10px; /* Abgerundete Ecken */
  width: 400px; /* Breite des Popups */
}
.input-field[data-v-0d84486e] {
  margin-bottom: 10px; /* Abstand zwischen den Feldern */
  padding: 10px;
  width: 99%; /* Breite für die Eingabefelder */
  border: 1px solid #374151; /* Border für die Eingabefelder */
  border-radius: 5px; /* Abgerundete Ecken */
  background-color: rgba(255, 255, 255, 0.1); /* Transparenter Hintergrund */
  color: #f3f4f6; /* Textfarbe */
}
.button-group[data-v-0d84486e] {
  display: flex;
  justify-content: space-between; /* Abstand zwischen den Buttons */
}
.close-btn[data-v-0d84486e] {
  background-color: #DC2626; /* Hintergrundfarbe für den Schließen-Button */
  color: white;
  border: none;
  border-radius: 5px; /* Abgerundete Ecken */
  padding: 10px;
  cursor: pointer;
}
.btn[data-v-0d84486e] {
  background-color: #4F46E5; /* Hintergrundfarbe für den Hinzufügen-Button */
  color: white;
  border: none;
  border-radius: 5px; /* Abgerundete Ecken */
  padding: 10px;
  cursor: pointer;
}


.menue[data-v-41543741] {
  background-color: #1f2937;
  width: 40vw;
  padding: 20px;
  border-radius: 5px;
}
.mitarbeiter[data-v-41543741] {
  display: flex;
  flex-direction: column; /* Anordnung der Elemente untereinander */
  align-items: flex-start; /* Links ausgerichtet */
  padding: 10px;
  background-color: #2d3748; /* Etwas dunklerer Hintergrund für die Zeilen */
  margin-bottom: 10px; /* Abstand zwischen den Zeilen */
  border-radius: 8px; /* Abgerundete Ecken */
}
.delete-btn[data-v-41543741] {
  background-color: #dc2626;
  padding: 10px;
  outline: none;
  border: none;
  border-radius: 5px;
  color: white; /* Textfarbe für den Button */
  cursor: pointer;
}
.add-btn[data-v-41543741] {
  background-color: #4f46e5; /* Hintergrundfarbe für den "Material hinzufügen"-Button */
  color: white; /* Textfarbe */
  padding: 10px 20px; /* Innenabstand */
  border: none;
  border-radius: 5px; /* Abgerundete Ecken */
  cursor: pointer;
  margin-top: 20px; /* Abstand nach oben */
}
.edit-btn[data-v-41543741] {
  background-color: #4caf50; /* Grün für den Bearbeiten-Button */
  padding: 10px;
  outline: none;
  border: none;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  margin-right: 10px; /* Abstand zwischen Buttons */
}
.popup[data-v-41543741] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.popup-content[data-v-41543741] {
  background-color: #2d3748;
  padding: 20px;
  border-radius: 10px;
  width: 400px;
}
.input-field[data-v-41543741] {
  margin-bottom: 10px;
  padding: 10px;
  width: 100%;
  border: 1px solid #374151;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #f3f4f6;
}
.button-group[data-v-41543741] {
  display: flex;
  justify-content: space-between;
}
.btn[data-v-41543741] {
  background-color: #4f46e5;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
}
.close-btn[data-v-41543741] {
  background-color: #dc2626;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
}
.button-container[data-v-41543741] {
  display: flex;
  justify-content: flex-end; /* Buttons werden rechtsbündig angezeigt */
  margin-top: 10px; /* Abstand zwischen Text und Buttons */
}



.entfbtn[data-v-3939a13e]{
  background-color: #dc2626;
  padding: 5px 10px;
  border: none;
  outline: none;
  border-radius: 5px;
  margin-left: 5px;
}
.mengebtn[data-v-3939a13e]{
  background-color: #059669;
  padding: 5px 10px;
  border: none;
  outline: none;
  border-radius: 5px;
  margin-left: 5px;
}
.material-list[data-v-3939a13e] {
  margin: 10px 0;
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid #374151;
  border-radius: 8px;
  background-color: #1f2937;
  padding: 10px;
  text-align: center;
}
.material-item[data-v-3939a13e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  color: #d1d5db;
  background-color: #1f2937;
  border: 1px solid #374151;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
}
.material-item[data-v-3939a13e]:hover {
  background-color: #374151;
}
.material-item.selected[data-v-3939a13e] {
  background-color: #10b981;
}
.options[data-v-3939a13e] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.li[data-v-3939a13e] {
  text-decoration: none;
  padding: 10px;
  border-radius: 5px;
  background-color: #374151;
  margin-top: 5px;
}
.add-material-btn[data-v-3939a13e],
.remove-material-btn[data-v-3939a13e] {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
}
.add-material-btn[data-v-3939a13e]:hover,
.remove-material-btn[data-v-3939a13e]:hover {
  background-color: #0056b3;
}
.placeholder[data-v-3939a13e] {
  height: 70px;
}
.title[data-v-3939a13e] {
  width: 100% !important;
}
.idnumber[data-v-3939a13e] {
  margin-left: 20px;
  width: 30% !important;
}
.identify[data-v-3939a13e] {
  width: 102.5%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.selectmenue[data-v-3939a13e] {
  background-color: #1f2937;
  border: 1px solid white;
  border-radius: 5px;
  color: white;
}
.date-separator[data-v-3939a13e] {
  text-align: center;
  margin: 20px 0;
}
.date-separator-text[data-v-3939a13e] {
  display: inline-block;
  padding: 5px 15px;
  width: 96%;
  border-radius: 5px;
  background-color: #374151;
  color: #f3f4f6;
  font-weight: bold;
}

/* Header-Stile */
.header[data-v-3939a13e] {
  text-align: center;
  position: relative;
  width: 100%;
}

/* Flex-Container für Zurück-Button und Titel */
.header-content[data-v-3939a13e] {
  display: flex;
  align-items: center;
  justify-content: center; /* Zentriert den Inhalt */
  gap: 20px;
}
.header h1[data-v-3939a13e] {
  font-size: 2rem;
  color: #f3f4f6; /* Heller Text */
  margin: 0; /* Entfernt den Standard-Abstand */
}

/* Zurück-Button-Stil */
.back-button[data-v-3939a13e] {
  position: absolute;
  left: 0;
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #1f2937; /* Dunklerer Hintergrund */
  text-decoration: none;
  color: #d1d5db; /* Heller Text */
  transition: background-color 0.3s;
}
.back-button[data-v-3939a13e]:hover {
  background-color: #374151; /* Hellere Hover-Farbe */
}

/* Menü bleibt unverändert */
.menue[data-v-3939a13e] {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 15px;
}
.back-button-container[data-v-3939a13e] {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
}
.back-button[data-v-3939a13e] {
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #1f2937; /* Dunklerer Hintergrund */
  text-decoration: none;
  color: #d1d5db; /* Heller Text */
  transition: background-color 0.3s;
}
.back-button[data-v-3939a13e]:hover {
  background-color: #374151; /* Hellere Hover-Farbe */
}

/* Haupt-Layout */
.main-out[data-v-3939a13e] {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #111827; /* Dunkler Hintergrund */
  color: #d1d5db; /* Heller Text */
  font-family: "Inter", sans-serif;
  padding: 20px;
  box-sizing: border-box;
}

/* Header-Stile */
.header[data-v-3939a13e] {
  text-align: center;
}
.header h1[data-v-3939a13e] {
  font-size: 2rem;
  color: #f3f4f6; /* Heller Text */
}
.menue[data-v-3939a13e] {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 15px;
}
.option[data-v-3939a13e] {
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #1f2937; /* Dunklerer Hintergrund */
  text-decoration: none;
  color: #d1d5db; /* Heller Text */
  transition: background-color 0.3s;
}
.option[data-v-3939a13e]:hover {
  background-color: #374151; /* Hellere Hover-Farbe */
}
#selected[data-v-3939a13e] {
  outline: 2px solid #3b82f6; /* Blaue Umrandung */
}

/* Aufträge Container */
.aufträge[data-v-3939a13e] {
  width: 100%;
  max-width: 800px; /* Größere Maximalbreite */
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr; /* Einspaltiges Layout */
  gap: 15px;
}

/* Einzelne Aufträge */
.auftrag[data-v-3939a13e] {
  background-color: #1f2937; /* Dunkler Hintergrund */
  border-radius: 8px;
  padding: 20px;
  transition: transform 0.3s, background-color 0.3s;
  cursor: pointer;
}
.auftrag[data-v-3939a13e]:hover {
  transform: translateY(-3px);
  background-color: #374151; /* Hellere Hover-Farbe */
}
.auftrag.deleted[data-v-3939a13e] {
  background-color: #dc2626; /* Rote Farbe für gelöschte Aufträge */
  opacity: 0.8;
}
.auftrag.completed[data-v-3939a13e] {
  background-color: #10b981; /* Grüne Farbe für erledigte Aufträge */
  opacity: 0.8;
}

/* Auftrag Details */
.auftrag-content[data-v-3939a13e] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auftrag-title[data-v-3939a13e] {
  font-size: 1.5rem;
  font-weight: 600;
}
.address[data-v-3939a13e],
.time[data-v-3939a13e],
.dauer[data-v-3939a13e],
.email[data-v-3939a13e],
.phone[data-v-3939a13e],
.date[data-v-3939a13e] {
  font-size: 1rem;
}

/* Schaltflächen Container */
.button-container[data-v-3939a13e] {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* Schaltflächen */
button[data-v-3939a13e] {
  padding: 8px 15px;
  border-radius: 5px;
  border: none;
  font-size: 1rem;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}
.edit-btn[data-v-3939a13e] {
  background-color: #3b82f6; /* Blaue Farbe */
}
.edit-btn[data-v-3939a13e]:hover {
  background-color: #2563eb; /* Dunklere blaue Farbe */
}
.delete-btn[data-v-3939a13e] {
  background-color: #ef4444; /* Rote Farbe */
}
.delete-btn[data-v-3939a13e]:hover {
  background-color: #dc2626; /* Dunklere rote Farbe */
}
.restore-btn[data-v-3939a13e] {
  background-color: #10b981; /* Grüne Farbe */
}
.restore-btn[data-v-3939a13e]:hover {
  background-color: #059669; /* Dunklere grüne Farbe */
}
.complete-btn[data-v-3939a13e] {
  background-color: #10b981; /* Grüne Farbe */
}
.complete-btn[data-v-3939a13e]:hover {
  background-color: #059669; /* Dunklere grüne Farbe */
}
.remove-btn[data-v-3939a13e] {
  background-color: #6b7280; /* Graue Farbe */
}
.remove-btn[data-v-3939a13e]:hover {
  background-color: #4b5563; /* Dunklere graue Farbe */
}

/* Modal Overlay */
.modal-overlay[data-v-3939a13e] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(
    0,
    0,
    0,
    0.6
  ); /* Halbtransparenter dunkler Hintergrund */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Modal Fenster */
.modal[data-v-3939a13e] {
  background-color: #1f2937;
  padding: 30px;
  border-radius: 12px;
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  /* Maximale Höhe auf 80% des Viewports begrenzen */
  overflow-y: auto;
  /* Scrollbarkeit bei Überlauf */
}
.modal h2[data-v-3939a13e] {
  font-size: 1.75rem;
  margin-bottom: 20px;
  color: #f3f4f6; /* Heller Text */
}
.modal label[data-v-3939a13e] {
  display: block;
  margin-bottom: 15px;
  color: #d1d5db; /* Heller Text */
}
.modal input[data-v-3939a13e],
.modal textarea[data-v-3939a13e] {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #374151;
  background-color: #111827; /* Sehr dunkler Hintergrund */
  color: #f3f4f6; /* Heller Text */
  font-size: 1rem;
}
.modal-buttons[data-v-3939a13e] {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* Modal Schaltflächen */
.modal-buttons button[data-v-3939a13e] {
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  font-size: 1rem;
  color: white;
  cursor: pointer;
}
.modal-buttons button[data-v-3939a13e]:first-child {
  background-color: #3b82f6; /* Blaue Farbe */
}
.modal-buttons button[data-v-3939a13e]:first-child:hover {
  background-color: #2563eb; /* Dunklere blaue Farbe */
}
.cancel-btn[data-v-3939a13e] {
  background-color: #6b7280; /* Graue Farbe */
}
.cancel-btn[data-v-3939a13e]:hover {
  background-color: #4b5563; /* Dunklere graue Farbe */
}

/* Aktions-Schaltflächen */
.actions[data-v-3939a13e] {
  position: fixed;
  bottom: 20px; /* Abstand vom unteren Rand des Bildschirms */
  left: 50%; /* Positionierung in der horizontalen Mitte des Bildschirms */
  transform: translateX(-50%); /* Zentrierung des Buttons */
  z-index: 1000; /* Über anderen Elementen anzeigen */
}
.add-btn[data-v-3939a13e] {
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.add-btn[data-v-3939a13e]:hover {
  background-color: #2563eb;
}

/* Stil für das Input-Feld */
.search-input[data-v-3939a13e] {
  margin-top: 20px;
  width: 100%;
  max-width: 400px;
  padding: 10px 15px;
  border-radius: 8px;
  border: 1px solid #374151; /* Dunkler Rand */
  background-color: #1f2937; /* Dunkler Hintergrund */
  color: #f3f4f6; /* Heller Text */
  font-size: 1rem;
  transition: border-color 0.3s;
  box-sizing: border-box;
}
.search-input[data-v-3939a13e]::-moz-placeholder {
  color: #9ca3af; /* Hellere Farbe für Platzhaltertext */
}
.search-input[data-v-3939a13e]::placeholder {
  color: #9ca3af; /* Hellere Farbe für Platzhaltertext */
}
.search-input[data-v-3939a13e]:focus {
  outline: none;
  border-color: #3b82f6; /* Blaue Farbe bei Fokus */
}
/* Allgemeine Styles bleiben unverändert */

/* Mobile Optimierungen */
@media (max-width: 600px) {
.auftrag[data-v-3939a13e] {
    padding: 10px; /* Weniger Padding */
}
.auftrag-title[data-v-3939a13e] {
    font-size: 1.2rem; /* Kleinere Schriftgröße für den Titel */
}
.address[data-v-3939a13e],
  .time[data-v-3939a13e],
  .dauer[data-v-3939a13e],
  .email[data-v-3939a13e],
  .phone[data-v-3939a13e],
  .date[data-v-3939a13e] {
    font-size: 0.9rem; /* Kleinere Schriftgröße für die Details */
}
.auftrag-content[data-v-3939a13e] {
    gap: 5px; /* Weniger Abstand zwischen den Elementen */
}
.button-container[data-v-3939a13e] {
    flex-direction: column; /* Buttons untereinander anordnen */
    gap: 5px; /* Weniger Abstand zwischen den Buttons */
}
button[data-v-3939a13e] {
    padding: 5px 10px; /* Kleinere Buttons */
    font-size: 0.9rem; /* Kleinere Schriftgröße für Buttons */
}
.date-separator-text[data-v-3939a13e] {
    padding: 5px 10px;
    width: 95%; /* Weniger Breite, damit es nicht am Rand abschneidet */
}
}


.main-out[data-v-026a77c0] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #111827;
}
.header[data-v-026a77c0] {
  display: flex;
  width: 100%;
  justify-content: space-around;
  padding: 10px;
  border-bottom: 1px solid #374151;
  gap: 10px;
}
.worker[data-v-026a77c0] {
  flex: 1;
  text-align: center;
  padding: 10px;
  color: #D1D5DB;
  background-color: #1F2937;
  border-radius: 8px;
}
.aufträge[data-v-026a77c0] {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  min-height: 100px;
  min-width: 100%;
}
.out-auftrag[data-v-026a77c0] {
  flex: 1;
  margin: 10px;
}
.auftrag[data-v-026a77c0] {
  margin-bottom: 10px;
  background-color: #1F2937;
  border-radius: 8px;
  padding: 15px;
  color: #D1D5DB;
}
.auftrag-header[data-v-026a77c0] {
  font-size: 1.2rem;
  font-weight: bold;
}
.auftrag-details[data-v-026a77c0] {
  font-size: 1rem;
}
.auftrag[data-v-026a77c0]:hover {
  background-color: #374151;
}
.auftrag.deleted[data-v-026a77c0] {
  background-color: #DC2626;
}
.auftrag.completed[data-v-026a77c0] {
  background-color: #10B981;
}
.ungelistete-aufträge[data-v-026a77c0] {
  width: 100%;
  margin-top: 20px;
  padding: 10px;
  background-color: #1F2937;
  color: #D1D5DB;
  border-radius: 8px;
}
.ungelistete-aufträge h2[data-v-026a77c0] {
  margin-bottom: 10px;
  text-align: center;
}


.gestime[data-v-46ba24b6]{
  color: white;
}
#main-out[data-v-46ba24b6] {
  height: 100vh;
}
.conf-time[data-v-46ba24b6] {
  display: flex;
  align-items: center;
  gap: 40px;
}
.download-button[data-v-46ba24b6] {
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #ffd700; /* Gelb */
  border: none;
  color: black;
  cursor: pointer;
  font-weight: bold;
}
.date-picker[data-v-46ba24b6] {
  padding: 10px;
  font-size: 1rem;
  border-radius: 4px;
  border: 1px solid #374151;
  background-color: #1f2937;
  color: #d1d5db;
}
.worker-select[data-v-46ba24b6] {
  margin: 10px 0;
  padding: 10px;
  font-size: 1rem;
  border-radius: 4px;
  border: 1px solid #374151;
  background-color: #1f2937;
  color: #d1d5db;
}
.time-details[data-v-46ba24b6] {
  margin-top: 20px;
}
.time-entry[data-v-46ba24b6] {
  margin-bottom: 10px;
}
.monthly-total[data-v-46ba24b6] {
  margin-top: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
}


/* Ihr vorhandenes CSS */


.options[data-v-2e95a972]{
  background-color: #6B7280;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 10px;
}
.back-button[data-v-2e95a972] {
  position: absolute;
  left: 0;
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #1f2937; /* Dunklerer Hintergrund */
  text-decoration: none;
  color: #d1d5db; /* Heller Text */
  transition: background-color 0.3s;
}
.back-button[data-v-2e95a972]:hover {
  background-color: #374151; /* Hellere Hover-Farbe */
}
.main-out[data-v-2e95a972] {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #111827; /* Dunkler Hintergrund */
  color: #D1D5DB; /* Heller Text */
  font-family: 'Inter', sans-serif;
  padding: 20px;
  box-sizing: border-box;
}

/* Header-Stile */
.header[data-v-2e95a972] {
  text-align: center;
}
.header h1[data-v-2e95a972] {
  font-size: 2rem;
  color: #F3F4F6; /* Heller Text */
}
.menue[data-v-2e95a972] {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 15px;
}
.option[data-v-2e95a972] {
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #1F2937; /* Dunkler Hintergrund */
  text-decoration: none;
  color: #D1D5DB; /* Heller Text */
  transition: background-color 0.3s;
}
.option[data-v-2e95a972]:hover {
  background-color: #374151; /* Hellere Hover-Farbe */
}
#selected[data-v-2e95a972] {
  outline: 2px solid #3B82F6; /* Blaue Umrandung */
}

/* Aufträge Container */
.aufträge[data-v-2e95a972] {
  width: 100%;
  max-width: 800px; /* Größere Maximalbreite */
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr; /* Einspaltiges Layout */
  gap: 15px;
}

/* Einzelne Aufträge */
.auftrag[data-v-2e95a972] {
  background-color: #1F2937; /* Dunkler Hintergrund */
  border-radius: 8px;
  padding: 20px;
  transition: transform 0.3s, background-color 0.3s;
  cursor: move;
}
.auftrag[data-v-2e95a972]:hover {
  transform: translateY(-3px);
  background-color: #374151; /* Hellere Hover-Farbe */
}
.auftrag.deleted[data-v-2e95a972] {
  background-color: #DC2626; /* Rote Farbe für gelöschte Aufträge */
  opacity: 0.8;
}
.auftrag.completed[data-v-2e95a972] {
  background-color: #10B981; /* Grüne Farbe für erledigte Aufträge */
  opacity: 0.8;
}

/* Auftrag Details */
.auftrag-content[data-v-2e95a972] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auftrag-title[data-v-2e95a972] {
  font-size: 1.5rem;
  font-weight: 600;
}
.address[data-v-2e95a972],
.time[data-v-2e95a972],
.dauer[data-v-2e95a972],
.email[data-v-2e95a972],
.phone[data-v-2e95a972],
.date[data-v-2e95a972] {
  font-size: 1rem;
}

/* Schaltflächen Container */
.button-container[data-v-2e95a972] {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* Schaltflächen */
button[data-v-2e95a972] {
  padding: 8px 15px;
  border-radius: 5px;
  border: none;
  font-size: 1rem;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}
.edit-btn[data-v-2e95a972] {
  background-color: #3B82F6; /* Blaue Farbe */
}
.edit-btn[data-v-2e95a972]:hover {
  background-color: #2563EB; /* Dunklere blaue Farbe */
}
.delete-btn[data-v-2e95a972] {
  background-color: #EF4444; /* Rote Farbe */
}
.delete-btn[data-v-2e95a972]:hover {
  background-color: #DC2626; /* Dunklere rote Farbe */
}
.restore-btn[data-v-2e95a972] {
  background-color: #10B981; /* Grüne Farbe */
}
.restore-btn[data-v-2e95a972]:hover {
  background-color: #059669; /* Dunklere grüne Farbe */
}
.complete-btn[data-v-2e95a972] {
  background-color: #10B981; /* Grüne Farbe */
}
.complete-btn[data-v-2e95a972]:hover {
  background-color: #059669; /* Dunklere grüne Farbe */
}
.remove-btn[data-v-2e95a972] {
  background-color: #0f5740; /* Graue Farbe */
}
.remove-btn[data-v-2e95a972]:hover {
  background-color: #4B5563; /* Dunklere graue Farbe */
}

/* Modal Overlay */
.modal-overlay[data-v-2e95a972] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Halbtransparenter dunkler Hintergrund */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Modal Fenster */
/* Modal Fenster */
.modal[data-v-2e95a972] {
  background-color: #1F2937;
  padding: 30px;
  border-radius: 10px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh; /* Maximale Höhe auf 80% der Bildschirmhöhe setzen */
  overflow-y: auto; /* Scrollen ermöglichen, wenn der Inhalt zu groß ist */
}
.modal h2[data-v-2e95a972] {
  font-size: 1.75rem;
  margin-bottom: 20px;
  color: #F3F4F6; /* Heller Text */
}
.modal label[data-v-2e95a972] {
  display: block;
  margin-bottom: 15px;
  color: #D1D5DB; /* Heller Text */
}
.modal input[data-v-2e95a972],
.modal textarea[data-v-2e95a972] {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #374151;
  background-color: #111827; /* Sehr dunkler Hintergrund */
  color: #F3F4F6; /* Heller Text */
  font-size: 1rem;
}
.modal-buttons[data-v-2e95a972] {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* Modal Schaltflächen */
.modal-buttons button[data-v-2e95a972] {
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  font-size: 1rem;
  color: white;
  cursor: pointer;
}
.modal-buttons button[data-v-2e95a972]:first-child {
  background-color: #3B82F6; /* Blaue Farbe */
}
.modal-buttons button[data-v-2e95a972]:first-child:hover {
  background-color: #2563EB; /* Dunklere blaue Farbe */
}
.cancel-btn[data-v-2e95a972] {
  background-color: #6B7280; /* Graue Farbe */
}
.cancel-btn[data-v-2e95a972]:hover {
  background-color: #4B5563; /* Dunklere graue Farbe */
}

/* Aktions-Schaltflächen */
.actions[data-v-2e95a972] {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}
.add-btn[data-v-2e95a972] {
  background-color: #3B82F6;
}
.add-btn[data-v-2e95a972]:hover {
  background-color: #2563EB;
}
.submit-btn[data-v-2e95a972] {
  background-color: #10B981;
}
.submit-btn[data-v-2e95a972]:hover {
  background-color: #059669;
}

/* Stil für das Input-Feld */
.search-input[data-v-2e95a972] {
  margin-top: 20px;
  width: 100%;
  max-width: 400px;
  padding: 10px 15px;
  border-radius: 8px;
  border: 1px solid #374151; /* Dunkler Rand */
  background-color: #1F2937; /* Dunkler Hintergrund */
  color: #F3F4F6; /* Heller Text */
  font-size: 1rem;
  transition: border-color 0.3s;
  box-sizing: border-box;
}
.search-input[data-v-2e95a972]::-moz-placeholder {
  color: #9CA3AF; /* Hellere Farbe für Platzhaltertext */
}
.search-input[data-v-2e95a972]::placeholder {
  color: #9CA3AF; /* Hellere Farbe für Platzhaltertext */
}
.search-input[data-v-2e95a972]:focus {
  outline: none;
  border-color: #3B82F6; /* Blaue Farbe bei Fokus */
}