/* === GLOBALER HEADER UND MENÜ === */
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap");
@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
.overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
  transition: backdrop-filter 0.3s;
}

.overlay.blur {
  backdrop-filter: blur(3px);

}

.info-banner {
  display: flex;
  align-items: center;           /* ✅ mittig, nicht oben */
  gap: 1rem;
  position: fixed;
  top: 6rem;
  right: 0.0rem;
  z-index: 1000;
  background-color: #fff;
  color: #000;
  padding: 1rem;
  border-left: 6px solid #ffc107;
  border-bottom: 6px solid #ffc107;
  border-radius: 8px;
  font-size: 1rem;
  min-width: 300px;
  max-width: 90vw;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  animation: slideInRight 0.3s ease-out forwards;
}

.hint-icon {
  font-size: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: transparent;
  margin: 0; /* ⬅️ keine zusätzliche Höhe */
}



@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.hidden {
  display: none;
}
/* === Header und Menü wie ursprünglich === */
body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    background: #f0f4f8;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

header {
    background-color: #007BFF;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    position: relative;
  }
  
  .logo {
    font-weight: bold;
    font-size: 1.5rem;
  }
  
  .menu {
    position: relative;
  }

  .dropdown-section-admin {
    font-weight: bold;
    font-size: 0.9rem;
    padding: 0.5rem 1rem 0.25rem;
    color: rgb(235, 235, 235);
    background: #bd4040;
    border-top: 1px solid #eee;
  }
  .dropdown-section-user {
    font-weight: bold;
    font-size: 0.9rem;
    padding: 0.5rem 1rem 0.25rem;
    color: rgb(235, 235, 235);
    background: #4b48ff;
    border-top: 1px solid #eee;
  }
  .dropdown-section-info {
    font-weight: bold;
    font-size: 0.9rem;
    padding: 0.5rem 1rem 0.25rem;
    color: rgb(235, 235, 235);
    background: #1b970a;
    border-top: 1px solid #eee;
  }
  #menu-button {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
  }
  
  .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    min-width: 160px;
    z-index: 1000;
  }
  
  .dropdown a {
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: #333;
    font-size: 1.2rem;
    border-bottom: 1px solid #eee;
  }
  
  .dropdown a:last-child {
    border-bottom: none;
  }
  
  .dropdown a:hover {
    background-color: #f0f0f0;
  }
  
  .hidden {
    display: none;
  }

  .material-symbols-outlined {
    
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* anpassbar */
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    padding-right:10px;
    display: flex;
    vertical-align: bottom; /* 👈 DAS ist entscheidend */
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }
  
  /* === DASHBOARD-SPEZIFISCH === */
  .dashboard-card {
    border: 1px solid #ccc;
    border-left: 4px solid rgb(0, 255, 98);
    border-radius: 8px;
    background: #fff;
    padding: 1rem;
    margin-bottom: 1.5rem;
    margin-right:1rem;
    margin-left:1rem;
  }

  .dashboard-card.expired {
    border-left: 4px solid #007bff; /* blau statt grün */
  }
  
  .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #004a99;
    cursor: pointer;
  }

  .dashboard-card.inaktiv {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    background-color: #eeeeee;
    border-left: 4px solid #999;
  }

  .dashboard-card.expired {
    border-left: 6px solid #dc3545;  /* Bootstrap-Rot */
    border-bottom: 4px solid #dc3545;
    background-color: #fff5f5;       /* leicht rötlicher Hintergrund */
  }


  .dashboard-title {
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }
  
  .dashboard-title .dashboard-count {
    font-weight: normal;
    font-size: 0.95rem;
    color: #666;
    margin-left: 0.5rem;
  }
  
  .dashboard-info-icon {
    font-size: 1.2rem;
  }
  
  .dashboard-body {
    display: none;
    margin-top: 0.75rem;
    border-top: 1px solid #ddd;
    padding-top: 0.5rem;
  }
  
  .dashboard-card.open .dashboard-body {
    display: block;
  }
  
  .dashboard-scroll {
    max-height: 300px;
    min-height: 220px;
    overflow-y: auto;
    padding-right: 0.5rem;
  }
  
  .dashboard-actions {
    text-align: left;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }
  
  .dashboard-actions span,
  .dashboard-actions a {
    margin-left: 0rem;
    cursor: pointer;
    text-decoration: none;
  }
  
  .dashboard-description p {
    margin: 0.5rem 0;
    line-height: 1.4;
  }
  
  .dashboard-details {
    font-size: 0.95rem;
  }
  
  .dashboard-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    font-weight: bold;
    border-top: 1px solid #ccc;
    padding-top: 0.5rem;
  }
  
  .dashboard-status {
    font-weight: normal;
    color: #333;
  }
  
  .dashboard-inactive {
    color: red;
  }
  
  .dashboard-empty-message {
    text-align: center;
    margin-top: 2rem;
    color: #666;
    font-style: italic;
  }


  /* Button zum Öffnen */

  
  .dashboard-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  
  .dashboard-dropdown {
    position: relative;
  }
  
  .dropdown-toggle {
    background: #007bff;
    color: white;
    padding: 0.4rem 0.8rem;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
  }
  
  .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    min-width: 180px;
    flex-direction: column;
  }
  
  .dropdown-menu a {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #eee;
  }
  
  .dropdown-menu a:last-child {
    border-bottom: none;
  }
  
  .dropdown-menu a:hover {
    background-color: #f0f0f0;
  }
  
  .dropdown-menu:not(.hidden) {
    display: flex;
  }
  
  .dashboard-shortcuts a {
    padding: 0.3rem 0.6rem;
    text-decoration: none;
    font-size: 1,5rem;
    margin-left: 0rem;
  }
  .dashboard-action-bar .dashboard-shortcuts {
    margin-left: auto; /* erzwingt rechtsbündig */
    display: flex;
    gap: 0.0rem;
  }


  
  .dashboard-shortcuts a:hover {
    background: #dceeff;
  }
  
  .hidden {
    display: none;
  }


  .dashboard-overlay-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  .dashboard-overlay-content-scrollable {
    background: #fff;
    width: 90%;
    max-width: 700px;
    max-height: 90%;
    border-radius: 1rem;
    overflow-y: auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
    padding: 1.5rem;
  }
  
  .dashboard-overlay-inner {
    font-size: 0.95rem;
    color: #333;
  }
  
  .dashboard-overlay-title {
    margin-top: 0;
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }
  
  .dashboard-example-block {
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 0.5rem;
    font-family: monospace;
    white-space: pre-wrap;
    line-height: 1.4;
    font-size: 0.9rem;
  }











  
  
  /* === AUFGABEN-KNOPF OBEN RECHTS === */
  .my-tasks-toolbar {
    text-align: right;
    padding: 1.5rem 0.5rem 0 0.5rem;
  }
  
  .my-tasks-toolbar button {
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.6rem 3rem;
    font-weight: bold;
    cursor: pointer;
  }
  /* === Tasklist Grundlayout === */
.tasklist-section {
    max-width: 800px;
    margin: auto;
    padding: 1rem;
  }


  
  .tasklist-header-summary {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem;
    border-left: 4px solid #007bff;
    background-color: #f8f9fa;
  }
  
  /* === Tabelle === */
  .tasklist-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
  }
  
  .tasklist-table th,
  .tasklist-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
  }
  
  .tasklist-table th {
    background-color: #f1f1f1;
    font-weight: bold;
    text-align: left;
  }
  
  .tasklist-table .tasklist-date-row td {
    font-weight: bold;
    padding-top: 1.25rem;
    background: #f9f9f9;
    border-bottom: none;
  }
  
  /* === Aufgabenbeschreibung === */
  .tasklist-summary details {
    margin-bottom: 0.5rem;
  }
  
  .tasklist-summary summary {
    font-weight: bold;
    cursor: pointer;
  }
  
  .tasklist-summary p {
    margin: 0.5rem 0 0 0;
  }
  
  .tasklist-type-icon {
    margin-right: 0.5rem;
    font-size: 1.2rem;
  }
  
  /* === Checkbox + Auswahl === */
  .tasklist-checkbox {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  .tasklist-row.task-claimed {
    background-color: #eefaf0; /* leicht grünlich oder wie gewünscht */
    cfont-style: italic;
    opacity: 0.8;
  }

  .tasklist-row.selected {
    background-color: #d1e7dd !important;
    font-weight: bold;
  }

  

  .tasklist-row {
    background-color: #fff;
    transition: background-color 0.2s ease;
  }
  .tasklist-dateline {
    font-weight: bold;
    background-color: #f2f2f2;
    text-align: left;
    padding: 0.5rem;
    border-top: 2px solid #ccc;
  }

  
  /* === Buttons === */

  
  .tasklist-button.cancel {
    background-color: #ddd;
  }
  
  .tasklist-button.submit {
    background-color: #007bff;
    color: white;
  }
  
  .delete-button {
    background-color: #dc3545;
    color: white;

  }
  

  /* === Aufgabenzeile: Name + Zeit + aufklappbare Beschreibung === */
.tasklist-taskinfo {
  padding-top: 0.25rem;
}

.tasklist-taskrow {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  background: transparent;
  border-radius: 4px;
  padding: 0.25rem 0.25rem 0.5rem 0;
}

.tasklist-taskname {
  font-weight: bold;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tasklist-time {
  font-size: 0.9rem;
  color: #555;
  margin-top: 0.1rem;
}

.tasklist-info-icon {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.2rem;
  cursor: pointer;
}

.tasklist-description {
  font-size: 0.9rem;
  color: #333;
  margin-top: 0.5rem;
  line-height: 1.3;
}

.hidden {
  display: none;
}




/* Tabellenkopf: Schrift größer, Icons passend */
.tasklist-headline {
    font-size: 1.25rem;
    font-weight: bold;
    vertical-align: middle;
    display: inline-block;
  }

  .tasklist-plus-wrapper {
    font-size: 1.5rem;
    text-align: left;
    user-select: none;
    line-height: 1;
    padding: 0;
  } 
  
  /* Info-Icon rechtsbündig */
  .tasklist-global-info {
    font-size: 1.5rem;
    float: right;
    cursor: pointer;
    vertical-align: middle;
  }
  
  /* Plus-Icon links, zentriert im TH */
  .tasklist-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
  }
  
  .tasklist-button {
    min-width: 120px;
    padding: 0.6rem 2rem;
    font-size: 1rem;
    border-radius: 6px;
    font-weight: bold;
    border: none;
    cursor: pointer;
  }
  
  .tasklist-button.cancel {
    background-color: #ddd;
    color: #000;
  }
  
  .tasklist-button.submit {
    background-color: #007bff;
    color: white;
  }

  /* === TASKCARD – Abschnitt und Überschrift === */
.taskcard-section {
    margin-bottom: 2rem;
    padding: 0.5rem 0;
  }
  
  .taskcard-heading {
    font-size: 1.2rem;
    font-weight: bold;
    border-left: 4px solid #007bff;
    padding-left: 0.5rem;
    margin-bottom: 0.8rem;
  }
  
  /* === TASKCARD – Datumsgliederung === */
  .taskcard-dateblock {
    margin-bottom: 1.2rem;
  }
  
  .taskcard-dateheading {
    font-size: 1rem;
    font-weight: bold;
    color: #444;
    border-bottom: 1px solid #ccc;
    margin-bottom: 0.4rem;
    padding-bottom: 0.2rem;
  }
  
  /* === TASKCARD – Aufgabenzeile === */
  .taskcard-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 0.6rem 0.5rem;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 0.4rem;
  }
  
  .taskcard-info {
    font-size: 0.95rem;
    line-height: 1.3;
  }
  
  .taskcard-remove {
    font-size: 1.3rem;
    color: #900;
    cursor: pointer;
    padding-left: 1rem;
  }
  
  /* === TASKCARD – Buttonleiste (2 Buttons, keine Löschen-Funktion) === */
  .taskcard-buttons.two-cols {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
  }
  
  .taskcard-buttons.two-cols .taskcard-button {
    flex: 1;
    min-width: 120px;
    padding: 0.6rem 2rem;
    font-size: 1rem;
    border-radius: 6px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    text-align: center;
  }
  
  .taskcard-button.cancel {
    background-color: #ddd;
    color: #000;
  }
  
  .taskcard-button.submit {
    background-color: #007bff;
    color: white;
  }



  /* EVENTSTATUS */
  /* === EVENTSTATUS – SPEZIFISCHE STYLES === */
/* === EVENTSTATUS – SPEZIFISCHE STYLES === */

.eventstatus-task-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.75rem; /* vertikaler Abstand zwischen Tasks */
    margin-top: 1rem;
    padding: 0 1rem; /* horizontaler Außenabstand zur Tabelle */
  }
  
  .eventstatus-date-heading {
    font-weight: bold;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    color: #444;
    border-bottom: 1px solid #ccc;
    background-color: white;
  }
  
  .eventstatus-task-row {
    line-height: 1.6;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #ffffff;
    overflow: hidden;
  }
  
  /* Linke Spalte: Name, Uhrzeit, Beschreibung */
  .eventstatus-task-row td:first-child {
    vertical-align: top;
    padding: 1rem;
  }
  
  /* Rechte Spalte: Teilnehmer */
  .eventstatus-task-row td:last-child {
    padding:0.25rem 0.25rem 0.25rem 0.25rem;
    text-align: center;
    /*white-space: nowrap;*/
    vertical-align: top;
  }
  
  /* Statusanzeige */
  .eventstatus-ok {
    color: green;
  }
  
  .eventstatus-missing {
    color: red;
  }
  
  .eventstatus-label {
    font-weight: normal;
    font-size: 0.95rem;
    margin-left: 0.25rem;
  }
  
  /* Zeit und Beschreibung */
  .eventstatus-time {
    font-size: 0.9rem;
    color: #333;
    margin-top: 0.25rem;
  }
  
  .eventstatus-desc {
    font-size: 0.9rem;
    color: #444;
    margin-top: 0.25rem;
  }
  
  /* Teilnehmerliste */
  .eventstatus-assignees {
    text-align: center;
    font-weight: bold;
    border-left: 2px solid #ddd; /* 👈 dezente Linie */
    padding-left: 0.75rem;
  }
  
  .eventstatus-assignees div {
    margin: 0.2rem 0;
  }
  
  .eventstatus-assignees .unbesetzt {
    color: rgb(255, 97, 77);
    font-size: 1rem;
  }
  .eventstatus-section {
    max-width: 800px;
    margin: auto;
    padding: 1rem;
  }



  
/* === EVENTSTATUS – SPEZIFISCH === */

.eventstatus-section {
    max-width: 800px;
    margin: auto;
    padding: 1rem;
  }
  
  .eventstatus-task-block {
    margin-bottom: 1.5rem;
  }
  
  .eventstatus-task-table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .eventstatus-task-table td:last-child {
    width: 200px;
    vertical-align: top;
    word-break: break-word;
  }
  
  .eventstatus-task-header td {
    text-align: right;
  }
  
  .eventstatus-ok {
    color: green;
  }
  
  .eventstatus-missing {
    color: red;
  }
  
  .eventstatus-label {
    font-weight: normal;
    font-size: 0.95rem;
    margin-left: 0.25rem;
  }
  
  .eventstatus-time {
    font-size: 0.9rem;
    color: #333;
    margin-top: 0.25rem;
  }
  
  .eventstatus-desc {
    font-size: 0.9rem;
    color: #444;
    margin-top: 0.25rem;
  }
  
  .eventstatus-assignees {
    text-align: center;
  }
  
  .eventstatus-assignees div {
    margin: 0.2rem 0;
  }
  

  /* Zeile 1: Kopfzeile (colspan=2) – linksbündig */
.eventstatus-task-header td {
    text-align: left !important;
  }
  
  /* Zeile 2: linke Spalte – linksbündig */
  .eventstatus-task-footer td:first-child {
    text-align: left;
    padding: 0rem 0rem 0.25rem 0.25rem;;
  }
  
  /* Zeile 2: rechte Spalte – mittig */
  .eventstatus-task-footer td:last-child {
    text-align: center;
  }
  /* === EVENTSTATUS – BUTTONS === */

.eventstatus-button-layout {
    width: 100%;
    margin-top: 2rem;
    border-collapse: collapse;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .eventstatus-button-layout td {
    padding: 0.5rem;
    vertical-align: middle;
  }
  
  .eventstatus-button-layout td.left {
    text-align: left;
    width: 33%;
  }
  
  .eventstatus-button-layout td.center {
    text-align: center;
    width: 34%;
  }
  
  .eventstatus-button-layout td.right {
    text-align: right;
    width: 33%;
  }
  
  .eventstatus-button {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    max-width: 180px;
  }
  
  .eventstatus-button.cancel {
    background-color: #ccc;
    color: #000;
  }
  
  .eventstatus-button.submit {
    background-color: #28a745;
    color: white;
  }

  .eventstatus-buttons.two-cols {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  .eventstatus-dateline {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    color: #444;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.25rem;
  }

  .eventstatus-assigned-user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0;
  }
  
  .eventstatus-assigned-name {
    text-align: left;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .eventstatus-assigned-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
  
  .eventstatus-status-indicator {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
    background: none;
  }

  
  
  /* Statusfarben */
  .eventstatus-status-open {
    background-color: white;
  }
  .eventstatus-status-inprogress {
    background-color: #ffeb3b;
    border-color: #ffca28;
  }
  .eventstatus-status-closed {
    background-color: #4caf50;
    border-color: #388e3c;
  }
  
  .eventstatus-assigned-remove {
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.6;
  }
  
  .eventstatus-assigned-remove:hover {
    color: red;
    opacity: 1;
  }

  /* === CREATE LIST FORMULAR === */
  .createlist-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
  }
  
  /* Untergruppen für schmale Felder (z. B. Start + Ende) */
  .createlist-form-row > .createlist-input-group {
    flex: 1 1 0;
    min-width: 200px;
  }
  .createlist-input-group {
    display: block;
    position: relative;
    margin-top: 1.5rem;
  }
  

  .createlist-input-group input,
  .createlist-input-group textarea,
  .createlist-input-group select {
    width: 100%;
    padding: 1rem 0.5rem 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    box-sizing: border-box;
  }
  .createlist-input-group label {
    position: absolute;
    left: 0.5rem;
    top: 1rem;
    font-weight: bold;
    pointer-events: none;
    transition: all 0.2s ease;
    background-color: white;
    padding: 0 0.25rem;
    color: #777;
  }
  .createlist-input-group input:focus + label,
  .createlist-input-group input:not(:placeholder-shown) + label,
  .createlist-input-group textarea:focus + label,
  .createlist-input-group textarea:not(:placeholder-shown) + label,
  .createlist-input-group select:focus + label,
  .createlist-input-group select:not(:placeholder-shown) + label {
    top: -0.6rem;
    font-size: 0.85rem;
    color: #333;
  }
  
  .createlist-scrollbox {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 0.5rem;
    margin-top: 0.5rem;
    width: 100%;
    box-sizing: border-box;
  }
  .createlist-scrollbox label {
    display: block;
    line-height: 1.4;
    padding: 0.25rem 0;
  }
  
  .xxxcreatelist-task-preview {
    border: 1px solid #ccc;
    padding: 0.8rem;
    margin-top: 0.5rem;
    position: relative;
  }
  .xxxcreatelist-task-preview .createlist-remove-task {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    cursor: pointer;
  }
  
  /* Buttons */
  .createlist-submit-button {
    background-color: #28a745;
    color: white;
    padding: 0.75rem 1.25rem;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
  .createlist-cancel-button {
    background-color: #ccc;
    color: black;
    padding: 0.75rem 1.25rem;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
  
  /* Button-Layout */
  .createlist-button-layout {
    width: 100%;
    margin-top: 2rem;
    border-collapse: collapse;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  .createlist-button-layout td {
    padding: 0.5rem;
    vertical-align: middle;
  }
  .createlist-button-layout td.left {
    text-align: left;
    width: 33%;
  }
  .createlist-button-layout td.center {
    text-align: center;
    width: 34%;
  }
  .createlist-button-layout td.right {
    text-align: right;
    width: 33%;
  }
  .createlist-input-group input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: #007bff; /* oder dein Theme-Farbton */
  }


  /* Container für Vorschau-Elemente */
  /* Container für mehrere Vorschau-Blöcke */
/* --- TASK PREVIEW BLOCK (aus editlist, umbenannt für createlist) --- */
.createlist-task-preview {
    border: 1px solid #ccc;
    padding: 0.8rem;
    margin-top: 0.5rem;
    position: relative;
    background-color: #fff;
    border-radius: 6px;
    flex: 1 1 300px;
  }
  
  /* ✏️ Edit-Icon */
  .createlist-task-preview .createlist-edit-task {
    position: absolute;
    top: 0.5rem;
    right: 2.2rem;
    cursor: pointer;
    font-size: 1.2rem;
    color: #555;
  }
  .createlist-task-preview .createlist-edit-task:hover {
    color: #222;
  }
  
  /* 🗑️ Entfernen-Icon */
  .createlist-task-preview .createlist-remove-task {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    cursor: pointer;
    font-size: 1.2rem;
    color: #c00;
  }
  .createlist-task-preview .createlist-remove-task:hover {
    color: #900;
  }

  .createlist-inline-checkbox {
    display: flex;
    align-items: center;
  }
  
  .createlist-inline-checkbox label {
    margin: 0;
  }

  .createlist-openattend-group {
    margin-bottom: 0rem;
    background-color: white;
    border: 1px solid #ccc;
    padding: 0.75rem;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
  }




/* EDITLIST-FORMULAR */

.editlist-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
  }
  .editlist-form-row > .editlist-input-group {
    flex: 1 1 250px;
    min-width: 180px;
  }
  
  .editlist-input-group {
    display: block;
    position: relative;
    margin-top: 1.5rem;
  }
  .editlist-input-group input,
  .editlist-input-group textarea,
  .editlist-input-group select {
    width: 100%;
    padding: 1rem 0.5rem 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    box-sizing: border-box;
  }
  .editlist-input-group label {
    position: absolute;
    left: 0.5rem;
    top: 1rem;
    font-weight: bold;
    pointer-events: none;
    transition: all 0.2s ease;
    background-color: white;
    padding: 0 0.25rem;
    color: #777;
  }
  .editlist-input-group input:focus + label,
  .editlist-input-group input:not(:placeholder-shown) + label,
  .editlist-input-group textarea:focus + label,
  .editlist-input-group textarea:not(:placeholder-shown) + label,
  .editlist-input-group select:focus + label,
  .editlist-input-group select:not(:placeholder-shown) + label {
    top: -0.6rem;
    font-size: 0.85rem;
    color: #333;
  }
  
  /* Scrollbox für Helferliste */
  .editlist-scrollbox {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 0.5rem;
    margin-top: 0.5rem;
    width: 100%;
    box-sizing: border-box;
  }
  .editlist-scrollbox label {
    display: block;
    line-height: 1.4;
    padding: 0.25rem 0;
  }

  .editlist-dropzone {
    border: 2px dashed #ccc;
    padding: 1rem;
    text-align: center;
    background: #f9f9f9;
    border-radius: 8px;
    transition: background 0.2s, border-color 0.2s;
  }
  .editlist-dropzone.dragover {
    background-color: #e0f7fa;
    border-color: #007acc;
  }
  
  /* TASK-VORSCHAU-KARTEN */

/* Standard: zwei Spalten */
#taskList {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

#taskList .editlist-task-preview {
  flex: 1 1 300px;
  box-sizing: border-box;
}

/* Einspaltig bei Toggle */
#taskList.editlist-single-column {
  flex-direction: column;
}

#taskList.editlist-single-column .editlist-task-preview {
  flex: 1 1 100%;
}


.editlist-move-controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}



.editlist-move-btn {
  font-size: 1.2rem;
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
  min-width: 2.5rem;
}

.editlist-move-btn:hover {
  background-color: #ddd;
}

.editlist-move-btn:first-child {
  margin-right: auto;
}

.editlist-move-btn:last-child {
  margin-left: auto;
}

.editlist-task-preview > div:last-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}




  #xtaskList {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
  }
  .editlist-task-preview {
    flex: 1 1 300px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0.8rem 1rem;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    line-height: 1.4;
  }
  .editlist-task-preview .editlist-remove-task {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    cursor: pointer;
    font-size: 1.2rem;
    color: #c00;
  }
  .editlist-task-preview .editlist-remove-task:hover {
    color: #900;
  }
  .editlist-task-preview .editlist-edit-task {
    position: absolute;
    top: 0.5rem;
    right: 2.2rem;
    cursor: pointer;
    font-size: 1.2rem;
    color: #555;
  }
  .editlist-task-preview .editlist-edit-task:hover {
    color: #222;
  }
  
  /* BUTTONS */
  .editlist-submit-button {
    background-color: #28a745;
    color: white;
    padding: 0.5rem 0.5rem;
    font-weight: bold;
    font-size:1.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }

  .editlist-submit-main--button {
    background-color: #28a745;
    color: white;
    padding: 0.5rem 0.5rem;
    font-weight: bold;
    font-size:1.1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
  .editlist-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
  }
  
  .editlist-button-row button {
    flex: 1 1 0;
    min-width: 2rem;
    text-align: center;
  }

  .editlist-cancel-main-button {
    background-color: #ccc;
    color: black;
    padding: 0.5rem 0.5rem;
    font-weight: bold;
    font-size:1.1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }

  .editlist-cancel-button {
    background-color: #ccc;
    color: black;
    padding: 0.5rem 0.5rem;
    font-weight: bold;
    font-size:1.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }

  a.editlist-cancel-button {
    text-decoration: none;
    display: inline-block; /* für sauberes Button-Verhalten */
  }

  .editlist-delete-button {
    background-color: rgb(255, 0, 0);
    color: rgb(255, 255, 255);
    padding: 0.5rem 0.5rem;
    font-weight: bold;
    font-size:1.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }

  .editlist-button-layout {
    width: 100%;
    margin-top: 2rem;
    border-collapse: collapse;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  .editlist-button-layout td {
    padding: 0.5rem;
    vertical-align: middle;
  }
  .editlist-button-layout td.editlist-button2-left {
    text-align: left;
    width: 33%;
  }
  .editlist-button-layout td.editlist-button2-right {
    text-align: right;
    width: 33%;
  }
  .editlist-input-group input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: #007bff;
  }
  
  .editlist-openattend-group {
    margin-bottom: 0rem;
    background-color: white;
    border: 1px solid #ccc;
    padding: 0.75rem;
    border-radius: 0.4rem;
  }    

  #taskList {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
  }
  
  /* Task-Karte */
  .editlist-task-preview {
    flex: 1 1 320px;
    background: linear-gradient(to bottom right, #f8fbff, #eaf1ff);
    border: 1px solid #c2d8ff;
    border-radius: 8px;
    padding: 1rem;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    line-height: 1.4;
    transition: transform 0.2s ease;
  }
  .editlist-task-preview:hover {
    transform: scale(1.01);
  }
  
  .editlist-task-preview strong {
    font-size: 1.05rem;
    color: #003366;
    display: block;
    margin-bottom: 0.25rem;
  }
  
  .editlist-task-preview p {
    margin: 0.2rem 0;
    font-size: 0.95rem;
  }
  
  /* Entfernen-Icon */
  .editlist-task-preview .editlist-remove-task {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    cursor: pointer;
    font-size: 1.2rem;
    color: #c00;
  }
  .editlist-task-preview .editlist-remove-task:hover {
    color: #900;
  }
  
  /* Optional: Edit-Icon */
  
  .editlist-task-preview .editlist-edit-task {
    position: absolute;
    top: 0.5rem;
    right: 2.2rem;
    cursor: pointer;
    font-size: 1.2rem;
    color: #666;
  }
  .editlist-task-preview .editlist-edit-task:hover {
    color: #222;
  }
  .editlist-button2-left {
    text-align: left;
    width: 33%;
  }

  .editlist-button2-right {
    text-align: right;
    width: 33%;
  }

  details.editlist-block {
    border: 1px solid #ccc;
    background: #f8f9ff;
    border-left: 6px solid #007bff;
    border-radius: 8px;
    padding: 1rem 1rem 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
  }
  details.editlist-block summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    margin: -1rem -1rem 0.75rem;
    padding: 0.75rem 1rem;
    background-color: #e0ecff;
    border-bottom: 1px solid #ccc;
    border-radius: 6px 6px 0 0;
    list-style: none;
  }

  .editlist-block.static-block {
    border: 1px solid #ccc;
    background: #f8f9ff;
    border-left: 6px solid #007bff;
    border-radius: 8px;
    padding: 1rem 1rem 1rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
  }

  .summary-icon {
    font-size: 1.1rem;
    margin-left: 1rem;
    color: #444;
  }

  .summary-title {
    flex-grow: 1;
  }


  .editlist-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
  }
  
  .editlist-button-row button {
    flex: 1 1 0;
    min-width: 2rem;
    text-align: center;
    padding: 0.5rem 0.5rem;
    font-size: 1.5rem;
    border-radius: 6px;
    font-weight: bold;
    border: none;
    cursor: pointer;
  }
  .editlist-task-header {
    display: flex;
    align-items: center; /* vertikale Zentrierung */
    gap: 8px;
  }
  
  .editlist-prio-dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: gray;
    flex-shrink: 0;
    margin-bottom: 0.4rem;
  }
  
  /* Prio-Farben */
  .editlist-prio-hoch {
    background-color: red;
  }
  
  .editlist-prio-normal {
    background-color: orange;
  }
  
  .editlist-prio-optional {
    background-color: gray;
  }
/* === Benutzerliste === */
/* === ADMINUSER – Eingabegruppen === */

.adminuser-input-group {
    display: block;
    position: relative;
    margin-top: 1.5rem;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
  }
.xxadminuser-input-group {
    display: block;
    position: relative;
    margin-top: 1.5rem;
    background-color: white;
    border: 1px solid #ccc;
    padding: 0.75rem;
    border-radius: 0.4rem;
    margin-bottom: 1.25rem;
  }
  
  .adminuser-input-group input,
  .adminuser-input-group textarea,
  .adminuser-input-group select {
    width: 100%;
    padding: 1rem 0.5rem 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
  }
  
  .adminuser-input-group label {
    position: absolute;
    left: 0.5rem;
    top: 1rem;
    font-weight: bold;
    pointer-events: none;
    transition: all 0.2s ease;
    background-color: white;
    padding: 0 0.25rem;
    color: #777;
  }
  
  .adminuser-input-group input:focus + label,
  .adminuser-input-group input:not(:placeholder-shown) + label,
  .adminuser-input-group textarea:focus + label,
  .adminuser-input-group textarea:not(:placeholder-shown) + label,
  .adminuser-input-group select:focus + label,
  .adminuser-input-group select:not(:placeholder-shown) + label {
    top: -0.6rem;
    font-size: 0.85rem;
    color: #333;
  }
  
  .adminuser-input-group input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: #007bff;
  }
  
  /* === ADMINUSER – Buttonlayout-Tabelle === */
  .adminuser-button-layout {
    width: 100%;
    margin-top: 2rem;
    border-collapse: collapse;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .adminuser-button-layout td {
    padding: 0.5rem;
    vertical-align: middle;
  }
  
  .adminuser-button-layout td.adminuser-left {
    width: 20%;
    text-align: left;
  }
  
  .adminuser-button-layout td.adminuser-center {
    width: 60%;
    text-align: center;
  }
  
  .adminuser-button-layout td.adminuser-right {
    width: 20%;
    text-align: right;
  }
  
  /* === ADMINUSER – Buttons === */
  .adminuser-cancel-button {
    background-color: #ccc;
    padding: 0.75rem 1.25rem;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
  
  .adminuser-submit-button {
    background-color: #28a745;
    color: white;
    padding: 0.75rem 1.25rem;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
  
  .adminuser-delete-button {
    background-color: #dc3545;
    color: white;
    padding: 0.75rem 1.25rem;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
  
  /* === ADMINUSER – Benutzerliste === */
  .adminuser-user-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 1px solid #eee;
  }
  
  .adminuser-user-entry:hover {
    background-color: #f9f9f9;
  }
  
  .adminuser-user-scrollbox {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 0.5rem;
    border-radius: 4px;
    list-style: none;
    margin: 0;
    padding-right: 2rem;
  }
  
  .adminuser-user-email {
    font-weight: normal;
    font-size: 0.9rem;
    color: #555;
  }
  .adminuser-user-nickname {
    font-size: 0.8rem;
    font-style: italic;
    color: #777;
  }
  
  .adminuser-optional-note {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.25rem;
    margin-bottom: 1rem;
  }
  
  .adminuser-remove-task {
    cursor: pointer;
    font-size: 1.3rem;
    color: #dc3545;
  }
  
  .adminuser-remove-task:hover {
    color: #a00;
  }

  .adminuser-form-box {
    border: 1px solid #ccc;
    background: #f8f9ff;
    border-left: 6px solid #007bff;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
  }

  .adminuser-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: default;
    margin: -1rem -1rem 1rem;
    padding: 0.75rem 1rem;
    background-color: #e0ecff;
    border-bottom: 1px solid #ccc;
    border-radius: 6px 6px 0 0;
  }





















  
  /* === MYTASKS – Abschnittscontainer === */
.tasklist-section {
    max-width: 800px;
    margin: auto;
    padding: 1rem;
  }
  
  /* === Tabelle für Aufgabenanzeige === */
  .tasklist-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
  }
  
  .tasklist-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
  }
  
  .tasklist-date-row td {
    font-weight: bold;
    padding-top: 1.25rem;
    background: #f9f9f9;
    border-bottom: none;
  }
  
  /* === Aufgabenzeile (aufklappbar) === */
  .tasklist-taskrow {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    background: transparent;
    border-radius: 4px;
    padding: 0.25rem 0.25rem 0.5rem 0;
  }
  
  .tasklist-taskname {
    font-weight: bold;
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .tasklist-time {
    font-size: 0.9rem;
    color: #555;
    margin-top: 0.1rem;
  }
  
  .tasklist-info-icon {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.2rem;
    cursor: pointer;
  }
  
  /* === Beschreibung (ein-/ausklappbar) === */
  .tasklist-description {
    font-size: 0.9rem;
    color: #333;
    margin-top: 0.5rem;
    line-height: 1.3;
  }
  
  /* === Aufgabenüberschrift (z. B. pro Liste) === */
  .taskcard-heading {
    font-size: 1.2rem;
    font-weight: bold;
    border-left: 4px solid #007bff;
    padding-left: 0.5rem;
    margin-bottom: 0.8rem;
  }
  
  /* === Button-Leiste unten === */
  .tasklist-buttons.two-cols {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
  }
  
  .tasklist-button {
    min-width: 120px;
    padding: 0.6rem 2rem;
    font-size: 1rem;
    border-radius: 6px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    text-align: center;
  }
  
  .tasklist-button.cancel {
    background-color: #ddd;
    color: #000;
  }
  
  .tasklist-button.submit {
    background-color: #007bff;
    color: white;
  }
  
  /* === Utility === */
  .hidden {
    display: none;
  }


  /* Prio-Farben */
  .tasklist-prio-hoch {
    color: red;
    font-weight: bolder;
  }
  
  .tasklist-prio-normal {
   color: rgb(0, 0, 0);
  }
  
  .tasklist-prio-optional {
    color: gray;
  }
  
  /* === Druckspezifisch (optional) === */
  @media print {
    header,
    .tasklist-buttons,
    .menu,
    .logo {
      display: none !important;
    }
  
    .tasklist-description {
      display: block !important;
    }
  }
  

  /* === MYTASKS – Abschnittscontainer === */
/* === MYTASKS: Abschnittstitel === */
.mytasks-eventbox {
  border-left: 4px solid #007acc;
  border-bottom: 4px solid #007acc;
  background: #e9f5ff;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 2rem;
}
.mytasks-headline {
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
    text-align: center;
  }

  .mytasks-remove {
    cursor: pointer;
  }

  .mytasks-remove:hover {
    color: #c00;
    transform: scale(2.1);
  }
  .mytasks-bold {
    font-weight: bold;
  }
  
  /* === MYTASKS: Karten für jede Aufgabe === */
  .mytasks-taskcard {
    margin: 0.75rem 0.25rem; /* oben/unten und etwas seitlich */
    padding: 1rem;
    background-color: #fff; 
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    page-break-inside: avoid;
    break-inside: avoid;
    z-index: 1;         
  }
  
  /* === MYTASKS: Titel der Aufgabe === */
  .mytasks-taskname {
    font-weight: bold;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  /* === MYTASKS: Zeitangabe === */
  .mytasks-time {
    font-size: 0.95rem;
    color: #555;
  }
  
  /* === MYTASKS: Info-Icon (zum Aufklappen) === */
  .mytasks-info-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.2rem;
    cursor: pointer;
    user-select: none;
  }
  
  /* === MYTASKS: Beschreibungstext (ausklappbar) === */
  .mytasks-description {
    font-size: 0.95rem;
    color: #333;
    margin-top: 0.75rem;
    line-height: 1.4;
  }
  
  /* === MYTASKS: Überschrift pro Liste === */
  .mytasks-list-heading {
    font-size: 1.2rem;
    font-weight: bold;
   border-bottom: 4px solid #007bff;
    padding-left: 0.5rem;
    margin: 0rem 0 1rem;
  }
  
  /* === MYTASKS: Versteckt (ausklappen/zusammenklappen) === */
  .mytasks-hidden {
    display: none;
  }
  
  /* === MYTASKS: Buttonleiste (modernes Layout, 2 Spalten) === */
    /* Plus-Icon links, zentriert im TH */
    .mytasks-buttons {
      display: flex;
      justify-content: space-between;
      margin-top: 2rem;
    }
    
    .mytasks-button {
      min-width: 120px;
      padding: 0.6rem 2rem;
      font-size: 1rem;
      border-radius: 6px;
      font-weight: bold;
      border: none;
      cursor: pointer;
    }
    
    .mytasks-button.cancel {
      background-color: #ddd;
      color: #000;
    }
    
    .mytasks-button.submit {
      background-color: #007bff;
      color: white;
    }

  .xmytasks-buttons.two-cols {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* === MYTASKS: Popup Overlay === */
.mytasks-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  
  .mytasks-popup-content {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }
  
  .mytasks-popup textarea {
    width: 100%;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  /* Sicherstellen, dass es versteckt bleibt, bis aktiviert */
  .mytasks-hidden {
    display: none;
  }
  
  .mytasks-desc-row {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 0rem;
  }
  
  .mytasks-desc-row p {
    flex: 1;
    margin: 0rem 1rem 0rem 0rem;
  }

  .mytasks-taskcard.expired {
    opacity: 0.5;
    filter: grayscale(100%);
    pointer-events: none;
  }

  .mytasks-tools.hidden {
    display: none;
  }
  .mytasks-tools {
    background: #f9f9f9;
    border: 1px solid #ccc;
    padding: 0.75rem;
    border-radius: 6px;
  }
  .mytasks-tools-block {
    border-left: 4px solid #007BFF; /* oder die gewünschte Farbe */
    background: #f9f9f9;
    padding: 1rem;
    margin: 0.5rem 0 1.5rem 0;
    border-radius: 6px;
  }
  
  .mytasks-toolblock {
   
    padding: 0.8rem 1rem;
    margin-top: 0.5rem;
    background-color: #f4f4f4;
    border-radius: 4px;
  }

  
  .mytasks-list-heading > div {
    margin: 0;
    padding: 0;
  }
  .mytasks-list-heading.expandable {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /*border-left: 4px solid #007BFF;*/
    padding: 1rem;
    background-color: #feffd2;
    border-radius: 6px;
    margin: 0rem 0 1rem;
  }
  
  .mytasks-heading-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .toolbox-icon {
    cursor: pointer;
    font-size: 1.5rem;
  }
  .mytasks-list-dates {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.2rem;
  }

  .mytasks-dateline {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    font-size: 1.1rem;
    color: #444;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.25rem;
  }
  .mytasks-ics-export {
    text-align: right;
    margin: 2rem 0 1rem;
    font-size: 1.1rem;
  }
  
  .mytasks-ics-export input[type="checkbox"] {
    transform: scale(1.3);
    margin-right: 0.5rem;
    cursor: pointer;
  }
  
  .mytasks-ics-export label {
    cursor: pointer;
    user-select: none;
  }

  .mytasks-status-checkbox {
    margin-left: 1rem;
    transform: scale(1.4);
    cursor: pointer;
    accent-color: #28a745;
  }
  
  .mytasks-task-completed {
    opacity: 0.6;
    text-decoration: line-through;
  }

  .mytasks-status-indicator {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
    background: none;
  }



  
  /* Leeres Kästchen – offen */
  .status-open {
    background-color: #fff;
  }
  
  /* Gelbes Kästchen – in Arbeit */
  .status-inprogress {
    background-color: #ffeb3b;
    border-color: #ffca28;
  }
  
  /* Grünes Kästchen – erledigt */
  .status-closed {
    background-color: #4caf50;
   
    font-weight: bold;
    border-color: #388e3c;
  }
  
  /* Optional: taskcard visuell markieren */
  .task-inprogress {
    background-color: #fffde7;
  }




  /* LOGIN */
  .login-main {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: top;
    background-color: #f0f4f8;
    padding: 2rem;
  }
  
  .login-container {
    max-width: 400px;
    width: 100%;
    text-align: center;
  }
  
  .login-logo {
    width: 100%;
    margin-bottom: 1.0rem;
  }
  
  .login-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }
  
  .login-card h2 {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
  }
  .login-success-message {
    color: green;
    margin-top: 1rem;
    font-size: 0.95rem;
    text-align: center;
  }
  
  
  .login-card input {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  #reset-form input {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.75rem;
    font-size: 1rem;
    border-radius: 4px;
    border: 1px solid #ccc;
  }
  
  #reset-form button {
    margin-top: 1rem;
    padding: 0.75rem;
    font-size: 1rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .login-card button {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .login-error-message {
    color: red;
    margin-top: 1rem;
    font-size: 0.95rem;
  }
  
  .login-header {
    display: none;
  }

  .login-register-link {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.95rem;
  }
  
  .login-register-link a {
    color: #1976d2;
    text-decoration: none;
    font-weight: bold;
  }
  
  .login-register-link a:hover {
    text-decoration: underline;
  }

  .login-ribbon {
    position: fixed;
    top: -40px;
    right: -160px;
    width: 400px;
    height: 60px;
    background-color: #007bff;
    transform: rotate(45deg);
    transform-origin: top left;
    z-index: 0; /* ← korrigiert */
    box-shadow: 0px 12px 18px rgba(0, 0, 0, 1);
    text-align: center;
    line-height: 60px;
    color: white;
    font-weight: bold;
    font-size: 3rem;
    letter-spacing: 3px;
  }
  
  .login-ribbon:hover {
    text-decoration: underline; /* Hover-Unterstreichung */
  }
  
  .ribbon-text {
    margin-left: 55px;
    display: inline-block;
    text-decoration: underline;
  }
 
  /* === Self-Registration Styles === */
  .selfreg-page {
    font-family: 'Open Sans', sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
  }

  /* 🆕 NEUE FORMATIERUNG FÜR HINWEIS-TEXT */
.selfreg-hint {
  margin-top: -0.5rem; /* näher an das Feld rücken */
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: #777;
  font-style: italic;
  padding: 0 0.25rem;
}
  
  .selfreg-main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90vh;
  }
  
  .selfreg-form-section {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
  }
  
  .selfreg-title {
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .selfreg-form label {
    display: block;
    margin: 0.5rem 0 0.25rem;
  }
  
  .selfreg-input {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    border: 1px solid #ccc;
  }
  
  .selfreg-button-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }
  
  .selfreg-button {
    flex: 1;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    background-color: #1976d2;
    color: white;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }
  
  .selfreg-button:hover {
    background-color: #125aa3;
  }
  
  /* === Code Input Styling === */
  .selfreg-code-inputs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0;
  }
  
  .selfreg-code-inputs span {
    margin: 0 0.25rem;
    font-weight: bold;
  }
  
  .selfreg-codebox {
    width: 25%;
    text-align: center;
    padding: 0.5rem;
    font-family: monospace;
    font-size: 1.2rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  /* === Datenschutz-Checkbox === */
  .selfreg-checkbox {
    margin: 1rem 0;
    font-size: 0.95rem;
    line-height: 1.4;
  }
  
  .selfreg-checkbox input[type="checkbox"] {
    transform: scale(1.4);
    margin-right: 0.4rem;
    vertical-align: middle;
  }
  

  .selfreg-password-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  
  .selfreg-password-input {
    flex: 1;
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .selfreg-password-toggle {
    font-size: 1.2rem;
    padding: 0 0.75rem;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .selfreg-password-toggle:hover {
    background-color: #f0f0f0;
    color: #000;
  }
  .selfreg-logo-container {
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .selfreg-logo {
    max-width: 80px;
    height: auto;
    display: inline-block;
  }

  
  /* === BONUSLIST CSS === */
  .bonuslist-section {
    max-width: 900px;
    margin: auto;
    padding: 1rem;
  }
  
  .bonuslist-headline {
    text-align: center;
    font-size: 1.8rem;
    margin-top: 1rem;
  }
  
  .bonuslist-subtitle {
    display: block;
    text-align: left;
    font-size: 1rem;
    color: #444;
    margin-top: 0.25rem;
  }
  



  /* === Aufgabenkarten === */
  .bonuslist-task-block {
    background: #fff;
    border: 1px solid #ccc;
    border-left: 6px solid #007bff;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }
  
  .bonuslist-task-title {
    font-weight: bold;
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 0.75rem;
  }
  
  .bonuslist-task-desc {
    font-size: 0.95rem;
    margin: 0.25rem 0 0.5rem 0;
    color: #555;
    padding-left: 0.5rem;
  }
  
  /* === Benutzer-Zeilenstruktur === */


  .bonuslist-user-row {
    background-color: #f9fbfc;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  
  .bonuslist-user-name {
    font-weight: bold;
    margin-bottom: 2rem;
  }
  
  .bonuslist-user-inputs {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  /* === Inputgruppen (Stunden/Minuten) === */
  .bonuslist-input-group {
    position: relative;
    min-width: 60px;
    flex: 1 1 auto;
    max-width: 100px;
  }
  
  .bonuslist-input-group input {
    width: 100%;
    padding: 1rem 0.5rem 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: white;
    box-sizing: border-box;
  }
  
  .bonuslist-input-group label {
    position: absolute;
    left: 0.5rem;
    top: 1rem;
    font-weight: bold;
    pointer-events: none;
    transition: all 0.2s ease;
    background-color: white;
    padding: 0 0.25rem;
    color: #777;
  }
  
  .bonuslist-input-group input:focus + label,
  .bonuslist-input-group input:not(:placeholder-shown) + label {
    top: -0.6rem;
    font-size: 0.85rem;
    color: #333;
  }
  
  /* === Checkbox (rechts) === */
  .bonuslist-check-wrapper {
    margin-left: auto;
    display: flex;
    align-items: center;
  }
  
  .bonuslist-check {
    width: 24px;
    height: 24px;
    transform: scale(1.3);
    cursor: pointer;
  }
  
  /* === Buttons === */
  .bonuslist-buttons.two-cols {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .bonuslist-button {
    flex: 1;
    min-width: 120px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-align: center;
  }
  
  .bonuslist-button.cancel {
    background-color: #ccc;
    color: #000;
  }
  
  .bonuslist-button.submit {
    background-color: #28a745;
    color: white;
  }
  









/*     MENU            */



body {
  padding: 0px;
  margin: 0px;
  
}
@media (max-width: 1200px) {
  body.mobile-menu-open {
    overflow: hidden;
  }
}

.xdesktop-menu {
  position: relative;
  width: 100%;
}

.desktop-menu {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.xdesktop-menu {
  position: sticky;
  top: 0;
  z-index: 1000;
}


@media (max-width: 1200px) {
  .desktop-menu {
    display: none;
  }
}
.desktop-menu .item-toggle-button {
  text-indent: -9999px;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
}
.desktop-menu .item-toggle-button:after {
  content: "";
  text-indent: 0px;
  font-family: "FontAwesome";
  color: #FFD700;
  transition: all 200ms linear;
}
.desktop-menu .item-toggle-button:hover:after {
  color: white;
}
.desktop-menu .item-toggle-button.is-open:after {
  transform: rotate(180deg);
  color: white;
}
.desktop-menu nav {
  background: #007BFF;
  height: 50px;
  margin: 0px;
  
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  border-bottom: none;
}
.desktop-menu nav ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  height: 100%;
}
.desktop-menu nav ul li {
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 20px;
  height: 100%;
  position: relative;
}
.desktop-menu nav ul li a {
  color: #FFD700;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  height: 100%;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: all 200ms linear;
  font-size: 18px;
}
.desktop-menu nav ul li a:hover {
  color: white;
}
.desktop-menu nav ul li a:hover + .item-toggle-button:after {
  color: white;
}
.desktop-menu nav ul li.is-open > a {
  color: white;
}
.desktop-menu nav ul li .secondary-nav {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  background: #007BFF;
  min-width:250px;
}
.desktop-menu nav ul li .secondary-nav ul li {
  float: none;
  padding: 10px 20px 10px 8px;;
  display: block;
}
.desktop-menu nav ul li .secondary-nav ul li a {
  font-size: 16px;
  display: inline-block;
  color: #FFD700;
}
.desktop-menu nav ul li .secondary-nav ul li a:hover {
  color: white;
}
.desktop-menu nav ul li .secondary-nav.is-open {
  max-height: 100vh;
  opacity: 1;
  transition: max-height 0.7s ease-out, opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  background: linear-gradient(to right, #0056b3 6px, #007BFF 6px);
}
.desktop-menu nav ul li .tertiary-nav {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0ms linear;
  background: #007BFF;
}
.desktop-menu nav ul li .tertiary-nav ul li {
  float: none;
  padding: 10px 20px;
}
.desktop-menu nav ul li .tertiary-nav ul li a {
  font-size: 14px;
  color: #FFD700;
}
.desktop-menu nav ul li .tertiary-nav ul li a:hover {
  color: white;
}
.desktop-menu nav ul li .tertiary-nav.is-open {
  max-height: 100%;
  transition: max-height 200ms linear;
  background: linear-gradient(to right, #0056b3 6px, #007BFF 6px);
}
.desktop-menu.is-sticky {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1000;

}
.desktop-menu.is-sticky nav {
  margin: 0px;

  
}

@keyframes Sidebar-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes Sidebar-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
.mobile-menu {
  display: none;
  z-index:1000;
}





@media (max-width: 1200px) {
  .mobile-menu {
    display: block;
  }
  .mobile-menu nav ul li {
    padding: 16px 24px; /* mehr Abstand links/rechts */
  }

  .mobile-menu nav ul li a {
    font-size: 18px; /* vorher meist 16px */
    line-height: 1.4;
  }

  .mobile-menu nav ul li .secondary-nav ul li,
  .mobile-menu nav ul li .tertiary-nav ul li {
    padding: 12px 32px;
  }

  .mobile-menu nav ul li .secondary-nav ul li a,
  .mobile-menu nav ul li .tertiary-nav ul li a {
    font-size: 16px;
  }
}




.mobile-menu .item-toggle-button {
  text-indent: -9999px;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
}
.mobile-menu .item-toggle-button:after {
  content: "";
  text-indent: 0px;
  font-family: "FontAwesome";
  color: #FFD700;
  transition: all 200ms linear;
}
.mobile-menu .item-toggle-button:hover:after {
  color: white;
}
.mobile-menu .item-toggle-button.is-open:after {
  transform: rotate(180deg);
  color: white;
}
.mobile-menu .header_bar {
  background: #007BFF;
  height: 50px;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  border-bottom: 1px solid black;
}
.mobile-menu .header_bar .mobile-toggle {
  height: 50px;
  width: 50px;
  cursor: pointer;
}
.mobile-menu .header_bar .mobile-toggle svg g {
  fill: #FFD700;
  transition: all 200ms linear;
}
.mobile-menu .header_bar .mobile-toggle svg g rect {
  transition: all 200ms linear;
}
.mobile-menu .header_bar .mobile-toggle:hover svg g {
  fill: white;
}
.mobile-menu .header_bar .mobile-toggle.is-open svg g {
  fill: #FFD700;
}
.mobile-menu .header_bar .mobile-toggle.is-open svg g rect {
  x: 0;
  y: 0;
}
.mobile-menu .header_bar .mobile-toggle.is-open svg g rect:first-child {
  transform: rotate(45deg) translate(50%);
}
.mobile-menu .header_bar .mobile-toggle.is-open svg g rect:nth-child(2n) {
  display: none;
}
.mobile-menu .header_bar .mobile-toggle.is-open svg g rect:last-child {
  transform: rotate(-45deg) translate(-21%, 66%);
}
.mobile-menu .header_bar .mobile-toggle.is-open:hover svg g {
  fill: white;
}

.mobile-menu nav {
  display: block;
  position: fixed;
  top: 51px;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 260px;
  overflow: hidden;
  animation-name: Sidebar-out;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  background: rgba(0, 123, 255,1); 
  box-shadow: 12px 0 5px rgba(0, 0, 0, 0.3);

  
}
.mobile-menu nav ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  height: 100%;
}
.mobile-menu nav ul li {
  padding: 10px 00px 10px 10px;
  position: relative;
}
.mobile-menu nav ul li a {
  color: #FFD700;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  height: 100%;
  text-decoration: none;
  transition: all 200ms linear;
  font-size: 18px;
}
.mobile-menu nav ul li a:hover {
  color: white;
}
.mobile-menu nav ul li a:hover + .item-toggle-button:after {
  color: white;
}
.mobile-menu nav ul li.is-open > a {
  color: white;
}
.mobile-menu nav ul li .secondary-nav {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0ms linear;
  background: #007BFF;
}
.mobile-menu nav ul li .secondary-nav ul li {
  float: none;
  padding: 10px 20px;
}
.mobile-menu nav ul li .secondary-nav ul li a {
  font-size: 16px;
  color: #FFD700;
}
.mobile-menu nav ul li .secondary-nav ul li a:hover {
  color: white;
}
.mobile-menu nav ul li .secondary-nav.is-open {
  max-height: 100%;
  transition: max-height 200ms linear;
  background: linear-gradient(to right, #0056b3 6px, #6195cc 6px);
}
.mobile-menu nav ul li .tertiary-nav {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0ms linear;
  background: #007BFF;
}
.mobile-menu nav ul li .tertiary-nav ul li {
  float: none;
  padding: 10px 20px;
}
.mobile-menu nav ul li .tertiary-nav ul li a {
  font-size: 14px;
  color: #FFD700;
}
.mobile-menu nav ul li .tertiary-nav ul li a:hover {
  color: white;
}
.mobile-menu nav ul li .tertiary-nav.is-open {
  max-height: 100%;
  transition: max-height 200ms linear;
  background: linear-gradient(to right, #0056b3 6px, #007BFF 6px);
}
.mobile-menu:not(.is-animating) nav {
  display: none;
}
body.mobile-menu-open .mobile-menu:before {
  content: "";
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  /* background: rgba(0, 0, 0, 0.5);*/
}
.mobile-menu.is-open:not(.is-animating) nav,
.mobile-menu.is-animating:not(.is-open) nav {
  display: block;
  animation-name: Sidebar-in;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
}

/* Desktop-Kopfbereich mit Logo & Titel */



.desktop-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 50px;
  background-color: #007BFF;
  padding: 0 1rem; /* nur links/rechts */
}

.menu-left {
  justify-self: start;
}

.menu-title {
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  color: #FFD700;
  font-family: "Roboto", sans-serif;
}

.header-logo {
  justify-self: end;
}

.header-logo img {
  height: 40px;
}
.header_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0rem;
  height: 50px;
  background-color: #007BFF;
  overflow: hidden; /* optional, falls nötig */
}

.mobile-logo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  padding: 0px 20px 0px 0px;
}

.mobile-logo img {
  height: 40px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}




.mobile-title {
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  color: #FFD700;
  font-family: "Roboto", sans-serif;
}

main {
  padding-top: 50px; /* Höhe der festen Header-Zeile */
}
/* Container mit zentralem Layout */
/* Container für die gesamte Bonusliste */

.clientbonus-section {
  max-width: 800px;
  margin: auto;
  padding: 1rem;
}




.clientbonus-wrapper {
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
}

/* Liste mit Abstand zwischen den Kacheln */
.clientbonus-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Jede einzelne Kachel */
.bonuslist-task-block {
  background: #ffffff;
  border: 1px solid #ccc;
  border-left: 6px solid #28a745;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Überschrift (Eventname) */
.bonuslist-task-title {
  font-weight: bold;
  font-size: 1rem;
  color: #333;
  margin-bottom: 0.25rem;
}

/* Datumsanzeige */
.clientbonus-dates {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0.5rem;
}

/* Bonuspunkte rechtsbündig */
.clientbonus-score-box {
  text-align: right;
  font-size: 1.1rem;
  font-weight: bold;
  color: #2a7c2a;
  margin-top: 0.5rem;
}

/* Fallback: leere Liste */
.clientbonus-empty-message {
  text-align: center;
  color: #666;
  font-size: 1rem;
  margin-top: 2rem;
}

.clientbonus-button {
  flex: 1;
  min-width: 120px;
  padding: 0.6rem 2rem;
  font-size: 1rem;
  border-radius: 6px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  text-align: center;
}

.clientbonus-button.cancel {
  background-color: #ddd;
  color: #000;
}
  
.clientbonus-button.submit {
  background-color: #007bff;
  color: white;
}

.clientbonus-buttons.two-cols {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.clientbonus-total {
  text-align: right;
  font-size: 1.2rem;
  font-weight: bold;
  color: #2a7c2a;
  margin-top: 1rem;
  padding-right: 0.5rem;
}

.messagehelpers-block {
  border: 1px solid #ccc;
  background: #f8f9ff;
  border-left: 6px solid #007bff;
  border-radius: 8px;
  padding: 1rem 1rem 1rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.messagehelpers-input-group {
  display: block;
  position: relative;
  margin-top: 1.5rem;
}

.messagehelpers-input-group input,
.messagehelpers-input-group textarea {
  width: 100%;
  padding: 1rem 0.5rem 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  box-sizing: border-box;
}

.messagehelpers-input-group label {
  position: absolute;
  left: 0.5rem;
  top: 1rem;
  font-weight: bold;
  pointer-events: none;
  transition: all 0.2s ease;
  background-color: white;
  padding: 0 0.25rem;
  color: #777;
}

.messagehelpers-input-group input:focus + label,
.messagehelpers-input-group input:not(:placeholder-shown) + label,
.messagehelpers-input-group textarea:focus + label,
.messagehelpers-input-group textarea:not(:placeholder-shown) + label {
  top: -0.6rem;
  font-size: 0.85rem;
  color: #333;
}

.messagehelpers-scrollbox {
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 0.5rem;
  margin-top: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

.messagehelpers-scrollbox label {
  display: block;
  line-height: 1.4;
  padding: 0.25rem 0;
}

.messagehelpers-button-layout {
  width: 100%;
  margin-top: 2rem;
  border-collapse: collapse;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.messagehelpers-button-layout td {
  padding: 0.5rem;
  vertical-align: middle;
}

.messagehelpers-button-layout td.left {
  text-align: left;
}

.messagehelpers-button-layout td.right {
  text-align: right;
}

.messagehelpers-submit-button {
  background-color: #28a745;
  color: white;
  padding: 0.5rem 0.5rem;
  font-weight: bold;
  font-size: 1.1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.messagehelpers-cancel-button {
  background-color: #ccc;
  color: black;
  padding: 0.5rem 0.5rem;
  font-weight: bold;
  font-size: 1.1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.messagehelpers-block summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: bold;
  padding: 0.5rem 0;
}

.messagehelpers-button-layout {
  width: 100%;
  margin-top: 2rem;
}

.messagehelpers-button-left,
.messagehelpers-button-right {
  text-align: left;
}

.messagehelpers-button-right {
  text-align: right;
}

.messagehelpers-button-cancel,
.messagehelpers-button-submit {
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-size: 1rem;
  border: none;
  cursor: pointer;
}

.messagehelpers-button-cancel {
  background-color: #e0e0e0;
  color: #333;
}

.messagehelpers-button-submit {
  background-color: #005a9e;
  color: white;
}

.messagehelpers-button-submit:hover {
  background-color: #004080;
}

.messagehelpers-button-cancel:hover {
  background-color: #d0d0d0;
}



/* === SELFUSER FORMULAR === */
/* === SELFUSER MAPPINGS (klassisch) === */
/* === SELFUSER MAPPINGS (klassisch) === */

.selfuser-form-box {
  border: 1px solid #ccc;
  background: #f8f9ff;
  border-left: 6px solid #007bff;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.selfuser-input-group {
  display: block;
  position: relative;
  margin-top: 1.5rem;
  padding: 0;
  box-sizing: border-box;
  flex: 1 1 200px;
  min-width: 200px;
}

.selfuser-input-group input,
.selfuser-input-group textarea {
  width: 100%;
  max-width: 250px; 
  min-width: 80%;
  padding: 1rem 0.5rem 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
}

.selfuser-input-group label {
  position: absolute;
  left: 0.5rem;
  top: 1rem;
  font-weight: bold;
  pointer-events: none;
  transition: all 0.2s ease;
  background-color: white;
  padding: 0 0.25rem;
  color: #777;
}

.selfuser-input-group input:disabled {
  background-color: #f9f9f9;
  color: #888;
  border-style: dashed;
}

.selfuser-input-group input:focus + label,
.selfuser-input-group input:not(:placeholder-shown) + label,
.selfuser-input-group textarea:focus + label,
.selfuser-input-group textarea:not(:placeholder-shown) + label,
.selfuser-input-group select:focus + label,
.selfuser-input-group select:not(:placeholder-shown) + label {
  top: -0.6rem;
  font-size: 0.85rem;
  color: #333;
}

/* Button-Leiste */
.selfuser-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  gap: 1rem;
}

.selfuser-button {
  min-width: 120px;
  padding: 0.6rem 2rem;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.selfuser-button.cancel {
  background-color: #ddd;
  color: #000;
}

.selfuser-button.cancel:hover {
  background-color: #ccc;
}

.selfuser-button.submit {
  background-color: #007bff;
  color: white;
}

.selfuser-button.submit:hover {
  background-color: #0056b3;
}

/* === FOLLOW-BEREICH === */

.selfuser-follow-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.selfuser-follow-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}

.selfuser-follow-button {
  background-color: #007bff;
  color: white;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.2rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.selfuser-follow-button:hover {
  background-color: #0056b3;
}

.selfuser-follow-list .selfuser-follow-entry {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.selfuser-follow-empty {
  color: gray;
  margin-top: 1rem;
}

.selfuser-follow-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.selfuser-follow-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: #f3f5ff;
  border-radius: 6px;
  border: 1px solid #d3d7e3;
}

.selfuser-follow-entry-info {
  display: flex;
  flex-direction: column;
}

.selfuser-follow-entry-info strong {
  font-size: 1rem;
}

.selfuser-follow-entry-info span {
  color: #666;
  font-size: 0.9rem;
}

.selfuser-unfollow-button {
  background: none;
  border: none;
  color: #cc0000;
  font-size: 1.2rem;
  cursor: pointer;
}

.selfuser-unfollow-button:hover {
  color: #990000;
}


/* Token-Zeile: horizontale Ausrichtung */
.admintoken-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

/* Große Checkbox rechts neben Token */
.admintoken-checkbox {
  transform: scale(1.5);
  cursor: pointer;
}

.admintoken-entry {
  min-width: 200px;
}

.admintoken-entry strong {
  display: inline-block;
  width: 120px;
}
.admintoken-block {
  background-color: #8d2727;
  border: 1px solid rgb(179, 52, 52);
  border-radius: 8px;
  padding: 1.5rem;
}

.admintoken-block + .admintoken-block {
  margin-top: 1.5rem;
}

.admintoken-block .admintoken-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}

.introjs-tooltip.hide-done-button .introjs-donebutton {
  display: none !important;
}
.introjs-tooltip.no-next-button .introjs-nextbutton {
  display: none !important;
}
.introjs-tooltip.no-prev-button .introjs-prevbutton {
  display: none !important;
}


.maillist-input-group {
  position: relative;
  margin-top: 1.5rem;
}

.maillist-input-group input,
.maillist-input-group select {
  width: 100%;
  padding: 1rem 0.5rem 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: white;
  box-sizing: border-box;
}

.maillist-input-group label {
  position: absolute;
  left: 0.5rem;
  top: 1rem;
  font-weight: bold;
  pointer-events: none;
  transition: all 0.2s ease;
  background-color: white;
  padding: 0 0.25rem;
  color: #777;
}

.maillist-input-group input:focus + label,
.maillist-input-group input:not(:placeholder-shown) + label,
.maillist-input-group select:focus + label,
.maillist-input-group select:not(:placeholder-shown) + label {
  top: -0.6rem;
  font-size: 0.85rem;
  color: #333;
}

.maillist-block {
  background: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.maillist-topline {
  font-weight: bold;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.5rem;
}

.maillist-summary-title {
  color: #7a0026;
}



.maillist-page {
max-width: 800px;
margin: auto;
padding: 1rem;
box-sizing: border-box;
width: 100%;
}

.maillist-form-row { display:flex; flex-wrap:wrap; gap:1rem; margin-top:0.5rem; }
.maillist-input-group {
display:block;
position:relative;
margin-top:1.5rem;
flex:1 1 0;
min-width:200px;
}



/* Kopfbereich wie editlist */
.maillist-topline {
background-color: #e7f0ff;
color: #002b60;
font-weight: bold;
font-size: 1.2rem;
padding: 0.75rem 1rem;
margin: -1.5rem -1.5rem 1rem -1.5rem;
border-bottom: 1px solid #c0d0f7;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}

.maillist-topline::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background-color: #007bff;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}

/* Titel richtig einfärben */
.maillist-summary-title {
color: #002b60;
}

/* Buttons wie in editlist */
.maillist-btn--primary {
background: #7a0026;
color: white;
}
.maillist-btn--ghost {
background: #f3f3f3;
color: #333;
}
.maillist-scrollbox {
max-height:320px;
overflow-y:auto;
border:1px solid #ccc;
padding:0.5rem;
margin-top:0.5rem;
width:100%;
box-sizing:border-box;
background:#fafafa;
border-radius:6px;
}

.maillist-row__label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.maillist-actions {
display:flex;
gap:.5rem;
align-items:center;
flex-wrap:wrap;
margin:.4rem 0 .2rem;
}
.maillist-btn {
border:0;
border-radius:6px;
padding:.55rem .8rem;
font:inherit;
cursor:pointer;
min-width:auto;
transition:transform .03s, filter .15s;
}
.maillist-btn:active { transform:translateY(1px); }
.maillist-btn--primary { background:#7a0026; color:#fff; }
.maillist-btn--danger { background:#c94e4e; color:#fff; }
.maillist-btn--ghost { background:#f3f3f3; color:#222; }
.maillist-actions .maillist-btn--right {
margin-left: auto;
}


.maillist-row {
display: flex;
align-items: flex-start;
gap: .6rem;
padding: .55rem .6rem;
border: 1px solid #eee;
border-radius: 8px;
background: #fff;
margin: 0 0 .5rem 0;
}
.maillist-row-text {
flex: 1;
}
.maillist-row-name {
font-weight: 600;
color: #1e2a44;
}
.maillist-row-email {
font-size: 0.85rem;
color: #666;
word-break: break-all;
}



.maillist-block {
border: 1px solid #ccc;
background: #f8f9ff;
border-left: 6px solid #007bff;
border-radius: 8px;
padding: 1rem 1rem 0.5rem;
margin-top: 1.5rem;
margin-bottom: 2rem;
}

.maillist-block summary {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.2rem;
font-weight: bold;
cursor: pointer;
margin: -1rem -1rem 0.75rem;
padding: 0.75rem 1rem;
background-color: #e0ecff;
border-bottom: 1px solid #ccc;
border-radius: 6px 6px 0 0;
list-style: none;
}


.maillist-input-group {
display: block;
position: relative;
margin-top: 1.5rem;
}

.maillist-input-group input,
.maillist-input-group select {
width: 100%;
padding: 1rem 0.5rem 0.5rem;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
box-sizing: border-box;
}

.maillist-input-group label {
position: absolute;
left: 0.5rem;
top: 1rem;
font-weight: bold;
pointer-events: none;
transition: all 0.2s ease;
background-color: white;
padding: 0 0.25rem;
color: #777;
}

.maillist-input-group input:focus + label,
.maillist-input-group input:not(:placeholder-shown) + label,
.maillist-input-group select:focus + label,
.maillist-input-group select:not(:placeholder-shown) + label {
top: -0.6rem;
font-size: 0.85rem;
color: #333;
}


.maillist-summary-icon {
font-size: 1.1rem;
margin-left: 1rem;
color: #444;
}

.maillist-summary-title {
flex-grow: 1;
}