/* 1) Globale Box-Sizing-Regel */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2) CSS-Variablen */
:root {
  --main-color:   #0081B4;
  --danger-color: #e53935;
  --gray-color:   #666;
  --light-bg:     #f5f7fa;
  --shadow:       0 4px 12px rgba(0,0,0,0.1);
}

/* 3) Utility */
.hidden {
  display: none !important;
}

/* 4) Basis-Stile */
body {
  font-family: 'Segoe UI', sans-serif;
  background-color: var(--light-bg);
  margin: 30px auto;
  max-width: 1700px;
  color: #333;
  padding: 0 10px;
}

h1 {
  text-align: center;
  font-size: 30px!important;
  color: #0081B4;
  margin-bottom: 10px;
}


/* Hauptfarbe für Navigations- und Ansichts-Buttons */
.fc-prev-button,
.fc-next-button,

.fc-button-group button,
.fc-button {
  background-color: var(--main-color) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 1px !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease;
}

.fc-today-button {
  background-color: var(--main-color) !important;
  color: #fff !important;
  border: none !important;
  margin-left: 0px;
  border-radius: 5px !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease;
}

/* Hover-Effekt für Buttons */
.fc-prev-button:hover,
.fc-next-button:hover,
.fc-today-button:hover,
.fc-button-group button:hover,
.fc-button:hover {
  background-color: #1669b2 !important; /* dunklere Nuance */
  color: #fff !important;
}

/* Optional: Aktiver Zustand etwas hervorheben */
.fc-button.active,
.fc-button:active {
  background-color: #004a8f !important;
  color: #fff !important;
}



/* Header in der linken Leiste links ausrichten */
#appHeader {
  display: flex;
  align-items: center;
  justify-content: center;  /* ggf. "flex-start" falls links gewünscht */
  gap: 12px;                /* Abstand zwischen Logo + Titel */
  margin-bottom: 10px;      /* Abstand nach unten */
  padding: 0 8px;           /* optionaler Innenabstand */
}

/* Logo-Größe beibehalten oder anpassen */
#logoImage {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* Titel etwas an den Linksspan anpassen */
#appHeader h1 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--main-color);
}

/* 6) Buttons (global) */
button {
  background-color: #A3A3A6;
  border: none;
  color: white;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #1669b2;
}

button.red {
  background-color: var(--danger-color);
}

button.red:hover {
  background-color: #b71c1c;
}

button.gray {
  background-color: #aaa;
}

button.gray:hover {
  background-color: #777;
}

/* 7) Spring-Box: KW + Datum */
#jumpContainer {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 16px auto;
  flex-wrap: wrap;
}

#jumpContainer label {
  font-weight: 600;
  color: #444;
}

.jump-input {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
  color: #333;
}

.jump-input:focus {
  outline: none;
  border-color: var(--main-color);
  box-shadow: 0 0 0 3px rgba(30,136,229,0.2);
}

.jump-btn {
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.jump-btn:not(.secondary) {
  background-color: var(--main-color);
  color: #fff;
}

.jump-btn:not(.secondary):hover {
  background-color: #1669b2;
}

.jump-btn.secondary {
  background-color: #eee;
  color: #333;
}

.jump-btn.secondary:hover {
  background-color: #ddd;
}

/* 8) Kalender-Container */
#calendar {
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  box-shadow: var(--shadow);
  min-width: 700px;
  min-height: 400px;

}

/* 9) Legende */
#legend {
  display: block;
/*  flex-direction: column;  /* Stapelt die Items untereinander */
column-count: 3;  
align-items: center;     /* Zentriert die Items horizontal */
  gap: 8px;                /* Abstand zwischen den Items */
  margin-top: 10px;
}

#legend span {
  display: flex;           /* Für das Farbkästchen plus Text */
  align-items: center;
  gap: 6px;                /* Abstand zwischen Punkt und Text */
}

#legend span span {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  /* Farbe wird inline zugewiesen */
}
/* 10) KW-Anzeige & Status */
#kwNavInfo,
#kwStatus,
#nextHolidayInfo {
  white-space: pre-line;    /* erlaubt Zeilenumbrüche im Text */
  max-width: 350px;         /* fixe Maximalbreite */
  word-break: break-word;   /* bricht lange Wörter */
  text-align: center;
  margin-top: 0px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-color);
}

.fc-toolbar-title{
  text-align: center;
  padding-right: 50px;
}

@media (max-width: 720px) {
  #nextHolidayInfo {
    font-size: 0.9rem;
    padding: 6px 8px;
    margin: 12px 0;
  }
}

/* 11) Tagesnotizen-Feld */



.day-note::placeholder {
  color: #aaa;
  text-align: center;
}



/* 13) Overlay für Modal */
#eventModal {
  display: none;
  position: fixed;
  z-index: 999;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  width: 600px;
  max-width: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

#overlay {
  display: none;
  position: fixed;
  z-index: 998;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
}

#eventModal.animate-in {
  display: block;
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}

#eventModal.animate-out {
  opacity: 0;
  transform: translate(-50%,-50%) scale(0.9);
}

#eventModal h3 {
  margin-top: 0;
  color: var(--main-color);
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

/* Formular im Modal */
#eventModal label {
  display: block;
  font-weight: 600;
  margin: 8px 0 4px;
  color: #444;
}

#eventModal input,
#eventModal select,
#eventModal textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 0.9rem;
  background: #fff;
}

#eventModal textarea {
  resize: vertical;
  min-height: 60px;
}

/* Buttons im Modal */
.modal-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.modal-buttons .jump-btn,
.modal-buttons button {
  flex: 1 1 auto;
}

/* 15) Responsive (Mobile) */
@media (max-width: 640px) {
  #eventModal {
    width: 95vw;
    padding: 16px;
  }
  #eventModal .modal-buttons {
    flex-direction: column;
  }
  button,
  .jump-btn {
    width: 100%;
  }
}

/* 1) Nächster Feiertag als zentrierte Box */
#nextHolidayInfo {
  white-space: pre-line;    /* erlaubt Zeilenumbrüche im Text */
  max-width: 350px;         /* fixe Maximalbreite */
  word-break: break-word;   /* bricht lange Wörter */
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-color);  
  display: block;               /* Block-Level, damit margin auto wirkt */
  margin: 12px auto 24px auto;  /* oben/runter Auto → zentriert */
  padding: 8px 16px;
  background-color: #fdecea;
  color: var(--danger-color);
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid var(--danger-color);
  border-radius: 6px;
  text-align: center;           /* Text innen zentrieren */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 12) Feiertags-Markierung im Kalender */
.holiday-col {
  background-color: #E53935 !important;
}


/* 2) Feiertag-Label in der Spalte zentrieren */
.holiday-label {
  display: block;				/* Block-Element zum Zentrieren */
  width: 100%;           		/* passt sich der Textbreite an */
  margin: 0 auto 4px auto;      /* oben 0, unten 4px, seitlich auto */
  text-transform: uppercase;
  text-align: center;
  font-size: 1.2em;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--danger-color);
  padding: 20px 20px 20px 20px;
  border-radius: 3px;
  font-weight: 700;
  line-height: 1;
}

/* Optional: mobile Anpassung */
@media (max-width: 640px) {
  #weekNote {
    height: 60px;
  }
}

/* ===== Zwei-Spalten-Layout ===== */
.main-content {
  display: flex;
  gap: 20px; /* Abstand zwischen Sidebar und Kalender */
  max-width: 1800px;
  margin: 0 auto;
  padding: 10px;
}

#sideControls {
  flex: 0 0 380px; /* Feste Breite sidebar */
  box-sizing: border-box;
  padding: 0 10px;
}

#calendarWrapper {
  flex: 1 1 auto; /* Kalender dehnt sich */
  min-width: 700px;
}
/* rechte Spalte füllt Rest */
#calendarWrapper {
  /* damit der Kalender ganz nach unten wächst: */
  display: flex;
  flex-direction: column;
}

/* Kalender selbst dehnt sich */
#calendar {
  flex: 1 1 auto;
  width: 100% !important;
}

/* ===== Mobile Fallback ===== */
@media (max-width: 800px) {
  .main-content {
    display: flex;           /* bleibt Flex */
    flex-direction: column;  /* stapelt Sidebar über Kalender */
    gap: 0;                  /* ggf. Abstände anpassen */
  }
}

/* Wrapper unter das Datum */
/* ---------- Tagesnotiz (einzelne Tage) ---------- */
.day-note-wrapper {
  margin: 4px auto;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;    /* <--- sorgt für Zentrierung horizontal */
  width: 100%;

}

.day-note-toolbar {
  margin-bottom: 2px;
  display: flex;
  gap: 6px;
}

/* Tagesnotiz Toolbar Buttons modern in #0081B4 */
.day-note-toolbar button {
  background-color: #A3A3A6;
  border: none;
  color: white;
  padding: 3px 8px;
  font-size: 0.8rem;
  font-weight: 400;
  border-radius: 6px; /* Runde Ecken */
  cursor: pointer;
  transition: background-color 0.3s ease;

}

.day-note-toolbar button:hover {
  background-color: #006a91; /* etwas dunkler bei Hover */

}

.day-note {
  width: 90%;
  max-width: 450px;
  box-sizing: border-box;
  margin-top: 8px;
  margin-top: 4px;
  padding: 5px;
  min-height: 2.5em;
  border: 2px solid #ddd;
  border-radius: 6px;
  background-color: #fafafa;
  box-shadow: 0 2px 2px rgba(0,0,0,0.05);
  font-size: 0.95em;
  outline: none;
  text-align: center; /* Text zentriert; entfernt vorheriges linksbündig */
}

/* Placeholder für Tagesnotiz (funktioniert nur bei Textareas/divs ohne Inhalt) */
.day-note.empty::before,
.day-note:empty::before {
  content: "📝 Tagesnotiz …";
  color: #aaa;
  pointer-events: none;
  text-align: center;
}

/* Spezifisch für Tagesnotiz falls du Klassen trennst */
/*
.day-note.empty.tagesnotiz::before,
.day-note:empty.tagesnotiz::before {
  content: "📝 Tagesnotiz …";
}
*/

/* Beim Fokussieren etwas betonen */
.day-note:focus {
  border-color: var(--main-color);
  box-shadow: 0 0 0 3px rgba(30,136,229,0.2);
}
/* ---------- Wochennotiz unter Kalenderüberschrift ---------- */
#weekNoteWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0 14px 0;
  width: 100%;
  margin: 5px 10px;
}
.week-note-toolbar {
  display: flex;
  gap: 4px;
  margin-bottom: 50px;
  justify-content: center;
}

#weekNote {
  min-width: 30vw !important;
  min-height: 2.3em;
  padding: 5px 10px;
  border: 2px solid #facc15;
  background: #fffde7;
  border-radius: 4px;
  font-size: 1em;
  margin-top: 10px !important;
  display: block;
  text-align: left;
}


#weekNote.empty {
  text-align: center !important;
  color: #aaa;

}
#weekNote.empty span {
  color: #aaa;
  display: inline-block;
  width: 100%;
  text-align: center;
  pointer-events: none;
}

.day-note.empty.wochennotiz::before,
.day-note:empty.wochennotiz::before {
  content: "📝 Wochennotiz …";
  color: #aaa;
  pointer-events: none;
  text-align: center;
}
/* ---------- FullCalendar: All-day-Spalte in Listenansicht ausblenden ---------- */
.fc-list-table > thead > tr > th:first-child,
.fc-list-table > tbody > tr > td:first-child {
  display: none;
}

#searchContainer label {
  font-weight: 600;
  margin-bottom: 4px;
  color: #333;
}

#searchContainer input[type="text"],
#searchContainer select,
#searchContainer button {
  width: 100%;
  padding: 8px 10px;
  font-size: 1rem;
  border-radius: 6px;
  border: 1.5px solid #ccc;
  box-sizing: border-box;
  cursor: pointer;
  align-items: center;
}

/* Buttons sorgfältig stylen */
#searchContainer button {
  font-weight: 700;
  color: white;
  background-color: var(--main-color);
  border: none;
  transition: background-color 0.3s ease;
  align-items: center;
}

#searchContainer button:hover {
  background-color: #1669b2;
}



#searchResultsList {
  max-height: 400px;       /* Max-Höhe begrenzen */
  min-width: 100px;
  overflow-y: auto;        /* Scrollbar bei Überlauf */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fafafa;
  font-size: 0.95rem;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
  margin-top: 50px;
}

/* Einzelner Treffer */
#searchContainer {
  display: flex;
  max-width: 900px;
  gap: 20px;
  margin-bottom: 20px;
}

#searchFields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-result-item{
  letter-spacing: 0.05em;
  color: #0084B1 !important;
}

@media (max-width: 720px) {
  #searchContainer {
    flex-direction: column;
  }
  #searchFields,
  #searchResultsList {
    flex: none;
    width: 100%;
  }
}

.completed-event {
  opacity: 0.6;
  text-decoration: line-through;
}

.fc-event.WTW {
  background-color: #0480B3 !important;
  color: white;
}
.fc-event.ZVvormontiert {
  background-color: #004090;
  color: white;
}
.fc-event.Komponenten {
  background-color: #AA242F;
  color: white;
}
.fc-event.Schwellen {
  background-color: #7F4230;
  color: white;
}
.fc-event.Gleisfelder {
  background-color: #668CBC;
  color: white;
}
.fc-event.vaTTZ {
  background-color: #C8A2C8;
  color: white;
}
.fc-event.Sonstiges {
  background-color: #4E4842;
  color: white;
}

.fc-event.industrie-privatbahn {
  background-color: #4caf50;
  color: white;
}

.fc-event.Export {
  background-color: #E9A400;
}


/* In listWeek alle Hintergründe ausblenden */
.fc-listWeek-view .fc-event {
  background: none !important;
  border:     none !important;
  color:      #333 !important;
}


/* Der Zeilen-Container */
.row {
  display: flex;
  flex-wrap: wrap;          /* falls zu schmal, Zeilenumbruch */
  gap: 12px;     
 /* Alle Elemente oben ausrichten */
}


/* Die normalen Spalten wachsen, die Checkbox nicht */
.col {
  flex: 1;                  /* gleichmäßig verteilen */
  min-width: 150px;         /* oder kleiner/breiter nach Wunsch */
}
.col-checkbox {
  flex: 0 0 auto;           /* nicht wachsen, nur so breit wie nötig */
  align-self: flex-start;   /* explizit ganz oben ausrichten */
  display: flex;
  flex-direction: column;   /* Label über Checkbox */
  gap: 0.25rem;
  margin-bottom: 1rem;
}

/* Checkbox und Label stylen */
.col-checkbox input[type="checkbox"] {
  width: 1.2em;
  height: 1.2em;
  margin: 0;
}
.col-checkbox label {
  margin: 0;
  cursor: pointer;
  font-weight: 500;
  text-align: center;
}

/* Für die DayGrid‐Woche (Block‐Events) */
.fc-daygrid-event {
  margin: 2px 0;     /* 2px Abstand oben und unten */
max-width: 40ch;
white-space: normal;
word-wrap: break-word;
}
}

.fc-list-event-graphic {
  display: none !important;
}
/* Badge‐Basisstyling */
.badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
  font-size: 1em;
  font-weight: 700;
  vertical-align: middle;
  margin-right: 6px;
  margin-top: 4px;
  margin-bottom: 2px;
}


/* group-badge bekommt neutralen Look oder eigenen Farbton: */
.badge.group-badge {
  background: #333 !important;   /* dunkel‐grau */
  font-weight: 600;
  font-size: 11px;
  border-color: white;
  border: 1px solid;
}




/* Typ-Farben (Grid-Ansicht) */
.badge.WTW           { background-color: #0480B3; }      /*border-color: #5CAEDA; border-radius: 4px; border: 2px solid;  box-shadow: 0 1px 3px rgba(0,0,0,0.2);*/
.badge.ZVvormontiert { background-color: #004090; }      /*border-color: #68C69A; border-radius: 4px; border: 2px solid;  box-shadow: 0 1px 3px rgba(0,0,0,0.2);*/
.badge.Schwellen     { background-color: #7F4230; }
.badge.Gleisfelder   { background-color: #668CBC; }
.badge.Komponenten   { background-color: #AA242F; }
.badge.vaTTZ	     { background-color: #C8A2C8; }
.badge.Sonstiges     { background-color: #4E4842; }
.badge.Export        { background-color: #E9A400; }


/* Wenn Industrie-/Privatbahn aktiviert */
.badge.ZVvormontiert.industriePrivatbahn,
.fc-event.ZVvormontiert.industriePrivatbahn {
  background-color: #039D55;   /* #578360 */
  color: white;
}

/* Gleisfelder vaTTZ – selbe Schreibweise wie ZVvormontiert */
.badge.Gleisfelder.vattz,
.fc-event.Gleisfelder.vattz,
.fc-daygrid-event.Gleisfelder.vattz,
.fc-list-event.Gleisfelder.vattz {
  background-color: #E53E30 ;
  border-color:     #E53E30 ;
  color:            #fff    ;
}

/* 4) CSS für das neue Badge “LoseWeiche” */
.badge.LoseWeiche {
  background-color: #D35400;     /* schöne Orange-Braun-Note */
}
.LoseWeiche {
  background-color: #D35400;     /* schöne Orange-Braun-Note */
}

.vaTTZ {
  background-color: #C8A2C8;     /*Flieder */
}

/* 5) Grid-Block-Färbung */
.fc-daygrid-event.LoseWeiche > .fc-event-main,
.fc-daygrid-block-event.LoseWeiche > .fc-event-main {
  background-color: #D35400 !important;
  border-color:     #E68A4F !important;
}

/* Punkt-Dot falls verwendet */
.fc-listWeek-view .fc-event-marker .fc-event-dot {
  width: 0.6em;
  height:0.6em;
  margin-right:0.5em;
}
.fc-list-event-dot {
  display: none !important;
}
/* Dot bleibt bei Bedarf erhalten */
@media print {
  @page {
    size: A4;
    margin: 15mm 10mm 15mm 10mm;
  }
  body {
    max-width: 190mm;
    margin: 0 auto;
    font-size: 10pt;
    visibility: hidden !important;
  }
  table {
    width: 100%;
    table-layout: fixed;
    font-size: 9pt;
    word-break: break-word;
  }
  .evline, tr { page-break-inside: avoid !important; }
}
  /* Alles ausblenden */


  /* Nur unseren Druck-Wrapper und seinen Inhalt sichtbar */
  #listPrintWrapper,
  #listPrintWrapper * {
    visibility: visible !important;
  }

  /* Den Wrapper oben links anordnen */
  #listPrintWrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}

/* Mehr vertikalen Puffer in der Tag-Zelle */
.fc-daygrid-day-frame {
  padding-top: 32px;    /* genug Platz für den Button oben */
  padding-bottom: 16px;
}

.c-badge {
  display: inline-block;
  border-radius: 5px;
  padding: 1px 6px;
  margin-right: 3px;
  font-size: 8.5pt;
  background: #e2e8f0;
  color: #222;
}
.badgetitel {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9pt;
  margin-right: 6px;
}
.evline > span:not(.badgetitel):not(.c-badge) {
  margin-right: 12px;
}

.versandart-highlight-lkw {
  background: #d97706;
  color: #fff;
  border-radius: 4px;
  padding: 1px 6px;
  margin: 0 2px;
  margin-bottom: 2px;
  font-weight: bold;
  display: inline-block;
}
.versandart-highlight-selbst {
  background: #3b82f6;
  color: #fff;
  border-radius: 4px;
  padding: 1px 6px;
  margin: 0 2px;
  margin-bottom: 2px;
  font-weight: bold;
  display: inline-block;
}

.wochen-notiz-cell {
  font-size:10.5pt;
  font-style:italic;
  background:#fffde7;
  color:#7e6114;
  border-left:3px solid #eed700;
  min-width:100px;
  vertical-align:top;
  white-space:pre-wrap;
}

.fc-event.highlight {
  border-left: 8px solid #fad100 !important;
}


.matrix-new-btn2 {
  display: block;
  margin: 8px auto 4px auto;
  padding: 0.29em 1.1em 0.29em 1.1em;
  font-size: 0.99em;
  background: #fffbe7;
  border: 1.2px solid #facc15;
  border-radius: 99px;
  color: #6c5700;
  font-weight: 500;
  font-family: inherit;
  box-shadow: 0 1.5px 10px #ffeeb788;
  transition: box-shadow 0.18s, border-color 0.18s, background 0.16s;
  letter-spacing: .01em;
  outline: none;
  cursor: pointer;
}
.matrix-new-btn2:hover, .matrix-new-btn2:focus {
  background: #fff8c0;
  border-color: #ffd700;
  color: #856800;
  box-shadow: 0 4px 15px #ffe28888;
}
.matrix-btn-icon {
  margin-right: 7px;
  vertical-align: -2px;
  display: inline-block;
  width: 18px; height: 18px;
}


/* ---------------- Matrix: modernes, variables Design ---------------- /
.matrix-table {
width: 100%;
border-collapse: separate; / für Abstände zwischen Zeilen /
border-spacing: 0 10px; / vertikaler Abstand zwischen Zeilen */
font-family: "Segoe UI", Roboto, Arial, sans-serif;
background: transparent;
color: var(--matrix-text, #243238);
-webkit-font-smoothing:antialiased;
}

/* Theme-Variablen (Default) */
.matrix-table {
--accent: #0ea5a4;
--accent-600: #088b89;
--header-bg: linear-gradient(180deg,#f8feff,#eef9f9);
--cell-bg: #ffffff;
--muted: #6b7a7a;
--note-bg: #fffde7;
--card-shadow: 0 6px 18px rgba(16,40,50,0.06);
--card-hover: 0 10px 28px rgba(16,40,50,0.09);
--radius: 10px;
}

/* ----- Themes ----- */
.matrix-table.theme-teal {
--accent: #0ea5a4;
--accent-600: #088b89;
--header-bg: linear-gradient(180deg,#f3fefa,#e6f9f7);
--cell-bg: #ffffff;
--muted: #2f4f4f;
--note-bg: #fffde7;
}
.matrix-table.theme-warm {
--accent: #d97706;
--accent-600: #b45b03;
--header-bg: linear-gradient(180deg,#fff8f0,#fff1e0);
--cell-bg: #fffefb;
--muted: #5a4030;
--note-bg: #fff8e3;
}
.matrix-table.theme-slate {
--accent: #334155;
--accent-600: #1f2a36;
--header-bg: linear-gradient(180deg,#f6f8fb,#eef2f6);
--cell-bg: #ffffff;
--muted: #475569;
--note-bg: #f6f8fa;
}

/* ----- Header (sticky) ----- */
.matrix-table thead th {
position: sticky;
top: 0;
z-index: 4;
background: var(--header-bg);
color: var(--muted);
font-weight: 700;
padding: 12px 16px;
text-align: left;
font-size: 0.85rem;
letter-spacing: 0.04em;
border-bottom: 1px solid rgba(16,40,50,0.04);
}

/* Runde Ecken oben am Header */
.matrix-table thead th:first-child { border-top-left-radius: var(--radius); }
.matrix-table thead th:last-child { border-top-right-radius: var(--radius); }

/* ----- Körper: jede Tabellenzeile als "Card" ----- */
.matrix-table tbody tr {
transition: transform 180ms ease, box-shadow 180ms ease;
}

/* Zellen: wirkliche Card‑Fläche innerhalb jeder Zeile */
.matrix-table tbody td {
background: var(--cell-bg);
padding: 12px 14px;
vertical-align: top;
border: none;
box-shadow: var(--card-shadow);
border-radius: 6px;
font-size: 0.95rem;
color: var(--matrix-text, #243238);
}

/* Make whole row look like one card by rounding first/last cell per row */
.matrix-table tbody td:first-child { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); }
.matrix-table tbody td:last-child { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); }

/* Wenn nur eine Spalte vorhanden (selten), weite Rundung */
.matrix-table tbody tr td:only-child {
border-radius: calc(var(--radius) - 2px);
}

/* Hover-Effekt: leichte Hebung */
.matrix-table tbody tr:hover td {
transform: translateY(-3px);
box-shadow: var(--card-hover);
}

/* Dezentere Zebra-Variante per Helligkeit (falls gewünscht) */
.matrix-table tbody tr:nth-child(even) td {
filter: brightness(0.995);
}

/* Erste Spalte (Notizen) extra Styling */
.matrix-table tbody td.notizzelle {
background: var(--note-bg);
color: var(--muted);
box-shadow: none;
border-radius: 8px;
font-style: italic;
min-width: 140px;
}

/* Wochennotizspalte (rechte Spalte) */
.matrix-table tbody td.wochen-notiz-cell {
background: var(--note-bg);
border-left: 4px solid rgba(0,0,0,0.03);
color: var(--muted);
font-style: italic;
min-width: 140px;
}

/* ----- Badges ----- */
.matrix-table .badge {
display: inline-block;
padding: 6px 10px;
border-radius: 999px;
font-weight: 700;
font-size: 0.86rem;
color: #fff;
margin-right: 8px;
margin-top: 4px;
box-shadow: inset 0 -2px rgba(0,0,0,0.04);
}

/* Neutral group badge */
.matrix-table .badge.group-badge {
background: rgba(0,0,0,0.75);
box-shadow: none;
font-size: 0.82rem;
}

/* kleine Info‑Badges */
.matrix-table .c-badge {
display:inline-block;
background: rgba(226,232,240,0.95);
color: #102;
padding: 3px 7px;
border-radius: 6px;
font-weight: 700;
font-size: 0.78rem;
margin-right:6px;
}

/* Versandeinblendungen */
.matrix-table .versandart-highlight-lkw {
background: #d97706;
color: #fff;
padding: 4px 8px;
border-radius: 6px;
font-weight: 700;
font-size: 0.82rem;
}
.matrix-table .versandart-highlight-selbst {
background: #3b82f6;
color: #fff;
padding: 4px 8px;
border-radius: 6px;
font-weight: 700;
font-size: 0.82rem;
}

/* Highlight‑Kante bei Events (falls verwendet) */
.matrix-table .highlight {
box-shadow: 0 0 0 4px rgba(250,208,0,0.08), var(--card-shadow);
}

/* Responsives: reduce paddings and radius */
@media (max-width: 900px) {
.matrix-table { border-spacing: 0 8px; }
.matrix-table thead th { padding: 10px; font-size: 0.82rem; }
.matrix-table tbody td { padding: 10px; font-size: 0.92rem; border-radius:6px; }
.matrix-table tbody td:first-child,
.matrix-table tbody td:last-child { border-radius: 8px; }
}

/* Print-Fallback: flache, druckfreundliche Tabelle */
@media print {
.matrix-table { border-spacing: 0; }
.matrix-table tbody td { box-shadow: none; background: #fff; border: 1px solid #ddd; border-radius: 0; padding: 6px; }
.matrix-table thead th { position: static; background: #f3f3f3; }
}

/* Optional: kleine Hilfsklasse, um die Linie zwischen Spalten stärker zu machen */
.matrix-table .col-sep {
border-left: 1px dashed rgba(16,40,50,0.04);
padding-left: 16px;
}

/* ---------------- Ende Matrix Styles ---------------- */

/* Regeneffekt – sanftes Einfallen beim Wochenwechsel, kein Dauereffekt */
@keyframes rainIn {
  0%   { transform: translateY(-20px); opacity: 0; }
  70%  { transform: translateY(2px);  opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* läuft nur während Body die Klasse .eventsJustLoaded trägt */
.eventsJustLoaded .fc-daygrid-event {
  animation: rainIn 0.55s ease forwards;
}

/* Nur beim ersten Render innerhalb der aktuellen View animieren */
.fc-view-active .fc-event {
  animation: rainInOnce 0.55s ease forwards;
  animation-delay: calc(var(--fc-event-index, 0) * 0.05s);
}

/* Grundlegende Optik + Glättung */
.fc-event {
  backface-visibility: hidden;
  will-change: transform, opacity;
  border-radius: 6px;

  transition:
    transform 0.3s ease,
    box-shadow 0.4s ease,
    filter 0.4s ease,
    background-color 0.4s ease;
}

/* Hover – weich und elegant */
.fc-event:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.45),
    0 3px 8px rgba(0,0,0,0.20);
  filter: brightness(1.08);
  cursor: pointer;
}



/* Modal Animation */

/* Modal mittig ausrichten */
#eventModal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);   /* zentriert genau mittig */
  z-index: 1000;                      /* über allem */
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  max-width: 640px;
  width: 90%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);

  /* deine aktuellen Animationen */
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

/* Sichtbarer Zustand mit Fade */
#eventModal.visible {
  transform: translate(-50%, -50%);
  opacity: 1;
}

/* Dunkler Hintergrund */
#overlay {
  position: fixed;
  inset: 0;                            /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.45);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#overlay.visible {
  opacity: 1;
}

/* Block ausgeklappt */
.weeknote-open {
  display: block !important;
}

/* Block eingeklappt */
.weeknote-collapsed {
  display: none !important;
}